• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Lecture 3  Javascript1
 

Lecture 3 Javascript1

on

  • 1,132 views

 

Statistics

Views

Total Views
1,132
Views on SlideShare
1,132
Embed Views
0

Actions

Likes
0
Downloads
8
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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
  • Change to local examples

Lecture 3  Javascript1 Lecture 3 Javascript1 Presentation Transcript

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