ALLISON Buchholtz-AU: Dobře všichni. Vítejte zpátky do sekce. Je to naše předposlední sekci. Je to tak smutné. Já nevím, co budu dělat aniž by viděl vám kluci každé pondělí. Myslím, že bychom měli prostě-- Možná jsme mohli jen Setkávají se tu a na večeři nebo tak něco. Nevím. Přivedu místo toho jídlo. Budeme jen mluvit. Ale ano, bude příští týden naše poslední úsek. V tomto sdělení, máte kvíz příští týden. Vím, že jsem zapomněl na dělám, jako je, dva týden předběžné oznámení minulý týden, ale doufejme, že vy věděl, že to přijde. Doufejme, že to je jeden z posledních midterms pro vás na semestr. Ale bude to pokrýt všechny Materiál, který jsme přešli. Takže to není jako si můžete zapomenout asi čtyři smyčky nebo proměnné. Protože jsme se dozvěděli ty, které na začátku, ty jsou samozřejmě fair hra pro váš kvíz. 

Je to bude stejný formát, stejný délka, takže už jsou na to zvyklí. Tam to bude kódování problémy ručně, Možná, že někteří true false, Možná, že někteří krátká odpověď. Takže byste měli být obeznámeni s formátem, zejména pokud užíváte testy praxe. Ale jak říkám tady, že je to kumulativní, ale my jsme rozhodně bude se zaměřením na věci z šestém týdnu kupředu. Takže jsme to asi nebude se vás zeptat, kolik bytů jsou v každém typu nebo tyto druhy věcí, ale my jsme asi bude zájem o věcech, jako je spojových seznamů, nebo různé datové struktury, nebo různé algoritmy že jsme mluvili. Takže se ujistěte, že jste opravdu se na ty, a pokud máte potřebovat žádné zdroje, tady je spousta zdrojů. Jen jsem vám dal typ z rychlého seznamu tam. 

Příští týden bude kvíz přezkoumá během této doby. Takže pokud máte nějaké otázky nebo zvláštní témata, konkrétní věci na kvíz, který byste chtěli projít, prosím pošlete mi je ještě čas, tak mohu druh připravit nějaký materiál na to. A kromě toho část recenze, budeme také se drží kurz na úrovni přezkoumá, jak jsme minule. A to bude provádí stejnými lidmi. Nemyslím si, jestli to víte, je to lepší nebo horší, ale bude to být já, Hannah, Davan a Gabe znovu. Takže pokud si chcete přijít podívat nás všechny škádlení navzájem a vás provede kvízu recenze, měli byste si určitě když na to přijde příští pondělí také. Takže budete mít jen v pondělí uvíznutí balené přezkumu kvíz, což je dobré protože pak máte úterý zpracovat přes všechno. 

Ale určitě dělat check out těchto zdrojů. Study.csv.net je daleko, já myslíte, že jedna z nejužitečnějších, hlavně proto, že má hodně ukázkový kód, má veškerou moc body se všemi poznámkami na něm, které jsou opravdu to, co jsem kreslit nejvíc mých sekce materiálů z. Pokud existuje něco, co v předchozích sekce, které jsem mohl rozeslaly že nemusíte mít dostal, dejte mi vědět. Stejně jako minulý týden ukázce kódu, pokud někdo nedostal to, Jen mě e-mail nebo přijít se mnou mluvit, a já se ujistěte se, že jste si to. 

Takže s tím, dnes jdeme bude mluvit o JavaScriptu. Tak jsme tady Tommy, kdo jsem jen mluvím s tebou včera v noci. Miluji Tommyho. JavaScript je jeho oblíbený jazyk, jak se zde říká. Budou snažit a řeknu vám, že je to není nejlepší, a budou špatně. Takže Tommy je mistr JavaScript. Nejsem úplně v jeho úrovni, ale byl jsem rád, "Tommy, jak se mám učit Tyto děti JavaScript? " Tak jsem dostal několik tipů, takže doufejme, že vyjde. 

Takže pár věcí, které byste měli vědět, je, že JavaScript je na straně klienta skriptování jazyk, takže vzhledem k tomu, PHP je něco, co že jsme zvažovali více na straně serveru, to bylo nahrát na server, sestavil a popraven tam. Ten je proveden na vlastním stroji. OK? Takže si nahrát nějaké stránky JavaScript, a to provádí na vašem počítači. Syntaxe je velmi podobná C a PHP. Chystáme se projít Některé příklady JavaScript, a budete vidět, že způsob, jak mluvit o proměnných, cykly, a podmínky jsou velmi podobné. OK? Skutečnost, že jsou tak podobné je pravděpodobně bude na výlet někteří z vás up, v některých případech, jen proto, že budete začlenit trochu C tam, kde by neměla být. Možná, že si vyzkoušet a něco psát pokud by neměl být napsán. 

A na to, že jedna věc je vím, je, že JavaScript je dynamicky napsaný jazyk, stejně jako PHP. Takže pokud vy vzpomenout ze sekce minulý týden, když jsme byli trochu dělá Naše PHP rychlokurz, jsme viděli, jak se řetězec jeden mohl být se změnil na int jednoho, a tak dále. Typ proměnnými jsou stanoveny v běhu, takže se mohou měnit v průběhu průběh programu, a stejným způsobem, že se nikdy Opravdu deklarovat typy pro PHP proměnných, budeme dělat totéž to tady, kde jsme opravdu ovládání typy našich proměnných, abych tak řekl, jako my v C. 

A pak jedna věc to je docela v pohodě, je že můžete error zkontrolovat přes konzoli, s tímto velkým funkcí console.log, který umožňuje vytisknout jiný proměnné nebo objekty, že budeme o čem mluvit. Stejně jako minulý týden, když jsem byl jako: "použít tuto funkci," s dump z vašeho pset je to funkce Chcete-li použít, console.log. Byla jsem tak překvapená, kolik studentů na pracovní dobu nevěděl o funkci výpisu. A byl jsem rád, "kluci, to bude aby váš život mnohem jednodušší. " 

Dobře, takže to bylo trochu jen stručný věc, jako vždy, máme příklady. Vím, že kluci milují ty. Tak tady je příklad velmi soubor zde jednoduchý JavaScript. Takže to jen tak pro vytvoření Tento pop-up, který říká, "Hello world", když tě vstoupit na stránku, ale pojďme pokusit se projít tímto trochu. Tak samozřejmě je to jen jako normální index.html. Takže, jen naše normální šablony zde a máme HTML, máme hlavu, a stejně jako u CSS, jak jsme se zahrnuty některé vnější soubor, ne? Máme nějaký script type text, který je JavaScript. A zdroj je hello.js, což je tady dole. Jedná se o celý soubor hello.js. A pak jsme některé název a některé body HTML že se opravdu záleží. 

Co se stane, je, že když jsme tuto stránku načíst, automaticky spustí tento skript. OK? Tak JavaScript bude spustit automaticky. Tak co to bude dělat, bude to okamžitě jít a spustit to. A to bude říkat, "upozornění. Hello world ". Což alert je funkce, která vlastně generuje toto políčko. OK? Takže je to trochu všechno zahrnovalo. Není nic navíc jsme měli k tomu kromě právě ve střehu, a pak, co jsme chtěli v naší výstražné okno. OK? Takže je to jen super jednoduché příkladem toho, co může udělat JavaScript. 

Jeden z opravdu cool věci, jak uvidíme, je to, že JavaScript umožňuje manipulovat své webové stránky, aniž by bylo nutné znovu jim pokaždé. Takže pokud máte want-- například, pokud se vznášející se nad něčím, jestliže vy někdy Viděl panely nabídek, nebo když najedete nad některými téma, zobrazí se nabídka Drop-down, je to proto, JavaScript. OK? Takže nejste překládky na celokrajné strana, aby si toto menu se ukázat, jste právě hledáte nějaké konkrétní akce, kterou uživatel přijal, které se nazývají události, které se dostaneme do, a jakmile zjistíte, že jste řekl, "OK, upravovat něco, co na toto téma strana a aby to vypadat jinak, ale pouze upravit tyto konkrétní věci. Nepoužívejte znovu celou věc. " Tak to ve skutečnosti je mnohem hezčí, a nemusíte znovu načíst své stránky, a je to opravdu cool. 

