HANNAH Blumberg: Hej alla. Vi kommer att komma igång bara ett par minuter för tidigt eftersom vi har en hel del av material för att få igenom. Jag är Hannah. Jag är en TF. Maria kommer att ansluta oss på bara ett par minuter. Hon undervisar avsnittet precis innan. Jag undervisar avsnitt rätt efter, så vi tänker att hålla det till och en halv timme. 

Så som du ser här uppe, vi har helt några frågor som vi behöver för att få igenom, så vi kommer att gå lite snabbt. Men om vid någon punkt vi säger något för snabbt eller om du inte förstår, gärna att avbryta med frågor. Vi vill kunna göra detta till en granska session som användbar för alla er som möjligt. Grymt bra. 

Så låt oss hoppa rätt in med vissa ämnen som vi faktiskt mycket, mycket kort täckas in för quiz 0 i frågesporten 0 omdöme session. Så börjar med länkade listor. Så bara till att du har några grundläggande kunskaper om länkade listor och är bekväm att göra några av de grundläggande funktionerna. 

Så bara för att granska, kopplade listor är bättre än arrayer eftersom de kan växa dynamiskt. Så vi har det stor fördel. Vi har sett dem används i hashtabeller när vi vet inte exakt hur många saker vi kommer att vilja att infoga i vår datastruktur. Tyvärr, vi har bitar av den länkade listan över hela minnet, så vi kommer inte nödvändigtvis kunna göra konstant tid tillgång till alla element i den länkade listan. För att finna en särskilt element, vi måste iterera alla sätt från början. Så kom ihåg att de flesta av grundläggande funktionerna är omega av 1. Så insatsen bara kommer att ta en. Radera kommer att ta n eftersom vi måste gå att hitta den i listan. Och sökning kunde ta, i värsta fall, n. Vi kan inte göra något liknande binär sökning på en länkad lista eftersom vi kan inte bara slumpmässigt hoppa till mitten. Häftigt. Grymt bra. 

En liten bit av staplar. Detta, återigen, kom upp på frågesport 0, så att du bör vara super bekväm med det. Men för stackar, ber vi dig att komma ihåg en stapel av brickor. Och det kommer att vara först in, sist ut. Så vi stack upp saker i stapeln, och sedan Om vi ​​försöker ta något off-- som vi kallar poppar ut den stack-- vi kommer från toppen. Och om vi vill sätta något i stapeln, vi kallar det driver. Så det är alltid kommer att växa upp från botten som en stapel av brickor. Grymt bra. 

Vi har sett staplar genomförts med både länkade listor och matriser. Om du genomföra med arrayer, du vill att se till att hålla reda på både storleken och kapaciteten. Så storlek kommer att bli aktuellt antal saker i din stack, medan kapaciteten är det totala antalet av saker du kan lagra i din stack. Häftigt. 

På samma sätt, har vi köer. I detta fall, i stället för att tänka på en stapel av brickor, tänk på en linje. Detta kommer att vara först in, först ut. Så om du ställer upp för något i butiken, Vi hoppas att personen först i linjen kommer att få hjälp först. 

Istället för att säga tryck och pop som vi gör för stack, vi bara säga enqueue och dequeue. Och återigen, om du är genomföra detta med en array, vi behöver hålla reda av inte bara storleken och kapacitet, men också huvudet, vilket kommer att vara på framsidan av vår kö. Häftigt. Eventuella frågor om något av detta? Grymt bra. Flytta höger längs. 

OK, hashtabeller. Här är där det börjar bli riktigt intressant. Så en hashtabell är en implementering av en associativ array. Så i princip vad som hände är vi alla denna ingång, och vi ger det till en hash funktion som säger, OK, det är här i hashtabell den tillhör. 

Så den enklaste hashfunktionen att vi har sett är bara säga, OK, antar att vi vill sätta strängar i vårt hashtabell. Och en riktigt enkel idé skulle kunna vara att säga, OK, låt oss bara sortera efter första bokstaven i ordet. Så du kan se här, tar vi banan, vi sätter det genom en hashfunktion, och det står, hey, att bör gå vid index 1. 

Så vi kan i princip tänka på en hash tabell som ett gäng olika skopor. Och var och en av dessa skopor kommer att hålla huvudet av en länkad lista. Och i den länkade listan är där vi kan faktiskt sätta olika delar av data. 

Så dyka lite mer i en hashfunktion, här är exemplet jag bara beskrivs där vi bara säga, OK, ta den första bokstaven av ordet och vi är kommer att sortera det i hinkar. Så förmodligen kommer det att finnas 26 hinkar, en för varje bokstav i alfabetet. Varför är inte detta ett bra hash funktion? Vad som gör denna icke-ideal? Ja. 

PUBLIK: Du kommer ha kollisioner. 

HANNAH Blumberg: Ja, exakt. Du kommer att ha kollisioner. Så det är en sak. Och vi kommer att tala om hur vi kan fixa kollisioner på bara en sekund. Ett annat problem med denna särskilt hash-funktion är att våra olika hinkar kommer att vara nätt drastiskt olika storlekar. 

Vi vet att det finns en hel del fler ord som börjar med A än X, så vi kommer att ha mycket obalanserad hinkar i vårt hash bord. Häftigt. Så ja, låt oss gå tillbaka till punkten för kollisioner. Vad gör vi om det finns en kollision? 

Vi har ett par olika alternativ. Så en, så antar vi försöker att sätta bär i våra hash bord. Och vi ser, åh, vi vill ha för att uttrycka det i index 1, men banan bor redan där. Vad ska vi göra? Vi har två huvudalternativ. 

Nummer ett är att vi kan säga, OK, det finns inget utrymme i index 1, men låt oss bara hålla titta igenom tills vi kan hitta en annan öppen plats. Så vi säger, OK, låt oss lägga den i plats 3. Det är ett alternativ. Det kallas linjär sondering. 

Och ett andra alternativ säger, OK, ja, låt oss bara göra var och en av dessa skopor vara huvuden länkade listor. Och det är OK om det finns mer än en sak i en hink. Vi ska bara bifoga det på framsidan. Så här kan du se, OK, när vi införas bär, vi bara tog banan, typ av sköt det över lite och kastade en bär där. Och det är också helt bra. Detta kallas separat kedja. Du kan tänka på det som ungefär som en rad huvuden länkade listor. Har du frågor om hash tabeller, hash funktioner? Grymt bra. 

Träd och försök. Så ett träd är någon sort av datastrukturen där det finns någon form hierarki eller någon sorts att rangordna dina olika objekt. Och detta kommer att bli super klart när vi ser ett exempel. Och vi såg försök, tillsammans med hashtabeller, i pset5-- som, återigen, helt rättvist spel för detta quiz-- som ett annat data strukturer som vi kan lagra olika saker. I fallet med ordlistan, vi lagrat en massa ord. Så låt oss ta en titt på några träd. Så detta är ett exempel på ett träd. Den har en typ av struktur, att hierarkisk struktur, där du kan se att detta en nod på toppen har någon form av rang över 2 och 3, som ligger över 4, 5, och 6 och 7, som ligger över 8 och 9. Så det är allt menar vi med en träd, så att du kan bara typ av bild här i ditt huvud. 

Nu har vi ett par mer specialiserade träd. Så ett exempel är ett binärt träd. Och ett binärt träd är, igen, bara kommer att bli en datastruktur med någon sorts hierarki, men var och en av noderna kan ha högst två barn. Det är där ordet binära kommer ifrån. Så detta är ett exempel på ett binärt träd. Så det är en mindre kategori av träd. 

Låt oss nu få ännu mer specifik och tala om binär trees-- binär sökning träd, snarare. Så här idén är inte bara varje nod har högst två barn, men alla barn till vänster kommer att vara mindre och alla barnen till höger kommer att bli större. Så varsel bara vår binärt träd, det finns inget samband mellan siffrorna. Men i vår binär sökning träd, vi ser, OK, här är 44. Och varje nummer till vänster om 44 mindre och allt till höger är större. 

Och det håller på varje nivå i trädet. Så här är det mindre än 22 och det är större än 22. Och det är binärt sökträd. Varför tror vi det kallas ett binärt sökträd? Vad algoritm gör det påminna er om? PUBLIK: Binär sökning. HANNAH Blumberg: Binär sökning. För om du letar efter en visst antal i detta träd, vid varje punkt, kan du bara slå off hälften av trädet, vilket är bra. Och så som kommer att ge oss något som ser väldigt lik binär sökning. Några frågor? Okej, cool. 

Okej, försöker. Allas favorit. Så detta är exempel som Vi har sett ett gäng i klassen. Och återigen, detta är bara en annan sätt som vi kan lagra data. I fallet med ordlistan, återigen, detta är bara kommer att bli strängar. Så låt oss se vad detta faktiskt ser ut på en något lägre nivå. 

Så låt oss ta en titt vid en nod i ett trie. Och vi ser, OK, är det att gå att vara ett booleskt och en nod, en pekare till en nod. Och vi ser att Boolean kallas is_word. Så i huvudsak, det är kommer att motsvara till dessa små trianglar som säger, om du har fått här, du har hittat ett fullständigt ord. 

Vi vet att "turing" över här är ett fullständigt ord, medan bara T-U-R är inte ett ord eftersom vi inte ser den lilla deltat. Och den lilla delta, återigen, motsvarar denna is_word, Detta Boolean is_word. Och så har vi en rad barn. Så på varje nivå, du har en viss nod, och den noden pekar på en matris med hela alfabetet. 

Så du kan se, återigen, i detta picture-- jag kommer att fortsätta att hoppa tillbaka och forth-- att denna matris på toppen har ett gäng olika noder som kommer ut av det. Det har 26 eller 27 om du vill att inkludera en extra karaktär. Och detta ger oss en sätt att lagra våra data på ett sätt som kan ses på att du kan slå upp supersnabb. Vad är lookup dags för en trie? 

PUBLIK: [OHÖRBAR]. 

HANNAH Blumberg: Ja. I teorin är det konstant tid. Det kommer bara att vara storleken på det ord som du vill slå upp. Även om vi lägger till en zillioner fler ord till vår trie, det kommer inte att ta oss längre att bestämma om ett givet ord är i trie. Så det är riktigt nice. 

PUBLIK: Har du bara initiera att array? Du missade en punkt eller två. Kan du bara prata om att för en sekund? 

HANNAH Blumberg: Visst, absolut. Bra fråga. Frågan var, vi har en matris som är kommer att ha nod stjärna som motsats till bara nod, rätt? Häftigt. Så här är vad vi säger är vår array är bara kommer att vara pekare till andra arrayer. Så det är essentially-- det slags känns som en länkad lista på detta sätt där var och en av dessa barn bara peka på nästa nod. 

