DAVID MALAN: Okay, vi er tilbage. Så for spændende Afslutningsvis vores sidste sektion på web programmering, som jeg troede, vi ville bruge som en generel betegnelse at fange et par resterende emner. Så ved slutningen af ​​den dag, vil vi rent faktisk gør en lille smule af hands-on web programmering med et sprog kaldet JavaScript. Og jeg tror, ​​vi vil tage et kig på noget relateret til billeder og opdage noget hemmeligt skjult i et billede, og også tage et kig på Google Maps API, application programming grænseflade, som noget repræsentativ for den type software det er i stigende grad og frit tilgængelige i dag. 

Men hvorfor skal vi ikke tage et kig på en ingrediens til denne verden at vi har sådan været tager for givet eksisterer i nogen tid, en database. I de sidste dage, og en halv vi har antaget at vi har adgang til en database, men hvilket problem har en database løse? Hvad gør det for os? Hvad er det? 

PUBLIKUM: [uhørligt] DAVID MALAN: Holder alle de oplysninger, OK, og hvilke former for information kan du lægge i det? 

PUBLIKUM: [uhørligt] 

DAVID MALAN: Alle oplysninger, du lægger i det, får du tilbage. Det er sandt. Og på en typisk web-baseret websted eller web ansøgning, hvilke typer af oplysninger, specifikt, kan du sætte i? PUBLIKUM: [uhørligt] DAVID MALAN: Brugere. Så hvad er en bruger? 

PUBLIKUM: [uhørligt] DAVID MALAN: OK, registreret bruger af sitet. Og hvad vil det sige at gemme brugernes oplysninger? Hvad komponerer en bruger? En bruger har hvad? PUBLIKUM: [uhørligt] DAVID MALAN: Ja, personlig data, og jeg kan lide det. Lad os være mere præcis. Så en bruger har typisk et navn, hvad der ellers kan en bruger have? PUBLIKUM: [uhørligt] DAVID MALAN: En addr-- OK, så fornavn, efternavn. Det er godt. Faktisk, lad os ordne at, fordi det vil at åbne mulighed for diskussion, stadig, yderligere. Fornavn, efternavn, køn. En id af en slags. Hvad ellers? Jeg hørte noget andet før, også. En e-mail, postadresse. 

Så lad os holde pause der og nu overveje ikke hvad vi lagring i databasen, men-- og ikke hvorfor, da det er måske indlysende, at når du registrerer en bruger, du ønsker at huske dem i nogen tid. Du ønsker ikke at blot lagres i RAM og være forgotten-- så lad os fokusere på hvordan. 

Det viser sig, at i verden af ​​databaser, der er mindst to typer disse dage. Noget kaldet en SQL-database, Struktureret forespørgselssprog, eller, cutely navngivet, NoSQL, hvilket ikke SQL. Og sidstnævnte er en eksempel på, hvad might kaldes en objektorienteret, eller et objekt butik, en database der lagrer objekter, og ikke, undskyldning mig, da vi snart vil se, rækker. 

Så vi vil fokusere for bare et øjeblik på den første af disse, nemlig en SQL database, hvis blot fordi det er så velkendt allerede, til nogen der har brugt Excel eller Google Sheets eller Apple Tal eller enhver standard regnearksprogram, eller, ækvivalent, eller mere sofistikerede, noget som Microsoft Access eller Oracle eller MySQL eller PostgreSQL, som alle er produktnavne for implementeringer af følgende idé. 

En relationsdatabase er simpelthen noget, der har rækker og kolonner. Og med rækker og kolonner, Jeg bogstaveligt talt betyde noget som dette, så hvor vi kan have den navn på et felt og dets type herovre. Og faktisk, lad mig nu begynde at kortlægge disse. Så faktisk, ved jeg ikke hvorfor jeg tegnede en separat diagram. Lad os holde dette enkle. 

Vi har lige her den begyndelse af vores bord, hvor dette er navnet på marken og dette er datatypen, og ved type I mener følgende. Er det et nummer, er det en streng, en kort streng som et ord, er det et afsnit, er det binære data, som et billede? Og lad os bare drille dette fra hinanden for et øjeblik. Så først navn, nummer, snor, stor bid af text-- PUBLIKUM: [uhørligt] DAVID MALAN: Ja, så streng. Og i en database sammenhæng, vil vi typisk kalder dette char felt. Jeg vil bare sige char for nu, men vi er kommer til at forfine dette om et øjeblik. Tegn felt. Efternavn er sandsynligvis den samme. Køn? 

Mand eller kvinde, så det kunne være en char felt. Det kunne enten være tilbud, citat slut "Male" eller citat, citat slut "kvindelige" eller det kunne være m eller f. Hvis du ønsker at være mere rummeligt, du måske brug for en tredje værdi eller en slags andet felt helt. Og så kunne du bruge sand falsk. Feltet kunne kaldes mandlige, og så kunne du sige sand eller falsk. Men det betyder ikke nødvendigvis fange alle de oplysninger, du måske ønsker. 

Så det viser sig at der er en anden type af felt som kan være nyttige her i en typisk database, benævnt en enum, hvor det er et tegn felt, men du, designeren, komme til opregne de mulige værdier, ligesom tilbud, citat slut "male", citat, citat slut "kvinde" og så videre. Så at uanset værdi er i din database, er faktisk tegn-baseret, men det må være en af ​​disse værdier. Vi ville sandsynligvis ikke have en enum for fornavn eller efternavn. Ellers ville vi have at optælle, som navnet stammer fra, bogstaveligt talt hver muligt fornavn og efternavn. 

OK, så ID hvad skal et ID være? Ja, så måske et tal. Så lad os holde fast i at for nu, nummer. Og efter antal, nummer er lidt for bred nu. For enden af ​​den anden dag, jeg har lyst til vi bør være lidt mere præcis. Nummer kan betyde ligesom, det kunne være noget lignende 1,236. Og det er nok ikke hvad vi mener med et ID. Hvad mener vi nok mener med et ID? 

PUBLIKUM: [uhørligt] DAVID MALAN: Åh, OK, så måske er det ikke engang et tal. Måske er det faktisk en entydig identifikator det er en streng, ligesom et brugernavn. Så absolut, kunne være. Jeg tror, ​​at nogen nok betød numerisk, selv om. Så lad os holde med det. Hvilken slags tal? Hvad er en mere precise-- et heltal. Så en række like 0, 1, 2, 3, så vi vil kalde dette et heltal. Og selv da, jeg kunne være nitpicking, det er ikke egentlig bare en generel heltal, du ønsker. Du har sandsynligvis ikke ønsker negative værdier, bare fordi, det bare føles underligt. Du ønsker sikkert positive heltal. Så du kan også udtrykke at i en database, men for nu, vil vi sige heltal. 

E-mail? Dette er sandsynligvis bare-- en hvad? 

PUBLIKUM: [uhørligt] 

DAVID MALAN: Det er en e-mail, men det er tegn, ikke? Den har bare et funky karakter som en "at" symbol eller noget andet, men det er stadig et tegn felt. Og postadresse? Tegn felt. Så det er en dejlig start, men lad os være lidt mere præcis nu. 

Så det viser sig, at i en database, du ofte har et valg over mere raffineret versioner af disse ting. Faktisk i en typisk SQL database, SQL, eller mere generelt, relationel database, databaser med rækker og kolonner, du ofte komme til at angive ikke kun den type af field-- lad mig gøre lidt plads her-- men også længden. 

Så hvor længe er et fornavn? Jeg tror, ​​D-A-V-I-D. OK, fik det jeg nok bare fornærmet ligesom halvdelen af de mennesker i lokalet, højre, da dine navne er længere end fem breve, så fem virker lidt egoistisk og naiv, så hvad er en bedre værdi? 10, okay, og jeg tror vi er OK i rummet. 13? 30? Hvorfor kan jeg ikke tage tilgang af tidligere, da vi talte om arrays og hukommelse? Hvorfor jeg ikke bare sige ligesom 1000? Ingen navn går at være længere end 1.000. Skub tilbage. 

PUBLIKUM: [uhørligt] DAVID MALAN: Ja, det er ødsel, højre, især hvis de fleste navne er kun fem eller 10 eller 15 tegn, der er meget uøkonomisk. Så ved du hvad? Dette er lidt af en hård spørgsmål. Nu kan vi helt sikkert analysere engelsk og alle andre sprog navne og finde ud af, godt, hvad der er den average-- gennemsnit ikke rigtig hjælpe os-- hvad er max er sandsynligvis, hvad vi virkelig ønsker. Men det viser sig, vi selv har nogle valg over den type her. 

I en typisk SQL-database, du har noget, der hedder en char felt og også en varchar, V-A-R, for variabel felt char. Og forskellen er dette. En char felt, du designeren, skal angive på forhånd den nøjagtige længde af banen. Så måske det første navn ligesom 20 føles slags sikker. Måske nødt til at gøre nogle googling til se, om det er faktisk sikkert nok. Der er sikkert et navn med 21 tegn, men for nu, formoder 20 er sikkert. 

En char felt ville indebære i en database, som du er at bruge 20 og altid 20 tegn. Nu, hvis det er bare D-A-V-I-D, 15 af dem bare kommer til at være tomme tegn, men du stadig bruger alle 20 bytes. En VARCHAR felt, derimod, betyder snor bør være op til 20 tegn men hvis det er kun fem, du kun kommer til at bruge fem eller måske seks for en særlig værdi ved slutningen, gerne, at 0 vi diskuterede, at betegner afslutningen af ​​en karakter sekvens i hukommelsen. 

Så når tror du du kan vælge char versus varchar, da trade-off? Char bruger at mange tegn, VARCHAR bruger ikke mere end så mange tegn. PUBLIKUM: [uhørligt] DAVID MALAN: OK, når du kender længden af ​​strengen temmelig overbevisende at bare bruge char, fordi hvis du ved det, bare sætte den ned. Og måske det er sandt for en zip kode, i USA, i det mindste, 02138, det altid vil være fem tegn, indtil du tilføjer streg fire. Men du har måske nogle værdier for som du altid ved længden. Eller måske statslige symboler, ligesom NY for New York, og MA for Massachusetts i USA. Måske har du har nogle situationer hvor det er helt rimeligt, men ved denne logik, hvorfor er vi selv overthinking dette? Hvorfor vi ikke bare bruge varchar og så vil vi bare altid bruge to karakterer alligevel, eller altid bruge fem tegn alligevel? Hvorfor ikke bare spare VARCHAR for alt, som denne logik? Der skal være en fangst. PUBLIKUM: [uhørligt] DAVID MALAN: Kunne skrive noget galt. Så det er sandt. Men selv da, kan de ikke bruge mere hukommelse end jeg tildele. Jeg har stadig den endelige sige over længden, så de kan ikke komme til at lave den fejl, men en god tanke. Det er mere subtile, men det er meget relateret til vores diskussion, faktisk, af arrays og forbundet lister tidligere. 

Det viser sig, at en database, hvis den ved, at alle værdierne er af en fast længde, selv om nogle af disse værdier er tomme, slags æstetisk tomt, D-A-V-I-D og derefter 15 råemner, det viser sig, at hvis hver felt er den samme længde, meget ligesom et array havde alle sine ting ryg mod ryg mod ryg mod ryg, så du kunne bare plus 1 for at komme til den næste værdi, samme idé i en database tabel. Hvis alle din karakter strenge er den samme længde, du har, hvad der kaldes random access. Hvis alle strengene er af længde 20, ikke gør du bare gør plus en du bare gøre plus 20, plus 20 plus 20 plus 20, og du kan meget hurtigt rulle gennem eller søge gennem alle dine data. 

En variabel char felt, derimod, ikke altid har 20 tegn. Det kunne have 20 og derefter 15 og derefter 19 og derefter 10, og så hvis du ønsker at søge igennem det, kan du ikke bare blindt tilsættes 20 bytes for at komme til den næste. Du bogstaveligt talt nødt til at søge gennem fordi kanten af ​​datastruktur, hvis du vil, er ujævn. Det slags går ind og ud baseret på den faktiske længde af strengen. Så når du kender længden, som Kareem siger, brug en char felt, fordi du får at effektivitet af at være i stand til at søge gennem det hurtigere når du søger efter data, ellers bruge en variabel. 

