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.

Introduction to javascript

1,551 views

Published on

These are the lecture slides used in the Introduction to Javascript lecture as part of the DMD12 BSc course at Winchester University.

You can find all sample code: https://gist.github.com/817379

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Introduction to javascript

  1. 1. INTRODUCTIONTO JAVASCRIPTDMD12 BSc10th February 2011Syd Lawrence SIT BACK / SIT BACK LISTEN UP LISTEN UPslideshare.net/sydlawrence
  2. 2. WHATIS IT? SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/steve_chilton/1517222734
  3. 3. HTML SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/oskay/265899865/
  4. 4. CSS SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/creepstreeps/81346047/
  5. 5. JAVASCRIPT SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/veggiefrog/2573076568/
  6. 6. SIT BACK /SIT BACKLISTEN UPLISTEN UP
  7. 7. SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/executionsinfo/4573848874/
  8. 8. SYDLAWRENCE.COM SIT BACK / SIT BACK LISTEN UP LISTEN UPVictorian Times
  9. 9. HOW?https://gist.github.com/817379 SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/9550033@N04/4298402206
  10. 10. <script type=”text/javascript” src=”script.js”></script> SIT BACK / SIT BACK LISTEN UP LISTEN UP
  11. 11. // standard variablesvar foo = “bar”;// when the window is ready (event listener)document.onready = function(event) {  /* do something */}// define a methodfunction foo(bar) {   alert(bar);}// boolean expressionsif (foo == "bar") {  /* do something */}// arrayvar arr = [a,b,c,d];// retrieving an element by id i.e. <div SIT BACK / SIT BACK LISTEN UP LISTEN UPid=element></div>var el = document.getElementById(element);
  12. 12. // associative arrayvar assoc = {  name: syd,  email: syd@sydlawrence.com};// objectvar obj = {  name: syd,  email: syd@sydlawrence.com};// for loopsfor (i in assoc) {  /* do something with assoc[i]; */  console.log(assoc[i]);}// retrieving an element by css selectors i.e. <div class=element></div>var el = document.querySelector(.element); SIT BACK / SIT BACK LISTEN UP LISTEN UP
  13. 13. DEBUGGING// similar to actionscripts trace methodconsole.log(obj);// try catchtry {  /* do something */}catch(e) {  /* an exception has been caught */} SIT BACK / SIT BACK LISTEN UP LISTEN UP
  14. 14. COMMONMISTAKES SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/plucker/17269246/
  15. 15. // THIS WILL THROW AN ERROR IN INTERNET EXPLORERvar obj = { a:‘a’, b:’b’, // remove the final ,}make sure the element has loaded before you try tomanipulate it.Not all browsers have console.logstyle.camelCaseel.style.backgroundColor = ‘#00ff00’; SIT BACK / SIT BACK LISTEN UP LISTEN UP
  16. 16. CLASSES AREFUNCTIONS TOO SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/jiuck/4365662437/
  17. 17. function Person() { this.first_name = "Syd"; this.last_name = "Lawrence"; this.email = "syd@sydlawrence.com"; this.fullName = function() { return this.first_name + " " + this.last_name; }}var person = new Person();// this will return "Syd Lawrence";var full_name = person.fullName(); SIT BACK / SIT BACK LISTEN UP LISTEN UP
  18. 18. function Person() { this.first_name = "Syd"; this.last_name = "Lawrence"; this.email = "syd@sydlawrence.com"; this.fullName = function() { return this.first_name + " " + this.last_name; }}var person = new Person();var person2 = new Person();// rename the first personperson.first_name = "Bob";// this will return "Bob Lawrence";person.fullName();// this will return "Syd Lawrence";person2.fullName(); SIT BACK / SIT BACK LISTEN UP LISTEN UP
  19. 19. PROTOTYPE SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/hugo90/4070460675/
  20. 20. //First, create the custom object "circle"function circle(){}circle.prototype.pi=3.14159;// create the object methodcircle.prototype.alertpi = function(){ alert(this.pi);} SIT BACK / SIT BACK LISTEN UP LISTEN UP
  21. 21. CALLBACKS SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/splorp/64027565
  22. 22. function Object() { this.runMethod = function(fn) { var data = "hi"; fn(data); }}var object = new Object();object.runMethod(function(data) { alert(data);}); SIT BACK / SIT BACK LISTEN UP LISTEN UP
  23. 23. function Object() { this.runMethod = function(fn) { var data = "world"; fn(data); }}var object = new Object();function alertData(data) { alert(data);}object.runMethod(alertData); SIT BACK / SIT BACK LISTEN UP LISTEN UP
  24. 24. WANT TOKNOW MOREhttp://www.javascriptkit.comhttp://dailyjs.com/BooksSimply Javascript: Everyting You Need To Learn Javascript From Scratch SIT BACK / SIT BACKThe JavaScript Anthology LISTEN UP LISTEN UPBuils Your Own Ajax Web Applications
  25. 25. A LITTLETASK DUE17th FEB 2011(TOTALLY OPTIONAL)For next week’s lecture I want you to all have attempted to create an HTML page withan 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 UPYou may choose how the image changes

×