Och det sätt som vi faktiskt bestämmer, hej, OK, Vi har upprepas igenom en hel ord, är detta ord i ordlistan vi kontrollerar just detta is_word. Bra fråga. Ja. PUBLIK: OK. Så vad var runtime för trie? 

HANNAH Blumberg: Visst. Så runtime för en trie för lookup kommer att vara konstant tid. Så det är bara att vara Antalet bokstäver i ordet. Det är inte beroende av storleken på ordlistan eller storleken på datastrukturen. Så här är en något enklare exempel. 

I det här fallet, kan du se att ordet BAT är i ordboken och du har zoom, men du inte har något liknande zoo. Hur skulle vi zoo? Hur ska vi lägga zoo till vår ordbok, till vår trie? Ja. 

PUBLIK: Gör is_word gäller för [OHÖRBAR]. HANNAH Blumberg: Good. Så vi skulle säga Z-O-O, och då skulle vi vill bocka av den rutan också. Bra. Låt oss jämföra mycket kort försöker kontra hashtabeller. Försök är riktigt bra eftersom, som sagt, de ger konstant tids lookup. Men den stora nackdelen är att de är humongous. Du kan få känslan, även genom att titta på det, att det kommer att ta en stor mängd minne. Så de kommer att vara mycket större än hashtabeller, men de kommer att ge oss mycket snabbare lookup gånger. Så det är typ av din avvägning, vad du bryr dig om, oavsett om det är hastighet eller minne. Eventuella frågor om något av detta, alla de C-datastrukturer. Vacker. OK. Vi kommer att gå vidare till en liten bit av webbutveckling med Maria. MARIA ZLATKOVA: Lovely. OK. 

HANNAH Blumberg: Du kan använda min bärbara dator. 

MARIA ZLATKOVA: Nice. OK bra. När vi går nu till webb utveckling, vi pratade lite om hur du ändrar behörigheter filer och kataloger så att de kan vara tillgängliga till andra användare, till världen, och så att vi kan se hur i princip kan vi förmedla dem när vi utvecklar saker som webbplatser att vi oftast har gjort. 

Så vi såg kommandot chmod, vilket är förändring läget, i princip. Det är en linux kommando och den ändrar åtkomstbehörigheter fil systemobjekt. Och ett filsystem objekt är bara en katalog, en fil, något som du kan ändra behörigheterna. 

Så för att se filrättigheter, vi skriver kommandot ls, lista, -l. Och när vi skriver att vi brukar se några behörigheter som ser ungefär som denna framför ett katalognamn. Så d hänvisar till katalogen. Och sedan har vi tre triader som i stort sett hänvisa till behörigheterna antingen en användare, en grupp, eller världen. 

De typer av behörigheter som vi kan har för dessa tre grupper av människor antingen r för läsning, w för skriva, och x för verkställa. Och vi kan ha dem för gruppen och världen också. Det knepiga är att ibland när vi skriver kommandot chmod, vi skulle skriva ett visst antal som bestod av tre bitar. Så vi kunde göra som 777 och som i stort sett hänvisade till mervärde av vart och ett av dessa triader eftersom r hänvisar till 4, w skulle hänvisar till två, och x hänvisar till en, så när de läggs upp, varje nummer skulle komma ner till ett ackumulerat antal till ett kumulativt värde mellan 0 och 7. Så vi kunde också ha 0 för inga rättigheter alls. Och det skulle i princip ge oss behörigheterna för antingen användaren, gruppen, eller världen. Eventuella frågor om detta så långt? 

PUBLIK: Du sa läste var 4? MARIA ZLATKOVA: Ja. PUBLIK: [OHÖRBAR]. HANNAH Blumberg: Japp. PUBLIK: Och sedan genom att tillsätta alla andra tyder ditt nummer. MARIA ZLATKOVA: Ja. Ja. Dessa är stora frågor. Härlig. Därefter hoppade vi in ​​HTML och lite mer om webbutveckling. Så HTML betyder bara Hypertext Markup Language. Och det är uppmärkning språk som är en standard att det används för att skapa webbsidor. 

Det kallas en markup language eftersom det faktiskt inte sammanställts. Det säger inte hur någon kod ska utföras eller nåt sånt. Det skisserar bara och beskriver hur en bana sida bör inrättas med var och en av dess beståndsdelar och hur de ska se ut till användaren. 

Några av de HTML-taggar som vi gick över är följande. Alla våra HTML-dokument började med DOCTYPE html. Sedan har vi alltid html-taggen. Vi har ett huvud och en kropp. Och det är viktigt att HTML har denna typ av kapslade struktur eftersom det är mycket tydligt. Och då blir det väldigt tydligt när vi måste öppna och faktiskt nära taggar. Och vi behöver alltid att stänga taggar som vi har öppnat. 

Och här har vi några av de typer saker framåt som vi vill ha. Så vi har, till exempel, titeln CS50. Och sedan vi faktiskt kan koppla en formatmall som definierar hur vi utformar vår hemsida. Det är CSS. Vi kommer att gå igenom den i nästa par av bilder också. 

I kroppen, vi satt några klasser och ID. Och som en påminnelse, återigen, ID är unika och klasser kan tilldelas flera objekt. Och det betyder bara att vi kan använda klasser och ID inom andra structures-- så, för exempel inom CSS-filer eller stil sheets-- att hänvisa till specifika delar och i princip säga att vi vill styla eller designa något element på något särskilt sätt. Och vi hänvisar till dem genom deras ID och klasser. Och vi kan också hänvisa till olika saker från taggar också, men ID och klasser bara ge oss några mångsidighet och vad som specifikt vi vill hänvisa till. 

Så bara ett exempel. Vi kan, återigen, inom en CSS-fil där vi vill definiera vissa style-- så färger, teckensnitt, och sånt that-- vi kan definiera stilen för en kropp. Så det skulle definiera det för hela kroppen taggen. Men då kan vi också definiera en stil för en #title. Och återigen hänvisar hashtag till vår Id och punkten hänvisar till vår klass. 

Och sedan för .info, vi kan också ställa vissa attribut. Och återigen, när vi går tillbaka, vi hade vår klass som kallas info och vår ID titel. Och vi kan se att vi hänvisar till dem av #title och .info. PUBLIK: Skulle du säga hashtag [? adoptera mig? ?] MARIA ZLATKOVA: Förlåt? PUBLIK: Skulle du säga hashtag [? adoptera mig? ?] MARIA ZLATKOVA: Hashtag betyder ID, så #title hänvisar till oavsett element har detta ID kallas titel. Och sedan punkten hänför sig till en klass. Så .info hänvisar till detta element eftersom det har klass info. Japp. 

PUBLIK: Varför tror du skilja dem i HTML? Varför säger du vissa saker är ID och vissa saker är klass? MARIA ZLATKOVA: Det är bara upp till dig-- HANNAH Blumberg: Upprepa frågan. MARIA ZLATKOVA: Åh, förlåt. Varför vi urskilja vissa delar som ID och andra element som klasser? Det är bara för att det är verkligen ofta en konstruktion val. Det ger dig en hel del mångsidighet i att vara kunna säga att jag vill ha den här särskilda post att detta ID för att de vill att göra en massa saker med det, och jag bara vill definiera en stil, viss stil eller färg vad för det objektet. Och sättet att göra det är bara ge det ett ID. 

Och sedan om jag vill ha ett par olika objekt med att i stället för gå och ställa their-- istället för att göra det genom tagg eftersom etiketten skulle ställa cellen för hela taggen för varje gång den taggen används, du kan ställa in en klass till flera objekt. Och sedan bara komma åt den klassen och säga Jag vill styla denna klass på det sättet. 

Och återigen, klassen kan finnas flera olika objekt och ID måste vara unikt. Stora frågor. Alla andra frågor? OK, awesome. Återigen, detta är hur dessa väljare refereras i CSS, med hashtag, med prick, eller utan något för tilldela stil med några tag, liknande kropp. Och här har vi den allmänna syntax för hur detta görs. 

För att upprepa några bäst praxis för HTML och CSS, Vi måste återigen, stäng alla HTML-taggar som vi kan öppnas. Och vad vi rekommenderar att du göra för din slutliga projekt, liksom för CS50 Finance, är att göra Se till att alla dina HTML validerar. Och det är gjort med W3 Validator. 

Och vad vi gjorde och vad vi rekommenderar gör separerar stil, så CSS från uppmärkning HTML. Så allt som relaterar till hur din sida kommer att visuellt se och hur det kommer att ändras bör gå in i en CSS-dokument. Och sedan ditt markup säga hur saker är i förhållande till varandra är HTML, och det borde gå in av dina HTML-dokument. Några frågor? Mhm. 

PUBLIK: Vad exakt kommer på med sidan validering när vi validera HTML som [OHÖRBAR] skapat? 

MARIA ZLATKOVA: Så Vad-- tror dig. Så vad exakt går på med sida validering och varför måste vi göra det? I grund och botten, vi måste göra det eftersom många gånger, din webbläsare, Om du inte stänger en tagg eller något sådant, webbläsaren fortfarande kommer att göra en sida och kan fortfarande fungera, men det är bästa praxis för att se till att Du har återigen stängt alla dina taggar, att alla dina delar är det sätt som de borde vara, och i princip att det är av konventioner som är förinställda. 

Det är, återigen, bara en sak som du bör att lära sig att göra, i motsats till med sloppier kod och sånt. Ja. Åh förlåt. Jag trodde du höja din hand. Målgrupp: Nej, jag var bara [OHÖRBAR]. 

MARIA ZLATKOVA: OK. 

PUBLIK: Tack. 

MARIA ZLATKOVA: Naturligtvis, tack. Så återigen, pågår i hur information överförs och kommunikationsmodeller för att överföra information. TCP / IP. TCP betyder bara Överföring Control Protocol och IP hänvisar till Internet Protocol. Och som bara refererar till hur data levereras. 

Om vi ​​har vissa uppgifter som behöver levereras till du-- så du gör en begäran om en viss server. Till exempel när vi försöker komma åt cs50.net, Vi gör en begäran om att den CS50 servern och vi se att vi vill få denna typ av information. Och sedan bygger på detta protokoll för hur denna information avges, servern ger information tillbaka till oss, kunden. Och då är vi kunna visa informationen för sidan och sedan använda den. 

Så då Hypertext Transfer Protocol är bara ett annat protokoll eller ställa konventioner som definierar hur webbläsaren och webbservern ska kommunicera. Och sätta detta allt tillsammans, HTTP, återigen, bara definierar hur denna hyper definieras av HTML som vi har arbetat det, hur det ska levereras till dig och hur den data som levereras till dig får du. 