Takže deklarace proměnných, takže si můžete trochu vidět, Dal jsem na vrcholu tady, volně napsal. Tak to je velmi podobně jako PHP. My nemusíme říkat JavaScript jaký typ jsme očekával každé z těchto proměnných. Mohou to být cokoliv typy chceme. Tak zjistíte, v tomto případě, prohlašujeme je velmi jednoduše, jen s "var" a pak, co chceme náš název proměnné být. Jedna věc k poznámce je, že když vás dát var před názvu proměnné, to místně rozsahů adres to. OK? Je to naprosto rozumné pro vás úplně stačí vymazat var a prostě se s rovná CS50, a že bude jen globální proměnné. OK? Takže si můžete inicializovat oba způsoby, záleží jen na tom, jak budete chtít. Takže pokud jste inicializace to v rámci funkce, a chcete, aby proměnné pobyt rozsahem v této funkci, budete chtít dělat něco jako var název proměnné, proti, pokud ho chcete globálně rozsahem, vy může udělat jen název variabilní a poté co byste chtěli, že rovna. OK? 

To je docela fajn věc tady dole, protože pokud jsme si všimli naše proměnná b začíná jako pravdivé. A co to může does-- mi někdo říct, co to dělá? Takže máme nějaký záznam. Co by typ B se na začátku? Diváků: Boolean. ALLISON Buchholtz-AU: Boolean. Správně. A pak jsme se přeřadit B do tohoto řetězce, ne? Takže tady, jaký typ B musí být? Bylo by to řetězec, ne? Takže to, co je důležité, aby oznámení je, že v C, my skoro nikdy dělat něco takového. Museli bychom mít proměnnou, cast to jako něco jiného, možná udělat nějakou funkci s dvěma i, jít od poplatku na celé číslo. Ale když si všimneme tady, b Velmi snadno se mění typ. 

Publikum: Počkej, takže stačí vypadat, "dělat b celé číslo?" 

ALLISON Buchholtz-AU: Jo. Stačí si jen přiřadit b na celé číslo. 

Diváků: Opravdu? 

ALLISON Buchholtz-AU: Jo. A pak by bylo int. Takže vaše proměnné lze změnit po průběh programu také. Oni nejsou striktně zadali. Je to velmi volně zadali. OK? V podstatě své proměnné mohou dělat, co chtějí, jak jsme trochu viděli s PHP. Mohou udělat nějaké šílené věci, tak je důležité, aby bylo dost opatrný. Pojmenujte své proměnné dobře. Pokud ne, najednou budete vypadat, "Počkej, myslel jsem, že to byl řetězec, a teď je to int, a já si nejsem úplně jistý to, co se tu děje. " Tak to je jen jednoduchý příklad ukazuje, jak proměnná může snadno změnit jeho typ nad průběh programu. 

OK. Tak by to mělo vypadat super, super známý. Tak to jsou naše smyčky v JavaScriptu. Ty jsou přesně stejné, s výjimkou namísto čtyř int i rovná nule, můžeme jen říci var i se rovná nule. A pak bychom mohli mít naši stejný druh kondice, stejný druh aktualizace, i a navíc funguje v pohodě. Takže čtyřky jsou stejné, chvíle jsou stejné, a to chvíle jsou přesně stejné. Stejný druh obecného formátu. Všimli jsme si, čtyři, závorky, konzole, je to všechno stejné. Také tam bude středník když se dostaneme na příklad kódu. Uvidíte, že je to docela podobně jako c. 

Pro deklarace funkce, opět, velmi podobné. Máme nějakou funkci, která říká, že je to funkce, a pak se název našeho funkce, a vstupy. A znovu, pokud si všimneme, my mít žádné typy tady vůbec. Je to tak? Jsme nic, co by tato rčení musí být ints či dvoulůžkové, nebo plave. Mohly by být, co chtějí. Co je důležité, je si všiml, že musíme napsat funkci předem aby JavaScript vědět, že To je vlastně funkce. 

Tak to je jen nějaký prostý součet Funkce, která vrací x nebo y, a poté, co je také v pohodě je to, že můžete skutečně přiřazení funkce k proměnné. Takže v tomto případě součet je nyní funkce, která vlastně dělá součet. Takže pokud si všimnete tady, máme funkce, název funkce, vstupy. Je to tak? Tady prostě funkce a vstupy. Tak tomu se říká anonymní funkce. A to je něco, co by mělo být nové pro většinu z vás, ne-li všechny. Takže v podstatě, co to znamená, že my ne třeba na jméno našeho Funkce v tomto případě. Můžeme jen říct, "OK, budu tuto funkci, která spustí, zde jsou jeho vstupy, a tady je co to bude dělat. " A zvláště, když jste přiřazování funkce nějaké proměnné že budete manipulovat, nemusíte nutně je třeba pojmenovat, protože budete se odkazuje jí touto proměnnou název, ne cokoliv funkce byla vlastně volal. OK? 

Takže pokud vidíme tady, my nějaké proměnné součet nyní která se rovná součet ze tří a pěti. A my bychom si to. A to by se prostě mít nějaký záznam, tři plus pět rovná počtu. To navíc bude jen spojovat bez ohledu na naši odpověď byla na řetězce. Také v pohodě, navíc mohou spojovat řetězce. 

Pro JavaScript, as s PHP, HTML, CSS a jak jsme řekli, Hodně z toho, že jsme druh převzít školicí kola off zde a vy máte hodně know jak skutečně pochopit tyto věci. Jsou mírně odlišné, ale nejsou tak cizí a že nemůžete Googlu věci nebo je vyhledat on-line na W3 školami. A my vám opravdu očekávají kluci, druh, experiment a učit se na vlastní pěst. Takže vím, že se to může zdát trochu méně důkladné než některé z věcí, c uděláme, ale to je ve skutečnosti z nějakého důvodu. Ale doufejme, že to není příliš odlišný, a to není ohromující. 

Takže pole v JavaScriptu, opět velmi, velmi podobné. Je to tak? Máme nějaké proměnné typu pole to se rovná prázdné závorky, a to je jen prázdná pole. To je často nazýván doslovný pole notace. To je jen jedna věc, kterou jsme jí zavolat. Vidíme-li pole dva tady, máme nějaké doslovný matice, která má tři elementy, že jo? A pak jsme některé var třetí prvek, který je někteří proměnná, která je právě bude držet tento řetězec, JS. 

Prvky, dobré všímat, jsou odděleny čárkou, stejně jako bychom očekávali. A také můžete k nim přistupovat, jako jsme to udělali v C, s tímto indexem notaci, že jo? Tak odlišné od PHP Nyní se vracíme se jen tak na mysli k věcem indexem. Stejně jako C, je to také nulový index. Mám pocit, že by bylo opravdu kruté v případě, že najednou se jeden JavaScript index, a vy jste museli úplně promyslet, jak si myslíte, že o pole. 

Jedna skvělá věc je, že místo mít, pokud vás někdy do-- Chtěl délku pole, Možná jste iterovat přes to dokud nenajdete nějaký konec, nebo byste jen vím, co to je. Vzhledem k tomu, JavaScript je velmi volná více způsoby, než jen typem, jak je vidíme tady, můžeme jen tuto pole větší, protože jsme se rozhodli. Když jsme si všimli pole tři má tři věci začít, ale pak najednou, jsme rádi, "oh, jen srandu. Jsme vlastně bude Aby to bylo 101 věcí. " Takže pokud jste někdy chtěli vědět Skutečná délka vašeho pole, vám to takhle. A budeme vidět hodně tohoto zápisu v příkladech, ale JavaScript to je typicky cokoliv Objekt, který mluvíš dot bez ohledu na druh funkce který chcete použít na to. OK? 

Takže v tomto případě, náš Objekt je pole dvě, a říkáme, že chceme Délka pole dvou. Takže to jen žádá, aby jako délce na to. A to se vrátit délku. Také něco poznamenat, že pokud si všimneme naše pole, na rozdíl od C, nemají být všechny stejného typu. To je mnohem více jako PHP. JavaScript je v podstatě jen jako tento zajímavý splynutí C a PHP. Tak jsme to dostat se do toho. Pro tuto chvíli, pojďme jen předpokládat, že vaše pole jsou v podstatě C jako pole, v tom jsou nulové indexovány. OK, tak to je všechno. Můžete také jen rozšířit pole na cokoliv index chcete. Vzhledem k tomu, to by se asi SEG porucha na vás nebo vám některé chyby, JavaScript je jako, "Ne, to je v pořádku. Mám to. Prostě jít rovně kam chcete. " 

OK, takže objekty jsou velmi důležité. Vy bude používat hodně z nich v P setu, pokud si dobře pamatuji. Takže věc, že ​​se jedná o podobně jako v C jsou Struktury. Takže si můžete myslet about-- při jdeme na příkladu doprava po tomto Myslím, že to učinit mnohem více sense-- ale v podstatě používat objekty na organizovat informace k výkladu. Když jsme mluvili o structs v C, často mluvit o studenta, který měl nějaký název, ID, house, víš, soustředění. A to je trochu totéž že používáme objekty tady. Je to jen organizovat obdobné informace. 

