Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
176 lines (135 sloc) 3.66 KB
<!doctype HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Intro to JavaScript: Part 7</title>
<link href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans+Mono|Tangerine" rel="stylesheet" type="text/css" />
<link href="css.css" rel="stylesheet"/>
<style>
.black span {background-color: #333; color: #ddd; padding: 3px 5px;}
#box {font-size: smaller;}
#presentation {background-color: #0B7AA2;}
</style>
</head>
<body>
<div id="topinfo">
</div>
<div id="info">
<p>Press <span class="key">&rarr;</span> key to advance.
Zoom in/out: <span class="key">Ctrl or Command</span> + <span class="key">+/-</span>.
</p>
</div>
<div id="presentation">
<div id="presentation-counter"></div>
<div id="slides">
<div class="slide intro">
<header><hgroup>
<h1>Basic JS: VII</h1>
<h3>Events: <br/> Make Things Happen</h3>
</hgroup></header>
</div>
</section>
</div>
<div class="slide normal">
<header><h1>Events</h1></header>
<section class="content">
<ul>
<li>mousedown</li>
<li>mouseup</li>
<li>click</li>
<li>dblclick</li>
<li>mousemove</li>
<li>mouseover</li>
<li>mouseout</li>
</ul>
</section>
</div>
<div class="slide normal">
<header><h1>Adding Events</h1></header>
<section class="content">
<p>Archaic method (really bad example)</p>
<pre contenteditable id="codeexample">var snippet = document.getElementById('codeexample');
snippet.<strong>onmouseover</strong> = pink;
snippet.<strong>onmouseout</strong> = notpink;
function pink(){
snippet.style.backgroundColor = '#f06';
}
function notpink(){
snippet.style.backgroundColor = '';
}
</pre>
</section>
</div>
<div class="slide normal">
<header><h1>addEventListener</h1></header>
<section class="content">
<pre contenteditable>myNode.addEventListener(type, listener, !bubble?);</pre>
<ul>
<li>register more than one event listener</li>
</ul>
<pre contenteditable>for(var i = 0; i &lt; lis.length ; i++){
lis[i].<strong>addEventListener</strong>("<strong>click</strong>", <strong>calledFunction</strong>);
}
function <strong>calledFunction</strong>(e){
/*do something*/
} </pre>
</section>
</div>
<div class="slide normal advanced">
<header><h1>Putting it all together</h1></header>
<section class="content">
<pre contenteditable style="max-height: 500px; overflow:auto">var namespace = {
promos: ['val1', 'val2', 'val3'],
setUpButtons: function(){
var listItems = document.querySelectorAll('#changeme li');
for(var i = 0; i < listItems.length; i++) {
listItems[i].addEventListener("click", namespace.showClasses, true);
}
},
showClasses: function(e) {
currentClass = this.getAttribute('class');
if(currentClass) {
this.innerHTML += ' class="' + currentClass + '"';
}
},
init: function(){
namespace.setUpButtons();
}
}
namespace.init();
</pre>
</section>
</div>
<div class="slide normal">
<header><h1></h1></header>
<section class="content">
But that doesn't work in IE8. <br>
IE8 / 7 / 6 etc do not understand<br>
<strong>addEventListener</strong>
</section>
</div>
<div class="slide intro">
<header><h1>Nope</h1></header>
<section class="content">
There's no more<br/>
<a href="http://www.youtube.com/embed/OQSNhk5ICTI">Go</a>
<br/>That's all Folks!!!!
<p>jQuery with Doris Next!</p>
</section>
</div>
</div>
</div>
<script src="slides.js">
</script>
<script>
var snippet = document.getElementById('codeexample');
snippet.onmouseover = pink;
snippet.onmouseout = notpink;
function pink(){
snippet.style.backgroundColor = '#f06';
}
function notpink(){
snippet.style.backgroundColor = '';
}
</script>
</body> </html>