R.J. AQUINO: Laten we gewoon aan de slag. Dus dit is Quiz 1. Hier is een aantal high-level informatie. De Over-pagina voor de quiz is op dit URL niet meer CS50.net, maar dat werkt nog steeds. Het is CS50.harvard.edu/quizzes/2013/1. Het is de grote Over pagina, u vertellen waar en wanneer, namelijk aanstaande woensdag in een heleboel kamers. En volgende week woensdag, ik : twee dagen vanaf nu. Al deze informatie is er. Maar het is cumulatief. 

Dus alles uit de eerste helft van de jaar is mogelijk op de quiz, want je kunt niet echt geavanceerde doen dingen in C zonder als de omstandigheden en voor loops en dergelijke. Maar er zal een nadruk op de te materiaal dat sinds Quiz 0, te beginnen met structs en File I / O. Het is meestal meer uitdagender dan Quiz 0. De gemiddelde score is meestal lager. Hard studeren. 

Terwijl je studeert, moet u gebruiken CS50/discuss om uw vragen te posten en lees de vragen van andere mensen. Dus als je geen vragen hebt, log in en lees vragen je vrienden '. Ze zijn waarschijnlijk goede vragen. En neem de praktijk quizzen. We zijn het geven van quizzen voor nu zeven of acht jaar. Ze zijn allemaal online. Verdere problemen zijn vergelijkbaar om oude vragen. Dat is hoe we ze maken. 

De quiz bestaat nog niet. Niemand van ons hebben het gezien. Maar het eruit zal zien vorige quizzen. Voor deze beoordeling sessie, is dit niet een uitputtende lijst van onderwerpen. Je kunt niet zomaar deze bijwonen en daarna zijn perfect klaar voor de quiz. Anders zou het niet dat veel van een quiz. En dit is niet noodzakelijkerwijs alles wat u moet weten over een bepaald onderwerp. Het is bedoeld om je bloot te stellen aan de dingen we hebben afgedekt, u eraan herinneren wat we bedekt, en de wijze die wij bedekt. Maar je moet verder gaan en dieper wanneer je studeert aan double-check dat je alles weet over een bepaald onderwerp en dat je hebt ingevuld alle hoeken die waren bedekt met lezing. 

De quiz notities vertellen dat je naar de schrijver notities, horloge lezing video's. Dat is een goede manier om ervoor te zorgen dat je hebt bedekt al uw basissen. Dus aan de slag, toen ik deze dia's, heb ik geprobeerd om te zetten waar ik vond gegevens. Dus voor File I / O, bijvoorbeeld, Week 7, Maandag's lezing, en de gedetacheerde Sectie 6 en Probleemverzameling hebben allemaal informatie over File I / O. Ik heb gedaan dit voor elk onderwerp. Dus die titel dia's kunnen nuttig zijn voor jou. 

Dus hier hebben we File I / O. Vergeet niet, in Probleem Set 5, gebruikten we fopen, fclose, fwrite, fread en fseek. Na hersteld 30 ish JPEG's en hebben aangepast en geknoeid met bitmaps, moet je redelijk bekend zijn met deze functies en hoe ze werken. Als u niet meer vertrouwd, zeker deze te herzien. En zorg ervoor dat je begrijpt wat de verschillende argumenten zijn, wanneer ze worden gebruikt. 

Maar de gemeenschappelijke-bestand gerelateerde bugs kan u gevraagd worden over - Nou, als je bent vergeten om te controleren of fopen werkte eigenlijk voordat je naar Een bestand wijzigen. Dat kan slecht. Als u bent vergeten om een ​​bestand FSluit dat u fopened, die vergelijkbaar is met een geheugenlek. Dat is vrij slecht. En vergeten om te controleren of je hebt aan het einde van het bestand voordat je beginnen met het schrijven aan. 

Dus als je zegt: he, ik ben bij het einde van het bestand. Geef me 5 meer bytes. Nou, dat is waarschijnlijk niet gaat werken zoals u verwacht. Dat is echt het voor File I / O, omdat we zo veel van het het probleem vastgesteld. Dus als je begreep wat er gaande was in Probleemverzameling 5, herinner me de bitmats en JPEG's, dan ben je waarschijnlijk al ingesteld voor File I / O. Als dat een beetje fuzzy, zeker dat probleem beoordelen ingesteld en de bijbehorende materiaal. 

Structs waren het onderwerp dat op de waren lijn tussen 0 en Quiz Quiz 1. Niet helemaal de cut voor Quiz 0. Dus ze zullen zeker op zijn Quiz 1, Week 7, maandag. Wat is een structuur? Hier laten we een structuur. Het is als een nieuw type. Het is als een container voor meerdere velden. 

In dit geval hebben we een structuur verklaard student die twee velden heeft - een tekenreeks die we bellen naam en een int die we bellen leeftijd. Dus toen ik pas rond studenten of ik studenten te wijzigen, zal ik in staat zijn om toegang tot hun naam en hun leeftijd. Laten we eens kijken naar enkele code voor. Hier zien we dat ik heb verklaard een student s, net als Ik verklaar een variabele - int x, int y, et cetera. 

Hier is student s. Hij begint met niets in zijn velden. Dus laten we stellen hen. U stelt velden van een struct met stip. Dus heb ik hier gezegd dat s.name = RJ. En s.age = 21. U kunt ook velden updaten Op dezelfde manier zou je updaten de waarde van een variabele. Dus ik wil mijn naam van RJ veranderen geen perioden R.J. spelt de correcte manier. Het zou s.name = RJ, dezelfde zoals we al zeiden het oorspronkelijk. En dan kunt u ze opent. 

Dus we hebben ze in te stellen. We hebben ze bijgewerkt. U kunt ze ook openen in dezelfde manier. Dus hier ben ik het afdrukken van R.J. Is 21 jaar oud. En ik ben het met de toegang die waarden met s.name en s.age. Dus dat is de toegang structs met de dot-notatie. Yep, vraag? 

PUBLIEK: Is er een reden voor de vorige dia die u niet zet student op de bovenste regel, zoals typedef struct student en vervolgens student aan het einde? 

R.J. AQUINO: Dus de vraag was, op deze dia, hebben we meestal gezien typedef struct knooppunt en vervolgens de velden van de structuur en dan is het woord node. En hoe hier te komen heb ik niet gezegd, typedef struct student en vervolgens de velden van de structuur en dan student? De reden is dat ik niet hoeft te toegang tot het binnenste van de structuur. Dus het is OK om het te verlaten zonder een naam. Ik kan het gewoon laten zoals een anonieme struct. 

De reden waarom we doen het voor gelinkte lijsten en dingen is want binnen je nodig hebt te verwijzen naar een struct knooppunten ster. Dus de structuur moet een naam hebben, dus je kunt het later openen. Het is een klein detail. Maar je meestal zien typedef struct accolades als je niet nodig hebt de naam en typedef struct een naam gevolgd door accolades als je wil moeten de naam. Dus dat is een goede vraag. 

En op dat punt, we de neiging om te wijzigen structs en pas rond structs door verwijzen, niet naar waarde. Dus zullen we gewoon pas rond verwijzingen naar structs in plaats van het passeren van rond de Structs zelf. Dus je heel vaak gaat worden gebruikt, in dit geval, student * of struct knoop * of knooppunt * in plaats uit studenten of knooppunten. Dus hier, ik heb gezegd, OK, de variabele ptr gaat naar het adres van s zijn. Het gaat om de pointer aan de student R.J. 

Dus we kunnen krijgen op die gebieden hetzelfde als we iets krijgen. Eerste, ID verwijzen naar de aanwijzer om de structuur te krijgen. Dat is * ptr en vervolgens een punt en dan leeftijd. Dus om toegang te krijgen tot het veld, en ik heb bijgewerkt Nu tot 22, want laten we zeg, het was mijn verjaardag. Er is een snelkoppeling syntax gebruik hier de pijl. Dus ptr pijl leeftijd is maar hetzelfde als * ptr.age. Nu, dat is iets wat je moet te onthouden en herinneren. 

U gebruikte het veel in pset6, de speller PSET. Maar dit is eigenlijk wat er gaande op onder de motorkap. Het is dereferentie de aanwijzer en vervolgens toegang tot het. Vraag? 

PUBLIEK: [onverstaanbaar]. 

R.J. AQUINO: Waarom gebruiken we pointers als structs in plaats van de zelf Structs? De reden zou zijn als je voorbij een structuur om een ​​functie, je waarschijnlijk willen rond passeren net de 4 of zo bytes dat de aanwijzer vertegenwoordigen als tegen de potentieel 30 of 40 bytes die de structuur. Zo iets voorbij een functie gaat makkelijker wanneer de zaak kleiner kortom. Vraag? 

PUBLIEK: Je zou kunnen hebben dit vermeld in het begin, maar er andere dia's dat op [onverstaanbaar]? 

R.J. AQUINO: Deze dia's zal zijn na de herziening sessie. We zullen ze te posten op de website. Dus bewegen op en bewegen op licht sneller, gaan we praten over data structuren. Er zijn een heleboel. Wij vallen een aantal van hen. Hier is wat je moet begrijpen over datastructuur. 

Je moet echt begrijpen op een hoog niveau wat elke structuur. Kunt u uitleggen in het Engels aan uw vriend die niet heeft CS50 hoe organiseren wij onze data en waarom we zouden worden met behulp van iets op deze manier? Dat is wat men. Ding twee, begrijpen de uitvoering. Dus begrijpen hoe deze dingen te gebruiken in C. En we gaan over dit. 

En dan wat drie zouden worden weten de looptijden en de beperkingen van de verschillende structuren die u gebruikt. Dus waarom zou je gebruik maken van een hash tabel in plaats van een array. Begrijpen hoe snel, gemiddeld, het benaderen van een hash-tabel is. Begrijpen wat bewerkingen zijn snel op gelinkte lijst maar traag op arrays en vice versa. Dus om te begrijpen dat, dan moet je begrijpen Big-O notatie gewoon weten hoe om te praten over deze allerlei dingen. En we praten over dat. 

Dus eerst ding, gelinkte lijsten. Hier is een hoog niveau picture van een gekoppelde lijst. We tonen dit in de klas. We hebben meestal 10 personen staan ​​op het podium. Maar wij hebben een reeks knooppunten waar elke knooppunt heeft enkele waarde en een pointer zijn volgende waarde. Dus om van het ene knooppunt naar het volgende, je gewoon zeggen, geef me de volgende knoop. Je hebt dat knooppunt. Geef me de volgende knoop. Je hebt dat knooppunt. Geef me de volgende knoop en ga zo maar door totdat er geen knooppunt links. 

Dus blijven om te praten over het op een hoog niveau. Het is heel gemakkelijk om dingen te voegen in een gelinkte lijst. Als je niet de zorg over de bestelling, kun je gewoon laten vallen meteen aan het begin. Dat is constante tijd. Maar het is moeilijk om een ​​waarde te vinden. Als je probeert om te vragen, is zeven in mijn lijst? Je moet doorlopen elke waarde. Is dit zeven? Is dit zeven? Is dit zeven? Is dit zeven? Over en weer. En dat is O (n). Dus bij het bestuderen van de quiz, vergelijk dit met arrays. 

Is dat goed? De lichten gingen afm. OK. Wanneer is een gelinkte lijst beter? Wanneer is een array beter? Dus laten we eens kijken naar enkele code. Hier is een potentieel knooppunt. Het is een structuur. Het heeft een int n, die zal onze waarde. En het heeft een struct knoop * volgende, die onze pointer naar het volgende knooppunt. Dus hier kunnen we zien dat we er gebeurd een int te hebben gezet in onze knooppunt. Maar als dit een gelinkte lijst van char sterren of een gelinkte lijst van praalwagens, we volledig kon dat ook doen. 

Vergeet niet in pset6, je had waarschijnlijk een gelinkte lijst van char sterren of gewoon static char arrays. Laten we eens kijken hier bij een operatie. Dus we willen een nieuwe in te voegen n in onze gelinkte lijst. We beginnen met een kop pointer die is een pointer naar dit knooppunt dat is de waarde van n en een volgend van een pointer die wijst op dit knooppunt is een waarde heeft van n en een volgende van nul, omdat het is de laatste knoop. Dus in het belang van de tijd, zal ik zet alle code op het scherm. En we zullen er doorheen lopen een paar regels tegelijk. 

Dus hier is de code. Ik hoop dat het leesbaar. Het eerste wat we doen is we malloc een nieuw knooppunt. Dus het is een pointer naar een nieuw knooppunt dat niet helemaal iets ingesteld in het nog niet. We controleren om ervoor te zorgen dat het nieuwe knooppunt is niet nul. Anders, we moeten opgeven. Dus hij is nagegaan of, nu we de waarden in de knoop. Dus hebben we de nieuwe n in onze n veld. En we stellen de volgende pointer te wijzen op de oorspronkelijke kop, zodat we kunnen Nu hebben deze geplaatst knooppunt aan onze lijst. 

Tot slot hebben we de wereldwijde hoofd punt onze nieuwe knooppunt, zodat als we beginnen bij het hoofd, zouden we op dit zijn nieuwe eerste knooppunt in plaats van de oude eerste knooppunt. En wanneer deze functie verlaat, de variabele nieuw knooppunt niet meer bestaat, omdat het lokaal voor de functie. Dus dit is de toestand van de wereld. Onze wereldwijde hoofd wijst naar onze nieuwe eerste knooppunt, wat wijst op onze originele eerste knooppunt, welke punten het knooppunt daarna. 

Dat was inbrengen. Ik hoop dat was relatief eenvoudig te volgen. Bij twijfel, een tekening. Dus ik vind dat het praten over gelinkte lijsten en kijken naar code is erg niet nuttig. Terwijl op zoek naar een foto van een gekoppelde lijst kan ik denken, oh, zo Ik heb dit knooppunt hier. Maar als ik dat wijzer te werken, het eindigt verbroken. En ik ben vergeten waar het knooppunt gaat. En de code verlaat. En u hebt meerdere nodes die zijn losgekoppeld. En je hoeft niet eindigen met de lijst die u wilt. 

Dus als je de foto te tekenen en doe het stap voor stap, hopelijk zie je de juiste volgorde der dingen in termen van bijwerken van de pointers om ervoor te zorgen dat de lijst bij elkaar komt. Insert is relatief eenvoudig. Een ingewikkelder zou zijn inbrengen in een gesorteerde lijst. Een ingewikkelder functie verwijderen en vinden, dus kijken door een lijst te zien of er iets is er. Misschien heb je dit deed in pset6 wanneer u ik heb in uw hash table en je zei, goed, is het woord appel in mijn gelinkte lijst? 

Dus misschien heb je al gedaan. Maar zeker, je geheugen opfrissen en probeer te ontdekken herimplementeren en herimplementeren verwijderen voor een gelinkte lijst. Leuke kant nota, er ook dubbel-linked lijsten, waar je aanwijzingen dat zowel vooruit en richt achteruit, zodat je zou kunnen gaan om de volgende knoop en naar het vorige knooppunt. En er was een vraag over de vorig jaar quiz van dat type, praten over dubbel-gelinkte lijsten. 

