ࡱ > B D A ` 5
jbjb $" |c |c 6 r r r r
t 8 , t P" ( ( P P P P U U U ! ! ! ! ! ! ! , J# R % Z !
U U U U ! ! r r P P k
" ! ! ! U r l P
P ! ! 4 R " r r r r U ! ! ! ,
! Xv a f ! ! " 0 P" ! % ! % ! !
t t t t Javascript
The BROWSER scripting language.
Similar syntax to java.
History: Netscape created to allow dynamic web pages.
Uses: Many, here are a couple:
verifying and reacting to user input,
updating page without making user wait
Javascript tutorial: HYPERLINK "http://www.w3schools.com/js/js_intro.asp" http://www.w3schools.com/js/js_intro.asp
Alert box sample: http://www.w3schools.com/js/tryit.asp?filename=tryjs_confirm
Can also put javascript in a file external to the html:
confirm.js:
function disp_confirm()
{
var r=confirm("Press a button");
if (r==true)
{
document.write("You pressed OK!");
}
else
{
document.write("You pressed Cancel!");
}
}
See sample at HYPERLINK "http://www.cs.usfca.edu/~wolber/jsSamples/confirm2.html" http://www.cs.usfca.edu/~wolber/jsSamples/confirm2.html
Advanced Uses
DOM Document Object Model
Your program can get at the elements in the html.
So, for instance, you can sort a list in different ways.
A big data structure representing the html page.
AJAX Asynchronous javascript and xml
Call a server to get data, asynchronously.
User doesnt have to wait for call to web service to complete
Vacation fun: Write mastermind with html and javascript!
CS 110 Fall 2007
Html page
Java script
External Web service
Server
; < = e f g z Ŭ֝Ō{jYH5H $h h 5B*CJ OJ QJ ph !h } h B*CJ OJ QJ ph !h,KL h B*CJ OJ QJ ph !h O h B*CJ OJ QJ ph !h9 h B*CJ OJ QJ ph !hv/) h B*CJ OJ QJ ph h h 0J CJ OJ QJ 0j h h B*CJ OJ QJ Uph !h h B*CJ OJ QJ ph *j h h B*CJ OJ QJ Uph h h CJ OJ QJ h h , - E F | ~ g h ! . 2 W ^gd `gd $a$gd 4
W [ ` d D E L S m w `gd gd ^gd E S w
1 2 3 R c d e g h i j k l {]]]@ 8j h B*CJ OJ QJ UaJ mH nH ph sH tH ;j h 5B*CJ OJ QJ UaJ mH nH ph sH tH hs$ h 0J CJ OJ QJ 0j hs$ h B*CJ OJ QJ Uph !h4^F h B*CJ OJ QJ ph *j h4^F h B*CJ OJ QJ Uph $h h 5B*CJ OJ QJ ph !h } h B*CJ OJ QJ ph !h1 h B*CJ OJ QJ ph
0
=
A
g
k
p
t
3 4 5 6 7 8 9 : ; < = K L ^gd gd L h i
5 6 b c e h j k m n o p gd l 5
h !h1 h B*CJ OJ QJ ph
*
+
2
3
4
5
gd
" :p / =!"#$% D y K ) h t t p : / / w w w . w 3 s c h o o l s . c o m / j s / j s _ i n t r o . a s p y K R h t t p : / / w w w . w 3 s c h o o l s . c o m / j s / j s _ i n t r o . a s p U D y K 8 h t t p : / / w w w . c s . u s f c a . e d u / ~ w o l b e r / j s S a m p l e s / c o n f i r m 2 . h t m l y K p h t t p : / / w w w . c s . u s f c a . e d u / ~ w o l b e r / j s S a m p l e s / c o n f i r m 2 . h t m l < @ < N o r m a l CJ aJ mH sH tH T @ T H e a d i n g 1 $ < @& 5CJ KH OJ QJ aJ R @ R H e a d i n g 2 $ < @& 56CJ OJ QJ aJ D A@ D D e f a u l t P a r a g r a p h F o n t R i@ R T a b l e N o r m a l 4
l 4 a ( k@ ( N o L i s t 0 U@ 0 H y p e r l i n k >*B*4 @ 4 H e a d e r
! 4 @ 4 F o o t e r
! - 5 5 - 5 8 5
" ! z z z = 5 8 , - E F | ~ g h ! . 2 W [ ` d D E L S m w
0 = A g k p t 3 4 5 6 7 8 9 : ; < = K L h i
5 6 b c e h j k m n o p * + 2 6 0 ʀ 0 P 0 ʀ 0 ʀ 0 ʀ 0 ʀ 0 ʀ 0 ʀ 0 ʀ 0 ʀ 0 ʀ 0 ʀ 0 ʀ 0 ʀ 0 P 0 0 P 0 ʀ 0 P 0 P 0 P 0 P 0 P 0 P 0 P 0 P 0 P 0 P 0 P 0 P 0 P 0 P 0 P 0 P 0 ʀ 0 ʀ 0 P 0 P 0 ʀ 0 ʀ 0 P 0 P 0 P 0 P 0 P 0 P 0 P 0 P 0 P 0 P 0 P 0 P 0 P 0 P 0 P 0 P 0 P 0 P 0 P 0 P 0 P 0 P 0 P 0 P 0 P 0 P 0 P 0 ʀ 0 ʀ 0 ʀ 0 ʀ 0 ʀ 0 ʀ 0 ʀ 0 ʀ 0 ʀ 0 ʀ 0 ʀ 0 P 0 ʀ 0 ʀ 0 ʀ 0 ʀ 0 ʀ 0 ʀ 0 ʀ 0 P 0 ʀ 0 ʀ 0 ʀ 0 ʀ 0 ʀ 0 ʀ 0 ʀ 0 ʀ 0 ʀ 0 ʀ 0 ʀ 0 ʀ 0 ʀ 0 ʀ 0 ʀ 0 ʀ 0 @ 0 ʀ 0 ʀ 0 ʀ 0 ɀ @ 0 ʀ 0 ʀ 0 0 ʀ 0 0 ʀ 0 , - E F | ~ g h ! . 2 W [ ` d D E L S m w
0 = A g k p t 3 4 < = j k 6 0 @ 0 @ 0 @ 0 @ 0 @ 0 @ 0 @ 0 @ 0 @ 0 @ 0 @ 0 @ 0 @ 0 @ 0 @ 0 ! 0 ! z0 J z0 J z0 J z0 J z0 J z0 J z0 J z0 J z0 J z0 J z0 J z0 J z0 J z0 J z0 J z0 J z0 J z0 J z0 J z0 J 0 @ D9 0 W D9 0 W D9 0 W z0 J z0 J z0 J z0 J z0 J z0 J z0 J z0 J z0 J z0 J @ 0 @ p 0 p 0 p 0 z0 J z0 J z0 J z0 J z0 J z0 J z0 J z0 J z0 J z0 J z0 J z0 J 0 @ 0 @ 0 @
0 @ 0 @
0 @ 0 @
0 @
0 @ Xl l 5
W L 5
4
< e 1 5 XX 8 @ " (
H
#
H
#
H
#
H B
C D H B
C D B
S ? c e f h k 5 = 7 t E ! } t } m U = t r t a t
4 B f t # [ ^ ` j
C Q v " , 6 + - D ! # 4 B [ _ f t F J M Q T Z 0 2 C Q k o v
6 : : : : : : : : : : : : : : : : : : : : : : : : : : : : @ 0D ~~ 5 @ U n k n o w n G T i m e s N e w R o m a n 5 S y m b o l 3 A r i a l C L u c i d a G r a n d e q h k a >4 @ X
J a v a s c r i p t U S F I T S U S F I T S
Oh +'0
(
4 @ H P X ` ' Javascript USF ITS SF Normal USF ITS 8 F Microsoft Word 11.1 @ @ x43@ Rʼn3 k G , PICT" d , , MSWD
, Times New Roman
2 . ( wC )!S ) 110 )X ( - Q ( F - ) a - ` )ll - ) 2007 - \ )q , Arial
B - (VJavascr - > )i - )pt - )>
6 - (w - *@ The BROWS - K (+E - ) R - )" - ) scripting - K ) - )la - ).n - )!guage. - ` ) - (kw - *@Similar syntax to java. - 8 ( - (w - *@%History: Netscape created to allow dy - K (*Fn - )#amic - )| - )web - K )j - )pages. - ) - 'h (jw - ) - (w Uses: Many, here are a couple: - ( - (w - ) - +?verifying and reacti - ()n - )!g - K )" - )to - )5 - )user - K )r - )input, - ) - ` ) - (i
updating page wi - (it - )hout - K )y - )making - ) u - )2ser - K )P - )w - ))ait - K )B - ) (w - *@Javascript tutori (al: )Phttp://www.w3sch - (Po - )
ols.com/js - K (/ - ) js_intro.asp
1f
- ( ()w - *?Alert box sample - K (h6: - (w#http://www.w3schools.com/js/tryit.a - K (Ls - ) p?filename=tryjs_confirm - ( (w - +@ - ) - (h
- ) - (
- U ) - (
f - K )u - )$nction - ) - )disp_co - K )n - )$firm() - ) - ('
{ - ` ) - (g
var r=confirm("Press a button" - K (gk) - ); - )
- (
if (r==true) - ` (P - (
{ - ` )8 - (&
documen - K (&.t - ) .write("You - (&x - )pressed - K ) - )OK!" - K ){) - ); - ` )
- (f
} - ` )8 - (
else - U )q - (
{ - ` )8 - ( &
documen - K ( &.t - ) .write("You - ( &x - )pressed - K ) - )
Cancel!"); - ` ( &} - ( e
} - ` )8 - (
} - ` ) - (
- U )w - (
%
- ) - (
e
- 8 ) - (
# - 8 (
- ( $
- 8 )G - ( d
- 8 ) - ( w
! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !
՜. +,D ՜. +,L ` h p x
' Javascript Javascript Title Headings x 8 @ _PID_HLINKS ' A 0 & 8 h t t p : / / w w w . c s . u s f c a . e d u / ~ w o l b e r / j s S a m p l e s / c o n f i r m 2 . h t m l j ) h t t p : / / w w w . w 3 s c h o o l s . c o m / j s / j s _ i n t r o . a s p
! " # $ % & ' ( ) * + , . / 0 1 2 3 4 5 6 7 8 : ; < = > ? @ C R o o t E n t r y F