R.J. AQUINO: Lad os bare komme i gang. Så dette er Quiz 1. Her er nogle oplysninger på højt niveau. Den About side for quizzen er på dette URL ikke længere CS50.net, selv om vil stadig arbejde. Det er CS50.harvard.edu/quizzes/2013/1. Det er den store Om side, som fortæller dig hvor og hvornår, nemlig næste onsdag i en flok af værelser. Og ved næste onsdag, jeg betyde to dage fra nu. Alle disse oplysninger er der. Men det er kumulative. 

Så alt fra den første halvdel af år er potentielt på quiz, fordi du ikke kan virkelig gøre avanceret ting i C uden hvis forhold og efter sløjfer og lignende. Men der vil blive lagt vægt på den materiale omfattet, da Quiz 0, startende med structs og Fil I / O. Det er typisk mere udfordrende end Quiz 0. Den gennemsnitlige score er typisk lavere. Studere hårdt. 

Mens du studerer, skal du sørge for at bruge CS50/discuss at sende dine spørgsmål og læse andre folks spørgsmål. Så hvis du ikke har nogen spørgsmål, Log på og læs dine venners spørgsmål. De er sikkert gode spørgsmål. Og tage den praksis quizzer. Vi har været at give quizzer for syv eller otte år nu. De er alle online. Fremtidige spørgsmål svarer til gamle spørgsmål. Det er, hvordan vi gør dem. 

Quizzen findes ikke endnu. Ingen af ​​os har set det. Men det vil se ud tidligere quizzer. Til denne anmeldelse session, er det ikke en udtømmende liste over emner. Du kan ikke bare deltage i dette, og derefter være helt klar til quizzen. Ellers ville det ikke være så meget af en quiz. Og det er heller ikke nødvendigvis alt hvad du behøver at vide om nogen givet emne. Det er meningen at udsætte dig for de ting, vi har dækket, minde dig om, hvad vi dækkes, og den måde, som vi dækket det. Men du bliver nødt til at gå videre og dybere når du studerer at dobbelttjekke at du ved alt om en given emne, og at du har udfyldt alle hjørner, der var dækket i foredraget. 

Quiz noter fortælle dig at gå til skriftlærde noter, ur forelæsning videoer. Det er en god måde at sikre, at du har dækket alle dine baser. Så komme i gang, da jeg lavede disse dias, jeg forsøgte at sætte hvor jeg fandt information. Så for File I / O, for eksempel, uge ​​7, Mandagens foredrag, og den udstationerede Afsnit 6 og Problem indstille alle har information om File I / O. Jeg har gjort dette for hvert emne. Så de titeldias kan være nyttige for dig. 

Så her har vi File I / O. Husk, at i Problem Set 5, brugte vi fopen, fclose, fwrite, fread og fseek. Efter at have genvundet 30ish JPEG og have ændret størrelse og rodet med bitmaps, skal du være temmelig fortrolig med disse funktioner og hvordan de fungerer. Hvis du ikke længere er velkendte, helt sikkert gennemgå dem. Og sørg for at forstå, hvad de forskellige argumenter er, når de er brugt. 

Men de fælles filrelaterede bugs kan du blive bedt om - godt, hvis du har glemt at kontrollere, om fopen faktisk arbejdede, før du går til ændre en fil. Det kunne være slemt. Hvis du har glemt at fclose en fil at du har fopened, der ligner en hukommelsesfejl. Det er temmelig dårlig. Og glemmer at kontrollere, om du har nået til slutningen af ​​filen, før du begynde at skrive på den. 

Så hvis du siger, hey, jeg er på slutningen af ​​filen. Giv mig 5 flere byte. Nå, det er nok ikke kommer til at arbejde ud af den måde, du forventer. Det er virkelig det for File I / O, fordi vi gjorde så meget af det problemet indstillet. Så hvis du forstod, hvad der foregik i Problem Set 5, husker bitmats og JPEG, så er du sikkert alt indstillet til File I / O. Hvis der er en smule fuzzy, helt sikkert gennemgå dette problem sæt og det tilknyttede materiale. 

Structs var det emne, der var på linje mellem Quiz 0 og Quiz 1. Ikke helt gøre cut for Quiz 0. Så de vil helt sikkert være på Quiz 1 uge 7, mandag. Hvad er en struct? Her viser vi en struct. Det er ligesom en ny type. Det er ligesom en container for flere felter. 

I dette tilfælde har vi erklæret en struct studerende, der har to felter - en streng, som vi kalder navn og en int, som vi kalder alder. Så når jeg passere omkring elever eller jeg modificere de studerende, vil jeg være i stand til at få adgang til deres navn og deres alder. Lad os se på nogle kode for det. Her ser vi, at jeg har erklæret en studerendes, ligesom Jeg erklærer enhver variabel - int x, int y, et cetera. 

Her er studerendes. Han starter med intet i hans marker. Så lad os sætte dem. Du sætter felterne i en struct med prik. Så jeg har sagt her, at s.name = RJ. Og s.age = 21. Du kan også opdatere felter på samme måde, du ville opdatere værdien af ​​en variabel. Så jeg ønsker at ændre mit navn fra RJ med ingen perioder R.J. stavet rigtige måde. Det ville være s.name = RJ, det samme som vi sagde det oprindeligt. Og så kan du få adgang til dem. 

Så vi har sat dem. Vi har opdateret dem. Du kan også få adgang til dem i den meget samme måde. Så her, jeg udskrivning ud R.J. Er 21 år gammel. Og jeg adgang disse værdier med s.name og s.age. Så der er adgang til structs med dot notation. Jep, spørgsmål? 

PUBLIKUM: Er der en grund til forrige dias, som du ikke har bragt elev på den øverste linje, ligesom typedef struct student og derefter elev i slutningen? 

R.J. AQUINO: Så spørgsmålet var, om dette dias, har vi typisk set typedef struct node og derefter områderne struct og derefter ordet node. Og hvordan kommer her jeg ikke sige, typedef struct studerende og derefter områderne struct og derefter student? Årsagen er, at jeg ikke behøver at adgang til det indvendige af struct. Så det er OK at forlade det uden et navn. Jeg kan bare lade det som en anonym struct. 

Grunden til at vi gør det for hægtede lister og ting er fordi inde du har brug at henvise til en struct noder stjerne. Så struct skal have et navn, så du kan få adgang til det senere. Det er en mindre detalje. Men du vil typisk se typedef struct krøllede parenteser, hvis du ikke har brug for navn og typedef struct nogle navn efterfulgt af krøllede parenteser, hvis du vil bruge navnet. Så det er et godt spørgsmål. 

Og på dette punkt, er vi tilbøjelige til at ændre structs og passere rundt structs af referere, ikke af værdi. Så vi vil bare passere rundt henvisninger til structs stedet passere omkring Structs selv. Så du meget ofte kommer til at være bruger, i dette tilfælde, student * eller struct node * eller node * i stedet ud studerende eller noder. Så her, jeg har sagt, OK, den variable PTR vil være adressen på s. Det kommer til at være markøren til den studerende R.J. 

Så vi kan få på disse områder det samme som vi får noget. Først ID referere markøren at få struct. Det er * ptr og derefter en prik og derefter alder. Så for at få adgang til området, og jeg har opdateret det nu til 22, Fordi, lad os sige, det var min fødselsdag. Der er en genvej syntaks ved hjælp af pilen her. Så ptr pil alder er bare det samme som * ptr.age. Nu, det er noget du bliver nødt at huske og huske. 

Du brugte det meget i pset6, speller PSET. Men det er faktisk, hvad der foregår på under hætten. Det er dereferere markøren og derefter få adgang til det. Spørgsmål? 

PUBLIKUM: [uhørligt]. 

R.J. AQUINO: Så hvorfor bruger vi pejlemærker som structs i stedet for Structs selv? Årsagen ville være, hvis du passerer en struct til en funktion, har du sandsynligvis ønsker at passere rundt blot 4 eller så bytes, der repræsenterer markøren, som modsætning til den potentielt 30 eller 40 bytes, der er struct. Så passerer noget til en funktion er lettere, når ting er mindre i kort. Spørgsmål? 

PUBLIKUM: Du har måske nævnt dette i begyndelsen, men er der andre dias op på [uhørligt]? 

R.J. AQUINO: Disse slides vil være op efter gennemgang session. Vi vil sende dem på hjemmesiden. Så bevæger sig på og bevæger sig på en anelse hurtigere, vi kommer til at tale om data strukturer. Der er en masse. Vi dækkede en flok af dem. Her er hvad du bør forstå om datastruktur. 

Du bør virkelig forstå på et højt niveau, hvad hver enkelt struktur er. Kan du forklare på engelsk til din ven, som ikke har taget CS50 hvordan vi organisere vores data, og hvorfor vi skulle også skal bruge noget på denne måde? Det er ting man. Thing to, forstå implementeringen. Så forstår at bruge disse ting i C. Og vi vil være at gå over dette. 

Og så ting tre ville være kende kørselstider og begrænsningerne af forskellige strukturer, du bruger. Så forstå, hvorfor du ville bruge en hash tabel i stedet for et array. Forstå, hvordan hurtigt i gennemsnit adgang til en hash tabel er. Forstå hvad operationer er hurtig på linkede liste, men langsomt på arrays og vice versa. Så for at forstå det, er du nødt til forstå Big-O notation bare at vide hvordan til at tale om disse slags ting. Og vi vil tale om det. 

Så første ting, der er knyttet lister. Her er et højt niveau billede en sammenkædet liste. Vi viser det i klassen. Vi har typisk 10 personer stående på scenen. Men vi har en række knudepunkter, hvor hver knudepunkt har en vis værdi, og en pointer til den næste værdi. Så for at komme fra én node til den næste, du bare sige, giv mig den næste node. Du har denne node. Giv mig den næste node. Du har denne node. Giv mig den næste node og så videre indtil der er ingen node til venstre. 

Så fortsætte med at tale om det på et højt niveau. Det er meget nemt at indsætte ting i en sammenkædet liste. Hvis du er ligeglad med ordren, du kan bare slippe det lige i starten. Det er konstant tid. Men det er svært at finde en værdi. Hvis du forsøger at spørge, er syv i min liste? Du er nødt til at gå igennem hver enkelt værdi. Er det syv? Er det syv? Er det syv? Er det syv? Igen og igen. Og det er O (n). Så når studerer til quizzen, sammenligne dette med arrays. 

Er det OK? Lysene gik dim. OK. Hvornår er en sammenkædet liste bedre? Hvornår er et array bedre? Så lad os se på nogle kode. Her er en potentiel node. Det er en struct. Det har en int n, som vil være vores værdi. Og det har en struct node * næste, som er vores pointer til den næste node. Så her kan vi se, at vi er der sket at have sat en int i vores knude. Men hvis dette var en linket liste over char stjerner eller en sammenkædet liste over flåd, vi helt kunne gøre det også. 

Husk i pset6, har du sandsynligvis haft en hægtet liste af char stjerner eller blot statiske char arrays. Lad os se her på en operation. Så vi ønsker at indsætte en ny n ind i vores linkede liste. Vi starter ud med et hoved pointer, der er en pointer til dette knudepunkt, der har den værdi af n, og en næste af en pointer, peger på denne node er en værdi på n og en næste nul, fordi det er den sidste node. Så af hensyn til tiden, vil jeg lægge al koden på skærmen. Og vi vil gå igennem det et par linjer ad gangen. 

Så her er koden. Jeg håber, det er læsbar. Det første, vi gør, er vi allokere et nyt knudepunkt. Så det giver en pointer til en ny node, ikke helt har noget sæt op i det endnu. Vi skal du kontrollere, at den nye node er ikke nul. Ellers, vi er nødt til at give op. Så efter at have kontrolleret, at vi nu indstille værdier i knudepunktet. Så vi satte den nye n ind i vores n felt. Og vi er den næste pointer til at pege på den oprindelige hoved, så vi kan nu har indsat denne node i vores liste. 

Endelig har vi den globale hoved punkt til vores nye node, så hvis vi skulle starter på hovedet, ville vi være på dette ny første knudepunkt i stedet for den gamle første knudepunkt. Og når denne funktion afslutter den ikke længere eksisterer variable ny knude, fordi det var lokale til funktionen. Så dette er verdens tilstand. Vores globale hoved peger på vores nye første knude, som peger på vores oprindelige første knude, hvilke punkter til knudepunktet efter at. 

Det var indsættelse. Jeg håber, at det var forholdsvis ligetil at følge. Når du er i tvivl, tegne et billede. Så jeg synes, at vi taler om hægtede lister og kigge på kode er meget ikke nyttigt. Betragtninger ser på et billede af en sammenkædet Listen giver mig mulighed for at tænke, åh, så Jeg har denne node her. Men hvis jeg opdatere denne pointer, det ender afbrudt. Og jeg har glemt, hvor noden går. Og koden kommer ud. Og du har flere noder der er afbrudt. Og du behøver ikke ender med den liste, du ønsker. 

Så hvis du tegne billedet og gøre det skridt for skridt, forhåbentlig, vil du se den rigtige rækkefølge af ting i form af ajourføring af henvisninger til at sørge at listen kommer sammen. Insert er forholdsvis ligetil. En mere kompliceret ville være Indsættelse i en ordnet liste. En mere kompliceret funktion er at slette og finde, så at kigge gennem en liste se, om noget er der. Måske du gjorde det i pset6 når du kom ind i din hash tabel, og du sagde, godt, er ordet æble i min linkede liste? 

Så du måske allerede har gjort dette. Men absolut, genopfriske din hukommelse og forsøge at reimplement finde og reimplement slette en linket liste. Sjov side bemærkning, er der også dobbelt-linked lister, hvor du har pejlemærker, der peger både fremad og bagud, så du kunne gå til næste node og til den foregående knude. Og der var et spørgsmål om sidste års quiz af denne type, taler omkring dobbelt-bundet lister. 

Nu, det er en struktur, at du er relativt bekendt med, fordi de fleste af jer sikkert brugt dem på pset6. Her er en, der er lidt mindre velkendt. Som en side bemærkning, jeg tror, ​​at Quiz 1 er primært hårdere end Quiz 0, fordi de ting, du laver, du ikke har gjort så meget. At sætte det på en anden måde, for Quiz 0, du havde skrevet en masse C. Og vi spurgte dig om C. 