Můžete si také myslíte, že z nich as více podobně jako asociativní pole v PHP. Tak to by bylo trochu věci kde nějaký klíč s určitou hodnotou, velmi podobný PHP. Takže si můžete inicializovat některé prázdný objekt, jak vidíme tady, Jen s složených závorek. Takže pole jsou hranaté závorky. Prázdné objekty jsou složené závorky. Dobré rozlišení mít. A to jsou jen dva různé způsoby, jak nastavit vlastnosti. Tak tohle je druh mnohem více, aby je podobný PHP, s našimi asociativní pole, s naším klíčem, a naše hodnoty, přičemž tohle je-- budete vidět mnohem víc v JavaScriptu. To bývá konvence. A stejným způsobem, jako jsme to udělali array dva dot délka, to říká, "OK, dej mi to atribut tohoto objektu. " Je to tak? Takže stejně to bylo, "dej mi délka atribut pole dvou, " to říká, "dej mi trochu vlastnost našeho prázdného objektu. " Nebo v tomto případě jsme přiřazení do určité hodnoty zde. Ale můžete také přistupovat to tak. 

A pak tady je to jen ukazuje dva různé výstrahy. Tak tohle by se ukázat upozornění bude přesně stejný, je to jen dva různé způsoby přístup prvek, který chceme. Znamená to, že smysl pro každého? Mám pocit, že tenhle asi dává větší smysl, jen proto, že jdeme pryč PHP. Ale jak jsme udělat více příkladů, to je doslova přesně stejné. Hodně z toho je jen změnit v syntaxi. 

OK, tak příklady. Miluji příklady. Takže tady je nějaký CS50 proměnná, která je objekt, a ukládáme všechno informace o něm. Takže máme hřiště, instruktor, TFS, psets, a přelepený páskou. A tak jsme si všimli to jsou téměř všech různých typů. Je to tak? Takže objekty je možné uložit atributů různých typů. My můžeme myslet na tohle-- je to velmi obdoba naší asociativní pole v PHP. Takže klíč, hodnota, klíč, hodnota, klíč, hodnota, tak dále a tak dále. Co je zajímavé stejným způsobem že můžeme mít pole uvnitř pole, můžeme mít i objekty uvnitř uvnitř objektů, objekty, nebo skupiny. Ty nikdy omezen jen jediný z věcí. Můžeme dostat velmi Inceptionesque, jen dál do králičí nory tam. 

Takže pokud jsme si všimli, my mít nějaký kurz, který je řetězec, instruktor, že je to řetězec, a pole, int, a logická. Takže všechny tyto různé věci. 

Dobře, takže máme ještě jeden. Takže v tomto případě máme pole objektů. Tak jako objekt může mít pole v něm. Můžeme také pole objektů. To může být užitečné pro přemýšlet o podobný druh o tom, jak jsme měli hash stůl, jsme měli pole všech těchto rozličných druhy, které structs byly ukazatele na jiný uzly a kdoví co ještě. Ale v tomto případě jsme mají celou řadu objektů. Takže tohle je jako pole asociativního pole. Takže máme nějaké první prvek by je objekt s názvem James a dům Winthrop. 

Vy možná vzpomínáte něco velmi podobné tomu s poslední pset, kde, pokud vás vytáhl něco z databáze, První druh věc ve vašem poli byl všechny informace o První uživatel, který ji potkal, a pak jste měli na index do toho dostat své akcie nebo jejich mezipaměť nebo kdoví co ještě. Tak to je velmi stejný věc, jen malá změna v syntaxi, trochu změna slova, která používáme k jejich popisu. 

Takže pokud bychom chtěli, může někdo říct, me, co to ve střehu by to tady? Nebo co to kousek code by to pro nás? Diváků: Bude vám všechna jména. ALLISON Buchholtz-AU: Right, tak to bych jen upozornit všechny názvy protože by to projít chalupa i, tak to bych začít od nuly. Tak to bych, OK díváme v této první předmět, který je první drážka v našem poli. A to říká, "dej mi atributu, název tohoto objektu. " Tak jsme se jít sem, měli bychom scan, bychom si jméno, a my bychom vytisknout James Molly, a Carl. Jakékoliv otázky tak daleko? JavaScript bohužel ty budeš dělá hodně, jak se dívat na vašem vlastní, zjišťuje, syntaxi, potýkají s ním. Ale samozřejmě, že jsem pořád tady, úřední hodiny jsou vždy zde. Mohl bych být v úterý tento týden. Takže když už tam budete, pokud je to možné přišel mě navštívit tento týden. Bylo by to skvělé. 

OK, takže DOM je Document-Object Model. Tak to je jen způsob, jak že jsme rádi, že O tom, jak naše HTML a všechno uvnitř je organizována. To je moc něco, co bude pravděpodobně přijít na vašem testu. Vím, že můj rok, to bylo jako tady HTML soubor, vyplnit DOM za to. A stačí vyplnit maličkostí. Ty by měly být jednoduché body nadějně. Doufám, že budete see-- 

Diváků: [neslyšitelné] 

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

Diváků: Ano. 

ALLISON Buchholtz-AU: Takže se bude ptát použití vyplnit, co se děje pod tělem. Možná, že v těle, jsme některé divs nebo máme nějaké body, a budeme vás požádat, abyste vyplnit strom velmi podobně jako to. Takže budeme chodit přes to. Takže Document Object- Model je jen způsob, jak strukturovat a přemýšlet o našem HTML graficky. A také když se dostaneme do více JavaScriptu to bude Způsob, jakým jsme vlastně manipulovat jiný prvky na stránce. Potřebujeme způsob přístupu k jednotlivým z věcí, které v našem HTML, a tak to nám dává velmi beton standardizovaný způsob v různých webových stránek, k tomu, že. 

Takže pokud jsme právě projít to tady, samozřejmě náš dokument je jako celý náš soubor. To samozřejmě dává smysl že je to nejvyšší věc, a pak máme aktuální HTML, která odpovídá této značky zde. Také pokud jste v odrážka tagy správně, pak vytvořením této DOM stromu se stává super jednoduché. Takže máme nějakou hlavu zde. Máme nějaké tělo, které vidíme vyplývají mimo HTML, což je důvod, proč máme hlavu a tělo. V hlavě, jsme některé název značky, název značky konec, takže víme, že přichází po hlavě. A v našem názvu značky, máme Hello, world. OK? Tak to je celá ta levá větev ruka. A pak se na pravé větvi Zde vidíme, že máme HTML, OK jsme udělali tuto opěrka hlavy, díváme jen na tělo, takže máme nějaké části těla. A v to, jediný věc, kterou máme, je ahoj, svět. OK? Pokud bychom měli věci jako někteří držák p a poté ahoj, svět, a pak další držák p Goodbye, svět, budeme mít dvě bubliny spadnutí zde. Vzhledem k tomu, že jsou oba pod tělem, ale jsou to samostatné odstavce tomto případě. Tam je určitě praxe na které v předchozích kvízy, stejně jako spousta on-line na to. OK, takže to prostě nechá uvidíme, všechno pěkně a manipulovat věci velmi systematicky. OK? Víme přesně, jak přejít přes tohoto stromu, takže víme, co chceme získat přístup. 

OK, takže to je důvod, proč chceme aby tento druh modelu, takže můžeme použít věci, jako je toto, a my jsme pochopili, co znamenají, a oni jsou standardizovány ve všech věcech, které děláme. Takže název dokumentu tečka je jen Název our-- všech těchto jsou docela samozřejmý, Rád si myslím. Takže první tři příklady jsou jen říkám, "OK, dej mi Název této webové stránky. " Tak to vám dá to, co odpovídá názvu. 