Desværre, jeg har ikke noget godt svar hvor længe navnet skal være, men for noget lignende et navn, vil jeg sige en varchar er almindelig fordi det ikke vil at være en fast længde for alle. 20, ved jeg ikke, 20 føles lidt stram. Lad os bare sige 50, 50. Det gør ikke rigtig koste dig at meget mere at sige 50 i stedet for 40, men på et tidspunkt, du har brug for at foretage en dom opkald. 

Meget almindelige, helt ærligt, til [? historisk?] grunde, selvom det er overdreven, dvs. 255, fordi nogen tid siden, i populære databasesystemer, ligesom MySQL, en gratis open source værktøj at en masse virksomheder ligesom bruges, selv Facebook, dette var den maksimale standard så folk bare gik med det. Så ikke urimeligt, men vi vil bruge lidt mere intuition og sige, sikker 50, der er nok lidt overdrevet. 

Køn, jeg bryder enum, og så vi kan derfor opregne mand eller kvinde, eller måske mere effektivt, m eller f eller en anden symbolik, men enum føles som et godt valg der. For at være klar, køn kunne bare være en varchar, og vi kunne bare alle enige søde mennesker, til altid sætte de samme værdier der. Mand eller kvinde eller whatnot. 

Men problemet er så, at vi kunne laver en fejl, som [uhørligt] foreslået tidligere i en anden sammenhæng. Hvis vi laver en fejl, kunne vi få forkerte værdier i vores database. Så hvad er rart om databaser ligesom Oracle og MySQL og andre, er, at du har denne sidste lag af forsvar, hvor din DBA, database administrator, hvem er at designe denne tabel som vi er verbalt, kunne sætte på plads en enum som beskytter mod dette ved at angive mand, kvinde, og så ingen ellers ingen programmør kan ved et uheld indsætte en anden værdi. Så det ville være en god ting. Dette er en funktion. 

Så et ID, under forudsætning af en numerisk ID, det burde nok være et positivt heltal. Og vi nogle gange har mulighed for at diskutere længden. Du ville ikke typisk angive et tal her, du vil i stedet angive dette er en int, eller en stor int, da de er typisk kaldes. Men typisk, et helt tal ville være, lad os sige, 4 byte. Og hvis det er 4 bytes, det er, hvor mange bit? 

PUBLIKUM: [uhørligt] 

DAVID MALAN: 32 bit. Så hvor mange brugere kan vi i vores database, hvis de alle har et ID og dette id skal være unikt? 32 bit betyder, at vi har mønstre af en, to, tre, fire, five-- så hvor mange forskellige mønstre af nuller og dem kan du få, hvis der er 32? Det er det samme som spørger, hvad er to til 32? Det er en stor nummer, Jeg kan ikke helt få ret, men jeg ved, det er omtrent 4 mia. Så dette betyder, at din database tabel kan har fire milliarder brugere, og det er det. 

Så det er en interessant design konsekvenser. En anstændig række virksomheder har besluttet, måske ikke så meget for deres brugere tabellen, fordi at have 4 milliarder brugere er en sjælden problem. Dette er en slags Facebook-stil problem, ikke en typisk virksomhed problem. Men måske hvis du har transaktionsjournaler eller en slags data, der konstant bliver skrevet ind i din database der absolut kunne have milliarder og milliarder af rækker, og du bruger et heltal for det, hvad der kommer til at ske, så snart du får at ro nummer 4 milliarder og så du prøver at indsætte 4 milliarddel og 1, så at sige? Jeg forenkle tallene en smule. 

Du kan skære ned, mener jeg, at du nødt til at håndtere det på en måde. Og hvad en computer vil typisk gøre, tænke over det selv fra i morges, hvis du har en 4-bit værdi gerne 1, 1, 1, 1, der, bare for at binde om morgenen sammen til eftermiddag, hvad er dette tal repræsenterer i binær? OK, vi vil gøre det nemmere. Hvad betyder dette nummer repræsenterer i binær? OK, vi vil gøre det lettere, hvad udgør dette i binær? PUBLIKUM: Tre. DAVID MALAN: Tre, fordi vi har dem column-- [LATTER] Puha! Vi havde kolonnen dem og toere kolonnen. Så formoder, at, ja, vores [? indmarken?] var ikke 32 bits, men det var to bit, kan vi tæller fra brugernummer 0, 1, 2, 3, og så er vi sådan tilbage til bruger 00 igen. Så dette er hvad der typisk sker. Hvis du nogensinde har hørt expression-- sandsynligvis ikke, men hvis du have-- heltalsoverløb, hvor du holde spejlvende alle dine bits at være de største mulige værdier, og så er du ude af bits, hvad ville typisk ske? Hvorfor siger jeg 00? Nå, det er tre. Hvordan kan jeg repræsenterer 4? Hvordan kan jeg repræsenterer til nummer 4 i binær? PUBLIKUM: [uhørligt] DAVID MALAN: en-- yeah, siger ikke 100 per se, fordi det har den forkerte konnotation, men 1-0-0. Således at antallet 1-0-0 er faktisk korrekt, men hvis du kun har to bits, hvad har du virkelig gjort? Du har rullet over til 00. Og ja, det er hvad der ville ske. Faktisk kan du tror om dette mere familiært. Hvis du husker, hvad, 16 år siden, verden skulle slutte, når Y2K problemet skete. Hvorfor var det? Well de fleste computere, for fornuftige beslutninger, blev lagring numre som den år 1975 eller 1999 ved blot at bruge to cifre i computerens hukommelse. Så selvfølgelig, hvad der sker når du kommer til år 2000, du går til dette, eller rettere, ja. Så du går til år 2000, men hvis du kun bruger to cifre det ser ligesom årene 00 og så du har rullet over. Og dette er grunden til en masse systemer behov for at blive opdateret på det tidspunkt. 

Så med det sagt, virksomheder som Facebook løbe op imod dette. Så den eneste måde at håndtere situationen, helt ærligt, er til at forudse det. Eller den reneste måde at håndtere denne situation er til at forudse det, så du ikke gør nødt til at foretage ændringer senere. Så i stedet for 8 bytes, ved du hvad? Jeg har tænkt mig at være fremsynede her, selvom det er lidt optimistisk, at vi kommer til at have 4 milliarder og 1 brugere på vores hjemmeside. Men lad os bare bruge 8 bytes, eller 64 bit, som generelt vil være kaldes en stor heltal, meget teknisk. Og det betyder bare du kan have endnu flere cifre i dit nummer. Men dette er en vigtig design beslutning, fordi hvis du vælger et tal, der har for få bits af udtryksfuldhed du faktisk kunne oprette en fejl i softwaren. 

Okay, så lad os wrap op med e-mail og postadresse. Så email, hvor længe skal en e-mailadresse være? 50. Jeg har virkelig ingen idé, men det er sandsynligvis noget lignende, fordi ellers ingen kommer til at skriv dig, hvis det bliver for længe, ​​så 50, Lad os gå med det for nu. Postadresse, hvor længe skal det være? PUBLIKUM: [uhørligt] 

DAVID MALAN: Det er ikke bare et postnummer, selv om. Postadresse, hørte jeg. Så det er ligesom en Brattle Square, komma, Cambridge Mass., komma, 02138. Og i virkeligheden, så lad mig bare trække op en lille regneark her. Det føles som om det er en forspildt chance. Hvis vi har en Brattle Square, komma, Cambridge MA 02138, Jeg føler, at vi kan gøre det bedre end blot postadresse. Hvorfor har vi ikke eksplodere dette en lille smule? Hvad får jeg på? Hvad skal vi i stedet have for vores rækker her, måske? 

PUBLIKUM: [uhørligt] 

DAVID MALAN: Ja, så lad os kalder det street_number, og en understregning er bare en almindelig måde have hvad der ligner et rum, men det er ikke, faktisk. Street, og derefter city-- undskyld? 

PUBLIKUM: [uhørligt] DAVID MALAN: Vi kunne gøre det. Linie én, linje to. Hvorfor ikke vil vi holde det nemt for nu, men det er absolut en acceptabel beslutning. Og så tilstand, og så lad os være lidt amerikansk-centreret for nu og bare gøre postnummer, bare fordi det vil føre til en interessant fejl eller problem her. Så formoder, at nu er vores adresse. Det er lidt mere irriterende, at vi har alle disse flere felter, men nu kan vi mærke tingene lidt bedre. 

Så nu vejnummer sandsynligvis bør ikke være en char, skulle det? Hvad skal det være? PUBLIKUM: [uhørligt] DAVID MALAN: Måske, et tal ligesom et heltal igen? En stor heltal? Du sandsynligvis ikke leve på 4 milliarder Main Street eller noget vanvittigt sådan. Så heltal er sandsynligvis fint, men har nogen nogensinde har levet på en adresse som 1A Brattle Square, eller en og 1/2? findes disse ting, desværre, selvom du ikke har boet der, der er disse anomalier lignende lejlighed 1A, 1B, 1C. Så ved du hvad, vi sandsynligvis bør ikke gå med heltal, ellers vil vi at miste nogle salg. 

Char felt, måske? Jeg ved ikke hvor længe. Det er nok ikke kommer til at være så længe, ​​så 10 eller noget. Ingen kommer til at skrive en længere række, måske. Men igen, skal vi nok give flere tanke til det. Måske google, gøre nogle forskning, men vi vil gå med vores indvolde for nu. Streets, char, 50, ved jeg ikke. På et tidspunkt, er ingen kommer at skrive det på en konvolut, også, så der er nok nogle øvre grænser der. City, samme, sikker, så char 50. 

Stat, kan være US-centreret for nu. Så det kunne være en liste, så venlig af en dom opkald tilstand. Det kunne være som to tegn. Så faktisk, måske, jeg holdt siger char. Jeg mener nok VARCHAR, blot for nogle effektivitet, men vi vil vende tilbage til denne beslutning i et øjeblik. Kunne være en char med længden 2 for staten. Hvis det i USA har, ligesom MA, Massachusetts, NY, New York, NJ, New Jersey, og så videre. Så det kunne fastsættes på det. DC for Washington DC. 

Men jeg tror, ​​Olivier, du foreslået en anden fremgangsmåde. PUBLIKUM: [uhørligt] DAVID MALAN: Ja, så det er en lidt irriterende at skrive, men en enum kunne give mere mening, fordi denne måde, i hvert fald i USA, du kunne optælle, hvis kedelig, men du gør det bare én gang i din database og aldrig igen nødt til at tænke over det, alle 50 to-tegnkoder. Så jeg kan lide enum. Lad os holde fast i, at der, fordi det slags håndhæver mere stringens. Og så zip kode? Jeg tror Andrew havde en tanke om, at PUBLIKUM: [uhørligt] DAVID MALAN: Ja, fem eller ni. Lad os bare holde det simpelt. Bare gør fem for nu. Men måske jeg kunne bare gøre et heltal, ikke? Jeg kunne, men ved du hvad, jeg lavede denne fejl en gang, i en vis forstand. År siden, blev jeg migrerer fra Microsoft Outlook til Gmail, og Outlook har en måde at eksportere alle dine kontakter som en Excel-fil, en CSV-fil, kommasepareret værdier fil. Og jeg lavede den fejl, jeg tænker, på at dobbeltklikke på det, når jeg hentede eksporten, til sørg for at det så ud som jeg havde forventet. Jeg må have ramt Gem eller lad auto-save spark i eller noget. Fordi når jeg importeret derefter det ind i Gmail, det hele arbejdet. Men i årevis, til denne dag, og Jeg gjorde dette fem, 10 år siden, Jeg er stadig at finde venner, som har adresser, der ligner dette. Hvorfor? 

PUBLIKUM: [uhørligt] 