Och det är därför, om ni minns från en klass, vi hade en hel del förfrågningar och vi hade en hel del syntax för dessa ansökningar som vi är kommer att gå över just nu. Så återigen, när vi skickar en begäran till en server, Vi måste definiera ett par saker. Så vi måste hitta den typ av begäran om att vi inställningen. Och återigen, vi har, till exempel, GET är en typ av metod som vi har i vår begäran. 

Och sedan HTTP / 1.1 är bara protokoll som vi använder för närvarande. Merparten av tiden, är att gå till det protokoll som vi använder. Så om du har en fråga sånt på din frågesport. Det är de konventioner att vi har så här långt. 

Omvänt snedstreck avser vilken typ saker som vi efterfrågar. Då är vår värd, till exempel, i detta fall, vi försöker att gå till google.com. Så detta är värdet för en värd. Detta är en typ av begäran som kunde sändas. 

Och sedan en typ av svar som kunde sändas, återigen på grundval av detta protokoll, är återigen, HTTP / 1,1. Så det är HTTP-versionen igen. 200 OK är bara statuskoden. Och det OK är bara en fras baserat på denna statuskod. 

Och sedan Content-Type syftar på den typ som går tillbaka till dig som är för den webbsida som du får och att din webbläsare kan göra efteråt. Och det är text / html. 

PUBLIK: Vad betyder 1.1 detta? 

MARIA ZLATKOVA: Det är bara version of-- åh, vad betyder 1.1 detta? Det är bara den version, HTTP version av ett protokoll som vi använder. Bra fråga. Andra frågor? 

PUBLIK: Kan du sammanfatta Content-Type riktigt snabbt? 

MARIA ZLATKOVA: Så det är vad servern. typen av information-- vad som är innehållstypen var frågorna. Så det var den typ av information som du får tillbaka från servern, den typ av data som webbläsaren kan då göra att du använder. PUBLIK: Är det vad detta protokollet säger till dig att göra? MARIA ZLATKOVA: Förlåt? PUBLIK: Är det vad protokollet säga? MARIA ZLATKOVA: Den protocol-- PUBLIK: --what den Content-Type är eller Vad-- MARIA ZLATKOVA: Protokollet bygger on-- vad är det protokoll som talar om? Det är precis som att denna information levererades till dig baserat på vilken typ av protokoll var denna information fick levereras tillbaka till dig. Låter det vettigt slags? HANNAH Blumberg: Du kan tänka på protokoll som en-- Jag tror Professor Malan beskrev det i klassen som ungefär som en-- det är som motsvarande mänskliga handskakning. Säg, liksom, hey, jag är en begäran och jag vet hur man hanterar HTTP version 1.1. Och då servern säger, åh, OK, jag-- och båda existerar. Jag vet också hur man handskas med HTTP / 1.1. Och jag kommer att ge du säkerhets något innehåll. I det här fallet, det kommer att vara av typen text / html. Så det är typ av bara ett sätt av dem för communicating-- 

MARIA ZLATKOVA: Det är bara bekräftar att du är både att följa samma protokoll och att både klienten och server-- så webbläsaren och server-- sorts vet vad du är talar om och har konventionen för att passera i data. 

PUBLIK: Så Content-Type part-- Content-Type text / är html-- att en separat del av samma meddelande? Eller är det en del av låt oss säga, 200? Har 200 berätta för dem att eller är-- 

MARIA ZLATKOVA: 200 säger allt gick OK. Och sedan innehållstyp är en slags separat del av samma meddelande, och säger det som jag Återvände har den här typen av text / html. Det är bara att ge mer information. Har något att tillägga? OK. 

Alla andra frågor om detta? Grymt bra. Så några andra HTTP status som vi kunde få i tillägg till 200 OK, de som vi har sett kanske möjligen en hel del är 403 och 404. Så 404, om du försökte Tillgång till något som inte existerar. Så till exempel, i CS50 Finance psets, om du hade varit rendering quote.html och du inte har filen, men i stället du hade quote.php att skulle resultera i en 404 Not Found eftersom filen kanske inte existerar. 

För en 403 förbjudet att hänvisar till de behörigheter. Så om någon fil är inte läsbar av värld, kan du få en 403 returneras. Några andra som du kan get-- 301, Flyttad permanent; 302, Funnet; 304, modifierad; 400 Bad Request; och sedan Internal Server Error för 500 och 503, service Otillgänglig. Ja. 

PUBLIK: Kommer vi förväntas memorera alla dessa status? MARIA ZLATKOVA: Jag skulle ha dem på din fusklapp. [SKRATT] PUBLIK: Är vi förväntas vet vad som triggar varje? MARIA ZLATKOVA: Är de? HANNAH Blumberg: För dem som vi har kör into-- så frågan was-- MARIA ZLATKOVA: Är de förväntas vet vad var och en av dessa status koder kan utlösas av? Så för de som vi har använt och sprang in, skulle jag säga, ja. Så vi har definitivt sett 200 OK och föreläste den psets. Vi har sett 403, 404. För andra? 

HANNAH Blumberg: Jag skulle säger 500 verkar rättvist spel. 

MARIA ZLATKOVA: 500, ja. 

HANNAH Blumberg: Ja. Bara ha en allmän känsla av vad som orsakar dem. Och även bara genom dessa namn, kan du typ av som gör en kvalificerad gissning som vad som faktiskt orsakat dem. Till exempel, flytta permanent, förmodligen filen flyttades permanent. 

PUBLIK: Men på ett tidigare examen, fanns det en så Hur förväntar du dig att vi ska svara på det? 

HANNAH Blumberg: Att var värd noll poäng. Frågan om 418 på tekannan är tekniskt en HTTP-status, men det var värt noll poäng. Självklart, du är inte förväntas känna dem. 

PUBLIK: Är det en riktig? 

HANNAH Blumberg: Det är en verklig en, men det betyder ingenting. Det är bara ett skämt. Internet människor är rolig. 

MARIA ZLATKOVA: Stora frågor, killar. Alla andra frågor? 

PUBLIK: Vad är internt fel server? MARIA ZLATKOVA: inre serverfel bara innebär att du har varit inte kan kommunicera med servern av någon anledning. Så det är inte nödvändigtvis något som har att göra med kunden eller nåt sånt. Jag känner inte till något specifikt exempel att vi har gått över till att förklara, men ja. 

HANNAH Blumberg: Visst. Så till exempel, som låt oss säga att du arbetade på mashup och en Google-server gick ner för vissa Därför ett strömavbrott, låt oss säga. Det skulle vara en intern server fel eller någon sorts of-- gillar dig skulle inte få ett svar tillbaka. 

MARIA ZLATKOVA: Ja. Det är bara när du är inte kan kommunicera med servern av någon anledning eftersom det går ner eller av någon annan orsak. Så hoppa in i PHP. PHP, till skillnad från HTML, är en programmeringsspråk. Och vi började använda det eftersom det är mycket användbart för webbutveckling. 

Vi använde det först i CS50 Finance. Och det i princip hjälper oss att föra ihop den här markup, design, och hur vi faktiskt använda information att visa saker på en webbsida. Så PHP sig innebär PHP Hypertext Preprocessor, så det är en rekursiv backnorym av sig själv. Och öppna taggar för PHP vi vänster och höger pilarna med frågetecken och php. 

Så vi har redan sett ett gäng det. Nu, vi ska bara gå över några av de grundläggande saker om det. Så med PHP, variabeln namn börjar med dollartecken. Vi anger inte, återigen, en variabel skriver längre. Precis som vi gjorde med C, vi behöver inte göra det. 

Vi kan göra en massa olika grejer med variabler. Vi kan sätta ihop dem genom att sammanlänka dem med punktnotation, som Vi kunde inte göra i C igen. Återigen, vi har lite mer mångsidighet med PHP i form av variabler. Återigen, vi har inte en huvudfunktion. 

Och PHP tolkas i motsats till sammanställts, Så hur vi gjorde för C-filer, vi behöver inte göra det för PHP. Utan snarare det sätt att det språk drivs av sig själv, är det tolkas. Och sedan löst skrivit betyder bara att vi behöver inte ange en variabel typ och variabeltyper förstås vid körning. 

PUBLIK: Men vad gjorde du menar med dot sammanlänkning? MARIA ZLATKOVA: Visst. När vi vill sätta saker together-- så om vi hade några variabel som hade ett värde av 3 och vi hade en annan variabel som hade värdet av strängen, vi kunde sätta variablerna tillsammans genom att sätta en punkt mellan dem och konkatenera dem. Eller vi kan skapa en variabel som heter namn och satte ihop med konkatenering två strängar. 

Så om vi hade en sträng i dubbel offerter och vi sätter en punkt efter det, och sedan hade vi en annan sträng, att skulle skapa en sträng helt och hållet. 

PUBLIK: OK. MARIA LETTLAND: Var det klara? PUBLIK: Ja. MARIA ZLATKOVA: OK. Ja. 

PUBLIK: När du säger tolkas snarare än sammanställt, pratar du om du inte måste vara så specifik när det kommer att PHP kontra C? MARIA ZLATKOVA: När vi säger tolkas i motsats till sammanställts, Vad menar vi? Så det innebär att vi inte behöver körbara filer för att köra PHP. Det innebär att det går som det går. Betyder det vettigt? Lite mer. HANNAH Blumberg: Så du kan tänka tolk som ett annat program som är ansvarig för att gå rad för rad genom PHP och faktiskt verkställer det, i motsats att sammanställa allt ner till binärt. Det faktiskt inte betyder något om hur specifik måste vi vara. Vi behöver fortfarande att vara exakt, och inte glömt semikolon, och se till att du har din dollartecken, och sånt. Bra fråga. 

MARIA ZLATKOVA: Ja. Så rad för rad, som motsats till med C-filer, Vi måste göra hela finalen innan vi faktiskt kan köra det. Det är den största skillnaden. Men återigen, vi kan inte verkligen vara mindre specifik. Så matriser i PHP representerar faktiskt en ordnad karta. 

Så arrayer associerade värden till nycklar. De två sätt att förklara en array, grundar sig på detta syntax, Vi kan vara mer explicit att säga att vi har en matris och vi har denna nyckel1 som avbildas till detta värde1, KEY2 som avbildar value2. Eller vi kan bara skapa en array som innehåller de värden själv och sedan tangenterna är förstås på ett sätt. Eventuella frågor om detta? 

Publik: Vad skulle tangenterna vara i det andra exemplet? 0, 1, 2, 3? 

MARIA ZLATKOVA: Till exempel är det bara nycklar i denna inte nödvändigtvis Göra skillnad. De definierar hur du kan använda värdena inne i den. Så om vi hade en foreach slinga i PHP som skulle tillåter oss att gå igenom alla värden, vi kan gå igenom alla värden, även om vi hade eller hade inte definierat en särskild nyckel i webbplatsens tidigare syntax. 

