© 2007 D. J. ForemanJS-1 A Light Introduction for Non-programmers JavaScript for Beginners

©2007 D. J. Foreman JS-2 JavaScript A scripting language (provides automation) Event driven Object oriented Platform Independent Secure

©2007 D. J. Foreman JS-3 So what’s the difference? JavaScript is NOT a true programming language JavaScript ONLY works in WebPages JavaScript ONLY works in a browser JavaScript is NOT like Java

©2007 D. J. Foreman JS-4 Some Uses for JavaScript Perform on-the-fly calculations Create user messages (alerts or dialogs) Read data from a table Customize web-pages at run-time Save time by eliminating server references Marquees Form manipulations

©2007 D. J. Foreman JS-5 How it works Browser loads the page Browser detects JavaScript Browser passes the script to the Interpreter Interpreter evaluates (performs) the script Script passes HTML back to Browser Browser displays page

©2007 D. J. Foreman JS-6 Variables, Statements & Control Structures

©2007 D. J. Foreman JS-7 Basics Variables: names that can hold data X, x, myval The var prefix is needed for objects and arrays and to "privatize" a name inside a function Expressions: perform computations X*Cuberoot(B) Statements: sentences that perform work X=x*y; // x and X are DIFFERENT document.write("aha ");

©2007 D. J. Foreman JS-8 Naming Conventions Each 'word' within the name of a variable usually gets capitalized: MySpecialName A constant (name for something that NEVER changes) is usually all caps: Math.PI, Math.LOG10E, MYINTRATE

©2007 D. J. Foreman JS-9 A strange statement Normal syntax: I=I+1; Shortened form: I++; ONLY for adding 1

©2007 D. J. Foreman JS-10 Adding comments Two kinds of JavaScript comments: // ignore remainder of this line /* ignore what's inside these markers */ VS One kind of HTML comment  !-- ignore what's inside these markers --  Note: tag ends with 2 DASHES before the ">"

© 2007 D. J. ForemanJS-11 Control statements Statements used to control the "flow" of execution within a JS program

©2007 D. J. Foreman JS-12 The if Statement Must be lowercase Tests a condition Controls flow of program Example: if (a==b) // note the TWO = signs {true part} else {false part}

©2007 D. J. Foreman JS-13 If (another example) if (a > b) document.write("See? 'A' was bigger"); else document.write('See? "A" was smaller or equal'); NOTE: single quotes inside the double-quoted strings or vice-versa

©2007 D. J. Foreman JS-14 The for Statement Must be lowercase Repeats a set of instructions Syntax: for (start ; test ; change) Example: for (i=1 ; i<10; i++) {instructions to be repeated go here}

©2007 D. J. Foreman JS-15 A short example X=window.prompt("number <10","0"); if (X>=10) document.write("number too big"); else for ( I=1 ; I<X ; I++) document.write(I+" ");

© 2007 D. J. ForemanJS-16 One big problem Some browsers may not accept JavaScript, so we have to hide it from them...

©2007 D. J. Foreman JS-17 Hiding JavaScript (from old browsers) <!-- hiding JavaScript These lines might confuse the browser, so the comment tags hide them. The and tags will be ignored (remember the rule about unknown tags?) //-- 

©2007 D. J. Foreman JS-18 Example 1: writing to the page <!-- hide the Javascript document.write (“I think we’re in trouble,Captain!"); // end of hide -->

©2007 D. J. Foreman JS-19 Example 2: A Prompt Window A PopUp Dialog <!-- hide from non-js browsers engrname = window.prompt("What's the engineer's name?",""); // pop-up text document.write("Thanks! Beam me up, " + engrname + "!! "); // note use of the "+" sign --> Display this line for every browser

©2007 D. J. Foreman JS-20 Events Connection between JS and the system Some pre-defined events: OnLoad / OnUnload OnClick / OnMouseOver OnFocus / OnBlur // see Prof. Hinton's website OnChange - lost focus and value changed OnSelect - text, textarea, password objects OnSubmit - with the form object

©2007 D. J. Foreman JS-21 Object Hierarchy Browser WindowHistoryLocation Document Links AnchorForms

©2007 D. J. Foreman JS-22 Some Document Properties alinkColor vlinkColor linkColor bgColor fgColor locationthe URL of this document titletext that appears in title-bar referrerURL of doc that linked to here

©2007 D. J. Foreman JS-23 Document Objects & Properties some examples document.title - contains the webpage title document.form (the form on the page) document.form.button1 (1st button on the form)

©2007 D. J. Foreman JS-24 More Document Objects Datemydate_object=new Date(); Mathx=Math.sqrt(xyz); framesframes[0] is the first frame stringsxyz="my data"; I=xyz.length; "mydata" is a string, as is the variable xyz objects have methods that perform work

©2007 D. J. Foreman JS-25 Examples of usage Can 'get' and ‘set’ properties of objects document.title="this is my webpage title"; X=document.title;

©2007 D. J. Foreman JS-26 Document Methods clear() close() open() write()

©2007 D. J. Foreman JS-27 Functions - program building blocks Function - user-defined sequence of code Placed between Defined within format: function function_name( ) {statements of the function go between the braces, and are ended with a semi-colon; }

©2007 D. J. Foreman JS-28 Invoking a Function – with onload <!-- function MYPOP() {xx=window.open("",xx,"menubar=yes, height=400, width=400"); xx.document.write(“Fire up the WarpDrive! ”); } // notice the difference from the prompt window //-- 

©2007 D. J. Foreman JS-29 Window.open Syntax Parameters URL, if any Name for new window Size attributes NOTEs: Quotes around WHOLE attribute string But no quotes around values in attributes

©2007 D. J. Foreman JS-30 Invoking a Function – from the body <!-- function MYPOP() {xx=window.open("",xx,"menubar=yes, height=400, width=400"); xx.document.write(“Fire up the WarpDrive! ”); } // notice the difference from window.prompt //--  <!-- MYPOP( ); -- 

©2007 D. J. Foreman JS-31 Objects within Forms Text fields and areas Password Checkbox Radio Select Button Reset Submit

©2007 D. J. Foreman JS-32 Limitations Interpreter is ‘hooked-into’ browser Cookies work differently on Mac vs Win Can’t access files (open, read, write)