Nu, dat is een structuur die je bent relatief vertrouwd met, omdat de meeste van u waarschijnlijk gebruikt ze op pset6. Hier is er een die een beetje minder bekend. Als een kanttekening, ik denk dat Quiz 1 is vooral harder dan Quiz 0, omdat de dingen die je doet, je niet zoveel gedaan. Om dat op een andere manier, voor Quiz 0, je had een hoop C. schriftelijke En we vroeg je over C. 

Voor Quiz 1, gaan we je vragen over PHP en JavaScript, die u niet geschreven als veel. We gaan je vragen over C-code die je hebt niet zo veel van geschreven, deze geavanceerde C spul. Dus zeker, de praktijk van de spullen die we gesproken over in lezing die u niet per se te doen het probleem stellen. 

Spreken van die, heb je niet geschreven een stapel op een probleem stellen. Maar het was in collegezaal. Hier is de high-level beeld van opperen dat we elk jaar laten zien. Het is de stapel trays de Mather eetzaal. Op een hoog niveau, stapels zijn een last in, first out datastructuur. Dat betekent dat je gaat om dingen in te zetten - 1, 3, 7, 12, 14, 0 negatief. Het enige wat ik kon niet zei - negatief 3, 0. Je zet al deze dingen in En het laatste wat gebruikt is in de eerste een die gaat naar buiten te komen. 

Dus heb je twee operaties - push en pop. Alle van de invoering van dat ik was gebaren als deze zijn push. En toen ik bereiken in te grijpen iets of bereiken op de top te grijpen iets, dat is pop. Dus we gaan naar stapels implementeren. En we ze toonden in collegezaal met arrays. Maar je kon ze doen met behulp van gelinkte lijsten. Een stapel is een conceptueel data structuur, niet als een implementatie-specifieke. 

Dus wat zou dat eruit zien? Het eruit zou zien dit net zoiets als. Je zou een integer grootte. En je zou een array van waarden die bellen we bakken, want dat is wat de foto is voor ons - int trays - en vervolgens een aantal maximale capaciteit. Dus wat zou eruit duwen? Nou, als we een stapel s, vervolgens te duwen iets op s, zouden we de grootte van s. En dat zou de volgende kunnen zijn open plek van ons aanbod. Dus als we drie dingen in onze stack, dan trays 3 zou de volgende kunnen zijn open plek, omdat 0, 1, en 2 zijn al opgevuld. 

Dus hebben we de waarde in s.trays [s.size], de derde plek. En dan verhogen we s.size te zeggen, hey, hadden we drie dingen voor. Nu hebben we vier. Dus de volgende keer dat je duwt, je bent ga iets in 4 zetten. Of de volgende keer als je pop, je gaat om te kijken naar 3 in plaats van 4 of wat dan ook. En dan gaan we echt terug zeg, hey, dat is gelukt. Dit werkte. Als vuistregel geldt, indien een functie die is verondersteld om waar te keren of valse geeft altijd waar, je kan iets verkeerd hebben gedaan. Zo werkt dit? 

Nou, het werkt prima voor 1, en 2, en 3, en 4, en vijf. Maar laten we zeggen dat ik mijn capaciteit te bereiken. Ik heb dan een probleem tegenkomt, want indien formaat is hetzelfde als capaciteit ik nu proberen om iets in een zetten serie waar ik geen ruimte hebben. Dus een korte check dit op te lossen. Als s.size == CAPACITEIT, return false. Anders gaan en doen wat we deden. Dus wat kunnen we nog meer vragen over voor stacks? Wat moet je studeren? Wat moet je oefenen? 

Nou, implementeren pop. We deden al push. Ik zal dat bevestigen. Een implementatie niet-array, waarbij u een gekoppelde lijst te gebruiken, misschien. Een niet-int uitvoering. We deden hier ints. Maar het zou drijvers zijn. Ik kon strings zijn geweest. Het kon char sterren zijn geweest. Kijk naar het verleden quizzen voor de soorten vragen die we hebben gesteld over stacks. 

Ik zal zeggen dat we bedekt stacks rond hetzelfde als we ze hebben behandeld in de afgelopen jaren. Dus de quizvragen moet wel een goede indicatie. Moving forward nog sneller, wachtrijen. Ze zijn als stacks. Maar ze zijn first in, first out. Als je Britse bent, het woord wachtrij Waarschijnlijk maakte veel zin om jou. Anders kan je gehoord als een lijn. Ze werken als de lijn bij de Apple Store. De eerste persoon die opdagen op 03:00 in de ochtend is de eerste persoon om zijn iPad te kopen. 

Dus we hebben twee operaties - enqueue en dequeue. Enqueue zet iemand in de lijn. Dequeue trekt de eerste persoon van de lijn. Nogmaals, we kunnen implementeren dit met een array. Dus wat is de structuur die we toonde in college? Het was deze. Nogmaals, cijfers. Nogmaals, de grootte en dit nieuwe ding front. Waarom is er zoiets als de voorkant? Het is de index van de volgende element dequeue. Het is alleen intern bijhouden van de eerste man te laten zien, zodat we kan trekken wanneer we moeten. 

Zeker kijken naar dictaten en proberen te implementeren enqueue en dequeue bij het bestuderen van de quiz. Belangrijke dingen te denken. Wikkelen rond als de voorkant plus de grootte eindigt groter dan de capaciteit. Nogmaals, als je structuur is vol, zul je een probleem hebt. Hash tabellen die u eerder hebt gezien. De meesten van jullie waarschijnlijk geïmplementeerd deze op pset6. Het is een structuur die streeft naar O (1) constante tijd inbrengen en O (1) constante tijd opzoeken. 

In CS50, implementeerden we dit als een array van gelinkte lijsten. Het belangrijkste onderdeel van een hash table is de hash-functie. Dus: het zet je input, laten we zeggen, een woord uit het woordenboek, in een aantal, die gaat aan onze index zijn. En we zullen die index te gebruiken in ons aanbod. Dus hier is een schattig klein beeld van study.50.net. We gooien alle woorden in onze hash-functie. En de hash-functie vertelt ons waar deze woorden om te zetten. 

Dit is allemaal geweldig in het land waar er is maar een woord voor elke sleuf. Maar als je nog uit pset6, daar zijn meer woorden dan slots. Dus wat gebeurt er als je krijgen een botsing? In plaats van het opslaan van een waarde, laten we zeggen, hash tabel 3, u slaan een gelinkte lijst. En dus in plaats van het hebben van meloen hier, zou je een gelinkte lijst hebben, waar het eerste knooppunt is meloen. En de volgende knooppunt is cat. En het derde knooppunt botsing, laten we zeggen, want al deze woorden beginnen met C. 

Dus de meeste van jullie deed dit voor pset6. Als je een hash table niet te doen op pset6 en je zoiets geprobeerd een Trie, zeker herzien hash tables. Als je deed het op pset6, zeker beoordelen hash tabellen. En als je het deed op pset6 en het deed niet werken helemaal goed en je had veel moeite met het, zeker beoordelen hash tabellen. Dus de les is echt zeker beoordelen hash tabellen. 

Het overgrote minderheid van je geprobeerd out probeert op pset6. Hoog niveau beeld. Het is iets als dit, waarbij elke knooppunt heeft een set van kinderen, waarbij elke kind komt overeen met een letter. En elke knoop zegt ook, hey, ik ben een woord. Dus in dit geval het woord Maxwell, als je de M naar de A naar de X-W-E-L-L en volg het nog een. En je krijgt dit symbool, delta, die wij betekenen om bedoel dit is een woord. Dus Maxwell is een woord. Deze delta's zijn de hele betekenende die dingen zijn woorden en die dingen niet. 

Dus in pset6, de gegevens die we opgeslagen samen met een van onze knooppunten was: "Ik ben een woord. "En de koele ding over pogingen wordt zij aantonen inbrengen en opzoeken in O (lengte van een woord). Dus gewoon om door Maxwell krijgen, is het M-A-X-W-E-L-L. Dus zeven of acht - Ik kan niet tellen - stappen naar het einde en check dingen uit. Dus snelle implementatie hier. Rob ging door een gekoppelde lijst in zijn post-mortem. Dus check dat uit. Sorry. Ging door een Trie in zijn post-mortem. Dus check dat uit. 

Maar je in principe ieder knooppunt 27 verwijzingen naar de volgende knooppunten en een Boolean voor ben ik een woord. Check out Rob's postmortem hoe dit ook daadwerkelijk wordt uitgevoerd. Onze uiteindelijke structuur, onze bomen en binaire zoekbomen. Dus kijken naar deze, deze waren bedekt meest recent Week 8, maandag. Een boom is vergelijkbaar met een Trie, behalve jij hoeft niet per se 27 knooppunten op elk punt. En je hoeft niet deze gegevens bij elke stap die betekent of de - het pad is niet van belang. Overwegende dat een trie, de weg van boven naar bodem, Maxwell, was belangrijk voor ons. 

Maar ieder knooppunt meerdere kinderen, misschien. We hebben wat meer woordenschat. De wortel van de boom is aan de top. En we zeggen dat het zeer onderste knooppunten die niet hebben kinderen zijn bladeren. Dus als een Trie, een boom is een structuur van knopen. Een veel voorkomend type boom dat we gaan om te praten over een binaire boom, waar elk knooppunt heeft geen kinderen of een kind of twee kinderen. Dus deze foto is hier niet een binaire boom, omdat knooppunt 3 heeft drie kinderen. 

Maar als we deze, de rest negeren ervan een binaire boom, omdat het toont de eigenschap dat elk knooppunt nul, een of twee kinderen. Dus hoe kunnen we drukken dit in de code? We konden een knooppunt waar elk knooppunt heeft zijn een geheel getal erin, ook als een verwijzing naar de boom aan de linkerkant en een verwijzing naar de boom op de rechts, zodat de twee kinderen. Hoe is dit nuttig? Nou, als we regels over maken waar we zet nodes, kunnen we zoeken sneller. 

Dus er is een concept van een binary search boom, waar alle knooppunten in het links substructuur hebben een kleinere waarde dan het knooppunt waar we naar kijken. En alle knooppunten op de rechter deelboom een grotere waarde dan de root node. Nu, dat lijkt op een heleboel woorden. Ik ga het de binnenkant van dubbele zetten citaten en tonen u een foto. Hier is een voorbeeld van een binaire zoekboom. Zien dat we beginnen met 10. Alles wat links van 10 is kleiner dan. En alles naar rechts is groter dan het. 

Maar meer dan dat elk knooppunt in de boom drukt dit pand. Dus het knooppunt 7 een 3 bij de links en 9 naar rechts. Dus al die kleiner zijn dan 10. Maar kijkend naar alleen die, de 7 heeft 3 links daarvan en 9 tot zijn recht. En zo ook aan de rechterkant, 15 heeft 14 naar links en 50 rechts ervan. Dus de drie knooppunten daar, 15, 14, en 50, zijn ook geldig binaire boom of een geldige binaire zoekboom. En ze zijn allemaal groter dan 10. Dus ze mogen worden aan de rechterkant is er. Is er een vraag? 

Publiek: Hoe ga je om als heb je twee zevens? 

R.J. AQUINO: Ja. Hoe ga je om met twee waarden die hetzelfde zijn? Sommige binaire zoekbomen zeggen dat je negeren duplicaten, omdat het doel is alleen maar zeggen, ik heb gezien deze dingen tot nu toe. Sommige binary search bomen zou je kunnen zeggen een aantal in de knoop. Anderen kunnen zeggen dat alles naar Links is dan of gelijk aan. En alles naar rechts is groter dan. 

Het is maar net wat de probleem is dat je het oplossen bent. Dus in een woordenboek, bijvoorbeeld, u zou niet om duplicaten. Je zou ze weggooien. Maar een ander probleem dat u zou schelen. 

PUBLIEK: Is het mogelijk om een 1 links van 15, waarvan minder dan 10? 

R.J. AQUINO: Nee. Als de 14 hier waren 1, zou dit een geldige binaire zoekboom niet, omdat alles aan de rechterkant van 10 moet groter dan het is. En we zullen zien waarom. Indien in het land van search mijn doel is te vinden 14, begin ik aan de wortel. Dus ik kijk. OK. We gaan beginnen bij de wortel. Kijk naar 10. 

Nou, 14, onze doelstelling, is groter dan 10. Dus het moet aan de rechterkant. Dit is zeer vergelijkbaar met de gehele telefoon boek wat we deden, de binaire zoeken daar. Maar in plaats van binair zoeken in een array, we zijn binaire voor in deze boom. Dus we zijn nog op zoek naar 14. Nou, 14 is kleiner dan 15. Dus als het in onze boom, het moet in dit gebied hier. Het moet rechts van 10 en links van 15. 

En dus controleren we dit knooppunt. En yay, we hebben gevonden 14. Ik ben niet van plan om er doorheen lopen. Maar hier is de code. Het is eigenlijk relatief ongecompliceerd, omdat dit recursief. Wat kunnen wij u vragen te doen op een quiz? We kunnen u vragen om deze code te schrijven. We kunnen u vragen om te kijken naar deze code en wijzigen van deze code en uitleggen wat het doet. Yeah. Vraag? 

Publiek: Zijn deze dia gaat worden ter beschikking gesteld als ze waren de vorige keer? 

R.J. AQUINO: Ja. Dus deze dia's zal zeker worden geplaatst. 

PUBLIEK: Ze zijn eigenlijk geplaatst nu op de website. David deed precies dat. 

R.J. AQUINO: De glijbanen zijn nu op de website. Ik zal waarschijnlijk lappen een paar de typefouten merkte ik en ze op te lossen. Maar er is een stroom versie op de site. Andere dingen die we kunnen u vragen om te doen - schrijven insert. Schrijf een iteratieve versie van de recursieve functie die we net liet zien of praten over deze dingen, zoals in paragrafen, in woorden, in zinnen. Het vergelijken van de looptijden en uitleggen wat je zou willen om een ​​binaire gebruiken zoekboom voor in plaats van een hash table, bijvoorbeeld. 

Dus begrijpen deze structuren op een vrij diep niveau. Begrijpen hoe ze te schrijven, hoe te ze gebruiken, hoe om te praten over hen. En u zult allen worden ingesteld. Vraag? 

PUBLIEK: Als je het schrijven van de binaire zoekboom, hoe doe je bepalen welke waarde maken als de wortel? 

R.J. AQUINO: Dus de vraag is, wat waarde maak je als root? Afhankelijk van uw code, u kan een globale wortel hebben. Dus je kan waarschijnlijk hebben gehad in pset6 een wereldwijde hash table. Of je zou de wortel passeren in als argument. Dus deze zoekfunctie hier neemt een argument een knooppunt *. En dus wat knooppunt u zich ook bevindt kijken naar is degene die je behandelen als je root als je het passeren inch En ik ben helemaal klaar. Dat zijn mijn slides. De volgende persoon kan swap komen in een laptop en microfoon. 