DAVID MALAN: Det tog 0, godt, snarere det tog hele postnummer som et nummer, og derfor er det en indledende 0, hvilket betyder det har ingen betydning. Og så 2138 ser ud til at være min postnummer. Og det er helt ærligt, en irriterende Excel funktion hvorved jeg tror som standard, selv om det er meningen, at bare være tekst, Microsoft Excel beslutter, lad mig være nyttigt, og åh, jeg ser kun tal. Lad os behandle disse som tal. Og det afkorter de førende nuller. 

Jeg sværger til Gud, hvert par måneder jeg finde en adresse, og ud af en slags OCD, jeg går tilbage i og tilsæt 0, selv om jeg aldrig sende folk breve eller noget. Men jeg er stadig at finde rester af dette. Så dette er at sige, er det en god idé? OK, nej, fordi nogen i Massachusetts, på dette område, vil have en o fører dem. Så lad os gå med lignende char, sandsynligvis, fem. 

Og her, indser vi kunne bruge en enum og vi kunne opregne 10.000 mulige postnumre, men der føles som det er nok krydse en linje af, ligesom, fordele. Hvis du har til input, mange data i din database at beskytte mod noget. Så char indså du kunne skrive i H-E-L-L-O som dit postnummer, hvilket ikke er, naturligvis, numerisk. Så der er ingen måde, i en typisk database, at angive kun numerisk og kun fem tegn, så vi bliver nødt til at gøre det i kode. Vi kommer til at gøre det i PHP eller Java eller hvad sprog er vi under anvendelse på serveren for at håndhæve den slags tvang. 

Waow! Okay, så eventuelle spørgsmål endnu? Lad os gøre et andet design beslutning. Det viser sig, at du også komme til at vælge, når designe en SQL database, eller typiske relationelle database-- hvor igen, relationel bare betyder rækker og kolonner, det er hvordan du organisere dine data-- og indse, at hvad det betyder er, Jeg har været misvisende i at, jeg er drawing-- dette er, hvad der kaldes skemaet for en database tabel. Dette er som specifikationer for table-- men når det drejer sig tid For rent faktisk at gemme data, og vi vil gøre dette blot ved eksempel her. Jeg har tænkt mig at åbne op Excel, fordi Excel vil give mig rækker og kolonner. Og det er præcis, hvad Oracle og MySQL og andre værktøjer vil give mig. Så jeg bare vil bruge det til diskussion skyld. Lad mig gå videre og åbne op for en repræsentative dokument her, zoome ind lidt. Så for eksempel vores overskrifter er nu fornavn, efternavn, køn, ID, e-mail, vejnummer, gade-, hovsa. Street, by, stat, blot om passer på skærmen. 

Så hvad dette betyder, at når en brugeren først registrerer til min hjemmeside, det vil være noget lignende David, Malan, m, lad os sige en, malan@harvard.edu, vil vejnummer være som en Brattle Square, Cambridge, MA, 02138, og derefter så videre. Så når jeg siger, at en relationel database eller SQL database er rækker og kolonner, Jeg mener dette. Det faktiske data er lagret i rækker og kolonner. Dette er blot en tilfældighed, at vi talte, og jeg var bare at trække den ud i rækker og kolonner. Dette er blot skemaet, den overordnede definition. 

Så af disse felter her, eller ækvivalent, der, som er de felter, som du mener Jeg er tilbøjelige til at søge på, hvis jeg er en bruger eller hvis jeg er databasen administrator? Ligesom, hvilke felter er jeg faktisk kommer til at søge på? 

PUBLIKUM: [uhørligt] 

DAVID MALAN: Navnet, ja så Jeg kan godt lide, at-- yeah, e-mail kan være temmelig almindelig. Beklager, du sagde navnet. Så maybe-- og igen, vi er slags taler abstrakt. Jeg ved ikke, hvorfor du ville være at søge efter et navn, men der føles rimelig, hvis du søger efter en bruger. Måske hedder, sikker, ID. 

Og det er en glat hældning, fordi jeg kunne udtænke et scenario, hvor måske min chef har bedt mig, hvor mange mænd har vi på vores hjemmeside? Hvor mange kvinder har vi på vores hjemmeside? Og så på det punkt, kan du at søge på banen køn, også, og intet andet. Så der er et trade-off her. Igen, der er ingen rigtige svar, men der er en funktion i de fleste SQL databaser kendt som indeksering, hvorved du, designeren, den database administrator, komme til at afgøre på forhånd, hvilke felter i databasen skal optimere for søgninger på. 

Du kunne meget naivt sige, optimere dette, optimere, at optimere dette, optimere det, og dette, og databasen vil gøre nogle magiske ting under hætte, og gøre noget på en sådan måde at næste gang du søger på nogen af ​​disse områder, det vil faktisk være hurtigere. Dette er muligt. Det betyder ikke annullere sig ud. Men der skal være en pris betalt. 

Hvis du naivt, eller over-entusiastisk siger, indeksere alle disse områder, så at sige, gøre dem alle effektivt søgbare, hvilken pris er du sandsynligvis betale? PUBLIKUM: [uhørligt] DAVID MALAN: Performance. Hvad mener du? Nå ydeevne, i det mindste i kontekst jeg diskuterer, er bedre nu. Det er definitionen af ​​indeksering. Det vil gøre søgninger hurtigere. Så tiden falder, så at sige. PUBLIKUM: [uhørligt] DAVID MALAN: Space. Så igen, disse er en fælles handelspolitik. Jeg kan fremskynde dine søgninger, men det er kommer til at koste dig flere bytes af plads. Hvorfor? Nå, som standard, hvis vi har ingen af disse røde stjerner, ingen af ​​disse indekser, som jeg siger, hvordan du søger efter et navn i denne database? Så lad os trække vores opmærksom på dette eksempel. Hvis vi har David og Scully og Kareem og Arwa og andre i disse rækker, for eksempel. 

Så lad os gøre netop dette. Scully er herinde, og derefter vi har Kareem, og Arwa, og alle andre, hvis du ikke har et indeks defineret, så at sige, det bedste du kan gøre, er lineær søgning. Hvis du søger efter Arwa, vi er ikke vil være i stand til at hoppe ret til hende hurtigt. Vi kommer til at starte øverst og gå hele vejen til bunden, ikke ulig vores oprindelige Mike Smith eksempel. 

Men hvis jeg siger, hey, database, indeks fornavn feltet, så det kommer til at gøre noget avanceret og støtte noget ligesom binær søgning. Det er nok ikke binær søgning per se. Databaser tendens til at bruge en anden datastruktur kaldet B-træer, ikke at forveksle med binære træer, at bare gøre det hurtigere at søge noget logaritmisk i naturen. Men den pris, du betaler for at opbygge, at funktion, at datastruktur i hukommelsen, er flere byte. Så det kan tage nogle megabyte, nogle gigabytes, hvem ved? Det afhænger af dataene. 

Så på et tidspunkt, er du nødt til at beslutte, det er nok ikke en fælles sag. Så hvad er den egentlige fælles tilfælde, hvis du virkelig skulle vælge, hvad kan dine yndlings felter være? E-mail. Og jeg kan lide email, fordi e-mail, i teorien burde være unik. Og så typisk, når man ved på forhånd, at en af ​​dine marker er eller vil være unik, at tendens til at være en god felt at søge på, fordi den måde, når du søger efter noget, du kommer til at komme tilbage en eller nul svarene og så er du færdig. Du behøver ikke at holde leder efter endnu andre. 

Og så i dette tilfælde her, e-mail, så længe du ikke kan registrere to gange med den samme e-mail, er en god en. ID definition i datalogi verden, Hvis du taler om en ID, som bedre havde være unik. Det er slags konnotation af id eller id. Og resten af ​​disse kunne være, lad os kalde dem rart at haves, men ikke rigtig nødvendig. 

Og så i en database, du angiver indekser, men du kan være endnu mere præcis. Man kan sige, hey, database, skal du sørge at hver ID i denne tabel er unik. Må ikke engang lade en programmør uheld sat i en dublet e-mail eller kopiere ID-nummer. Så meget som Gentagelsestyper beskytte os på samme måde, du kan have disse lavere niveau forsvar. Og så database design, i vis forstand, er form for sjov, fordi du gør det defensivt. Du slags antage, at du arbejder med forfærdelige, forfærdelige programmører og du ønsker at sætte i så mange forsvarsværker som du kan for at beskytte dine data, men samtidig ønskede at hjælpe dem med at klare sig bedre ved at vælge hvilke felter til at optimere for. Men du kan ikke nødvendigvis gøre det i et vakuum ligesom vi slags er her. Du har fået at vide, hvad er de almindelige tilfælde være. Hvis udviklerne er gennemføre en adressebog, du kan meget vel ønsker at kunne at søge på næsten alle områder, bare af natur af ansøgningen. Så måske du bruger at ekstra plads. 

Right, nogen spørgsmål? Ja. 

PUBLIKUM: [uhørligt] 

DAVID MALAN: Nej. 

PUBLIKUM: [uhørligt] 

DAVID MALAN: OK. 

PUBLIKUM: [uhørligt] 

DAVID MALAN: Åh, så vi taler på en måde nu det er helt sprog agnostiker. Så vi taler nu om relationelle databaser mere generelt eller SQL databaser mere generelt. 

PUBLIKUM: [uhørligt] 

DAVID MALAN: Et bedre ord at bruge er, kan bruges af alle sprog. Så jeg kan skrive JavaScript-kode, C kode, C ++ kode, Java-kode, Ruby kode, som alle tale med en database og udføre forespørgsler. Faktisk, det er ikke en dårlig segue til et eksempel forespørgsel. Og igen, vi ikke kommer til at gå ind i Java eller C ++ eller et af det længere, men i SQL, det sprog, som jeg holder henvise Structured Query Language, dette i sig selv er et programmeringssprog, men det er meningen skal anvendes til, nej overraskelse, Structured Query forespørgsler. 

Dermed mener jeg dette. Den måde, du vælger data fra en MySQL-database er du bogstaveligt talt skrive dit program noget lignende Vælg stjerne fra brugerne. Jeg går ud fra, at denne tabel, herefter kaldes brugere. Jeg kunne kalde det noget, vi ønsker, men den slags giver mening. Og så skal du vælge en meget fælles verbum, hvis du vil i SQL, der bogstaveligt talt gør det. Hvad tror du stjerne betyder i denne sammenhæng? 

PUBLIKUM: [uhørligt] 

DAVID MALAN: Jeg er ked af? 

PUBLIKUM: [uhørligt] 

DAVID MALAN: Ikke påkrævet, er det mere rummeligt end det, faktisk. Det er det wild card karakter. Stjerne næsten altid betyder noget, så det betyder i dette tilfælde, vælge alt fra databasen. Så når jeg siger dette, mener jeg give mig tilbage hver kolonne fra min tabel kaldet brugere. Så giv mig et resultat sæt, som det hedder. Med andre ord, give mig en kopi af regneark, er, hvad jeg får på. 

Men hvis jeg sagde vælge stjerne fra brugere hvor ID er lig med 1, hvor stor skal mit resultat sæt så være? Eller tilsvarende, bør hvor mange rækker Jeg afleveres tilbage fra databasen? Sandsynligvis bare en, hvis jeg har faktisk behandlet ID som et entydigt id, og hvis David har den unikke id, jeg bør komme tilbage én og kun én række indeholder alle Davids oplysninger. Hvis jeg sagde dette, hvor ID lig 99, skal jeg komme tilbage, i denne forbindelse nul rækker, mindst i øjeblikket. 

Men hvis jeg ikke rigtig pleje om alle disse oplysninger, Jeg kunne bare sige, hvor kommer David bor? Vælg postnummer fra brugere, hvor ID er 1. Dette vil vælge mig kun Davids zip kode og ikke helheden af ​​den pågældende række. Hvorfor kan jeg gøre dette i stedet for stjernen forespørgslen, wild card? 

PUBLIKUM: [uhørligt] 

