ALLISON Buchholtz-AU: Dobre všetci. Vitajte späť do sekcie. Je to naša predposledná sekcii. Je to tak smutné. Ja neviem, čo budem robiť bez videl vám chalani každý pondelok. Myslím, že by sme mali prostě-- Možno sme mohli len Stretávajú sa tu a na večeru alebo tak niečo. Neviem. Privediem namiesto toho jedlo. Budeme len hovoriť. Ale áno, bude budúci týždeň naše posledný úsek. V tomto oznámení, máte kvíz budúci týždeň. Viem, že som zabudol na robím, ako je, dva týždeň predbežné oznámenie minulý týždeň, ale dúfajme, že vy vedel, že to príde. Dúfajme, že to je jeden z posledných midterms pre vás na semester. Ale bude to pokryť všetky Materiál, ktorý sme prešli. Takže to nie je ako si môžete zabudnúť asi štyri slučky alebo premenné. Pretože sme sa dozvedeli tie, ktoré na začiatku, tie sú samozrejme fair hra pre váš kvíz. 

Je to bude rovnaký formát, rovnaký dĺžka, takže už sú na to zvyknutí. Tam to bude kódovanie problémy ručne, Možno, že niektorí true false, Možno, že niektorí krátka odpoveď. Takže by ste mali byť oboznámení s formátom, najmä ak užívate testy praxe. Ale ako hovorím tu, že je to kumulatívne, ale my sme rozhodne bude so zameraním na veci z šiestom týždni vpred. Takže sme to asi nebude sa vás opýtať, koľko bytov sú v každom type alebo tieto druhy vecí, ale my sme asi bude záujem o veciach, ako je spojových zoznamov, alebo rôzne dátové štruktúry, alebo rôzne algoritmy že sme hovorili. Takže sa uistite, že ste naozaj sa na tie, a ak máte potrebovať žiadne zdroje, tu je veľa zdrojov. Len som vám dal typ z rýchleho zoznamu tam. 

Budúci týždeň bude kvíz preskúma počas tejto doby. Takže ak máte nejaké otázky alebo osobitné témy, konkrétne veci na kvíz, ktorý by ste chceli prejsť, prosím pošlite mi je ešte čas, tak môžem druh pripraviť nejaký materiál na to. A okrem toho časť recenzie, budeme tiež sa drží kurz na úrovni preskúma, ako sme minule. A to bude vykonáva rovnakými ľuďmi. Nemyslím si, či to viete, je to lepšie alebo horšie, ale bude to byť ja, Hannah, Davan a Gabe znova. Takže ak si chcete prísť pozrieť nás všetkých škádlení navzájom a vás prevedie kvízu recenzie, mali by ste si určite keď na to príde budúci pondelok tiež. Takže budete mať len v pondelok uviaznutie balené preskúmania kvíz, čo je dobré pretože potom máte utorok spracovať cez všetko. 

Ale určite robiť check out týchto zdrojov. Study.csv.net je ďaleko, ja myslíte, že jedna z najužitočnejších, hlavne preto, že má veľa ukážkový kód, má všetku moc body so všetkými poznámkami na ňom, ktoré sú naozaj to, čo som kresliť najviac mojich sekcie materiálov z. Ak existuje niečo, čo v predchádzajúcich sekcie, ktoré som mohol rozposlali že nemusíte mať dostal, dajte mi vedieť. Rovnako ako minulý týždeň ukážke kódu, ak niekto nedostal to, Len ma e-mail alebo prísť so mnou hovoriť, a ja sa uistite sa, že ste si to. 

Takže s tým, dnes ideme bude hovoriť o JavaScripte. Tak sme tu Tommy, kto som len hovorím s tebou včera v noci. Milujem Tommyho. JavaScript je jeho obľúbený jazyk, ako sa tu hovorí. Budú snažiť a poviem vám, že je to nie je najlepšie, a budú zle. Takže Tommy je majster JavaScript. Nie som úplne v jeho úrovni, ale bol som rád, "Tommy, ako sa mám učiť Tieto deti JavaScript? " Tak som dostal niekoľko tipov, takže dúfajme, že vyjde. 

Takže pár vecí, ktoré by ste mali vedieť, je, že JavaScript je na strane klienta skriptovanie jazyk, takže vzhľadom k tomu, PHP je niečo, čo že sme zvažovali viac na strane servera, to bolo nahrať na server, zostavil a popravený tam. Ten je vykonaný na vlastnom stroji. OK? Takže si nahrať nejaké stránky JavaScript a to vykonáva na vašom počítači. Syntax je veľmi podobná C a PHP. Chystáme sa prejsť Niektoré príklady JavaScript a budete vidieť, že spôsob, ako hovoriť o premenných, cykly, a podmienky sú veľmi podobné. OK? Skutočnosť, že sú tak podobné je pravdepodobne bude na výlet niektorí z vás up, v niektorých prípadoch, len preto, že budete začleniť trochu C tam, kde by nemala byť. Možno, že si vyskúšať a niečo písať ak by nemal byť napísaný. 

A na to, že jedna vec je viem, je, že JavaScript je dynamicky napísaný jazyk, rovnako ako PHP. Takže ak vy spomenúť zo sekcie minulý týždeň, keď sme boli trochu robí Naše PHP rýchlokurz, sme videli, ako sa reťazec jeden mohol byť sa zmenil na int jedného, ​​a tak ďalej. Typ premennými sú stanovené v behu, takže sa môžu meniť v priebehu priebeh programu, a rovnakým spôsobom, že sa nikdy Naozaj deklarovať typy pre PHP premenných, budeme robiť to isté to tu, kde sme naozaj ovládanie typy našich premenných, aby som tak povedal, ako my v C. 

A potom jedna vec to je celkom v pohode, je že môžete error skontrolovať cez konzolu, s týmto veľkým funkciou console.log, ktorý umožňuje vytlačiť iný premenné alebo objekty, že budeme o čom hovoriť. Rovnako ako minulý týždeň, keď som bol ako: "použiť túto funkciu," s dump z vášho pset je to funkcia Ak chcete použiť, console.log. Bola som tak prekvapená, koľko študentov na pracovnú dobu nevedel o funkciu výpisu. A bol som rád, "chlapci, to bude aby váš život oveľa jednoduchší. " 

Dobre, takže to bolo trochu len stručný vec, ako vždy, máme príklady. Viem, že chlapci milujú tie. Tak tu je príklad veľmi súbor tu jednoduchý JavaScript. Takže to len tak pre vytvorenie Tento pop-up, ktorý hovorí, "Hello world", keď ťa vstúpiť na stránku, ale poďme pokúsiť sa prejsť týmto trochu. Tak samozrejme je to len ako normálny index.html. Takže, len naše normálne šablóny tu a máme HTML, máme hlavu, a rovnako ako u CSS, ako sme sa zahrnuté niektoré vonkajšie súbor, nie? Máme nejaký script type text, ktorý je JavaScript. A zdroj je hello.js, čo je tu dole. Jedná sa o celý súbor hello.js. A potom sme niektoré názov a niektoré body HTML že sa naozaj záleží. 

Čo sa stane, je, že keď sme túto stránku načítať, automaticky spustí tento skript. OK? Tak JavaScript bude spustiť automaticky. Tak čo to bude robiť, bude to okamžite ísť a spustiť to. A to bude hovoriť, "upozornenia. Hello world ". Čo alert je funkcia, ktorá vlastne generuje toto políčko. OK? Takže je to trochu všetko zahŕňalo. Nie je nič navyše sme mali k tomu okrem práve v strehu, a potom, čo sme chceli v našej výstražné okno. OK? Takže je to len super jednoduché príkladom toho, čo môže urobiť JavaScript. 

Jeden z naozaj cool veci, ako uvidíme, je to, že JavaScript umožňuje manipulovať svoje webové stránky, aby bolo nutné znovu im zakaždým. Takže ak máte want-- napríklad, ak sa vznášajúce sa nad niečím, ak vy niekedy Videl panely ponúk, alebo keď nabehnete nad niektorými tému, zobrazí sa ponuka Drop-down, je to preto, JavaScript. OK? Takže nie ste prekládky na celokrajné strana, aby si toto menu sa ukázať, ste práve hľadáte nejaké konkrétne akcie, ktorú užívateľ prijal, ktoré sa nazývajú udalosti, ktoré sa dostaneme do, a akonáhle zistíte, že ste povedal, "OK, upravovať niečo, čo na túto tému strana a aby to vyzerať inak, ale iba upraviť tieto konkrétne veci. Nepoužívajte znovu celú vec. " Tak to v skutočnosti je oveľa krajší, a nemusíte znovu načítať svoje stránky, a je to naozaj cool. 

