>> [Přehrávání hudby]
>> DAVID Malan: Toto je CS50.
To je začátek týdne devět.
A to je to, co by mělo Byl 200. výročí narození pana Boole je.
Tak tohle je chlapi , kterým jsme se zmiňoval
docela někdy o použití Booleovské proměnné true a false,
1 a 0 a tak.
A to bylo to Google Pocta ním dnes.
On by se obrátili 200.
Takže pokud chcete Připojte se k nám na oběd CS50,
se podívat na tento odkaz na internetových stránkách Course.
A takové tváře a přátelům jako Tyto vás čekají tady v Cambridge.
Tváře, jako jsou tyto na vás čekají v New Haven.
A ve skutečnosti, v Ken New Haven laskavě
co se nazývá animovaný GIF of Eli zde na nedávný lunch-- GIF je dosud
jiný grafický formát souboru, s níž jste familiar--, že
vypadá trochu něco takového.
Takže jen sled of-- OK.
Nikdo tady v Cambridgi se směje.
Ale v New Haven, to je opravdu k smíchu, že jo?
Dobře.
>> Takže se k nám tam.
Tady na Harvardu, konkrétně, tuto středu,
pokud jste druhák nebo nováček even-- nebo dokonce junior-- myšlení tvorby
přepínač do počítače věda, vím, že tam bude
být CS poradenství fair to Středa, krátce poté, co třídy
v 4:00 hodin v počítači věda budova Maxwell Dworkin.
Dáme na hřišti je to webové stránky zítra, stejně.
Donuts, jak mi bylo řečeno, se bude podávat.
>> Dobře.
Takže legrační story-- mě strká kolem na internetu,
a našel jsem pár starých archivů mého bývalého webových stránkách.
A ukazuje out-- kolem tohoto čas, zdá se, velmi aktuální
od té doby jsem pochopil, že volby UC Chystáte se zařízení znovu.
Tak jsem se ucházel o UC, prohrál nešťastně.
A možná to bylo z části proč.
Tak tohle byla moje webové stránky v té době.
Z nějakého důvodu, myslel jsem, že to dobrý nápad, než říkat lidem,
co můj platformě bylo a proč měli hlasovat pro mě, že mají
klepnutím na tlačítko pro vstup do zjistili, že Informace, což při zpětném pohledu je
druh plazivý.
Já opravdu nevím, co to bylo.
>> Ale to rozhodně ne pomoc kampaň.
Také jsem zjistil, že senior rok-- jsem měl tento kalendář Muppet.
Muppets byly trochu v módě tehdy.
Nebo možná, že ne.
Měl jsem kalendář Muppet zpátky.
A já si myslel, že to bude v pohodě názvu můj počítač v síti Harvardu
frogman.student.harvard.edu.
V té době, všichni jsme měli jednoznačně identifikovatelné názvy hostitelů.
A vy jste si mohli vybrat nějaký marnost jméno namísto svým vlastním jménem.
A já jsem šel s žabího muže z nějakého důvodu.
>> A pak jsem started-- Strávil jsem hodně čas prokliká těchto odkazů
dnes ráno.
A to byl můj asi strana, který nyní trochu vypadá rozkošný.
Ale také to svědčí jen jak daleko technologií přišel.
Myslím, zpět v den, 486 bylo něco.
V těchto dnech, je to super, super, extra pomalý a dobře méně
než byste mohli mít ve vašem vlastní kapsy v těchto dnech.
Tam je více na tam, že byl ještě trapné.
Tak jsem si to nechat tak.
Ale to byl můj první vpád do web-- oh, no.
To nebylo.
Můj první skutečný vpád do programování webu Byl na tomto webu, který jsem právě zapomněl.
V určitém okamžiku, jsem se naučil, jak se aby opakující se obrázky na pozadí.
A tak jsem našel obklady efektivní, jako hokejista, fotbal a golf
plesu, nebo co to je pro webové stránky Frosh IMS.
A to bylo ve skutečnosti, opravdu První webový projekt, vzal jsem on--
Myslím, že druháku rok, junior rok--
poté, co vzal CS50 a CS51, jeden společných následných o třídách.
Jsem si všiml při hledání přes archivy
že jeden z mých nástupců a přátelé, Lee, trochu změnila
autorská práva pro sebe.
Ale tohle bylo opravdu něco, Mám vlastní ostudou.
Ale v té době, toto byl první webové stránky,
jak jsem řekl před pár týdny, kterým nováček mohl
zaregistrovat intramurálních sporty.
A tak to dopadá že obrázky na pozadí
stejně jako, že nejsou až tak dobrý nápad.
Ale web byl nový, a jsme byli všichni experimentovali.
A to je to, co jsem se zřejmě dělal v té době.
Dobře.
Takže bez dalších okolků, zapneme kola dnes dát, opravdu,
Posledním kouskem, který jste mohli najít obzvláště užitečné pro závěrečných prací
ale také to, že se začne aby byl celý World Wide Web
cítit trochu srozumitelnější.
Ve skutečnosti, budeme zavádět ještě jeden programovací jazyk
volal JavaScript, který je podobný a liší se v různých způsobech
z jazyků jsme se podíval na tak daleko.
>> Takže C, odvolání, je to zkompilovaný jazyk.
Musíš spustit pomocí překladače.
Získáte zdrojový kód do objektů kódu nebo nuly a ones.
A to jsou nuly a ty, které váš procesor, Central Processing Unit,
skutečně pochopit.
PHP, naopak, není kompilované jazyk.
To je co?
Je to interpretovaný jazyk.
Takže tam je nějaký program nazvaný interpret, který
musí přečíst to-- shora dole, vlevo right--
a zjistit, co všechno Váš syntax dělá a prostředky,
ať už je to smyčka nebo stav nebo jakékoli jiné číslo programování
konstrukty.
Tak to je interpretovaný jazyk.
>> Pak jsme se představil HTML.
A HTML není ani programovací jazyk.
Měli bychom říkat, co?
Značkovací jazyk, který je jen druh fantazie způsob, jak říkat to
nemá programovací pojmy jako jsme viděli i zpátky v den Scratch.
Neexistují žádné smyčky.
Neexistují žádné podmínky.
Je to opravdu je jazyk o označování svá data
a formátování, nebo strukturování jej nějakým způsobem.
>> CSS, zatím, obdobně není programovací jazyk.
Je to ještě více esteticky orientovaná.
A to vám umožní třídit z doladit věci, jako je velikost písma a barvy
a umístění, a to vše.
Pak jsme měli
>> SQL.
Takže SQL je opravdu programovací jazyk v nějakém smyslu,
i když na míru konkrétně k databázím.
Ale i když jsme jen představit vám vyberte a vložit a odstranit, a aktualizovat
a pár druhých, Ukazuje se můžete skutečně
psát funkce, nebo postupy, jak se jim
volal, v SQL, které vypadají a jednají docela jako PHP a C funkcí.
Takže vím, že ty, které existují.
Ale my ani obtěžovat s nimi jak jsme právě poškrábat povrch zde.
A pak JavaScript, poslední oficiálně představil naše jazyky.
Takže JavaScript, také, je interpretovaný jazyk.
A ty, kteří znají, dělat Chcete ji rozlišit
s některými charakteristikou z obou C a PHP?
Co ho odlišuje?
>> Diváků: To není sestaven.
>> DAVID Malan: znovu, řekni?
>> Diváků: To není sestaven.
>> DAVID Malan: To není sestaven.
Takže to, také, je interpretován.
Takže to není sestaven.
Ale to dělá to tak trochu jako PHP.
Ale je to pořád odlišné od PHP nějakým překvapivým způsobem,
alespoň v tom, jak budeme používat.
To jo?
>> Diváků: To běží na straně klienta.
>> DAVID Malan: To běží na straně klienta, obvykle.
To je skutečně rozlišovací Charakteristické pro nás právě teď.
C byla na straně serveru v tom smyslu, že jsme udělali vše, co v CS50 IDE.
PHP se dosud na straně serveru, pokud
jak to taky, dostane interpreted-- není kompilován, ale interpreted--
Uvnitř CS50 IDE, což je samozřejmě jen server nebo servery v cloudu.
>> Ale JavaScript, ani I když jdete
začít psát to, řekněme, pset osm a možná konečný projects-- jste
bude pravdu, že v CS50 IDE a uložte jej
v souborech uvnitř CS50 IDE, CS50 IDE a, podle pořadí, se oblak servery
na které je umístěn, se nebude interpretovat nebo spuštění kódu.
Spíše to bude být zaslány nezměněné podobě dolů do prohlížeče.
A to pak bude IE nebo Chrome nebo Firefox nebo Safari
nebo co to vlastně interpretuje to, shora dolů, zleva doprava.
Takže klíčové rozlišovat charakteristický pro dnešek
je to, že JavaScript je na straně klienta a PHP, například,
byl na straně serveru.
Nyní, toto má zajímavé důsledky pro, jako, duševní vlastnictví
a kdo může skutečně vidět váš kód.
A skutečně, můžete jít na webu a podívejte se nejvíce
jakýkoli kód, který někdo má napsaný v JavaScriptu.
Někdy je to čitelné, Někdy je to popletl.
Ale o tom více v pravý čas.
>> Takže JavaScript, dost hezky, je Super podobné, syntakticky, aby C.
A podobně jako PHP, není hlavní funkce.
Pokud chcete začít psát Kód JavaScript, jak uvidíte dnes,
stačí začít psát to.
Ale to je, uvidíte, zvláště užitečné v souvislosti s webových prohlížečů.
Nicméně, můj malý disclaimer-- obvykle earlier--
bylo říci, že můžete stále více dnes používají JavaScript na straně serveru
pomocí fantazie rámce s názvem Node.js že některé z vlastní aplikace je CS50
jsou psány.
Zkontrolujte, zda ve skutečnosti používá 50 Node.js.
Ale budeme se soustředit na JavaScript na straně klienta tady na ven.
>> Takže tady je soubor podmínek v PHP.
Je nám líto, in-- skutečnosti, že tvrzení, také je správné.
Zde je také sada podmínky v JavaScriptu.
Syntakticky, to je identická s C a PHP.
Výrazy pana Boole jsou, Stejně tak, syntakticky
identické s oběma C a PHP.
Máme také spínače v JavaScript, že vypadají totožně.
Máme pro smyčky, které jsou strukturované identicky,
while, dělat, zatímco smyčky.
>> To je trochu jiný.
PHP měl pro každý konstrukt že byste mohla být pomocí
nebo budou používat v pset sedm, možná.
JavaScript má tuto speciální verzi pro, kde jste doslova říci něco
jako variabilní klíč v objektu, který je velmi stručná způsob, jak říct,
jestli jsem dostal object-- a my mluvit o nich opět v moment--
a chci k iteraci přes všechny párů klíčových hodnot uvnitř,
Nemám přijít na to, jak se číselně index je s nula, jedna,
dva, tři.
>> Můžu doslova říct.
A v každé iteraci, JavaScript pro mě bude aktualizovat proměnnou klíč
, že je první klíč, pak další klíč, pak další klíč, pak další klíč,
a tak dále.
A můžu dostat na své hodnotě zpracováním objekt v JavaScriptu, jak uvidíme,
jako kdyby je to asociativní pole v PHP.
Ve skutečnosti, pokud jste konečně svůj zabalené mysl kolem toho, co asociativní pole je
v PHP, můžete si o tom myslíte teď as totožný s objektu v JavaScriptu.
Ale to je trochu oversimplification.
>> Pole vypadají dost hezky, totožný do PHP až na jeden znak.
Je tu jedna věc tu chybí že jsme viděli minulý týden s PHP.
Co vynechat?
To jo?
Žádné znak dolaru.
Takže jsme zpátky do A normálnější světě, kde
proměnné nemají znaky dolaru.
Ale vy je prefix s var, typicky.
A var znamená proměnné.
A podobně jako PHP je volně typed-- přičemž tam jsou typy,
tam jsou čísla a řetězce a plováky a tak forth--
JavaScript má podobně typy.
Ale je to volně napsaný v tom, že jsme programátoři nemusíte specifikovat.
Jen musíme být vědomi že různé druhy existují.
>> Proměnné, meanwhile-- tady je návod, jak můžeme prohlásit "ahoj, svět"
jako řetězec.
Všimněte si, že je totožný s PHP ale žádný znak dolaru.
A to je něco, co budeme začnete vidět více dnes,
kdy máte objekt s klíči a hodnotami.
A pokud si chcete vyzkoušet vyvodit z posledního week--
Syntaxe je trochu jiný.
Ale trochu zdravý rozum check-- kolik Klíče to objekt se zdá, že?
Tak vidím čtyři.
Vidím dva.
>> Takže je to vlastně dva.
Takže tohle je kolekce ze dvou dvojic klíč-hodnota.
Klíčem k úspěchu je symbol, jehož hodnota je FB.
Klíčem k úspěchu je cena, jehož hodnota je 101.53.
To jsou jen dva páry klíč-hodnota.
A pamatujte si, PHP-- a to je opět tak nějak syntaktického rozdílu.
To není všechno, intelektuálně zajímavé.
PHP může psali to stejné věc jako follows-- citovat, rovná.
A já je změnit na hranatých závorkách.
A pak jsem se změnit na kotovaná slovo, "cena".
A pak jsem se nepoužívají dvojtečku.
Co jsem používat minulý týden?
Jo, rovnítko šipka funky notace.
>> A pak jsem udělal to samé tady.
Totéž zde.
A to je vše.
Takže je to v pořádku, pokud to nemá opravdu klesl do paměti jen
Zatím, protože je to opravdu intelektuálně nezajímavé.
Je to jen syntaktické rozdíly.
Ale myšlenky jsou naprosto stejné.
Uvnitř této proměnné citace v JavaScriptu
je sbírka dvojic klíč-hodnota, z nichž jeden je symbol, z nichž jedna
je cena.
A můžu dostat na těchto hodnotách s následující syntaxí.
Stejně jako v PHP, mohl bych něco jako-- let
mi, abych tento box o něco větší.
Stejně jako v PHP, mohl bych aby tohle-- oh, sakra.
No tak.
>> Stejně jako v PHP-- OK, budeme stačí použít předvádějícího poznámky.
Stejně jako v PHP, mohu dělat $ ["symbol"] Citace $ citovat,
a to mě dostane Hodnota "symbol."
V JavaScriptu, že to bude identické, čímž jsem si jen to udělat.
Jediná věc, která je chybí, je znak dolaru.
>> Tak dost dobře, pak, je tu není všechno, že mnoho nového syntaxe.
Takže to, co dnes jsme se zaměřili na, opravdu, je některé myšlenky a aplikací.
A první, jako aplikace, které by vás mohly
Viděl jste skočil do pokud pset seven už je tato syntaxe.
Takže pset sedm, pokud jste Viděl nebo neviděl to ještě,
vím, že tam je soubor, který dáváme jste volali config.json-- JavaScript
Object Notation.
Proč?
Chtěli jsme být schopni poskytnout vám šablony s některými dvojic klíč-hodnota.
Chtěli jsme být schopni dát vám seznam hostitele, název serveru.
Chtěli jsme, aby vám vzniku zástupný symbol pro vaše uživatelské jméno
a zástupný symbol pro heslo.
Pokud si nejste vidět to ještě, ne se bát.
Více na toto téma v pset sedmi [? spec. ?] A pak,
Je zřejmé, že chcete, vyplnit v na-DOS
protože když se přihlásíte do CS50 IDE, každý z vás
mít své vlastní uživatelské jméno a heslo.
>> Takže jsme mohli jsme použít půl tuctu nebo více různých formátů souborů.
Mohli jsme použili soubor TXT.
Mohli bychom použít soubor ve formátu CSV.
Mohli jsme použit INI soubor, soubor ve formátu XML,
celá parta další zkratky, které jste možná ještě nikdy neslyšel.
Je to trochu libovolný na konci dne.
Ale mimořádně populární v těchto dnech je text formát nazvaný JSON-- JavaScript Object
Notation-- že vypadá takto.
Je to trochu záhadný, nevšimnout vzory.
Začnete s otevřenou kudrnaté rovnátka, a vy skončíte s stejné.
Uvnitř to je něco.
Je to pár klíč-hodnota.
Takže to je objekt, který já jsem při pohledu na na obrazovce zde
že má jeden klíč, který má jednu hodnotu.
A právě odvozovat založen na předchozí model, jaký je klíč tady?
Databáze je věc levá tlustého střeva.
>> Nyní, hodnota se stane být A více řádků této době.
Ale hodnota začíná kudrnaté rovnátka a končí s složená závorka.
Takže to, co byste navrhovali je typ hodnoty databáze?
Slovník, nebo jen více stručně, objekt.
Je to tak?
To je druh datové struktury, které Můžete použít i jiné struktury v sobě.
Takže pokud celá ta věc, že ​​jsme svolat object-- a objekt
je jen banda klíč-hodnota pairs-- hodnota samotné databáze je objekt.
Hodnota databáze má spoustu klíčových párů hodnot, z nichž první
je hostitel, pojmenujte, a pak uživatelské jméno, pak heslo,
každý z jejichž hodnoty, zatím, je to jen nudný řetězec v uvozovkách.
>> Takže i když to není super jasný ještě ne,
vím, že to je jen standard, docela nudný způsob,
ukládání dat ve standardním formátu.
Ale společné chybách ktere jste zde by mohl dělat, a to iv pset sedm,
jsou malé hloupé věci, jako když náhodně vynechat čárku tam.
To bude mít za následek souboru ne nutně být čitelný.
Pokud omylem vynecháte věci, jako je citace, to nebude čitelný.
Takže je to docela nitpicky formát souboru, ale to je ten, který je mimořádně běžné.
A my náhodou používat, i když nechcete používat některý kódu JavaScript jinak,
V pset sedm.
>> Dobře.
Takže pamatujte tento obrázek.
Mluvili jsme o, v HTML, že kód může vypadat například takto.
To je HyperText Markup Language [Neslyšitelný] jen za "Hello, World".
Ale pak jsme navrhli zatímco zpět, že pokud to pomůže,
možná budete chtít začít přemýšlet o tom již jako strom.
Ve skutečnosti, že zářez používat jen pro čitelnost příčinu
nebo kvůli na styl je levá může druh
být přeložen do tohoto stromu, kde na vás mít nějaký speciální kořenový uzel, že budeme
druhově nazvaný dokument, pod níž je kořenem HTML element nebo tag, HTML,
který pak má dva děti, hlava a tělo.
>> A pak zase hlava má titul.
A titul má hodnotu textu.
A tělo má podobně jako textovou hodnotu.
Takže pokud vám vyhovuje přísloví že ano, mohl byste tento HTML
a nakreslit obrázek, jako je to je pravá strana
je pěkný mentální model, protože nyní že máme JavaScript, programování
jazyk, který prohlížečů provádět a interpretovat pro vás,
Ukazuje se, že to, co se chystáme udělat v kódu
se začne manipulovat tento stromová struktura v paměti.
Nemusíme budovat strom v paměti.
Nemusíme dělat druh Struktura datové pset-five-style
složitost.
Prohlížeč, pěkně dost, na tlumočení HTML shora dolů,
vlevo nebo vpravo, je doslova chystá ruka USA ekvivalent ukazatel
k tomu celý strom zdarma.
To dělá všechny tvrdé práce.
To je to, co Mozilla a Apple a jiní udělali pro nás.
>> A s JavaScript budeme být schopen ovládat a měnit a dělat
zajímavých věcí že strom, jinak známý
jako DOM nebo Document Object Model.
Jaké věci?
No, to ukáže, že v JavaScriptu, je tu
tento praní seznam události, které se mohou uskutečnit.
A my jsme opravdu používal to Slovo od týdne nulou a pset
nulu, když jsme mluvili o Scratch.
Většina z vás asi nepoužil událost ve vašem Scratch projektu.
Ale vy jste možná pamatujete jednoduché Marco Polo
Příkladem, kde jsme měli dvě skřítci, z nichž jeden z nich řekl, Marco.
Druhý z nichž pak po poslechu a slyšet, že události, řekl, Polo.
Pokud ne, neváhejte ohlédnout se, že daleko dozadu.
>> Ale to je jen proto, aby říkají, a můžete druh
vyvodit z názvů těchto věci, JavaScript, to dopadá,
se chystá dát nám způsob, jak poslouchat pro myš jít dolů nebo myší jít nahoru
klávesy nebo jít dolů, nebo klávesa jít nahoru nebo onsubmit onSelect
nebo onresizing něco.
Jinými slovy, jakýkoliv fyzikální působení že člověk může mít s prohlížečem
, co děláte každý den, můžete psát kód, který naslouchá na tyto události
a pak dělá něco vhodného.
>> Například, pokud používáte Google Maps, co se stane, když klepnete na tlačítko a přesunout
myši, obvykle?
Pokud klepnete na tlačítko a přetáhněte?
To jo?
Přesně tak.
Mapa začne pohybovat.
Takže můžete nějak vidět, co je sem, co je tam.
A jak to, že Google implementovat?
No, podle všeho, jsou to za použití pár těchto události
posluchači, jeden, který říká, poslouchejte, na myš
down-- takže když se uživatel fyzicky tlačí jeho trackpadu nebo jeho nebo její myš
dolů.
A pak hledáme něco jako pohyb
nebo některá jiná událost nám umožňuje zachytit odpor.
A ve skutečnosti, přetáhněte je podobně v tomto dot dot dot seznam možných voleb.
>> Takže to bude silný způsob, jak začít reagovat na uživateli
ještě předtím, než on nebo ona vlastně klikne něco jako explicitní odeslat.
Ale my chystá zavést pár témat se tam dostat.
Přechod ale nejprve, pojďme do určité aktuální kód.
Takže já jdu vpřed a otevřít dom-0,
což je velmi jednoduchý příklad zde, že když jsem se přiblížit jednoduše
má tento vstup tady na mě.
A já se do toho pusťte a zadejte "David" pro mé jméno a klepněte na tlačítko Odeslat.
>> A pak, i když nějak levně, I mají tuto výzvu, který se objeví, která říká,
"Ahoj, Davide!"
Takže to je druh Stejně jako naše "ahoj, svět"
že jsme udělali chvíli zpátky v C a dokonce v PHP, protože jsem dynamicky
výstup mé jméno.
Můžu dělat tu jméno někoho jiného.
Mohl jsem jednoduše změnit to, jako, Hannah, klepněte na tlačítko Odeslat.
A skutečně, ty malé pop-up změnám.
>> Nyní, pop-up jsou jedním z většina zneužívané vlastnosti webu.
A ve skutečnosti, v roce jednodenní pop-up blokátory
přišel do módy, protože vás by jít do nějaké website--
možná diskutabilní place-- že by pak náhle
začít zasypával obrazovky s celou partou pop-up okna.
A tak tato schopnost pop-up okna před uživatelem
nebyla zvlášť dobře přijat lidstva.
Takže to je důvod, proč jste vidět to zabránit věc,
který prostě dělá to celé ošklivé.
Takže budeme potřebovat lepší způsob, jak vyzvat uživatele.
Ale teď, to zdá se k práci.
Takže jen intuitivně, co Zdá se, že se to tady děje?
Jdu do toho a klikněte na tlačítko Odeslat, a pak se něco děje, jasně.
Ale to, co se nestane, že se stalo Minulý týden kdykoli kliknul jsem Odeslat?
Co se nestalo na obrazovce?
Litovat?
Obnovit.
Adresa URL nezměnil vůbec.
Řekl jsem, že to dom-0, a já jsem stále na DOM-0.
Za normálních okolností bychom se převléknout k některým jiný URL, jako register.php nebo podobně.
>> Ale i když jsem se odbýt tahle věc klepnutím na tlačítko OK,
Všimněte si, že adresu URL zůstává zcela dal.
A ve skutečnosti, když jsem trochu skeptický, dovolte mi, abych otevřít Chrome.
Dovolte mi, abych otevřít kartu Síť.
A všimněte si, že je to prázdný v tuto chvíli.
Nech mě jít dopředu a znovu Maria.
Neexistuje žádný síťový provoz vůbec.
Takže není HTTP.
>> Takže opravdu, když jsem se podívat do zdrojového kódu pro tohle-- dovolte mi, abych toto okno zavřít
a jít do zobrazení zdroj.
Zajímavé.
Vypadá to, že tam je nějaký Nové značky, mezi nimi i scénář.
Takže pojďme se podívat uvnitř CS50 IDE přesně to, co jsem poslal k uživateli.
>> Tak tady je-- pojďme se zaměřují pouze na HTML.
Zde je spodní polovina DOM-0.html.
A všimněte si, že to má titul, tag hlava, tělo značky, značka forma.
Ale to, co vyskočí na vás, jak různé, zvláště pokud jste nikdy
napsal jakýkoli JavaScript sami.
Dovolte mi, abych se trochu posunout k právě tady.
Mám vstup, další vstup pro odeslat.
Mám ID, který je tak trochu nové.
Ale my jsme se vidět s CSS.
Co jiného je určitě nového?
To jo?
Nice.
>> Dobře.
Takže tam, kde se říká onsubmit, Všimněte si, co se zdá následovat.
Toto je atribut HTML názvosloví.
Jeho hodnota je tento řetězec v uvozovkách tady.
A to vypadá trochu divný na první pohled.
Není to HTML.
Není to CSS.
To je, jak asi tušíte, JavaScript.
Takže se zdá, že vestavěný do toho webová stránka je funkce nazvaná pozdravit.
A já odvozovat, že právě protože je to slovo, pozdravit.
Má to otevřené závorka, zavřít paren, středník.
Vypadá to, že funkce C, vypadá jako funkce PHP.
>> A skutečně, to bude je funkce JavaScript.
Pak Vracím false.
Vrátíme se do že za chvíli.
Ale kde je tato funkce definována?
No dovolte mi, abych posouvat nahoru na začátek souboru.
A i když je to dlouhá fronta, je to poměrně jednoduché.
Dovolte mi, abych tady a oddálit zaměřit se na těchto čtyřech řádcích.
>> Takže v jazyce JavaScript, jen jako PHP, stačí
řekněme, doslovně, slovo "funkce" název funkce,
a pak závorek s jakýmkoliv arguments-- žádné argumenty v tomto případě.
A není to žádný typ návratu v JavaScriptu, stejně jako PHP.
Takže je to trochu volnější než C. Otevřená složená závorka, v blízkosti je složená závorka.
Zabudované do JavaScriptu je function-- nedoporučuje se function--
ale funkce nazvaná upozornění jejichž jediným účelem v životě
je vytáhnout, že docela ošklivý vyzve, že jsme viděli před chvílí.
>> Teď to je druh sousto.
Co se tam děje?
Takže pojďme začít zvýraznit tady všechno.
To je stejný argument upozornit.
A co se děje?
To jen vypadá jako řetězec.
A ukázalo se, na rozdíl od PHP a na rozdíl od C, nezáleží na tom, v JavaScriptu
pokud jste jednoduché uvozovky nebo dvojité uvozovky.
Budou rovnocenné.
A upřímně řečeno, je to jen populární v těchto dnech
pro programátory JavaScript vždy používat apostrofy z nějakého důvodu.
Je to jen věc.
Ale my jsme mohli použít uvozovek, stejně.
>> Tak a je nový znak.
Ale ti z vás, kteří jste udělal předtím, co to navíc znamená?
To jo.
Zřetězit.
Tak jsme to viděli v PHP.
Je tu jen tečka operátor v PHP, který
bude zřetězit dva řetězce dohromady.
C byla bolest v krku, jak to udělat.
Připomeňme z pset šesti, který byl Speciální, bolest v krku,
budete muset použít něco jako strcat
po přidělování paměti na zásobníku nebo haldy.
Museli jste proskočit obručí Jen zřetězit dva řetězce.
V JavaScriptu, je to super jednoduché.
Stačí použít operátor a navíc mezi nimi.
>> Takže komplexní vypadající věc se zdá, že je to
proto, že na konci Celý tento řetězec, jen jsem
zřetězit na vykřičníkem.
Takže pokud to, co se objevovat se "Dobrý den, David", "ahoj, Hannah,"
"Dobrý den, Maria," a tak dále, jasně že střední věc mezi dvěma
plusy mi musí dát přístup k čemu?
Co je tam pro jistotu?
To jo.
Takže budu tady předstírat odpoví své jméno, že jo?
Takže jejich jméno objevilo ve finále výsledek. Takže co to znamená?
No, jsem navrhl, že dříve v Obraz, který tzv DOM
má tento zvláštní kořenový element způsob up top s názvem dokumentu.
A teď se ukazuje, že se děje za zvláštní globální proměnná
v JavaScriptu, vestavěný do což je celá řada užitečných funkcí.
Mezi užitečné funkce je schopnost dostat za každou potomek uzlu.
Tyto čtverce či obdélníky nebo elipsy jsou jen uzlů ve stromu, abych tak řekl.
>> Tak to dopadá, že vestavěný do JavaScript je objekt dokumentu
je funkce, jinak známý jako metoda, která se nazývá getElementById.
Syntaxe pro volání funkce v JavaScriptu
že je uvnitř objektu nebo proměnná je právě s tečkové notace.
A my jsme viděli to v C jaký syntaxe struct.
Vidíte to v pset sedm, druh, druh, když vidíte CS50 :: dotazu.
Dvojtečka dvojtečka v PHP je další způsob volání funkce, která je
uvnitř nějakého objektu.
>> Ale teď v jazyce JavaScript, je to jen tečka.
A tak tato funkce, dost hezky, druh
říká, že to, co does-- dostat element ID.
Prvek je jen jiný název pro uzel etikety nebo v DOM.
A tak si prvek podle ID "jméno" znamená tohle-- tady je můj HTML.
A na základě této HTML, co uzel, nebo to, co HTML tag jsem já
bude programově být předán voláním document.getElementById?
>> Jo, přesně tak.
Chystám se dostat vstup element existuje, jehož ID je "název."
Takže konkrétně, můžete myslíte o této funkce,
getElementById, jako způsob, jak dát zpět ukazatel na tuto konkrétní uzel
ve stromu.
Ještě jsme to vypracovány strom, ale je to způsob, jak
jak získat přístup k této obdélník nebo že obdélník
by jednoznačně ji identifikovat pomocí jeho ID.
>> A teď, proč je to užitečné?
No, to dopadá že jakmile jste se dostali
že uzel, že obdélník od obrázek, že uzel uvnitř ní,
naopak, má spoustu párů properties-- klíč-hodnota
nebo data, z nichž jeden se nazývá hodnota.
Takže doslova, je to něco jako sousto vysvětlit celou věc.
Ale na konci dne, to vše dělá, je, aby vám
řetězec, který uživatel zadal V tomto hierarchicky.
Ale já nelíbí několik z těchto věcí.
Nebo spíš, je tu ještě nějaký zvědavost.
To vše se zdálo, že funguje.
Proč myslíte, že jsem se vrátil false po zavolání pozdravit?
To vypadá trochu ošklivé, že Mám dvě prohlášení zde
oddělené středníky.
Hádej.
Pokud bych odstranil return false, co Může se stát, prostě instinktivně?
Omlouváme se, ale ještě jednou?
>> Otevřete spoustu Windows.
Takže potenciálně možná něco jako že se to stane.
Co dalšího?
Možná podat žádost Kde?
Na stejné stránce.
Takže ve skutečnosti, že je to čím blíže odpovědět tady,
i když, na rozdíl od V minulosti jsem ne
zadán atribut akce, který normálně musíme udělat.
Ukázalo se, že je tu výchozí. Pokud nechcete určit akci,
to je jako říct nabídku, konec citátu nebo název souboru sám,
což by v tomto případě být jako dom-0.html.
Je to jen druh dovodil, nebo spíše implicitní.
>> A tak když se mi to udělat, pojďme si všimnout.
Dovolte mi, abych to zachránit.
A já jsem odstranil return false.
Nechte mě vrátit se k tomu příklad a sílu znovu načíst.
A jste mohli vidět mi navrhnout to na CS50 Diskutujte spoustu časů.
Pokud něco se někdy jedná funky a prohlížeč není chová podle očekávání,
často budete chtít držet Shift a potom klepněte na tlačítko Načíst znovu.
To bude nutit každý soubor znovu načíst a nesmějí používat ve svém prohlížeči mezipaměť místní
nebo kopii tak, že teď, nech mě jít dopředu a otevřou své Inspector na kartu Síť.
Budu klikněte Zachovat Přihlásit proto, že jsem
Nechceme, odstranit řádky Jednou jsem si odvedl pryč jinde.
>> Nech mě jít dopředu a tady zadejte Andi, klepněte na tlačítko Odeslat.
Dobře.
To vypadá, jak se očekávalo.
To říká, že "ahoj, Andi."
Dovolte mi, abych na tlačítko OK.
Zajímavé.
Všimněte si, že stránka změnila, i když na původní stránku.
Všimněte si URL druh změnil.
Dodala, otazník, což je obvykle indikátorem
že jsme se snažili předložit něco.
A pak se na dně, ještě jasněji,
Zde je aktuální požadavek HTTP, který má odezvu 200, které
přivedl mě sem.
>> Takže to není to, co chceme udělat, ne?
Protože nechci, aby znovu načíst celou stránku.
Místo toho jsem se chtěl vrátit false tak, aby se zkratu
výchozí chování prohlížeče, který byl, samozřejmě, aby předložila stránky.
>> Takže pojďme se podívat na okrajově lepší příklad.
To je dom verze jednou.
A všimněte si následující.
To je v pořádku, pokud nechcete Grok všechny řádků kódu.
Ale to, co je zásadně odlišný o tomto plnění?
Budu stanoví, že se chová Totéž, dělá totéž.
Co jsem zřejmě udělal jinak?
To jo?
>> Diváků: [Neslyšitelné].
DAVID Malan: Jo.
Takže funkce je definována differently-- jinými slovy, nepřítomných z formuláře,
tam nahoře na lince 7-- nebo spíše, linka 8-- již
mám tu onsubmit atribut.
V předchozím příkladu, měl jsem to.
A pak jsem doslova napsal můj kód zde.
A pak jsem řekl return false.
A pokud to nebylo třít jste ještě na špatnou cestu,
to by mělo začít, pokud as, stejně jako v HTML,
kdy jsme začali spolupracovat smísit ji s CSS v atributy stylu,
to právě začal trochu chaotický, nebo cítit trochu špatně.
>> Stejně tak zde, pokud začnete HTML,
a pak automaticky plop nějaký kód JavaScriptu
ve středu řetězec v uvozovkách, je to Nebude velmi udržovatelný.
Je to tak?
Není to ani zjevné na první pohled místo, kde je kód JavaScript je.
Tak to by bylo opravdu pěkné, jak princip lepšího designu,
pojďme se udržet naše HTML zcela oddělit od našeho JavaScript.
>> Takže k tomu, že to, co máme tady udělal je following--
jednoduše pomocí HTML pouze pro značkování.
A tak v provedení jedné z toho, vše Mám je forma s jedinečným ID.
A pak tady dole, jsem využil ze speciální funkci JavaScriptu
kterým můžu mít to, co je volal anonymní funkce.
Tak to dopadá, že když říkám document.getElementById o "demo"
to je jako, že mi ukazatel tento uzel v mém stromě, forma prvek,
abych tak řekl.
>> Teď, já jen vím od věděl, trochu HTML
teď jsme četli některé on-line reference, že forma prvek podporuje
celá parta akce v listeners-- Jinými slovy, seznam prádlo akce
posluchači, že jsme viděli před chvílí.
Vím, že při čtení dokumentace že onsubmit je platný událostí
posluchač na element formuláře.
>> Takže jakmile Vím, že, je to bezpečné pro mě
following-- dostat ten uzel ze stromu, forma prvek,
a přístup k jeho tzv onsubmit vlastnost.
Takže tečka prostě znamená, To je vlastnost,
jako zvláštní hodnoty uvnitř ní.
A jaký typ dat jsem já přiřazování, zdá se,
na onsubmit, což je účinně proměnnou uvnitř
tohoto uzlu ve stromu?
Je to pole uvnitř tohoto struct.
Jaký je datový typ?
>> Funkce, jo.
Tak to dopadá, že PHP má tento.
A i když jsme Neřekl vám o tom,
C má také ukazatele na funkce, o schopnost projít a přiřadit funkce
jak samotných hodnot proměnných.
A my nejdeme vracet se zpět na C.
Ale teď, se ukazuje, že Na pravé straně se zde,
i když to vypadá trochu funky, to znamená, hej prohlížeč,
dej mi funkci.
Nebudu se ani neobtěžoval dát to jméno, protože jsem doslova
chystá přiřadit nazvěme to adresa této funkce
okamžitě onsubmit.
Jinými slovy, prohlížeče, nepotřebujete vědět, co tato funkce se nazývá.
Musíte jen vědět, je-li v paměti.
A tak stačí jen proto, aby mají rovnítko tam
a nezatěžovat jmenovat to, jako foo nebo pozdravit nebo jakékoli jiné slovo.
A teď je to jen stylistický věc.
Mohl bych přesunout složená závorka na the-- sorry-- další řádek
jako my obvykle dělají CS50.
Ale v JavaScriptu, je to skutečně stylově obyčejný
jen držet složenou závorkou se První z nich, v tomto prvním řádku.
>> Ale dále, je tu nic zajímavého.
To open složená závorka jen vymezuje začátek mé funkce.
Funkce je nyní totožné, s výjimkou jsem
zahrnovaly return false uvnitř této funkce.
Vzhledem k tomu, že se otočí out-- A vy byste jen
vím, že to od čtení documentation--
že pokud funkci, kterou přiřadíte na onsubmit psovod vrátí hodnotu false,
prohlížeč prostě ví a souhlasí s tím, Není odeslat formulář na server.
Pokud se vrátí hodnotu true, bude předkládat že k serveru z důvodů, uvidíme,
jsou užitečné jen na chvíli.
>> A pak se po středník Kudrnatý rovnátka tam prostě
znamená, že jsem udělal definování funkce.
Víte, co máte co nejdříve zavolat jak uslyšíte podání.
Dobře.
To je stále pravděpodobně trochu ošklivé.
Takže co víc můžeme udělat?
>> No, to dopadá pak v verze dvě, což je last--
a my si jen pohled na to.
Na existuje nebezpečí, že to ošklivější, se ukazuje,
že je tu knihovna svět volal jQuery.
A jQuery je super populární knihovna JavaScript
to je tak populární, že většina jakýkoli JavaScript-- to není
neobvyklé pro lidi pletou jQuery s JavaScript.
Proč?
Samotný JavaScript má velmi verbose způsoby, jak dělat things--
document.getElementById, dadadadadada.
Můžete skončit s velmi dlouhých řádků kódu.
>> Takže chlapík jménem John Resid, kdo vlastně pracuje pro uvedení do provozu
up v těchto dnech, vyšel s touto knihovnou let
Před, že mnoho lidí přispělo k tzv jQuery, který mění
syntaxe v následujícím způsobem.
A jen tak jste viděli to, protože budete vždy
viz, pokud Doing závěrečný projekt web-based,
to by bylo ekvivalentní způsob kterým se provádí, že stejné funkce pomocí
Tato speciální knihovna.
>> Nyní, spíše než dráždit že od sebe v celém svém rozsahu,
ať to jen podívat na některé vzory.
Tato syntaxe vypadá, že má kolik anonymní funkce
nebo bezejmenných funkce nebo AKA lambda funkce?
Dva, jo?
A víte, že i v případě, nejste mimořádně pohodlné s tím,
jen tím, že skutečnost, že se říká, že funkce () dvakrát.
>> A ukázalo se, že co tento kód je doing--
a budeme odkazovat na on-line referencí, nakonec, o nějakou pomoc s tím.
To prostě znamená, že při Dokument je nyní připraven,
pokračovat a zaregistrovat následující funkce
jak předložit handler pro HTML prvek, jehož jedinečný nápad, je demo.
A pak, když se to stane, volat tyto dva řádky kódu.
A to je, tragicky, více verbose způsob, jak říkat return false.
A jsme zmínili to jen proto, uvidíte kód, jako je tento online.
A není to nic, aby se odradit.
Ale spíše, mějte na paměti, že to, co je Bude obyčejný v JavaScriptu
to je paradigma.
A tak to je důvod, proč jsme to ukázat nyní.
Dobře.
Takže bez obydlí příliš hodně na tom syntaxi,
jsou tam jsou nějaké otázky týkající Tyto příklady nebo nápady tak daleko?
Dobře.
Takže pojďme použít pro něco užitečného.
Tvorba webovou stránku, která prostě říká ahoj, tak a tak není všechno tak zajímavé,
ne chladným.
Ten to nebude být krásné, ale to bude dělat něco užitečného.
Nech mě jít zpátky do mého adresáře tady a otevřít, řekněme, form-0.html.
>> Takže předpokládám, že je to nováček intramurální sportovní registrační stránce
bez jakéhokoliv CSS nebo žádném smyslu designu.
A já chci, aby do toho pusťte a registrovat zde s heslem.
A budu souhlasit s podmínkami a podmínky, a klepněte na tlačítko Registrovat.
A nyní na internetových stránkách říká: "Jsi registrovaný! (No, ne tak docela.) "
To se zdá, jako by to fungovalo, ale nech mě jít napřed a donutit Znovu načíst.
>> A dovolte mi říci, ne, to ne potřebovat mou skutečnou e-mailovou adresu.
Nebo možná budeme jen říct, poštu tam.
Heslo bude, stejně jako, 12345.
A pak, právě proto, že jsem idiot, teď je to 123456789.
A já nebudu zkontrolovat políčko.
>> Hmm.
Dobře.
Takže tam je několik příležitostí pro zlepšení zde.
A ty víš, nebo budou vidět v pset seven, že můžete psát code--
a budete muset psát Kód v PHP-- na obranu
proti těmto druhům uživatele Chyby protože uživatel jasně
nespolupracovala.
A on nebo ona vám nedal všechny hodnoty jste chtěli, nebo dokonce ve formátu
že jste je chtěli.
Tak uvidíte v pset sedmi že bychom mohli jistě mít nějaké
pokud podmínky, které říkají, pokud e-mailovou adresu
není username@something.edu, Mohli bychom
omluvit a omluvit se uživateli hodně, stejně jako byste mohli být v pset sedm.
Anebo, pokud to není zaškrtnuta tu krabici, Ukazuje se v PHP, můžete zjistit, že,
příliš.
A určitě, pokud hesel neodpovídají jako v register.php
pro pset sedm, můžete zjistit, že.
Ale to je bolest v krk v tom, že teď si vyžádají
abychom šli celou cestu na server.
Uživatel je informován o chybě.
A alespoň pokud nepoužijete některé milovník techniky,
teď mají kliknout na šipku zpět.
Nebylo by hezké, jako mnoho internetových stránek dnes,
pokud jste měli více bezprostřední zpětná vazba, okamžitě?
>> Jinými slovy, nech mě jít na verzi člověk, který se chystá být hezčí.
Ale to přece má tuto funkci.
Malan, 12345, 123456789, nikoli chystá zaškrtněte políčko, Register.
Hesla se neshodují.
Takže i když to pop-up je ugly-- můžeme nahradit to nakonec
s něčím, jako bootstrap, které uvidíte v pset sedmi
je velmi populární library-- jsem udělal zjistí, že hesla se neshodují.
Dobře.
No, dovolte mi, abych opravit, že jako uživatel.
Nech mě jít dál a říct, 12345, 12345.
Stále není kontrola dohodu.
Musíte souhlasit s pravidla a podmínky.
Tak proč?
>> Pokud jsme již předpokládal že existuje způsob,
a my jsme vás požadováno pset sedmi odhalit chyby
podmínky, jako to server-side, proč bych měl
obtěžovat také dělá v JavaScriptu?
Co je to argument přízeň přidávání co
jste asi vidět, jak some-- je tu další složitost.
>> Možná, že není vzhůru.
Co by to mohlo být?
Diváků: [Neslyšitelné].
DAVID Malan: Oh, zajímavé.
Potenciální využije.
Takže si jistý, pokud si nejste manipulaci chybný vstup uživatele, který skvěle,
Možná je to všechno lepší, když to nedosahuje ani váš server.
Já bych tlačit tam a řekněme, asi byste měli
opravit oba tyto problémy.
Ale to je fér.
Co dalšího?
>> Diváků: [Neslyšitelné].
>> DAVID Malan: Jo.
Tento kód, jak jsme řekli dříve, je vykládány na straně klienta.
To neobtěžuje serveru, což znamená, že to není
vliv zatížení serveru nebo kapacity.
A teď, pro malá stará mě, nemá žádný podstatný vliv
proto, že mám jednoho uživatele právě teď.
>> Ale pokud jste některý Webové stránky slušné velikosti,
zejména největší, jako je Facebook, tím více můžete udržet lidi off
Vašeho serveru, tím lépe proto, že server, samozřejmě,
má pouze omezené množství paměti RAM, konečný počet gigahertzů,
konečný počet věcí to může udělat za jednotku času.
Takže pokud existuje více lidí v Svět bít váš server,
náhodně přihlášení nesprávně, stejně tak dobře, pokud vy
Můžete si tu zátěž z vašeho serveru.
Navíc, a to zejména na mobil device-- pokud jste někdy
přihlaste se nebo my.harvard Yaleův NetID nebo podobně,
Tam je to latence se spoustou webové stránky, jako to, kdy to bere,
jako, zatraceně vteřinu nebo dvě někdy.
A pak, Bože můj, pokud napíšete, pak musíte trefit zpět a znovu ji.
Takže tam je čekací doba, a to zejména na pomalejších připojení k síti.
Ale JavaScript, protože to běží na straně klienta
a nemusí jít tam a zpět přes potenciálně pomalý internet
připojení, můžete získat téměř okamžitá zpětná vazba.
>> Takže pojďme se podívat na to.
Dovolte mi, abych otevírají form-0 a podívejte se na HTML zde.
A ať to jen zjistit, co se děje.
Toto je forma, jejíž akce je register.php.
Já jsem jen pomocí se tak že jsem mohl vidět URL.
Ale pro hesla, bychom určitě chceme změnit tento post ve skutečnosti.
Zde je vstupní pole typu text.
Zde je další vstup pole zadejte heslo.
Tady je, pokud jste nikdy neviděli, vstup zaškrtávací políčko typu.
>> Ale není JavaScript tady vůbec.
To je jen, že HTML jde do register.php.
Ale v jedné verzi, kde jsem začal dostat ty pop-up,
pojďme se podívat, co se tu vlastně děje.
Ve verzi jedna, co Budu see-- I
Myslel jsem, že by mohl zastavit dost s dostatečným počtem slov, ale já běžel ven.
>> Ve verzi one-- tam jedeme.
Ve verzi jedna, všimnete following-- a není nejlepší provádění,
ale je to moje první.
Všimněte si, že pod forma, mám tag script.
A tag script znamená, hej, prohlížeč, zde
přijde nějaký kód, typicky, JavaScript.
A teď si všimněte, co dělám.
Na line-- mohu sotva číst to-- potrubím 32, říká,
var form-- tak mi dej proměnná s názvem formuláře.
A pak se document.getElementId "registrace".
Co je to?
No, dovolte mi, abych převíjení sem.
A upozornění, ach, já jsem dal tvarový prvek libovolný ale popisný nápad
registrace.
Tak to mi dává proměnnou, která mi umožňuje uchopit tento uzel,
že obdélník ve stromu s názvem formulář.
form.onsubmit prostředky, hej prohlížeč, zaregistrovat posluchače událostí
na tomto formuláři.
Jinými slovy, když tato forma je předloženy, spusťte následující kód.
To nepotřebuje jméno, protože Proč potřebujete znát název?
Musíte jen vědět, co vykonat, ergo
je to anonymní nebo lambda funkci.
A to je funkce , všechny tyto řádky zde.
A teď, abych byl upřímný, i když nemuselo kdy byla napsána JavaScript
předtím, je to jen C a PHP logiku.
Takže pokud form.email.value == "" - takže v případě, že e-mail pole prázdné,
křičet na uživatele s "Musíš poskytnout svou e-mailovou adresu. "
Else pokud form.password.value prázdné křičet na uživatele,
"Musíte zadat své heslo."
>> Zajímavější logicky, pokud není form.password.value
rovný form.confirmation.value-- kde se potvrzení pocházejí?
Dovolte mi, abych přetočit.
No, volal jsem tento vstup Pole zde heslo.
A tady Volal jsem tenhle potvrzení.
Mohl jsem to nazval Heslo dvou nebo cokoliv jiného.
Jenom logicky kontrolu že tyto dva jsou stejné.
Else-- to dopadá to je pan Boole again-- zaškrtávací políčko logickou hodnotu,.
Takže když řeknu, zvolání point-- pokud ne form.agreement.checked,
křičet na uživatele, jakož.
>> Takže tato syntaxe uvidíte, je velmi časté v JavaScriptu,
kde máte tuto formátu s tečkami.
Začnete s objektem zde.
Se ponoříte hlouběji do A do vlastnost jako heslo.
A pak se dostanete na jeho skutečné hodnotě.
A opět, tady je vstup.
Zde je název heslo.
A jeho hodnota je bez ohledu na člověk skutečně zadat.
>> Takže všechny tyto případy, jsem se vrátil false.
Ale pokud ne, vraťte mi pravda.
A tak teď vidíme přesvědčivé využití při
byste se vrátit false zastavit to, co uživatel dělá
a učinit ho, nebo jí vybrat znovu nebo zadejte znovu.
V opačném případě vrátíme true.
>> A dovolte mi představit jeden Druhá varianta z toho jen
na osivo z toho určité pochopení.
No, ve verzi 2 tohoto článku, form-2-- Udělám to s mávnutím ruky.
To je pro ty, zvědavý, verze jQuery,
ty z vás, kteří by mohli chtít fušovat v této konkrétní knihovny.
Ale pojďme start-- a nějaké otázky?
Dovolte mi, abych na chvíli pozastavit následujících důvodů to bylo rychlé a hodně.
>> Ale pěkná věc je, že všechny kódu je skoro stejný.
Nový materiál je to, co je dom?
Jaké jsou tyto obdélníky?
Jaké jsou tyto uzly?
Co je to anonymní funkce?
Co je to zpracování události?
Ale naštěstí, většina z toho je jen kruh od, řekněme, týden nula.
Dobře.
Takže něco trochu zajímavější?
No, v první řadě, nechte mě jít vpřed a otevřít Google Maps.
A všimněte si, že pro moment, na zlomek vteřiny,
Všimněte si, co se stane, když I klepněte na tlačítko dostatečně rychle.
A toto spojení na Harvardu, je tak rychle, že nemáte opravdu nevšiml.
Ale co tak nějak nějak vidět když jsem kliknout a táhnout opravdu rychle?
Ti z vás, sledování on-line, pokud se zpomalí toto rychlosti 0,5x,
můžete vidět lépe.
>> Co se děje právě Než jsem kliknul a táhl?
Zkusím here-- mě nech dělat něco jiného, ​​jako je 90210.
Pojďme daleko.
To byl opravdu rychlý, taky.
Jak se o Disney World?
Tam jedeme.
DOBŘE.
To, co jste viděl na zlomek sekundy?
Stejně, jako, náměstí, ne?
Zástupné znaky pro dlaždice?
>> No, co se to tady děje?
Mapy Google je pěkný příklad tato technologie, která se nazývá AJAX.
A to je místo, kde budeme začít použijte JavaScript v obzvláště
vyzývavý způsobem.
Zpět v den, tam byl Tato webová stránka s názvem MapQuest.
A já jsem měl přijato screenshot to z 1990,
kde, pokud jste chtěli vyhledat tady na mapě,
byste doslova klepněte na šipku up na vrcholu, který vám ukázal,
jiný čtverec mapy.
Pokud byste chtěli, aby pohyb doleva, ty klepnutí na šipku, která vám ukázal,
jiný čtverec mapy.
A některé webové stránky ještě udělat to dnes.
Ale i MapQuest dostal lepší, stejně jako Google Maps.
>> Místo toho, co je lepší tyto dny se webové stránky, které používají AJAX.
AJAX-- jinak známý jako Asynchronous JavaScript a XML,
což je jen fantazie způsob, jak říkat technologie nebo technika, která
umožňuje prohlížeč pomocí JavaScript provést další požadavky HTTP
poté, co byla stránka načtena.
Takže co to znamená?
No, bylo by to být laskavý otravné v Gmailu
pokud pokaždé, když chtěl zkontrolovat poštu,
jste se doslova hit Control-R nebo Command-R nebo klepněte na tlačítko Načíst znovu
a celý zatraceně stránka by se znovu načíst.
Je to tak?
To by blikat bílá asi za sekundu.
Ty by viděl hloupý progress bar.
A jen proto, aby zjistili, zda máte nový mailu, celé webové stránky a URL
jste na bude muset znovu načíst.
>> Ale to není to, co se děje v Gmailu.
Je to tak?
Když se dostanete nový e-mail do Gmail, co se děje na obrazovce?
To jen ukáže, že jo?
Je to jen zázrakem se zdá jako nový řádek v tabulce.
Že ve skutečnosti zahrnuje slušné množství složitosti.
Ve skutečnosti, pokud si myslíte, že o tohoto stromu, který, i když je jednoduchá zde
Gmail-- a já bych se podívat v kódu být sure--
má pravděpodobně tabulku HTML nebo možná neuspořádané seznam, který je činí
každý z vašich složek s doručenou poštou e-maily jako.
>> A tak, když si představíme to tam je strom v paměti, když jste
Gmail, který vypadá trochu druh takhle, když Google si uvědomuje, ooh,
máte nový e-mail, to není chcete přestavět celý strom.
Spíše to chce najít uzel v strom, který reprezentuje vaší schránky
a stačí vložit nový uzel.
>> Takže velmi podobný pset pět, kde na vás musel vložit uzly do hash tabulky,
Stejně tak dělá Google, prostřednictvím JavaScript kód, který to napsal,
Traverse tohoto stromu, zjistit, kde je, že e-mailové schránky části okna,
a pak vložte nový řádek.
A nový řádek právě znamená jeden nebo více nových uzlů ve stromu.
>> A tak AJAX, je tato technika , která umožňuje přesně to.
Poté, co jste navštívil URL, ale blázen dlouho to je,
a jakmile je stránka nahrán, můžete stále
odtáhnout více dat z internet-- ať už je to
e-mail nebo dlaždice z map-- chytit ji v zákulisí
a vložte ji do stránky tak, aby se lidská není opravdu
muset počkat na to.
>> Facebook Messenger funguje stejným způsobem.
Libovolný počet dalších websites-- oh, vlastně, i tento.
Myslím, že to je, upřímně řečeno, druh otravné mají v těchto dnech.
Mám-li začít hledat cats-- to je něco hrozného uživatelské zkušenosti.
Je to prostě začne vyhledávat pro mě.
No, co se to dělá?
Adresa URL se příliš nezměnil od té doby jsem začal psát.
Ale to, co se děje v celé EU wire-- OK, hmm zajímavé.
Co se to děje napříč drát tady prostě dostane divnější.
>> DOBŘE.
Tak nech mě jít dopředu a zkontrolujte element a přejděte na kartu Síť
a snaží se, aby to technické a méně o kočkách.
Jak jsem typ, a to doslova, kočky a-, co se děje
per-- Nebudu kliknout to.
Dobře.
Tak tady, co se děje každý když jsem zadejte znak, zřejmě?
Stejně jako, nízká úroveň?
Co se děje s každým z nich znaky Píšu na svou klávesnici?
To jo?
Diváků: [Neslyšitelné].
>> DAVID Malan: Přesně tak.
Každá z těchto postav je jít do Google, jeden po druhém.
Jsou budování řetězec na svém serveru, který představuje
všechno, co jsem napsal v tak daleko.
A pokaždé, když jsem typ další charakter, oni
používat jejich tajný recept z A vyhledávací algoritmus a přijít na to,
tím má na mysli tuto stránku kočka nebo tato kočka stránku nebo podobně?
Tak v určitém smyslu, že poskytuje mě s lepší zkušenosti v tom, že nemám ani
je třeba dokončit svůj myšlenku.
A skutečně, je to užitečný věc, automatického dokončování obecně.
Pokud se jejich algoritmy jsou dost dobré a jestli mé vyhledávání jsou dostatečně zřejmé,
Nemám zadejte celé slovo.
Chystají se mi říct, co to je, že jsem vlastně hledal.
Takže to, co Google nazývá instant vyhledávání jen pomocí AJAX,
pomocí kódu, který jim umožňuje požadovat dodatečný obsah pomocí webového prohlížeče
v zákulisí pomocí tohoto nový jazyk, JavaScript.
Takže máme pár minut odešel.
A dovolte mi zavolat můj kamarád Colton up na jeviště,
protože se zdálo, zejména zábava naposledy
zavést technologii že někteří z vás
vyjádřily zájem pro finální projekty.
Mysleli jsme si, že by bylo zábavné, aby up dobrovolník, i když, dnes
ukázat vám doplněk k to, že umožňuje vás-- jo,
Viděl jsem tuto hru jako první.
Pojď nahoru.
Velmi dobře.
Dobrá práce.
Chystám se na tomto projektu Na obrazovce se za chvíli.
Jaké je tvé jméno pro každého?
>> EFA: Jsem Efa.
>> DAVID Malan: Etha?
>> EFA: Efa.
>> DAVID Malan: Efa?
>> EFA: Jo.
>> DAVID Malan: Rád tě vidím.
Dobře.
Dovolte mi, abych si to připraven.
Pojď k střední s Colton zde.
Co Colton má ve svých rukou dnes je dálkové ovládání.
Takže spíše než jen tak stát v trojrozměrný svět rozhlížet
jako Colton udělal, teď Efa může vlastně chodit tím, že jde nahoru,
dolů, doleva a doprava se jako Nintendo nebo Xbox řadič.
EFA: Chystám se spadnout z pódia.
DAVID Malan: Budu stát zhruba sem.
Ale, že je zde riziko.
DOBŘE.
Takže jděte do toho a dát ti na.
Nech mě jít dopředu a přepněte na obrazovku zde.
Dovolte mi, abych ztlumit světla.
A Colton, dovolte mi, abych přijít stánek vedle vás.
>> Chcete vysvětlit zde s mikrofonem, co děláme?
Tady máš.
>> COLTON: Jistě.
Takže teď jsme naložení do Oculus,
Myslím, že není v provozu operating-- systém, ale hlavní program, kde
máte přístup ke všem hry a Aplikace, které jsou ve vaší knihovně.
Takže teď, měl by říci, klepněte na touchpad začít.
Touchpad to bude na na pravé straně headsetu.
Tak jděte do toho a tap--
EFA: Oh, člověče.
DAVID Malan: Jo, tam jdete.
Kvalita Efa je vidět je mnohem vyšší kvalita.
To je jen Wi-Fi zde.
COLTON: Takže to, co jste bude chtít dělat
je dívat se směrem nahoru pravé části obrazovky.
Jo, že hra na velmi horním rohu.
A pak, když jste výběru to, klepněte na touchpad znovu.
Myslím, že jeho Dreadhalls.
A pak je zde je-- sem, ať mi držet své brýle pro vás.
>> Tak jsem mu prostě dal regulátor.
Takže teď můžete ovládat hru.
Může se pohybovat a tak podobně.
Tak jděte do toho a podívejte se až na vrchol.
Měli byste vidět novou hru.
Tak jděte do toho a vy můžete udělat.
Nyní byste měli být schopni ovládat si s regulátorem,
také, jakmile Hra načte tady.
To může být trochu děsivé.
>> EFA: Teď mi řekněte.
DOBŘE.
>> COLTON: Dobře.
Takže potvrzují, že se můžete pohybovat kolem.
DOBŘE.
Můžete se pohybovat kolem.
Perfektní.
Takže když se podíváte dolů, máte mapu.
Mapa vám ukazuje, kde se právě nacházíte.
Můžete se podívat po místnosti.
Můžete úplně otočit.
Jo, přesně tak.
Otočit se.
>> Tak se podívejte na levé straně.
Myslím, že je to něco, co můžete vyzvednout na sudu v místnosti.
>> EFA: Jak mohu získat map z cesty?
COLTON: Najděte.
Stačí se podívat nahoru.
Dobře.
Tady máš.
Nyní jděte do toho a jen otočit.
Tak se podívejte dál na levé straně.
Pohybujte se doleva.
Dívej odešel.
Pokračuj.
To jo.
>> EFA: Oh, že cesta.
>> COLTON: Jo.
Procházka k ní s regulátorem.
Tady máš.
Teď to měl říct si ji vyzvednout.
Tady máš.
Vyzvednout.
Dobře.
Nyní, pojďme dostat z této místnosti.
Jděte do toho a chodit na ty dveře.
Takže se chystáte hold-- říká podržte tlačítko přinutit ji otevřít.
Tak jděte do toho a podržte tlačítko.
Jo, nutit to otevřít.
Dobře.
Dobrá práce.
Teď jdeme ven z místnosti.
Takže já jdu nechat zbytek nahoru pro vás a uvidíte, co zjistíte.
EFA: Já nejdu v temné místnosti.
OH Počkej.
Teď musím jít dolů temnou chodbu?
OK, já vracím [neslyšitelných].
COLTON: Dobře.
Některé další položky k vyzvednutí.
Vypadá to, že některé mince.
To je zámek pick.
Takže pokud zjistíte, zamčené dveře, můžete ho použít.
Jsi vyděšený?
>> EFA: Ještě ne.
COLTON: OK.
>> Pretend-- jo.
Jen předstírat, že jste ve skutečnosti tam stál.
A pokud se dáte around-- musíš se na to zvyknout.
Ale to má smysl.
DAVID Malan: A když Efa pokračuje hrát, protože jsme mohli udělat to celý den,
můžeme všichni tip-toe tady.
Ale máme další dva páry, pokud byste chtěli přijít a hrát.
Jinak budeme vidět příštím středu.
Děkuji našemu dobrovolníkovi dnes.
[APPLAUSE]
>> [MUSIC - "Seinfeld THEME"]
Reproduktor 1: No, já jsem uvedení nové PL namontovat.
Právě jsem změnil OLPF--
>> SPEAKER 2: Takže to, co přesně děláte?
>> Reproduktor 1: No, každý z these-- tady, ukážu vám to jeden v sem.
Můžete to vidět právě zde.
>> SPEAKER 3: Myslím, že jsem dobře s nimi.
Chcete víc?
>> SPEAKER 4: Ne, já jsem dobrý. [Neslyšitelný].
>> SPEAKER 3: No, [neslyšitelný].
Mají některé z nich.
Reproduktor 1: Různé barvy.
SPEAKER 2: OK.
Reproduktor 1: Takže nakonec to, co to dělá, je to upraví barvu of--