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)