• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Introduction to javascript
 

Introduction to javascript

on

  • 1,362 views

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

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

Statistics

Views

Total Views
1,362
Views on SlideShare
1,351
Embed Views
11

Actions

Likes
0
Downloads
28
Comments
0

3 Embeds 11

http://www.linkedin.com 7
http://paper.li 2
https://www.linkedin.com 2

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • Javascript is not like java\n@adactio once said “Java is to Javascript as Ham is to Hamster”\n
  • HTML is the building blocks that websites are made\nThey are ‘elements’ of a web page\n
  • CSS is the styling, the decorations of the website.\n
  • So, we have a house. We have our HTML building blocks, and we have paint on the walls, and our sites are looking gooood :)\nWhy do we need javascript?\nThink of javascript as the electricity of the house. It makes things inside your house do stuff.\n
  • BBC uses it over their site... but just as an example\nhome page, boxes minimise, move, add etc. etc.\n
  • All over\nLogin box\nTop tweets\nTrending topics ticker\nThe list goes on\n
  • I am so pleased I can use this slide again :)\n\nAs you guessed it most modern sites use javascript\n
  • \n
  • Include the javascript file in your html file\n
  • \n
  • \n
  • Chrome Inspector or firefbug, or something similar... use it!\n
  • There are various common mistakes made\n
  • Adding an extra comma in an object\nremembering document.onready\nif (window.console)\ncamelCase styling\n
  • Classes are functions too...\n
  • \n
  • \n
  • The prototype object can also help you quickly add a custom method to an object that is reflected on all instances of it.\n
  • Adding extra functions on to the class\n
  • You can pass functions to other functions to act as callbacks.\n
  • Passing a one time callback method\n
  • Passing a defined callback method\n
  • Want to know more\n\nMozilla Developer Network\nHTML5 Spec\nMy Fancy-box fork on github\n
  • Want to know more\n\nMozilla Developer Network\nHTML5 Spec\nMy Fancy-box fork on github\n

Introduction to javascript Introduction to javascript Presentation Transcript

  • INTRODUCTIONTO JAVASCRIPTDMD12 BSc10th February 2011Syd Lawrence SIT BACK / SIT BACK LISTEN UP LISTEN UPslideshare.net/sydlawrence
  • WHATIS IT? SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/steve_chilton/1517222734
  • HTML SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/oskay/265899865/
  • CSS SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/creepstreeps/81346047/
  • JAVASCRIPT SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/veggiefrog/2573076568/
  • SIT BACK /SIT BACKLISTEN UPLISTEN UP
  • SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/executionsinfo/4573848874/
  • SYDLAWRENCE.COM SIT BACK / SIT BACK LISTEN UP LISTEN UPVictorian Times
  • HOW?https://gist.github.com/817379 SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/9550033@N04/4298402206
  • <script type=”text/javascript” src=”script.js”></script> SIT BACK / SIT BACK LISTEN UP LISTEN UP
  • // 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);
  • // 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
  • 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
  • COMMONMISTAKES SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/plucker/17269246/
  • // 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
  • CLASSES AREFUNCTIONS TOO SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/jiuck/4365662437/
  • 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
  • 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
  • PROTOTYPE SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/hugo90/4070460675/
  • //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
  • CALLBACKS SIT BACK / SIT BACK LISTEN UP LISTEN UPhttp://www.flickr.com/photos/splorp/64027565
  • 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
  • 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
  • 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
  • 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