For Quiz 1, vil vi bede dig om PHP og JavaScript, som du har ikke skrevet så meget af. Vi vil bede dig om C-kode, du har ikke skrevet så meget af, denne avancerede C ting. Så absolut, øve de ting, vi talte om i foredrag, som du ikke nødvendigvis gøre om problemet indstillet. 

Taler om, som du ikke har skrevet en stak på et problem indstillet. Men det var i foredraget. Her er den højt niveau billede af stakke, at vi viser hvert år. Det er stakken af ​​skuffer Mather spisesal. På et højt niveau, stakke er en sidste ind, først ud datastruktur. Det betyder, at du kommer at sætte tingene i - 1, 3, 7, 12, 14, negativ 0. Den ene ting, jeg ikke kunne have sagt - negativ 3, 0. Du sætter alle disse ting i. Og den sidste du sætte i er den første en, der kommer til at komme ud. 

Så du har to operationer - skubbe og pop. Alle de sætte i, at jeg var gestikulerer som dette er push. Og så når jeg nå ind til grab noget eller nå på toppen for at få fat noget, det er pop. Så vi kommer til at gennemføre stakke. Og vi viste dem i foredrag anvendelse af arrays. Men du kan gøre dem hjælp hægtede lister. En stak er en konceptuel data struktur, ikke som en implementering-specifik én. 

Så hvad ville det se ud? Det ville se lidt ligesom dette. Du ville have et heltal størrelse. Og du ville have en matrix af værdier, der vi kalder bakker, fordi det er hvad billedet var for os - int bakker - og derefter nogle maksimale kapacitet. Så hvad ville presse ud? Tja, hvis vi har en stak s, så at skubbe noget på s, ville vi få størrelse s. Og det ville være den næste åben stedet af vores array. Så hvis vi har tre ting i vores stak, så bakker 3 ville være den næste åben plet, fordi 0, 1, og 2 er allerede fyldt op. 

Så vi sætter værdien i s.trays [s.size], den tredje plads. Og så har vi tilvækst s.size at sige, hey, vi havde tre ting før. Nu har vi fire. Så næste gang du trykker, er du kommer til at sætte noget i 4.. Eller næste gang du pop, er du nødt at se på 3 i stedet for 4 eller hvad. Og så vil vi vende tilbage sand til sige, hey, vi lykkedes. Det fungerede. Som en tommelfingerregel, hvis en funktion, der er formodes at returnere sandt eller falsk altid returnerer true, du kan har gjort noget forkert. Så fungerer det? 

Tja, det virker fint for 1, og 2 og 3, og 4 og fem. Men lad os sige jeg nå mit kapacitet. Jeg har derefter køre ind i et problem, fordi hvis størrelse er den samme som kapacitet, jeg nu forsøger at sætte noget ind i en matrix, hvor jeg ikke har plads. Så en kort kontrol for at løse dette. Hvis s.size == kapacitet return false. Ellers skal du gå og gøre, hvad vi gjorde. Så hvad andet kunne vi bede om i stakke? Hvad andet bør man studere? Hvad andet bør man øve? 

Nå, gennemføre pop. Vi har allerede gjorde push. Jeg ordner det. En ikke array implementering, hvor du bruger en linket liste, måske. En ikke-int gennemførelse. Vi gjorde ints her. Men det kunne have været flåd. Jeg kunne have været strenge. Det kunne have været char stjerner. Kig på tidligere quizzer for den slags spørgsmål, vi har bedt om stakke. 

Jeg vil sige, at vi dækkede stakke rundt det samme som vi har dækket dem i forløbne år. Så quizspørgsmål bør være en god indikation. Bevæger sig fremad endnu hurtigere, køer. De er ligesom stakke. Men de er først ind, først ud. Hvis du er britiske, ordet kø sandsynligvis lavet en masse mening for dig. Ellers kan du have hørt om det som en linje. De arbejder ligesom linjen i Apple Store. Den første person til at dukke op på 3:00 i morgen er det første person til at købe sin iPad. 

Så vi har to operationer - enqueue og dequeue. Sæt i kø sætter nogen på linjen. Dequeue trækker den første person, på stregen. Igen kan vi implementere dette med et array. Så hvad er det struct vi viste i foredrag? Det var denne ene. Igen, tal. Igen, størrelse og denne nye ting foran. Hvorfor er der noget, der hedder forside? Det er indekset for den næste element dequeue. Det er kun internt at holde styr på den første fyr til at dukke op, så vi kan trække det ud, når vi har brug for. 

Bestemt se på noter og prøv at gennemføre enqueue og dequeue når man studerer for quizzen. Vigtige ting at tænke over. Vikler sig rundt om den forreste plus størrelse ender større end kapaciteten. Igen, hvis din struktur er fuld, du kommer til at have et problem. Hash-tabeller, du har set før. De fleste af jer sikkert implementeret disse på pset6. Det er en struktur, der sigter mod O (1) konstant tid indsættelse og O (1) konstant tid opslag. 

I CS50, vi implementeret dette som en vifte af hægtede lister. Det centrale element til en hash tabel er hash-funktionen. Så det konverterer dit input, lad os sige, en ordbog ord, i et antal, der kommer til at være vores indeks. Og vi vil bruge dette indeks ind i vores array. Så her er en sød lille billede fra study.50.net. Vi smider alle de ord til vores hash-funktionen. Og hashfunktionen fortæller os hvor til at sætte disse ord. 

Det er alle store i det land, hvor Der er kun ét ord for hver slot. Men som du husker fra pset6, der er flere ord end slots. Så hvad sker der, når du få en kollision? I stedet for at lagre en værdi, lad os sige, hash tabel 3, du gemme en sammenkædet liste. Og så i stedet for at have cantaloupe her, ville du have en linket liste, hvor den første node er cantaloupe. Og den næste node er kat. Og den tredje knudepunkt er kollision, lad os sige, fordi alle disse ord begynder med C. 

Så de fleste af jer gjorde det for pset6. Hvis du ikke gør en hash tabel på pset6 og du har forsøgt noget lignende en trie, helt sikkert gennemgå hash tabeller. Hvis du gjorde det på pset6, absolut gennemgå hash tabeller. Og hvis du gjorde det på pset6 og det gjorde det ikke arbejde ud helt til højre og du havde en masse problemer med det, absolut gennemgå hash tabeller. Så lektionen virkelig er afgjort gennemgå hash tabeller. 

Langt mindretal af jer prøvet ud forsøger på pset6. Højt niveau billede. Det er noget som dette, hvor hver knude har et sæt af børn, hvor hver barn svarer til et brev. Og hver node siger også, hey, jeg er et ord. Så i dette tilfælde ordet Maxwell, hvis du følger M til A til X-W-E-L-L og derefter følge det en mere. Og du får dette symbol, delta, som vi tilkendegiver at betyde det er et ord. Så Maxwell er et ord. Disse deltaer er hele signifying hvilke ting er ord, og som tingene er ikke. 

Så i pset6 de data, vi lagrede sideløbende nogen af ​​vores knudepunkter var "Jeg er en Ordet ". Og cool ting om forsøg er de viser indsættelse og opslag i O (længden af ​​et ord). Så bare for at komme igennem Maxwell, det er M-A-X-W-E-L-L. Så syv eller otte - Jeg kan ikke tælle - trin at komme til enden og tjekke tingene ud. Så hurtig implementering her. Rob gik gennem en sammenkædet liste i hans obduktion. Så tjek det ud. Undskyld. Gik gennem en trie i hans obduktion. Så tjek det ud. 

Men du dybest set har hver node har 27 pointere til de næste noder og en Boolean for er jeg et ord. Tjek Robs obduktion for, hvordan dette rent faktisk er implementeret. Vores endelige struktur, vores træer og binær søgning træer. Så ser på disse, blev disse dækket senest uge 8, mandag. Et træ ligner en trie, medmindre du ikke nødvendigvis har 27 knuder på hvert punkt. Og du behøver ikke have disse data ved hver trin, der betyder, om - stien er ligegyldigt. Mens en trie, stien fra top til bund, Maxwell, var vigtigt for os. 

Men hver knude har flere børn, måske. Vi har nogle ordforråd. Roden af ​​træet er helt i top. Og vi siger, at den meget nederste knudepunkter, der ikke børn er blade. Så ligesom en trie, et træ er en struktur af noder. En almindelig type træ, som vi vil at tale om, er et binært træ, hvor hver node har ingen børn eller et barn eller to børn. Så dette billede her er ikke et binært træ, fordi node 3 har tre børn. 

Men hvis vi skulle ignorere dem, resten det er et binært træ, fordi det demonstrerer den egenskab, at hver node har nul, en eller to børn. Så hvordan kan vi udtrykke dette i kode? Vi kunne have en node, hvor hver knude har et helt tal inde i den, samt som en pegepind til træet til venstre og en pointer til træet på højre, så de to børn. Hvordan er det nyttigt? Tja, hvis vi laver regler om, hvor vi sætte noder, kan vi gøre søgningen hurtigere. 

Så der er et koncept for en binær søgning træ, hvor alle knudepunkter på venstre undertræ har en mindre værdi end den knude, vi kigger på. Og alle knuder på højre undertræ have en større værdi end root node. Nu, der ligner en masse ord. Jeg har tænkt mig at sætte det inde i dobbelt citater og viser dig et billede. Så her er et eksempel på en binær søgning træ. Se, at vi starter med 10. Alt til venstre 10 er mindre end det. Og alt til højre er større end det. 

Men mere end det, hver node i træet udtrykker denne egenskab. Så knudepunktet 7 har en 3 til venstre og en 9 til højre. Så alle dem, der er mindre end 10. Men ser man på kun dem, de 7 har 3 til sin venstre og 9 til sin ret. Og på samme måde på højre, 15 har 14 til venstre for og 50 til sin ret. Så de tre knudepunkter derovre, 15, 14, og 50, er også et gyldigt binært træ eller et gyldigt binær søgning træ. Og de er alle større end 10. Så de får lov til at blive på lige der. Er der et spørgsmål? 

PUBLIKUM: Hvordan håndterer du når du har to syvere? 

R.J. AQUINO: Ja. Hvordan kan du håndtere to værdier der er de samme? Nogle binære søgetræer sige, at du ignorere dubletter, fordi målet er bare for at sige, jeg har set disse ting så vidt. Nogle binære søgetræer du kunne sige har en tæller inden i knuden. Andre kan sige, at alt for venstre er mindre end eller lig med. Og alt til højre er større end. 

Det bare afhænger af, hvad Problemet er, du løse. Så i en ordbog, for eksempel, du ville ikke bekymre sig om dubletter. Du ville smide dem ud. Men nogle andre problemer, du måske ligeglad. 

PUBLIKUM: Er det muligt at få en 1 til venstre for 15, som er mindre end 10? 

R.J. AQUINO: Nej. Hvis 14 her var en 1, ville dette ikke være en gyldig binær søgning træ, fordi alt til højre for 10 skal være større end det. Og vi vil se hvorfor. Hvis mit mål i landet af søgningen er at finde 14, jeg starter ved roden. Så jeg ser. OK. Vi kommer til at starte ved roden. Kig på 10.. 

Tja, 14, vores mål, er større end 10. Så det må være på den rigtige. Dette er meget lig den hele telefonen bog, vi gjorde, det binære søg der. Men i stedet for binær søgning i et array, vi er binær søge i dette træ. Så vi leder stadig efter 14.. Tja, 14 er mindre end 15. Så hvis det er i vores træ, skal den være på dette område her. Det skal være til højre for 10 og til venstre for 15. 

Og så vi kontrollerer denne node. Og yay, har vi fundet 14. Jeg har ikke tænkt mig at gå igennem det. Men her er koden. Det er faktisk relativt ligetil, fordi det er rekursivt. Hvad kan vi bede dig om at gøre på en quiz? Vi kunne bede dig om at skrive denne kode. Vi kunne bede dig om at se på denne kode og ændre denne kode og forklare, hvad det gør. Ja. Spørgsmål? 

PUBLIKUM: Er disse slides vil være stilles til rådighed som de var sidste gang? 

R.J. AQUINO: Ja. Så disse dias vil helt blive offentliggjort. 

PUBLIKUM: De er faktisk bogført lige nu på hjemmesiden. David bare gjorde det. 

R.J. AQUINO: Diasene er lige nu på hjemmesiden. Jeg skal nok lappe et par de stavefejl jeg bemærkede og løse dem. Men der er en aktuel version på webstedet. Andre ting, vi kunne bede dig om at gøre - skrive Indsæt. Skriv en iterativ version af rekursiv funktion vi bare viste dig eller tale om disse ting, som i afsnit, i ord, i sætninger. Sammenlignes køre tider og forklare hvad du ønsker at bruge en binær søgning træet for i stedet for en hash tabel, for eksempel. 

Så forstå disse strukturer ved en temmelig dybt niveau. Forstå, hvordan man skriver dem, hvordan bruger dem, hvordan man kan tale om dem. Og du vil være alle sæt. Spørgsmål? 

PUBLIKUM: Når du skriver den binær søgning træet, hvordan gør du bestemme, hvad værdien gøre det som root? 

R.J. AQUINO: Så spørgsmålet var, hvad værdi gør du som root? Afhængig af din kode, skal du kan have en global rod. Så du måske har sandsynligvis haft i pset6 en global hash tabel. Eller du kan passere roden i som et argument. Så denne søgefunktionen her tager et argument en node *. Og så uanset node du tilfældigvis ser på, er den, du behandler som din root, når du passerer det i. Og jeg er klar. De er mine dias. Den næste person kan komme swap i en bærbar computer og mikrofon. 

ROB BOWDEN: Jeg tror, ​​jeg kunne have fortolket dette spørgsmål forskelligt. Men jeg tolkede det som, hvis du har numrene 1, 2 og 3, hvordan gør vi ved at gøre 2 roden i modsætning til 1 eller 3? Hvis vi gør 2 roden, så er det pænt 1 og 3 til venstre og højre. Men hvis 1 er roden, så er det en til top, 2 ret 3 til højre. Så som standard, behøver du ikke kender hvad man skal gøre roden. Og for enhver algoritme, vi forventer at give dig, bare den første ting du insert ville være roden. Eller vi ville give dig et binært træ, der allerede eksisterer, der har et rod. Men andre algoritmer eksisterer sådan, at roden vil opdatere, så hvis du ender i den situation, hvor det er 1, 2, 3, vil den automatisk opdatere til fremstille 2 den nye rod, således at det er stadig pænt afbalanceret. 

