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
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
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
Editor's Notes
\n
Do it...\nIf you come across a bug....\nFind out what is causing it\nFind out why\nTest with debug code\n
As with all languages there are different &#x2018;types&#x2019; of variables\n
1, 2, 3\n
\n
&#x201C;hello&#x201D;, &#x201C;test&#x201D;, &#x201C;this is a test&#x201D;\n
\n
true, false\n
\n
methods\n
functions are variables also\n
as you may have noticed on last weeks slides, associative arrays are now objects also\n
Arrays are now objects also, such as associative arrays\n
Document Object Model (HTML etc etc)\n
\n
\n
JavaScript is event driven...\n
When the light goes green...\nDrive the car\n
THIS DOES NOT WORK IN < IE 9\nJust like in actionscript\n
This works in all browsers, however it replaces the function each time..\n
Different browsers have different capabilities, so we often have to implement &#x2018;fixes&#x2019; to get it to do something. Such as events\n
This works cross browser\n
Different browsers have different capabilities, so we often have to have to check which way to do something. Such as events\n
This works cross browser\n
Want to know more\n\nMozilla Developer Network\nHTML5 Spec\nMy Fancy-box fork on github\n