Javascript Development

1,491 views

Published on

My lecture to Winchester Uni students, 17th February 2011

Published in: Technology
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
1,491
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
11
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • Do it...\nIf you come across a bug....\nFind out what is causing it\nFind out why\nTest with debug code\n
  • Chrome developer tools\nFirefox firebug\nInternet explorer, developer toolbar.... Forget it\nSafari developer tools\n
  • As with all languages there are different ‘types’ of variables\n
  • 1, 2, 3\n
  • \n
  • “hello”, “test”, “this is a test”\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 ‘fixes’ 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
  • This works cross browser\n
  • How did you do?\n
  • \n
  • 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

    ×