LAB4: JavaScript

JAVASCRIPT

!!A scripting language for controlling the behavior

of HTML page.

!!Code is interpreted by web browsers when HTML is loaded. Most web browsers come with

JavaScript interpreter with slightly difference.

!!Its syntax is inspired by “Java”.

Web

Server

Web

Browser

HTML +CSS

Rendering Engine

JavaScript

Interpreter

Java Virtual

Machine

SCRIPT TAG

!!JavaScript code is embedded inside !"#$%&'()

!*'+,()))!*-./(!'%',-(0!1'%',-()

!!!!"#$%&'(!()'*+,(*-(./010#$%&'(,!#%$+,2334/#,5!

!!!!".#$%&'(5!))!1*-./()))!23/4()

)))))"#$%&'(!()'*+,(*-(./010#$%&'(,5!

!!!!!!!..'6(!70108$%&'(!$39*!:*%*!

!!!!".#$%&'(5!)))))!*5(6-,,3!1*5()))!123/4()!1*'+,()

"

#

VARIABLES AND DATA TYPES

!!Dynamic typing

!! Type is bound to values NOT variables.

!! Type of a variable is changed when its value is

changed to a different type.

7.$)+47.$5)8)9*-,,39:)7.$)+47.$;)8)5<:)

LAB4 : JavaScript & HTML Form Processing

OPERATORS

!!Similar to Java

Type Operators

Mathematical =)>)?)1)@)==)>>)>ABC.$4D)

Assignment 8)=8)>8)?8)18)@8)

Comparison 88)E8)()!)(8)!8)+++!;++!

Logical FF)GG)E)

Bit-wise F)H)G)I)!!)(()((()

String =)=8)

FUNCTIONS

!!Similar to functions in C or methods in Java

!!Keyword "function" is required

JBC#'%3C)K-'L-"".K-AB"-$D)M))))7.$)+)8)9N*%")+-"".K-)%")K-C-$.'-/)24)9:))))$-'B$C)+=B"-$:)O)

CONTROL STRUCTURES

!!Similar to C and Java

!!Conditional statements

!! %J)A#3C/%'%3CD)M)O)

!! %J)A#3C/%'%3CD)M)O)-,"-)M)O)

!! "P%'#*)A7.$%.2,-D)M)#."-Q)0)2$-.R:)O)

!!Repetition statements

!! P*%,-A#3C/%'%3CD)M)O)

!! J3$A%C%'%.,%S.'%3C:)#3C/%'%3C:)%C#$-+-C'D)M)O)

!! /3)M)O)P*%,-)A#3C/%'%3CD:)

EVENT HANDLER

!!Used to control behaviors of HTML pages

!.)*$-J89.T*'+,9)))))3<=>&$?+,@&<93@40>*%(AB=>&$?*9BC9(U%CR!1.()

EVENTS

!!Reference in Lab Manual

Event Handler Event Trigger

3CV,%#R) User clicks an area or a control

3CU3./) Page finishes loading

3CWC,3./) User leaves the current page

3CX3#B") User gives focus to a control

3CV*.CK-) User changes the contents of a control

3CYB2+%') User is submitting a form

3CZ-4[$-"") User presses a key

3CL3B"-\7-$) User moves the mouse pointer over a control

FORM AND INPUT

!!Used for creating an input form on a page

!J3$+()))X%$"')C.+-Q)!%C&B')'4&-89'-]'9)"%S-89^<9(!2$()))U."')C.+-Q)!%C&B')'4&-89'-]'9)"%S-89^<9(!2$()))!%C&B')'4&-89"B2+%'9()!1J3$+()

INPUT TAGS

Tag Description

!%C&B')'4&-89'-]'9() Text field

!%C&B')'4&-89&.""P3$/9() Password field

!%C&B')'4&-892B''3C9() Button

!%C&B')'4&-89"B2+%'9() Submit button

!%C&B')'4&-89$./%39)7.,B-89TTT9() Radio button

!%C&B')'4&-89#*-#R23]9) Checkbox

!'-]'.$-.()TTT)!1'-]'.$-.() Multi-line text field

!"-,-#'())))!3&'%3C)7.,B-89+.,-9())))!3&'%3C)7.,B-89J-+.,-9()!1"-,-#'()

Drop-down list

OBJECTS

!!JavaScript is an OOP language

!!Each object has properties and methods.

!!Two basic objects for values:

!! String

!! Number