Takže deklarácie premenných, takže si môžete trochu vidieť, Dal som na vrchole tu, voľne napísal. Tak to je veľmi podobne ako PHP. My nemusíme hovoriť JavaScript aký typ sme očakával každej z týchto premenných. Môžu to byť čokoľvek typy chceme. Tak zistíte, v tomto prípade, prehlasujeme je veľmi jednoducho, len s "var" a potom, čo chceme náš názov premennej byť. Jedna vec k poznámke je, že keď vás dať var pred názvu premennej, to lokálne rozsahov adries to. OK? Je to absolútne rozumné pre vás úplne stačí vymazať var a proste sa s rovná CS50, a že bude len globálne premenné. OK? Takže si môžete inicializovať oba spôsoby, záleží len na tom, ako budete chcieť. Takže ak ste inicializácia to v rámci funkcie, a chcete, aby premenné pobyt rozsahom v tejto funkcii, budete chcieť robiť niečo ako var názov premennej, proti, ak ho chcete globálne rozsahom, vy môže urobiť len názov variabilné a potom čo by ste chceli, že rovná. OK? 

To je celkom fajn vec tu dole, pretože ak sme si všimli naše premenná b začína ako pravdivé. A čo to môže does-- mi niekto povedať, čo to robí? Takže máme nejaký záznam. Čo by typ B sa na začiatku? Divákov: Boolean. ALLISON Buchholtz-AU: Boolean. Správne. A potom sme sa preradiť B do tohto reťazca, nie? Takže tu, aký typ B musí byť? Bolo by to reťazec, nie? Takže to, čo je dôležité, aby oznámenia je, že v C, my skoro nikdy robiť niečo také. Museli by sme mať premennú, cast to ako niečo iné, možno urobiť nejakú funkciu s dvoma i, ísť od poplatku na celé číslo. Ale keď si všimneme tu, b Veľmi ľahko sa mení typ. 

Publikum: Počkaj, takže stačí vyzerať, "robiť b celé číslo?" 

ALLISON Buchholtz-AU: Jo. Stačí si len priradiť b na celé číslo. 

Divákov: Naozaj? 

ALLISON Buchholtz-AU: Jo. A potom by bolo int. Takže vaše premennej možno zmeniť po priebeh programu tiež. Oni nie sú striktne zadali. Je to veľmi voľne zadali. OK? V podstate svoje premenné môžu robiť, čo chcú, ako sme trochu videli s PHP. Môžu urobiť nejaké šialené veci, tak je dôležité, aby bolo dosť opatrný. Pomenujte svoje premenné dobre. Ak nie, naraz budete vyzerať, "Počkaj, myslel som, že to bol reťazec, a teraz je to int, a ja si nie som úplne istý to, čo sa tu deje. " Tak to je len jednoduchý príklad ukazuje, ako premenná môže ľahko zmeniť jeho typ nad priebeh programu. 

OK. Tak by to malo vyzerať super, super známy. Tak to sú naše slučky v JavaScripte. Tie sú presne rovnaké, s výnimkou namiesto štyroch int i rovná nule, môžeme len povedať var i sa rovná nule. A potom by sme mohli mať naši rovnaký druh kondície, rovnaký druh aktualizácie, i a navyše funguje v pohode. Takže štvorky sú rovnaké, chvíle sú rovnaké, a to chvíle sú presne rovnaké. Rovnaký druh všeobecného formátu. Všimli sme si, štyri, zátvorky, konzola, je to všetko rovnaké. Tiež tam bude bodkočiarka keď sa dostaneme na príklad kódu. Uvidíte, že je to celkom podobne ako c. 

Pre deklarácie funkcie, opäť, veľmi podobné. Máme nejakú funkciu, ktorá hovorí, že je to funkcia, a potom sa názov nášho funkcie, a vstupy. A znova, ak si všimneme, my mať žiadne typy tu vôbec. Je to tak? Sme nič, čo by táto porekadlá musí byť ints či dvojlôžkové, alebo pláva. Mohli by byť, čo chcú. Čo je dôležité, je si všimol, že musíme napísať funkciu vopred aby JavaScript vedieť, že To je vlastne funkcia. 

Tak to je len nejaký prostý súčet Funkcia, ktorá vracia x alebo y, a potom, čo je tiež v pohode je to, že môžete skutočne priradenie funkcie k premennej. Takže v tomto prípade súčet je teraz funkcia, ktorá vlastne robí súčet. Takže ak si všimnete tu, máme funkcie, názov funkcie, vstupy. Je to tak? Tu proste funkcie a vstupy. Tak tomu sa hovorí anonymný funkcie. A to je niečo, čo by malo byť nové pre väčšinu z vás, ak nie všetky. Takže v podstate, čo to znamená, že my nie treba na meno nášho Funkcia v tomto prípade. Môžeme len povedať, "OK, budem túto funkciu, ktorá spustí, tu sú jeho vstupy, a tu je čo to bude robiť. " A zvlášť, keď ste priraďovanie funkcia nejaké premenné že budete manipulovať, nemusíte nutne treba pomenovať, pretože budete sa odkazuje jej touto premennou názov, nie čokoľvek funkcia bola vlastne volal. OK? 

Takže ak vidíme tu, my nejaké premenné súčet teraz ktorá sa rovná súčet z troch a piatich. A my by sme si to. A to by sa proste mať nejaký záznam, tri plus päť rovná počtu. To navyše bude len spájať bez ohľadu na našu odpoveď bola na reťazce. Tiež v pohode, navyše môžu spájať reťazca. 

Pre JavaScript, as s PHP, HTML, CSS a ako sme povedali, Veľa z toho, že sme druh prevziať školiace kolesá off tu a vy máte veľa know ako skutočne pochopiť tieto veci. Sú mierne odlišné, ale nie sú tak cudzie a že nemôžete Googlu veci alebo je vyhľadať on-line na W3 školami. A my vám naozaj očakávajú chalani, druh, experiment a učiť sa na vlastnú päsť. Takže viem, že sa to môže zdať trochu menej dôkladné ako niektoré z vecí, c urobíme, ale to je v skutočnosti z nejakého dôvodu. Ale dúfajme, že to nie je príliš odlišný, a to nie je ohromujúci. 

Takže polia v JavaScripte, opäť veľmi, veľmi podobné. Je to tak? Máme nejaké premenné typu pole to sa rovná prázdne zátvorky, a to je len prázdne polia. To je často nazývaný doslovný poľa notácie. To je len jedna vec, ktorú sme jej zavolať. Vidíme Ak pole dvaja tu, máme nejaké doslovný matice, ktorá má tri elementy, že jo? A potom sme niektoré var tretí prvok, ktorý je niektorí premenná, ktorá je práve bude držať tento reťazec, JS. 

Prvky, dobré všímať, sú oddelené čiarkou, rovnako ako by sme očakávali. A tiež môžete k nim pristupovať, ako sme to urobili v C, s týmto indexom notáciu, že jo? Tak odlišné od PHP Teraz sa vraciame sa len tak na mysli k veciam indexom. Rovnako ako C, je to tiež nulový index. Mám pocit, že by bolo naozaj kruté v prípade, že zrazu sa jeden JavaScript index, a vy ste museli úplne premyslieť, ako si myslíte, že o pole. 

Jedna skvelá vec je, že miesto mať, ak vás niekedy do-- Chcel dĺžku poľa, Možno ste iterovat cez to kým nenájdete nejaký koniec, alebo by ste len viem, čo to je. Vzhľadom k tomu, JavaScript je veľmi voľná viac spôsoby, ako len typom, ako ich vidíme tu, môžeme len túto poľa väčšie, pretože sme sa rozhodli. Keď sme si všimli poľa tri má tri veci začať, ale potom zrazu, sme radi, "oh, len srandu. Sme vlastne bude Aby to bolo 101 vecí. " Takže ak ste niekedy chceli vedieť Skutočná dĺžka vášho poľa, vám to takto. A budeme vidieť veľa tohto zápisu v príkladoch, ale JavaScript to je typicky čokoľvek Objekt, ktorý hovoríš dot bez ohľadu na druh funkcie ktorý chcete použiť na to. OK? 

Takže v tomto prípade, náš Objekt je pole dve, a hovoríme, že chceme Dĺžka poľa dvoch. Takže to len žiada, aby ako dĺžke na to. A to sa vrátiť dĺžku. Tiež niečo poznamenať, že ak si všimneme naše polia, na rozdiel od C, nemajú byť všetky rovnakého typu. To je oveľa viac ako PHP. JavaScript je v podstate len ako tento zaujímavý splynutie C a PHP. Tak sme to dostať sa do toho. Pre túto chvíľu, poďme len predpokladať, že vaše polia sú v podstate C ako pole, v tom sú nulové indexované. OK, tak to je všetko. Môžete tiež len rozšíriť pole na čokoľvek index chcete. Vzhľadom k tomu, to by sa asi SEG porucha na vás alebo vám niektoré chyby, JavaScript je ako, "Nie, to je v poriadku. Mám to. Jednoducho ísť rovno kam chcete. " 

OK, takže objekty sú veľmi dôležité. Vy bude používať veľa z nich v P setu, ak si dobre pamätám. Takže vec, že ​​sa jedná o podobne ako v C sú Štruktúry. Takže si môžete myslieť about-- pri ideme na príklade doprava po tomto Myslím, že to urobiť oveľa viac sense-- ale v podstate používať objekty na organizovať informácie k výkladu. Keď sme hovorili o structs v C, často hovoriť o študenta, ktorý mal nejaký názov, ID, house, vieš, sústredenie. A to je trochu to isté že používame objekty tu. Je to len organizovať podobné informácie. 