ANGELA LI: Cool. Hej, drenge. Jeg er Angela. Og jeg har tænkt mig at slutte vores C og derefter gå ind i nogle af vores web teknologier - HTTP, HTML og CSS. Så den første ting er buffer overflow angreb. Så lad os tage et kig på denne kode. Det er ret simpelt. Der er en funktion foo. Og det gør ikke returnere noget. Men det tager en pointer til en streng kaldet bar. 

Og det kommer til at erklære dette buffer, hvilket er et tegn array, der har 12 pladser. Og det bruger memcpy, som er blot en funktion, der kopierer fra en adresse til en anden. Så dette er at forsøge at kopiere ind vores buffer uanset bar peger på. Så enhver idé om, hvad der er galt med denne kode? 

PUBLIKUM: Hvis der bar er længere end C, vil de overskrives. 

ANGELA LI: Ja, præcis. Vi har ingen garanti for, at bar kommer til at være mindre end 12.. Vi har lige lavet nogle vilkårligt nummer 12. Og vi var ligesom, lad os håbe, at vores bruger input er mindre end 12 tegn. Så i en ideel verden, hvis vores input er altid som forventet, så får vi noget lignende, hej. Det er mindre end 12 tegn. Det bliver læst ind i char c. Og så skal vi gøre noget med det. Det betyder ikke rigtig noget. 

Men en ondsindet person kunne gøre noget mere som denne, hvor de giver os, hvad bar peger på, det kommer til at pege på denne kæmpe udvalg på kun A'er. Og det er måde længere end 12.. Så det kommer til at gå hele vejen ned her, hvor afkastet adresse, der bruges til at være. Så lad os sige denne funktion kaldes foo. Måske foo blev kaldt af en anden funktion, som blev kaldt ved main. Så når foo kører, skal det at vide, hvor man vende tilbage til. 

Hvis foo blev kaldt af nogle funktion med navnet baz, det er at vide, at det er kom til at gå tilbage til baz. Og det er hvad denne returadresse hernede fortæller os. Men hvis vi overskrive det med nogle andre adresse, i dette tilfælde, er dette en repræsentation af adresse på begyndelsen af ​​denne buffer, så hvad der rent faktisk kommer til at ske, er, at stedet for at returnere tilbage til baz, som kaldte vores funktion, det er bare kommer til at gå til forsiden af ​​denne kode. 

Og hvis det var der, fordi en ondsindet hacker fyr kom og injiceres dette, så måske dette beløb A er er faktisk ikke A'er. Og det er faktisk bare kode, pauser din computer eller noget. Så for at være defensive omkring denne slags ting, er du nødt til aldrig at antage, at bruger input er en vis mængde af tegn. For eksempel, når du gjorde Speller, du fik at vide, at ord var kun vil være 40 tegn lang maksimum. Og der var god. 

Men hvis ikke, så ville du nødt til at Sørg for kun at læse i 45 tegn ad gangen. Ellers kan du overskrive din buffer. Eventuelle spørgsmål om det. Ja. 

PUBLIKUM: Kan du bare snakke lidt mere om disse? 

ANGELA LI: Undskyld. Ja. 

PUBLIKUM: Den mic er bare for video. Jeg vil forsøge og projekt. Hej, gutter. Sup? Så lad os gå over et par ting i CS50 bibliotek, som du har brugt al semester, for det meste at få input fra brugeren. Som du ved, du medtage CS50 bibliotek ved blot at gøre CS50.h, som indeholder alle prototyper af funktioner, som du kan bruge, ligesom GetString og GetInt, og GetFloat, et cetera. Og der er denne ene linje i CS50 bibliotek, som definerer en streng, som du fyre alle ved nu er blot en char *. 

Men lad os tage et kig på hvordan getString fungerer. Dette er en meget forkortet version. Du kan trække op CS50 biblioteksfilerne fra, tror jeg, manuals.CS50.net. Og du kan læse igennem den aktuelle funktion. Men det dækker nogle af de vigtige dele. Så vi har oprettet nogle buffer med nogle kapacitet. Og hvad vi gør, er at vi får en karakter ad gangen fra standard n. Det er hvor brugeren indgange tekst i konsollen. 

Og så vi kommer til at læse i en karakter, så længe det ikke er en ny linje, og det er ikke slutningen af ​​filen, som er slutningen af ​​standard input. Og for hvert tegn, som vi læser i, hvis karakter ender tilsætning til antallet af tegn, vi har læst i, og som er mere end vores kapacitet så hvad vi gør, er vi bare ændre størrelsen på vores puffer, således at det er dobbelt så lang. Så igen, denne beskytter mod buffer overflow angreb, fordi du læser i et tegn ad gangen. Og hvis du på et tidspunkt læst i alt mange, du bare udvide din buffer. Du ganges med to. Og så har du mere plads. 

Ellers skal du blot tilføje et tegn til buffer. Og efter du har læst i alle tegn, vil det skrumpe buffer tilbage til normal størrelse, tilføje en null terminator, og derefter vende tilbage. Lad os nu se på GetInt. Kan du fyre læse dette? Jeg kan zoome ind lidt. Jeg ved ikke, hvordan computere virker. Det gør ikke noget. Jeg kan ikke zoome ind korrekt. 

Det er virkelig hårdt. Undskyld. Lad os bare se på dette. Så hvad GetInt gør, er det først læser i en snor fra getString, som Vi har implementeret før. Og den vigtigste del at bemærke her er, hvis denne deling, at det ender læsning er som faktisk ikke en streng, så vi bare returnere INT_MAX til repræsenterer fiasko. Hvorfor skal vi vende tilbage INT_MAX stedet negativ 1 eller 1? Nogen idéer? 

PUBLIKUM: [uhørligt] negativ 1 på én. 

ANGELA LI: Ja, præcis. Så du er langt mere tilbøjelige til bare ønsker til indgang 1 eller negativ 1 når du bliver bedt for en n'te og uanset n'te maxes. Det er enorm. Du er sandsynligvis ikke kommer til at bruge det. Så det er som en design beslutning til sørg for, at du ikke ved et uheld returnere en fejl, eller du ikke vender tilbage 1, som kan parses som et korrekt svar. Så hvis en linje ikke eksisterer, vi tilbage INT-MAX. Ellers bruger vi sscanf, som er ligesom scanf. Men det lyder fra en streng. 

Og vi har det formaterede streng, der er% i% ca. Og vi forsøger at matche det med hvad brugeren gav os. Vi ønsker, at antallet af matchede ting til 1, hvilket betyder, at vi kun virkelig ønsker at matche et heltal omgivet af måske hvid plads, måske ikke. I dette tilfælde, hvis du lægger i noget ligesom bar, er bar ikke passer på alle, fordi der er behov for et heltal i starten. Så sscan aldrig vendte 0. Så du behøver ikke returnere det. 

Alternativt, hvis du lægger i noget som 1, 2, 3, A, B, C, der matcher både heltal, men også tegnet efter det. Så sscanf vil returnere 2, som er heller ikke ideel. Du ønsker ikke 1, 2, 3, A, B, C til at være en gyldig int. Så det heller ikke arbejde. Men siger du sætte i noget som 50 år. Det vil matche% i, hvilket betyder, det vil få læst ind n. Og nu vil n indeholde tallet 50. Og så kan du returnere den. 

Ellers du rammer Gentag. Og så er det bare går igen, indtil du får en ordentlig input fra brugeren. Eventuelle spørgsmål om det? 

PUBLIKUM: Så hvis du skulle udskrive værdien af ​​GetInt på [uhørligt] ville det være lige heltal og max? 

ANGELA LI: Ja. Så hvis du bruger GetInt, bør du antage at du ikke ønsker n'te max til være en gyldig input, fordi du går at antage, at der var dårlig. 

PUBLIKUM: Hvis vi ikke havde char c og nogen sætte i 1, 2, 3, Sam, ville det stadig arbejde for 1, 2, 3? 

ANGELA LI: Jeg tror, ​​det ville fungere. Men du ikke ønsker 123Sam til være en gyldig input fra en bruger. Det er egentlig ikke en int. Så det forekommer ikke retfærdigt at parse det som en int. OK. I så fald, lad os flytte på internettet. Så HTTP er ikke et sprog. HTTP er bare det sæt af standarder for hvordan du sender tingene fra kunder det er dig, til servere. Det er andre mennesker på nettet. 

Så HTTP står for Hypertext Overførsel protokol. Det er hjertet og sjælen af hele nettet. Hypertekst del bare refererer til HTML. Overførslen er klienter som vil du sende anmodninger til servere, der giver respons. Og protokollen er bare, hvordan gør du forventer en server til at opføre sig? Og hvordan er du formodes at opføre sig sådan, at du kan strømline denne kommunikationsproces? 

Så HTTP-anmodninger ser meget gerne dette. GET er den type anmodning. I gutter har set får anmodninger og POST-anmodninger. Denne anden ting der, / mig, det er bare URI eller URL, hvor du ønsker at gå i værten. Så denne anmodning beder om det side, ligesom www.facebook.com / mig. Og det er en GET-anmodning. Og så er denne HTTP/1.1, det er bare den version af HTTP, du bruger. Det er næsten altid 1.1. 

Og så er der en flok af andre ting også. Du kan faktisk se disse, hvis du åbne din konsol, når du er surfe på internettet. Svarene ser noget mere som denne. Den øverste del er, igen, type HTTP, du bruger efterfulgt af en statuskode. Så 200 OK er alt arbejdet. Her er dit indhold. Dit indhold vil følge. Og så vil det fortælle dig, hvad slags af indhold og andre ting også. 

De statuskoder, der er et par vigtigste, som du bør vide. 200 OK er ligesom alt er gyldne. Alt fungerer. 403 Forbudt. Dette har du sikkert set, hvis du har glemt chmod noget ordentligt. Det betyder, at du ikke har de rigtige tilladelser til adgang til denne på serveren. Det er ligesom, nej, du kan ikke se det. 404 betyder, at ting ikke eksisterer. Ikke fundet. Du har sikkert set, at en masse. 

500 Internal Server Error er normalt ligesom noget gik galt på den side på serveren. Så når du var at gennemføre pset7, hvis du havde PHP fejl, kunne du faktisk gå til siden og se en hel masse PHP fejl ting. Men det betyder ikke normalt sker, fordi hjemmesider ikke virkelig ønsker at fortælle dig, hvorfor deres hjemmeside er brudt. De vil nok bare returnere en 500 Internal Server Error. 

Og så er der 418 Jeg er en tepotte. Der er en hel historie om hvorfor det er en ting. Men du kan læse om det på din egen tid. Der er en hel masse andre statuskoder også. Men disse er dem du bør vide. Så lad os tale om HTML. HTML, så husk, er ikke en programmeringssprog. Det er et kodesprog. Det betyder, at det beskriver indhold. Det fortæller dig, hvad et HTML-dokument ser gerne, hvad det ligner eller ikke men hvordan det er struktureret. 

Så det definerer en struktur og semantik af websider. Det er ligesom, det er et afsnit. Dette er en ordnet liste. Det er ligesom en del af min side. Her er titlen. Det gør den slags. Det betyder ikke style noget af det, fordi det er, hvad du gør i CSS. Og det ligner en serie af indlejrede tags. Så for at bruge et eksempel på en virkelig grundlæggende HTML-side, har du DOCTYPE erklæring deroppe. 

Denne DOCTYPE erklæring er sige, vi bruger HTML5. Så har du den store HTML-tag. Den indeholder et hoved og en krop. Inde i hovedet, har du titlen. Det er, hvad der går i titlen i din browser. Vi har et link-tag, der forbinder i et eksternt typografiark. Og så har vi et script, der trækker fra en ekstern JavaScript så godt. 

Og så inde i vores krop er faktisk hvad der bliver vist på siden. Vi har fået et afsnit og derefter en billede i dette stykke. Det ene er et billede af killinger. Bemærk, at billedet tag lukker sig selv. Så i stedet for åbning med et billede og derefter gøre en anden / billede, du bare have denne lille skråstreg her, som lukker det. Og billedet tag har også denne nøgle værdi attribut kaldet alt. Det er den alternative tekst, sker, når du svæver over det. 

De fleste HTML-elementer har nogle nøgleværdi ting, som du kan give det, diverse tilpasning. Ja. 

PUBLIKUM: [uhørligt]. 

ANGELA LI: Nå, så det er en attribut i tag. Så hvis du bruger jQuery, kunne du vælger image.getAttribute. Og så kan du søge efter få alt attribut. Og det vil give dig killinger. Hvis du kan huske formularer i HTML, input elementer vil have attributterne. Og det er, hvad PHP bruger til at sende anmodninger, når en formular er indgivet. 

PUBLIKUM: Har du nævne noget om hvordan, hvis du bruger kittens.jpg eller noget, der har de manglende filmapper eller andre filer? 

ANGELA LI: Ja. Så dette er, hvad der kaldes en relativ vej, fordi jeg ikke give dig den fulde sti. Det er ligesom når i C, hvis du gør fopen nogle fil, hvis du fopen hi.txt, at hi.txt forventes at være i samme mappe, medmindre du giver det en mere kompleks vej. 

PUBLIKUM: Så du kan angive hvilken mappe [uhørligt]? 

ANGELA LI: Ja. Og du kan se op, hvordan man gør det. Men hvis jeg ønskede at få kittens.jpg ud af det overordnede bibliotek, ville jeg gøre .. / Kittens.jpg. Ja. Undskyld. Ja. Åh mand, jeg glemte spørgsmålet. Hvad var spørgsmålet? Åh, var spørgsmålet er, kittens.jpg forventes at være i samme mappe? Og i dette tilfælde, det er. Men du kan også give den en bestemt vej sådan at det ikke behøver at være. Godt? 

CSS. Så CSS, som HTML, er ikke et programmeringssprog. CSS er bare en serie af styling regler. Det står for Cascading Style Sheets. Og du bruger den sammen med HTML at style sider. Så der er tre måder du kan medtage det. En måde du kan gøre det er i hovedet del af din HTML, kan du bare åbne en stil-tag og derefter holde nogle CSS regler derinde. Det er temmelig OK. Ja. 

PUBLIKUM: Kan du sætte dem stil tags i mellem, lad os siger, krop og / krop. Og så ville du være styling kun i kroppen. 

ANGELA LI: Du kunne. Det vil fungere. Men du bør ikke, fordi styling er form for metadata, der bør gå i lederen af ​​dit dokument. Krop bør virkelig kun indeholde hvad der faktisk går til dukke op på din side. 