DAVID MALAN: Ja, jeg måske kun har brug for det. Så ydeevne er igen svaret her. Hvorfor bede om mere oplysninger, end du har brug for, for selv om det er i orden sammen, du stadig nødt til at kopiere disse data, det synes, fra databasen ind i dit program eller anden måde, og det er bare dumt, hvis du kun brug for fem af disse cifre, ikke hele den række. 

Så hvordan kan jeg indsætter en bruger? Antag en bruger har bare registreret første gang. Syntaksen normalt ville se sådan ud. Indsæt i brugere, og så ville vi sige værdier, og så ville vi sige værdier lignende, lad os sige, Lauren Scully, vores fotograf lige her. Og det næste felt er køn. Så vi vil sige tilbud, citat slut "F", så har vi et id og jeg har tænkt mig at say-- lad os foregive hun ikke er faktisk her, så vi vil spole tilbage i historien. Så 2 vil være hendes id. Og derefter den næste felt her er hendes e-mail. Så det kommer til at være ligesom Lauren Scully og så videre, og vi vil bare dot dot dot den væk fra her på. Nu vil det blive lidt kedelig, men insertet forespørgslen ville i sidste ende ligne det. 

Hvis jeg ønsker at slippe af med Scully, uh-oh, lad os afmelde hende, hun sletter sin konto, slette fra brugere, hvor ID er lig 2, vil slippe af Scully. Eller jeg kan sige opdatere brugere indstillet, lad os sige, hvad kunne vi ændre? Antag hun bevæger sig. Set zip lig 021-- nope, det er hendes nuværende lynlås. 90210. Den eneste anden postnummer Jeg kender i verden. Så det ville ændre hendes zip code-- faktisk, der ville ikke ændre hendes postnummer. 

Hvad gjorde jeg bare gøre? Selvom syntaksen er sandsynligvis nyt. 

PUBLIKUM: [uhørligt] DAVID MALAN: Ja, jeg flyttede alle til Beverly Hills, Californien. Så jeg burde faktisk sige, hvor ID er lig med 2. Og så videre. Så SQL handler om disse former for instruktioner. Vælg, indsætte, slette, opdatere, med disse prædikater ved udgangen disse hvor klausuler, så at sige. Og der er meget mere du kan gør, men det er virkelig bare koges ned blot, hvis arcanely, der udtrykker hvad du ønsker, at databasen for at gøre. 

Og derefter databasen vil finde ud af, når du indsætter Lauren Scully ind i database, hvor man kan sætte hende i hukommelsen så vi meget hurtigt kan få hendes baseret på hendes email adresse eller baseret på hendes ID-nummer eller lignende. Ja, Dan. PUBLIKUM: [uhørligt] DAVID MALAN: Rigtig godt spørgsmål. Vil disse scripts skifte fra Microsoft Access til Oracle til MySQL til PostgreSQL? Det korte svar er det afhænger af. I teorien er der en meget betydelig fælles undergruppe af SQL der er delt på tværs af alle af disse implementeringer. Dog, forskellige producenter har tilføjet funktioner til deres databaser at gøre visse ting uden for rammerne af disse funktioner, der kan faktisk gå i stykker. 

Så den måde udviklere afdække dette, er, at snarere end at skrive rå SQL kode som jeg skriver her, de i stedet bruge et bibliotek, en fælles bibliotek, selv er en slags højere niveau og abstracts væk, hvilket produkt du bruger. Og det giver dig funktioner og procedurer at ringe, så du aldrig faktisk skrive rå SQL. 

I teorien, så kan du ændre produkter fra Oracle til Microsoft eller omvendt eller noget andet, og du bogstaveligt talt ændre noget om din kode. Virkeligheden er dog,, du nogle gange opgive karakteristika på grund. Du har måske valgt et produkt, fordi det har fået disse værdiskabende funktioner, og du er bare nu ikke bruger dem bevidst. 

Og anekdotisk, de fleste virksomheder har en tendens aldrig at bevæge sig væk fra deres database. Så mens det er et rart at har træk, virkeligheden er, hvis du overhale din database, er du sandsynligvis gøre klaser af andre ændringer alligevel, at du ikke nødvendigvis nødt til at foregribe det. Så det er velsagtens over-engineering problemet, men det virkelig afhænger af konteksten. Men i teorien, er SQL delt på tværs af disse forskellige produkter. Virkelig gode spørgsmål. Ja. 

PUBLIKUM: [uhørligt] 

DAVID MALAN: Ja, så du kan tænke en database er blot en server, i slutningen af dagen, og inde i nævnte server er en hel masse tabeller, rækker og kolonner. Og når du sender en forespørgsel som denne fra dit program, din hjemmeside, skrevet i Java, Ruby, Python, uanset hvad, serveren modtager denne kommando og fortolke det i bogstaveligt på samme måde vi diskuterede tidligere med fortolket sprog, og derefter udføre en handling på nul eller flere rækker i nul eller flere tabeller. PUBLIKUM: [uhørligt] 

DAVID MALAN: Præcis, præcis. Så pseudokode for noget ligesom der kan være dette. I din PHP fil eller din Python-fil eller din Java-fil, du ville have pseudokode kode, eller Scratch-lignende blokke som, hvis brugeren besøger acme.com/register~~V for første gang, derefter indsætte i brugere og så videre. Og vi ville oversætte dette til mere konkret kode i sidste ende. Men virkelig, vi har alle byggestenene her, selvom vi springe nogle af trinene gennemførelsen. 

Så lad mig finde fejl med det, vi vidunderligt gjorde bare et øjeblik siden. Du har oprettet en smuk komplet tabel for brugere. Ganske vist kunne vi gennemføre det i et par forskellige måder, men du rent faktisk har ført os ned path-- og sige jeg dig, men det er nok min fault-- af en temmelig ineffektiv database implementering. Det er ikke normaliseret. 

Og ved normaliseret jeg mener der vil være, over tid, en væsentlig redundans, og derfor ineffektivitet, der er spild af plads. Baseret på kun hvad du ser her, kan du forestiller hvor denne spild af plads vil komme fra, over tid, som flere og flere brugere registrere til din hjemmeside? Hvilke data kan blive overflødige? 

PUBLIKUM: [uhørligt] 

DAVID MALAN: Hvorfor mener du det? PUBLIKUM: [uhørligt] DAVID MALAN: Ja. Og lad os antage, med henblik af i dag, at det er sandt. Slår ud, og vi har lært dette på den hårde måde, det er ikke sandt. Anden måde flere byer har, eller anden måde, det samme postnummer, som bryder denne vidunderlige intuition. Men lad os antage, at er sandt, fordi det er næsten altid sandt. Så antage, at et postnummer er altid forbundet med samme by og stat, hvilket er lidt rimelig antagelse, men forkert, viser det sig. Men en rimelig antagelse for nutidens formål. 

Så formoder, at jeg bor i Cambridge, MA, ifølge denne brugers bord, og antage, at Lauren Scully bor i Cambridge, MA, og antage, at Kareem bor i Cambridge, MA, og Arwa bor i Cambridge, MA, alle os i 02138. Hvorfor er vi huske Cambridge, MA, 02138 for alle fire af os? Hvad skal være tilstrækkeligt til at huske? 

PUBLIKUM: [uhørligt] DAVID MALAN: Bare postnummer. Bare, at 02138 eksisterer, fordi du ved, hvad vi kunne gøre? Vi kunne få lidt fancy her og herovre, definere en anden tabel hvor dette vil være den navn, vil dette være den type, dette vil være den længde, og nu er jeg vil kalde dette mit byer bord. Dette blev kaldt, af Selvfølgelig min brugere bord. Og så hvad skal jeg sætte herovre for min byer tabellen, tror du? 

PUBLIKUM: [uhørligt] 

DAVID MALAN: Ja. Så zip og stat og by. Og så den type her, vil vi sige dette vil være en char 5 igen, forbehold debatten af ​​tidligere. Dette vil være en enum, måske som før, vil og by være en varchar 50. Og så nu, hvad får jeg at slette fra denne tabel at fjerne denne ineffektivitet? 

PUBLIKUM: [uhørligt] DAVID MALAN: Nice. Stat og by gå væk, så jeg har nu elimineret den potentielle ineffektivitet for redundant huske, Cambridge, MA, Cambridge, MA, Cambridge, MA, Cambridge, MA, som forhåbentlig er aldrig vil ændre sig. Og selv hvis den gør, er det minorly irriterende, nu at jeg er nødt til at ændre det i flere rækker, mens her, jeg kunne bare ændre det på ét sted. 

Nu hvad er trade-off, måske? Det var super praktisk. Havde alle mine data pænt sammen. Men hvad er klart tilfældet nu? 

PUBLIKUM: [uhørligt] DAVID MALAN: Præcis, og jeg er glad for du brugte ordet slutte, fordi det er faktisk nøgleordet, i verden af ​​relationsdatabaser i SQL, er det en faktiske ord, du kan skrive eller i det mindste formidle. Og i virkeligheden, hvad vi nu skal gøre at vælge Davids fuldstændige oplysninger er noget lignende Vælg stjerne fra brugere, deltage byerne, on-- og nu Jeg har tænkt mig at bare flytte til en anden linje så denne fits-- users.zip lig cities.zip, hvor users.ID er lig med 1. 

Så hvad sker der? Det er grimt at kigge, men du kan slags læse det venstre til højre, top til bund. Vælg stjerne fra brugere er den samme som før, men det er ikke fra brugere, per se. Det er fra brugere slutte byer. Hvad skal jeg forbinder de to tabeller på? Nå, tilsyneladende, den brugernes tabeller zip felt, og denne periode er blot særlige syntaks til at udtrykke den idé, og det er de byer borde zip felt. Jeg ønsker de to at være lig, men jeg vil gerne i sidste ende vælge kun de rækker, hvor ID i brugernes tabellen er lig med 1, som tilfældigvis mine. 

Og bare for at være klar, en programmør, typisk når hardcode noget som antallet 1, for ellers hjemmesiden kun støtter David eller allerførste bruger, du i stedet ville gøre noget som ID, hvor dette repræsenterer en variabel, noget der kan ændre sig over tid, lignende i ånden til, hvad jeg sagde tidligere med den slags pladsholdere. Men for nu vil vi bare hardcode det som en. Og så hvad betyder det? Tja, en dejlig måde at visualisere dette er at hvis denne hånd er brugere tabellen, og denne hånd er lynlåse tabel, vi er slags finding-- og spidsen af ​​mine fingre er zip herovre, og spidsen af ​​mine fingre her er zip, er du slags sikringsanlæg det så du får tilbage den resulterende oprindelige tabel, ved virkelig sammenføjning de to tabeller om de fælles område. Og det behøver ikke at være zip. Det kunne være mest noget andet, men zip er rart, fordi man, det er kort, to, det er altid det samme længde, så der er en reel effektivitet til hvad Olivier foreslås her med factoring ud lynlåsen, og [Uhørligt] foreslår, at vi slipper af byen og stater. 

Så dette er den proces kendt som normalisering. Eventuelle spørgsmål om, at? Jamen så lad mig påpege det er den slags ting, selvom det er temmelig lavt niveau, denne diskussion, at man skulle tro du slags få tabt i ukrudt, dette er en manifestation af rigelig mulighed for udviklere at være dårligt. Og i virkeligheden, selv når vi, i kurser, jeg har lært, når vi har haft, for eksempel, uerfarne bachelor programmører bygge websites, ved første øjekast, hjemmesider kan se fantastisk. Og de har alle de funktionalitet vi har krævet, udviklerne gjorde et godt stykke arbejde. 

Men de havde ikke nødvendigvis ved nok om databasedesign eller de ikke tænke hårdt nok om de typer af data og de typer af brugerne hjemmeside skulle have, og vi finder da, seks måneder senere, efter at de har opgraderet eller flyttes på, at damn it, vores hjemmeside er virkelig, virkelig langsom. Og jeg er ikke engang tale om at have millioner eller tusindvis af brugere. Jeg mener et par hundrede brugere på campus, som alle gerne, for eksempel, shop for kurser på samme tid, de er ved hjælp af denne kursuskatalog ansøgning jeg nævnte og ting bliver virkelig langsom, fordi der ikke var nogen indekser. Der var ingen røde stjerner, så at tale, eller vi havde ikke nødvendigvis indregnes de fælles data til få nogle besparelser på plads. 