ROB BOWDEN: Ik denk dat ik zou kunnen hebben geïnterpreteerd die vraag anders. Maar ik geïnterpreteerd als, als je de nummers 1, 2, en 3, hoe doen we weten om 2 de wortel maken tegenover 1 of 3? Als we 2 de wortel, dan is het mooi 1 en 3 naar links en rechts. Maar als 1 is de wortel, dan is 1 de bovenzijde, 2 rechts 3 naar rechts. Dus standaard, weet je niet wat aan de wortel te maken. En voor elk algoritme we verwachten te geven u, gewoon het eerste wat je insert zou de wortel zijn. Of we zouden u een binaire boom te geven dat bestaat dat een wortel heeft. Maar andere algoritmen bestaat zodat de wortel wordt bijgewerkt, zodat als je komen in de situatie waar het 1, 2, 3, zou het automatisch updaten om maken 2 het nieuwe root, zodat het is nog steeds mooi in balans. 

ANGELA LI: Cool. He, jongens. Ik ben Angela. En ik ga afsluiten onze C en ga dan naar een aantal van onze web technologieën - HTTP, HTML en CSS. Dus het eerste wat is buffer overflow aanvallen. Dus laten we eens een kijkje op deze code. Het is vrij eenvoudig. Er is een functie foo. En het geeft niets. Maar het duurt in een pointer om een ​​string genaamd bar. 

En het gaat om dit te verklaren buffer, wat een teken array die 12 slots heeft. En het maakt gebruik memcpy, dat is gewoon een functie die kopieën van een adres in een andere. Dus dit probeert te kopiëren naar onze buffer van welke bar wijst. Dus enig idee wat er mis is met deze code? 

PUBLIEK: Als bar is langer dan C, zullen ze overschrijven. 

ANGELA LI: Ja, precies. We hebben geen garantie dat bar zal minder zijn dan 12. We maakte een willekeurig nummer 12. En wij hadden zoiets van laten we hopen dat onze input van de gebruiker is minder dan 12 tekens lang. Dus in een ideale wereld, als onze inbreng is altijd zoals verwacht, dan zullen we zoiets als: hallo. Dat is minder dan 12 tekens. Het wordt ingelezen in char c. En dan doen we iets mee. Het maakt eigenlijk niet uit. 

Maar een kwaadwillend persoon zou kunnen doen iets meer als dit, waar ze geef ons wat bar naar wijst, het gaat om te wijzen op dit enorme scala van alleen A's. En dit is veel langer dan 12. Dus het gaat om de hele weg te gaan hier beneden naar waar het rendement adres gebruikt te worden. Dus laten we zeggen deze functie heet foo. Misschien foo werd door een andere functie, die werd genoemd door de belangrijkste. Dus als foo loopt, moet om te weten waar om terug te keren naar. 

Als foo werd gebeld door een functie met de naam baz, moet weten dat het moet terug naar baz gaan. En dat is wat deze retouradres hier beneden is ons te vertellen. Maar als we overschrijven met een aantal andere adres, in dit geval, is een vertegenwoordiging van het adres op de begin van deze buffer, dan wat er daadwerkelijk gaat gebeuren, is dat in plaats van terug te keren naar baz, die onze functie genaamd, het is gewoon ga naar de voorkant van deze code. 

Als dit was omdat kwaadwillende hacker kerel kwam en geïnjecteerd dit, dan misschien dit bedrag van de A's is niet echt A's. En het is eigenlijk gewoon code die breekt uw computer of iets. Dus om defensief over dit soort zijn ding, moet je nooit aannemen dat gebruikersinvoer is een zekere aantal karakters. Bijvoorbeeld, als je gebruik maakte speller, werd je verteld dat woorden waren alleen maar 40 tekens lang maximum. En dat was goed. 

Maar zo niet, dan zou je zorg ervoor om alleen te lezen in 45 tekens per keer. Anders kan je overschrijven uw buffer. Eventuele vragen over dat. Yeah. 

PUBLIEK: Kun je praten een beetje meer over deze? 

ANGELA LI: Sorry. Ja. 

Publiek: De microfoon is alleen voor video. Ik zal proberen en projectmanagement. Hoi, jongens. Sup? Dus laten we gaan over een paar dingen in de CS50 bibliotheek, die je hebt gebruikt hele semester, meestal om invoer van de gebruiker te krijgen. Zoals u weet, vind je oa CS50 bibliotheek door gewoon CS50.h, doen die bevat alle prototypes van de functies die u kunt gebruiken, zoals GetString en getint, en GetFloat, et cetera. En er is dit een regel in de CS50 bibliotheek die een reeks definieert, waarbij jullie inmiddels allemaal weten is gewoon een char *. 

Maar laten we eens een kijkje op hoe GetString werkt. Dit is een zeer verkorte versie. U kunt trek de CS50 bibliotheek bestanden uit, denk ik, manuals.CS50.net. En u kunt door te lezen de eigenlijke functie. Maar dit dekt een deel van de belangrijke onderdelen. Dus hebben we een aantal buffer gecreëerd met enige capaciteit. En wat we doen is krijgen we een teken in een tijd van standaard n. Dat is waar de gebruiker ingangen tekst in de console. 

En dus gaan we lezen in een karakter, zolang het niet een nieuw lijn en het is niet het einde van het bestand, dat het einde van standaard invoer. En voor ieder karakter dat lezen we in, als dat karakter eindigt het toevoegen om het aantal tekens hebben we gelezen en in dat meer dan ons vermogen, dan wat we doen is dat we gewoon formaat onze buffer zodat het twee keer zo lang. Dus nogmaals, deze beschermen tegen buffer overflow aanvallen, want je leest in een karakter per keer. En als u op enig moment ook te lezen in veel, je gewoon uitbreiden van uw buffer. Je vermenigvuldigen met twee. En dan heb je meer ruimte. 

Anders moet je gewoon toevoegen een teken buffer. En nadat je hebt gelezen in alle karakters, zal de buffer verkleinen terug naar de normale grootte, voeg een null terminator, en dan terug. Laten we nu eens kijken naar getint. Kunnen jullie dit lezen? Ik kan in een beetje te zoomen. Ik weet niet hoe computers werken. Maakt niet uit. Ik kan niet goed zoomen. 

Dit is echt moeilijk. Het spijt me. Laten we gewoon kijken naar dit. Dus wat getInt doet is het voor het eerst leest in een string van GetString, die we eerder hebben geïmplementeerd. En het belangrijkste onderdeel om hier op te merken is als dit delen dat het eindigt lezen is als het niet echt een string, dan we gewoon terug INT_MAX naar vertegenwoordigen mislukking. Waarom hebben we terugkeren INT_MAX plaats van negatieve 1 of 1? Het even welke ideeën? 

PUBLIEK: [onverstaanbaar] negatieve 1 op een. 

ANGELA LI: Ja, precies. Dus je bent veel meer kans om gewoon wilt ingang 1 of negatieve 1 als daarom wordt gevraagd voor een n en wat n maxes. Het is enorm. Je bent waarschijnlijk niet van plan om het te gebruiken. Dus dit is als een ontwerp besluit tot zorg ervoor dat u niet per ongeluk een foutmelding of je niet terug 1, die kan worden geparseerd als een juist antwoord. Dus als een regel niet bestaat, we terug RC-MAX. Anders gebruiken we sscanf, die is als scanf. Maar het leest uit een string. 

En we hebben dit opgemaakte koord, dat is% i% c. En we proberen en match dat met wat de gebruiker gaf ons. We willen het aantal passende dingen zijn 1, hetgeen betekent dat we alleen echt willen een integer passen omgeven door misschien wit ruimte, misschien ook niet. In dit geval, als je in iets zoals bar, is bar niet overeen helemaal niet, want er moet worden een geheel getal in het begin. Dus sscan nooit gedraaid 0. Dus je hoeft niet terug dat. 

Als alternatief, als je in iets zoals 1, 2, 3, A, B, C, die gelijken zowel de integer maar ook het teken na het. Dus sscanf zal terugkeren 2, die is niet ideaal. Je wilt niet 1, 2, 3, A, B, C een geldige int. Dus dat werkt ook niet. Maar zeggen dat je in iets als 50. Die overeenkomen met de% i, waardoor het zal krijgen te lezen in n. En nu, n zal het nummer 50 bevatten. En dan kun je het terug. 

Anders, je raakt Opnieuw. En dan gaat het gewoon weer totdat krijg je een goede input van de gebruiker. Heeft u vragen over zeggen? 

PUBLIEK: Dus als je om uit te printen de waarde van de getInt op [onverstaanbaar] zou het gewoon de integer en max? 

ANGELA LI: Yeah. Dus als je getint gebruiken, moet u ervan uitgaan dat je niet wilt nde max een geldige ingang, want je gaat te veronderstellen dat was slecht. 

PUBLIEK: Als we niet hebben char c en iemand zet in 1, 2, 3, Sam, zou het nog werken voor 1, 2, 3? 

ANGELA LI: Ik denk dat het zou werken. Maar je wilt niet 123Sam aan een geldige invoer door een gebruiker. Dat is niet echt een int. Dus het lijkt niet eerlijk om het te ontleden als een int. OK. In dat geval, vooruit op het internet. Dus HTTP is geen taal. HTTP is gewoon de set van normen voor hoe je dingen van klanten te sturen, dat ben jij, om servers. Dat is andere mensen op het web. 

Dus HTTP staat voor Hypertext Transfer Protocol. Het is het hart en ziel van het hele web. De hypertext deel net verwijst naar HTML. De overdracht is klanten zoals u aanvragen naar servers, die antwoorden geven. En het protocol is slechts, hoe je verwacht een server te gedragen? En hoe moet je dan te gedragen zodat u dit kunt stroomlijnen communicatieproces? 

Dus HTTP-verzoeken lijken erg op deze. GET is het type aanvraag. Jullie zijn GET verzoeken gezien en POST-aanvragen. Dat tweede ding daar, / me, dat is gewoon de URI of de URL waar u willen gaan binnen de gastheer. Dus dit verzoek vraagt ​​om de pagina, zoals www.facebook.com / me. En het is een GET-aanvraag. En dan is dit HTTP/1.1, dat is gewoon de versie van HTTP u gebruikt. Het is bijna altijd 1.1. 

En dan is er nog een heleboel andere dingen ook. Je kunt eigenlijk zien deze als u open je console als je surfen op het web. Reacties kijken iets meer als dit. Het bovenste deel is, opnieuw, de type HTTP u gebruikt gevolgd door een status-code. Dus 200 OK is alles werkte. Hier is uw inhoud. Uw content gaat volgen. En dan zal het u vertellen wat voor soort van inhoud en andere dingen ook. 

De status codes, zijn er een paar belangrijkste zijn dat je moet weten. 200 OK is als gouden alles is. Alles werkt. 403 Forbidden. Dit heb je waarschijnlijk gezien als u vergeten iets goed chmod. Het betekent dat je niet hoeft de juiste rechten om toegang tot die op de server. Het is net, nee, je kan het niet zien. 404 betekent dat ding niet bestaat. Niet gevonden. U heeft waarschijnlijk gezien dat veel. 

500 Internal Server Error is meestal als er iets fout aan de kant ging van de server. Dus toen je uitvoering pset7, als je PHP fouten had, kon je eigenlijk naar de pagina en je ziet een hele hoop PHP fout spul. Maar dat betekent niet normaal het geval is, omdat websites niet echt willen u vertellen waarom hun site is gebroken. Ze zullen waarschijnlijk gewoon weer een 500 Internal Server Error. 

En dan is er nog 418 Ik ben een theepot. Er zit een heel verhaal over waarom dat is een ding. Maar je kunt lezen over dat in je eigen tijd. Er is een hele hoop andere status codes ook. Maar dit zijn degenen je moet weten. Dus laten we praten over HTML. HTML, herinner, is geen programmeertaal. Het is een opmaaktaal. Dat betekent dat het beschreven inhoud. Het vertelt u wat een HTML document ziet er achtige of niet wat het lijkt maar hoe het is opgebouwd. 

Dus definieert een structuur en semantiek van webpagina's. Het is net, dit is een paragraaf. Dit is een geordende lijst. Dit is als een deel van mijn pagina. Hier is de titel. Het doet dat soort dingen. Het doet er niet stijl van een van die, omdat dat is wat je doet in CSS. En het lijkt op een reeks van geneste tags. Dus om een ​​voorbeeld van een heel basic te gebruiken HTML-pagina, je hebt de DOCTYPE verklaring daarboven. 

Dit DOCTYPE-declaratie is zeggen, dat we met behulp van HTML5. Dan heb je de grote HTML-tag. Het bevat een kop en lichaam. In het hoofd, je hebt de titel. Dat is wat er in de titel balk van uw browser. We hebben een link-tag die links in een externe style sheet. En dan hebben we een script dat trekt van een extern JavaScript ook. 

En dan in ons lichaam is eigenlijk wat er wordt getoond op de pagina. We hebben een paragraaf kreeg en vervolgens een afbeelding in die paragraaf. Dit is een foto van kittens. Merk op dat het beeld tag sluit zelf. Dus in plaats van het openen met een afbeelding en dan doet een ander / image, je gewoon deze kleine slash hier, waar het sluit. En het beeld tag heeft ook deze toets attribuut waarde genoemd alt. Dat is de alternatieve tekst die gebeurt wanneer u de muisaanwijzer over. 

De meeste HTML-elementen hebben een aantal belangrijke waarde dingen die je kan geven, diverse maatwerk. Yeah. 

PUBLIEK: [onverstaanbaar]. 

ANGELA LI: Nou, dus het is een attribuut van de tag. Dus als je met behulp van jQuery, je kon doen select image.getAttribute. En dan kunt u zoeken naar krijgen het alt attribuut. En het zal u kittens geven. Als je nog formulieren in HTML, ingang elementen zullen moeten naam attributen. En dat is wat PHP gebruikt voor het verzenden verzoeken wanneer een formulier wordt ingediend. 

PUBLIEK: Heb je iets te noemen over hoe als je kittens.jpg gebruiken of iets dat de ontbrekende heeft bestandsmappen of andere bestanden? 

ANGELA LI: Ja. Dus dit is wat heet een relatieve pad, want ik geef niet u het volledige pad. Dit is net als in C als je fopen doen een bestand, als je fopen hi.txt, dat hi.txt verwachting in dezelfde directory, tenzij je het een meer complex pad. 

PUBLIEK: Dus je zou kunnen aangeven welke map [onverstaanbaar]? 

ANGELA LI: Yeah. En je kunt opzoeken hoe dat te doen. Maar als ik wilde kittens.jpg eruit te komen van de bovenliggende map, zou ik doen .. / Kittens.jpg. Yeah. Sorry. Yeah. Oh man, ik vergat de vraag. Wat was de vraag? Oh, was de vraag is, kittens.jpg naar verwachting in dezelfde map? En in dit geval is. Maar je kunt ook geven een bepaald pad zodanig dat het niet zo te zijn. Goed? 

CSS. Dus CSS, zoals HTML, niet een programmeertaal. CSS is gewoon een serie styling regels. Het staat voor Cascading Style Sheets. En je het gebruikt in combinatie met HTML-stijl pagina's. Zo zijn er drie manieren u kunt opnemen. Een manier kunt u het doen is in het hoofd gedeelte van uw HTML, kunt u gewoon open een stijl tag en dan vasthouden sommige CSS-regels in. Het is vrij OK. Yeah. 