Dokument dot tělo se bude dát co je v rámci těchto tělesných značky. Takže můžete manipulovat, že. A dokument dot tělo dot zadejte HTML je velmi kliďas, a možná není jako výborný intuitivní, ale vnitřní HTML odpovídá Toto právo je zde. Takže pokud jste někdy chtěli, aby manipulovat textu na stránce, obvykle budete dělat něco body tečkou vnitřní HTML. OK? Takže vnitřní HTML tendenci odkazovat na to, co je vlastně mezi těmito značkami. OK? A pak užitečné funkce. Takže pokud byste chtěli získat některé z nich, jakýkoli prvek, máme nějaký průkaz, třída jméno, nebo název tag. To je velmi podobné věci, které jsme dělali s CSS, že jo? Tam, kde máme nějaké voliče, že odpovídají buď tag, třída že jsme se jim, nebo ID. To je velmi hodně stejný cesta. Máte-li něco, co má nějakou třídu psa, a říkáte si prvky podle názvu značky, a dáte psa v there-- nebo líto, název třídy. Můžete dát tečku tam. Bude to vrátit všechny ty, prvky, se vám, že mají tuto třídu. Takže můžete manipulovat jen ty. Stejným způsobem, možná jen chtějí manipulovat nějakou hlavičku, tak někteří h1 záhlaví, jako my. Dalo by se dostat prvky podle značek jméno, protože h1 je jmenovka. A stejným způsobem, pokud chcete získat některé unikátní věc, můžete tak učinit get značku. Získejte element Id. A oni jsou vlastně spousta z nich. Jsou to jen jako tři velmi mnoho. Takže pokud jste online, as Budu podporovat budete dělat, a dělat nějaké výzkum na vlastní pěst, Určitě doporučuji hledá do všech z nich. Mohly by být super užitečné, zvláště když Chcete-li jen trochu manipulovat velmi specifické věci, aniž by bylo projít a vyzkoušet vyřadil všechno. 

OK, takže poslední věc je JavaScript události. Takže když jsem mluvil dříve takhle jít na webové stránky, a když najedete nad něčím, nebo přesunete kurzor myši nad něčím, něco stane. To je to, co jsme chtěli přemýšlet o tom, jak událost. Takže to, co máme, které by mohly být užitečné, tady je onclick. Takže můj byl na visení, který jsem si jistý, že je jen na visu. I ton z nich které můžete hledat. K dispozici je celý seznam on-line různých věcí které můžete poslouchat. 

Události ale JavaScript jsou v podstatě jen reagovat na věci že uživatel dělá. Je to tak? Takže vaše uživatel nemá něco, to je událost, a JavaScript bude reagovat však se vám to bude líbit. To bude reagovat odpovídajícím způsobem. Takže v tomto případě máme některé okno dot onload. Tak co to říká, je "počkat dokud naložený okno je. " OK? Takže když všechno je naložený, onload, pak můžete spustit tuto funkci. Takže když je všechno načten, jdeš mít nějaké tlačítko Hledat že dostane prvek Id, a tiskne co to element je jako tlačítko Hledat. A pak tu máme proměnnou, říkáme: "OK, onclick." Takže když slyšíme cvaknutí na tlačítko Hledat, vykonávat tuto funkci, která je ve střehu, jste klikli na tlačítko Hledat. 

Takže to, co se stane, je-- je to pěkný Trochu grafické znázornění zde. Takže naše zatížení dokumentů, to je naše onload, najdeme naše hledání tlačítko, které je tato. Hledáme pro naše tlačítko Hledat. A pak, když tlačítko Search je klepnutí, to odpovídá právě zde. Onclick. Pak jsme se konečně varovat naše uživatele, což je to poslední řádek zde. OK? Takže každý z těchto čtyř kroků jen odpovídá čtyři boxy tam na dně. Znamená to, že smysl pro každého? 

A pak jedna věc, kterou jsem prostě jít zmínit velmi, velmi krátce, abych Doporučujeme vám kluci jít podívat více do je jQuery, což je právě knihovna který je postaven na vrcholu JavaScript. Je mimořádně užitečné, protože s většinou knihoven. Existuje spousta funkcí. Takže v případě, že je vůbec něco, co Chcete-li udělat v JavaScriptu, váš první instinkt by nemělo být, že o, měl by ", jakou funkci I kód? "By to mělo být, "Ukažte mi někoho je to už udělal pro mě. " Vzhledem k tomu, v devíti případech z deseti, někdo to udělal už, a pravděpodobně to udělal lépe. Lidé tráví spoustu času dělat tyto, a JavaScript se velmi často používá, takže lidé jsou stále se snaží, aby to lépe. A jQuery má spoustu funkcí že bude pravděpodobně užitečné pro vás v konečném projektu, pokud jste dělat něco s web design. Jak jsem chtěl říct, "práce chytřejší, ne víc. " Pokud vy uděláte, bude to skvělé. Když jsme u Hackathon vůbec se mi nelíbí Chceme, abyste se všichni ve stresu. Chci, abys byl rád, "mám tohle. jQuery je mám záda. Nepotřebuji psát tyto funkce. " 

Takže jen dvě věci pamatujte, že jdu aby si kluci vypadat do jQuery na vlastní pěst. Vše, co jsem ti chtěl říct, je to dělá některé docela úžasné věci a může váš život mnohem jednodušší. Ale to, co chcete mám, je, co soubor že budete používat ji, budete chtít tyto dva řádky. Budete chtít skript JS jQuery dot JS. A vlastně váš zdroj bude nějaké URL. Pokud jste na Googlu jQuery, Google vlastně hostí všechny soubory pro vás. Takže si určitě chtít vstup, který její URL. Jen jsem si to tady Pro jednoduchost. To vše znamená, je-li k najít knihovnu jQuery. Je to masivní, takže nechcete hostit na vašem vlastním počítači pokud můžete vyhnout, což je důvod, proč jsme mají tendenci jen dát do URL, Google, že hostí všechny tyto soubory pro vás. OK? Google vám to, slibuju to tam bude. 

A pak cokoliv JavaScript soubor, který jste použití, takže je to jen nějaký externí JavaScript soubor, který používáte. Stejným způsobem, jakým odkaz na CSS soubory, je to stejný druh věci. To jen odkazy na soubor kde se vaše JavaScript je. A mám několik příkladů s jednoduchým JavaScript. Takže půjdeme přes to. A pak se v indexu JavaScript, což je soubor Sem napište JavaScript, To je druh obalu že máte na jQuery. Jsi skoro 99,9 procent času děje aby to do index.js souboru. Vzhledem k tomu, co to říká se, "Nespustit nic dokud dokument je ve skutečnosti ready ", což je přesně to, co chcete. Vzhledem k tomu, když váš dokument není připraven, a jQuery začne dělat věci, je to jen zmatek. Takže jste vždy chtějí mít tento obal. A pak se na věci, které jdou tam, I ponechávají vlastní studoval vašich kluci. 

OK, takže jsou tam nějaké otázky vpravo Nyní o JavaScript obecně? Nebo modelu DOM? Pokud tomu tak není, jsme některé pohodě příklady, které můžeme projít, že vy mi může pomoci kód. Ale já jsem také bude Super pěkné, a pokud máte nechci nic říkat pro ty, to je v pořádku. Mohu také jen dát příklady. Ale něco na PowerPoint, než jsme dál? Super. 

Mám pocit, že vy potřebujete energii. Takže si myslím, že budeme na začátek s mým například strany první. Máme tři příklady, máte možnost volby. Takže máme hodiny, kam jedeme, zavést skutečné hodiny, které je bude aktualizovat, jak plyne čas. Máme tuto skvělou funkci Twitter. Tohle-- víš co, vydrž. Chystáme se, aby to pryč. Bam. OK. 

Máme tu skvělou funkci Twitter tady, that-- já vím, že jo? Bude to skvělé. Jste kluci nadšeni? Která se bude počítat počet znaků, které jste opustili, takže když píšu právě teď, zřejmě stále říká: 140, ale my víme, že to není tento případ. A pak se s naší poslední tady, klikněte zde na party. Co se stane, je, když klikneme, pozadí je bude měnit barvy. Takže vy máte své možnosti který z nich chcete udělat jako první. Slibuji, že budu to brát velmi snadné na vás. Mám pocit, že každý je druh toho jen velmi nízké klíč dnes. Takže budu vás provede jak budeme realizovat všechny tyto. Chcete-li odbíjet se tím, že je to skvělé, ale já pocit, že každý je trochu unavený. Tak jsem si jen chodit vás prostřednictvím těchto příkladech. Ještě máme něco, co bychom chtěli udělat jako první? Každý, kdo? No preference? OK. Víš co? Jsme na stranu. Mám pocit, že vy potřebujete little-- tak, uděláme nejprve jedna ze smluvních stran. OK. 

Takže to, co máme here-- to je nemělo být. Teď je to dobré. OK. Takže to, co tu máme, je jen jednoduchá stránka HTML že vy všichni měli být super obeznámen s ze svých posledních dvou psets. máme typ doc zde. Si každý může vidět? OK. Super. Máme HTML samozřejmě. Máme nějakou hlavičku, která je spojeny s stylů, které jen dělal můj font pěkný a velký a odvážný. Takže se nemusíte bát, že. 

