My lecture to Winchester Uni students, 17th February 2011

1. JAVASCRIPT
DEVELOPMENT
DMD12 BSc
17th February 2011
Syd Lawrence SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP
slideshare.net/sydlawrence

2. DEBUGGING
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP
http://ker-.deviantart.com/art/Mario-World-HD-19771526

3. CONSOLE.LOG
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP
http://www.flickr.com/photos/stacker/111324504/

4. TYPES
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP
http://www.flickr.com/photos/stuartpilbrow/2938100285

5. NUMBERS
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP
http://www.flickr.com/photos/pinksherbet/236299644/

6. // force something into an integer
<code/>
parseInt(val)
parseInt(3.4) = 3
parseInt(“hello”) = NaN
// a random number
Math.random() = {random number between 0 & 1}
10 * Math.random() = {random number between 0 & 10}
// find the max or min
Math.max(0.5,0.6,0.7,0.2) = 0.7
Math.min(0.5,0.6,0.7,0.2) = 0.2
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP
MORE INFO: http://sydl.me/hB5RJk

7. STRINGS
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP
http://www.flickr.com/photos/archer10/2481165571

8. // find the length of a string
<code/>
“hello”.length = 5
// find a specific character
“hello”.charAt(1) = “e”
// string replace
“hello world”.replace(“hello”,””)
// string append
“hello” + “ “ + ”world” = “hello world”
// watch out for numbers!
“hello” + 23 = “hello23”
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP
MORE INFO: http://sydl.me/eZreGb

9. BOOLEANS
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP
http://www.flickr.com/photos/troyholden/4539140841/

10. // simple boolean
<code/>
“a” == 4 false
// AND
“a” == 4 && 5 == 5 false
// OR
“a” == 4 || 5 == 5 true
// NOT
!false true
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP
MORE INFO: http://sydl.me/f6I23b

11. FUNCTIONS
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP
http://www.flickr.com/photos/stefz/2159280574

12. // define
<code/>
foo = function(bar) {
alert(bar);
return true;
}
// assign
test = foo;
// call
test(‘hello world’);
foo(‘hello world’);
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP
MORE INFO: http://sydl.me/f6I23b

13. OBJECTS
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP
http://www.flickr.com/photos/h_is_for_home/2203667311

14. // associative array
<code/>
var assoc = {
name: 'syd',
email: 'syd@sydlawrence.com'
};
// object
var obj = {
name: 'syd',
email: 'syd@sydlawrence.com'
};
alert(obj.name);
alert(obj[‘name’]);
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP
MORE INFO: http://sydl.me/f6I23b

15. DOM
MANIPULATION
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP
http://www.flickr.com/photos/ecstaticist/2918198742

16. /*
<code/>
* RETRIEVING ELEMENTS
*/
// get by id
el = document.getElementById(‘test’);
// uses CSS 3 selector syntax
els = document.querySelectorAll(‘.some_class’);
// body
document.body
/*
* MODIFYING STYLE / CSS
*/
el.style.height = “20px”
el.style.display = “none”
el.style.marginLeft = “20px” // notice the marginLeft NOT margin-left
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP
MORE INFO: http://sydl.me/eYAiXT

17. /*
<code/>
* CREATING ELEMENTS
*/
var el = document.createElement(‘div’);
/*
* ASSIGNING ATTRIBUTES
*/
el.setAttribute(“id”,”test”);
el.setAttribute(“class”,”test_class”);
/*
* INSERTING HTML
*/
el.innerHTML = “Hello World”;
////////////////////////////////////
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP
<div id=”test” class=”test_class”>Hello World</div>

18. EVENTS
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP

19. WHEN...
DO...
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP
http://www.flickr.com/photos/monkeyc/121594837

20. <code/>
lights.addEventListener( ‘go_green’ ,
function() {
car.drive();
}
)
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP
MORE INFO: http://sydl.me/gnb8R5

21. document.onload = function() {
<code/>
/* this is run when the page loads */
}
element.onhover = function() {
/* when a mouse goes over an element */
}
element.onhover ‘same’ as
element.addEventListener(‘hover’)
// standard ones you will probably use at some point
onclick
onmouseover
onmousedown
onmouseup
onfocus
onblur
onmouseout
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP
MORE INFO: http://sydl.me/gnb8R5

22. BROWSER
SUPPORT
SIT BACK /
SIT BACK
LISTENUP
LISTEN UP
http://www.flickr.com/photos/annagaycoan/3750144703/

23. // Scott Andrew <code/>
function addEvent(elm, evType, fn, useCapture) {
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);
return true;
}
else if (elm.attachEvent) {
var r = elm.attachEvent('on' + evType, fn);
return r;
}
else {
elm['on' + evType] = fn;
}
}
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP
MORE INFO: http://sydl.me/eTCe2k

24. CREATE YOUR
OWN EVENTS
SIT BACK /
SIT BACK
LISTENUP
LISTEN UP
http://www.flickr.com/photos/stuartbryant/79949949

25. <code/>
el.dispatch("my_event");
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP

26. A LITTLE
TASK DUE
TODAY
(TOTALLY OPTIONAL)
For this week’s lecture I want you to all have attempted to create an HTML page with an
image.
When you hover over the image, the image changes in some way.
When you move your mouse away it goes back to how it was.
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP
You may choose how the image changes

27. <script type="text/javascript">
<code/>
document.body.onload = function() {
var el = document.getElementById('hover_image');
el.onmouseover = function(){
el.src = "http://farm3.static.flickr.com/2181/2358714455_34201aaf45_m.jpg";
}
el.onmouseout = function(){
el.src = "http://farm4.static.flickr.com/3154/2922782847_71be5cf3b7_m.jpg";
};
}
</script>
<img
src="http://farm4.static.flickr.com/3154/2922782847_71be5cf3b7_m.jpg"
alt="Hover over me :)"
id ="hover_image"
/>
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP
MORE INFO: http://sydl.me/hB5H2s

28. HOW DID
YOU DO?
SIT BACK /
SIT BACK
LISTENUP
LISTEN UP
http://www.flickr.com/photos/annagaycoan/3750144703/

29. A LITTLE
TASK DUE
IN A FORTNIGHT
(OPTIONAL BUT STRONGLY ADVISED)
I am away next week, so this time you have a fortnight
For this week’s lecture I want you to all have attempted to create an HTML page with an
image.
Create a custom event
Create a button which when clicked dispatches the custom event
Listen out for the custom event, and 1 second after the event, manipulate the image in
some way.
SIT BACK /
SIT BACK
LISTEN UP
LISTEN UP
You may choose how the image changes