PUBLIKUM: Så du ville sætte stil i dit hoved at style Hele webside, right? 

ANGELA LI: Ja. Så sætte stil her, disse CSS-regler vil gælde for hele siden er baseret på deres vælgere. Så den bedste måde at gøre det er i stedet for at have en stil-tag i dit hoved, du har dette link til en ekstern stil ark som jeg viste dig i foregående eksempel. Hvad det betyder er det prøver og finder fil style.css og derefter trækker det i og bruger det som stilarter for siden. Og din style.css ville bare se sådan ud. Det ville bare være en flok CSS. 

Og endelig er der er en anden måde, du kan omfatte CSS, som du virkelig bør ikke nogensinde gøre. Det er opkaldet inline styling. Og så enhver HTML-element kan også tage en stil attribut. Og så i den stil attribut, kan du give den CSS-regler. Så i dette tilfælde, uanset div jeg definerer lige her, det kommer til at har en sort baggrund og en hvid tekst farve. Men du bør ikke gøre det, fordi det, det betyder det sætter din styling inde i din HTML. 

Og jeg ved, at vi har talt om HTML er struktur og CSS er stil. Hvis du gør dette, det blander dem sammen. Og det er ikke meget ren. Så du skal ikke gøre det. Ved hjælp af et eksempel på CSS, deroppe, vi Vælg blot kroppen af ​​HTML dokumentarfilm. Og vi er ligesom, at alt er kommer til at være Comic Sans. Jeg anbefaler heller ikke det. Men du kan gøre det. 

Den anden regel lige her, går det at vælge elementet på side med ID main. Så uanset HTML-element, jeg sagde ID = Main, jeg har tænkt mig at give denne en 20-pixel margin og tilpasse alting, al den tekst, til centret. Den sidste ting vælger ved CSS-klasse. Så ethvert element på den side, jeg gav en sektion klasse, jeg har tænkt mig at gøre det en baggrundsfarve lyseblå. Yep. Det er alt, jeg har. Spørgsmål? 

PUBLIKUM: Hvad gør hashtag før main gøre? 

ANGELA LI: Spørgsmålet er, hvad der gør hashtag før vigtigste do? I dette tilfælde, for hash CSS betyder Udvælgelse efter ID. Så hvis jeg havde nogle HTML-element, ligesom divid = vigtigste, dette CSS rule vælger ting med ID main. Og på samme måde, den periode foran sektion er Udvælgelse efter CSS-klasse eller vælg ved HTML klasse. 

PUBLIKUM: Hvorfor er der en har før 6 i baggrundsfarve? 

ANGELA LI: Ja. Så spørgsmålet er, hvorfor er der en hash før 6? Dette er anderledes end hash. Det betyder, at du giver en hexadecimal farve. Så hex farver, det bare repræsenterer en farve. Og du husker RGB tredobler når du gjorde det retsvidenskab PSET? Dette er den samme. De første to cifre repræsenterer hvor meget rød i farven. Den anden to repræsenterer hvor meget grøn. Og den tredje repræsenterer hvor meget blå. Og hash er dette foregår at repræsentere en farve. 

Så alt fra 0, 0, 0, 0, 0, 0 op til F, F, F, F, F, F er gyldig. Det er nogle gyldig farve, der kan vises af din browser. Spørgsmål? 

PUBLIKUM: Hvad er forskellen mellem ved hjælp af ID og klasse? 

ANGELA LI: Spørgsmålet er, hvad der er forskellen mellem ved hjælp af ID og klasse? Du kan kun have ét element i en HTML-dokument, der har en given id. Så kun én ting på min side er tilladt at have ID main. Så du bruger det til dette er overskriften. Dette er navigation. Dette er sidefoden. Klasser er anderledes, fordi du kan anvende klasser til så mange HTML-elementer som du ønsker. 

Altså for eksempel, jeg gjorde klasse sektion, fordi der er formentlig mere end én afsnittet på min side. Du er bare lov til at have så mange elementer på siden med det samme klassen, men kun en med en vis id. 

PUBLIKUM: Så prik repræsenterer klassen? 

ANGELA LI: Ja. En prik repræsenterer en klasse. Fedt. Det er alt, jeg har fået, gutter. Tak. 

[Applaus] 

ZAMYLA CHAN: Hej, alle sammen. Jeg er Zamyla. Jeg har tænkt mig at være der dækker PHP, MVC og SQL dag. En masse af det materiale, som jeg vil være afdækning vil være temmelig meget lige ud af pset7. Ok. Så hvad er PHP? PHP står for PHP Hypertext Præprocessor. Så det i sig selv er en rekursiv navn, hvilket er ret cool. PHP er et server-side scripting sprog, og det giver backend og de logiske fundament af vores hjemmeside. 

Så Angela talte meget om HTML og CSS, der vil gøre strukturen af hjemmesiden. Men hvad nu hvis du ønsker at ændre det indholdet dynamisk eller hvis det varierer baseret på brugerens eller visse betingelser? Det er, hvor PHP kommer i. Nu typisk kan PHP tage et par færre linjer til at gennemføre de samme ting i C. Det er fordi PHP håndterer hukommelse ledelse for programmøren, i modsætning til os at skulle allokere fri, ting som. 

Men da PHP er en fortolkende sprog, typisk, kan det udføre en smule langsommere end C, som er en kompileret sprog. Fordi vi er ved at flytte programmering sprog, lad os se på, hvordan syntaks vil variere. Lad os være meget omhyggelig med ikke at få forveksles med dette. Så med PHP syntaks, uanset om du er indlejring din PHP inde i en HTML fil eller inden for en. php fil selv, du nødt til at omslutte koden i den åbne PHP og de lukkede PHP tags som følger, som på skærmen. 

Variabler i PHP. Hver eneste variabel vil starte med $ tegnet efterfulgt af navnet på din variabel. Nu er variabler i PHP løst skrevet, hvilket betyder, at du ikke behøver at angive, hvad datatype er, når du erklære det. Men det betyder ikke, at de ikke har nogen former på alle. Så hvis jeg erklære en variabel og bare sæt det lig med 1, og derefter erklærer jeg en anden variabel, sæt det lig med "1" og derefter en anden 1,0, godt, afhængigt af lighed operatører jeg bruge, hvis jeg ønsker at sammenligne tværs af alle typer, så de vil være lige. Men hvis jeg vil være sikker på, at den typer er ens, kan PHP stadig gøre at selv om vi ikke angive hvilken type det er, når vi først lave filen. 

Nu, i PHP, selvom vi er skifte over fra programmering sprog fra C, har vi stadig vores trofaste, hvis tilstand, ligesom dette. Vi har stadig vores tid loops, bare som dette, hvor du lægger i dit tilstand og derefter organ af løkken. Og så har vi også vores for-løkke, der typisk ligner dette. Så hvis jeg ønskede at gentage over alle ni psets og indsende og kalde en funktion submitPset, så jeg kan gøre det her, som du fyre har alle gøres ved dette punkt. Tillykke, ved den måde. 

Til kameraet, folk sagde tak. Nu, hvis du ikke bare ønsker at bruge denne for-løkke, så PHP faktisk også har tingene kaldet foreach loops. Så hvis jeg havde en matrix af heltal, 0. gennem 8, opbevares i array psets, så jeg kunne have en foreach løkke, gentager end hvert nummer i psets. Og så kunne jeg kalde det samme fungere otte gange, ligesom jeg gjorde før. Så dette for hver sløjfe er rart, fordi du behøver ikke at hvis du ikke kender den nøjagtige længde af arrayet, som du have, og derefter bruge denne foreach løkke vil tage sig af det for dig. 

Så jeg lavede psets som en matrix. Lad os se på det. Arrays i PHP er typisk de samme som dem, vi har haft i C, hvor du kan erklære et array. Og her kan jeg erklære en tom matrix og derefter opbygge dynamisk ved hjælp af indeks, som heltal. Så indeks 0, vil jeg til at gemme et heltal navngivet 1. Ved indeks 1 på min liste, vil jeg at lagre værdien 2. Og på den tredje indeks, men den andet tal, jeg har tænkt mig at gemme nummeret 12. 

Nu, dette er fint i det fungerer det fungerer godt. Men siger, at det betyder noget for mig hvad hvert indeks besidder. For mig indeks 0 betyder hvordan mange katte jeg har. Og indekset 1 betyder hvordan mange ugler jeg har. Og den næste betyder hvor mange hunde. Nå, så er det at præcisere, at i stedet for at skulle huske 0 svarer til katte og 1 til ugler, kan jeg bruge associative arrays, hvilket betyder, at i stedet for heltal som mine indekser Jeg kan faktisk bruge strenge. 

Så dette er ganske nyttigt. Og du har dybest set blot udskiftet heltal med strenge. Og der har du en associative array. Ja. 

PUBLIKUM: Er der en grund til, hvorfor der er en understregning for den anden del, fordi min liste har array. 

ZAMYLA CHAN: Spørgsmålet var, er der en grund til, at der er en underscore mellem min og liste? Nej. Det er bare hvordan jeg navngivning min variabel. 

PUBLIKUM: På den første line, det er et ord. 

ZAMYLA CHAN: Mine undskyldninger. Jeg ordner det. Ja. De bør være den samme variabelnavn. God fangst. OK. Så lad os gå videre til strengen sammenkædning. Hvis jeg ønskede at tage to strenge, så kan jeg sammenkæde dem med dot operatør. Så hvis jeg har Milo som et fornavn Banana som et efternavn, så concatenating med dot operatør og derefter sætte en plads i mellem vil gøre en streng, der indeholder Milo Banan, som jeg kan derefter echo eller, snarere udskrive. 

Apropos ekko, lad os tale om et par nyttige - oops. Undskyld. Et par nyttige PHP funktioner. Så vi har - tekniske vanskeligheder. Et sekund. Jeg sendte det. PowerPoint problemer. Og vi er tilbage med PHP funktioner. Og vi er tilbage med PHP funktioner. 

Så vi har det kræve funktion, hvor hvis du passerer i en fil, her er bare et eksempel på en fil, der Jeg kunne gå i. Så der vil omfatte PHP kode fra denne fil, som jeg viser. Og det vil evaluere det i. Så har vi også ekko, som er en parallel til printf. Exit er en parallel til at bryde, der kommer ud af blokken af kode, som du er i. Og så tomme kontrollerer, om en given variable er som nul eller nul eller hvad der sidestilles med at være tom. Ja. 

PUBLIKUM: For strengsammensætning dot operatør én, i PHP, er, at samme som i JavaScript, hvor det ved hjælp af prik til sammenkædning betyder plus? Så for fulde navn, kunne du have dollar underskrive første + og derefter + sidste? 

ZAMYLA CHAN: Ja. Så spørgsmålet var, om i PHP vi kan bruge den samme strengsammensætning som i JavaScript med plusser. Og Josef vil komme ind senere. Jeg tror, ​​han har et dias på. Faktisk er det anderledes. Så i JavaScript, skal du bruge plus at sammenkæde strenge. Og i PHP, er du nødt til anvende dot operatør. Så de er anderledes. 

OK. Så nu, at vi har dækket alle denne PHP, hvor gør det virkelig komme i handy? Tja, det er praktisk, når vi kan kombinere det med vores HTML. Så vores PHP vil give os magt til at ændre en sides HTML-indhold før sin læsning. Så er baseret på forskellige vilkår, normalt den specifikke bruger, der er logget ind, kan vi vise forskellige oplysninger. Linda, har du et spørgsmål? 

PUBLIKUM: Kan du sammenkæde et heltal også? 

ZAMYLA CHAN: Ja, du kan. Så spørgsmålet var, hvis du kan sammenkæde heltal eller andre variable.s nu, går vi videre til MVC, som er et paradigme, som vi brugte i pset7 og en masse webdesignere bruger til organisere koden i filerne i deres hjemmeside. M står for Model. Og dybest set, vil model filer beskæftige med samspillet med databasen. Se filer, de vedrører æstetik af hjemmesiden. Og håndtagene Controller brugerønsker, analyserer data, gør anden logik. 

I pset7 kombineret vi modellen og controlleren. Og vi bare kaldte dem controllere og sætte dem i den offentlige mappe. Og se filer, vi bruger dem som skabeloner i skabeloner biblioteket. Så dette diagram her repræsenterer også at samme slags division med model og controlleren i lilla her til venstre og visningen til højre. Så dette er en skematisk, at nogle af jer måske har set på Kontortid eller diagrammer, som vi var tegning, som du var at finde ud af din PSET. 

Så her, i en given controller, en model controller, har vi funktioner der vedrører forespørge SQL database, udførelse PHP logik. Måske vil du se op en bestand på Yahoo! Finance. Eller måske ville du lige tjekke at se, om en bruger havde indgivet en danner allerede før de har besøgt din side. Og så ville du gøre En form herovre. Efter denne form var blevet forelagt af brugeren, den handling, der var specificeret i form HTML-tag ville indikere den side, det returnerer disse data til. 

Så alle disse oplysninger ville være sendt tilbage til din controller. Så ville du sikkert gøre en smule mere logik på dette og måske udføre et par flere forespørgsler i SQL-databasen og så, endelig, kom op med et pænt pakket sæt af oplysninger, som du ville passere i en anden skabelon der viste, at oplysninger. Nu, hvordan kan vi faktisk pakke at oplysninger op? Tja, vi har en funktion kaldet Render der var i functions.php filen i pset7, hvor du passerer i navnet på en fil, navnet på en skabelon. 

Og så også passere i en associativ array. Og så associative array repræsenterer de forskellige oplysninger at du ønsker at passere i. Nu, hvad der kommer til at være konstant i disse eksempler er, at tasterne eller, snarere nøglerne til associative arrays, der er, hvad der kommer til at være forventes at være konstant af skabelonen, fordi det ved det behov noget, der hedder besked eller kaldte navn. Og så de ting til højre, den faktiske værdier, så i dette tilfælde, der er en god dreng og Milo, er dem, der går at være de værdier, der ændrer at regulatoren skifter hver gang eller baseret på en bestemt tilstand og vil passere det i. 

Så her i skabeloner, ser vi, at vi bruger HTML specialtegn, som netop dybest set betyder, at vi ønsker at få peer streng at bruger sat i. Og vi ønsker at erstatte budskab derinde. Så når vi rent faktisk se filen, den specifikke oplysninger videregives i. Bemærk, at nøglen hvordan gengive værker at nøglerne til associative arrays, der er blevet variable navne her. Og så de værdier af denne nøgle i associative array så bliver den værdien af ​​variablen. 

