Anno unc e me nts Pro je c t 2 is po ste d. T ip of the Da y: “Prog ra mming ” is like bra in surg e ry to ma ny - - some thing tha t ta ke s a g e nius to unde rsta nd. But a nyone who g ot into UW c a n le a rn it. 1
Pro g ra mming Ba sic s Whe n it c o me s to be ing pre c ise abo ut an algo rithm, a pro gramming language is be tte r than E nglish
T he Pla n We will le a rn Ja va Sc ript o ve r the ne xt fe w le c ture s • Ja va Sc ript is use d with HT ML in We b pa g e s • Ja va Sc ript is a c onte mpora ry prog ra mming la ng ua g e - - we will le a rn only its ba sic s • You will prog ra m in T e xtPa d (or your fa vorite e ditor) a nd run your prog ra m with your browse r Ja va Sc ript is the wa y to ma ke HT ML “a c tive ” 3
Be g in with HT ML HT ML is sta tic … the c o nte nts o f the file a re displa ye d a s g ive n <html><head><title>My Test Page</title></head> <html><head><title>My Test Page</title></head> <body> <!-- No JavaScript yet, just HTML text --> <body> <!-- No JavaScript yet, just HTML text --> What is 2.0 + 2.0? What is 2.0 + 2.0? </body> </body> </html> </html> 4
Ja va Sc ript Ne e ds HT ML Ja va Sc ript must b e surro unde d b y <sc ript> ta g s in a We b pa g e ... <html><head><title>My Test Page</title></head> <html><head><title>My Test Page</title></head> <body> <body> What is 2.0 + 2.0? What is 2.0 + 2.0? <script language=“JavaScript”> <script language=“JavaScript”> Put your JavaScript code here Put your JavaScript code here </script> </script> </body> </body> Sc ript ta g s c a n be use d a nywhe re whe re </html> </html> white spa c e is OK, so use the m a s ne e de d 5
Bro wse rs Pro c e ss JS Whe n the b ro wse r c o me s to Ja va Sc ript, it pro c e sse s it imme dia te ly <html><head><title>My Test Page</title></head> <html><head><title>My Test Page</title></head> <body> <body> What is 2.0 + 2.0? What is 2.0 + 2.0? <script language="JavaScript"> <script language="JavaScript"> alert(2.0 + 2.0); alert(2.0 + 2.0); </script> </script> </body> </body> </html> </html> 6 Pa g e not fully loa de d
JS Ca n Build Pa g e s Ja va Sc ript c a n a dd to a pa g e using the do c ume nt.write c o mma nd ... <html><head><title>My Test Page</title></head> <html><head><title>My Test Page</title></head> <body> <body> The sum 2.0 + 2.0 equals The sum 2.0 + 2.0 equals <script language="JavaScript"> <script language="JavaScript"> document.write(2.0 + 2.0); document.write(2.0 + 2.0); </script> </script> </body> </body> </html> </html> 7
Ja va Sc ript is Co o l Ja va Sc ript ha s ma ny slic k a pplic a tio ns so it’ s wo rth ta king a c o uple o f le c ture s to le a rn it ∗ We mo ve o n no w to the b a sic s, b ut first ... 8
Na me s I n Pro g ra mming I n no rma l la ng ua g e , na me s, a nd the thing s the y na me -- the ir va lue s -- usua lly c a nno t b e se pa ra te d • In prog ra mming most na me s c ha ng e va lue s … a c onse que nc e of finite spe c ific a tion • T itle s (US_Ope n_Cha mp), Offic e s (Ma yor), Role s (Julie t), e tc . a re fa milia r e xa mple s of na me s tha t c ha ng e va lue s • Rule s, Proc e sse s a nd Dire c tions e xploit the va ria ble va lue : “ Julie t move s to the window ” 9
Va ria b le s • Na me s in pro g ra mming a re ide ntifie rs he thing s the y na me a re the ir value s • T T he pa c ka g e -- ide ntifie r & va lue -- is a variable , implying a po ssib le c ha ng e • Ide ntifie rs ha ve a spe c ific struc ture in e ve ry prog ra mming la ng ua g e • JS: le tte rs, dig its, _ sta rt with le tte r, c a se se n. X x te xtOut MI5 long _va ria ble s_a re _OK ra te hype ns- not- OK 007 no spa c e s e nd 10
De c la ra tio ns o de c lare variable s is to sta te wha t T va ria b le s will b e use d • Re quire d … put de c la ra tions first in prog ra m • Use the word: var • F ollow with a list of va ria ble s se pa ra te d by , • T e rmina te a ll sta te me nts with a se mic olon ; var x, input1, input2, rate; • Give va ria ble s a n initia l va lue with = var interestRate = 4, pi = 3.14159; 11
Va lue s Pro g ra mming la ng ua g e s a llo w se ve ra l type s o f va lue s: nume ric , string s o f le tte rs, Bo o le a n • numbe rs: 1 0 -433 6.022e+23 .01 • not numbe rs: 1,000 10 6 5% 7±2 • string s: "abc" 'efg' " " "B&B's" "" • not string s: ' ' < tab > ' "a ' "\" • Boole a n: true fa lse • not Boole a n: T F ye s no 12
Assig nme nt T he unive rsa l fo rm o f a ssig nme nt: <va ria ble > <a ssig nme nt symbol> <e xpre ssion> F o r e xa mple ... day = hours/24; • va lue of the va ria ble on the le ft is c ha ng e d to ha ve the ne w va lue of e xpre ssion on rig ht • re a d “=” a s “is a ssig ne d” “be c ome s” “g e ts” • rig ht- to- le ft va lue flow = is diffe re nt in ma th a nd prog ra mming 13
E xpre ssio ns E xpre ssio ns a re like “fo rmula s” sa ying ho w to ma nipula te e xisting va lue s to c o mpute ne w va lue s, e .g . hours/24 • Ope ra tors: + - * / % produc e numbe rs • Ope ra tors: < <= == != >= > on numbe rs (or string s for == a nd !=) produc e Boole a ns • Ope ra tors: && || ! on Boole a ns produc e Boole a ns • Grouping by pa re nthe se s is OK a nd sma rt seconds = ((days*24 + hours)*60 + min)*60 14
Ove rlo a ding Plus T he + c a n b e use d to a dd numb e rs o r jo in string s (c o nc a te na te ) • 5 + 5 ⇔ 10 ⇔ is the symbol • "a " + "b" + "c " ⇔ "a bc " for “has the value” • '5' + '5' ⇔ '55' • T he ope ra nd type de te rmine s the ope ra tion • Combine a numbe r a nd string ??? • 5 + '5' ⇔ '55' • Rule : With a n ope ra nd of e a c h type , c onve rt numbe r to string , c onc a te na te 15
F irst JS Pro g ra m, Re visite d Re write e a rlie r c o de with ne w c o nc e pts <html><head><title>My Test Page</title></head> <html><head><title>My Test Page</title></head> <body> The sum 2.0 + 2.0 equals <body> The sum 2.0 + 2.0 equals <script language="JavaScript"> <script language="JavaScript"> var anumber = 2.0, another, answer; var anumber = 2.0, another, answer; another = 2.0; another = 2.0; answer = anumber + another; answer = anumber + another; document.write(answer); document.write(answer); </script> </script> </body> </body> </html> </html> 16
Co nditio na l Co nditio na ls te st if a n e xpre ssio n is true o r no t • Ge ne ra l form … if (< Boolean expression >) < Then statement >; • F or e xa mple if (day == "Friday") evening_plan = "party"; 17
I f-T he n-E lse Bra nc h b o th wa ys with I f-T he n-E lse if (< Boolean expression >) < Then statement >; else < Else Statement >; • E xa mple … if ((year%4)== 0) { leapYear = true; febDays = febDays+1; } else leapYear = false; 18
Summa ry Pro g ra mming is the e xa c t spe c ific a tio n o f a n a lg o rithm Ja va Sc ript is typic a l … with ma ny rule s ∗ L e a rning stra te g y • Do the re a ding first • Pra c tic ing is be tte r tha n me morizing for le a rning the rule s • Use the prog ra m- sa ve - re loa d- c he c k pla n • Pre c ision is your be st frie nd 19
Recommend
More recommend
