>> [Glazbom]
>> DAVID Malan: Ovo je CS50.
To je početak tjedna devet.
I to je ono što bi bio gospodina Boole 200. rođendan.
Dakle, ovo je momci kome smo aludirali
neko vrijeme o korištenju Boolean varijable pravi i lažni,
1 i 0 i tako.
A to je Googleov danak mu i danas.
On bi se okrenuo 200.
Dakle, ako želite pridružite nam se za CS50 ručak,
pogledajte link na web stranici tečaja je.
A takvih lica i prijateljima kao oni čekaju vas ovdje u Cambridgeu.
Lica poput ovih očekuju vas u New Havenu.
A, u stvari, Kena u New Haven molimo napravio
ono što se zove animirani GIF od Eli ovdje na nedavni lunch-- GIF još
drugi grafički format datoteke, s kojima ste familiar-- da
izgleda malo nešto ovako.
Tako je samo slijed of-- OK.
Nitko ovdje u Cambridgeu se smije.
No, u New Havenu, ovaj stvarno smiješno, zar ne?
U redu.
>> Dakle, nemojte da nam se pridružite tamo.
Ovdje na Harvardu, Naime, u srijedu,
ako ste student ili brucoš even-- ili čak junior-- razmišlja o izradi
prekidač u računalu znanost, znamo da bit
biti CS savjetovanje sajam ovo Srijeda, nedugo nakon klasa
u 4:00 sati u računalu Znanost zgrada Maxwell Dworkin.
Mi ćemo staviti na tečaj a Web stranica do sutra, kao dobro.
Donuts, ja sam rekla, bit će poslužen.
>> U redu.
Tako smiješno story-- sam poking oko na internetu,
i ja pronašao neke stare arhive moje bivše web stranice.
I ispada out-- oko ovoga Vrijeme, čini se vrlo pravovremeno
jer sam shvatila da je UC izbori Spremate se zupčanik gore opet.
Tako sam trčao za UC, izgubili jadno.
A možda je to bio dijelom zašto.
Dakle, ovo je moja web stranica u to vrijeme.
Iz nekog razloga, mislio sam da je dobra ideja, prije nego što govorim ljudima
ono što mi je platforma bila i zašto trebao glasovati za mene, da imaju
kliknite za ulazak kako bi saznali da Informacije koje retrospektivno je
vrsta jezivo.
Ja stvarno ne znam što je to.
>> No, to sigurno nije pomoći mojoj kampanji.
Također sam pronašao da je viši year-- sam imao ovaj Muppet kalendar.
Muppets su vrsta u modi tada.
Ili možda oni nisu bili.
Imao sam Muppet kalendar tada.
I ja sam mislio da bi bilo cool ime moj računalo na Harvardu mreži
frogman.student.harvard.edu.
U to vrijeme, svi smo imali jedinstveno Prepoznatljiva domaćin imena.
A možete izabrati neku taštinu ime, umjesto vlastitog imena.
I ja sam otišao s čovjek žaba iz nekog razloga.
>> A onda sam started-- proveo sam puno vremena da kliknete kroz ove linkove
jutros.
I to je bio moj o stranici koji se sada nekako čini sladak.
Ali to također svjedoči samo koliko tehnologija je došao.
Mislim, natrag u dan, 486 je bilo nešto.
Ovih dana, to je super, super, super spori i dobro manje
nego što bi mogli imati u svom vlastite džepove ovih dana.
Postoji više tamo je još više neugodno.
Dakle, ja ću ostati na tome.
Ali to je bio moj prvi nalet u web-- Oh, ne.
To nije bilo.
Moj prvi pravi nalet u web programiranja je ovaj site, koji sam zaboravio.
U nekom trenutku, saznao sam kako ponavljajuće pozadinske slike.
I tako sam pronašao ovo pločica snazi, kao što su hokej igrač, nogomet, golf i
lopta, ili što god da je za web stranice Frosh IM.
I to je zapravo, istinski prvi web-based projekt sam uzeo on--
Mislim da student godine, mlađi year--
nakon uzimanja CS50 i CS51, jedan od uobičajenih follow-na nastavu.
Primijetio sam u potrazi kroz arhivu
da je jedan od mojih nasljednika i prijatelji, Lee, vrsta promijenila
autorsko pravo za sebe.
Ali ovo je doista nešto što Trebam posjedovati pogođenost na.
No, u to vrijeme, ovaj Bio je to prvi web stranice,
kao što sam rekao prije nekoliko tjedana, kojim bi brucoš
Registrirajte se za intramuralnih sportova ovdje.
I tako ispada da pozadinske slike
kao da nisu tako dobra ideja.
No, web je novo, i bili smo svi eksperimentiranje.
I to je ono što sam očito nije u to vrijeme.
U redu.
Dakle, bez dodatnih teškoća, možemo prebaciti zupčanici danas ti dati, zapravo,
konačni komad koji možete naći osobito korisno za završne projekte
ali i da će početi napraviti cijeli world wide web
osjećam malo više razumljivo.
Doista, idemo uvesti još jedan programski jezik
zove JavaScript je to slično i drugačiji na različite načine
od jezika što smo pogledali do sada.
>> Dakle C, podsjetimo, ovo sastavio jezik.
Moraš pokrenuti kroz prevodilac.
Možete dobiti izvorni kod za prigovor broj, ili nula i one.
A oni su nula i one koje procesora, središnja procesorska jedinica,
zapravo razumijem.
PHP, s druge strane, nije sastavio jezika.
To je što?
To je tumačiti jezik.
Dakle, postoji neki program zove tumača koji
mora pročitati it-- vrh se dno, lijeva na redu-
i shvatiti što sve Vaš sintakse radi i znači,
da li je petlja ili uvjet ili bilo koji drugi broj programiranje
konstrukti.
Tako da je tumači jezikom.
>> Onda smo uveli HTML.
I HTML nije ni programski jezik.
Mi bi ga ono zovu?
Označni jezik, što je samo vrsta fancy način govoreći to
nema programske konstrukte kao što su vidjeli smo još u dan ispočetka.
Nema petlje.
Nema uvjeta.
To je stvarno jezik o obilježavanju svoje podatke
i oblikovanje ili to strukturiranje na neki način.
>> CSS, u međuvremenu, na sličan način Ne programski jezik.
To je čak i više estetski orijentirani.
I to vam omogućuje sortiranje fino podešavanje stvari kao što su veličina fonta i boje
i plasman i sve to.
Tada smo imali
>> SQL.
Dakle SQL je doista programiranje jezik u nekom smislu,
iako po mjeri posebno za baze podataka.
No, iako smo vas samo upoznati odabir i umetanje i brisanje i ažuriranje
i par drugih, Ispada možete zapravo
pisanje funkcije ili postupci, kao što su
zove, u SQL kako izgledaju i djeluju prilično poput PHP i C funkcijama.
Dakle, znamo da oni postoje.
Ali mi ni ne zamaram se s njima kao što smo upravo ogrepsti površinu ovdje.
A onda JavaScript, posljednji naši jezici službeno uveden.
Dakle JavaScript je, također, tumači jezikom.
A oni poznaju, ne Želite li se razlikovao
s nekim karakteristika iz oba C i PHP?
Ono što ga čini različitim?
>> PUBLIKA: To nije sastavio.
>> DAVID Malan: Reci opet?
>> PUBLIKA: To nije sastavio.
>> DAVID Malan: To nije sastavio.
Tako je, također, interpretira.
Dakle, to nije sastavio.
No, da je to nešto poput PHP čini.
Ali to je još uvijek razlikuje od PHP na neki upečatljiv način,
barem na način na koji ćemo ga koristiti.
Da?
>> PUBLIKA: Ona radi na strani klijenta.
>> DAVID Malan: Ona radi na strani klijenta, obično.
To je doista razlikovna karakteristična je za nas u ovom trenutku.
C je na strani poslužitelja u smislu da smo učinili sve što je u CS50 IDE.
PHP do sada je strani poslužitelja mjeri
kao što je, također, dobiva interpreted-- Ne sastavio, ali interpreted--
unutar CS50 IDE, što naravno je samo poslužitelj ili poslužitelje u oblaku.
>> Ali JavaScript, čak iako ti ideš
za početak pisanja za, recimo, pset osam, a možda i konačni projects-- ste
će to pravo u CS50 IDE i spremite ga
u datotekama unutar CS50 IDE, CS50 IDE i, s druge strane, oblak poslužitelje
na kojem to domaćin, ne ide tumačiti ili izvršavati svoj kod.
Umjesto toga, to će biti poslan u nepromijenjenom obliku do pregledniku.
I onda će biti IE ili Chrome ili Firefox ili Safari
ili što god da je zapravo tumači je, od vrha do dna, s lijeva na desno.
Dakle, ključni razlikovanja karakteristična za danas
je da je JavaScript strani klijenta i PHP, na primjer,
je na strani poslužitelja.
Sada, to ima zanimljive posljedice Jer, kao što je, intelektualno vlasništvo
a koji zapravo mogu vidjeti svoj kod.
I doista, možete ići na webu i vidjeti najviše
bilo kod koji netko ima pisane u JavaScriptu.
Ponekad je čitati, Ponekad je obfuscated.
No, više o tome u dogledno vrijeme.
>> Dakle JavaScript, dosta lijepo je super slično, sintaktički, na C
I baš kao PHP, nema glavna funkcija.
Ako želite početi pisati JavaScript kôd, kao što ćete vidjeti danas
vi samo početi pisati.
Ali, to je, vidjet ćete, osobito korisno u kontekstu web preglednicima.
Međutim, moj mali disclaimer-- obično earlier--
je reći da možete sve Danas uporabu JavaScript strani poslužitelja
pomoću fancy okvir pod nazivom Node.js da su neki od CS50 vlastitih aplikacija
su napisane u.
Provjerite 50 zapravo koristi Node.js.
Ali ćemo se usredotočiti na JavaScript strani klijenta ovdje na van.
>> Dakle, ovdje je set uvjeta u PHP.
Žao nam je, in-- zapravo, da izjava, previše točna.
Ovdje je također skup uvjeti u JavaScriptu.
Sintaktički, da je identičan C i PHP.
G. Boole-a izrazi, Slično tome, sintaktički
identična oba C i PHP.
Također imamo sklopke u JavaScript koji izgleda identično.
Imamo za petlje koje su strukturirane identično,
dok petlje, učiniti dok petlje.
>> Ovaj je malo drugačiji.
PHP je imala za svaki konstrukt da bi moglo biti koristi
ili će koristiti u pset sedam, možda.
JavaScript je ovu posebnu verziju Doista, gdje ti je doslovno nešto reći
kao i za varijablu ključ u objekt, koji je vrlo sažet način govoreći,
ako sam dobio object-- i mi ćemo razgovarati o tim opet u moment--
i ja želim ponoviti preko svega od ključnih parova vrijednosti unutar,
Ja ne moram shvatiti kako numerički indeks ih nula, jedan,
dva, tri.
>> Ja doslovno može reći.
I na svakoj iteraciji, JavaScript za mene će ažurirati varijablu ključ
biti prvi ključ, onda sljedeći ključ, onda sljedeći ključ, onda sljedeći ključ,
i tako dalje.
A ja mogu dobiti na vrijednost obradom objekt u JavaScript, kao što ćemo vidjeti,
kao da to je asocijativni niz u PHP.
Doista, ako je konačno omotan svoj smeta oko ono što je asocijativni niz
u PHP-u, možete misliti o tome za sada kao identičan objekt u JavaScript.
Ali to je malo preveliko pojednostavljivanje.
>> Nizovi izgleda, dosta lijepo, identični u PHP osim jednog lika.
Postoji jedna stvar nedostaje ovdje kako smo vidjeli prošli tjedan s PHP.
Što je izostavljeno?
Da?
Ne dolar znak.
Tako smo natrag do normalnije svijet u kojem
varijable nemaju dolar znakove.
Ali vi se ispred njih s var, tipično.
A var znači varijablu.
I baš kao PHP je labavo typed-- gdje postoje vrste,
postoje brojevi i nizovi i pluta i tako forth--
JavaScript sličan je vrste.
Ali to labavo se upisali u tome smo među programeri ne morate ih navesti.
Samo moramo biti svjesni da postoje različite vrste.
>> Varijable, meanwhile-- evo kako bismo mogli proglasiti "Hello, World"
kao string.
Obavijest da je identičan PHP, ali nitko dolar znak.
A to je nešto što ćemo početi dobivati ​​više danas,
gdje imate objekt s ključeva i vrijednosti.
A ako želite probati zaključiti iz prošle week--
sintaksa je malo drugačija.
No, malo zdravog razuma check-- koliko Tipke se taj objekt izgleda da?
Tako ja vidim četiri.
Vidim dva.
>> Dakle, to je zapravo dva.
Dakle, ovo je skup dva para ključ-vrijednost.
Ključ je simbol čija je vrijednost FB.
Ključ je cijena čija je vrijednost 101.53.
Dakle, to su dva para ključ-vrijednost.
I zapamtite, PHP-- a to je opet samo vrsta sintaktičke razlike.
To nije sve što je intelektualno zanimljiv.
PHP možda napisao ovo isto stvar kao follows-- citat, jednako.
I ja to promijeniti do uglate zagrade.
A onda sam to promijeniti kotirana riječ, "cijena".
A onda sam ne koristite debelo crijevo.
Što sam koristiti prošli tjedan?
Da, znak jednakosti arrow funky zapis.
>> A onda sam istu stvar ovdje.
Ista stvar ovdje.
I to je sve.
Dakle, to je u redu ako nema stvarno potopljen u memoriju samo
Još jer to je stvarno intelektualno nezanimljiv.
To je samo sintaktičke razlike.
No ideje su potpuno isti.
Unutar ove varijable citat JavaScript
je skup ključ-vrijednost parova, od kojih je simbol, od kojih
je cijena.
A ja mogu dobiti na tim vrijednostima uz sljedeću sintaksu.
Baš kao u PHP-u, što sam mogao nešto volimo-članovima pustiti
ja bi ovaj okvir malo veći.
Baš kao u PHP-u, što sam mogao bi this-- Oh, prokletstvo.
Ajde.
>> Baš kao u PHP-- redu, mi ćemo samo koristiti predstavljača bilješke.
Baš kao u PHP-u, ja mogu napraviti $ $ citat citat ["simbol"],
i to će me doći vrijednost "simbola."
U JavaScript, to će biti identična, gdje ja mogu samo to učiniti.
Jedina stvar koja je nestalo je dolar znak.
>> Dakle dovoljno lijepo, onda postoji nije sve toliko nova sintakse.
Dakle, ono što je danas ćemo se usredotočiti na, zapravo, je neke od ideja i programa.
I prvi takav Zahtjev da biste mogli
Vidio ako zaronio pset sedam već je to sintakse.
Tako je u pset sedam, ako ste vidjeti ili ne vidjeti još,
znam da postoji datoteka koja dajemo što se zove config.json-- JavaScript
Objekt zapis.
Zašto?
Željeli smo biti u mogućnosti da Vam ponudimo predložak s nekim ključ-vrijednost parova.
Željeli smo biti u mogućnosti da vam dati popis domaćina, naziv poslužitelja.
Željeli smo da vam dati rezervirano mjesto za svoje korisničko ime
i rezervirano mjesto za Vašu lozinku.
Ako niste vidim to još, ne brinite.
Više o tome u pset sedam [? spec. ?] I onda,
Očito, mi vam želimo ispuniti zadatke
jer kada se prijavite na CS50 IDE, svatko od vas
imati vlastiti korisničko ime i lozinku.
>> Tako bismo mogli smo koristiti pola tuceta ili više različitih formata datoteka.
Mogli smo koristili .txt datoteku.
Mogli bismo koristiti CSV datoteku.
Mogli smo upotrebljava INI datoteka, XML datoteka,
cijela hrpa više akronimi da možda nećete imati ikada čuo.
To je vrsta proizvoljna na kraju dana.
Ali super popularan ovih dana je tekst Format naziva JSON-- JavaScript objekta
Notation-- koji izgleda ovako.
To je malo zagonetan, ali primijetiti obrasce.
Možete početi s otvorenim kovrčava Brace, a završava s istim.
Unutar to je nešto.
To je ključ-vrijednost par.
Dakle, to je objekt koji sam gledajući na ekranu ovdje
da ima jednu tipku, koja ima jednu vrijednost.
I samo zaključi na temelju prethodni uzorak, što je ključ ovdje?
Baza podataka je stvar lijeva kolona.
>> Sada, vrijednost se dogoditi da se a više linija ovaj put.
No, vrijednost počinje s kovrčava brace i završava s kovrčavom braće.
Pa što bi ti predložiti je Vrsta vrijednosti baze podataka?
Rječnik ili, jednostavno više jezgrovito, objekt.
Pravo?
To je vrsta strukture podataka koje možete koristiti i druge strukture unutar sebe.
Dakle, ako sve ovo smo Pozivanje object-- i objekt
je samo hrpa ključne vrijednosti pairs-- Vrijednost same baze podataka je objekt.
Vrijednost baze podataka ima cijela hrpa ključnih parova vrijednosti, od kojih je prvi
je domaćin, a zatim ime, a zatim korisničko ime, a zatim lozinka
svaki od čije vrijednosti, u međuvremenu, to je samo dosadno niz u dvostrukim navodnicima.
>> Dakle, čak i ako to nije super jasna samo još,
znam da je to samo standard, prilično dosadan način
pohranjivanja podataka u standardnom formatu.
No uobičajene pogreške koje se Možda bi, čak iu pset sedam,
su malo glupe stvari, kao i ako slučajno izostaviti zarez tamo.
To će rezultirati u datoteci Ne nužno biti čitljivi.
Ako ste slučajno izostaviti stvari kao što je citati, to neće biti čitljiv.
Dakle, to je prilično nitpicky format datoteke, ali to je onaj koji je super čest.
I mi se dogoditi da ga koristiti, iako ne koristite bilo koji JavaScript inače,
u pset sedam.
>> U redu.
Dakle, ne zaboravite ovu sliku.
Razgovarali smo o, u HTML, koji šifra može izgledati ovako.
To je Hypertext Markup Language [Nečujan] za samo "Halo, svijeta."
Ali onda smo predložila dok leđa da ako to pomaže,
možda želite početi razmišljati o tome je već kao stablo.
U stvari, uvlaka koje koristiti samo zbog čitljivosti u
ili zbog o stilu u lijevi može vrsta
biti preveden na ovom stablu, gdje vas imaju neke posebne korijen čvor da ćemo
generički zove dokument, ispod koje je korijen HTML element ili oznaka, HTML,
koji tada ima dva Djeca, glave i tijela.
>> A onda opet, glava ima naslov.
A naslov ima tekst vrijednost.
I tijelo slično je tekst vrijednost.
Dakle, ako ste zadovoljni izreka da da, mogli uzeti ovaj HTML
i nacrtati sliku kao ovo je desna strana
je lijep mentalni model, jer se sada da imamo JavaScript, programski
jezik koji preglednici mogu izvršiti i tumačiti za vas
ispada da ono što mi smo o učiniti u kodu
se početi manipulirati ovo Struktura stabla u memoriji.
Nemamo graditi stabla u memoriji.
Ne morate učiniti vrsta pset pet stilu struktura podataka
složenosti.
Preglednik, lijepo dovoljno, nakon tumačenje HTML vrha do dna,
lijevo ili desno, doslovno će ruke nam ekvivalent pokazivač
toj cijeloj stabla besplatno.
To se sve od teškog rada.
To je ono što Mozilla i Apple i drugi su učinili za nas.
>> A s JavaScript ćemo moći kontrolirati i mijenjati i raditi
zanimljivosti u da stablo, inače poznat
kao DOM ili Document Object Model.
Koje vrste stvari?
Pa, ispada da u JavaScriptu, postoji
ovo praonica popis događaji koji se odvijaju.
A mi stvarno nisu koristili da Riječ budući tjedna nule i pset
nula, kada smo razgovarali o ispočetka.
Većina vas vjerojatno nisu koristili događaj u vašem Scratch projekt.
Ali možda sjetiti jednostavna Marco Polo
Primjerice, kada smo imali dva Duhovi, od kojih je jedan rekao, Marco.
Drugi od kojih onda, nakon slušanja i sluh taj događaj, rekao je, Polo.
Ako ne, slobodno osvrnuti tako daleko unatrag.
>> No, to je samo da kažu, a možete vrsta
zaključiti iz imena tih stvari, JavaScript, ispada,
će nam način za slušanje za miš ide dolje ili miš ide gore
tipku ili ide dolje ili ključ ide gore ili onsubmit onselect
ili onresizing nešto.
Drugim riječima, svaka fizička radnja da čovjek može uzeti s preglednikom
što činite svaki dan, možete napisati broj za koji sluša one događaje
a onda se nešto odgovarajuće.
>> Na primjer, ako koristite Google Maps, što se događa ako kliknete i potez
miš, obično?
Ako kliknete i povučete?
Da?
Točno.
Karta počne kretati.
Tako možete vidjeti kakve što je ovdje, ono što je tamo.
A kako Google provesti kako?
Pa, vjerojatno, oni su pomoću par tih događaja
slušatelji, jedan koji kaže, slušati na mišu
down-- pa kad se fizički gura svoj trackpad ili njegov miša
prema dolje.
I onda tražimo nešto poput pokreta
ili neki drugi događaj koji omogućuje nam da hvatanje povucite.
A u stvari, povucite je na sličan način u ovom dot dot dot popis mogućih opcija.
>> Dakle, to će biti snažan način za početi reagirati na korisnika
čak i prije nego je on ili ona klikne nešto eksplicitno kao što pošaljete.
Ali ćemo predstaviti par tema doći.
Ali prvo, neka je tranzicija do neke stvarne koda.
Tako ću otići naprijed i otvoriti dom-0,
koji je vrlo jednostavan primjer da se ovdje, ako sam povećavanje jednostavno
ima tu ulaz ovdje za mene.
I ja ću ići naprijed i upišite "David" za moje ime i kliknite Pošalji.
>> A onda, doduše nekako jeftino, sam imati ovaj redak koji pops gore koji kaže:
"Pozdrav, David!"
Dakle, ovo je vrsta kao i naš "Hello, World"
da mi je neko vrijeme natrag u C i ni u PHP jer sam dinamički
reproduciraju moje ime.
Ja mogu napraviti ime tuđe ovdje.
Ja jednostavno mogao promijeniti to, kao, Hannah, kliknite Pošalji.
I doista, malo pop-up promjena.
>> Sada, pop-up prozore su jedan od većina zlostavljali značajke webu.
A u stvari, još u su dan pop-up blokeri
došla u modu, jer vas će ići na neki website--
možda upitna mjesto-- da bi onda odjednom
započeti peppering zaslon s cijela hrpa pop-up prozora.
I tako to sposobnost da poskočiti Prozori ispred korisnika
nije bila osobito dobro primljena od strane čovječanstva.
Dakle, to je zato što vidite to spriječili stvar,
što samo čini sve ovo ružno.
Tako ćemo trebati bolji način za brz korisnik.
No, za sada, kako se čini da rade.
Dakle, samo intuitivno, što izgleda da se događa ovdje?
Idem naprijed i kliknite Pošalji i onda se nešto događa, očito.
No, ono što se ne događa da se nije dogodilo prošli tjedan bilo koje vrijeme sam kliknuo Pošaljite?
Što se nije dogodilo na zaslonu?
Žao nam je?
Ponovno učitati.
URL nije promijenio sve.
Rekao sam da je dom-0, i ja sam još uvijek na DOM-0.
Normalno, mi bismo se promijenili na neki drugi URL, kao register.php ili slično.
>> No, čak i kad sam odbaciti ova stvar klikom redu,
primijetiti da URL ostaje u potpunosti na mjestu.
A, u stvari, ako sam malo skeptični, neka mi se otvoriti Chrome.
Dopustite mi otvoriti karticu Network.
I obavijest da je prazan u trenutku.
Dopustite mi ići naprijed i ponovno Maria.
Nema mrežni promet god.
Dakle, nema HTTP.
>> Dakle, istina, ako ja pogledajte izvorni kod za this-- neka mi zatvorite ovaj prozor
i idite na View Source.
Zanimljivo.
Izgleda da postoji neki nove oznake, među njima skripta.
Tako ćemo pogledati unutar CS50 IRO je točno ono što sam poslan korisniku.
>> Dakle ovdje is-- neka je usredotočiti na samo HTML.
Evo donja polovica DOM-0.html.
I obavijest da je dobio titulu, glava oznake, tijelo tag, oblik oznaka.
No, ono što skače na vas kao drugačije, pogotovo ako ste nikada
napisano bilo JavaScript sebe.
Dopustite mi dođite malo do ovdje.
Imam ulaz, još jedan ulaz za podnijeti.
Imam ID, koja je vrsta novo.
Ali mi je vidjeti s CSS.
Što je još svakako novo?
Da?
Lijepo.
>> U redu.
Pa gdje piše onsubmit, primijetiti ono što se čini da slijede.
Ovo je atribut u HTML nomenklaturi.
Njegova vrijednost je ovo citirao niz ovdje.
I to izgleda malo čudno na prvi pogled.
Nije HTML.
Nije CSS.
To je, kao što ste mogli pogoditi, JavaScript.
Dakle, čini se da je izgrađen u ovo web stranica je funkcija zove pozdravi.
I ja sam zaključi da je upravo jer je riječ, pozdravljam.
Ima otvoreni navodnik, bliski zagrada, točka i zarez.
Izgleda kao funkciju C, izgleda kao PHP funkcije.
>> I doista, to će biti funkcija JavaScript.
Onda sam povratka lažna.
Mi ćemo se vratiti da je u samo jednom trenutku.
Ali gdje je ova funkcija definirana?
Pa neka mi pomičite se gore na vrhu datoteke.
I iako je dugi red, to je relativno jednostavan.
Dopustite mi smanjivanje i ovdje usredotočiti na ove četiri linije.
>> Tako je u JavaScript, samo kao što su PHP, samo
recimo, doslovno, riječ "funkcija" naziv funkcije,
a onda zagrada s bilo arguments-- nema argumente u ovom slučaju.
I nema povratka tipa u JavaScriptu, baš kao i PHP.
Dakle, to je malo blazi od C. Otvorite kovrčava braće, u neposrednoj blizini kovrčava braće.
Izgrađen u JavaScript je function-- Ne preporučuje function--
ali funkcija zove upozorenja čija je jedina svrha u životu
je podići da dosta ružno potaknuti da smo vidjeli maloprije.
>> Sada je to vrsta zalogaj.
Što se događa ovdje?
Tako ćemo početi označite sve što je ovdje.
To je isti argument da upozore.
I što se događa?
To samo izgleda kao niz.
I to ispada, za razliku od PHP i za razliku od C, to ne smeta u JavaScript
ako ti jednostruke navodnike ili dvostruki navodnici.
Oni će biti jednaka.
I iskreno, to je samo popularan ovih dana
za JavaScript programere uvijek Koristite jednostruke navodnike zbog nekog razloga.
To je samo stvar za učiniti.
Ali bismo mogli koristiti dvostruke navodnike, kao dobro.
>> Dakle plus je novi lik.
No, one od vas koji ste učinili ovo prije, što više reći?
Da.
Spojite.
Tako smo to vidjeli u PHP.
Postoji samo točka Operator u PHP da
će spojite dvije žice zajedno.
C je bol u vratu to učiniti.
Podsjetimo iz pset šest, što je osobita bol u vratu,
ti bi koristiti nešto poput strcat
Nakon dodjele memorije na stog ili gomila.
Morao si skakati kroz hoops samo da spojite dvije žice.
U JavaScript, to je super jednostavno.
Samo korištenje plus operatera između njih.
>> Tako je kompleks izgleda stvar čini se da je to
jer na kraju Cijeli ovaj niz, samo sam
spojite se na uskličnika.
Dakle, ako je ono što je iskakanje gore je "Pozdrav, David", "Pozdrav, Hannah,"
"Zdravo, Marija", i tako dalje, očito da srednji stvar između dva
plusa mora mi dati pristup što?
Što je tamo sigurno?
Da.
Zato ću ovdje pretvara odgovoriti na svoje ime, zar ne?
Dakle, njihova imena popped u finalu Rezultat. Dakle, što to znači?
Pa, predložio sam ranije da je slika koja tzv DOM
ima tu posebnu root elementa put do vrha naziva dokumenta.
I sad, ispada da će biti posebna globalna varijabla
u JavaScriptu, izgrađen u koji je cijela hrpa korisnih funkcionalnosti.
Među korisnim funkcionalnost je sposobnost da se u svakom nasljedniku čvor.
Ti kvadrata ili pravokutnika ili elipse samo čvorova u stablu, da se tako izrazim.
>> Tako ispada da je izgrađen u JavaScript je predmet dokumenta
je funkcija, inače poznat kao metoda, koja se zove getElementById.
Sintaksa za pozivanje funkcija u JavaScriptu
koji je unutar objekta ili A varijabla je samo s dot notaciji.
A vidjeli smo to u C što struct sintakse.
To možemo vidjeti u pset sedam, vrsta, vrsta, kad vidite CS50 :: upita.
Debelo crijevo debelo crijevo u PHP je još način pozivanja funkciju koja je
unutar nekog objekta.
>> No, za sada u JavaScript, to je samo točka.
I tako je ova funkcija, dosta lijepo, vrsta
kaže ono što does-- dobili elementa po ID.
Element je samo drugo ime za oznaku ili čvor u DOM.
I tako dobili elementa po ID "ime" znači this-- evo moj HTML.
I na temelju ovog HTML, što čvor ili što HTML tag sam ja
će programski biti zbrinut pozivom document.getElementById?
>> Da, točno.
Idem dobiti ulaz Element postoji čiji ID je "ime".
Znači konkretno, možete mislim ove funkcije,
getElementById, kao način davanja natrag pokazivač na taj određeni čvor
u stablo.
Nismo izvučeni ovo stabla, ali to je način
dobivanje pristupa koji pravokutnik ili da je pravokutnik
tako jedinstveno identificira ga putem svoje osobne iskaznice.
>> Sad, zašto je to korisno?
Pa, to ispada da nakon što ste stečen
da čvor, koji pravokutnik od slika, da čvor unutar nje,
pak, ima cijela hrpa properties-- parova ključ-vrijednost
ili podataka, od kojih je jedan nazivaju vrijednost.
Dakle doslovno, to je vrsta zalogaj objasniti cijelu stvar.
Ali na kraju dana, Sve to čini se dati vam
niz koje korisnik upisali u u tom hijerarhijskom način.
Ali ja se ne sviđa Nekoliko od tih stvari.
Ili radije, postoji neki znatiželja još.
Sve to kao da rade.
Zašto misliš da sam se vratio lažno nakon poziva pozdraviti?
Ovo izgleda malo ružno, da Imam dvije tvrdnje postoji
odvojene zarezom.
Pogodi.
Ako sam maknuti return false, što bi se moglo dogoditi, samo instinktivno?
Žao nam je, kažu opet?
>> Otvorite hrpa Windows.
Dakle, potencijalno možda nešto kao što je to će se dogoditi.
Što drugo?
Možda podnijeti zahtjev gdje?
Na istoj stranici.
Dakle, u stvari, to je to bliže odgovoriti ovdje,
iako, za razliku od u prošlosti, nisam
navedeno je akcija atribut, što je normalno moramo učiniti.
Ispada postoji zadana. Ako ne odredite akciju,
to je kao što je rekao citat, citat ili naziv same datoteke,
što u ovom slučaju bi biti poput DOM-0.html.
To je samo vrsta zaključiti, odnosno podrazumijeva.
>> I tako, ako ne to, neka je primijetiti.
Dopustite mi da spasi ovo.
I ja sam uklonjena return false.
Dopustite mi da se vrati na ovo primjer i sila ga ponovno.
A možda ste vidjeli mi predlažemo ovo CS50 Porazgovarajte hrpu puta.
Ako je išta ikad djeluje funky i preglednik ne ponaša kao što se i očekuje,
često ćete želite zadržati Shift i kliknite Obnovi.
To će prisiliti svaku datoteku za ponovno učitavanje i ne koristite vašeg web preglednika lokalnu predmemoriju
ili kopija, tako da se sada, neka mi ići naprijed i otvoriti moj inspektore, karticu Network.
Idem kliknite Sačuvaj Prijavite jer sam
ne želim ga izbrisati retke Jednom sam se whisked daleko negdje drugdje.
>> Dopustite mi ići naprijed i ovdje upišite Andi, kliknite Pošalji.
U redu.
To mi se čini kako se i očekivalo.
Ona kaže: "Dobar dan, Andi."
Dopustite mi da kliknite OK.
Zanimljivo.
Obavijest da je stranica promijenio, iako na izvornu stranicu.
Obavijest URL vrsta promijenila.
Ona dodaje upitnik, što je obično pokazatelj
da smo pokušali dostaviti nešto.
A onda na dnu, još eksplicitnije,
Ovdje je stvarna HTTP zahtjev, što je dobio odgovor da je 200
doveo me ovamo.
>> Dakle, to nije ono što želimo učiniti, zar ne?
Jer ja ne želim reload cijelu stranicu.
I umjesto htjela vratiti lažna kako bi kratkog spoja
zadano ponašanje preglednika, koji bio je, naravno, da podnese stranicu.
>> Tako ćemo pogledati na marginalno bolje primjer.
To je dom inačica jedan.
I primijetiti sljedeće.
To je u redu ako ne zahvatite sve linija koda.
No, ono što je bitno drugačija o ovom provedbu?
Ja ću propisuju se ponaša Isto, radi istu stvar.
Što sam očito učinio drugačije?
Da?
>> PUBLIKA: [nečujan].
DAVID Malan: Da.
Dakle, funkcija definirana differently-- Drugim riječima, odsutnim iz obrasca,
gore na liniji 7-- ili a, linija više nije 8--
moram se onsubmit atribut.
U prethodnom primjeru, imao sam to.
A onda sam doslovno napisao moj kod ovdje.
I onda sam rekao return false.
A ako to nije trljati vi ipak pogrešan način,
to bi trebalo početi u mjeri u kojoj što je, baš kao u HTML,
kada smo počeli da ga zajedno miješati CSS u stilu atributa,
je tek počeo da se malo neuredan ili osjetiti malo krivo.
>> Isto tako ovdje, ako počnete uzimati HTML,
i onda automatski buć JavaScript kod
u sredini citirani niza, to je ne će biti vrlo održivi.
Pravo?
To nije ni očito na prvi mjesto gdje JavaScript kôd.
Dakle, to bi bilo jako lijepo kao načelo boljeg dizajna,
neka je zadržati naše HTML potpunosti odvojiti od našeg JavaScript.
>> Dakle, za to, što smo učinio ovdje je following--
jednostavno koristiti HTML samo oznake.
I tako je u verziji jedno od toga, svi Imam je oblik s jedinstvenim ID.
I onda ovdje, ja sam iskoristivši o posebnoj značajci JavaScript
gdje mogu imati ono što je naziva anonimni funkcija.
Tako ispada da ako ja zovem document.getElementById o 'demo'
to je kao da mi je pokazivač ovaj čvor u mom stablu, oblik elementa,
da se tako izrazim.
>> Sada, ja samo znam iz znajući malo HTML
Sada imamo pročitati neke online referenca, koji oblik elementa podržava
cijela hrpa događaja listeners-- u Drugim riječima, praonica popis događaja
slušatelji koje smo vidjeli prije nekoliko trenutaka.
Znam iz čitanja dokumentacije da onsubmit je valjan događaj
slušatelj za oblik elementa.
>> Tako jednom znam da, to je sigurno za mene
following-- dobiti taj čvor od drveta, oblik elementa,
ili pristupiti tzv onsubmit nekretnina.
Dakle, točka samo znači to je imovina,
kao posebne vrijednosti unutar nje.
A što sam ja tip podataka dodjelu, očito,
na onsubmit, koji je učinkovito varijabla u
tog čvora u stablu?
To je područje unutar tog Struct.
Što je tip podataka?
>> Funkcija, da.
Tako ispada da je PHP je ovo.
I iako smo nije vam reći o tome,
C također ima funkciju pokazivače, u sposobnost da prođe i dodijeliti funkcije
kao same vrijednosti varijabli.
A mi ne ide na regres natrag na C
No, za sada, ispada da na desnoj strani ovdje,
iako izgleda malo funky, to znači, hej preglednik,
dajte mi funkciju.
Neću se ni truditi daje to ime, jer sam doslovno
će dodijeliti nazovimo ga adresu ove funkcije
odmah onsubmit.
Drugim riječima, preglednik, ne trebate znati što je ova funkcija zove.
Vi samo trebate znati gdje je u memoriji.
I tako je dovoljno samo imaju znak jednakosti tamo
a ne da gnjaviti imenujući to, kao što je foo ili pozdraviti ili bilo koje druge riječi.
I sada je to samo stilska stvar.
Sam mogao pomaknuti tu kovrčavu braće na the-- sorry-- sljedeći redak
kao i obično učiniti CS50.
No, u JavaScriptu, to je zapravo stilski zajedničko
samo zadržati kovrčavu braće je Prva, na toj prvoj crti.
>> No u nastavku, postoji ništa zanimljivo.
To otvoren kovrčava braće jednostavno markira početak moje funkcije.
Funkcija je sada identična, osim što imam
uključen return false unutar ove funkcije.
Jer ispada out-- i ti bi samo
znam iz čitanja documentation--
da ako funkciju koju dodijelite na onsubmit rukovatelj vraća false,
preglednik samo zna i slaže ne podnese obrazac na poslužitelju.
Ako se vrati točno, to će dostaviti to poslužitelju razloga vidjet ćemo
korisni su samo na trenutak.
>> A onda je točka-zarez nakon Kovrčava braće postoji samo
znači sam učinio definiraju funkciju.
Znaš što nazvati čim kao što ste čuli podnesak.
U redu.
To je još uvijek uvjerljivo vrsta ružno.
Što još možemo učiniti?
>> Pa, ispada onda u verzija dva, što je last--
A mi ćemo samo pogled na ovo.
Na rizik od izrade je ružnije, ispada
da postoji knjižnica u svijet zove jQuery.
I jQuery je super popularni JavaScript biblioteka
to je toliko popularan da je većina bilo JavaScript-- to nije
neuobičajeno da ljudi brkaju jQuery s JavaScriptom.
Zašto?
JavaScript sebi ima vrlo preopširan načinima obavljanja things--
document.getElementById, dadadadadada.
Vi ćete imati vrlo duge linije koda.
>> Dakle, čovjek po imenu John RESID, koji zapravo radi za stavljanje u pogon
do ovih dana, izašao Uz to knjižnica godina
Prije da su mnogi ljudi su doprinijeli kako se zove jQuery koji se mijenja
sintaksa na sljedeći način.
I samo tako da ste vidjeli ovo, jer ćete uvijek
vidjeti ako obavljajući web-based konačni projekt,
to bi bilo jednako način provedbi istu funkciju pomoću
Ova posebna knjižnica.
>> Sada, umjesto da zafrkavati osim što je u cijelosti,
neka je samo pogledati neke obrasce.
Ovo čini se da sintaksa koliko anonimni funkcionira
ili bezimeni funkcije ili AKA lambda funkcije?
Dva, zar ne?
A znate da, čak i ako nisi super udoban s tim,
samo činjenica da je to kaže funkcija () dva puta.
>> I ispada da što je to kod je doing--
a mi ćemo se odnose na online referenci, u konačnici, za neke pomoći s ovim.
To samo znači da kada dokument je spreman,
ići naprijed i registrirati Sljedeća funkcija
kao dostavi rukovatelj za HTML Element čija je jedinstvena ideja je demo.
I onda, kad se to dogodi, Te dvije linije koda.
A to je, nažalost, više preopširan način govoreći return false.
A mi to spomenuo samo zato vidjet ćete kod ovako online.
A to je ništa biti daunted.
Ali umjesto toga, imajte na umu da ono što je će biti uobičajene u JavaScriptu
je to paradigma.
I tako to je razlog zašto smo ga pokazati za sada.
U redu.
Dakle, bez stana previše mnogo toga sintaksu,
se postoje bilo kakva pitanja o ovi primjeri ili ideje do sada?
U redu.
Tako ćemo koristiti ovu za nešto korisno.
Izrada web stranice koje jednostavno kaže halo, tako i tako nije sve što je zanimljivo,
ne underwhelm.
To ne će biti lijepa, ali to će učiniti nešto korisno.
Pusti me natrag u moj direktorij ovdje i otvoriti, kažu, forma-0.html.
>> Dakle, pretpostavimo da je to brucoš intramuralnih sportski registracija stranica
bez CSS ili bilo kojem smislu dizajna.
I ja želim ići naprijed i Registrirajte se ovdje lozinkom.
I ja ću se složiti s uvjetima a uvjeti i kliknite registar.
A sada je web stranica kaže: "Vi ste registrirana! (Pa, zapravo i nije.) "
To mi se čini kao da je radio, ali neka mi ići naprijed i prisiliti Reload.
>> I dopustite mi da kažem, ne, ne potrebna mi stvarnu adresu e-pošte.
Ili možda smo samo ću reći mail tamo.
Lozinka će biti, kao, 12345.
A onda, samo zato što sam idiot, sada je 123456789.
I neću da provjerite svoj okvir.
>> Hmm.
U redu.
Dakle, postoji nekoliko mogućnosti za poboljšanje ovdje.
I znate, ili će vidjeti pset sedam, da možete pisati code--
a vi ćete morati napisati kod u PHP-- braniti
protiv ove vrste korisnika pogreške jer je korisnik jasno
nije surađivao.
On ili ona vam nije dao sve vrijednosti ste htjeli ili čak u obliku
da ih je htio.
Dakle, što ćete vidjeti u pset sedam da svakako mogao imati neke
ako uvjeti da kažu ako je e-mail adresu
nije username@something.edu, smo mogli samo
kažu žao i ispričavam korisniku mnogo, kao što bi moglo biti u pset sedam.
Ili ako nisu provjereni taj okvir, Ispada u PHP-u, možete otkriti da,
previše.
I svakako, ako se lozinke nisu isti kao u register.php
za pset sedam, možete otkriti da.
No, to je bol u vrat, da sada tražiti
nam da ide sve na putu do poslužitelja.
Korisnik je obaviješten o poruci.
I barem ako ne koristite neki ljubitelj tehnike,
Sada oni moraju kliknite strelicu Natrag.
Zar ne bi bilo lijepo, kao što su puno web danas,
ako ste imali više neposrednog povratne informacije, odmah?
>> Drugim riječima, pustite me na verziju jedan, koji će biti ljepše.
No, ona ima tu značajku.
Malan, 12345, 123456789, ne će provjeriti okvir, registrirajte se.
Lozinke se ne podudaraju.
Dakle, iako je to pop-up je ugly-- možemo zamijeniti ovu kraju
s nečim kao što Bootstrap, što ćete vidjeti u pset sedam
je vrlo popularan library-- jesam otkriti da su lozinke se ne podudaraju.
U redu.
Pa, neka mi popraviti kao korisnik.
Dopustite mi ići naprijed i reći 12345, 12345.
Još uvijek ne provjeri ugovor.
Morate pristati na Uvjeti.
Pa zašto?
>> Ako smo već postavio da postoji način,
a mi smo ti potrebna u pset sedam otkriti pogrešku
uvjeti kao što je ovaj strani poslužitelja, zašto bih
smetaju i to u JavaScriptu?
Što je argument u korist dodavanja ono
ste o kako bi vidjeli što some-- postoji dodatna složenost.
>> Možda nema naopako.
Što bi to moglo biti?
PUBLIKA: [nečujan].
DAVID Malan: O, zanimljivo.
Potencijalni eksploatira.
Pa jeste, ako niste rukovanje pogrešan unos korisnika koja bi,
možda je sve bolje, ako to ni ne dosegnete svoj poslužitelj.
Ja bi gurnuti natrag tamo i recimo, vjerojatno biste trebali
popraviti oba od tih problema.
No, to je fer.
Što drugo?
>> PUBLIKA: [nečujan].
>> DAVID Malan: Da.
Ovaj kod, kao što smo rekli prije, tumačiti na strani klijenta.
To ne smeta poslužitelja, što znači da ne
utjecati teret ili je kapacitet poslužitelja.
A sada, za malo stare mene, to nema značajnog učinka
jer imam jedan korisnik upravo sada.
>> Ali, ako ste bilo web stranice pristojne veličine,
Posebno je najveći, kao što su Facebook, više možete zadržati ljude izvan
vašeg poslužitelja bolje jer poslužitelj, naravno,
samo ima konačnu količinu RAM-a, konačan broj GHz,
konačan broj stvari to može učiniti po jedinici vremena.
Dakle, ako ima više ljudi u svijet udaranje poslužitelja,
slučajno se prijavite pogrešno, baš kao i ako vas
može zadržati rasteretiti vaš poslužitelj.
Osim toga, pogotovo na mobitelu device-- ako ste ikada
prijavite se na my.harvard ili Yale je netid ili slično,
tu je to kašnjenje s puno web stranice kao što je to čemu što je potrebno,
kao, prokleto sekundu-dvije ponekad.
A onda, Bože moj, ako pogrešno, onda morate uzvratiti i ponoviti ga.
Tako je latencija, osobito na sporiji mrežnim vezama.
Ali JavaScript, jer to radi na klijentu
i ne treba ići naprijed i natrag preko potencijalno sporog interneta
veze, možete dobiti gotovo trenutna povratna.
>> Pa pogledajmo ovo.
Dopustite mi da se otvori forma-0 i pogledajte HTML ovdje.
I neka je samo vidjeti što se događa.
To je oblik čija je akcija register.php.
Ja sam samo pomoću dobiti tako da sam mogao vidjeti URL.
Ali za lozinke, mi bismo sigurno želite da se to promijeni na post u stvarnosti.
Evo polje za unos tipa teksta.
Evo još jedan ulaz Područje tipa lozinkom.
Evo, ako ste nikada nije vidio, unos tipa kućicu.
>> Ali nema JavaScript Ovdje god.
To je samo HTML da ide register.php.
No, u verziji jedne, gdje sam počeo se one pop-up prozora,
da vidimo što se zapravo događa ovdje.
U verziji jednom, što Idem see-- I
Mislio sam da bi moglo zatajiti dovoljno s dovoljno riječi, ali je ponestalo.
>> U verziji one-- tamo idemo.
U verziji jednom, primjećujete following-- i nije najbolji provedba,
ali to je moj prvi.
Obavijest da ispod oblik, imam oznaku skripte.
I tag skriptu znači, hej, preglednik, ovdje
dolazi neki kod u, obično, JavaScript.
A sada, primijetiti što radim.
Na line-- sam jedva pročitati it-- linija 32, ona kaže,
var form-- mi tako dati varijabla zove forma.
I onda bi document.getElementId o "registracije".
Što je ovo?
Pa, neka mi natrag ovdje.
I napomena, ah, dala sam oblik elementa proizvoljna, ali opisno ideja
registracije.
Dakle, to mi daje varijablu koja mi omogućuje da iskoristite taj čvor,
da pravokutnik u stablo naziva obrasca.
form.onsubmit znači, hej preglednik, Registrirajte se događaj slušatelja
na ovom obrascu.
Drugim riječima, kada je ovaj obrazac podnesen, izvršiti sljedeći kod.
To ne treba ime, jer Zašto trebate znati ime?
Vi samo trebate znati Što izvršiti, ergo
to je anonimni ili lambda funkcija.
I to je funkcija sve ove linije ovdje.
A sada, da budem iskren, čak i ako ne bi nikada napisao JavaScript
prije, to je samo C i PHP logike.
Dakle, ako form.email.value == "" - pa ako je polje e-mail je prazno,
vikati na korisnika s "Morate dati svoju adresu e-pošte. "
Inače, ako form.password.value je prazno vikati na korisnika,
"Morate dati svoju lozinku."
>> Još zanimljivije logično, Ako form.password.value ne
jednako form.confirmation.value-- Odakle dolaze potvrda iz?
Dopustite mi natrag.
Pa, nazvao sam to ulaz Polje ovdje lozinkom.
I ovdje se zove ovaj potvrde.
Mogao sam ga nazvao Lozinka dva ili bilo što drugo.
Ja samo logično provjeru da ove dvije su isti.
Else-- ispada ovo je gospodin Boole again-- Booleova vrijednost, potvrdni okvir.
Dakle, ako ja kažem, usklik point-- ako ne i form.agreement.checked,
vikati na korisnika kao dobro.
>> Dakle, to sintaksa vidjet ćete je vrlo česte u JavaScript,
gdje imate ovu točkastu zapis.
Možete početi s objektom ovdje.
Možete roniti dublje a do svojstvo kao što je lozinka.
I onda ste dobili na svojoj stvarnoj vrijednosti.
I opet, ovdje je ulaz.
Ovdje je ime lozinka.
I njegova vrijednost je bez obzira na Ljudsko je zapravo upisali u.
>> Tako je u svim tim slučajevi, vratio sam se lažno.
Ali ako se ne vraćam istina.
I tako sada vidimo uvjerljiv korištenje kada
ti bi return false se zaustaviti što korisnik je radi
i učiniti ga ili joj izabrati ponovno ili ponovno upisati.
Inače, vraćamo istina.
>> I neka mi predstaviti jedan druga varijanta to samo
zasijati neko razumijevanje istih.
Pa, u verziji 2. ovog, oblik-2-- Učinit ću to s pokretom ruke.
To je, za one znatiželjan, jQuery verzija,
one koji možda žele praćakati u toj knjižnici.
Ali neka start-- i bilo kakvih pitanja?
Dopustite mi stanka za trenutak jer da je brzo i mnogo.
>> No, lijepa stvar ovdje je da sve koda je ljepušan velik dio isti.
Nova stvar je što je dom?
Što su ti pravokutnici?
Što su ti čvorovi?
Što je anonimni funkcija?
Što je rukovatelj događaj?
No, srećom, većina to je samo puni krug od, recimo, tjedan dana nula.
U redu.
Tako nešto zanimljivo nešto?
Pa, prije svega, pustite me naprijed i otvoriti Google Maps.
A vi ćete primijetiti da je za Trenutak, na djelić sekunde,
primijetiti što se događa kada Ja kliknite dovoljno brzo.
I ova veza na Harvardu je tako brzo da zapravo ne primjećujete.
Ali što ti vrsta vrsta vidjeti ako ja kliknite i povucite jako brzo?
Oni od vas gleda na internetu, ako usporiti to brzinom 0,5x,
možete vidjeti bolje.
>> Što se događa samo prije nego što sam kliknuo i vukao?
Dopustite mi da pokušam here-- neka mi učiniti nešto drugo, kao što je 90210.
Idemo daleko.
To je bilo jako brzo, previše.
Kako o Disney World?
Idemo tamo.
U REDU.
Što ste vidjeli na djelić sekunde?
Baš kao što, trgovima, zar ne?
Rezervirana mjesta za pločice?
>> Pa, što se ovdje događa?
Google Maps je lijep primjer ova tehnologija koja se zove AJAX.
I ovo je mjesto gdje ćemo početi koristite JavaScript u posebno
primamljiv način.
Natrag u dan, nije bilo ove web stranice zove MapQuest.
I ja sam trebala uzet Screenshot to od 1990-ih,
gdje ako ste htjeli pogledati ovdje na karti,
ti bi doslovno kliknite strelicu gore na vrhu koji vam je pokazao
drugačiji kvadrat karte.
Ako biste željeli pomicanje lijevo, te klikne strelicu koja vam je pokazao
drugačiji kvadrat karte.
I neke web stranice je i danas.
No, čak i MapQuest je stečen bolje, kao što su Google Maps.
>> Umjesto toga, ono što je bolje to dana je web stranice koje koriste AJAX.
AJAX-- mesar Asinkroni JavaScript i XML,
što je samo fancy način govoreći tehnologija ili tehnika koja
omogućuje preglednik pomoću JavaScript napraviti dodatne HTTP zahtjeva
nakon što je stranica je učitan.
Dakle, što to znači?
Pa, to bi bilo kakav neugodno u Gmailu
ako svaki put kad je htio provjeriti svoj mail,
doslovno udario Kontrola-R ili Naredba-R ili kliknite na gumb Osvježi
a cijeli prokleto stranica će se ponovno učitati.
Pravo?
To bi bljesak bijele Vjerojatno za sekundu.
Ti bi vidjeti glupu napredak šipka.
I samo da vidi ako imate novu pošte, cijela web stranica i URL
ste u će morati ponovno učitavanje.
>> Ali to nije ono što se događa u Gmailu.
Pravo?
Kada dobijete novu e-poštu u Gmail, ono što se događa na ekranu?
To samo pokazuje da se, zar ne?
To samo magično pojavi kao novi redak u tablici.
To zapravo uključuje pristojan iznos složenosti.
Zapravo, ako mislite o ovom stablu, koji iako je jednostavan ovdje
Gmail-- i ja bih pogledati na kodu da bude sure--
Vjerojatno ima HTML tablicu ili možda neuređen popis da čini
svaki od vaših inbox e-pošte kao.
>> I tako, ako zamislite to postoji je stablo u memoriji kada ste
koristiti Gmail što izgleda vrsta vrsta ovako, kada je Google shvaća, ooh,
imate novi e-mail, to ne žele obnoviti cijeli stablo.
Umjesto toga, on želi pronaći čvor u stablo koje predstavlja vaš inbox
i samo stavite novi čvor.
>> Dakle, vrlo slično pset pet, gdje vas morali umetnuti čvorova u hash tablici,
Slično se Google, preko JavaScript kôd koji se piše,
Traverse ovog stabla, shvatiti gdje je da Spremnik dio prozora,
a zatim umetnuti novi redak.
A novi red samo znači jedno ili više novih čvorova u stablu.
>> I tako AJAX je ova tehnika koji omogućuje upravo to.
Nakon što ste posjetili URL, Međutim ludi dugo je,
a kada je stranica učitan, još uvijek možete
zgrabite više podataka iz internet-- li je
e-mail ili pločica od map-- iskoristite ga iza kulisa
a zatim ga umetnite u stranicu tako da je ljudsko ne stvarno
morati pričekati za to.
>> Facebook Messenger radi na isti način.
Bilo koji broj ostalih websites-- Oh, zapravo, čak i to.
Mislim, ovo je, iskreno, vrsta neugodno značajka ovih dana.
Ako sam početi tražiti cats-- to je vrsta grozan korisničko iskustvo.
To samo počinje u potrazi za mene.
Pa što se to radi?
URL stvarno nije promijenila otkad sam počeo tipkati.
No, što se događa diljem wire-- redu, hmm zanimljivo.
Što se događa diljem Žica ovdje samo dobiva čudnije.
>> U REDU.
Pa neka mi ići naprijed i pregledajte element i idite na karticu Network
i pokušati napraviti ovo tehnički i manje o mačkama.
Kao što sam tip, doslovno, mačke and-- što se događa
per-- neću kliknuti to.
U redu.
Dakle ovdje, što se događa svaki Vrijeme sam upišete, očito?
Kao, niska razina?
Što se događa sa svakim od njih likove sam tipkati na moje tipkovnice?
Da?
PUBLIKA: [nečujan].
>> DAVID Malan: Točno.
Svaka od tih znakova je ide na Google, jednu po jednu.
Oni su izgradnju niz na njihovom poslužitelju koji predstavlja
sve što sam upisali u do sada.
I svaki put sam tip još jedan lik, oni
koristiti svoj tajni umak od A algoritam za pretraživanje i shvatiti,
on znači ova mačka stranicu ili je to mačka stranica ili slično?
Dakle, u nekom smislu, to mi pruža bolje iskustvo da radim ni
potrebno je završiti svoju misao.
I doista, to je korisno stvar, samodovršetak u cjelini.
Ako su njihovi algoritmi su dovoljno dobri a ako su moje pretraga dovoljno očite,
Ne morate upisati cijelu riječ.
Oni će mi reći što je to se ja zapravo tražim.
Dakle, ono što Google naziva Instant traži samo pomoću AJAX,
pomoću koda koji im omogućuje da zatraže dodatni sadržaj putem web preglednika
iza kulisa koriste ovo novi jezik, JavaScript.
Dakle, imamo par minuta preostalo.
I neka mi nazvati moj prijatelj Colton na pozornicu,
jer se činilo osobito zabavno zadnji put
uvođenje tehnologije da su neki od vas
izrazili interes u za konačne projekte.
Mislili smo da bi bilo zabavno da bi do volonter, ipak, danas
da vam pokazati dodatak to da you-- omogućuje da,
Prvi put vidio sam ovu ruku.
Dođi gore.
Vrlo dobro učinio.
Dobar posao.
Idem projicirati to na zaslon u samo trenutak.
Koje je vaše ime za sve?
>> EFA: Ja sam EFA.
>> DAVID Malan: Etha?
>> EFA: EFA.
>> DAVID Malan: EFA?
>> EFA: Da.
>> DAVID Malan: Lijepo vas je vidjeti.
U redu.
Dopustite mi da to spremni.
Dođite na to Srednji sa Colton ovdje.
Što Colton ima u rukama Danas je daljinski upravljač.
Dakle, umjesto da samo stajati tamo u trodimenzionalni svijet gleda oko
kao Colton učinio, sada EFA može zapravo hodaju okolo po ide gore,
dolje, lijevo i desno poput Nintendo ili Xbox kontroler.
EFA: Idem da padne s pozornice.
DAVID Malan: Hoću stajati otprilike ovdje.
Ali to je rizik.
U REDU.
Pa ići naprijed i staviti one na.
Dopustite mi ići naprijed i prebacivanje na zaslon ovdje.
Dopustite mi dim svjetla.
I Colton, neka me dolaze stajati pored tebe.
>> Želite li objasniti ovdje s mikrofonom što radimo?
Izvoli.
>> COLTON: Naravno.
Dakle, sada smo učitava se Oculus,
Mislim operating-- ne radi sustav, ali je glavni program, u kojem
možete pristupiti svim igrama i aplikacije koje su u vašoj knjižnici.
Pa sad, to treba reći dodirnite touchpad za početak.
Touchpad će biti na desna strana slušalice.
Pa ići naprijed i tap--
EFA: Oh, čovječe.
DAVID Malan: Da, tamo idete.
Kvaliteta EFA je viđenje je puno kvalitetniji.
Ovo je samo Wi-Fi ovdje.
COLTON: Pa što si će htjeti raditi
je gledati prema vrhu Pravo na zaslonu.
Da, da igra na samom vrhu desno.
I onda kada ste odabiru je, ponovno dotaknite dodirnu plohu.
Mislim na Dreadhalls.
A onda je ovdje A- ovdje, neka mi držite naočale za vas.
>> Zato sam mu samo dao kontroler.
Tako sada on može kontrolirati igru.
On može kretati i stvari kao što je to.
Dakle, ići naprijed i gledati na vrh.
Te bi trebao vidjeti novu igru.
Pa ići naprijed i to možete učiniti.
Sada biste trebali biti u mogućnosti kontrolirati se s kontrolerom,
kao i, što je prije igra učitava ovdje.
To može biti malo zastrašujuće.
>> EFA: Sad mi reci.
U REDU.
>> COLTON: U redu.
Dakle, potvrđuju da možete kretati.
U REDU.
Možete se kretati.
Savršeno.
Dakle, ako pogledate dolje, imate kartu.
Karta ti pokazuje gdje si.
Možete pogledati po sobi.
Možete potpuno okrenuti.
Da, točno.
Okrenuti se.
>> Pa pogledajte na svoju lijevu stranu.
Mislim da postoji nešto što možete pokupiti na bačve u sobi.
>> EFA: Kako mogu dobiti map zabit?
COLTON: Potražite.
Dovoljno je pogledati gore.
U redu.
Izvoli.
Sada idi naprijed i samo okrenuti.
Pa pogledajte dalje na svom lijevo.
Držite se kreće lijevo.
Držite gleda lijevo.
Nastavi.
Da.
>> EFA: Oh, na taj način.
>> COLTON: Da.
Šetnja prema njoj s kontrolerom.
Izvoli.
Sada to treba reći to podići.
Izvoli.
Podignuti.
U redu.
Sada, neka je izaći iz ove sobe.
Idi naprijed i prošetati do vrata.
Dakle, ti si idući u hold-- ona kaže držite tipku na silu otvoriti.
Pa ići naprijed i držite gumb.
Da, prisiljavajući ga otvoriti.
U redu.
Dobar posao.
Sada smo hodanje iz sobe.
Zato ću ostaviti ostatak do vama i vidjeti što ste saznali.
EFA: Ne idem u mračnoj sobi.
Čekaj.
Sada moram ići niz mračnu dvoranu?
OK, vraćam [nečujan].
COLTON: U redu.
Neki više stavki pokupiti.
Izgleda kao neki novac.
To je zaključavanje pokupiti.
Dakle, ako ste pronašli zaključan Vrata, možete koristiti.
Jeste li uplašeni?
>> EFA: Ne još.
COLTON: U redu.
>> Pretend-- da.
Samo pretvarati da si zapravo stoji tamo.
A ako uključite around-- moraš naviknuti na to.
Ali to ima smisla.
DAVID Malan: I dok EFA nastavlja igrati, jer smo mogli učiniti cijeli dan,
možemo svi tip-nožni prst ovdje.
Ali imamo još dva para, Ako želite da se i igrati.
Inače, vidjet ćemo sljedeći put u srijedu.
Hvala vam na naš volonter danas.
[PLJESAK]
>> [MUSIC - "Seinfeld TEMA"]
SPEAKER 1: Pa, ja sam stavljajući novi PL montirati na.
Upravo sam promijenio OLPF--
>> ZVUČNIK 2: Pa što točno radiš?
>> SPEAKER 1: Pa, svatko od these-- ovdje, ja ću vam pokazati jedan u ovdje.
Možete ga vidjeti ovdje.
>> SPEAKER 3: Mislim da sam dobar s njima.
Želite još?
>> SPEAKER 4: Ne, ja sam dobar. [Nečujan].
>> SPEAKER 3: Ne, [nečujan].
Imati neke.
SPEAKER 1: Različite boje.
ZVUČNIK 2: OK.
SPEAKER 1: Dakle u konačnici to što ipak se podešava boju of--