Anno unc e me nts Pro je c t 2 is po ste d. T ip of the Da y: - - PowerPoint PPT Presentation

▶
anno unc e me nts
SMART_READER_LITE
LIVE PREVIEW

Anno unc e me nts Pro je c t 2 is po ste d. T ip of the Da y: - - PowerPoint PPT Presentation

Nov 02, 2023 228 likes •430 views

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

slide-1
SLIDE 1

1

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.

slide-2
SLIDE 2

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

slide-3
SLIDE 3

3

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 ”

slide-4
SLIDE 4

4

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> <body> <!-- No JavaScript yet, just HTML text --> What is 2.0 + 2.0? </body> </html> <html><head><title>My Test Page</title></head> <body> <!-- No JavaScript yet, just HTML text --> What is 2.0 + 2.0? </body> </html>

slide-5
SLIDE 5

5

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> <body> What is 2.0 + 2.0? <script language=“JavaScript”> Put your JavaScript code here </script> </body> </html> <html><head><title>My Test Page</title></head> <body> What is 2.0 + 2.0? <script language=“JavaScript”> Put your JavaScript code here </script> </body> </html>

Sc ript ta g s c a n be use d a nywhe re whe re white spa c e is OK, so use the m a s ne e de d

slide-6
SLIDE 6

6

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> <body> What is 2.0 + 2.0? <script language="JavaScript"> alert(2.0 + 2.0); </script> </body> </html> <html><head><title>My Test Page</title></head> <body> What is 2.0 + 2.0? <script language="JavaScript"> alert(2.0 + 2.0); </script> </body> </html>

Pa g e not fully loa de d

slide-7
SLIDE 7

7

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> <body> The sum 2.0 + 2.0 equals <script language="JavaScript"> document.write(2.0 + 2.0); </script> </body> </html> <html><head><title>My Test Page</title></head> <body> The sum 2.0 + 2.0 equals <script language="JavaScript"> document.write(2.0 + 2.0); </script> </body> </html>

slide-8
SLIDE 8

8

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 ...

slide-9
SLIDE 9

9

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”

slide-10
SLIDE 10

10

Va ria b le s

  • Na me s in pro g ra mming a re ide ntifie rs
  • T

he thing s the y na me a re the ir value s 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

slide-11
SLIDE 11

11

De c la ra tio ns

T

  • de c lare variable s is to sta te wha 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
  • llow 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;

slide-12
SLIDE 12

12

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 106 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

slide-13
SLIDE 13

13

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

  • 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

slide-14
SLIDE 14

14

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

slide-15
SLIDE 15

15

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
  • "a " + "b" + "c " ⇔ "a bc "
  • '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

⇔ is the symbol for “has the value”

slide-16
SLIDE 16

16

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> <body> The sum 2.0 + 2.0 equals <script language="JavaScript"> var anumber = 2.0, another, answer; another = 2.0; answer = anumber + another; document.write(answer); </script> </body> </html> <html><head><title>My Test Page</title></head> <body> The sum 2.0 + 2.0 equals <script language="JavaScript"> var anumber = 2.0, another, answer; another = 2.0; answer = anumber + another; document.write(answer); </script> </body> </html>

slide-17
SLIDE 17

17

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
  • r e xa mple

if (day == "Friday") evening_plan = "party";

slide-18
SLIDE 18

18

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;

slide-19
SLIDE 19

19

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