Download presentation
Presentation is loading. Please wait.
1
JavaScript for Beginners
A Light Introduction for Non-programmers © 2008 D. J. Foreman
2
JavaScript A scripting language (provides automation) Event driven
Object oriented Platform Independent Secure © 2008 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 © 2008 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 © 2008 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 © 2008 D. J. Foreman
6
Variables, Statements & Control Structures
© 2008 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>"); © 2008 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, © 2008 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 © 2008 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 !-- browser ignores anything inside these markers -- The HTML comments are NOT used in JS Note: tag has 2 DASHES © 2008 D. J. Foreman
11
Statements used to control the "flow" of execution within a JS program
Control statements Statements used to control the "flow" of execution within a JS program © 2008 D. J. Foreman
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} © 2008 D. J. Foreman
13
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 © 2008 D. J. Foreman
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} © 2008 D. J. Foreman
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+"<br>"); © 2008 D. J. Foreman
16
One big problem Some very browsers may not accept JavaScript,
so we have to hide it from them... © 2008 D. J. Foreman
17
Hiding JavaScript (from old browsers)
<script language=“JavaScript” type="text/javascript"> <! hide the JavaScript The javascript code confuses the old browsers, so the comment tags hide them. The <script> and </script> tags will be ignored (remember the rule about unknown tags?) //-- </script> Note: Don’t forget the // too © 2008 D. J. Foreman
18
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> © 2008 D. J. Foreman
19
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> © 2008 D. J. Foreman
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 © 2008 D. J. Foreman
21
Object Hierarchy Browser History Window Location Document Links Anchor
Forms © 2008 D. J. Foreman
22
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 © 2008 D. J. Foreman
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) © 2008 D. J. Foreman
24
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 © 2008 D. J. Foreman
25
Examples of usage Can 'get' and ‘set’ properties of objects
document.title="this is my webpage title"; X=document.title; © 2008 D. J. Foreman
26
Document Methods clear() close() open() write() © 2008 D. J. Foreman
27
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; } © 2008 D. J. Foreman
28
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> © 2008 D. J. Foreman
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 © 2008 D. J. Foreman
30
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> © 2008 D. J. Foreman
31
Objects within Forms Text fields and areas Password Checkbox Radio
Select Button Reset Submit © 2008 D. J. Foreman
32
Limitations Interpreter is ‘hooked-into’ browser
Cookies work differently on Mac vs Win Can’t access files (open, read, write) © 2008 D. J. Foreman
Similar presentations
