1 Adding client-side scripting JavaScript - - PDF document

1

• Previously

!"#$% & '&! !("( ) *+! )*&,

• *&
• &. /

The Project

0 *&& 1&# &,&

• '

'! +!

! # &

*2

Examples/Ideas

$+

3445!+5!4 344566544*4+4!

+75+

This week

89 *:

• !

*

Previously

2

Adding client-side scripting JavaScript

• 89 *&*

;<

=

; ("( ;+&!

What JavaScript can do

(+!!!

$,,5

• !"#$%!

9!

*

Including JavaScript

*

)>?>?

*9+

56 + )>?>?:

Embedding JS in a page

>!? >? >?#>4? >&@A946A? ! @A"&*&BAC <!=C >4? >4? >*&? >B *&? >4*&? >4!?

Linking to a JS file

>!? >? >?#>4? >&@A946A @A*&56A4?>4? >4? >*&?>B *&? >4*&? >4!?

• ! @A"&*&BAC

<!=C

3

JavaScript language basics Statements

!!

!

@A"&*&AC !@DEC

Variables

F*! G '*!("(

!@DEC !@H!AC

) *+*!

*

@EC

Types

!* 1+ *. I 83J,J,JA 1

More on types

#& + &9

!5<AEADE=C 44EE !5< DE=C 44 K

D,

5

!5<DA AD*DA@A D<D*==C

Displaying output

# !5<= +

!

!5<A",AD!DABA=C

#<= +

!

<A",AD!DABA=C

4

Arrays

!("(,!&9++

@-&<=C44& LM@A*AC449 <LM=C44!3A*A 5 <AA=C44 N@5C44N+&3 5<=C44! LM@EC44&*+!9& 44LAA,A*A,EM

More about arrays

• &

N@-&<=C NLA AM@A%AC <NLA AM=C 44A%A @-&<A*A,A!:A,AA=C

% &

+<!=O

!5<!DA>*4?A=C44 !

P

Loops

("(

+< @C>CDD=O !5<DA>*4?JA=C P <+@@A!A=O !#<=C P

Conditionals

),+

+<?K=O <A& * B=C P +<>QQ?@K2=O <ABA=C P O <A"BA=C P

Functions

&("(

+ <*,9=O @KC +< @C>9CDD=O

@R*C

P C P

Objects

*6

)+ &9

+ <!,=O

5!@!C 5@C

P

)!

*&@ <A1&A,K=C <*&5=C44K

5

The eval function

* 9 *&

• 8

!@<ADA=C !5< !=C44S

1 &

• 8. <= + ("(

Escaping text

("(

HJT <*:=

<H# ,JTIJT * 5T=C

J; JT J@ J+@+ J@ JQ@!

Comments

("(

44!! 4R ! !!R4

Using JavaScript Adding JavaScript to pages

!&*

9 !,:("(

$

'++

• + <55:

* =

Inline JavaScript

U >*&? >?' !!+3 >&@A946A?

• >4?

>4? >4*&?

6

Event-driven JavaScript

>!?>? >&@A946A? + !<=O <A&BA=C P >4? >4? >*&? >+!? > &@A* A @A:!A !" #? >4+!? >4*&?>4!?

Input type "button"

1 !

%:: *!* 1&+ ,

• * A A!*

9

): *

> &@A* A @A:!A :@A!<=CA4?

• nclick handler

#: +

!:

• !!*

:<:,* ,!=

$&++ +

>?

>+@AVA:@A<W"&BW=CA? #:>4?

Other event handlers

: ! ,! * ,+ <+*6= *! <++!= U !&!B

• 3445. :!54647!

+5!

Referencing form elements Referencing elements

+ :

+!

X+9+ +!9

#!++

!

!+ ' !*6$<'$=

7

Referencing forms in JS

+! ,

!!

Y+*6

!5+!!5!!

>*&?

>+!!@A!!A?

> &@A9A!@AA4?

>4+!?

>4*&? document.emailForm.address

Accessing form values

• * +!

+!!

!5!!55 @AZ*5!AC44 < !5!!55 =C44AZ*5!A

): * +:*9

+< !5!!5*K5:=O

44*K:U

P O

44WU

P

The Document Object Model

'$+!+

"#$%!<6 +!=

#:+["#$%W

! *6!

• +!*&'

!

• ,*

* !+&*

DOM methods

!58!1&<=

Y!+ Y !*6<!=

44!@A!A !@ !58!1&<A!A=C 44&+!@A!A <!5 =C

$!W:*

The id attribute

*&["#$%!

6 +!! ! * .

!!!&*!

• >*&?

>+!!@A!!A?

> &@A9A!@AA @AA4?

>4+!?

>4*&? document.emailForm.address, or document.getElementById("address")

Changing page content with the DOM

+"#$%

! "#$% &

>&@A946A? 44+ +,9 + Y <=O !58!1&<AA=5"#$% @A"AC 445"#$% @A BAC P >4? >@AA?95>4? > &@A* A @A:A :@AY <=CA4?

8

Validating forms with JS Form validation

*+!

• + +!W

*!

++ ,

+!

++,+! *!

Validation example: form

>+!!@A!!A @A *!5A!@AA *!@A <=CA? 8& !3 > &@A9A!@AA4? > &@A *!A @A *!A4? >4+!?

Validation example: script

>&@A946A? + <=O +< !5!!55 @@AA= O <A(& ! BA=C +C P O C P P >4?

Design considerations Server-side vs. client-side

<("(=

89 *+* 9 <*,

=

• Y. +

<=

89 + W& $,+

#+ + !*

9

Compatibility issues

W9:

&

'++* +++ ! ++

*,*,

!**,U

$

%$&$

("(:*

Providing alternatives

!*+!*("(

• )

(+!* F("(

>+!!@A!!A@A *!5A !@AA *!@A <=CA?

Alternatives

%:3(+ &

,!*("( :

*: * +,W+

("(: >+@A 5A :@A6 <=C A? %:9>4?

Debugging JavaScript

* &

*

* + )+9W

* &

JavaScript Security

<[=

+!!

+!!

+&!

+!9

+

6

) 6

• Where to get help

I&9+

34456:5!46+4 34456:5!4!+4 34455!464+ 5

\ :$ +!

* +

• 3445. :!54

10

Questions?

Pop Quiz

;&9 +* */

' () * (+) , )

• )

Pop Quiz

+ /

function MyFunc(limit) { var step = 2; for (var i = 0; i <= limit; i++) { total = step * i; document.write(total + "<br />"); } } MyFunc(100);

test

Pop Quiz ++ #/

' . * /%(%( , 01

• )

Pop Quiz

# /

!! !/ 2345

Pop Quiz

'$&!+

' 6. * 6.% , 6.

• 6.

11

Next

+9! *

Advanced JavaScript

<#!!=

Getting user input

+!<= & &I4

• Y +

9@+!<A-& & /A=C +<9=O4RR4 P

!<= &

. +!

!@!<A& !A=C <A",AD!DABA=C

Passing PHP variables to JS

+!("(

>&@A946A? @A3445!AC 44*A!A+!("( >/ A !@A5G!5 ACJAC /? >4?

Passing JS variables to PHP

>&@A946A? N@AAC 44*ANA("( !5+!K5N@NC >4? U >+!!@A+!KA@A *!5A? > !@ANA&@AA @AA4? >4+!?

Opening windows with JavaScript

#5<= + *

*

• &93

! @5< , !,!= 34456:5!46 4 K5!

12

window.open() example

>&@A946A? + < =O 44+*WW @5< ,WW, W@2,@E, W=C P >4? U >+@A5!A:@A<W5!W=C +CA?>4?