ࡱ> n ar9=>}PNG  IHDRsRGB pHYsjPLTE'qodϾͼ̺̹ɶűįİƳпջi IDATx ϳmi6S'* ZZ t%.* m)ҦH"m)ҦH"m)&m)ҦFMg}W}Iz:&^VxȵA* A}-f,~F¥„ 5$Ӳz+ Ig!{f ChѴ&h7T3Lۥ]sҎFrOiD\;1 [WiVW;a[x$8HN kmӶJ8Ypc-lT*/H{ʴob{$I^Ͽ|~Ym?I{ҴWye-iOb޻M!: R J&\ r7N/æmkPpp2Kekv=웛zw_ 'WASǜxT4m"g~4m}ѥi=/7{;_6TCGU5g" S NL=eqoFJ;rk{jv>Z}~˖ZnW3imik=^vWQ+OXibe捕ԑf]ц6jzik,XsZXXČ;,mdz,  ho_wZw~ۦhYo{w? Jh~|zzz>>tߓi(#_~׿o񉴧?''i6i6i6i6i6i6i6i6Ei6i6i6i6i6iP?+ڜ?+ڜ?'ڜ?'cO>l}rys}3T~fSEG6[*rzfSEVGܛ(fSEoF2[*3s3s=?SkI2y0ڷo"M6EiS}准H{ش6=6=MvCm?~jkKڣ]_}o I{Dm\}k&і[aZi=%6iO+lrX=B|rJڤMڤMڤMiSoJmDC}VbumSM6EiSM6EiSMʼnnIENDB`n ѢO_SnPNG  IHDRosRGB pHYsjPLTEqodϾͼ̺̹ɶűįİƳпQrr IDATx휉z6nPXUuq,IVI& ,O)1ϖD v\c230DN#r&TO)zdsn ڇT-t pE1I+ՠ=-j- l70BTCmF3C`/U Ev؁~]UܛmϭtH=Ti r,a/w&Qw Fdu鿿SedaRmu>=lc vTg(jnP`UT'=prL!xubOط-O}U6K~@Et( *KFТ}Թ! "Ed#gc rm\;!|h\ bShcUF;NrD2mG6Poj`=jsL"(+)WSى@aC$ oV{Y8. ͡paZ7Fp]8({1B"qqjeV7ں8Zv҈m=6&DAt~+L!r mSxB,CWj(x > g9yJ4"9iN5&?313+Ͷ8<oD=!HT <ț9H&sv4,'67zMWݐ{1*tDKRRI/hiBUO?h&2F(b4n>?KHK9ђTQwERcZ\ L0kJ ՗L3UwsA;95F[WʹW %W2U!9HȢ"ZޗZR@rQQu ݞN#wׇ5C T'zFDN#rӈF4"9iDN#rӈF4"9ӈF|_=հ nkW ׀iDN#r"'}wSXU(j_"xm*ZpSyE8@*w+ˆ(?g@1ĉ@DN?p| >\Dn@y.If!y9Ώb)ň E!of|JDNDNDNDND~F׭cК5E~9Z󫜖k lȯh#xK~^䑛zss3߾y0wD>><<~|ڮvg">Շ=_|˧b_|7Aimn" /gz|o=WD>}5|`%n|CG~vgyzȳ@{bG>C9 Yv7wLr@xw{4䑿???'oȉȉȉȉȉȉȉȉȉȉF4"9ȉ30.)r.)r.)r.)r.)%@FȗّK d?sI,sInb.) ͆K deI9 99 9-)69-##r"?1eg1fDN#rӈv*8Z-D4,Gî+@<' w?~> %"G{W[_",U^&_[_"-ٗuMD.BM߈|rȣr"rd2vK؉R+9999_Lj|4ȯe hrӈF4"9m?BrdÒIENDB`n0W u'61!PNG  IHDRn$sRGB pHYsodXIDATx^OVǿ~g"$DQ1CTPHA @0PH! 2HA0ȅ.j" B! t ;p;>3Ňs3g^g̝w?|@@ˎ  {%pw%_kl" @A*z%|_܃!)T>  `xNx9ObA**ȟHīA A9]S^ej C"48E8l /#!ใc䕝 pդ*3Fj@1 @A a@w3T@@.JCzH @iWw wpBk mjlrp^nNoI#+~2AW^y7fx{% Av{ o1 ;#*"VVf5B&eNwdi!r@=8Y2_5+\Ry6)6u D v'ћE+b~LedސQ7Pf@yz{1t> ewOfqq}8_>vn$t&oGM!!pYeIUϺHB*A(WD'q&i)N~)%BO(׍PW_eUJp$ F2!PGtwM_(=Mj\˫z.i:>v>qsě&2pMv^uG7+}?&8Ɋ P%ý>\cMa!=UD?ݽ*8υ^nV -%$. .+ǢoRU)─n73\0[7u$`:2D-A WRz?dA,'@t#A ,'@t#A ,'@t#A ,'@t#A ,'@t#A X8< O<9{?55m۶F$)iǏ߿_]6sv $)I_|ƍfJl@ o+;> ! 6{ƟP^ۥ{ gub.lxzax`;*̕W`>/K2G&0ٸpJ[bdT*/,Z>4^St0K'UH+Xy hR"  @i0Q9o`u .$9Rҕ'yKʙf_ΞtA`+w)x'Pܩw'YBs%ebHpBfkƻDhT Ӯ`Rp$z4ޙqʊ) J:^IG`a6sde/x DJ45i1r3 @)8@&`ջsǔ.N1#i8r~t.v 6R-wxTnvθߍÕZ֫qvi&vû`"3 w4M3ҫ =h+%fa>=82v6"Pk7 _{lH(jΕxg=x6ĝLƞd{gN_̕kJIA % G :#E HIl@)"%~@ %n@^ %yހ@ %n@^ %yހ@ %n@^ %yހ@ %n@^H 6UxH#%XK{P E U'x ;HIQ  dQE@wޑ@"HI'Q}'O:1 %HI'a>}g}e˖g>|2`r")*}{^xaÆ Ǐ~W.LjS^|͛m6gΜ~A) J|={pׯ_?|0Nix$;1B#Фɲehc1=b`Rؙ Z~rСWY,? 3 ' FJ'A(&cr%CٴiӮ]S0ތ@){pѯrBi^vܹpZy&u% YWtV@Z~BTBC t%Ql7nܠ=k֬9py@RC@guoF,?iBy$ٯ1zɹsh=mcIQ3:^Y̟shCZ~B򓮁þ@'R=' Z~س({tWXk|8qf4G\;^C7{ozcƛoIV.$ɞ."+Лɳ,-}>|u?1DSG݀ f…O)T;gdwOQ--?D(X~RFr) s-?ܹei 8 SiSc/^M4 )imY̞zÇYCԪK%jXx]Vm㺹~d:2AՇ 4 Nhg6mZ?.%,M^׸&& P:pkT%HTAOHPr? iZXR {EyI)ͯޢE^ _#Չq̮]T5.<[_3*)hҴi#>/-?@ E\GW;FiOH2;/e 4'O];q^׎ Z3U'uԄ-eך4FH+בuSdʲ1֪E-5S$)]R44n/'VąK["mi'q!q59+)2ePų5nҗ&ilۥfOӤΓr+ų{X%iOR4$ 2p<>٦L?1Hs^];n=(]_CUc7*'qxhEХN*P˸XԵ PIJDH PMRRͨ8* W2H* @J&x )@Q<Hc͒$%,ZJ0R[wyXN8o<۽{L Ϳ:hd9O~lrhs?-%al*MWJ 1M4Hud+b ˊ-1 4| +u* k}&Hf4z"IViД浱G27qly%E<\JB) =RҾKznFL;:vTV*= ٥6qsJrE2ӈFR*bGf"eȇ"@BmEÉoN͂"rv+/$ˇ+:^XJN:%TzovL+NiMcVYOQ׍ZGGS64Av'{TOI=xJ[>")KT  PۂeRlcGwжoٽqhF|7RWBad#`1Jҟ5Iݜ$ŵ7N)oW^8leMeM9{uje@l?#%ScORJJm.QdO$\l+KGaI'>M,2[n0>xjt2pxM%xxkj4gW^qekF 0 ?Ppy|Z[&jq6hG WlnM#>gD'dI0[b%m[Jx8cDJe]LPWQL0J&%dM@5u C`&DcR )v C#"D@J&@JQ&BR2(FR2R}Ģ5 B{S Jӆ22YH!%]P&5 1RHGڛX']7&)Korڒ `Ĉ)CI!'ހūiht.a:!83{.r{2j쐒줡Ck11FV%[_l ik>74*d!ɫ҂6"r 8 ˕ۖ+A5P=s3Mo-u+k4 f"qAa-HT2))Qr=Y' 8_3<127#?բT9Шe-]dt>{ϖ> NZo4&D?豚~,wp\6$ߕ5ٌJ%C+1kG!4%i  %^l5?Mg3mȡYVo_ݩb&M nF\sy3g(;#N 6Un<|f> kٛi+o1r4ιJ1 \tun1i@܌ d"\&+|7Ho{N~UEͧ Jg( 4Ժ5p| {,8"}ۚi9HI3YtLbDlw [޽{wjjj…gϞ<]ʷTv.7;;БƱD6_N}ҔSN^z9*|TPI8y}CLʍmr3zgؽ{[߿` .h !^ Zx\|;49v؜9sz%`֮]Kݓ˗Xȑ#O>#:uF-_u޽;MǮZj|5qƻ{ 9t_7hA|7$(U/fΜkR1Ŷ^xS ဎvQoM>}fQ$I n ̘1`/]_7oCJZ{slpéՎ!BcV,YrUZxn:<~8+&jOnpQܹΝ;ŋielַ=89H]ׯܹsܴiWiy*o[v[k@?~O?ݳgχ~8}FJDTah Mܾ}=;Իޑm;$(+W{=fnE=5Q͛c2{lMuJ2  FAԩ蕌!ʨchK+Wh"vÆ #Y~)黑ضm-? =";c3vYxxgY JR=p=k׮mܸqմ)Ã)^LQ ҵ}ЌҥK/^-|@$ 5]y?4\9@J.&.;HNb 06+R $]+9"}i*An%+Rp@ B@$1 @,߃㭿Ҭ[!~3W*7D=)#  q3*O 4ܿ(@ s@ 2/A s@ 2/A s@ 2/A s@ 2/A s@ 2/A s@ 2/A s@ 2/A s@ 5}z?H{pl:I㉚ )fJ2f"<)dH4M9W'`,G{YR)<4~GVCvb{{m}ӝ/s"W',w}GQDaT_ID{^lKp_lo@H/^T='o䱷/?D[mom<{pSzuݼ|/ XV*!%ޯt/iegpg44K+Њ Zihoꏨ6,~9dHpmXAٳpg9=Z+dس iL(׾Cvw.nwJD 3?[b6ý \K:v#xkr..y#f'ϺߝtQw¾D Į!{ی k-Pnj۹BzʤlĕPNG  IHDRBZsRGB pHYs.>PLTE'qod,tIDATxAr0 @5@L\k&ÔI!ZDrYCFhFhFhFoҌhW"|fDK;$͈pI!TS =|8NgfBBX_?09UH z9˶fmȻ!CG#`nU@^Ѣ2\D>DF4ӆtj/ťr0%촞 6},6aHIL i+L1kE~qO:] ,Z,DtJ sy= $ɓ˃k{"(q◰'{KnsEI#f)Sӄr,' fDg;,͈veN/ED/Bɢi ˢpǭUWycnCpml@ lDzzCl†"f_gkG~D<]D?z7ΗF~8]^n9 \ې0K gDJ V6wA*Svf?&HqG d}!t]3,/1Jt}# 4"   4$b$ar9=>} b$ѢO_Sn  b$0W u'61!2$uehE[yu6$b$۹Bzʤlĕr%9 0e0e A@A5%8c8c     ?1d0u0@Ty2 NP'p<'p@A)BCD|E?@3333@80 1  7R ʚ; Hello World "); bgcolor and write are some of the properties that you can use.&Z&PQ9 8Example: Button and ResponseNMake a button and a message box. Need to have a form to  hold this GUI objects You write form instructions in the body. You write the javascript function in the head.  

33P 2 6*Recall from last lecturet<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> PkExercise 12: jex3.htmlWrite a html page that has two buttons, a text area and a reset button. When you click button A, you display in the text area that you click on button A. When you click button B, you display in the text area that you click on button B. The reset button clears the display area.P Variable Definitions>Like most programming you need to be able to use variables to help you process data i.e. to store it temporary, for calculation etc. Variables in javascript is very simple to define. var age; var counter; You can put these variables anywhere inside the  javascript portion of the page.:RRP ; $Assignment and arithmetic operations%%&]Working with numbers: var age; age = 7; age = 7+1; // shortcut will work too // var age=7; *HH,8 *Working with strings: var name1; var name2; name1 =  Scooby ; name2 =  Doo ; var dog; dog=name1+name2; dog=name1+" "+name2; var firstName, lastName; d[3333!#, Local vs Global Variables<script type="text/javascript"> <! var globalCount=0; function example1() { var count1=0; count1=count1+1; // local variables used for temp calculation globalCount=globalCount+1; } //--> </script>Zb  K %!What if we declare the same name?H<script type="text/javascript"> <! var globalCount=0; function example1() { var count1=0; count1=count1+1; globalCount=globalCount+1; alert("Global Count: "+globalCount); } function example2() { var count1=0; var globalCount=99; alert("Global Count: "+globalCount); } //--> </script>%P%         Exercise 13: jex4.html#Write a html page that has three buttons, a text area and a reset button. The program counts the number of times you click the red or the blue button When you click the total, it gives you a running total of red, blue clicks. The reset button clears the display area and resets the count $#PP$4Displaying strings  help!If you have to display strings such as the following: "I have 3 days left. " You basically concatenate the strings as follows where count was a number you calculated: "I have "+ count +" days left. " ~6[!6[!Getting input: 2 ways of doing'Inside javascript myName = prompt("What is your name?"); alert("My name is : "+ myName); Inside form To access the string entered inside javascript var myName=document.formName.nameField.value; alert("My name is : "+ myName); G E/N       /       33                      ) G ! Exercise 14: jex5.htmlWrite a html page that sums or multiplies two numbers (see picture below). Caution: Because you are dealing with numbers, you have to make sure that you convert the input string to numbers. To change a value from a string to a number, you use the parseFloat command in javascript such as: num1=parseFloat(num1); ie. var num1=document.formName.nameField.value; Here num1 is actually a string ie.  4"; instead of the number 4 so you need to do num1=parseFloat(num1); to convert "PP0" dP !       33         &    P  t  #!"U/        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 `   "`   6d"  * \ }`  "}`  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   "  64S"P  * <\   "  <l "p *   <H "0 `s * hB  s *Dp" p \ Pp  "Pp   6|"pPp * B   s *D"p,$ 0  68 "`@  T Click to edit Master title style! !  6 s " `@   W#Click to edit Master subtitle style$ $  0w #" `b?  H*0    0{ #" ``Aa   J* 0    00 #" ```  J* 0  H  0޽h ? fff3fZ̙80___PPT10. 3l 0 z``(  ` ` 0ଭ P    R*    ` 0ɭ     T*   d ` c $ ?   ` 0  @  RClick to edit Master text styles Second level Third level Fourth level Fifth level!     S ` 6ѭ `P   R*    ` 6խ `   T*   H ` 0޽h ? ̙3380___PPT10.{p  0   (  x  c $h `@  H  0޽h ? ̙337   0 P`w(  `~ ` s *@`   ! ` s *,f CBegins with FD     ` ZA ??"`9H ` 0޽h ? ___3̙3f3   0 0X<(  X~ X s *@`   ~ X s *@`  H X 0޽h ? ___3̙3f3y___PPT10Y+D=' = @B +n   0 l(  l~ l s *C@`    l s *G 0 ^ l0 3 0e0eA  ?A@ A5%8c8c     ?1d0u0@Ty2 NP'p<'p@A)BCD|E?`  H l 0޽h ? ___3̙3f3$   0  T$(  Tr T S Q@`   r T S R@`  H T 0޽h ? fff3fZ̙80___PPT10.\,p4   0  t2(  t~ t s *0f@`   r t S f@P @   r  t S gP     t s *h r,Note the difference between ALERT and COFIRM*- ,P  t Zhn ?? , Zfunction displayText() { document.simpleForm.response.value="You click the red button!"; }[ [, " 2  t  ` ??"` p@ 2  t  ` ??"` p B  t  `D??@` B t  `D??P  H t 0޽h ? ___3̙3f3K   0 p S(  ~  s *@`   ~  s *p0p    s *䓩 0   B앩GH "`P pp E Type of GUI 0   B䙩GHv "` `  ]#The text that appear on the button$0$  BGFH "`P@ KButton Identifier0H  0޽h ??0 ___3̙3f3   0 >6x(  x~ x s *\@`   ~ x s *4@`   x s * 0 H x 0޽h ? ___3̙3f3$   0 $(  r  S ϩ@`   r  S Щ@`  H  0޽h ? fff3fZ̙80___PPT10.c,B   0  (  x  c $ީ@`   ~  s *ީ@   x  c $ߩ `    s * w?Variable declaration is not required, but it is a good practice@ @H  0޽h ? fff3fZ̙80___PPT10.c,B$   0  $(  r  S @`   r  S @`  H  0޽h ? fff3fZ̙80___PPT10.0x}1$   0  $(  x  c $0@`   x  c $@`    s *T 8Note the second declaration of globalCount in example2()9 9 H  0޽h ? fff3fZ̙80___PPT10.0x}1   0  R(  ~  s *w@`   ~  s *8@p     s *4 0 :  3 A> \:  3 A  H  0޽h ? ___3̙3f3   0 >6 (  ~  s *d2@`   ~  s *I@`    s *Tlp?Lqp+A` _,J|W~-C wB˕|'Bi/xh,mb9mJXXx;b5-_ێo~*Z\!3@1K 7|F5T?پD\Dp ]^#W­z{oBࢗa&h.2v/˘f`zJ"UQDOg+$jBiRwJ4 J_irWxzXS>wNO*J\WI'c hR1ImXɣ hg9*\jDrOc]ogdnj0K]+O]45),~r ?UyjݥᧃzO4F%Slm]t^;jηa;aox.襶WwuH}#12w eCŌ9ճX:[sX3tki̴1Ok}9e/s90R\8s0=q̒ˍr ,VC%n3cӢKcft62a8,*^N.-R\.iuf>9OIfY ѭֹI737OjS*i\(tK\Y7gal²zFi\8TV^ck[9@ r5?w9NOHj5o~oO\|: 7wuvTҴCv߄coVg4 Ǿ3Zc}@N FRQ5:ۗ3#D,OnuF/j> \.bߧi ܛ$ \<~WȤ c77jlo\7K &h&)PeXUwa#I h*W(KFT^ Mdwl :dtDG@$Q0 )X+o9ġxޗ[M~܆\GPw\%x۷19.oC˕m[o7=ESq(%Hx[%226"y-}c4wҋ8*xSeyb#=_*wyCc{q(_GގwF{Ȓ6љp޿PVP ŌzS-v &q&';#InoflܵuSoWYownܵuek[]&f{L{}iLi+PPoӫrj[>i;c jُ Ǚ`@W%M<@C?ɎGN̦Sq$8pp{ g<< [V*xtlbVF"#ac[d,O8Pfg^g-/ W~] Ŝ{x'&ṇ!~Uc!keW},u2NK$.K@^,9RΡ#Lz5p*̣ԫ~7Q6q[vB5!]>2ɏ]Ŧ*,F("} w!SHuZ"AFW+?L=?@)/]2JѕǥjD #.Ez#:5?Dśz 9߅lE)5 f]p郫3uVuǃVZ-0{p+<>\6>.oS5CP]Fz2T%5?D˝kke2e <u۴}3m]qi72X:!JWq^3NK$.|6u܉"}(eYWwmY Pp=6ez6h ioikuzLHB2MM #<kdHxDA \>w,:׾"%x8KȞ;+$7Q+ k=Lo+)%o^xu&SL`c09i5'17s.;`1L;8|}=Mx?X9G9IˑsUχXOp/Zh,9/a.rNɐs:l'D{LU)%9ggs^Ȗs?s{^qqHޙ1Û+4saʜ,9< 9$9ul'DK<-r@?}Z {ʉ\+(9dZ[hmk+m:K/tO|F:Vvk oZ{Uʗ09$^Ͷ^-ysezu&ȞsZV*9?4>6퇑-sBKl {2(9f9k^oCۮ_|C|s)_\䜫$9Ml/ZY0:d9WrRBcݵrdXZR0 9G~@e]Y_ Jgs-v^Yx{~HbODn2FZnҥ"6J޿19(   SmartDraw SmartDraw.20"SmartDraw DrawingH/ 0|DTimes New RomanTTD Times New RomanArial Wingdings Courier NewTahomaHTMLSmartDraw Drawing"JavaScript- Processing HTML FormsEvent HandlersDocument ObjectGeneric RepresentationSome properties of documentExample: Button and ResponseRecall from last lectureExercise 12: jex3.htmlVariable Definitions%Assignment and arithmetic operationsLocal vs Global Variables"What if we declare the same name?Exercise 13: jex4.htmlDisplaying strings help!Getting input: 2 ways of doingExercise 14: jex5.html  Fonts UsedDesign TemplateEmbedded OLE Servers Slide TitlesA--'%_M Terence T. OwTerence T. Ow--'̙--$m m m --'ff--% --'@Times New Roman-. f32 $& JavaScript."System9-@Times New Roman-. f3 2 $S-B.-@Times New Roman-. f32 $Y Processing .-@Times New Roman-. f32 1& HTML Forms  .-՜.+,0    mOn-screen Show51q Times New RomanArial Wingdings Courier NewTahomaHTMLSmartDraw Drawing"JavaScript- Processing HTML FormsEvent HandlersDocument ObjectGeneric RepresentationSome properties of documentExample: Button and ResponseRecall from last lectureExercise 12: jex3.htmlVariable Definitions%Assignment and arithmetic operationsLocal vs Global Variables"What if we declare the same name?Exercise 13: jex4.htmlDisplaying strings help!Getting input: 2 ways of doingExercise 14: jex5.html  Fonts UsedDesign TemplateEmbedded OLE Servers Slide Titles%_ 0Terence T. OwTerence T. Ow  !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~Root EntrydO)PwW;K Pictures<Current User-GSummaryInformation(PowerPoint Document(qDocumentSummaryInformation8$ܖ 0ܖDArialNew RomanTTDܖ 0ܖ DWingdingsRomanTTDܖ 0ܖ0DCourier NewmanTTDܖ 0ܖ1@DTahoma NewmanTTDܖ 0ܖ C .  @n?" dd@  @@``   `(#*""   &' > 4"   4$b$ar9=>} b$ѢO_Sn  b$0W u'61!2$uehE[yu6$b$۹Bzʤlĕr%9 0e0e A@A5%8c8c     ?1d0u0@Ty2 NP'p<'p@A)BCD|E?@3333@80 1  7R ʚ; Hello World "); bgcolor and write are some of the properties that you can use.&Z&PQ9 8Example: Button and ResponseNMake a button and a message box. Need to have a form to  hold this GUI objects You write form instructions in the body. You write the javascript function in the head.  
33P 2 6*Recall from last lecturet<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> PkExercise 12: jex3.htmlWrite a html page that has two buttons, a text area and a reset button. When you click button A, you display in the text area that you click on button A. When you click button B, you display in the text area that you click on button B. The reset button clears the display area.P Variable Definitions>Like most programming you need to be able to use variables to help you process data i.e. to store it temporary, for calculation etc. Variables in javascript is very simple to define. var age; var counter; You can put these variables anywhere inside the  javascript portion of the page.:RRP ; $Assignment and arithmetic operations%%&]Working with numbers: var age; age = 7; age = 7+1; // shortcut will work too // var age=7; *HH,8 *Working with strings: var name1; var name2; name1 =  Scooby ; name2 =  Doo ; var dog; dog=name1+name2; dog=name1+" "+name2; var firstName, lastName; d[3333!#, Local vs Global Variables<script type="text/javascript"> <! var globalCount=0; function example1() { var count1=0; count1=count1+1; // local variables used for temp calculation globalCount=globalCount+1; } //--> </script>Zb  K %!What if we declare the same name?H<script type="text/javascript"> <! var globalCount=0; function example1() { var count1=0; count1=count1+1; globalCount=globalCount+1; alert("Global Count: "+globalCount); } function example2() { var count1=0; var globalCount=99; alert("Global Count: "+globalCount); } //--> </script>%P%         Exercise 13: jex4.html#Write a html page that has three buttons, a text area and a reset button. The program counts the number of times you click the red or the blue button When you click the total, it gives you a running total of red, blue clicks. The reset button clears the display area and resets the count $#PP$4Displaying strings  help!If you have to display strings such as the following: "I have 3 days left. " You basically concatenate the strings as follows where count was a number you calculated: "I have "+ count +" days left. " ~6[!6[!Getting input: 2 ways of doing'Inside javascript myName = prompt("What is your name?"); alert("My name is : "+ myName); Inside form To access the string entered inside javascript var myName=document.formName.nameField.value; alert("My name is : "+ myName); G E/N       /       33                      ) G ! Exercise 14: jex5.htmlWrite a html page that sums or multiplies two numbers (see picture below). Caution: Because you are dealing with numbers, you have to make sure that you convert the input string to numbers. To change a value from a string to a number, you use the parseFloat command in javascript such as: num1=parseFloat(num1); ie. var num1=document.formName.nameField.value; Here num1 is actually a string ie.  4"; instead of the number 4 so you need to do num1=parseFloat(num1); to convert "PP0" dP !       33         &    P  t  #!"U/        0 sk`  (  ~  s *ʭ@`   ~  s *X@`     s *e 0 H  3 A"`    `T ?? b  8box1     `h ?? `   8box2 B    `D??0  B    `D??0 P     `D ??  [ displayResult  B   `D??p0 0   ` ?? L = GUI names     ` ?? ,`} 5} HH  0޽h ? ___3̙3f3rj51  !"#$%&'()*+,.Oh+'0 hp   $HTML and Web PagesTerence T. OwHTMLTerence T. Ow102Microsoft PowerPoint@ Av_@-@hW;KGg    y--$xx--'--$UU--'ff--$=hh==--'--$AffAA--'ff--%UU--'̙--$m m m --'ff--% --'@Times New Roman-. f32 $& JavaScript."System9-@Times New Roman-. f3 2 $S-B.-@Times New Roman-. f32 $Y Processing .-@Times New Roman-. f32 1& HTML Forms  .-՜.+,0    mOn-screen Show51q