Download presentation
Presentation is loading. Please wait.
1
JavaScript for Beginners
A Light Introduction for Non-programmers © 2006 D. J. Foreman
2
JavaScript A scripting language (provides automation) Event driven
Object oriented Platform Independent Secure ©2007 D. J. Foreman
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
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
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
6
Variables, Statements & Control Structures
©2007 D. J. Foreman
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 <br>"); ©2007 D. J. Foreman
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
9
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
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. Foreman
11
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
12
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
13
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
14
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
15
One big problem Some browsers may not accept JavaScript,
so we have to hide it from them... © 2006 D. J. Foreman
16
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
17
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
18
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
19
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
20
Object Hierarchy Browser History Window Location Document Links Anchor
Forms ©2007 D. J. Foreman
21
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
22
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
23
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
24
Examples of usage Can 'get' and ‘set’ properties of objects
document.title="this is my webpage title"; X=document.title; ©2007 D. J. Foreman
25
Document Methods clear() close() open() write() ©2007 D. J. Foreman
26
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
27
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
28
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
29
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
30
Objects within Forms Text fields and areas Password Checkbox Radio
Select Button Reset Submit ©2007 D. J. Foreman
31
Limitations Interpreter is ‘hooked-into’ browser
Cookies work differently on Mac vs Win Can’t access files (open, read, write) ©2007 D. J. Foreman
Similar presentations
