![Page 1: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/1.jpg)
1
Introduction to JavaScript
Presented by
Dr. Billy Lim
Developed by
Dr. Billy B. L. Lim & Dr. Joaquin VilaApplied Computer Science
Illinois State University
From the InfoTech Internet/Intranet Series
![Page 2: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/2.jpg)
2
Agenda
Introduction Basic Language Features
– variables, expressions, operators, statements
The JavaScript Object Model – objects, properties, methods, events
Built-in Objects and Functions Examples and Miscellany
![Page 3: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/3.jpg)
3
What is JavaScript? (Formerly LiveScript) Sun's simple, cross-
platform, WWW scripting language adopted by Netscape and allies.
Compact, user-level, object-based now OO Ideal for making web pages “smart” Brief history
– developed (late 1995) primarily by Netscape, but in cooperation with Sun Microsystems Brendan Eich (Netscape) Bill Joy (Sun Microsystems)
![Page 4: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/4.jpg)
4
Why JavaScript?
Java and JavaScript becoming defacto standards
Huge leap from static HTML coding to Java programming
Scripting makes things easy No additional tools needed
– (a browser and text editor will do!)
![Page 5: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/5.jpg)
5
Server Based Processing
User’s InputServer
Processing
Client (browser) Server
![Page 6: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/6.jpg)
6
Client Based Processing
User’s Input Server Processing
Client (browser) Server
JavaScriptProcessing
![Page 7: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/7.jpg)
7
Uses of JavaScript
Tailor pages for the user Make interactive pages Process forms Provide CAI (computer-aided instructions) Special effects
![Page 8: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/8.jpg)
8
JavaScript and Navigator (and IE) versions
Navigator version Default JavaScript version <SCRIPT> tags supported Navigator earlier than 2.0 JavaScript not supported None
Navigator 2.0, I.E., 3.0a JavaScript 1.0 <SCRIPT LANGUAGE="JavaScript">
Navigator 3.0, IE 3.0b JavaScript 1.1 <SCRIPT LANGUAGE = "JavaScript1.1"> and all earlier versions
Navigator 4.0-4.05, IE 4.0 JavaScript 1.2 <SCRIPT LANGUAGE = "JavaScript1.2"> and all earlier versions
Navigator 4.06-4.7, IE 5.0 JavaScript 1.3 <SCRIPT LANGUAGE = "JavaScript1.3"> and all earlier versions
IE 5.0 (partially) JavaScript 1.4 <SCRIPT LANGUAGE = "JavaScript1.4"> and all earlier versions
Navigator 6, IE 5.5-6.0 JavaScript 1.5 <SCRIPT LANGUAGE = "JavaScript1.5"> and all earlier versions
Note: Microsoft’s version is called JScript Official standard is called ECMAScript
![Page 9: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/9.jpg)
9
Using JavaScript in HTML
JavaScript can be embedded in a HTML document in three ways: – 1. As statements and functions using the
SCRIPT tag. – 2. As event handlers using HTML tags. – 3. In javascript: <some javascript code here>
![Page 10: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/10.jpg)
10
Your First JavaScript ProgramFileName: hello.htm
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
// This is a comment in JavaScript
document.write("<h1>Hello folks!</h1>");
</SCRIPT>
</HEAD>
<BODY>
Welcome to this class!
</BODY>
</HTML>
Also, <script type="text/javascript">
![Page 11: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/11.jpg)
11
First Program (cont’d) <SCRIPT> and </SCRIPT> tags must surround
your JavaScript code
<SCRIPT LANGUAGE="JavaScript">
document.write("<h1>Hello folks!</h1>");
</SCRIPT>
Safest to put the tags within the <HEAD> LANGUAGE attribute is optional
![Page 12: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/12.jpg)
12
write Method
document.write directs the document object to write the given string
Examples:<script>counter = 10;document.write(counter);document.write("<h1>Counter is "+counter+"</h1>"); </script>
<script>document.write("<IMG SRC=‘small.gif’>"); // notice the use of “ and ‘
</script>
Concatenate the strings and numbertogether and write the resultingstring out
![Page 13: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/13.jpg)
13
Simple Interactions alert
– Displays an Alert dialog box with a message and an OK button.
– Syntax: alert("message");
– Example: alert(“You’re in a Special Area …”);
alert(“count=“+count); // count is a variable to be traced here
confirm– Displays a Confirm dialog box with the specified message and OK
and Cancel buttons.
– Syntax: confirm("message");
– Example: ans = confirm(“Are you sure you want to continue?”); ans will be true if OK is clicked or false if Cancel is clicked
![Page 14: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/14.jpg)
14
Simple Interactions (2) eval
– The eval function evaluates a string and returns a value. – Syntax: eval(stringExpression)– Example: eval(1+2*3) // gives 7 here
prompt– The prompt function prompts for a string value. – Syntax: prompt(“message”) or prompt(“message”, default value)– Example:
aString1 = prompt(“Enter Name”); aString2 = prompt(“Enter Salary”, 0);
– Note: The return value is a string. Need to convert if a numeric value is desired. Use parseInt() or parseFloat().
– Example: numSalary = parseInt(aString2); // parse aString2 into an int numSalary = numSalary + 500;
![Page 15: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/15.jpg)
15
Using javascript: (on the location field) Can test the simple interactions discussed above with the command to invoke the
JavaScript interpreter – javascript: on the location field of your browser (see figure below).
![Page 16: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/16.jpg)
16
JavaScript Debugging
In Firefox, Netscape, and Mozilla, type javascript: (on the location field) to get the console window so that you can see the error messages generated. Also, go to Error Console under Tools menu.
![Page 17: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/17.jpg)
17
JavaScript Debugging (2)
In Chrome, go to Tools > Developer Tools. The window should display the error, as shown below
![Page 18: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/18.jpg)
18
JavaScript Debugging (3)
In IE, when there is a script error on a page, a message appears on the bottom left corner. Double click on it to see the error.
![Page 19: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/19.jpg)
19
JavaScript Debugging (4)
Firebug extension for Firefox (http://www.joehewitt.com/software/firebug/)
![Page 20: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/20.jpg)
20
Language Features
![Page 21: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/21.jpg)
21
JavaScript vs. C/C++ Similarities (apply to Java too)
– comments /* */ and //– if, for, while, return– operators (arithmetic, relational, etc.)
Differences– In JavaScript
loose typing no file I/O library no pointers built-in string object
![Page 22: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/22.jpg)
22
Data Types
Numbers– 1, 3.14159, -99
Logical (Boolean) values– true or false (these two are the literal values that you
use to test the truth value of a logical expression) Strings
– “hello”, ‘hello’ null
– special keyword denoting null value
![Page 23: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/23.jpg)
23
String Literals A string literal is zero or more characters enclosed in double (")
or single (') quotes. A string must be delimited by quotes of the same type; that is, either both single quotes or double quotes. The following are examples of string literals:
– "Hello" – 'Hello' – "1234" – “one line \n another line”– '"Don\'t try that again!," I yelled.'
Escape character for single quote
![Page 24: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/24.jpg)
24
Variables
You use variables to hold values in your application.– Syntax:var Variablename ; // var => local variable; Otherwise, the variable is global
var Variablename = value;
JavaScript is a loosely typed language.myVar = 33;myVar = “Hello World”;myVar = 33 + “Hello World”; // gets “33Hello World” myVar = “Hello World” + 33; // gets “Hello World33 ”
![Page 25: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/25.jpg)
25
Variable Names A JavaScript identifier or name must start with a letter or
underscore ("_"); subsequent characters can also be digits (0-9). Letters include the characters "A" through "Z" (uppercase) and the characters "a" through "z" (lowercase). JavaScript is case-sensitive.
Some examples of legal names are: – Last_Name– status – _name
![Page 26: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/26.jpg)
26
Operators
Arithmetic + (Addition, String Concatenation)- (Subtraction, Unary Negation)* (Multiplication)/ (Division)% (Modulus) (e.g., 7 % 3 gives 1, the remainder of dividing 7 by 3)
++ (Preincrement, Postincrement) // increments a variable by 1
e.g., x = 1; alert(x++); alert (x) // displays 1, then 2e.g., x = 1; alert(++x); alert (x) // displays 2, then 2
-- (Predecrement, Postdecrement) // decrements a variable by 1
e.g., x = 1; alert(x--); alert (x) // displays 1, then 0e.g., x = 1; alert(--x); alert (x) // displays 0, then 0
![Page 27: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/27.jpg)
27
Operators (Cont...)
Assignment Operators = means assignment
PI = 3.14159; // var PI is assigned 3.14159
Op= (where op is one of +, -, *, /, etc.)x += y means x = x + y
x *= y means x = x * y
x -= y means x = x - y
x /= y means x = x / y
![Page 28: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/28.jpg)
28
Operators (Cont...)
Relational Operators==, != (Equality, Inequality)<, <=, =>, > (Arithmetic and String Comparison)! (Logical Not)&&, || (Logical AND, Logical OR)?: (Conditional Selection)
e.g., x = (1 < 5) ? ‘a’:’b’; // here, x gets ‘a’
conditionReturned if true Returned if false
![Page 29: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/29.jpg)
29
Operator Precedence The precedence of operators determines the order they are applied when
evaluating an expression. You can override operator precedence by using parentheses.
The precedence of operators, from lowest to highest is as follows: (Partial Listing)
– assignment = += -= *= /= %= – conditional ?: – logical-or || – logical-and && – equality == != – relational < <= > >= – addition/subtraction + - – multiply/divide * / % – negation/increment ! ++ -- – call, member () [] .
![Page 30: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/30.jpg)
30
Expressions
An expression is any valid set of literals, variables, and operators that evaluates to a single value.PI = 3.14159
12 + 6
2 * PI * r
x++
x -= 3
![Page 31: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/31.jpg)
31
Statements
Comments Variable Declaration / Assignment Conditionals Loops
– for loop– while loop– for...in loop– break and continue statements
with statement Function Definition
![Page 32: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/32.jpg)
32
Comments
// Single Line var x // this part of the line is a comment /* Multiline Comment
Line 2.....
Line 3 */
![Page 33: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/33.jpg)
33
Conditionals
Syntax
if (condition) {
statements
} [else { else statements
}]
Note: else part is not required; [ ] signifies that it is optional
Examples
<script>var marriedCount = 0;var singleCount = 0;status = prompt("What is your status (0 or 1)?")if (status == 1) { deduction = 500; marriedCount++;} else { deduction = 100; singleCount++;}alert("Your deduction is: " + deduction);</script>
![Page 34: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/34.jpg)
34
Loops – for
Syntaxfor ([initial expression]; [condition]; [update expression]) {
statements
}
Examplefor (var i = 0; i < 10; i++) {
document.write(i);
}
Output:???
![Page 35: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/35.jpg)
35
Loops – for-in Syntax
for (var in obj) {
statements }
ExamplesFileName: Winloop.htm<SCRIPT>// The following script shows all of the properties of the window object.for (var i in window) document.write (i + "<BR>");</SCRIPT>
FileName: Winloop2.htm<SCRIPT>// The following script shows all of the properties and their values of the window object.for (var i in window) document.write (i + "=" + window[i]+ "<BR>");</SCRIPT>
![Page 36: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/36.jpg)
36
Loops – while
Syntaxwhile (condition) { statements
} Example
n = 0;x = 0;while ( n < 3 ) { n ++ ;
x = x + n;document.write(n,x);
}
Output:1 12 33 6
![Page 37: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/37.jpg)
37
Functions Function
– A user-defined or built-in set of statements that perform a task. It can also return a value when used with the return statement.
– Syntax:
function name([param] [, param] [..., param]) { // param’s are optional statements
} Example
// Takes 2 values and returns the smaller of the twofunction findMin (value1, value2) {
if (value1 < value2) return (value1);
else return (value2);
}answer = findMin(50,50); // function callalert("Your answer is: " + answer);
Output:???
![Page 38: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/38.jpg)
38
Arguments and ParametersFileName: argument.htm<HEAD><SCRIPT LANGUAGE="JavaScript"><!-- to hide script contents from old browsers function square(i) { document.write("The call passed “+ i + " to the function.“+"<BR>") return i * i } document.write("The function returned “+square(8)+".")// end hiding contents from old browsers --></SCRIPT></HEAD><BODY><BR>All done.</BODY>
![Page 39: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/39.jpg)
39
Arrays An array is an ordered set of values associated with
a single variable name.– Syntax:
arrayName = new Array()arrayName = new Array(arrayLength) // no enforcement of length
– To access the elements of an arrayarrayName[elementIndex]
– The first element of an array has an index of zero (0)
![Page 40: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/40.jpg)
40
Arrays (Cont...)
Example: Each of these elements can be accessed by its index, as follows: – myCar[0] = "Ford"– myCar[1] = "Mustang"– myCar[2] = 67
Note: – Array elements can be heterogeneous (can
contain elements of multiple data types)
![Page 41: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/41.jpg)
41
Arrays (Cont...) Properties and arrays in JavaScript are intimately
related; in fact, they are different interfaces to the same data structure.
Example:– you could set the properties of the myCar object described above as
follows: myCar["make"] = “Benz" myCar["model"] = “M Class 320" myCar["year"] = 99Or myCar.make = " Benz" myCar.model = " M Class 320" myCar.year = 99
![Page 42: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/42.jpg)
42
Arrays (Cont...)
Example:
FileName: Array-with-ForIn.htm
// This prints only the defined values of the array
<script>
for (i in anArray)
document.write("anArray at "+i+" = "+anArray[i] +"<BR>");
</script>
![Page 43: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/43.jpg)
43
Arrays (Cont...) Other syntax of defining arrays: // TestOtherArraySyntax.htm
<script>function compare(a,b) {
return a-b;}anArray = new Array("Freshman","Sophomore","Junior","Senior");anArray2 = ["Computer Science","Mathematics","Accounting","Biology","Political Science"];anArray3 = [10, 300, 20, 40];for (i in anArray)
document.write("anArray at "+i+" = "+anArray[i] +"<BR>");document.write("<hr>");anArray2.sort(); // do sorting of stringsfor (i in anArray2)
document.write("anArray at "+i+" = "+anArray2[i] +"<BR>");document.write("<hr>");anArray3.sort(); // does not sort the numbers!for (i in anArray3)
document.write("anArray at "+i+" = "+anArray3[i] +"<BR>");document.write("<hr>");anArray3.sort(compare);for (i in anArray3)
document.write("anArray at "+i+" = "+anArray3[i] +"<BR>");</script>
![Page 44: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/44.jpg)
44
Arrays (Cont...)
JavaScript’s Object Model (later on this) consists of many arrays that allow you to manipulate the objects on a web document.
For example,– frames (from window) // window.frames[0]….
– anchors (from document) // document.anchors[0]….
– applets (from document) // document.applets[0]….
– forms (from document) // document.forms[0]….
– images (from document) // document.images[0]….
– layers (from document) // document.layers[0]….
– links (from document) // document.links[0]….
– elements (from form) // document.forms[0].elements[0]….
– options (from select) // document.forms[0]. elements[0].options[0]….
![Page 45: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/45.jpg)
45
JavaScript Object Model
Object-based (not object-oriented) scripting language– can manipulate instances of JavaScript’s built-in object types
e.g., date, document, location, etc.
– objects have properties (i.e., characteristics of objects) e.g., document.bgColor, ...
– objects have methods (i.e., services provided by the objects) e.g., document.write(“Hello”), ...
Can also create and use your own objects– later on this ...
![Page 46: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/46.jpg)
46
Objects and Properties Objects in Navigator exist in a hierarchy that reflects the hierarchical structure of the
HTML page itself
HTML Page in a Window Corresponding JavaScript Objects
window (= the window instance)document (= the page)links (= array with all the links in the page)images (= array with all the images)etc.
![Page 47: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/47.jpg)
47
document.images[0]document.images[1]document.images[2]
document.forms[0].elements[0]document.forms[0].elements[1]document.forms[0].elements[2]document.forms[0].elements[3]document.forms[0].elements[4]
document.links[0]document.links[1]document.links[2]
![Page 48: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/48.jpg)
48
Objects and Properties (2)
An object's "descendants" are properties of the object– e.g., a form named "form1" is an object, but is also a property of document, and is
referred to as "document.form1"
ParentObject
ChildObject
Property of parent object
Property of child object
Property only
an object and a property
![Page 49: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/49.jpg)
49
Object Hierarchy (DOM)
Built-in Objects:• String• Date• Array• Boolean• Math
![Page 50: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/50.jpg)
50
Objects in a Page Every page has the following objects:
– navigator: has properties for the name and version of the Navigator being used, for the MIME types supported by the client, and for the plug-ins installed on the client.
– window: the top-level object; has properties that apply to the entire window. There is also a window object for each "child window" in a frames document.
– document: contains properties based on the content of the document, such as title, background color, links, and forms.
– location: has properties based on the current URL.
– history: contains properties representing URLs the client has previously requested.
Depending on its content, the document may contain other objects.
– For instance, each form (defined by a FORM tag) in the document has a corresponding Form object.
![Page 51: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/51.jpg)
51
Objects at WorkFileName: firstFormEvent.htm<HEAD><SCRIPT LANGUAGE="JavaScript">function compute(aForm) { if (confirm("Are you sure?")) aForm.result.value = eval(aForm.expr.value) else alert("Please come back again.")}</SCRIPT></HEAD><BODY><FORM name=“MyForm”>Enter an expression:<INPUT TYPE="text" NAME="expr" SIZE=15 ><INPUT TYPE="button" VALUE="Calculate" onClick="compute(this.form)“ ><BR>Result:<INPUT TYPE="text" NAME="result" SIZE=15 ><BR></FORM></BODY>
![Page 52: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/52.jpg)
52
Objects at Work
Dissection of the example– “this” refers to the object in question– this.form refers the form that the object in question is
defined in Thus, “compute(this.form)” calls the compute function and
passes the form that the button object resides in to the function. Other means of passing:
– “compute()” => Here, no form is passed into the function. Thus, to access result, one needs document.MyForm.result.value instead of form.result.value (the same is true for expr)
– “compute(this)” => Here, the button object is passes into the function. This would not be meaningful since the button object itself in not needed in the function. The two text fields are the ones that are needed.
![Page 53: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/53.jpg)
53
Document Object: UsegetElementById()
<html><head><script type="text/javascript">function getElement() {
var x=document.getElementById("myHeader")alert("I am a " + x.tagName + " element")
}function getElement2() {
var x=document.getElementsByName("myHeader2") // x gets an array of elementsalert("I am a " + x[0].tagName + " element")
}</script></head><body><h1 id="myHeader" onclick="getElement()">Click to see what element I am!</h1><h2 name="myHeader2" onclick="getElement2()">Click to see what element I am!</h1></body></html>
Source: Modified from Shin’s JavaScript
![Page 54: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/54.jpg)
54
Document Object: UsegetElementsByName()
<html><head><script type="text/javascript">function getElements() {
var x=document.getElementsByName("myInput")alert(x.length + " elements!")
}</script></head><body><input name="myInput" type="text" size="20"><br /><input name="myInput" type="text" size="20"><br /><input name="myInput" type="text" size="20"><br /><br /><input type="button" onclick="getElements()" value="How many elements named 'myInput'?"></body></html>
Source: Shin’s JavaScript
![Page 55: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/55.jpg)
55
Featured Objects
(in alphabetical order)
![Page 56: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/56.jpg)
56
Checkbox Object
A checkbox on an HTML form A toggle switch that lets the user set a value on or
off Properties
– checked lets you programatically check a checkbox – defaultChecked reflects the CHECKED attribute – name reflects the NAME attribute – value reflects the VALUE attribute
![Page 57: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/57.jpg)
57
Checkbox Object (2) Methods: click Event handlers: onClick Property of: form Example:
The following example displays a group of four checkboxes that all appear checked by default.
– <B>Specify your music preferences (check all that apply):</B>– <BR><INPUT TYPE="checkbox" NAME="musicpref_rnb" CHECKED> R&B– <BR><INPUT TYPE="checkbox" NAME="musicpref_jazz" CHECKED> Jazz– <BR><INPUT TYPE="checkbox" NAME="musicpref_blues" CHECKED> Blues– <BR><INPUT TYPE="checkbox" NAME="musicpref_newage" CHECKED> New Age
![Page 58: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/58.jpg)
58
Checkbox Object (3) Example:
FileName: toUpper.htm<SCRIPT>function convertField(field) { if (document.form1.convertUpper.checked) { field.value = field.value.toUpperCase()}}function convertAllFields() { document.form1.lastName.value = document.form1.lastName.value.toUpperCase() document.form1.firstName.value = document.form1.firstName.value.toUpperCase()}</SCRIPT><FORM NAME="form1"><B>Last name:</B><INPUT TYPE="text" NAME="lastName" SIZE=20 onChange="convertField(this)"><BR><B>First name:</B><INPUT TYPE="text" NAME="firstName" SIZE=20 onChange="convertField(this)"><P><INPUT TYPE="checkBox" NAME="convertUpper" onClick="if (this.checked) {convertAllFields()}"> Convert fields to upper case</FORM>
![Page 59: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/59.jpg)
59
Date Object
Gets and sets the dates and times. A top-level built-in object Two (of many) ways to create a Date object:
– dateObjectName = new Date() // current moment– dateObjectName = new Date(year, month, day, hours,
minutes, seconds)
Properties– None.
![Page 60: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/60.jpg)
60
Date Object (2)
Methods (partial list)– getDate, getDay, getHours, getMinutes, getMonth, getSeconds,
getTime, getYear, parse, setDate, setHours, setMinutes, setMonth, setSeconds, setTime, setYear, toGMTString, toLocaleString, UTC
Event handlers– None. Built-in objects do not have event handlers.
Property of– None.
![Page 61: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/61.jpg)
61
Date Object (3)
Examples– now = new Date()– birthday = new Date("December 17, 1995
03:24:00")– birthday = new Date(95,11,17) // month’s range: 0 - 11
– birthday = new Date(95,11,17,3,24,0)– currentYear = birthday.getYear()
![Page 62: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/62.jpg)
62
Date Object (4)
Examples<script>now = new Date();document.write("Time: "+now.getHours()+":"+now.getMinutes()+"<br>");document.write("Date: ” + (now.getMonth()+1) + "/” + now.getDate() + "/” +
(1900+now.getYear()));</script>
outputTime: 9:48
Date: 6/16/1999
Better to use getFullYear()– This gives a 4-digit year
Need this addition in Netscape.IE will return the correct year
![Page 63: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/63.jpg)
63
Document Object
Contains information on the current document (e.g., title, last modified, color), and provides methods for displaying HTML output to the user.
To use a document object's properties and methods: – 1. document.propertyName– 2. document.methodName(parameters)
![Page 64: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/64.jpg)
64
Document Object (2)
Properties– alinkColor reflects the ALINK attribute – anchors is an array reflecting all the anchors in a document – applets is an array of objects corresponding to the applets in a document in source order. – bgColor reflects the BGCOLOR attribute – cookie specifies a cookie (string value representing all of the cookies associated with this
document)– fgColor reflects the TEXT attribute – forms is an array reflecting all the forms in a document – lastModified reflects the date a document was last modified – linkColor reflects the LINK attribute – links is an array reflecting all the links in a document – location reflects the complete URL of a document – referrer reflects the URL of the calling document – title reflects the contents of the <TITLE> tag – vlinkColor reflects the VLINK attribute
![Page 65: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/65.jpg)
65
Document Object (3) Methods
– clear, close, open, write, writeln Event handlers
– None. The onLoad and onUnload event handlers are specified in the <BODY> tag but are actually event handlers for the window object.
Property of– Window (or Frame) object
Examples:– document.fgColor = "#ff0000"– document.form1.controlname = ...
![Page 66: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/66.jpg)
66
Form Object (Forms Array)
Lets users input text and make choices from form objects such as checkboxes, radio buttons, and selection lists.
Can also be used to post data to a server To use a form object's properties and methods:
– 1. formName.propertyName– 2. formName.methodName(parameters)– 3. forms[index].propertyName– 4. forms[index].methodName(parameters)
![Page 67: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/67.jpg)
67
Form Object (Forms Array) (2) The forms array
– 2 ways of referencing forms by using the forms array by using the form names
– form array contains an entry for each form object (<FORM> tag) in a document in source order.
– e.g., if a document contains three forms, these forms are reflected as document.forms[0], document.forms[1], and document.forms[2].
– To use the forms array: 1. document.forms[index] 2. document.forms.length
![Page 68: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/68.jpg)
68
Form Object (Forms Array) (3) Properties
– action reflects the ACTION attribute – elements is an array reflecting all the elements in a form – encoding reflects the ENCTYPE attribute – length reflects the number of elements on a form – method reflects the METHOD attribute – target reflects the TARGET attribute – length reflects the number of forms in a document (for forms array)
Methods: submit
Event handlers: onSubmit Property of: document
![Page 69: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/69.jpg)
69
Frame Object (Frames Array)
Frames enable the display of multiple independently scrollable frames on a single screen, each with its own distinct URL.
Frames can point to different URLs as well as be targeted by other URLs - all within the same screen.
![Page 70: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/70.jpg)
70
Frames (2)
Frames HTML Syntax:
<HTML>
<HEAD>
</HEAD>
<FRAMESET>
</FRAMESET>
</HTML>
The Frame definitions go between the frameset tags
![Page 71: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/71.jpg)
71
Frames (3)
The arguments taken by frameset tag are– ROWS - is the row values for the frames embedded in that
frameset.– COLS - takes the column values for the frames in the frameset– the values can be numbers or percentages
Example
<frameset cols="200,*">
</frameset>
<frameset rows="30%,70%>
</frameset>
![Page 72: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/72.jpg)
72
Frames (4)
Inside framesets the only permitted tags are other framesets, frames and noframes.
Frame tag defines the actual frames. It takes arguments like SRC, MarginWidth, Scrolling etc.
noframes tag provide alternate content for browsers not having frames capability
![Page 73: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/73.jpg)
73
Frames (5)
Sample frame scripting
<html>
<frameset rows="50%,*">
<frame src="http://www.yahoo.com">
<frame src="http://www.ilstu.edu">
</frameset>
</html>
![Page 74: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/74.jpg)
74
Frames (6)
Frames with name tag:<title>WebQuiz using JavaScript</title>
<frameset cols=60%,*>
<frame src="webQuiz.htm" name="main">
<frame src="webAnsw.htm" name="hello">
</frameset>
Hypertext reference with a “Target” tag:
<h3>Correct Answers</h3>
<A href="webAnsw.htm#a1" Target="hello">#1</a>
![Page 75: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/75.jpg)
75
Hidden Object
A text object that is suppressed from form display on an HTML form. A hidden object is used for passing name/value pairs when a form submits.
Typically used with CGI scripts to pass special data between the browser and the server
Value is reset when the document is reloaded (unlike other form elements)
![Page 76: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/76.jpg)
76
Hidden Object (cont’d)
Example:// uses a hidden object to store the value of the last object the user clicked
FileName: hidden.htm<FORM NAME="form1"><INPUT TYPE="hidden" NAME="hiddenObject" VALUE="None"><P><INPUT TYPE="button" VALUE="Click me" NAME="button1" onclick="document.form1.hiddenObject.value=this.value"><P><INPUT TYPE="radio" NAME="musicChoice" VALUE="jazz" onClick="document.form1.hiddenObject.value=this.value"> Jazz<P><INPUT TYPE="button" VALUE="Display hidden value"
NAME="button2" onClick="alert('Last object clicked: ' + document.form1.hiddenObject.value)">
</FORM>
![Page 77: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/77.jpg)
77
Image Object / Images Array
Image array called document.images– created for all images defined by <IMG>– each is an Image object– use: document.images[0], document.images[1],
etc.– can dynamically change the content of graphics
document.images[0].src = “http://xyz.com/1.gif”;
![Page 78: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/78.jpg)
78
Location Object
Contains information on the current URL Use this object to set or get the URL of a window
or frame Properties
– same as the ones in link object Methods: None.
Event handlers: None.
Property of: document
![Page 79: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/79.jpg)
79
Location Object (2)
Examples:– // sets the URL of the current window to the
Netscape home page: window.location.href=“http://home.netscape.com/”or simply document.location=“http://home.netscape.com/”
– // sets the URL of a frame named frame2 to the Sun home page: parent.frame2.location.href="http://www.sun.com/"
![Page 80: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/80.jpg)
80
Navigator Object Use the navigator object to determine which version of
the Navigator your users have. Properties
– appCodeName specifies the code name of the browser – appName specifies the name of the browser – appVersion specifies version information for the Navigator – userAgent specifies the user-agent header
Methods: None. Event handlers: None. Property of: None. Example:
– alert(“This version of Netscape is “ + navigator.appVersion)
![Page 81: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/81.jpg)
81
Radio Object
A set of radio buttons on an HTML form, allowing the user choose one item from a list.
All radio buttons in a radio button group use the same name property.
To access the individual radio buttons, follow the object name with an index starting from zero
– document.forms[0].radioName[0] is the first radio button, document.forms[0].radioName[1] is the second, etc.
– or myForm.radioName[0], etc. // access a form using its name
![Page 82: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/82.jpg)
82
Radio Object (2) Properties
– checked lets you programatically select a radio button and check if a radio button is checked or not.
– defaultChecked reflects the CHECKED attribute – length reflects the number of radio buttons in a radio object – name reflects the NAME attribute – value reflects the VALUE attribute
Methods: click
Event handlers: onClick Property of: form
This means that you can check which radio button is selected by doing:
if (myForm.musicChoice[0].checked == true) … // first radio button is checked
![Page 83: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/83.jpg)
83
Radio Object (3) Examples
FileName: radio.htm<form name=musicForm><INPUT TYPE="radio" NAME="musicChoice" VALUE="soul-and-r&b" onClick="musicForm.catalog.value = 'soul-and-r&b'"> Soul and R&B<INPUT TYPE="radio" NAME="musicChoice" VALUE="jazz" onClick="musicForm.catalog.value = 'jazz'"> Jazz<INPUT TYPE="radio" NAME="musicChoice" VALUE="classical" onClick="musicForm.catalog.value = 'classical'"> Classical<BR> Selected Music:<INPUT TYPE="text" NAME="catalog" SIZE="20"></form>
![Page 84: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/84.jpg)
84
Radio Object (4)
Example:Submit form using a server program (a home-made Java servlet called EchoAll)
FileName: radio2.htm<form name=musicForm method="get" action="http://appsrv.acs.ilstu.edu/bllim/servlet/EchoAll">
<INPUT TYPE="radio" NAME="musicChoice" VALUE="soul-and-r&b" onClick="musicForm.catalog.value = 'soul-and-r&b'"> Soul<br>
<INPUT TYPE="radio" NAME="musicChoice" VALUE="jazz" onClick="musicForm.catalog.value = 'jazz'"> Jazz<br>
<INPUT TYPE="radio" NAME="musicChoice" VALUE="classical" onClick="musicForm.catalog.value = 'classical'"> Classical<br>
<BR>
Selected Music: <INPUT TYPE="text" NAME="catalog" SIZE="20">
<input type="submit">
</form>
![Page 85: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/85.jpg)
85
Select Object (Options Array)
A selection (“drop-down”) list or scrolling list on an HTML form. A selection list lets the user choose one item from a list. A scrolling list lets the user choose one or more items from a list.
Properties– The select object has the following properties:
length reflects the number of options in a select object name reflects the NAME attribute options reflects the <OPTION> tags selectedIndex reflects the index of the selected option (or the first
selected option, if multiple options are selected)
![Page 86: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/86.jpg)
86
Select Object (Options Array) (2)
– The options array has the following properties: defaultSelected reflects the SELECTED attribute index reflects the index of an option length reflects the number of options in a select object name reflects the NAME attribute selected lets you programatically select an option selectedIndex reflects the index of the selected option text reflects the textToDisplay that follows an <OPTION> tag value reflects the VALUE attribute
![Page 87: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/87.jpg)
87
Select Object (Options Array) (3) Example:
FileName: select.htm// Displays a selection list and a scrolling list. Then shows the selections.<SCRIPT>function testSelect(form) { index = form.music_type_single.selectedIndex alert(form.music_type_single.options[index].text+" and "+
form.music_type_multi.selectedIndex)}</SCRIPT><form>Choose the music type for your free CD:<SELECT NAME="music_type_single"> <OPTION SELECTED> R&B <OPTION> Jazz <OPTION> Blues</SELECT><P>Choose the music types for your free CDs:<BR><SELECT NAME="music_type_multi" MULTIPLE> <OPTION SELECTED> R&B <OPTION> Jazz <OPTION> Blues</SELECT><P><INPUT TYPE="BUTTON" NAME="Button" VALUE="ClickMe" onClick="testSelect(this.form)"></form>
![Page 88: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/88.jpg)
88
String Object
A series of characters. Properties
– length reflects the length of the string Methods
– anchor, big, blink, bold, charAt, fixed, fontcolor, fontsize, indexOf, italics, lastIndexOf, link, small, strike, sub, substring, sup, toLowerCase, toUpperCase
Event handlers: None. Property of: None.
![Page 89: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/89.jpg)
89
String Object (2) Examples
– The following statement creates a string variable. var last_name = "Schaefer" last_name.length // gives 8 last_name.toUpperCase() // gives “SCHAEFER” last_name.toLowerCase() // gives “schaefer” last_name.indexOf(“e”) // gives 4 last_name.indexOf(“x”) // gives –1 (for not found) last_name.substring(2,5) // gives “hae” (1st index is inclusive, 2nd index is exclusive) last_name.substr(1,4) // gives “chae” (starting at 1, extract 4 chars) last_name.charAt(1) // gives “c” (not “S”)
Question: What if you need the 2nd “e” on the string? (Answer: check out the API for a method. Let’s see …)
![Page 90: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/90.jpg)
90
Submit Object A submit button on an HTML form. A submit button causes
a form to be submitted. Example:
FileName: submit.htm
// With JavaScript, can get the user the confirm before submitting a form.
<SCRIPT>
function submitMe(form) {if (confirm(“Are you sure you want to submit this form?”))
return (true)else
return (false)}</SCRIPT><form onSubmit=“return submitMe(this)” method="get" action="http://was6.itk.ilstu.edu:9080/itk/EchoAll"><INPUT TYPE="TEXT" NAME="Box" VALUE=""><INPUT TYPE="submit"> </form>
true => form is submitted false => submit process is aborted
![Page 91: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/91.jpg)
91
Text Object A text input field on an HTML form. A text field
lets the user enter a word, phrase, or series of numbers.
Text objects can be updated (redrawn) dynamically by setting the value property (this.value).
Properties– defaultValue reflects the VALUE attribute – name reflects the NAME attribute – value reflects the current value of the text object's field
![Page 92: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/92.jpg)
92
Text Object (2) Examples:
– FileName: text.htm// creates a text object that is 25 characters long. The text field appears immediately to the
right of the words "Last name:". The text field is blank when the form loads.
<B>Last name:</B> <INPUT TYPE="text" NAME="last_name" VALUE="" SIZE=25>
// creates two text objects on a form. Each object has a default value. The city object has an onFocus event handler that selects all the text in the field when the user tabs to that field. The state object has an onChange event handler that forces the value to upper case.
<FORM NAME="form1"><BR><B>City: </B><INPUT TYPE="text" NAME="city" VALUE="Anchorage" SIZE="20" onFocus="this.select()"><B>State: </B><INPUT TYPE="text" NAME="state" VALUE="AK" SIZE="2" onChange="this.value=this.value.toUpperCase()"></FORM>
![Page 93: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/93.jpg)
93
Textarea Object
A multiline input field on an HTML form. A textarea field lets the user enter words, phrases, or numbers.
Properties– defaultValue reflects the VALUE attribute – name reflects the NAME attribute – value reflects the current value of the text object's field
Methods– focus, blur, select
![Page 94: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/94.jpg)
94
Textarea Object (2)
Event handlers– onBlur – onChange – onFocus – onSelect
Property of– form
![Page 95: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/95.jpg)
95
Window Object
The top-level object for each document, location, and history object group.
To define a window, use the open method: – var myWin = window.open("URL", "windowName"
[,"windowFeatures"])
e.g.,
var myWin = window.open(“www.ilstu.edu", “Window1”,“height=300,width=400,toolbar=yes,scrollbar=yes")
No space!!!
![Page 96: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/96.jpg)
96
Window Object (2) Properties
– defaultStatus reflects the default message displayed in the window's status bar – frames is an array reflecting all the frames in a window – length reflects the number of frames in a parent window – name reflects the windowName argument – parent is a synonym for the windowName argument and refers to a window
containing a frameset – self is a synonym for the windowName argument and refers to the current
window – status specifies a priority or transient message in the window's status bar – top is a synonym for the windowName argument and refers to the top-most
Navigator window – window is a synonym for the windowName argument and refers to the current
window
![Page 97: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/97.jpg)
97
Window Object (3) Methods
– alert – close – confirm – open – prompt – setTimeout – clearTimeout
Event handlers– onLoad – onUnload
Property of– None.
![Page 98: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/98.jpg)
98
Window Object (4) Example:
– In the following example, the document in the top window opens a second window, window2, and defines pushbuttons that open a message window, write to the message window, close the message window, and close window2. The onLoad and onUnload event handlers of the document loaded into window2 display alerts when the window opens and closes.
– WIN1.HTM, which defines the frames for the first window, contains the following code: <HTML><HEAD><TITLE>Window object example: Window 1</TITLE></HEAD><BODY BGCOLOR="antiquewhite"><SCRIPT>window2=open("win2.htm","secondWindow","scrollbars=yes,width=250, height=400")document.writeln("<B>The first window has no name: " + window.name + "</B>")document.writeln("<BR><B>The second window is named: " + window2.name + "</B>")</SCRIPT>
![Page 99: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/99.jpg)
99
Window Object (5)<FORM NAME="form1">
<P><INPUT TYPE="button" VALUE="Open a message window"
onClick="window3=window.open('','messageWindow','scrollbars=yes,width=175, height=300')">
<P><INPUT TYPE="button" VALUE="Write to the message window"
onClick="window3.document.writeln('Hey there');window3.document.close()">
<P><INPUT TYPE="button" VALUE="Close the message window"
onClick="window3.close()">
<P><INPUT TYPE="button" VALUE="Close window2"
onClick="window2.close()">
</FORM>
</BODY>
</HTML>
![Page 100: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/100.jpg)
100
Window Object (6)– WIN2.HTM, which defines the content for window2, contains the following code:
<HTML><HEAD><TITLE>Window object example: Window 2</TITLE></HEAD><BODY BGCOLOR="oldlace" onLoad="alert('Message from ' + window.name + ': Hello, World.')" onUnload="alert('Message from ' + window.name + ': I\'m closing')"><B>Some numbers</B><LI>one<LI>two<LI>three</BODY></HTML>
![Page 101: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/101.jpg)
101
Event Handling
![Page 102: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/102.jpg)
102
Event Handling JavaScript provides a moderate level of event
detection to pass control to functions attached to built-in event handlers
e.g.,– <INPUT type=“button” VALUE=“button1”– onClick=“computeSomething()”>
Events are triggered in the browser primarily by user actions such as button click, page load, form submit.
![Page 103: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/103.jpg)
103
Event Handlers
The following event handlers are available in JavaScript: – onAbort – onBlur – onChange – onClick – onDragDrop – onError – onFocus – onKeyDown– onKeyPress – onKeyUp – onLoad
– onMouseDown– onMouseMove– onMouseOut – onMouseOver – onMouseUp– onMove– onReset– onResize– onSelect– onSubmit – onUnload
![Page 104: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/104.jpg)
104
Event Handlers (Cont...) onAbort
– An abort event occurs when a user aborts the loading of an image (for example by clicking a link or clicking the Stop button)
onBlur – A blur event occurs when a select, text, or textarea field on a form
loses focus. onChange
– A change event occurs when a select, text, or textarea field loses focus and its value has been modified.
onClick– A click event occurs when an object on a form is clicked.
![Page 105: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/105.jpg)
105
Event Handlers (Cont...) onDragDrop
– A drapDrop event occurs when a user drops an object onto the browser window, such as dropping a file on the browser window
onError – An error event occurs when the loading of a document or image
causes an error
onFocus– A focus event occurs when a field receives input focus by tabbing
with the keyboard or clicking with the mouse. onKeyDown, onKeyPress, onKeyUp
– A keyDown, keyPress, or keyUp event occurs when a user depresses a key, presses or holds down a key, or releases a key, respectively
![Page 106: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/106.jpg)
106
Event Handlers (Cont...) onLoad
– A load event occurs when Navigator finishes loading a window or all frames within a <FRAMESET>.
– Examples In the following example, the onLoad event handler displays a
greeting message after a web page is loaded. <BODY onLoad="window.alert('Welcome to my home page!')">
onMouseDown, onMouseMove, onMouseOut, onMouseOver, and onMouseUp
– A MouseDown, MouseMove, MouseOut, MouseOver, or MouseUp event occurs when a user depresses a mouse button, moves a cursor, moves a cursor out of a link or image map, moves a cursor over a link, releases a mouse button, respectively
![Page 107: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/107.jpg)
107
Event Handlers (Cont...)
onMouseOver– A mouseOver event occurs once each time the
mouse pointer moves over an object from outside that object.
Example<A HREF="http://www.ilstu.edu/"
onMouseOver="window.status=‘A Good Place …!'; return true">
Click me</A>Return true tells the browser not to perform its ownevent handling routine of displaying the link’s URLin the status bar
![Page 108: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/108.jpg)
108
Event Handlers (Cont...)
onSelect– A select event occurs when a user selects some of the
text within a text or textarea field. onSubmit
– A submit event occurs when a user submits a form onUnload
– An unload event occurs when you exit a document.
![Page 109: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/109.jpg)
109
Form ValidationFileName: valid2.htm<html><head><script language="JavaScript">function test1(form) { if (form.text1.value == "") alert("Please enter a string!") else { alert("Hi "+form.text1.value+"! Form input
ok!"); }}function test2(form) { if (form.text2.value == "" || form.text2.value.indexOf('@') == -1) alert("No valid e-mail address!"); else alert("OK!");}// --></script></head>
<body>
<form name="first">
Enter your name:<br>
<input type="text" name="text1">
<input type="button" name="button1" value="Test Input" onClick="test1(this.form)">
<P>
Enter your e-mail address:<br>
<input type="text" name="text2">
<input type="button" name="button2" value="Test Input" onClick="test2(this.form)">
</body>
![Page 110: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/110.jpg)
110
Form Validation (2)
FileName: Ex-valid.htm
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function checkit() {
var strval = document.myform.mytext.value;
var intval = parseInt(strval);
if ( intval > 0 && intval < 10 ) {
alert("OK")
} else {
alert("Input value " + strval + " is out of range");
}
}</SCRIPT>
</HEAD>
<BODY>
<P>
<HR><FORM NAME="myform"></P>
<P>Enter a number between 1 and 9: <INPUT TYPE="text" NAME="mytext" VALUE="" SIZE="10"></P>
<P><BR>
<INPUT TYPE=“button“onClick="checkit()“></FORM>
<HR></P>
</BODY>
</HTML>
![Page 111: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/111.jpg)
111
Form Validation (3)
FileName: testNaN.htm// Shows NaN and the use of isNaN()<html><head><script language="JavaScript">
function test2(form) {var ans = parseInt(form.text2.value); if (isNaN(ans)) alert("NaN (Not A Number)!"); else alert("OK!");}
</script></head>
<body>
<form>
Enter a number:<br>
<input type="text" name="text2">
<input type="button" name="button2" value="Test Input" onclick="test2(this.form)">
</form>
</body>
</HTML>
This function returns true if the 1st digit can beparsed into a number. Otherwise, it returns false.
![Page 112: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/112.jpg)
112
More Features
JavaScript Library: ability to define a separate page for the JavaScript program– <SCRIPT SRC=“library.js”>
js extension do not need </SCRIPT> tag can include JavaSript code in <SCRIPT> and </SCRIPT> tags
– new <NOSCRIPT>and </NOSCRIPT> tags contents ignored by JavaScript but processed as HTML
![Page 113: 1 Introduction to JavaScript Presented by Dr. Billy Lim Developed by Dr. Billy B. L. Lim & Dr. Joaquin Vila Applied Computer Science Illinois State University](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfdf1a28abf838cb29a3/html5/thumbnails/113.jpg)
113
References
Client-Side JavaScript Guide, Netscape Communications Inc., 1998
Client-Side JavaScript Reference, Netscape Communications Inc., 1998
Hall, M., Core Web Programming, Prentice-Hall, 1998. Voodoo’s Introduction to JavaScript, 1998. Shin, S., JavaScript Basics, www.javapassion.com.