Môžete si tiež myslíte, že z nich as viac podobne ako asociatívne pole v PHP. Tak to by bolo trochu veci kde nejaký kľúč s určitou hodnotou, veľmi podobný PHP. Takže si môžete inicializovať niektoré prázdny objekt, ako vidíme tu, Len s zložených zátvoriek. Takže polia sú hranaté zátvorky. Prázdne objekty sú zložené zátvorky. Dobré rozlíšenie mať. A to sú len dva rôzne spôsoby, ako nastaviť vlastnosti. Tak toto je druh oveľa viac, aby je podobný PHP, s našimi asociatívne pole, s naším kľúčom, a naše hodnoty, pričom tohle je-- budete vidieť oveľa viac v JavaScripte. To býva konvencie. A rovnakým spôsobom, ako sme to urobili array dva dot dĺžka, to hovorí, "OK, daj mi to atribút tohto objektu. " Je to tak? Takže rovnako to bolo, "daj mi dĺžka atribút pole dvoch, " to hovorí, "daj mi trochu vlastnosť nášho prázdneho objektu. " Alebo v tomto prípade sme priradenie do určitej hodnoty tu. Ale môžete tiež pristupovať to tak. 

A potom tu je to len ukazuje dva rôzne výstrahy. Tak toto by sa ukázať upozornenie bude presne rovnaký, je to len dva rôzne spôsoby prístup prvok, ktorý chceme. Znamená to, že zmysel pre každého? Mám pocit, že tento asi dáva väčší zmysel, len preto, že ideme preč PHP. Ale ako sme urobiť viac príkladov, to je doslova presne rovnaké. Veľa z toho je len zmeniť v syntaxi. 

OK, tak príklady. Milujem príklady. Takže tu je nejaký CS50 premenná, ktorá je objekt, a ukladáme všetko informácie o ňom. Takže máme ihrisko, inštruktor, TFS, psets, a prelepený páskou. A tak sme si všimli to sú takmer všetkých rôznych typov. Je to tak? Takže objekty je možné uložiť atribútov rôznych typov. My môžeme myslieť na tohle-- je to veľmi obdoba našej asociatívne polia v PHP. Takže kľúč, hodnota, kľúč, hodnota, kľúč, hodnota, tak ďalej a tak ďalej. Čo je zaujímavé rovnakým spôsobom že môžeme mať pole vnútri poľa, môžeme mať aj objekty vnútri vnútri objektov, objekty, alebo skupiny. Ty nikdy obmedzený len jediný z vecí. Môžeme dostať veľmi Inceptionesque, len ďalej do králičie nory tam. 

Takže ak sme si všimli, my mať nejaký kurz, ktorý je reťazec, inštruktor, že je to reťazec, a polia, int, a logická. Takže všetky tieto rôzne veci. 

Dobre, takže máme ešte jeden. Takže v tomto prípade máme pole objektov. Tak ako objekt môže mať pole v ňom. Môžeme tiež polia objektov. To môže byť užitočné pre premýšľať o podobný druh o tom, ako sme mali hash stôl, sme mali polia všetkých týchto rôznych druhy, ktoré structs boli ukazovatele na iný uzly a ktovie čo ešte. Ale v tomto prípade sme majú celý rad objektov. Takže toto je ako pole asociatívneho poľa. Takže máme nejaké prvý prvok by je objekt s názvom James a dom Winthrop. 

Vy možno spomínate niečo veľmi podobné tomu s poslednou pset, kde, ak vás vytiahol niečo z databázy, Prvý druh vec vo vašom poli bol všetky informácie o Prvý užívateľ, ktorý ju stretol, a potom ste mali na index do toho dostať svoje akcie alebo ich vyrovnávaciu pamäť alebo ktovie čo ešte. Tak to je veľmi rovnaký vec, len malá zmena v syntaxi, trochu zmena slová, ktoré používame na ich popisu. 

Takže ak by sme chceli, môže niekto povedať, me, čo to v strehu by to tu? Alebo čo to kúsok code by to pre nás? Divákov: Bude vám všetky mená. ALLISON Buchholtz-AU: Right, tak to by som len upozorniť všetky názvy pretože by to prejsť chalupa aj, tak to by som začať od nuly. Tak to by som, OK pozeráme v tejto prvej predmet, ktorý je prvá drážka v našom poli. A to hovorí, "daj mi atribútu, názov tohto objektu. " Tak sme sa ísť sem, mali by sme scan, by sme si meno, a my by sme vytlačiť James Molly, a Carl. Akékoľvek otázky tak ďaleko? JavaScript bohužiaľ ty budeš robí veľa, ako sa pozerať na vašom vlastné, zisťuje, syntax, stretávajú s ním. Ale samozrejme, že som stále tu, úradné hodiny sú vždy tu. Mohol by som byť v utorok tento týždeň. Takže keď už tam budete, ak je to možné prišiel ma navštíviť tento týždeň. Bolo by to skvelé. 

OK, takže DOM je Document-Object Model. Tak to je len spôsob, ako že sme radi, že O tom, ako naše HTML a všetko vnútri je organizovaná. To je moc niečo, čo bude pravdepodobne prísť na vašom teste. Viem, že môj rok, to bolo ako tu HTML súbor, vyplniť DOM za to. A stačí vyplniť maličkostí. Tie by mali byť jednoduché body nádejne. Dúfam, že budete see-- 

Divákov: [nepočuteľné] 

ALLISON Buchholtz-AU: Tak vidíte tento strom tu? 

Divákov: Áno. 

ALLISON Buchholtz-AU: Takže sa bude pýtať použitie vyplniť, čo sa deje pod telom. Možno, že v tele, sme niektoré divs alebo máme nejaké body, a budeme vás požiadať, aby ste vyplniť strom veľmi podobne ako to. Takže budeme chodiť cez to. Takže Document Object- Model je len spôsob, ako štruktúrovať a premýšľať o našom HTML graficky. A tiež keď sa dostaneme do viac JavaScriptu to bude Spôsob, akým sme vlastne manipulovať iný prvky na stránke. Potrebujeme spôsob prístupu k jednotlivým z vecí, ktoré v našom HTML, a tak to nám dáva veľmi betón štandardizovaný spôsob v rôznych webových stránok, k tomu, že. 

Takže ak sme práve prejsť to tu, samozrejme náš dokument je ako celý náš súbor. To samozrejme dáva zmysel že je to najvyššia vec, a potom máme aktuálne HTML, ktorá zodpovedá tejto značky tu. Tiež ak ste v zarážka tagy správne, potom vytvorením tejto DOM stromu sa stáva super jednoduché. Takže máme nejakú hlavu tu. Máme nejaké telo, ktoré vidíme vyplývajú mimo HTML, čo je dôvod, prečo máme hlavu a telo. V hlave, sme niektoré názov značky, názov značky koniec, takže vieme, že prichádza po hlave. A v našom názve značky, máme Hello, world. OK? Tak to je celá tá ľavá vetva ruka. A potom sa na pravej vetve Tu vidíme, že máme HTML, OK sme urobili túto opierka hlavy, pozeráme len na telo, takže máme nejaké časti tela. A v to, jediný vec, ktorú máme, je ahoj, svet. OK? Ak by sme mali veci ako niektorí držiak p a potom ahoj, svet, a potom ďalšie držiak p Goodbye, svet, budeme mať dve bubliny spadnutie tu. Vzhľadom k tomu, že sú obaja pod telom, ale sú to samostatné odseky tomto prípade. Tam je určite prax na ktoré v predchádzajúcich kvízy, rovnako ako kopa on-line na to. OK, takže to jednoducho nechá uvidíme, všetko pekne a manipulovať veci veľmi systematicky. OK? Vieme presne, ako prejsť cez tohto stromu, takže vieme, čo chceme získať prístup. 

OK, takže to je dôvod, prečo chceme aby tento druh modelu, takže môžeme použiť veci, ako je toto, a my sme pochopili, čo znamenajú, a oni sú štandardizované vo všetkých veciach, ktoré robíme. Takže názov dokumentu bodka je len Názov our-- všetkých týchto sú celkom samozrejmý, Rád si myslím. Takže prvé tri príklady sú len hovorím, "OK, daj mi Názov tejto webovej stránky. " Tak to vám dá to, čo zodpovedá názvu. 