Máme nějaké tělo s Id pozadí, OK? Vzhledem k tomu, že budeme mít změna pozadí. Takže, když měníme pozadí našeho těla, které si pamatujeme z před dvěma týdny když máme co do činění s webovými stránkami. Takže dobré mít to. A máme nějaké Id rovná party. Tento h ref libra prostě znamená, že to bude chodit na stejnou stránku. A zde na párty, což je důvod, proč, když jsme se na něj, to by se mělo změnit barvy, naštěstí. 

A pak máme nějaké skript tady to právě souvisí s tímto dot JS stran Soubor, který je proto, že prázdný jsme nic neudělali. A je to tak smutné. Ale velmi brzy, bude to změní barvy, a to bude úžasné. 

Tak jsem jen tak, aby vás lidi díky, jak bychom mohli tento přístup. Takže první věc, která bychom mohli chtít udělat, pokud měníme pozadí tělo, první věc, kterou bychom mohli chtít udělat, je skutečně chytit co tělo je, že jo? Proto chceme, aby součet, dotazy pozadí, a pokud si všimnete, Jen jsem automaticky stačí začít psát. Na tom není nic zvláštního, že my je třeba udělat pro naše soubory JavaScript. Můžu začít deklarování proměnných, a vyhlášení náhodné funkce. A je to mnohem víc zdarma formulář. Je to jako s C, dali jsme vám všichni Tato tvrdá pravidla, a jste vyrůstal, takže jsme rádi, "jít vpřed. Buďte svobodní. Dělejte si, co chcete. " A to je to, co je JavaScript. Takže máme nějaké zázemí zde. S naší DOM modelem, my víme, může dělat dokument dot dostat prvek, a pokud si všimneme tady, Naše tělo má ID. Je to tak? Takže můžeme se dostat dokument Id, a tady je to jednoduchý. Jaký je náš Id, že chceme tu? Diváků: Pozadí. ALLISON Buchholtz-AU: Pozadí. Perfect. A středník na konci. To se nezmizela dosud. Stále je potřeba si středníky. OK. Tak to je naše první. A když jsme se na tlačítko něco, čím Chcete aby se něco stalo, ne? Takže bychom mohli chtít nějaké proměnné že čeká na kliknutí. To, co budeme dělat, je, že se chystáte aby naše spojení více podobný tlačítku. Takže budeme mít nějaké tlačítko, které rovná se dokumentují dot dostat element Id. A když mluvím o klikněte na odkaz nebo klikněte zde na párty link, co by mohlo být tady moje ID? Party. Správně. OK není tak zlé tak daleko. Každý, kdo si to, co děláme? 

OK, takže teď máme tlačítko, a my chceme Co se mění, když jsme se na něj klikněte. Takže pokud si vzpomeneme z naší aplikace PowerPoint, velmi jednoduchá věc, kterou můžeme udělat je jen tlačítko tečka onclick, že jo? A to bude rovnat nějakou funkci. To je anonymní funkce. A to jen as-- ve skutečnosti, že jsem bude, aby to trochu větší. 

Takže to, co jsem udělal je zde říkám, OK, když klikneme na tlačítko náš, což je tento odkaz, který jsme právě uvedené, budeme provádět tato anonymní funkce. Nepotřebujeme žádné vstupy. Nezajímá nás, co uživatel říká. Když na něj kliknete, jsme bude dělat, co chceme, což je změnit barvu pozadí. OK? Takže to je důvod, proč nemáme žádné vstupy, budeme muset tuto anonymní funkci. A teď jsme vlastně bude napsat tuto funkci. 

Takže je tu spoustu způsobů, jak by mohla vygenerovat náhodné barvy. Způsob, jakým jsem to udělal, bylo, aby generovat tři náhodných čísel a převést je na RGB triple. Takže to jen ukazuje vám některé v pohodě věci, které pokud jste jako, "oh, Musím pro generování náhodné číslo, "když to Googled, to je to, co byste našli. 

Takže máme tři různé věci, var, už zase červená, zelená. Je to tak? To jsou tři věci, které tvoří barvu. Modrá, červená a zelená. Super. A to, co můžeme udělat, je, že víme, že musí být mezi 255, a pokud jste se podívali na některé generátor náhodných čísel, byste mohli dostat něco jako matematika dot náhodný, který, když se podíváte na to vrací na nějaké číslo mezi nulou a jedničkou. OK? A to, co čísla co je v našich RGB třílůžkové jít mezi tím? Zero a co? Co mohou jít až do? 255. Takže pokud math dot náhodný jde mezi nulou a jedničkou, Jak můžeme chtít změnit toto? Diváků: Time? ALLISON Buchholtz-AU: Jo, přesně tak. Takže čas je 255. 

Diváků: [neslyšitelné] Je to jako [neslyšitelné]. ALLISON Buchholtz-AU: Math dot náhodný. Diváků: cool. ALLISON Buchholtz-AU: Ano. JavaScript jen se o vás stará. OK. Takže, co můžeme udělat, že pro všechny z nich. Je to tak? Math dot náhodné časy 255. Rozumím. Super. Takže to znamená, že tento může nevrátí celé číslo. Je to tak? Možná, že jsme si nějaké číslo mezi nulou a jedničkou, a to způsobuje, že se mírně být off, a naše RGBS nemůže být plováky. Musí být ints. Takže pokud jste se pokusili to, bylo by to asi nějaké nestabilní chování. Bylo by to trochu funky. Takže to, co děláme, je, že chceme, aby se Ujistěte se, že tyto jsou zaoblené, a vy mohl projet v obou směrech. I zaoblené s podlahou. Takže jsem vždy jistá že se zaokrouhluje dolů. Ale jít pryč, jak je to jednoduché bylo jen dostat náhodné číslo, Jak si myslíte, že jsme by mohl patro toto číslo? Je to velmi podobné. Nějaký nápad? Takže pokud náhodný bylo jen matematika dot náhodné, takže myslíš, že bychom dělat podlahu? Math dot podlahy. A můžete si také udělat matematický dot strop. Kolo je trochu nejasný proto, že ne vědět, zda se zaokrouhlit nahoru nebo zaokrouhlit dolů. Takže obvykle jsme se vždy dělat matematiku dot podlaha, matematika dot strop. Ale honestly-- 

Diváků: Má podlahy kolo dolů? 

ALLISON Buchholtz-AU: Floor kola dolů. A to je jen výběr z mé strany. 

Takže teď máme tři čísla které byly náhodně generované, a to, co budeme dělat teď, je, že jsme jen tak pro změnu pozadí. OK? Takže jsme už máme pozadí druh uložena V tomto prvku s názvem pozadí. Takže to, co si všimnete, je, pokud jste hráli asi s tím, Chceme-li změnit styl. A to je trochu něco, co byste Google a zjistit, Líbí se mi, jak změnit barvu. 

Ale způsob, jak získat přístup tato barva je pozadí dot styl dot pozadí. Tak to říká uveden tento objekt, pozadí, který se odkazuje na které element Id tam, budeme dívat na styl v rámci stylu, budeme se podívat na pozadí. OK? A pokud jdete, a aby se tím probral, to by mohl dělat trochu větší smysl, ale to je v podstatě jen říkám, "Dej mi to velmi specifický atribut z toho, co jsem definovány dříve. " Takže to, co jsme jej změnit, je někteří RGB, protože to dává smysl. Používáme RGB třílůžkové, že jo? A my have-- chci ujistit, že jsem ten správný počet citací zde. Takže to, co děláme, je máme RGB, a budeme to-- to je jako zřetězení, což je červená. A pak chceme nějakou čárku. A pak chceme a zelená, pak některé čárka, a některé modré. 

Takže tyto plusy jen Myslíš jako zřetězení. Tak to je právě vytvoření této Řetězec, který se děje uvnitř RGB. OK? 

Diváků: [Neslyšitelné] a poté green a pak červené. 

ALLISON Buchholtz-AU: Jo, protože jsem pokazil, že až. Že jeden je v pořádku. Oh, vydrž. Ne. Protože potřebuji, aby se ujistil, že jsem všechny tyto práva. Tak jsem se vysvětlit uno momento. Zelená, modrá, perfektní. Teď jsem udělal. Věřím, že. 

OK. Takže to, co to je, je to, že na pozadí se bude nastaven na určité řetězce. Je to tak? Což je to, co tu máme. Bude to být nějaký RGB 255 čárka 255 čárka nula, nebo cokoliv číslo, které mají tam. Takže jsme tady, máme nějaký řetězec. A to, co chceme udělat, je, že jsme to druh dynamicky vytvářet že když jsme vlastně tento program spustit. Takže to je nějaký řetězec. A zřetězí ji hodnota, která má červený, který zřetězí ji čárka, která ji zřetězí s tím, co je zelená, a tak dále, a tak dále. OK? Až do samého konce, což je zavírání závorek tohoto RGB zde. OK? 