Så även med denna typ av array, vi kan fortfarande ha en foreach slinga som går genom varje av värdena i nyckeln i arrayen. Så syntaxen av en foreach loop, börjar vi med en array. Denna $ arr variabel är vår verkliga array att vi definierade i föregående bild som ett värde som bokstavligen går genom var och en av de värden, oavsett vi hade en nyckel eller inte. Och då kan vi göra något med värdet insidan av foreach slingan. Så återigen, om vi hade en matris som det här created-- så vi har nyckeln till foo och värdet av bar, nyckeln till baz och värdet av qux-- vi kan ha en foreach loop som går genom array som nyckelvärde och sedan göra något med nyckeln och / eller värde. Men vi gör inte nödvändigtvis alltid måste ha en foreach slingor att går igenom array som nyckel karta att värdera. Vi kan gå igenom foreach slinga array som värde. 

HANNAH Blumberg: Och jag tror att-- var din fråga, vad är det implicita indexet? PUBLIK: Kinda. MARIA ZLATKOVA: Oh. HANNAH Blumberg: Ja, ja. Så i princip, om du inte anger en nyckel, det kommer att bli 01. 

MARIA ZLATKOVA: Ja. Precis som med C, det är noll indexeras om du inte anger en nyckel. PUBLIK: Förlåt. Kan du försöker tala lite högre? Jag har en liten bit av svårt att höra allt. 

MARIA ZLATKOVA: Jag är så ledsen. Ja självklart. Så vill du mig att gå över detta igen? Eller är this-- PUBLIK: Så på föregående slide-- om du kan bara gå tillbaka för en sekund. MARIA ZLATKOVA: Naturligtvis, sorry. PUBLIK: Så den andra array här inte verkar ha ett värde att knappa, ungefär [? orsakssamband. ?] MARIA ZLATKOVA: Höger, höger. PUBLIK: Så hur fungerar det när du säger det är allt eller inget. För mig ser det ut som en [? foo?] redan. 

MARIA ZLATKOVA: Ja, ja. Så återigen, detta är en beställt kartan i denna mening att det förstås, exempelvis indexen här kan förstås som 0, 1, 2, 3. Återigen, det är med de index är vår motsvarighet att ha nycklar mappats på värden. Så om vår nyckel var 0-- ledsen. 

HANNAH Blumberg: Nej, Det är krita upp här. Det är faktiskt riktigt nice. 

MARIA ZLATKOVA: Det är bra. OK. Så återigen, skulle $ arr 0 vara nyckeln till värdet 1. 0 skulle vara nyckeln till värdet 1. PUBLIK: Jag är ledsen. Det är osynlig. 

HANNAH Blumberg: Okej, nevermind. Krita var en dålig idé. Jag tar tillbaka det. Du kan tänka på tangenterna som 0 kartor till värdet 1. MARIA ZLATKOVA: Ja. Så det här är 0, är ​​detta ett, två, tre. Dessa kan vara dina nycklar. Du kan tänka på dem as-- ja. Så istället för att ha uttryckliga nycklar, de är slags förstås som indexen börjar vid 0. Krita hjälpte inte. Ja. 

PUBLIK: För foreach loop, om vi ville se som ett värde, Det skulle bara automatiskt index till 0? MARIA ZLATKOVA: Ja. Det skulle gå igenom vart och ett av värdena. PUBLIK: [OHÖRBAR] som 0 eller skulle det bara göra 0? 

MARIA ZLATKOVA: Du skulle behöva att säga som dollartecken och sedan vissa variabelnamn, värde. PUBLIK: [OHÖRBAR]. MARIA ZLATKOVA: Förlåt? Målgrupp: Tyvärr, jag är bara försöka komma ihåg. Hur skulle du göra det om du kan göra det automatiskt indexering är bara 0 av? 

MARIA ZLATKOVA: Så hur skulle du göra det om du inte har särskilda nyckel namn? 

PUBLIK: Ja. 

MARIA ZLATKOVA: Du skulle bara define-- bara säga dig själv som en del namn. Så i dina psets, ni kanske minns foreach $ v $ rader, Vi skapade själv denna $ rad säger Vi vill gå igenom rad som $ rader. Även om vi inte har detta uttryckliga $ rader definieras, vi kunde bara gå och säga detta kan vara vår nyckel, och bara gå igenom vart och ett av värdena. 

PUBLIK: Så är värde en ny variabel vi skapar för att lagra [OHÖRBAR]? 

MARIA ZLATKOVA: Så det är inte till sin natur en ny variabel. Det är en variabel som hänvisar till insidan av uppsättningen för att var och en av dem. HANNAH Blumberg: Det är ett nytt variabelnamn. MARIA ZLATKOVA: Ja, det är ett nytt variabelnamn, men det är inte inherently-- ja. Det är bara en ny variabel att du kan göra det. Så hur gör vi gjorde $ rad som $ rader, rader var ett nytt variabelnamn som vi skulle kunna skapa i vårt foreach slinga. Det behöver inte preexist dessförinnan. 

PUBLIK: Kan du gå igenom logik för varje, med hjälp av exempel där? MARIA ZLATKOVA: Mhm. Åh förlåt. Här är exempel. Säker. Så för varje array-- så det betyder gå till denna samling som nyckel value-- det kommer att gå igenom denna samling och först gå och få foo, den nyckel foo och värdet bar. Och sedan på den andra iteration av for-slingan, det kommer att gå igenom och ta nyckeln baz och värdet qux. Och då kan du göra något med endera av dem eller båda av dem. 

PUBLIK: Så tanken bakom som har en viktig punkt att det värde, vad gör du i slutändan få tillgång till? 

MARIA ZLATKOVA: Vad är tanken att ha en nyckel pekar på värde? Det är bara en annan konvention, annan sätt att gå igenom arrayen och att kunna komma åt antingen nyckel eller värde eller båda och använda dem. 

PUBLIK: Vad är roll för besluta att foreach körs i? Så om vi skulle lägga element till arrayen senare, skulle de vara de första kallas i foreach array, eller skulle det vara senare? 

MARIA ZLATKOVA: Så vad är den ordning som foreach loop går igenom en rad i? Den går genom den första element till sista elementet, till det sista tillagda elementet. Om du lägger till element senare, skulle de att accessed-- de första elementen skulle nås som den första elementen i uppsättningen, och sedan skulle gå igenom var och en av elementen som typ av en ordered-- inte en ordnad, men det sätt som de har satts i arrayen. 

PUBLIK: Så nya element sätts senare? Så de är added-- de ska vara sista som i [? iteration. ?] 

MARIA ZLATKOVA: Nya inslag can-- i princip, när nya element läggs till, läggs de till i slutet av arrayen? 

PUBLIK: Ja. MARIA ZLATKOVA: Jag tror det. Ja. Och sedan med din foreach loop, efter att du har lagt till nya element och du går igenom dem, de nya inslag skulle vara accessed-- den nya delen, om det är sattes sist skulle det nås sist. 

PUBLIK: Kan du bara ge ett exempel något som skulle [OHÖRBAR] med något med värde som [OHÖRBAR] eller värde, gillar hur du skulle formatera det? 

MARIA ZLATKOVA: Visst. Kan jag ge ett exempel på vad vi skulle göra med värdet? Så vad ni kanske känner till är att vi har gått igenom en rad och i princip tryckta vart och ett av elementen, till exempel, som en del av en ordnad lista eller något som. Betyder det vettigt eller vill vi att-- PUBLIK: Kan vi skriva ut dessa värden ut? MARIA ZLATKOVA: Ja, vi kunde skriva ut och sedan i princip $ värde på grund av att det specifika värde, skulle vi vara utskrift värdet inne i den. Så om vi var på vår första iteration det och vi tryckt $ värde, vi skulle skriva ut bar. 

PUBLIK: Finns det även för loopar i PHP eller bara foreach slingor? 

MARIA ZLATKOVA: Det finns även för loopar i PHP. Och deras logik är oftast samma som vad du har varit vana vid. PUBLIK: Så dess värde är noll. MARIA ZLATKOVA: Det är som samma. Ja. PUBLIK: Jag kommer bara att fråga. Så när du deklarerar en array, behöver du inte att tala om vilken storlek det kommer att vara, vilket innebär att du kan bara lägga till och ta bort delar [OHÖRBAR]. MARIA ZLATKOVA: Japp. Japp. Exakt. När vi förklarar en array, vi behöver inte säga vilken storlek det är, så att vi kan bara lägga till element på den senare också. Fler frågor? Så föra PHP och HTML tillsammans, vad vi har seen-- bra, till exempel, i detta exempel, har vi ett HTML-formulär som har ett inmatningsfält. 

Och inmatningsfältet är bara namn och sedan har en Skicka-knapp. Och när du trycker på Skicka knapp, enligt vår hello.php fil, eftersom metoden för formuläret är få, kan vi komma åt allt som är på namn genom detta få globala variabel som är-- syntaxen för det är $ _GET. Och då kan vi komma åt oavsett användarens input inne i denna form under namnet genom att ange namnet på detta område. 

Alla andra frågor eller någon frågor om detta specifika exempel? 

PUBLIK: Var är PHP? MARIA ZLATKOVA: Här. Så detta är vår starttagg för PHP. 

Målgrupp: Åh, höger. 

MARIA ZLATKOVA: Ja. 

HANNAH Blumberg: Den = är en förkortning för detta är PHP och bara eko. PUBLIK: Oh. MARIA ZLATKOVA: Ja, tyvärr. Jag borde ha gjort det klart. 

HANNAH Blumberg: Skriv ut. MARIA ZLATKOVA: Det är bara funktionen som tillåter oss att skriva ut något. Bra fråga. Så going-- ja. 

PUBLIK: Finns det kommer att vara ganska lite manuell kodning av PHP och HTML på frågesport 1? MARIA ZLATKOVA: Det kan finnas en hel del tolknings PHP och HTML, inte nödvändigtvis som en enorm mängd kodning, även om du kanske måste skriva en foreach loop, men en for-loop. Vilken som helst av de slingor som vi täcka här är rättvist spel. Och det är oftast det. HANNAH Blumberg: Jag skulle vara beredd. På samma sätt som vi bad dig skriva en massa C funktioner på frågesport 0, Jag skulle vara beredd att göra densamma i PHP och JavaScript. MARIA ZLATKOVA: Ja. HANNAH Blumberg: Jag skulle säga a little-- som vi inte kommer att göra dig att skriva en enorm HTML sida bara för att det är lite tråkiga, men du kan ha delar. Det är helt rättvist spel. Som små HTML-sida, helt rättvist. PUBLIK: OK. Vad sägs om i JavaScript liksom? HANNAH Blumberg: Ja. JavaScript verkliga spel. 

MARIA ZLATKOVA: Ja. Det är helt rättvist spel. HANNAH Blumberg: Vi får som i liknande 10 minuter. 