Dokument dot telo sa bude dať čo je v rámci týchto telesných značky. Takže môžete manipulovať, že. A dokument dot telo dot zadajte HTML je veľmi kľuďas, a možno nie je ako výborný intuitívne, ale vnútorná HTML zodpovedá Toto právo je tu. Takže ak ste niekedy chceli, aby manipulovať textu na stránke, obvykle budete robiť niečo body bodkou vnútornej HTML. OK? Takže vnútorný HTML tendenciu odkazovať na to, čo je vlastne medzi týmito značkami. OK? A potom užitočné funkcie. Takže ak by ste chceli získať niektoré z nich, akýkoľvek prvok, máme nejaký preukaz, trieda meno, alebo názov tag. To je veľmi podobné veci, ktoré sme robili s CSS, že jo? Tam, kde máme nejaké voliča, že zodpovedajú buď tag, trieda že sme sa im, alebo ID. To je veľmi veľa rovnaký cesta. Ak máte niečo, čo má nejakú triedu psa, a hovoríte si prvky podľa názvu značky, a dáte psa v there-- alebo ľúto, názov triedy. Môžete dať bodku tam. Bude to vrátiť všetky tie, prvky, sa vám, že majú túto triedu. Takže môžete manipulovať len tie. Rovnakým spôsobom, možno len chcú manipulovať nejakú hlavičku, tak niektorí h1 hlavičky, ako my. Dalo by sa dostať prvky podľa značiek meno, pretože h1 je menovka. A rovnakým spôsobom, ak chcete získať niektoré unikátne vec, môžete tak urobiť get značku. Získajte element Id. A oni sú vlastne veľa z nich. Sú to len ako tri veľmi veľa. Takže ak ste online, as Budem podporovať budete robiť, a robiť nejaké výskum na vlastnú päsť, Určite odporúčam hľadá do všetkých z nich. Mohli by byť super užitočné, najmä keď Ak chcete len trochu manipulovať veľmi špecifické veci, bez toho, aby bolo prejsť a vyskúšať vyradil všetko. 

OK, takže posledná vec je JavaScript udalosti. Takže keď som hovoril skôr takhle ísť na webové stránky, a keď najazdíte nad niečím, alebo presuniete kurzor myši nad niečím, niečo stane. To je to, čo sme chceli premýšľať o tom, ako udalosť. Takže to, čo máme, ktoré by mohli byť užitočné, tu je onclick. Takže môj bol na visenie, ktorý som si istý, že je len na visu. Aj ton z nich ktoré môžete hľadať. K dispozícii je celý zoznam on-line rôznych vecí ktoré môžete počúvať. 

Udalosti ale JavaScript sú v podstate len reagovať na veci že používateľ robí. Je to tak? Takže vaše užívateľ nemá niečo, to je udalosť, a JavaScript bude reagovať však sa vám to bude páčiť. To bude reagovať zodpovedajúcim spôsobom. Takže v tomto prípade máme niektoré okno dot onload. Tak čo to hovorí, je "počkať kým naložený okno je. " OK? Takže keď všetko je naložený, onload, potom môžete spustiť túto funkciu. Takže keď je všetko načítaný, ideš mať nejaké tlačidlo Hľadať že dostane prvok Id, a tlačí čo to element je ako tlačidlo Hľadať. A potom tu máme premennú, hovoríme: "OK, onclick." Takže keď počujeme cvaknutie na tlačidlo Hľadať, vykonávať túto funkciu, ktorá je v strehu, ste klikli na tlačidlo Hľadať. 

Takže to, čo sa stane, je-- je to pekný Trochu grafické znázornenie tu. Takže naše zaťaženie dokumentov, to je naša onload, nájdeme naše hľadanie tlačidlo, ktoré je táto. Hľadáme pre naše tlačidlo Hľadať. A potom, keď tlačidlo Search je kliknutí, to zodpovedá práve tu. Onclick. Potom sme sa konečne varovať našich užívateľov, čo je to posledný riadok tu. OK? Takže každý z týchto štyroch krokov len odpovedá štyri boxy tam na dne. Znamená to, že zmysel pre každého? 

A potom jedna vec, ktorú som jednoducho ísť spomenúť veľmi, veľmi krátko, aby som Odporúčame vám chlapci ísť pozrieť viac do je jQuery, čo je práve knižnica ktorý je postavený na vrchole JavaScript. Je mimoriadne užitočné, pretože s väčšinou knižníc. Existuje veľa funkcií. Takže v prípade, že je vôbec niečo, čo Ak chcete urobiť v JavaScripte, váš prvý inštinkt by nemalo byť, že o, mal by ", akú funkciu Aj kód? "By to malo byť, "Ukážte mi niekoho je to už urobil pre mňa. " Vzhľadom k tomu, v deviatich prípadoch z desiatich, niekto to urobil už, a pravdepodobne to urobil lepšie. Ľudia trávia veľa času robiť tieto, a JavaScript sa veľmi často používa, takže ľudia sú stále sa snažia, aby to lepšie. A jQuery má veľa funkcií že bude pravdepodobne užitočné pre vás v konečnom projektu, ak ste robiť niečo s web design. Ako som chcel povedať, "práca múdrejší, nie viac. " Ak vy urobíte, bude to skvelé. Keď sme u hackathon vôbec sa mi nepáči Chceme, aby ste sa všetci v strese. Chcem, aby si bol rád, "mám tohle. jQuery je mám chrbát. Nepotrebujem písať tieto funkcie. " 

Takže len dve veci pamätajte, že idem aby si chlapci vyzerať do jQuery na vlastnú päsť. Všetko, čo som ti chcel povedať, je to robí niektoré docela úžasné veci a môže váš život oveľa jednoduchšie. Ale to, čo chcete mám, je, čo súbor že budete používať ju, budete chcieť tieto dva riadky. Budete chcieť skript JS jQuery dot JS. A vlastne váš zdroj bude nejaké URL. Ak ste na Googli jQuery, Google vlastne hosťuje všetky súbory pre vás. Takže si určite chcieť vstup, ktorý jej URL. Len som si to tu Pre jednoduchosť. To všetko znamená, ak je k nájsť knižnicu jQuery. Je to masívny, takže nechcete hostiť na vašom vlastnom počítači ak môžete vyhnúť, čo je dôvod, prečo sme majú tendenciu len dať do URL, Google, že hosťuje všetky tieto súbory pre vás. OK? Google vám to, sľubujem to tam bude. 

A potom čokoľvek JavaScript súbor, ktorý ste použitie, takže je to len nejaký externý JavaScript súbor, ktorý používate. Rovnakým spôsobom, akým odkaz na CSS súbory, je to rovnaký druh veci. To len odkazy na súbor kde sa vaše JavaScript je. A mám niekoľko príkladov s jednoduchým JavaScript. Takže pôjdeme cez to. A potom sa v indexe JavaScript čo je súbor Sem napíšte JavaScript To je druh obalu že máte na jQuery. Si skoro 99,9 percent času deje aby to do index.js súboru. Vzhľadom k tomu, čo to hovorí sa, "Nespustiť nič kým dokument je v skutočnosti ready ", čo je presne to, čo chcete. Vzhľadom k tomu, keď váš dokument nie je pripravený, a jQuery začne robiť veci, je to len zmätok. Takže ste vždy chcú mať tento obal. A potom sa na veci, ktoré idú tam, I ponechávajú vlastnú študoval vašich chlapci. 

OK, takže sú tam nejaké otázky vpravo Teraz o JavaScript všeobecne? Alebo modelu DOM? Ak tomu tak nie je, sme niektoré pohode príklady, ktoré môžeme prejsť, že vy mi môže pomôcť kód. Ale ja som tiež bude Super pekné, a ak máte nechcem nič hovoriť pre tých, to je v poriadku. Môžem tiež len dať príklady. Ale niečo na PowerPoint, než sme ďalej? Super. 

Mám pocit, že vy potrebujete energiu. Takže si myslím, že budeme na začiatok s mojím napríklad strany prvej. Máme tri príklady, máte možnosť voľby. Takže máme hodiny, kam ideme, zaviesť skutočné hodiny, ktoré je bude aktualizovať, ako plynie čas. Máme túto skvelú funkciu Twitter. Tohle-- vieš čo, vydrž. Chystáme sa, aby to preč. Bam. OK. 

Máme tu skvelú funkciu Twitter tu, that-- ja viem, že jo? Bude to skvelé. Ste chalani nadšení? Ktorá sa bude počítať počet znakov, ktoré ste opustili, takže keď píšem práve teraz, zrejme stále hovorí: 140, ale my vieme, že to nie je tento prípad. A potom sa s našou posledný tu, kliknite sem na party. Čo sa stane, je, keď klikneme, pozadie je bude meniť farby. Takže vy máte svoje možnosti ktorý z nich chcete urobiť ako prvé. Sľubujem, že budem to brať veľmi jednoduché na vás. Mám pocit, že každý je druh toho len veľmi nízke kľúč dnes. Takže budem vás prevedie ako budeme realizovať všetky tieto. Ak chcete odbíjať sa tým, že je to skvelé, ale ja pocit, že každý je trochu unavený. Tak som si len chodiť vás prostredníctvom týchto príkladoch. Ešte máme niečo, čo by sme chceli urobiť ako prvé? Každý, kto? No preferencie? OK. Vieš čo? Sme na stranu. Mám pocit, že vy potrebujete little-- tak, urobíme najprv jedna zo zmluvných strán. OK. 

Takže to, čo máme here-- to je nemalo byť. Teraz je to dobré. OK. Takže to, čo tu máme, je len jednoduchá stránka HTML že vy všetci mali byť super oboznámený s zo svojich posledných dvoch psets. máme typ doc tu. Si každý môže vidieť? OK. Super. Máme HTML samozrejme. Máme nejakú hlavičku, ktorá je spojené s štýlov, ktoré len robil môj font pekný a veľký a odvážny. Takže sa nemusíte báť, že. 