Tak co to bude generovat je nějaký příkaz opravdu že je RGB ze tří čísel že na pozadí je nyní nastavena na. OK? Tak uvidíme, jestli to funguje. Doufám, že to dělá, protože pokud to není, já budu skutečný smutný. Oh ne. OK, vydrž. Rozhodně pozadí dot styl dot pozadí. Já jsem rozhodně nechybí Něco malého. Nezdá se vám, že kluci nenávidí? Když je to jen malý trochu chyba? Všemohoucí pozadí. RGB. 

Diváků: [neslyšitelné] ALLISON Buchholtz-AU: Ne. Snažil jsem se to před třídou. Mám všechno, co jsem dělal předtím třída případ, že bych byl rád, "Počkej, co jsem udělal špatně?" Protože jsem byl rád, "budu asi nepořádek to se v určitém okamžiku. " A zelená. Vše vypadá, že je to správně zřetězené. OK. 

Diváků: [neslyšitelné] 

ALLISON Buchholtz-AU: Oh, tam jdete. To je to, co jsem potřeboval. Podívej se na to. Tiffany zachránit. Perfect. OK. Nyní se podívejme, jestli to funguje. Ach můj Bože. OK. Vydrž. 

Diváků: Prostor po druhé plus. 

ALLISON Buchholtz-AU: Který z nich? Ale počkejte, vydrž. Oblečení Space? 

Diváků: Second plus green zřetězení. ALLISON Buchholtz-AU: Oh. Diváků: Není místo Po Plus, jo. ALLISON Buchholtz-AU: Vy Nemusíte to, ale- Publikum: Oh, vy ne? ALLISON Buchholtz-AU: Vypadá to pěkně. Diváků: OK. OK. 

ALLISON Buchholtz AU: Uvidíme, jestli to funguje. OK. Já jsem samozřejmě nedaří na toto demo, což mi připomíná přednášky druhý týden, ale vím, že to bude fungovat. Vím, že to bude fungovat. Tak blízko. Pokud jsem omylem smazané můj skript na tento jeden. Ne, to je strana dot js. OK vydrž. Budu kopírovat to, a já jsem taky jen tak vymazat všechno, proto, že jsem měl tento pracovní dříve. 

Slibuji, že to funguje. Pokud ne, ukážu vám, co Tommy to je. A tam. 

Diváků: Jste odkazování stranu dot CSS, a to je večírek dot JS. 

ALLISON Buchholtz-AU: Ah, dobře tady je dot js stran. OK, co jsem udělal jinak? OK, uvidíme, jestli to funguje teď. Bam. Tak já nevím, co jsem udělal jinak, ale to je to, co by se mělo stát. Kinda cool. Jsem kliknul na to, jako, navždy. Ale můžeme vyzkoušet a vidět to, co jsem udělal jinak, že to jeden měl. Nevím o vás kluci, ale to vypadá v podstatě to, co jsem právě napsal. Tam byl pravděpodobně chybí středník někde je moje věc. Vlastně po, myslím, že jsem chyběla středník tady ve skutečnosti. Ale já jsem neviděl, protože to bylo mimo obrazovku. 

Ale pokud si všimneme, je to docela Kolik přesně to, co jsem právě napsal. Myslím si, že asi nejtěžší část o je to jen druh této věci pravdu tady, porozumění co to dělá tam. Tyto druhy věcí se naučíte opravdu jen Googling a poctivě Jen se snažím. Pokud si myslíte, že je to nějaký atribut, tam asi je. Tak si to vyzkoušet. Podívejte se, co se stane. Jak už jsem řekl, je tu spousta experimentování s JavaScript, a PHP, a vše, co věci, a to zejména CSS. To je jediný pravý způsob, jak se to pochopit. 

OK, tak po tomto fiasku se stranou dot js, máme dvě další možnosti. Máme hodin nebo Twitter. Jsou to oba zajímavé. Možná, že ne zas až tak zábavné jako strana, který měl v pohodě trochu roztřeseně věc na závěr. Myslíte si kluci nějaké preference? Diváků: Clock? ALLISON Buchholtz-AU: Clock? OK. Super. 

Takže znovu, máme prázdný soubor JavaScript. A jak vidíme tady, my mají některé velmi jednoduché HTML. Máme stylů, že právě formáty, jaké by to mělo vypadat. Máme div se Id z hodin, což jen říká, "mělo by to být hodiny." A máme odkaz v našem souboru JavaScript že to vlastně bude vytvářet naše hodiny pro nás. Vzhledem k tomu, super věc je, že můžete nastaví JavaScript automaticky aktualizovat sám. OK? Takže místo toho, čekání na Uživatel zasáhnout Aktualizovat na stránce takže se můžete dostat aktualizováno čas, JavaScript Můžete aktualizovat však líbí. 

Takže, jak s naší poslední, jsme chtěli přístup do našeho zázemí, je to tak? Tak co si myslíte, že by mohl být První věc, kterou chceme dělat tady? Pokud máme trochu jít pryč Tento druh paradigmatu tady? Pravděpodobně Chceme přístup na naše hodiny, ne? Takže máme nějaké var hodiny, což equals-- co si myslíme, že to bude? Dokument dot získat prvek by-- I také láska Sublime-- Id a naše Id je hodin. Středník. Musím se ujistěte se, že si ty středníky této doby, protože mám pocit, že byl problém naposledy. OK tak, jak jsem chtěl říct se snahou mít JavaScript obnovit sám, Tam je to skvělá funkce, I vím, že to přišlo vhod v loňském roce, Nejsem si jistý, že to přijde vhod za to pset, ale je to jen set interval. A to je ve skutečnosti vlastně v pohodě, pokud vy něco udělat s časem, nebo stále aktuální informace. Na internetové stránky pro finále projekt, je to pravděpodobně funkce, kterou chcete dostat Super zvyklí. Takže to, co nastavit interval dělá, je, že jdeme, aby to funkce, a jak často by mělo volání této funkce. OK? 

Takže v tomto případě budeme jen tak vytvořit nějaké anonymní funkci znovu, OK, to je dostane Naše data, a náš čas, a aktualizovat věci a zobrazení. Takže budeme dělat starosti. Budeme jako vytvářet hodiny zde. Ale to, co potřebujeme, je, jak často ji aktualizovat. Takže v tomto případě, je to jen milisekund. Takže jsme jen tak dělat 100 milisekund. Samozřejmě, zcela libovolné. Pokud byste chtěli, aby aktualizaci mnohem pomaleji, mohl bys. Můžeme flákat s zadaném intervalu, jak velký náš interval je poté, co jsme si pracovní hodiny, což doufám, že budu dostat. Takže je to jen řekl, "OK, call tato funkce každých 100 milisekund. " OK? To je vše, co dělá. 

Takže to, co chceme naši funkci udělat, je, že chceme mít nějaké datum a nějaký čas je to, co budeme mít. Takže můžeme začít s našimi datum rovná něco, a náš čas se rovná něco že ještě nevím. Nebo vlastně, jen je třeba datum, protože datum bude zahrnovat všechno. Opět, pokud jste právě Google něco o to, co chcete dělat, pokud nám napíšete, "OK, Chci se dostat čas pomocí jazyka JavaScript, "to vám to skvělý Funkce tzv datum get. Doslova, většina věcí že chcete dělat, JavaScript je bude mít to dělá už za vás. Takže je to doslova jako nový získat data, což je creating-- nebo nové datum, rather-- který generuje nějaký objekt, který představuje datum. 

A to, co budeme dělat, je zde to je-- budu psát to, a pak vysvětlit, co to dělá. Takže budu ujistit, že jsem si to právo. 

OK, takže to, co tato funkce dělá, je, že jsme jenom vytváření HTML, který je ve skutečnosti jít v našem div id z hodin. Tak co to bude dělat právě vytváří nějaký řetězec, OK? Která se pak bude transplantovány do našeho HTML. V podstatě to, co to bude dělat, je co we-- to, co jsem vám ukážu, je, že ať říkáme HTML je, budeme nahradit tento text zde s tím, co je HTML. Tak to bude, aby nám změnit náš hodin dot HTML od být jen text této by měla být hodiny, aby skutečně ukazuje čísla a věci, které se staráme o, a skutečně hodin. 