Lad os nu gå videre til SQL. Det står for struktureret Query Language. Og så dette er blot en programmering sprog designet til styring af databaser. Og det skete praktisk for os i vores pset7 finans hjemmeside. Væsentlige, det er bare en nem måde at spore og administrere objekter og tabeller og knytte dem til hinanden. Nu, tænk på din SQL database dybest set som en Excel-fil, måske, med flere faner ark. 

Så kunne du have flere tabeller, måske, der er forbundet med hinanden. Og meget gerne Excel, vi har en masse den funktionalitet, vi ønsker. For eksempel kan vi vælge bestemte rækker. Vi kan indsætte information. Vi kan opdatere rækker. Og vi kan også slette ting. 

SQL vælge værker ved at vælge rækker eller en række af bestemte kolonner fra en database, der matcher en vis kriterier, som du angiver. Så herovre, når jeg ser select * from wizards hvor hus = Ravenclaw, så Jeg vælge *, hvilket betyder jeg er at vælge hver enkelt kolonne i denne rækken fra guiderne tabellen, men kun hvis huset kolonne lig Ravenclaw. Nu, dette er ren eller SQL. Så hvis jeg gik ind i phpMyAdmin, som er den særlige måde, som vi bruger til at administrere vores SQL-databaser, så jeg kunne indsætte der ind i phpMyAdmin hjemmeside. Og det ville udføre. 

Men vi faktisk ønsker at gøre der på PHP side. Så hvordan gør vi det? Nå, vi bruger forespørgslen funktion, som dybest set udfører denne SQL-forespørgsel. Bruger? som en pladsholder, kan vi passere i visse værdier til vores streng, som vi ønsker at erstatte. Så måske jeg opbevare anderledes værdier i curr_house, som repræsenterer den aktuelle hus at jeg går igennem. Så jeg kan passere, at i som en pladsholder med spørgsmålstegnet. Og så vil jeg dybest set udføre samme ting som jeg gjorde før, undtagen nu er jeg i PHP. 

Og forespørgsel vil returnere en associative array. Og jeg har tænkt mig at gemme det i rækker. Nu kan forespørgslen altid fejle. Måske SQL-forespørgslen ikke kunne udføre fordi tabellen ikke eksisterede. Eller måske havde kolonnen ikke eksisterer. Noget gik galt. Tja, i dette tilfælde, vil du ønsker at gøre sikker på, at du kontrollere, om forespørgsel returnerede falsk. Og det er ved hjælp af den tredobbelte lig drift der. 

Og derefter undskylder I, som er en anden CS50 funktion, der passerer i en meddelelse. Og hvis man ser ind undskylde, alt det virkelig er render apology.php. Ja. 

PUBLIKUM: Kan du forklare, hvad det stjerne gør mellem vælge og fra? 

ZAMYLA CHAN: Ja, absolut. Så stjernen i mellem vælge og fra betyder, at jeg ønsker at vælge hele hele rækken fra mit bord. Jeg kunne have indikeret vælge , år hus. Og jeg vil kun få de tre kolonner i mit bord. Men hvis jeg siger vælge *, så vil jeg få alt i denne kolonne. Så jeg har tænkt mig at gå dig i ryggen først. 

PUBLIKUM: Så det er stadig i SQL, right? Er denne forespørgsel, eller er det PHP? 

ZAMYLA CHAN: Vi er i en forespørgsel. Så dette er i PHP. Så ved hjælp af PHP-funktionen forespørgslen, vi udføre en SQL-forespørgsel. 

PUBLIKUM: Er der noget i SQL små bogstaver, ligesom vælge eller troldmænd eller hus? 

ZAMYLA CHAN: Er der noget i SQL og små bogstaver? Jeg tror så, ja. Jeg tror, ​​at SELECT og FROM , og hvor er case-sensitive. Nej? 

ROB BOWDEN: Så det er det modsatte. Kolonnenavne og tabel betyder, alle af dem er case-sensitive. Men nogen af ​​MySQL nøgleordene, ligesom SELECT, FROM og WHERE, de er ikke og små bogstaver. OK. Så det modsatte af, hvad jeg sagde. Så alle MySQL søgeord - vælge fra, hvor - dem er ikke store og små bogstaver. Men alt andet er. OK. Du i front. 

PUBLIKUM: Hvis jeg har $ rækker i form af mere end én række, betyder det så er bare bliver et associativt array? 

ZAMYLA CHAN: Så spørgsmålet var, hvis rækker har mere end én række i det, er det blive et associativt array? Så det er en vifte af associativ arrays allerede. Så selv om der kun er én række vendte tilbage, så ville du nødt til at gå til indeks 0 i dette resultat. Og så ville du have at første række. Ja, Belinda? 

PUBLIKUM: Når du bruger ===, er dette det eneste tilfælde? Eller er der andre? 

ZAMYLA CHAN: Så i dette tilfælde, === er en sammenligning på tværs af typer. Undskyld. === Er en sammenligning der sammenligner typer. Og så == sammenligner på tværs af alle typer. 

PUBLIKUM: Kan du forklare, hvad rækker er i denne situation? Er det række data? 

ZAMYLA CHAN: I det næste dias, jeg kommer til at forklare, hvad rækker er. Så hvis du ikke har noget imod at holde off på det. Og så dig i ryggen? 

PUBLIKUM: For funktioner som forespørgsel, render og undskylder [uhørligt]? 

ZAMYLA CHAN: Spørgsmålet var, om disse funktioner - Query, undskylder, og gøre - er fælles på tværs af PHP. Det er dem, der CS50 skrev for pset7. Og Jay? 

PUBLIKUM: Når du har brug for at sige $ _SESSION, Er det kun for id'er? Eller du kunne have sagt, at her? 

ZAMYLA CHAN: Så spørgsmålet var, da vi bruger $ _SESSION, der var en specifik global variabel, som vi bruger. Her denne variabel vil være lokal til vores funktion. Så vi bare erklære en ny variabel. 

PUBLIKUM: Hvordan undskylder gennemført? 

ZAMYLA CHAN: Spørgsmålet var, hvordan undskylde gennemført? Og jeg tror, ​​det er faktisk en temmelig god praksis for jer at gå ind den functions.php sektionen og se på undskylde og se, hvordan du kunne have gjort det selv. Så jeg kan efterlade det til dig, men bare sige, at hvis man ser på undskylde, så det tager den besked, du forelagt at undskylde, og så er det gør det budskab. Har du flere spørgsmål? Jeg elsker spørgsmål. Så holde dem at komme. 

PUBLIKUM: [uhørligt] echo eller print der? 

ZAMYLA CHAN: Spørgsmålet var, kunne vi ikke lige har lagt echo eller print der. Så det ville have gjort noget lidt anderledes. Det ville have trykt forespørgsel mislykkedes i at - godt, lige nu, er vi faktisk i vores controller. Så vi faktisk ikke har HTML oprettet her. Undskylder ved at gøre apologize.php faktisk omdirigerer dig til apology.php. OK. 

Så nu, lad os gå på at tage fat på spørgsmål fra tidligere om, hvad virkelig rækker. Nå, vil forespørgslen tilbage en matrix af rækker. Og hver række er repræsenteret af et associativt array. Så hvis jeg har henrettet nogle SQL forespørgsel og Jeg har gemt resultatet i rækker, så ved hjælp af en foreach løkke, så matrixen navn er den første der - rækker. Og så har jeg tænkt mig at ringe til hver række derinde $ row. 

Så iteration over det, kan jeg da adgang til den given række navn kolonne år kolonne, og hus kolonne. Bemærk, at jeg ikke ville have været i stand til at gøre dette med rækker, fordi rækker indeks navn findes ikke. Rækker er blot et array af associative arrays. Så du har to niveauer der. Når du har den vifte af rækker, du nødt til at komme ind i det. Og så kan du få adgang til kolonner. Fik at gøre det klart? Ja, foran? 

PUBLIKUM: [uhørligt] åbne beslag til [uhørligt]? 

ZAMYLA CHAN: Undskyld mig? 

PUBLIKUM: De åbne parentes. 

ZAMYLA CHAN: Disse her? Det er at lade mig at medtage denne variabel. Ja. 

PUBLIKUM: Når du udskriver, er du udskrivning til HTML-koden? 

ZAMYLA CHAN: Ja. Når jeg udskriver, dette her er inde min skabelon nu, så min opfattelse af MVC metoden. Så jeg udskriver i HTML. 

PUBLIKUM: Så hvis vi gik ind udvikleren værktøj efter kører denne, kunne vi der faktisk i koden? 

ZAMYLA CHAN: Det er en stor spørgsmål, ja. Så hvis du gik ind i udviklingsværktøjer i Firefox ved hjælp af Firebug eller Chrome, så ja, du kunne se specifikt HTML. Så det ville ikke vise $ row ["Navn"]. Det vil vise, alt efter hvilken navn er i denne række. 

PUBLIKUM: Blot et generelt spørgsmål, hvad er tr og td defineret som? Hvorfor skulle vi [uhørligt]? 

ZAMYLA CHAN: Table række st, tabel derefter td kolonne. OK. 

PUBLIKUM: Ja, det er tabeldata. 

ZAMYLA CHAN: Tabel data. Ja. 

PUBLIKUM: Det er en række, hvor rækken håndteres som en kolonne? 

ZAMYLA CHAN: Undskyld. Kan du gentage det? 

PUBLIKUM: hvordan ville du visualisere rækker? 

ZAMYLA CHAN: Hvordan ville du visualisere rækker i hvilken slags måde? Er du taler om disse rækker her eller tr rækker? 

PUBLIKUM: Rækkerne. 

ZAMYLA CHAN: Disse rækker her? Jeg ville visualisere dette som Jeg udføre min forespørgsel. Og det siger, OK, jeg har enten 0 til n mængde af rækker, der matcher de kriterier, at du havde spurgt. Så jeg har nogle antal rækker. Så rækker de $ rækker, gemmer hver en af ​​disse rækker i en matrix. Så selvom det er bare en af ​​dem, er det stadig en vifte af rækker, der matcher det. 

Så, for eksempel, det er svarer til, når du hentet cachen fra brugerne. Og de kriterier der var, hvor ID er lig med session-ID. Der er virkelig kun er én række der kunne matche det. Men stadig rækker lige vendt én række. Så du er nødt til at gå til rækker, indeks 0, indeks cache til rent faktisk komme til din cache. 

PUBLIKUM: Er print-funktion i echo det samme? 

ZAMYLA CHAN: Ja. Ja. Udskriv et ekko af det samme. 

PUBLIKUM: Er foreach loop eneste måde at indekset i rækker? 

ZAMYLA CHAN: Er en foreach løkke den eneste måde, du kan gentage gennem rækkerne? Nej. Du kan også bruge en for-løkke, forudsat at du kender længden af rækkens array. 

PUBLIKUM: Kan du få adgang til det ved hjælp af en række som [uhørligt]? 

ZAMYLA CHAN: Så du ikke kan få adgang til det bare at bruge række, hvis du ikke har en foreach loop forudsat at du ikke har erklæret række. Ja. Ja, i det hvide. 

PUBLIKUM: Så hvad gør st og TD gøre? 

ZAMYLA CHAN: So st og td er HTML-tags. tr angiver begyndelsen af en tabelrække. Og hver td angiver en ny tabel data kolonne. 

PUBLIKUM: For en visuel af, hvad en række er ligesom, bare forestille sig den SQL, hvordan de har en række. [Uhørligt]. 

ZAMYLA CHAN: Ja. Det er en stor punkt. Man kan visualisere rækker som netop ligesom i en Excel-tabel, bare listen over rækkerne. OK. Ok. Så nu, at vi har gået i løbet vælge, hvis Der er ikke flere spørgsmål, vi får gå over på insert. Så hvis jeg ønskede at indsætte i nogle tabel og indsætte bestemte kolonne værdier, kunne jeg indsætte mig i Ravenclaw i år 7. Men nogle gange kan der være to eksemplarer værdier, som vi så i pset7 når vi blev opdatere vores portefølje. 

Så i dette tilfælde, vi vil bruge på Duplikeret nøgle UPDATE, så vi ikke gemme flere rækker med samme værdsætter, men snarere opdatere den. Så vi har faktisk opdatering, som ikke er en insert. Det er bare en opdatering, hvor du opdaterer i en bestemt tabel med et givent kriterier og så, endelig, slette, som gør en meget lignende ting. 

PUBLIKUM: Kan du kort gå over duplikeret nøgle? 

ZAMYLA CHAN: Ja. Hovedsagelig her, jeg har INSERT INTO Gringotts, er galleons disse værdier. Men id formentlig, er en unik nøgle værdi oprettet i MySQL tabel. Så hvis jeg allerede har dette ID sat op, så kan jeg ikke indsætte en ny række. Så hvis det ikke allerede findes, så er jeg nødt til at opdatere den. I midten i hvid. 

PUBLIKUM: Så indsætte, opdatere, slette og vælge, er dem alle tilgængelige lokalt [uhørligt]? 

ZAMYLA CHAN: Så indsætte, opdatere, slette og vælger er alle SQL-forespørgsler. Så når du bruger SQL, du har dem til rådighed. 

PUBLIKUM: Tilbage til de seneste quizzer - var der et spørgsmål, der behandles hvis du havde en tabel og ønskede at Indsæt prøveresultater i en og du indsætter dit navn, så det vil ikke lade dig [Uhørligt] din vens test score. Hvordan ville du gøre det med indsats? 

ZAMYLA CHAN: Så spørgsmålet drejede sig om en tidligere midtvejsevaluering spørgsmål. Jeg er ikke klar over, hvilke en det er lige nu. Så måske bagefter, hvis du ønsker at komme op og vise mig, så jeg kan sikkert give dig tips. Men vi taler om indsættelse ting, som tage nogens score, når du bør ikke, så lad os tale om SQL-injektion angreb. Så en SQL-injektion angreb er hovedsagelig hvor nogen tager fordel af lav sikkerhed i måde, at du tager i data. 

Så i her, ligesom i CS50 finansiering, når vi er logget ind, kan vi komme ind i en brugernavn i login form det første tekstfelt, og derefter indtaste et password. Måske vores PHP kode kan se noget som dette, hvor $ brugernavn er post-data brugernavn og password er post-data adgangskode. Og så har vi bare udføre vores forespørgsel, siger, OK, godt, er vores forespørgsel går til vælge fra vores brugere, hvor brugernavnet er det en, at de indsendte. Og adgangskoden er password, hvilket betyder, at passwords matche. 