Máme nejaké telo s Id pozadie, OK? Vzhľadom k tomu, že budeme mať zmena pozadia. Takže, keď meníme pozadí nášho tela, ktoré si pamätáme z pred dvoma týždňami keď máme čo do činenia s webovými stránkami. Takže dobré mať to. A máme nejaké Id rovná party. Tento h ref libra jednoducho znamená, že to bude chodiť na tú istú stránku. A tu na párty, čo je dôvod, prečo, keď sme sa na neho, to by sa malo zmeniť farby, našťastie. 

A potom máme nejaké skript tu to práve súvisí s týmto dot JS strán Súbor, ktorý je preto, že prázdny sme nič neurobili. A je to tak smutné. Ale veľmi skoro, bude to zmení farby, a to bude úžasné. 

Tak som len tak, aby vás ľudia vďaka, ako by sme mohli tento prístup. Takže prvá vec, ktorá by sme mohli chcieť urobiť, ak meníme pozadia telo, prvá vec, ktorú by sme mohli chcieť urobiť, je skutočne chytiť čo telo je, že jo? Preto chceme, aby súčet, otázky pozadia, a ak si všimnete, Len som automaticky stačí začať písať. Na tom nie je nič zvláštne, že my je potrebné urobiť pre naše súbory JavaScript. Môžem začať deklarovanie premenných, a vyhlásenie náhodné funkcie. A je to oveľa viac zadarmo formulár. Je to ako s C, dali sme vám všetci Táto tvrdá pravidlá, a ste vyrastal, takže sme radi, "ísť vpred. Buďte slobodní. Robte si, čo chcete. " A to je to, čo je JavaScript. Takže máme nejaké zázemie tu. S našou DOM modelom, my vieme, môže robiť dokument dot dostať prvok, a ak si všimneme tu, Naše telo má ID. Je to tak? Takže môžeme sa dostať dokument Id, a tu je to jednoduchý. Aký je náš Id, že chceme tú? Divákov: Pozadie. ALLISON Buchholtz-AU: Pozadie. Perfect. A bodkočiarka na konci. To sa nezmizla doteraz. Stále je potrebné si bodkočiarkami. OK. Tak to je naša prvá. A keď sme sa na tlačidlo niečo, čím Chcete aby sa niečo stalo, nie? Takže by sme mohli chcieť nejaké premenné že čaká na kliknutie. To, čo budeme robiť, je, že sa chystáte aby naše spojenie viac podobný tlačidlu. Takže budeme mať nejaké tlačidlo, ktoré rovná sa dokumentujú dot dostať element Id. A keď hovorím o kliknite na odkaz alebo kliknite tu na párty link, čo by mohlo byť tu moja ID? Party. Správne. OK nie je tak zlé tak ďaleko. Každý, kto si to, čo robíme? 

OK, takže teraz máme tlačidlo, a my chceme Čo sa mení, keď sme sa na neho kliknite. Takže ak si spomenieme z našej aplikácie PowerPoint, veľmi jednoduchá vec, ktorú môžeme urobiť je len tlačidlo bodka onclick, že jo? A to bude rovnať nejakú funkciu. To je anonymný funkcia. A to len as-- v skutočnosti, že som bude, aby to trochu väčšie. 

Takže to, čo som urobil je tu hovorím, OK, keď klikneme na tlačidlo náš, čo je tento odkaz, ktorý sme práve uvedené, budeme vykonávať táto anonymné funkcie. Nepotrebujeme žiadne vstupy. Nezaujíma nás, čo používateľ hovorí. Keď na neho kliknete, sme bude robiť, čo chceme, čo je zmeniť farbu pozadia. OK? Takže to je dôvod, prečo nemáme žiadne vstupy, budeme musieť túto anonymný funkciu. A teraz sme vlastne bude napísať túto funkciu. 

Takže je tu veľa spôsobov, ako by mohla vygenerovať náhodné farby. Spôsob, akým som to urobil, bolo, aby generovať tri náhodných čísel a previesť ich na RGB triple. Takže to len ukazuje vám niektoré v pohode veci, ktoré ak ste ako, "oh, Musím pre generovanie náhodné číslo, "keď to Googled, to je to, čo by ste našli. 

Takže máme tri rôzne veci, var, už zase červená, zelená. Je to tak? To sú tri veci, ktoré tvoria farbu. Modrá, červená a zelená. Super. A to, čo môžeme urobiť, je, že vieme, že musí byť medzi 255, a ak ste sa pozreli na niektoré generátor náhodných čísel, by ste mohli dostať niečo ako matematika dot náhodný, ktorý, keď sa pozriete na to vracia na nejaké číslo medzi nulou a jednotkou. OK? A to, čo čísla čo je v našich RGB trojlôžkové ísť medzi tým? Zero a čo? Čo môžu ísť až do? 255. Takže ak math dot náhodný ide medzi nulou a jednotkou, Ako môžeme chcieť zmeniť toto? Divákov: Time? ALLISON Buchholtz-AU: Jo, presne tak. Takže čas je 255. 

Divákov: [nepočuteľné] Je to ako [nepočuteľné]. ALLISON Buchholtz-AU: Math dot náhodný. Divákov: cool. ALLISON Buchholtz-AU: Áno. JavaScript len ​​sa o vás stará. OK. Takže, čo môžeme urobiť, že pre všetky z nich. Je to tak? Math dot náhodné časy 255. Rozumiem. Super. Takže to znamená, že tento môže nevráti celé číslo. Je to tak? Možno, že sme si nejaké číslo medzi nulou a jednotkou, a to spôsobuje, že sa mierne byť off, a naša RGBS nemôže byť plaváky. Musí byť ints. Takže ak ste sa pokúsili to, bolo by to asi nejaké nestabilné správanie. Bolo by to trochu funky. Takže to, čo robíme, je, že chceme, aby sa Uistite sa, že tieto sú zaoblené, a vy mohol prejsť v oboch smeroch. Aj zaoblené s podlahou. Takže som vždy istá že sa zaokrúhľuje nadol. Ale ísť preč, ako je to jednoduché bolo len dostať náhodné číslo, Ako si myslíte, že sme by mohol poschodie toto číslo? Je to veľmi podobné. Nejaký nápad? Takže ak náhodný bolo len matematika dot náhodné, takže myslíš, že by sme robiť podlahu? Math dot podlahy. A môžete si tiež urobiť matematický dot strop. Koleso je trochu nejasný preto, že nie vedieť, či sa zaokrúhliť nahor alebo zaokrúhliť nadol. Takže zvyčajne sme sa vždy robiť matematiku dot podlaha, matematika dot strop. Ale honestly-- 

Divákov: Má podlahy koleso dole? 

ALLISON Buchholtz-AU: Floor kolesa dole. A to je len výber z mojej strany. 

Takže teraz máme tri čísla ktoré boli náhodne generované, a to, čo budeme robiť teraz, je, že sme len tak pre zmenu pozadia. OK? Takže sme už máme pozadia druh uložená V tomto prvku s názvom pozadia. Takže to, čo si všimnete, je, ak ste hrali asi s tým, Ak chceme zmeniť štýl. A to je trochu niečo, čo by ste Google a zistiť, Páči sa mi, ako zmeniť farbu. 

Ale spôsob, ako získať prístup táto farba je pozadie dot štýl dot pozadia. Tak to hovorí uvedený tento objekt, pozadia, ktorý sa odvoláva na ktoré element Id tam, budeme pozerať na štýl v rámci štýlu, budeme sa pozrieť na pozadí. OK? A ak idete, a aby sa tým prebral, to by mohol robiť trochu väčší zmysel, ale to je v podstate len hovorím, "Daj mi to veľmi špecifický atribút z toho, čo som definované skôr. " Takže to, čo sme ho zmeniť, je niektorí RGB, pretože to dáva zmysel. Používame RGB trojlôžkové, že jo? A my have-- chcem uistiť, že som ten správny počet citácií tu. Takže to, čo robíme, je máme RGB, a budeme to-- to je ako zreťazenie, čo je červená. A potom chceme nejakú čiarku. A potom chceme a zelená, potom niektoré čiarka, a niektoré modré. 

Takže tieto plusy len Myslíš ako zreťazenie. Tak to je práve vytvorenie tejto Reťazec, ktorý sa deje vo vnútri RGB. OK? 

Divákov: [Nepočuteľné] a potom green a potom červené. 

ALLISON Buchholtz-AU: Jo, pretože som pokazil, že až. Že jeden je v poriadku. Oh, vydrž. Nie. Pretože potrebujem, aby sa ubezpečil, že som všetky tieto práva. Tak som sa vysvetliť uno momento. Zelená, modrá, perfektné. Teraz som urobil. Verím, že. 

OK. Takže to, čo to je, je to, že na pozadí sa bude nastavený na určité reťazca. Je to tak? Čo je to, čo tu máme. Bude to byť nejaký RGB 255 čiarka 255 čiarka nula, alebo čokoľvek číslo, ktoré majú tam. Takže sme tu, máme nejaký reťazec. A to, čo chceme urobiť, je, že sme to druh dynamicky vytvárať že keď sme vlastne tento program spustiť. Takže to je nejaký reťazec. A zřetězuje ju hodnota, ktorá má červený, ktorý zřetězuje ju čiarka, ktorá ju zřetězuje s tým, čo je zelená, a tak ďalej, a tak ďalej. OK? Až do samého konca, čo je zatváranie zátvoriek tohto RGB tu. OK? 

