R.J. AQUINO: La oss bare komme i gang. Så dette er quiz en. Her er noen informasjon på høyt nivå. Om-side for quizen er på dette URL, ikke lenger CS50.net, selv om det vil fortsatt fungere. Det er CS50.harvard.edu/quizzes/2013/1. Det er den store Om siden, forteller deg hvor og når, nemlig neste onsdag i en haug med rom. Og ved neste onsdag, jeg bety to dager fra nå. All denne informasjonen er der. Men det er kumulative. Så alt fra den første halvpart av året er potensielt på quiz, fordi du ikke kan virkelig gjøre avanserte ting i C uten hvis forholdene og for løkker og lignende. Men det vil bli lagt vekt på Materialet dekket siden Quiz 0, starter med structs og Fil I / O. Det er vanligvis mer utfordrende enn Quiz 0. Den gjennomsnittlige poengsum er vanligvis lavere. Studere hardt. Mens du studerer, sørg for å bruke CS50/discuss å poste dine spørsmål og lese andres spørsmål. Så hvis du ikke har noen spørsmål, logge inn og lese dine venners spørsmål. De er sikkert gode spørsmål. Og ta de praktiske tester. Vi har vært å gi spørrekonkurranser for syv eller åtte år nå. De er alle på Internett. Fremtidige spørsmål er lik til gamle spørsmål. Det er slik vi gjør dem. Quizen ikke finnes ennå. Ingen av oss har sett den. Men det vil se ut tidligere spørrekonkurranser. For denne anmeldelsen sesjon, er dette ikke en uttømmende liste over emner. Du kan ikke bare delta på dette og deretter være helt klar for quiz. Ellers ville det ikke være at mye av en quiz. Og dette er heller ikke nødvendigvis alt du trenger å vite om noen gitt tema. Det er ment for å utsette deg for de tingene vi har dekket, minne deg på hva vi dekket, og den måten som vi dekket det. Men du er nødt til å gå videre og dypere når du studerer til å dobbeltsjekke at du vet alt om et gitt emnet og at du har fylt inn alle hjørner som var dekket i forelesningen. Quizen notater fortelle deg å gå til risse notater, klokke forelesningsvideoer. Det er en god måte å sørge for at du har dekket alle baser. Så å komme i gang, når jeg har gjort disse lysbilder, prøvde jeg å sette der jeg fant informasjon. Så for File I / O, for eksempel, uke 7, Mandag foredrag, og postet § 6 og oppgavesettet har alle informasjon om Fil I / O. Jeg har gjort dette for hvert emne. Så de tittellysbilder kan være nyttig for deg. Så her har vi File I / O. Husk, i Problemet ligger fem, brukte vi fopen, fclose, fwrite, fread, og fseek. Etter å ha gjenvunnet 30ish JPEG og å ha endret størrelse og rotet med bitmaps, bør du være ganske kjent med disse funksjonene og hvordan de fungerer. Hvis du ikke lenger er kjent, definitivt vurdere dem. Og sørg for at du forstår hva de forskjellige argumentene er, når de er brukt. Men de vanligste filtypene relaterte bugs du kan bli bedt om - vel, hvis du har glemt å sjekke om fopen faktisk jobbet før du går til modifisere en fil. Det kan være dårlig. Hvis du har glemt å fclose en fil at du har fopened, det er lik en minnelekkasje. Det er ganske ille. Og glemmer å sjekke om du har nådd slutten av filen før du begynner å skrive til den. Så hvis du sier, hei, jeg er på slutten av filen. Gi meg fem flere bytes. Vel, det er sannsynligvis ikke kommer til å trene slik du forventer. Det er egentlig det for File I / O, fordi vi gjorde så mye av det med oppgavesettet. Så hvis du forsto hva som foregikk i oppgave Set 5, husker bitmats og JPEG-bilder, så er du sannsynligvis alt satt for File I / O. Hvis det er litt fuzzy, definitivt vurdere det problemet set og den tilknyttede materiale. Structs var temaet som var på linje mellom Quiz 0 og Quiz 1. Visste ikke helt gjøre kutt for Quiz 0. Så de vil definitivt være på Quiz 1, uke 7, mandag. Hva er en struct? Her viser vi en struct. Det er som en ny type. Det er som en container for flere felt. I dette tilfellet har vi erklært en struct student som har to felt - en streng som vi kaller navn og en int som vi kaller alder. Så når jeg passerer rundt studenter eller jeg modifisere studenter, vil jeg være i stand til å tilgang til deres navn og deres alder. La oss se på noen kode for det. Her ser vi at jeg har erklært en student s, akkurat som Jeg erklærer noe variabel - int x, int y, et cetera. Her er student s. Han starter med ingenting i sine felt. Så la oss sette dem. Du angir felt av en struct med prikk. Så jeg har sagt her at s.name = RJ. Og s.age = 21. Du kan også oppdatere felt på samme måte som du ville oppdatere verdien av en variabel. Så jeg ønsker å endre navnet mitt fra RJ med ingen perioder til R.J. stavet korrekt måte. Det ville være s.name = RJ, det samme som vi sa det opprinnelig. Og så kan du få tilgang til dem. Så vi har satt dem. Vi har oppdatert dem. Du kan også få tilgang til dem i den samme måten. Så her, jeg skriver ut R.J. Er 21 år gammel. Og jeg tilgang til disse verdiene med s.name og s.age. Så det er tilgang structs med dot notasjon. Jepp, stille spørsmål? PUBLIKUM: Er det en grunn på forrige lysbilde som du ikke sette student på øverste linje, som typedef struct student og deretter student på slutten? R.J. AQUINO: Så spørsmålet var, på dette lysbildet, har vi vanligvis sett typedef struct node og deretter felt av struct og deretter ordet node. Og hvordan kommer her jeg ikke si, typedef struct student og deretter felt av struct og deretter student? Grunnen er at jeg ikke trenger å tilgang til den innsiden av struct. Så det er OK å la det uten et navn. Jeg kan bare la det som en anonym struct. Grunnen til at vi gjør det for lenkede lister og ting er fordi inne du trenger å referere til en struct noder stjerne. Så struct må ha et navn, slik at du får tilgang til den senere. Det er en liten detalj. Men du vil vanligvis se typedef struct klammeparentes hvis du ikke trenger navnet og typedef struct noen navn etterfulgt av klammeparenteser hvis du vil trenger navnet. Så det er et godt spørsmål. Og på det punktet, har vi en tendens til å endre structs og pass rundt structs etter referere, ikke av verdi. Så får vi bare passerer rundt pekere til structs stedet for å gå rundt structs seg. Så du svært ofte kommer til å være ved hjelp av, i dette tilfellet, student * or struct node * eller node * stedet ut studenter eller noder. Så her, jeg har sagt, OK, den variable ptr kommer til å være adressen til s. Det kommer til å være pekeren til studenten R.J. Så vi kan få på disse feltene det samme som vi får noe. Først ID referere pekeren å få struct. Det er * ptr og deretter en prikk og deretter alder. Så for å få tilgang til feltet, og jeg har oppdatert den nå til 22, fordi, la oss si, det var min bursdag. Det er en snarvei syntaks Via pilen her. Så ptr pil alder er bare det samme som * ptr.age. Nå, det er noe du vil ha å huske og huske. Du brukte det mye i pset6, stavekontrollen PSett. Men dette er faktisk hva som kommer på under panseret. Det er dereferencing pekeren og deretter få tilgang til den. Spørsmål? PUBLIKUM: [uhørbart]. R.J. AQUINO: Så hvorfor bruker vi pekere som structs i stedet for structs seg selv? Grunnen ville være hvis du passerer en struct til en funksjon, har du sannsynligvis ønsker å passere rundt bare 4 eller så byte som representerer pekeren, som motsetning til den potensielt 30 eller 40 bytes som er struct. Så passerer noe til en funksjon er enklere når ting er mindre i kort. Spørsmål? PUBLIKUM: Du har kanskje nevnt dette i begynnelsen, men er det andre kan skyves opp på [uhørbart]? R.J. AQUINO: Disse lysbildene vil være opp etter gjennomgangen økten. Vi vil legge dem ut på nettstedet. Så går videre og flytte på litt raskere, vi kommer til å snakke om data strukturer. Det er mye. Vi dekket en haug av dem. Her er hva du bør forstå om datastruktur. Du burde virkelig forstår seg på et høyt nivå hva hver struktur er. Kan du forklare på engelsk til din venn som ikke har tatt CS50 hvordan vi organisere våre data og hvorfor vi hadde være å bruke noe på denne måten? Det er ting en. Thing to, forstår gjennomføringen. Så forstå hvordan du bruker disse tingene i C. Og skal vi gå over dette. Og så ting tre ville bli kjent med levetid og begrensningene til ulike strukturer du bruker. Så forstå hvorfor du ville bruke en hash tabell i stedet for en matrise. Forstå hvor fort, i gjennomsnitt, tilgang til en hash table er. Forstå hva slags operasjoner er raskt på lenket liste, men treg på matriser og vice versa. Så for å forstå det, må du forstå Big-O notasjon bare vite hvordan å snakke om disse slags ting. Og vi skal snakke om det. Så første tingen, knyttet lister. Her er et høyt nivå bilde av en lenket liste. Vi viser dette i klassen. Vi har vanligvis 10 personer står på scenen. Men vi har en rekke noder der hver node har noen verdi, og en peker til sin neste verdi. Så for å komme fra en node til den neste, du bare si, gi meg neste node. Du har den noden. Gi meg neste node. Du har den noden. Gi me den neste node, og så videre inntil det er ingen node venstre. Så fortsett å snakke om det på et høyt nivå. Det er veldig lett å sette ting inn i en lenket liste. Hvis du ikke bryr deg om rekkefølgen, du kan bare slippe det helt i begynnelsen. Det er konstant tid. Men det er vanskelig å finne en verdi. Hvis du prøver å spørre, er syv i min liste? Du må gå gjennom hver enkelt verdi. Er dette sju? Er dette sju? Er dette sju? Er dette sju? Igjen og igjen. Og det er O (n). Så når studerer for quiz, sammenligne dette med matriser. Er det OK? Lysene gikk dim. OK. Når er en lenket liste bedre? Når er en matrise bedre? Så la oss se på noen kode. Her er en potensiell node. Det er en struct. Den har en int n, hvor vil være vår verdi. Og det har en struct node * neste, som er vår peker til den neste noden. Så her kan vi se at vi har skjedd å ha satt en int i vår node. Men hvis dette var en lenket liste av røye stjerner eller en lenket liste med flyter, vi helt kunne gjøre det også. Husk i pset6, har du sannsynligvis hatt en lenket liste av røye stjerner eller bare statiske røye arrays. La oss se her på en operasjon. Så vi ønsker å sette inn en ny n inn i vår lenket liste. Vi starter ut med et hode peker som er en peker til denne noden som har Verdien av n, og en neste av en peker som peker til denne node er en verdi av n og en ved siden av null, fordi det er den siste noden. Så av hensyn til tid, vil jeg legge all koden på skjermen. Og vi vil gå gjennom det noen linjer om gangen. Så her er koden. Jeg håper det er lesbart. Det første vi gjør er vi malloc en ny node. Så det gjør en peker til en ny node som ikke helt har noe satt opp i det ennå. Vi sjekke for å være sikker på at den nye noden er ikke null. Ellers må vi gi opp. Så etter å ha sjekket at vi nå sett verdiene i noden. Så vi satte ny n inn i vår n feltet. Og vi setter neste pekeren å peke på den opprinnelige hodet, slik at vi kan nå har satt dette node til listen vår. Endelig har vi den globale hodet punktet til vår nye node, slik at hvis vi skulle starter på hodet, ville vi være på dette ny første node i stedet for den gamle første noden. Og når denne funksjonen kommer ut, den variable ny node ikke lenger eksisterer, fordi det var lokale til funksjonen. Så dette er tilstanden i verden. Vårt globale hodet peker til vår nye første node, som peker til vår opprinnelige første node, som poeng til noden etter at. Det var innsetting. Jeg håper det var relativt grei å følge. Når du er i tvil, tegne et bilde. Så jeg synes at det å snakke om lenkede lister og ser på Koden er svært nyttig. Mens du ser på et bilde av en koblet liste tillater meg å tenke, oh, så Jeg har denne noden her. Men hvis jeg oppdatere denne pekeren, det ender opp frakoblet. Og jeg har glemt hvor noden går. Og koden kommer ut. Og du har flere noder som er frakoblet. Og du ikke ender opp med listen du vil. Så hvis du tegner bildet og gjøre det trinn for trinn, forhåpentligvis, vil du se den riktige rekkefølgen av ting i form av oppdatere pekere for å være sikker at listen kommer sammen. Sett er relativt grei. En mer komplisert ville være innsetting i en sortert liste. En mer komplisert funksjon er slett og finne, så ser gjennom en liste for å se om noe er der. Kanskje du gjorde dette i pset6 når du fikk inn din hash table, og du sa, vel, er ordet eple i min lenket liste? Så kanskje du allerede har gjort dette. Men definitivt, friske opp hukommelsen og prøve å reimplement funn og reimplement slette en lenket liste. Morsom side note, det også dobbelt-linked lister, hvor du har pekere som peker både fremover og bakover, slik at du kunne gå til neste node, og den foregående noden. Og det var et spørsmål om fjorårets quiz av denne typen, snakker om dobbelt-lenkede lister. Nå, det er en struktur som du er relativt kjent med, fordi de fleste av dere sikkert brukt dem på pset6. Her er en som er litt mindre kjent. Som en side note, tror jeg at Quiz 1 er primært hardere enn Quiz 0, fordi ting du gjør, du har ikke gjort så mye. For å sette det på en annen måte, for Quiz 0, du hadde skrevet en masse C. Og vi spurte du om C. For Quiz 1, kommer vi til å spørre deg om PHP og Javascript, som du skriver ikke så mye av. Vi kommer til å spørre deg om C-kode som du har ikke skrevet så mye av, denne avanserte C stuff. Så definitivt, øve på ting vi snakket om i foredraget at du ikke nødvendigvis gjøre på oppgavesettet. Apropos, har du ikke skrevet en stabel på et oppgavesettet. Men det var på forelesning. Her er det høyt nivå bilde av stabler at vi viser hvert år. Det er bunken med skuffer i den Mather spisesal. Ved et høyt nivå, stabler er en siste inn, først ut datastruktur. Det betyr at du kommer å sette ting i - 1, 3, 7, 12, 14, negativ 0. Det eneste jeg kunne ikke ha sa - negative 3, 0. Du setter alle disse tingene i. Og det siste du putter i er den første en som kommer til å komme ut. Så du har to operasjoner - presse og pop. Alle de sette i at jeg var gestikulerer som dette er push. Og så når jeg kommer inn til grab noe eller komme på toppen for å hente noe, det er pop. Så vi kommer til å gjennomføre stabler. Og vi viste dem på forelesning bruke matriser. Men du kan gjøre dem ved hjelp av lenkede lister. En stabel er en konseptuell data struktur, ikke som en implementeringsspesifikk ett. Så hva ville det se ut? Det ville se litt som dette. Du vil ha et heltall størrelse. Og du vil ha en matrise med verdier som vi ringer skuffer, fordi det er hva bildet var for oss - int skuffer - og litt til maksimal kapasitet. Så hva ville presse ut? Vel, hvis vi har en bunke s, deretter å presse noe på s, ville vi få størrelse s. Og det vil være det neste åpen flekk av vår array. Så hvis vi har tre ting i stacken, Da skuffer tre ville bli den neste åpen flekk, på grunn 0, 1 og 2 er allerede fylt opp. Så vi setter verdien inn s.trays [s.size], det tredje punktet. Og så øke vi s.size å si, hei, vi hadde tre ting før. Nå har vi fire. Så neste gang du trykker, du er kommer til å sette noe inn i fire. Eller neste gang du pop, du kommer å se på tre i stedet for fire eller hva. Og så får vi return true til sier hei, lyktes vi. Dette fungerte. Som en tommelfingerregel, hvis en funksjon som er skal returnere true eller falsk returnerer alltid sant, du kan har gjort noe galt. Så fungerer dette? Vel, det fungerer fint for en, og 2 og 3, og 4, og fem. Men la oss si at jeg nå min kapasitet. Jeg har da kjørt inn i et problem, fordi Hvis størrelsen er den samme som kapasitet, er jeg nå prøver å sette noe inn i en matrise hvor jeg ikke har plass. Så en kort sjekk for å fikse dette. Hvis s.size == KAPASITET, return false. Ellers, gå og gjøre det vi gjorde. Så hva annet kan vi spørre om for stabler? Hva annet bør du studere? Hva annet bør du øve? Vel, implementere pop. Vi allerede gjorde push. Jeg skal fikse det. En ikke-matrise gjennomføring, hvor du bruke en lenket liste, kanskje. En ikke-int gjennomføring. Vi gjorde ints her. Men det kunne ha vært flyter. Jeg kunne ha vært strenger. Det kunne ha vært røye stjerner. Se på tidligere spørrekonkurranser for de typer spørsmål vi har spurt om stabler. Jeg vil si at vi dekket stabler rundt det samme som vi har dekket dem i år tidligere. Så spørsmålene bør være en god indikasjon. Fremover enda raskere, køer. De er som stabler. Men de er først inn, først ut. Hvis du er britisk, ordet køen trolig gjort mye fornuftig for deg. Ellers kan du ha hørt på det som en linje. De fungerer som linjen på Apple Store. Den første personen til å dukke opp på 3:00 om morgenen den første person til å kjøpe sin iPad. Så vi har to operasjoner - enqueue og dequeue. Enqueue setter noen i linjen. Dequeue trekker først person av linjen. Igjen, kan vi implementere dette med en matrise. Så hva er den struct vi viste i foredraget? Det var denne. Igjen, tallene. Igjen, størrelse og denne nye ting foran. Hvorfor er det noe som heter foran? Det er indeksen for den neste element å dequeue. Det er bare internt å holde styr på den første fyren til å dukke opp, slik at vi kan trekke den ut når vi må. Definitivt se på forelesningsnotater og prøve å implementere enqueue og dequeue når man studerer for quizen. Viktige ting å tenke på. Innpakning rundt hvis fronten pluss størrelse ender opp større enn kapasiteten. Igjen, hvis strukturen er full, du kommer til å ha et problem. Hash tabeller du har sett før. De fleste av dere sikkert implementert disse på pset6. Det er en struktur som tar sikte på O (1) konstant tid innsetting og O (1) konstant tid oppslag. I CS50, vi implementert dette som en rekke lenkede lister. Nøkkelen komponent til en hash table er hash-funksjon. Så det konverterer dine innspill, la oss si, en ordbok ord, i et antall, som kommer til å være vår hovedside. Og vi vil bruke indeksen inn i vårt utvalg. Så her er en søt liten bilde fra study.50.net. Vi kaster alle ordene i vår hash-funksjon. Og hash-funksjon forteller oss hvor du skal plassere disse ordene. Dette er alle gode i landet der det er bare ett ord for hver slot. Men som du husker fra pset6, det er flere ord enn spilleautomater. Så hva skjer når du få en kollisjon? I stedet for å lagre én verdi i, la oss si, hash table 3, du lagre en lenket liste. Og så i stedet for å ha cantaloupe her, vil du ha en lenket liste, hvor den første noden er honningmelon. Og neste node er katt. Og den tredje node er kollisjon, la oss si, fordi alle disse ordene begynner med C. Så de fleste av dere gjorde dette for pset6. Hvis du ikke gjør en hash table på pset6 og du forsøkt noe sånt en trie, definitivt vurdere hash tabeller. Hvis du gjorde det på pset6, definitivt gjennom hash tabeller. Og hvis du gjorde det på pset6 og det gjorde ikke trene helt rett, og du hadde mye trøbbel med det, definitivt gjennom hash tabeller. Så lærdommen er virkelig definitivt gjennom hash tabeller. De aller mindretall av dere prøvd ut prøver på pset6. High-level bilde. Det er noe sånt som dette, hvor hver node har et sett av barn, hvor hvert Barnet tilsvarer et brev. Og hver node sier også, hei, jeg er et ord. Så i dette tilfellet, ordet Maxwell, hvis du følger M til A til X-W-E-L-L og deretter følger det en til. Og du får dette symbolet, deltaet, som vi betegne å mener dette er et ord. Så Maxwell er et ord. Disse deltaer er hele betegnende hvilke ting er ord og som ting er ikke. Så i pset6, dataene vi lagret sammen med noen av våre noder var "Jeg er en Ordet. "Og den kule ting om forsøk er de viser innsetting og Oppslag i O (lengde av et ord). Så bare for å komme gjennom Maxwell, er det M-A-X-W-E-L-L. Så syv eller åtte - Jeg kan ikke telle - tiltak for å få til slutten og sjekke ting ut. Så rask implementering her. Rob gikk gjennom en koblet liste i hans post mortem. Så sjekk det ut. Unnskyld. Gikk gjennom en trie i hans post mortem. Så sjekk det ut. Men du i utgangspunktet har hver node har 27 pekere til de neste noder og ett Boolsk for jeg er et ord. Sjekk ut Rob post mortem for hvordan dette faktisk er implementert. Vår endelige struktur, våre trær og binære søketrær. Så se på disse, disse ble dekket sist uke 8, mandag. Et tre er lik en trie, bortsett fra at du ikke nødvendigvis har 27 noder på hvert punkt. Og du trenger ikke disse dataene ved hver trinn som betyr om - banen spiller ingen rolle. Mens en trie, banen fra topp til bunn, Maxwell, var viktig for oss. Men hver node har flere barn, kanskje. Vi har litt mer vokabular. Roten av treet er helt på toppen. Og vi sier at den aller nederste noder som ikke har noen barn er bladene. Så ut som et trie, er et tre en struktur av noder. En vanlig type tre som vi skal å snakke om er et binært tre, hvor hver node har ingen barn eller ett barn eller to barn. Så dette bildet her er ikke et binært tre, fordi node 3 har tre barn. Men hvis vi skulle ignorere dem, resten av det er et binært tre, fordi demonstrerer den egenskapen at hver node har null, ett eller to barn. Så hvordan kan vi uttrykke dette i koden? Vi kunne ha en node der hver node har et helt tall på innsiden av den, samt som en peker til treet til venstre og en peker til treet på høyre, slik at de to barn. Hvordan er dette nyttig? Vel, hvis vi gjør regler om hvor vi sette noder, kan vi gjøre søk raskere. Så det er et konsept av et binært søk tre, hvor alle nodene på venstre subtre har en mindre verdi enn noden vi ser på. Og alle noder på høyre subtre har en større verdi enn rotnoden. Nå ser det ut som en masse ord. Jeg kommer til å sette den på innsiden av dobbelt sitater og vise deg et bilde. Så her er et eksempel på et binært søketre. Se at vi begynner med 10. Alt til venstre for 10 er mindre enn den. Og alt mot høyre er større enn den. Men mer enn det, hver node i treet uttrykker denne eiendommen. Så noden 7 har en 3 til venstre og en ni til høyre. Så alle de som er mindre enn 10 år. Men ser på bare de har 7 3 til sin venstre og 9 til sin rett. Og på samme måte på høyre, har 14 15 til dens venstre og 50 til høyre. Så de tre nodene enn der, 15, 14, og 50, er også en gyldig binært tre eller et gyldig binært søketre. Og de er alle større enn 10. Så de har lov til å være på høyre der. Er det et spørsmål? PUBLIKUM: Hvordan takler du når du har to sjuere? R.J. AQUINO: Yeah. Hvordan takler du med to verdier som er de samme? Noen binære søketrær si at du ignorere duplikater, fordi målet er bare for å si, jeg har sett disse tingene så langt. Noen binære søketrær du kan si har en telling på innsiden av noden. Andre kan si at alt å Til venstre er mindre enn eller lik. Og alt mot høyre er større enn. Det avhenger bare av hva den Problemet er at du skal løse. Så i en ordbok, for eksempel, du ville ikke bryr seg om duplikater. Du vil kaste dem ut. Men andre problemer du måtte bry seg. PUBLIKUM: Er det mulig å ha en 1 til venstre for 15, som er mindre enn 10? R.J. AQUINO: Nei. Dersom den 14 her var en 1, vil denne ikke være en gyldig binært søk treet fordi alt til høyre for 10 må være større enn det. Og vi vil se hvorfor. Hvis du er i landet av søke mitt mål er å finne 14, begynner jeg ved roten. Så jeg ser. OK. Vi kommer til å starte ved roten. Se på ti. Vel, 14, våre mål, er større enn 10 år. Så det må være på høyre side. Dette er svært lik hele telefonen Boken ting vi gjorde, den binære søke der. Men i stedet for binære søk i en matrise, er vi binær søker i dette treet. Så vi er fortsatt på jakt etter 14. Vel, 14 er mindre enn 15. Så hvis det er i treet vårt, må det være i dette området her. Det må være til høyre 10 og til venstre for 15. Og så sjekker vi denne noden. Og yay, har vi funnet 14. Jeg kommer ikke til å gå gjennom den. Men her er koden. Det er faktisk relativt grei, fordi dette er rekursiv. Hva kan vi be deg om å gjøre på en quiz? Vi kan be deg om å skrive denne koden. Vi kan be deg om å se på denne koden og modifisere denne koden og forklare hva det gjør. Yeah. Spørsmål? PUBLIKUM: Er disse lysbildene kommer til å være gjort tilgjengelig som de var sist gang? R.J. AQUINO: Ja. Så disse lysbildene vil definitivt bli lagt ut. PUBLIKUM: De er faktisk lagt ut akkurat nå på nettsiden. David bare gjorde det. R.J. AQUINO: Skinnene er akkurat nå på nettsiden. Jeg vil sannsynligvis flikke på et par skrivefeil Jeg noterte og fikse dem. Men det er en aktuell versjon på nettstedet. Andre ting som vi kan be deg om å gjøre - skrive innsats. Skriv en iterativ versjon av rekursiv funksjon vi bare viste deg eller snakke om disse tingene, som i avsnitt, i ord, i setninger. Sammenligning av kjøretider og forklare hva du ønsker å bruke en binær søketre for i stedet for en hash bord, f.eks. Så forstår disse strukturene på en ganske dypt nivå. Forstå hvordan du skriver dem, hvordan du bruke dem, hvordan du kan snakke om dem. Og du vil være klar. Spørsmål? PUBLIKUM: Når du skriver det binært søketre, hvordan gjør du bestemme hvilken verdi å gjøre det som root? R.J. AQUINO: Så spørsmålet var, hva verdi gjør du som roten? Avhengig av koden din, du kan ha en global rot. Så du kan ha sannsynlig hatt i pset6 en global hash table. Eller du kan passere roten inn som et argument. Så denne søkefunksjonen her tar et argument en node *. Og så hva node du tilfeldigvis være ser på er den du behandler som root når du passerer det i. Og jeg er klar. De er mine lysbilder. Den neste personen kan komme swap i en bærbar PC og mikrofon. ROB BOWDEN: Jeg tror jeg kan ha tolket det spørsmålet annerledes. Men jeg tolket det som, hvis du har tallene 1, 2, og 3, hvordan gjør vi vet å lage to roten i motsetning til 1 eller 3? Hvis vi gjør to roten, så er det pent 1 og 3 til venstre og høyre. Men hvis en er roten, så er det en til top, 2 til høyre, 3 mot høyre. Så som standard, trenger du ikke vet hva du skal gjøre roten. Og for noen algoritme vi forventer å gi deg, bare det første du innsats ville være roten. Eller vi skulle gi deg et binært tre som Det finnes allerede som har en rot. Men andre algoritmer finnes slik at roten vil oppdatere, slik at hvis du ende opp i en situasjon der det er en, to, 3, vil den automatisk oppdatere til foreta to nye roten, slik at det er fortsatt pent balansert. ANGELA LI: Cool. Hei, folkens. Jeg er Angela. Og jeg kommer til å fullføre av våre C og deretter gå inn i noen av våre web teknologier - HTTP, HTML og CSS. Så det første er buffer flow angrep. Så la oss ta en titt på denne koden. Det er ganske enkelt. Det er en funksjon foo. Og den ikke returnerer noe. Men det tar i en peker til en streng som heter bar. Og det kommer til å erklære dette buffer, noe som er et tegn array som har 12 plasser. Og den bruker memcpy, som er bare en funksjon som kopierer fra en adresse inn i en annen. Så dette er å prøve å kopiere inn vår buffer fra uansett bar peker til. Så noen anelse om hva som er galt med denne koden? PUBLIKUM: Ved baren er lenger enn C, vil de overskrive. ANGELA LI: Ja, akkurat. Vi har ingen garanti for at bar kommer til å være mindre enn 12. Vi har nettopp gjort noen vilkårlig nummer 12. Og vi var liksom, la oss håpe at vår brukerundersøkelser er mindre enn 12 tegn lange. Så i en ideell verden, hvis våre innspill er alltid som forventet, så vi får noe sånt, hallo. Det er mindre enn 12 tegn. Det blir lest inn char c. Og så gjør vi noe med det. Det spiller egentlig ingen rolle. Men en ondsinnet person kunne gjøre noe mer som dette, hvor de gi oss uansett bar peker til, det kommer til å peke til dette enorme utvalget av bare A-er. Og dette er måten lenger enn 12. Så det kommer til å gå hele veien ned her til der avkastningen adresse pleide å være. Så la oss si at denne funksjonen kalles foo. Kanskje foo ble kalt av noen andre funksjon, som ble kalt av hoved. Så når foo er i gang, må det å vite hvor du skal gå tilbake til. Hvis foo ble kalt av noen funksjon som heter Baz, har det å vite at det er må gå tilbake til Baz. Og det er det denne returadresse her nede er å fortelle oss. Men hvis vi overskrive den med noen andre adressen, i dette tilfelle, er dette en fremstilling av adressen til begynnelsen av denne buffer, deretter hva som faktisk kommer til å skje er at stedet for å returnere tilbake til baz, som kalles vår funksjon, er det bare kommer til å gå til forsiden av denne koden. Og hvis dette var det fordi en ondsinnet hacker fyr kom og injisert dette, så kanskje dette beløpet av A-er er faktisk ikke A sin. Og det er faktisk bare kode som bryter datamaskinen eller noe. Så for å være defensiv om denne typen ting, må du aldri anta at brukerundersøkelser er en viss Mengden av tegn. For eksempel, når du gjorde stavekontroll, du ble fortalt at ordene var bare skal være 40 tegn lang maksimum. Og det var bra. Men hvis ikke, så ville du ha til sørg for å bare lese i 45 tegn om gangen. Ellers kan du overskrive buffer. Eventuelle spørsmål om det. Yeah. PUBLIKUM: Kan du bare snakke litt mer om disse? ANGELA LI: Beklager. Ja. PUBLIKUM: The mic er bare for video. Jeg vil prøve og prosjekt. Hei, folkens. Sup? Så la oss gå over et par ting i den CS50-biblioteket, som du har brukt hele semesteret, for det meste å få brukerundersøkelser. Som du vet, du inkluderer den CS50 biblioteket ved å bare gjøre CS50.h, som inneholder alle prototyper av funksjoner som du kan bruke, som GetString og GetInt, og GetFloat, et cetera. Og det er dette en linje i CS50 bibliotek som definerer en streng, som dere alle vet nå er bare en char *. Men la oss ta en titt på hvordan GetString fungerer. Dette er en svært forkortet versjon. Du kan trekke opp de CS50 bibliotek filer fra, tror jeg, manuals.CS50.net. Og du kan lese gjennom selve funksjonen. Men dette dekker noen av de viktigste delene. Derfor har vi laget noen buffer med en viss kapasitet. Og det vi gjør er at vi får en karakter gangen fra standard n. Det er der de bruker innganger Teksten i konsollen. Og så skal vi lese i en karakter så lenge det ikke er en ny linje og det er ikke slutt på fil, som er slutten av standard input. Og for hvert tegn som vi leser i, hvis det tegnet ender opp med å legge til antall tegn har vi lest i, og det er mer enn kapasiteten, så det vi gjør er vi bare endre størrelsen vår buffer, slik at den er dobbelt så lang. Så igjen, denne beskytte mot bufferen flow angrep, fordi du leser i et tegn om gangen. Og hvis vi på noe tidspunkt du leser i altfor mange, du bare utvide buffer. Du multipliserer det med to. Og da har du mer plass. Ellers, du bare legge et tegn til buffer. Og etter at du har lest i hele tegn, vil den krympe bufferen ned igjen til normal størrelse, legge til et null terminator, og så tilbake. Nå, la oss se på GetInt. Kan dere lese dette? Jeg kan zoome inn litt. Jeg vet ikke hvordan datamaskiner fungerer. Bare hyggelig. Jeg kan ikke zoome inn på riktig måte. Dette er virkelig hardt. Jeg beklager. La oss bare se på dette. Så hva GetInt gjør er det første leser i en snor fra GetString, som vi har implementert før. Og den viktigste delen å merke seg her er hvis denne delingen at det ender opp lesing er som faktisk ikke en streng, så vi bare tilbake INT_MAX til representerer svikt. Hvorfor får vi tilbake INT_MAX stedet negativ 1 eller 1? Noen ideer? PUBLIKUM: [uhørbart] negativ en mot en. ANGELA LI: Ja, akkurat. Så du er langt mer sannsynlig å bare ønsker å legge inn en eller negativ en når du blir bedt om for en n'te og hva n'te Maxes. Det er enorme. Du er sannsynligvis ikke kommer til å bruke den. Så dette er som et design beslutning om å sørg for at du ikke ved et uhell returnere en feil, eller du ikke kommer tilbake 1, som kan analyseres som et riktig svar. Så hvis en linje ikke eksisterer, vi tilbake INT-MAX. Ellers bruker vi sscanf, som er som scanf. Men den leser fra en streng. Og vi har denne formatert streng, som er% i% c. Og vi prøver og matche det med hva brukeren ga oss. Vi ønsker antall matchet ting til å være 1, hvilket betyr at vi bare virkelig ønsker å matche et heltall omgitt av kanskje hvit plass, kanskje ikke. I dette tilfellet, hvis du setter på noe som bar, ikke bar stemmer ikke i det hele tatt, fordi det må være et helt tall på start. Så sscan aldri slått 0. Så du ikke returnere den. Alternativt, hvis du setter på noe som 1, 2, 3, A, B, C, at fyrstikker begge det hele tallet, men også tegnet etter det. Så sscanf vil returnere 2, som er heller ikke ideelt. Du ønsker ikke en, to, tre, A, B, C for å være en gyldig int. Slik at også ikke fungerer. Men si at du putter i noe sånt som 50. Det vil matche% i, noe som betyr det vil bli lest inn n. Og nå, vil n inneholde nummer 50. Og så kan du returnere den. Ellers treffer du på Prøv på nytt. Og da er det bare går over igjen før du får en skikkelig input fra brukeren. Eventuelle spørsmål om det? PUBLIKUM: Så hvis du var å skrive ut verdien av GetInt på [uhørbart] ville det være bare heltall og max? ANGELA LI: Yeah. Så hvis du bruker GetInt, bør du anta at du ikke vil n'te max til være et gyldig input, fordi du kommer å anta at det var ille. PUBLIKUM: Hvis vi ikke hadde char c og noen satt i en, to, tre, Sam, ville det fortsatt arbeid for 1, 2, 3? ANGELA LI: Jeg tror det ville fungere. Men du ikke ønsker 123Sam til være en gyldig inngang av en bruker. Det er egentlig ikke en int. Så det virker ikke rettferdig å analysere det som en int. OK. I så fall, la oss flytte seg på internett. Så HTTP er ikke et språk. HTTP er bare sett av standarder for hvordan du sender ting fra kunder, det er deg, for å servere. Det er andre mennesker på nettet. Så HTTP står for Hypertext Overføringsprotokoll. Det er hjertet og sjelen av hele nettet. Den hyper del bare refererer til HTML. Overføringen er klienter som du vil sende forespørsler til servere, som gir svar. Og protokollen er bare, hvordan du forvente en server til å oppføre seg? Og hvordan har du tenkt å oppføre seg slik at du kan effektivisere denne kommunikasjonsprosessen? Så HTTP-forespørsler ligne mye på dette. GET er den type forespørsel. Dere har sett GET-forespørsler og POST forespørsler. At andre ting der, / me, det er bare URI eller nettadressen til der du vil gå i verten. Så denne forespørselen ber om det side, som www.facebook.com / meg. Og det er en GET-forespørsel. Og så dette HTTP/1.1, det er bare den versjonen av HTTP du bruker. Det er nesten alltid 1.1. Og så er det en gjeng av andre ting også. Du kan faktisk se disse hvis du åpne opp konsollen når du er surfer på nettet. Svarene ser noe mer som dette. Den øvre delen er, igjen, type HTTP du bruker etterfulgt av en statuskode. Så 200 OK er alt fungert. Her er innholdet. Innholdet kommer til å følge. Og så vil den fortelle deg hva slags av innhold og andre ting også. Statuskoder, er det noen viktigste som du bør vite. 200 OK er som alt er gyllen. Alt fungerer. 403 Forbidden. Dette har du sikkert sett hvis du har glemt chmod noe ordentlig. Det betyr at du ikke trenger de rette tillatelser til tilgang til den på serveren. Det er som, nei, du kan ikke se det. 404 betyr at ting ikke eksisterer. Ikke funnet. Du har sikkert sett at mye. 500 Internal Server Error er vanligvis som noe gikk galt på siden til serveren. Så når du var å implementere pset7, hvis du hadde PHP feil, kunne du faktisk gå til siden og se en hel haug av PHP-feil ting. Men det skjer normalt ikke, fordi nettsteder ikke virkelig ønsker å fortelle deg hvorfor deres nettsted er brutt. De vil sannsynligvis bare gå tilbake et 500 Internal Server Error. Og så er det 418 jeg er en tekanne. Det er en hel historie om hvorfor det er en ting. Men du kan lese om det på din egen tid. Det er en hel haug med andre statuskoder også. Men disse er de du bør vite. Så la oss snakke om HTML. HTML, husk, er ikke en programmeringsspråk. Det er et kodespråk. Det betyr at den beskriver innholdet. Den forteller deg hva et HTML-dokument ser liker eller ikke hvordan den ser ut men hvordan den er strukturert. Så det definerer en struktur og semantikk av nettsider. Det er som, dette er et avsnitt. Dette er en sortert liste. Dette er som en del av min side. Her er tittelen. Det gjør sånt. Det trenger ikke å style noe av det, fordi det er hva du gjør i CSS. Og det ser ut som en serie av nestet tags. Så å bruke et eksempel på en veldig enkel HTML-side, har du DOCTYPE erklæring der oppe. Dette DOCTYPE-deklarasjonen er si, vi bruker HTML5. Da har du store HTML-koden. Den inneholder et hode og et legeme. Inne i hodet, har du tittelen. Det er det som går i tittelen feltet i nettleseren din. Vi har en link tag som knytter i et eksternt stilark. Og så har vi et skript som trekker fra en ekstern Java også. Og så inne i kroppen vår er faktisk hva som blir vist på siden. Vi har fått et avsnitt og deretter en image inne nevnte punkt. Dette er et bilde av kattunger. Legg merke til at bilde tag lukker seg. Så i stedet for å åpne med et bilde og deretter gjøre en annen / bilde, du bare ha denne lille skråstrek her, som lukker den. Og bildekoden har også denne tasten verdi attributt kalt alt. Det er alternativ tekst som skjer når du holder pekeren over den. De fleste HTML-elementer har noen nøkkelverdi ting som du kan gi det, diverse tilpasning. Yeah. PUBLIKUM: [uhørbart]. ANGELA LI: Vel, så det er en egenskap av koden. Så hvis du skulle bruke jQuery, kunne du velger image.getAttribute. Og så kan du søke etter få alt-attributtet. Og det vil gi deg kattunger. Hvis du husker skjemaer i HTML, inngang elementer vil ha navne attributter. Og det er det PHP bruker til å sende forespørsler når et skjema som sendes inn. PUBLIKUM: Visste du nevne noe om hvordan hvis du bruker kittens.jpg eller noe som har den savnede filmapper eller andre filer? ANGELA LI: Ja. Så dette er det som kalles en relativ banen, fordi jeg ikke gi du hele banen. Dette er som når du er i C hvis du gjør fopen noen fil, hvis du fopen hi.txt, at hi.txt er forventet å være i samme katalogen, med mindre du gir den en mer kompleks bane. PUBLIKUM: Så du kunne spesifisere hvilken mappe [uhørbart]? ANGELA LI: Yeah. Og du kan slå opp hvordan du gjør det. Men hvis jeg ønsket å få kittens.jpg ut av den overordnede katalogen, ville jeg gjøre .. / Kittens.jpg. Yeah. Unnskyld. Yeah. Oh man, jeg glemte spørsmålet. Hva var spørsmålet? Oh, var spørsmålet er, kittens.jpg forventes å være i samme katalog? Og i dette tilfellet er det. Men du kan også gi den en bestemt bane slik at den ikke behøver å være. Bra? CSS. Så CSS, som HTML, er ikke et programmeringsspråk. CSS er bare en serie med styling regler. Det står for Cascading Style Sheets. Og du bruke det sammen med HTML å style sider. Så er det tre måter du kan ta den med. En måte du kan gjøre det er i hodet del av HTML, kan du bare åpne en stil tag og så holde noen CSS-regler i det. Det er ganske OK. Yeah. PUBLIKUM: Kan du putte dem stil koder i mellom, la oss si, kropp og / body. Og så ville du være styling bare i kroppen. ANGELA LI: Du kunne. Det vil fungere. Men du bør ikke, fordi styling er form av metadata som bør gå i leder av dokumentet. Kroppen skal egentlig bare inneholde hva som faktisk kommer til å møt opp på siden din. PUBLIKUM: Så du vil sette stil i hodet ditt til å style den hel nettside, ikke sant? ANGELA LI: Yeah. Så setter stil her, disse CSS-regler vil gjelde for hele siden basert på sine velgere. Så bedre måte å gjøre det på er i stedet av å ha en stil tag i hodet ditt, du har denne koblingen til en ekstern stil ark som jeg viste deg i forrige eksempel. Hva dette er den prøver og finner filen style.css og deretter trekker det i og anvender det som den stiler for siden. Og din style.css ville bare se slik ut. Det ville bare være en haug med CSS. Og til slutt, det er en annen måte du kan inkludere CSS, som du virkelig bør ikke noensinne gjøre. Det er samtalen inline styling. Og så noen HTML-element kan også ta en stil attributt. Og så i den stilen attributt, du kan gi det CSS-regler. Så i dette tilfellet, hva div jeg er definere akkurat her, det kommer til å har en svart bakgrunn og en hvit tekstfarge. Men du bør ikke gjøre dette, fordi det dette ikke er det setter din styling inni HTML. Og jeg vet at vi har snakket om HTML er struktur og CSS er stil. Hvis du gjør dette, blander det dem sammen. Og det er ikke veldig rent. Så ikke gjør det. Ved hjelp av et eksempel på CSS, der oppe, vi bare velg kroppen av HTML dokumentar. Og vi er like, alt er kommer til å være Comic Sans. Jeg tror heller ikke anbefale det. Men du kan gjøre det. Den andre regelen akkurat her, det kommer å velge element på side med ID viktigste. Så uansett hva HTML-element, sa jeg ID = Hoved, kommer jeg til å gi den en 20-pixel margin og justere alt, all tekst, til midten. Det siste velger av CSS-klasse. Så noe element på siden som jeg ga en seksjon klasse, kommer jeg til å gjøre det en bakgrunnsfarge av lys blå. Jepp. Det er alt jeg fikk. Spørsmål? PUBLIKUM: Hva gjør hashtag før hoved gjøre? ANGELA LI: Spørsmålet er, hva gjør hashtag før hoved do? I dette tilfellet, hash i CSS betyr Valg etter ID. Så hvis jeg hadde noen HTML-element, som Divid = viktigste, dette CSS-regel velger tingen med ID viktigste. Og på samme måte, for foran delen er å velge etter CSS-klasse eller Velg etter HTML klasse. PUBLIKUM: Hvorfor er det en har før 6 i bakgrunnsfarge? ANGELA LI: Yeah. Så spørsmålet er, hvorfor er det en hash før 6? Dette er annerledes enn det hasj. Dette betyr at du gir heksadesimale farge. Så hex farger, dette bare representerer en farge. Og du husker RGB triples når du gjorde forensics PSett? Dette er lik. De to første sifrene representerer hvor mye rødt er i fargen. Den andre to representerer hvor mye grønt. Og den tredje representerer hvor mye blått. Og hasj er dette kommer for å representere en farge. Så alt fra 0, 0, 0, 0, 0, 0 opp til F, F, F, F, F, F er gyldig. Det er noen gyldig farge som kan vises av nettleseren din. Spørsmål? PUBLIKUM: Hva er forskjellen mellom ved hjelp av ID og etter klasse? ANGELA LI: Spørsmålet er hva som er forskjellen ved hjelp av ID og klasse? Du kan bare ha ett element i en HTML-dokument som har en gitt ID. Så bare én ting på min side er lov til å ha ID viktigste. Så du bruker det for dette er overskriften. Dette er navigeringen. Dette er bunnteksten. Klassene er annerledes, fordi du kan gjelder klassene til så mange HTML-elementer som du ønsker. Så for eksempel, gjorde jeg klasse delen, fordi det er sannsynligvis mer enn én seksjon på siden min. Du er bare lov til å ha så mange elementer på siden med det samme klasse, men bare en med en bestemt ID. PUBLIKUM: Så prikk representerer klassen? ANGELA LI: Yeah. En prikk representerer en klasse. Cool. Det er alt jeg har fått, folkens. Takk. [APPLAUSE] ZAMYLA CHAN: Hei, alle sammen. Jeg er Zamyla. Jeg kommer til å bli dekket PHP, MVC og SQL dag. Mye av materialet som jeg vil være dekker kommer til å være ganske mye rett ut av pset7. OK. Så hva er PHP? PHP står for PHP Hypertext Preprosessor. Slik er det i seg selv er en rekursiv navn, noe som er ganske kult. PHP er et server-side skriptspråk, og det gir backend og de logiske fundamentet av våre nettsider. Så Angela snakket mye om HTML og CSS som vil gjøre konstruksjonen på nettsiden. Men hva hvis du ønsker å endre det innhold dynamisk eller om det varierer basert på brukerens eller visse vilkår? Det er der PHP leveres i. Nå, typisk, PHP kan ta noen mindre linjer for å gjennomføre det samme i C. Det er fordi PHP håndterer minne management for programmereren, i motsetning til oss måtte malloc gratis, sånne ting. Men siden PHP er en fortolkende language, typisk kan det utføre litt saktere enn C, noe er et kompilert språk. Fordi vi flytter programmering språk, la oss se på hvordan syntaks vil variere. La oss være veldig forsiktig så du ikke bli forvirret med dette. Så med PHP syntaks, enten du er Inkludering PHP innsiden av en HTML fil eller innen en. php-fil selv, du må omslutte koden i den åpne PHP og de lukkede PHP koder som følgende måte, i likhet med på skjermen. Variabler i PHP. Hver enkelt variabel vil starte med $-tegnet etterfulgt av navnet på variabelen. Nå er variabler i PHP løst skrevet, noe som betyr at du ikke trenger for å indikere hva datatypen er når du erklære det. Men dette betyr ikke at de har ikke noen typer på alle. Så hvis jeg deklarere en variabel og bare satt det lik 1, og da jeg erklærer en annen variabel, settes det lik "1" og deretter en annen 1.0, vel, avhengig av typen av likhet operatører bruker jeg, hvis jeg ønsker å sammenligne på tvers av alle typer, og deretter de vil være lik. Men hvis jeg vil være sikker på at typer er like, kan PHP fortsatt gjøre at selv om vi ikke viser hvilken type det er når vi først gjøre filen. Nå, i PHP, selv om vi er bytter over fra programmering språk fra C, vi har fortsatt vår trofaste hvis tilstand, akkurat som dette. Vi har fortsatt våre mens loops, bare som dette, hvor du putter i din tilstand og deretter delen av løkken. Og så har vi også vår for loop, som vanligvis ser slik ut. Så hvis jeg ønsket å iterere over alle ni psets og sende og ringe en funksjon submitPset, så jeg kan gjøre det her, som dere har alt gjøres ved dette punktet. Gratulerer, forresten. For kameraet, folk sa takk. Nå, hvis du ikke ønsker å bare bruke denne for loop, deretter PHP faktisk også har ting kalt foreach løkker. Så hvis jeg hadde en rekke heltall, 0 gjennom åtte, lagret i matrisen psets, så jeg kunne ha en foreach loop som gjentas mer enn hvert nummer i psets. Og så jeg kunne ringe det samme fungere åtte ganger, akkurat som jeg gjorde før. Så dette for hver sløyfe er fint, fordi du trenger ikke å hvis du ikke vet den eksakte lengden på tabellen som du har, så bruker dette foreach løkke vil ta seg av det for deg. Så jeg gjorde psets som en matrise. La oss se på det. Arrays i PHP er vanligvis den samme som de som vi har hatt i C, der du kan erklære en matrise. Og her, kan jeg erklære en tom array og deretter bygge opp dynamisk ved hjelp indekser som heltall. Så indeks 0, kommer jeg til å lagre et heltall heter en. At indeksen 1 på listen min, jeg kommer for å lagre verdien to. Og på den tredje indeksen, men den andre rekke, kommer jeg til å lagre nummeret 12. Nå er dette greit i at fungerer det fungerer godt. Men sier det er viktig for meg hva hver indeks holder. For meg, indeks 0 betyr hvor mange katter jeg har. Og indeksen 1 betyr hvor mange ugler jeg har. Og den neste betyr hvor mange hunder. Vel, da er det å spesifisere det, i stedet for å måtte huske 0 vedrører katter og en til ugler, kan jeg bruke assosiative arrays, noe som betyr at i stedet for heltall som mine indekser, Jeg kan faktisk bruke strenger. Så dette er ganske nyttig. Og du har i utgangspunktet bare erstattet heltallene med strenger. Og der har du en assosiativ array. Yeah. PUBLIKUM: Er det en grunn til at det er en understrek for den andre del, fordi min liste har matrisen. ZAMYLA CHAN: Spørsmålet var, er det en grunn til at det er en strek mellom min og liste? Nei. Det er bare hvordan jeg navngi min variabel. PUBLIKUM: På den første linje, er det ett ord. ZAMYLA CHAN: Min unnskyldninger. Jeg skal fikse det. Yeah. De bør være den samme variabelnavn. God fangst. OK. Så la oss gå videre til strengen sammensetning. Hvis jeg ønsket å ta to strenger, Da kan jeg sette sammen dem med prikken operatør. Så hvis jeg har Milo som et fornavn og banan som et etternavn, deretter lenke sammen med prikken operatør og deretter sette en plass i mellom vil gjøre en streng som inneholder Milo Banana, som jeg kan deretter echo eller, heller, skrive ut. Snakker av ekko, la oss snakke om noen nyttige - oops. Jeg beklager. Et par nyttige PHP funksjoner. Så vi har - tekniske problemer. Ett sekund. Jeg sendte det. PowerPoint-problemer. Og vi er tilbake med PHP funksjoner. Og vi er tilbake med PHP funksjoner. Så vi har den krever funksjon, hvor hvis du passerer i en fil, her er bare et eksempel på en fil som Jeg kan passere i. Så det vil omfatte PHP-koden fra den filen som jeg indikerer. Og det vil evaluere det i. Så vi har også ekko, som er en parallell til printf. Exit er en parallell til stykker, som kommer ut av blokken med kode som du er i. Og så tomme sjekker om en gitt variable er som null eller null eller hva er likestilt med å være tom. Yeah. PUBLIKUM: For streng sammensetning dot operatør ett, i PHP, er at samme som i Java hvor den bruker punktum for sammensetning betyr pluss? Så for fullt navn, kunne du ha dollar signere første + og deretter + vare? ZAMYLA CHAN: Yeah. Så spørsmålet var om i PHP vi kan bruke den samme streng sammensetning som i Java med de positive. Og Josef vil komme inn som senere. Jeg tror han har et lysbilde på det. Egentlig er det annerledes. Så i Javascript, må du bruke pluss å sette sammen strenger. Og i PHP, må du bruke dot operatør. Så de er forskjellige. OK. Så nå som vi har dekket alle Dette PHP, hvor kommer det virkelig komme til nytte? Vel, det kommer godt med når vi kan kombinere det med vår HTML. Så vår PHP vil gi oss kraft til å endre en sidens HTML-innhold før sin lasting. Så basert på ulike forhold, vanligvis den spesifikke brukeren som er logget inn, kan vi vise forskjellig informasjon. Linda, hadde du et spørsmål? PUBLIKUM: Kan du sette sammen et heltall også? ZAMYLA CHAN: Ja, det kan du. Så spørsmålet var om du kan sette sammen heltall eller annen variable.s nå, kan vi gå videre til MVC, som er et paradigme som vi brukte i pset7 og en rekke web-designere bruker for organisere koden i filene på deres hjemmeside. M står for Model. Og i utgangspunktet, vil modellfiler avtale med samhandling med databasen. Vis filer, de forholder seg til estetikk på nettsiden. Og kontrolleren håndterer brukerforespørsler, analyserer data, foretar annen logikk. I pset7, vi kombinerte modellen og kontrolleren. Og vi bare kalte dem kontrollere og sette dem i offentlig katalog. Og vise filer, bruker vi dem som malene i Maler-katalogen. Så dette diagrammet representerer her også at samme type divisjon med modellen og kontrolleren i purpur her til venstre og visningen til høyre. Så dette er en skjematisk at noen av dere kanskje har sett på Arbeidstid eller diagrammer som vi ble tegning som du var å finne ut din PSett. Så her, i en gitt kontroller, en modell kontrolleren, har vi funksjoner som er knyttet til det å spørre SQL database, utfører PHP logikk. Kanskje du ville slå opp en aksje i Yahoo! Finance. Eller kanskje, ville du bare sjekke til se om en bruker hadde sendt inn en danne allerede før du har besøkt siden din. Og så ville gjengi en form over her. Etter at formen hadde blitt sendt av brukeren, handlingen som var spesifisert i form HTML tag skulle tilsi siden at det returnerer disse dataene til. Så all denne informasjonen ville være sendt tilbake til kontrolleren. Da ville du sannsynligvis gjøre litt mer logikk på det og kanskje utføre noen flere spørringer i SQL-databasen og så, til slutt, komme opp med et pent pakket sett med informasjon som du ville gjort passere i inn i noen annen mal som vises denne informasjonen. Nå, hvordan gjør vi faktisk pakke at informasjonen? Vel, vi har en funksjon som heter Render som var i functions.php filen i pset7, hvor du passerer i navnet en fil, navnet på en mal. Og så er du også passere i en assosiativ array. Og slik at assosiativ array representerer den annen informasjon som du ønsker å passere i. Nå, hva kommer til å være konstant i disse eksemplene er at tastene eller, heller, nøklene til assosiative matriser, de er hva som kommer til å være forventes å være konstant ved malen fordi den vet det er behov for noe som kalles melding eller kalt navn. Og så ting på høyre, faktiske verdier, så i dette tilfellet, er hvem en god gutt og Milo, er de som skal å være de verdiene som er i endring at regulatoren endres hver gang eller basert på en bestemt tilstand og vil passere det i. Så her i maler, ser vi at vi bruker HTML spesialtegn, som bare i utgangspunktet betyr at vi ønsker for å få den peer strengen at bruker satt i. Og vi ønsker å erstatte melding der inne. Så når vi faktisk se filen, den spesifikke Informasjonen er gått i. Legg merke til at nøkkelen hvordan gjengi verk er at nøklene til assosiative matriser, de blir variabel navnene her. Og så verdiene til den aktuelle tasten i assosiativ array deretter blir verdien av variabelen. Nå, la oss gå videre til SQL. Det står for Structured Spørrespråk. Og så dette er bare et programmerings språk designet for å administrere databaser. Og det kom godt med for oss i vår pset7 finans nettside. I hovedsak er det bare en enkel måte å spore og administrere objekter og tabeller og koble dem til hverandre. Nå, tenk på din SQL database utgangspunktet som en Excel-fil, kanskje, med flere faner ark. Så du kan ha flere tabeller, kanskje, som er knyttet til hverandre. Og mye som Excel, har vi mye av funksjonaliteten som vi ønsker. For eksempel kan vi velge visse rader. Vi kan sette inn informasjon. Vi kan oppdatere rader. Og vi kan også slette ting. SQL velg verk ved å velge rader eller en rad med spesifiserte kolonner fra en database som samsvarer med en viss kriterier som du angir. Så over her når jeg ser velge * fra veivisere hvor huset = Ravenclaw, deretter Jeg velger *, noe som betyr at jeg er velge hver enkelt kolonne i at rad fra veivisere tabellen, men bare hvis huset kolonnen tilsvarer Ravenclaw. Nå, dette er ren eller SQL. Så hvis jeg gikk inn i phpMyAdmin, som er den spesielle måten som vi bruker til å administrere våre SQL databaser, så jeg kunne sette inn det inn i phpmyadmin nettstedet. Og det ville utføre. Men vi faktisk ønsker å gjøre at på PHP side. Så hvordan gjør vi det? Vel, vi bruker spørringen funksjon, som utgangspunktet utfører som SQL-spørring. Ved hjelp? som plassholder, kan vi passere i visse verdier til vår streng som vi ønsker å erstatte. Så kanskje jeg lagring annerledes verdier i curr_house, som representerer den nåværende huset at jeg går gjennom. Så jeg kan gi denne inn som en plassholder med spørsmålstegn. Og så skal jeg i utgangspunktet utføre samme som jeg gjorde før, med unntak av nå er jeg i PHP. Og søket vil returnere en assosiativ array. Og jeg kommer til å lagre den i rader. Nå kan søket alltid mislykkes. Kanskje SQL-spørringen kunne ikke utføre fordi tabellen ikke eksisterte. Eller kanskje, gjorde kolonnen ikke eksisterer. Noe gikk galt. Vel, i så fall, vil du ønsker å gjøre sikker på at du sjekker om den spørring ga falsk. Og det er ved å bruke trippel lik operasjon der. Og så beklager jeg, som er en annen CS50-funksjon, som går i en melding. Og hvis du ser inn beklager, alt det egentlig gjør er å gjengi apology.php. Yeah. PUBLIKUM: Kan du forklare hva som star does mellom velger og fra? ZAMYLA CHAN: Ja, absolutt. Så stjernen i mellom velger og fra betyr at jeg vil velge hele hel rad fra mitt bord. Jeg kunne ha indikert velger navnet, året, huset. Og jeg ville bare få de tre kolonner i mitt bord. Men hvis jeg sier velge *, så skal jeg får alt i denne kolonnen. Så jeg kommer til å gå deg i ryggen først. PUBLIKUM: Så dette er fortsatt i SQL, ikke sant? Er dette spørring eller er dette PHP? ZAMYLA CHAN: Vi er i en spørring. Så dette er i PHP. Så ved hjelp av PHP-funksjonen spørring, vi utfører en SQL-spørring. PUBLIKUM: Er det noe i SQL store og små bokstaver, som velger eller veivisere eller hus? ZAMYLA CHAN: Er det noe i SQL store og små bokstaver? Jeg tror det, ja. Jeg tror at SELECT og FROM Og hvor store og små bokstaver. Nei? ROB BOWDEN: Så, er det motsatt. Kolonnenavnene og tabellen betyr, alle av dem er store og små bokstaver. Men noen av MySQL stikkord, som SELECT, FROM og WHERE, de er ikke store og små bokstaver. OK. Så det motsatte av hva jeg sa. Så alle de MySQL søkeord - velger, fra, hvor - de skiller ikke mellom store og små bokstaver. Men alt annet er. OK. Du i front. PUBLIKUM: Hvis jeg har $ rader i form av mer enn én rad, betyr det er bare blir en assosiativ array? ZAMYLA CHAN: Så spørsmålet var om rader har mer enn én rad i det, betyr det blitt en assosiativ array? Så det er en rekke assosiativ arrays allerede. Så selv om det er bare én rad returnert, så du må gå til indeks 0 av dette resultatet. Og da bør du ha den første raden. Ja, Belinda? PUBLIKUM: Når du bruker ===, er dette det eneste tilfellet? Eller er det andre? ZAMYLA CHAN: Så i dette tilfellet === er en sammenligning på tvers typer. Unnskyld. === Er en sammenligning som sammenligner typer. Og da == sammenligner på tvers av alle typer. PUBLIKUM: Kan du forklare hva radene er i denne situasjonen? Er det ro av data? ZAMYLA CHAN: I neste lysbilde, jeg er kommer til å forklare hva rader er. Så hvis du ikke har noe imot å holde off på det. Og så deg i ryggen? PUBLIKUM: For funksjoner som søk, gjengi og beklager [uhørbart]? ZAMYLA CHAN: Spørsmålet var om disse funksjonene - spørring, beklager, og gjengi - er felles på tvers av PHP. Disse er de som CS50 skrev for pset7. Og Jay? PUBLIKUM: Når du trenger å si $ _SESSION, Er at bare for-IDer? Eller kunne du ha sagt at her? ZAMYLA CHAN: Så spørsmålet var, da vi bruke $ _SESSION, som var en spesifikk global variabel som vi bruker. Her denne variabelen kommer til å være lokale til vår funksjon. Så vi bare erklære en ny variabel. PUBLIKUM: Hvordan er beklager implementert? ZAMYLA CHAN: Spørsmålet var, hvordan er be om unnskyldning implementert? Og jeg tror dette er faktisk en ganske god praksis for dere å gå inn den functions.php seksjonen og se på beklager og se hvordan du kunne ha gjort det selv. Så jeg kan la det til deg, men bare si at hvis du ser på beklager, så tar det budskapet om at du sendt beklager, og da er det gjengir den meldingen. Eventuelle flere spørsmål? Jeg elsker spørsmål. Så holde dem kommer. PUBLIKUM: [uhørbart] echo eller print det? ZAMYLA CHAN: Spørsmålet var, kunne vi ikke bare har satt echo eller print der. Så det ville ha gjort noe litt annerledes. Det ville ha trykt spørring mislyktes i det - vel, akkurat nå, er vi faktisk i vår controller. Så vi ikke egentlig har HTML satt opp her. Apologize ved å gjengi apologize.php faktisk sender deg til apology.php. OK. Så nå, la oss gå på å ta opp spørsmål fra tidligere om hva virkelig er rader. Vel, søket vil returnere en matrise med rader. Og hver rad er representert av en assosiativ array. Så hvis jeg har henrettet noen SQL-spørring og Jeg har lagret resultatet i rader, deretter ved hjelp av en foreach sløyfe, så matrisen Navnet er det første man der - rader. Og så kommer jeg til å ringe hver rad i det $ rad. Så gjentar over det, jeg kan da tilgang til gitt rad navn kolonnen, år kolonne og huset kolonnen. Legg merke til at jeg ikke ville ha vært i stand til å gjøre dette med rader, fordi rader index Navnet finnes ikke. Rader er bare et utvalg av assosiative arrays. Så du har to nivåer der. Når du har rekken av rader, du har til å komme inn i det. Og så kan du få tilgang til kolonnene. Gjorde det det klart? Ja, foran? PUBLIKUM: [uhørbart] åpne braketter for [uhørbart]? ZAMYLA CHAN: Unnskyld meg? PUBLIKUM: De åpne parentes. ZAMYLA CHAN: Disse her? Det er å tillate meg å inkludere den variabelen. Yeah. PUBLIKUM: Når du skriver ut, er du utskrift til HTML-koden? ZAMYLA CHAN: Ja. Når jeg skriver ut, er dette her inne malen min nå, så mitt syn på MVC-metoden. Så jeg skriver inn i HTML. PUBLIKUM: Så hvis vi gikk inn utvikleren verktøy etter å ha kjørt dette, vi kunne som faktisk i koden? ZAMYLA CHAN: Det er en stor spørsmål, ja. Så hvis du gikk inn i utviklerverktøy i Firefox ved hjelp av Firebug eller Chrome, så ja, kan du se spesifikk HTML. Så det ville ikke vise $ row ["navn"]. Det ville vise hvilken Navnet er i samme rad. PUBLIKUM: Bare et generelt problem, hva er tr og td definert som? Hvorfor skulle vi [uhørbart]? ZAMYLA CHAN: Tabell rad st, Tabellen deretter td kolonne. OK. PUBLIKUM: Ja, det er tabelldata. ZAMYLA CHAN: Tabell data. Yeah. PUBLIKUM: Det er en rad der raden blir behandlet som en kolonne? ZAMYLA CHAN: Beklager. Kan du gjenta det? PUBLIKUM: Hvordan ville du visualisere rader? ZAMYLA CHAN: Hvordan vil du visualisere rader i hva slags måte? Snakker du om disse rader her eller tr rader? PUBLIKUM: Radene. ZAMYLA CHAN: Disse radene her? Jeg vil visualisere dette som Jeg utføre mine søk. Og det sier, OK, jeg har enten 0 til n Mengden av rader som oppfyller kriteriene at du hadde spurt. Så jeg har noen flere rader. Så rader, de $ rader, butikker hver en av de radene i en matrise. Så selv om det er bare en av dem, er det fortsatt en rekke rader som oppfyller det. Derfor, for eksempel, er denne samme måte som da du hentet cache fra brukerne. Og de kriteriene var det der ID er lik økt-ID. Det egentlig bare er én rad som kan matche det. Men fortsatt rader nettopp returnert én rad. Så du må gå til rader, indeks 0, indeks cache til faktisk komme til din cache. PUBLIKUM: Er utskriftsfunksjonen i ekko det samme? ZAMYLA CHAN: Ja. Ja. Skriv ut et ekko av det samme. PUBLIKUM: Er foreach loop eneste måten å indeksere i rader? ZAMYLA CHAN: Er en foreach løkke den eneste måten du kan iterere gjennom rader? Nei. Du kan også bruke en for loop, forut at du vet lengden array raden tallet. PUBLIKUM: Kan du få tilgang til det ved hjelp av en rad som [uhørbart]? ZAMYLA CHAN: Så du ikke får tilgang til den bare å bruke rad hvis du ikke har en foreach løkke forutsatt at du ikke har erklært rad. Ja. Ja, i den hvite. PUBLIKUM: Så hva gjør tr og td gjøre? ZAMYLA CHAN: Så tr og td er HTML-koder. tr indikerer begynnelsen av en tabell rad. Og hver td indikerer en ny tabell datakolonne. PUBLIKUM: For en visuell av hva en rad er like, bare tenk SQL, hvordan de har en rad. [Uhørbart]. ZAMYLA CHAN: Yeah. Det er et stort poeng. Du kan visualisere rader som bare som i en Excel-tabell, bare en liste av radene. OK. OK. Så nå som vi har gått over velger, hvis det er ikke noen flere spørsmål, vi vil gå over på innsatsen. Så hvis jeg ønsket å sette inn noen bord og setter visse kolonne verdier, kunne jeg sette meg selv inn Ravenclaw i år 7. Men noen ganger kan det være duplikat verdier, som vi så i pset7 når vi ble oppdaterer vår portefølje. Så i dette tilfellet, vi ønsker å bruke på Duplikatnøkkel UPDATE, slik at vi ikke gjør det lagre flere rader med samme verdsetter, men heller oppdatere den. Så vi har faktisk oppdatering, som ikke er en innsats. Det er bare en oppdatering hvor du oppdaterer i et bestemt bord med en gitt kriterier og så, til slutt, slette, som gjør en veldig lignende ting. PUBLIKUM: Kan du kort gå over like nøkler? ZAMYLA CHAN: Yeah. I hovedsak her, har jeg INSERT INTO Gringotts, er, gallioner, disse verdiene. Men ID, formodentlig, er en unik nøkkel verdien satt opp i MySQL tabellen. Så hvis jeg allerede har som ID satt opp, så jeg kan ikke sette inn en ny rad. Så hvis det ikke finnes allerede, da må jeg oppdatere den. I midten på hvitt. PUBLIKUM: Så sette inn, oppdatere, slette, og velger, er de alle tilgjengelige lokalt [uhørbart]? ZAMYLA CHAN: Så sette inn, oppdatere, slette og velge er alle SQL-spørringer. Så når du bruker SQL, har du de som er tilgjengelige. PUBLIKUM: Tilbake til fortiden quizer - det var et spørsmål som omhandlet hvis du hadde et bord og ønsket å sette inn testresultater i en, og du setter inn navnet ditt, så det vil ikke la deg [Uhørbart] din venns test score. Hvordan ville du gjøre det med innlegg? ZAMYLA CHAN: Så spørsmålet var om en tidligere mid-term spørsmål. Jeg er ikke klar over hvilke en det er akkurat nå. Så kanskje etterpå, hvis du ønsker å komme opp og vise meg, så jeg kan sikkert gi deg tips. Men snakker om å sette inn ting, som ta noens poengsum når du bør ikke, la oss snakke om SQL-injeksjon angrep. Så en SQL-injeksjon angrep er i hovedsak der noen tar fordel av lav sikkerhet av måte som du tar i data. Så her, akkurat som i CS50 finans, når vi er logget inn, kan vi gå inn i en brukernavn i innloggingsskjemaet, den første tekstboksen, og deretter inn i et passord. Kanskje vår PHP-kode kan se noe sånt som dette, der $ username er den post-data brukernavn og passord er post-data passord. Og da har vi bare utføre søket vårt, sier, OK, vel, er vår spørring skal velg fra våre brukere, hvor brukernavnet er en som de sendte inn. Og passordet er passordet, noe som betyr at passordene matche. Nå, hva om stedet for faktisk sende en faktisk passord, som 12345 og gjette på spiss som sier passord og prøver å hacke deres konto, hva om stedet de sendte inn dette. De kunne skrive i kanskje gjette på et passord. Og så ville de avslutte sitat deretter inn i eller 1 = 1. Det ville tempoet direkte inn i SQL spørring for å se omtrent slik ut. Velg fra brukere der brukernavn = utstikkerne og passord tilsvarer lilje eller 1 = 1. Så enten passordet har å være korrekt eller 1 = 1, som alltid er sann. Så i dette tilfellet, i utgangspunktet, kan en bruker dra nytte av dette og bare logge seg inn og hack noens konto. Så det er derfor vi ønsker å unngå noen som har å gjøre dette. Men heldigvis, spørringen funksjon ved passerer i plassholderne vil ta vare på dette for deg. Også, vil du vanligvis aldri vil å faktisk sende passordene selv. Det er derfor vi hashet eller kryptert dem i CS50 finans. PUBLIKUM: Det siste quiz snakket om MySQL rømnings strenger. Har vi trenger å bekymre deg det? ZAMYLA CHAN: Det er et godt spørsmål. MySQL rømnings strenger er definitivt en Funksjonen som ble brukt i vår spørring. Men definitivt se nærmere på det. Jeg vil si det er fritt vilt å vite at du hadde behov for å kalle det fungere på en streng. Ja, Belinda? PUBLIKUM: Hvordan vet du når det er apostrof eller doble anførselstegn? Og også, jeg føler i forelesning deg nevnte noe om ikke å ha den [uhørbart] eller noe eller andre singel sitat på slutten. Jeg tror han påpekte i foredraget at du skal liksom ha apostrof 1 og deretter ikke ha apostrofer eller noe. PUBLIKUM: [uhørbart]. PUBLIKUM: Saken er den siste singel sitat i der i den andre boksen ikke skal være der. [Uhørbart] Fordi når du tar den siste singel sitere ut og matche disse for innhold hvor passordet er, hvis du har den spørring, er det et enkelt sitat på slutten allerede. Du ønsker å bruke den eneste sitat som den ene som vender mot ett [Uhørbart]. Så hva er egentlig i denne teksten boksen skal ikke ha det. ZAMYLA CHAN: Jeg kommer til å endre det. OK. Hvis det ikke er noen spørsmål, så skal jeg gi det over til Joseph å snakke om Javascript, et cetera. [APPLAUSE] JOSEPH ONG: Så vi kjører litt bak. Så hvis du har til å forlate, det er OK. Men vi ber om at du holder hodet ned hvis du er i midten, slik at du ikke blokkerer kameraet, og du bruker baksiden exit hvis du må. Jeg er Joseph forresten. Hei. Test, test. Dan, er det bra? Cool. Så videoen vil også bli lagt ut online for de som må gå nå. Awkward. OK. Så quiz gjennomgang. Dette er en katt. Nå, Javascript, som er kanskje ikke som aww for noen av dere. OK. Så det er først, husker fra Zamyla. Husk at PHP er kjøres på serveren. Og mange ganger, skrev dere sløyfer i PHP for å skrive ut HTML, ikke sant? Så når denne koden utfører, at HTML-utgang som du skriver ut blir sendt til brukeren. Og når det skjer, ikke mer PHP kan kjøres, med mindre du har lastet inn siden, av Kurset, som reexecutes PHP. Men når du skriver ut som HTML, du kan ikke gå hvor som helst. Slik at HTML er sendt over til brukeren, som er den nettleseren over her, hvor Milo bruker datamaskinen. Og så godt, er det flere ting når vi sender HTML til brukeren. Noen ganger ønsker vi å gjøre noe sånt når du klikker på noe, vi vil ha varsle bokser å dukke opp, de slags interaksjoner, som når du trykker på nøkkel, når du klikker noe på side, jeg vil ha noe å skje. Vel, kan du ikke kjøre på nytt PHP kode en gang at HTML er satt. Så hvordan gjør du dette? Vi introduserer et nytt språk kalt Javascript, som kjører i nettleseren som lar deg gjøre ting til HTML når du har mottatt dem fra serveren. Og dette er grunnen til at vi kaller det en klient-side programmeringsspråk. Det fungerer på din datamaskin - klienten. Eventuelle spørsmål om det så langt? At paradigmet er fornuftig for folk? OK. Bra. OK. Så den første tingen å merke seg er Javascript er ikke PHP. De har noen annen syntaks, som vi vil gå inn. Og de har svært ulike bruksområder. Javascript, igjen, for din leseren, for klienten. Server kjører et sted på andres datamaskinen som sender informasjon til deg, korrigere? Så hvis vi be deg om å skrive PHP-kode på en eksamen spørsmål, ikke skriv Javascript og vice versa. Du vil bare miste poeng, og det vil ikke være riktig. Så la oss få inn noen syntaks forskjeller - Java til venstre og PHP på høyre side. Det første du vil legge merke til med Java, erklærer vi variabler med VaR søkeord - V-A-R. PHP brukes dollartegn, som Zamyla diskutert tidligere. Hvis du ønsker å erklære en assosiativ array, ser vi det kjente syntaks på høyre side med PHP. På venstre side, i stedet du bruker krøllparenteser. Og da nøklene er på venstre. Da har du et kolon. Og så har du de verdier som du ønsker. Så dette er hvordan du vil gjøre det i PHP på høyre side med det annet linje som starter på Milo. Og det er hvordan du vil gjøre det på venstre side i Javascript hvis du vil hva vi kaller et objekt. Og objekter i Javascript er bare assosiative arrays. Så hvis du vil ha tilgang til felt, i PHP du bruker denne braketten syntaks. Og på denne måten, kan du overføre denne eier feltet til Lauren. Vel, i Javascript, hvis man ønsker å tilgang til et felt og endre det, kan du bruke dot syntaks. Du kan også bruke braketten syntaks. Men du kan ikke bruke den dot syntaks i PHP. Det vil ikke fungere. Det fungerer bare i PHP. Og til slutt, for å skrive ut ting til konsoll, bruker du console.log, som dere bruker mye i pset8. Du kan console.log det. Hvis du ønsker å skrive ut en liste i PHP, må du bruke utskrifts r. Og på høyre side, ser du jeg hash streng sammensetning der borte. Noen spurte tidligere. Jeg bruker et pluss i Javascript. Hvis jeg ønsker å sette sammen noe i PHP, bruker jeg prikken. Disse er forskjellige. Hvis du skriver PHP-kode, bruker ikke et pluss. Hvis du skriver Java kode, ikke skriv en prikk. Det vil være feil. Og du vil være trist. Så syntaks forskjeller. Kjenn din syntaks, fordi hvis du må skrive et spørsmål og du bruker syntaks fra feil språk, det vil ikke fungere. Og det vil være galt. Så la oss snakke om en viss kontroll flyte forskjeller, hvordan du bruker løkker i hver av dem. Zamyla gikk over høyre side. Ting på høyre side bør være kjent. La oss se på på venstre side. Når du bruker for n sløyfe i Javascript, loop variabel, Var jeg der borte, løkken over nøklene til matrisen. Så du ser navn, house, og rolle. Hvis jeg console.log jeg, får jeg navn, house, og rolle. De er nøklene. I Javascript, går en foreach løkke i løpet av de verdier av denne matrisen. Så du legger merke til de er både jeg. Men her på PHP side, skriver den ut Milo, CS50, og Mascot. De er de verdiene i PHP. Så dette er hvordan disse to er forskjellige på de forskjellige språkene. Så hvis du bruker en foreach loop, ikke anta at det gir deg nøklene. Og hvis du bruker en for n loop, gjør ikke anta at det gir deg verdiene. Betyr dette fornuftig så langt? Den neste lysbilde kommer til å vise deg hvordan du kan få tilgang til det motsatte i hver av dem. Vel, hvis du har nøkkelen i Javascript og du vil at verdien ut, du bare indeks inn i array med det. Så Milo av jeg vil få deg hva du vil - verdiene. Det er dette annerledes syntaks i PHP. Hvis du virkelig vil vite det, vet jeg ikke tror vi har vist den til deg ennå. Men hvis du er interessert, kan du bruke denne ekstra syntaksen til høyre side som faktisk vil la deg få nøkler i PHP når du bruker en foreach loop. Så bare en liten bit av trivia hvis du er interessert. Så det er bare for å demonstrere Forskjellene mellom disse to sløyfer. Ikke bland dem opp når du er programmere et spørsmål. Eventuelle spørsmål om det. Cool. OK. Java gjenstander. Jeg snakket om dem. De er som assosiative arrays. Det eneste jeg ønsker at dere skal notere her er at en verdi i en assosiativ matrise kan være noe i Javascript. Det kan også være en funksjon, som der borte. Jeg har en funksjon som er en verdi av en nøkkel. Og hvis jeg ønsker å kalle den funksjonen, Jeg bare tilgang til bark. Og da jeg satte parente etter det. Og det fungerer. Så noen spørsmål? Nei? OK. Bra. Javascript, som PHP, er løst skrevet. Hva betyr det? Det har typer. Men når du deklarerer en Java variabel, sier du Var jeg. Du trenger ikke si det. Det er ikke en ting. Du bare sier det er en variabel. Og deretter Java vil håndtere typer under panseret for deg. Vi kan fritt konvertere mellom typer på grunn av dette. Så jeg starter som et tall i dette tilfellet. Og så har jeg en streng. Og jeg legger jeg til det. Og jeg overføre den tilbake inn i. Så på den første linjen, i er nummeret. På den andre linjen, nå blir jeg en strengen etter jeg gjør omdisponering. Og her, jeg bare lenke sammen at nummeret på strengen. Så du ser at selv om jeg var en heltall i den første delen, er det liksom av som å bli konvertert til en streng og deretter blir tilsatt på at hallo streng. Og så det er hva jeg mener av den løse skrive. Det er som du konvertere mellom typer veldig enkelt. Og det trenger ikke kaste advarsler på deg som C gjør. Så jeg inneholder nå hallo 123 til strengen. Neste. Vi kan også fritt sammenligne mellom typer. Så hvis du bare bruker ==, veldig mye som i PHP, Javascript gjør en lignende ting. Strengen 123 er det samme som antallet 123 når du bruker doble likemenn. Når den brukes trippel likemenn, det også ønsker å sørge for at typen er den samme. Så fordi det er en streng, og som er et tall, selv om de er både 123, når du bruker trippel lik, du får falsk. I den doble lik sak, får du ekte, fordi doble likhets ikke bryr seg om type. Triple likemenn bryr seg om type. Spørsmål? OK. Og en annen ting om Java er Omfanget er slags global mindre du er i funksjon. Og det fungerer på samme måte i PHP faktisk. Så la oss gå gjennom dette eksempelet. Jeg satt jeg til 999. Og så går jeg inn i dette for loop. Så hvis jeg skriver jeg ut i dette for loop, forventer jeg 0, 1, 2, 3, 4. Jeg får til i = 4. Den øker jeg nå til fem på slutten av for sløyfen. Og da det bryter ut av loopen, fordi det ikke oppfyller de tilstand lenger. Hva tror du det neste console.log skriver ut? Så det er hva det ville gjøre i C. I C, fordi hvis du har like Var jeg ute og du har Var jeg inne i en loop, som en for loop, så det gjør det slik at det er angitt omfang at de to Is er forskjellige. I Javascript, vil det bare behandle det som det samme jeg. Jeg får fem, fordi det var verdien etter at det kom ut av sløyfen. Så de jeg er den samme jeg. Betyr det fornuftig? Vel, det er fornuftig fra en Javascript-ståsted. Men det samme paradigmet ikke bære over til C. De har forskjellige scoping regler. Ja. PUBLIKUM: [uhørbart] utenfor funksjonen [uhørbart]? JOSEPH ONG: Så utenfor som funksjon? Så jeg får til det i løpet av et sekund. Så vi kaller foo (i). Dette går jeg inn foo, trinn det, og deretter logger det. Så var det fem. Så det blir seks. Men hva jeg snakker om er som i i denne funksjonen. Fordi det er en parameter, er det scoped til denne funksjonen. Så når jeg faktisk får ut av det funksjon, er det nå kommer til å gå tilbake til den gamle i. At jeg er bare scoped fordi det er i en funksjon. Og vi har omfang og funksjoner. Men vi har ikke omfanget utenfor av funksjoner i Javascript. Betyr det fornuftig? Ja. Spørsmål. PUBLIKUM: Same [uhørbart]? JOSEPH ONG: Så ja. I PHP, er det den samme type ting. Det er en liten finesse faktisk. Men du kan spørre meg om at etter gjennomgangen. Du trenger egentlig ikke trenger å vite at subtilitet for quiz. For alle praktiske formål, som variabler, global og PHP, med mindre de er i en funksjon, samme ting i Javascript. Ja. PUBLIKUM: Hvorfor er dette tillatt i Javascript og nei hvor ellers? JOSEPH ONG: Så hvorfor er det tillatt i Javascript og ikke i C? Det er bare den som kom opp med Java besluttet at dette var OK i Javascript. Så det er akkurat som et programmeringsspråk konvensjon som vi ville si. Ja. PUBLIKUM: Så hvorfor gjorde den gå 6-5? JOSEPH ONG: Så det gikk 6-5, fordi når jeg gikk jeg inn foo, at Jeg innsiden av foo er nå omfattet til foo, fordi omfanget eksisterer i funksjoner i Javascript. Men når jeg kommer ut herfra, fordi det ble scoped til funksjonen, jeg er bare med vanlig jeg som var inne resten av styrestrømmen. Fornuftig? Kan jeg gå videre? OK. Cool. Aksept av dette er gjenstander er gått ved referanse. Du vet hvordan når du passerer en matrise i C du kunne faktisk endre array? Det er det samme i Javascript. Dersom jeg passerer en gjenstand, i dette tilfelle, I passert Milo inn i denne catify funksjonen. Milo starter. Hans navn er Milo Banana. Jeg passerer dette objektet inn i en funksjon fordi det er et objekt, en assosiativ array i Javascript. Når jeg utfører en operasjon i den funksjonen, vil det faktisk endre objektet. Så dette vil bare skje etter gjenstander i Javascript, akkurat som det skjer for arrays innsiden av C. Så Milo navn faktisk vil bli katt nå. Betyr det fornuftig? Så dette fungerer bare for objekter. Objekter sendes som referanse. Ja. PUBLIKUM: Så du sier at i motsetning til variabelen i. JOSEPH ONG: Yeah. Hvilken variabel jeg var bare et tall, ikke sant? Det er som i C når du passerer en heltall a, gjør det til en kopi. Og når du passerer en matrise, er det faktisk endringer selve array i C. Det samme skjer med Java i dette tilfellet. OK. Og neste, er Milo trist fordi han er nå en katt. Det var faktisk Milo etter noen tur til veterinæren. Så hvordan skal vi bruke Java i en web-side? Vi kan ta den med. Dette er HTML-kode med strippe koder. Så jeg har strippe koder der. Og da jeg satt noen Java kode innenfor skriptkodene. Og så utfører dette. Når jeg bare gjøre det slik, er det kalt inline Javascript. Det er litt rotete, fordi Javascript er faktisk i HTML. En bedre måte å gjøre dette på, mye hyggeligere, er å skrive din Java en ekstern fil og deretter gi skriptmerket med en kilde. Og dette vil gå til at Javascript-fil og lese Javascript-kode fra denne filen i stedet. Og på denne måten, trenger du ikke mye Java i begynnelsen av din HTML-fil, noe som gjør det veldig rotete. Du bare sette den et annet sted. Og så vil den lese det derfra. Gjorde som gir mening? Plasserings saker. I dette spesielle tilfellet, den skriptet er før kroppen. Så når jeg utfører det, det er ingenting i kroppen ennå. Kanskje dette vil gjøre litt mer følelse når jeg viser dette neste del. I dette tilfelle skriptet kommer etter div. Så div faktisk vises på siden først. Akkurat her i denne lille røde sirkelen, du se teksten vises. Og så våken dukker opp. I det første tilfellet, fordi skriften var før div, den alert dukker opp først. Og så div dukker opp etter du forkaste boksen. Så henrettelsen teller. Så vi vil ha dette i bakhodet. Dette vil være viktig i en liten bit. OK. Så godt, hvordan du venter ikke til hele siden er lastet da før du kjøre noen kode? Vi skal gå inn på dette litt litt senere også. Men bare holde denne plasseringen saker i tankene for når vi komme til et annet lysbilde. Så får vi til DOM nå. Og hva er DOM? Så hvis du ser på HTML-kode, er det bare en haug med tekst på skjermen. Så hvordan Java vet at dette er et HTML-element? Så vi må ha noe minne fremstilling av denne struktur som vi har. Og når vi har dette i minnet representasjon i Javascript, kaller vi at DOM. Og det er bare en måte at folk besluttet at vi skal representere denne HTML struktur som. Og hva betyr dette DOM se ut? Vel, i minnet representasjon, vi tar denne teksten. Og vi slår den inn i minnet representasjon. Så dette er HTML. Så vi først finne ut at hver DOM treet har et dokument. Det ser ut som et tre. Og dokumentet inneholder HTML tag, faktisk alt innsiden av dette nå. HTML-koden har to barn. Den har et hode. At hodet, hvis du ser på innrykk der borte på hvordan det er strukturert mellom de nære koder, Hodet har et barn. Barnet er tittelen. Nettopp. Nå har vi en kropp barn. Og så at kroppen har en Barnet heter familie. Og at familien har tre barn - eldste, midten, og yngste. Så du bør vite hvordan du kan tegne et diagram som dette når vi spør deg hvordan å tegne et diagram når vi gir du HTML til venstre. Vite hvordan å produsere DOM treet. Og inne i disse tingene, er det bare litt tekst, som jeg har representert som små bokser. Gjør dette DOM trestruktur fornuft og hva DOM er? Så hva betyr det p står for? Over her, p der borte i den koden representerer en avsnitt tag i HTML. Så du kan slå det opp. Men det betyr bare at det er noen plass til litt tekst. Og det har noen standard CSS styling, fordi det er et avsnitt tag. Men vet egentlig ikke bekymre deg at en del for mye. Bare vet det er en plassholder for noen tekst. Ja. Spørsmål? Ja. PUBLIKUM: Du bare nevnte CSS. Hash familie og hash alt det der er i utgangspunktet representerer IDer i CSS? JOSEPH ONG: Ja, akkurat. Jeg skal få til hva disse hashes bety i et sekund. Når Angela gikk over CSS, hun snakket om CSS velgere. Dette er CSS-velgere som hun snakket om. Ja, Rob? ROB BOWDEN: Jeg vil også kommentere at DOM innsiden av tittelkode også er en tekst-node. JOSEPH ONG: Høyre. Så inne i tittelen tag, Jeg har litt tekst DOM. Så egentlig, bør denne tittelen har som en lille boksen som kommer ut av det også. Men det spiller egentlig ingen rolle for mye i dette tilfellet. Vi har egentlig ikke bryr seg om tekstnoder, som vi kaller dem, for mye. OK, vi gjør. Angivelig, det gjør vi. Og jeg vil fikse at når Jeg laste det opp igjen. Betyr det fornuftig? Så hvordan skal vi jobbe med DOM? Når du avtale med DOM i Javascript, er det to trinn. Du velger et DOM-element. Og så gjør du ting til det. Så i dette tilfellet, abstrakt, har jeg valgt midten element. Og så et eksempel på å gjøre ting til at det ville være å endre teksten. Det pleide å være Bob. Nå, hva jeg gjorde med det var jeg endret Bob til Milo i dette tilfellet. Så hvordan skal vi egentlig gjøre dette? Hvordan gjør vi det velge? Og hvordan gjør vi det gjør ting til ting når vi har tatt det? Vel, den måten dere har lært det i denne klassen er ved hjelp av noe vi kalt jQuery. Så hva er jQuery? jQuery er et bibliotek som gjør Java lettere å skrive. Så noen tok seg tid og skrev jQuery. jQuery er faktisk skrevet i Javascript. Og så fordi de gjorde dette, har vi nå har en hel haug med funksjoner som vi kan bruke som gjør vår lever virkelig enkelt. Hva er noen av de ting den gjør? Det gjør velge elementer lettere. Det gjør skiftende HTML, legge klasser enklere. Det gjør Ajax enklere. Vi får til det i et sekund. Og det er analogt til C-biblioteker. Så du inkluderer string.h, du får strlen. Du får strcpy, alle disse tingene. Når du tar med jQuery, får du fin måter å velge elementer til endring ting, et cetera. Du får ekstra funksjonalitet som Java ikke gir deg. Så jQuery er ikke Javascript. jQuery er et bibliotek som er skrevet i Javascript som gjør Java lettere å skrive. Så jQuery er ikke et programmerings språk. Men Java er. gjøre. Sikker på at du får din terminologi rett. Eventuelle spørsmål? Ja. Er det et spørsmål? OK. Så hvordan bruker du jQuery? Vel, når du skriver noe Javascript-kode og du har en jQuery på toppen av filen som en script-fil, bruker du dollartegnet nå for å få tilgang til jQuery. Og dette er forskjellig fra dollartegn i PHP. Det er det samme symbolet du skriver på tastaturet. Men de betyr svært forskjellige ting. Dollartegn i PHP betyr dette er hvordan jeg erklære en variabel. I Javascript, når du har tatt jQuery, står det for jQuery. Så ha det i bakhodet. Så hvordan kan vi velge DOM elementer? Vel, når du gjør det stygge Java måte, får du tilgang til dokumentere global variabel. Og så får du element av ID-familien. Dette er virkelig lang og ordrike og ikke veldig hyggelig. Eller du kan få alle elementer som er en p-taggen. Det fungerer også i Javascript. Men vi aldri virkelig viste du syntaksen for mye. Det vi viste du var jQuery. Slik at hele velger der oppe at ble uttrykt i Java bare blir kondenseres til dette veldig fint dollar signere hashtag familie. Og $ p, akkurat der det er sånn. Hvis du ønsker å velge alle p-koder inne i en familie, setter vi en plass mellom de to. Og nå, vi får alle p tags inne i en familie. Og ser kjent ut? Vel, Angela snakket om CSS velgere. Gi meg ett sekund. Og så for å velge et element, du bare bruke det samme som deg ville gjøre med en CSS velgeren. Hvis du putter en hash foran av det, velger den av ID. En prikk velger av klassene. Hvis du bare har ting uten hashes eller prikker, velges disse kodene. Spørsmål. Ja? PUBLIKUM: Når vi bruker punktum i vår HTML, er at ikke jQuery? JOSEPH ONG: Dot i vår HTML er en Javascript-ting. Det er ikke en jQuery ting. Måten dere lært det med jQuery er å bruke. html. Og så gikk det uansett HTML skal være. Så jeg får til det i løpet av bare et sekund faktisk. Så hvordan gjør vi ting til element når vi har valgt det? Så det er et eksempel på velge et element. Så nå, ønsker vi å gjøre ting til det. Så i dette tilfellet, la meg gå tilbake til forrige lysbilde. Det var Bob før. Og jeg ønsker å endre det inne HTML til Milo. Så jeg kaller HTML-funksjonen fra elementet. At HTML-funksjonen er en fremgangsmåte for element. Og så gir jeg det hva Jeg vil at HTML skal være. Og det bare erstatter det som er inne i det merket med hva jeg gir den. Ja. Spørsmål? PUBLIKUM: The hashtag brukes for bare jQuery. [Uhørbart] vi ville ikke bruke det. JOSEPH ONG: Ja, akkurat. Men ikke bekymre deg for mye om ren Javascript. Jeg vil bare at dere å fokusere på hvordan du ville gjøre det med jQuery, fordi som kommer til å være den viktigste del på quiz. Høyre. Nettopp. Så du ser at hashtag, slik at svarer til velge-element med ID midten på grunn av at hashtag. Hashtag betyr ID. Og dette elementet har en ID på midten. Så det er det elementet vi velger. PUBLIKUM: [uhørbart]. dollartegn hashtag [uhørbart]? JOSEPH ONG: Så nei. Spørsmålet er kan du bruke. Verdi. Og. Verdien virker bare på elementer som er innganger. I jQuery, ville det være . Val, ikke. Verdi. Så jeg kommer til å få et lite eksempel på at demonstrerer alt dette i kombinasjon i et sekund. Men jeg tror dette serverer et lite tekstutdrag fornuftig å folk så langt. Vil du endre HTML, ringe HTML-metoden. Ja. PUBLIKUM: Kan du forklare metoden igjen? JOSEPH ONG: Så en metode er bare en funksjon som hører til en i denne tilfelle, ett av disse DOM elementer fordi du ser jeg valgte elementet først. Egentlig, la meg bruke musen. Jeg valgte elementet først. Og da jeg ringte denne HTML fungere som den hadde. Og fordi denne funksjonen tilhører denne tingen, kaller vi det en metode. Det er bare et fancy navn for det. Si det igjen. Så husk, vi har valgt elementet nå. Og vi har satt den på innsiden av elementet variabel. Korrigere? Så når vi ønsker å endre HTML på innsiden, fordi det var Bob før, du vil endre denne teksten til Milo. Så vi kaller HTML. Og vi forteller det hva HTML inne at elementet skal nå. Og så det forandrer det til Milo, fordi jeg ga det Milo. PUBLIKUM: Så de jobber sammen. [Uhørbart] JOSEPH ONG: Ja, ja. De jobber sammen. Så en av dem velger elementet først. Og den andre gjør noe til det. Ja. PUBLIKUM: [uhørbart]. Hvis denne metoden er forskjellig fra i HTML du har metoden lik faktiske. JOSEPH ONG: Yeah. Det er en annen metode. Det er en annen metode. Og vi kan dekke det i bare et sekund når vi kommer til et eksempel. Jeg vil være sikker på at vi fremskynde fordi vi kjører ut av tiden. Men vi har kjørt veien over tid nå. OK. Cool. Så hvis du ønsker å legge til en klasse, er det også et tilleggsklassemetode. Dette er bare et eksempel på hva du kan gjøre med jQuery. Det legger bare en klasse. Hvis du ønsker å fjerne det, du kan ringe fjerne. Det er bare en annen ting du kan gjøre. Så flere eksempler på ting du kan gjøre. Så kan jeg bare sette den på toppen som dette? Yngste remove. Hvis jeg bare kjøre at Java på toppen av min fil, vil det fungere? Høyre. Fordi midten ikke finnes ennå. Så dette er ikke til å fungere. Utførelse orden. Det går til toppen først. Hva? PUBLIKUM: Yngste ikke finnes ennå? JOSEPH ONG: Yeah. Yngste ikke finnes ennå. Nettopp. PUBLIKUM: Du sa midten. JOSEPH ONG: Beklager. Yngste ikke finnes ennå. Og den andre tingen er at jeg har ikke inkludert jQuery fil spør script src. Så det ikke kommer til å fungere. Egentlig gjorde jeg ikke gjøre det i neste lysbilde, noe som er ment for å fikse det heller. Men måten vi gjør dette er Java er hendelsesdrevet. Så det vi gjør er at vi bruker en hendelse Handler for å gjøre dette skje. Og så jeg velger dokumentet satt først. Jeg sier, OK, når dokumentet er klar, la meg kjøre en funksjon. Så det er alt som syntaks midler. Jeg valgte dokumentet. Nå, når dokumentet er klar, kjør funksjonen. Og så over her når dokumentet er klar, noe som betyr at alt det har HTML lastet, så jeg kjører funksjonen som fjerner det elementet. Og så nå, når jeg kjører denne funksjonen at jeg gikk inn i klar, jeg er garantert at alle HTML på siden kommer til å eksistere først. Ja. Spørsmål? PUBLIKUM: Hva er hendelsen søkeord i funksjonen? JOSEPH ONG: Slik at arrangementet søkeord i funksjon er bare en parameter som blir sendt til funksjonen for ethvert arrangement. Det er bare noe som du få gratis. Når du bruker nøkkel handlers i pset8, kunne så fall fortelle deg, for eksempel hvilken tast du trykket på. I dette tilfellet, for et ferdig hendelse, det er faktisk ikke super nyttig. Men for en nøkkel ned hendelse, er det mer nyttig, fordi du får vite hvilke tasten du trykket ved å gå inn nøkkel kode av at hendelsesobjekt. Korrigere? Betyr det fornuftig? OK. Ja. Spørsmål? PUBLIKUM: Så kan du sette script tag lavere ned? JOSEPH ONG: Så ja. Du kan sette skriptet tagge lavere ned. Men da det bare blir veldig rotete. Og vi liker å sentralisere alle av koden vår på ett sted. Og dette vil gi oss mulighet til å gjøre det. Husker jeg sa at det er en hyggeligere måte for å sikre at elementene er på siden før du kjøre kode? Og dette er bare en fin måte du vil oppnå det. PUBLIKUM: [uhørbart]. JOSEPH ONG: Yeah. Du vil fortsatt ha til, ikke sant? Fordi husk, inkludert deg fil øverst på siden. Så det kommer til å kjøre først før du kommer til bunnen av siden. OK. Så du kan også legge til en annen type hendelsesbehandling. Dette bare behandler klikk. Når jeg klikker på yngste, deretter det vil komme opp med et varsel. Dette er bare en annen type arrangement. I motsetning til klar hendelse, du nå bruke klikk hendelse når du mottar klikker på et element. Og så i dette tilfellet, husk, klikk håndterer er festet til yngste. Så det bare skjer når Jeg klikker på yngste. Og i den andre, den klare arrangementet ble knyttet til dokumentet. Så den venter på dokumentet å være klar. Fornuftig? Jeg tror jeg kan gå videre. Ja. Spørsmål? PUBLIKUM: [uhørbart]. i dette tilfellet du bruker [uhørbart]. JOSEPH ONG: Oh, yeah, fordi i denne tilfelle, må jeg vente for de yngste element skal vises på skjermen første før jeg kan legge ved et klikk håndterer til det, noe som er grunnen til at jeg satte den inn av et dokument klar. OK. Og neste, så dette er et stort eksempel på hvordan du vil kombinere alt. Dette er bare en form validering eksempel du har sett på forelesning. Så ta det steg for steg som du går gjennom dette. Og det vil være helt OK. Bare les den fra topp til bunn. Jeg har et skjema nederst. Når dokumentet er ferdig, jeg legger ved en sende behandleren til skjemaet, slik at når jeg sender inn skjemaet, får jeg verdiene inne i hver av disse innganger. Og jeg sjekke om det er tomt. Hvis det er tomt, jeg return false, fordi Jeg ønsker ikke å sende inn skjemaet, fordi skjemaet er galt. Hvis passordet er tomt eller det er mindre enn åtte tegn, tror jeg ikke sende form, fordi det er også galt. Og avkastningen falske bare forhindrer form fra å sende inn og går til en ny side. Og forhåpentligvis, dette er fornuftig. Jeg tror dere bør gå gjennom denne koden trinnvis på egen hånd. Og når du forstår hva den velger elementer og gjøre ting til det faktisk innebærer, vil dette gjøre mye fornuftig for deg. Ja? PUBLIKUM: Hva gjør name = brukernavn bety? JOSEPH ONG: Så navnet = brukernavn og name = passord betyr bare se på egenskap av hva du velger. Og så det må matche. Så vi går inn i registreringen. Og så ser vi på alle innganger og registrering. Og da vi plukke en hvor navnet attributt er lik brukernavn. Så det første velgeren bare velger brukernavn innspill. Og at andre valg bare velger passordet én, fordi de har deres navn attributter satt som hva de er ment å være. Spørsmål? PUBLIKUM: Ved innlevering, hvordan nederste delen løse den øverste delen? JOSEPH ONG: Så det er fordi av hendelseshåndterer. Så vi venter på en sender hendelse som får sparken fra skjemaet. Og det er alt som er å sende. Hvorfor kaller jeg sende opp der? Den sier, når skjemaet er sendt, Jeg får en sende hendelsen. Så la meg bare snappe det og deretter kjøre denne koden i stedet. Ja? PUBLIKUM: Hvorfor har du å ha funksjon hendelse? Hvorfor kan du ikke bare [uhørbart]? JOSEPH ONG: Fordi i Javascript, du nødt til å erklære funksjonene. Det er bare hvordan det fungerer i Javascript. Du må si det som skjer å kjøre en funksjon. Du sier det at du er forventer en funksjon her i stedet for bare klammeparentes. PUBLIKUM: Og funksjonen er uansett følger? JOSEPH ONG: Yeah. Funksjonen er det som er på innsiden klammeparentes etter at funksjon søkeord. Ja? PUBLIKUM: [uhørbart]. JOSEPH ONG: For sende? PUBLIKUM: Nei, for funksjon uten hendelsen. JOSEPH ONG: Yeah. Så uten arrangementet du kan ha det. Hvis du ikke trenger arrangementet, så kan du bare utelate det. Men hvis du gjør det, så du bare sette den der. Ja. Rask spørsmål? PUBLIKUM: [uhørbart]. JOSEPH ONG: Yeah. Fordi hva du trenger å gjøre, document.ready bare sier vente til alle HTML-koden på siden å laste første. Og vanligvis, vil du at elementer på plass før du kjører noen kode. OK. Vi må få til Ajax. Vi har ikke mye tid. Så fordeler og ulemper. Javascript er lettere prøve skrive med jQuery. Men jQuery er litt treg. Det er som PHP er tregere enn C, fordi den er tolket. Og jQuery er litt tregere enn Javascript, fordi det gjør mye av ting under panseret. Og så hvis du bruker jQuery, er det bare litt tregere enn Javascript, selv om det gir deg fin eleganse. Og til slutt, Ajax. Så langt med Ajax, har du ikke sett Ajax i form av pset7 ennå, fordi når du gjør det, sender du en form for sitat. Den laster en ny side. Så du får dette store hvite flash på siden, mens det andre siden lastes, riktig? Det ville være veldig fint om du hadde ikke denne flash. Som Facebook, hvis du bare bla til bunnen, legger det nytt innhold uten å oppdatere hele siden. Så noe sånt som dette ville være hyggelig. Dette er Javascript-kode på venstre side. Du får det som er på innsiden av den inngangen. Du får aksje info fra Yahoo! Og så du gjør en stor streng som sier, OK, er dette budskapet jeg ønsker som skal vises på skjermen. Og så sette den meldingen inne av noen HTML-element som får vises på skjermen. Så det er alt som skjer her. Så i utgangspunktet, fordi dette er alt Java og du trenger ikke å løpe lenger PHP, dette vil sørge for at at siden ikke lastes. Så dette er bare en abstrakt idé at jeg sier her for nå. Den abstrakt idé er at hvis du gjør det alt i Javascript, trenger du ikke en siden oppdateres. Men hvordan gjør du egentlig dette? Vel, faktisk, la oss snakke om et problem med denne første. Et problem er i Javascript, utførelsen er synkron. Så du må vente på en linje for å fullføre før du utføre neste linje. Og hva hvis jeg skal over til Yahoo!, og deres servere er veldig treg, og det tar dem tre sekunder til gi meg tilbake som lager info? Når jeg treffer den prisen linjen, hvis den utførelse er synkron, som det er av standard, hva det er bare kommer til å gjøre er Nettleseren din kommer til å stoppe for tre sekunder. Og du kommer ikke til å være i stand til å gjøre noe mens det blir disse dataene. Det kommer til å bli fryst. Og det er ille. Du ønsker ikke en bruker å har en frossen nettside. Korrigere? Det er bare dårlig. Alle er enige? Hvis du surfer Facebook, og det fryser, og du kan ikke gjøre noe, du bli virkelig frustrert. Så løsningen er at vi gjør noe asynkron stedet. Så alt dette asynkron greia sier er, kommer jeg til å spørre om dette URL for noen data. Og så kommer jeg til å holde det gående. Jeg skal bare holde utføring hva kode som var etter det. Og så når disse dataene er klar, da vil jeg behandle det. Det er alt det er å si. PUBLIKUM: Ajax bare gjør kode asynkron? JOSEPH ONG: Det er en asynkron måte henting av data. Så det første om Ajax er det lar meg få data fra en ekstern nettside. Og den andre tingen er det som gjør at at siden min ikke stall mens jeg er hente disse dataene. Det er den asynkrone delen av det. Fordi det går av et annet sted, fordi jeg sier jeg holder skjer mens det er å hente disse dataene, som gjør det asynkron. Jeg fortsetter å kjøre. Så hold det asynkron ideen i bakhodet. Og jeg skal vise deg hva forskjellen er. Synkron versjon er på venstre side. Den asynkrone versjon er på høyre side. Se på tallene for å se hvilke trinn tilsvarer det utføres på hver linje. Over det, viser varselet opp først. Fordi få lager info fra Yahoo! tar tre sekunder, boder det i tre sekunder. Og da det varsler prisen etter disse tre sekunder. Så nå, at varsel show opp på den tid - tre sekunder i. Og da det varsler etter etter det. Så det går bare trinnvis. Det er som hva dere ville godta, riktig? Med asynkron utførelse, du varsle først. Deretter kan du gå bort til denne nettadressen. Og du sier, jeg kommer til å bare spør for dataene. Og så kommer jeg til å bearbeide det senere. Så det umiddelbart utfører neste linje etter at jeg gjør det asynkron forespørsel. Så en 0,001 sekunder, ser du våken hi. Utfør denne funksjonen, våken bye. Og fordi jeg har gjort et løfte om at jeg ville behandle dataene senere, hva skjer er når dataene kommer tilbake tre sekunder senere, da kjører jeg at funksjon som jeg har der borte. Ja? PUBLIKUM: Kan du spesifisere eller avklare hva Ajax betyr? JOSEPH ONG: Så Ajax er en måte at hvis jeg trenger data når jeg er på en nettside og jeg ønsker ikke å oppdatere siden, da Jeg bruker denne teknologien kalles Ajax. Som i hovedsak betyr bare, gå hente data fra et annet nettsted. Og gjør det på en måte som bare ikke stall min nettside. PUBLIKUM: Så er det en iboende del av Javascript eller jQuery? JOSEPH ONG: Så noen skrev en måte å gjøre dette i Javascript for lenge siden. På et tidspunkt, gjorde det ikke eksisterer. Og så noen oppfant denne teknikken å tillate folk å be om disse dataene på denne måte. Og de skrev noen ting å gjøre det for deg. Og jQuery bare gir deg dette veldig fin måte å gjøre det med denne $. få funksjon. spørsmål? Jeg kan svare på spørsmål om Ajax etterpå også. Jeg skal være her. Så det la oss oss hente data uten oppdatere siden. Og det la oss oss gjøre dette i en asynkron måte at fryser ikke på siden. For lang, ikke lese om det Forklaringen var for lang for deg. Så til slutt, cross-site skriptangrep. Vi så dette med Zamyla. Hvis du er i min database noen har dette navnet, som er denne skriptmerket, og jeg har noen kode på siden min som utskrifter ut folks navn på rad, eller jeg har noen Javascript-kode som setter inn dette navnet inn på siden, hva HTML blir produsert? Vel, jeg skriver ut HTML-koden. Jeg skrive ut alle disse kodene. Jeg kommer til den delen hvor jeg er utskrift ut med vennene mine. Jeg skriver Lauren ut. Det skriver Milo ut. Og så navnet mitt i databasen er script innlegg lite flatterende Facebook-statusen. Fordi jeg satt dette inn på siden fordi det ser ut som Javascript, når denne siden blir sendt til brukeren, det blir utført som Javascript. Og så dette er hva vi kaller en cross-site scripting-angrep. Noen setter skadelig informasjon i databasen som kan tilsvare noen ekstra streng eller noen Java streng. Og når det blir skrevet ut til side på denne måten, så hva skjer er at dårlig kode blir henrettet at jeg ikke hadde tenkt for det å bli henrettet. Og det er alt en cross-site skriptangrep er. Og måten du får rundt dette er som Zamyla sa. Du bare pakk ting i HTML spesialtegn. Og denne HTML spesialtegn er en PHP funksjon som vil forhindre denne typen ting skjer med deg hvis du har en skadelig streng i databasen. Det unnslipper bare det, slik at det ikke bli tolket som HTML. Det erstatter de små brak med det vi kaller enheter. Og vi gikk over dette i foredraget også. Så jeg tror dere bør ha et godt grep om det. Spørsmål? Ja. PUBLIKUM: Så hvordan ville den [uhørbart]? JOSEPH ONG: Si det igjen. PUBLIKUM: Hvordan ville skjermen - JOSEPH ONG: Høyre. Så du har noe som sier, når Jeg registrerer, skriver i mitt navn. Jeg bare skriver i dette feltet, er mitt navn Stript innlegg lite flatterende Facebook status nær skriptmerket. Og som bare blir satt inn i database, fordi jeg ikke kan si noen i verden ikke har et navn med en pil venstre i det eller de Ordet script i det. Som egentlig ikke gir mening. Så jeg må bare sørge for at jeg rense ting før jeg skriver det ut til siden. PUBLIKUM: So HTML spesielle kort hindrer skriptkodene? JOSEPH ONG: Yeah. Så det spiller ingen hindre skriptkodene. Det gjør bare at skriptkodene ikke får tolkes som HTML eller - ja. Det kommer bare opp som hva det faktisk er. OK. Så det var det quiz gjennomgang. Cool. [APPLAUSE]