SFDV2001 – Web Development Lecture  3: JavaScript
History – Mechanical Programs <ul><li>Charles Babbage </li></ul><ul><ul><li>Developed the first mechanical computation. </...
History - Computability <ul><li>Alan Turing </li></ul><ul><ul><li>Defined the set of all things that  </li></ul></ul><ul><...
History – Modern Computers <ul><li>John von Neumann </li></ul><ul><ul><li>Mathematician and Physicist. </li></ul></ul><ul>...
Computer Design <ul><li>Central processing unit (CPU) ‏ </li></ul><ul><ul><li>A central core that processes instructions ....
Computer Design <ul><li>Input </li></ul><ul><ul><li>Punch cards and switches. </li></ul></ul><ul><ul><li>Keyboards, mouse,...
Programming <ul><li>Writing programs for computing devices </li></ul><ul><li>Remember </li></ul><ul><ul><li>Sequence  </li...
Scripting <ul><li>A script is a list of stuff to do. </li></ul><ul><li>Works through a application that interprets the “sc...
JavaScript <ul><li>JavaScript is NOT JAVA </li></ul><ul><li>Similarity  </li></ul><ul><ul><li>both used on the web. </li><...
JavaScript <ul><li>Provides tools for: </li></ul><ul><ul><li>Mouse over events </li></ul></ul><ul><ul><li>Checking </li></...
Including JavaScript <ul><li>Script tag <script type=”....”>  </script> </li></ul><ul><li>HTML comment <!-- so old browser...
Commenting <ul><li>HTML comments  <!--  --> </li></ul><ul><li>JavaScript comments  /*  */   </li></ul><ul><ul><li>to end o...
Variables <ul><li>A name for an object </li></ul><ul><ul><li>var age = 31 </li></ul></ul><ul><li>Can be </li></ul><ul><ul>...
Functions and Methods <ul><li>A block of instructions that are collected together. </li></ul><ul><li>Allows reuse of code....
Parameters <ul><li>Variables or values passed to functions. </li></ul><ul><li>document.writeln( “string” ) ‏ </li></ul><ul...
Examples <ul><li>MouseOver effects </li></ul><ul><ul><li>Usually changing an image </li></ul></ul><ul><ul><li>Can do other...
Examples <ul><li>Popups </li></ul><ul><ul><li>Those irritating new windows </li></ul></ul><ul><ul><li>Blocked by lots of b...
Examples <ul><li>Form validation </li></ul><ul><ul><li>Good use of JavaScript. </li></ul></ul><ul><ul><li>Checks: </li></u...
Event Driven Programming <ul><li>Responding to things like </li></ul><ul><ul><li>Mouse Clicks </li></ul></ul><ul><ul><li>K...
Next <ul><li>The DOM and JavaScript. </li></ul><ul><li>More examples of JavaScript. </li></ul><ul><li>Objects. </li></ul><...
Upcoming SlideShare
Loading in...5
×

Lecture 3 Javascript1

989

