javascript: introduction

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">  </script>

Embedding JavaScript code into HTML document

<html> <head> <title>js01</title> </head> <body> <script language = "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">  </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"])


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