Publiek: Kunt u zet die stijl tags in tussen, laten we zeg, lichaam en / lichaam. En dan zou je styling Slechts lichaam. 

ANGELA LI: U kon. Het zal werken. Maar je moet niet, want styling is soort van de metadata die moet gaan in het hoofd van uw document. Lichaam moet echt alleen bevatten wat er daadwerkelijk gaat weergegeven op uw pagina. 

PUBLIEK: Dus je zou stijl zetten in je hoofd om te stylen hele webpagina, toch? 

ANGELA LI: Yeah. Dus zetten stijl hier, deze CSS-regels geldt voor de gehele pagina op basis van hun selectors. Dus de betere manier om het te doen is in plaats daarvan van het hebben van een stijl-tag in je hoofd, u op deze link naar een externe stijl hebben sheet zoals ik liet zien in de vorige voorbeeld. Wat dit doet is het probeert en vindt de bestand style.css en dan trekt het in en gebruikt die als stijlen voor de pagina. En je style.css zou net zo uitzien. Het zou gewoon een stelletje CSS zijn. 

En dan is er nog een andere manier waarop je kan omvatten CSS, die u echt mag nooit doen. Het is oproep inline styling. En dus elke HTML-element kan ook neem een ​​attribuut stijl. En dan in die stijl attribuut, je kunt het CSS-regels geven. Dus in dit geval, wat div ik ben het definiëren van hier, het gaat om hebben een zwarte achtergrond en een witte tekstkleur. Maar je moet dit niet doen, want wat dit doet is het zet je styling in uw HTML. 

En ik weet dat we hebben gepraat over HTML is structuur en CSS is stijl. Als u dit doet, het mengt ze samen. En het is niet erg schoon. Dus doe dat niet. Met behulp van een voorbeeld van CSS, daarboven, we selecteer enkel het lichaam van de HTML documentaire. En we zijn net, alles is gaat worden Comic Sans. Ik heb ook niet aan te raden dat. Maar je kon doen. 

De tweede regel hier, het gaat om het element op het selecteren pagina met ID belangrijkste. Dus wat HTML-element, zei ik ID = Belangrijkste, ik ga dat een te geven 20-pixel marge en uitlijnen alles, alle tekst, naar het centrum. Het laatste wat selecteert door CSS-klasse. Dus elk element op de pagina die ik gaf een sectie-klasse, ik ga om het te maken een achtergrond kleur van het licht blauw. Yep. Dat is alles wat ik heb. Vraag? 

Publiek: Wat doet de hashtag voordat belangrijkste doen? 

ANGELA LI: De vraag is, wat doet de hashtag voor belangrijkste do? In dit geval, de hash CSS betekent selecteer op ID. Dus als ik had wat HTML-element, zoals divid = belangrijkste, deze CSS-regel selecteert het ding met ID belangrijkste. En evenzo, de periode voor sectie is geselecteerd door CSS klasse of selecteren door HTML-klasse. 

PUBLIEK: Waarom is er een heeft vóór 6 op de achtergrond kleur? 

ANGELA LI: Yeah. Dus de vraag is, waarom is er een hash voor de 6? Dit is anders dan die hash. Dit betekent dat je geeft een hexadecimale kleur. Dus hex kleuren, dit enkel stelt een kleur. En vergeet niet je RGB triples als u het forensisch PSET deed? Dit is vergelijkbaar. De eerste twee cijfers geven hoeveel rode is in de kleur. De tweede twee vertegenwoordigen hoeveel groen. En de derde vertegenwoordigt hoeveel blauw. En de hash is dit gaat een kleur vertegenwoordigen. 

Dus alles uit 0, 0, 0, 0, 0, 0 tot F, F, F, F, F, F geldig is. Het is een aantal geldige kleur die kan worden weergegeven door uw browser. Vraag? 

Publiek: Wat is het verschil tussen met behulp van ID en per klasse? 

ANGELA LI: De vraag is wat er het verschil tussen met behulp van ID en klasse? U kunt slechts een element in een HTML-document dat een bepaalde ID heeft. Dus maar een ding op mijn pagina mag ID main hebben. Zodat u het voor dit is de header. Dit is de navigatie. Dit is de voettekst. Klassen zijn anders, want je kunt klassen toepassen om zo veel HTML-elementen als je wilt. 

Dus bijvoorbeeld, ik heb klasse sectie, want er is waarschijnlijk meer dan een sectie op mijn pagina. Je bent gewoon toegestaan ​​om zo velen hebben elementen op de pagina met dezelfde klasse, maar slechts een met een bepaalde ID. 

PUBLIEK: Dus de stip staat de klas? 

ANGELA LI: Yeah. Een punt staat voor een klas. Cool. Dat is alles wat ik heb, jongens. Dank u. 

[Applaus] 

ZAMYLA CHAN: Hallo, iedereen. Ik ben Zamyla. Ik ga worden met betrekking tot PHP, MVC, en SQL vandaag. Een groot deel van het materiaal dat ik zal bedekking gaat vrij veel te zijn recht uit pset7. Oke. Dus wat is PHP? PHP staat voor PHP Hypertext Preprocessor. Dus, is op zich een recursief te noemen, dat is pretty cool. PHP is een server-side scripting taal, en het biedt de backend en de logische onderbouwing van onze website. 

Dus Angela sprak veel over de HTML en CSS die de structuur maken van de website. Maar wat als u wilt wijzigen dat inhoud dynamisch of als het afwijkt basis van de gebruiker of bepaalde voorwaarden? Dat is waar PHP komt binnen Nu, meestal, PHP neemt mogelijk minder regels voor de uitvoering van hetzelfde in C. Dat komt omdat PHP omgaat geheugen management voor de programmeur, in tegenstelling tot ons hoeven malloc vrij, dat soort dingen. 

Maar omdat PHP is een interpretatieve taal, typisch, kan het uitvoeren een beetje langzamer dan C, die is een gecompileerde taal. Omdat we bewegen programmering talen, laten we eens kijken naar hoe de syntaxis zullen verschillen. Laten we heel voorzichtig zijn niet te raken in de war met dit. Dus met PHP syntax, of u nu inbedden van uw PHP binnenkant van een HTML bestand of binnen een. php bestand zelf, je moet de code insluiten in de open PHP en de gesloten PHP tags zoals volgt, zoals op het scherm. 

Variabelen in PHP. Elke variabele begint met het $-teken gevolgd door de naam van de variabele. Nu zijn variabelen in PHP losjes getypt, wat betekent dat je niet nodig hebt aan te geven wat het datatype is als je aangifte te doen. Echter, dit betekent niet dat ze hebben geen types helemaal. Dus als ik een variabele declareert en stel gewoon het gelijk aan 1, en dan verklaar ik een andere variabele, stel deze gelijk aan "1" en dan nog een 1.0, goed, afhankelijk van het soort gelijkheid operatoren die ik gebruik, als ik wil vergelijken in alle, dan ze zullen gelijk zijn. Maar als ik wil ervoor zorgen dat de types gelijk zijn, kan PHP nog steeds doen dat, hoewel we niet aan te geven wat voor soort het is wanneer we eerst het bestand te maken. 

Nu, in PHP, ook al zijn we omschakelen van de programmering talen van C, we hebben nog steeds onze betrouwbaar als voorwaarde, net als dit. We hebben nog steeds onze while loops, net als dit, waar je in je staat en vervolgens de lichaam van de lus. En dan hebben we ook onze lus, die meestal ziet er zo uit. Dus als ik wilde itereren over alle negen psets en legt en bel een functie submitPset, dan kan ik dat doen hier, die jullie hebben allemaal gedaan door dit punt. Gefeliciteerd, trouwens. 

Voor de camera, mensen zei, dank je. Nu, als je niet wilt deze gewoon gebruiken lus, dan PHP eigenlijk ook heeft dingen geroepen foreach loops. Dus als ik een array van integers, 0 tot en met 8, die zijn opgeslagen in de array psets, dan kon ik een foreach lus hebben dat doorloopt elk nummer in psets. En toen kon ik het zelfde noemen functioneren acht keer, net zoals ik deed voorheen. Dus dit voor elke lus is leuk, want je hoeft niet als je niet weet de exacte lengte van de array die u hebt, dan met behulp van deze foreach lus zal zorgen dat voor je doen. 

Dus maakte ik psets als een array. Laten we eens kijken naar dat. Arrays in PHP zijn grotendeels hetzelfde als degenen die we in C, heb gehad waar kunt u een array declareren. En hier, kan ik verklaren een lege array en dan bouwen dynamisch met behulp van indices als gehele getallen. Dus index 0, ik ga slaan een geheel getal genaamd 1. Bij index 1 van mijn lijst, ik ga de waarde 2 slaan. En op de derde index, maar de tweede nummer, ik ga sla het nummer 12. 

Nu, dit is prima in dat werkt het werkt goed. Maar zeggen het is belangrijk voor mij wat elke index houdt. Voor mij, index 0 betekent dat hoe veel katten ik heb. En de index 1 betekent hoe veel uilen die ik heb. En de volgende betekent hoeveel honden. Nou, dan is het aan te geven dat, in plaats van het hebben van te onthouden 0 heeft betrekking op katten en 1 tot uilen, kan ik gebruiken associatieve arrays, waardoor in plaats van gehele getallen als mijn indices, Ik kan eigenlijk gebruiken snaren. 

Dus dit is zeer handig. En je hebt eigenlijk gewoon vervangen de gehele getallen met strijkers. En daar heb je een associatieve array. Yeah. 

PUBLIEK: Is er een reden waarom er een underscore voor de tweede deel, omdat mijn lijst heeft de array. 

ZAMYLA CHAN: De vraag was, is er een reden waarom er een underscore tussen mijn en overzicht? Nee. Dat is gewoon hoe ik het benoemen mijn variabele. 

PUBLIEK: Op de eerste lijn, het is een woord. 

ZAMYLA CHAN: Mijn excuses. Ik zal dat bevestigen. Yeah. Zij moeten dezelfde variabele naam zijn. Goede vangst. OK. Dus laten we verder gaan naar een string aaneenschakeling. Als ik wilde twee snaren te nemen, dan kan ik ze samenvoegen de puntoperator. Dus als ik Milo als een voornaam en Banana als een achternaam, dan aaneenschakelen met de stip operator en dan beginnen met een spatie tussen zal een string dat Milo bevat maken Banaan, die ik dan kan echo of, eerder, uit te printen. 

Spreken van echo, laten we praten over een paar nuttige - oops. Het spijt me. Een paar handige PHP-functies. Dus hebben we het - technische problemen. Een seconde. Ik stuurde het. PowerPoint problemen. En we zijn terug met PHP functies. En we zijn terug met PHP functies. 

Dus we hebben het nodig functie, waarbij als je pas in een bestand, hier is is gewoon een voorbeeld van een bestand Ik zou pas in Dan zal dat ook de PHP-code uit dat bestand dat ik aangeven. En het zal evalueren dat in Dan hebben we ook echo, die is een parallel te printf. Exit is een parallel te breken, die het blok van verlaat code die je bent binnen En dan leeg controleert of een bepaalde variabele is als nietig of nul of wat wordt gelijkgesteld met het zijn leeg. Yeah. 

PUBLIEK: Voor de tekenreekssamenvoegingsoperator operator punt een, in PHP, is dat de dezelfde als in JavaScript waar het gebruik de stip voor aaneenschakeling betekent plus? Dus voor volledige naam, je kon dollar hebben ondertekenen eerst + en dan + mee? 

ZAMYLA CHAN: Yeah. Dus de vraag was of in PHP we kan dezelfde tekenreekssamenvoegingsoperator gebruiken zoals in JavaScript met de pluspunten. En Jozef zal later op ingaan. Ik denk dat hij een dia op dat. Eigenlijk, is het anders. Dus in JavaScript, moet u gebruiken de plus om tekenreeksen samen te voegen. En in PHP, moet je Gebruik de operator punt. Dus ze zijn anders. 

OK. Dus nu dat we allemaal hebben behandeld dit PHP, waar doet het echt van pas komen? Nou, het is altijd handig als we het kan combineren met onze HTML. Dus onze PHP zal ons de kracht geven om HTML-inhoud van een pagina voorafgaand aan veranderen het laden. Dus op basis van verschillende omstandigheden, meestal de specifieke gebruiker die ingelogd, kunnen we weer verschillende informatie. Linda, heb je een vraag? 

Publiek: Kunt u aaneenschakelen een geheel getal ook? 

ZAMYLA CHAN: Ja, dat kan. De vraag was dus als je kunt aaneenschakelen integers of andere variable.s nu, gaan we over naar MVC, die is een paradigma dat we in pset7 en veel webdesigners gebruiken voor het organiseren van de code in de bestanden in hun website. M staat voor Model. En eigenlijk, model bestanden zal behandelen met interactie met de database. Bekijk bestanden, deze betrekking hebben op de esthetiek van de website. En de controller handgrepen verzoeken van gebruikers, parseert gegevens, doet andere logica. 

In pset7, combineerden we het model en de controller. En we noemden ze controllers en zet ze in de publieke map. En de bestanden bekijken, gebruiken we ze als sjablonen in de templates directory. Dus dit diagram vertegenwoordigt hier ook dat dezelfde soort divisie met de model en de controller in paars hier op de linker-en het uitzicht aan de rechterkant. Dus dit is een schema dat sommigen van jullie misschien hebt gezien op Office Hours of diagrammen dat we tekenen zoals u werden het uitzoeken van uw PSET. 

Hier, in een bepaalde controller, een model controller, hebben wij functies die betrekking hebben bevragen SQL database uitvoeren PHP logica. Misschien zou je kijkt omhoog een voorraad in Yahoo! Financiën. Of misschien wil je gewoon controleren om zien of een gebruiker had ingediend een vormen al voordat bezocht uw pagina. En dan zou je maken een formulier hier. Na die vorm was ingediend door de gebruiker, de actie die was gespecificeerd in HTML-tag van het formulier zou de pagina geven dat het retourneert deze gegevens aan. 

Dus al die informatie zou zijn teruggestuurd naar de controller. Dan zou je waarschijnlijk een beetje meer te doen logica die uitgevoerd en misschien een paar meer query's in de SQL-database en En dan, eindelijk, komen met een mooi verpakt set van informatie die u zou passeren in een andere template dat weergegeven die informatie. Nu, hoe kunnen we eigenlijk verpakken die informatie up? Nou, we hebben een functie genaamd Render dat was in de functions.php bestand in pset7, waar je pas in de naam van een bestand, de naam van een sjabloon. 

En dan heb je ook langs in een associatieve array. En zodat associatieve array vertegenwoordigt de verschillende informatiebronnen dat u langs wilt komen inch Nu, wat is er constant in zijn deze voorbeelden is dat de sleutels of, veeleer de sleutels van de associatieve arrays, die zijn wat gaat worden wordt constant gehouden door het sjabloon is, omdat het weet het moet iets geroepen bericht of opgeroepen naam. En dan de dingen op de juiste, de werkelijke waarden, dus in dit geval, wie een goede jongen en Milo, die gaan de waarden veranderen zijn dat de controller verandert elke keer of gebaseerd op een bepaalde toestand en zal passeren dat binnen 

