DAVID MALAN: Greit, vi er tilbake. Så for spennende Konklusjonen vår siste avsnitt på web-programmering, som jeg tenkte vi skulle bruke som en generell term å fange noen få gjenværende emner. Så ved slutten av dag, vil vi faktisk gjør litt hands-on webprogrammering med et språk som kalles Javascript. Og jeg tror vi vil se på noe relatert til bilder og oppdage noe hemmelighet gjemt i et bilde, og også ta en titt på Google Maps API, Application Programming grensesnitt, som noe representativ for den type programvare det er stadig mer og fritt tilgjengelig i dag. Men hvorfor ikke vi ta en titt på en ingrediens til denne verden som vi har på en måte vært tar for gitt foreligger i noen tid, en database. For det siste døgnet og en halv vi har antatt at vi har tilgang til en database, men hva problemet har en database løse? Hva gjør det for oss? Hva er det? PUBLIKUM: [uhørlig] DAVID MALAN: Holder all informasjon, OK, og hva slags informasjon kan du legge i det? PUBLIKUM: [uhørlig] DAVID MALAN: All informasjon du putter i den, vil du få tilbake. Det er sant. Og på en typisk web-basert nettsted eller web søknad, hva slags informasjon, spesielt, kan du sette inn? PUBLIKUM: [uhørlig] DAVID MALAN: Brukere. Så hva er en bruker? PUBLIKUM: [uhørlig] DAVID MALAN: OK, registrert bruker av nettstedet. Og hva betyr det å lagre brukernes informasjon? Hva komponerer en bruker? En bruker har hva? PUBLIKUM: [uhørlig] DAVID MALAN: Ja, personlig data, og det liker jeg. La oss være mer presis. Så en bruker har vanligvis et navn, hva annet kan en bruker ha? PUBLIKUM: [uhørlig] DAVID MALAN: En addr-- OK, så fornavn, etternavn. Det er bra. Egentlig, la oss fikse det, fordi det kommer for å åpne opp en mulighet for diskusjon, likevel, ytterligere. Fornavn, etternavn, kjønn. En ID av noe slag. Hva annet? Jeg har hørt noe annet før, også. En e-post, postadresse. Så la oss stoppe der, og nå vurdere ikke hva vi lagring i databasen, men-- og ikke hvorfor, siden det er kanskje opplagt at når du registrere en bruker, du ønsker å huske dem i noen tid. Du ønsker ikke det å bare lagres i RAM og bli forgotten-- så la oss fokusere på hvordan. Det viser seg at i verden av databaser, det er minst to typer i disse dager. Noe som kalles en SQL-database, Structured Query Language, eller, cutely navngitt, NoSQL, som ikke er SQL. Og den sistnevnte er en eksempel på hva som kan bli kalt et objekt-orientert, eller et objekt butikken, en database som lagrer objekter, og ikke, unnskyldning meg, som vi snart vil se, rader. Så vil vi fokusere på bare et øyeblikk på den første av disse, nemlig en SQL database, hvis bare fordi den er så kjent allerede, for alle som har brukt Excel eller Google Regneark eller Apple Tall eller en hvilken som helst standard regnearkprogram, eller, tilsvarende, eller mer sofistikerte, noe som Microsoft Access eller Oracle eller MySQL eller PostgreSQL, som alle er produktnavn for implementeringer av det følgende idé. En relasjonsdatabase er rett og slett noe som har rader og kolonner. Og av rader og kolonner, Jeg bokstavelig talt bety noe som dette, så hvor vi kan ha navn på et felt og sin type over her. Og faktisk, la meg nå begynne å kartlegge disse. Så egentlig, jeg vet ikke hvorfor jeg trakk et eget diagram. La oss holde dette enkelt. Vi har rett her Begynnelsen av bordet vårt, der Dette er navnet på feltet og dette er den datatypen og etter type mener jeg følgende. Er det et nummer, er det en streng, en kort streng som et ord, er det et avsnitt, er det binære data, for eksempel et bilde? Og la oss bare erte dette hverandre for bare et øyeblikk. Så først navn, nummer, streng, stor del av text-- PUBLIKUM: [uhørlig] DAVID MALAN: Ja, så streng. Og i en database sammenheng, vil vi vanligvis kaller dette røye feltet. Jeg vil bare si røye for nå, men vi er kommer til å avgrense dette i et øyeblikk. Tegnfelt. Etternavn er trolig den samme. Kjønn? Mann eller kvinne, så det kan være en char felt. Det kan være enten sitat, unquote "Mannlig" eller sitat, unquote "kvinnelige" eller det kan være m eller f. Hvis du ønsker å være mer inkluderende, du trenger en tredje verdi eller noen form for andre felt helt. Og så du kan bruke true false. Feltet kan kalles mannlig, og så du kan si sant eller usant. Men det betyr ikke nødvendigvis fange all informasjon du måtte ønske. Så det viser seg at det er en annen type felt som kan være nyttig her i en typisk database, kalt en enum, hvor det er et tegnfelt, men du, designeren, bli oppsummere de mulige verdier, som sitat, unquote "mannlig", sitat, unquote "kvinnelige" og så videre. Slik at uansett verdi er i databasen, er faktisk karakter-basert, men det må være en av disse verdiene. Vi sannsynligvis ikke ønsker en enum for fornavn eller etternavn. Ellers ville vi ha å nummerere, som navnet stammer fra, bokstavelig talt hvert mulig fornavn og etternavn. OK, så ID hva skal en ID være? Ja, så kanskje et tall. Så la oss holde fast med det for nå, nummer. Og etter nummer, er nummer litt for bred nå. For enden av den andre dag, føler jeg at vi bør være litt mer presis. Antall kan bety like, det kan være noe sånt som 1.236. Og det er sannsynligvis ikke hva vi mener med en ID. Hva gjør vi sannsynligvis mener med en ID? PUBLIKUM: [uhørlig] DAVID MALAN: Oh, OK, så kanskje det er ikke engang et nummer. Kanskje det er faktisk en unik identifikator det er en streng, som et brukernavn. Så absolutt, kunne være. Jeg tror noen trolig betydde numerisk, though. Så la oss bli med det. Hva slags tall? Hva er en mer precise-- et heltall. Så mange som 0, 1, 2, 3, så vi vil kalle dette et heltall. Og selv da, jeg kunne bli nitpicking, er det egentlig ikke bare en Generelt heltall du vil. Du har sannsynligvis ikke vil negative verdier, bare fordi det føles bare rart. Du har sannsynligvis vil positive heltall. Så du kan også uttrykke at i en database, men for nå, vil vi si heltall. E-post? Dette er sannsynligvis just-- en hva? PUBLIKUM: [uhørlig] DAVID MALAN: Det er en e-post, men det er tegn, ikke sant? Den har bare en funky karakter som en "i" symbol eller noe annet, men det er fortsatt et tegnfelt. Og postadresse? Tegnfelt. Så det er en fin begynnelse, men la oss være litt mer presis nå. Så det viser seg at i en database, du ofte har et valg over mer raffinert versjoner av disse tingene. Faktisk, i en typisk SQL database, SQL, eller mer generelt, relasjonsdatabase, databaser med rader og kolonner, du ofte komme til å angi ikke bare den type av field-- la meg gjøre noen plass her-- men også lengden. Så hvor lenge er et fornavn? Jeg tror, ​​D-A-V-I-D. OK, fikk det jeg sannsynligvis bare fornærmet som halvparten av personene i rommet, ikke sant, Siden navnene er lengre enn fem bokstaver, så fem virker litt egoistisk og naiv, hva er så en bedre verdi? 10, greit, og jeg tror vi er OK i rommet. 1. 3? 30? Hvorfor får jeg ikke ta tilnærming til tidligere da vi snakket om matriser og minne? Hvorfor kan jeg ikke bare si som 1000? Ingen navn kommer for å være mer enn 1000. Skyve tilbake. PUBLIKUM: [uhørlig] DAVID MALAN: Ja, det er sløsing, ikke sant, spesielt om de fleste navnene er bare fem eller ti eller 15 tegn, det er veldig unødvendig. Så vet du hva? Dette er slags et vanskelig spørsmål. Nå kan vi sikkert analysere engelsk og eventuelle andre språkets navn og finne ut, vel, hva er average-- gjennomsnitt gjør egentlig ikke hjelpe us-- hva er max er sannsynligvis hva vi egentlig ønsker. Men det viser seg at vi har til noen valg over typen her. I et typisk SQL database, du har noe som kalles en røye felt og også en varchar, V-A-R, for variabel røye felt. Og forskjellen er dette. En røye felt, du designer, må spesifisere på forhånd den nøyaktige lengden av feltet. Så kanskje det første navnet som 20 føles slags trygg. Kan ha å gjøre litt googling til se om det er faktisk trygg nok. Det er nok et navn med 21 tegn, men for nå, antar 20 er trygg. En røye felt skulle tilsi i en database som du er å bruke 20 og alltid 20 tegn. Nå hvis det er bare D-A-V-I-D, 15 av dem bare kommer til å være tomme tegn, men du fortsatt bruker alle 20 bytes. En VARCHAR- felt, derimot, betyr strengen skal være opptil 20 tegn men hvis det er bare fem, du bare kommer til å bruke fem, seks eller kanskje for en spesiell verdi ved utgangen, sånn 0 vi diskutert at betyr slutten av et tegn sekvens i minnet. Så når tror du du kan velge røye versus varchar, gitt at trade-off? Char bruker det mange tegn, varchar bruker ikke mer enn at mange tegn. PUBLIKUM: [uhørlig] DAVID MALAN: OK, når du vet lengden på strengen ganske overbevisende å bare bruke røye, fordi hvis du vet det, bare legge det ned. Og kanskje det er sant for en zip kode, i USA, i det minste, 02138, det alltid kommer til å være fem tegn til du legger til dash fire. Men du har kanskje noen verdier for som du vet alltid lengden. Eller kanskje statlige symboler, som NY for New York, og MA for Massachusetts i USA. Kanskje du har noen situasjoner hvor det er helt rimelig, men etter den logikken, hvorfor er vi selv overthinking dette? Kan vi ikke bare bruke varchar og så får vi Bruk alltid to tegn uansett, eller alltid bruke fem tegn likevel? Hvorfor ikke bare spare varchar for alt, etter den logikken? Det må være en fange. PUBLIKUM: [uhørlig] DAVID MALAN: Kunne skrive noe galt. Så det er sant. Men selv da kan de ikke bruke mer minne enn jeg fordele. Jeg har fortsatt den endelige si over lengden, slik at de kan ikke tilfeldigvis gjøre det feil, men en god tanke. Det er mer subtil, men det er veldig relatert til vår diskusjon, faktisk, av arrays og knyttet listene tidligere. Det viser seg at en database, hvis den vet at alle verdiene er av en fast lengde, selv om noen av disse verdiene er tomme, slags estetisk blank, D-A-V-I-D og deretter 15 emner, det viser seg at hvis hver feltet er det samme lengde, mye som en matrise hadde alle sine ting rygg mot rygg mot rygg mot rygg, slik at du kan bare pluss 1 for å komme til neste verdi, samme idé i en databasetabell. Hvis alle karakter strenger har samme lengde, du har det som kalles tilfeldig tilgang. Dersom alle strengene er av lengde 20, trenger du ikke bare gjøre pluss en du bare gjøre pluss 20, pluss 20, pluss 20, pluss 20, og du kan veldig raskt bla gjennom eller søk gjennom alle dine data. En variabel char felt, derimot, ikke alltid har 20 tegn. Det kan ha 20 og deretter 15 og deretter 19 og så 10, og så hvis du ønsker å søke gjennom den, kan du ikke bare blindt legge til 20 bytes for å komme til den neste. Du har bokstavelig talt å søke gjennom fordi kanten av datastrukturen, om du vil, er fillete. Den slags går inn og ut basert på den faktiske lengden av strengen. Så når du vet lengden, som Kareem sier, bruk en røye felt, fordi du får det effektivitet for å bli i stand til å søke gjennom det raskere når du leter etter data, ellers bruke en variabel. Dessverre, jeg har ikke noe godt svar til hvor lenge navnet skal være, men for noe sånt et navn, vil jeg si en varchar er vanlig fordi det er ikke til å være en fast lengde for alle. 20, vet jeg ikke, 20 føles litt stramt. La oss bare si 50, 50. Det gjør egentlig ikke koste deg som mye mer å si 50 i stedet for 40, men på et tidspunkt må du å foreta en vurderingssak. Svært vanlige, ærlig, for [? historisk?] grunner, selv om det er overdreven, Det vil si 255, fordi en tid siden, i populære databasesystemer, som MySQL, et gratis open source verktøy at en rekke selskaper som selv Facebook brukes, Dette var den maksimale standard slik at folk bare gikk med den. Så ikke urimelig, men vi vil bruke litt mer intuisjon og si at 50, det er sannsynligvis litt overdreven. Kjønn, jeg liker enum, Og så kan vi derfor nummerere mann eller kvinne, eller kanskje mer effektivt, m eller f eller noen andre symbologi, men enum føles som et godt valg der. For å være klar, kjønn kan bare være en varchar, og vi kunne bare alle enige om hyggelige mennesker, å alltid sette de samme verdiene der. Mann eller kvinne eller whatnot. Men problemet da, er at vi kunne gjør en feil, så [hørbar] foreslått tidligere i en annen sammenheng. Hvis vi gjør en feil, kan vi få uriktige verdier i vår database. Så hva er fint om databaser som Oracle og MySQL og andre, er at du har denne siste lag av forsvar der DBA, databaseadministrator den som utformer denne tabellen som vi er verbalt, kunne sette på plass en enum som beskytter mot at ved å spesifisere mann, kvinne, og slik at ingen ellers ingen programmerer kan ved et uhell sette inn en annen verdi. Så dette ville være en god ting. Dette er en funksjon. Så en ID, forutsatt en numerisk ID, det sannsynligvis bør være et positivt heltall. Og vi noen ganger har mulighet til å diskutere lengden. Du ville ikke vanligvis angir et tall her, ville du i stedet oppgi Dette er en int, eller en stor int, som de er vanligvis kalles. Men typisk, et heltall ville være, la oss si, 4 byte. Og hvis det er 4 byte, det er hvor mange biter? PUBLIKUM: [uhørlig] DAVID MALAN: 32 biter. Så hvor mange brukere kan vi ha i vår database om de alle har en ID og dette ID må være unik? 32 bits betyr at vi har mønstre av en, to, tre, fire, five-- så hvor mange forskjellige mønstre av nuller og de kan du ha hvis det er 32? Det er det samme som spør hva som er to til 32? Det er et stort antall som Jeg kan ikke helt få rett, men jeg vet det er omtrent 4 milliarder. Så dette betyr at databasen tabellen kan har fire milliarder brukere og det er det. Så dette er et interessant utforming implikasjon. En anstendig antall selskaper har bestemt seg, kanskje ikke så mye for deres brukere bordet, fordi det å ha 4 milliarder brukere er et sjeldent problem. Dette er liksom et Facebook-stil problem, ikke et typisk selskap problem. Men kanskje hvis du har transaksjonslogger eller annen form for data som stadig blir skrevet inn i databasen som absolutt kunne ha milliarder og milliarder av rader, og du bruker et heltall for det, hva som skal skje så snart som du kommer til rad nummer 4000000000 og deretter prøver å sette inn 4 milliard og en, så å si? Jeg forenkle tallene litt. Du kan klippe tilbake, jeg mener du må håndtere det liksom. Og hva en datamaskin ville vanligvis gjør, tenker på det selv fra i morges, hvis du har en 4-bits verdi som 1, 1, 1, 1, som, bare for å binde morgen sammen til ettermiddagen, hva betyr dette tallet representerer i binær? OK, vi skal gjøre det lettere. Hva betyr dette tallet representerer i binær? OK, vi skal gjøre det enklere, hva gjør dette representerer i binær? PUBLIKUM: Tre. DAVID MALAN: Tre, fordi vi har de column-- [LATTER] Puh! Vi hadde de kolonne og toere kolonnen. Så antar at, ja, vår [? infield?] var ikke 32 bits, men det var to biter, vi kan telle fra brukerens nummer 0, 1, 2, 3, og da er vi litt tilbake til bruker 00 igjen. Så dette er hva vanligvis skjer. Hvis du noen gang har hørt expression-- sannsynligvis ikke, men hvis du Opptaktene Heltallsoverflyt, hvor du holde bla alle dine biter å være den største mulige verdier, og da er du ute av biter, hva ville vanligvis skje? Hvorfor må jeg si 00? Vel, dette er tre. Hvordan skriver jeg fire? Hvordan representerer jeg den for nummer 4 i binær? PUBLIKUM: [uhørlig] DAVID MALAN: One-- yeah, ikke si 100 per se, fordi det har feil konnotasjon, men 1-0-0. Slik at antall 1-0-0 er faktisk riktig, men hvis du bare har to biter, hva har du egentlig gjort? Du har rullet over til 00. Og ja, det er hva som ville skje. Egentlig kan du tenke om dette mer fortrolig. Hvis du husker, hva, 16 år siden, verden skulle ende når Y2K problemet skjedde. Hvorfor var det? Vel de fleste datamaskiner, for fornuftige beslutninger, ble lagring av tall som år 1975 eller år 1999 ved å bare bruke to sifre i datamaskinens minne. Så selvfølgelig, hva skjer når du kommer til år 2000, du gå til denne, eller rettere sagt, ja. Så du går til år 2000, men hvis du bare bruker to sifre det ser ut som året 00 og så du har rullet over. Og dette er grunnen til at mange systemer nødvendig å bli oppdatert samtidig. Så med det sagt, selskaper som Facebook løpe opp mot dette. Så den eneste måten å håndtere situasjon, ærlig, er å forutse det. Eller den reneste måten å håndtere denne situasjonen er å forutse det slik at du ikke nødt til å gjøre endringer senere. Så i stedet for 8 byte, vet du hva? Jeg kommer til å være framtidsrettet her, selv om det er litt optimistisk at vi kommer til å ha 4 milliarder og 1 brukere på våre nettsider. Men la oss bare bruke 8 byte, eller 64 bits, som vanligvis ville bli kalles en stor heltall, veldig teknisk. Og det betyr bare at du kan ha enda flere siffer i nummeret ditt. Men dette er en viktig utforming avgjørelse, fordi hvis du velger et tall som har for få biter av ekspressivitet du kan faktisk lage en feil i programvaren. Greit, så la oss bryte opp med e-post og postadresse. Så e-post, hvor lenge bør en e-postadresse være? 50. Jeg har ingen anelse om, men det er sannsynligvis noe sånt, fordi ellers ingen kommer til å skrive deg hvis det blir for lang, så 50, la oss gå med det for nå. Adresse, hvor lenge skal det være? PUBLIKUM: [uhørlig] DAVID MALAN: Det er ikke bare et postnummer, skjønt. Adresse, hørte jeg. Så dette er som en Brattle Square, komma, Cambridge Mass., komma, 02138. Og faktisk, la meg bare dra opp litt regneark her. Dette føles som om det er en tapt mulighet. Hvis vi har en Brattle Square, komma, Cambridge, MA 02138, Jeg føler at vi kan gjøre bedre enn bare postadresse. Hvorfor gjør vi ikke eksplodere dette litt? Hva får jeg på? Hva bør vi i stedet ha for våre rekker her, kanskje? PUBLIKUM: [uhørlig] DAVID MALAN: Ja, så la oss kalle det street_number, og en understrekning er bare en vanlig måte å ha det som ser ut som en plass, men det er ikke, faktisk. Street, og deretter city-- lei? PUBLIKUM: [uhørlig] DAVID MALAN: Vi kunne gjøre det. Linje en, linje to. Hvorfor kan ikke vi vil holde det enkelt for nå, men det er absolutt en akseptabel avgjørelse. Og så staten, og så la oss være litt USA-sentriske for nå og bare gjøre postnummer, bare fordi det vil føre til en interessant feil eller problem her. Så antar det er nå vår adresse. Det er litt mer irriterende at Vi har alle disse flere felt, men nå kan vi merke ting litt bedre. Så nå gatenummer trolig bør ikke være en char, skulle det? Hva skulle det være? PUBLIKUM: [uhørlig] DAVID MALAN: Kanskje, et tall som et heltall igjen? En stor heltall? Du har sannsynligvis ikke leve på 4 milliarder Main Street eller noe gale sånn. Så heltall er sannsynligvis fine, men har noen noensinne har levd på en adresse som 1A Brattle Square, eller en og 1/2? Disse tingene finnes, dessverre, selv om du ikke har bodd der, det er disse anomaliene som leilighet 1A, 1B, 1C. Så vet du hva, vi sannsynligvis bør ikke gå med heltall, ellers skal vi å miste noen salg. Char-feltet, kanskje? Jeg vet ikke hvor lenge. Det er sannsynligvis ikke kommer til å være så lang tid, så 10 eller noe. Ingen kommer til å skrive en lengre rekke, kanskje. Men igjen, bør vi sannsynligvis tenke mer på det. Kanskje google, gjøre noen undersøkelser, men vi vil gå med våre guts for nå. Streets, røye, 50, jeg vet ikke. På et tidspunkt, ingen kommer å skrive det på en konvolutt, også, så det er nok noen øvre grenser der. City, samme, sikker, så røye 50. Staten kan være USA-sentriske for nå. Så det kan være en liste, så snill av en vurderingssak, tilstand. Det kan være som to tegn. Så egentlig, kanskje, holdt jeg sier røye. Jeg mener sannsynligvis varchar, bare for noen effektivitet, men vi vil komme tilbake til denne avgjørelsen i et øyeblikk. Kan være en char med lengde 2 for staten. Hvis du er i USA de har, som MA, Massachusetts, NY, New York, New Jersey, New Jersey, og så videre. Så det kan være fast på det. DC for Washington DC. Men jeg tror, ​​Olivier, du foreslått en annen tilnærming. PUBLIKUM: [uhørlig] DAVID MALAN: Ja, det er slik at en Litt irriterende å skrive inn, men en enum kan være mer fornuftig, fordi denne måten, i det minste i USA, du kan nummerere, hvis ordinært, men du gjør det bare en gang i databasen og aldri igjen måtte tenke på det, alle 50 to-tegnkoder. Så jeg liker enum. La oss holde fast med det der, fordi den slags håndhever mer fasthet. Og så postnummer? Jeg tror Andrew hadde en tanke om at PUBLIKUM: [uhørlig] DAVID MALAN: Ja, fem eller ni. La oss bare holde det enkelt. Bare gjør fem for nå. Men kanskje jeg bare kunne gjøre et heltall, ikke sant? Jeg kunne, men vet du hva, jeg har gjort denne feilen en gang, i en viss forstand. For mange år siden var jeg migrerer fra Microsoft Outlook til Gmail, og Outlook har en måte å eksportere alle kontaktene dine som en Excel-fil, en CSV-fil, kommaseparerte verdier fil. Og jeg gjorde en feil, jeg tenker på å dobbeltklikke på det, når jeg lastet ned eksport, til sørge for at det så ut som jeg forventet. Jeg må ha truffet Lagre eller la auto-save skudd eller noe. Fordi når jeg deretter importeres det inn i Gmail, alt arbeidet. Men i år, til denne dagen, og Jeg gjorde dette fem, for 10 år siden, Jeg er fortsatt å finne venner som har adresser som ser ut som dette. Hvorfor? PUBLIKUM: [uhørlig] DAVID MALAN: Det tok 0, vel, heller, det tok hele postnummer som et tall, og derfor er det en ledende 0 som betyr det har ingen betydning. Og så 2138 ser ut til å være min postnummer. Og dette er, ærlig, en irriterende Excel funksjon der jeg tror som standard, selv om det er ment å bare være tekst, Microsoft Excel bestemmer, la meg være nyttig, og oh, ser jeg bare tall. La oss behandle disse som tall. Og det avkorter de ledende nuller. Jeg sverger til Gud, hvert par månedene jeg finne en adresse, og ut av en slags OCD, jeg går tilbake inn og legge til 0, selv om jeg aldri sende folk bokstaver eller noe. Men jeg er fortsatt å finne rester av dette. Så dette er å si, er dette en god idé? OK, nei, fordi noen i Massachusetts, i dette området, kommer til å ha en o ledende dem. Så la oss gå med like røye, sannsynligvis, fem. Og her, innser vi kunne bruke en enum og vi kunne oppsummere 10000 mulige postnummer, men det føles som om det er nok krysset en linje av, liker, fordeler. Hvis du har til innspill som mye data i databasen å beskytte mot noe. Så røye skjønte du kan skrive i H-E-L-L-O som ditt postnummer, som ikke er det, selvsagt, numerisk. Så det er ingen måte, i en typisk database, å spesifisere bare tall- og bare fem tegn, så vi kommer til å ha å gjøre det i kode. Vi kommer til å gjøre det i PHP eller Java eller uansett språk vi er bruker på serveren for å håndheve den slags tvang. Whoo! Ok, så noen spørsmål ennå? La oss gjøre et annet valg med. Det viser seg at du også kommer til å velge, når du utformer en SQL-database, eller typiske relasjonelle database-- der igjen, relasjons bare betyr rader og kolonner, det er hvordan du organisere data-- og innse at hva dette betyr er, Jeg har vært misvisende i det er jeg drawing-- dette er det som kalles skjemaet for en databasetabell. Dette er som spesifikasjoner for table-- men når det gjelder tid å faktisk lagre data, og vi vil gjøre dette bare ved eksempel her. Jeg kommer til å åpne opp Excel, fordi Excel vil gi meg rader og kolonner. Og det er akkurat hva Oracle og MySQL og andre verktøy vil gi meg. Så jeg bare kommer til å bruke det for diskusjon skyld. La meg gå videre og åpne opp en representant dokument her, zoome inn litt. Så for eksempel, våre overskrifter er nå fornavn, etternavn, kjønn, ID, e-post, gatenummer, gate, whoops. Gate, by, stat, bare om passer på skjermen. Så hva dette betyr er at når en brukeren først registrerer for nettstedet mitt, det kommer til å være noe sånt David Malan, m, la oss si en, malan@harvard.edu, vil gatenummer være som en Brattle Square, Cambridge, MA, 02138, og da så videre. Så når jeg sier at en relasjonsdatabase eller SQL-database er rader og kolonner, Jeg mener dette. Det faktiske data lagres i rader og kolonner. Dette er bare en tilfeldighet, at vi snakket, og jeg var bare å tegne den ut i rader og kolonner. Dette er bare skjemaet, det overordnede definisjonen. Så av disse feltene her, eller ekvivalent, der, som er de feltene som du tror Jeg er sannsynlig å søke på hvis jeg er en bruker eller om jeg er den databaseadministrator? Liker, hva felt er jeg faktisk kommer til å søke på? PUBLIKUM: [uhørlig] DAVID MALAN: Navnet, ja så Jeg liker det faktum at-- yeah, e-post kan være ganske vanlig. Beklager, du sa navnet. Så maybe-- og igjen, vi er form av å snakke i det abstrakte. Jeg vet ikke hvorfor du ville være å søke etter et navn, men som føles rimelig hvis du søker etter en bruker. Kanskje sier, sikker, ID. Og det er en glatt skråningen, fordi jeg kunne pønsker et scenario der kanskje sjefen min har bedt meg om, hvor mange menn har vi på vår side? Hvor mange kvinner har vi på vår side? Og så på det punktet, vil du kanskje for å søke på kjønnsfeltet, også, og ingenting annet. Så det er en avveining her. Igjen, det er ingen rette svaret, men det er en funksjon i de fleste SQL-databaser kjent som indeksering, der du, designeren, den Databaseadministrator, får bestemme på forhånd hvilke markene til databasen bør optimalisere for søk på. Du kan meget naivt si, optimalisere dette, optimalisere det, optimalisere dette, optimere det og dette, og databasen vil gjøre noen magiske ting under hette, og gjøre noe på en slik måte at neste gang du søker på noen av disse feltene, Det vil faktisk være raskere. Dette er mulig. Det trenger ikke avbryte seg ut. Men det må være en pris som er betalt. Hvis du naivt, eller over-entusiastisk si, indeksere alle disse feltene, så å si, gjøre dem alle effektivt søkbar, hvilken pris er du sannsynligvis betale? PUBLIKUM: [uhørlig] DAVID MALAN: Ytelse. Hva mener du? Vel ytelse, i det minste i konteksten jeg diskuterer, er bedre nå. Det er definisjonen av indeksering. Det vil gjøre søk raskere. Så tiden minker, så å si. PUBLIKUM: [uhørlig] DAVID MALAN: Space. Så igjen, dette er en vanlig handel. Jeg kan fremskynde søkene dine, men det er kommer til å koste deg flere byte av plass. Hvorfor? Vel, som standard, hvis vi ikke har noen av disse røde stjerner, ingen av disse indeksene, som jeg sier, hvordan kan du søke etter et navn i denne databasen? Så la oss trekke vår hensyn til dette eksemplet. Hvis vi har David og Scully og Kareem og Arwa og andre i disse radene, for eksempel. Så la oss gjøre akkurat det. Scully er her inne, og deretter vi har Kareem, og Arwa, og alle andre, hvis du ikke har en indeks definert, så å si, det beste du kan gjøre er lineær søk. Hvis du søker etter Arwa, vi er ikke kommer til å være i stand til å hoppe rett til henne raskt. Vi kommer til å starte øverst og gå helt ned til bunnen, ikke ulikt vår opprinnelige Mike Smith eksempel. Hvis, derimot, sier jeg, hei, database, indeksere fornavn feltet, så det kommer til å gjøre noe avansert og støtte noe som binære søk. Det er nok ikke binært søk per se. Databaser pleier å bruke en annen datastruktur kalt B-trær, ikke forveksles med binære trær, som bare gjør det raskere å søke noe logaritmisk i naturen. Men prisen du betaler for å bygge opp den trekk, at datastruktur i minnet, er flere bytes. Så det kan ta noen megabyte, noen gigabyte, hvem vet? Det avhenger av dataene. Så på et tidspunkt, må du bestemme, det er nok ikke en vanlig sak. Så hva er den faktiske felles tilfeller, hvis du virkelig måtte velge, hva kan din favoritt feltene være? E-post. Og jeg liker e-post fordi e-post, I teorien bør være unike. Og så typisk, når du vet på forhånd at en av dine felt er eller vil være unik, at pleier å være en god felt å søke på, fordi den måten, når du søker etter noe, du kommer til å få tilbake en eller null svar og så er du ferdig. Du trenger ikke å holde leter etter men andre. Og så i dette tilfellet her, e-post, så lenge du ikke kan registrere to ganger med den samme e-post, er en god en. ID per definisjon, i informatikk verden, hvis du snakker om en ID, som bedre hadde være unikt. Det er liksom den konnotasjon av ID eller identifikator. Og resten av disse kan være, la oss kalle dem hyggelig å haves, men egentlig ikke nødvendig. Og så i en database, du angir indekser, men du kan være enda mer presis. Du kan si hei, database, sørg at hver ID i denne tabellen er unik. Ikke engang la en programmerer tilfeldigvis satt i en duplikat e-post eller kopiere ID-nummer. Så mye som enums beskytte oss på samme måte, du kan ha disse lavere nivå forsvar. Og så database design, i noen måte er like gøy, fordi du gjør det defensivt. Du slags anta at du jobber med fryktelig, fryktelig programmerere og du ønsker å sette inn så mange forsvar du kan for å beskytte dine data, men samtidig du vil for å hjelpe dem bedre resultater ved å velge hvilken felt for å optimalisere for. Men du kan ikke nødvendigvis gjøre det i et vakuum som vi slags er her. Du er nødt til å vite hva som er de vanligste tilfellene være. Hvis utviklerne er implementere en adressebok, du kan godt ønsker å kunne for å søke på nesten alle felt, bare ved innholdet i søknaden. Så kanskje du bruker som ekstra plass. Høyre, noen spørsmål? Yeah. PUBLIKUM: [uhørlig] DAVID MALAN: Nei. PUBLIKUM: [uhørlig] DAVID MALAN: OK. PUBLIKUM: [uhørlig] DAVID MALAN: Å, så vi snakker i en vei nå det er helt språket agnostiker. Så vi snakker nå om relasjonsdatabaser mer generelt, eller SQL databaser mer generelt. PUBLIKUM: [uhørlig] DAVID MALAN: Et bedre ord å bruke er, kan brukes av alle språk. Så jeg kan skrive Javascript-kode, C kode, C ++ kode, Java kode, Ruby kode, som alle snakke med en database og utføre spørringer. Faktisk, det er ikke en dårlig naturlig overgang til et eksempel spørring. Og igjen, vi kommer ikke til å gå inn Java eller C ++ eller noe av det lenger, men i SQL, språket som jeg holder henvise, Structured Query Language, Dette i seg selv er et programmeringsspråk, men det er ment å bli brukt for, ingen overraskelse, strukturert spørrespørringer. Med det mener jeg dette. Måten du velger data fra en MySQL database er du bokstavelig talt skriver i programmet noe sånt som velger stjerne fra brukere. Jeg antar at denne tabellen, heretter kalles brukere. Jeg kan kalle det noe vi ønsker, men den slags er fornuftig. Og så velger er en veldig vanlig verb, hvis du vil i SQL, gjør det bokstavelig talt det. Hva tror du stjerne betyr i denne sammenheng? PUBLIKUM: [uhørlig] DAVID MALAN: Jeg beklager? PUBLIKUM: [uhørlig] DAVID MALAN: Ikke nødvendig, det er mer inkluderende enn det, faktisk. Det er wild card karakter. Stjerne nesten alltid betyr noe, så betyr dette, i dette tilfellet velge alt fra databasen. Så når jeg sier dette, mener jeg gi meg tilbake hver kolonne fra mitt bord kalt brukere. Så gi meg et resultatsett, som det heter. Med andre ord, gi meg en kopi av regneark, er det jeg prøver å si. Men hvis jeg sa velger stjerne fra brukere hvor ID lik 1, hvor stor bør mitt resultat sett være da? Eller ekvivalent, hvor mange rader bør Jeg skal leveres tilbake fra databasen? Sannsynligvis bare en, hvis jeg har faktisk behandlet ID som en unik identifikator, og hvis David har den unike ID, jeg bør få tilbake én og bare én rad inneholder alle Davids informasjon. Hvis jeg sa dette hvor ID lik 99, skal jeg komme tilbake, i denne sammenheng ingen rader, i det minste i øyeblikket. Men hvis jeg ikke egentlig bryr seg om all denne informasjonen, Jeg kunne bare si, hvor kommer David bor? Velg postnummer fra brukere der ID er en. Dette vil velge for meg bare Davids zip kode og ikke helheten av den raden. Hvorfor kan jeg gjøre dette i stedet for stjernen søket, wild card? PUBLIKUM: [uhørlig] DAVID MALAN: Ja, kanskje jeg bare trenger det. Så ytelse er igjen svaret her. Hvorfor be om mer informasjon enn du trenger, fordi selv om det er greit sammen, du har fortsatt å kopiere disse dataene, det ville virke, fra databasen inn i programmet eller annen måte, og det er bare dumt hvis du trenger bare fem av disse tallene, ikke helheten av raden. Så hvordan setter jeg inn en bruker? Anta at en bruker har bare registrert for første gang. Syntaksen vil vanligvis se slik ut. Sett inn brukere, og så vi vil si verdier, og da ville vi si verdier som, la oss si, Lauren Scully, vår videographer her. Og neste felt er kjønn. Så vi vil si sitat, unquote "F", så har vi en ID og jeg kommer til å say-- la oss late som hun er faktisk ikke her, så vi vil spole tilbake i historien. Så to vil bli hennes ID. Og så neste felt her er hennes e-post. Så det kommer til å bli som Lauren Scully og så videre, og vi må bare dot dot prikk den bort herfra på. Nå vil det bli litt langtekkelig, men innsatsen søket vil til slutt se ut som. Hvis jeg ønsker å bli kvitt Scully, uh-oh, la oss avregistrere henne, sletter hun sin konto, slette fra brukere der ID er lik 2, vil bli kvitt Scully. Eller jeg kan si oppdatere brukerne sette, la oss si, hva kan vi endre? Anta at hun beveger seg. Set zip lik 021-- nope, det er hennes nåværende zip. 90210. Den eneste andre postnummer Jeg vet i verden. Så det ville endre hennes zip code-- faktisk, som ikke ville endre hennes postnummer. Hva gjorde jeg bare gjøre? Selv om syntaksen er trolig ny. PUBLIKUM: [uhørlig] DAVID MALAN: Ja, jeg flyttet alle Beverly Hills, California. Så jeg burde egentlig si hvor ID er lik to. Og så videre. Så SQL handler om disse typer instrukser. Velg, sette inn, slette, oppdatere, med disse predikater på slutten disse der klausuler, så å si. Og det er mye mer du kan gjøre, men det er egentlig bare koker ned til enkelt, hvis arcanely, uttrykker hva du vil at databasen skal gjøre. Og så databasen vil finne ut når du setter Lauren Scully inn database, hvor du skal sette henne i minnet slik at vi raskt kan få henne basert på hennes e-postadresse eller basert på hennes ID-nummer eller lignende. Ja, Dan. PUBLIKUM: [uhørlig] DAVID MALAN: Virkelig godt spørsmål. Vil disse skriptene endres fra Microsoft Access til Oracle til MySQL til PostgreSQL? Det korte svaret er det avhenger. I teorien er det en meget betydelig felles delsett av SQL som deles på tvers av alle av disse implementeringer. Men, ulike produsenter har lagt til funksjoner til sine databaser for å gjøre visse ting utenfor rammen av disse funksjonene, som kan, i virkeligheten, i stykker. Så hvordan utviklere sikre seg mot dette, er at heller enn å skrive rå SQL-kode som jeg skriver her, de i stedet bruke et bibliotek, et felles bibliotek som seg selv er liksom høyere nivå og sammendrag borte hvilket produkt du bruker. Og det gir deg funksjoner og prosedyrer å ringe slik at du aldri faktisk skrive rå SQL. I teorien så kan du endre produkter fra Oracle til Microsoft eller vice versa, eller noe annet, og du bokstavelig talt endrer ingenting om koden din. Realiteten er imidlertid, du noen ganger gi opp funksjoner som resultat. Du har kanskje valgt et produkt fordi det har disse verdiøkende funksjoner, og du er bare nå ikke bruke dem bevisst. Og anekdotisk, de fleste selskaper har en tendens aldri å bevege seg bort fra deres database. Så selv om dette er en hyggelig å ha-funksjonen, virkeligheten er, hvis du overhale databasen, du er sannsynligvis lage bunter av andre endringer uansett, at du ikke nødvendigvis trenger å forutse det. Så det er uten tvil over-engineering problem, men det er egentlig avhengig av kontekst. Men i teorien, blir SQL-delt på tvers av disse forskjellige produkter. Virkelig gode spørsmål. Yeah. PUBLIKUM: [uhørlig] DAVID MALAN: Ja, så du kan tenke en database er bare en server ved enden av dag, og på innsiden av denne serveren er en hel haug med tabeller, rader og kolonner. Og når du sender en spørring som dette fra programmet, ditt nettsted, skrevet i Java, Ruby, Python, uansett, serveren mottar denne kommandoen og tolke det i bokstavelig talt på samme måte vi diskutert tidligere med tolket språk, og deretter utføre noen handling på null eller flere rader i null eller flere tabeller. PUBLIKUM: [uhørlig] DAVID MALAN: Akkurat, akkurat. Så pseudo for noe som det kan være dette. I PHP-filen eller Python-filen eller Java-fil, du ville ha pseudokode, eller Scratch-lignende blokker som, hvis brukeren besøker acme.com/register~~V for første gang, deretter sette inn brukere og så videre. Og vi ville oversette dette til mer konkret kode til slutt. Men egentlig har vi alle byggesteinene her, selv om vi hopper over noen av implementeringstrinn. Så la meg finne feil med det vi fantastisk gjorde bare et øyeblikk siden. Du har opprettet en pen komplett tabell for brukerne. Riktignok kan vi iverksette det i et par forskjellige måter, men du har faktisk ført oss ned path-- og sier jeg deg, men det er nok min fault-- om en nokså ineffektiv database implementering. Det er ikke normalisert. Og ved normalisert mener jeg det kommer til å bli, over tid, en betydelig redundans, og derfor ineffektivitet, det er sløsing med plass. Basert på bare det du ser her, kan du ser hvor dette bortkastet plass skal komme fra, over tid, som flere og flere brukere registrerer for nettstedet ditt? Hvilke data kan bli overflødig? PUBLIKUM: [uhørlig] DAVID MALAN: Hvorfor mener du det? PUBLIKUM: [uhørlig] DAVID MALAN: Ja. Og la oss anta for de formål i dag at det er sant. Slår ut, og vi har lært dette den harde måten, det er ikke sant. Liksom flere byer har, en eller annen måte, det samme postnummer, som bryter denne fantastiske intuisjon. Men la oss anta at det er sant, fordi det er nesten alltid sant. Så antar at et postnummer er alltid forbundet med den samme byen og staten, som er snill rimelig antagelse, men feil, viser det seg. Men en rimelig antakelse for dagens formål. Da antar at jeg bor i Cambridge, MA, i henhold til denne brukerens bord, og anta at Lauren Scully bor i Cambridge, MA, og anta at Kareem bor i Cambridge, MA, og Arwa bor i Cambridge, MA, alle av oss i 02138. Hvorfor er vi huske Cambridge, MA, 02138 for alle fire av oss? Hva bør være nok til å huske? PUBLIKUM: [uhørlig] DAVID MALAN: Bare postnummer. Bare at 02138 eksisterer, fordi du vet hva vi kan gjøre? Vi kunne få litt fancy her og over her, definere en annen tabell hvor dette kommer til å være navn, dette kommer til å være den typen, dette kommer til å være lengde, og fra nå av er jeg kommer til å kalle dette min byer tabellen. Dette ble kalt, av Selvfølgelig min brukere bord. Og så hva skal jeg sette over her for min byer bordet, tror du? PUBLIKUM: [uhørlig] DAVID MALAN: Ja. Så zip og staten og byen. Og så den typen her, vil vi si dette kommer til å være en char 5 igjen, lagt debatten om tidligere. Dette vil være en enum, kanskje som før, vil og byen være en varchar 50. Og så nå hva får jeg slette fra denne tabellen for å eliminere at ineffektivitet? PUBLIKUM: [uhørlig] DAVID MALAN: Nice. Staten og byen gå bort, så jeg har nå eliminert den potensielle ineffektivitet for redundant huske, Cambridge, MA, Cambridge, MA, Cambridge, MA, Cambridge, MA, som forhåpentligvis aldri kommer til å forandre seg. Og selv om den gjør det, er det minorly irriterende, nå at jeg må endre det i flere rader, mens her, jeg kunne bare endre det på ett sted. Nå hva er trade-off, kanskje? Dette var super praktisk. Hadde alle mine data pent sammen. Men hva er klart saken nå? PUBLIKUM: [uhørlig] DAVID MALAN: Akkurat, og jeg er glad du brukte ordet delta, fordi det er faktisk nøkkelordet, i verden av relasjonsdatabaser i SQL, er det en faktisk ordet du kan skrive eller minst formidle. Og faktisk, det vi nå har å gjøre å velge Davids full informasjon er noe sånt som velger stjernen fra brukere, bli med byer, on-- og nå Jeg kommer til å bare flytte til en annen linje slik at denne fits-- users.zip lik cities.zip, hvor users.ID lik en. Så hva skjer? Det er stygt å se, men du kan slags lese den venstre til høyre, øverst til nederst. Velg stjerne fra brukere er den samme som før, men det er ikke fra brukere, per se. Det er fra brukere delta byer. Hva skal jeg bli med disse to tabellene på? Vel, tydeligvis, brukere tabeller zip-feltet, og denne periode er bare spesielle syntaks for å uttrykke den ideen, og dette er de byer tabeller zip-feltet. Jeg vil at disse to skal være like, men jeg vil til slutt velge bare de radene der ID i brukertabellen lik 1, som skjedde til å være mine. Og bare for å være klar, en programmerer, vanligvis når hardcode noe sånt antall 1, fordi ellers bare nettsiden støtter David eller aller første bruker, vil i stedet gjøre noe som ID, hvor dette representerer en variabel, noe som kan endre seg over tid, tilsvar i ånden til det jeg sa tidligere med slike plassholdere. Men for nå skal vi bare hardcode det som en. Og så hva betyr dette? Vel, en fin måte å visualisere dette er at hvis denne hånden er det brukere bordet, og denne hånden er glidelåser tabellen, vi er liksom finding-- og tips av fingrene mine er zip over her, og tips av fingrene her er zip, du er type sikringsanlegg det slik at du får tilbake den resulterende opprinnelige tabellen, etter virkelig å bli de to tabellene på felles felt. Og det trenger ikke å være zip. Det kan være de fleste noe annet, men zip er fint, fordi en, det er kort, to, det er alltid samme lengde, slik at det er en reell effektivitet til hva Olivier foreslått her med factoring ut zip, og [Hørbar] foreslår at vi blir kvitt av byen og stater. Så dette er prosessen som kalles normalisering. Eventuelle spørsmål om det? Vel la meg påpeke Dette er den type ting, selv om det er ganske lavt nivå, denne diskusjonen, at du tror du liksom få tapt i ugress, dette er en manifestasjon av god mulighet for utviklere å være dårlig. Og i virkeligheten, selv når vi, i kurs jeg har lært, når vi har hatt, for eksempel, uerfaren lavere programmerere bygge nettsteder, ved første øyekast, nettsteder kan se veldig bra. Og de har alle funksjonalitet vi bedt om, utviklerne gjorde en god jobb. Men de hadde ikke nødvendigvis vet nok om databasedesign eller de ikke tenker hardt nok om hvilke typer data og hvilke typer brukerne Nettsiden ble nødt til, og vi finner da seks måneder senere, etter at de har oppgradert eller flyttet på, som faen, vår hjemmeside er virkelig, virkelig sakte. Og jeg er ikke engang snakke om å ha millioner eller tusenvis av brukere. Jeg mener et par hundre brukere på campus, alle som ønsker å, for eksempel, handle for kurs på Samtidig er de bruker som kurskatalog søknad jeg nevnte og ting blir virkelig bremse fordi det var ingen indekser. Det var ingen røde stjerner, så å snakke, eller hadde vi ikke nødvendigvis tatt ut felles data til få noen besparelser på plass. Og så når vetting en utvikler eller database person eller lignende, hva slags spørsmål å tenke gjennom er selv, når vi vurderer noen kode, å si, ikke nødvendigvis ser gjennom alle koden sin, men sier: La oss se gjennom databasetabeller. Hva er det du lagrer? Og så å si, vel, vent minutt, hvorfor bruker du et heltall? Hva hvis vi har 4000000000 og en av disse radene? Og slike spørsmål er en mulighet til slags presse tilbake og få en følelse av hvor hvis du ikke er komfortabel med å gjøre det, å ha noen mer teknisk stille disse spørsmålene, om hvorvidt personen virkelig kjenner sine ting. Og dette er den type ting også, som folk på internett som er selvlært, kanskje lære sjeldnere, fordi du ikke nødvendigvis kommer over det så mye, fordi du kan få databasen oppe og går, men med mindre du har lest opp på tutorials eller vært fortalte om database normalisering og indeksering og ytelse, disse er den slags ting som kommer til å skade deg. Og du tenker kanskje, eller en dårlig ingeniør kan si, oh, vel, vi bedre lønn for en større database eller en raskere database eller bare kaste penger på dette, vertikalt målestokk, ikke nødvendigvis slik. Hvis du går in-- og du kan gå i etter fact-- og legge indekser, og det kan ta noen timer for database for å bygge opp den nye data struktur som jeg antydet tidligere, du kan fortsatt fikse dette i ettertid, at dette er hvor du begynner å skille gode designere fra dårlig designere, ikke bare estetisk, men ytelsesmessig også. Noen spørsmål? Nei? Så for NoSQL, som var den andre typen database som jeg antydet tidligere, du trenger ikke rader og kolonner. I stedet må du ha noe som ser litt mer ut som dette. Jeg kommer til å bruke sunn syntaks. Klammeparentes tilfeldigvis brukes her ganske mye. Du har kanskje noe som første navn er David, du kan ha siste Navnet er Malan, sitater, du kan ha ID er-- Unnskyld meg, er whoops-- ID 1, e-post er malan@harvard.edu, og jeg vil ikke bry å skrive ut resten, og deretter noen andre ting. Med andre ord, er denne en tekstlig representasjon av hva vi ville vanligvis kaller et objekt i et dataprogram. Og et objekt er vanligvis bare en samling av viktige verdi-par. Så igjen, dette tilbakevendende tema. Vi så nøkkelen verdi-parene i HTML, vi så sentrale verdiparene nå i sammenheng med databaser, og vi så sentrale verdiparene i sammenheng av, tror jeg, et språk tidligere i dag. Holder kommer opp. Og ja, det er virkelig hvilke data som koker ned til, data og metadata, eller verdier og nøkler, henholdsvis. Så en ikke-relasjons database, noe basert på objekter, der du bare klumper seg alt sammen og legg den i minnet, vil generelt være avbildet som, eller tenkt på, som dette. Og jeg vil la det nå som en slags alternativ tilnærming. Og man er ikke nødvendigvis bedre enn den andre. Faktisk veldig mye på moten i disse dager er databasesystemer som MongoDB og Redis og noen andre slike verktøy, fritt tilgjengelig, men de er i økende grad en mote. Delvis fordi de tilbyr ekstra har over disse tabell tilnærminger, men også fordi de er litt enklere å bruke, fordi du ikke trenger å tenke så hardt om mange av disse design beslutninger. Så plusser og minuser. Så skjønner det finnes alternativer utover det vi bare brukt tid på. Så la oss gjøre dette. La oss gå over litt tilbake nå til web-programmering, slik at vi på en måte konkludere i dag med noe det er litt hands-on, fylling i noen hull fra i går. La meg gå til denne først. Så husker at i går vi hadde noen kanonisk HTML sider som hadde i utgangspunktet, bare HTML, og deretter sekundært hadde CSS, Cascading Style Sheets. Dette er et nytt merke som vi ikke har se i går, eller dvele ved, såkalte script tag. Det viser seg at du faktisk kan legge inn en språk kalt Javascript i nett side og nett sider gjøre noe. Så hva mener jeg med det? Vel, la meg gå videre og bare låne denne koden for en stund. Jeg kommer til å gå inn i Cloud9, ikke behov å gå der selv ennå, og jeg kommer til å kalle dette alert.HTML. Jeg kommer til å lime inn i min fil her. Og bare for å klargjøre hva jeg har gjort, la meg gå til denne adressen og gå for å varsle, og du ser Hello World. Men dette er slags uimponerende. Jeg ønsker å gjøre noe litt annerledes. Så jeg kommer til å faktisk gjøre dette. Jeg kommer til å gå inn her e, og i mellom mine skriptkodene, sier alert ( "Hei, verden '); så varsel det er litt slurvete, men jeg har fått HTML, på innsiden av hvilken er en språk kalt Javascript, og dette er det som kalles en funksjonskall eller prosedyrekallet. Dette er et verb, bokstavelig talt, i dette tilfellet og jeg påkalle kode funksjonalitet at noen andre skrev. Slik at funksjonaliteten er en varsling, så la oss gå til denne siden nå og klikk på reload, og nå se litt av interaktivitet. Det er slags gamle skolen og stygg. Denne typen minner deg om pop-ups, kanskje, fra en svunnen tid men det gjorde ikke noe litt mer programma. Så mer enn det, la oss gjøre noe mer interessant. La meg gå inn her og bli kvitt dette. Og jeg kommer til å gå videre og lage et skjema som vi gjorde i går. Egentlig vet du hva? Jeg kommer til å gå inn google.html, som vi startet på i går, noe som så ut som dette, via som vi søkte etter katt Men merker det er litt av en bug i den gjeldende versjonen. Det fungerer for katter, men antar at det Jeg vet ikke samarbeide og jeg skriver noe, og jeg klikker du ganske enkelt. Det er slags merkelig oppførsel. Tok meg til den virkelige Google, ikke gi meg en feilmelding. Jeg vil gjerne fortelle brukeren du trenger for å gi oss en verdi. Så hvordan kan vi gjøre dette? Vel la meg gå tilbake til Cloud9 og la meg gå inn på toppen av siden min og legge til et script tag som dette, hvor Jeg kommer til å skrive noen Javascript-kode. Og jeg kommer til å gjøre følgende. Hvis (document.getelementByID-- og tilbakekalling at vi snakket om det tidligere, denne funksjonen. Hva ID ønsker jeg å få? Jeg ønsker å få q, og jeg kommer til å si lik ingenting, som dette-- faktisk la meg bruke anførselstegn bare for consistency-- lik ingenting, deretter alert ( "Vennligst skriv en spørring") her. Så jeg har det som synes å være noe som en betingelse. Vi har sett denne generelle ideen i Scratch. Det er som en av disse pusle stykker som så ut som dette. Og hva er det jeg sier? Vel, her nede, merker jeg er kommer til å gjøre følgende. Jeg kommer til å gi ut dette skjemaet feltet er ikke bare et navn på q, som er det som får sendt til Google, men jeg er kommer til å gi det en lokal identifikator, også kalt q. Men jeg kunne kalle dette noe jeg vil, jeg skal bare holde det enkelt og også kaller det q, bare for enkelhet. Og nå skal jeg gjøre noe litt mer. På skjemafeltene her, kommer jeg til å legge til det som kalles en hendelseshåndterer. På sender inn, jeg vil kalle en funksjon som heter validere. Denne eksisterer ikke ennå, dette ord, eller dette verbet validere, fordi hva jeg skal gjøre her oppe nå er å legge noen kode. Jeg kommer til å si funksjon validere. Jeg kommer til å rykke inn dette og legge til en annen klammeparentes her og en annen her. Tenk hva dette er nå gjør. Jeg har now-- tenke på dette som skapte min eget puslespill brikke som ikke tidligere finnes, og jeg har kalt dette pusle sette den validere puslespill brikke. Dens formål i livet er å utføre de fire linjer med kode inne i den. Hvis document.getElementById så konseptuelt, som kommer til å gå inn i element, HTML-elementet hvis unike Tanken er bare q, og da selv om syntaksen ser litt rart, som tilsvarer tilsvarer bare betyr likeverdige. Så betyr det at hvis elementet med unik identifikator for q, da fått, har ingen verdi, det bare er lik quote unquote, ingenting der, så hva gjør jeg ønsker å gjøre? Jeg ønsker å kjefte på brukeren. Og vi vil ikke gå i stor detalj her. Jeg kommer til å returnere false. Det er en feil. Else, jeg kommer til å returnere true. Så enten det fungerte eller det ikke. Falsk eller ekte. Og nå hvis jeg ikke gjør noen feil, la meg lagre dette og legg dette. Og la meg bare dobbeltsjekke at Jeg visste ikke, faktisk, gjør eventuelle skrivefeil, så jeg ikke flau selv. La oss se om dette fungerer. Så nå kommer jeg til å skrive katter. Det fortsatt fungerer, eller halv verk, minst. Nå la meg laste det, og nå la meg prøve å sende inn uten å skrive anything-- faen, det brøt. Et øyeblikk. La meg åpne konsollen, [Hørbar] log, oppdater siden. La meg prøve dette igjen. Å, faen. Jeg glemte. Jeg har gjort en skrivefeil. Jeg husker hva det er. .verdi. Jeg mente å si hvis verdien av elementet hvis ID er q lik det, så kjefte på brukeren. Så nå la meg holde pusten igjen. Her går vi. Det vi går. Skriv inn et søk. Så det er ikke å la meg gjennom. Jeg kan være litt leken med dette, og i stedet for å se etter noen verdi, Jeg kan si noe sånt som: ikke mer å lete etter katter, og nå kan vi bare mer lekent la brukeren søk for hunder hvis han eller hun ønsker, eller hvis jeg går inn her og søke etter katter, nå kan jeg ikke. Så hva er takeaway her? Så en har vi ført inn vår verden av HTML og CSS, programmering funksjonalitet. Jeg kan faktisk nå fatte vedtak i kode. Tidligere er alt jeg kunne gjøre markere tekstlig innhold eller grafisk innhold og fortelle den hva du skal se ut og hvor de skal vise. Nå kan jeg faktisk spørre spørsmål av nettsiden og ta avgjørelser basert på den, og be brukeren hvis jeg trenger å kjefte på ham eller henne. Så la oss prøve noe på vår egen med dette. Kom igjen, la meg åpne opp neste lysbilde her, og bare påpeke en ting. Akkurat som med CSS, kan vi faktor ut Javascript-koden til en egen fil, du kan gjøre det samme med Javascript som med CSS. Og du bruker som bruker en kilde attributt av skriptmerket. Men vi vil ikke komplisere ting for nå. I stedet, hvis du kunne gå til ikke denne siden men-- la meg flytte dette rundt i order-- gå til, hvis du kunne, denne siden her. Denne nettadressen her. Det er i dagens lysbilder. Du må kanskje laste fordi Jeg har lagt til et par ting. Men går det der noen oppgaver venter. Og dette vil gi oss en sjanse, i en litt mer moro sammenheng å prøve seg med litt Javascript. Og når du kommer dit, Jeg skal forklare hva som venter. Få grønt. Sett blå. Stiller grønn setter rødt. Oops. Beklager. Dette er omfanget av vår dokumentasjon for denne utfordringen. Og dette kommer til å fungere som følger. Så hva du har på denne side er en hel haug bilde puslespill av en kompis ved Stanford University. Så det du ser her er nesten form for en av de magiske øye puslespill, men hvis du bare stirre på den, ingenting kommer til å sprette ut på deg. Snarere er noe gjemt i dette bildet. Og det er skjult på følgende måte. Bilder, som du kanskje vet, kan være sammensatt av bare tre farger. Noen røde, noen blå og noen grønne. Og vi kan gjøre hele fargene i regnbuen ved å blande de tre fargene eller annen måte. Så dette ser det meste grønne og blå, men som Nick sier her, Dette jern puslespillet bildet er et puslespill. Den inneholder et bilde av noe kjent, men bildet har blitt forvrengt. Den berømte objekt er i de røde verdier. Men den røde verdier har alle blitt delt på 10. Så de er for små med en faktor på ti. Så med andre ord, Nick tok et originalt bilde, og han Desaturated alle av den røde fra det, redusere mengden av rødt blekk, om du vil, i det. De blå og grønne verdier er alle bare meningsløst, tilfeldige verdier, aka støy utformet å skjule det virkelige bildet. Så hva Nick gjorde var han tonet ned den røde og deretter han bare kastet tilfeldig mengder av blått og grønt på bildet til slags obskure hva er faktisk fortsatt der. Du må angre disse forvrengninger for å vise bildet. Først setter alle de blå og grønne verdier til null for å få dem ut av veien, og se på resultatet. Deretter multipliserer hver rød verdi av 10, innskrenker seg til omtrent den endelige verdien. Hva er den berømte objekt? Så alt du har dette rektangelet i nettleseren din akkurat nå. Og legg merke til at det er noen starter kode, så å si. Dette er Javascript-kode som Nick har skrevet for deg. Og legg merke til at det er en linje i midten starter med en skråstrek skråstrek, det er det som vanligvis kalles en kommentar. Det betyr at det er en setning til programmereren som ikke har noen funksjonell betydning. Det er bare et visuelt til menneske. Så du kan gå videre og slette bare den linjen, og være super forsiktig så du ikke slette eller endre noe annet. Og la meg bare gå gjennom hva denne koden gjør, og jeg skal la det til deg å finne ut hemmeligheten bildet. Denne første linje her at jeg har bare uthevede gir deg følgende. På venstre side, du har det som kalles en variabel som Nick har vilkårlig, men rimelig kalt im for bilde. På høyre side av at likhetstegnet, han sier gi meg en ny sitat, unquote "simple image". Enkelt bilde, i denne sammenheng er det som kalles en klasse, vel, det er litt som en class-- teknisk sett en prototype-- men virkelig, Dette gir meg et nytt objekt, hvis innhold som er filen, jern-puzzle.png. Med andre ord, har Nick opprettet denne oppfatningen av et enkelt bilde slik at vi kan, for pedagogisk formål, leke med bildet og endre sin røde, grønne og blå verdier. Og hvordan gjør vi det? Denne noe kryptisk syntaks her er typen som gjentar blokk at noen av dere så i Scratch tidligere i dag, hvor du kan gjenta 10 ganger. I dette tilfellet har ikke Nick hardkodet et tall som 10. I stedet sier han, initial en variabel kalt x 0, sjekk om x er mindre enn bredden av bildet. Og så for å være mer korrekt, er bildet variabel, betyr dot gå på innsiden av det og få dens bredde, og deretter åpne paren, lukket paren er bare en programmerer måte å si dette er en funksjon. Dette er en prosedyre. Dette er funksjonalitet noen andre skrev. Bruk den og gi meg tilbake et svar. Og så x ++ er en fancy måte si, etter at du har gjort dette en gang, øke x etter en. Med andre ord, denne er en programmerer måte til å indusere en løkke som er kommer til å iterere over alle kolonnene i et bilde. Et bilde er bare et rutenett av prikker, rader og kolonner med prikker. Dette er en måte å itera i løpet av alle disse kolonnene. Og på innsiden, i mellomtiden, vi gjentar over høyder, her og her og her. Så dette er bare en måte å traipsing, nesten som en gammel skole skrivemaskin, å bare gå over Hele bildet iterativt. Selv det er ikke helt helt klar, bare ta på tro for nå, at disse tre linjer kode sammen er kommer til å tillate deg å iterativt se på hver piksel, hver prikk i bildet. Hva er en piksel? Vel, for å være klar, hvis vi ser på den opprinnelige og zoome inn, hvis du virkelig setter øynene til dataskjermen, det er bare en hel haug med prikker, flere tusen prikker pakket sammen der. Og så hva er du i ferd med å gjøre? Hver og en av disse punkter, en endelig definisjon, er et resultat av hva som er generelt heter RGB, rød, grønn, blå, som igjen, kan kombineres for å gi deg en rekke farger. Faktisk, hvis du husker fra mange, mange år siden, projektor skjermer som disse tingene pleide å ha ikke en objektiv, men tre. En av dem spytte ut rødt lys, en av dem spytte ut grønt lys, og en av dem spytte ut blått lys. Og hvis du var i en ungdomsskole som jeg var der de var aldri riktig justert, var du alltid ser historiske filmer som var litt forvrengt, fordi de tre fargene var ikke kombinere riktig. Men det viser seg at hver av disse verdiene røde, grønne og blå, kan ha en rekke forbundet med dem. For eksempel, 0 for rød betyr ingen rød, 0 for grønn betyr ingen grønn, og 0 for blå betyr ingen blå. Så hvis du ikke har noen røde, ingen grønn, og ingen blå, hvilken farge har du? PUBLIKUM: [uhørlig] DAVID MALAN: Du ville håper det, er det hvitt. Dessverre, operates-- dette beklager? PUBLIKUM: [uhørlig] DAVID MALAN: Så du faktisk har svart, i dette tilfellet. Så hvis du har ingen av disse farger slått på, du har svart. Men hvis du har, la oss si mye av dem, som mye rødt, 255 av den, en masse av grønt, og en masse av blått, er det hvit. Så dette er de to ytterpunktene. Så ved denne logikken, hvis jeg har mye av rødt og ikke grønt og ingen blå, hvilken farge er det? PUBLIKUM: [uhørlig] DAVID MALAN: Høyre, selvsagt. Og så ingen røde, mye grønn, ikke blå, og deretter hvis du Opptaktene bra, vil vi bare fullføre det, nettopp fordi, men dette er selvfølgelig nå, er blå. Og nå kan du kombinere disse fargene. Nå som en side, hvis noen av dere har inne har gjort noen faktiske webdesign, du kan faktisk se symboler som dette. FFF-- og faktisk, det er sannsynligvis ikke det engang. Det er FFFFFF. Alle som noen gang har sett F og E s og A through-- så det viser seg, Vi snakket i går om desimal, og hva slags dag, om desimal. I dag har vi snakket om binære. Slår ut, er heksadesimale en veldig felles base system som skal brukes i databehandling. Binary er to, er desimal 10, er hex 16. Og det viser seg, hvordan du telle i heksadesimal? Zero, en, to, tre, fire, fem, seks, sju, åtte, ni, hva bruker dere etter ni? Hva er det neste tallet? Vi har allerede brukt null. Jeg trenger 16 av disse. Zero, en, to, tre, fire, fem, seks, sju, åtte, ni, du trenger litt vilkårlig konvensjonen. Og hva menneskeheten besluttet for en tid siden at etter ni kommer brevet A og deretter B og deretter C. Så Måten du telle i heksadesimal er null, en, to, tre, fire, fem, seks, sju, åtte, ni, A, B, C, D, E, F, og som vil telle deg hele veien, viser det seg, til 15. Så null til 15 er null gjennom F. Nå hvorfor er det viktig? Vel, når du har to F-tallet, det er hvordan du uttrykker 255. Så lang historie kort, i verden av Photoshop, som grafisk design software, i verden av web-utvikling, hvor du har massevis av farger, selvfølgelig å spille med, ofte programmerere vil uttrykke de i heksadesimal, bare fordi det har en tendens å være litt enklere. Selv om ved første øyekast det er mye mer kompleks. Så i alle fall er dette viktig fordi Nick ved Stanford har gitt oss seks stykker av funksjonalitet at du, spirende programmerere, vil nå ha muligheten til å bruke. Innebygd i denne web side er seks funksjoner, seks prosedyrer som Nick skrev. Tre av dem vil få deg et nummer, en rød, en grønn eller blå verdi. Tre av dem vil sette denne verdien. Og disse strek er bare plassholdere, så du trenger å vite hva de er. Så med disse tre funksjonene den første av disse tingene kommer til å være en x-koordinat, og den andre av disse tingene kommer til å være en y-koordinat. Med andre ord, som prikken, som pixel ønsker du å få det grønne, få blå, få den røde av. Og så her, dette kommer til å være x, dette kommer til å være en y-verdi, og dette kommer til å være et tall. Så la oss gjøre det første linje av denne sammen og så skal jeg la det til deg for å prøve å utlede de andre. Så per instruksjonene på denne siden, trenger vi for å øke den røde med en faktor 10, og vi trenger å fjerne den grønne og fjerne det blå. La oss starte med sistnevnte scenarier. Så hvis jeg vil, og jeg kommer rykke inn ved hjelp av noen områder, hvis jeg ønsker å sette den røde, den grønne eller blå verdi, Jeg kommer til å gjøre følgende. Image, im.setBlue, og deretter basert på mine instrukser her, hva tre ting bør jeg skriver inni parentes nå? Jeg trenger den x-verdi, jo y-verdi, og hvilket nummer skal jeg sette her hvis jeg ønsker å bli kvitt av det blå, basert på denne historien her? Bare null. Hvis jeg ønsker ikke blå, jeg er bare kommer til å endre den til null. Nå la oss bare oppsummere hva denne gjør. Jeg har her på disse toppen andre og tredje linjer, Jeg hevdet to sløyfer, nestede løkker, hvis du vil, som kommer til å ha effekt av progresjon fra venstre til høyre, topp til bunn i løpet av hele x verdier og alle y-verdier. Fordi igjen, er et bilde bare et rutenett av rader og kolonner. Så dette kommer til å få kvitte seg med alt det blå. La meg la i neste linje til deg. Hvordan kan jeg bli kvitt all den grønne? PUBLIKUM: [uhørlig] DAVID MALAN: Nice. PUBLIKUM: [uhørlig] DAVID MALAN: Nice. Og jeg kommer til å zoome ut, og bare ta vare på at du ikke har gjort noen skrivefeil. Og hvis du er komfortabel med hva du har gjort, gå videre og klikk på knappen Kjør / Lagre og se hva du får. Og igjen, har vi gjort bare tre endringer. Vi har slettet det første kommentere og erstattet den med disse to linjer med kode. Og det er OK hvis du trenger å treffe Kjør / Lagre-knappen et par ganger å fikse noe. Og la meg også zoome inn på min kode slik at du kan transkribere. God. Så jeg ser Andrew har det synes å være en feil. Han har nettopp fått en stor svart rektangel på skjermen sin. Har noen andre har en stor svart rektangel? PUBLIKUM: Ja. DAVID MALAN: Big svart rektangel? OK, så la oss tenke om hva dette betyr. Vi sa at null, null, null, det grønne, ingen rød, ingen blå, kommer til å gi deg svart. Og det viser seg at de fleste av våre bærbare datamaskiner bare ikke har nok troskap. Du kan ikke helt si det er faktisk noe der. Og hvis du slags kanskje lene skjermen fremover og tilbake, Kanskje ser du en litt noe der? Kanskje, på en måte, liksom? Det er ikke helt svart. PUBLIKUM: [uhørlig] DAVID MALAN: Spoiler! Det er noe rødt der, men husker fra spesifikasjonene av problemet, Nick tonet det ned. Han Desaturated det noe, men ikke hele veien til null. Så hvis vi ønsker å foredle mengden rød, la meg foreslå dette trikset. La meg zoome inn på skjermen min. Og la meg gå videre og si Mengden er lik im.getRed (x, y). Dette kodelinje er å gi meg noe som kalles en variabel. Jeg har vilkårlig, men, uten tvil, rimelig ringte min variabel hva, tilsynelatende? Beløp. Bare beløp. Jeg kunne ha kalt det noe jeg vil, men jeg er bruker denne annen funksjon som jeg beskrev tidligere å få mengden rødt ved x komma y. Hvorfor gjorde jeg det? Hva vil du gjøre her? Du må add-- PUBLIKUM: [uhørlig] DAVID MALAN: Ja, kanskje multiplisere det med 10. Og hvis du ikke vet dette, er jeg kommer til å gå videre og gjøre dette. Jeg kommer til å gå videre og si, jeg vil mengden av rødt Jeg ønsker å være uansett er på rødt, ganger 10, og stjernen, stjernen på Tastaturet er folk flest i ikke bruker x. Bruk stjernen. Det er hvordan du multiplisere ting i de fleste programmeringsspråk. Så ifølge Kareem intuisjon, som er lagret i denne variabel kalt mengde, er hvor mye rødt jeg ønsker på stedet xy. Hvordan nå, gjør jeg det Pixel har det nummeret? Du har allerede gjort dette før. Du setter den grønne og den blå eller ingen verdi, til null. PUBLIKUM: [uhørlig] DAVID MALAN: Ja, vel du ikke vil ha det til 10. Du har allerede gjorde regnestykket her. Så vi får verdien av røde, som er et lavt tall, formodentlig. Vi multiplisere opp med 10. Hva du ønsker å gjøre med den variable beløpet nå? PUBLIKUM: [uhørlig] DAVID MALAN: Nice. Så im.set-- hva? PUBLIKUM: Setred. DAVID MALAN: Setred, ved plassering xy. Yeah. Og akkurat beløp. Med andre ord, en variabel er en midlertidig plassholder at du kan sette alt du vil i. Vi måtte være å sette en tall i den, i øyeblikket. Vi har ganget det med 10 for å gjøre den større. Og nå er jeg erstatte den variabelen som det tredje argumentet, eller innspill å sette rødt. Og slik at når du ferdig med det, og ta notat av semikolon og parenteser. Gå videre og klikk kjøre / lagre på nytt, og du bør se, magisk, det var faktisk der. [? Arwa,?] Hva er det? Eiffeltårnet i full-fledged rød, ikke helt mørkt. det bør være mer opplagt nå, ja? OK. Og Andrew, ikke mer svart boks? PUBLIKUM: [uhørlig] DAVID MALAN: Greit. Så jeg vil holde dette på skjermen. Hvis du ønsker å spille med denne senere, vil jeg gjenskape dette for deg. Men denne koden her gjorde akkurat det. Hvorfor kan ikke vi gjøre en annen. La meg bla ned litt. Så i dette tilfelle projektoren ikke virkelig gjøre det rettferdighet. Men på skjermer, har du sannsynligvis ha en meget rød og meget sorte boksen. Også dette er et puslespill som viser noe kjent. Imidlertid har det blitt forvrengt bilde. Den sanne bilde, denne gangen, er i det blå og grønne verdier. Men de har alle blitt delt ved 20 slik at verdiene er svært små. De røde verdier er bare tilfeldige tall, støy. Angre disse forvrengninger for å vise den virkelige bildet. Så Nick så forteller deg hva du skal gjøre. Setter de røde verdiene til null, og så ikke ødelegge hva det er. Deretter multiplisere den blå og grønne verdier med 20. Så det er nesten det samme programmet som før, men du reversere prosessen. Og jeg vil sette min kode fra før på skjermen i tilfelle du ønsker å se tilbake på det eller spille videre med den. La meg zoome inn på det. Men løse kobber bilde puslespill, nummer to. PUBLIKUM: [uhørlig] DAVID MALAN: OK, så dette er jeg ikke kommer til å gi så mange tips. Så jeg would-- oh, la oss se, du har en skrivefeil her. Så husk, dette her faktisk trenger å gå dit. Så det jeg ville foreslå, hvis du ønsker å fokus på dette, det er svaret. Hvis du ønsker å transkribere det, at bør få den første arbeids. Og så kan du bruke det som inspirasjon for andre. Hyggelig. God. Og for de nysgjerrige, Dette er et enkelt eksempel av en vitenskap eller en kunst kalles steganography, kunsten å skjule informasjon i bildene. Vanligvis bilder kan være vannmerke veldig åpenlyst med en logo i bunnen hjørne, men klart, du kan være mye mer sofistikert om det og faktisk skjule andre bilder i bilder en eller annen måte med denne teknikken. Ta en annen 30 sekunder, og deretter vi vil minst kunn hva du bør se. Og jeg vil forlate den tredje en som en hjemme-trening, Hvis du ønsker mer av en utfordre denne helgen. Og jeg tror Andrew kanskje har fått det første. Hva er det andre bildet, Andrew? PUBLIKUM: Statue of Liberty. DAVID MALAN: Statue of Liberty vil være svaret dette tidspunktet. Så igjen, bare noen enkle eksempler, har som mål er å gi deg en følelse av hvordan Vi har oversatt billed Scratch blokker til mer irriterende og mer komplisert kode, men alle ideene fremdeles er nøyaktig det samme, riktignok med innføringen nå av tanken om en variabel, blir stand til å lagre noe midlertidig. La oss gjøre en mer hands-on, bare for å nå koble prikkene til noe litt mer virkelige verden. Når du er klar, hvis du kunne gå til denne nettadressen på skjermen. Det er også i din kopi av lysbilder, developers.google.com/maps~~V. La oss faktisk gjøre noe ekte, så å si, på Internett ved hjelp av Google Maps API, eller Applikasjonsprogrammeringsgrensesnitt, på følgende måte. Google, som mange selskaper, gir mye gratis funksjonalitet som du kan bruke til å bygge din egne interessante programmer. Faktisk, hvis du noen gang har brukt Uber å få en drosje eller en bil, du sannsynligvis vet at Uber har et kart, og det viser biler på den. Det er, så godt jeg kan fortelle, Google Maps API. De er faktisk bruker Googles kart, men Uber er ikke en kartlegging selskap, og heller ikke ville det være en spesielt interessant problem å løse på toppen av deres bilservice problem. Og så de står, igjen, på skuldrene av andre, Google i dette tilfellet. Så de bruker Googles kart, men sine egne bilen tjenester og andre slike funksjoner. Så vi kommer til å dra nytte av dette for å gjøre følgende. Og hvis jeg har gått for fort, bare ring meg over på et øyeblikk. Glad for å gjenerobre noe av bildet ting. Du bør se deg selv på en side som dette. Så Googles hyggelig, og de er blant de beste om å tilby ikke bare APIer, men gratis APIer som du kan spille med eller bruke kommersielt. De begynner å belaste deg hvis din bruk er høy, men jeg gikk videre på forhånd og signert oss opp for en gratis konto det, forhåpentligvis, 10 datamaskiner vil ikke diskvalifisere oss for plutselig. Så forhåpentligvis dette demonstrasjonen vil fungere. Og legg merke til at de har APIer for Android, iOS, web og web-tjenester, uansett hva det er. La oss fokusere på nettet. Så klikker du på rosa boksen, web, og at vil lede deg, forhåpentligvis, til en side her. Og de har fått en hel haug med APIer. Og det kan være litt overveldende i starten, men jeg skal styre oss gjennom hva vi ønsker. Øverst til venstre er Google Maps Javascript API, Javascript API. Så gå videre og klikk på den. Og som vil lede deg nå til neste side, demoer og eksempelkode. La meg zoome ut her. Og la meg få oss to-- bla nedover til der det står rask start trinn. Skjermen skal se ut mine. Og det er to trinn, får en nøkkel og begynne å utvikle. Jeg har allerede gjort trinn én for oss, får en såkalt tasten. Og dette er en felles idé. En API-nøkkel er vanligvis bare en stor tilfeldig tall eller streng at du er ment lime inn koden, slik at Google vet hvem du er når du bruker deres tjeneste, deres API. Betyr ikke at vi er blir belastet noe. Og nå, klikk, i stedet for en, klikker du begynne å utvikle. Hvis du bare kunne vinke meg over hvis ikke sikker på hvor vi er. Så får vi bare ripe opp overflaten, her, men hva Jeg trodde ville være overbevisende er å faktisk ha oss alle, bruker Cloud9 i ett vindu og denne opplæringen i et annet vindu, lar faktisk få vår egen applikasjon oppe og går som bygger en tilpasset Google kart i vår egen webside, og deretter legger til en eller to funksjoner. Men vi vil bare ripe opp overflaten av hva vi kan gjøre. Så bare en rask sunn fornuft sjekk. Er alle på denne siden, Google Maps Javascript API? Burde si å komme i gang. Vi kommer ikke til å gå gjennom hele greia på noen måte. OK, i en annen fane, hvis du ikke gjør det har den åpen, gå inn Cloud9 og få deg til å bare en ny fane, til slutt. Så igjen, c9.io fra i går, c9.io, og bare lage en ny fil. Og gå videre og samtale det hva du vil. Jeg ringte min map.html. Kall det noe som ender i HTML. Og du bør være omtrent hvor jeg er i denne prosessen med bare en blinkende tekst i en tom Kategorien heter noe sånt som map.html. Eller fil, ny fil av denne tiden. Og nå, over på Google Maps Javascript API, vi hopper lesing gjennom hele denne teksten. Men legg merke til at hello world er ja overalt, ser du det nå. Hei, verden har dette stor fargerik eksempel på en hel haug med HTML. Gå videre og kopiere og lime inn bare det HTML, så fra doc typen på toppen hele veien til utgangen HTML-koden, gå videre og kopiere alle at-- igjen, som er under hello world example-- og lim den inn i kategorien Cloud9, så nå skjermen din bør se omtrent som min. Og du kan lagre det, men ikke legger det ennå. La oss først se på koden og se om vi kan ikke slutte eller lære fra hva det er Google har hatt oss blindt kopiere og lime. De ønsker bare å hjelpe, bokstavelig talt, få oss i gang, men det er ikke så mye kompleksitet faktisk det. Eventuelle spørsmål ennå? Vi er trygge å smi videre? OK. Så raskt, la oss bare gjøre noen raske feilsjekkene. Linje en av hva jeg se, og forhåpentligvis, du se, hva betyr det, DOCTYPE HTML? Kareem, husker? PUBLIKUM: [uhørlig] DAVID MALAN: Ja. Her kommer HTML 5. I mellomtiden, linje to i skjermen her betyr hei nettleser, her kommer selve HTML. Linje tre er hey nettleser, her kommer hodet. Linje fire er, selvfølgelig, hei nettleser, her kommer tittelen. Hva gjør linjen fem gjøre? Egentlig gjør ikke dette virkelig gjøre noe for oss. I dette tilfellet, det bare endrer størrelsen siden til en standard. Linje seks, vi har ikke snakket om, men det spesifiserer tegnkoding. Det er forskjellige måter å kode filene, spesielt for fremmedspråk. UTF-8 bare en tendens til å være standard. Så nå får vi se i kø sju til 16, noen CSS. Og selv om vi ikke har sett alle disse tingene før, vi kan slags antyde. Så linje åtte midler, hei nettleser, gjelder alt av følgende til hvilke to koder, tilsynelatende? HTML og brødtekst. Så komma er det nye ting der. Og det er bare en måte å spesifisere flere koder samtidig. Da har vi klammeparentes. Så tydeligvis, forteller denne nettleseren, gjøre høyden på side 100%. Så selv om det er svært lite innhold, gjør hele siden, gjøre ting fylle siden. Gjør kartet til slutt fylle siden. Margin, hva betyr det? Det er som regel like vilkårlig hvit ramme rundt kantene at noen leseren designer bare besluttet skal være der, fordi det slags gjør ting ser renere. Men vi ønsker ikke det. Vi vil at kartet skal helt ut til kantene. Padding, ligner i ånden til marginer. Marginene bety utenfor, padding midler inne, men det er den samme type avtale. Det er litt av en buffer mellom deg og kantene. Og deretter linje 13 er en god mulighet for en rask gjennomgang. Hva gjør skarpt tegnet kart mener, eller hashtag kartet? Hva betyr det refererer til, i prinsippet? PUBLIKUM: [uhørlig] DAVID MALAN: Nettopp. Denne egenskapen, denne CSS eiendom gjelder bare en ting, HTML-koden som har en ID sitat, unquote "kart". Og nå la oss spole fremover, bla ned til bunnen av filen, hvilken er ikke så langt unna, og varsel på linje 19, hvis du limer det akkurat som jeg gjorde, linjen 19 har bare en div, som er et delingen av siden som i går jeg kalles en rektangulær region. Det har ingenting i den. Det er en åpen tag, nær tag. Men det har en unik ID. Så hva synes å være skjer her er Google er Klargjøring vår nettside for å har en fullstendig 100% høyde, og ingen padding, ingen marginer, fordi hva vi kommer til å sette inne av denne div, hvis unike ID er kartet, er en faktisk innebygd kart. Og vi vil at den skal fylle siden og ikke bare være noen liten firkant i midten. Så linje 14 på samme måte understreker den kartlegge seg selv skal ha en høyde på 100%. Så nå ser mellom linjene 20 og 28, er dette Javascript-kode. Og dette er, selv om det er syntaktisk litt rart, det er ikke så mye som skjer her. I tråd 21, er dette erklære noe som kalles en variabel. I stedet for å kalle det utgjør, som vi gjorde før, Vi er mer presist å si Var, som nettopp betyr variabel. Vi kunne ha brukt det i Nick kode, men han gjorde det ikke, så jeg ikke bry å gjøre det heller. Det er en variabel kalt kart, og så er det en funksjon som er tilsynelatende kalt initMap. Så dette er som våre egne puslespillbiten i Scratch. Vi har laget et stykke funksjonalitet kalt initMap, og du kan slags antyde Hva foregår her. På venstre side, vi har fått en variabel, så vi kommer til å sette følgende ting inni den variabelen, fra høyre mot venstre. Den høyre side sier: hey nettleser, gi meg en ny Google-kartet. Og google.maps.map er bare en funky måte for å spesifisere at denne funksjonaliteten tilhører Google Maps. Etter parentesene, har vi sett dette før, hei nettleser, får meg elementene i siden, tag på siden hvis unike ID er-- PUBLIKUM: [uhørlig] DAVID MALAN: --map. Og hva som skjer, vel, denne linjen sammen, linje 23, er i hovedsak si, hei nettleser, gå meg som tom div på siden hvis unike ID er kartet, fordi jeg ønsker å sette inn inn i it injisere inn i det, hvis du will-- en hel haug med innhold som skjer for å komme fra nettet, deretter. Og Googles gjør alt dette for oss. Så igjen, helt på slutten av dagen, vi har dette eksempelet av abstraksjon. Jeg har ingen anelse om hva et kart er eller hvordan å implementere et kart API. Vi trenger ikke å. Vi trenger bare å fortelle kartet hvor du skal plassere seg selv, og la de underliggende implementeringen detaljer til Google. Nå er det tydeligvis to stykker av data at dette eksempel er leverer til Googles API. Tilsynelatende midten av kartet, og zoomnivået, så å si. Og er det noen som kjenner igjen disse koordinater, lengde- og breddegrad? Sannsynligvis ikke, men vi kan gå tilbake til opplæringen, bokstavelig talt se. Men vi får se det i bare et øyeblikk. Zoom-nivå er en verdi mellom, jeg gjør ikke vet, en i 13 eller noe sånt. Det har bare å gjøre med hvor langt du er zoomet inn eller ut, og det er det. Og nå helt på slutten av siden, varsel linje 29-- det er litt stygg fordi det wraps-- denne linjen med kode er hva laster ned til Nettleseren Google faktiske API. All kode som Googles ingeniører har skrevet at implementere hele denne funksjonen innebygges kart. La oss nå ikke endre noe. Hvis du følger med, gå videre og bare lagre filen, hvis du faktisk har hva jeg har. Gå til nettadressen. Du kan klikke på knappen Kjør opp toppen og som vil fortelle du nettadressen til webserveren din igjen. Og det vil lede deg til en ny fane. Hvis du klikker Åpne for map.html, og oddsen er du er kommer til å få et varsel, en feilmelding, ja? Feilmelding, feilmelding? Så dessverre, feil Meldingen er ikke så opplysende med mindre du faktisk åpner konsollen, den spesielle kategorien vi holdt åpne i går og litt tidligere i dag. Men jeg snublet over dette tidligere, så jeg allerede funnet ut hva løsningen er. I dagens lysbilder, eller heller, i Cloud9, varsel at vi ikke gjorde noe bevisst. Legg merke til at dette skriptet koden i linje 29, hvis du leser gjennom det, det er som maps.googleapis.com/ noe, noe, noe Da oppdager noen, en av utviklerne, skrev i all kapital bokstaver, API nøkkel. Vi trenger å lime inn noe der. Og dette var trinnet Jeg gjorde for oss før, og igjen de kan svarteliste oss hvis plutselig, 12 eller mer av oss begynne å bruke den samme nøkkelen, men la oss se hva som skjer. Så hvis du går inn i dagens lysbilder, en sklie senere, er det dette svært funky utseende tekststreng. Gå videre og bare kopiere det og lime det inn der det står API nøkkel. Det er den jeg registrerte meg for. Og definitivt ikke prøv skrive det ut manuelt, fordi det føles nervøs med skrivefeil, potensielt. Så bare kopiere og lime det. Og det kommer til å gjøre linjen lenger, men nå, bare for å være klar, det skal se litt mer som dette, der nøkkelen er lik ikke kapitalisert roping på deg. Lagre siden din, gå tilbake til den andre kategorien, laste, og håper å se et kart over hvor? PUBLIKUM: Australia. DAVID MALAN: Australia. Så tilsynelatende de er GPS-koordinater fra Australia. Og la meg gå rundt for bare et øyeblikk og hjelpe alle som ikke er helt der, men la meg foreslå, via Google, finner GPS-koordinatene til din egen hjemby eller ditt eget hjemland. Og sannsynligvis Google kan snu dette opp, eller Wikipedia kan fortelle deg. Men velger to forskjellige verdier for breddegrad og lengdegrad, gå tilbake i og lime dem, og så laste siden på nytt etter lagring og se om du kan ha en kart for din egen hjemby. Og når du er ferdig med at oppfølgingen challenge-- og jeg skal gi litt mindre retning, bevisst, slik at du bevisst må kjempe for et par minutter med dokumentasjon, endre kart å være ikke dette cartoonish standard, men en satellitt kart. Så du faktisk se satellitt bilder i stedet for de vakre fargene. Og tipset jeg vil gi deg er å endre kartets type. Gå tilbake til at å få startet side for inspirasjon. Som du kanskje har sanket, hvis du er ute, det er så mange flere ting du kan gjøre. Noen av dere har allerede endret karttype. Men du kan do-- for eksempel, la meg gå til noe vi gjorde for kurset Jeg teach-- maps.cs50.net. En av våre undergrads gjorde dette. Vi sentrere kartet våre over Harvard Yard og overlegg alle disse bygge navn, og vi hadde ham legge dette. Så hvis jeg vil søke etter, for eksempel, Matthews Hall, vi har en liten rullegardinmenyen. Og jeg tror han bruker Bootstrap, den Biblioteket vi diskutert tidligere for dette. Og hvis du klikker på Matthews Hall, det umiddelbart hopper kartet til en viss beliggenhet, og det viser du et bilde i denne lille pop-up. Men selv denne lille pop-up, hadde vi ikke gjennomføre. Hvis jeg ruller nedover på våre får begynte og se etter informasjonsvinduer, vil du se at noen av de funksjonaliteten du selv kan legge til, om enn med litt større kompleksitet er noe som kalles et informasjonsvindu. Og hvis jeg klikker et eksempel her, og dette er hva som er morsomt, du kan gjøre ting som dette, klikke på en markør og så voila, informasjon dukker opp. Så vi har ikke helt innført nok funksjoner med Javascript å male et bilde av nøyaktig hvordan du kunne koble alt dette ting sammen, men vi har litt riper i overflaten. Faktisk, det jeg nettopp gjorde da Jeg klikket på at markør, ble utløser en hendelse, en såkalte ved klikk hendelsen. Og vi faktisk så en hendelse tidligere i dag, den såkalte sende hendelse, da vi ble forebygge brukeren fra å søke for katter. Så vi har plukket slags og choosed blant alle disse ulike funksjoner, for å gi deg en følelse, forhåpentligvis, av hva du faktisk kan gjøre med litt mer komfort i programmering, og helt gratis ressurser. Noen spørsmål? Nei? Dette er din siste sjanse, i det minste i dag, på en fredag, å få noe av brystet slik at du går ut herfra føler seg trygg og komfortabel. Ja. PUBLIKUM: Hvorfor ikke du legge til en ting? DAVID MALAN: Oh my goodness. Jeg trenger å hvile denne helgen, tror jeg. Andre spørsmål? PUBLIKUM: [uhørlig] DAVID MALAN: Du can-- i Internet Explorer, hvile i fred, du pleide å være i stand til å sette VB script, virtuell basic script, men som egentlig aldri fanget på. Så det korte svaret er rett Javascript. Andre spørsmål? Greit, vel, la meg gjøre dette. La meg ta våre kolleger utenfor. De har noen evaluering skjemaer som de ønsker alle å bruke noen minutter å fylle ut. De ønsker å samle den form og eventuelle fritak som du måtte ha utenfor. De vil også ha sertifikater. Jeg tipper det er fortsatt noen snacks utenfor. La meg passere disse ut, og hvis du har noen spørsmål i mellomtiden, Jeg skal gå rundt mer individuelt og vi kan komme i gang. Ja, selvfølgelig. PUBLIKUM: [uhørlig] DAVID MALAN: Det er vanligvis sant i disse dager. Gjerne med web programvare, er du lener på andre du enten estetisk bruker ting som Bootstrap, slik at du ikke nødt til å gjennomføre det lave nivå detaljer om menyer og knapper og alt det der. Du lener seg på noen som Google, slik at du trenger ikke å bygge en Uber virksomhet og en kartlegging virksomhet, og hvilket som helst antall av tilsvarende applikasjoner så vel. Faktisk pålogginger er populære, også. Hvis du har brukt Spotify eller en rekke nettsteder, du logger deg på noen nettsteder med Facebook. Så hva er fint, det er APIer for pålogging i dag, slik at du ikke trenger å ha din egen brukere tabell og alle din egen database nødvendigvis i samme grad. Du kan la Facebook gjøre alt av at kompleksiteten for deg. Så det er en spennende tid, ærlig, i programmering, fordi det er så mange tredjeparts tjenester som du kan bygge på toppen av. Og igjen, prisen du betaler er enten økonomisk eller nedetid. Hvis Google går ned, så gjør Uber, uten tvil, men kanskje det er en rimelig avveining. Og igjen, det var ett av temaene, forhåpentligvis, for de siste par dagene, er disse avveininger. Og sjelden er det å gå å være et riktig svar. Det er egentlig det bedre av to eller flere svar. Pass disse rundt. Og disse Cloud9 kontoene vil fortsette å jobbe, i teorien, i det uendelige. Du kan finne hvis du venter noen dager eller en uke eller mer for å logge deg inn i dem, det kan ta ut en eller fem minutter å åpne opp igjen, men det er bare fordi de setter det å sove for å spare på ressursene.