DAVID MALAN: Okej, vi är tillbaka. Så för den spännande Sammanfattningsvis vår sista avsnittet på webbprogrammering, vilket jag Trodde vi skulle använda som en generell term att fånga några kvarvarande ämnen. Så i slutet av dag, kommer vi faktiskt göra lite praktisk webbprogrammering med ett språk som kallas JavaScript. Och jag tror att vi tar en titt på något relaterat till bilder och upptäcka något hemlighet gömd i en bild, och även ta en titt på Google Maps API, Application Programming gränssnitt, som något representativ för den typ av programvara det är allt och fritt tillgänglig idag. Men varför inte ta en titt vid en ingrediens till denna värld att vi har sådan varit tar för givet existerar under en tid, en databas. För den senaste dagen och en halv vi har antagit att vi har tillgång till en databas, men vilket problem gör en databas lösa? Vad gör den för oss? Vad är det? PUBLIK: [OHÖRBART] DAVID MALAN: Håller all information, OK, och vilka typer av information kanske du sätter i det? PUBLIK: [OHÖRBART] DAVID MALAN: All information du sätter in det, får du tillbaka. Det är sant. Och på en typisk web-baserad webbplats eller webb tillämpning, vilka typer av information, specifikt, kan du sätta in? PUBLIK: [OHÖRBART] DAVID MALAN: Användare. Så vad är en användare? PUBLIK: [OHÖRBART] DAVID MALAN: OK, registrerat användare av webbplatsen. Och vad betyder det att lagra användarnas information? Vad komponerar en användare? En användare har vad? PUBLIK: [OHÖRBART] DAVID MALAN: Ja, personlig uppgifter, och jag gillar det. Låt oss vara mer exakt. Så att en användare har typiskt ett namn, vad kan en användare ha? PUBLIK: [OHÖRBART] DAVID MALAN: En addr-- OK, så förnamn, efternamn. Det är bra. Faktiskt, låt oss fixa att eftersom det kommer att öppna upp en möjlighet för diskussion, stillbild, ytterligare. Förnamn, efternamn, kön. Ett ID av något slag. Vad annars? Jag hörde något annat innan också. E-post, postadress. Så låt oss stanna där och nu överväga inte vad vi lagrar i databasen, men-- och inte varför, eftersom det är kanske uppenbart att när du registrerar en användare, du vill komma ihåg dem under en längre tid. Du behöver inte vill att det ska bara lagras i RAM-minnet och bli forgotten-- så Låt oss fokusera på hur. Det visar sig att i världen av databaser, det finns åtminstone två typer i dessa dagar. Något som kallas en SQL-databas, Structured Query Language, eller, cutely namnges, NoSQL, vilket inte är SQL. Och den senare är en exempel på vad som kan att kallas ett objektorienterat, eller ett objekt butik, en databas som lagrar objekt, och inte, ursäkt mig, som vi snart kommer att se, rader. Så vi ska fokusera på bara ett ögonblick på den första av dessa, nämligen en SQL databas, om bara för att det är så bekant redan till någon som har använt Excel eller Google Kalkylark eller Apple Siffror eller någon standard kalkylprogram, eller ekvivalent, eller mer sofistikerat, något som Microsoft Access eller Oracle eller MySQL eller PostgreSQL, som alla är produktnamn för implementeringar av följande idé. En relationsdatabas är helt enkelt något som har rader och kolumner. Och rader och kolumner, Jag menar bokstavligen något så här, så där vi kan ha namnet på ett fält och dess typ hit. Och faktiskt, låt mig börja nu att kartlägga dessa. Så egentligen, jag vet inte varför jag ritade en separat diagram. Låt oss hålla det enkelt. Vi har rätt här början av vårt bord, där Detta är namnet på fältet och detta är datatypen, och typ menar jag följande. Är den ett antal, är det en sträng, en kort sträng som ett ord, är det ett stycke, är det binärdata, som en bild? Och låt oss bara retas detta isär för ett ögonblick. Så första namn, nummer, sträng, stor del av text-- PUBLIK: [OHÖRBART] DAVID MALAN: Ja, så sträng. Och i en databas sammanhang, vi ska vanligtvis kallar detta char fältet. Jag ska bara säga röding för nu, men vi är kommer att förfina detta i ett ögonblick. Teckenfältet. Efternamn är troligen samma. Kön? Man eller kvinna, så det skulle kunna vara en röding fält. Det kan vara antingen citat, unquote "Manliga" eller citat, unquote "kvinnliga" eller det kan vara m eller f. Om du vill vara mer inkluderande, du kanske behöver ett tredje värde eller någon form av annat område helt och hållet. Och så att du kan använda sant falskt. Fältet skulle kunna kallas manlig, och då kan man säga sant eller falskt. Men det betyder inte nödvändigtvis fångar all information som du kanske vill. Så det visar sig att det finns en annan typ av fält som kan vara användbart här i en typisk databas som kallas en enum, där det är ett tecken fält, men du, formgivaren, komma till räkna upp de möjliga värden, som citerar, unquote "manliga", citationstecken, unquote "kvinnliga" och så vidare. Så att oavsett värde är i databasen, är verkligen teckenbaserad, men det måste vara en av dessa värden. Vi förmodligen inte skulle ha en enum för förnamn eller efternamn. Annars skulle vi ha att räkna upp, som namnet härstammar från, bokstavligen varje möjligt förnamn och efternamn. OK, så ID vad ska en ID vara? Ja, så kanske ett nummer. Så låt oss hålla fast vid att nu, nummer. Och i antal, är nummer lite för bred nu. För slutet av den andra dag, jag tycker vi bör vara lite mer exakt. Nummer kan betyda som det kan vara något som 1.236. Och det är förmodligen inte vad vi menar med ett ID. Vad menar vi troligen genom ett ID? PUBLIK: [OHÖRBART] DAVID MALAN: Åh, OK, så kanske är det inte ens ett tal. Kanske är det faktiskt en unik identifierare det är en sträng, som ett användarnamn. Så absolut, skulle kunna vara. Jag tror att någon förmodligen menade numerisk, men. Så låt oss stanna med det. Vilken typ av nummer? Vad är en mer precise-- ett heltal. Så ett antal som 0, 1, 2, 3, så vi kallar detta ett heltal. Och även då, jag kunde vara nitpicking, är det inte egentligen bara en allmän heltal du vill. Du har förmodligen inte vill negativa värden, bara för att det känns bara konstigt. Du vill förmodligen positiva heltal. Så du kan också uttrycka att i en databas, men nu ska vi säga heltal. E-post? Detta är förmodligen bara-- en vad? PUBLIK: [OHÖRBART] DAVID MALAN: Det är ett e-postmeddelande, men det är tecken, eller hur? Det har bara en funky karaktär som en "på" symbol eller något annat, men det är fortfarande ett tecken fält. Och postadress? Teckenfältet. Så det är en fin början, men Låt oss vara lite mer exakt nu. Så visar det sig att det i en databas, du ofta har ett val över mer raffinerad versioner av dessa saker. I själva verket, i en typisk SQL-databas, SQL, eller mer generellt, relationsdatabas, databaser med rader och kolumner, du ofta få att specificera inte endast den typ av field-- Låt mig göra några rum här-- men även längden. Så hur länge är ett förnamn? Jag tror, ​​D-A-V-I-D. OK, fick det jag förmodligen bara kränkt som halv av människorna i rummet, höger, eftersom era namn är längre än fem bokstäver, så fem verkar lite självisk och naiv, så vad är ett bättre värde? 10, okej, och jag tror Vi är OK i rummet. 13? 30? Varför jag inte ta tillvägagångssätt tidigare när vi talade om matriser och minne? Varför inte jag bara säga som 1000? Ingen namn går att vara längre än 1000. Trycka tillbaka. PUBLIK: [OHÖRBART] DAVID MALAN: Ja, det är slösaktig, höger, i synnerhet om de flesta namnen är bara fem eller tio eller 15 tecken, det är mycket slösaktigt. Så du vet vad? Detta är lite av en svår fråga. Nu kan vi verkligen analysera engelska och något annat språk namnger och räkna ut, ja, vad är det average-- genomsnitt inte riktigt hjälpa oss-- vad är max är antagligen vad vi verkligen vill. Men det visar sig att vi har även vissa val över typen här. I en typisk SQL-databas, du har något som kallas en röding fält och även en varchar, V-A-R, för variabel röding fält. Och skillnaden är. En röding fält, du konstruktör, måste ange i förväg den exakta längden av fältet. Så kanske förnamnet som 20 känns lite säker. Kanske måste göra vissa googling till se om det är faktiskt säker nog. Det är förmodligen ett namn med 21 tecken, men för nu, antar 20 är säkert. En röding område skulle innebära i en databas som du är att använda 20 och alltid 20 tecken. Nu om det bara är D-A-V-I-D, 15 av dem bara kommer att vara tomma tecken, men du fortfarande använder alla 20 byte. En varchar fält, däremot, innebär den sträng bör vara upp till 20 tecken men om det är bara fem, du bara ska använda fem, eller kanske sex för en speciellt värde i slutet, sånt 0 diskuterade vi att betyder slutet på en karaktär sekvens i minnet. Så när tror du du kan välja röding kontra varchar, med tanke på att trade-off? Char använder att många tecken, varchar använder högst så många tecken. PUBLIK: [OHÖRBART] DAVID MALAN: OK, när du vet längden på strängen ganska övertygande att bara använda röding, för om du vet det, bara lägga ner den. Och kanske det är sant för en zip kod, i USA, åtminstone 02138, det alltid kommer att vara fem tecken tills du lägga till streck fyra. Men du kanske har några värden för som du alltid vet längden. Eller kanske statliga symboler, som NY för New York, och MA för Massachusetts i USA. Kanske du har vissa situationer där det är helt rimligt, men vid den logik, varför är Vi overthinking även detta? Varför inte vi bara använda varchar och sedan ska vi bara alltid använda två tecken ändå, eller alltid använda fem tecken ändå? Varför inte bara spara varchar för allt genom denna logik? Det måste finnas en hake. PUBLIK: [OHÖRBART] DAVID MALAN: Kan skriva något fel. Så det är sant. Men även då kan de inte använda mer minne än jag fördela. Jag har fortfarande den slutliga säga över längden, så att de inte kan oavsiktligt göra det misstaget, men en bra tanke. Det är mer subtil, men det är mycket relaterat till vår diskussion, faktiskt, av matriser och listor länkade tidigare. Det visar sig att en databas, om den vet att alla värden är av en fast längd, även om några av dessa värden är tomma, slags estetiskt ämne, D-A-V-I-D och sedan 15 råämnen, Det visar sig att om varje fältet har samma längd, mycket som en rad hade alla sina grejer rygg mot rygg mot rygg mot rygg så att du kan bara plus en för att komma till nästa värde, samma idé i en databastabell. Om alla din karaktär strängar är av samma längd, du har vad som kallas random access. Om alla strängarna är av längd 20, gör du inte bara göra plus ett du bara göra plus 20 plus 20 plus 20 plus 20, och du kan mycket snabbt bläddra igenom eller söka igenom alla dina data. En variabel röding fält, däremot, inte alltid har 20 tecken. Det kan ha 20 och sedan 15 och sedan 19 och sedan 10, och så om du vill söka genom det, kan du inte bara blint lägga till 20 bytes för att komma till nästa. Du har bokstavligen att söka igenom eftersom kanten av datastrukturen, om ni så vill, är trasig. Det går typ av in och ut baserat på den faktiska längden av strängen. Så när du vet längden, som Kareem säger, använd en röding fält, eftersom du får att effektiviteten av att vara kunna söka igenom det snabbare när du letar efter information, annat sätt använda en variabel. Tyvärr har jag inget bra svar hur länge namnet borde vara, men för något liknande ett namn, skulle jag säga en varchar är vanligt eftersom det inte går för att vara en fast längd för alla. 20, jag vet inte, 20 känns lite tight. Låt oss bara säga 50, 50. Det spelar egentligen ingen kosta att mycket mer att säga 50 i stället för 40, men någon gång måste du att göra en bedömning. Mycket vanliga, ärligt talat, för [? historisk ?] orsaker, även om det är överdriven, det vill säga 255, eftersom en tid sedan, i populära databassystem, som MySQL, en fri öppen källkod verktyg att en hel del företag som även Facebook används Detta var den högsta standard så att folk bara gick med det. Så inte orimligt, men vi ska använda lite mer intuition och säga, säker 50, det är förmodligen lite överdrivet. Kön, jag gillar enum, och så vi kan därför räkna manlig eller kvinnlig, eller kanske mer effektivt, m eller f eller någon annan symbolik, men enum känns som ett bra val där. För att vara tydlig, kön kan bara vara en Varchar och vi kunde bara alla överens om trevliga människor, att alltid sätta samma värden där. Man eller kvinna eller allt. Men problemet är alltså att vi kunde gör ett misstag, som [OHÖRBART] föreslagna tidigare i ett annat sammanhang. Om vi ​​gör ett misstag, skulle vi kunna få felaktiga värden i vår databas. Vad är trevligt om databaser som Oracle och MySQL och andra, är att du har denna sista skikt av försvaret där din DBA, databasadministratör, vem är att utforma den här tabellen som vi är verbalt, skulle kunna sätta på plats en enum som skyddar mot det genom att ange män, kvinnor, och så ingen annars ingen programmerare kan av misstag in något annat värde. Så det skulle vara en bra sak. Detta är en funktion. Så ett ID, under antagande av ett numeriskt ID, det förmodligen bör vara ett positivt heltal. Och vi gör ibland har tillfälle att diskutera längd. Du skulle inte normalt ange ett antal här, skulle du istället ange detta är en int, eller en stor int, eftersom de är vanligtvis kallas. Men typiskt, ett heltal skulle vara, låt oss säga, 4 byte. Och om det är 4 byte, det är hur många bitar? PUBLIK: [OHÖRBART] DAVID MALAN: 32 bitar. Så hur många användare kan vi ha i vår databas om de alla har ett ID och detta ID måste vara unikt? 32 bitar betyder att vi har mönster av en, två, tre, fyra, five-- så hur många olika mönster av nollor och de kan ha om det finns 32? Det är samma sak som frågar vad är två till 32? Det är en stor siffra som Jag kan inte riktigt få rätt, men jag vet att det är ungefär 4 miljarder. Så detta innebär att din databastabell kan har fyra miljarder användare och det är det. Så detta är en intressant utformning innebörd. Ett anständigt antal företag har beslutat, kanske inte så mycket för deras användare tabellen, eftersom att ha 4 miljarder användare är en sällsynt problem. Detta är en slags Facebook-stil problem, inte ett typiskt företag problem. Men kanske om du har transaktionsloggar eller någon typ av data som ständigt får skrivas in din databas som absolut skulle kunna ha miljarder och miljarder rader, och du använder ett heltal för det, vad som kommer att ske så snart som du får radnummer 4 miljarder och sedan försöker att sätta in 4000000000. Och en, så att säga? Jag förenkla siffrorna en bit. Du kan klippa tillbaka, menar jag att du måste hantera det på något sätt. Och vad en dator skulle normalt gör, tänker på det även från i morse, Om du har en 4-bitarsvärde som 1, 1, 1, 1, som bara för att binda på morgonen tillsammans till eftermiddag, vad innebär detta nummer representerar i binär? OK, vi kommer att göra det lättare. Vad gör detta nummer representerar i binär? OK, vi kommer att göra det enklare, vad innebär detta representerar i binär? PUBLIK: Tre. DAVID MALAN: Tre, eftersom vi har de column-- [SKRATT] Puh! Vi hade de kolumnen och twos kolonnen. Så antar att, ja, vår [? infield?] inte var 32 bitar, men det var två bitar, vi kan räkna från användarnummer 0, 1, 2, 3, och då är vi typ av tillbaka till användaren 00 igen. Så detta är vad normalt händer. Om du någonsin har hört expression-- antagligen inte, men om du have-- heltalsspill, där du hålla vända alla dina bitar att vara den största möjliga värden, och då du är ute bitar, vad skulle normalt hända? Varför säger jag 00? Nåväl, detta är tre. Hur gör jag representerar fyra? Hur gör jag representerar för nummer fyra i binär? PUBLIK: [OHÖRBART] DAVID MALAN: en-- ja, inte säga 100 per se, eftersom det har fel klang, men 1-0-0. Så att antalet 1-0-0 är verkligen korrekt, men om du bara har två bitar, vad har du egentligen gjort? Du har överförts till 00. Och faktiskt, det är vad som skulle hända. Egentligen kan du tror om detta mer familjärt. Om ni minns, vad, 16 år sedan, världen var tänkt att upphöra när Y2K problemet hände. Varför var det? Väl de flesta datorer, för rimliga beslut, var att lagra siffror som den år 1975 eller år 1999 genom att bara använda två siffror i datorns minne. Så naturligtvis, vad händer När du kommer till år 2000, du går till detta, eller snarare, ja. Så du går till år 2000, men om du bara använder två siffror det ser som år 00 och så att du har rullat över. Och det är därför en hel del system behövs för att uppdateras vid den tidpunkten. Så med det sagt, företag som Facebook köra upp mot detta. Så det enda sättet att hantera situation, uppriktigt sagt, är att förutse det. Eller renaste sättet att hantera denna situation är att förutse det så att du inte måste göra ändringar senare. Så istället för 8 bytes, vet du vad? Jag kommer att vara framåtblickande här, även om det är lite optimistisk att vi kommer att ha 4 miljarder och 1 användare på vår hemsida. Men låt oss bara använda 8 byte, eller 64 bitar, som i allmänhet skulle vara kallas en stor heltal, mycket teknisk. Och det betyder bara att du kan ha ännu fler siffror i numret. Men detta är en viktig utformning beslut, eftersom om du väljer ett nummer som har för få bitar av uttrycksfullhet du faktiskt kan skapa ett fel i programvaran. Okej, så låt oss slå in med e-post och postadress. Så e-post, hur länge ska en e-postadress vara? 50. Jag har verkligen ingen aning om, men det är förmodligen något liknande, annars ingen kommer att skriver du om det blir för lång, så 50, Låt oss gå med det för nu. Postadress, hur länge ska det vara? PUBLIK: [OHÖRBART] DAVID MALAN: Det är inte bara ett postnummer, dock. Postadress, hörde jag. Så det här är som en Brattle Square, kommatecken, Cambridge Mass., kommatecken, 02138. Och i själva verket, låt mig bara dra upp en liten kalkylblad här. Det känns som det är en missad möjlighet. Om vi ​​har en Brattle Square, kommatecken, Cambridge, MA 02138, Jag tycker vi kan göra bättre än bara postadress. Varför vi inte exploderar detta lite? Vad får jag på? Vad ska vi istället ha för våra rader här, kanske? PUBLIK: [OHÖRBART] DAVID MALAN: Ja, så låt oss kalla det street_number, och ett understreck är bara en vanlig sätt att få vad som ser ut som ett utrymme, men det är inte, faktiskt. Gata, och sedan city-- ledsen? PUBLIK: [OHÖRBART] DAVID MALAN: Vi kunde göra det. Linje ett, rad två. Varför inte vi kommer att hålla det enkelt för nu, men det är absolut en acceptabel beslut. Och sedan staten, och sedan ska vi vara lite USA-centrerad nu och bara göra postnummer, bara för att det ska leda till en intressant misstag eller problem här. Så antar att det är nu vår adress. Det är lite mer irriterande att Vi har alla dessa flera fält, men nu kan vi märka saker lite bättre. Så nu gatunummer förmodligen bör inte vara en röding, bör det? Vad ska det vara? PUBLIK: [OHÖRBART] DAVID MALAN: Kanske ett antal som ett heltal igen? Ett stort heltal? Du har förmodligen inte bor på 4 miljarder Main Street eller något galet sånt. Så heltal är förmodligen bra, men har någon någonsin bodde på en adress som 1A Brattle Square, eller en och halv? Dessa saker finns, tyvärr, även om du inte har bott där, finns dessa anomalier som lägenhet 1A, 1B, 1C. Så vet du vad, vi förmodligen bör inte gå med heltal, annars ska vi att förlora en del försäljning. Röding fält, kanske? Jag vet inte hur länge. Det är förmodligen inte kommer att vara så länge, så 10 eller något. Ingen kommer att skriva ett längre nummer, kanske. Men återigen, vi borde nog ägna mer uppmärksamhet åt det. Kanske google, gör en del efterforskningar, men vi kommer att gå med våra tarmar för nu. Gator, röding, 50, jag vet inte. Vid något tillfälle, är ingen kommer att skriva det på ett kuvert, också, så det är nog några övre gränser där. Stad, samma, säker, så char 50. Tillstånd kan vara USA-centrerad nu. Så det kan vara en lista, så snäll av en dom samtal tillstånd. Det kan vara som två tecken. Så egentligen, kanske, jag fortsatte att säga röding. Jag menar nog Varchar bara för några effektivitet, men vi kommer tillbaka till detta beslut i ett ögonblick. Kan vara en röding med längden 2 för staten. Om i USA de har, som MA, Massachusetts, NY, New York, New Jersey, New Jersey, och så vidare. Så det kan fastställas till det. DC för Washington DC. Men jag tror, ​​Olivier, du föreslås en annan metod. PUBLIK: [OHÖRBART] DAVID MALAN: Ja, så det är en lite irriterande att skriva in, men en enum kan göra mer meningsfullt, eftersom detta sätt, åtminstone i USA, du kan räkna, om tråkiga, men du gör det bara en gång i databasen och aldrig mer behöva tänka på det, alla 50 två-teckenkoder. Så jag gillar enum. Låt oss hålla fast vid att det, på grund av det slags upprätt mer stringens. Och sedan postnummer? Jag tror att Andrew hade en tanke på att PUBLIK: [OHÖRBART] DAVID MALAN: Ja, fem eller nio. Låt oss bara hålla det enkelt. Bara göra fem nu. Men kanske jag kunde bara göra ett heltal, eller hur? Jag kunde, men vet du vad, jag gjorde detta misstag en gång, i någon mening. År sedan, var jag migrera från Microsoft Outlook till Gmail, och Outlook har ett sätt att exportera alla dina kontakter som en Excel-fil, en CSV-fil, kommaseparerade värden fil. Och jag gjorde misstaget jag tror på att dubbelklicka den, när jag hämtat export till se till att det såg ut som förväntat. Jag måste ha träffat Spara eller låt auto-save spark i eller något. För när jag sedan importeras den i Gmail, allt fungerade. Men i år, i dag, och Jag gjorde det fem, 10 år sedan, Jag är fortfarande att hitta vänner som har adresser som ser ut så här. Varför? PUBLIK: [OHÖRBART] DAVID MALAN: Det tog 0, väl snarare det tog hela postnummer som ett antal, och därför är det en ledande 0, vilket innebär Det har ingen betydelse. Och så 2138 verkar vara mitt postnummer. Och detta är, uppriktigt sagt, en irriterande Excel funktion där jag tror som standard, även om det är tänkt att bara vara text, Microsoft Excel beslutar, låt mig vara till hjälp, och åh, ser jag bara siffror. Låt oss behandla dessa siffror. Och det klipper de ledande nollor. Jag svär, varje par månader jag söka efter en adress, och ur en sorts OCD, jag går tillbaka i och tillsätt 0, även om jag aldrig skicka folk bokstäver eller något. Men jag är fortfarande hitta rester av detta. Så detta är att säga, är detta en bra idé? OK, nej, eftersom vem som helst i Massachusetts, i detta område, kommer att ha en o leder dem. Så låt oss gå med liknande röding, troligen fem. Och här, inser vi skulle kunna använda en enum och vi kunde räkna upp 10000 möjliga postnummer, men det känns som det är förmodligen korsar en linje av, liksom förmåner. Om du måste ingång som mycket data i databasen för att skydda mot något. Så röding insåg att du kan skriva i H-E-L-L-O som ditt postnummer, vilket inte är, uppenbarligen, numeriskt. Så det finns inget sätt, i en typisk databas, ange bara numeriska och bara fem tecken långa, så vi kommer att ha att göra det i koden. Vi kommer att göra det i PHP eller Java eller vilket språk vi använder på servern för att genomdriva den typen av begränsning. Whoo! Okej, så några frågor ännu? Låt oss göra ett annat beslut design. Det visar sig att du också får välja, när man utformar en SQL-databas, eller typiska relations database-- där igen, relations bara betyder rader och kolumner, det är hur du organisera dina data-- och inser att vad detta innebär är, Jag har varit vilseledande i att jag drawing-- detta är vad som kallas schemat för en databastabell. Detta är som specifikationer för table-- men när det börjar bli dags För att verkligen lagra data, och vi kommer att göra detta bara genom exempel här. Jag kommer att öppna upp Excel, eftersom Excel kommer att ge mig rader och kolumner. Och det är precis vad Oracle och MySQL och andra verktyg kommer att ge mig. Så jag bara kommer att använda för diskussion skull. Låt mig gå vidare och öppna upp en representativ dokumentet här, zooma in en bit. Så till exempel, våra rubriker är nu förnamn, efternamn, kön, ID, e-post, gatunummer, gata, hoppsan. Gata, stad, stat, bara om passar på skärmen. Så vad detta betyder är att när en användaren först registrerar för min hemsida, det kommer att vara något i stil David, Malan, m, låt oss säga en, malan@harvard.edu, gatunummer kommer vara en Brattle Square, Cambridge, MA, 02138, och sedan så vidare. Så när jag säger att en relationsdatabas eller SQL-databas är rader och kolumner, Jag menar det. Det faktiska data lagras i rader och kolumner. Detta är bara en tillfällighet, att vi talade, och jag var bara att dra det ut i rader och kolumner. Detta är bara schemat, det övergripande definition. Så av dessa områden här, eller ekvivalent, där, vilka är de områden som du tror Jag är sannolikt att söka på om jag är en användare eller om jag är databasadministratör? Liksom, vilka områden är jag faktiskt går att söka på? PUBLIK: [OHÖRBART] DAVID MALAN: Namn, ja så Jag gillar det faktum that-- ja, e-post kan vara ganska vanligt. Tyvärr, du sa namn. Så maybe-- och igen, vi är typ av samtal i det abstrakta. Jag vet inte varför du att söka efter ett namn, men det känns rimligt om du söker för en användare. Kanske påstår, säker, ID. Och det är en hal lutning, eftersom jag kunde contrive ett scenario där kanske min chef har bett mig, Hur många män har vi på vår webbplats? Hur många kvinnor har vi på vår webbplats? Och så på den punkten, kanske du vill att söka på fältet kön, också, och ingenting annat. Så det finns en avvägning här. Återigen, det finns ingen rätt svar, men det är en funktion i de flesta SQL-databaser känd som indexering, varigenom dig, designer, den databasadministratör, får bestämma i förväg vilka fält i databasen bör optimera för sökningar på. Du kan mycket naivt säga, optimera detta, optimera det, optimera denna, optimera det och det, och databasen kommer göra några magiska sak under huv, och göra något på ett sådant sätt att nästa gång du söker på någon av dessa områden, det kommer i själva verket att vara snabbare. Det här är möjligt. Det spelar ingen avbryter sig själv. Men det måste finnas en betalkurs. Om du naivt, eller över entusiastiskt säg, indexera alla dessa områden, så att säga, göra dem alla effektivt sökbara, vilket pris du förmodligen betalar? PUBLIK: [OHÖRBART] DAVID MALAN: Performance. Vad menar du? Väl prestanda, åtminstone på sammanhang jag diskuterar, är bättre nu. Det är definitionen av indexering. Det kommer att göra sökningar snabbare. Så tiden minskar, så att säga. PUBLIK: [OHÖRBART] DAVID MALAN: Space. Så återigen, det är en vanlig handel. Jag kan snabba upp dina sökningar, men det är kommer att kosta dig mer byte av utrymme. Varför? Tja, som standard, om vi har ingen av dessa röda stjärnor, ingen av dessa index, som jag säger, hur du söker efter ett namn i denna databas? Så låt oss dra vårt uppmärksamhet till detta exempel. Om vi ​​har David och Scully och Kareem och Arwa och andra i dessa rader, till exempel. Så låt oss göra just detta. Scully är här, och sedan vi har Kareem, och Arwa, och alla andra, om du inte ha ett index definierat, så att säga, det bästa du kan göra är linjär sökning. Om du söker efter Arwa, är vi inte kommer att kunna hoppa rätt till sin snabbt. Vi kommer att börja överst och gå hela vägen till botten, inte olikt vår ursprungliga Mike Smith exempel. Men om jag säger, hej, databas, Index förnamnet fältet, då det kommer att göra något snyggare och stödja något som binär sökning. Det är förmodligen inte binär sökning i sig. Databaser tenderar att använda en annan datastruktur som kallas B-träd, inte att förväxla med binära träd, att bara göra det snabbare att söka något logaritmisk i naturen. Men det pris du betalar för att bygga upp det funktionen att datastruktur i minnet, är flera byte. Så det kan ta några megabyte, några gigabyte, vem vet? Det beror på data. Så någon gång, måste du bestämma, det är förmodligen inte en gemensam fallet. Så vad är den verkliga gemensamma fall, om du verkligen var tvungen att välja, vad skulle din favorit fält vara? E-post. Och jag gillar e-post, eftersom e-post, i teorin, bör vara unikt. Och så ofta, när du vet i förväg att en av dina fält är eller kommer att vara unik, att tenderar att vara en bra fält att söka på, eftersom det sättet, när du söker efter något, du kommer att få tillbaka en eller noll svar och sedan du är klar. Du behöver inte hålla efter ytterligare andra. Och så i det här fallet här, e-post, så länge du inte kan registrera två gånger med samma e-post, är en bra en. ID per definition, i datavetenskap världen, Om du pratar om en ID, som hade bättre vara unik. Det är typ av klang av ID eller ID. Och resten av dessa kan vara, låt oss kalla dem trevligt att haves, men inte verkligen behövs. Och så i en databas, du anger index, men du kan vara ännu mer exakt. Man kan säga, hej, databas, se att varje ID i denna tabell är unik. Inte ens låta en programmerare misstag sätta i en dubblett e eller kopiera ID-nummer. Så mycket som enums skydda oss på samma sätt, du kan ha dessa lägre nivå försvar. Och så databasdesign, i någon mening, är ganska kul, eftersom du gör det defensivt. Du slags anta att du arbetar med fruktansvärda, hemska programmerare och du vill sätta in så många försvar du kan för att skydda dina data, men samtidigt vill att hjälpa dem att prestera bättre genom att välja vilka fält för att optimera för. Men du kan inte nödvändigtvis göra det i ett vakuum som vi slags är här. Du måste veta vad som är de vanligaste fallen är. Om utvecklarna är genomföra en adressbok, du kan mycket väl vill kunna att söka på nästan alla områden, bara genom typ av ansökan. Så kanske du spenderar det extra utrymme. Höger, några frågor? Ja. PUBLIK: [OHÖRBART] DAVID MALAN: Nej PUBLIK: [OHÖRBART] DAVID MALAN: OK. PUBLIK: [OHÖRBART] DAVID MALAN: Åh, så vi talar på ett sätt nu som är helt språk agnostiker. Så vi talar nu om relationsdatabaser mer allmänt, eller SQL-databaser i allmänhet. PUBLIK: [OHÖRBART] DAVID MALAN: En bättre ord att använda är, kan användas av alla språk. Så jag kan skriva JavaScript-kod, C kod, C ++ kod, Java-kod, Ruby-kod, vilka alla prata med en databas och köra frågor. I själva verket är det inte en dålig segue till exempel fråga. Och återigen, vi kommer inte att gå in på Java eller C ++ eller någon av det längre, men i SQL, det språk som jag håller hänvisar, Structured Query Language, detta i sig är ett programmeringsspråk, men det är tänkt att användas för, ingen överraskning, Structured Query frågor. Med det menar jag här. Sättet du välja data från en MySQL-databas är du bokstavligen skriva in ditt program något som väljer stjärnan från användare. Jag utgår från att denna tabell hädanefter kallas användare. Jag skulle kunna kalla det vad vi vill, men denna typ av vettigt. Och så väljer är en mycket gemensam verb, om du kommer i SQL, som bokstavligen gör det. Vad tror du stjärna betyder i detta sammanhang? PUBLIK: [OHÖRBART] DAVID MALAN: Jag är ledsen? PUBLIK: [OHÖRBART] DAVID MALAN: Behövs ej, är det mer inkluderande än att faktiskt. Det är jokertecken. Star nästan alltid betyder något, så det betyder i detta fall, markera allt från databasen. Så när jag säger detta menar jag ge mig tillbaka varje kolumn från mitt bord kallas användare. Så ge mig ett resultat, som det kallas. Med andra ord, ge mig en kopia av kalkylblad, är vad jag får på. Men om jag sa välj stjärna från användare där ID är lika med ett, hur stor bör mitt resultat set vara då? Eller ekvivalent, hur många rader bör Jag lämnas tillbaka från databasen? Förmodligen bara en, om jag har verkligen behandlade ID som en unik identifierare, och om David har den unika ID, jag bör få tillbaka en och endast en rad innehåller alla Davids information. Om jag sa det där ID lika 99, skulle jag komma tillbaka, I detta sammanhang noll rader, åtminstone för tillfället. Men om jag bryr mig egentligen inte om all denna information, Jag kunde bara säga, var kommer David bor? Välj postnummer från användare där ID är ett. Detta kommer att välja mig bara Davids zip kod och inte helheten av den raden. Varför skulle jag göra detta i stället för stjärnan fråga, wild card? PUBLIK: [OHÖRBART] DAVID MALAN: Ja, jag kanske bara behöver det. Så prestanda är återigen svaret här. Varför begära mer information än du behöver, eftersom även om det är okej tillsammans, du fortfarande har att kopiera dessa data, det verkar, från databasen i ditt program på något sätt, och det är bara dumt om du bara behöver fem av dessa siffror, inte hela den raden. Så hur sätter jag en användare? Antag att en användare har bara registrerats för första gången. Syntaxen normalt skulle se ut så här. Sätt in användare, och då skulle vi säga värden, och då skulle vi säga värden som, låt oss säga, Lauren Scully, vår filmare här. Och nästa fält är kön. Så vi säger citat, unquote "F", då har vi ett ID och jag kommer att säga-- låt oss låtsas att hon är faktiskt inte här, så vi kommer att spola tillbaka i historien. Så två kommer att bli hennes ID. Och sedan nästa fält Här är hennes e-post. Så det kommer att se ut Lauren Scully och så vidare, och vi ska bara dot dot dot bort härifrån. Nu kommer det att bli lite tråkiga, men insatsen fråga i slutändan skulle se ut som. Om jag vill bli av med Scully, uh-oh, låt oss avregistrera henne, raderar hon hennes konto, bort från användare där ID är lika med 2, kommer att bli av Scully. Eller jag kan säga uppdatera användare ställa, låt oss säga, vad kan vi förändra? Antag att hon rör sig. Uppsättning zip lika 021-- nix, det är hennes nuvarande dragkedja. 90210. Den enda andra postnummer Jag vet i världen. Så som skulle förändra hennes zip code-- faktiskt, som inte skulle ändra sin postnummer. Vad gjorde jag bara göra? Även om syntaxen är förmodligen nytt. PUBLIK: [OHÖRBART] DAVID MALAN: Ja, jag flyttade alla Beverly Hills, Kalifornien. Så jag borde faktiskt säga där ID är lika med två. Och så vidare. Så SQL handlar om dessa typer av instruktioner. Välj, infoga, ta bort, uppdatera, med dessa predikat i slutet dessa där klausuler, så att säga. Och det finns mycket mer du kan gör, men det är egentligen bara handlar om att helt enkelt, om arcanely, som uttrycker vad du vill att databasen för att göra. Och sedan databasen kommer att räkna ut, när du sätter Lauren Scully i databas, var att sätta henne i minnet så att vi mycket snabbt kan få henne baserat på hennes e-postadress eller baserat på hennes ID-nummer eller liknande. Ja, Dan. PUBLIK: [OHÖRBART] DAVID MALAN: Riktigt bra fråga. Kommer dessa skript ändras från Microsoft tillgång till Oracle till MySQL till PostgreSQL? Det korta svaret är att det beror. I teorin, finns det en mycket betydande gemensam delmängd av SQL som delas mellan alla av dessa implementationer. Men olika tillverkare har extra funktioner till sina databaser för att göra vissa saker utanför ramen för dessa funktioner, som kan faktiskt bryta. Så hur utvecklare skydda sig mot detta, är att i stället för att skriva råa SQL-kod som jag skriver här, de istället använda ett bibliotek, en gemensam bibliotek som själv är en slags högre nivå och abstracts bort som produkt du använder. Och det ger dig funktioner och procedurer att ringa så att du aldrig faktiskt skriva rå SQL. I teorin, då kan du ändra produkter från Oracle till Microsoft eller vice versa eller något annars, och du bokstavligen ändra ingenting om koden. Verkligheten är dock, du ibland ge upp funktioner som följd. Du kanske har valt en produkt eftersom den har dessa mervärdesfunktioner och du är bara nu inte använda dem medvetet. Och anekdotiskt, de flesta företag tenderar aldrig att röra sig bort från sin databas. Så medan detta är ett trevligt att har funktionen verkligheten är, om du översyn din databas, du förmodligen göra klasar av andra förändringar hur som helst, att du inte nödvändigtvis måste förutse det. Så det är utan tvekan över-engineering problemet, men det verkligen beror på sammanhanget. Men i teorin, är SQL delas över dessa olika produkter. Riktigt bra frågor. Ja. PUBLIK: [OHÖRBART] DAVID MALAN: Ja, så du kan tänka en databas är bara en server, vid slutet av dagen, och insidan av den servern är en hel massa tabeller, rader och kolumner. Och när du skickar en fråga som denna från ditt program, din webbplats, skrivet i Java, Ruby, Python, vad som helst, servern tar emot detta kommando och tolka den i bokstavligen på samma sätt vi diskuterat tidigare med tolkade språk, och sedan utföra vissa åtgärder på noll eller flera rader i noll eller flera tabeller. PUBLIK: [OHÖRBART] DAVID MALAN: Exakt, exakt. Så pseudokoden för något liknande som kan vara så här. I din PHP-fil eller din Python-fil eller din Java-fil, du skulle ha pseudokod kod, eller Skrapliknande block som, om användaren besöker acme.com/register~~V för första gången, sedan in i användare och så vidare. Och vi skulle översätta detta till mer konkret kod i slutet. Men egentligen, vi har alla byggstenarna här, även om vi hoppa över några av steg i genomförandet. Så låt mig hitta fel med vad vi underbart gjorde nyss. Du har skapat en ganska komplett tabell för användarna. Visserligen kunde vi genomföra det i ett par olika sätt, men du har faktiskt lett oss ner path-- och jag säger dig, men det är nog min fault-- av en ganska ineffektiv databas genomförande. Det är inte normaliserats. Och normaliserad menar jag det kommer att bli, över tiden, en betydande redundans, och därför ineffektivitet, det är slöseri med utrymme. Baserat på bara vad du ser här, kan du förutspå var detta slöseri med utrymme kommer att komma från tiden, eftersom fler och fler användare registrera för din webbplats? Vilka uppgifter kan bli överflödig? PUBLIK: [OHÖRBART] DAVID MALAN: Varför menar du det? PUBLIK: [OHÖRBART] DAVID MALAN: Ja. Och låt oss anta för de ändamål i dag att det är sant. Det visade sig, och vi har lärt sig detta den hårda vägen, det är inte sant. På något sätt flera städer har, på något sätt, med samma postnummer, som bryter denna underbara intuition. Men låt oss anta att det är sant, eftersom det är nästan alltid sant. Så antar att ett postnummer är alltid förknippade med samma stad och staten, som är snäll av rimligt antagande, men felaktig, visar det sig. Men ett rimligt antagande för dagens ändamål. Då antar att jag bor i Cambridge, MA, enligt denna användarens bord, och antar att Lauren Scully bor i Cambridge, MA, och antag att Kareem bor i Cambridge, MA, och Arwa bor i Cambridge, MA, alla av oss i 02138. Varför vi minnas Cambridge, MA, 02138 för alla fyra av oss? Vad borde räcka för att komma ihåg? PUBLIK: [OHÖRBART] DAVID MALAN: Bara postnummer. Bara att 02138 existerar, eftersom du vet vad vi kan göra? Vi kunde få lite fancy här och hit, definiera en annan tabell där det kommer att vara namn, kommer detta att vara den typ, detta kommer att vara längd, och hädanefter är jag kommer att kalla detta mitt städer tabellen. Detta kallades av Naturligtvis min användare tabell. Och så vad ska jag sätta hit för min städer bord, tror du? PUBLIK: [OHÖRBART] DAVID MALAN: Ja. Så zip och staten och staden. Och så den typ här, ska vi säga detta kommer att bli en röding 5 igen, under förutsättning att debatten om tidigare. Detta kommer att vara en enum, kanske som tidigare kommer och stad vara en varchar 50. Och så nu vad får jag att radera från denna tabell att eliminera den ineffektivitet? PUBLIK: [OHÖRBART] DAVID MALAN: Nice. Staten och staden försvinna, så jag har nu elimineras den potentiella ineffektivitet för redundant minnas, Cambridge, MA, Cambridge, MA, Cambridge, MA, Cambridge, MA, som förhoppningsvis aldrig kommer att förändras. Och även om det gör det, är det minorly irriterande, nu att jag måste ändra det i flera rader, medan här, jag kunde bara ändra det på ett ställe. Nu vad är trade-off, kanske? Detta var super bekvämt. Hade alla mina data fint tillsammans. Men vad är uppenbarligen fallet nu? PUBLIK: [OHÖRBART] DAVID MALAN: Precis, och jag är glad att du använde ordet gå, eftersom det är faktiskt nyckelordet, i en värld av relationsdatabaser i SQL, det är en verklig ord du kan skriva eller åtminstone förmedla. Och faktiskt, vad vi nu har att göra att välja Davids fullständig information är något som väljer stjärna från användare, gå städer, on-- och nu Jag ska bara gå till en andra linje så att denna fits-- users.zip lika med cities.zip, där users.ID lika med ett. Så vad händer? Det är fult ut, men du kan sorts läsa den från vänster till höger, uppifrån och ned. Välj stjärna från användare är densamma som tidigare, men det är inte från användare, per se. Det är från användare ansluta städer. Vad jag ansluta dessa två tabeller på? Jo, tydligen, den användares tabeller zip fält, och denna period är bara speciella syntax för att uttrycka den tanken, och detta är städer tabellerna zip fält. Jag vill att de två att vara lika, men jag vill att slutligen välja endast de rader där ID i tabellen användare är lika med 1, som råkade vara min. Och bara för att vara tydlig, en programmerare, vanligtvis när hårdkoda något liknande det antal 1, annars bara webbplatsen stöder David eller allra första användare, du skulle i stället göra något i stil med ID, där detta representerar en variabel, något som kan förändras över tid, liknande i anden vad jag sade tidigare med dessa typer av platshållare. Men nu ska vi bara hårdkoda det som en. Och så vad betyder det? Tja, är ett trevligt sätt att visualisera detta att om denna hand är bordet användare, och denna hand är blixtlås tabellen, vi slags finding-- och tips av mina fingrar är zip hit och tips av mina fingrar Här är zip, du är typ av förregling det så att du får tillbaka den resulterande ursprungliga tabellen, genom att verkligen gå med de två tabellerna på gemensamma området. Och det behöver inte vara dragkedja. Det kan vara mest något annat, men zip är trevligt, eftersom en, det är kort, två, det är alltid samma längd, så det finns en verklig effektivitet vad Olivier föreslås här med factoring ut zip, och [OHÖRBART] föreslår att vi bli av staden och stater. Så detta är den process känd som normalisering. Eventuella frågor om det? Bra låt mig påpeka Detta är den typ av saker, även om det är ganska låg nivå, denna diskussion, att man skulle kunna tro du slags få vilse i ogräs, Detta är ett uttryck för gott möjlighet för utvecklare att vara dåligt. Och i själva verket, även om vi i kurser jag har lärt, när vi har haft, exempelvis oerfarna grund programmerare bygga webbplatser, vid första anblicken, webbplatser kan se fantastiskt. Och de har alla funktionalitet vi begärt, utvecklarna gjorde ett bra jobb. Men att de inte nödvändigtvis vet tillräckligt om databasdesign eller de inte tror hårt tillräckligt om vilka typer av uppgifter och vilka typer av användare av Webbplatsen kommer att ha, och vi finner alltså sex månader senare, efter att de har examen eller gått vidare, som fan, vår hemsida är verkligen, verkligen långsamt. Och jag är inte ens tala om att ha miljoner eller tusentals användare. Jag menar några hundra användare på campus, varav alla vilja, till exempel, handla kurser på Samtidigt är de använder den kurskatalogen applikation jag nämnde och saken blir verkligen sakta eftersom det fanns inga index. Det fanns inga röda stjärnor, så att tala, eller vi hade inte nödvändigtvis räknas ut gemensamma data till få några besparingar i rymden. Och så när prövning en utvecklare eller databas personen eller liknande, den typ av frågor att tänka igenom är även, när man ser över någons kod, att säga, inte nödvändigtvis ser genom alla deras kod, men säga, låt oss titta igenom databastabeller. Vad du lagrar? Och sedan att säga, ja, vänta minut, varför använder du ett heltal? Vad händer om vi har 4 miljarder och en av dessa rader? Och dessa typer av frågor är en möjlighet att typ av push-back och få en känsla av, där om du inte är bekväm att göra det, att ha någon mer teknisk ställa dessa frågor, av huruvida personen verkligen känner sina grejer. Och detta är den typ av saker också, att folk på Internet som är självlärd, kanske lära mindre ofta, eftersom du inte nödvändigtvis komma över det så mycket, eftersom du kan få databasen igång, men om du inte har läst upp på handledning eller varit berättade om normalform och indexering och prestanda, det är dessa typer av saker som kommer att skada dig. Och man kan tro, eller en dålig ingenjör kan säga, oh, ja, vi bättre lön för en större databas eller en snabbare databas eller bara kasta pengar på detta, vertikalt skala, inte nödvändigtvis så. Om du går in-- och du kan gå in efter fact-- och lägga index, och det kan ta några timmar för databas för att bygga upp den nya data struktur som jag nämndes tidigare, du kan fortfarande fixa detta i efterhand, att det är där du börja att skilja bra designers från dåliga designers, inte bara estetiskt, men prestandamässigt också. Några frågor? Nej? Så för NoSQL, som var den andra typen databas som jag nämnt tidigare, du inte har rader och kolumner. I stället skulle man ha något som ser lite mer om detta. Jag kommer att använda gemensamma syntax. Klamrar råkar användas här ganska mycket. Du kanske har något som första namn är David, du kanske har sista heter Malan, citationstecken, du kan ha ID är-- ursäkta mig, är whoops-- ID 1, e-post är malan@harvard.edu, och jag kommer inte bry skriva ut resten, och sedan vissa andra saker. Med andra ord är detta en textrepresentation av vad vi i allmänhet skulle kalla ett objekt i ett datorprogram. Och ett föremål är i allmänhet bara en samling av nyckelpar värde. Så återigen, denna återkommande tema. Vi såg nyckelvärdespar i HTML, Vi såg nyckelpar värde nu i samband med databaser, och vi såg nyckelpar värde i samband av, tror jag, ett språk tidigare idag. Håller kommer upp. Och faktiskt, det är verkligen vilka data handlar om, data och metadata, eller värden och nycklar, respektive. Så en icke-relationella databas, något baserad på objekt, där du bara klumpar allt tillsammans och sätta den i minnet, i allmänhet skulle vara beskrivas som, eller tänkt på, som denna. Och jag lämnar det nu som en slags alternativt tillvägagångssätt. Och en är inte nödvändigtvis bättre än den andra. I själva verket mycket i ropet dessa dagar är databassystem liknande MongoDB och Redis och några andra sådana verktyg, fritt tillgängliga, men de blir alltmer en vogue. Dels för att de erbjuder ytterligare innehåller över dessa tabell metoder, men också för att de är lite enklare att använda, eftersom du inte behöver tänka så hårt om en hel del av dessa designbeslut. Så plus och minus. Så inser att det finns alternativ utöver vad vi precis spenderat tid på. Så låt oss göra detta. Låt oss övergå lite tillbaka nu till webbprogrammering, så att vi typ av avsluta idag med något Det är lite hands-on, fyllning i vissa luckor från igår. Låt mig gå till denna första. Så minns att igår Vi hade några kanoniska HTML sidor som hade från början, bara HTML, och sedan i andra hand hade CSS, Cascading Style Sheets. Detta är en ny tagg som vi inte se igår, eller bo på, så kallade skripttagg. Det visade sig att du faktiskt kan bädda in en språk som kallas JavaScript i din webb sida och gör din webb sidor gör något. Så vad menar jag med det? Nåväl, låt mig gå vidare och bara låna denna kod för en stund. Jag kommer att gå in i Cloud9, inget behov att åka dit er ännu, och jag kommer att kalla detta alert.HTML. Jag kommer att klistra in min fil här. Och bara för att klargöra vad jag har gjort, låt mig gå till denna adress och går för att varna, och du ser Hello World. Men det är typ av underwhelming. jag vill göra något lite annorlunda. Så jag kommer att faktiskt göra detta. Jag kommer att gå in här e, och mellan mina script-taggar, säger alert ( "Hej, världen"); så meddelande det är lite slarvigt, men jag har HTML, inuti vilket är en språk som kallas JavaScript och detta är vad som kallas en funktionsanrop eller proceduranropet. Detta är ett verb, bokstavligen, i detta fall, och jag åberopar kod funktionalitet att någon annan skrev. Så att funktionaliteten är en alert, så låt oss gå till denna sida nu och klicka omladdning, och nu se lite av interaktivitet. Det är typ av gamla skolan och ful. Denna typ av påminner dig om pop-ups, kanske, från förr men det gjorde något lite mer programmatisk. Så mer än så, låt oss göra något mer intressant. Låt mig gå in här och bli av med detta. Och jag kommer att gå vidare och skapa ett formulär som vi gjorde igår. Egentligen vet du vad? Jag kommer att gå in google.html, som vi började på igår, som såg ut som detta, via vilken vi sökte efter katt Men märker att det är lite av en fel i den nuvarande versionen. Det fungerar för katter, men antar att Jag samarbetar inte och jag skriver ingenting, och jag klickar ber. Det är lite konstigt beteende. Tog mig till den verkliga Google, gav mig inte ett felmeddelande. Jag skulle vilja tala om för användaren du behöver för att ge oss ett värde. Så hur kan vi göra detta? Bra låt mig gå tillbaka till Cloud9 och Låt mig gå in i toppen av min sida och lägga till en script-tagg som denna, där Jag kommer att skriva några JavaScript-kod. Och jag kommer att göra följande. Om (document.getelementByID-- och återkallande att vi talade om det tidigare, denna funktion. Vad ID vill jag få? Jag vill få q, och jag ska säg lika med ingenting, som this-- faktiskt Låt mig använda citationstecken bara för consistency-- lika ingenting, då alert ( "Skriv en fråga") här. Så jag har vad som verkar vara något som en förutsättning. Vi har sett denna allmän uppfattning i Scratch. Det är som en av de pussel bitar som såg ut så här. Och vad säger jag? Tja, här nere, märker jag kommer att göra följande. Jag kommer att ge denna form fält inte bara ett namn på q, som är vad som får skickas till Google, men jag är kommer att ge det en lokal identifierare, även kallad q. Men jag kan kalla detta något jag vill jag bara att hålla det enkelt och även kallar det q, bara för enkelhetens skull. Och nu ska jag göra något lite mer. På formulärfält här, kommer jag att lägga till vad som kallas en händelsehanterare. På lämna, jag vill ringa en funktion som kallas validera. Detta existerar inte ännu, detta ord eller denna verb validera, eftersom vad jag ska göra upp här nu är att lägga lite kod. Jag kommer att säga funktionen validera. Jag kommer att dra in detta och lägga till en annan klammerparentes här och en annan här. Tänk på vad detta nu gör. Jag har now-- tänka på detta som skapade min egen pusselbit som inte tidigare existerar, och jag har kallat detta pussel pussla validate pusselbit. Dess syfte i livet är att verkställa fyra rader kod inne i den. Om document.getElementById så konceptuellt, som kommer att gå in i elementet, HTML-elementet vars unika Tanken är bara q, och sedan även om syntaxen ser lite konstig, att lika lika betyder bara jämlikar. Så det betyder att om elementet med unik identifierare för q, när fått, har inget värde, bara lika det citat unquote, ingenting där, vad vill jag göra? Jag vill skrika på användaren. Och vi kommer inte att gå detalj här. Jag kommer att returnera false. Det är ett fel. Annars kommer jag att återvända sant. Så antingen det fungerade eller så inte är fallet. Falsk eller sann. Och nu om jag inte gjorde några misstag, Låt mig spara och ladda om. Och låt mig bara dubbelkolla att Jag inte, i själva verket gör några stavfel, så jag inte genera mig. Låt oss se om det fungerar. Så nu ska jag skriva katter. Den fungerar fortfarande, eller halv verk, åtminstone. Låt mig ladda om den, och nu låt mig försöka lämna in utan att skriva anything-- fan det, bröt det. Ett ögonblick. Låt mig öppna konsolen, [OHÖRBART] log, ladda om sidan. Låt mig försöka här igen. Åh, fan. Jag glömde. Jag gjorde ett stavfel. Jag kommer ihåg vad det är. .värde. Jag menade att säga om värdet av elementet vars ID är q lika att sedan skrika på användaren. Så nu vill jag hålla andan igen. Nu kör vi. Det går vi. Skriv en fråga. Så det är inte låta mig igenom. Jag kan vara typ av lekfull med detta, och i stället för kontroll av något värde, Jag kan säga något liknande, inte mer letande efter katter, och nu kan vi bara mer lekfullt låta användaren söka efter hundar om han eller hon vill, eller om jag går in här och söka efter katter, nu kan jag inte. Så vad är takeaway här? Så en, har vi infört i vår värld av HTML och CSS, programmering funktionalitet. Jag kan faktiskt nu fatta beslut i koden. Tidigare är allt jag kunde göra märka upp textinnehåll eller grafiskt innehåll och tala om vad att se ut och var att visa. Nu kan jag faktiskt fråga frågor om webbsidan och fatta beslut baserade på den, och uppmana användaren om jag behöver skrika på honom eller henne. Så låt oss prova något på vår egen med detta. Gå vidare, låt mig att öppna upp nästa bild här och bara påpeka en sak. Precis som med CSS, kan vi räkna ut vår JavaScript-kod till en separat fil, du kan göra samma sak med JavaScript som med CSS. Och du använder som använder en källa attribut av skripttagg. Men vi kommer inte att komplicera saker för nu. Istället, om du kunde gå till inte denna sida, men-- låt mig flytta runt i order-- gå till, om du kunde, denna sida här. Denna URL här. Det är i dagens diabilder. Du kan behöva ladda om eftersom Jag har lagt till ett par sak. Men dit där vissa pussel väntar. Och detta kommer att ge oss en chans, i en något mer kul sammanhang att fuska med några JavaScript. Och när du kommer dit, Jag ska förklara vad som väntar. Få grönt. Ställ blå. Ställer grön, sätter rött. Oj då. Förlåt. Detta är omfattningen av vår dokumentation för denna utmaning. Och detta kommer att fungera på följande sätt. Så vad du har på detta sida är en hel massa bild pussel med en kompis vid Stanford University. Så vad du ser här är nästan typ av en av dessa magiska ögat pussel, men om du bara stirrar på det, ingenting kommer att poppa ut på dig. Snarare är något gömd i den här bilden. Och det är dolt på följande sätt. Bilder, som ni kanske vet, kan vara med bara tre färger. Lite rött, lite blått, och några gröna. Och vi kan göra hela färger i regnbågen genom att blanda dessa tre färger på något sätt. Så det här ser mestadels grönt och blå, men som Nick säger här, detta järn pussel bild är ett pussel. Den innehåller en bild av något känt, dock bilden har missuppfattats. Den berömda objektet är i de röda värdena. Men den röda värden har alla delats med 10. Så de är för små med en faktor 10. Så med andra ord, Nick tog en originalbild, och han desaturated alla av röd från det, att minska mängden av rött bläck, om ni så vill, i det. De blå och gröna värden är alla bara meningslöst, slumpmässiga värden, aka buller utformade att fördunkla den verkliga bilden. Så vad Nick gjorde han tonas ned den röda och sedan Han kastade bara slump mängder av blått och grönt på bilden för typ av oklar vad som faktiskt fortfarande kvar. Du måste ångra dessa störningar för att avslöja bilden. Först ställa in alla de blå och gröna värden till noll för att få dem ur vägen, och titta på resultatet. Sedan multiplicera varje röd värde av 10, skala tillbaka till ungefär dess slutliga värdet. Vad är den berömda föremål? Så alla ni har denna rektangel i webbläsaren just nu. Och märker att det finns en viss startkoden, så att säga. Detta är JavaScript-kod som Nick har skrivit för dig. Och märker att det finns en linje i mitten som börjar med ett snedstreck snedstreck, det är vad brukar kallas en kommentar. Det betyder att det är en fras till programmeraren som inte har någon funktionell betydelse. Det är bara en visuell kö för att människan. Så du kan gå vidare och ta bort just den raden, och vara super noga med att inte ta bort eller ändra något annat. Och låt mig bara gå igenom vad denna kod gör och jag lämnar det till dig att räkna ut den hemliga bilden. Denna första raden här som jag har bara markerad ger dig följande. På den vänstra sidan, du har vad som kallas en variabel som Nick har godtyckligt, men rimligen kallas im för bilden. På höger sida av det likhetstecken, han säger att ge mig en ny citationstecken, unquote "enkel bild". Enkel bild, i detta sammanhang är vad som kallas en klass, ja, Det är ungefär som en class-- tekniskt en prototype-- men egentligen, Detta ger mig ett nytt objekt, vars innehåll är filen, järn-puzzle.png. Med andra ord, har Nick skapat denna föreställning om en enkel bild så att vi kan, för pedagogiska ändamål, leka med bilden och ändra dess röda, gröna och blå värden. Och hur gör vi det? Detta något kryptiska syntax här är ungefär som att repetera blockering att en del av er såg i Scratch tidigare idag, där du kan upprepa 10 gånger. I det här fallet har Nick inte hårdkodade ett antal som 10. Istället han säger, initiera en variabel som heter x till 0, kontrollera om x är mindre än bredden av bilden. Och så för att vara mer korrekt, är avbilda variabel, punkt innebär gå inne i det och få dess bredd, och sedan öppna Paren, stängd Paren är bara en programmerare sätt att säga detta är en funktion. Detta är ett förfarande. Detta är funktionalitet någon annan skrev. Använd den och ge mig tillbaka ett svar. Och då x ++ är ett fint sätt att sade efter att du har gjort detta en gång, öka x med ett. Med andra ord, detta är en programmerare sätt att inducera en slinga som är kommer att iterera över alla kolumner i en bild. En bild är bara ett rutnät av prickar, rader och kolumner av prickar. Detta är ett sätt att iteration över alla dessa kolonner. Och på insidan, Samtidigt ska vi iteration under de höjder, här och här och här. Så det här är bara ett sätt att Traipsing, nästan som en gammal skola skrivmaskin, att bara gå över hela bilden iterativt. Även det är inte riktigt helt klar, bara ta på tro för nu, att dessa tre linjer av kod tillsammans är kommer att tillåta dig att iterativt se vid varje pixel, varje prick i bilden. Vad är en pixel? Jo, att vara tydlig, om vi ser på den ursprungliga och zooma in, om du verkligen sätta dina ögon till datorskärmen, det är bara en massa punkter, flera tusen punkter sammanpackade där. Och så vad är du om att göra? Var och en av dessa punkter, en slutlig definition, är ett resultat av vad som finns i allmänhet kallas RGB, röd, grön, blå, vilket igen, kan kombineras för att ge dig ett obegränsat antal färger. I själva verket, om du kommer ihåg från många, många år sedan, projektordukar som dessa saker brukade ha inte en objektiv utan tre. En av dem spotta ut rött ljus, en av dem spotta ut grönt ljus, en av dem spotta ut blått ljus. Och om du var i en mellanstadium som jag var där de var aldrig korrekt inställd, du var alltid titta på historie filmer som var något förvrängd, eftersom de tre färgerna var inte kombinera ordentligt. Men det visar sig att var och en av dessa värden rött, grönt och blått, kan ha ett antal associerade med dem. Exempelvis 0 för rött betyder ingen röd, 0 för grönt betyder inget grönt, och 0 för blå innebär ingen blå. Så om du har något rött, inget grönt, och ingen blå, vilken färg har du? PUBLIK: [OHÖRBART] DAVID MALAN: Du skulle hoppas det, det är vitt. Tyvärr operates-- denna ledsen? PUBLIK: [OHÖRBART] DAVID MALAN: Så du faktiskt har svart, i det här fallet. Så om du har ingen av dessa färger påslagen du har svart. Men om du har, låt oss säga en hel del av dem, liksom en hel del rött, 255 av det, mycket grönt, och en hel del blå, är det vitt. Så dessa är de två ytterligheterna. Så genom denna logik, om jag har en hel del rött och inget grönt och inget blått, vilken färg är det? PUBLIK: [OHÖRBART] DAVID MALAN: Höger, naturligtvis. Och då ingen röd, mycket grön, ingen blå, och sedan Om du have-- bra, vi bara avsluta det, därför att precis, men detta, naturligtvis, nu är blå. Och nu kan du kombinera dessa färger. Nu som en sidoreplik, om någon av er har någonsin gjort några faktiska webbdesign, du kanske faktiskt se symboler som denna. FFF-- och faktiskt är det förmodligen inte ens det. Det är FFFFFF. Någon någonsin sett F: s och E: s och A through-- så visar det sig, Vi pratade igår om decimal, och idag, typ av om decimal. Idag talade vi om binär. Det visade sig, är hexadecimalt en mycket gemensam bas system att använda i datoranvändning. Binary är två, är decimal 10, är ​​hex 16. Och det visar sig, hur man räknar i hexadecimal? Noll, ett, två, tre, fyra, fem, sex, sju, åtta, nio, vad använder ni efter nio? Vad är nästa nummer? Vi använde redan noll. Jag behöver 16 av dessa. Noll, ett, två, tre, fyra, fem, sex, sju, åtta, nio, du behöver någon godtycklig konvention. Och vad människan beslutade en tid sedan att efter nio kommer bokstaven A och sedan B och sedan C Så sätt man räknar i hexadecimal är noll, ett, två, tre, fyra, fem, sex, sju, åtta, nio, A, B, C, D, E, F, och det kommer att räkna du hela vägen, visar det sig, till 15. Så noll till 15 är noll genom F. Nu varför är det viktigt? Jo, när du har två F-talet, det är hur du uttrycker 255. Så lång historia kort, i värld Photoshop, som grafisk design mjukvara, i en värld av webbutveckling, där du har massor av färger, naturligtvis att leka med, ofta programmerare kommer uttrycka de i hexadecimal, bara för att det tenderar att vara lite enklare. Även om det vid första anblicken det är mycket mer komplex. Så i alla fall, är det viktigt eftersom Nick vid Stanford har gett oss sex stycken av funktionalitet att du, de knoppande programmerare, kommer nu att ha förmågan att använda. Inbyggt i denna web sidan är sex funktioner, sex förfaranden som Nick skrev. Tre av dem kommer att få dig ett antal, en röd, en grön eller blå värde. Tre av dem kommer att ställa det värdet. Och dessa streck är bara platshållare, så du behöver veta vad de är. Så med dessa tre funktioner, den första av dessa saker kommer att vara en x-koordinat, och den andra av dessa saker kommer att bli en y-koordinat. Med andra ord, som pricken, vilket pixel vill du få gröna, få blå, få de röda. Och så här, kommer detta att vara x, kommer detta att vara en Y-värde, och detta kommer att vara en siffra. Så låt oss göra det första linje detta tillsammans och då jag lämnar det till dig för att försöka härleda resten. Så enligt instruktionerna På den här sidan behöver vi att öka den röda med en faktor av 10, och vi måste ta bort det gröna och ta bort den blå. Låt oss börja med de sistnämnda scenarierna. Så om jag vill, och jag ska att dra in genom att använda vissa utrymmen, om jag vill ställa den röda, den gröna eller blå värde, Jag kommer att göra följande. Bild, im.setBlue, och sedan baserat på mina instruktioner här, Vilka tre saker skulle jag skriver insidan av parenteser nu? Jag behöver x-värdet, den y-värde, och hur många ska jag sätta här om jag vill bli av blå, baserat på denna berättelse här? Bara noll. Om jag vill inte blå, jag är bara kommer att ändra det till noll. Låt oss nu bara sammanfatta vad det gör. Jag har här på dessa topp andra och tredje raden, Jag hävdade två slingor, kapslade slingor, om du kommer som kommer att ha effekt av att gå från vänster till höger, topp till botten över alla X värderingar och alla av y-värdena. Eftersom igen, är en bild bara ett rutnät av rader och kolumner. Så detta kommer att få bort alla blå. Låt mig lämna i nästa rad till dig. Hur blir jag av alla gröna? PUBLIK: [OHÖRBART] DAVID MALAN: Nice. PUBLIK: [OHÖRBART] DAVID MALAN: Nice. Och jag kommer att zooma ut och bara ta hand om att du inte har gjort några stavfel. Och om du känner dig bekväm med vad du har gjort, gå vidare och klicka på knappen Kör / Spara och se vad du får. Och återigen, har vi gjort bara tre förändringar. Vi utgår det första kommentera och ersatt det med dessa två rader kod. Och det är OK om du behöver trycka Kör / Spara ett par gånger att fixa något. Och låt mig också zooma in på min kod så att du kan transkribera. Bra. Så jag ser Andrew har vad verkar vara ett misstag. Han fick just en stor svart rektangel på sin skärm. Har någon annan har en stor svart rektangel? PUBLIK: Ja. DAVID MALAN: Stor svart rektangel? OK, så låt oss tänka om vad detta innebär. Vi sade att noll, noll, noll, så ingen grön, ingen röd, ingen blå, kommer att ge dig svart. Och det visar sig att de flesta av våra bärbara datorer bara inte har tillräckligt med trohet. Du kan inte riktigt säga det är faktiskt något där. Och om du typ av kanske luta skärmen framåt och bakåt, Kanske ser du en liten sak där? Kanske, typ av, typ av? Det är inte helt svart. PUBLIK: [OHÖRBART] DAVID MALAN: spoiler! Det finns vissa röda där, men minns från specifikationerna av problemet, Nick tonas ner det. Han desaturated det något, men inte hela vägen till noll. Så om vi vill förstora det belopp rött, låt mig föreslå detta trick. Låt mig zooma in på min skärm. Och låt mig gå vidare och säga belopp lika im.getRed (x, y). Denna kodrad ger mig något som kallas en variabel. Jag har godtyckligt, men utan tvekan, rimligen ringde min variabel vad, tydligen? Belopp. Bara belopp. Jag kunde ha kallat det vad jag vill, men jag är med hjälp av denna andra funktion som jag beskrev tidigare att få mängden rött vid x komma y. Varför gjorde jag det? Vad vill du göra här? Du behöver add-- PUBLIK: [OHÖRBART] DAVID MALAN: Ja, kanske multiplicera det med 10. Och om du inte vet detta, jag är kommer att gå vidare och göra det. Jag kommer att gå vidare och säg, vill jag mängden rött Jag vill vara vad som helst är den röda, gånger 10, och stjärnan, asterisken på tangentbord är the-- inte använder x. Använd stjärnan. Det är hur du multiplicerar saker i de flesta programmeringsspråk. Så enligt Kareem intuition, lagras i denna variabel kallad belopp, är hur mycket rött jag vill på plats xy. Hur nu, gör jag det Pixel har det numret? Du har redan gjort det här förut. Du anger den gröna och den blått till något värde, till noll. PUBLIK: [OHÖRBART] DAVID MALAN: Ja, väl du inte vill att det ska 10. Du har redan gjort matten här. Så vi får värdet av rött, vilket är en låg siffra, förmodligen. Vi multiplicera med 10. Vad du vill göra med det rörliga beloppet nu? PUBLIK: [OHÖRBART] DAVID MALAN: Nice. Så im.set-- vad? PUBLIK: setRed. DAVID MALAN: setRed, vid läget xy. Ja. Och bara belopp. Med andra ord, en variabel är en tillfällig platshållare att du kan sätta vad du vill i. Vi råkar vara att sätta en Antalet i det, för tillfället. Vi har multiplicerat det med 10 för att göra den större. Och nu är jag ersätta den variabeln som tredje argument, eller ingång för att ställa in rött. Och så att när du avsluta det, och notera av semikolon och parenteser. Gå vidare och klicka kör / spara igen, och du bör se, magiskt, vad som faktiskt det. [? Arwa,?] Vad som finns där? Eiffeltornet i fullfjädrad röd, inte helt mörkt. det borde vara mer uppenbart nu, ja? OK. Och Andrew, inte mer svart låda? PUBLIK: [OHÖRBART] DAVID MALAN: Okej. Så jag ska hålla detta på skärmen. Om du vill spela med senare, jag återskapa detta för dig. Men den här koden här gjorde just detta. Varför gör vi inte en annan. Låt mig rulla ned något. Så i detta fall, projektorn egentligen inte göra det rättvisa. Men på din skärm, du förmodligen har en mycket röd och mycket svart låda. Även detta är ett pussel som visar något känt. Dock har bilden blivit förvrängd. Den sanna bilden, den här gången, är i de blå och gröna värden. Men de har alla delats genom 20 så är värdena mycket små. De röda värdena är bara slumptal, buller. Ångra dessa störningar för att avslöja den sanna bilden. Så Nick berättar sedan vad du ska göra. Ställa de röda värdena till noll, och då inte förstöra vad det är. sedan multiplicera blå och gröna värden med 20. Så det är nästan samma program som tidigare, men du att vända processen. Och jag kommer att sätta min kod från tidigare på skärmen vid du vill gå tillbaka till det eller spela vidare med den. Låt mig in i det. Men lösa kopparbild pussel, nummer två. PUBLIK: [OHÖRBART] DAVID MALAN: OK, så här är jag kommer inte att ge så många tips. Så jag would-- oh, låt oss se, du har ett stavfel här. Så kom ihåg, detta här faktiskt måste gå dit. Så vad jag skulle föreslå, om du vill fokusera på den här, det är svaret. Om du vill transkribera det att bör få den första arbetsdagen. Och sedan kan du använda det som inspiration för andra. Trevlig. Bra. Och för den nyfikne, Detta är ett enkelt exempel av en vetenskap eller en konst kallas steganography, konsten att dölja information på bilderna. Vanligtvis kan bilderna vara vattenmärkt mycket uppenbart med en logotyp i botten hörn, men klart, du kan vara mycket mer sofistikerade om det och faktiskt dölja andra bilder i bilder på något sätt med denna teknik. Ta ytterligare 30 sekunder, och sedan ska vi åtminstone meddela vad du bör se. Och jag lämnar den tredje en som en at-home träning, om du vill ha mer av en utmana denna helg. Och jag tror Andrew kanske har fått det första. Vad är den andra bilden, Andrew? PUBLIK: Frihetsgudinnan. DAVID MALAN: Frihetsgudinnan kommer vara svaret här gången. Så återigen, bara några enkla exempel, vars mål är att ge dig en känsla av hur Vi har översatt bild Scratch block till mer irriterande och mer komplicerad kod, men alla de idéer är fortfarande exakt samma, om än med införandet nu av begreppet en variabel som kunna lagra något tillfälligt. Låt oss göra en mer hands-on, bara för att nu ansluta prickar till något lite mer verkliga världen. När du är klar, om du kunde gå till denna URL på skärmen. Det är också i din kopia av diabilder, developers.google.com/maps~~V. Låt oss faktiskt göra något verkliga, så att säga, på webben med hjälp av Google Maps API, eller application programming interface, på följande sätt. Google, som många företag, ger en hel del gratis funktionalitet som du kan använda för att bygga din egna intressanta applikationer. I själva verket, om du någonsin använt Uber att få en cab eller en bil, du förmodligen vet att Uber har en karta och det visar bilar på den. Det vill säga så gott som jag kan berätta, Google Maps API. De är faktiskt använder Googles kartor, men Uber är inte en kartläggning företag, inte heller skulle det vara en särskilt intressant problem att lösa på toppen av sin bilservice problem. Och så de står, igen, på axlarna andra, Google i det här fallet. Så de använder Googles kartor men deras egen bil tjänster och andra sådana funktioner. Så vi kommer att dra nytta detta för att göra följande. Och om jag har gått för fort, ring mig över på ett ögonblick. Glad att sammanfatta några av bild saker. Du bör se själv på en sida som denna. Så Googles trevligt, och de är bland de bästa att tillhandahålla inte bara API, men gratis API: er som du kan spela med eller använda kommersiellt. De gör börja debitera dig om din användning är hög, men jag gick framåt i förväg och undertecknat oss upp för ett gratis konto att förhoppningsvis 10 datorer kommer inte diskvalificera oss för plötsligt. Så förhoppningsvis demonstration kommer att fungera. Och märker att de har API: er för Android, iOS, webb och webbtjänster, vad det är. Låt oss fokusera på webben. Så klicka på rosa ruta, webb och att kommer att leda dig, förhoppningsvis till en sida här. Och de har en massa API. Och det kan vara lite överväldigande vid första, men jag ska styra oss genom vad vi vill. Längst upp till vänster är Google Maps JavaScript API JavaScript API. Så gå vidare och klickar på en. Och det kommer att leda dig nu till följande sida, demos och exempelkod. Låt mig in här. Och låt mig få oss att-- rulla ner där det står snabba start steg. Skärmen bör se ut mitt. Och det finns två steg, får en nyckel och börja utveckla. Jag gjorde redan steg ett för oss, att få en så kallad nyckel. Och detta är en gemensam idé. En API-nyckel är i allmänhet bara ett stort slumptal eller sträng att du ska klistra in din kod, så att Google vet vem du är när du använder deras tjänst, deras API. Betyder inte att vi är laddas någonting. Och nu, klicka, i stället för en klickar börja utveckla. Om du bara kunde vinka mig över om inte säker på var vi är. Så vi ska bara repa yta, här men vad Jag trodde skulle vara tvingande är att faktiskt ha oss alla, med hjälp av Cloud9 i ett fönster och denna handledning i ett annat fönster låter faktiskt få våra egna applikation igång som bäddar in en anpassad Google I vår egen hemsida, och sedan lägger till en eller två funktioner. Men vi ska bara repa ytan av vad vi kan göra. Så bara en snabb kontroll förstånd. Är alla på denna sida, Google Maps JavaScript API? Skulle säga att komma igång. Vi kommer inte att gå igenom det hela på något sätt. OK, i en annan flik, om du inte har det öppet, går in Cloud9 och skaffa dig bara en ny flik i slutändan. Så återigen, c9.io från igår, c9.io, och bara skapa en ny fil. Och gå vidare och samtal det vad du vill. Jag ringde min map.html. Kalla det något som slutar med .html. Och du bör vara ungefär där jag är i denna process med bara en blinkande prompt i en tom flik som heter något i stil med map.html. Eller fil, ny fil här gången. Och nu, över på Google Maps JavaScript API, vi ska hoppa läsning genom hela denna text. Men märker att hallå världen är verkligen överallt, ser du det nu. Hej världen har denna stora färgrika exempel på en hel del HTML. Gå vidare och kopiera bara att klistra in HTML, så från doc typ upptill hela vägen till slutet HTML-tagg, gå framåt och kopiera alla that-- igen, det är under hello world example-- och klistra in det i fliken Cloud9, så att nu skärmen ska se ungefär som mitt. Och du kan spara det, men inte läsa in den ännu. Låt oss först titta på koden och se om vi kan inte sluta eller lära från vad det är Google har haft oss blint kopiera och klistra in. De vill bara hjälpa, bokstavligen, komma igång, men det finns inte så mycket komplexitet faktiskt där. Eventuella frågor ännu? Vi är säkra att gå framåt? OK. Så snabbt, låt oss bara göra några snabba rimlighetskontroller. Linje ett av vad jag se, och förhoppningsvis, du Se vad betyder det, doctype HTML? Kareem, minns? PUBLIK: [OHÖRBART] DAVID MALAN: Ja. Här kommer HTML 5. Samtidigt linje två på skärm här betyder hej webbläsare, här kommer den verkliga HTML. Linje tre är hey webbläsare, här kommer huvudet. Linje fyra är, naturligtvis, hej webbläsare, här kommer titeln. Vad gör linje fem? Egentligen gör det inte verkligen något för oss. I detta fall, precis ändrar storlek det sidan till en standard. Linje sex, Vi har inte pratat om, men det anger teckenkodning. Det finns olika sätt att koda filer, särskilt för främmande språk. UTF-8 tenderar bara att vara standard. Så nu ska vi se i linje sju till 16, en del CSS. Och även om vi inte har sett alla dessa saker innan, vi kan slags sluta. Så linje åtta medel, hej webbläsare, tillämpa alla följande till vilka två taggar, tydligen? HTML och brödtext. Så kommatecknet är den nya sak där. Och det är bara ett sätt att ange flera taggar samtidigt. Då har vi klammerparenteserna. Så uppenbarligen, berättar denna webbläsaren, göra höjden på sidan 100%. Så även om det finns mycket lite innehåll, göra hela sidan, göra saken fyller sidan. Gör kartan slutligen fylla sidan. Marginal, vad betyder det? Det är oftast som godtycklig vitt område runt kanterna att vissa webbläsare designer bara beslutat borde vara där, eftersom det typ av gör det ser renare. Men vi vill inte ha det. Vi vill att kartan ska hela vägen till kanterna. Stoppning, i samma anda som marginaler. Marginalerna betyder utanför, stoppning medel inuti, men det är samma typ av affär. Det är lite av en buffert mellan dig och kanterna. Och sedan linje 13 är en bra chans för en snabb genomgång. Vad gör korsförtecken karta menar, eller hashtag karta detta? Vad betyder det hänvisas till i princip? PUBLIK: [OHÖRBART] DAVID MALAN: Exakt. Den här fastigheten, detta CSS-egenskap gäller bara en sak, HTML-taggen som har ett ID citat, unquote "karta". Och nu ska vi snabbt framåt, bläddra ner till botten av filen, som är inte alltför långt borta, och meddelande på nätet 19, om du klistra in den precis som jag gjorde, linje 19 har bara en div, som är en uppdelning av sidan, vilket går jag kallas ett rektangulärt område. Det har ingenting i det. Det är en öppen tagg, tagg. Men det har ett unikt ID. Så vad som verkar vara händer här är Google är iordningställande vår webbsida för att har en komplett 100% höjd, och ingen utfyllnad, utan marginaler, eftersom vad vi ska sätta in av denna div, vars unika ID är karta, är en verklig inbäddad karta. Och vi vill att det ska fylla sidan och inte bara vara någon liten rektangel i mitten. Så linje 14 betonar på samma sätt, det map sig bör ha en höjd av 100%. Så nu märker mellan linjerna 20 och 28, detta är JavaScript-kod. Och detta är, även om det är syntaktiskt lite konstigt, Det finns inte så mycket händer här. I linje 21, är detta att förklara något som kallas en variabel. Istället för att ringa det belopp, som vi gjorde tidigare, vi mer exakt att säga var, vilket betyder bara variabel. Vi kunde ha använt det i Nick kod, men det gjorde han inte, så jag brydde sig inte att göra det heller. Det är en variabel som heter karta, och sedan finns det en funktion som är tydligen kallas initMap. Så det här är som vår egna pusselbit i Scratch. Vi har skapat en bit av funktionalitet kallas initMap, och du kan sorts sluta vad händer här. På den vänstra sidan, vi har en variabel, så vi kommer att sätta följande sak i den variabeln, från höger till vänster. Den högra sidan säger, hej webbläsare, ge mig en ny Google-karta. Och google.maps.map är bara en funky sätt att specificera att denna funktion tillhör Google Maps. Efter parenteserna, har vi sett det här förut, hej webbläsare, få mig elementen i sidan, den tagg i sidan vars unika ID är-- PUBLIK: [OHÖRBART] DAVID MALAN: --map. Och vad som händer, ja, denna linje tillsammans, linje 23, i huvudsak säger, hej webbläsare, gå och hämta mig det tomma div på sidan vars unika ID är kartan, eftersom jag vill infoga i det-- injicera i det, om du will-- en massa innehåll som råkar komma från webben senare. Och Googles gör allt detta för oss. Så återigen, i slutet av dagen, vi har detta exempel på abstraktion. Jag har ingen aning om vad en karta är eller hur man ska genomföra en karta API. Vi behöver inte göra det. Vi behöver bara berätta kartan var att sätta sig och lämna de som ligger till grund för genomförandet uppgifter till Google. Nu finns det tydligen två datadelar att detta exempel är förse Googles API. Tydligen mitten av kartan, och zoomnivå, så att säga. Och är det någon som känner igen dessa koordinater, latitud och longitud? Förmodligen inte, men vi kan gå tillbaka till handledningen, bokstavligen se. Men vi får se det på bara ett ögonblick. Zoomnivå är ett värde mellan, det gör jag inte vet, en i 13 eller något liknande. Det har bara att göra med hur långt du är zoomas in eller ut, och det är det. Och nu i slutet av sidan, meddelande linje 29-- det är lite fult eftersom det wraps-- här kodraden är vad hämtar till webbläsaren Google faktiska API. All kod som Googles ingenjörer har skrivit att genomföra Hela den här funktionen av inbäddningsbara kartor. Nu ska vi inte ändra någonting. Om du följer med, gå vidare och bara spara filen, om du verkligen har vad jag har. Gå till webbadressen. Du kan klicka på knappen Kör där uppe och som kommer att berätta du adressen till din webbserver igen. Och det kommer att leda dig till en ny flik. Om du klickar på Öppna för map.html, och oddsen är att du är kommer att få en varning, ett felmeddelande, ja? Felmeddelande felmeddelande? Så tyvärr, fel meddelande är inte att upplysande om du faktiskt öppnar konsol, som fliken vi hålls öppna igår och lite tidigare idag. Men jag snubblat över detta tidigare, så jag redan listat ut vad lösningen är. I dagens diabilder, eller snarare, i Cloud9, tillkännagivande att vi inte gjorde något avsiktligt. Lägg märke till att denna skripttagg i linje 29, om du läser igenom det, det är som maps.googleapis.com/ något, något, något, då märker någon, en av utvecklarna, skrev i allt kapital bokstäver, din API-nyckel. Vi måste klistra något där. Och detta var steget Jag gjorde för oss innan, och återigen de kan svartlista oss om plötsligt, 12 eller fler av oss börja använda samma nyckel, men låt oss se vad som händer. Så om du går in i dagens diabilder, en bild senare, finns det Detta mycket funky-ser textsträng. Gå vidare och bara kopiera den och klistra in den där det står din API-nyckel. Det är den jag skrev upp för. Och definitivt inte försöka skriva ut manuellt eftersom det känns fylld med stavfel, potentiellt. Så bara kopiera och klistra in den. Och det kommer att göra linjen längre, men nu, bara för att vara tydlig, det ska se lite mer så här, där nyckeln är lika inte aktiverade skriker på dig. Spara din sida, gå tillbaka till den andra fliken, ladda, och hoppas att se en karta över var? PUBLIK: Australien. DAVID MALAN: Australien. Så uppenbarligen de som är de GPS-koordinater i Australien. Och låt mig gå runt för bara en stund och hjälpa någon som inte är riktigt där, men låt mig föreslå via Google, hitta GPS-koordinater för din egen hemstad eller ditt eget hemland. Och förmodligen Google kan stänga av denna upp eller Wikipedia kan berätta. Men välja två olika värden för latitud och longitud, gå tillbaka in och klistra in dem, och sedan ladda om sidan efter att ha sparat och se om du kan ha en karta för din egen hemstad. Och när du är klar med att uppföljningen challenge-- och jag ska ge lite mindre riktning, avsiktligt, så att du medvetet måste kämpa för ett par minuter med dokumentation, ändra kartan för att inte vara här cartoonish standard, men en satellit karta. Så att du faktiskt se satellit bilder i stället för de vackra färgerna. Och tipset jag ska ge dig är att ändra kartans typ. Gå tillbaka till det som får startade sida för inspiration. Som du kanske har samlat, om du letar efter, det finns så många fler saker du kan göra. Några av er har redan förändrat kartan typ. Men du kan do-- till exempel, låt mig gå till något som vi gjorde för kursen Jag teach-- maps.cs50.net. En av våra undergrads gjorde detta. Vi centrera vår karta över Harvard Yard och överlagra alla dessa bygg namn, och vi hade honom lägga till den här. Så om jag vill söka efter, till exempel Matthews Hall, Vi har en liten rullgardinsmenyn. Och jag tror att han använder Bootstrap, den bibliotek vi diskuterat tidigare för detta. Och om du klickar på Matthews Hall, det omedelbart hoppar kartan till en viss plats, och det visar du en bild på denna lilla pop-up. Men även denna lilla pop-up, vi inte genomföra. Om jag bläddra ner på vår få började sida och leta efter informationsfönster, du ser att en del av den funktioner du själv kan lägga till, om än med lite mer komplexitet, är något som kallas ett informationsfönster. Och om jag klickar ett exempel här, och det är det som är roligt, Du kan göra saker som detta, klicka på en markör och sedan voila, Information dyker upp. Så har vi inte riktigt infört tillräckligt med funktioner för JavaScript att måla en bild av exakt hur du kunde tråd allt det här tillsammans, men vi har slags skrapat på ytan. I själva verket, vad jag gjorde just när Jag klickade på den markör, var att utlösa en händelse, en så kallad på click-händelse. Och vi faktiskt såg en händelse tidigare i dag, den så kallade lämna händelse, när vi hindrade användaren från att söka efter katter. Så vi har typ av plockas och valde bland alla dessa olika funktioner, att ge dig en känsla, förhoppningsvis, av vad du kan faktiskt göra med lite mer komfort i programmering, och helt fria resurser. Några frågor? Nej? Detta är din sista chans, åtminstone i dag, på en fredag, att få något från bröstet så att du går ut härifrån känner dig säker och bekväm. Ja. PUBLIK: Varför inte du lägga till ytterligare en sak? DAVID MALAN: Åh herregud. Jag behöver vila i helgen, tror jag. Andra frågor? PUBLIK: [OHÖRBART] DAVID MALAN: Du can-- i Internet Explorer, vila i frid, du använde för att kunna sätta VB script, virtuell grundläggande manus, men som egentligen aldrig fångats på. Så det korta svaret är bara JavaScript. Andra frågor? Okej, låt mig göra detta. Låt mig ta våra kollegor utanför. De har en utvärdering formulär som de vill alla att tillbringa några minuter att fylla i. De vill samla denna form och alla undantag som du kan ha utanför. De kommer också att ha certifikat. Jag gissar att det finns fortfarande några mellanmål utanför. Låt mig passera dessa ut, och om du har några frågor under tiden, Jag ska gå runt mer individuellt och vi kan komma igång. Ja självklart. PUBLIK: [OHÖRBART] DAVID MALAN: Det är vanligtvis sant i dessa dagar. Visst med webb programvara, du lutar på andra du antingen estetiskt använder saker som Bootstrap, så att du inte måste genomföra den låga nivån information om menyer och knappar och allt det där. Du lutar sig på någon som Google så att du behöver inte bygga en Uber företag och en kartläggning företag, och vilket som helst antal liknande applikationer. I själva verket, inloggningar är populära också. Om du har använt Spotify eller valfritt antal webbplatser, du logga in på några webbplatser som använder Facebook. Så vad är trevligt, det är API: er för inloggningar nuförtiden, så att du inte har att ha en egen användare tabellen och alla dina egen databas nödvändigtvis i samma utsträckning. Du kan låta Facebook göra allt av denna komplexitet för dig. Så det är en spännande tid, ärligt, i programmering, eftersom det finns så många tredje part tjänster som du kan bygga ovanpå. Och återigen, är det pris du betalar antingen finansiell eller driftstopp. Om Google går ner, så gör Uber, utan tvekan, men kanske det är en rimlig avvägning. Och återigen, det var ett av de teman, förhoppningsvis, under de senaste dagarna, är dessa kompromisser. Och sällan är det att gå att vara ett rätt svar. Det är verkligen bättre av två eller flera svar. Passera dessa runt. Och dessa Cloud9 konton kommer att fortsätta att arbeta, i teorin, för all framtid. Du kan hitta om du väntar några dagar eller en vecka eller mer för att logga in på dem, det kan ta som en eller fem minuter att öppna upp igen, men det är bara för att de sätter det att sova för att spara på resurser.