Dus hier in sjablonen, zien we dat we worden met behulp van HTML speciale tekens, die net in feite betekent dat we willen de peer-snaar te krijgen dat de gebruiker zet inch En we willen vervangen bericht daar. Dus toen we daadwerkelijk bekijken het bestand, de specifieke informatie wordt doorgegeven inch Merk op dat de sleutel hoe maken de werken dat de sleutels van de associatieve arrays, die worden variabel namen hier. En zo de waarden van die toets in de associatieve array wordt dan de waarde van de variabele. 

Nu, laten we overgaan tot SQL. Het staat voor Structured Query Language. En dus dit is gewoon een programmeertaal taal ontworpen voor het beheren van databases. En het kwam goed van pas voor ons in onze pset7 finance website. In wezen, het is gewoon een makkelijke manier om bijhouden en beheren van objecten en tabellen en koppelen aan elkaar. Nu, denk aan uw SQL-database in principe als een Excel-bestand, misschien, met meerdere tabbladen vellen. 

Dus je zou kunnen meerdere tafels hebben, misschien dat elkaar verbonden. En net als Excel, hebben we veel van de functionaliteit die we willen. Zo kunnen geselecteerde bepaalde rijen. We kunnen informatie invoegen. We kunnen rijen updaten. En we kunnen ook dingen verwijderen. 

De SQL select werken door het selecteren van rijen of een rij van bepaalde kolommen uit een database die aan een bepaalde criteria die u aangeeft. Dus hier als ik zie select * from wizards waar huis = Ravenklauw, dan Ik selecteren *, wat betekent dat ik ben het selecteren van elke kolom in dat rij van de tabel wizards maar alleen als de kolom huis gelijk Ravenklauw. Nu, dit is pure of SQL. Dus als ik ging in PHPmyadmin, dat is de specifieke manier die we gebruiken om te beheren onze SQL-databases, dan kon ik steek dat in de PHPmyadmin website. En dat zou uitvoeren. 

Maar we eigenlijk willen doen dat op de PHP kant. Dus hoe kunnen we dat doen? Nou, maken we gebruik van de query-functie, die voert in feite dat SQL-query. Met behulp van? als plaatsaanduiding, kunnen we overgaan in bepaalde waarden onze tekenreeks die we wilt vervangen. Dus misschien ben ik het opslaan van verschillende waarden in de curr_house die vertegenwoordigt de huidige woning dat ik ga door. Dus ik kan doorgeven dat in als een tijdelijke aanduiding met het vraagteken. En dan zal ik in principe voeren de hetzelfde als ik eerder deed, behalve nu ben ik in PHP. 

En vraag zal terugkeren een associatieve array. En ik ga het op te slaan in rijen. Nu kan vraag altijd mislukken. Misschien is de SQL-query kan niet worden uitgevoerd omdat de tabel niet bestond. Of misschien, de kolom niet bestond. Er ging iets mis. Nou, in dat geval zult u wilt maken ervoor dat u controleren of de vraag false is. En dat is met behulp van de drievoudige is gelijk aan de werking daar. 

En dan verontschuldig ik, dat is een andere CS50 functie, passeren in een bericht. En als je kijkt naar excuses, al werkelijk doet is de render apology.php. Yeah. 

Publiek: Kunt u wat dat uitleggen ster doet tussen selecteren en uit? 

ZAMYLA CHAN: Ja, absoluut. Dus de ster in tussen selecteren en uit betekent dat ik wil de hele selecteren hele rij van mijn tafel. Ik kon select heb aangegeven naam, jaar, huis. En ik zou alleen maar die drie kolommen in mijn tabel. Maar als ik zeg select *, dan zal ik krijg alles in die kolom. Dan ga ik je gaan in de eerste de rug. 

PUBLIEK: Dus dit is nog steeds in SQL, toch? Is deze query of is dit PHP? 

ZAMYLA CHAN: We zijn in een query. Dus dit is in PHP. Dus met behulp van de PHP functie query, we zijn het uitvoeren van een SQL-query. 

PUBLIEK: Is er iets in SQL hoofdlettergevoelig, zoals selecteren of wizards of huis? 

ZAMYLA CHAN: Is er iets in SQL hoofdlettergevoelig? Ik geloof het wel, ja. Ik geloof dat SELECT en FROM En waar zijn hoofdlettergevoelig. Nee? 

ROB BOWDEN: Dus, het is het tegenovergestelde. De kolom namen en de tafel middelen, al deze zijn hoofdlettergevoelig. Maar een van de MySQL sleutelwoorden, zoals SELECT, FROM en WHERE, die zijn niet hoofdlettergevoelig. OK. Dus het tegenovergestelde van wat ik zei. Dus al de MySQL zoekwoorden - kiezen, uit, waar - die zijn niet hoofdlettergevoelig. Maar alles is. OK. Je aan de voorkant. 

PUBLIEK: Als ik rijen zijn $ in termen van meer dan een rij, betekent dat dan is net wordt een associatieve array? 

ZAMYLA CHAN: Dus de vraag was of rijen heeft meer dan een rij in, doet het uitgegroeid tot een associatieve array? Het is dus een reeks associatieve arrays reeds. Dus zelfs als er maar een rij geretourneerd, dan zou je moeten gaan naar index 0 van dat resultaat. En dan zou je die eerste rij. Ja, Belinda? 

PUBLIEK: Wanneer u === gebruiken, is dit de enige keer? Of zijn er nog anderen? 

ZAMYLA CHAN: Dus in dit geval, === is een vergelijking tussen soorten. Sorry. === Is een vergelijking dat vergelijkt het typen. En dan == vergelijkt in alle soorten. 

Publiek: Kunt u uitleggen wat rijen in deze situatie? Is het rij gegevens? 

ZAMYLA CHAN: In de volgende dia, ik ben ga uitleggen wat rijen is. Dus als je het niet erg houden korting op dat. En dan moet je in de rug? 

Publiek: Voor functies zoals query, maken en zich verontschuldigen [onverstaanbaar]? 

ZAMYLA CHAN: De vraag was of deze functies - query, verontschuldigen, en maken - zijn gebruikelijk in PHP. Dit zijn degenen die CS50 schreef voor pset7. En Jay? 

PUBLIEK: Als u nodig hebt om te zeggen $ _SESSION, Is dat alleen voor ID? Of zou je dat hier gezegd? 

ZAMYLA CHAN: Dus de vraag is, wanneer we $ _SESSION gebruiken, dat was een specifieke globale variabele die we gebruiken. Hier deze variabele gaat zijn lokaal tot onze functie. Dus we zijn gewoon te verklaren een nieuwe variabele. 

PUBLIEK: Hoe wordt verontschuldigen geïmplementeerd? 

ZAMYLA CHAN: De vraag was, hoe wordt apologize geïmplementeerd? En ik denk dat dit is eigenlijk een vrij goede praktijken voor jullie om te gaan de sectie functions.php en kijk naar verontschuldigen en zie hoe je zou kunnen hebben gedaan het zelf. Dus ik kan laat ik aan u, maar gewoon zeggen dat als je kijkt naar excuses, dan is de boodschap die u meeneemt ingediend om zich te verontschuldigen, en dan is het maakt dat bericht. Nog meer vragen? Ik hou van vragen. Dus houd ze komen. 

PUBLIEK: [onverstaanbaar] echo of afdrukken er? 

ZAMYLA CHAN: De vraag was, konden we niet alleen hebben gezet echo of druk daar. Dus dat zou iets gedaan hebben iets anders. Dat zou vraag zijn afgedrukt niet in die - goed, op dit moment, we zijn eigenlijk onze controller. Dus we eigenlijk niet hebben HTML set hier boven. Apologize door rendering apologize.php eigenlijk je wordt omgeleid naar apology.php. OK. 

Dus nu, laten we gaan op naar het adres van de vraag van eerder over wat echt rijen. Nou, vraag terug een array van rijen. En elke rij wordt vertegenwoordigd door een associatieve array. Dus als ik enkele SQL query en heeft uitgevoerd Ik heb het resultaat opgeslagen in rijen, dan met behulp van een foreach lus, dan de array naam is de eerste die daar - rijen. En dan ga ik bellen elke rij in daar $ rij. 

Dus itereren over dat, ik kan dan toegang kolomnaam de gegeven rij's, jaar kolom en huis kolom. Merk op dat ik niet in staat zou zijn geweest Dit doen met rijen, omdat rijen index naam bestaat niet. Rijen is gewoon een array van associatieve arrays. Dus heb je twee niveaus daar. Zodra u de array van rijen, je moet krijgen in dat. En dan hebt u toegang tot de kolommen. Wist dat duidelijk maken? Ja, aan de voorkant? 

PUBLIEK: [onverstaanbaar] openen beugels voor [onverstaanbaar]? 

ZAMYLA CHAN: Pardon? 

Publiek: De open haakjes. 

ZAMYLA CHAN: Deze hier? Dat is waardoor ik onder andere die variabele. Yeah. 

PUBLIEK: Wanneer u afdrukt, bent u afdrukken naar de HTML-code? 

ZAMYLA CHAN: Ja. Wanneer ik, dit is hier binnen mijn sjabloon, zodat mijn mening van MVC methode. Dus ik ben van afdrukken in de HTML. 

Publiek: Dus als we gingen naar ontwikkelaar gereedschap na het uitvoeren van deze, konden we die daadwerkelijk in de code? 

ZAMYLA CHAN: Dat is een geweldig vraag, ja. Dus als je ging naar de developer tools in Firefox het gebruik van Firebug of Chroom, dan ja, je kon zie de specifieke HTML. Dus het zou $ row ["Naam"] niet te laten zien. Het zou tonen welke naam is in die rij. 

PUBLIEK: Gewoon een algemeen probleem, wat zijn tr en td gedefinieerd als? Waarom zouden we [onverstaanbaar]? 

ZAMYLA CHAN: Tabel rij tr, tabel dan td kolom. OK. 

Publiek: Ja, het is tabelgegevens. 

ZAMYLA CHAN: Tabel gegevens. Yeah. 

Publiek: Het is een rij waarin de rij beschouwd als een column? 

ZAMYLA CHAN: Sorry. Kunt u dat herhalen? 

Publiek: Hoe zou u rijen te visualiseren? 

ZAMYLA CHAN: Hoe zou je visualiseren rijen in wat voor manier? Heb je het over deze rijen hier of de tr rijen? 

Publiek: De rijen. 

ZAMYLA CHAN: Deze rijen hier? Ik zou dit te visualiseren als Ik mijn query uit te voeren. En het zegt, OK, ik ofwel 0 tot n bedrag van de rijen die aan de criteria dat je had opgevraagd. Dus ik heb een aantal aantal rijen. Dus rijen, de $ rijen, slaat elk een van die rijen in een array. Dus zelfs als het is gewoon een van hen, het is nog een reeks rijen die overeenkomen met het. 

Dus, bijvoorbeeld, is net als toen u opgehaald de cache van de gebruikers. En de criteria die er was waar ID is gelijk aan de sessie-ID. Er is echt maar een rij die zou kunnen overeenkomen dat. Maar nog steeds rijen net terug een rij. Dus je zou moeten gaan naar rijen, index 0, index cache daadwerkelijk naar uw cache. 

PUBLIEK: Is de printfunctie in echo hetzelfde? 

ZAMYLA CHAN: Ja. Ja. Print een echo van hetzelfde. 

PUBLIEK: Is de foreach lus de enige manier om de index in rijen? 

ZAMYLA CHAN: Is een foreach lus de enige manier waarop je kunt doorloopt rijen? Nee. U kunt ook gebruik maken van een lus, mits dat jij de lengte van de array van de rij. 

Publiek: Kunt u er toegang toe met behulp van een rij als [onverstaanbaar]? 

ZAMYLA CHAN: Dus je hebt geen toegang tot het alleen met behulp van rij als je niet beschikt over een foreach lus mits u niet hebt gedeclareerd rij. Ja. Ja, in het wit. 

PUBLIEK: Dus wat doe tr en td doen? 

ZAMYLA CHAN: So tr en td zijn HTML-tags. tr geeft het begin van een tabel rij. En elke td geeft een nieuwe tabel kolom gegevens. 

PUBLIEK: Voor een visuele weergave van wat een rij is net als, stel je de SQL, hoe ze een rij. [Onverstaanbaar]. 

ZAMYLA CHAN: Yeah. Dat is een goed punt. U kunt rijen visualiseren als gewoon zoals in een Excel-tabel, maar de lijst van de rijen. OK. Oke. Dus nu dat we weg zijn dan selecteer, indien er zijn niet meer vragen, we zullen gaan over naar insert. Dus als ik wilde invoegen in een aantal tafel en steek bepaalde kolom waarden, kon ik mezelf te voegen in Ravenclaw in jaar 7. Maar soms zijn er misschien duplicaat waarden, zoals we zagen in pset7 toen we waren bezig onze portfolio. 

Dus in dit geval, we willen ON gebruiken Dubbele sleutel UPDATE, zodat we niet slaan meerdere rijen met dezelfde waarde, maar veeleer bijwerken. Dan hebben we eigenlijk update dat is niet een insert. Het is gewoon een update waar je update in een bepaalde tabel met een bepaalde criteria en dan, ten slotte, verwijderen, die wel een zeer vergelijkbare zaak. 

Publiek: Kunt u in het kort gaan over de dubbele sleutel? 

ZAMYLA CHAN: Yeah. Wezen hier, ik heb INSERT INTO gringotts, is, galjoenen, deze waarden. Maar ID, vermoedelijk, is een unieke sleutel waarde opgericht in MySQL tabel. Dus als ik al die ID ingesteld, dan kan ik niet een land toevoegen. Dus als het nog niet bestaat, dan heb ik bij te werken. In het midden in het wit. 

PUBLIEK: Dus invoegen, bijwerken, verwijderen, en selecteer, zijn die allemaal beschikbaar lokaal [onverstaanbaar]? 

ZAMYLA CHAN: Dus wilt invoegen, update, delete, en selecteren, zijn alle SQL queries. Dus wanneer u gebruik maakt van SQL, je moet die beschikbaar zijn. 

PUBLIEK: Terug naar het verleden quizzen - er was een vraag die behandeld als je een tafel had en wilde Steek testscores in een en je plaatst uw naam dus het zal je niet teleurstellen [Onverstaanbaar] van je vriend testscore. Hoe zou je dat doen met insert? 

ZAMYLA CHAN: Dus de vraag ging over een eerdere middellange termijn vraag. Ik ben niet op de hoogte van welke men het nu is. Dus misschien later, als je wilt komen en laat me, dan kan ik zeker geven u tips. Maar het spreken van het plaatsen van dingen, zoals het nemen van iemands score wanneer u mag niet, laten we praten over SQL injectie aanvallen. Dus een SQL-injectie aanval is in wezen waar iemand neemt voordeel van het lage beveiligingsniveau van de manier die u neemt in data. 

