ࡱ> nx椄@ )7XPNG  IHDR:|vVsRGB pHYsod IDATx^] xEڮLn $!nD9AVXWYwuv_]כ=v@AU]ES1#̝>f: df2Itjz9UUBU%p4wǥfX+B2YQT&|y| %)#8 2FPվ Y”ю@?Çclntå~{1p@W*׹.e53 ؔ|IO~R'JFhLG@HĞL?%o0J^BJG #Ԝ/xˍ ʃN~5Cv|$xpB lx&ɧMW!a>H?!R$65h("n tL dru2W9dYT _@fI-l힤ǐjB/0ːuֆTB4eԣ =` ?ryѱzqvd \bX|%!mONBœpànvVeoZvA;,]x!E1,e zCUVPw>t2 ;*kV?uеL.;mCcUeYD8z=i+̙Vn>LWN \É)JHz{ *HKA67U>s[!>}, 'U"uMAf2'"rJ/;u/6EH^ˡy`a }hO#-yY͸'S,Wm{8Z~$rNgloYk=3g}dgԸ-Hj&yEՉÅaYS>|"yTpZLEc;i@ ,Ad!Cw#y&曶(td9LM44ܔ"?7ŴIۇ{Rwh[g%6?;X|L׾sx)4H/)dd=:F-"@Szp (d jNT`.牫#` ŖǪd8ڃP' –Ca87l䅼`_\7*SW.-ɰbr_ܷ2{W{gvH;P\x 0KV/}想4}׀^e-/8qi}=ǥ]O\kOkgA{."bz1OS]n_Fz3/n_yzT񀆻n}^ah %D':v{Vƒ'bb50x.^YnUAqQٍUJx`ke+vp .?*vV:89UBd>7FO7b6ì3YO]0wZL|z ' ^5ʦ]G_~?uY7X.‰<]UEyW: g;ϲOU K5s}pw;O;CEl~m<"5h@og4Nq|@_$T,}ZTdFvR mwi+o|߷_K? ?5'Z9̚@8B<~,l }VXVm5"0.Zbsp [yfzJx=In]4'&#tUS^s枿VssxD2nbD/o}K:9~h y˲?=ҕfyu|>&H_[y  e>C津V^ϴʚѸ<џ̷>(I> 0dU` "q)~FG/j𭽰* *o,9g T:&~iSU2,C+S/qB1h"[)J%=ȇ}XEej-bA;DTc&Z ϛ{!J=G6MLBz x%w #%9$ǟ VzP+]xCmhod3cBQR@>] +twUZ-xf-͓/kaX$Q9I5 t| O(꺻x^_ߤH|p,ew pMzw_|G.؃HRqIV=d'88i>&$ }l]"OmTz6|a \)&iGA_Bz#d5H$c|kvu%=V+V`,aס"3prp7 #[ia0d|K5,gU h}i'd{{rT_; .E{+0\t9ѰLo@{]0ҫ])ƒO$[lZ w_3aUNsݻ7@GScfI~hg?Z{\Zݳ xY߁* uS̷> {6A6ĺB`T.jjzzP 󔫴3l i,WyLZ}_^};e*5v5* ?ӣ(=ƙg_||5dH HeΧ}{e |œҦݶC|~6ZR L>ﴡ<I)=A6&Tzb7o=&rk{'d')U[a-M~o\}j槐Bjz]ksA\O]!wVq\k0 Q~g`!_0L"gЁ#zz6su'1CU$tJ*phq)e (ńf [<0>ҜBUqҝ\a5;WV\v~"p1,_p\o|>ŋf)&hӑ]RC$ՔtXPOUKC$mOWPQB&5h-F~J pg4|c.yӲ5,eӫp8HI-c{ҭr0yh}!Mh RР^@ X+?{v@SWY\'dwR35h\(Nd/”I>Ң(DG>TgP6;9Gߡzr j4ʿ ͅ9$OV^ڤ>ptFJ*Y$vQĩFRnp V])-ddxhFv5c ]qYDN9B??rW_Bv?5X+.-t#E  :MR :vVsTHJR2txX#\0\Q#s ZpZO:l6;C f5}Q!&9!]:<Ǿ/LC  [[Dq:w%SBrjk˞m6:8C!;GA^AY +k vk*VPC#__j6o_0b54~|Bѵ}+`t5t3Xi ] \LvXqi`tmwU l\HW[Zcqe3@Z rlH cSQ8%&Sшgmk?[΁ 8f -XUqAg ,iOJq)6K!/BڒȥDukN~|˫Ha!h!DlΔ]pCZc%淰͸ l#ae~,ɇ\ěa"ZA#MmE,٫+c_FNO}!ev-;l1GŁU~lWC;[G` 3/&d0c]5K>=9 Y3OR[d7bԙõsC *bx'̜)kg/W c5pʅ4j*(f̟j.O!Q+!91W'OXBZs^7v0!rol<}\ *%0 "ޏkLybcI3@z_y d{ȉ^^"t=%**8mҸ>K?Ӟ!-r `_!ddG|u'WЮR;쌢L!``ZDWU</:yU`i'zy jE%!ܐվoI;o00Lu@y%rUͺȏcD`ˆEN\pmmKD,H0뚄4,/i'=9yPdr!Z00[sL &tm7^+= lMf,K&2&Ȋ٫WiQ?u{6Y2&pKr'~Viik F ǘ%sue.Y0&yIVzϰS"vv۩0MTz6\h _u; ˒"=h \0Yrٴt 1]Cƞ9Í&<0뚄o޻#vhVTK1#Y{v$/eF䴅a3MN1:|c1\. ߅]cEWTSɚ;c nΚȢ>i.1T$ P=U:33GK]Cƞ9SMT2"_<1cv{uVV!L$#Xs)_w,1ڬ*NlNakI®^WOn?C`p9Y&+7̺& ;ma\tY2&Wx1ں־\Ul䚄e '}h_%쥶2+tW6' !;|fkT$o<m<._hUPKQ2{޵5K}# qxz.zd_RdҪy# ;^qY'LafCrFK@{|/x։ ]QWHxD9Ez@4IE#(i؂FJ'I F@9lQ522D<6ZRQ)A8uZ$Lh-IENDB`n!Y< "PNG  IHDR<|{HsRGB pHYsod!fIDATx^] |E֯L.pFN/]Ve]YYCeQwu[v=pc]DB-w•dd>t:$3_³꽰4" , NȀp4-ZE:hH/q 9u|S:tcD!=-ɃL|²qIU4^1uҾi-_JޭOUDNi9j)) ]Z^MQ]zu"_STAWO`L[iX cXuy ]8OԪirTF̡qDz-/dEGBr[Y_nV!JBA"H}C::S&h@EN8IU1a odžsYUUo F 9h0D49 E#rzţ^oWkɞ5N}VE%*Jcӆl!pe|C}xF{bK4@LtQ|+OpN1NXZMID(ӈgî}\~'bUUsoY}؞ =v a]>jȇm5@Q&! u >5Z(ƠhP>QuJ4ZO `~ ,[E.}/I-1V1DqJێTc٢X6'_y¢Va(n0*M9X [5+:}r-%S}_z=^_VDbKYT"1uq;-(מQ}L rD40V- iY=OF̪H7imzCVCYʹbĶerɞn)\Ep}ɠy5"0Pe/A_Xr_ߛ+,8c3| #:zb̓O~[Y*l-BH%ݻ-bv/sN!=mڠSr9WXN,%7d?FO >y*gqڡ jآhXS8i; OUd?9nUMhLI<tu0pY4h P%, yn-`dΝ!R0qSqBM/LPW[̫oJaCAOd5dRr&sOe۪6[C󻶸ӣ7{pSg׵3~O/,g7( Rj1ب[ Ǭ"qhQ2&kDi#En ugXYYxKYnΟ忮=q|fۛ|%Gq?yGK_MT.vE~׸ zBgf22ﻼs¼[~UVsBUC"Y L8b | 7+u o(< <_5L _{f=€&6\hnmX %k.Z8f"į\r8j4ؓŦ6$gC5gR3Dq_(gk?\nWԹ){JLqeHDqh(ff{̒Swϰziztofooϫz]QcՊA q,ІLe]5BjJׄ٧0&J{tL u٤4"@|oX~[NOĺuPZ0G~ p"^=IFe՗D GE02= C+t!ir1q:Y?Sa'5_fVwnxdv:ޒȃH_~"AUt}ߌ76Iu[1P>ۨ\ s9e_ը?vl}L^WVE'vwP;PU!ǛbfV_xP fLF6DGag9]Jgz,WWStɯqpA,AyQ mu.e_ww[H 6 NoBq?S?dZhqϊq`*+$~>Ⱦεjʤ Ɛ1ˍDjR%nBFUܣS޼ Une&HLK< 4;X\Ɩ]~r_efzSN;eZ Xde)\[H6zھg:ZŠs6厬LпD*8)?x|QZYwȫ7R2P\q}1=\iбK5%;7| 4޽g!~T׾̩Q%~lkdO4 G%QmrUX ޔW\bf)) mN`Ґ՛.<0bM)g=RpkI:IyM; jZ=IrVѵ >ipyKEUR[WI)Ǚt"Y PW*ѕ7C?fs`2AXCc!FmiЃeRI!HsYzQI`AÆSDzv$"#ί]N&yzFcwMy *?PO-Oc+nM/K0J(qж}8XɎlڊCW{ZZw\TM/! ' ;"+nuR:"GFu]x&@2FId ^6[bWK? 2745Vq̪*+tUe:+C,\"!S}zy|zދ'f}i^_! DAۨxC@*LH&ialcPeUlie$;9w^ڱyk c{ML\ vqm\v%ޚ.C6*@“-u-},r+*=-diB5-\m,%M+y]xKTLNJa`M]w3BlˮA1=eW[K?v5f?Z^"Dx{ bn n߳_(mv.ʥ?r,n%9c]2鱮'gl^; {KB0I=-_JӋQѳj = i@ YhS>$kAـ1{)$=Fh5`@H$Jp`Yq/Fƍ\5&y95/ DR !( ,&@o$lg8fg|7>ԃevG";:.;@g@)"k~6Ls8hH8h-a]j~[Z>=8hm\`k=8hm\`k='8hm\Юڮғ\h6]**=對)ZٽK{*FtSvؒ ={B-k4") S>UY!r|oҿ>_ovի$~l7yy ޯؒgM&^@@dg$ͫn\??u,@!#H@ %.)dD!jp"n'(}uWC"Ϫ-Nڴ>Uғ!1Ȟ⇭*DZՐޱɣ\<102/?)S2sn^eUUhm+w~sᾲ' pk׮=Qn0)~?0Bu7^SQTW #ĬQsʔ`0>Pّm<\7צm8U_]v w=zdO==Vg첒tS{J.ϸ2a6)]ARɂ'3rs-;-7ڂa4 &LEuj8GK{~ϝx/p7p'tں{"eb~"ndc.'Ù"DC6p ˜!֜q["k=(Is*t$)꒒v:HvJE&JzNAy>vY䟱E{yq3گ@j5`)  ސ)L?ai,Ü:,WX1gILx L瓏"[θEM/k)qfrو3~N/;nꚼB9J9 XF.D{HM:ں*8/~2֟졙q8#TۿѮPۉ g3j qBڟnVT{/us2RKKN,Zdjr긢} j9\@{Ӏ|A{ oxF/~ƺÀsn% ۆm}c{2|wWk wZ\p>׀U5Ak՞|Vz.U5Ak՞|Vz.U5Ak՞|Vz.U5Ak՞|Vz.U5Ak՞|Vz.U5Ak՞|Vz.U5Ak՞|Vz.4 Z=ǹckjh+T&o3~UUª*kQDŽh4Ҿ;.V@r牢B+6}j_{A %I|͵ ?ڰb_+Q0w\z#C&bv6/?1}6潽ś^sx6u& vʈ--sCM)'=x^ȩ^תb ZoD>| r%8|¸QV8췓PV5l|-|wX!v(֊툱ֵfyjYSYz7hŻ &٪S'.R-~֨V 'U$%ՊSUh11#P$51;: gL{@͖t0g6F,$*eY1LLVኘAKU{-7?xzYэ<1٩Z<ŗՓ.O_C,((fѨ-]͝t(EZ:Cmd[7kN鋿o=ՂnEY j4J>}ٵl67وui !Z" j $.,,ihFڄmo`|dl:n"k3hLY{ )9hITѾzlPjdr[To{VOn2YB !-!I""Yqb@=sI<%-Q{ Ͽg3\\܃̛ΡHۈnZUM9$l$o:}ȷ!QUɲhZ7MΉn*P$sr3ϖP-..52FM9s6gV-3t9 L9"v䠥QSۣ[ۭ[OfÔFv.YٶkmaBi3MBsY[{DZcZz"l/ǢQat[|p XL0.-\Vv04~ =yH|Tp XL0ήM5Wpt pZܦ࠵is{J8hwcko= # *rTk|&E'kh >Lg2]4z"{ӽ3!qt|C5} DTIMJZ32/wVB!n͚AtD%BB^=f] /55p4?xO{odGSIENDB`n9o3q̭N5ƘPNG  IHDRgFHsRGB pHYs.>0PLTEMMMhhh|||y|IDATh헽o#E]}8Dw(ή"bjN 5)@rTt鄮9)!!*G${y:4+y7μ1t:@t:@o 4ȫwzql:yI[Z]g}9QC_nMZJ7][OCe1@'v"ڳ(<g|:lC)`cgnD7rsr1-3XOQe?8 }ĸ}6}}zC fP~&#`@q%`fLS%XC-njd$F wow@q$ׅV~v}*ˇ>WfzCfȨy?dw4Or( t\K/u: Cej#ʂAQd (2Y"VϚlg.׾~ V2X7>eA;hOd8Llr:߹w.>_N~s, 8q M~v8Q Y2`{R@π@XhN9`ewhYC}AU;i]I&- 2tb(Be| QJܖctz-fwGmt27Yisah, ȵO 4" ?b$椄@ )7Xb$Y< "!b$o3q̭N5ƘAZ@ 0e0e A@A5%8c8c     ?1d0u0@Ty2 NP'p<'p@A)BCD|E?0 3333@80 1  7R ʚ;