Tak čo to bude generovať je nejaký príkaz naozaj že je RGB z troch čísel že na pozadí je teraz nastavená na. OK? Tak uvidíme, či to funguje. Dúfam, že to robí, pretože ak to nie, ja budem skutočný smutný. Oh nie. OK, vydrž. Rozhodne pozadia dot štýl dot pozadia. Ja som rozhodne nechýba Niečo malého. Nezdá sa vám, že chalani nenávidia? Keď je to len malý trochu chyba? Všemohúci pozadia. RGB. 

Divákov: [nepočuteľné] ALLISON Buchholtz-AU: Nie. Snažil som sa to pred triedou. Mám všetko, čo som robil predtým trieda prípad, že by som bol rád, "Počkaj, čo som urobil zle?" Pretože som bol rád, "budem asi neporiadok to sa v určitom okamihu. " A zelená. Všetko vyzerá, že je to správne zreťazené. OK. 

Divákov: [nepočuteľné] 

ALLISON Buchholtz-AU: Oh, tam idete. To je to, čo som potreboval. Pozri sa na to. Tiffany zachrániť. Perfect. OK. Teraz sa pozrime, či to funguje. Ach môj Bože. OK. Vydrž. 

Divákov: Priestor po druhej plus. 

ALLISON Buchholtz-AU: Ktorý z nich? Ale počkajte, vydrž. Oblečenie Space? 

Divákov: Second plus green zreťazenie. ALLISON Buchholtz-AU: Oh. Divákov: Nie je miesto Po Plus, jo. ALLISON Buchholtz-AU: Vy Nemusíte to, ale- Publikum: Oh, vy nie? ALLISON Buchholtz-AU: Vyzerá to pekne. Divákov: OK. OK. 

ALLISON Buchholtz AU: Uvidíme, či to funguje. OK. Ja som samozrejme nedarí na toto demo, čo mi pripomína prednášky druhý týždeň, ale viem, že to bude fungovať. Viem, že to bude fungovať. Tak blízko. Ak som omylom zmazané môj skript na tento jeden. Nie, to je strana dot js. OK vydrž. Budem kopírovať to, a ja som taky len tak vymazať všetko, preto, že som mal tento pracovný skôr. 

Sľubujem, že to funguje. Ak nie, ukážem vám, čo Tommy to je. A tam. 

Divákov: Ste odkazovanie stranu dot CSS, a to je večierok dot JS. 

ALLISON Buchholtz-AU: Ah, dobre tu je dot js strán. OK, čo som urobil inak? OK, uvidíme, či to funguje teraz. Bam. Tak ja neviem, čo som urobil inak, ale to je to, čo by sa malo stať. Kinda cool. Som klikol na to, ako, navždy. Ale môžeme vyskúšať a vidieť to, čo som urobil inak, že to jeden mal. Neviem o vás chalani, ale to vyzerá v podstate to, čo som práve napísal. Tam bol pravdepodobne chýba bodkočiarka niekde je moja vec. Vlastne po, myslím, že som chýbala bodkočiarka tu v skutočnosti. Ale ja som nevidel, pretože to bolo mimo obrazovku. 

Ale ak si všimneme, je to celkom Koľko presne to, čo som práve napísal. Myslím si, že asi najťažšia časť o je to len druh tejto veci pravdu tu, porozumenie čo to robí tam. Tieto druhy vecí sa naučíte naozaj len Googling a poctivo Len sa snažím. Ak si myslíte, že je to nejaký atribút, tam asi je. Tak si to vyskúšať. Pozrite sa, čo sa stane. Ako som už povedal, je tu veľa experimentovanie s JavaScript, a PHP, a všetko, čo veci, a to najmä CSS. To je jediný pravý spôsob, ako sa to pochopiť. 

OK, tak po tomto fiasku sa stranou dot js, máme dve ďalšie možnosti. Máme hodín alebo Twitter. Sú to obaja zaujímavé. Možno, že nie zas až tak zábavné ako strana, ktorý mal v pohode trochu roztrasene vec na záver. Myslíte si chalani nejaké preferencie? Divákov: Clock? ALLISON Buchholtz-AU: Clock? OK. Super. 

Takže znovu, máme prázdny súbor JavaScript. A ako vidíme tu, my majú niektoré veľmi jednoduché HTML. Máme štýlov, že práve formáty, aké by to malo vyzerať. Máme div sa Id z hodín, čo len hovorí, "malo by to byť hodiny." A máme odkaz v našom súbore JavaScript že to vlastne bude vytvárať naše hodiny pre nás. Vzhľadom k tomu, super vec je, že môžete nastaví JavaScript automaticky aktualizovať sám. OK? Takže namiesto toho, čakanie na Užívateľ zasiahnuť Aktualizovať na stránke takže sa môžete dostať aktualizované čas, JavaScript Môžete aktualizovať však páči. 

Takže, ako s našou posledný, sme chceli prístup do nášho zázemie, je to tak? Tak čo si myslíte, že by mohol byť Prvá vec, ktorú chceme robiť tu? Ak máme trochu ísť preč Tento druh paradigmy tu? Pravdepodobne Chceme prístup na naše hodiny, nie? Takže máme nejaké var hodiny, čo equals-- čo si myslíme, že to bude? Dokument dot získať prvok by-- I tiež láska Sublime-- Id a naša Id je hodín. Bodkočiarka. Musím sa uistite sa, že si tie bodkočiarkami tejto doby, pretože mám pocit, že bol problém naposledy. OK tak, ako som chcel povedať so snahou mať JavaScript obnoviť sám, Tam je to skvelá funkcia, I viem, že to prišlo vhod v minulom roku, Nie som si istý, že to príde vhod za to pset, ale je to len set interval. A to je v skutočnosti vlastne v pohode, ak vy niečo urobiť s časom, alebo stále aktuálne informácie. Na internetovej stránky pre finále projekt, je to pravdepodobne funkcie, ktorú chcete dostať Super zvyknutí. Takže to, čo nastaviť interval robí, je, že ideme, aby to funkcia, a ako často by malo volanie tejto funkcie. OK? 

Takže v tomto prípade budeme len tak vytvoriť nejaké anonymné funkciu znova, OK, to je dostane Naše dáta, a náš čas, a aktualizovať veci a zobrazenia. Takže budeme robiť starosti. Budeme ako vytvárať hodiny tu. Ale to, čo potrebujeme, je, ako často ju aktualizovať. Takže v tomto prípade, je to len milisekúnd. Takže sme len tak robiť 100 milisekúnd. Samozrejme, úplne ľubovoľné. Ak by ste chceli, aby aktualizáciu oveľa pomalšie, mohol by si. Môžeme flákať s zadanom intervale, ako veľký náš interval je potom, čo sme si pracovné hodiny, čo dúfam, že budem dostať. Takže je to len povedal, "OK, call táto funkcia každých 100 milisekúnd. " OK? To je všetko, čo robí. 

Takže to, čo chceme našu funkciu urobiť, je, že chceme mať nejaké dátum a nejaký čas je to, čo budeme mať. Takže môžeme začať s našimi dátum rovná niečo, a náš čas sa rovná niečo že ešte neviem. Alebo vlastne, len je potrebné dátum, pretože dátum bude zahŕňať všetko. Opäť, ak ste práve Google niečo o to, čo chcete robiť, ak nám napíšete, "OK, Chcem sa dostať čas pomocou jazyka JavaScript "to vám to skvelý Funkcie tzv dátum get. Doslova, väčšina vecí že chcete robiť, JavaScript je bude mať to robí už za vás. Takže je to doslova ako nový získať dáta, čo je creating-- alebo nový dátum, rather-- ktorý generuje nejaký objekt, ktorý predstavuje dátum. 

A to, čo budeme robiť, je tu to je-- budem písať to, a potom vysvetliť, čo to robí. Takže budem uistiť, že som si to právo. 

OK, takže to, čo táto funkcia robí, je, že sme sa len vytváranie HTML, ktorý je v skutočnosti ísť v našom div id z hodín. Tak čo to bude robiť práve vytvára nejaký reťazec, OK? Ktorá sa potom bude transplantované do nášho HTML. V podstate to, čo to bude robiť, je čo we-- to, čo som vám ukážem, je, že nech hovoríme HTML je, budeme nahradiť tento text tu s tým, čo je HTML. Tak to bude, aby nám zmeniť náš hodín dot HTML od byť len text tejto by mala byť hodiny, aby skutočne ukazuje čísla a veci, ktoré sa staráme o, a skutočne hodín. 