Hvad nu, hvis man i stedet for rent faktisk indsende en egentlig adgangskode, ligesom 12345 og gætte på gren, der siger adgangskode og forsøger at hacke deres konto, hvad nu hvis i stedet de fremlagde dette. De kunne skrive i måske et gæt på en adgangskode. Og så ville de afslutte citerer derefter skrive i eller 1 = 1. Det ville pace direkte ind i SQL forespørge til at se noget som dette. Vælg mellem brugerne, hvor brugernavn = stikben og adgangskode lig lilje eller 1 = 1. 

Så enten adgangskoden har at være korrekte eller 1 = 1, der er altid sandt. Så i dette tilfælde, dybest set, en bruger kan drage fordel af dette og bare logge sig i og hack andens konto. Så det er derfor, vi ønsker at undgå nogen, der har at gøre dette. Men heldigvis, forespørgslen funktionen ved passerer i pladsholdere vil tage sig af dette for dig. Også, vil du typisk aldrig ønsker til rent faktisk at indsende passwords selv. Det er derfor, vi hashed eller krypteret dem i CS50 finansiering. 

PUBLIKUM: Fortiden quiz talte om MySQL escape strenge. Har vi nødt til at bekymre sig om det? 

ZAMYLA CHAN: Det er et godt spørgsmål. De MySQL escape strings er absolut en funktion, der blev anvendt i vores forespørgsel. Men helt sikkert kigge ind. Jeg vil sige, det er fair spil at kende at du havde behov for at kalde det fungere på en snor. Ja, Belinda? 

PUBLIKUM: Hvordan kan du vide, hvornår det er enkelte citationstegn eller anførselstegn? Og også, jeg har lyst til i foredrag, du nævnt noget om ikke at have på [uhørligt] eller noget eller den anden single citat i slutningen. Jeg tror, ​​han påpegede i foredrag, som du skulle have apostrof 1 og så ikke have apostroffer eller noget. 

PUBLIKUM: [uhørligt]. 

PUBLIKUM: Sagen er den sidste single citat derinde i den anden kasse ikke skulle være der. [Uhørligt] Fordi når du tager det sidste single citere ud og matche disse til indhold hvor adgangskoden er, hvis du har det forespørgsel, der er et enkelt citat på udgangen allerede. Du ønsker at bruge det enkelt citat som den, der vender mod den ene [Uhørligt]. Så hvad er egentlig i denne tekst boksen skal ikke have det. 

ZAMYLA CHAN: Jeg vil ændre det. OK. Hvis der ikke er nogen spørgsmål, så vil jeg give det over til Josef for at tale om JavaScript, et cetera. 

[Applaus] 

JOSEPH ONG: Så kører vi en lille smule bagefter. Så hvis du har til at forlade, det er OK. Men vi beder om, at du holder dine hoveder hvis du er i midten, så du ikke blokerer kameraet, og du bruger tilbage exit, hvis du har til. Jeg er Joseph ved den måde. Hej. Test, test. Dan, er det godt? Fedt. 

Så videoen vil også blive lagt online for dem, der nødt til at forlade nu. Akavet. OK. Så quiz gennemgang. Dette er en kat. Nu, JavaScript, der er måske ikke som aww for nogle af jer. OK. Så det er først, husker fra Zamyla. Husk, at PHP er kører på serveren. Og masser af gange, skrev jer sløjfer i PHP til at udskrive HTML, right? Så når denne kode henretter, at HTML-output, at du printer bliver sendt til brugeren. Og når det sker, ikke mere PHP kan køres, medmindre du genindlæse siden af kursus, som reexecutes PHP. Men når du udskriver ud af, at HTML, du kan ikke gå nogen steder. 

Så HTML sendes til brugeren, som er browser via her, hvor Milo er at bruge computeren. Og så godt, er der flere ting når vi sender HTML til brugeren. Nogle gange ønsker vi at gøre noget lignende når du klikker på noget, vi ønsker alert kasser til at poppe op, den slags interaktioner, som når du trykker på nøgle, når du klikker på noget på side, jeg vil have noget til at ske. Nå, kan du ikke programmet igen PHP kode én gang, at HTML er indstillet. Så hvordan gør man det? 

Vi introducerer et nyt sprog kaldet JavaScript, der løber i browseren der tillader dig at gøre ting til HTML, når du modtager dem fra serveren. Og det er derfor, vi kalder det en klient-side programmeringssprog. Det virker på din computer - kunden. Eventuelle spørgsmål om, at så vidt? Det paradigme giver mening for folk? OK. Godt. Ok. Så den første ting at bemærke er JavaScript er ikke PHP. 

De har nogle forskellige syntaks, som vi vil gå ind. Og de har meget forskellige anvendelser. JavaScript, igen, for din browseren, for klienten. Server kører et eller andet sted på en andens computer, der sender information til dig, korrekt? Så hvis vi beder dig om at skrive PHP kode på en eksamen spørgsmål, skal du ikke skrive JavaScript og vice versa. Du vil bare mister point, og det vil ikke være rigtigt. 

Så lad os komme ind i nogle syntaks forskelle - JavaScript til venstre og PHP til højre. Den første ting du vil bemærke med JavaScript, vi erklærer variabler med nøgleordet var - V-A-R. PHP bruges dollar tegn, som Zamyla diskuteret tidligere. Hvis du ønsker at erklære en associativ array, ser vi den velkendte syntaks på højre side med PHP. På venstre side, i stedet du bruger krøllede parenteser. Og så dine nøgler er på venstre. Så har du et kolon. Og så har du de værdier som du ønsker. 

Så dette er, hvordan du ville gøre det i PHP på højre side med den anden linje, der starter på Milo. Og det er hvordan du ville gøre det på venstre side i JavaScript, hvis du vil hvad vi kalder et objekt. Og objekter i JavaScript er bare associative arrays. Så hvis du ønsker at få adgang til områder, PHP du bruger dette beslag syntaks. Og på denne måde, kan du overflytte denne ejer felt til Lauren. 

Tja, i JavaScript, hvis man ønsker at adgang et felt og ændre det, kan du bruge punktumsyntaks. Du kan også bruge holderen syntaks. Men du kan ikke bruge dot syntaks i PHP. Det vil ikke fungere. Det virker kun i PHP. Og endelig, for at udskrive tingene til det konsol, du bruger console.log, som du fyre bruger en masse i pset8. Du kan console.log det. 

Hvis du vil udskrive et array i PHP, er du nødt til at bruge print r.. Og på den højre side, ser du jeg hash strengsammensætning derovre. Nogen spurgte tidligere. Jeg bruger et plus i JavaScript. Hvis jeg ønsker at sammenkæde noget i PHP, jeg bruger prik. Disse er forskellige. Hvis du skriver PHP kode, Brug ikke et plus. Hvis du skriver JavaScript kode, skal du ikke skrive en prik. Det vil være forkert. Og du vil blive ked af det. 

Så syntaks forskelle. Kend din syntaks, fordi hvis du er nødt til at skriv et spørgsmål, og du bruger syntaksen fra et forkert sprog, det vil ikke fungere. Og det vil være forkert. Så lad os tale om en vis kontrol flow forskelle, hvordan du bruger sløjfer i hver af dem. Zamyla gik over i højre side. Stuff på højre side bør være bekendt. Lad os se på venstre side. 

Når du bruger for n loop i JavaScript, din loop variabel var jeg derovre, løkken over nøglerne til array. Så du ser navn, hus og rolle. Hvis jeg console.log jeg, får jeg navn, hus og rolle. De er nøglerne. I JavaScript, en foreach løkke går kan værdierne af dette array. Så du bemærke, at de begge er jeg. Men her på PHP side, udskriver ud Milo, CS50 og Mascot. Det er de værdier i PHP. 

Så disse er, hvordan disse to er forskellige på de forskellige sprog. Så hvis du bruger en foreach loop, ikke antage, at det giver dig nøglerne. Og hvis du bruger en for n loop, gør ikke antage det giver dig værdierne. Betyder det mening hidtil? Den næste slide vil vise dig hvordan du kan få adgang til modsat i hver af dem. 

Tja, hvis du har nøglen i JavaScript og du ønsker værdien ud, du lige indeks i array med det. Så Milo af jeg vil få dig, hvad du vil - værdierne. Der er denne anden syntaks i PHP. Hvis du virkelig ønsker at vide det, det gør jeg ikke tror, ​​vi har vist det til dig endnu. Men hvis du er interesseret, kan du bruge denne yderligere syntaks til højre side, der rent faktisk vil lade dig få den nøgler i PHP, når du bruger en foreach løkke. Så bare en lille smule trivia hvis du er interesseret. 

Så det er bare at demonstrere forskellene mellem disse to sløjfer. Bland ikke dem op, når du er programmering et spørgsmål. Eventuelle spørgsmål om det. Fedt. Ok. JavaScript objekter. Jeg talte om dem. De er ligesom associative arrays. Det eneste, jeg vil gerne have dig til at bemærke, her er, at en værdi i en associativ array kan være noget i JavaScript. 

Det kan endda være en funktion, derovre. Jeg har en funktion, der er en værdi af en nøgle. Og hvis jeg ønsker at kalde denne funktion, Jeg bare adgang bark. Og så vil jeg sætte parenteser efter det. Og det virker. Så nogen spørgsmål? Nej? OK. Godt. JavaScript, som PHP, er løst skrevet. Hvad betyder det? 

Det har typer. Men når du erklærer en JavaScript variabel, du siger var jeg. Du behøver ikke sige det. Det er ikke en ting. Du skal bare sige, det er en variabel. Og så JavaScript vil håndtere typer under kølerhjelmen for dig. Vi kan frit konvertere mellem typer på grund af dette. Så jeg starter ud som en række i dette tilfælde. Og så har jeg en streng. Og jeg tilføjer jeg til det. Og jeg overflytte den tilbage i jeg. 

Så på den første linje, i er nummeret. På den anden linje, jeg nu bliver en streng efter jeg gøre omplacering. Og her er jeg bare sammenkæde at nummeret på strengen. Så du kan se, at selv om jeg var en heltal i den første del, det er lidt ligesom at blive omdannet til en streng, og derefter tilsættes på denne hello streng. Og så er det, jeg mener af løs skrive. Det er, at du konvertere mellem typer meget nemt. Og det behøver ikke smide advarsler ved du kan lide C gør. 

Så jeg nu indeholder hej 123 til strengen. Næste. Vi kan også frit sammenligne mellem forskellige typer. Så hvis du bare bruge ==, meget ligesom i PHP, JavaScript gør en lignende ting. Strengen 123 er det samme som det antal 123, når du bruger dobbelt ligemænd. Når det bruges tredobbelte ligemænd, det også ønsker at sikre, at typen er den samme. Så fordi der er en streng, og det er et nummer, selvom de er begge 123, når du bruger triple lig, får du falsk. I double er lig tilfældet, får du sandt, fordi dobbelte ligemænd ikke bekymrer sig om typen. Triple ligemænd ligeglad type. Spørgsmål? OK. 

Og en anden ting om JavaScript er rækkevidde er slags global medmindre du er i en funktion. Og det fungerer på samme måde i PHP faktisk. Så lad os gå igennem dette eksempel. Jeg satte jeg til 999. Og så går jeg ind i dette for løkke. Så hvis jeg udskriver jeg i denne for loop, forventer jeg 0, 1, 2, 3, 4. Jeg kommer til i = 4. Den forøger jeg nu til 5 ved udgangen af ​​for-løkken. Og så bryder ud af løkken, fordi det ikke opfylder tilstand længere. 

Hvad tror du, at næste console.log udskrives? Så det er, hvad det ville gøre i C. I C, fordi hvis du har ligesom var jeg udenfor og du har var jeg inde i en løkke, ligesom en for loop, så det gør det sådan, at det virkefelt, at de to i'er er forskellige. I JavaScript, vil det bare behandle det som det samme jeg. Jeg får 5, fordi det var den værdi efter at presset ud af sløjfen. Så dem, jeg er er det samme, jeg. Giver det mening? 

Tja, det giver mening fra en JavaScript synspunkt. Men det samme paradigme ikke fremførsel til C. De har forskellige scoping regler. Ja. 

PUBLIKUM: [uhørligt] uden for funktionen [uhørligt]? 

JOSEPH ONG: Så udenfor hvilken funktion? Så jeg vil komme til at på bare et sekund. Så vi kalder foo (I). Dette passerer jeg ind i foo, intervaller det, og så logger den. Så det var 5.. Så det bliver 6. Men hvad jeg taler om, er at jeg i denne funktion. Fordi det er et parameter, det er virkefelt til denne funktion. Så når jeg faktisk får ud af at funktion, er det nu kommer til at gå tilbage til den gamle jeg. At jeg kun scoped fordi det er i en funktion. Og vi har omfang og funktioner. Men vi har ikke rækkevidde udenfor af funktioner i JavaScript. Giver det mening? Ja. Spørgsmål. 

PUBLIKUM: Samme [uhørligt]? 

JOSEPH ONG: Så ja. I PHP, er det den samme type ting. Der er en lille underfundighed faktisk. Men du kan spørge mig om at efter gennemgang. Du behøver ikke virkelig har brug for at vide at underfundighed til quizzen. For alle henseender, ligesom variabler, global og PHP, medmindre de er i en funktion, samme ting i JavaScript. Ja. 

PUBLIKUM: Hvorfor er dette tilladt i JavaScript og ingen andre steder? 

JOSEPH ONG: Så hvorfor er det tilladt i JavaScript og ikke i C? Det er bare hvem kom op med JavaScript besluttede, at det var OK i JavaScript. Så det er ligesom et programmeringssprog konvention, som vi ville sige. Ja. 

PUBLIKUM: Så hvorfor gjorde det gå 6-5? 

JOSEPH ONG: Så det gik 6-5, fordi når jeg passerede jeg i foo, at Jeg indersiden af ​​foo nu virkefelt til foo, fordi omfang findes i funktioner JavaScript. Men når jeg kommer ud herfra, fordi det blev virkefelt til funktionen, er jeg bare ved hjælp af den regelmæssige jeg, var inde resten af ​​kontrol flow. Mening? Kan jeg flytte på? Ok. Fedt. 