MARIA ZLATKOVA: SQL, återigen, Structured Query Language. Den tillåter i princip att vi kan hantera data i en relationsdatabas system. Det betyder bara i grund och botten att vi har någonstans att lagra några data som vi kanske vill användning i en webbplats eller i någon annan form. Och sedan har vi frågor för att få information från vår databas, eller för att infoga information i dem. En hel del av den gemensamma ones-- UPDATE, INSERT, SELECT och DELETE. 

Så för UPDATE är syntaxen för uppdatering av data i en databas. Uppdatering tabellen kallas tabell genom att säga SET, Vi kan ange några värden i alla rader till lika något annat. Så kan vi också ange vissa specifika poster som vi vill ändra och det kan vara att använda VAR. Och vi kan ange att vi bara vill ändra vissa rader där huset för, om vi hade en tabell med studenter och alla studenter hade hus, så vi skulle bara ändra vissa värden där ett hus är lika Currier, till exempel. 

För INSERT, kan vi sätta in vissa värden i en tabell. Så INSERT INTO tabell, och sedan värdena och sedan inom parentes anger vi vilka värden du vill infoga. Så INSERT INTO tabell, col1 och col2, är värdet val1 och val2. Så detta införs i grunden en ny rad i en tabell som innehåller värdena 1 och 2 I kolumnerna 1 och 2. 

Och då kommer vi att gå över ett snabbt exempel på hur detta ser ut som i vår databas lite. Men denna sista frågan som jag tror att vi kommer att gå över, VÄLJ, det bara ger oss att välja data från en tabell att eventuellt använda den efteråt. Och sättet vi gör det är vi bara lagra den i någon variabel. Och då kan vi eventuellt använda den igen. 

Så SELECT stjärna betyder att välja alla. Det är bara en förkortning för val alla. FRÅN tabell där vi ser för vissa specifika förhållanden, så där kolumn lika någonting, till exempel. Om vi ​​ville bara markera alla från bordet, Detta väljer bara alla kolumner och alla rader från en tabell. 

Och sedan DELETE FROM tabell VAR col lika något, detta bara tar bort vissa ro från vårt bord där vi har några särskilda villkor. I detta fall, de villkor är kolumnen lika något. Så bara en snabb exempel på detta. Om vi ​​har denna tabell här och vi infoga den i en tabell, dessa värden, som skulle sätta in en ny rad. Och om vi hade auto-ökning, skulle detta bara öka vår ID 0-1 och 2. 

Om vi ​​valt allt från studenter, det bara tillbaka alla områden och alla rader. Där år är större än eller lika med 2016, som bara skulle återvända Hannah och jag själv. Och sedan om vi bara valt år ID och år från studenter där huset är Cabot House, som skulle återigen tillbaka Hannah och jag själv. 

Sen om vi utgår från studenter där namn är lika med Rob, som skulle ta bort hela raden. Och sedan om vi sätter namn, UPDATE studenter SET namn är lika med Daven DÄR hus är lika Cabot House, som kommer att gå till dessa rader och sedan uppdatera namnet. 

Och sedan ett par SQL datatyper är CHAR, VARCHAR, INT, och flyta. Dessa är lovligt byte. Jag skulle gå igen och se till att du känner och ha dem på din fusklapp, vad var och en av dessa tecken har använts för, vad du använt dem på dina psets, och se till att du är bekant och bekväm med att behöva välja från olika datatyper i din pset. Ja. 

PUBLIK: Vad var det bord förvaras? Ja, där denna tabell förvaras? MARIA ZLATKOVA: Tja, just nu, det är inte lagras. Hur som helst, där denna tabell förvaras? Men det kan lagras i en SQL-databas. 

PUBLIK: Och var är SQL-databas? I datorn, på nätet någonstans, servern? 

MARIA ZLATKOVA: Det kan vara en antal olika saker. 

HANNAH Blumberg: Vi har gränssnitt med SQL-tabeller mestadels med phpMyAdmin. Så vi kunde ställa en server att lagra dem för oss. Vi kunde lagra dem på vår egen dator. 

MARIA ZLATKOVA: Det beror bara på hur du vill göra det själv. Men vi har lagring dem, som Hannah nämnde, på phpMyAdmin, som är på nätet. Och sedan hur vi använder PHP och SQL, vi lagrar det i någon variabel vad vi har efterfrågas för. 

Så om vi väljer alla av historien där USER_ID lika sessions-ID, som skulle markera alla rader för viss person som loggas in från historien bord och sortera dem i rader. En häftig sak att veta är att CS50: s sökfunktion skyddar mot SQL injection taggar. Det betyder bara att det ser den ingång som matas in är korrekt och att den person som går in i ingångs inte försöker att mata in några skadliga kod för att antingen släppa våra bord eller ta bort allt inne i vår databas. 

En snabb överblick över Model View Controller-modellen, det är bara ett sätt att organisera och tänker på koden. Det är återigen en design paradigm. Vad detta innebär är att vi can-- och det är god praxis att separera olika delar av vår kod och vad de styra in dessa tre paradigm. 

Så vår uppfattning är oftast vår mallar, vår layout, vägen att vi ställa in hur vår kod ser ut. Det är främst våra CSS-filer och hur att vi definierade utformningen av vår kod, i grund och botten. Vår controller är oftast vad vi har gjort med PHP-filer. Så återigen, som arbetar med information som vi har och definierar hur det information används, och sedan passerar denna information antingen på utsikten eller modell. Och modellen, det sätt som vi har använt vill säga har varit vår databas, så där vår information är lagras så det har någonstans att leva i, och något av kod som hänför sig till det sätt att vi får denna information eller sätt som vi uppdaterar denna information. 

Så i MVC-modellen, HTTP förfrågningar skickas till en webbserver. Därefter, styrenheten tolkar begäran från användaren och sedan validerar användardata. Det är frivilligt att vi har styrenheten kommunicerar med en modell, så något som vår databas eller någon annan funktionalitet som förmedlar information. Och sedan slutligen, styrenheten passerar information på vyn så att det kan vara återges och att det kan blir synlig för en person åtkomst till webbsidan. 

Några frågor? Grymt bra. Så återigen, modellen, dess funktion, återigen, är beständig lagring av information, hantera och organisera data. Och vad vi har sett så långt är MySQL-databas och alla datafiler som kan användas. 

View, presentation av information till användaren, UI, eller användargränssnitt. Och exempel på detta är HTML. Och då kan vi ha minimal PHP. Så en for-loop som upprepar över data som skrivs ut är en del av den uppfattningen, som motsats till styrenheten. Och sedan en hel del av våra PHP-filer falla in i styrenheten kategori. Den hanterar bara användarnas önskemål och får information från modellen. 

Hoppa in dokument Object Model, detta bara syftar på det sätt HTML dokument organiseras. Och de är organiserade i ett träd struktur som har en hierarki. Så om vi har tillgång till [OHÖRBAR] representation av dokumentet, Vi kan arbeta med dokumentet, i likhet vi manipulera objekt i grund och botten. 

Och för att göra detta till en lite tydligare, när Vi har en hel del av våra olika taggar svarar till olika vägar i vårt träd. Och sedan för detta exempel, vi har start dokumentnod. Vi har alltså vår HTML nod som delas upp i huvud och kropp. Head har titeln och sedan Titeln innehåller hej, värld. Och vår kropp innehåller bara Hej, världen såväl. 

Så några frågor om någon av saker som vi täckt hittills? Och om inte, Hannah kommer ta över med JavaScript. Grymt bra. 

HANNAH Blumberg: OK, cool. Om något kommer upp med PHP eller HTML, eller någon av de saker Maria omfattas, Vi kan alltid pausa. Vi gör bättre på gång, så häftigt. Och bara för att gå tillbaka riktigt snabbt till detta, om man tittar på varje senaste årets examen, detta kommer upp either-- här är vissa HTML, gör detta diagram. Eller här är det här diagrammet, göra några HTML, så absolut öva det. Och då är det en garanterad fråga som du kan få rätt. Häftigt. Så låt oss tala om JavaScript och hur det är lite skiljer sig från språk som PHP och C, de två språken som vi såg i förväg. Så nummer ett, det är löst skrivit. Det är som PHP, men till skillnad från C. 

Det är ett tolkat språk. Återigen, det är som PHP, till skillnad från C. Och detta kommer att tillåta oss att use-- det fungerar riktigt bra med webbsidor. Det kommer att ge oss möjlighet att manipulera innehållet och hur det ser ut och vad den gör. 

Vi kommer att se en liten bit av Ajax. Det ger oss möjlighet att kommunicera asynkront med olika servrar och få information. Och det är det som verkligen separerar JavaScript från PHP och C är att det är på klientsidan. Både PHP och C är vanligtvis på serversidan. 

För det mesta och nästan helt vad vi har sett, åtminstone i denna klass, JavaScript verkar på klientsidan, vilket innebär att webbläsaren är faktiskt ansvarar för driften det. Och det betyder att vi inte måste interagera med servern. Så det betyder att det kan vara en mycket snabbare eftersom det är faktiskt bara det är Chrome, Det är Safari, det är Firefox, vad du Använd faktiskt kör JavaScript. 

PUBLIK: Vad betyder asynkron detta? 

HANNAH Blumberg: Ah, vad betyder asynkront detta? Bra fråga. Asynkront means-- väl, innehållet i vilken vi använder den är, OK, vi skapar en webbsida och vi måste få lite information. Så med exempel på mashup, viss information som vi kanske vill är artikelrubriker. Nu, could-- vi ett alternativ är att göra det synkront och det betyder låter stopp, gå och hämta artikeln, få artikeln tillbaka, och sedan render, men det skulle vara väldigt långsam. Det skulle vara en dålig användarupplevelse eftersom du skulle bara sitta där väntar på att något ska svara. 

Asynkront innebär att vi ska fortsätta gå om vår verksamhet, rendering sidan och Vi skickar ut en förfrågan som är typ att gå till hända i bakgrunden. Jag tror att vi använder exemplet i föreläsning att ringa Rob och sade: hej, kan du slå upp det här för mig och komma tillbaka till mig, i stället för bara mig väntar på telefonen. Så asynkront betyder det händer i bakgrunden ifrån oss parallellt. 

Bra fråga. Någonting annat? Bra. Vi hoppar mycket mer i asynkrona förfrågningar med Ajax. 

PUBLIK: Gör JavaScript-- där gör det falla med model-view-controller? HANNAH Blumberg: Bra fråga. Var gör JavaScript falla med model-view-controller? Hm. Jag antar att det kan fall-- så vi brukar inte vilja trycka ihop den till att paradigm, men jag antar att jag skulle säga, OK, så JavaScript faktiskt kommer att tillåta oss att samla in data, tolka data, faktiskt gör meningsfulla saker med data. På så sätt är det mycket kontroll liknande. 