51

V~Z 5 ,! AAnother Hello World Example_

51

`P   ,!  %~Where can you put JavaScript?You can have more than one uP   ,!  ;How to put comments?

51

nP l ,! o" Creating an interactive pageUse of event programming. An event is anything that happens to an object or element of an object. Click on a button: click event Select some text: select event Mouse hovering over: mouseover event When an event happen, we need to have an event handler.6bc8bc8 ? Let us create a simple buttont<html> <body> <h1> Hey you are in luck. Do you need a date for valentine s day? </h1> <form> <input type="button" name="button1" value="Yes! I need a date"/> </form> </body> </html> Pk Add event programming - body.<body> <h1> Hey you are in luck.. Do you need a date for valentine s day? </h1> <form> <input type="button" name="button1" value="Yes! I need a date" onclick="displayMyMessage()"/> </form> </BODY> </HTML>8P,Add event programming - head.n<HTML> <HEAD> <TITLE>Interactive Web Page</TITLE> <script type="text/javascript"> function displayMyMessage(){ alert("Sorry! Can t help you today!"); } </script> </HEAD> 8PTQ>E  2Declaring functions in headdMost event programming handlers activate some form of javascript functions that is declared in the  head We ll start to do that immediately. Good Practice. You declare the function, and you write a series of instructions of  what to do In this case, we are just  displaying a message with a  alert box.6 Exercise 11: jex2.htmlMake a page that have two buttons. It also has two javascript functions declared. If you press on one button, one of the functions will be called (activated). If you press the other button, the other function will be called instead.P4   Interactive Web Page <PPLG? ]/l       0` 3Wo+ff3̙` 33f33̙3` ! <yxG`wglZff` yE[AQpff3k` 31m̙3f` 3333̙3` O~̙Zƺ` ffff̙` ǵfZƺ` fff3fZ̙>?" dd@*?tZd@nK `7@d` n?" dd@   @@``PR    @ ` `0p>>   ` (  T `   "`   6ޕ"  * \ }`  "}`  6 "}` * B  s *DjJ"`,$D  0  6 "@`  T Click to edit Master title style! !$  0 "@`  RClick to edit Master text styles Second level Third level Fourth level Fifth level!     S  0 #" `b@   H*0    0 #" ``@   J* 0    0 "``  J* 0  `B  s *D"    s *" 0 H  0޽h ? fff3fZ̙___PPT10i. 3l+D=' = @B + HTML   0   p (   T   "  6Pܳ"P  * <\   "  <8"p *   < "0 `s * hB  s *Dp" p \ Pp  "Pp   6"pPp * B   s *D"p,$ 0  6 "`@  T Click to edit Master title style! !  6 " `@   W#Click to edit Master subtitle style$ $  0 #" `b?  H*0    0T #" ``Aa   J* 0    0h #" ```  J* 0  H  0޽h ? fff3fZ̙80___PPT10. 3l 0 z``(  ` ` 0? P    R*    ` 0$G     T*   d ` c $ ?   ` 0DJ  @  RClick to edit Master text styles Second level Third level Fourth level Fifth level!     S ` 6tP `P   R*    ` 6$U `   T*   H ` 0޽h ? ̙3380___PPT10.{p  0   (  x  c $ `@  H  0޽h ? ̙33    0 2*0X(  X~ X s *Xe@`   ~ X s *g@   ~ X s *`h `  H X 0޽h ? ___3̙3f3y___PPT10Y+D=' = @B +g   0 P`(  `~ ` s *|l@`   ~ ` s * p   ! ` s *耷 CBegins with FD    : ` 3 A u H ` 0޽h ? ___3̙3f3   0 xl(  l~ l s *@`   ~ l s *Lp    l s * 0 : l 3 A pH l 0޽h ? ___3̙3f3$   0  T$(  Tr T S p@`   r T S @`  H T 0޽h ? fff3fZ̙80___PPT10.\,p4   0 tR(  t~ t s *D@`   ~ t s *x·p    t s *÷ r,Note the difference between ALERT and COFIRM*- ,: t 3 A  H t 0޽h ? ___3̙3f3   0 qix(  x~ x s *ڷ@`   ~ x s * ܷp0p   x s *Xݷ cLearn to comment your scripts* H x 0޽h ? ___3̙3f3$   0 $(  r  S 0ȳ@`   r  S ɳ@`  H  0޽h ? fff3fZ̙80___PPT10.c,BK   0  S(  ~  s *$@`   ~  s *Xp0p    s * 0   BGH "`P pp E Type of GUI 0    BGHv "` `  ]#The text that appear on the button$0$   B, GFH "`P@ KButton Identifier0H  0޽h ??0   ___3̙3f3   0  \(  ~  s *@`   ~  s *$p0p    s *' ,Event Handler: onclick="displayMyMessage() "B- ,H  0޽h ? ___3̙3f3d   0   (  ~  s *@@`   ~  s *Bp0p  `  s *TC displayMyMessage: This is a javaScript function declared inside the  head sectionS S$ -H  0޽h ? ___3̙3f3$   0 P $(  r  S Z@`   r  S Z@`  H  0޽h ? fff3fZ̙80___PPT10.s,0   0 0 (  r  S Hl@`   r  S tm@   r  S Ln   H  0޽h ? fff3fZ̙80___PPT10.r, a  0 ` (  X  C `     S c` @    H  0޽h ? ̙3380___PPT10.GFq,  0 p (  X  C `     S }` @    H  0޽h ? ̙3380___PPT10.GFr,  0  (  X  C `     S x` @    H  0޽h ? ̙3380___PPT10.GF %t,  0  (  X  C `     S ` @    H  0޽h ? ̙3380___PPT10.GF %t,  0  (  X  C `     S ` @    H  0޽h ? ̙3380___PPT10.GF %t,  0  (  X  C `     S ط` @    H  0޽h ? ̙3380___PPT10.GF %t,  0  (  X  C `     S D` @    H  0޽h ? ̙3380___PPT10.GFu,   0  (  X  C `     S ,` @    H  0޽h ? ̙3380___PPT10.GFu,   0  (  X  C `     S #` @    H  0޽h ? ̙3380___PPT10.GFu,   0  (  X  C `     S >` @    H  0޽h ? ̙3380___PPT10.GF`2w,  0  (  X  C `     S X` @    H  0޽h ? ̙3380___PPT10.GF`2w,  0  (  X  C `     S 4j` @    H  0޽h ? ̙3380___PPT10.GFx,  0  (  X  C `     S ` @    H  0޽h ? ̙3380___PPT10.GFx,rGA0 )7~@RJI]LO TW@Z\2bVejhmoqsuw z |4~H\p1Oh+'00 hp   $HTML and Web PagesTerence T. OwHTMLTerence T. Ow90Microsoft PowerPoint@t@-@P~T@GFGg  y  y--$xx--'--$UU--'ff--$=hh==--'--$AffAA--'ff--%UU--'̙--$m m m --'ff--% --'@Times New Roman-. f32 +& JavaScript."System9-@Times New Roman-. f3 2 +S-i.-@Times New Roman-. f32 +Y Introduction.-՜.+,0h    On-screen Show51   Times New RomanArial Wingdings Courier NewTahomaHTMLJavaScript- IntroductionWhat it is and what it does?Hello World ExampleAnother Hello World ExampleWhere can you put JavaScript?Exercise 10: jex1.htmlHow to put comments?Creating an interactive pageLet us create a simple buttonAdd event programming - body.Add event programming - head.Declaring functions in headExercise 11: jex2.html  Fonts UsedDesign Template Slide Titles %_8 Terence T. OwTerence T. Ow  !"$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefgijklmnoqrstuvwyz{|}~Root EntrydO)PicturesECurrent UserxSummaryInformation(hPowerPoint Document(#\DocumentSummaryInformation8p