Accepten af ​​dette er objekter er gået som reference. Du ved, hvordan når du passerer et array i C du kunne faktisk ændre array? Det er det samme i JavaScript. Hvis jeg passerer et objekt, i dette tilfælde, jeg bestået Milo i denne catify funktion. Milo starter. Hans navn er Milo Banana. Jeg passerer objektet ind i en funktion fordi det er et objekt, en associativ array i JavaScript. 

Når jeg udfører en handling i denne funktion, vil det faktisk ændre objektet. Så det vil kun ske for objekter i JavaScript, ligesom det sker for arrays inde i C. Så Milo navn rent faktisk vil blive kat nu. Giver det mening? Så det virker kun for objekter. Objekter sendes som reference. Ja. 

PUBLIKUM: Så du siger, at i modsætning til variablen i. 

JOSEPH ONG: Ja. Hvilken variabel jeg var bare et nummer, ikke? Det er ligesom i C, når du passerer en heltal a, det gør en kopi. Og når du passerer et array, er det faktisk ændrer den faktiske array i C. Det samme sker med JavaScript i dette tilfælde. Ok. Og næste, Milo er trist, fordi han er nu en kat. Det var faktisk Milo efter nogle tur til dyrlægen. 

Så hvordan bruger vi JavaScript i en webside? Vi kan medtage det. Dette er HTML-kode med striben tags. Så jeg har bånd tags dér. Og så vil jeg sætte nogle JavaScript kode i scriptet tags. Og så udfører dette. Når jeg bare gøre det på denne måde, er det kaldet inline JavaScript. Det er lidt rodet, fordi JavaScript er faktisk i HTML. 

En bedre måde at gøre dette, meget pænere, er at skrive din JavaScript i en ekstern fil og derefter give script-tag med en kilde. Og det vil gå til at JavaScript-fil og læse JavaScript-koden fra som fil i stedet. Og på denne måde, behøver du ikke har en masse JavaScript i begyndelsen af ​​din HTML-fil, som gør det virkelig rodet. Du skal bare sætte den et andet sted. Og så vil det læse den derfra. Gjorde det giver mening? 

Placement spørgsmål. I dette særlige tilfælde script er før kroppen. Så når jeg udfører det, er der men intet i kroppen. Måske dette vil gøre en lille smule mere fornemme, når jeg viser den næste del. I dette tilfælde scriptet kommer efter div. Så div faktisk ser på siden først. Lige her i denne lille rød cirkel, du se teksten vises. Og så advarslen dukker op. 

I det første tilfælde, fordi scriptet var før div den alarm dukker op først. Og så div dukker op efter du afvise kassen. Så udførelse betyder noget. Så vi vil holde dette i tankerne. Dette vil være vigtigt i en lille smule. OK. Så godt, hvordan kan du vente, indtil hele siden er indlæst så før du udføre noget kode? Vi vil komme ind denne lidt lidt senere også. Men bare holde denne placering spørgsmål i tankerne for, når vi komme til et andet dias. 

Så vi kommer til DOM nu. Og hvad er DOM? Så hvis du ser på HTML-kode, det er bare en masse tekst på skærmen. Så hvordan gør JavaScript vide, at dette er et HTML-element? Så vi er nødt til at have nogle hukommelse repræsentation af denne struktur, vi har. Og når vi har dette i hukommelsen repræsentation i JavaScript, vi kalder at DOM. Og det er bare en måde at folk har besluttet at vi skal repræsentere denne HTML struktur som. 

Og hvad betyder dette DOM se ud? Tja, i hukommelsen repræsentation, vi tager denne tekst. Og vi vender den i hukommelsen repræsentation. Så dette er HTML. Så vi først finde ud af, at hver DOM-træet har et dokument. Det ligner et træ. Og dokumentet indeholder HTML tag, faktisk alt inde i dette nu. HTML-tag har to børn. Det har et hoved. At hovedet, hvis man ser på indrykning derovre ved, hvordan det er struktureret mellem de tætte tags, hoved har et barn. Barnet er titlen. Præcis. 

Nu har vi et organ barn. Og så at kroppen har en barn kaldes familien. Og den familie har tre børn - ældste, midterste og yngste. Så du skal vide, hvordan at tegne et diagram som denne, når vi spørger dig, hvordan at tegne et diagram, når vi giver du HTML til venstre. Vide, hvordan man producerer DOM-træet. Og inde i disse ting, er der bare noget tekst, som jeg har repræsenteret som små kasser. 

Betyder dette DOM træstruktur gøre fornuft og hvad DOM er? Så hvad betyder det p står for? Herovre, p derovre i dette mærke repræsenterer en afsnit tag i HTML. Så du kan slå det op. Men det betyder bare, det er nogle plads til noget tekst. Og det har nogle standard CSS styling, fordi det er et stykke tag. Men ikke rigtig bekymre sig om at en del for meget. Bare ved, det er en pladsholder for noget tekst. Ja. Spørgsmål? Ja. 

PUBLIKUM: Du har lige nævnt CSS. Hash familie og hash alt det der er dybest set repræsenterer id'er i CSS? 

JOSEPH ONG: Ja, præcis. Jeg vil komme til, hvad disse hashes betyder i et sekund. Da Angela gik over CSS, hun talte om CSS selectors. Disse er CSS selektorer, der hun talte om. Ja, Rob? 

ROB BOWDEN: Jeg vil også kommentere at DOM inde i titel-tag er også en tekst node. 

JOSEPH ONG: Right. Så inde i titel-tag, Jeg har noget tekst DOM. Så virkelig, bør denne titel har ligesom en lille boks der kommer ud af det så godt. Men det betyder ikke rigtig noget for meget i dette tilfælde. Vi har ikke rigtig bekymrer sig om tekst noder, som vi kalder dem, for meget. OK, det gør vi. Tilsyneladende gør vi. Og jeg vil fastsætte, at når Jeg uploade det igen. Giver det mening? 

Så hvordan kan vi arbejde med DOM? Når du handler med DOM i JavaScript, der er to trin. Du vælger en DOM element. Og så skal du gøre ting til det. Så i dette tilfælde, abstrakt, har jeg valgt midterste element. Og så et eksempel på at gøre ting for det ville være at ændre teksten. Det plejede at være Bob. Nu, hvad jeg gjorde det var jeg ændrede Bob til Milo i dette tilfælde. 

Så hvordan kan vi faktisk gøre dette? Hvordan gør vi det valg? Og hvordan gør vi det gør ting til de ting, når vi har taget det? Nå, den måde, du fyre har lært det i denne klasse er ved hjælp af noget, vi kaldet jQuery. Så hvad er jQuery? jQuery er et bibliotek, der gør JavaScript nemmere at skrive. Så nogen tog sig tid og skrev jQuery. 

jQuery er faktisk skrevet i JavaScript. Og så fordi de gjorde dette, vi nu har en hel masse funktioner, som vi kan bruge, der gør vores lever virkelig nemt. Så hvad er nogle af de ting, det gør? Det gør at vælge elementer lettere. Det gør skiftende HTML, tilsætning klasser lettere. Det gør Ajax lettere. Vi vil komme til at i et sekund. 

Og det er analog med C-biblioteker. Så du inkluderer string.h, du får strlen. Du får strcpy, alle disse ting. Når du medtager jQuery, får du pæn måder at vælge elementer til forandring ting, et cetera. Du får ekstra funktionalitet, der JavaScript giver dig ikke. Så jQuery er ikke JavaScript. jQuery er et bibliotek, der er skrevet i JavaScript, der gør JavaScript nemmere at skrive. 

Så jQuery er ikke et programmeringssprog sprog. Men JavaScript er. lave. Sikker på at du får din terminologi højre. Eventuelle spørgsmål? Ja. Er det et spørgsmål? Ok. Så hvordan bruger du jQuery? Nå, når du skriver nogle JavaScript-kode og du medtage en jQuery i toppen af ​​din fil som en script-fil, bruge dig dollartegn nu for at få adgang til jQuery. Og det er forskelligt fra dollartegn i PHP. 

Det er det samme symbol, du skriver på tastaturet. Men de betyder meget forskellige ting. Dollartegn i PHP betyder dette er, hvordan jeg erklære en variabel. I JavaScript, når du har inkluderet jQuery, står det for jQuery. Så holder det i tankerne. Så hvordan kan vi vælger DOM elementer? Nå, når du gør det den grimme JavaScript måde, du får adgang til dokumentere global variabel. Og så får du element af ID familie. Det er virkelig lang og ordrige og ikke rart. 

Eller du kan få alle elementer som er en p-tag. Det fungerer også i JavaScript. Men vi har aldrig virkelig viste du syntaksen for meget. Hvad vi viste du var jQuery. Så det hele selector deroppe at blev udtrykt i JavaScript bare bliver kondenseret til denne meget flot dollar underskrive hashtag familie. Og $ p, lige hvor det er sådan. Hvis du vil vælge alle p-tags inde i en familie, vi sætter et mellemrum mellem de to. Og nu får vi alle de p tags inde i en familie. 

Og ser bekendt? Nå, Angela talte om CSS selectors. Giv mig et sekund. Og så for at vælge et element, du bare bruge de samme ting, som du ville gøre med en CSS vælgeren. Hvis du sætter en hash foran af det udvælger efter ID. En prik vælger af klasser. Hvis du lige har de ting uden hashes eller prikker udvælger disse tags. Spørgsmål. Ja? 

PUBLIKUM: Når vi bruger prik i vores HTML, er, at ikke jQuery? 

JOSEPH ONG: Dot i vores HTML er en JavaScript ting. Det er ikke en jQuery ting. Den måde, du fyre lært det med jQuery er at bruge. html. Og så gik det uanset HTML bliver. Så jeg vil komme til at på bare en anden faktisk. Så hvordan gør vi ting til element når vi har valgt det? Så det er et eksempel på vælge et element. Så nu, vi ønsker at gøre ting til det. 

Så i dette tilfælde, så lad mig gå tilbage til det forrige dias. Det var Bob før. Og jeg ønsker at ændre det inde HTML til Milo. Så jeg kalder HTML-funktionen fra elementet. At HTML-funktionen er en fremgangsmåde af elementet. Og så vil jeg give det, hvad Jeg ønsker, at HTML skal være. Og det bare erstatter, hvad der er inde i at tag med hvad jeg giver den. Ja. Spørgsmål? 

PUBLIKUM: Den hashtag bruges for kun jQuery. [Uhørligt] vi ville ikke bruge det. 

JOSEPH ONG: Ja, præcis. Men du behøver ikke bekymre dig for meget om ren JavaScript. Jeg vil bare have jer til at fokusere på, hvordan du ville gøre det med jQuery, fordi der kommer til at være det vigtige del på quizzen. Right. Præcis. Så du kan se, at hashtag, så svarer til at vælge elementet med ID midten på grund af denne hashtag. Hashtag betyder id. Og dette element har en ID på midten. Så det er det element, vi vælger. 

PUBLIKUM: [uhørligt]. dollartegn hashtag [uhørligt]? 

JOSEPH ONG: Så nej. Spørgsmålet er, kan du bruge. Værdi. Og. Værdi fungerer kun på elementer der er indgange. I jQuery, ville det være . Val ikke. Værdi. Så jeg vil komme til et lille eksempel, at demonstrerer alt dette i kombination i en anden. Men jeg tror, ​​det tjener en lille kodestump hidtil giver mening for mennesker. Ønsker at ændre HTML, call HTML metoden. Ja. 

PUBLIKUM: Kan du forklare fremgangsmåden igen? 

JOSEPH ONG: Så en metode er blot en funktion, der hører til en i denne tilfælde er en af ​​disse DOM elementer, fordi du ser jeg valgt elementet først. Faktisk, lad mig bruge musen. Jeg valgte element først. Og så jeg kaldte denne HTML fungere, at det havde. Og fordi denne funktion hører til denne ting, vi kalder det en metode. Det er bare en fancy navn for det. Sig det igen. Så husk, vi valgte elementet nu. Og vi har lagt det inde i elementet variabel. Ret? 

Så når vi ønsker at ændre HTML på inde, fordi det var Bob før, du ønsker at ændre teksten til Milo. Så vi kalder HTML. Og vi fortælle det, hvad HTML indeni dette element skal være nu. Og så skifter det til Milo, fordi jeg gav det Milo. 

PUBLIKUM: Så de arbejder sammen. [Uhørligt] 

JOSEPH ONG: Ja, ja. De arbejder sammen. Så en af ​​dem vælges elementet først. Og den anden gør noget til det. Ja. 

PUBLIKUM: [uhørligt]. Hvis denne metode er forskellig fra i HTML du har metoden samme reelle. 

JOSEPH ONG: Ja. Det er en anden metode. Det er en anden metode. Og vi kan dække, at på bare et sekund når vi kommer til et eksempel. Jeg vil være sikker på, at vi fremskynde fordi vi er ved at løbe tør for tid. Men vi har kørt over tid nu. OK. Fedt. Så hvis du ønsker at tilføje en klasse, er der også en add klasse metode. Dette er blot et eksempel på, hvad du kan gøre med jQuery. Der blot tilføjer en klasse. 

Hvis du ønsker at fjerne det, du kan ringe til fjerne. Det er bare en anden ting du kan gøre. Så flere eksempler på ting, du kan gøre. Så kan jeg bare sætte det på toppen som dette? Yngste fjerne. Hvis jeg bare udføre at JavaScript på toppen af ​​min fil, vil det fungere? Right. Fordi midten ikke eksisterer endnu. Så dette er ikke at gå på arbejde. Udførelse orden. Det går til toppen først. Hvad? 

PUBLIKUM: Yngste ikke eksisterer endnu? 

JOSEPH ONG: Ja. Yngste ikke eksisterer endnu. Præcis. 

PUBLIKUM: Du sagde midten. 

JOSEPH ONG: Undskyld. Yngste ikke eksisterer endnu. Og den anden ting er, jeg ikke har omfattede jQuery fil spørge script src. Så det kommer ikke til at fungere. Faktisk havde jeg ikke gøre det i næste dias, der er formodes at løse, enten. Men den måde, vi gør dette, er JavaScript er hændelsesstyrede. Så hvad vi gør, er vi bruger en begivenhed Handler at gøre dette ske. Og så jeg vælge dokumentet sæt først. Jeg siger, OK, når dokumentet er klar, lad mig køre en funktion. Så det er alt, syntaks midler. 

Jeg valgte dokument. Nu, når dokumentet er klar, køre funktionen. Og så over her, når dokumentet er klar, hvilket betyder alle de HTML har lastet, så jeg kører funktionen der fjerner dette element. Og så nu, når jeg kører denne funktion at jeg gik ind i klar, jeg er garanteret, at alle HTML på side kommer til at eksistere først. Ja. Spørgsmål? 