Men det kommer också att ge oss möjlighet att visa saker och utskrifts saker. På så sätt är det mycket view-liknande. Ja. Så det är ungefär som PHP i där det kan typ av vara både och. Bra fråga. Någonting annat? Okej, awesome. Flytta höger längs. 

Så låt oss se ett exempel hur vi kan använda JavaScript en av våra webb-program. Så jag ska överväga detta index.html med ett gäng HTML. Och jag vill att du fokusera på är det här skriptet taggen. Och det säger, OK, jag vill köra några JavaScript och här är där den lever. Den lever i hello.js. 

Och så mycket som CSS, vi kunde sätta JavaScript i HTML. Varför skulle vi vill skilja ut? Ja. 

PUBLIK: Lättare att skriva om? 

HANNAH Blumberg: Ja. Det är lättare att använda över olika webbsidor. Det håller saker renare. Det är bara bra metoder. Grymt bra. Bra svar. Så bra, så detta kommer vara vår index.html. Och så här nere är vår lilla JavaScript-fil. 

Och allt det står är alert Hej världen. Så vad händer är när denna sida renders-- så om du gå till valfri webbplats Detta är-- allt som kommer att hända det kommer att säga, OK, jag är kommer att köra denna JavaScript-kod. Och detta JavaScript-kod bara säger alert Hej, värld. Så jag kommer att få detta vänlig liten pop-up. 

Häftigt? Det är ungefär som vår allra första Javascriptprogram, vår Hej världen. Låt oss titta lite mer om vad syntax JavaScript ser ut. Och i synnerhet, låt oss jämföra det med C och PHP, som vi har sett förut. 

I JavaScript, vi kommer att ha var, namnet på variabeln, och sedan dess faktiska värde. Och vi inte anger en typ, bara liknande i PHP, men mycket skillnad i C. Så till exempel, om vi ville att lagra värdet 50, i C, skulle vi säga, hey, C, jag vill ha en heltal, Jag kommer att kalla det i, och dess värde är 50. I PHP, det är lite lättare. Vi säger, hej, jag vill ha en variabel kallas i och dess värde är 50. På samma sätt, i JavaScript, vi säger hej, vill jag en variabel som heter i, dess värde är 50. Varje senare tidpunkt som jag använder i, jag behöver inte skriva var. Det är bara i från den punkten. På samma sätt, i C, där när vi säger int i, vi bara använda i. Häftigt? Okej. 

Går vidare till loopar, lyckligtvis dessa nästan titta exactly-- Jag tror att de är exakt samma som vad slingor kommer att se ut i något som C där din för loop kommer att ha tre parts-- en initiering, ett tillstånd, och en uppdatering. En while-slinga, ser det exakt samma. Vi ger bara det ett villkor. 

Och en gör while-slinga, igen, exakt samma. Vi ger det ett villkor. Låt oss säga att jag ville upprepa over-- Jag ville göra något fem gånger. I C, kan vi skriva för init i är lika med 0. i är mindre än 5, i ++. Enda skillnaden, i JavaScript, istället för att säga int i lika med 0, vi säger var i lika med 0. Vacker. Det är den enda skillnaden. Eventuella frågor om något av detta? Ja. 

PUBLIK: Så i PHP, det är samma sak, utom utan som en variabel? Eller var det en var exempel? HANNAH Blumberg: Ja. Så i PHP, det kommer att vara ett dollartecken. Så det kommer att $ i jämlikar 0, jag är $ mindre än 5, $ i ++. Bra fråga. 

Nu ska vi prata om funktionsdeklarationer. I C, när vi förklarade en funktionen, vi gav den ett namn och vi gav det vissa parametrar. Och i början skrev vi typen. I JavaScript, allt vi behöver göra är att skriva sökordet funktion som säger hej, JavaScript, Jag är på väg att definiera en funktion. 

I detta fall har det namn summa. Och det tar två argument, x och y. Lägg märke till att vi inte bryr om vilka typer av x och y. Och precis som C, vi har detta sökord avkastning, så att vi kan göra något som retur x och y. 

Och nu när vi har skrivit denna första funktion, kan vi använda summan som helst. Och det är helt bra. En riktigt cool sak om JavaScript som är mycket olik C är att funktioner kan behandlas som värden. Så vi kan göra något liknande här där jag antar att jag täcker detta up-- Jag täckte upp var sum part-- och vi sa bara Funktionen xy lika med retur x plus y. 

Det är vad som skulle kunna kallas en anonym funktion. Det är en funktion utan namn. Detta säger funktion summa, bla, bla, bla, detta bara skulle säga funktion. Men nu, även om jag har Detta anonym funktion, denna funktion är egentligen bara ett värde. Vi kan behandla det som ett värde. 

Så vi kan spara den i en variabel samma sätt skulle vi kunna lagra 50 i en variabel. Så vi kan säga, OK, vill jag variabel, det kallas summa, och det är denna funktion. Så dessa två saker är faktiskt kommer att göra exakt samma sak, men syntaxen är lite annorlunda och typ av en rolig anmärkning. Ja. 

PUBLIK: Så du skulle kunna kalla en funktion som var anonyma genom att säga, sum konsoler 2, 5? HANNAH Blumberg: Ja. Du kan kalla detta anonym fungerar på samma sätt. Du skulle göra summan (2, 5) ;. Det skulle vara helt bra. 

Om jag inte gjorde var sum lika funktion, om jag bara bort this-- Jag vet att det är på min hand, men låtsas att jag raderade this-- sedan denna funktion är typ av bara borta. Du kan aldrig använda den igen eftersom du inte har ett namn för det. Det är svårt att se något du vet inte vad jag ska ringa. Bra fråga. Ja. 

PUBLIK: Kan du referera summa i andra platser med värdet på x plus y? 

HANNAH Blumberg: Kan du referensbelopp på andra ställen med värdet x plus y? Jag är inte helt säker på vad du menar. 

PUBLIK: Så dina tidigare halv anonym Funktionen är summan är lika med detta anonym funktion, så summan är nu en variabel som du can-- HANNAH Blumberg: Rätt. Så summan är variabeln, men det är actually-- så summan är en variabel vars värde är funktionen. Så det är en funktion, som är typ av en konstig sak att svepa huvudet runt eftersom vi har spelat med C och du kan inte göra det i C. Men nu kan vi kalla sammanfatta samma sätt som vi skulle kunna kalla summan här. PUBLIK: OK. HANNAH Blumberg: Ja. Bra fråga. Ja. 

PUBLIK: Så vi inte använder prototyper i PHP eller JavaScript? HANNAH Blumberg: Nej, vi behöver inte använda prototyper, speciellt i JavaScript. Så en dålig praxis sak som jag är kommer att säga att du inte bör göra är att du inte behöver skriva var i = 50. Du kan bara börja göra i = 50. Och skulle bara göra i en global variabel. 

Det är mycket dålig praxis att aldrig säga uttryckligen var i, men det är något du kan göra. Tolken är inte kommer att skrika på dig. JavaScript är ganska liknande, du kan göra vad du vill. Åh förlåt. Det finns två. I orange byxor. Varsågod. 

Målgrupp: Nej, du går först. 

Målgrupp: Nej, jag bara säga Jag hade inte min hand upp. OK. Så om du skulle ringa den första gången, nu summera, vi kallar det på samma sätt, x, y, som varje gång? HANNAH Blumberg: Ja. Så dessa två väsentligen göra samma sak. PUBLIK: Och vad är fördelen att använda det ena eller det andra? HANNAH Blumberg: Ingen fördel för att använda ett eller det andra. Jag ville bara visa dig två olika delar av syntax. Många gånger när anonym funktioner gör har ett syfte är om argumentet till en annan Funktionen ska vara en funktion. Och vi ser att i bara en sekund med Ajax. 

Så om det inte göra någon mening, förvara den på baksidan av huvudet. Det är där en anonym Funktionen kan vara användbar eftersom det inte är verkligen värt ge den ett namn eftersom vi är bara kommer att använda den en gång. Ja. 

PUBLIK: Om x och y förändring senare på, kommer att samman förändras liksom? HANNAH Blumberg: Om x och y förändring senare, kommer att samman förändras liksom? Så det här är faktiskt jag tror att något som är, igen, det känns bara väldigt annorlunda från C. Detta är inte ett värde. Det är inte 5. Det är bara själva funktionen. Så snart som du ger det parametrar, Du kommer att faktiskt beräkna ett värde. 

MARIA ZLATKOVA: Och sedan Du kan anropa funktionen och använda den för att få ett visst värde. HANNAH Blumberg: Rätt. Exakt. Ja. 

PUBLIK: Så om du bara förvara den i variabeln, som var x lika summan av två values-- 

HANNAH Blumberg: Ja. Så du kan bara göra var sum lika summan av två värden. Ja. Alla andra frågor? Ja. 

PUBLIK: Men skulle det förvirra summa och summa? Som om du ringer din variabel summa, skulle du kalla funktionen summa? HANNAH Blumberg: Mm. Mm. Om du gjorde något som är lika summa 2, 5 summa? 

PUBLIK: Ja. 

HANNAH Blumberg: Jag tror att skulle skriva värdet av summan. Så en annan intressant sak om JavaScript är att en enda variabel kan ta på en massa olika typer. Dålig praxis. Du bör inte göra något precis vad du just sa. 

Men i C, om jag är inställd är lika med ett heltal, Vi vet att det är aldrig kommer att bli en sträng. Detta är inte fallet i JavaScript. Ja, bra fråga. Någonting annat? Okej. Gör allt rätt i tid. Att hålla igång. Okej. 

Om vi ​​tittar på en matris i JavaScript, här är en snabb exempel på en array med strängar. Och arrayer kan växa dynamiskt. De har inte en fast storlek på samma sätt att de gör i C. Vi kan få tillgång till element med bara hakparenteserna. 

Det ser ut ungefär som PHP och en hel del som C, där vi kan säga i detta fall, om jag ville ordet JavaScript, skulle jag gör arr hakparenteser med en 0, 1, 2. Och sedan om du kommer ihåg i C när vi ville få längden på en array, Det var verkligen irriterande. Men i JavaScript, super lätt. Allt vi gör, .length. Ger det längderna. Det är allt. 

PUBLIK: Det är enkelt. 

HANNAH Blumberg: Ja, gör ditt liv mycket enklare. OK, object-- inte där. Objekt i JavaScript känsla en hel del som structs i C och associativa arrayer i PHP. Så vad vi har sett en massa är JSON, som står för JavaScript Object Notation. Och det är i grunden ett sätt att strukturera våra data. 