Dus hier, net als in CS50 financiën, toen we ingelogd, kunnen we invoeren in een gebruikersnaam in het login formulier, het eerste tekstvak en voer dan een wachtwoord. Misschien is onze PHP-code kan zien zoiets als dit, waar $ username is het post-gegevens gebruikersnaam en wachtwoord is post-gegevens vergeten. En dan hebben we gewoon uitvoeren onze vraag, zeg, OK, goed, onze vraag gaat kiezen uit onze gebruikers, waar de gebruikersnaam is het degene die ze ingediend. En het wachtwoord is het wachtwoord, betekent dat de wachtwoorden overeenkomen. 

Nu, wat als plaats van daadwerkelijk het indienen van een werkelijke wachtwoord, zoals 12345 en gissen naar riek die zegt wachtwoord en proberen te hacken hun rekening, wat als plaats ze dit voorgelegd. Ze kan misschien intypen een gok op een wachtwoord. En dan zouden ze klaar zijn de citaat typ of 1 = 1. Dat zou rechtstreeks in de SQL-tempo Vragen aan ongeveer zo uitzien. Selecteer van gebruikers waarbij gebruikersnaam = Tanden en wachtwoord gelijk lelie of 1 = 1. 

Dus of het wachtwoord heeft corrigeren of 1 = 1 is, dat is altijd waar. Dus in dit geval, in principe, een gebruiker kan profiteren van deze en gewoon inloggen zichzelf in en hack iemands account. Dus dat is de reden waarom we willen vermijden iemand hebben om dit te doen. Maar gelukkig, de query functie van passeren in de tijdelijke aanduidingen zal nemen verzorgen dit voor u. Ook zul je meestal nooit meer wilt om de wachtwoorden daadwerkelijk indienen zelf. Daarom hebben we hash of gecodeerd ze in CS50 financiën. 

Publiek: Het verleden quiz gesproken over MySQL ontsnapping snaren. Moeten we zorgen over te maken? 

ZAMYLA CHAN: Dat is een goede vraag. De MySQL ontsnapping snaren is zeker een functie die is gebruikt in onze zoekopdracht. Maar zeker kijken naar dat. Ik zou zeggen dat is eerlijk spel om te weten dat je zou moeten noemen functioneren op een koord. Ja, Belinda? 

Publiek: Hoe weet je wanneer het enkele aanhalingstekens of dubbele aanhalingstekens? En ook, ik voel me als in collegezaal u zei iets over het niet hebben de [onverstaanbaar] of iets of de tweede single citaat aan het eind. Ik denk dat hij opgemerkt in lezing die je hoort te apostrof 1 hebben en dan niet apostrof hebben of zoiets. 

PUBLIEK: [onverstaanbaar]. 

Publiek: Het ding is de laatste single citaat in er in die tweede doos mag er niet zijn. [Onverstaanbaar] Want als je dat laatste single nemen citeer uit en match deze voor de inhoud waar het wachtwoord is, als je dat query, er is een enkele quote op het einde reeds. U wilt dat enkele quote te gebruiken als degene die het een gezicht [Onverstaanbaar]. Dus wat is eigenlijk in die tekst doos moet niet hebben dat. 

ZAMYLA CHAN: Ik zal dat veranderen. OK. Als er geen vragen, dan zal ik geef het dan aan Jozef te praten over JavaScript, et cetera. 

[Applaus] 

JOSEPH ONG: Dus we draaien een beetje achter. Dus als je moet vertrekken, dat is OK. Maar we vragen dat je naar beneden houd uw hoofd als je in het midden, zodat je hoeft de camera niet te blokkeren en u gebruikt de achteruitgang als je moet. Ik ben Joseph trouwens. Hi. Test, test. Dan, is dat goed? Cool. 

Dus de video zal ook worden geplaatst online voor degenen die moeten nu vertrekken. Awkward. OK. Dus quiz beoordeling. Dit is een kat. Nu, JavaScript, dat is misschien niet als AWW voor sommigen van jullie. OK. Dus dat is de eerste, herinnert uit Zamyla. Vergeet niet dat PHP is draaien op de server. En heel vaak, schreef jullie loops in PHP te drukken HTML, toch? Dus zodra dat code wordt uitgevoerd, dat HTML-uitvoer die u uitprinten wordt verzonden naar de gebruiker. En zodra dat gebeurt, geen PHP meer kan worden uitgevoerd, tenzij u de pagina opnieuw te laden, van cursus, die de PHP reexecutes. Maar als je eenmaal uitprinten die HTML, je kan nergens heen. 

Zodat HTML wordt via naar de gebruiker, die de browser hier, waar Milo is met behulp van de computer. En zo goed, er zijn verschillende dingen zodra we HTML naar de gebruiker. Soms willen we iets doen als wanneer u klikt op iets, we willen alert dozen om pop-up, dat soort interacties, zoals wanneer u op de sleutel, als je iets op de klik pagina, Ik wil dat er iets gebeurt. Nou, je kunt niet reexecute PHP code eens dat HTML is ingesteld. Dus hoe doe je dit? 

We introduceren een nieuwe taal genaamd JavaScript die in de browser draait die u toelaat om dingen te doen naar HTML nadat u ontvangt ze van de server. En dit is waarom we noemen het een client-side programmeertaal. Het werkt op de computer - de klant. Heeft u vragen over dat tot nu toe? Dat paradigma zinvol om mensen? OK. Goed. Oke. Dus het eerste wat op te merken is JavaScript is niet PHP. 

Ze hebben een aantal verschillende syntax, die we zullen ingaan. En ze hebben zeer verschillende toepassingen. JavaScript, opnieuw, voor uw browser, voor de klant. Server draait ergens op iemand anders computer die informatie stuurt aan u, te corrigeren? Dus als wij u vragen om PHP code te schrijven examen op een vraag, niet schrijven JavaScript en vice versa. Je zult gewoon verliest punten, en het zal niet juist zijn. 

Dus laten we krijgen in een aantal syntax verschillen - JavaScript op de linker en PHP aan de rechterkant. Het eerste wat je opvalt met JavaScript, verklaren wij variabelen met de var trefwoord - V-A-R. PHP gebruikt de dollar-teken, als Zamyla eerder besproken. Wilt u een associatieve verklaren array, zien we de bekende syntax op de rechterkant met PHP. Aan de linkerkant, in plaats je accolades gebruiken. En dan is uw sleutels aan de linkerkant. Dan heb je een dubbele punt. En dan heb je de waarden die je wilt. 

Dus dit is hoe je het zou doen in PHP rechts met die tweede lijn die begint bij Milo. En dat is hoe je het zou doen op de linkerkant in JavaScript als je wilt wat we een object noemen. En objecten in JavaScript zijn net associatieve arrays. Dus als je wilt benaderen velden, in PHP u deze syntaxis beugel gebruiken. En op deze manier, kunt u opnieuw toewijzen deze eigenaar veld Lauren. 

Nou, in JavaScript, als men wil toegang tot een veld en verander het, kunt u gebruik maken van de dot syntax. U kunt ook gebruik maken van de syntax beugel. Maar je kunt niet gebruik maken van de dot syntax in PHP. Dat zal niet werken. Het werkt alleen in PHP. En tot slot, om dingen af ​​te drukken op de console, console.log, gebruikt u die jullie gebruiken veel in pset8. U kunt console.log dat. 

Als u een array wilt afdrukken in PHP, moet je afdrukken r gebruiken. En aan de rechterkant zie je i hash tekenreekssamenvoegingsoperator daar. Iemand eerder gevraagd. Ik gebruik een plus in JavaScript. Als ik iets wil samenvoegen in PHP, gebruik ik de stip. Deze verschillen. Als je het schrijven van PHP-code, geen gebruik maken van een plus. Als je het schrijven JavaScript code, niet een punt te schrijven. Het zal verkeerd zijn. En je zult verdrietig zijn. 

Dus syntax verschillen. Ken je syntax, want als je moet schrijf een vraag en je syntaxis uit de verkeerde taal, het zal niet werken. En het zal verkeerd zijn. Dus laten we praten over wat controle stromen verschillen, hoe je het gebruikt lussen in elk van hen. Zamyla ging over de rechterkant. Spullen op de rechterkant moeten kennen. Laten we eens kijken aan de linkerkant. 

Wanneer u gebruikt voor n lus in JavaScript, uw lus variabele, var i daar, lus over de sleutels van de array. Zo zie je naam, huis, en de rol. Als ik console.log ik, krijg ik naam, huis, en de rol. Dat zijn de sleutels. In JavaScript, een foreach lus gaat over de waarden van deze array. Dus je merkt ze allebei i. Maar hier op de PHP kant, drukt het uit Milo, CS50, en Mascot. Dat zijn de waarden in PHP. 

Dit zijn hoe deze twee verschillende in de verschillende talen. Dus als u een foreach lus, niet van uit dat het geeft u de sleutels. En als je met behulp van een voor n lus, niet neem aan dat het geeft je de waarden. Is dit zinvol tot nu toe? De volgende dia is ga je laten zien hoe heeft u toegang tot het tegenovergestelde in elk van hen. 

Nou, als je de sleutel in JavaScript en u wilt dat de waarde uit, je gewoon index in de array met dat. Dus Milo van ik zal je krijgen wat je wilt - de waarden. Er is een andere syntax in PHP. Als je echt wilt weten, ik niet denk dat we het toonde aan u nog. Maar als je geïnteresseerd bent, kunt u gebruik maken deze extra syntax rechts kant die eigenlijk laat je de sleutels in PHP als u een foreach lus. Dus gewoon een beetje trivia als je geïnteresseerd bent. 

Dus dat is gewoon om aan te tonen de verschillen tussen deze twee lussen. Heeft ze niet door elkaar als je programmeren van een vraag. Heeft u vragen over. Cool. Oke. JavaScript-objecten. Ik sprak over hen. Ze zijn als associatieve arrays. Het enige wat ik zou willen dat u er rekening mee Hier is dat een waarde in een associatieve array kan van alles zijn in JavaScript. 

Het kan zelfs een functie zijn, als daar. Ik heb een functie die is een waarde van een sleutel. En als ik wil dat de functie aan te roepen, Ik toegang schors. En dan heb ik de haakjes daarna. En dat werkt. Dus vragen? Nee? OK. Goed. JavaScript, zoals PHP, is losjes getypt. Wat betekent dat? 

Het heeft soorten. Maar als je verklaren een JavaScript variabele, zeg je var i. Je hoeft het niet zeggen. Dat is niet een ding. Je moet gewoon zeggen dat het een variabele. En dan zal JavaScript omgaan met de soorten onder de motorkap voor je. We kunnen vrij zetten tussen soorten hierdoor. Dus ik begint als een nummer in dit geval. En dan heb ik een string. En ik voeg ik aan. En ik opnieuw toewijzen het terug in i. 

Dus op die eerste lijn, i het nummer. Op de tweede regel, ik wordt nu een koord nadat ik doe het herschikken. En hier, ik ben gewoon aaneenschakelen dat nummer op de string. Zo zie je dat ook al was ik een integer in het eerste deel, het is een soort of zoals wordt omgezet in een string en vervolgens worden toegevoegd op dat hello string. En dus dat is wat ik bedoel door de losse typen. Dat is dat je converteren tussen types heel gemakkelijk. En het maakt niet waarschuwingen gooien bij je C doet. 

Dus ik bevat nu hello 123 aan de string. Volgende. We kunnen ook vrij vergelijken tussen soorten. Dus als je gewoon gebruik ==, heel veel zoals in PHP, JavaScript doet een soortgelijke zaak. Het koord 123 is gelijk aan het aantal 123 wanneer u dubbelklikt gelijken gebruiken. Wanneer gebruikt triple gelijken, maar ook wil ervoor zorgen dat het type is hetzelfde. Omdat dat een string en dat een aantal, ook al zijn ze allebei 123, als je triple gebruiken gelijk, je valse krijgen. In gelijk aan de dubbele geval krijg je waar, want dubbel is niet zorg over type. Triple gelijken geeft om type. Vragen? OK. 

En een ander ding over JavaScript is scope is een soort van wereldwijde tenzij je in een functie. En het werkt op dezelfde manier in PHP eigenlijk. Dus laten we gaan door dit voorbeeld. Ik i 999. En dan ga ik in deze for-lus. Dus als ik het printen ik in deze voor lus, Ik verwacht 0, 1, 2, 3, 4. Ik krijg om i = 4. Het stappen ik nu 5 op het einde van de lus. En dan breekt uit de lus, omdat het niet voldoet aan de conditie meer. 

Wat denk je dat de volgende console.log afgedrukt? Dus dat is wat het zou doen in C. In C, want als je als var i buiten en je hebt var i in een lus, als een lus, dan maakt het zo dat het is scoped dat de twee i's zijn verschillend. In JavaScript, zal het net behandelen als hetzelfde i. Ik krijg 5, want dat was de waarde na het verlaten van de lus. Dus die i's zijn hetzelfde i. Is dat logisch? 

Nou, is het zinvol uit een JavaScript-standpunt. Maar hetzelfde paradigma niet overdracht aan C. Ze hebben verschillende scoping regels. Ja. 

PUBLIEK: [onverstaanbaar] buiten de functie [onverstaanbaar]? 

JOSEPH ONG: Dus buiten die functie? Dus ik zal dat in slechts een seconde. Dus foo noemen we (i). Dit gaat i in foo, stappen , en dan registreert het. Dus het was 5. Dus wordt het 6. Maar wat ik het over heb is dat ik in die functie. Omdat het een parameter, het binnen het bereik van die functie. Dus zodra ik eigenlijk uit dat functie, is het nu gaat om te gaan terug naar de oude i. Dat ik alleen scoped omdat het is in een functie. En we hebben ruimte en functies. Maar we hebben geen ruimte buiten hebben van functies in JavaScript. Is dat logisch? Ja. Vraag. 

PUBLIEK: Zelfde [onverstaanbaar]? 

JOSEPH ONG: Dus ja. In PHP, het is hetzelfde soort dingen. Er is een lichte subtiliteit eigenlijk. Maar je kunt me vragen over dat na de beoordeling. Je hoeft niet echt nodig om te weten dat subtiliteit voor de quiz. Voor alle doeleinden, zoals variabelen, globale en PHP, tenzij ze in een functie, hetzelfde ding in JavaScript. Ja. 

PUBLIEK: Waarom is dit toegestaan ​​in JavaScript en nergens anders? 

JOSEPH ONG: Dus waarom is het toegestaan in JavaScript en niet in C? Het is gewoon wie kwam met JavaScript besloten dat dit was OK in JavaScript. Dus het is net als een programmeertaal conventie zoals wij zouden zeggen. Ja. 

PUBLIEK: Dus waarom deed het gaan 6-5? 

JOSEPH ONG: Dus het ging 6-5, want toen ik passeerde ik in foo, dat i binnenkant van foo is nu binnen het bereik van foo, omdat ruimte bestaat in functies JavaScript. Maar zodra ik hier weg, want het werd binnen het bereik van de functie, ik ben gewoon met behulp van de reguliere ik dat binnen was de rest van het bedieningssysteem stroom. Zinvol? Kan ik verder gaan? Oke. Cool. 

De aanvaarding van deze objecten is worden doorgegeven door middel van verwijzing. Je weet hoe wanneer je langs een array in C kon je de array eigenlijk aanpassen? Het is hetzelfde in JavaScript. Als ik langs een object, in dit geval, ik Milo overgegaan naar deze catify functie. Milo begint. Zijn naam is Milo Banana. Ik dat object overgaan in een functie want het is een object, een associatieve array in JavaScript. 

