Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Javascript Development

1,534 views

Published on

My lecture to Winchester Uni students, 17th February 2011

Published in: Technology

Javascript Development

  1. 1. JAVASCRIPTDEVELOPMENTDMD12 BSc17th February 2011Syd Lawrence SIT BACK / SIT BACK LISTEN UP LISTEN UPslideshare.net/sydlawrence
  2. 2. DEBUGGING SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://ker-.deviantart.com/art/Mario-World-HD-19771526
  3. 3. CONSOLE.LOG SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/stacker/111324504/
  4. 4. TYPES SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/stuartpilbrow/2938100285
  5. 5. NUMBERS SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/pinksherbet/236299644/
  6. 6. // 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
  7. 7. STRINGS SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/archer10/2481165571
  8. 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 UPMORE INFO: http://sydl.me/eZreGb
  9. 9. BOOLEANS SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/troyholden/4539140841/
  10. 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 UPMORE INFO: http://sydl.me/f6I23b
  11. 11. FUNCTIONS SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/stefz/2159280574
  12. 12. // 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
  13. 13. OBJECTS SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/h_is_for_home/2203667311
  14. 14. // 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
  15. 15. DOMMANIPULATION SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/ecstaticist/2918198742
  16. 16. /* <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
  17. 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. 18. EVENTS SIT BACK / SIT BACK LISTEN UP LISTEN UP
  19. 19. WHEN...DO... SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/monkeyc/121594837
  20. 20. <code/>lights.addEventListener( ‘go_green’ , function() { car.drive(); }) SIT BACK / SIT BACK LISTEN UP LISTEN UPMORE INFO: http://sydl.me/gnb8R5
  21. 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 pointonclickonmouseoveronmousedownonmouseuponfocusonbluronmouseout SIT BACK / SIT BACK LISTEN UP LISTEN UPMORE INFO: http://sydl.me/gnb8R5
  22. 22. BROWSERSUPPORT SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/annagaycoan/3750144703/
  23. 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 UPMORE INFO: http://sydl.me/eTCe2k
  24. 24. CREATE YOUROWN EVENTS SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/stuartbryant/79949949
  25. 25. <code/>el.dispatch("my_event"); SIT BACK / SIT BACK LISTEN UP LISTEN UP
  26. 26. 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
  27. 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 UPMORE INFO: http://sydl.me/hB5H2s
  28. 28. HOW DIDYOU DO? SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/annagaycoan/3750144703/
  29. 29. 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

×