Javascript Development

JAVASCRIPTDEVELOPMENTDMD12 BSc17th February 2011Syd Lawrence SIT BACK / SIT BACK LISTEN UP LISTEN UPslideshare.net/sydlawrence

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

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

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

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

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

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

// 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 UPMORE INFO: http://sydl.me/eZreGb

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

// 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 UPMORE INFO: http://sydl.me/f6I23b

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

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

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

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

DOMMANIPULATION SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/ecstaticist/2918198742

/* <code/>* RETRIEVING ELEMENTS*/// get by idel = document.getElementById(‘test’);// uses CSS 3 selector syntaxels = document.querySelectorAll(‘.some_class’);// bodydocument.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 UPMORE INFO: http://sydl.me/eYAiXT

/* <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>

EVENTS SIT BACK / SIT BACK LISTEN UP LISTEN UP

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

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

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 pointonclickonmouseoveronmousedownonmouseuponfocusonbluronmouseout SIT BACK / SIT BACK LISTEN UP LISTEN UPMORE INFO: http://sydl.me/gnb8R5

BROWSERSUPPORT SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/annagaycoan/3750144703/

// 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 UPMORE INFO: http://sydl.me/eTCe2k

CREATE YOUROWN EVENTS SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/stuartbryant/79949949

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

A LITTLETASK DUETODAY(TOTALLY OPTIONAL)For this week’s lecture I want you to all have attempted to create an HTML page with animage.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 UPYou may choose how the image changes

HOW DIDYOU DO? SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/annagaycoan/3750144703/

A LITTLETASK DUEIN A FORTNIGHT(OPTIONAL BUT STRONGLY ADVISED)I am away next week, so this time you have a fortnightFor this week’s lecture I want you to all have attempted to create an HTML page with animage.Create a custom eventCreate a button which when clicked dispatches the custom eventListen out for the custom event, and 1 second after the event, manipulate the image insome way. SIT BACK / SIT BACK LISTEN UP LISTEN UPYou may choose how the image changes

Javascript Development

by Syd Lawrence on Feb 16, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

Javascript Development — Presentation Transcript