JavaScript for Beginners A Light Introduction for Non-programmers © 2006 D. J. Foreman
JavaScript A scripting language (provides automation) Event driven Object oriented Platform Independent Secure ©2007 D. J. Foreman
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
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
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
Variables, Statements & Control Structures ©2007 D. J. Foreman
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 <br>"); ©2007 D. J. Foreman
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
A strange statement ONLY for adding 1 Normal syntax: Shortened form: I=I+1; Shortened form: I++; ONLY for adding 1 ©2007 D. J. Foreman
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. Foreman
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
If (another example) if (a > b) else 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
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
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+"<br>"); ©2007 D. J. Foreman
One big problem Some browsers may not accept JavaScript, so we have to hide it from them... © 2006 D. J. Foreman
Hiding JavaScript (from old browsers) <script language=“JavaScript” type="text/javascript"> <!-- hiding JavaScript These lines might confuse the browser, so the comment tags hide them. The <script> and </script> tags will be ignored (remember the rule about unknown tags?) //-- </script> ©2007 D. J. Foreman
Example 1: writing to the page <html> <body> <script language="JavaScript" type="text/javascript"> <!-- hide the Javascript document.write (“I think we’re in trouble,Captain!"); // end of hide --> </script> </body> </html> ©2007 D. J. Foreman
Example 2: A Prompt Window <HTML><TITLE>A PopUp Dialog</TITLE> <body> <script language="JavaScript" type="text/javascript"> <!-- hide from non-js browsers engrname = window.prompt("What's the engineer's name?",""); // pop-up text document.write("Thanks! Beam me up, " + engrname + "!!<br>"); // note use of the "+" sign --> </script> Display this line for every browser </body></HTML> ©2007 D. J. Foreman
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
Object Hierarchy Browser History Window Location Document Links Anchor Forms ©2007 D. J. Foreman
Some Document Properties alinkColor vlinkColor linkColor bgColor fgColor location the URL of this document title text that appears in title-bar referrer URL of doc that linked to here ©2007 D. J. Foreman
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
More Document Objects Date mydate_object=new Date(); Math x=Math.sqrt(xyz); frames frames[0] is the first frame strings xyz="my data"; I=xyz.length; "mydata" is a string, as is the variable xyz objects have methods that perform work ©2007 D. J. Foreman
Examples of usage Can 'get' and ‘set’ properties of objects document.title="this is my webpage title"; X=document.title; ©2007 D. J. Foreman
Document Methods clear() close() open() write() ©2007 D. J. Foreman
Functions - program building blocks Function - user-defined sequence of code Placed between <head> </head> Defined within <script> </script> format: function function_name( ) {statements of the function go between the braces, and are ended with a semi-colon; } ©2007 D. J. Foreman
Invoking a Function – with onload <html> <head> <script> <!-- function MYPOP() {xx=window.open("",xx,"menubar=yes, height=400, width=400"); xx.document.write(“Fire up the WarpDrive! <br>”); } // notice the difference from the prompt window //-- </script> </head> <body onload = MYPOP( ) > <!-- starts when page loads --> </body></html> ©2007 D. J. Foreman
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
Invoking a Function – from the body <html><head> <script> <!-- function MYPOP() {xx=window.open("",xx,"menubar=yes, height=400, width=400"); xx.document.write(“Fire up the WarpDrive! <br>”); } // notice the difference from window.prompt //-- </script></head> <body > <script><!-- MYPOP( ); -- </script> </body></html> ©2007 D. J. Foreman
Objects within Forms Text fields and areas Password Checkbox Radio Select Button Reset Submit ©2007 D. J. Foreman
Limitations Interpreter is ‘hooked-into’ browser Cookies work differently on Mac vs Win Can’t access files (open, read, write) ©2007 D. J. Foreman