JavaScript: Introduction

transcript

• 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

Embedding JavaScript code into HTML document

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">  </script> </head> <body> </body> </html>

Execute JavaScript code

Execute JavaScript function using onLoad function:

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

location

Navigator

String

document

applet

anchor

button

select

checkbox

submit

password

textarea

hidden

Accessing JavaScript Object Methods/Properties

•object_name.object_method

•object_name.object_property

Accessing JavaScript Object Methods/Properties: Example

</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"])

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()

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()

Get date information:

var today = new Date()

document.open()

document.write("Today is: " + today.getDate()

+ "/“

+ (today.getMonth() + 1) + "/"

+ (today.getYear() + 1900))

document.close()

Math properties/operation:

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

var days = new Array("Sunday", "Monday",

"Tuesday", "Wednesday",

"Thursday", "Friday",

"Saturday")

var dayOfAugust = new Array(31)

for (var i = 0; i < 31; i++) {

dateOfAugust[i] = i + 1

String manipulation:

var str = "Hello World" len = str.length

len will get the value of 11

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

JavaScript: Introduction

Documents