Takže to, čo budeme robiť, je, že sme začnú vytvárať tento HTML. Takže rovnakým spôsobom, ako sme použili urobiť a rovná sa pre celé čísla, teraz môžete urobiť pre sláčiky, okrem toho, že to bude ich zřetězit. Je to tak? Ako sme videli u výrobcov bodka JS, to proste zřetězuje všetky tieto veci dohromady. Takže si môžete spojiť rôzne kúsky HTML z premenných, alebo kúsky reťazcov že píšete von sami, a to len Naozaj vám umožní dynamicky generovať HTML, čo je celkom v pohode. Takže ak máte niečo veľmi užívateľsky špecifické, to vám umožní urobiť. 

Takže musíme HTML, aby budem pokúsiť sa uistiť, že som si to právo. Takže budeme robiť nejaké h1 hlavičky. Takže to, čo je dôležité, aby tu si uvedomiť, je to, že je to v skutočnosti len HTML. Je to tak? Píšeme aktuálne HTML kód tu, je to nie len reťazec v normálnom spôsob, že by sme o tom premýšľať. Takže máme nejaké HTML. To je považované za reťazec tu však. A my dátum dot-- my chcú dostať naše hodiny. Opäť platí, že ak ste sa pozrieť up niečo o dátume, to by ti to všetko sú atribúty, ktoré dátum má. A tu je to, čo môžete použiť na to. Takže to asi má veci, ako je dostať hodiny, a dostať minút, a dostať sekúnd, a získať milisekúnd, a kto vie, čo ešte majú. Ale keď sa pozriete do dokumentácia, bude to všetko tam. 

Takže máme dostať hodín, a potom sme chceli zřetězit že with-- nie som bude pohybovať to tu. Takže ak budeme generovať práve teraz, sme vlastne generovanie čas, nie? Máme hodiny, a potom to, čo je medzi hodinami a minútami? Máte bodkočiarka, že jo? Takže chceme urobiť nejaké bodkočiarku tu. A potom chceme, aby sa naše minút, takže rovnako že máme dátum dot dostať hodín, Ako môžeme dostať naše minút? Je to doslova dátum dot dostať minút, ktoré som tak trochu rád. Je to ako, "ach, ako získam minút? " Len som si svoje minúty. 

OK. A potom tu máme ďalšie dvojbodku tu. A potom, ak chceme, aby sa naše sekúnd, ako by sme sa dostať naše druhá? Dátum dot si sekúnd. Myslím, že je to celkom v pohode. A čo je dôležité, aby si uvedomiť, že my tiež je potrebné, aby tu zatvárať HTML tag, pretože to by malo aj naďalej byť validný HTML, tak h1. Super. 

Takže po to, že môžeme urobiť hodiny dot vnútorná HTML je rovný HTML. OK? Tak si, ako som povedal, vnútorné HTML v podstate berie, čo je medzi dve značky, ktoré sme si rozprávali o a vložky alebo manipuluje čo je tam? Takže to, čo to robí, ak sa vrátime k našej hodiny, je, že hodiny sa týka všetko v rámci tejto div. Jedná sa o vnútornú HTML tohto Id hodiny div. A tak to bude to zmeniť na HTML, ktoré sme práve generované, ktorý, ktorá, dúfajme, dúfajme, dúfajme, ukáže čas práve teraz. Uvidíme. Samozrejme. Toľko technických problémov. Allison jen--, že som off moju hru dnes chlapci. OK, to funguje. Hodiny dot vnútorné HTML. Bolo to HTML Naozaj? Tiež je to, čo sa deje. Keď nemôžete vidieť niečo, čo, Stačí sa pozrieť na zdrojovom kóde. OK. Myslíte si, chcem vedieť, cool prácu okolo že budeme robiť tu? 

Divákov: Môžeš robiť veľké písmená? Veľké písmená? Pretože máte dostať hodín, a potom sa minút. 

ALLISON Buchholtz-AU: Je to je dostať sa hodiny a get-- oh. Tie are-- Zlatú hviezdu. Je to test, chlapci. Sľubujem, že to funguje pred triedou. 

OK, ale niečo v pohode vedieť, je, že môžete, ak niekedy also-- vaše externé súbory Začínam byť trochu blázon, si môžete tiež len dať ich rovno V tú, ktorá má tendenciu veci do poriadku. Okrem toho je ako naozaj škaredý. Samozrejme formátovania všetko. Uistite sa, že je to všetko pekne. OK. 

Chcel som robiť všetky tie skvelé demá, a oni proste nevyjde. OK. Script var hodiny. Tak ako tak, čo je dôležité, je že sa jedná o všeobecný spôsob že by ste formátovať JavaScript. Ako môžete vidieť, môže to byť veľmi vyberavý niekedy, aj keď to bolo doslova pracovný pred dvoma sekúnd. Alebo pred nie dva za druhé, ale veľmi, veľmi nedávno. 

Tak, aby vám ukázať, čo by to malo vyzerať, a ukázať vám, že nie som blázon, a že všetko je presne To isté, to je to, čo by to malo vyzerať. Tie proste robiť túto hornú časť tu, a ak sa pozeráte zdrojový kód stránky, ak si všimnete, že urobil nejaké šialenejšie veci, zjednodušila som to. Tiež úver Tommy McWilliam, kto vlastne mi pomohol vytvoriť tieto príklady, čo je dôvod, prečo ja viem, že fungujú. Vzhľadom k tomu, Tommy je majster JavaScript. Ale ak si všimneme, máme nejaké set. Máme hodiny funkciu tu. To je všetko, JavaScript, ktorý sme práve napísali, alebo niektoré z nich. Práve sme napísal tento tu. A má naviac funkcia, ktorá práve Podložky to tým, že nulu predtým písmeno alebo pred číslo, ak je to len jeden z nich. Takže ak si všimnete, je to celkom Koľko presne to, čo sme práve napísali. Máte nejaké premenné hodiny, ktoré má našu element, získať element podľa ID, čo je hodín. Máme stanovený interval Funkcia, ktorá je anonymné funkcie ktorý vykonáva toto všetko. Máme niekoľko začína reťazec HTML, ktoré sme potom dynamicky generovať tým, že niektorí h1 hlavičky, zreťazenie sa dostať hodiny, a Naše hrubého čreva, a ako sa minúty, plus ďalšie hrubého čreva, a naše sekundy, a nakoniec končí HTML pre neho. A potom sme sa aktualizovať naše hodiny dot vnútorný HTML HTML, a my aktualizovať každých 100 milisekúnd. OK? 

Pozri Sľubujem, že nie som blázon. Neviem. Neviem, prečo sa ma nemá rád. Mám pocit, že vyzerá rovnako, ale zrejme to ma nenávidia. 

Tak uvidíme, či okolo tri pôjde lepšie. Sme asi vidieť. Nie som si istý, ako to pôjde. Je každý aspoň získanie cons, ako len všeobecné téma JavaScriptu, aj keď? Dúfam, že je to najmenej vhodné, viac než o tom, že je to trochu vyberavý. Ale váš problém set bude veľmi zábavné. Bude to skvelé. To nebude úplne ako únavné pretože to, ja si nemyslím, že. Budete skutočne dostať do vidieť naozaj cool veci. 

Takže v neposlednom rade, skúsime Twitter jeden. Ja som naozaj strach teraz, chlapci. Ja neviem, ako to pôjde. Ale len preto, aby vám niečo viac chuti, a to je vlastne manipuláciu reťazca a vstupy, čo budeme robiť je, ak môžeme všimnúť, tú s HTML-- tahle má trochu víc-- máme nejaké textovú časť, ktorá odpovedá na túto oblasť textu tu. OK? A že má ID textu. Zmenený sme to trochu s niektorými šírkou a výškou že sme vopred určená, a my sme H1, čo len je naša jediná hlavičky, ktoré predstavuje odišiel naše postavy. Dali sme mu nejaký ID zostávajúce znaky, a potom máme nejaké skript tu, čo som naozaj dúfa, že tretíkrát to kúzlo tu, chlapi. 

Takže to, čo chceme robiť, v rovnakom všeobecnom duchu že sme urobili s hodinami dot JS a strany dot js ako sme si všimli, je, že sme začali by skutočne chytí veci, ktoré sa staráme o, nie? Takže v tomto prípade, sú tam dva veci, ktoré sa staráme o, OK? Jedna vec, že ​​sme vlastne trochu hľadá do a čerpanie dát z, a jedna vec, ktorá sme skutočne mení. Takže tam je náš HTML. Ak je to naše webové stránky tu, čo je údaje, ktoré sme pri pohľade na? Bude to byť čokoľvek Text v našich krabiciach, že jo? Tak čo som písať tu. To je to, čo chcem vedieť, alebo to je to, čo chcem pozrieť. A to, čo sa bude meniace sa na našich webových stránkach? Zostávajúce znaky. Tak rovnakým spôsobom, chceme začať tým, že inicializácia premenných že vlastne držať týchto prvkov. OK? Takže ak budeme mať niektoré var to je náš text priestor, a máme nejaké var, ktorá je zostávajúce. Je to tak? Tak to sa bude držať tieto dve veci. Takže rovnaký druh veci, Dokument dot-- OK, ja som chystá sa ubezpečil, je to chodiť do práce tentoraz. Som veľmi neoblomný. OK, takže ak chceme, aby naše textová oblasť, podľa k nášmu HTML, čo je naša identifikátor? Aký je náš Id? Je to len bude textu, pretože vytvára našu textovú oblasť, OK, a naša Id je text, tak to je ako môžeme uchopiť to, čo tam je. OK, bodkočiarka. Budem byť super presné o tom, preto, že chcem, aby to fungovalo tentoraz. OK, robia to isté, dostať element Id. Ja som naozaj premýšľal, čo má spôsobil ďalšie dva pokaziť. OK, potom sa v tomto jednom, to, čo chceme získať prístup? Čo je to tu náš Id? Máme ďalšie Id v náš HTML, čo je to? Divákov: zostávajúcich znakov. ALLISON Buchholtz-AU: Zvyšných znakov. 

