[00:00:02] [MUSIK SPELA] HANNAH: Hej, alla. Tack killar så mycket för att komma ut i äckligt väder för frågesport en granska session. Som ni vet, frågesport en är denna onsdag. Så vi kommer att gå genom ett gäng frågor. DAVIN: Hej, kan jag säga något riktigt snabbt? HANNAH: Ja, Davin s pågående att säga något riktigt snabbt. DAVIN: Förlåt. Bara riktigt snabbt, om du har frågor om testet, kan du gå online. Gå till 2014 frågesport ett, om testet. Det har fått logistiken om var att gå, när man ska gå. Om du samtidigt inskriven, vi är kommer att ha en makeup frågesport på 5:30. Eller om du har sänt mig en fråga, du har någon annan fråga. Men 5:30 är make-up tiden på onsdagen. Men om du har frågor, allmänna frågor, nätet har all logistik. Så kolla det först. [00:00:47] HANNAH: Awesome. Så här är den stora listan över ämnen att vi kommer att gå igenom i dag. Jag kommer att täcka hela C saker, vilket är det första kolumnen. Så C grejer som vi täckt efter quiz noll. Börjar med en länkad lista, vilket inkluderar pekare. [00:01:05] Okej, så vi såg detta i den senaste översynen sessionen så jag ska gå igenom Detta är lite snabbare. Bara upp handen om du vill att jag ska bromsa eller åtgärda något vidare. Men vi använder listor kopplade eftersom Vi startade i C med arrayer. Och arrayer är bra, men det Problemet är att de har en fast storlek. Länkade listor tillåter oss att skapa dynamiskt dimensionerad datastrukturer. [00:01:28] Och vi har våra grundläggande verksamhet, infoga, ta bort och söka. Och vi kan göra insatsen i värsta fallet konstant tid om vi bara lägga den i början. Radera och söka, värst Vid stora oh n tid. Så återigen, bara för att vända genom dessa bilder, Jag vet att vi såg dessa förra gången, men vi vill hålla reda på vår länkad lista genom att hålla reda på chef för vår länkad lista. Eftersom vi vet att var och en av våra noder är bara att peka på nästa nod i vår länkad lista. [00:01:58] Så det är hur vi hålla koll. Även om dessa inte kontinuerliga bitar av minnet, vi kan hitta dem genom att bara efter de olika pilarna. Här är vår struktur för en länkad lista nod. Vi såg detta förra gången. Vi har vår struct nod. Och det har två egenskaper. Nummer ett, den färdiga värde vi vill lagra. I det här fallet är det ett heltal. Det kan vara en sträng, skulle det vara en röding, vad du vill. Och sedan måste vi hålla reda på nästa nod i vår länkad lista. Så det kommer att bli en pekare till nästa nod. Om du gjorde bara sök, som jag sa förut, du måste följa dina pilar nedåt. Insättning, skulle du hålla koll om var resten av din lista är. Och du vill dirigera huvudet att peka på vår nya inslag, vilket i detta fall är ett, och sedan en kommer att peka till återstoden av den länkade listan. Så återigen, jag vet att detta är en liten lite av en upprepning från quiz noll. Så vi måste vara mycket försiktiga om den ordning i vilken vi gör dessa Point så vi gör inte förlora reda på baksidan av listan. OK, några frågor med bara var för sig kopplade listor? Awesome, OK, cool. [00:03:06] Så nu ska vi gå in på något bara något mer komplicerat, dubbelt länkade listor. Så förutom att hålla spåret i nästa nod, vi vill också att hålla reda av den föregående noden. Och detta gör att vi kan, om vi vid någon punkt i vår länkad lista, inte bara gå framåt, men också iterera baklänges. För som vi såg i en var för sig länkad lista, om vi var någon nod, och helt plötsligt bestämde vi, faktiskt, jag vill gå till noden rätt inför mig, du måste gå alla vägen tillbaka till huvudet och iterera igenom tills du hittat noden du letade efter. [00:03:35] Så detta gör saker något lättare eftersom vi är försöker att iterera genom vår länkad lista. Men det kräver att vi hålla reda på en mer pekare, så ytterligare en nod stjärna. Okej, så här kommer det roliga. Vi kommer att öva genomföra bort för dubbelt länkade listor. Så detta är något som är helt rättvist spel för frågesport. Det dök upp på tidigare frågesporter. Så definitivt vara beredd att koda lite i C. Glöm inte att med alla denna roliga PHP och JavaScript, Vi måste fortfarande komma ihåg att göra C. Så fräscha upp det om du känner dig rostig. [00:04:12] Okej, låt oss se om vi kan göra det här. OK, cool. Så vi ska försöka redigera höger in här, och förhoppningsvis går som planerat. Okej, är det någon som vill ge mig ett förslag på hur jag ska börja? Den enda förutsättningen är jag andet är att jag redan har en struktur definierad, den jag visade på sista sidan, på den sista bilden. Och jag lagrar huvudet av min länkad listan i vissa pekare kallas listan. Finns det någon som vill få mig igång? [00:04:42] PUBLIK: Kan du skapa en ny nod att ringa igenom listan? [00:04:45] HANNAH: Awesome, så vi kommer att skapa en ny nod att krypa igenom listan. Det gillar jag. Jag ska bara kalla det pekare om det är OK. Och var ska det ursprungligen börja? [00:04:57] PUBLIK: Förmodligen på huvudet av listan. HANNAH: Beautiful. Vi vill börja i spetsen, vilket Jag sa kommer att lagras i listan. Grymt. Så långt är allt väl. Och nu, är vårt mål att iterera igenom listan tills vi hittar noden med värde n som vi vill ta bort. OK? [00:05:13] Så nu är den del där vi vill att iterera igenom. Kan någon föreslå en sätt att iterera igenom? [00:05:19] Publik: En slinga. [00:05:20] HANNAH: En slinga. Jag älskar det. Specifikt kan vi försöka en while-slinga. OK, och vi vet att vi har nått I slutet av vår lista när vad? PUBLIK: När visaren är null. HANNAH: När visaren är null. Vacker, jag älskar det. OK, cool. Så ledsen om min begränsnings brace är sorts falla av skärmen. Vi tog det tillbaka. OK, cool. Vad händer nu? [00:05:48] Så vi vet att vi vill ta bort noden som har värde n. Så låt oss finna de fall där vi faktiskt hitta vår nod. Så hur skulle jag kolla det? Jag skulle bara säga om pekare, och sedan om jag vill få värdet av pekare, Jag bara arrow n, lika n, parametern att vi gav till denna funktion, nod som vi vill faktiskt bort. Eventuella frågor fram till här? Okej. OK, så nu ska vi dra en snabb bild i styrelsen för att visualisera detta. [00:06:24] Så låt oss säga att det är vår härliga nod. Och det har ett värde, ska jag bara säga fyra. Och den pekar på nästa nod i vår länkad lista. Och det finns inget innan det. Så vi har vår tidigare pekar på någonting. I det här fallet, vi pekar bakåt. OK, bara sätta upp min Listan länkad hit. Och vi har en lista som pekar denna struktur till att börja med. Jag ska dra en mer för fullständighetens skull. OK. Jag ska påpeka detta framåt. Och jag ska peka att en back. Oj, sorry. Ja, fick detta bakåt. Gör det igen. OK, det går vi. Okej, fick det. OK, här är vår bild. [00:07:21] OK, så vi vill överväga två fall. Det första fallet är om nod vill vi ta bort är själva starten av vår lista. Och sedan, det andra fallet som vi vill att tänka på är om det är någon annanstans. Jag förstår att detta är en helt stökigt ritning med alla mina radering, men förhoppningsvis vi ska försöka klargöra detta med lite kod. [00:07:40] OK, så låt oss täcka fallet där vi hittat vår nod, och det är i själva start av vår länkad lista. Någon ge mig en förslag här vad Jag borde göra för att faktiskt ta bort vår nod? Det är lite knepigt. OK? [00:07:56] PUBLIK: Du måste ta det nod som skulle vara innan det och göra den pekar på den en som skulle vara efter det, och ta den nod som skulle vara efter den och göra Det pekar på noden innan det. HANNAH: Exakt. OK, så detta är fallet where-- vi har två fall. Vi har fallet där nod som vi letar efter är den främre delen av listan. OK, och sedan så att du beskrivs annars, eller hur? Det är någon annanstans i listan. Så du sa, behöver vi titta på noden tidigare, och göra den tidigare nod pekar till nästa nod. Så låt oss säga att vi är försöker ta ut fem i min mycket rörigt ritning över här. Vi vill se till att fyra pekar nu till sex. Fyra s kommande punkter till sex. Och sex tidigare pekar på fyra. Det är vårt mål här, eller hur? Detta är vad jag tror att du sa bara borta. [00:08:56] OK, så låt oss få det första exemplaret. Låt oss göra det har föregående pekaren föregående. Så fyra nästa ska peka på vad? Exakt, i det här fallet, sex. Så vi borde säga pekare, nästa. OK? Okej. Så låt oss bli av med denna fula bilden och försöka att dra en aning trevligare. Vi har vår lista huvudet här. Och som pekar på den första noden i vår länkad lista, som vi sagt är fyra. Här är vår andra noden, fem. Och vår tredje noden, sex. Bara försöka dra exakt samma bild, bara lite renare. OK, så fyra nästa ursprungligen pekar på fem. Fem: s kommande punkter till sex. Sex tidigare punkter till fem. Och fem tidigare pekar på fyra. Så mycket trevligare! OK, cool. [00:10:04] Så nu, vad vi gjorde just här, här kodraden, som säger pekaren tidigare nästa, så vad betyder det? Det innebär att om vi tittar på fem, gå till föregående noden, och det är nästa bör nu punkt till fem nästa. Så i huvudsak, är vad som gör är som är radera denna pil och göra det hoppa rätt över fem. Är det klart? Jag vet att kan vara lite luddigt. Jag ser några huvud nickar. Det är bra. OK, cool. Nu, vad är nästa steg? [00:10:39] Jag har noll nästa. Nu, som andra pilen måste jag byta? Den här här. Sex tidigare. Vi vill inte ha sex tidigare att peka på fem längre. Vi vill att det ska peka på fyra. Gör den bilden vettigt? Så nu kan vi faktiskt ta fem. Så låt oss få den biten. Vad ska jag göra innan jag återställ sex tidigare till fyra? Alla idéer där? [00:11:14] PUBLIK: Frigör noden mellan dem genom att ställa den till null? HANNAH: Cool. Definitivt, är vårt slutmål kommer att vara att befria noden. Så vi kan göra det här. Fri pekare. Absolut. Men även innan dess, låt oss bara-- vårt mål rätt här är att ställa pekaren nästa föregående lika med pekaren tidigare. Jag vet att detta är att få täckt upp. OK, låt oss take-- cool. Kan alla se denna nedersta raden? Eller är det super liten? [00:11:50] Så innan vi utför denna linje här, vi vill att se till att Pekaren är nästa inte null. För om pekare nästa är null, vilken typ av fel får jag när jag försöker refererar till en null-pekare? PUBLIK: Seg fel. HANNAH: En seg fel, vackert. OK, så om det inte är null, då kan vi återställa. Och vi har sex poäng igen för fyra. Frågor fram till denna punkt? Ja? [00:12:17] PUBLIK: I ditt första if-sats, du gjorde menar att pilen nästa, eller [OHÖRBAR]? HANNAH: Jag menade Pilpekaren n. Så i princip, vad jag försöker göra är att säga, den aktuella noden att jag är iteration över, den aktuella noden som Jag tittar på, jag lagra i pekaren. Och jag vill veta pekaren s värde, vilket i detta fall är n. Och jag vill se, är noden jag letar för noden Jag siktar på att ta bort? Så det är därför vi har här pekaren n. [00:12:47] PUBLIK: Så pilen går till n ställer du in värdet och förvara den i en nod kallas n? [00:12:55] HANNAH: Så det är som om jag är gå igenom denna länkad lista och pekar på fem. Om jag vill få det värdet, om Jag vill få det numret, 5, Jag måste göra Pilpekaren n. Cool? Yeah. [00:13:07] PUBLIK: N är namnet på variabeln? HANNAH: Ja. Så om vi vänder tillbaka en rutschbana, är n namnet av värdet insidan av nod i vår länkad lista. Och jag vet att det kan bli lite lite förvirrande eftersom vi också ringer saken att vi vill ta bort n. Så det är där det en linje kommer ifrån. Yeah? [00:13:27] PUBLIK: Vad har du [OHÖRBAR] hur de fungerar? En pekare [OHÖRBAR]? [00:13:35] HANNAH: Visst. Pratar du about-- vilken linje? PUBLIK: Den sista raden [OHÖRBAR]. [00:13:44] HANNAH: Visst, OK. Så låt oss titta på bilden i För att försöka förklara det här. Jag är ledsen, för kamera, var frågan kan vi förklara pekare arrow nästa pekare föregående. OK, så låt oss säga att vi är på fem och vårt mål är att ta bort fem. Så pekaren nästa, vilket av dessa tre noder innebär att ge oss? Detta leder oss till den sjätte noden, eller hur? [00:14:10] OK, så nu vi ber för sex tidigare. OK? Och vi återställer detta att vara lika med fyra, som råkade vara fem tidigare. Jag vet, det är super svårt att hålla reda på. Jag rekommenderar verkligen att du rita bilder om du får en fråga som denna. Ja? [00:14:30] Publik: är anledningen till att Vi har inte en [OHÖRBAR]? [00:14:37] HANNAH: Exakt. Så frågan var, varför vi inte behöver kontrollera här? Varför behöver vi inte kontrollera att pekare tidigare är inte lika med noll? Och det är för att vi har redan separerade ut fallet om pekarens i början. Mycket bra fråga. Något annat på detta? OK, cool. Så låt oss avsluta det upp. Vi är nästan där. [00:14:59] Så vad händer om det är på huvudet? Tänk om istället för försöker radera fem, Vi ville verkligen att radera fyra? Vad skulle jag göra? Tja, jag vill återställa mitt huvud vad? Ropa ut det? Publik: Den ena efter den. HANNAH: Beautiful. OK, så vi Önskelista att peka till vad vår pekaren nästa nod är. God. Och bara för fullständighets s skull, skulle vi vill kontrollera att så länge vår lista inte är null, så länge vårt lista är inte tom, då vi vill ställa vår tidigare lika med noll. Fråga hittills? Ett steg bort from--? [00:15:53] PUBLIK: Skulle det vara om Listan är inte lika med noll? [00:15:55] HANNAH: Ja, du är helt rätt. Jag är så ledsen. Är listan inte är lika med noll. Grymt. Att försöka sätta allt detta på skärmen. Det är typ av falla av. Ledsen, killar. Och sist men inte minst, alla vi måste göra är avkastning. OK. Det var en hel proppfull i riktigt snabbt. Ta en sekund för att se detta över. Säg mig om du har några frågor. Yeah? [00:16:20] Publik: Om listan är på huvud, then-- vänta, nevermind. [00:16:26] HANNAH: OK, bra. Så det här är om listan är i spetsen, vi tar bort den till vad vi insatt. Yeah? [00:16:31] PUBLIK: Kan du förklara den första if igen? Om pekaren till n är lika med n? HANNAH: Visst. Så vårt mål med hela denna funktion är för att ta bort den nod som har värde n. Så om vi hittar, eftersom vi är iterera igenom vår lista, noden med värdet n, det är det vill vi ta bort. Så alla rader händer insidan av det stora if. Betyder det vettigt? Cool. Yeah? [00:16:59] PUBLIK: Kanske du bara inte kan se det, men inte behöver du också en rad för att bläddra igenom listan? HANNAH: Awesome. Låt oss ta upp detta lite, och Vi ska kasta den rätten i botten. Kanske styrelsen skulle har varit en något bättre idé. Så hur skulle jag flytta pekaren framåt? [00:17:17] PUBLIK: Pointer lika pekare plus ett. [00:17:20] HANNAH: Beautiful. Så det ger oss möjlighet att fortsätter att iterera igenom. OK. PUBLIK: Skulle inte det vara ett annat? HANNAH: En gång? PUBLIK: Skulle inte det vara ett annat efter den stora gamla om uttalande [OHÖRBAR]? HANNAH: Vilken del? Jag är ledsen. [00:17:38] Publik: Den traverse, borde inte det vara ett annat? HANNAH: Du absolut kan ha en annan. Eftersom jag har en returrätt där, behöver du inte en annan. Men ja, bra fråga. OK, ja? PUBLIK: Kan vi tänker på pekaren som rör sig genom listan som att ta på värdet av varje nod i listan? Eller ska vi tänka på det som sorts extern till listan? [00:18:00] HANNAH: Antingen en är bra, tror jag. Som jag antar att det är Jag säger, OK, jag är pekare. Och det här är jag. Detta är min hand. Jag kommer att peka på de olika saker som jag vill att iterera igenom. Först kommer jag att peka till chefen för listan. Och det säger mig är jag kommer att peka på fyra. Och så jag, som är utanför listan, Jag kan peka på var och en av dessa element. Så jag tror på mig själv som pekare. PUBLIK: Så när du tar bort en av dessa faktorer, du tar bort dig själv, så att säga. HANNAH: Exakt. Så du tar bort saken du pekar på. Så i exemplet som vi såg där vi är försöker radera fem, när jag pekar på fem, Jag vill ta bort sak jag pekar på. Exakt rätt. Ja? PUBLIK: Har vi tagit hand om fall där n är inte med i listan? HANNAH: Om n inte är med i listan? Allt som kommer att hända är att du är kommer att iterera igenom och iterate igenom, och sedan, du kommer att få pekaren vara null, och då du kommer att göra. [00:18:48] PUBLIK: Så gör vi att återvända någonting? HANNAH: Vi kunde. Det sätt som om den har definierats här funktionen, jag bara säga att det återgår ogiltig oavsett. Men du kan ha något som återvänder ett heltal, och har det tillbaka negativt 1 om det misslyckas. Något sånt. Frågor with-- ja? PUBLIK: [OHÖRBAR]? HANNAH: Förlåt? PUBLIK: [OHÖRBAR]? HANNAH: Visst. Så det är actual-- när vi har gjort allt detta arbete för att flytta alla dessa pilar runt, hela vår Målet var att bli av noden att vi letar efter. Så i detta fall, vilket frigör pekare, om jag pekar på fem, det är som att radera denna mitten noden. Det är den fria pekaren delen. Det vettigt? [00:19:29] PUBLIK: Så även trodde du gjorde inte [OHÖRBAR]? [00:19:31] HANNAH: Så vi antar i början Vi hade några lista som var already-- de hade lagt detta tillsammans. Så för att bygga detta lista, måste har de [OHÖRBAR]. Cool. Något annat med detta? Ja? [00:19:46] PUBLIK: Vad händer om listan inte lika med noll linjen? [OHÖRBAR]? HANNAH: Just här? PUBLIK: Ja. HANNAH: OK, jag allt jag gör är jag bara att se att innan jag försöker dereference listan, innan jag försöker komma åt den tidigare, Jag vill vara säker på att det inte är null så jag inte får en seg fel. Cool. [00:20:08] OK, jag vet att det var ganska en hel del att få igenom. Så här slide blir göras tillgängliga för dig. Så du kan gå igenom det mer i detalj. Ja? [00:20:17] PUBLIK: Varför listan [OHÖRBAR]? HANNAH: Visst. Så listan verkligen pekar på detta element här, det första elementet i listan. Så det kan inte ha en tidigare. Ja? [00:20:31] PUBLIK: Har pekaren punkten till samma adress i minnet? Är det peka på samma adress i minnet som noden att det pekar på? [00:20:40] HANNAH: Ja, pekar den till denna nod i minnet. [00:20:43] PUBLIK: Höger, så när du [OHÖRBAR]? [00:20:47] HANNAH: På ett sätt, ja. OK. Okej, låt oss gå med på detta. Och om du har fler frågor, stanna kvar i slutet, och vi kan gå igenom det igen. OK, cool. Nu får vi gå vidare att hashtabeller, försök, och träd, som du fick super bekant med i p-set fem, speller. [00:21:04] Så hashtabell är bara en array med ensamma länkade listor eller dubbelt länkade listor som kommer ut av det. Så vi har något slags av associativ array. Och hur vi vet vilka av dessa arrayer hinkar för att komma in, vi använder en hashfunktion. Så i detta fall, kan vem som helst gissa vad hashfunktionen skulle bara utifrån vissa av input och output? [00:21:31] PUBLIK: Brev antal alfabetet. HANNAH: Exakt. Det bara sätter dem i alfabetisk ordning. Allt som börjar med en A sätts in i den första skopan. Allt med en B förs in i andra hink, osv, osv. Awesome, OK. Och en hashfunktion är någon funktion som tar in ett ord och kommer att berätta vad hink det hör hemma i. Så vilken post i vår array det hör hemma i. [00:21:55] Så varje gång jag ge min hashfunktion ett ord, Det borde tala om för mig samma placera varenda gång. Så om vi använder hashfunktionen från föregående bild där vi sorterar av första bokstaven i alfabetet, varje gång jag ge min hashfunktion "äpple" Det bör alltid ge mig tillbaka 0. Så om jag har ett äpple att sätta i min hashtabell, om jag ger "äpple" till min hashfunktion, Det borde säga, gå lägga den i skopan 0. Om jag söker en äpple i min hashtabell och jag säger, där kanske äpple live, frågar du din hashfunktion. Och den säger, gå till skop 0. Okej? Frågor med hashfunktioner? Grymt. [00:22:34] Här är en något mer detaljerad förklaring av vad en hashfunktion kan se ut. Okej. Nu, problemet med hash funktionerna är i en perfekt värld, Vi skulle bara ha en sak i varje hink. Men i verkligheten, det finns inte bara ett ord som börjar med A. Det finns inte bara ett ord som börjar med B. So i detta fall, om vi plötsligt får "berry" och vi vill uttrycka det in i vår hashtabell, och vi ser, åh, nej, är banan redan där, vad ska vi göra? [00:23:03] Tja, vi har två alternativ. Det första alternativet är linjär sondering, vilket betyder bara gå hitta nästa tom skopa. Gå hitta nästa tom array posten. Och bara sätta "berry" där. Så jag vet att det är tänkt att gå med banan i skopan ett. Men bara lägga den i skopan tre, eftersom skopan tre är tom. Ett annat alternativ är förmodligen vad du implementera i p-set, där du hade separata chai. Så alla dina hinkar, alla dina arrayelement, inte bara rymmer ett ord, men faktiskt innehar en pekare till en lista med ord. Så att om du hade banan i ditt hashtabell och du plötsligt ville att lägga bär, inga problem. Lägg bara till bär på till slutet, eller till början, din länkad lista. OK, awesome. Frågor med hash tabeller innan vi går på? [00:23:58] Okej. Träd och försök. OK, så detta var ett annat alternativ för genomförande ordbok. Du kunde ha gjort ett försök. Så det är en speciell typ av träd som beter sig som en multi-level hashtabell. Så ser du på bilden där du har en array som pekar på ett gäng arrayer som pekar på ett gäng arrayer som pekar på ett gäng matriser. Och vi får se exakt vad som skulle se ut på en framtida bild. Och mer allmänt, ett träd är bara datastruktur där uppgifterna är organiserade i någon hierarki. Så var vi såg att vi har någon sorts förståelse av en toppnivå, en nästa nivå, en nästa nivå, en nästa nivå. Så detta är förmodligen mest klart med några konkreta exempel. Så här är vårt träd. Du kan se att det har särskilda nivåer att vi börjar med att rotnoden, en. Och vi kan gå ner genom vårt träd. [00:24:50] Ett binärt träd är en särskild typ av träd. Och det enda specifikation för ett binärt träd är att varje nod har högst två blad. Så du kommer inte att se någon av dessa noder har tre eller fyra eller något annat antal blad. Och sedan ännu mer specifik är ett binärt sökträd där varje nod till vänster om nod kommer att ha ett värde mindre. Och varje värde till höger kommer att bli större. Så om du ser 44 finns på vårt rot, till vänster, 11, 22, och 33 är alla mindre än vår rot. Och till höger är alla siffror bigger-- 66, 55, och 77. Och den här egenskapen är sant på varje nivå i trädet. [00:25:37] Så när vi går ner till 22, 11, och 33, fortfarande 11 är mindre än 22 och 33 är större än 22. Och detta gör det lättare att söka för om vi är ute efter ett nummer, Vi vet exakt vilka gren att följa ner. Så detta bör påminna dig lite av binär sökning. Yeah? [00:25:56] PUBLIK: Så när du är beskriver binära, du sa det har högst två blad? HANNAH: Mm-hm. PUBLIK: Kan det ha mindre? HANNAH: Ja. Så låt oss säga, till exempel, du hade inte ett jämnt antal saker och du kan inte fylla upp alla dina löv, det är bra om man har en. OK? Grymt. Alla andra frågor om träd? OK. [00:26:16] Tillbaka till våra försök som jag talade om lite tidigare, hur vi har dessa multi-level matriser. Så i det här fallet, börjar vi i toppen. Och vi kan följa en viss ordet ner. Så låt oss säga att vi ville ha att leta efter Turing. Vi börjar på T, följ den ner till en array som innehåller U, och följer den ner tills vi nå denna lilla deltat som berättar, ja, du hittade ett ord. Klart på försök? Något att gå dit? Ja? PUBLIK: Har symbol för deltat måste ockupera utrymme inom try? HANNAH: Ja, så det gör inte nödvändigtvis ens behöver vara ett delta. Men vi behöver något sätt att berätta vår computer-- ledsen, så att vi vet att TUR är inte ett ord. Eftersom låt oss säga att vi inte hade detta koncept av ett delta, detta begrepp av grattis, du hittade ett ord, det skulle gå igenom och iterera T-U-R, och sedan säga, fantastisk, jag hittade den! Det måste vara ett ord. Men det är verkligen inte. Vi vill att hela Turing vara ett ord. Så vi måste ha något på slutet som säger, grattis, du har hittat en legitim ord. PUBLIK: Så om du hade som 26 bokstäver i alfabetet, skulle du faktiskt har 27 nycklar i ditt försök? [00:27:24] HANNAH: Awesome, ja. Så egentligen, tror jag att kommer att vara på nästa bild. Ta-da! Där om du har en nod i ditt försök, du kommer att ha 27 barn i stället för 26. Eventuella frågor med det? Yeah? PUBLIK: Varför försöker ta upp så mycket utrymme [OHÖRBAR] när du går? Varför anses det vara [OHÖRBAR]? HANNAH: Visst. Låt oss gå tillbaka. Frågan är, varför är försök så mycket större än något som liknar en hashtabell. Så för alla dessa nivåer, även om de inte är dras här, du måste ha alla 26 tecken. Och anledningen till att du inte kan säger, åh, men precis som för Turing, jag behöver inte ha någon av de som samma saker om nivån på U. Tja, om plötsligt du ville lägga något som var som T-H, du skulle behöva ha förmåga att lägga det ordet. Så för varje enskild bokstav, du kommer att ha att ha ett gäng matriser som kommer ut av det. Så du kan se hur det skulle få riktigt stora, riktigt snabbt. Fler frågor? Okej. Yeah? [00:28:29] PUBLIK: När är försök snabbare än hashtabeller? [00:28:33] HANNAH: När är försök snabbare än hashtabeller? Så om du hade en riktigt dålig hashfunktion. Så låt oss säga att jag var som, Här är din hashfunktion. Oavsett vad ordet du ger mig, jag är alltid kommer att lägga den i array posten 0. Och så vi sluta med att bara sätta allt i en stor lång länkad lista. Och så en uppslags tid skulle ta i värsta n om det är i slutet av vår lista. Med försök, vi måste bara iterera genom bokstäverna i ordet. Så även om vi lagt ett gäng fler ord till vårt försök, det skulle inte ta oss längre att finna ett visst ord. [00:29:09] Allt vi behöver göra är att, för exempel, i detta fall, låt oss säga att vi letar efter zoom, vi skulle bara behöva iterera över Z-O-O-M, fyra bokstäver. Så det är bara längden på ordet zoom. Det spelar ingen roll hur många fler ord vi lägger i detta försök. Vi kan alltid få det i dessa fyra steg. Grymt. Ja? [00:29:32] PUBLIK: Så [OHÖRBAR] är en array, eller hur? [00:29:34] HANNAH: Mm-hm. PUBLIK: Om du är söker [OHÖRBAR], skulle du behöva gå igenom din array för att hitta [OHÖRBAR]? HANNAH: Visst. PUBLIK: Inte att ta mer tid? HANNAH: Om jag ska säga att min array är alltid kommer att vara A, B, C, D, E, F, G, bla bla bla, så om jag vet alltid att det är i exakt samma ordning, om jag vet alltid att det är i alfabetisk ordning, Jag kan bara säga O är nummer så och så i alfabetet. Bara hoppa till den platsen. Eftersom minns, med arrayer, kan vi komma åt någon del av denna samling i ständig tid om vi vet var vi söker. Yeah? [00:30:09] Publik: På föregående skjut [OHÖRBAR] 27, men 26 för den första. [00:30:14] HANNAH: Förlåt? [00:30:15] PUBLIK: Är inte den första en 0, så skulle det inte vara 26? [00:30:18] HANNAH: Visst, så när vi säger 27, det är kommer att ge oss index 0 till 26. Men om du verkligen räkna de ut, det kommer att bli 27. Bra fråga. Något annat? Yeah? [00:30:31] PUBLIK: Så är försök långsammare än hashtabeller? [00:30:34] HANNAH: Försöker kommer att vara i teori, snabbare än hashtabeller men tar upp mer minne. Yeah? PUBLIK: [OHÖRBAR]? [00:30:45] HANNAH: Jag är ledsen, det gjorde jag inte höra dig. PUBLIK: [OHÖRBAR]. 0-25 ger dig 26. [00:30:54] HANNAH: 0-25 skulle ge dig 26, höger. [00:30:56] PUBLIK: Och sedan [OHÖRBAR]. HANNAH: Höger. Så antalet vi specificerar är Antalet saker i vårt utbud. Så om vi har 27, är det kommer att ge oss 0 genom 26, som kommer att ge oss utrymme för, i det här fallet, Jag är inte inklusive en apostrof. Så vi får 0 till 25 är de första 26 bokstäverna i alfabetet, eller alla 26 bokstäver i alfabetet. Och sedan den sista sak, på posten 26, är kommer att bli kontrollen märke, eller deltat. Något annat? Grymt. Förlorat mitt utrymme. OK, cool. [00:31:31] Så vi redan berört detta. Men den stora avvägning mellan försök och hashtabeller är som försöker tillhandahålla, i teori, konstant slå upp gånger men använd en hel del minne. Okej, nu har vi något mindre komplicerade strukturer, och vi kommer att bli klara med C, och vi ska flytta höger längs. [00:31:49] Så stackar, vi såg detta i föreläsning där du ha något som liknar en stapeln av brickor där det sista du lägger på stacken går att vara det första du tar bort. Så det är vad som verkligen definierar en stapel är att det sista du sätter på kommer att bli den första sak du ta av. Och den terminologi som vi använder Om vi ​​ska sätta något, Om vi ​​ska lägga till något till vår stack, vi kallar det driver. Och om vi tar något off, vi kallar det popping. Och om vi ska genomföra en stapel, vi måste se till att hålla koll på både storleken och kapaciteten. Så det totala antalet element som vi kan håll och den nuvarande antalet element att vi håller. [00:32:27] Och på samma sätt har vi köer. Och den enda skillnaden är i stället för med högar, Vi sa det sista vi sätta på är det första vi ta fart. Så med köer, den första vi lägger in kommer att bli det första vi tar ut. Så det här är som om du är faktiskt kö i en butik och du får hjälp, då den första personen i raden bör vara den första personen att få hjälp. Så det skulle vara en kö. [00:32:52] Så vi måste hålla koll på storlek, kapacitet, och huvudet eftersom vi är kommer att ta ut alla de främre av listan istället för ryggen. Frågor om detta? Eventuella C frågor som stör dig? Datastrukturer, något av det roliga saker? Okej, coolt. Så jag ska överlämna den till Alison till hoppa in lite mer programmering. [00:33:14] ALISON: Åh, vi får se. Vi får se hur bra jag gör här. OK, jag ska försöka flyga genom det här, grabbar. Hannah gick mycket i djup på alla hennes saker. Jag ska försöka ge dig en snabb blast överblick så att vi kan få till Davin med alla det roliga JavaScript och säkerhets saker att kanske du faktiskt vill höra mer om. [00:33:33] OK, som Hannah sa, om du har några frågor, Jag ska för fort, snälla, låt mig veta. Jag kommer att svara på frågor som behövs. Så för att börja, vi kommer att börja med förmodligen en av de allra första sakerna du lärt med webb programmering, behörigheter. Så chmod, ni borde ha varit mästare på detta med all webben programmering som du har gjort på sistone. Det är i princip bara ett kommando som ändrar behörighet eller åtkomstbehörigheter av våra filsystemet objekt. Naturligtvis att faktiskt se dessa, om du är ha några problem med dessa under dina problemsamlingar, Du kan ha använt ls -l, vilket är lång, att få uppfattningen ungefär som det här, där du faktiskt ser alla behörigheterna för en fil. [00:34:16] Och egentligen, vi bara kommer att gå genom ganska snabbt bara ganska mycket vad var och en av dessa menar. Så vi har d här, vilket bara står för katalogen. Uppenbarligen just här, ser vi rwx, vilket är läsbar, skrivbar och körbar. Dessa kan också vara representerade som bitar, som vi kommer att få in på nästa sida. Så varje triad som vi såg här, så det är tre triader. Vi har rwx, r ingenting x och r ingenting x för denna första filen. Det är denna allmänna struktur. [00:34:49] Så vi har någon katalog. Vi har viss användargrupp med dessa behörigheter. Vissa grupp som har dessa behörigheter, och en värld som har tillstånd. Du kan tänka på dessa som en triad. Du kan tänka på dessa som tre bitar. Så de kan innehålla värden allt från 0 upp till 7, vilket är anledningen till ibland vi hade du chmod 600 istället för chmod rw oavsett. Vi ska få in ett exempel där. Men i grund och botten, kan du tror av dessa som antingen bara rwx, eller så kan du tänka på dem som en del nummer där det första en här betecknar ett tal mellan 0 och 7, detta andra en betecknar ett tal mellan 0 och 7, och den tredje en betecknar ett tal mellan 0 och 7, OK? [00:35:38] r har ett värde av 4. w har ett värde av 2, och x har ett värde på 1, vilket är anledningen till detta tillstånd här skulle chmod 700. För i det här fallet, säger vi har den första biten finns vänds på. Så vi har 4 för läsning. Den andra biten vänds på för w, vilket är 2, så nu har vi 6. Och den tredje biten vänds på för x, vilket är 1, så vi får sju. Och naturligtvis, vår grupp och vår värld är varje 0. Så detta är också den ekvivalent chmod 700. Och jag skulle definitivt försöka förstå mappningen mellan dem. Jag är inte säker på om det har komma upp på en frågesport före, men det skulle vara en fråga som jag kan fråga. [00:36:18] Bara en liten bit att gå till och med längre in chmod här, här är den mycket allmänna strukturen av en chmod samtal. Så naturligtvis har vi chmod här. Referenser, vad detta avser är som vi ger dessa behörigheter till eller som vi tar dessa behörigheter ifrån. Så vi har en här i behörighet, som vi har gett dig chmod ett plus x, som vi får se snart. a betyder bara ge dessa specifika behörigheter till alla. Ge dem till alla. Så du kan mycket väl ha u plus x eller g plus x eller o plus x eller multipel därav. Så att första delen är alltid kommer att vara referenser. Vem ger vi dessa behörigheter till, eller som vi tar bort dem från? [00:37:03] Den andra en är operatör. Så ni har till största delen behandlat plus. Detta ger behörigheter till vem du ger dem, medan minus, logiskt, tar bort dem. Så inget alltför hemskt där. Och sedan Lägen är vad vi pratade om med läsning, skrivning, eller köra. Så ett plus x betyder ge körbara behörigheter till alla. Och sedan, naturligtvis, på vilken specifik fil eller katalog. OK? Alla bra med chmod? Inte så illa? [00:37:37] OK, så HTML, någon av er är gammal nog att-- MySpace ålder? Jag skickade detta till min avdelning, och bokstavligen hälften av folket tittade på mig som om jag var galen. Och jag var som, grabbar, vi är inte så gammal. Kom igen. Så Hypertext Markup Language, det är ärligt talat bara ett sätt för dig att visa vissa saker på webben. Så det är ett märkspråk. Det är inte ett skriptspråk. Det finns ingen logik i det. Det är helt enkelt att ändra sätt någonting visas. OK, så det är en viktig distinktion att göra. Det anses ett märkspråk, inte ett skriptspråk. [00:38:12] Så här har vi våra HTML-taggar. På den här bilden är förmodligen de flesta av de de som du bör känna till och vara riktigt bekväm med. Så uppenbarligen har vi vår HTML-tagg, vilket betecknar att allt i mellan dessa två kommer att vara HTML. Vi har lite koppling, vilket uppenbarligen kommer att ge dig en länk till en extern webbsida. Vissa titel, inom vår chef här. Och vi har vår kropp med h1, som är en rubrik, så det ska göra det fint och fet och större. Och sedan har vi några p, som är ett stycke. Du bör nog veta och känna till saker som hur du infogar en bild, är det några andra header klasser? Jag skulle definitivt vara bekväm med div. Så dessa har majoriteten av taggar som du bör känna till. Men naturligtvis, som med allt i CS 50, är ​​listan inte uttömmande. Så se till att du borsta på det. [00:39:08] CSS, så CSS, om någon av er tittar mitt seminarium från två veckor sedan, är egentligen bara ett sätt att styla din webbsida? OK, så vi har lite märkspråk. HTML, som tar hand om bara texten och där det kan vara på sidan. Men CSS är verkligen det som gör det ganska. Du kunde ha dessa i ditt HTML filer, men som vi kommer att prata om senare, Jag är ganska säker på att det kanske vara nästa bild, det är vanligt, och faktiskt praxis som vi verkligen uppmuntra, för dig att hålla dem separerade när vi prata om MVC och att hela paradigm. Det är verkligen vad det matar in. [00:39:42] Så CSS är bara ett sätt att göra saker ser ganska. De saker här, som kropp och #title och .info, dessa kallas väljare och vad de gör är att de väljer vissa saker inom din HTML-fil och tillämpa oavsett stil, Oavsett vilken typ av saker som du vill, till den specifika del av din webb sidan. Så här har vi en bakgrundsfärg och en färg och ett typsnitt familj som är att vara tillämpas på det som finns i kroppen. Så om vi tittat tillbaka hit, det skulle inte gälla för titeln. Det skulle bara gälla för vad som är i dessa kroppsväljare, OK? [00:40:22] Med titeln här, det här kommer att vara samma sak, färgen på texten vara blå kommer bara att påverka det som är inom titelväljarna. Samt info här, texten blir rosa, vad är info, vilket är rätt här. Så det enda som skulle vara rosa på denna sida är datum, måndag 17 November, 2014. OK, så CSS är bara ett sätt att har mer kontroll over-- ja? [00:40:48] PUBLIK: Varför har du att använda hash med titeln? [00:40:51] HANNAH: Nästa bild, lovar! Vi ska komma dit. Så det är därför vi måste använda hash. Så väljare ta på tre huvud former som vi talar med er killar om. Jag FDu vill veta mer, det finns gott därute. Det finns stor CSS dokumentation. Det finns en taggnamn, som har att göra med bara din vanliga taggar i HTML. Så h1, p, div, h2, de möjliga saker. Och vi kan bara nämna dem som de är. Så som vi ser här med kropp, det är en vanlig tagg. Så vi kan bara sätta kroppen när vi pratar i vår CSS-fil. [00:41:26] Med titeln, hela anledningen till att vi har denna hash är att vi har vad som är anses ett ID. Så ett ID bör alltid vara unikt inom din HTML-sida så att när du är hänvisa till det, du vet att du bara hänvisar till en specifik sak. Så i det här fallet här, med våra h1 här, CS 50 översyn session, vi har en id titel. Så för att bara hänvisa till det bit av vår HTML, gör vi en hash titel. Bara genom konvention, är ID betecknas med en hash framför dem. På samma sätt, ser vi info här är en klass. Och så klass med CSS är betecknas som en prick klass eller dot vad den klassen är. Så i det här fallet, det är info. [00:42:10] Så jag tar tillbaka det. Båda dessa skulle vara rosa för vår CSS här eftersom de båda har en klass av info. Och i vår CSS-fil, har vi utsett att något med en klass av info ska vara rosa. Betyder det vettigt? Ja? [00:42:27] PUBLIK: Om du skulle göra allt i kroppen vit, och sedan försöka göra något inom det blå, skulle det orsaka problem? [00:42:34] HANNAH: Så CSS är CSS. Så vad är mot botten kommer företräde. Så om du gör något med kroppen, och du gör allt vitt, och sedan senare på dig ändra titeln eller om du ändrar texten i kroppen, Det skriver över det. Så något mot botten kommer företräde. Ja? [00:42:56] Publik: Och ID är unikt, men klasser kan vara mer? HANNAH: Höger. Så ID ska vara unikt, och klasser kan hänvisa till så många saker som du skulle vilja. Fler frågor? Ja. [00:43:09] PUBLIK: [OHÖRBAR]. Jag undrar om som gör en skillnad. HANNAH: Jag är ledsen, vad var frågan? PUBLIK: Det finns små "F" och kapital "F." HANNAH: Så skillnaden mellan små "f" och kapital "F" bör inte göra en skillnad. Så "f" blir 15 åt båda hållen. Cool, något annat? Alla bra, CSS? Ja? [00:43:30] PUBLIK: Ledsen. Kan du ha en klass och ett ID? [00:43:35] HANNAH: Ja, det kan du. Saker kan ha både en klass och ett ID. Och jag rekommenderar testa dessa på egen hand. CSS lär du dig bäst bara genom att göra något, mycket enkel webbsida, utarbeta några CSS, och bara se hur de samverkar. Och du kommer att få en mycket bra, intuitiv känsla för hur det fungerar. [00:43:56] OK, alla bra med CSS? Du kommer alla att göra vackra webbplatser med CSS nu. OK, bästa praxis, precis saker att tänka på, saker that-- det är därför vi docka er för formgivare och whatnot. Så stänga alla dina HTML-taggar. Så om du har en öppen kropp, det bör finnas ett nära kropp. Om du har en öppen punkt, det bör finnas en nära punkt. Kontrollera att se din sida validerar. Ni borde vara mycket bekant med detta från p-set syv med CS 50 finans med W3 validator. Och som jag sa tidigare, en av våra stora paradigm är att separera din stil med CSS från din markup, vilket är HTML. Och sedan, naturligtvis, vi har denna stora XKCD här nere. Yay, komisk lättnad! [00:44:38] OK, TCP / IP. Mellan dessa och HTTP, princip är de båda protokollen. Så du kan bara tänka av dem som en uppsättning regler som styr hur saker rör sig över internet. Så transmissionskontroll protokoll, eller Internetprotokollet, är bara ett sätt att se till att data blir där det händer och att vi vet om vi någonsin missar uppgifter. Så om ni tänker tillbaka på föreläsning ett par veckor sedan med David där vi hade fyra kuvert, de var alla numrerade som en av fyra, två av fyra, tre av fyra, fyra av fyra, detta är bara en uppsättning regler. Vi sa, OK, så fort vi är skicka fler än ett paket, vi kommer att numrera det med vilket nummer det är och hur många totalt som användaren ska få. [00:45:19] Och detta är bara berätta vem tar emot data huruvida de har fått allt eller om fick något förlorat på vägen. Och de behöver be om det igen. Detta är egentligen bara en uppsättning regler. Det är så man kan tänka på det, OK? Och dessutom, anger det hamnen, vilket ni can-- jag vet under föreläsningen, de hade en hel lista med hamnar. Men vi har inte dem här just nu. [00:45:41] Så hypertext transfer protocol är, återigen, det är ett annat protokoll. Så det är en annan uppsättning regler som styr, i detta fall, hur hyper överförs. Så det bara tillåter webbläsare att tala med webbservrar. Och som vi sagt här, är det som mänskliga handskakning. Det är bara ett sätt att styra hur webbservern är kommer att interagera med din webbläsare. Och vi har bara ett par exempel. Vi har några önskemål här där GET är metoden. Vi har HTTP 1.1, vilket är protokollversion för oss. Och sedan, som är värd, vad vi faktiskt försöker komma åt. Och sedan, som ni ser här, vi få lite respons med detta 200 OK som vår HTTP svarskod. Vi har en stor lista jag ska att dra upp i en sekund att ni bör känna. Och vi har det här innehållet typen text / HTML, som just säger vilken typ av data Vi tar emot från servern, OK? Denna värd och denna innehållstyp är en del av HTTP-huvuden. Du kan ha så få eller så lite som nödvändig för sammanhanget av vad du arbetar med. Ibland har du en hel del information som kommer från din server. De kanske begär en hel av information från användaren. Det varierar beroende på sammanhanget. Om man tittar på CS 50 Study, det finns mycket mer om det. Men vi har en hel del att få igenom, så jag kommer att sätta igång om det är OK med er killar? Cool. Håll ut. Jag har definitivt att Hela listan of-- va! Jag vet inte varför det är hela vägen hit. Jag trodde att jag bokstavligen flyttat det medan jag var sitting-- [00:47:15] DAVIN: Vill du lära ut det? Eller vill du att jag ska lära ut det? [00:47:17] PUBLIK: Jag trodde vi kunde bara visa dem att börja med. Jag menar, du kan gå in i dem vidare, men jag trodde att det var mer meningsfullt eftersom jag pratade just om HTTP-status. Så här är hela listan. Jag gissa vad som kommer att hända är Davin kommer att gå in i dem senare. Men det finns en hel lista, en förhandsvisning av smaken att komma. OK, vi kommer att blow-- detta kommer att vara en PHP snabbkurs som ingen annan. [00:47:41] Så PHP, Hypertext Preprocessor, det är en rekursiv backronym, vilket betyder att det hette något annat. Och sedan de var som, det här egentligen inte vettigt. Så de bara namnges det-- och det var en akronym, så de bara gjort det PHP Hypertext Preprocessor, vilket bara meningslöst. Kul berättelse. Det är ett programmeringsspråk. Så mycket som jag understryka att HTML är inte ett programmeringsspråk, det är ett märkspråk, PHP är ett programmeringsspråk. Hur vet du att detta är eftersom det finns logik. Det finns villkors. Vi har variabler, medan vi har ingen av dessa saker i HTML. [00:48:12] Okej, då har vi den här lilla bit här som är som en smak av PHP. Så grunderna, variabelnamn börjar med ett dollartecken. Massor av människor gillar det. Påminner oss pengar. Det är allt bra. Vi vill alla PHP. Så vi inte anger ett variabelns typ längre. Den bestäms vid körning. Tolken kommer att se ut, åh, vi ska bara köra igenom, och enligt sammanhanget, Vi får se vad slags typer dessa variabler måste ha. Det finns ingen huvudfunktion. Saker kommer bara köra. Ni med din import i ditt förra p-set, kommer du att märka detta. Det var egentligen inte en huvudfunktion. Du skrev precis vad du ville hända. Och det bara typ av hände. Så det är PHP för dig. [00:48:56] Arrayer är mycket lika. Vi har fortfarande denna konsol. Här har vi några variabel kallas arr, och det är lika att-- vi har vår normala fäste notation. Och vi har några nyckelvärde. Och den stora skillnaden mellan C och PHP arrayer är att vi kan ha denna associate-- vi kan associera värden till nycklar. Så istället för att bara ha en array som indexeras med antalet eller positionen av det elementet i arrayen, vi faktiskt kan associera den med en nyckel. Där vi kan säga, OK, jag vill helst Värdet är associerat med frukt. Och kanske vi har frukt gick till banan. Så det skulle återvända banan till oss. [00:49:41] Men i grund och botten, det mest kraftfull sak om detta är att om ni minns demo från föreläsning där vi i grund och botten skrev om speller i PHP, och det was-- lookup var egentligen bara gillar, går denna nyckel finns? Det är verkligen typ av makt det. Du behöver inte iterera via din array. Du behöver inte veta Vad utrymme det är i. Det kan vara i slutet eller början. Så länge du vet nyckeln som är kopplad till värdet, PHP kan bara spotta det värdet höger tillbaka ut på dig, OK? [00:50:09] Och sedan, vi också bara har bara för att vi kan ha Nyckelvärdesparen betyder inte att du måste. Du kan också bara skapa en normal matris som här, i botten, där det är bara en, två, tre, fyra. De är våra värderingar. Och faktiskt, deras nycklar är indexen. Så nyckeln för en skulle vara noll. Nyckeln för två skulle vara ett. Så vidare och så vidare, om inte du tilldela uttryckligen en nyckel, du kan anta att Värdet är bara deras index. Betyder det vettigt att alla? Inga frågor? Grymt. [00:50:38] OK, är foreach ett sätt att iterera igenom dina arrayer. Så vi har något här, bara den allmänna strukturen. Så foreach, namnet på vår samling, som oavsett du vill ringa varje element i matrisen, och vi kan göra något med som element eller med det värdet. Så vi har ett exempel här. Vi har en associativ array med dessa två poster med bar som förknippas med foo och qux är associerad med baz. Så nycklar är foo och baz. Värdena är bar och qux. Så foreach har vi vår array här, eftersom nyckelvärdeparet. Detta tillåter oss att åtkomst både nyckeln och värde. Kanske du bara vill ha värde, i vilket fall du bara kunde göra som arr som $ värde, och sedan bara tillgång till värdet som ni iterera igenom. Men kanske, för vissa Därför vill nyckeln, vilket är anledningen till att jag valde detta exempel i stället. Så du kan faktiskt manipulera nyckel och värde i det här fallet. OK? Fråga? [00:51:41] PUBLIK: Om du ville bara manipulera nyckeln, skulle du måste göra foreach-- [00:51:45] ALISON: Höger. Så om du ville manipulera bara nyckeln, skulle du fortfarande behöver detta syntax för om du bara ha arr som något, som en sak, det är kommer att anta att du vill värdet, inte nyckeln. Så om du någonsin precis har precis som arr som, det är kanske som $ element, det kommer att anta att du frågar för bara värdet vid varje punkt. Om du uttryckligen vill göra något med nyckeln, även om du inte tänker göra något med det värde, du behöver denna struktur som vi har här där du uttryckligen frågar för både nyckeln och värdet. Stor fråga. Något annat? Cool. [00:52:27] Okej, PHP och HTML. Åh, vi är tillbaka till p-set sju igen. Så detta bör se lite bekant. Så detta är några enkla HTML-formulär som har lite input namn hej. Och vi ser att vi har vårt sätt att GET. Och om vi minns från vår p-set, När denna blankett lämnas in, Det skickar en array med namnet $ _GET som har alla dessa ingångar eller variabler från den form som bör vara manipuleras i vår PHP. Så i detta fall, användaren skulle sätta i deras namn. De anser det. Och vi ser att vi får lite array här. Vi har vår GET array. Och vi går in på namnet. [00:53:11] Så det säger, OK, ge mig värde som är associerat med namn, namnge vara nyckeln här. Och som avbildas direkt till vad Vi sa vår insats heter. Så det här var att ge dig nyckeln till vad kommer att vara i ditt utbud här. Betyder det vettigt att alla? Ja? [00:53:32] PUBLIK: Har namnet i GET hänvisa till den lila linjen i [OHÖRBAR]? [00:53:36] ALISON: Den hänvisar till detta här. Så här området just här, den hänvisar till detta namn här. Så detta kunde ha döpts som telefonnummer eller vad som helst. Detta namn egentligen säger, vad kallar du det här fältet? Hur kommer ni att hänvisa till detta område? Och detta namn faktiskt gillar, vi är säger detta område kallas namn. Det är hur vi ska komma åt den. [00:53:59] PUBLIK: Så är det vill, ingångsNamnet är Bob, och-- [00:54:02] ALISON: Höger, då du skulle få Bob där nere. Exakt. Alla coolt? Okej, så GET kontra POST, dessa är de två huvudsakliga sätt att vi skicka data i en HTTP-begäran. Ni skulle ha sett båda dessa förhoppningsvis. Så med GET, informationen ledes genom URL. Så om du någonsin gör Google sökningar, YouTube, kommer du förmodligen märker några frågetecken. Och sedan, alla orden att du bara sätta in där. Och POST passerar data i HTTP meddelandekroppen. Så till skillnad från GET, du slags överväga att uppgifterna är dold från användaren. Men vad är egentligen viktigt att förstå är att detta fortfarande lika osäker som GET. Analogin jag gillar att använda är om du har ditt kontonummer och du skriver det på utsidan av ett kuvert, det är ganska osäkra. Om du skulle skriva det på en bit av papper och lägga den i kuvertet, det är fortfarande riktigt osäkra eftersom Allt du behöver göra är att öppna upp det och titta på det faktiska innehållet av meddelandet för att se det. Så det här är "dolda", och folk gillar att tycker det är säkert, men det är verkligen inte. Och jag är säker Davin kommer komma in i det mer, kanske. Men det är en viktig distinktion att göra och något riktigt bra att förstå. [00:55:15] OK, SQL, Structured Query Language. Alla grejer som Vi har sett så nyligen! Så det är i princip bara utformade, naturligtvis, för hantering av data. Ni hade en hel del erfarenhet av detta i era tabeller med PHP MyAdmin. Och det finns fyra vanliga frågor att vi vill att ni killar att veta. Så det finns uppdatering, insats, markera och ta bort. Så se till att du vet dem riktigt bra. Vi kommer att gå genom dem riktigt snabbt. [00:55:40] Så uppdatera, verkligen, som vad du kanske tror att det gör, det bara uppdaterar data i din databas. Så vi har några exempel här. Detta är den allmänna strukturen hos en uppdateringsfråga. Så vi uppdatera tabellen att vi pratar om. Och vi vill ställa vissa värderingar, vissa kolumner lika med specifika värden. Så detta bara uppdaterar tabellen, ändra värden i alla rader i det här fallet. Så i den här här nere, en faktisk Vi har exempelvis insert-- ledsen. Att slide avancerade utan mig inse det. [00:56:17] Så här uppdaterar tabellen col1 lika att VAL1 där huset är lika "Currier." Vad detta innebär är det bara förändras, det bara uppdaterar dessa värden i specifika platser. Så i det här första, ändrar dessa värden för allt i ditt bord, OK? Det kommer att ändra på detta kolumn för varje enskild post, för varje enskild rad. Men det där, du kunde se det som ett kval. Så det kommer bara att ändra det i mycket speciella platser. Så i p-set sju, när du kanske uppdateras mängden kontanter att ditt användarnamn hade, hade du förmodligen några där ID är lika sessions-ID, eller hur? [00:56:53] Eftersom du inte ville ändra mängden kontanter för varje person som använde din webbplats. Du ville ändra det för en specifik person, den personen är vem var att använda det på den tiden. Rätt? OK, så sätt in, insats vissa värden i tabeller. Detta är som när du är skapa en helt ny användare. Den allmänna strukturen här är infoga i vad tabellen vi pratar om. Värden, som är de värden som vi faktiskt vill infoga. OK, så som vi ser här, vi har infoga i tabellen. Detta är specifika kolumner med deras motsvarade värden. Så detta säger, insats en ny rad innehållande värden val1 och val2 enligt dessa specifika kolumner. [00:57:33] Så kanske du bara vill fylla ut hälften av sakerna i den här raden. Det är vad den här delen här kan du göra. Det gör att du faktiskt avgöra vilken del. Ja? [00:57:44] PUBLIK: Kan du bara [OHÖRBAR] celler i raden [OHÖRBAR]? [00:57:52] ALISON: Om du bara fylla i vissa delar av din rad, resten av dessa celler är bara tomt. Så länge du tillåter dem att vara tom, det är inte ett problem. Om du försöker komma åt dem, det är kommer att återvända någon tomt element. Men det är viktigt att veta att i vissa tabeller, de har att få vara null. Du kanske har stött på ett problem under din p-set eftersom vi inte låta någon dina värderingar vara null. Men du kan ange ett valfritt värde i tabellen. [00:58:26] OK, välj, så det här är bara ett sätt att få specifika data från en tabell på vissa identifierare som du vill. Så väljer stjärnan från bordet där col lika någonting betyder bara, ge mig alla data som är förknippade där denna specifika kolumnen är sant. Så stjärnan i det här fallet kommer returnera hela raden till dig, OK? [00:58:49] Och sedan, i det här fallet väljer stjärnan från Tabellen ger bara dig hela tabellen. Och sedan, ta bort självklart det bara raderar raden från bordet. Så bort från bordet, oavsett bord vi referera, där några specifika identifierare eller något villkor är sant. Ja? [00:59:07] PUBLIK: Fråga. Varför använder du dubbla citat, och om du gör citationstecken eller singel citat, gör det någon skillnad? [00:59:13] ALISON: Dubbla citattecken eller apostrof inte göra en skillnad i SQL. Jag trodde att jag såg en annan fråga. Ja? [00:59:20] PUBLIK: Inte det påverkar vad blir rymt från frågan? [00:59:25] ALISON: Rob? [00:59:27] ROB: Vad menar du med flydde från frågan? [00:59:31] PUBLIK: Om någon har en enda fråga i form of-- [00:59:36] ROB: Om någon skulle sätta ett enda anbud in, sedan så länge du desinficerande din ingång, så det spelar ingen roll. Men om du använder en enda offert och du är felaktigt fly dina ingångar, så ja, de behöver att sätta ett enda anbud för att bryta din kod. om du använder citationstecken, de behöver för att sätta en dubbel citera bryta din kod. Men så länge du fly saker korrekt, det spelar ingen roll. Det kommer bara att översättas till rätt symbol ändå. [00:59:59] PUBLIK: Vad betyder fly detta? ALISON: Tja, som sanerande och flykt. Tentan som vi har, den store XKCD komiska att de drar upp där du har, oh-- ROB: Det är den sista bilden. ALISON: Det är den sista bilden, egentligen? Herregud. Där vi går, perfekt. OK, så i princip kan du injicera något i denna SQL-fråga där det bryter din kod, eller som David visade i klassen, om vi har några enstaka quote 1 motsvarar 1 och om i vår kod, vi bara direkt kopiera det i, och Vi har ett avslutande enkelt citat, vad som händer är att vi får vissa uttryck som utvärderas till sant som kommer låta någon in i vår databas och få data som vi inte vill att de ska få. Så desinficerande ingångarna betyder bara att se att vi flyr dessa tecken och utse dem som tecken och inte saker som bör tillåtas att uppfattas bokstavligt som vår SQL-sats. [01:01:04] Så den stora sak som vi sa att ni ska vara med hjälp var HTML specialtecken, vilket är något att du kanske vill ta en titt på. OK, ta bort. Datatyper, kommer allt detta att vara online. Eftersom vi har 15 minuter kvar, jag är bara att gå rakt igenom det här. PHP och SQL, i princip är bara att vi hade en sökfunktion som hjälpte till att skydda mot dessa skadliga attacker. Så när du använder fråga, vi se att saker var sanerad och whatnot. [01:01:36] MVC är bara ett designparadigm, så modell, visa, controller. Det är bara ett sätt att hålla saker och ting trevliga och delas upp på samma sätt att vi tenderar att faktor out-kod i funktioner. Detta är bara en ram webbdesign som låter dig göra samma sak. Jag ska hoppa över detta. [01:01:54] Detta är något som jag skulle vara super bekväma med. Det är en stor liten tabell där. Det ger dig funktionen exempel på den modellen. Jag kommer bara igenom detta eftersom jag verkligen vill Davin att kunna prata. Om du har några frågor, är du välkommen. Jag ska vara här efter. Bara komma prata med mig. Med det har vi HTTP status. Och Davin kommer att blåsa genom detta i 15 minuter. Detta kommer att bli stor. [01:02:17] DAVIN: OK. Uh, din mikrofon? Yeah. Ursäkta. ALISON: Långt att vara förberedd. DAVIN: Nej, jag är redo. Jag är redo. Låt oss göra detta. Det är klart. OK. Ursäkta. Jag spillde kaffe på mig själv. Jag vet inte om jag är mer upprörd att jag ser dum, eller att jag inte har kaffe längre. Hur som helst, bara en snabb tillkännagivande om arket ni har. Så detta blad ni har inte tjänstemannen vad som finns på frågesporten. Detta är den officiella vad som finns på frågesporten. Också på webbplatsen, vi berättar dig, OK, detta kommer att vara på frågesporten. Så i den lilla fusklapp du har, inte officiellt. Och det finns fel på den. Så bäst att inte bara blint använda den. Så ja, det är det. Så låt oss komma in i denna riktigt snabbt. [01:03:05] Så HTTP status. Så vad händer när hemsida, allt är okej. Allt är OK. Allt kommer tillbaka till du hur du vill att det ska. Du får en 200 OK. 301, där har vi sett att 301 förut? Vänta, vad är det? Ursäkta. Vi såg jag tenn föreläsning under säkerhet. Så under säkerhet, så om David skrivit i http och sedan försökte gå till cs50.net, du kommer att se 301 flyttas. Varför? Eftersom det kommer att omdirigera du automatiskt till vår HTTPS. [01:03:35] Så 301 flyttade, bara det är i grunden en omdirigering. Och du kan tänka på det så här. Någon över status som börjar med två s, de är som, OK, allt är OK. Någon av de statusar som börjar med 3, de är omdirigering. Status som börjar med 4, det betyder det finns någon form av klient fel. Status som börjar med 5, det är någon form av serverfel. Så du slags bryta upp de statusar som detta. Så 304 inte modifierade, så i ditt server.c p-apparater, så låt oss säga att du laddad cat.html. Allt kommer tillbaka, du får 200s, OK, bra. [01:04:03] Låt oss säga att du utvilad det. Tja, inuti som cat.html, har du en JPEG. Tja, inte är det JPEG kommer att få laddas. Du kommer inte att posta en annan GET begäran till servern, och sedan få all denna information tillbaka. Det kommer att bara be-- den bilden är kommer att cachas på din maskin. Och så att bilden blir en 304. Så det är inte ändrats. Om du sedan stänga, klart cookies, och uppdatera sedan och försöka ladda den sidan igen, du kommer att se 200s. Du kommer inte att se att 304. [01:04:28] 400, dålig begäran, real snabb, precis som om du skulle sända en JSON-objekt till servern och din JSON-objekt var felaktig, du ser något liknande. 403, förbjudet. När vill du se ett förbjudet? Förmodligen Förmodligen? PUBLIK: Chmod. DAVIN: Chmod, ja. Så du har inte satt behörigheter korrekt. 404, hittades inte. Det är bara inte där. Så om du skriver i fel webbadress. 500, internt serverfel, servern förmodligen inte korrekt konfigurerad. Något inte på slutet, men något på serversidan. Och 503? Många såg 503s i sista p-set. När skulle det hända? Jag hörde viskningar. [01:05:05] PUBLIK: När Google beslutar att du är en robot. DAVIN: Ja, när Google beslutar du är en robot, får du 503s. Så det är en överbelastning. Om du har begärt från servern för mycket, är det oftast tillfälliga. Och de flesta av er har märkt det. Så du såg 503. Du kanske har tagit lite paus, då 503s gick bort, och allt var okej. [01:05:20] GABE: Real snabbt, när får ni får 500 i förmodligen den sista problemet inställd? Ja? [01:05:27] PUBLIK: Vanligtvis om server har en fil felplacerade eller [OHÖRBAR] deras maskin [OHÖRBAR]. [01:05:34] GABE: Så det kan vara en konfiguration fråga i din PHP på servern. Men det kan vara bara något som en semikolon som du glömt. Om du skriver PHP, några felaktig syntax kan få dig något liknande. OK? [01:05:46] DAVIN: Cool. Vill du att jag ska göra just fram AJAX? [01:05:51] GABE: [OHÖRBAR]. DAVIN: OK. Så vad är DOM? Vad DOM står för? [01:05:55] PUBLIK: Dokumentobjektmodellen. DAVIN: Nice. Och varför vi gillar det? Grymt. Höger, så det bara tillåter oss att åtkomst HTML, tillgång till vår sida mycket snabbt. Varför? Eftersom vi behandlar vår sida, behandla våra HTML-taggar, behandla allt som om de är föremål. Om vi ​​behandlar dem som om de är föremål, vad kan vi göra? Tja, kan vi kalla funktioner på dem. Och detta är viktigt varför? Jo, därför att vi kommer att använda JavaScript för att uppdatera vår HTML, uppdatera dessa objekt. Så om vi behandlar dem som föremål, Vi kan sedan ringa funktioner på dem. Jag kommer att komma in i detta lite mer när jag går in i JavaScript, men du har alla sett ut document.getElementById. Så dokument är ditt elementet, få elementet på ID, så du kommer att se ut för vissa ID i en HTML-tagg. Och sedan kan du göra något annat till det. Till exempel, som document.body, då kan du lägga till barn. Så du kommer att hitta dokumentet. Du har dokumentet. Du kommer att hitta kroppen. Du hittade kroppen. Och sedan, kommer du att ringa någon funktion på den. Så lägga barnet, och du kan lägga viss HTML på änden inuti kroppen. Så i princip, du är bara behandla det som ett objekt. Du behandlar HTML taggar som ett objekt. Och det gör det mycket enkelt och snabbt att gå igenom dem. Men det gör också att du att kalla funktioner på dem så du kan manipulera och ändra elementen. [01:07:04] GABE: Med tanke på detta, varför är JavaScript sådan en trevlig språk för att interagera med HTML? Oddsen är, när människor väljer språket för webbläsaren, för klientsidan, JavaScript är verkligen trevligt, det är riktigt bra på att hantera föremål. Och föremålen slags gillar de objekt som visas i HTML, så det är väldigt lätt för JavaScript att göra denna typ av hantering. DAVIN: Nice. Så här är bara ett exempel. Så jag tror på förra årets frågesport, eller kanske två år sedan, vi frågade dig att skapa ett träd. Så det här är precis vad du skulle göra. Så du börjar med dokumentet. Och då du i princip titta bara på taggarna. Så om du tittar, vi börja med en HTML-tagg. Och då får du ledtrådar om hur man gör detta baserat på indraget. Så huvudet typ av grenar av. Inuti huvudet, vi har annan tagg för titeln. Så då har vi en titel tagg. Och insidan som, har vi några sträng. Och så vi representerar en sträng i en cirkel. Och alla taggar är i rutor. [01:07:54] Och om man tittar, om vi se det som ett träd, och låt oss säga att HTML är en förälder, då huvud och kropp kommer att vara syskon. De båda kommer att bli barn som förälder. Så eftersom de är båda syskonen, de är kommer att vara typ av intill varandra i vårt träd modell. Och sedan, du i princip gör exakt samma sak. Så inte svårt, men vi har bett frågor som denna innan på frågesporten. GABE: Är det någon har frågor hittills? Är det bra? DAVIN: Cool. JavaScript, OK, bra grejer. Så JavaScript Vad är JavaScript? Tja, Javascript är-- det är komplicerade, men dessa är några av höjdpunkterna som du bör ha i åtanke. Först, det är löst skrivit. Vad betyder det? Så PHP was-- ja, vad är det? [01:08:35] PUBLIK: Du behöver inte explicit state vilken typ av variabel är det. DAVIN: Perfect. Så han sa att du inte behöver uttryckligen ange vilken typ av variabel. Det är precis rätt. Så i C, om jag hade int jag är lika 50, sedan i PHP, det är bara så här, $ i, lika med 50. Sedan i JavaScript, vad skulle samtalet vara? Var, hur? Det skulle vara som var i lika 50. Men du behöver inte vara liknande, OK, detta är en int. OK, detta är en sträng. Inget behov av att göra det. Det är ett tolkat språk. Så vad betyder det? [01:09:04] PUBLIK: Ej sammanställt. [01:09:06] DAVIN: Vad inte sammanställt detta? Yeah? [01:09:11] PUBLIK: Du behöver inte att omstrukturera koden att få det klart för datorn för att köra den. Det har bara tagit vid tidpunkten för utförande och datorn [OHÖRBAR]. DAVIN: Ja, så det kommer att passera genom en tolk. Men du är helt rätt. Så du kommer aldrig att kompilera den, eller hur? När du gjorde ditt PHP och JavaScript-kod, du aldrig kallas kompilering. Du ringde aldrig något liknande göra eller nåt sånt. Det beror på att det har tolkats. Så varje gång det går igenom webbläsare, det går genom en tolk. Och det kommer att tolka det precis i realtid direkt för dig. Så vad är några positiva och negativa att ha ett tolkat språk och med en samman språk? Så compiling-- ja, vad är det? [01:09:50] PUBLIK: Tolkad är långsammare. DAVIN: I vilken mening? [01:09:57] PUBLIK: När du sammanställa, behöver du inte att göra några extra steg för att utföra det, medan det [OHÖRBAR]. [01:10:04] DAVIN: Höger, perfekt. Så vad du sa är i princip att kompilering, när du kompilerar, har du massa initiala kostnader, eller hur? Du kommer att kompilera den. Men efter att du kompilera den, den kompilatorn kommer att optimera den. Det kommer att vara snabb. Det kommer att i grunden vara lika snabbt som det kan vara. Med tolka, du aldrig har den initiala kostnaden. Snarare, det kommer att vara något långsammare varenda gång du tolkar det. Och du kommer att behöva tolka det varenda gång. Så istället för att ha den här engångskostnad, nu är du kommer att behöva tolka det varje gång sidan gör. [01:10:29] Så tolkar är bra eftersom du behöver inte kompilera det, men de är dåligt i att varje tajma sidan laddas, det är kommer att behöva tolkar detta JavaScript. Och det kommer att köra något långsammare än om du skulle kompilera den. Låter dig communicate-- oh, vänta. Används för att manipulera innehåll och utseende. Vi pratade just om det. Den använder DOM. AJAX, vi får in AJAX i lite. Och sedan är det klientsidan. Så PHP är serversidan. JavaScript är klientsidan. Vad är positivt med det? Den säger det. Det är snabbare, eller hur? Eftersom du inte har att-- det är snabbare. Du behöver inte kommunicera med någon annan anordning. Om du bara på din klient, du aldrig kommer att behöva gå och se vad som finns på servern och sedan rapportera tillbaka eller något liknande. Så klientsidan tenderar att vara lite snabbare. [01:11:15] GABE: Ja, men det här betyder inte PHP är snabbare än JavaScript eller något av liknande. De körs typ av i samma hastighet eftersom de är både tolkade språk. Det som är långsam här är begäran. Så du faktiskt kommer hela vägen över till Brasilien att få information som bor där. Men PHP och JavaScript, de slags kör i samma hastighet. Det är inte att man är snabbare än den andra. Detta, även, kuggfråga här. Så JavaScript blir aldrig maskinkod, sant eller falskt? [01:11:47] PUBLIK: Falskt. GABE: Falskt. Det måste bli maskin kod eftersom maskinkod är det enda maskinen förstår. Även om det inte sammanställt, det fortfarande blir maskinkod eftersom tolken är bara ett program som går rad för rad och omvandlar den linjen i något datorn förstår. OK? Cool. [01:12:08] DAVIN: Här är bara en mycket grundläggande hallå världen JavaScript-program. Så jag vet inte if-- du har sett denna. Men du behöver bara HTML här. Och istället för att faktiskt sätta JavaScript i skripttaggar, så du skulle normalt lägga den i huvudet. Du har script-taggar. Du släpper det där. Allt vi har gjort här är att vi har länkat in-- så vi har länkat i en JavaScript-fil såhär. Och du har alla gjort det, eller hur? Så när du använde jQuery och underscore.js i sista p-set, du behöver inte massor av kod i dina script-taggar, upp i ditt huvud. Du kan göra det, men i stället du bara länka in den. Och du länkar den i Precis som du gör med CSS. Så det bara gör det lättare att läsa så koden är inte som 1000 rader lång med massor av funktioner som du kanske inte använder. [01:12:52] Istället, du bara länka den i. Det compartmentalizes det. Det är som att skriva en del header fil och då bland annat att header-fil i C. Tänk på det precis som här. Så vad innebär det gör? Nåväl, det här kommer att köras. Det kommer att varna. Så du kommer att få lite pop up kallas hallå världen. Snabb fråga, bara sanity check, så du ser här i kroppen, säger kroppen, HTML här. Vad kommer först? Gör jag ser kroppen, HTML här, eller ser jag varningen först? [01:13:19] PUBLIK: Alert. [01:13:20] DAVIN: Höger. Han säger alert. Varför? [01:13:22] PUBLIK: Eftersom du gå från topp till botten. [01:13:24] DAVIN: Ja. Perfect. Så han säger, du går från topp till botten, vilket är helt korrekt. Du kommer att gå från topp till botten. Och i JavaScript, jQuery, har du en funktion som är som onload eller redo, och som säger, OK, vänta tills allt detta HTML har laddats. Och sedan, ring JavaScript. Eftersom vi inte har det här, allra första som kommer att hända är att det kommer att gå från topp till botten. Det kommer att slå som JS kalla, det kommer att varna. Efter att du klickar på OK, att registreringen går bort. Då kommer det att visa du kroppen HTML här. Nice. [01:13:54] OK, så det är bara riktigt snabbt, skrivande i JavaScript är super snabb. För att förklara en variabel, var name. Så i C, har du int i, du har att förklara vilken typ av typ det är. PHP, $. JavaScript, var. Vi pratade om det här. Okej, låt oss gå. [01:14:11] Loops, samma sak. Samma sak. Funktionsdeklarationer, så precis som du har sett i C. Det enda annorlunda är så när du kommer till andra programmeringsspråk, som när man tar 51 nästa termin och du gör med OCaml, du kan hantera anonyma funktioner. Så det är precis vad du har här. Så du vill sätta in summan, någon form av summavärde. Men du kanske bara göra det en gång. Så du vill inte kalla det fungerar summa, ge det en funktionsdeklaration. Istället, du bara använder det som en anonym funktion. Och du har sett denna mycket. Du kommer att se ett exempel på detta i ett par bilder. Ja, vi får se. GABE: Bra fråga. När kanske du vill använda en anonym funktion här? I grund och botten, när du vill ha något, som en händelse, att hända. Så när musen är klickade, till exempel, du vill ha lite funktion som ska kallas. Så du passerar till evenemanget handler, passerar du till evenemanget, typ av, den funktion som du vill att kallas. Och vad du passerar är som, i slutet av dagen, bara en pekare till att undervisningen, till funktionen. Så det är inte som du passerar hela koden, precis som en pekare till funktionen. Och sedan, när någon klickar på mus, då den funktionen anropas. [01:15:17] Davin: Arrays, så du har en matris deklaration. Sedan, för att en array sätta saker i. Real snabb, vad kommer detta att skriva ut? Vad kommer det tredje elementet vara? [01:15:31] PUBLIK: "JS". [01:15:32] DAVIN: Rätt, det skulle vara "JS". Vänta, gå tillbaka. Vad är längden? [01:15:37] PUBLIK: Tre. DAVIN: Tre, eller hur? Exakt vad du tycker. OK, nu går. Arrays, kan du lägga till saker till dem. Så du kan gå längre än sina ursprungliga gränser. Bara något att tänka på. PHP, JavaScript, de är lite lite mer förlåtande när det gäller saker sådär. Objekt, mycket likt structs i C, väldigt mycket som associativa arrayer i PHP. Ni har alla haft erfarenhet av detta. Så JSON, när du passerar JSON fram och tillbaka i p-set åtta, det är ditt objekt. [01:16:03] Så ja, exempel riktigt snabbt exempel. Här är ett objekt. Sättet du referera till denna objekt, så det är bara riktigt snabbt, låt oss säga att jag ville hitta ut, OK, vad är kursen? Och så objektnamnet här är CS50. Och sedan om jag hade en associativ array, hur skulle jag göra det? Jag kommer att använda en nyckel, eller hur? Så jag har namnet på arrayen. Jag har fäste, citat, nyckel, end citat, ändfästet, och som kommer att referera till som inslag i min associativ array. Hur gör jag refererade kurs i min objekt? Någon som vet? [01:16:39] PUBLIK: [OHÖRBAR]. [01:16:40] DAVIN: Vad händer? PUBLIK: CS50.course. DAVIN: Höger, ja. Så CS50.course. Så hur du refererar saker inuti en JSON objektet är med en punkt. [01:16:48] PUBLIK: Du kan även använda array syntax. [01:16:53] DAVIN: OK, bra. [01:16:54] GABE: Du kan även använda CS50 fäste, sträng, som citattecken. PUBLIK: Jag tycker det är identiskt med PHP. GABE: Det är samma sak. DAVIN: Fine! Men du kommer att se den här andra platser. Ja, så fortsätt. Detta är vad jag just sagt. Så i en JavaScript jQuery exempel. Så det här är min DOM, eller hur? Real snabbt, så jag har en huvud, hallå världen, kropp. Jag har en knapp. Det står "skjuta mig", så jag vill driva det. Och jag vill göra något när det är klickade. Höger, nästa. [01:17:31] Höger, så det här är min JavaScript. Så jQuery är bara ett enklare sätt att skriva JavaScript. Så detta, och vad jag ska visa dig nästa, kommer att vara jQuery, är identiska. Så de kommer att göra samma saker. Bara jQuery tenderar att vara lite lättare. Människor tenderar att gilla det mer. Den har en hel del funktioner. Så folk tenderar att använda jQuery. Ni alla begagnade jQuery i den sista p-set. Så vad kommer detta att göra? Vad kommer detta JavaScript-- så detta är bara vanlig JavaScript. Vad kommer detta att göra? Vad kommer den att göra? [01:18:03] Så först, ser du fönstret onload. Rätt? Så vi inte se att innan. Så detta kommer att vänta tills hela fönstret laster. Så det kommer att vänta tills den HTML, alla bilder last innan den gör något. Så låt oss säga vår DOM har laddats. Allting finns där. Sen vad som kommer att hända? Yeah? [01:18:19] PUBLIK: Button visas. [01:18:22] DAVIN: Knappen är redan där. Ja, så knappens redan där. Men detta kommer att säga, OK, om jag klickar på knappen, så knappen är redan Det, liksom HTML-tagg. Vänta, gå tillbaka riktigt snabbt. Denna tagg höger höger här är kommer att bli en knapp redan. Det finns redan en knapp. Men sedan, i JavaScript tagg, just här, den säger, OK, jag vill ha att få elementet på ID, så sökknappen bara säger, OK, jag vill ha att kart denna variabel till den knappen. Så att variabeln är bara en enklare sätt att komma åt den knappen. Och jag säger, OK, om jag klickar att knappen, så om jag klickar det elementet, och detta element avser knappen, om jag klickar på den, då jag vill kalla en funktion. Här är en av dem som anonyma funktioner vi talade om. [01:19:03] Bara ringa någon funktion. Inuti den funktionen, i princip något vi har sett en hel del, alert. Du klickar på sökknappen. Det kommer att i grunden ha en knapp. Du klickar på den. Du får denna registrering. X ut. Det var allt. Yeah? [01:19:16] PUBLIK: Så om du sätter skriptet [OHÖRBAR], skripttagg i HTML? [01:19:21] DAVIN: Du kan sätta skriptet tagg rakt i huvudet eftersom du har denna onload. Det är också att du har ett klick. Så det kommer att vänta tills du klickar på något. Men onload är bara för att vara säker, att göra säker allt laster i din HTML förväg. Yeah? Du vill säga något? [01:19:40] GABE: [OHÖRBAR]. DAVIN: Ja. [01:19:42] PUBLIK: Så onload undviker definiera sökknappen variabeln genom att bara säga document.getElementById sökknappen dot [OHÖRBAR]. [01:19:49] DAVIN: Absolut, men sedan din sträng blir bara enormt. Exakt, det är så det är bara att göra det lättare för dig, ja. Ja? [01:19:56] PUBLIK: Vart tog vi skapa window.onload? Eller document.ready? [01:19:58] DAVIN: Ja, det finns. Ja, det är, jag kollade. [01:20:02] GABE: Inte för dem att bry sig om. [01:20:03] DAVIN: OK, så jag kommer att berätta ändå. Så i princip, bara i allmänhet, så window.onload väntar tills din DOM, alla HTML, laster. Det väntar tills dina bilder belastning. Det väntar tills allt laster. document.ready, det bara väntar tills dina DOM laster. När HTML är alla där, en gång din DOM är där, börjar springa. Det är den enda skillnaden. [01:20:23] GABE: Quick sanity kontrollera här. Så detta kan ses slags som en kodrad, eller hur? Eftersom det är window.onload motsvarar en massa grejer. När JavaScript läser detta, sant eller falskt, blir funktionen exekveras. Falskt. OK? Vad händer här, du är bara passerar denna funktion som en anonym funktioner att window.onload. Och sedan när det går att faktiskt få avrättas? När fönster laster. Det är en händelse. Så det är jus t sak vi är talade om tidigare, eller hur? Så när händelsen inträffar, funktionen inträffar. Samma sak med onclick. [01:20:59] DAVIN: OK, så någon tog bort document.ready. Men detta kommer att vara det exakta same-- PUBLIK: Den dollartecken, som är en document.ready. Det är en genväg. [01:21:07] DAVIN: Åh, är det? OK, så det betyder document.ready, genväg. Men detta är samma som window.onload utom för den lilla skillnaden Jag berättade om. Och det här är jQuery. Så detta är exakt samma thing-- detta är JavaScript. Detta är bara-- vissa människor tänker på det som en mera lätt vikt, slätt version som har massor av funktioner att du förmodligen kommer att använda. Så detta gör exakt samma sak. [01:21:34] Så saker att sorts påpeka. Så i den andra exempel vi hade document.getElementById, så vi hade denna långa sträng som kommer att få elementet genom vad ID har. Som har ersatts av denna uppmaning här. Så du ser dollartecken, då ser du citerar, hashtag. Hashtag är alltid en väljare. Den säger, OK, har detta att göra med ett ID. Vad är väljaren för en klass? [01:21:56] PUBLIK: Dot. [01:21:57] DAVIN: Dot, höger. Om du bara går till Välj en tagg, vad är det? Det är bara taggen, exakt. Och du kan använda det här, liksom. [01:22:05] GABE: Och med taggen, menar vi gillar div, till exempel, eller huvudet. [01:22:08] DAVIN: Eller kropp eller p eller något liknande, ja. Så här, OK, istället för att säga document.getElementById, detta är bara exakt samma sak. Bara i jQuery, det kortare. Så det är enklare. Alltså, inte mer onclick, bara klicka. jQuery funktion, kalla denna funktion. Alert är exakt samma. Så det är lite mindre, eller lite kortare, lite bit-- folk tror det är lite lättare att skriva ut, lite lättare att förstå. Men det här är jQuery. Många människor blir lite lite förvirrad och orolig och de tycker, OK, jQuery är annorlunda än JavaScript. Jag måste komma ihåg dessa två olika saker. Det är inte. Jag menar, det är annorlunda syntax. Men jQuery är JavaScript. Det är bara en till synes bättre version som kan vara lättare att förstå att människor använder. GABE: Ja, för att vara ärlig, att dollartecken som du ser i jQuery, det är bara det namn på en funktion som jQuery definierar. Det har inte något speciellt. Är Det är bara namnet på en funktion, precis som du kan definiera dollartecken. [01:23:03] DAVIN: Ja, så talade om detta. Några användbara saker. Jag letade tillbaka på de gamla frågesporter. Under de senaste par frågesporter, de har tvungen att använda saker som detta. Så document.ready, så se till att allt är laddad innan du börjar göra saker. Välj ett ID, eller välj en klass, skulle det bara vara quote dot viss klass, slut citat. Skicka, så om du är skickar ett formulär och samtal denna funktion efter formen lämnar. Värde, så låt oss säga att jag hade en form underkastelse, liksom ett användarnamn, en e-post, vad som helst. Jag hade en textruta. Så jag skriver in i den textruta. Tja, om du vill få värdet ur denna textruta, använder du dot val. Och sedan, här nere, dot HTML är samma är som dokument dot getElementById dot innerhtml. Så det kommer att återvända du HTML från detta ID. Här, du bara använda en del ID eller vad dot HTML. Det kommer att få HTML från det elementet. Om du ville då ändra på det HTML, kan du skicka den till något. Så du skulle vara som pricken HTML, och sedan insidan, offerter, nya HTML eller något. [01:24:05] GABE: OK, så AJAX. Jag gillar verkligen att förstå AJAX riktigt bra. Så jag vill att ni killar till förstår AJAX riktigt bra. För om du gör det, du är ganska mycket att gå att förstå allt som har att göra med HTTP, PHP, JavaScript eftersom det hela kommer tillsammans i AJAX. AJAX är inte ett språk. AJAX är en teknik. Och den använder många olika verktyg. AJAX står för asynkron JavaScript XML. Så metoden, språket, data. [01:24:36] Så huvudspråket som vi använder i AJAX att utlösa allt och att hantera allt senare är JavaScript. Det är därför det avser mycket nära till JavaScript. Och sedan asynkron är eftersom vi inte gör det alla på en gång när vi laddar sidan. Detta är det som vi kan göra saker slags parallellt. Huvudtanken bakom AJAX är att du vill den för att få lite specifik information. Till exempel när du skriver nya användarnamn när du registrerar ett användarnamn, mitt användarnamn är abc123. Och sedan, vid slutet av den formulär, måste du klicka på Skicka. Och det måste gå till servern, och sedan kontrollera om i databasen, abc123 är redan där. Och om det är redan där, säger det, användarnamn redan finns i databasen. Och de måste du fylla ut hela formen igen. Och det var riktigt, riktigt illa. [01:25:23] Och då säger folk, OK, varför kan inte vi bara gör en liten HTTP-begäran att bara kolla för att se om den här användaren är i databasen innan användaren var tvungen att skicka hela formen? Så till exempel när användaren slutar att skriva abc123, Låt oss bara gå till servern lite bit och bara få ett sant eller falskt från servern för att se om det är ett giltigt användarnamn eller ej. OK, så det är en av de viktigaste användningar av AJAX nuförtiden ändå. [01:25:49] DAVIN: Så riktigt snabbt, i en Ajax samtal i jQuery, du kunde betyda att du vill att det ska vara synkrona. Du bör inte göra detta. Men du kan göra det. Och om du gjorde det, vad skulle hända? Tja, till exempel när du är få nyheter eller vad, din webbläsare är bara att vänta tills det hela samtalet är klar istället för att låta dig göra annat saker rätt efter du klickar på den. [01:26:14] GABE: Det är inte passerar längre. Herregud. Tyvärr! Japp. "I det förflutna, den klienten behövde förfrågan hela innehållet på en webbplats. " Det är vad jag sa. Det ger oss möjlighet att skicka ytterligare GET eller POST begäranden utan att ha för att ladda våra webbläsare. Så i slutet av dagen, vi är faktiskt göra en HTTP-förfrågningar Här använder JavaScript. Eftersom innan, bara använde vi JavaScript att ändra HTML som redan kommit. Och nu kan vi använda den för att kommunicera med webbservrar samt. Det sätt detta sker är att vi har klienten. Davin är en klient. Och han har alla JavaScript kör eftersom HTML är dum. JavaScript är smart. Så Davin Davin har sin smarta del och hans dumma delen. Han kommer att använda sin smarta delen nu. Han kommer att använda JavaScript till begäran, till exempel, huruvida ABC123 är i databasen eller inte. [01:27:04] Så Davin, snälla, du bara skicka mig en HTTP-förfrågan. Tack. Så han skickade bara en HTTP-förfrågan. Du ser det? Och det är precis på samma sätt att varje HTTP-begäran skickas. Webbläsaren, Google Chrome eller något, är kommer att se att Davin s försöker skicka en HTTP-begäran, kommer att hjälpa HM lite. Och det kommer att gå hela vägen till servern. Nu är servern kommer att ha PHP här eller något annat språk. Precis som i en vanlig HTTP-begäran. Det är ganska mycket en vanlig HTTP-begäran. [01:27:31] Och sedan, servern kommer att säga, OK, Davin vill att jag ska kontrollera om denna ABC123 är i databasen. Gå och prata med modellen. Modellen säger att det är det inte. abc123 är ett bra användarnamn. Och sedan, är webbservern går till använda PHP för att göra någon form av fil. Det kan vara bokstavligen bara en fil som innehåller "ja" i den, eller "nej, eller något liknande. Det kan vara någon fil. [01:27:54] Det kan vara som jag ska skicka Davin en bild av en anka om det är i databasen och skicka en bild av en hamster om det inte i databasen. Det skulle vara typ av dum, men det kommer att fungera. OK, så jag skickar en anka till Davin. Davin fick en anka. Och nu, är vem som går att hantera ankan? Davin smarta delen igen, så JavaScript, eller hur? JavaScript skickade begäran, och JavaScript kommer att ta emot begäran och tolka det i någon form. [01:28:22] Och i denna mening, det kommer att säger, OK, om Anka då jag är bra. Om hamster, då kommer jag att säga, nej, användarnamn redan existerar i databasen. Men oftast, du är inte kommer att skicka en anka. Du kommer att skicka något lite smartare. Och vad vi använder är XML. Och på senare tid, använder vi JSON. JSON är bara JavaScript Object Notation, som är i princip får du en Hela JavaScript-objekt. Och du sätter den i en fil, precis som att CS50 objekt som ni såg. Du lägger den i en fil, och du skickar den till Davin. [01:28:53] Så i det här fallet, skulle jag gör ett JavaScript-objekt och bara säga, användaren finns, ja. Eller användaren finns, nej. Och skicka tillbaka den till honom. Och varför JSON? Eftersom personen vem som tar emot detta är kommer att använda JavaScript att hantera svaret. Och Javascript fungerar så bra eftersom det kallas JavaScript Object Notation. Rätt? Så han kan bara ringa en funktion och få denna fina objekt från svaret. Och sedan, han kommer att veta om att användaren finns i databasen eller inte. [01:29:22] Så ni ser, allt det som kommer tillsammans i webbservern och sedan finns det en HTTP till förfrågan och en HTTP-svar och allt. Så se till att ni förstå detta AJAX samtal eftersom det hjälper dig att förstå alla av de begrepp som vi pratar om. [01:29:37] Så här är ett exempel av AJAX med jQuery. Och här, gör vi med get JSON. Så vi försöker inte få en bild av en katt här, eller en anka. Vi försöker få en JSON fil. Och sedan väntar vi tills det är gjort, dot gjort. Det betyder att jag väntar på svar. Det kan ta en liten stund. Då ser du en liten belastning. Om du vill göra det i din webbplats. Så dot gjort, och sedan vad händer när det är gjort? Du passerar i en anonym funktion, precis som vi såg tidigare. Eftersom gjort är en händelse, precis som att klicka med musen eller vad, för jQuery. Så du passerar i denna funktion med data, text, status och jqXHR. Och i grunden, det är bara några variabler som du kan använda senare för att ha status för HTTP-begäran, de data som det kommer att skicka tillbaka till dig. Så då kan du senare tolka det och göra något menings med det. Och om det misslyckas, då kan det misslyckas? Jo, när HTTP-begäran ger du en 500 eller något liknande. Då det kommer att berätta status, vilken typ av fel som var, och alla möjliga saker. Du måste se till att hantera båda fallen annars programmet går galet. [01:30:42] DAVIN: Så ja, detta är precis vad du såg på din sista p-set. Själva AJAX samtal i get JSON. Det är samtalet. Och sedan, är dot gjort som kontrollerar om det är lyckat. Om det lyckas, du vill ha att göra någonting med data. Du får tillbaka från den JSON begäransdata. Det är vad du får tillbaka. Så om du kommer ihåg från din p-set, en hel del av er var som uppgifter fäste i eller vad, dot länk eller titel. Oavsett kommer tillbaka från att JSON, oavsett fälten är i det JSON objekt, det är vad du får tillbaka. Data är vad du får tillbaka. Text status, bara något som låter dig veta vad som hände. Och sedan, den jqXHR, det är bara jQuery XML HTTP-begäran. Det är precis som ett objekt. Och sedan misslyckas, precis som Gabe sa. GABE: I vår lilla exempel på abc123 bara för att kontrollera om det är i databasen eller inte, skulle uppgifterna vara något du skulle göra, om uppgifterna dot användarnamn existerar, vilket är vad din PHP genereras för dig, om uppgifterna dot användarnamn existerar, då Jag kommer att varna, användar namn finns redan. Else, jag ska bara låta användaren fortsätta att fylla i formuläret. OK, säkerhet, cool. [01:31:50] DAVIN: Ska jag? [01:31:52] GABE: Jag gillar det här. Så något som ser bekant ut. Vi är nästan klara. Så detta är bara exempel ni såg i klassen. Du använde argv1 här. Det är som en kommandorad argument. Och vi mem kopiering som i en buffert av storlek 12. Vad är problemet här? Buffer overflow! Eftersom vi har en buffert av storlek 12. argv1 kan ha en storlek på två miljarder. Vi gör inte någon gräns kontroll. Så vi kanske kopiera en hel del minne. Och vi kommer att vara särskilt dåligt om detta. Vad kan vi göra det är mycket, mycket betyder i det här fallet? Ja? PUBLIK: En del av de två miljard saker innehåller exekverbar kod som returnerar [OHÖRBAR]. GABE: Exakt. Så det är den typ av sak som människor använder att jailbreaka en iPhone, till exempel. Så att sånt. Eftersom du kan bara göra enheten verkställa varje kod som du gillar. Den fix, så fix är enkelt. Bara kontrollera gränserna. Du kontrollerar null eftersom Vi kontrollerar alltid för null när vi har att göra med strängar. Och sedan, du tar stränglängd innan. Och om strängen Längden är en giltig sträng längd, vilket är inom 0 och 12, då är vi bra. [01:33:03] DAVIN: Om du inte kryssar för null, riktigt snabbt, vad kommer att hända? Det kommer seg fel. Varför kommer det seg fel? Eftersom du ringer strlen på null. GABE: Ja. Sant eller falskt, med hjälp av någon lösenord är en bra idé. [01:33:19] PUBLIK: Falskt. [01:33:20] GABE: Falskt. Använd många lösenord och stora, långa sådana. Hänglås ikoner garantera säkerheten. [01:33:26] PUBLIK: Falskt. [01:33:27] GABE: Falskt. Det betyder ingenting. Det är bara en ikon. SSL skyddar mot en Mannen i mitten attacken. PUBLIK: Falskt. GABE: Falskt. OK, så alla som är falska. Nice. [OHÖRBAR] Vill du prata om det här? Din tur. Davin: Typer av attacker, Mannen i mitten. Vad är en man i mitten attack? PUBLIK: [OHÖRBAR]. DAVIN: Om du skickar en HTTP begäran, de kunde göra detta, eller hur? Men om du skickar HTTPS, de förmodligen inte kommer att kunna göra detta. Det finns massor av poäng längs din anslutning. Du har routrar. Du har DNS-servrar. Om någon har möjlighet att fysiskt se vad du skickar, så någon kan faktiskt få mellan dig, klienten och servern, och är kunna se vad du skickar, Detta är en man i mitten attack. Så för att se vad du försöker få från servern, eller är i stånd att see-- värre, du kanske kan se kakor eller nåt sånt. [01:34:16] Så till exempel om du inte använder SSL, han skulle kunna se dina session ID cookies. Och detta kallas sessionskapning eftersom han ser dina ID-cookies, och sedan han kan gå till den webbplats och låtsas vara du. Eftersom precis som i PHP, minns När vi loggat in, vad gör vi? Vi sätter sessions-ID lika med ID. Så som identifierar dig. Det är därför du kan se din portfölj och inte alla andras portfölj. [01:34:38] Tja, om jag kan få samma kaka, då kan jag loggar in på den sidan. Och då kan jag bara se dina grejer och börja köpa och sälja saker. Så det är sessionskapning. Men du bör inte kunna att-- så du kan använda mannen i mitten attack även om de använder SSL. Men du bör inte kunna. Om de använder SSL, du kan inte sessions hijack. Varför? Eftersom det är alla krypterade, rätt? om det är krypterat, och jag är fortfarande en man i mitt, jag fortfarande få dina data. Det är bra. Men det är krypterat. Så jag kan inte riktigt använda den. Så det är två. [01:35:09] Real snabb, cross site request förfalskning. Det är bara om det finns ett samband och att länken gör något att du inte tycker att det borde göra. Så till exempel om länken var kommer att köpa aktier eller sälja aktier, och du inte visste det. Du klickade på länken, skickat en begäran, köpte eller säljas något som du menade inte att göra. Det är det. [01:35:25] Cross site scripting, så här, du passerar in via variabeln q, stället för att passera i någon form av värde, är kanske q som ett namn. Så istället för att passera q jämlikar Davin eller något liknande, Om du inte använder HTML speciella tecken, om du inte undgå detta för att se till att det är OK, då jag kunde passera in i stället, låt oss säga här jag säger print eller något liknande, då jag kunde passera in här ett skript samtal. [01:35:51] Alltså, istället för bara få en variabel, Jag skulle sedan köra detta skript samtal. Så insidan som manus ringa, vad gör det? Dokument dot plats, det kommer att ändra placeringen av dokumentet. Så jag kommer att omdirigera till någon annanstans. Det kallas dålig kille i detta exempel, mycket bra. Det gick inte att tänka på ordet. Och sedan, vad som är ännu värre är att jag ska till sedan in kakan, som är en del variabel jag har i denna webbplats. Jag kommer att ställa in den lika till dokumentet dot cookien. Därför kommer jag att stjäla din cookie. Och jag kommer att omdirigera viss information till en webbplats att du inte ska komma åt. Och allt detta händer eftersom du är inte fly vad du har sett. Yeah? [01:36:29] PUBLIK: Så bara för att klargöra, det är vulnerable.com att är sårbar för detta. Så att länken kan visas på en viss sida. Någon klickar på den, går till vulnerable.com. Du har en cookie till vulnerable.com. Låt oss säga att Facebook är sårbar, så facebook.com. Du har din Facebook-cookie. Vad detta gör, du är gå till facebook.com, det omedelbart omdirigera du badguy.com, men inklusive din cookie-information. Så det är en snabb omdirigering, men din Facebook cookien medföljer den redirect, och det är hur de [OHÖRBAR]. GABE: Ja, det finns några mycket elaka saker att människor kan göra om det finns här. Till exempel, om Facebook tillåten alla att ändra ditt användarnamn, och de inte gjorde något rimlighetskontroller, så att du kunde sätta in en JavaScript sak som ändrar din bild till en hamster. Och det sätter samma JavaScript in alla som ser på din sida. Så alla som ser på din sida har samma sak i användarnamnet. Och eftersom det är ett virus, det sprider exponentiellt. DAVIN: Vi ska hoppa över den sista en, och sedan vi är klara. Så det här är bara ytterligare ett exempel. Så det här är att de inte är flyr deras SQL-tabell. Så du kan släppa det. Så du vill fly saker. Det var det tidigare exemplet med överskridande skript. Tyvärr vi körde lite sent. I morgon, sorry! I morgon har vi kontorstid. Så kontorstid i Cabbot 8:00 till 11:00. De kontorstid är strikt för testfrågor.