Og så når behandlingen af ​​en udvikler eller database person eller lignende, den slags spørgsmål at tænke igennem er endda, når vi gennemgår en andens kode, at sige, ikke nødvendigvis ser gennem alle deres kode, men siger, lad os se gennem databasetabeller. Hvad er du opbevare? Og så at sige, godt, vente en minut, hvorfor bruger du et heltal? Hvad hvis vi har 4 milliarder og en af ​​disse rækker? Og den slags spørgsmål er en mulighed at slags skubbe tilbage og få en fornemmelse af, hvor hvis du ikke er tryg ved at gøre det, at have nogen mere teknisk stille disse spørgsmål, af, hvorvidt personen virkelig kender deres kram. Og det er den form for ting, også, at folk på internettet, der er selvlært, måske lære mindre hyppigt, fordi du ikke nødvendigvis kommer på tværs af det så meget, fordi du kan få databasen op at køre, men medmindre du har læst op på tutorials eller været fortalt om database normalisering og indeksering og ydeevne, disse er den slags ting der kommer til at skade dig. Og du måske tror, ​​eller en dårlig ingeniør måske sige, åh, ja, vi bedre løn for en større database eller en hurtigere database eller bare smide penge på dette, lodret skala, ikke nødvendigvis tilfældet. Hvis du går in-- og du kan gå i efter fact-- og tilføje indekser, og det kan tage et par timer til database at opbygge det nye data struktur, som jeg hentydet til tidligere, du kan stadig løse dette efter den kendsgerning, at det er her du begynde at skelne gode designere fra dårlig designere, ikke bare æstetisk, men performance-wise så godt. Nogen spørgsmål? Ingen? Så for NoSQL, som var den anden type af database, som jeg hentydede tidligere, du ikke har rækker og kolonner. I stedet ville du have noget der ser lidt mere som denne. Jeg har tænkt mig at bruge fælles syntaks. Curly seler tilfældigvis bruges her ganske meget. Du har måske noget ligesom fornavn er David, du har måske sidste navn er Malan, citater, du måske har ID is-- undskyld mig, whoops-- ID er en, e-mail er malan@harvard.edu, og jeg vil ikke gider skrive resten, og derefter nogle andre ting. 

Med andre ord er dette en tekstuel repræsentation af, hvad vi generelt ville kalde et objekt i et computerprogram. Og en genstand er generelt bare en samling af de vigtigste værdi par. Så igen, denne tilbagevendende tema. Vi så central værdi par i HTML, vi så nøgle værdipar nu i forbindelse med databaser, og vi så centrale værdi par i forbindelse af, tror jeg, et sprog tidligere i dag. Holder kommer op. Og ja, det er virkelig hvilke data kan koges ned til, data og metadata, eller værdier og nøgler henholdsvis. 

Så en ikke-relationel database, noget, der bygger på genstande, hvor man bare klumper det hele sammen og sætte det i hukommelsen, vil generelt være afbilledet som eller tænkt på, da dette. Og jeg vil overlade nu som slags alternativ fremgangsmåde. Og man er ikke nødvendigvis bedre end den anden. Faktisk meget på mode disse dage er databasesystemer ligesom MongoDB og Redis og et par andre sådanne værktøjer, frit tilgængelige, men de er stadig mere da mode. Dels fordi de tilbyder ekstra har over disse tabelform tilgange, men også fordi de er lidt lettere at bruge, fordi du ikke behøver at tænke så hårdt om en masse af disse designbeslutninger. Så plusser og minusser. Så indser der er muligheder ud over, hvad vi lige brugt tid på. 

Så lad os gøre det. Lad os overgangen lidt tilbage nu til web programmering, så vi slags indgå dag med noget Det er lidt hands-on, påfyldning i nogle huller fra i går. Lad mig gå til denne første. Så minde om, at i går vi havde nogle kanoniske HTML sider, der oprindeligt havde, kun HTML, og derefter sekundært havde CSS, cascading style sheets. Dette er et nyt tag, som vi ikke se i går, eller dvæle ved, såkaldt script-tag. 

Slår ud du faktisk kan integrere en sprog hedder JavaScript i din web side og gøre din web sider gør noget. Så hvad mener jeg med det? Nå, lad mig gå videre og bare låne denne kode for et øjeblik. Jeg har tænkt mig at gå ind i Cloud9, intet behov at gå der selv lige nu, og jeg har tænkt mig at kalde denne alert.HTML. Jeg har tænkt mig at indsætte i min fil her. Og bare for at præcisere, hvad jeg har gjort, så lad mig gå til denne adresse og gå at advare, og du ser Hello World. 

Men det er lidt underwhelming. Jeg ønsker at gøre noget lidt anderledes. Så jeg har tænkt mig at rent faktisk at gøre dette. Jeg har tænkt mig at gå i her e, og i mellem mine scripttags, siger alert ( 'hej, verden'); så varsel det er lidt sjusket, men jeg har fået HTML, inderside er en sprog kaldet JavaScript og det er det, der kaldes en funktionskald eller procedure call. Dette er et verbum, bogstaveligt talt, i dette tilfælde, og jeg påberåber kode funktionalitet at en anden skrev. 

Således at funktionaliteten er en alarm, så lad os gå til denne side nu og klik reload, og nu se en lille smule af interaktivitet. Det er slags gamle skole og grimme. Denne form for minder dig om pop-ups, måske, af gårsdagens men det gjorde gøre noget lidt mere programmatisk. 

Så mere end det, lad os gøre noget mere interessant. Lad mig gå ind her og slippe af med dette. Og jeg har tænkt mig at gå videre og oprette en formular, som vi gjorde i går. Faktisk, ved du hvad? Jeg har tænkt mig at gå ind i google.html, som vi startede på i går, der lignede dette, via hvilken vi søgt efter kat Men bemærk at der er sådan en fejl i den aktuelle version. Det virker for katte, men formoder, at Jeg kan ikke samarbejde, og jeg skriver ikke noget, og jeg klikker simpelthen indsende. Det er lidt underligt adfærd. Tog mig til den virkelige Google, gav mig ikke en fejlmeddelelse. Jeg vil gerne fortælle brugeren du nødt til at give os en værdi. 