Så låt oss se ett exempel, förmodligen det enklaste. Så här är ett exempel på ett objekt som lagrar klassen, CS50. Och när jag säger klass, menar jag naturligtvis, inte like-- ja, naturligtvis, CS50. Och du ser att allt i objektet kommer att innehållas i klammerparenteser. 

Och vi börjar associera fältnamn eller nycklar med olika värden. Så du kan börja se hur denna typ av känns som en associativ array i PHP. Så vi kommer att associera fältet eller nyckelnamnet, naturligtvis, med strängen, CS50. 

Vi kommer att ha en instruktör. Vi kommer att ha TF. Vi kommer att ha antal psets och vi kommer att ha registrerats. Och en cool sak att notera är alla dessa saker har olika typer, och det är helt bra. 

Det är bra för ett objekt, i själva verket, det är antagligen förväntas för ett objekt att ha en kombination av strängar och siffror och Booleans och arrayer och vad du kanske vill ha inne i objektet. Och observera att dessa kommer att vara namn eller nycklar och då vi bara ställa in den lika med en liten kolon. 

PUBLIK: Vad exakt betyder JSON detta? HANNAH Blumberg: Vad exakt betyder JSON detta? JSON bara står för JavaScript Object Notation. Det är bara ett sätt att formatering. Ja. Det är ett sätt att formatera våra data. 

I C, är det structs. I PHP är det associativa arrayer. I JavaScript, har vi objekt. 

PUBLIK: Så CS50 är ett objekt? HANNAH Blumberg: CS50 är objektet i det här fallet. Nu, hur gör vi faktiskt tillgång de områden eller ändra dessa områden. Anta till exempel att vi beslutat att du ville ha en mindre pset den här terminen. I stället för nio, vi är bara kommer att ha åtta. Hur skulle vi ändra på det? 

Åh, fel sätt. Det finns två sätt som vi kan göra det. Nummer ett är med pricken notation och nummer två är med klammer notation. Så, till exempel, om jag ville ändra eller åtkomst den psets fältet i vår CS50 objekt, vad jag skulle göra är CS50.psets, så namnet på objektet dot namnet på fältet eller nyckeln. 

På samma sätt, det är exakt ekvivalent att göra CS50, och sedan i kvadratiska hängslen, psets. Häftigt? Ja. 

PUBLIK: Så är JSON tekniskt JavaScript fortfarande, även om det i de psets vi skilja ut [OHÖRBAR]? HANNAH Blumberg: Visst. Så frågan är, är JavaScript och JSON motsvarande? Så JSON är notation, i princip det sätt som vi skriver ut ett objekt från JavaScript. Så de är inte exakt samma. 

Jag skulle vilja säga JavaScript, där är objekt i JavaScript. JSON tar dessa objekt och skriver ut dem och visar dem eller lagrar dem på ett trevligt sätt. Så JSON är inte en programmerings språket sätt som JavaScript är. Det är bara notation för våra objekt i JavaScript. Ja. 

PUBLIK: Så vad exakt [OHÖRBAR] slutföra? HANNAH Blumberg: Visst. Så detta faktiskt gör ingenting. Detta är bara ett sätt att komma åt. Så låt oss säga att vi ville ändra antalet problemsamlingar 9-8. Vad vi gör är att göra något liknande CS50.psets = 8 ;. 

Ja, bra fråga. Detta är bara för att visa dig syntax. Faktiskt inte göra något användbart. Några frågor? Flytta höger längs. 

Så låt oss titta på ett snabbt exempel på hur JavaScript fungerar eftersom jag sa ju att det gör alla dessa coola saker och tillåter oss att ändra webbsidor. Låt oss faktiskt se den i aktion. Så ta till exempel den här HTML-filen. 

Och jag vill att du ska fokusera på är denna tagg, som är en knapp, med id search_button. Det är bara på sidan. Så nu ska vi se vad vi faktiskt kan göra. 

Tja, antar när du klickar på knappen, Vi vill göra en alert-- du klickade på knappen. Låt oss se hur vi kan göra det. Så window.onload-- detta är inte något när du har sett i klassen, därför behöver inte veta det för testet. Men i grunden säger OK, samtal denna funktion när fönstret laster. 

Så det är bara typ av inställningskoden. Oroa dig inte så mycket om det. Vad jag vill att du ska fokusera på är här. Vi säger var searchButton lika document.getElementById search_button. 

Så som ni kan gissa, Vad detta innebär är det något att säga, OK, går att hitta elementet med ID search_button. Och nu har vi att faktiska inslag och jag är kommer att förvara den i en variabel searchButton. Och nu kan vi faktiskt använda det elementet och ändra den, eller få tillgång till sina värderingar, sådana saker. Vi kan faktiskt börja samarbeta med webbsidan. 

Så här säger jag, OK, nu när jag har den knappen, när den klickas, kallar detta anonym funktion. Så det är där anonym funktioner blir användbart. Och vad gör funktionen gör? Tja, kallar det just detta varningsfunktion och det står, du klickade på Sök. 

Så vad kommer att hända om jag går dit denna HTML bor och jag klickar på knappen, Jag får en prydlig liten varning som säger att du har klickat på knappen. Så saker att fokusera på här-- document.getElementById får en särskild HTML- element med det givna ID. Och nu kan vi ställa vad som ska hända när just elementet klickas. 

PUBLIK: Vi måste sätta allt detta i? 

HANNAH Blumberg: Förlåt? 

PUBLIK: Har vi till fysiskt koda allt detta? 

HANNAH Blumberg: Har vi måste fysiskt koda allt detta? Ja. Är inte denna typ av irriterande? Detta är en hel del kod. 

PUBLIK: Du kan importera något. HANNAH Blumberg: Rätt. Vi skulle kunna använda något. Och i particular-- oh, det är säger att jag måste lära avsnitt. I synnerhet, låt oss använda biblioteket jQuery, eftersom det var verkligen lång och verkligen irriterande och jag vill kunna förenkla den och göra det kortare och lättare att skriva. 

Så jQuery är ett JavaScript-bibliotek. Så JavaScript är programmering språk; jQuery är ett bibliotek. Och det gör en massa saker lättare. Det gör att byta och gå över en HTML-dokument mycket lättare. 

Det gör hanterings händelser lättare. Det gör animation lättare och det gör Ajax lättare. Så låt oss hoppa in två av dessa saker just nu. Ursäkta. Innan vi gör, vissa grundläggande syntax. 

Detta är vad de flesta samtal till jQuery biblioteket ser ut. Vi använder denna dollar sign-- ingen anslutning tecken till PHP, bara inconvenient-- namnet på en väljare, pricka, och därefter talan. Så låt oss se några konkreta exempel på detta. 

Så detta är faktiskt densamma kod från händelsen bilden. Så här länge, ful sak blir så mycket trevligare, mindre sak. Så låt oss försöka bryta ner det. Det säger, OK, jQuery-- här dollar sign-- jQuery, hitta mig fönstret. Så det är väljaren. 

När det laddar, kalla denna funktion. Så det är allt inuti. OK. Hittils är det bra? Okej. 

Nu, jQuery, hitta mig sak med ID search_button. Och vad det klickas kalla denna funktion. Och så här funktionens exakt samma. Bara göra en liten bit av varning, du klickade på Sök. 

Så det är riktigt nice. Det kondenserar verkligen och förenklar vår kod. Hur visste jag att Det är ID search_button och inte gillar klassen search_button? 

PUBLIK: Hashtag? HANNAH Blumberg: Ja. Denna hash symbol, det är precis som CSS. Så kom ihåg, med CSS, när vi ville välja något av ID, vi använde nummertecken. Och när vi ville välja något av klass använder vi punkten. Bra. Vettigt? Så jQuery är tänkt att bara göra våra liv enklare. Ja. 

PUBLIK: Så jag är lite förvirrad hur den anonyma funktionen fungerar. Har du nämna detta anonymouse funktionen fungerar? Hur kallas det? HANNAH Blumberg: Visst. Så funktion är bara ett sökord som säger jag är på väg att definiera en funktion. Målgrupp: Åh, OK. HANNAH Blumberg: OK? Och då passerar vi det som en argument att-- låt oss ta denna inre en-- till klickfunktionen. Så ja, så denna funktion, Detta anonym funktion, blir en verklig argument. Så kom ihåg i JavaScript, vi kan behandla funktioner som värden. Målgrupp: Åh, OK. HANNAH Blumberg: Ja. Jag gillar att "oh." Fin. Andra frågor? Tid? MARIA ZLATKOVA: Good. Bra. 

HANNAH Blumberg: Awesome. Några snabb användbara jQuery. Jag tänker inte gå genom alla dessa. Dessa bilder kommer att vara upp på nätet lite senare, så kan du kontrollera det ut lite senare. Men i grund och botten, den allmänna mönster håller där vi säger, OK, hej, jQuery, här är min väljare och sedan här är en åtgärd. Och du kan göra saker som tillgång till Värdet av ett formulär, komma åt vissa HTML, kontroll vad som händer när användaren lämnar in en blankett, sånt. Ja. 

PUBLIK: Så i examen, vi kommer att behöva att veta en hel del från jQuery dokumentation. Så med tanke på att vi kopierar / klistra in jQuery dokumentation till vår fusklapp, där är den linje? Som hur många behöver vi veta? HANNAH Blumberg: Bra fråga. Frågan är i huvudsak med tanke på att du kan inte komma åt jQuery dokumentation under testet, hur mycket bör du känna till? Vi skulle inte förvänta dig att komma med några slumpfunktion att vi förväntar dig till Google. 

Saker som är rättvist spel är jag skulle säger bara typ av den allmänna syntaxen, att kunna välja på ID och genom class-- så precis som CSS. Och sedan de faktiska funktionerna sig själv, kommer vi sannolikt berätta. Ja. 

PUBLIK: Så när du väljer per klass skulle innebära prick. HANNAH Blumberg: Ja, exakt. Bra. När du väljer efter klass, det kommer att dot i stället för nummertecken. Ja. 

PUBLIK: Skulle du gå över skillnaden mellan val av ID och klass? 

HANNAH Blumberg: Visst. Skillnaden mellan välj ID och välja per klass. Så Maria sade en lite tidigare, det kan bara vara en HTML-element med ett givet ID, medan klass, Det ger oss möjlighet att gruppera ett gäng olika element tillsammans, så saker som är relaterade, men inte exakt samma. Besvarar det frågan? Grymt bra. Ja. 

PUBLIK: Vad händer om du har flera saker som är i samma klass? 

HANNAH Blumberg: Vad händer Om du har flera saker som är samma klass? Så, till exempel om vi är bara använda ren JavaScript vi skulle göra något liknande document.getElementsByClass. Och vad som faktiskt gör är tillbaka en rad element. 