Takže to, co budeme dělat, je, že jsme začnou vytvářet tento HTML. Takže stejným způsobem, jako jsme použili udělat a rovná se pro celá čísla, nyní můžete udělat pro smyčce, kromě toho, že to bude jejich zřetězit. Je to tak? Jak jsme viděli u výrobců tečka JS, to prostě zřetězuje všechny tyto věci dohromady. Takže si můžete spojit různé kousky HTML z proměnných, nebo kousky řetězců že píšete ven sami, a to jen Opravdu vám umožní dynamicky generovat HTML, což je docela v pohodě. Takže pokud máte něco velmi uživatelsky specifické, to vám umožní udělat. 

Takže musíme HTML, aby budu pokusit se ujistit, že jsem si to právo. Takže budeme dělat nějaké h1 záhlaví. Takže to, co je důležité, aby tady si uvědomit, je to, že je to ve skutečnosti jen HTML. Je to tak? Píšeme aktuální HTML kód tady, je to ne jen řetězec v normálním způsob, že bychom o tom přemýšlet. Takže máme nějaké HTML. To je považováno za řetězec zde však. A my datum dot-- my chtějí dostat naše hodiny. Opět platí, že pokud jste se podívat up něco o datu, to by ti to všechno jsou atributy, které datum má. A tady je to, co můžete použít na to. Takže to asi má věci, jako je dostat hodiny, a dostat minut, a dostat sekund, a získat milisekund, a kdo ví, co ještě mají. Ale když se podíváte do dokumentace, bude to všechno tam. 

Takže máme dostat hodin, a pak jsme chtěli zřetězit že with-- nejsem bude pohybovat to tady. Takže pokud budeme generovat právě teď, jsme vlastně generování čas, ne? Máme hodiny, a pak to, co je mezi hodinami a minutami? Máte středník, že jo? Takže chceme udělat nějaké středník zde. A pak chceme, aby se naše minut, takže stejně že máme datum dot dostat hodin, Jak můžeme dostat naše minut? Je to doslova datum dot dostat minut, které jsem tak trochu rád. Je to jako, "ach, jak získám minut? " Jen jsem si své minuty. 

OK. A pak tu máme další dvojtečku zde. A pak, pokud chceme, aby se naše sekund, jak by jsme se dostat naše druhá? Datum dot si sekund. Myslím, že je to docela v pohodě. A co je důležité, aby si uvědomit, že my také je třeba, aby zde zavírat HTML tag, protože to by mělo i nadále být validní HTML, tak h1. Super. 

Takže po to, že můžeme udělat hodiny dot vnitřní HTML je roven HTML. OK? Tak si, jak jsem řekl, vnitřní HTML v podstatě bere, co je mezi dvě značky, které jsme si povídali o a vložky nebo manipuluje co je tam? Takže to, co to dělá, pokud se vrátíme k naší hodiny, je, že hodiny se týká vše v rámci této div. Jedná se o vnitřní HTML tohoto Id hodiny div. A tak to bude to změnit na HTML, které jsme právě generované, který, která, doufejme, doufejme, doufejme, ukáže čas právě teď. Uvidíme. Samozřejmě. Tolik technických problémů. Allison jen--, že jsem off mou hru dnes kluci. OK, to funguje. Hodiny dot vnitřní HTML. Bylo to HTML Opravdu? Také je to, co se děje. Když nemůžete vidět něco, co, Stačí se podívat na zdrojovém kódu. OK. Myslíte si, chci vědět, cool práci kolem že budeme dělat tady? 

Diváků: Můžeš dělat velká písmena? Velká písmena? Protože máte dostat hodin, a pak se minut. 

ALLISON Buchholtz-AU: Je to je dostat se hodiny a get-- oh. Ty are-- Zlatou hvězdu. Je to test, kluci. Slibuji, že to funguje před třídou. 

OK, ale něco v pohodě vědět, je, že můžete, pokud někdy also-- vaše externí soubory Začínám být trochu blázen, si můžete také jen dát je rovnou V tu, která má tendenci věci do pořádku. Kromě toho je jako opravdu ošklivý. Samozřejmě formátování všechno. Ujistěte se, že je to všechno pěkně. OK. 

Chtěl jsem dělat všechny ty skvělé dema, a oni prostě nevyjde. OK. Script var hodiny. Tak jako tak, co je důležité, je že se jedná o obecný způsob že byste formátovat JavaScript. Jak můžete vidět, může to být velmi vybíravý někdy, i když to bylo doslova pracovní před dvěma sekund. Nebo před ne dva za druhé, ale velmi, velmi nedávno. 

Tak, aby vám ukázat, co by to mělo vypadat, a ukázat vám, že nejsem blázen, a že vše je přesně Totéž, to je to, co by to mělo vypadat. Ty prostě dělat tuto horní část tady, a pokud se díváte zdrojový kód stránky, pokud si všimnete, že udělal nějaké šílenější věci, zjednodušila jsem to. Také úvěr Tommy McWilliam, kdo vlastně mi pomohl vytvořit tyto příklady, což je důvod, proč já vím, že fungují. Vzhledem k tomu, Tommy je mistr JavaScript. Ale pokud si všimneme, máme nějaké set. Máme hodiny funkci zde. To je vše, JavaScript, který jsme právě napsali, nebo některé z nich. Právě jsme napsal tenhle tady. A má navíc funkce, která právě Podložky to tím, že nulu dříve písmeno nebo před číslo, pokud je to jen jeden z nich. Takže pokud si všimnete, je to docela Kolik přesně to, co jsme právě napsali. Máte nějaké proměnné hodiny, které má naši element, získat element podle ID, což je hodin. Máme stanovený interval Funkce, která je anonymní funkce který provádí toto vše. Máme několik začíná řetězec HTML, které jsme pak dynamicky generovat tím, že někteří h1 záhlaví, zřetězení se dostat hodiny, a Naše tlustého střeva, a jak se minuty, plus další tlustého střeva, a naše sekundy, a nakonec končí HTML pro něj. A pak jsme se aktualizovat naše hodiny dot vnitřní HTML HTML, a my aktualizovat každých 100 milisekund. OK? 

Viz Slibuju, že nejsem blázen. Nevím. Nevím, proč se mě nemá rád. Mám pocit, že vypadá stejně, ale zřejmě to mě nenávidí. 

Tak uvidíme, jestli kolem tři půjde lépe. Jsme asi vidět. Nejsem si jistý, jak to půjde. Je každý alespoň získání cons, jako jen obecné téma JavaScriptu, i když? Doufám, že je to nejméně vhodné, více než o tom, že je to trochu vybíravý. Ale váš problém set bude velmi zábavné. Bude to skvělé. To nebude úplně jako únavné protože to, já si nemyslím, že. Budete skutečně dostat do vidět opravdu cool věci. 

Takže v neposlední řadě, zkusíme Twitter jeden. Já jsem opravdu strach teď, kluci. Já nevím, jak to půjde. Ale jen proto, aby vám něco více chuti, a to je vlastně manipulaci řetězce a vstupy, co budeme dělat je, pokud můžeme všimnout, tu s HTML-- tahle má trochu víc-- máme nějaké textovou část, která odpovídá na tuto oblast textu zde. OK? A že má ID textu. Změněný jsme to trochu s některými šířkou a výškou že jsme předem určená, a my jsme H1, což jen je naše jediná záhlaví, které představuje odešel naše postavy. Dali jsme mu nějaký ID zbývající znaky, a pak máme nějaké skript tady, což jsem opravdu doufá, že potřetí to kouzlo tady, chlapi. 

Takže to, co chceme dělat, ve stejném obecném duchu že jsme udělali s hodinami dot JS a strany dot js jak jsme si všimli, je, že jsme začali by skutečně chytne věci, které se staráme o, ne? Takže v tomto případě, jsou tam dva věci, které se staráme o, OK? Jedna věc, že ​​jsme vlastně trochu hledá do a čerpání dat z, a jedna věc, která jsme skutečně mění. Takže tam je náš HTML. Pokud je to naše webové stránky tady, co je údaje, které jsme při pohledu na? Bude to být cokoliv Text v našich krabicích, že jo? Tak co jsem psát zde. To je to, co chci vědět, nebo to je to, co chci podívat. A to, co se bude měnící se na našich webových stránkách? Zbývající znaky. Tak stejným způsobem, chceme začít tím, že inicializace proměnných že vlastně držet těchto prvků. OK? Takže pokud budeme mít některé var to je náš text prostor, a máme nějaké var, která je zbývající. Je to tak? Tak to se bude držet tyto dvě věci. Takže stejný druh věci, Dokument dot-- OK, já jsem chystá se ujistil, je to chodit do práce tentokrát. Jsem velmi neoblomný. OK, takže pokud chceme, aby naše textová oblast, podle k našemu HTML, co je naše identifikátor? Jaký je náš Id? Je to jen bude textu, protože vytváří naši textovou oblast, OK, a naše Id je text, tak to je jak můžeme uchopit to, co tam je. OK, středník. Budu být super přesné o tom, proto, že chci, aby to fungovalo tentokrát. OK, dělají to samé, dostat element Id. Já jsem opravdu přemýšlel, co má způsobil další dva zkazit. OK, pak se v tomto jednom, to, co chceme získat přístup? Co je to tady náš Id? Máme další Id v náš HTML, co je to? Diváků: zbývajících znaků. ALLISON Buchholtz-AU: Zbývajících znaků. 