Så hvordan kan vi gøre det? Jamen så lad mig gå tilbage til Cloud9 og lad mig gå ind i toppen af ​​min side og tilføje et script-tag som dette, hvor Jeg har tænkt mig at skrive nogle JavaScript-kode. Og jeg har tænkt mig at gøre følgende. Hvis (document.getelementByID-- og tilbagekaldelse at vi talte om det tidligere, denne funktion. Hvad ID ønsker jeg at få? Jeg ønsker at få q, og jeg har tænkt mig at sige lig ingenting, ligesom denne-- faktisk lade mig bruge dobbelte anførselstegn bare for consistency-- lig ingenting, derefter alert ( "Indtast en forespørgsel") her. 

Så jeg har, hvad der synes at være noget som en betingelse. Vi har set denne generelle idé i Scratch. Det er ligesom en af ​​dem puslespil stykker, der lignede dette. Og hvad er det jeg siger? Nå, hernede, mærke jeg er kommer til at gøre følgende. Jeg har tænkt mig at give denne formular felt ikke blot et navn q, som er det, der får overført til Google, men jeg er vil give det en lokal identifikator, også kaldet q. Men jeg kunne kalde dette noget jeg ønsker, jeg bare at holde det simpelt og også kalde det q, bare for enkelhed. 

Og nu vil jeg gøre noget lidt mere. På formularfelterne her, vil jeg tilføje, hvad der kaldes en event handler. På indsende, jeg vil ringe til en funktion kaldet validere. Dette findes ikke endnu, det ord, eller denne verbum validere, fordi det, jeg har tænkt mig at gøre heroppe nu tilføje noget kode. 

Jeg har tænkt mig at sige funktion validere. Jeg har tænkt mig at indrykke dette og tilføje en anden krøllede klammeparentes her og en anden her. Overvej, hvad det er nu gør. Jeg har nu-- tænke på dette som skabte min egen brik, der ikke tidligere eksisterer, og jeg har kaldt dette puslespil stykke af validere brik. Dens formål i livet er at udføre de fire linjer kode inde i den. 

Hvis document.getElementById så begrebsmæssigt, der kommer til at gå ind i elementet, HTML element hvis unikke Ideen er bare q, og derefter selv om syntaksen ser lidt underligt, at lige lig betyder bare ligemænd. Så det betyder, hvis elementet med unik identifikation af q, når fået, har ingen værdi, det bare er lig citat Citat slut, intet derinde, så hvad ønsker jeg at gøre? Jeg ønsker at råbe på brugeren. 

Og vi vil ikke gå detaljer her. Jeg har tænkt mig at vende tilbage falsk. Det er en fejl. Else, jeg har tænkt mig at returnere sandt. Så enten det virkede eller det gjorde ikke. Falsk eller sandt. Og nu, hvis jeg ikke gøre nogen fejl, lad mig gemme denne og genindlæse dette. Og lad mig lige dobbelttjekke, at Jeg har ikke, i virkeligheden, foretage eventuelle stavefejl, så jeg ikke genere mig. Lad os se, om det virker. 

Så nu vil jeg skrive katte. Det virker stadig, eller halv værker, i det mindste. Lad mig nu genindlæse den, og lad os nu mig forsøge at sende uden at skrive anything-- damn it, det brød. Et øjeblik. Lad mig åbne konsollen, [Uhørligt] log, genindlæse siden. Lad mig prøve dette igen. Åh, for pokker. Jeg glemte. Jeg lavede en tastefejl. Jeg kan huske, hvad det er. .værdi. Jeg ville sige, hvis værdien af elementet, hvis ID er q lig det, så råber på brugeren. 

Så lad mig holde min ånde igen. Nu sker det. Sådan der. Indtast en forespørgsel. Så det er ikke at lade mig igennem. Jeg kan være slags legende med dette, og i stedet for at kontrollere for ingen værdi, Jeg kan sige noget lignende, ikke mere at søge efter katte, og nu kan vi bare mere legende lad brugeren søge efter hunde, hvis han eller hun ønsker, eller hvis jeg går ind her og søge efter katte, nu kan jeg ikke. 

Så hvad er takeaway her? Så man har vi indført i vores verden af ​​HTML og CSS, programmering funktionalitet. Jeg kan faktisk nu træffe beslutninger i koden. Tidligere alt hvad jeg kunne gøre, er at markere tekstmæssige indhold eller grafisk indhold og fortælle det hvad man skal kigge ud, og hvor der skal vises. Nu kan jeg faktisk spørge spørgsmål af websiden og træffe beslutninger baseret på det, og bede brugeren hvis jeg har brug for at råbe ad ham eller hende. 

Så lad os prøve noget på vores egne med dette. Gå videre, lad mig åbne op for den næste dias her, og blot påpege én ting. Ligesom med CSS, kan vi faktor ud vores JavaScript-kode til en separat fil, du kan gøre det samme med JavaScript som med CSS. Og du bruger, at bruge en kilde attribut af scriptet tag. Men vi vil ikke komplicere tingene for nu. I stedet hvis du kunne gå til ikke denne side, men-- lad mig flytte dette rundt i order-- gå til, hvis du kunne, denne side her. Denne webadresse her. Det er i dagens lysbilleder. Du har måske at genindlæse fordi Jeg har tilføjet et par ting. 

Men gå der, hvor nogle gåder venter. Og det vil give os en chance, i en lidt mere sjov sammenhæng, at fuske med nogle JavaScript. Og når du får der, Jeg vil forklare, hvad der venter. Få grønt. Set blå. Sætter grøn, indstiller rød. Ups. Undskyld. 

Dette er omfanget af vores dokumentation for denne udfordring. Og det kommer til at fungere som følger. Så hvad du har på dette side er en hel masse af billeddata puslespil med en kammerat på Stanford University. Så hvad du ser her er næsten form for en af ​​de magiske øje puslespil, men hvis du bare stirrer på det, intet kommer til at poppe ud på dig. Snarere noget er skjult i dette billede. Og det er skjult på følgende måde. Billeder, som du måske ved, kan være sammensat af blot tre farver. Nogle røde, nogle blå, og nogle grønne. Og vi kan gøre hele farver i regnbuen ved at blande disse tre farver eller anden måde. 

Så det ser for det meste grønt og blå, men som Nick siger her, dette jern puslespil billede er et puslespil. Den indeholder et billede af noget berømt imidlertid billedet er forvrænget. Den berømte objektet er i de røde værdier. Men den røde værdier er alle blevet divideret med 10. Så de er for små med en faktor 10. Så med andre ord, Nick tog et originalt billede, og han desaturerede alle af den røde fra det, sænke mængden af ​​røde blæk, hvis du vil, i den. 

De blå og grønne værdier er alle lige meningsløst, tilfældige værdier, alias støj designet at tilsløre det virkelige billede. Så hvad Nick gjorde, var han tonet ned den røde og derefter han bare kastede tilfældig mængder af blå og grøn på billedet til slags obskure hvad er faktisk stadig. Du skal fortryde disse forvridninger at afsløre billedet. Først indstille alle de blå og grønne værdier til nul for at få dem ud af vejen, og se på resultatet. Derefter multipliceres hver red værdi med 10, skalering tilbage op til cirka sin endelige værdi. Hvad er den berømte objekt? 

Så alt du har denne rektangel i din browser lige nu. Og bemærke, at der er en vis forret kode, så at sige. Dette er JavaScript-kode, Nick har skrevet til dig. Og bemærke, at der er en linie i midten, starter med en skråstreg skråstreg, der er hvad der generelt kaldes en kommentar. Det betyder, at det er en sætning til programmøren som ikke har nogen funktionel betydning. Det er bare en visuel cue til mennesket. 

Så du kan gå videre og slette bare den linje, og være super omhyggelig med ikke at slette eller ændre noget andet. Og lad mig bare gå dig gennem hvad denne kode gør, og jeg vil overlade det til dig at finde ud af hemmeligheden billede. Denne første linje her, at jeg har bare fremhævede giver dig følgende. På venstre side, du har, hvad der kaldes en variabel, Nick har vilkårligt, men med rimelighed kaldes im for billedet. På højre side af at lige tegn, han siger give mig en ny tilbud, citat slut "simpel billede". 

Simple billede i denne forbindelse er, hvad der kaldes en klasse, godt, Det er lidt ligesom en class-- teknisk en prototype-- men virkelig, Dette giver mig et nyt objekt, hvis indhold er filen, jern-puzzle.png. Med andre ord, og Nick oprettet denne forestilling om en simpel billede så vi kan, for pædagogisk formål, lege med billedet og ændre dets røde, grøn og blå værdier. 

Og hvordan gør vi det? Denne noget kryptiske syntaks her er lidt ligesom den gentagne blok at nogle af jer så i Scratch tidligere i dag, hvor du kan gentage 10 gange. I dette tilfælde, Nick har ikke hardcodede en række ligesom 10. I stedet siger han, initialisere en variabel kaldet x til 0, kontrollere, om x er mindre end bredden af ​​billedet. 

Og således være mere korrekt, billede er det variabel, prik betyder gå inde i det og få sin bredde, og derefter åbne parentes, lukket parentes er bare en programmør måde for at sige det er en funktion. Dette er en procedure. Dette er funktionalitet en anden skrev. Brug den og give mig tilbage et svar. Og så x ++ er en fancy måde siger, efter at du har gjort dette én gang, tilvækst x med 1. Med andre ord er dette er en programmør måde inducere en løkke, der er vil gentage over alle kolonnerne i et billede. 

Et billede er bare et gitter af prikker, rækker og kolonner af prikker. Dette er en måde at iteration over alle disse kolonner. Og på indersiden, i mellemtiden, vi iteration over højder, her og her og her. Så dette er blot en måde at traipsing, næsten som en gammel skole skrivemaskine, bare gå over hele billedet iterativt. Selv det er ikke helt helt klar, bare tage på tro for nu, at disse tre linjer kode sammen er kommer til at give dig mulighed for iterativt se ved hver pixel, hver prik i billedet. 

Hvad er en pixel? Nå, for at være klar, hvis vi ser ved den oprindelige og zoome ind, hvis du virkelig lægge dine øjne til computerskærmen, det er bare en hel masse prikker, flere tusinde prikker pakkes sammen der. Og så hvad er du om at gøre? Hver af disse prikker, en endelig definition, er et resultat af, hvad der er generelt kaldet RGB, rød, grøn, blå, hvilket igen, kan kombineres til at give dig nogen antal farver. 

Faktisk, hvis du kan huske fra mange, mange år siden, projektor skærme som disse ting bruges til at have ikke én linse, men tre. En af dem spytte rødt lys, en af dem spytte grønt lys, en af ​​dem spytte ud blåt lys. Og hvis du var i en mellemskole ligesom jeg var, hvor de var aldrig justeret korrekt, du var altid se historie film der var lidt forvrænget, fordi de tre farver var ikke kombinere korrekt. 

Men det viser sig, at hver af disse værdier røde, grønne og blå, kan have en række forbundet med dem. For eksempel 0 til rød betyder ingen rød, 0 for grøn betyder ingen grøn, og 0 for blå betyder ingen blå. Så hvis du ikke har nogen rød, ingen grøn, og ingen blå, hvad farve har du? 

PUBLIKUM: [uhørligt] DAVID MALAN: Du ville håber det, det er hvidt. Desværre er dette operates-- undskyld? 

PUBLIKUM: [uhørligt] DAVID MALAN: Så du faktisk har sort, i dette tilfælde. Så hvis du har ingen af ​​disse farver tændt, har du sort. Men hvis du har, lad os sige en masse af dem, som en masse rød, 255 af den, en masse grønt, og en masse af blå, der er hvidt. Så det er de to yderpunkter. Så ved denne logik, hvis jeg har en masse rød og ingen grønne og ingen blå, hvad farve er det? PUBLIKUM: [uhørligt] DAVID MALAN: Right, naturligvis. Og derefter ingen rød, masse grøn, ingen blå, og derefter hvis du have-- godt, vil vi bare slutte det, bare fordi, men dette er naturligvis, nu, er blå. Og nu kan du kombinere disse farver. Nu som en sidebemærkning, hvis nogen af ​​jer har nogensinde gjort nogle egentlige hjemmeside design, du måske faktisk se symboler som dette. FFF-- og faktisk, det er sandsynligvis ikke engang det. Det er FFFFFF. 

Nogen nogensinde set F'er og E s og A through-- så det viser sig, vi talte i går om decimal, og i dag, sådan om decimal. I dag har vi talt om binær. Slår ud, hexadecimal er en meget fælles grundlag system til at bruge i computing. Binary er to, decimal er 10, hex er 16. Og det viser sig, hvordan du tæller i hexadecimal? Nul, en, to, tre, fire, fem, seks, syv, otte, ni, hvad bruger du efter ni? Hvad er det næste nummer? Vi har allerede brugt nul. Jeg har brug for 16 af disse. Nul, en, to, tre, fire, fem, seks, syv, otte, ni, du har brug for nogle vilkårlige konvention. 

Og hvad menneskeheden besluttet nogen tid siden, at efter ni kommer brevet A og derefter B og derefter C. Så måde du tæller i hexadecimal er nul, en, to, tre, fire, fem, seks, syv, otte, ni, A, B, C, D, E, F, og der vil tælle dig hele vejen, viser det sig, at 15. Så nul til 15 er nul gennem F. Nu hvorfor er det væsentligt? Nå, når du har to F'er, det er hvordan du udtrykker 255. 

Så lang historie kort, i verden af ​​Photoshop, at grafisk design software, i verden af ​​web udvikling, hvor du har masser af farver, selvfølgelig, at lege med, ofte programmører vil udtrykke dem i hexadecimal, bare fordi det har tendens at være lidt enklere. Selvom ved første øjekast det er meget mere kompleks. 

Så under alle omstændigheder er dette vigtigt fordi Nick på Stanford har givet os seks stykker af funktionalitet at du, den spirende programmører, vil nu have evnen til at bruge. Indbygget i denne web side er seks funktioner, seks procedurer, Nick skrev. Tre af dem vil få dig et nummer, en rød, en grøn eller blå værdi. Tre af dem vil sætte denne værdi. Og disse understregninger er bare pladsholdere, så du skal vide, hvad de er. 

Så med disse tre funktioner, den første af disse ting kommer til at være en x-koordinat, og den anden af ​​disse ting vil være en y-koordinat. Med andre ord, som dot, hvilket pixel ønsker du at få den grønne af, få det blå, får røde af. Og så her, det vil være x, dette vil være en y-værdi, og dette vil være et tal. Så lad os gøre det første linje i denne sammen og så vil jeg overlade det til dig for at forsøge at udlede resten. Så pr instruktionerne på denne side, vi har brug for at øge den røde med en faktor 10, og vi er nødt til at fjerne den grønne og fjern blå. Lad os starte med sidstnævnte scenarier. Så hvis jeg vil, og jeg har tænkt mig at indrykke ved hjælp af nogle rum, hvis jeg ønsker at indstille den røde, den grønne eller blå værdi, Jeg har tænkt mig at gøre følgende. 

Billede, im.setBlue, og derefter baseret på mine anvisninger her, hvad tre ting skal jeg skriv inde i parenteser nu? Jeg har brug for x-værdien, den y-værdi, og hvilket nummer skal jeg sætte her, hvis jeg ønsker at slippe af det blå, er baseret på denne historie her? Bare nul. Hvis jeg vil ikke blå, jeg er bare kommer til at ændre det til nul. 

Lad os nu bare opsummere, hvad det gør. Jeg har her på disse top anden og tredje linje, Jeg hævdede to sløjfer, indlejrede løkker, hvis du vil, som vil have den virkning, af forløber fra venstre mod højre, top til bund over hele x værdier og alle Y-værdier. Fordi igen, et billede er blot et gitter af rækker og kolonner. Så dette vil få slippe af alle de blå. Lad mig forlade den næste linje til dig. Hvordan kan jeg slippe af med alle de grønne? 

PUBLIKUM: [uhørligt] 

DAVID MALAN: Nice. 

PUBLIKUM: [uhørligt] 

DAVID MALAN: Nice. Og jeg har tænkt mig at zoome ud, og bare tage pleje af, at du ikke har gjort nogen stavefejl. Og hvis du har det godt med hvad du har gjort, gå videre og klik på knappen Kør / Gem og se, hvad du får. Og igen, har vi gjort blot tre ændringer. Vi udgår der først kommentere og erstattet den med disse to linjer kode. Og det er OK, hvis du har brug for at ramme på knappen Kør / Gem et par gange at reparere noget. 

Og lad mig også zoome ind på min kode så du kan transskribere. God. Så jeg ser Andrew har hvad synes at være en fejl. Han har lige fået en stor sort rektangel på hans skærm. Er der andre, har en stor sort firkant? 

PUBLIKUM: Ja. 

DAVID MALAN: Big sort rektangel? OK, så lad os tænke om, hvad det betyder. Vi sagde, at nul, nul, nul, så ingen grønne, ingen rød, ingen blå, vil give dig sort. Og det viser sig, at de fleste af vores bærbare computere bare ikke har nok troskab. Du kan ikke helt fortælle der er faktisk noget der. Og hvis du slags måske læne skærmen frem og tilbage, måske ser du en lidt noget der? Måske, slags, en slags? Det er ikke helt sort. 

PUBLIKUM: [uhørligt] 

DAVID MALAN: Spoiler! Der er nogle røde der, men husker fra specifikationerne af problemet, Nick tonet det ned. Han desaturerede det noget, men ikke hele vejen til nul. Så hvis vi ønsker at forstørre størrelsen af rød, lad mig foreslå dette trick. Lad mig zoome ind på min skærm. Og lad mig gå videre og sige beløb er lig im.getRed (x, y). 

Denne linje kode giver mig noget, der hedder en variabel. Jeg har vilkårligt, men, velsagtens, rimelighed kaldte min variabel hvad, tilsyneladende? Beløb. Bare beløb. Jeg kunne have kaldt det hvad jeg vil, men jeg er ved hjælp af denne anden funktion at jeg beskrev tidligere at få mængden af ​​røde ved x komma y. Hvorfor gjorde jeg det? Hvad vil du gøre her? Du er nødt til add-- PUBLIKUM: [uhørligt] DAVID MALAN: Ja, måske ganges med 10. Og hvis du ikke kender dette, er jeg kommer til at gå videre og gøre dette. Jeg har tænkt mig at gå videre og sige, jeg vil mængden af ​​røde Jeg ønsker at være, hvad er på den røde, gange 10, og stjernen, stjernen på din tastatur er til-- ikke bruger x. Brug stjerne. Det er sådan du formere tingene i de fleste programmeringssprog. 

Så ifølge Kareem intuition, lagret i denne variabel kaldet beløb, er, hvor meget rød vil jeg på placering xy. Hvordan, nu gør jeg det pixel har dette nummer? Du har allerede gjort det før. Du sætter den grønne og den blå til ingen værdi, til nul. PUBLIKUM: [uhørligt] DAVID MALAN: Ja, godt du ikke vil have det til 10. Du har allerede gjorde det math her. Så vi får værdien af ​​rød, der er et lavt antal, formodentlig. Vi multiplicere med 10. Hvad du ønsker at gøre med det variable beløb nu? 

PUBLIKUM: [uhørligt] 

DAVID MALAN: Nice. Så im.set-- hvad? 

PUBLIKUM: setRed. 

DAVID MALAN: setRed ved placering xy. Ja. Og bare beløb. Med andre ord, en variabel er en midlertidig pladsholder at du kan sætte noget, du ønsker i. Vi tilfældigvis at sætte et nummer i det, i øjeblikket. Vi har ganget det med 10 for at gøre det større. Og nu er jeg erstatte den variable som tredje argument, eller input at indstille rød. Og så, at når du afslutte det, og tage til efterretning af semikolon og parenteser. 

Gå videre og klik køre / gemme igen, og du skal se, magisk, hvad var faktisk der. [? Arwa,?] Hvad er der? Eiffeltårnet i fuldgyldigt rød, ikke helt mørkt. det burde være mere indlysende nu, ja? OKAY. Og Andrew, ikke mere sorte boks? PUBLIKUM: [uhørligt] DAVID MALAN: Okay. Så jeg vil holde dette på skærmen. Hvis du ønsker at spille med dette senere, vil jeg genskabe dette for dig. Men denne kode gjorde præcis det. Hvorfor gør vi ikke gøre en anden. Lad mig rulle lidt ned. 

Så i dette tilfælde, projektoren ikke rigtig gøre det retfærdighed. Men på dine skærme, har du sandsynligvis har en meget rød og meget sort boks. Også dette er et puslespil, der viser noget berømt. Imidlertid har det billede blevet forvrænget. Det sande billede, denne gang, er i de blå og grønne værdier. Men de har alle været delt ved 20, så værdierne er meget små. De røde værdier er lige tilfældige tal, støj. Fortryd disse forvridninger at afsløre den sande billede. 

Så Nick så fortæller dig hvad du skal gøre. Indstil de røde værdier til nul, og så skal du ikke ødelægge, hvad det er. Så ganger det blå og grønne værdier med 20. Så det er næsten det samme program som før, men du vende processen. Og jeg vil sætte min kode fra før på skærmen i tilfælde du ønsker at vende tilbage til det eller spille videre med at en. Lad mig zoome ind på det. Men løse kobber billede puslespil, nummer to. 

PUBLIKUM: [uhørligt] 

DAVID MALAN: OK, så dette er jeg ikke vil give så mange hints. Så jeg would-- åh, lad os se, du har en stavefejl her. Så husk, dette her faktisk har brug for at gå der. Så hvad jeg ville foreslå, hvis du vil fokusere på denne ene, er der svaret. Hvis du ønsker at omskrive det, at bør få den første arbejdsdag. Og så kan du bruge det som inspiration til den anden. Pæn. God. 

Og for de nysgerrige, det er et simpelt eksempel af en videnskab eller en kunst kaldet steganografi, kunsten at skjule oplysninger i billeder. Typisk kan billederne være vandmærke meget åbenlyst med et logo i bunden hjørne, men det er klart, du kan være meget mere sofistikeret om det, og faktisk skjule andre billeder i billederne eller anden måde med denne teknik. 

Tag endnu 30 sekunder, og så vil vi i det mindste meddele, hvad du skal se. Og jeg vil forlade den tredje en som en derhjemme motion, Hvis du ønsker mere af en udfordre denne weekend. Og jeg tror, ​​Andrew måske har fået det først. Hvad er det andet billede, Andrew? 

PUBLIKUM: Statue of Liberty. 

DAVID MALAN: Statue of Liberty vil være svaret denne gang. Så igen, bare nogle enkle eksempler, hvis mål er at give dig en fornemmelse af, hvordan Vi har oversat billedlig Scratch blokke til mere irriterende og mere kompliceret kode, men alle de ideer er stadig nøjagtig den samme, omend med indførelsen nu af begrebet en variabel, bliver kunne lagre noget midlertidigt. 

Lad os gøre en mere hands-on, bare at nu forbinde prikker til noget lidt mere virkelige verden. Når du er klar, hvis du kunne gå til denne URL på skærmen. Det er også i din kopi af den dias, developers.google.com/maps~~V. Lad os rent faktisk gør noget reelle, så at sige, på nettet ved hjælp af Google Maps API, eller application programming interface, på følgende måde. 

Google, ligesom mange virksomheder, giver en masse fri funktionalitet som du kan bruge til at opbygge din egne interessante applikationer. Faktisk, hvis du nogensinde har brugt Uber at få en cab eller en bil, du sikkert ved, at Uber har en kort og det viser biler på den. Det vil sige, så godt som jeg kan fortælle, Google Maps API. De er faktisk bruger Googles kort, men Uber er ikke en kortlægning selskab, heller ikke ville det være en særlig interessant problem at løse på toppen af ​​deres bil service problem. Og så de er stående, igen, på skuldrene af andre, Google i dette tilfælde. Så de bruger Googles maps men deres egen bil tjenester og andre sådanne funktioner. 

Så vi kommer til at drage fordel af dette for at gøre følgende. Og hvis jeg har gået for hurtigt, bare kalde mig over i et øjeblik. Glad for at opsummere nogle af billedet ting. Du skulle se dig selv på en side som denne. Så Googles rart, og de er blandt de bedste tilvejebringe ikke kun APIs, men gratis API'er, som du kan spille med eller kommercielt. De begynder at oplade dig, hvis dit forbrug er høj, men jeg gik videre på forhånd og underskrevet os op til en gratis konto at forhåbentlig 10 computere vil ikke diskvalificere os for pludseligt. Så forhåbentlig demonstration vil arbejde. 

Og opdager, at de har API'er til Android, iOS, web, og web services, hvad det er. Lad os fokusere på nettet. Så klik den lyserøde boks, web, og at vil føre dig, forhåbentlig, til en side her. Og de har fået en hel masse API'er. Og det kan være lidt overvældende i starten, men jeg vil styre os igennem det, vi ønsker. 

Øverst til venstre er Google Maps JavaScript API, JavaScript API. Så gå videre og klik at en. Og der vil føre dig nu til følgende side, demoer og eksempelkode. Lad mig zoome ud her. Og lad mig få os at-- rulle ned til hvor der står quick start trin. Din skærm skal se ud mine. 

Og der er to trin, får en nøgle og begynde at udvikle. Jeg allerede gjorde trin et til os, at få en såkaldt nøgle. Og dette er en fælles idé. En API nøgle er generelt bare et stort tilfældigt tal eller snor at du skal at indsætte i din kode, så Google ved, hvem du er, når du bruger deres service, deres API. Betyder ikke vi er oplades noget. Og nu, klik, i stedet for en, skal du klikke på begynde at udvikle. Hvis du bare kunne vinke mig over, hvis ikke sikker på, hvor vi er. 

Så vi vil bare ridse overflade, her, men hvad Jeg troede ville være overbevisende er rent faktisk at have os alle, hjælp Cloud9 i ét vindue og denne tutorial i et andet vindue, lader faktisk få vores egen ansøgning op at køre der integrerer en brugerdefineret Google kort i vores egen hjemmeside, og derefter tilføjer en eller to funktioner. Men vi vil bare ridse overfladen af, hvad vi kan gøre. 

Så bare en hurtig tilregnelighed check. Er alle på denne side, Google Maps JavaScript API? Skal sige at komme i gang. Vi kommer ikke til at gå igennem det hele som helst måde. OK, i en anden fane, hvis du ikke gør har den åben, går ind i Cloud9 og få dig selv til bare en ny fane, i sidste ende. Så igen, c9.io fra i går, c9.io, og bare oprette en ny fil. Og gå videre og opkald det hvad du vil. Jeg kaldte mine map.html. Kald det noget der ender på .html. Og du skal være nogenlunde hvor jeg er i denne proces med blot en blinkende prompt i en tom Fanen kaldes noget lignende map.html. Eller fil, ny fil denne gang. 

Og nu, over på den Google Maps JavaScript API, vi vil springe læsning gennem alle denne tekst. Men se, at hej verden er ja overalt, du ser det nu. Hej verden har denne store farverige eksempel på en hel masse HTML. Gå videre og kopiere og indsætte kun at HTML, så fra doc typen øverst hele vejen til den tætte HTML-tag, gå videre og kopiere alle at-- igen, det er under hello verden example-- og indsæt det i din Cloud9 fane, så nu din skærm skal se nogenlunde som mit. 

Og du kan gemme den, men ikke indlæse det endnu. Lad os først se på koden, og se, om vi kan ikke udlede eller lære fra, hvad det er Google har haft os blindt kopiere og indsætte. De ønsker bare at hjælpe, bogstaveligt, få os startede, men der er ikke så meget kompleksitet faktisk er der. Eventuelle spørgsmål endnu? Vi er sikre på at gå videre? OKAY. 

Så hurtigt, lad os bare gøre nogle hurtige sundhedstjek. Linje en af ​​hvad jeg se, og forhåbentlig, du se, hvad betyder det, DOCTYPE HTML? Kareem, huske? PUBLIKUM: [uhørligt] DAVID MALAN: Ja. Her kommer HTML 5. I mellemtiden, linje to på skærm betyder her hey browser, her kommer den egentlige HTML. Linje tre er hey browser, her kommer hovedet. Linje fire er naturligvis, Hey browser, her kommer titlen. Hvad betyder linje fem gøre? Faktisk er dette ikke gør virkelig gøre noget for os. I dette tilfælde er det kun ændres størrelsen siden til en standard. Linje seks, Vi har ikke talt om, men det angiver tegnsæt. Der er forskellige måder at koder filer, især for fremmedsprog. UTF-8 bare en tendens til at være standard. 

Så nu vil vi se på linje syv til 16, nogle CSS. Og selvom vi har ikke set alle disse ting før, vi kan slags udlede. Så linje otte midler, hey browser, gælder alle de følgende, som to tags, tilsyneladende? HTML og brødtekst. Så kommaet er den nye ting der. Og det er bare en måde at specificere flere tags på en gang. 

Så har vi de krøllede parenteser. Så tilsyneladende, dette fortæller browseren, gøre højden af ​​siden 100%. Så selv om der er meget lidt indhold, gør hele siden, gøre ting fylde siden. Lav kortet i sidste ende fylde siden. Margin, hvad betyder det? Det er som regel ligesom vilkårlig hvid plads omkring kanterne at nogle browser designer bare besluttet skal være der, fordi det slags gør tingene ser renere. Men vi vil ikke have det. Vi ønsker, at kortet vil hele vejen til kanterne. Polstring, ligner i ånd til marginer. Margener betyde udenfor, polstring midler inde, men det er den samme form for aftale. Det er lidt af en buffer mellem dig og kanterne. 

Og derefter linie 13 er en god chance for en hurtig gennemgang. Hvad betyder skarp tegnet map betyde, eller hashtag map betyde? Hvad betyder det refererer til, i princippet? 

PUBLIKUM: [uhørligt] DAVID MALAN: Præcis. Denne egenskab er denne CSS ejendom gælder kun én ting, HTML-tag der har et id af tilbud, citat slut "kort". Og lad os nu hurtigt frem, rulle ned til bunden af ​​filen, som er ikke alt for langt væk, og meddelelse om linjen 19, hvis du indsætter det præcis som jeg gjorde, linie 19 har blot en div, som er en opdeling på siden, hvilket i går jeg kaldet et rektangulært område. Det har ikke noget i det. Det er en åben tag, tæt tag. Men det har et unikt id. 

Så hvad synes at være sker her, er Google er klargøring vores webside for at har en komplet 100% højde, og ingen udfyldning, ingen margener, fordi hvad vi kommer til at sætte ind af denne div, hvis unikke ID er kort, er en egentlig integreret kort. Og vi vil have det til at fylde siden og ikke bare være nogle lille rektangel i midten. Så linje 14 på samme måde understreger, at kort selv bør have en højde på 100%. 

Så nu mærke til mellem linjerne 20 og 28, dette er JavaScript-kode. Og dette er, selvom det er syntaktisk lidt mærkeligt, Der er ikke så meget foregår her. I linie 21 er denne erklære noget, der hedder en variabel. I stedet for at kalde det beløb, som vi gjorde før, vi mere præcist at sige var, som netop betyder variabel. Vi kunne have brugt det i Nicks kode, men han gjorde ikke, så jeg ikke gider at gøre det enten. Det er en variabel kaldet kort, og så er der en funktion, der er tilsyneladende kaldet initMap. 

Så det er ligesom vores egne brugerdefinerede brik i Scratch. Vi har lavet et stykke af funktionalitet kaldet initMap, og du kan slags udlede hvad sker der her. På venstre side, vi har fået en variabel, så vi kommer til at sætte følgende ting inde denne variabel, fra højre mod venstre. Den højre side siger, hey browser, giver mig en ny Google-kort. Og google.maps.map er blot en funky måde for at angive, at denne funktionalitet tilhører Google Maps. 

Efter parentes, har vi set dette før, hey browser, får mig elementerne i siden, den tag i den side, hvis unikt id is-- 

PUBLIKUM: [uhørligt] 

DAVID MALAN: --map. Og hvad der foregår, godt, denne linje sammen, linie 23, hovedsagelig siger, hey browser, gå få mig at tomme div på siden hvis unikke ID er kort, fordi jeg ønsker at indsætte ind i det-- injicere ind i det, hvis du will-- en hel masse indhold der sker for at være kommer fra internettet, efterfølgende. Og Googles gør alt dette for os. 

Så igen, i det slutningen af ​​dagen, vi har dette eksempel på abstraktion. Jeg aner ikke hvad et kort er eller hvordan man gennemfører et kort API. Vi behøver ikke at. Vi skal bare fortælle kortet hvor at sætte sig selv, og lad dem, der ligger til grund implementering detaljer til Google. Nu er der tilsyneladende to stykker data at dette eksempel er leverer til Googles API. Tilsyneladende midten af ​​kortet, og zoom-niveau, så at sige. 

Og er der nogen genkende disse koordinater, breddegrad og længdegrad? Sandsynligvis ikke, men vi kan gå tilbage til tutorial, bogstaveligt talt se. Men vi vil se det på bare et øjeblik. Zoom-niveau er en værdi mellem, det gør jeg ikke ved, en i 13 eller noget lignende. Det har bare at gøre med, hvor langt du er zoomet ind eller ud, og det er det. Og nu til allersidst af siden, varsel line 29-- det er lidt grimt, fordi det wraps-- denne linje kode er det, der downloader til browser Googles aktuelle API. Alle af koden, at Googles ingeniører har skrevet, at gennemføre Hele denne funktion i integrerbare kort. 

Lad os nu ikke ændre noget. Hvis du følger med, gå videre og bare gemme filen, hvis du rent faktisk har hvad jeg har. Gå til sin URL. Du kan klikke på knappen Kør op toppen og der vil fortælle du webadressen på din webserver igen. Og det vil føre dig til en ny fane. Hvis du klikker på Åbn for map.html, og odds er du er kommer til at få en advarsel, en fejlmeddelelse, ja? Fejlmeddelelse, fejlmeddelelse? 

Så desværre, fejlen budskab er ikke, at oplysende medmindre du rent faktisk åbner konsol, at særlige fane vi holdes åbne i går og lidt tidligere i dag. Men jeg faldt over dette tidligere, så jeg allerede regnet ud, hvad løsningen er. I dagens dias, eller snarere, i Cloud9, varsel at vi ikke gjorde noget bevidst. Bemærk at dette script tag i linie 29, hvis du læser igennem det, det er ligesom maps.googleapis.com/ noget, noget, noget, derefter mærke til nogen, en af ​​udviklerne, skrev i al kapital breve, din API nøgle. 

Vi er nødt til at indsætte noget derinde. Og dette var trin Jeg gjorde for os før, og igen de måske blackliste os, hvis pludselig, 12 eller flere af os begynde at bruge den samme nøgle, men lad os se hvad der sker. Så hvis du går ind i dagens dias, en slide senere, er der denne meget funky udseende tekststreng. Gå videre og bare kopiere det og indsætte den hvor der står dit API-nøgle. Det er den jeg tilmeldt. 

Og absolut ikke forsøge skrive det manuelt, fordi det føles fyldt med stavefejl, potentielt. Så bare kopiere og indsætte det. Og det kommer til at gøre linjen længere, men nu, bare for at være klar, det skal se lidt mere som dette, hvor nøglen er lig ikke kapitaliserede råben på dig. Gem din side, gå tilbage til den anden fane, genindlæse, og håber at se et kort over, hvor? 

PUBLIKUM: Australien. 

DAVID MALAN: Australien. Så tilsyneladende det er de GPS-koordinater af Australien. Og lad mig gå rundt for bare et øjeblik og hjælpe alle, der er ikke helt der, men lad mig foreslå, via Google, find GPS-koordinater af din egen hjemby eller dit eget hjemland. Og sandsynligvis Google kan slå denne op, eller Wikipedia kan fortælle dig. Men vælge to forskellige værdier for breddegrad og længdegrad, gå tilbage i og indsætte dem, og derefter genindlæse siden efter at have gemt og se om du kan få en kort for din egen hjemby. 

Og når du er færdig med at opfølgningen challenge-- og jeg vil give lidt mindre retning, bevidst, så du bevidst nødt til at kæmpe for et par minut med dokumentationen, ændre kortets at være ikke denne tegneserieagtige standard, men en satellit kort. Så du faktisk se satellit billedsprog i stedet for de smukke farver. 

Og tippet jeg vil give dig er at ændre kortets type. Gå tilbage til, at få startede side for inspiration. Som du måske har forstået, hvis du leder efter, der er så mange flere ting du kan gøre. Nogle af jer har allerede ændret korttypen. Men du kan do-- for eksempel, lad mig gå til noget, vi gjorde for kurset Jeg teach-- maps.cs50.net. En af vores undergrads gjorde dette. Vi centrerer vores kort i Harvard Yard og overlay alle disse bygningsdele navne, og vi havde ham tilføje dette. Så hvis jeg vil søge efter, for eksempel Matthews Hall, vi har en lille rullemenu. Og jeg tror han bruger Bootstrap, den bibliotek vi diskuterede tidligere for dette. Og hvis du klikker på Matthews Hall, er det straks springer kortet til en vis placering, og det viser dig et billede i denne lille pop-up. 

Men selv dette lille pop-up, vi ikke gennemføre. Hvis jeg rulle ned på vores få startede side og kigge efter info-vinduer, du vil se, at nogle af de funktionalitet, du selv kan tilføje, om end med en smule mere kompliceret, er noget, der hedder en info-vindue. Og hvis jeg klikker et eksempel her, og det er, hvad der er sjovt, du kan gøre ting som dette, klikke på en markør og derefter voila, information popper op. 

Så har vi ikke helt indført nok funktioner i JavaScript at male et billede af præcis, hvordan du kunne wire alle disse ting sammen, men vi har slags kradset i overfladen. Faktisk hvad jeg lige gjorde, da Jeg klikkede på denne markør, blev udløser en hændelse, et såkaldte ved klik begivenhed. Og vi faktisk så en begivenhed tidligere i dag, den såkaldte indsende begivenhed, da vi forhindrer brugeren fra at søge til katte. Så vi har slags plukket og choosed blandt alle disse forskellige funktioner, at give dig en følelse, forhåbentlig, af, hvad du kan faktisk gøre med en smule mere komfort i programmering, og helt gratis ressourcer. 

Nogen spørgsmål? Ingen? Dette er din sidste chance, mindst i dag, på en fredag, at få noget fra brystet så du går ud af her føler dig sikker og komfortabel. Ja. 

PUBLIKUM: Hvorfor ikke du tilføje en ting mere? 

DAVID MALAN: Åh min godhed. Jeg har brug for at hvile i denne weekend, jeg tror. Andre spørgsmål? 

PUBLIKUM: [uhørligt] 

DAVID MALAN: Du can-- i Internet Explorer, hvile i fred, du plejede at være i stand til at sætte VB script, virtuelle grundlæggende script, men der virkelig aldrig fanget på. Så det korte svar er bare JavaScript. Andre spørgsmål? Okay, godt, lad mig gøre det. Lad mig få fat vores kolleger udenfor. De har nogle evaluering former, som de ønsker alle at bruge et par minutter at udfylde. De ønsker at indsamle denne form, og enhver dispensationer, som du måtte have udenfor. De vil også have certifikater. Jeg gætte der er stadig nogle snacks udenfor. Lad mig passere disse ud, og hvis du har spørgsmål i mellemtiden, Jeg vil gå rundt mere individuelt og vi kan få dig i gang. Ja, selvfølgelig. PUBLIKUM: [uhørligt] DAVID MALAN: Det er normalt sandt i disse dage. Bestemt med web software, du hælder på andre er du enten æstetisk bruger ting ligesom Bootstrap, så du ikke nødt til at gennemføre det lave niveau oplysninger om menuer og knapper og alt det. Du hælder på nogen som Google, så du behøver ikke at opbygge en Uber forretning og en kortlægning virksomhed, og et vilkårligt antal lignende ansøgninger. 

Faktisk logins er populære, også. Hvis du har brugt Spotify eller vilkårligt antal hjemmesider, du logge ind på nogle hjemmesider der bruger Facebook. Så hvad er rart, der er API'er til logins dag, så du ikke behøver at have din egen brugere bordet og alle dine egen database nødvendigvis i samme grad. Du kan lade Facebook gøre alt af denne kompleksitet for dig. Så det er en spændende tid, ærligt, i programmeringen, fordi der er så mange tredjepart tjenester, som du kan bygge oven på. 

Og igen, den pris, du betaler, er enten økonomisk eller nedetid. Hvis Google går ned, så gør Uber, velsagtens, men måske det er en rimelig afvejning. Og igen, det var et af temaerne, forhåbentlig for de sidste par dage, er disse kompromisser. Og sjældent er der går at være en rigtige svar. Det er virkelig det bedre af to eller flere svar. 

Pass disse omkring. 

Og disse Cloud9 konti vil fortsætte at arbejde, i teorien, i al evighed. Du kan finde, hvis du venter et par dage eller en uge eller mere at logge på igen ind i dem, det kan tage som en eller fem minutter til at åbne op igen, men det er bare fordi de sætter den på vågeblus for at spare på ressourcerne.