Published on

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
989
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Change to local examples
  • Lecture 3 Javascript1

    1. 1. SFDV2001 – Web Development Lecture 3: JavaScript
    2. 2. History – Mechanical Programs <ul><li>Charles Babbage </li></ul><ul><ul><li>Developed the first mechanical computation. </li></ul></ul><ul><ul><li>Created the Difference Engine. </li></ul></ul><ul><ul><li>Designed the Analytical Engine. </li></ul></ul><ul><li>Ada Byron, Lady Lovelace </li></ul><ul><ul><li>Described the uses of the Analytical Engine. </li></ul></ul><ul><ul><li>Helped create the first computer program. </li></ul></ul>11/09/07 (SFDV2001:15)JavaScript
    3. 3. History - Computability <ul><li>Alan Turing </li></ul><ul><ul><li>Defined the set of all things that </li></ul></ul><ul><ul><li>could be computed. </li></ul></ul><ul><ul><li>Studied computability. </li></ul></ul><ul><ul><li>Tests for Artificial Intelligence. </li></ul></ul><ul><li>War hero </li></ul><ul><ul><li>Worked at Bletchley Park. </li></ul></ul><ul><ul><li>Headed the group working on breaking the Enigma. </li></ul></ul><ul><ul><li>Developed electronic machines to break codes. </li></ul></ul>11/09/07 (SFDV2001:15)JavaScript
    4. 4. History – Modern Computers <ul><li>John von Neumann </li></ul><ul><ul><li>Mathematician and Physicist. </li></ul></ul><ul><ul><li>Worked on the H-bomb. </li></ul></ul><ul><ul><li>Contributed to many areas. </li></ul></ul><ul><li>Computer Design </li></ul><ul><ul><li>Processing unit. </li></ul></ul><ul><ul><li>Memory. </li></ul></ul><ul><ul><li>Input and output. </li></ul></ul>11/09/07 (SFDV2001:15)JavaScript
    5. 5. Computer Design <ul><li>Central processing unit (CPU) ‏ </li></ul><ul><ul><li>A central core that processes instructions . </li></ul></ul><ul><ul><li>Increments a program counter. </li></ul></ul><ul><ul><li>Has small internal storage. </li></ul></ul><ul><li>Memory (RAM) ‏ </li></ul><ul><ul><li>An area to hold programs and data. </li></ul></ul><ul><ul><li>Accessible from the CPU. </li></ul></ul><ul><ul><li>An address for every location. </li></ul></ul><ul><ul><li>Bus connects CPU to memory. </li></ul></ul>11/09/07 (SFDV2001:15)JavaScript
    6. 6. Computer Design <ul><li>Input </li></ul><ul><ul><li>Punch cards and switches. </li></ul></ul><ul><ul><li>Keyboards, mouse, camera,... </li></ul></ul><ul><ul><li>Scanners. </li></ul></ul><ul><ul><li>GSR Galvanic Skin Response. </li></ul></ul><ul><ul><li>nMRI. </li></ul></ul><ul><li>Output </li></ul><ul><ul><li>Flashing lights, cards. </li></ul></ul><ul><ul><li>Screens, printers, speakers,... </li></ul></ul><ul><ul><li>Computer Aided Machining. </li></ul></ul>11/09/07 (SFDV2001:15)JavaScript
    7. 7. Programming <ul><li>Writing programs for computing devices </li></ul><ul><li>Remember </li></ul><ul><ul><li>Sequence </li></ul></ul><ul><ul><li>Selection </li></ul></ul><ul><ul><li>Repetition </li></ul></ul><ul><li>Central Processing Unit runs these instructions. </li></ul><ul><li>Memory holds data. </li></ul><ul><li>Input allows interaction. </li></ul><ul><li>Output lets us see what is going on. </li></ul>11/09/07 (SFDV2001:15)JavaScript
    8. 8. Scripting <ul><li>A script is a list of stuff to do. </li></ul><ul><li>Works through a application that interprets the “script”. </li></ul><ul><li>Scripting ability added to Netscape v2.0 </li></ul><ul><ul><li>Initially mocha then LiveScript. </li></ul></ul><ul><ul><li>Simple instructions. </li></ul></ul><ul><ul><li>New commands added over time. </li></ul></ul>11/09/07 (SFDV2001:15)JavaScript
    9. 9. JavaScript <ul><li>JavaScript is NOT JAVA </li></ul><ul><li>Similarity </li></ul><ul><ul><li>both used on the web. </li></ul></ul><ul><ul><li>similar syntax, based on C. </li></ul></ul><ul><ul><li>Objects are important. </li></ul></ul><ul><li>Not a universal standard </li></ul><ul><ul><li>Ecma standard script is similar. </li></ul></ul><ul><li>IE implements similar script called JScript. </li></ul><ul><li>Different bowsers different behaviour. </li></ul>11/09/07 (SFDV2001:15)JavaScript C Java JavaScript
    10. 10. JavaScript <ul><li>Provides tools for: </li></ul><ul><ul><li>Mouse over events </li></ul></ul><ul><ul><li>Checking </li></ul></ul><ul><ul><li>Navigation </li></ul></ul><ul><ul><li>Changing display </li></ul></ul><ul><li>Uses include: </li></ul><ul><ul><li>Allows developer to do more than HTML </li></ul></ul><ul><ul><li>Making pages responsive to the user </li></ul></ul><ul><ul><li>Much of the early uses superseded by CSS </li></ul></ul>11/09/07 (SFDV2001:15)JavaScript
    11. 11. Including JavaScript <ul><li>Script tag <script type=”....”> </script> </li></ul><ul><li>HTML comment <!-- so old browsers do not try to interpret it </li></ul><ul><li>JavaScript comment // before the --> so JavaScript does not try to interpret that bit </li></ul>11/09/07 (SFDV2001:15)JavaScript <script type=”text/javascript”> <!-- javascript code //--> </script>
    12. 12. Commenting <ul><li>HTML comments <!-- --> </li></ul><ul><li>JavaScript comments /* */ </li></ul><ul><ul><li>to end of line // </li></ul></ul><ul><li>Allows the developer to make notes and clarify issues. </li></ul><ul><li>Common comments include </li></ul><ul><ul><li>Author </li></ul></ul><ul><ul><li>Dates and versions </li></ul></ul><ul><ul><li>Problems and bugs </li></ul></ul><ul><ul><li>Explanation of complex processes </li></ul></ul>11/09/07 (SFDV2001:15)JavaScript
    13. 13. Variables <ul><li>A name for an object </li></ul><ul><ul><li>var age = 31 </li></ul></ul><ul><li>Can be </li></ul><ul><ul><li>numbers 31 </li></ul></ul><ul><ul><li>text “simon” </li></ul></ul><ul><ul><li>boolean true/false </li></ul></ul><ul><ul><li>null </li></ul></ul><ul><li>Example </li></ul><ul><ul><li>x = 5, y = 3 </li></ul></ul><ul><ul><li>document.writeln(x + y); outputs 8 </li></ul></ul>11/09/07 (SFDV2001:15)JavaScript
    14. 14. Functions and Methods <ul><li>A block of instructions that are collected together. </li></ul><ul><li>Allows reuse of code. </li></ul><ul><li>Makes things easier to read. </li></ul><ul><li>Examples </li></ul><ul><ul><li>document. write (“Hello World”); </li></ul></ul><ul><ul><li>Date (); </li></ul></ul><ul><ul><li>Math. sqrt (25); </li></ul></ul><ul><li>A method is a function attached to an object. </li></ul>11/09/07 (SFDV2001:15)JavaScript
    15. 15. Parameters <ul><li>Variables or values passed to functions. </li></ul><ul><li>document.writeln( “string” ) ‏ </li></ul><ul><ul><li>passed the string to write. </li></ul></ul><ul><li>window.open( “url”, “name”, “features” ) ‏ </li></ul><ul><ul><li>passed stings for: </li></ul></ul><ul><ul><ul><li>url, </li></ul></ul></ul><ul><ul><ul><li>name </li></ul></ul></ul><ul><ul><ul><li>features of the window </li></ul></ul></ul><ul><li>Math.sqrt( number ) ‏ </li></ul><ul><ul><li>passed the number to square root. </li></ul></ul>11/09/07 (SFDV2001:15)JavaScript
    16. 16. Examples <ul><li>MouseOver effects </li></ul><ul><ul><li>Usually changing an image </li></ul></ul><ul><ul><li>Can do other things, like popups </li></ul></ul><ul><ul><li>CSS is better for mouse overs that just change images. </li></ul></ul>11/09/07 (SFDV2001:15)JavaScript <img align=right src=&quot;cosc_logo.jpg&quot; onMouseOver = this.src=&quot;unilogo.gif&quot; onMouseOut = this.src=&quot;cslogo.jpg&quot;> <img align=right src=&quot;cosc_logo.jpg&quot; onMouseOver = this.src=&quot;unilogo.gif&quot; onMouseOut = this.src=&quot;cslogo.jpg&quot;> <img align=right src=&quot;cosc_logo.jpg&quot; onMouseOver = window.open(“http://www.otago.ac.nz”)> Change to local examples
    17. 17. Examples <ul><li>Popups </li></ul><ul><ul><li>Those irritating new windows </li></ul></ul><ul><ul><li>Blocked by lots of browsers and browser extensions </li></ul></ul><ul><ul><li>Last string for features such as </li></ul></ul><ul><ul><ul><li>toolbar, location, directories, status, menubar,.... </li></ul></ul></ul><ul><ul><ul><li>width=pixels </li></ul></ul></ul><ul><ul><ul><li>height=pixels </li></ul></ul></ul><ul><ul><li>Please don't use popups </li></ul></ul>11/09/07 (SFDV2001:15)JavaScript window.open(“http://www.otago.ac.nz”,”otago”,””) ‏ window.open(“”,”otago”,”width=40,height=40”) ‏
    18. 18. Examples <ul><li>Form validation </li></ul><ul><ul><li>Good use of JavaScript. </li></ul></ul><ul><ul><li>Checks: </li></ul></ul><ul><ul><ul><li>numbers are numbers </li></ul></ul></ul><ul><ul><ul><li>dates are valid </li></ul></ul></ul><ul><ul><ul><li>all data has been entered </li></ul></ul></ul><ul><ul><li>Gives feedback about selected items </li></ul></ul><ul><li>More about this next week </li></ul>11/09/07 (SFDV2001:15)JavaScript
    19. 19. Event Driven Programming <ul><li>Responding to things like </li></ul><ul><ul><li>Mouse Clicks </li></ul></ul><ul><ul><li>Keystrokes </li></ul></ul><ul><ul><li>Windows opening </li></ul></ul><ul><ul><li>Program termination </li></ul></ul><ul><li>JavaScript responds to events rather than polling. </li></ul><ul><ul><li>Polling – Are we there yet?, Are we there yet?, Are we there yet? Are.......... </li></ul></ul><ul><ul><li>Event – Car stopping - “Are we there?” </li></ul></ul>11/09/07 (SFDV2001:15)JavaScript
    20. 20. Next <ul><li>The DOM and JavaScript. </li></ul><ul><li>More examples of JavaScript. </li></ul><ul><li>Objects. </li></ul><ul><li>Form validation. </li></ul><ul><li>Problems with JavaScript. </li></ul>11/09/07 (SFDV2001:15)JavaScript
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×