!"#$%&')'4&-89'-]'1_.7."#$%&'9()))7.$)']'896-,,3E9:)))P%C/3PT.,-$'A9U-CK'*)8)9=']'T,-CK'*D:)))P%C/3PT.,-$'A9W&&-$#."-)8)9=']'T'3W&&-$V."-ADD:)!1"#$%&'()

STANDARD GLOBAL OBJECTS

!!L.'* object for calculation

7.$).$-.)8)L.'*T[`?$?$:)

7.$)$)8)L.'*T$.C/3+AD:)

!!a.'- object for handling date and time

7.$)'3/.4)8)C-P)a.'-AD:)

7.$)/5)8)a.'-TC3PAD:)

7.$)/;)8)a.'-T&.$"-A9;)bB,);<<c)5<Q<<Q<<9D:)

7.$)/%JJ)8)/5>/;:)11/%JJ-$-C#-)%C)+%,,%"-#3C/")

!!d$$.4 object for storing multiple values

7.$).)8)C-P)d$$.4AD:)

.e5f)8)9N343'.9:)

.e;f)8)963C/.9:)

HTML DOCUMENT OBJECT MODEL (DOM)

!!A collection of JavaScript objects for manipulating

HTML documents

!!Each element in document is considered a node

!!93$6D*<( is the object representing the entire HTML

document

!*'+,()!*-./()))!'%',-(L4)N%',-!1'%',-()!1*-./()!23/4()))!*5(6-,,3E!1*5()!123/4()!1*'+,()

7.$)*'+,g3/-)8)/3#B+-C'TJ%$"'V*%,/:)7.$)23/4g3/-)8)*'+,g3/-T#*%,/g3/-"e5f:)7.$)*5g3/-)8)23/4g3/-TJ%$"'V*%,/:)*5g3/-T%CC-$6NLU)8)9h33/)24-E9:)

NODE: PROPERTIES AND METHODS

!!Properties

!! %CC-$6NLU)– the text enclosed by start and end tags

!! C3/-g.+-)– the name of node

!! &.$-C'g3/-)– the parent node

!! #*%,/g3/-")– the array of child nodes

!! .''$%2B'-")– the array of attributes

!! "'4,- – the style of node (based on CSS))

!!Methods

!! .&&-C/V*%,/AC3/-D)– insert a child node

!! $-+37-V*%,/AC3/-D)– remove a child node

!! K-'i,-+-C'j4`/A%/D)– access the element by its ID

!! K-'i,-+-C'j4N.Kg.+-A'D – access the elements with tag

ACCESSING NODE

!!Various ways to access a node

!! By navigating through the document tree

!! By specifying tag name

!! By specifying ID – the most common way

!*'+,()!23/4()))!*5)%/89+4*59(6-,,3E!1*5()!123/4()!1*'+,()

7.$)*5g)8)/3#B+-C'TK-'i,-+-C'j4`/A9+4*59D:)*5gT%CC-$6NLU)8)9h33/)j4-9:)*5gT"'4,-T#3,3$8)92,B-9:)*5gT"'4,-TJ3C'X.+%,4896-,7-'%#.9:)

EXAMPLE: SIMPLE ADDER

!"#$%&')'4&-89'-]'1_.7."#$%&'9)#*.$"-'89B'J>c9()JBC#'%3C)2'CV,%#R-/AD)M)))7.$)3&5)8)/3#B+-C'TK-'i,-+-C'j4`/A93&-$.C/59D:)))7.$)3&;)8)/3#B+-C'TK-'i,-+-C'j4`/A93&-$.C/;9D:))))7.$)$-"B,')8)/3#B+-C'TK-'i,-+-C'j4`/A9$-"B,'9D:))))$-"B,'T7.,B-)8)&.$"-`C'A3&5T7.,B-D)=)&.$"-`C'A3&;T7.,B-D:)O)!1"#$%&'()

!J3$+()))\&-$.C/)5)!%C&B')'4&-89'-]'9)%/893&-$.C/59(!2$()))\&-$.C/);)!%C&B')'4&-89'-]'9)%/893&-$.C/;9()))!%C&B')'4&-892B''3C9)7.,B-89d//9)3CV,%#R892'CV,%#R-/AD9()))!2$()))k-"B,')!%C&B')'4&-89'-]'9)%/89$-"B,'9(!2$()!1J3$+())

EXAMPLE: SIMPLE ADDER

OBJECTS RELATED TO WEB BROWSER

!!Some objects can be used to control behavior of web

browser:

!! window – the window showing the current page

!! screen – the display screen

!! navigator – the web browser

!! history – the list of URLs visited by user, P%C/3PT*%"'3$4)

!! location – the current URL, P%C/3PT,3#.'%3C)