OK. Super. Tak som len tak napísať to naozaj rýchlo. Ja som jednoducho ísť písať to na druhom mieste. Tak textová oblasť. Čo je zaujímavé, je B tam function-- spústa funkcií, ktoré nielen zodpovedajú vašim myš, ale vaša klávesnica. OK? Takže môžete povedať, keď niektorý kľúč lisované, môžete robiť veci, ako to. Takže ten, ktorý sme s použitím sa nazýva na kľúč up, ktorý hovorí: "ak ste stlačením ľubovoľného tlačidla na klávesnice, keď používateľ pozdvihlo Ich prst off toto tlačidlo, a kľúč sa stal nelisovaný, potom budeme niečo robiť. " OK? Tak to má zmysel, že jo? Vzhľadom k tomu, každý znak sme typu, ideme musieť zdvihnúť prsty off z toho, takže keď kľúč ide hore, môžeme spoznať pre zníženie Zostávajúce naše postavy. 

Takže máme nejaké na kľúč hore, a rovnakým spôsobom, budeme hovoriť, "OK, keď to urobíme, my sa chystáte vytvoriť nejakú funkciu, ktorá bude trvať e ", v tomto prípade, a to, čo chceme urobiť, je výpočet počtu zostávajúce. OK, takže poďme jednoducho začať vytvorením premenné. Takže máme nejaké premenné r, že to bude reprezentovať koľko znakov, čo nám zostalo. OK? Vieme, že začneme s 140, a ak chceme vedieť, povedzme, na dobu trvania tejto Reťazec, ktorý to už vstup, Myslíte si, chlapci majú nejakú predstavu, ako by sme mohli urobiť, že? Len na základe preč zrejmý veci, ako keby sme chceli hodín, sme si hodiny. Vieme, že náš objekt je textová oblasť, ale mohol by ste chlapci premýšľať o tom, čo by mohlo prísť po ňom? Nejaké nápady? 

Tak toto je trochu menej intuitívne, ale to je hodnota dĺžky bodka. Tak mi daj trochu hodnotu atribútu, že je vlastne dĺžka tohto reťazca. Takže to bude hovoriť, "OK, pozerám v celom tohto reťazca v textovom poli, a budem rozprávať vám, ako dlho to je. " Vzhľadom k tomu, ak si spomenieme reťazca sú naozaj len polia, takže môžeme len vziať dĺžku z nich. Takže máme to. Super. 

Potom, čo chceme urobiť, je, že sme nikdy nechcem, aby užívateľ pre vloženie viac než 140 znakov, je to tak? Vzhľadom k tomu, povieme-li, ako: "Ach, vy mať iba toľko zostáva, " a potom nech im to Tak ako tak, sme ležal. A to je ďalší vec, ktorá JavaScript môže byť naozaj dobrá pre, je validácia užívateľ a uistite sa, že vaša Užívateľ zapadá do všetkých pravidiel že ste im poskytnuté. Takže ak chcete robiť veci, ako je vytváranie istí, že niekto vstup ich e-mailovú adresu, alebo uistite sa, že keď sa zadajte dve heslá, ktoré uzavrelo. JavaScript môže urobiť. Tie by sa niečo také, "keď odoslaním formulára, "alebo podobne, "Keď tlačidlo Odoslať formulár je kliknutí, skontrolujte všetky tieto veci. " A to môžeme urobiť JavaScript. Tak to je práve to, čo budeme robiť tu. 

Takže to, čo by mohlo byť spôsobom, ako zistiť, či že som už viac ako 140 znakov? Čo sa stane, aby Naše hodnota R, ak sa snaží? Bude to byť negatívne, nie? Alebo to bude menej než alebo sa rovná nule. Takže môžeme použiť v prípade, že je rovnako ako všetko ostatné. OK? A máme nejaký text plochu dot hodnoty, a to, čo tu robíme je, že sme len cutting-- čo je to? Prepáčte. Ten, my jednoducho chceme sa vrátiť false. Dostal som zmätená. Všetky rozštiepené z vecí nefunguje. OK, len chceme, aby return false, a potom sme chcete zobraziť zostávajúce znaky, nie? Tak s hodinami, sme urobili niečo s vnútorným HTML, nie? Tam, kde sme si stanovili, že sa rovná niektoré variabilný, takže to, čo môžeme robiť? To, čo sa meníme vnútorný kód HTML? 

Divákov: Zvyšné? 

ALLISON Buchholtz-AU: Meníme zostávajúce. Dobre, a čo my Chcete nastaviť rovná? Je to bude r, pretože to by mala byť zostávajúce naše postavy. OK? Takže som naozaj nervózny, aby zistil, či to funguje teraz, ale uvidíme. Nechajte to. To je naozaj rýchly. [Nepočuteľné] OK. Opäť platí, že ja som len ukážem. Z nejakého dôvodu, moja rozhodne, že nebude fungovať, ale to, čo som vám ukážem, že to je-- oh som mal dať, že. OK, sme si všimli rovnaký druh to tu, ako sa na oblasť textu. 

Tiež, ak máte chlap oznámenia, ak je to niekedy niečo, čo chcete robiť, a neviete, ako to urobiť to, stačí kliknúť na Zobraziť zdrojový kód stránky, a oni ti to povedať. Niekedy to bude šifrovaná. Pre vaše pset sme šifrovať všetko, tak to proste vyzerá ako blábol. Ale či je to vôbec vážne pohode webové stránky, ktoré sa vám páčia, ak ste práve na tlačidlo Zobraziť zdrojový kód stránky, to ti povedať, ako na to. Takže znovu, pracovať chytrejšie, nie viac. A ako vidíte tu, všetci tieto veci sú rovnaké. toto tu len trvá nejaký podreťazec to, že som zabudol, presne to, čo to robí. Ale to samozrejme zaberie nejaký podreťazec hodnoty od nuly do desať, a vráti false, čo by malo prestať užívateľ od zadania už, a potom samozrejme aktualizuje vnútorné HTML tam. 

Super. Tak veľké odoberie aways odo dneška, experiment, pozrite sa na zdrojový kód pretože to bude vám veľa, a všetci, niekedy JavaScript môže byť ťažké pracovať a nie vždy pracovať tak, ako to očakávate, ale len snaží udržať pretože Sľubujem, že áno. Sľubujem, že všetky z týchto príkladov pracovali pred triedou. Nechápem, čo sa stalo. Doslova som všetko rovnaké. 

A ešte jedna vec, ktorú chcem, aby ukázať vám chlapci, ktoré môžu byť super užitočný Je in-- čo pracoval predtým? Máme párty do práce, nie? Myslím, že áno. Áno. Urobili sme. Desivý. OK, takže jedna vec, ktorá Mali by ste vedieť je log konzoly, ktoré som hovoril. Takže konzola dot protokolu ahoj. Tak to je druh JavaScript ekvivalent printf. Takže ak ste niekedy chceli, aby skontrolujte, či vaše premenné alebo zistiť, čo sa tam deje, čo sa môžete urobiť, je, ak budeme kontrolovať prvok, je to, čo budete chcieť ísť k, a idete do konzoly, uvidíte, že to vytlačí ahoj. 

Takže sme mohli mať tlač, čo sme chceli. Ak by sme chceli, aby tlač pozadie dot štýl dot background, mali by sme byť schopní vidieť RGB triple, že príde. Alebo nie. Zabudol som presne, ako sa vytlačiť premenné, ako je to, ale mali by ste byť schopní vytlačiť také veci. Že bude veľmi užitočné pre vašu pset kedy snažíte manipulovať koordinuje alebo ktovie čo ešte. A tak sa tiež zmeniť toto dielo vo svojej triede. To sa líši od posledných rokov, takže len pekné svojim TFS, alebo TFS v úradných hodinách skôr preto, že sme druh učenia spolu s vami. Ale log konzoly bola super, super užitočné pre JavaScript v minulom roku. Tak milovať. Naučte sa, ako ju používať. Je to jednoduchšie, než GDB, takže by mala byť aspoň plus bod. Ale vďaka chlapci sú ložiská so mnou. Je mi ľúto, že my Príklady z nejakého dôvodu proste nechcel spolupracovať so mnou, ale ja dúfam, že to pomohlo trochu vám trochu viac v zóne JavaScript. A pošlite mi všetky vaše otázky budúci týždeň, takže môžem byť super opraviť, a ja ti prinesiem cukrík a dokonca aj extra cukroví, pretože to bolo smiešne. Ale vy ste skvelé, a majú skvelý týždeň.