PUBLIKUM: Hvad er den begivenhed søgeord i funktionen? 

JOSEPH ONG: Så begivenhed søgeord i Funktionen er kun en parameter, bliver gået til den funktion til enhver begivenhed. Det er bare noget, du får gratis. Når du bruger centrale handlere i pset8 kunne denne begivenhed fortælle dig, for eksempel, hvilken nøgle du trykkede på. I dette tilfælde, for en klar begivenhed det er faktisk ikke super nyttige. Men for en tast nede begivenhed, det er mere nyttig, fordi du får at vide, hvilke tast du har trykket ved at få adgang nøgle kode fra denne begivenhed objekt. Ret? Giver det mening? OK. Ja. Spørgsmål? 

PUBLIKUM: Så kan du sætte script-tag lavere ned? 

JOSEPH ONG: Så ja. Du kan sætte scriptet tagge lavere ned. Men så bliver det bare virkelig rodet. Og vi kan lide at centralisere alle af vores kode på ét sted. Og det vil give os mulighed for at gøre det. Husk jeg tidligere sagde, at der er en pænere måde at sikre, at elementerne er på siden, før du udfører kode? Og dette er bare en dejlig måde du ville lykkes. 

PUBLIKUM: [uhørligt]. 

JOSEPH ONG: Ja. Du vil stadig nødt til, right? Fordi husk, du medtaget fil på toppen af ​​siden. Så det kommer til at udføre, før du kommer til bunden af ​​siden. OK. Så du kan også tilføje en anden type begivenhed handleren. Denne ene bare behandler klik. Når jeg klikker på yngste, så det vil poppe op med en advarsel. Dette er blot en anden type hændelse. I modsætning til den klar begivenhed, du nu bruge klik begivenhed, når du modtager klikker på et element. 

Og så i dette tilfælde, skal du huske, klik handleren er knyttet til yngste. Så sker det kun, når Jeg klikker på yngste. Og i den anden, klar begivenhed var knyttet til dokumentet. Så det venter dokumentet at være klar. Mening? Jeg tror, ​​jeg kan komme videre. Ja. Spørgsmål? 

PUBLIKUM: [uhørligt]. i dette tilfælde skal du bruge [uhørligt]. 

JOSEPH ONG: Oh, yeah, fordi der i dette tilfælde, jeg er nødt til at vente for de yngste element til at blive vist på skærmen først før jeg kan vedhæfte et klik handleren til det, hvilket er hvorfor jeg sætte det ind af et dokument klar. OK. Og næste, så dette er en stor eksempel på hvordan ville du kombinere alt. Dette er blot et eksempel form validering du har set i foredraget. Så tage det skridt for skridt, som du går gennem denne. Og det vil være helt OK. Bare læse den fra top til bund. 

Jeg har en form i bunden. Når dokumentet er klar, lægger jeg en indsende handleren til form, således at når jeg indsender formularen, får jeg de værdier inde i hver af disse indgange. Og jeg kontrollere, om det er tomt. Hvis det er tomt, jeg vender tilbage falsk, fordi Jeg ønsker ikke at indsende formularen, fordi formen er forkert. Hvis adgangskoden er blank eller det er mindre end otte tegn, jeg ikke indsende formularen, fordi det er også forkert. Og afkastet falske blot forhindrer formularen fra at indgive og gå til en ny side. 

Og forhåbentlig dette giver mening. Jeg tror du fyre skal gå gennem denne kode trin for trin på din egen. Og når du forstår, hvad de udvalgte elementer og gøre ting til det faktisk indebærer dette vil gøre en masse mening for dig. Ja? 

PUBLIKUM: Hvad gør name = brugernavn betyde? 

JOSEPH ONG: Så name = brugernavn og name = adgangskode betyder bare se på attribut uanset du vælger. Og så har det at matche. Så vi går ind i registrering. Og så ser vi på alle indgange og registrering. Og så skal vi vælge den, hvor navnet attribut er lig med brugernavn. Så det første selector vælger kun brugernavnet input. Og denne anden selector kun vælger adgangskoden én, fordi de har deres navn attributter indstillet som hvad de er formodes at være. Spørgsmål? 

PUBLIKUM: On indsendelse, hvordan gør nederste del løse den øverste del? 

JOSEPH ONG: Så det er fordi af begivenheden handleren. Så vi venter på en indsende begivenhed der bliver fyret fra formularen. Og det er alt der er at indsende. Hvorfor jeg kalder indsende deroppe? Den siger, når formularen er sendt, Jeg får en indsende begivenhed. Så lad mig bare opsnappe det og derefter køre denne kode i stedet. Ja? 

PUBLIKUM: Hvorfor har du at have funktion begivenhed? Hvorfor kan du ikke bare [uhørligt]? 

JOSEPH ONG: Fordi i JavaScript, du nødt til at erklære de funktioner. Det er bare, hvordan det fungerer i JavaScript. Du er nødt til at sige, det vil for at køre en funktion. Så du fortæller det, at du er forventer en funktion her i stedet for bare krøllede parenteser. 

PUBLIKUM: Og den funktion er, hvad følger? 

JOSEPH ONG: Ja. Funktionen er hvad der er indeni de krøllede parenteser efter denne funktion søgeord. Ja? 

PUBLIKUM: [uhørligt]. 

JOSEPH ONG: For indsende? 

PUBLIKUM: Nej, for funktion uden begivenheden. 

JOSEPH ONG: Ja. Så uden arrangementet, du kan have det. Hvis du ikke har brug for den begivenhed, så kan du bare udelade det. Men hvis du gør, så er du bare sætte det der. Ja. Hurtigt spørgsmål? 

PUBLIKUM: [uhørligt]. 

JOSEPH ONG: Ja. Fordi hvad du behøver at gøre, er document.ready bare siger vente for alle HTML på siden til at indlæse først. Og som regel, du vil have dine elementer på plads, før du kører nogen kode. Ok. Vi er nødt til at komme til Ajax. Vi har ikke meget tid. Så fordele og ulemper. JavaScript er lettere prøve skrive med jQuery. Men jQuery er form for langsom. 

Det er ligesom PHP er langsommere end C, fordi det er fortolket. Og jQuery er en smule langsommere end JavaScript, fordi det gør en masse af ting under kølerhjelmen. Og så hvis du bruger jQuery, det er bare en lille smule langsommere end JavaScript, selvom det giver dig flot elegance. Og endelig, Ajax. Hidtil med Ajax, har du ikke set Ajax i form af pset7 endnu, fordi når du gør det, du sender en form for citat. Den indlæser en ny side. Så du får denne store hvide flash på siden, mens der Anden side belastninger, korrekt? 

Det ville være rigtig rart, hvis du havde ikke denne flash. Ligesom Facebook, hvis du bare rulle til bunden, det tilføjer nyt indhold uden at opdatere hele siden. Så noget som dette ville være rart. Dette er JavaScript-kode på venstre side. Du får, hvad der er inde i denne input. Du får bestanden info fra Yahoo! Og så skal du gøre en stor streng, der siger, OK, det er det budskab, jeg ønsker at vise på skærmen. Og så sætte det budskab indeni nogle HTML-element, der får vises på skærmen. 

Så det er alt, hvad der sker her. Så dybest set, fordi det er alt JavaScript og du behøver ikke at køre længere PHP, vil dette gøre sikker at siden ikke opdateres. Så dette er blot en abstrakt idé at jeg siger her for nu. Den abstrakte idé er, at hvis du gør det alt i JavaScript, behøver du ikke have en side opdateringshastighed. Men hvordan kan du faktisk gøre dette? 

Tja, faktisk, lad os tale om et problem med dette først. Et problem er i JavaScript, udførelsen er synkron. Så du er nødt til at vente på en linje for at afslutte, før du udføre den næste linje. Og hvad hvis jeg går over til Yahoo!, og deres servere er virkelig langsom, og det tager dem tre sekunder for at give mig tilbage, at bestanden info? Da jeg ramte denne pris linje, hvis udførelse er synkron, da det er ved standard, hvad det er bare at gøre, er din browser kommer til at stå for i tre sekunder. Og du kommer ikke til at være i stand til at gøre noget, mens det bliver disse data. Det kommer til at blive frosset. 

Og det er slemt. Du ønsker ikke en bruger til har en frossen webside. Ret? Det er bare dårligt. Alle er enige om? Hvis du surfer Facebook, og det fryser, og du kan ikke gøre noget, du blive rigtig frustreret. Så løsningen er, at vi gør noget asynkron stedet. Så alt dette asynkron ting, siger er, vil jeg stille dette URL til nogle data. Og så har jeg tænkt mig at holde ud. Jeg skal bare holde udførelse hvad kode, var efter det. 

Og så, når disse data er klar, så vil jeg behandle den. Det er alt det siger. 

PUBLIKUM: Ajax bare gør kode asynkron? 

JOSEPH ONG: Det er en asynkron måde hentning af data. Så den første ting om Ajax er den lader mig få data fra en ekstern hjemmeside. Og den anden ting er det gør sikker at min side ikke stå, mens jeg er hentning disse data. Det er den asynkrone del af det. Fordi det går et andet sted hen, fordi jeg siger jeg holde på, mens det henter disse data, at gør det asynkrone. Jeg holder udførelse. 

Så holder det asynkrone idé i tankerne. Og jeg vil vise dig, hvad forskellen er. Den synkrone udgave er på venstre side. Den asynkrone udgave er på den højre side. Kig på tallene for at se, hvilke trin svarer til det udfører på hver linje. Derovre advarslen dukker op først. Fordi at få materiel info fra Yahoo! tager tre sekunder, boder tre sekunder. Og så alarmerer pris efter disse tre sekunder. 

Så nu, alarm shows op på det tidspunkt - tre sekunder i. Og så advarer ved efter det. Så det går bare trin for trin. Det er ligesom, hvad du fyre ville acceptere, korrekt? Med asynkron udførelse, du advare først. Så kan du gå ud til denne URL. Og du siger, jeg har tænkt mig at bare bede om dataene. Og så har jeg tænkt mig at behandle det senere. Så det straks udfører næste linje efter jeg gør, at asynkron anmodning. 

Så en 0,001 sekunder, kan du se alarm hi. Udfør denne funktion, alarm farvel. Og fordi jeg gjorde et løfte, som jeg ville behandle data senere, hvad sker, er, når disse data kommer tilbage tre sekunder senere, da jeg køre denne funktion, som jeg har derovre. Ja? 

PUBLIKUM: Kunne du angive eller tydeliggøre, hvad Ajax betyder? 

JOSEPH ONG: Så Ajax er en måde, at hvis jeg brug for data, når jeg er på en hjemmeside, og jeg ønsker ikke at opdatere siden, så Jeg bruger denne teknologi kaldet Ajax. Det væsentlige betyder bare, gå hente data fra en anden hjemmeside. Og gør det på en måde, der bare staller ikke min webside. 

PUBLIKUM: Så er der en iboende en del af JavaScript eller jQuery? 

JOSEPH ONG: Så nogen skrev en måde at gøre dette i JavaScript lang tid siden. På et tidspunkt, gjorde det ikke eksisterer. Og så nogen opfandt denne teknik at tillade folk at anmode disse data på denne måde. Og de skrev nogle ting at gøre det for dig. Og jQuery bare giver dig denne meget flot måde at gøre det med denne $ får. funktion. spørgsmål? Jeg kan besvare spørgsmål om Ajax bagefter også. Jeg vil være her. 

Så det lad os hente data uden opdatere siden. Og det lad os gøre dette i en asynkron måde, ikke fryser siden. For lang, har ikke læst, hvis det forklaring var for lang tid for dig. Så til sidst, cross-site scripting angreb. Vi så det med Zamyla. Hvis du er i min database nogen har dette navn, der er denne script-tag, og jeg har noget kode på min side, der udskriver ud folks navne i træk, eller jeg har nogle JavaScript-kode, der indsætter dette navn på siden, hvad HTML bliver produceret? Nå, jeg udskrive HTML-tag. Jeg udskrive alle disse tags. 

Jeg kommer til den del, hvor jeg udskrivning ud med mine venner. Jeg udskriver Lauren ud. Det udskriver Milo ud. Og så mit navn i databasen er script indlæg lidet flatterende Facebook-status. Fordi jeg indsat denne ind på siden fordi det ligner JavaScript, når denne side bliver sendt til brugeren, det bliver udført som JavaScript. Og så dette er, hvad vi kalder en cross-site scripting angreb. Nogen sætter ondsindet information i databasen, der kan svare til nogle yderligere streng eller nogle JavaScript-streng. 

Og når det bliver udskrevet til side på denne måde, så hvad sker er, at dårlig kode bliver henrettet at jeg ikke havde til hensigt for det for at få udført. Og det hele er en cross-site scripting angreb er. Og den måde du komme rundt det er ligesom Zamyla sagde. Du skal bare pakke tingene i HTML specielle tegn. Og denne HTML særlige tegn er en PHP som vil forhindre denne slags ting sker for dig hvis du har en skadelig snor i din database. Det bare undslipper den, så den ikke bliver fortolket som HTML. Den erstatter de små beslag med det, vi kalder enheder. Og vi gik over dette foredrag også. Så jeg tror du fyre skal have et godt greb om det. Spørgsmål? Ja. 

PUBLIKUM: Så hvordan ville på [uhørligt]? 

JOSEPH ONG: Sig det igen. 

PUBLIKUM: Hvordan ville monitoren - 

JOSEPH ONG: Right. Så du har noget, der siger, når Jeg registrere, skrive i mit navn. Jeg bare skrive på dette område, mit navn er stript indlæg lidet flatterende Facebook status tæt script-tag. Og det bare bliver lagt i databasen, fordi jeg ikke kan sige nogen i verden ikke har et navn med en pil til venstre i det eller de Ordet script i det. Det betyder ikke rigtig mening. Så jeg bare nødt til at sørge for, at jeg rense de ting, før jeg udskriver det ud til siden. 

PUBLIKUM: Så HTML særlige kort forhindrer scripttags? 

JOSEPH ONG: Ja. Så det forhindrer ikke scripttags. Det bare gør sikker på, at scripttags ikke får tolkes som HTML eller - ja. Det bare kommer op som hvad det faktisk er. Ok. Så det var quizzen gennemgang. Fedt. 

[Applaus]