Toen ik een handeling uitvoert in die functie, zal eigenlijk het object wijzigen. Dus dit zal alleen gebeuren voor objecten in JavaScript, net als het gebeurt voor arrays binnenkant van de naam C. Dus Milo's zal nu eigenlijk kat geworden. Is dat logisch? Dus dit werkt alleen voor objecten. Objecten worden doorgegeven door middel van verwijzing. Ja. 

PUBLIEK: Dus je zegt dat in tegenstelling tot variabele i. 

JOSEPH ONG: Yeah. Welke variabele i was gewoon een nummer, toch? Het is net als in C als u een pas integer een, het maakt een kopie. En als je een array doorgeven, het eigenlijk verandert de feitelijke array C. Hetzelfde gebeurt met JavaScript in dit geval. Oke. En volgende, Milo is verdrietig omdat hij is nu een kat. Dat was eigenlijk Milo na enkele reis naar de dierenarts. 

Dus hoe kunnen we gebruik maken van JavaScript in een webpagina? Wij kunnen opnemen. Dit is HTML-code met de strip tags. Dus ik heb strip labels daar. En dan heb ik een aantal JavaScript code in het script-tags. En dan voert dit. Toen ik doe het net als deze, is het genoemd inline JavaScript. Het is een beetje rommelig, omdat de JavaScript is eigenlijk in de HTML. 

Een betere manier om dit te doen, veel mooier, is om je JavaScript in een schrijven extern bestand en vervolgens voorzien de script-tag met een bron. En dit zal gaan naar dat JavaScript bestand en lees de JavaScript-code van dat bestand in plaats daarvan. En op deze manier, heb je niet veel JavaScript aan het begin van uw HTML-bestand, waardoor het echt rommelig. Je zet ze gewoon ergens anders. En dan zal het lezen van daar. Deed dat zinvol? 

Plaatsing zaken. In dit geval, de script is voor het lichaam. Dus toen ik dat uit te voeren, is er nog niets in het lichaam. Misschien zal dit een beetje meer maken voelen wanneer ik laten zien dit volgende deel. In dit geval, het script komt na de div. Dus de div daadwerkelijk verschijnt op de pagina eerst. Hier in dit kleine rode cirkel, zie je de tekst wordt weergegeven. En dan de waarschuwing verschijnt. 

In het eerste geval, omdat het script was voor de div, de waarschuwing verschijnt als eerste. En dan de div verschijnt na je de doos ontslaan. Dus de uitvoering van belang. Dus we zullen dit in gedachten te houden. Dit is van belang in een klein beetje. OK. Zo goed, hoe kan je wachten tot de hele pagina wordt dan geladen voordat u enkele code uit te voeren? We zullen krijgen in deze een beetje even later ook. Maar gewoon blijven deze plaatsing zaken in het achterhoofd voor als we komen naar een andere dia. 

Dus krijgen we nu DOM. En wat is DOM? Dus als je kijkt naar HTML-code, het is gewoon een bos van tekst op het scherm. Dus hoe JavaScript weten dat Dit is een HTML-element? Dus moeten we wat geheugen hebben weergave van deze structuur die we hebben. En wanneer we dit in het geheugen vertegenwoordiging in JavaScript, noemen we dat de DOM. En het is gewoon een manier dat mensen besloten dat wij deze moeten vertegenwoordigen HTML structuur. 

En wat betekent dit DOM eruit? Nou, in het geheugen vertegenwoordiging, wij nemen deze tekst. En we zetten het in het geheugen representatie. Dus dit is de HTML. Dus we eerst uit dat elke DOM boom heeft een document. Het ziet eruit als een boom. En het document bevat de HTML tag, eigenlijk alles binnenkant van deze nu. De HTML-tag heeft twee kinderen. Het heeft een hoofd. Dat hoofd, als je kijkt naar inspringen daar op hoe het gestructureerd tussen de dicht-tags, hoofd heeft een kind. Het kind is titel. Precies. 

Nu hebben we een lichaam kind. En dan dat lichaam een kind genaamd familie. En dat gezin heeft drie kinderen - oudste, middelste en jongste. Dus je moet weten hoe je een diagram te tekenen als deze wanneer we je vragen hoe een diagram te tekenen wanneer we geven u de HTML-links. Weet u hoe u de DOM-structuur te produceren. En de binnenkant van deze dingen, er is gewoon wat tekst, die ik heb voorgesteld als kleine doosjes. 

Betekent dit DOM-boomstructuur maken zin en wat de DOM is? Dus wat doet de p voor? Hier, de p daar in die tag vertegenwoordigt een paragraaf-tag in HTML. Dus je kunt opzoeken. Maar het betekent gewoon dat het een ruimte voor wat tekst. En het heeft een aantal standaard CSS styling, want het is een paragraaf tag. Maar niet echt zorgen te maken over dat deel te veel. Weet gewoon dat het een tijdelijke aanduiding voor wat tekst. Ja. Vraag? Ja. 

PUBLIEK: U zojuist genoemde CSS. De hash familie en de hash al dat spul is in principe vertegenwoordigen id's in CSS? 

JOSEPH ONG: Ja, precies. Ik zal met wat deze hashes krijgen betekenen in een tweede. Toen Angela ging over CSS, ze sprak over CSS selectors. Dit zijn de CSS selectors dat ze het over had. Ja, Rob? 

ROB BOWDEN: Ik zou ook commentaar dat DOM binnenkant van title tag is ook een tekst knooppunt. 

JOSEPH ONG: Juist. Dus in de title-tag, Ik heb wat tekst DOM. Dus eigenlijk zou deze titel als een doosje komt ook van af. Maar het maakt eigenlijk niet uit teveel in dit geval. We hebben niet echt zorgen over tekstnodes, zoals wij ze noemen, te veel. OK, we doen. Blijkbaar, we doen. En ik zal vast dat wanneer Ik opnieuw uploaden. Is dat logisch? 

Dus hoe kunnen we werken met de DOM? Wanneer u te maken met de DOM in JavaScript, zijn er twee stappen. U selecteert een DOM-element. En dan dingen doen om het te. Dus in dit geval, abstract, ik heb gekozen voor de middelste element. En dan is een voorbeeld van het doen van dingen haar de tekst zou veranderen. Dat wordt gebruikt om Bob te zijn. Nu, wat ik deed was ik veranderd Bob om Milo in dit geval. 

Dus hoe kunnen we eigenlijk doen? Hoe doen we het selecteren? En hoe doen we de dingen doen om het ding zodra we hebben het gemaakt? Nou, de manier waarop jullie hebben het geleerd in deze klasse is met behulp van iets wat we genaamd jQuery. Dus wat is jQuery? jQuery is een bibliotheek die maakt JavaScript makkelijker om te schrijven. Dus iemand nam de tijd en schreef jQuery. 

jQuery is eigenlijk geschreven in JavaScript. En dan, omdat ze nu deden dit, wij hebben een heleboel functies die we kunnen gebruiken die onze leeft echt makkelijk. Dus wat zijn enkele van de dingen die het doet? Het maakt het selecteren van elementen makkelijker. Het maakt het veranderen van HTML, toevoegen klassen gemakkelijker. Het maakt Ajax makkelijker. We zullen om dat te krijgen in een tweede. 

En het is vergelijkbaar met C libraries. Zodat je ook string.h, krijg je strlen. U krijgt strcpy, al deze dingen. Wanneer u onder andere jQuery, krijg je aardig manieren om elementen te veranderen selecteren dingen, et cetera. Je krijgt extra functionaliteit dat JavaScript geeft je niet. Dus jQuery is geen JavaScript. jQuery is een bibliotheek die is geschreven in JavaScript dat JavaScript maakt gemakkelijker te schrijven. 

Dus jQuery is geen programmeertaal taal. Maar JavaScript is. maken. Ervoor dat u uw terminologie te krijgen. Heeft u nog vragen? Ja. Is dat een vraag? Oke. Dus hoe kan je jQuery gebruiken? Nou, als je het schrijven van een aantal JavaScript-code en u voorzien van een jQuery aan de bovenkant van uw bestand als een script, het dollar teken gebruikt u nu om toegang te krijgen jQuery. En dit is iets anders dan het dollar teken in PHP. 

Het is hetzelfde symbool dat u typen op je toetsenbord. Maar ze betekenen heel verschillende dingen. Dollar teken in PHP betekent dit is hoe ik een variabele declareert. In JavaScript, als je hebt opgenomen jQuery, het staat voor jQuery. Dus hou dat in gedachten. Dus hoe kunnen we DOM-elementen te selecteren? Nou, als je het op de lelijke JavaScript Zo heeft u toegang tot de documenteren globale variabele. En dan krijg je element met ID familie. Dit is echt lang en langdradig en niet erg aardig. 

Of u kunt alle elementen krijgen die een p-tag. Dat werkt ook in JavaScript. Maar we hebben nooit echt toonde je de syntaxis te veel. Wat wij manifesteerden jullie was jQuery. Dus dat hele selector omhoog daar dat werd uitgedrukt in JavaScript wordt alleen maar gecondenseerd tot deze zeer mooie dollar ondertekenen hashtag familie. En $ p, precies waar het is als dat. Als u alle tags p selecteren binnen een familie, we een ruimte tussen de twee. En nu krijgen we al de p -tags in een gezin. 

En er bekend uit? Nou, Angela gesproken over CSS selectors. Geef me een seconde. En dus om een ​​element te selecteren, u gewoon gebruik maken van het hetzelfde als jij zou doen met een CSS selector. Als je een hash voor ervan, kiest hij door ID. Een punt selecteert door klassen. Als je gewoon het ding zonder hashes of stippen, kiest hij die tags. Vragen. Ja? 

PUBLIEK: Wanneer we stip in onze HTML, is dat niet jQuery? 

JOSEPH ONG: Dot in onze HTML is een JavaScript-ding. Het is niet een jQuery ding. De manier waarop jullie geleerd met jQuery is. html gebruiken. En dan heb je het doorgegeven wat de HTML gaat worden. Dus ik zal dat in slechts een tweede eigenlijk. Dus hoe kunnen we dingen doen om element keer hebben we gekozen? Dus dat is een voorbeeld van selecteren van een element. Dus nu willen we dingen doen om het. 

Dus in dit geval, laat me terug te gaan naar de vorige dia. Het was Bob voorheen. En ik wil dat veranderen binnen HTML naar Milo. Dus ik bel de HTML functie van het element. Dat HTML functie is een werkwijze element. En dan geef ik het wat Ik wil de HTML te zijn. En het gewoon vervangt wat er in die tag met wat ik geef het. Ja. Vraag? 

PUBLIEK: De hashtag wordt gebruikt alleen voor de jQuery. [Onverstaanbaar] zouden we dat niet gebruiken. 

JOSEPH ONG: Ja, precies. Maar maak je niet te veel zorgen over pure webbrowser. Ik wil gewoon dat jullie focussen op hoe je zou het doen met jQuery, omdat dat gaat het belangrijk deel aan de quiz. Rechts. Precies. Zo zie je maar dat hashtag, zodat komt overeen met het element te selecteren met de ID midden vanwege dat hashtag. Hashtag betekent ID. En dit element heeft een ID van het midden. Dus dat is het element dat we kiezen. 

PUBLIEK: [onverstaanbaar]. dollarteken hashtag [onverstaanbaar]? 

JOSEPH ONG: Dus geen. De vraag is kan u. Waarde gebruiken. En. Waarde werkt alleen op onderdelen die ingangen. In jQuery, zou het . Val, niet. Waarde. Dus ik zal een klein voorbeeld te krijgen dat toont dit alles in combinatie in een tweede. Maar ik denk dat dit wordt een kleine snippet zinvol om mensen zo ver. Wil je de HTML te veranderen, bellen met de HTML-methode. Ja. 

Publiek: Kunt u uitleggen weer de methode? 

JOSEPH ONG: een methode is dus gewoon een functie die behoort tot een in deze Bij een van deze elementen DOM, want ik zie je eerste geselecteerde het element. Eigenlijk wil ik gebruik maken van de muis. Ik voor het eerst het element geselecteerd. En toen riep ik deze HTML functie die het had. En omdat deze functie behoort tot dit ding, we noemen het een methode. Dat is gewoon een mooie naam voor. Zeg dat nog eens. Dus vergeet niet dat we geselecteerd het element nu. En we hebben het te zetten binnenkant van het variabele element. Correct? 

Dus als we willen de HTML op te veranderen binnen, want het was Bob voordat u wil die tekst te veranderen om Milo. Dus we HTML noemen. En we vertellen wat de HTML binnenkant dat element moet nu. En zo verandert het aan Milo, want ik gaf het Milo. 

PUBLIEK: Dus ze werken samen. [Onverstaanbaar] 

JOSEPH ONG: Ja, ja. Ze werken samen. Dus een van hen kiest het element eerste. En de tweede doet iets aan. Ja. 

PUBLIEK: [onverstaanbaar]. Als deze methode verschilt van HTML je hebt de methode gelijke werkelijke. 

JOSEPH ONG: Yeah. Dit is een andere methode. Dit is een andere methode. En we kunnen dekken dat in slechts een seconde als we in een voorbeeld. Ik wil ervoor zorgen dat we versnellen want we hebben niet veel tijd. Maar we hebben te laten rijden in de tijd nu. OK. Cool. Dus als je wilt om een ​​klasse toe te voegen, is er ook een add-klasse methode. Dit is slechts een voorbeeld van wat je kunt doen met jQuery. Dat voegt alleen maar een klasse. 

Als u wilt om het te verwijderen, u kunt verwijderen bellen. Dat is gewoon een ander ding dat je kunt doen. Dus meer voorbeelden van dingen die je kunt doen. Dus ik zet ze gewoon op de top als deze? Jongste verwijderen. Als ik voer gewoon dat JavaScript op de top van mijn dossier, zal dat werken? Rechts. Omdat midden nog niet bestaat. Dus dit gaat niet werken. Orderuitvoering. Het gaat naar de bovenkant eerst. Wat? 

PUBLIEK: Jongste nog niet bestaat? 

JOSEPH ONG: Yeah. Jongste bestaat nog niet. Precies. 

PUBLIEK: Je zei midden. 

JOSEPH ONG: Sorry. Jongste bestaat nog niet. En de andere is heb ik niet Inclusief de jQuery file vragen script src. Dus dat gaat niet werken. Eigenlijk heb ik dat niet in de volgende dia, dat is verondersteld om dat te bevestigen, hetzij. Maar de manier waarop we dit doen is JavaScript is event driven. Dus wat we doen is dat we gebruik maken van een evenement handler om dit te realiseren. En zo ik het document te selecteren ingesteld als eerste. Ik zeg, OK, wanneer het document klaar, laat me een functie uit te voeren. Dus dat is alles wat syntax middelen. 

Ik het document geselecteerd. Nu, wanneer het document klaar, draaien de functie. En dus hier wanneer het document klaar, wat betekent dat alle HTML heeft geladen, dan is de functie uit te voeren I dat verwijdert dat element. En nu, wanneer ik deze functie uit te voeren dat ik overging in klaar, ik ben gegarandeerd dat alle HTML op pagina gaat eerst bestaan. Ja. Vraag? 