Och du måste antingen iterera över dem eller hitta vilken du vill. Det kommer inte att ge en enda element. Det kommer att ge dig ett arrangemang av element. Bra fråga. Någonting annat? Grymt bra. 

Så jag tror att om du är bekant med någon jQuery du såg i pset, du bör vara bra att gå. Fråga? Å nej. Jag har verkligen att undervisa. koppla av. Det kommer att bli bra. Jag kommer dit. 

Låt oss tala om Ajax. Så Ajax kommer att bli en-- bra, låt oss börja med vad det står för. Det är en akronym. Den står för Asynchronous JavaScript och XML. Och XML är i grunden kommer att vara [OHÖRBAR] med en typ av våra data. Men vi har inte faktiskt används XML. Istället använder vi bara JSON. 

Så i princip är det några data-- asynkront, JavaScript, och data, i det här fallet, JSON. Och vårt mål, som vi nämnde lite tidigare, är att kunna göra en begäran, har denna begäran göra sin sak i bakgrund, men fortsätter göra vad vi hade för avsikt att göra. Och sedan när informationen är klar, då vi kommer att införliva det. 

Så låt oss se vad detta faktiskt ser ut. Och detta bör du vara lite bekant från pset8, den du just fyllt i. Så här är ett giltigt jQuery funktion som vi kanske vill veta about-- denna dollartecken. Så det säger jQuery funktion, .getJson. 

Och vad den här funktionen gör det tar en webbadress och en del parameters-- så jag tror att i fallet av pset8, var det som, URL var articles.php och parametrar var att gå = vissa postnummer. Och den säger, OK, gör en begäran till denna URL med givna parametrar. Och som bara händer. 

När den är klar, det är antingen kommer att framgångsrikt slutföra eller det kommer att misslyckas. Så det här är likvärdigt med samtals Rob och be honom att göra något. Och sedan när han kallar tillbaka, han är antingen kommer att säga att jag är klar eller jag misslyckades. 

Så i fallet där du är gjort, säger du, OK, jag är klar. Och då du kallar den här funktionen. I det här fallet, det kommer att bli en funktion som tar viss information. Det vi brukar bryr sig om är data de data som vi faktiskt tillbaka som ett resultat av ett anrop .getJSON. 

Och du kan göra något med det. Så i fallet med pset8, Vi visade det som en lista. Fail kommer att vara en funktion som kallas om begäran misslyckas oavsett orsak. Och i fallet med pset8, vi bara console.log det. Har du frågor om det? Ja. 

PUBLIK: Kan vi bara använda funktionen theta i stället för funktion, textStatus, jqHXR. HANNAH Blumberg: Visst. Så ja, jag tror i pset, vi såg bara funktionsdata. Så det är bara the-- ja, OK. Det är vad vi såg i pset. Det är helt bra. 

Dessa är bara om du ville att dra ut mer information, Dessa är de saker som du kan få från .getJSON. Bra fråga. Någonting annat? Ja. 

PUBLIK: Så .getJSON är Ajax? HANNAH Blumberg: OK. Så det här är den typ av knepiga delen. Det är en jQuery funktion som tillåter dig att göra asynkrona samtal. Och de asynkrona samtal, det är vad vi har med hänvisning till som Ajax. Ja. Det tog mig en riktigt lång tid att dra isär när jag var student. PUBLIK: Kan du säga det igen? HANNAH Blumberg: Ja. Kan jag säga det igen? Denna .getJSON funktion, det är en jQuery funktion. Och det kommer att göra en asynkron samtal. Och dessa asynkrona samtal, vi har har med hänvisning till de som Ajax. 

Alla andra frågor? Vi har bara ett par minuter kvar. Och Marias kommer att avsluta med säkerhet och sedan kommer vi att nästan gjort. MARIA ZLATKOVA: Awesome, OK. Så det här är-- bara ta ett par sekunder att titta över denna. Och detta är inte något riktigt bra. Och kan någon berätta för mig varför? Vad händer i foo och kan kunde potentiellt leda till något dåligt, och vad det heter? Ja. PUBLIK: Om argumentet som är antogs i mer än 12 tecken, det skulle kunna flöda över. MARIA ZLATKOVA: Rätt. Perfekt. Vad kallas det? Du nämnde just det. 

PUBLIK: Buffertspill. 

MARIA ZLATKOVA: Japp, buffertspill. Så detta är något som vi kallar buffertspill. Och vi ser att insidan av foo, vi har definierat vår buffert, c, med en storlek på 12. Men i huvudsak har vi inte checka in något sätt alls huruvida argv1-- så att var det andra argumentet. Vi kontrollerar inte om storleken av det är lämpligt. 

Så om vi hade en särskilt angripare som satte i vissa argument som var längre än 12, och sedan eventuellt bortom gränserna för det argumentet, hade vissa exekverbara koden att han försökte göra något dåligt med det; då detta, vad som skulle hända, skulle åsidosätta avkastning adressen till den foo funktionen, orsakar funktionen att när återvänder för att köra koden. Och sedan dåliga saker kan hända. Innebär detta vettigt för alla? 

Och hur kan vi skydda sig mot detta? Några förslag? I grund och botten, inuti potentiellt foo, hur kan vi kontrollera att att det inte kan hända? 

PUBLIK: Om storleken 12 överskrids, skulle du allokera mer minne? MARIA ZLATKOVA: Förslag är, fördela extra minne av storleken överskrids. Egentligen kan vi göra något mycket enklare än att liksom. Vi kan bara få stränglängden argumentet att tas upp, kontrollera om det är mindre än eller lika med 12-- vilket är vad vi vill ha det bero på att vi inte vill att överskrida gränserna för vår buffert. Och sedan om det inte, vi kan arbeta med argumentet. Och sedan om det gör vi verkligen vill att Yello kan utsättas för användaren. Men detta är hur vi skulle göra det. Ja. 

PUBLIK: Kan du förklara memcpy riktigt snabbt? MARIA ZLATKOVA: Åh, förlåt. Ja. Memcpy tar vad är-- ledsen, OK. Memcpy tar allt som är i bar, oavsett leds på foo som kommandoraden argument. Så det kommer att ta argv1. Argv1 kallas bar här. Så det kommer att ta bar och det kommer att kopiera den till c. 

PUBLIK: OK. MARIA ZLATKOVA: Och det kommer att copy-- det tredje argumentet bara hänvisar hur mycket det kommer att kopiera till c. PUBLIK: Ah. Så här är kopiering allt det då. 

MARIA ZLATKOVA: Ja, det är att kopiera allt. Japp. Först ser vi till baren är inte lika med noll eftersom det är en pekare. Då får vi stränglängd bar. Vi ser till att det är mindre än eller lika med 12. Och sedan eftersom vi har såg, vi kan faktiskt memcpy och vara säker på att det är OK. Några frågor? Bra. Jag har två sant eller falskt frågor. Kan någon berätta för mig genast om dessa är sanna eller falska? Ja, det är falskt. Exakt. Båda är falska. Så använder ett enda lösenord är aldrig riktigt bra idé för om någon vet ditt lösenord, de kan bara tillgång till alla dina andra konton. Och sedan ikoner gör ingenting för att garantera säkerheten. Vi bör vanligtvis leta efter HTTPS i stället för HTTP och webbadressen. 

Och vissa andra typer av attacker som vi har nämnt, David har nämnt i föreläsa, SQL injection attacker. Vi har redan sett att om vi don't-- den CS50 sökfunktion ser till att SQL injektion attacker kan inte förekomma. Men om vi inte använder CS50, citationstecken, unquote "i fråga," vi skulle behöva se till att användarens input är inte faktiskt en del SQL fråga som kommer att orsaka allt våra bord att släppas eller något dåligt att hända med vår databas. 

Sessionskapning är annan typ av attack som händer när några dåliga person använder några offrets session ID för att få tillgång till inloggningsinformationen. Så en mycket trivialt exempel på detta är som om vi har en offentlig dator, då dålig människa loggar in och sedan de har cookies som sparas. Och cookies inte förändras för sessionen. 

Då har vi offret gå in och sedan logga in på webbplatsen. Cookies ändras inte under en viss session. Och sedan offret loggar in hemsidan och sedan lämnar. Och sedan den person som går tillbaka kan då fortfarande använda sin session ID att få tillgång till deras information. Så det är ett exempel på hur det kunde hända. 

Och då skulle jag inte oroa sig alltför mycket om specifik kod eller något sånt som kan orsaka detta, men med något slags aning om vad de variabler som är involverade i detta är. Och sedan manipulera header uppgifter är en annan typ av attack som har David har talat om. Och det bara avser vad som kan hända när svaret, HTTP svar inne i vår rubrik är inte sanitized korrekt. 

Och någon av de fields-- t.ex. om någon skriver över en av huvud värden att innehålla något mer än vad de ska contain-- och faktiskt innehålla, till exempel, en 200 OK statuskoden, då de skulle kunna göra skadliga saker när de inte är tänkt. Men jag skulle inte oroa sig alltför mycket om den särskilda koden som kan orsaka detta, bara sorts förståelse hög nivå sånt. 

Jag tror att det är allt att vi måste täcka. Fantastiskt. Någon som har några frågor om någon av de saker som vi omfattas? Ja. 

PUBLIK: Så en sorts mer logistisk fråga. Är innehållet främst inriktad på saker efter quiz 1? 

MARIA ZLATKOVA: Så Frågan är, är innehållet främst inriktat på saker efter quiz 1? Så fokus på efter frågesport 1, med undantag att vi måste fokusera på saker i pset5 och en hel del av datastrukturer att vi täckt. Och vi kan inte säga att vi kan ignorera något innan att eftersom det bygger på det också. 

Så fokusera på det, plus pset5 material som bland annat länkade listor, stackar, köer, och allt att Hannah gick över. 

HANNAH Blumberg: Rätt. Ja, vi gick över hela C grejer vid början mycket snabbt. Men se till att granska det. Gå tillbaka och titta på quiz 0 omdöme. 

Ett par mer logistiska anteckningar, bara medan vi har din uppmärksamhet. Vi kommer att ha kontorstid både på måndag och tisdag kväll. De kommer att vara i MD 119. Detta är allt på hemsidan, så Om du inte hör det, inga bekymmer. 

MARIA ZLATKOVA: 8:30 till 11:00. 

HANNAH Blumberg: Ja, från 8:30 till 11:00. Vi kommer att vara där. Vi kommer att vara där för att svara på frågor. Det är ganska chill och roligt. Ni kan ställa några frågor som du har på frågesport 1. Och quiz 1 är på Onsdag, så lycka till. Om du har några frågor, kanske kommer prata med oss ​​här en-mot-en. Häftigt. Tack så mycket. 

MARIA ZLATKOVA: Tack så mycket, killar. 

PUBLIK: Yay. 

[APPLÅDER]