JavaScript: Introduction
• Like C/C++ and Java, JavaScript is a case sensitive
• It is not a Java
• Interpreted Language
• Embedded into HTML
• Browser Dependent
• Loosely Typed Language
Basic JavaScript Code
<script language = "JavaScript"> <!-- your javascript code is here // --> </script>
Embedding JavaScript code into HTML document
<html> <head> <title>js01</title> </head> <body> <script language = "JavaScript"> <!-- alert("Hello, I'm from JavaScript") // --> </script> </body> </html>
Load the JavaScript code from external source file
External source file name: myscript.js
External source file content:alert("Hello, I'm from JavaScript")
HTML file content:<html> <head> <title>js01</title> </head> <body> <script src = "myscript.js"> </script> </body> </html>
Execute JavaScript code • Automaticaly when the page is loaded (in the example above)
• Write the Javascript code as a function <html> <head> <title>js02</title> <script language = "JavaScript"> <!-- function hello() { alert("Hello, I'm from JavaScript") } // --> </script> </head> <body> </body> </html>
Execute JavaScript code
Execute JavaScript function using onLoad function:
<html> <head> <title>js02</title> . . . </head> <body onLoad="hello()"> </body> </html>
Execute JavaScript codeExecute JavaScript function by user action:
<html> <head> <title>js02</title> . . . </head> <body> <a href="javascript:hello()"> Clik me </a> (hypertext link) to execute Javascript function <form> <input type="submit" value="Click me (submit button) to execute Javascript function" onClick="hello()"> </form> </body> </html>
Debugging JavaScript Code
• Just type "javascript:" in the URL field at your browser (Netscape)
• For IE click the status bar (bottom left ) to find out what the error was and what line it occurred on
JavaScript Keywords
if else while for break
continue true false null return
int var in with this
function new
Variable
var myVariable = "Pi"
yourVariable = 1.14159
alert(myVariable)
myVariable = 3.14159
newVariable = myVariable + yourVariable
alert(newVariable)
JavaScript Built-In Object Model
window
history
frame
location
Navigator
String
document
image
Array
Date
Math
applet
anchor
form
area
link
button
radio
text
reset
select
checkbox
submit
password
textarea
file
hidden
Accessing JavaScript Object Methods/Properties
•object_name.object_method
•object_name.object_property
Accessing JavaScript Object Methods/Properties: Example
<form name="my_form" method="POST">
<input type="text" name="ic" size=15>
</form>
To access the value of "ic", use the statement below:
document.my_form.ic.value
Using JavaScript Built-In Object Model
Write content into HTML document:
document.open()
document.write("<pre>\n")
document.write("Hello World\n")
document.writeln("How are You?")
document.write("World: I'm fine\n")
document.write("<pre>")document.close()
Open and write/set content into new browser
window:
Syntax:
windowVar = window.open("URL",
"windowName",
["windowAttributes"])
Using JavaScript Built-In Object Model
Open and write/set content into new browser
window:
Example:
newWin=window.open("", "myWindwow",
"width=400,height=300")
newWin.document.open()
newWin.document.write("Hello I\'m a new window")
newWin.document.close()
Using JavaScript Built-In Object Model
Get client browser information:
document.open()
document.writeln("<pre>")
document.writeln("<b>navigator.appCodeName = </b>" + navigator.appCodeName)
document.writeln("<b>navigator.appName = </b>" + navigator.appName)
document.writeln("<b>navigator.appVersion = </b>" + navigator.appVersion)
document.writeln("<b>navigator.mimeTypes.length = </b>" + navigator.mimeTypes.length)
document.writeln("<b>navigator.mimeTypes[0].type = </b>" + navigator.mimeTypes[0].type)
document.writeln("<b>navigator.mimeTypes[0].description = </b>" + navigator.mimeTypes[0].description)
document.writeln("<b>navigator.mimeTypes[0].suffixes = </b>" + navigator.mimeTypes[0].suffixes)
document.writeln("<b>navigator.userAgent = </b>" + navigator.userAgent)
document.writeln("</pre>")
document.close()
Using JavaScript Built-In Object Model
Get date information:
var today = new Date()
document.open()
document.write("Today is: " + today.getDate()
+ "/“
+ (today.getMonth() + 1) + "/"
+ (today.getYear() + 1900))
document.close()
Using JavaScript Built-In Object Model
Math properties/operation:
Using JavaScript Built-In Object Model
E LN10 LOG10E SQRT1_2
LN2 LOG2E PI SQRT2
abs cos min tan
acos eval pow toString
asin exp random valueOf
atan floor round
atan2 log sin
ceil max sqrt
Define array variable using Array object:
var months = new Array()
months[0] = "Jan"
months[1] = "Feb"
. . .
. . .
months[11] = "Dis
Using JavaScript Built-In Object Model
Define array variable using Array object:
var days = new Array("Sunday", "Monday",
"Tuesday", "Wednesday",
"Thursday", "Friday",
"Saturday")
Using JavaScript Built-In Object Model
Define array variable using Array object:
var dayOfAugust = new Array(31)
for (var i = 0; i < 31; i++) {
dateOfAugust[i] = i + 1
}
Using JavaScript Built-In Object Model
String manipulation:
var str = "Hello World" len = str.length
len will get the value of 11
Using JavaScript Built-In Object Model
Using JavaScript Built-In Object Model
More string handling methods (str = “Hello World”):
Method Description Example
charAt(pos) Return the character at the specified index.
str.charAt(0) return a value of "H"
indexOf(searchText[, startPos])
Return the index of the first occurrence of searchText.
str.indexOf("or") return a value of 7
lastIndexOf(searchText[, startPos])
Return the index of the last occurrence of searchText.
str.lastIndexOf("l") return a value of 9
substring(startPos, endPos) Return the substring of the string starting at startPos and ending at endPos
str.substring(6, 8) return a value of "Wor"
Creating JavaScript new object
function object_name (property_1, . . ., property_n) { this.property_1 = property_1 . . . this.property_n = property_n
this.method_1 = method_name_1 . . . this.method_n = method_name_n}
function method_name_1() { . . .}
function method_name_n() { . . .}
Event Handler
Events:
• Generated by the system - when the browser loading a new page (onLoad event)
• Generated by the user - when the user click a button (onClick event)
Event HandlerTable of events and objects: Event
Object onClick onSubmit OnChange onFocus onBlur onLoad onUnload onMouseOver onSelect
button X
reset X
submit X
radio X
checkbox X
Link X X
Form X
Text X X X X
textarea X X X X
select X X X
window X X