Publiek: Wat is het evenement trefwoord binnen de functie? 

JOSEPH ONG: Dus dat evenement zoekwoord in de functie is slechts een parameter die wordt doorgegeven aan de functie voor elk evenement. Het is gewoon iets dat je gratis krijgt. Wanneer u gebruik maakt van de belangrijkste handlers in pset8, dat geval zou je zeggen, voor Bijvoorbeeld, welke toets u ingedrukt op. In dat geval wordt voor een gebeurtenis ready, het is eigenlijk niet super handig. Maar voor een toets ingedrukt evenement, het is meer handig, omdat je te weten welke ingedrukte toets door de toegang tot de belangrijkste code uit die gebeurtenis object. Correct? Is dat logisch? OK. Ja. Vraag? 

PUBLIEK: Dus kunt u de script-tag lager? 

JOSEPH ONG: Dus ja. Je kon het script zetten taggen lager. Maar dan wordt het gewoon heel rommelig. En we willen allemaal centraliseren van onze code op een plaats. En dit zal ons toelaten om het te doen. Vergeet niet eerder ik zei dat er een mooiere manier zullen elementen op de pagina voordat je code uit te voeren? En dit is gewoon een leuke manier je zou dat te bereiken. 

PUBLIEK: [onverstaanbaar]. 

JOSEPH ONG: Yeah. Je zou nog steeds, toch? Want vergeet, inbegrepen de bestand aan de bovenkant van de pagina. Dus het gaat om eerst uit te voeren voordat je naar de onderkant van de pagina. OK. Dus u kunt ook een andere type event handler. Dit een gewoon verwerkt klikken. Wanneer ik op de jongste, dan het zal verschijnen met een waarschuwing. Dit is gewoon een ander soort evenement. In tegenstelling tot de gebeurtenis ready, nu u gebruik maken van de gebeurtenis click wanneer u klikt op een element. 

En dus in dit geval, vergeet niet, de klik handler is om jongste bevestigd. Dus het gebeurt alleen wanneer Ik klik op de jongste. En in de andere, de gebeurtenis ready werd het document gevoegd. Zo wacht op het document klaar te zijn. Zinvol? Ik denk dat ik kan gaan. Ja. Vraag? 

PUBLIEK: [onverstaanbaar]. in dit geval kunt gebruiken [onverstaanbaar]. 

JOSEPH ONG: Oh, ja, want in deze geval, ik moet wachten op de jongste element om eerst op het scherm verschijnen voordat ik een klik handler kan hechten aan het, dat is waarom ik zet het in van een document klaar. OK. En de volgende, dus dit is een groot voorbeeld van hoe je alles zou combineren. Dit is gewoon een vorm validatie voorbeeld je hebt gezien in collegezaal. Dus neem het stap voor stap als je door deze. En het wordt helemaal OK. Lees het gewoon van boven naar beneden. 

Ik heb een formulier aan de onderkant. Wanneer het document klaar is, hecht ik een submit handler aan de vorm, zodat toen ik te weten, krijg ik de waarden binnen elk van die middelen. En ik controleren of het leeg. Als het leeg is, ik return false, omdat Ik wil niet naar het formulier, omdat de vorm is verkeerd. Als het wachtwoord leeg is of het minder dan acht tekens, weet ik niet indienen de vorm, want dat is ook verkeerd. En de terugkeer valse gewoon voorkomt de vorm van het indienen en gaan naar een nieuwe pagina. 

En hopelijk, dit is logisch. Ik denk dat jullie moeten lopen via deze code stap voor stap op uw eigen. En als je eenmaal begrijpt wat de selecte elementen en dingen doen om het precies inhoudt, dit zal veel zin om jou. Ja? 

Publiek: Wat doet de name = gebruikersnaam betekenen? 

JOSEPH ONG: Dus de naam = gebruikersnaam en name = wachtwoord betekent alleen kijken naar de attribuut ongeacht u selecteren. En dan dat moet passen. Dus we gaan in de registratie. En dan kijken we naar alle ingangen en registratie. En dan halen we die waar de naam attribuut is gelijk aan de gebruikersnaam. Dus alleen die eerste selector selecteert de gebruikersnaam invoeren. En die tweede selector selecteert alleen het wachtwoord, want die hebben hun naam kenmerken in te stellen als wat ze hoort te zijn. Vraag? 

PUBLIEK: Op indienen, hoe werkt het onderste deel op te lossen het bovenste deel? 

JOSEPH ONG: Dus dat is omdat van de event handler. Dus we wachten op een evenement in te dienen die wordt ontslagen uit het formulier. En dat is alles wat te maken. Waarom noem ik indienen daarboven? Het zegt, wanneer het formulier wordt ingediend, Ik krijg een indienen evenement. Dus laat me onderscheppen precies dat en voer deze code plaats. Ja? 

PUBLIEK: Waarom heb je om de functie evenement? Waarom kan je niet gewoon [onverstaanbaar]? 

JOSEPH ONG: Omdat in JavaScript, u moeten de functies verklaren. Dat is gewoon hoe het werkt in JavaScript. Je moet zeggen dat het gaat een functie uit te voeren. Dus je zegt dat je bent verwacht hier een functie in plaats van net accolades. 

PUBLIEK: En de functie is wat volgt? 

JOSEPH ONG: Yeah. De functie is wat er in zit de accolades na die functie zoekwoord. Ja? 

PUBLIEK: [onverstaanbaar]. 

JOSEPH ONG: Voor indienen? 

PUBLIEK: Nee, voor de functie zonder de gebeurtenis. 

JOSEPH ONG: Yeah. Dus zonder de gebeurtenis, kunt u dat. Als u de gebeurtenis niet nodig, dan kun je gewoon weglaten. Maar als je dat doet, dan ben je zet ze gewoon daar. Ja. Snelle vraag? 

PUBLIEK: [onverstaanbaar]. 

JOSEPH ONG: Yeah. Want wat je hoeft te doen, de document.ready zegt gewoon wachten tot alle de HTML op de pagina om eerst te laden. En meestal, je wilt dat je elementen in plaats voordat u een code uitvoert. Oke. We moeten naar Ajax te komen. We hebben niet veel tijd. Dus voor-en nadelen. JavaScript is makkelijker te proberen schrijven met jQuery. Maar jQuery is een beetje traag. 

Het is net als PHP is trager dan C, want het is geïnterpreteerd. En jQuery is een beetje trager dan JavaScript, want het doet veel dingen onder de motorkap. En dus als je met behulp van jQuery, het is net een klein beetje langzamer dan JavaScript, hoewel geeft je mooie elegantie. En tenslotte, Ajax. Tot nu toe met Ajax, heb je niet gezien Ajax in weer termen van pset7, omdat als je dat doet, je legt een formulier om offerte. Het laadt een nieuwe pagina. Zodat u deze grote witte flits te krijgen op de pagina, terwijl dat tweede pagina wordt geladen, correct? 

Het zou wel heel leuk zijn als je niet over deze flash. Zoals Facebook, als je gewoon gaat u naar de bodem, worden nieuwe inhoud zonder het vernieuwen van de gehele pagina. Dus zoiets als dit zou mooi zijn. Dit is JavaScript-code aan de linkerkant. Je krijgt wat is de binnenkant van die input. U krijgt de voorraad info van Yahoo! En dan een grote reeks maak je dat zegt: OK, dit is de boodschap die ik wil om te laten zien op het scherm. En dan zet je dat bericht binnen van sommige HTML-element dat wordt op het scherm. 

Dus dat is alles wat hier gebeurt. Dus eigenlijk, want dit is alles JavaScript en je hoeft niet te lopen meer PHP, dit zal ervoor zorgen dat de pagina niet te vernieuwen. Dus dit is gewoon een abstract idee dat ik hier zeg voor nu. Het abstracte idee is dat als je het doet alle in JavaScript, hoeft u niet een pagina te vernieuwen. Maar hoe doe je dat eigenlijk doen? 

Nou, laten we praten over Een probleem betreffende deze eerste. Een probleem in JavaScript, uitvoering synchroon. Dus je moet wachten voor een lijn is voltooid voordat u voer de volgende regel. En wat als ik ga naar Yahoo!, en hun servers zijn echt traag, en het kost ze drie seconden geef me dat bestand info? Toen raakte ik die prijs lijn, als de uitvoering synchroon, omdat het door standaard, wat het alleen maar te doen is uw browser gaat kraam voor drie seconden. En je bent niet van plan om te kunnen doen alles terwijl het wordt dat gegevens. Het zal worden bevroren. 

En dat is slecht. Je wilt niet dat een gebruiker hebben een bevroren webpagina. Correct? Dat is gewoon slecht. Iedereen is het eens? Als je door Facebook en het bevriest en je kunt niets doen, je je echt gefrustreerd. Dus de oplossing is dat we iets maken asynchrone plaats. Dus al deze asynchrone ding zegt is, ga ik deze vragen URL voor sommige gegevens. En dan ga ik om door te gaan. Ik ga gewoon blijven uitvoeren welke code dat was na dat. 

En dan wanneer die gegevens klaar is, dan zal ik het te verwerken. Dat is alles wat hij zegt. 

PUBLIEK: Ajax maakt net code asynchrone? 

JOSEPH ONG: Het is een asynchrone manier van het ophalen van gegevens. Dus het eerste wat over Ajax is het laat me gegevens op te halen vanuit een externe site. En het tweede punt is het zorgt ervoor dat mijn pagina niet blokkeert terwijl ik het ophalen van die gegevens. Dat is het asynchrone deel ervan. Omdat het gaat ergens anders, omdat ik het zeg ik blijven gaan terwijl is het ophalen van die gegevens, die maakt het asynchrone. Ik blijf uitvoeren. 

Dus hou dat asynchrone idee in het achterhoofd. En ik zal je laten zien wat het verschil is. De synchrone versie is aan de linkerkant. De asynchrone versie is aan de rechterkant. Kijk naar de cijfers te zien welke stappen komen overeen met wat voert bij elke regel. Daar, de waarschuwing verschijnt als eerste. Omdat het krijgen van voorraad info van Yahoo! duurt drie seconden, stopt drie seconden. En dan waarschuwt de prijs na die drie seconden. 

Dus nu, dat alert shows up destijds - drie seconden in En dan waarschuwt door na dat. Dus het gaat gewoon stap voor stap. Het is net wat jullie zou aanvaarden, correct? Bij asynchrone uitvoering, u eerst waarschuwen. Dan ga je uit om deze URL. En je zegt, ik ga gewoon vragen voor de gegevens. En dan ga ik verwerken later. Dus het voert onmiddellijk de volgende regel nadat ik dat asynchrone aanvraag. 

Dus een 0,001 seconden, zie je alert hi. Uitvoeren die functie, alert bye. En omdat ik een belofte gedaan dat ik de gegevens later verwerken, wat gebeurt is wanneer die gegevens komt terug drie seconden later, voer ik dat functie die ik daar. Ja? 

Publiek: Kunt u aangeven of verduidelijken wat Ajax betekent? 

JOSEPH ONG: Dus Ajax is een manier dat als ik gegevens nodig hebben als ik op een website en ik willen niet de pagina te vernieuwen, dan Ik gebruik deze technologie genaamd Ajax. Die in wezen betekent gewoon, ga, haal gegevens van een andere website. En doe het op een manier die net niet blokkeert mijn webpagina. 

PUBLIEK: Dus is dat een inherent deel van JavaScript of jQuery? 

JOSEPH ONG: Zo schreef iemand een manier om te doen dit in JavaScript een lange tijd geleden. Op een gegeven moment, het niet bestaan. En zo iemand uitgevonden deze techniek zodat mensen deze gegevens op te vragen op deze manier. En zij schreven wat spullen om het voor je doen. En jQuery alleen dit geeft je zeer leuke manier om het te doen met deze $. krijgen functie. vragen? Ik kan beantwoorden vragen over Ajax daarna ook. Ik zal er zijn. 

Dus het laten we ons data te halen zonder de pagina te vernieuwen. En laten we ons daarbij in een asynchrone manier dat niet de pagina te bevriezen. Te lang, niet gelezen of dat verklaring was te lang voor u. Dus eindelijk, cross-site scripting aanvallen. We zagen dit met Zamyla. Als in mijn gegevensbestand iemand heeft deze naam, dat is dit script-tag, en ik heb wat code op mijn pagina die wordt afgedrukt uit de namen van mensen in een rij, of ik heb JavaScript-code die inserts deze naam in de pagina, wat HTML wordt geproduceerd? Nou, print ik de HTML-tag. Print ik al deze tags. 

Ik bij het deel waar ik afdrukken met mijn vrienden. Print ik Lauren uit. Het afdrukken Milo uit. En dan mijn naam in de database is script bericht onflatteuze Facebook-status. Omdat ik geplaatst deze in de pagina want het lijkt erop dat JavaScript, wanneer Deze pagina wordt verzonden naar de gebruiker, het wordt uitgevoerd als webbrowser. En dus dit is wat wij noemen een cross-site scripting-aanval. Iemand zet schadelijke informatie in database die overeenkomen met wat extra touw of JavaScript-string. 

En wanneer het wordt afgedrukt op de pagina op deze manier, wat dan gebeurt, is dat slechte code wordt uitgevoerd dat ik niet van plan was voor te krijgen uitgevoerd. En dat is alles wat een cross-site scripting-aanval is. En de manier waarop je rond dit is als Zamyla gezegd. Je gewoon dingen verpakken in HTML speciale tekens. En deze HTML speciale tekens is een PHP functie die zal voorkomen dat dit soort van wat er met je gebeurt als je een kwaadwillende snaar in uw database. Het ontsnapt het gewoon, zodat het niet krijgen geïnterpreteerd als HTML. Het vervangt de kleine haakjes met wat we entiteiten noemen. En we gingen dan deze in collegezaal ook. Dus ik denk dat jullie moeten hebben een goede greep op dat. Vragen? Ja. 

PUBLIEK: Dus hoe zou de [onverstaanbaar]? 

JOSEPH ONG: Zeg dat nog eens. 

Publiek: Hoe zou de monitor - 

JOSEPH ONG: Juist. Zodat je iets dat zegt, wanneer Ik schrijf me in, typ mijn naam. Ik typ je gewoon op dat gebied, mijn naam is stript bericht unflattering Facebook staat dicht script-tag. En dat alleen maar in het gets zetten gegevensbestand, want ik kan niet zeggen dat iemand in de wereld heeft geen naam hebben met een pijl naar links in het of de woord script in. Dat is niet echt zinvol. Dus ik moet gewoon zorgen dat ik ontsmetten van de dingen voordat ik print het naar de pagina. 

PUBLIEK: Dus de HTML speciale kaarten voorkomt dat de script-tags? 

JOSEPH ONG: Yeah. Het maakt dus niet voorkomen dat de script-tags. Het maakt zeker dat de script-tags niet krijgen geïnterpreteerd als HTML of - ja. Het komt gewoon als wat het eigenlijk is. Oke. Dus dat was de quiz beoordeling. Cool. 

[Applaus]