OK. Super. Tak jsem jen tak napsat to opravdu rychle. Já jsem prostě jít psát to na druhém místě. Tak textová oblast. Co je zajímavé, je B tam function-- spousta funkcí, které nejen odpovídají vašim myš, ale vaše klávesnice. OK? Takže můžete říct, když některý klíč lisované, můžete dělat věci, jako to. Takže ten, který jsme s použitím se nazývá na klíč up, který říká: "pokud jste stisknutím libovolného tlačítka na klávesnice, když uživatel pozvedlo Jejich prst off toto tlačítko, a klíč se stal nelisovaný, pak budeme něco dělat. " OK? Tak to má smysl, že jo? Vzhledem k tomu, každý znak jsme typu, jdeme muset zvednout prsty off z toho, takže když klíč jde nahoru, můžeme poznat pro snížení Zbývající naše postavy. 

Takže máme nějaké na klíč nahoru, a stejným způsobem, budeme říkat, "OK, když to uděláme, my se chystáte vytvořit nějakou funkci, která bude trvat e ", v tomto případě, a to, co chceme udělat, je výpočet počtu zbývající. OK, takže pojďme prostě začít vytvořením proměnné. Takže máme nějaké proměnné r, že to bude reprezentovat kolik znaků, co nám zbylo. OK? Víme, že začneme s 140, a chceme-li vědět, řekněme, na dobu trvání této Řetězec, který to už vstup, Myslíte si, kluci mají nějakou představu, jak bychom mohli udělat, že? Jen na základě pryč zřejmý věci, jako kdybychom chtěli hodin, jsme si hodiny. Víme, že náš objekt je textová oblast, ale mohl byste kluci přemýšlet o tom, co by mohlo přijít po něm? Nějaké nápady? 

Tak tohle je trochu méně intuitivní, ale to je hodnota délky tečka. Tak mi dej trochu hodnotu atributu, že je vlastně délka tohoto řetězce. Takže to bude říkat, "OK, dívám v celém tohoto řetězce v textovém poli, a budu vyprávět vám, jak dlouho to je. " Vzhledem k tomu, pokud si vzpomeneme řetězce jsou opravdu jen pole, takže můžeme jen vzít délku z nich. Takže máme to. Super. 

Poté, co chceme udělat, je, že jsme nikdy nechci, aby uživatel pro vložení více než 140 znaků, je to tak? Vzhledem k tomu, řekneme-li, jako: "Ach, vy mít pouze tolik zbývá, " a pak ať jim to Tak jako tak, jsme ležel. A to je další věc, která JavaScript může být opravdu dobrá pro, je validace uživatel a ujistěte se, že vaše Uživatel zapadá do všech pravidel že jste jim poskytnuty. Takže pokud chcete dělat věci, jako je vytváření jisti, že někdo vstup jejich e-mailovou adresu, nebo ujistěte se, že když se zadejte dvě hesla, které uzavřeno. JavaScript může udělat. Ty by se něco takového, "když odesláním formuláře, "nebo podobně, "Když tlačítko Odeslat formulář je klepnutí, zkontrolujte všechny tyto věci. " A to můžeme udělat JavaScript. Tak to je právě to, co budeme dělat tady. 

Takže to, co by mohlo být způsobem, jak zjistit, jestli že jsem už více než 140 znaků? Co se stane, aby Naše hodnota R, pokud se snaží? Bude to být negativní, ne? Nebo to bude méně než nebo rovna nule. Takže můžeme použít v případě, že je stejně jako všechno ostatní. OK? A máme nějaký text plochu dot hodnoty, a to, co tady děláme je, že jsme jenom cutting-- co je to? Promiňte. Ten, my prostě chceme se vrátit false. Dostal jsem zmatená. Všechny roztřepené z věcí nefunguje. OK, jen chceme, aby return false, a pak jsme chcete zobrazit zbývající znaky, ne? Tak s hodinami, jsme udělali něco s vnitřním HTML, ne? Tam, kde jsme si stanovili, že se rovná některé variabilní, takže to, co můžeme dělat? To, co se měníme vnitřní kód HTML? 

Diváků: Zbývající? 

ALLISON Buchholtz-AU: Měníme zbývající. Dobře, a co my Chcete nastavit rovná? Je to bude r, protože to by měla být zbývající naše postavy. OK? Takže jsem opravdu nervózní, aby zjistil, zda to funguje teď, ale uvidíme. Nechte to. To je opravdu rychlý. [Neslyšitelný] OK. Opět platí, že já jsem jen ukážu. Z nějakého důvodu, moje rozhodne, že nebude fungovat, ale to, co jsem vám ukážu, že to je-- oh jsem měl dát, že. OK, jsme si všimli stejný druh to tady, jak se na oblast textu. 

Také, pokud máte chlap oznámení, je-li to někdy něco, co chcete dělat, a nevíte, jak to udělat to, stačí kliknout na Zobrazit zdrojový kód stránky, a oni ti to říct. Někdy to bude šifrována. Pro vaše pset jsme šifrovat všechno, tak to prostě vypadá jako blábol. Ale jestli je to vůbec vážně pohodě webové stránky, které se vám líbí, pokud jste právě na tlačítko Zobrazit zdrojový kód stránky, to ti říct, jak na to. Takže znovu, pracovat chytřeji, ne víc. A jak vidíte tady, všichni tyto věci jsou stejné. tohle tady jen trvá nějaký podřetězec to, že jsem zapomněl, přesně to, co to dělá. Ale to samozřejmě zabere nějaký podřetězec hodnoty od nuly do deseti, a vrátí false, co by mělo přestat uživatel od zadání už, a pak samozřejmě aktualizuje vnitřní HTML tam. 

Super. Tak velké odebere aways ode dneška, experiment, podívejte se na zdrojový kód protože to bude vám hodně, a všichni, někdy JavaScript může být těžké pracovat a ne vždy pracovat tak, jak to očekáváte, ale jen snaží udržet protože Slibuji, že ano. Slibuji, že všechny z těchto příkladů pracovali před třídou. Nechápu, co se stalo. Doslova jsem všechno stejné. 

A ještě jedna věc, kterou chci, aby ukázat vám kluci, které mohou být super užitečný Je in-- co pracoval předtím? Máme párty do práce, ne? Myslím, že ano. Ano. Udělali jsme. Děsivý. OK, takže jedna věc, která Měli byste vědět je log konzole, které jsem hovořil. Takže konzole dot protokolu ahoj. Tak to je druh JavaScript ekvivalent printf. Takže pokud jste někdy chtěli, aby zkontrolujte, zda vaše proměnné nebo zjistit, co se tam děje, co se můžete udělat, je, pokud budeme kontrolovat prvek, je to, co budete chtít jít k, a jdete do konzole, uvidíte, že to vytiskne ahoj. 

Takže jsme mohli mít tisk, co jsme chtěli. Pokud bychom chtěli, aby tisk pozadí dot styl dot background, měli bychom být schopni vidět RGB triple, že přijde. Nebo ne. Zapomněl jsem přesně, jak se vytisknout proměnné, jako je to, ale měli byste být schopni vytisknout takové věci. Že bude velmi užitečné pro vaši pset kdy snažíte manipulovat koordinuje nebo kdoví co ještě. A tak se také změnit toto dílo ve své třídě. To se liší od posledních let, takže jen hezké svým TFs, nebo TFS v úředních hodinách spíše proto, že jsme druh učení spolu s vámi. Ale log konzole byla super, super užitečné pro JavaScript v loňském roce. Tak milovat. Naučte se, jak ji používat. Je to jednodušší, než GDB, takže by měla být alespoň plus bod. Ale díky kluci jsou ložiska se mnou. Je mi líto, že my Příklady z nějakého důvodu prostě nechtěl spolupracovat se mnou, ale já doufám, že to pomohlo trochu vám trochu více v zóně JavaScript. A pošlete mi všechny vaše otázky příští týden, takže můžu být super opravit, a já ti přinesu bonbón a dokonce i extra cukroví, protože to bylo směšné. Ale vy jste skvělé, a mají skvělý týden.