JASON Hirschhorn: Welcome, všetci, na týždeň deväť. Máme vzrušujúce týždeň pred nami pretože máme finálny problém sadu. Máme tiež zbrusu nový jazyk, JavaScript, ktorý ste už v Uprostred využitie nielen pre toto Problém set, ale mnoho z vás bude pravdepodobne využiť pre finále projektov, najmä webových záverečných prác. Tak to pôjdeme cez dnes po stručne hovoriť o zdrojoch, ktoré robíme každý týždeň. Budeme skákať do JavaScriptu, a potom budeme tráviť všetky časti s hands-o činnosti kódovanie tréner delfínov 2K13, ktorý je ako Madden 2013, ale pre delfíny a v JavaScriptu. [Smiech] JASON Hirschhorn: Tak ako vždy, zoznam zdrojov pre vás vyskúšať. Tieto zdroje sú obzvlášť dôležité pretože budúci týždeň Streda kvíz jeden, váš druhý a posledný test v tomto kurze. Rovnako ako kvíz nula, to je 75 minút a začína krátko po trinásť hodín. To zahŕňa všetko od prvého dňa nula tohto kurzu, ale rozhodne zdôrazňuje, všetko, čo má sa stalo od tej doby kvíz jeden. Ale samozrejme, sme prebrali na slučky na začiatku roka. Pre slučky sú ešte pravdepodobne bude byť súčasťou tohto testu, takže to nie je rovnako ako môžete ignorovať všetko, čo sa stalo pred týždňa päť alebo kvíz nulové pretože tento kurz nadväzuje na sebe veľa. Ale určite sa bude klásť dôraz na veci, ktoré sme sa naučili od šiestom týždni. To zahŕňa PHP, JavaScript, SQL byť istí, a tiež vyspelejšie dátové štruktúry sme o tom hovorili v C. Celá rada ďalších tém, ale my sa bude diskutovať, že budúci týždeň ako sme skontrolovať na kvíz. A tiež, ako vždy, ak máte nejaké otázky týkajúce sa kvíz, ako ste prípravu, neváhajte Poslať im svoju cestu. Práve teraz, nemá niekto mať akékoľvek rýchlych otázok o ten kvíz? OK. Nemusíte sa starať o to, alebo blázon sa o teraz, ale majte na späť na svojej mysli, pretože to je deje týždeň a deň od teraz. Nakoniec, ja viem, že to beží smerom koniec semestra - existujú iba dva oddiely vľavo po - Ale ja som stále nadšený a túži za váš názor Ak máte nejaké. Chcem, aby tí, Najlepšie dva oddiely vôbec. Pravdepodobne bude, pretože každý časť je úžasná a vôbec najlepšie. Neviem, ako je to možné, ale že som všetko bolo fantastické, myslím. Spätná väzba Dostal som sa vytratil nič a nikto, pretože pre Posledných pár týždňov, takže prosím uveďte mi nejakú spätnú väzbu, ak ju máte. To trvá tri minúty. Môžete mi povedať, dobré veci vám Chceš, aby som v tom pokračovať, alebo veci, ktoré som sa pracovať. Snažím sa byť najlepší učiteľ je to možné, alebo sa snažím robiť to najlepšie, Môžem, ale to nemôžem urobiť, že keď to neurobím vedieť, ako to robíte. A to je ťažké povedať, prečo ste pádu spí v triede, tak mi dovoľte, aby som viem, po, prečo tomu tak bolo. Ukázal som vám tento obrázok minulý týždeň. To je Teenage Mutant Ninja Turtles kolo som mal, keď som bol mladší, a my sme naďalej tlačiť vás chlapci bez koliesok, ako sme ponoriť ste v inom jazyku. Ale buďte si istý, JavaScript, rovnako ako PHP, je veľmi podobné veci, ktoré ste v minulosti. Mnoho z logiky prenáša cez, ak nie syntax, presne za cenu jedného. Ale opäť, všetky z týchto jazykov, ktoré sme prešli v posledných pár týždňov, aj keď sa zdajú byť ohromujúce, sú neuveriteľne silné a umožní môžete urobiť veľa vo svojom poslednom projekte a pravdepodobne aj ďalšie webové stránky, ktoré vám Kód v budúcnosti. Takže bez ďalších okolkov, ideme začať potápanie do JavaScriptu. Budeme o tom hovoriť krátko a potom sa naozaj dostať do hands-on kódovanie časť tohto oddielu. Takže JavaScript je skriptovanie na strane klienta jazyk, čo znamená, že je iný ako PHP a je to inak ako C. JavaScript nie je zostavený a to nie je spustený server. Skôr, môžete ju načítať. Môžete načítať stránku JavaScript pri načítaní webové stránky, a potom sa spustí na vašom počítači. Čo znamená, že môžete vidieť všetky JavaScript kód, ktorý bol poslal k počítaču. Niekedy je to skrátiť alebo kódované A bit, šifrované trochu, takže Nedá sa jednoznačne povedať, čo sa deje. Napríklad, ak by ste sa pozrieť na CS50 alebo Riešenie personál pre tento týždeň je problém nastaviť, a môžete ísť do service.js, si všimnete, nemôžete vlastne povedať čo robiť, z toho, čo vám dal. Šifrované sme to trochu, aby sa že trochu zložitejšie. Avšak, môžete vidieť presné JavaScript súbor, ktorý sme vykonávanie a náš program beží ďalej. Takže to je to, čo to znamená byť klient-side skriptovací jazyk. Podobne ako v C a PHP, aj keď, JavaScript má pre slučky, if / else podmienky, while. Podobne ako u PHP, že má foreach slučka rovnako. A opäť, veľmi podobné syntaxe, ktoré sme videli v jazyky, ktoré sme už pracoval. A konečne, jeden z najlepších dielov JavaScript, a niečo, čo bude robí veľa dnes, a pravdepodobne budete robiť veľa s P sadou, ak vám ešte nezažil to už je vám môžete vyskúšať všetky chyby, ktoré majú v kóde pomocou jazyka JavaScript Console. Pozreli sme sa na to trochu minulý týždeň. Pozreli sme sa na iný typ konzoly prezrieť stránku, ale Chrome, opäť môžete vidieť rozvrhnutie, HTML, dokumentovať, že vaša stránka je ukazujúce na obrazovke. Môžete si tiež zobraziť všetky JavaScriptu tvorí túto stránku, a tiež môžete, rovnako ako Povedal som, vidieť všetky chyby vo JavaScript Console. A budeme skúsenosť, že viac trocha, keď začneme kódovanie. Jedna vec k poznámke o JavaScript premenné. Rovnako ako PHP premenných, sú voľne-napísaný, takže nemusíte dať im konkrétny typ. Pokiaľ ide o rozsah, ktorý je definovaný o "var" kľúčové slovo. Takže ak nechcete dať kľúčové slovo pred niečo, stačí napísať meno premenné, a potom priradenie operátor, v tomto prípade znamienko rovnosti. Ja som zabudol bodkočiarku tam, ale predpokladať, že je bodkočiarka práve tam. Potom budete vytvárať globálna premenná. Ak dáte na "var" kľúčové slovo, potom dávaš to nejaký druh miestnej priestor, či už je to na funkcie alebo slučky. Takže to je jedna vec, Všimnite premenných. JavaScript je jazyk. jQuery je knižnica postavená na vrchole jazyk JavaScript, a máte videl predtým v prednáške. Vrelo odporúčam, ak budete používať JavaScript vo svojom finále Projekt, ktorý spoznáte jQuery. To je všetko, čo chcete robiť oveľa, oveľa jednoduchšie. Je tiež prichádza s nádherný Dokumentácie a príklady, ktoré vám pomôžu dostať ste začali. Dnes budeme mať pomocou jQuery tiež. To, čo mám na tomto snímku, sú veľmi základy jQuery. V hornej časti súboru HTML alebo čokoľvek - váš súbor index.php, vaše index.html súboru - budete musieť sú tieto dva riadky. Jedná sa o pomerne všeobecné línie. Prvý riadok obsahuje jQuery JavaScript súborov, a druhý riadok sú všade tam, kde ste napísali vlastný kód JavaScript. A samozrejme, pretože vo vašom JavaScript kód, ktorý ste pravdepodobne použité Niektoré funkcie knižnice jQuery, , Že musí ísť po jQuery zahrnutie skriptu. Budeme skúmať to za chvíľu znova. A konečne, v súbore JavaScriptu, Hovorím to jeden index.js. Mohlo by to byť scripts.js. Nech je to čokoľvek, čokoľvek JavaScript súbor ste, začnete všeobecne tento riadok kódu, znak dolára, otvorené zátvorka, dokument, v blízkosti zátvorka, obdobie, pripravený, otvorené zátvorka, funkcie, otvorené zátvorka, zatvoriť zátvorka, a potom zložená zátvorka. Odhoďte kódu tam vnútri, a potom skončiť s zloženou zátvorkou, v blízkosti zátvorka, bodkočiarka. Tak sa to ako dané. Ak sa chystáte používať jQuery, zábal všetky vaše jQuery kódu vnútri Tento riadok kódu. A uvidíme, že opäť v sekunde. Opäť budeme pracovať s jQuery, a prosím, opýtať, ako ideme dnes, ale niekto máte nejaké otázky týkajúce sa jQuery alebo JavaScript práve teraz? OK. Takže bez ďalších okolkov, predstavujem vám Dolphin Tréner 2K13. Som veľmi nadšený najnovšie verzie produktu. Oh, nie! Bola som tak vzrušená. Chcel som ukázať, že na vás, ale vyzerá to, že nemáme realizovaná to ešte. Urobme to trochu väčšie. Takže keď som nahrať kód pre Dolphin Trainer - Dang to. Je mi ľúto, chlapci. Pracoval som na to pred hodinou. Myslel som, že si to hotové, ale myslím, že ešte nejaký Práca vľavo je potrebné urobiť. Ale našťastie, vy všetci majú niektoré JavaScript a jQuery praxe, tak poďme ďalej a dokončiť dohromady. Myslím, že som poslal vy kópie to, pretože som bol veľmi nadšený, o tom, takže by ste mali mať Rovnaký kód, ktorý mám. Poďme do - Dang to, chlapci, je mi ľúto. Poďme do terminálu, hoci. Rovnako ako s posledným problémom sady, ak máte môj - poďme urobiť to trochu väčšie, Tiež pre vás - si vzal zip súbor. Tie pravdepodobne rozopol ho. Poďme sem. A potom dúfajme, že ju presťahoval do rovnakom adresári, kam ste uložili váš problém nastaviť osem kód. A uložíme v tomto adresári, takže môžem prístupu k nemu - a my všetci môžeme pristupovať kód v prehliadači Chrome na našom počítači. A opäť, aby sa k tomuto kódu, môžete jednoducho zadajte adresu nájsť na dolná, pravá strana Váš prístroj, tu dole. Nájdete vašu IP adresu. Ste typ, ktorý do prehliadača Chrome na vašom počítači, a v tomto prípade, pretože sme deväť zložky časť, máme tiež pridať lomítko sekcii deväť. Pustite ma - Oops. Chystám sa minimalizovalo to tak vôbec sa mi nepáči mať na klikanie cez to. Tak to je, ako som sa nastaviť tento kód. Už som to urobil už, že. Nehodlám ísť cez tie kroky, pretože to je to, čo začiatok problému nastavenie prechádzky vás, ako to urobiť. Takže choďte do toho a budete sa nastaviť tento až v druhej, ale najskôr poďme preskúmať tento kód ako skupina. Poďme sa pozrieť, čo som urobil. Snažil som sa dostať väčšinu z toho urobil pred triedou, ale myslím, že bol trochu pozadu. Takže poďme otvoriť index.html. OK. A index.html je naozaj jednoduché stránky, pretože som nemal Chcem sa dostať príliš šialené. Chcel som sa uistiť, že pracoval, ale myslím, že nedostal tak ďaleko. Tu je hlava, ktorá je priamo vnútri týchto tagov HTML, a môžeme všimnúť, pár vecí, hneď bat. Máme právo CSS súbor tu a vhodné umiestnenie súboru CSS. Máme knižnicu jQuery tu, a všimnite si niečo iné o tom. Zdroj je niečo, čo naozaj, ale naozaj dlho. ajax.googleapis.com/-- trochu vyzerá ako URL, ale to nie je iste vyzerať js / jquery.js. A to preto, že som sa rozhodol, že by som nechcú mať k stiahnutiu jQuery súbor a presuňte ho a uložiť je v mojej knižnici, a musia byť zodpovedá za ňu. Skôr som len tak, aby sa JavaScript súbor, ktorý hostí Google. Takže Google vlastne hostí rad knižnice, a jQuery, pretože to je jeden z najviac populárne, to hosťuje , Že tým, ako dobre. A pretože je to hosťovanie, vôbec sa mi nepáči je potrebné sa starať o to, a oni aktualizovať ju, ale keď oni ho aktualizovať Asi budem musieť zmeniť tieto čísla tu. Ale to je len preto, aby celý svoj súbor Systém trochu menej čistý. Nemám naozaj rád hosting všetky tieto súbory. Je to oveľa lepšie, keby Google musí im hostiteľ pre mňa. Takže to, opäť, je stále celý JavaScript súbor, ale je to len, že organizované firmou Google miesto na mojom Systém súborov na mojom počítači. Vidíme tiež, že som dal v dvoch viac súbory dolphins.js a trainer.js. Pozrieme sa na tie druhé. A konečne, tento titul tu. Kto môže mi povedať, čo tento kód vo vnútri Tieto názov značky, kde že ide na mojej stránke? DIVÁKOV: Ako tá vec, že paneli nástrojov alebo čo? JASON Hirschhorn: Jo, karta málo v hornej časti okna Chrome. To je miesto, kde tento text pokračuje. Vo vnútri tela, ako môžete vidieť, nie je veľa vecí tu. Mám len tri divs. Dávam im nejaké ID, a Dal som si trochu texte palcov Ale myslím, že to je dôvod, prečo my nie nič vidieť tu. V skutočnosti vidíme, tréner delfínov 2K13. Vidíme TODO. Neviem, kde to prichádza od pretože nevidím, že tu. Takže možno, že je v jednej z moje súbory JavaScript. Budeme kontrolovať, či sa v sekunde. Môže niekto mi povedať, čo toto číslo znamená, že tu? DIVÁKOV: Je to spôsob volania osobitný oddiel v [nepočuteľný] súbor? JASON Hirschhorn: Jo. Je to len spôsob, ako sa odkazovať na tento konkrétny div. ID je ideálny jedinečný. OK? Tough dav. Takže, ID sú všeobecne jedinečné. Môžete dať im jeden špecifický prvok v kóde. Čo keď som chcel, aby referenčné číslo prvkov, či už je to pre CSS styling alebo jQuery? Čo atribút môžem dať im? DIVÁKOV: Class. JASON Hirschhorn: triedy, presne tak. Správne. OK, tak index.html, znova, moc sa tu deje. Takže poďme otvoriť iný súbor. Pozrime sa, čo mám. To je všetko, čo mám tu. Poďme do zložky JS. Nebudem sa báť CSS pre teraz. Poďme otvoriť dolphins.js. Oops. Alebo skôr - OK. Takže, dolphins.js, v skutočnosti vyzerá docela podobná niektoré z kódu, boli uvedené v probléme nastaviť osem. Môžete prechádzať cez neho. Môže mi niekto povedať, aj keď, čo je DOLPHINS? To všetko čiapky DOLPHINS? Čo je to? Aký typ dát je, že? DIVÁKOV: Array. JASON Hirschhorn: Je to pole. A my vieme, že je to pole, pretože som vidieť tieto hranaté zátvorky tu. A niekto iný, čo je to pole? DIVÁKOV: Objekty? JASON Hirschhorn: Je to pole objektov. A vidíte, že. A ako viete, že je to pole objektov? DIVÁKOV: Pretože máte túto hrubého čreva boot medzi zloženými zátvorkami? JASON Hirschhorn: Správne. Takže som tieto zložené zátvorky tu, a potom môžete vidieť čiarku oddeľovanie rôznych Objekty v tomto poli. A potom sa v každom objekte, mám niečo hrubého čreva a niečo iné. A to, čo je všeobecne táto prvá časť, Ide o to, aby v ľavej časti hrubého čreva? Ako sa to volá? Druhovo? Ako sa máme na mysli, že? DIVÁKOV: Index? JASON Hirschhorn: Index, alebo pravdepodobne všeobecnejšie, kľúč. A potom na pravej ruke strane, hodnota. Takže index, kľúč. Ale ak hovoríme o tých, máme všeobecne na mysli vec na ľavá strana. V jednoduchom pole, opäť, sme mali indexy 0. 1.. 2. 3. 4. A delfínmi, budeme mať delfína 0, delfíny 1, delfíny 2, delfíny 3, delfíny 4. Máme tiež, v tomto objekte sme nebude všeobecne odkazovať na veci. Alebo ak budeme musieť tento objektový právo tu, nebudeme hovoriť objekt 0, objekt 1, objekt 2. Budeme hovoriť názov objektu, alebo typ objektu, dĺžka objekt, et cetera. A to je, ako sa dostaneme na hodnotu na pravej strane. Takže keď sme si povedali názov objektu, napríklad, by sme si tento reťazec, "Milosti." Tak ako vy ste mi povedal, delfíny je jednoducho pole objektov. A vidíte všetky objekty majú názov, typ, na rod. Je to správne vyslovuje? Každý, kto? Rod? Skvelé. Dĺžka, hmotnosť. Je to správne vyslovuje? Myslím, že áno. A obraz, len URL k nejakému súboru on-line. A práve tu, sme blízko poľa, tu vpravo dole na veľmi ľavej ruke strane mojej obrazovke. Tak to je všetko, dolphins.js je. Oh, môj bože. To sa to vysvetľuje. Myslel som, že by som skončil všetko, ale vzhľad. K dispozícii sú všetky tieto todos. OK, dúfam, že môžeme robiť tie dohromady. Ale poďme najprv, ako my , Že len prejsť Tento kód veľmi rýchlo. Takže, ako som už spomenul, vidíme na veľmi začína tento riadok, ktorý som mal v šmykľavky, (document). ready (function (). A v podstate to, čo že sa to to je čakať, až všetko vo vašom stránky bol vložený, tak počkajte, až je to pole, všetko je dobré ísť, a potom začať realizáciu tento kód. Takže, ak ste potrebovali spustiť nejakú PHP, ak ste potrebovali získať nejaké obrázky, čo to je, celý kód bol set a je pripravená ísť do svojho indexu stránky alebo čokoľvek Stránka bola načítaná, a teraz sa chystáte začať vykonávania kódu. Takže prvá vec, ktorú robíme, je sme sa nastaviť toto pole. A nemám kľúčového slova var tam, takže to, čo je Rozsah tohto poľa? DIVÁKOV: Je to globálne. JASON Hirschhorn: Je to globálne, tak ocean_array možno získať z kdekoľvek v tomto súbore. A potom vidíme to na slučku. Nehovorí foreach, ale je v podstate foreach slučka. A to je len JavaScriptu verzia, takže pre každú var delfína v delfínmi, aký typ dát? Aj keď, opäť, JavaScript nie je sú tieto dátové typy per se, čo Dátový typ je delfín? DIVÁKOV: objekt. JASON Hirschhorn: Je to objekt. Dostávame každý objekt v poli delfínmi. Takže tu to vyzerá, že som zabudol dať všetky tieto delfínov od našich obrie DOLPHINS, že do ocean_array, takže sme mali asi robiť že ako prvý. A potom, niečo, čo nazýva variabilný tento bazén. Ja som nastavenie na hodnotu null. A potom som zavolať túto funkciu draw_ocean. Trénujem delfína, keď jeho obraz je klikli - Neurobil som to - a nastaviť delfínov zadarmo, ak kliknutí na tlačidlo. Takže to sú veci, ktoré musím urobiť. Myslím, že by som ti mal dať nejaké pozadia na čo som sa snažil urobiť. Takže ak pôjdeme sem, čo som chcel to vyzerá ako to pole až tu, skôr než hovoriť "TODO", Aj chcel tabuľku, v podstate, s obrázky všetkých delfínmi. A potom, keď kliknete na jeden obrázok, Chcel som to dať dole v spodnej polovici obrazovky a dať si všetky informácie o ňom, a že by delfín v bazéne, delfín ste cvičili. Tak som si myslel, že by bolo naozaj cool. Máte všetky tieto delfínmi v oceáne tu, potom kliknete na jeden, a to by som šiel do bazéna, a potom by ste mohol trénovať. Takže to je to, čo som sa snažil urobiť. A potom tam bude tlačidlo tady v bazéne, a tie by mohli na tlačidlo, ako "Set Free," a môžete nastaviť delfín zadarmo, a to by sa vrátiť do oceánu. Takže to je to, čo som sa snažil vytvoriť, ale zase budem potrebovať vašu pomoc ju vytvoriť. Takže dúfajme, že niektoré z týchto kľúčových slov alebo niektoré z týchto podmienok sa spustí dáva zmysel teraz v súvislosti s tohto programu. Poďme ďalej prostredníctvom tohto súboru. Nazývame túto funkciu draw_ocean. Je to jediná funkcia nazývame z document.ready časti. Takže hovoríme draw_ocean funkciu, a vyzerá to, že vytvorí reťazec, premenné, tu. Dať je niečo, čo v reťazci, pridáva viac veci na reťazec, pridáva viac veci reťazca, a potom tento riadok kódu. Ja hovorím, že vytlačí reťazec HTML. A niekto vysvetliť mi, čo Tento riadok kódu robí? No, v prvom rade to, čo robí že znak dolára na mysli? Nie je to premenná PHP, ale to, čo to, že znak dolára na mysli? DIVÁKOV: Prepojenie do HTML ID - Je to ako, že odkazy na HTML kód? JASON Hirschhorn: Čo že znak dolára? Čo to znak dolára ukazujú? DIVÁKOV: Prepojenie do HTML nejako? JASON Hirschhorn: Kde sme vidieť Tento znak dolára pred JavaScriptu? Videli sme to v prednáške. Hovorili sme o tom. Čo je znak dolára na mysli? DIVÁKOV: Niečo s jQuery? JASON Hirschhorn: Presne tak. To má čo do činenia s jQuery. Tento znak dolára znamená, že som pomocou funkcie knižnice jQuery tu. Presne tak. Takže napíšeme znak dolára, a potom máme túto otvorenú zátvorka a uzavretý zátvorka, a tam vo vnútri, čo sa deje tam vnútri, keď používate funkcie jQuery knižnice, alebo ste pomocou knižnice jQuery? Opäť platí, že ste toto videl na prednáške. Môže niekto dať mi - a vy tiež niečo vidieť tu. Čo sa deje vo vnútri, že? Jeff, daj mi hádať. Čo to vyzerá, # oceánu? Kde sme vidieť, že predtým? DIVÁKOV: Je to knižnica alebo tak niečo? Nemám tušenie. JASON Hirschhorn: No, tak mi otvoriť index bodka - Nie, na zlom mieste. Takže vidíme, že máme niečo volal oceánu tu. Tam, kde sme videli # oceánu hashtag oceán, syntax predtým? Jo? DIVÁKOV: CSS? JASON Hirschhorn: V CSS. Takže sme chceli štýl niečo, pamätať by sme dať Hashtag CSS Volič, alebo hashtag oceán, napríklad, a všetko formátovanie že sme chceli dať veci s ID oceánu dáme tam vnútri. Takže tu vnútri to nie je CSS Volič ide sem. jQuery definuje vlastné typ voliča. Ale je to rovnaký nápad, a v skutočnosti Mnoho z nich sa prekrývajú s CSS. Takže v týchto otvorených zátvoriek, môžete dať voliča, a to bez ohľadu na Volič sa týka, to je to, čo budete používať. Takže v tomto prípade, som výber ID oceán. Keby som mal triedu - povedzme, že mám triedu vecí tzv "obrazy", a ja som to dal Mnoho prvkov, ako som odkaz trieda, čo nazýva "obrazy?" DIVÁKOV: Myslím, že to bola bodka. JASON Hirschhorn: S bodkou. Takže ak namiesto toho som dal Dot Images sem, že by mi na triedu veci tzv "obrazy". Samozrejme, že to je super výkonný, a môžete odkazovať na veľa vecí. V skutočnosti, som mohol odkazovať v podstate akýkoľvek tag v HTML. Takže keď som chcel urobiť to, td, to je tag, ktorý sme videli predtým, keď vytvorenie tabuľky. Pravdepodobne ste oboznámení s že z P set sedem. V tomto prípade, je to vlastne deje vybrať všetky z nich. Bude to, aby mi polia zo všetkých TD tagy. Ale to môže byť trochu ohromujúce, tak sem tam hneď sme bude držať len odkazovanie ID. Takže, čo to robí, je opäť , Ktorý sa v tomto prípade - Ospravedlňujem sa. Choď sem, na index.html. Je to oceán, skôr oceán ID odkazuje na div, takže túto časť tohto riadok kódu dostane ten div. A potom to bodka znamená, že volám funkcie, a názov, ktorý Funkcia je HTML. A to je skratka pre, či ste videli pred, znak dolára, dokument, dot dostať element podľa ID, dot vnútorné HTML. To je len jQuery verzie. Takže funkcia HTML len dostane vnútorná HTML. Z tohto prvku. Takže znovu, keď sa pozrieme späť, budeme vidieť, že to nie je vnútorná HTML. A tak keď som to urobil, by som sa snaží dostať do HTML. Keď píšem to, že som Nastavenie HTML. Takže som okolo tejto funkcie na reťazec, reťazec, ktorý som vytvoril tú, a povedal, že dal vnútri oceánu div. Jo? DIVÁKOV: Keď sa dostanete HTML, ste len na to, kópie ak to, že jo? Nie si jeho odstránenie. JASON Hirschhorn: Správne. Keby som to urobil, a chcel uložiť to do var - Oops. To by získať všetky informácie, ktoré tam bol a uložte ho do iného variabilný, aby jeho kópiu. DIVÁKOV: OK. Mám to. JASON Hirschhorn: Tak sme vytvorili niektoré HTML, okrem toho, že v reťazci. Šetríme viac. Tu vidíte, že TODO reťazec. Tak to je asi tam, kde sme ako to TODO od okamihu, kedy ideme do našej stránke. A skutočne, keď som kliknite pravým tlačidlom myši na TODO, prezrieť prvok, sme sa rozprávali o to minulý týždeň. To je, ako sme mohli vidieť v HTML Štruktúra našej stránke. Všimnite si, že tu dole - poďme urobiť to trochu väčšie, taky - máme div id oceán tu. Každý vidieť, že riadok kódu? A to je to, čo sme typov v index.html. Vnútri nej vidíme teraz toto tabuľka riadok kódu. A čo, že tabuľka riadok kódu je, To je kód, ktorý sme práve vložená do tento prvok. A to sa pozrieme v nej, nikdy zadaný colgroup a tbody. To bol pridaný pre nás, pretože sme trochu fantázie veci. Ale všimnite si, že je to tr, je tu td s TODO. Takže to vyzerá, znova, kód, ktorý sme tu písal. To je presne to, čo to linka robil. To bolo s našou HTML reťazec a uvedení v tomto oddiel tady. To spočiatku nemá nič spoločného. Táto stránka sa nahrá. Znak dolára, document.ready. Tým sa spustí prevedení. Hovoríme funkciu draw_ocean, a vnútri draw_ocean funkcie berieme tento HTML a dať ho do tej div. Práve sme prešli Veľa tu. Má niekto nejaké otázky, o tom? Alebo, ako to funguje, alebo jQuery? Vzhľadom k tomu, či mi rozumiete, potom jQuery by snáď prísť pomerne jednoduché. Jo? DIVÁKOV: Čo by ste mali vo vnútri zátvorky pod výtlačku HTML reťazec, ktorý je názov Premenná HTML, ktorý ste sa vyhlásil už skôr? JASON Hirschhorn: Táto tu? Publikum: Áno JASON Hirschhorn: Áno. DIVÁKOV: Takže ak ste menoval, že niečo iné, že niečo iné bolo to, čo by ste dal sem. JASON Hirschhorn: Presne tak. A to je dobrá pripomienka. To je preto, že trochu mätúce Mám HTML, html. To tu vnútri je názov môjho variabilný, a to tu je Názov funkcie jQuery. DIVÁKOV: Ale aby pre jQuery funkcie pracovať, musíte dať niektoré HTML vstup? JASON Hirschhorn: Presne tak. Alebo budete musieť dať reťazec. To bude dať tento reťazec vo vnútri o div alebo čokoľvek iného. To je len reťazec. To nie je, že to je HTML, ale zrejme sformátovať na účel, aby sa validný HTML. Znamená to, že odpoveď na otázku? DIVÁKOV: Áno. JASON Hirschhorn: OK. Jo? DIVÁKOV: Čo keď oceán uvedenej na tlačidlo alebo tak niečo? Čo by. Html robiť? Bolo by to zmeniť text tlačidla? JASON Hirschhorn: Takže otázka je, čo keď to sa odkazovalo na tlačidlo? To sa zmení vnútorné HTML niečoho. Takže ak to má otvorenú značku a blízko tag, bude to dať niečo medzi otvoriť a zatvoriť tag. Pokiaľ nie je otvoriť a zavrieť tag, bude to nič robiť. DIVÁKOV: Je to doslova kópia a vložiť niečo také? JASON Hirschhorn: Jo. Je to skopíruje a vloží niečo zo bez ohľadu na variabilné prejdem to, string prejdem to, v tých otvárať a zatvárať tagy. Poďme sa pozrieť sem. Oh, môj bože. draw_pool nie robiť čokoľvek tam. To je prúser. Trénujte, wow. OK, takže nič iné okrem toho, že. Tak poďme začať, a poďme napraviť to. Budem potrebovať každý je pomôcť, aby sa to urobiť. Nie sú v skutočnosti, že mnoho riadkov kódu, myslím, že písať. Myslím, že som to urobil pred pár rokmi pre verziu 2K12, a tam by nemalo byť tak veľa riadkov kódu písať. Nemal som odstránená ten kód. Mal som jednoducho chytá. Oh, blázon. Každopádne, poďme začať. Takže som v tomto poli, alebo som v tomto linka, a mám ocean_array. A ja chcem, aby to všetko, všetko z tohto súboru, do môjho ocean_array. Tak ako si môžem vziať všetko od tam, a dať to do ocean_array? Je to jeden riadok kódu. Kto mi môže dať, že riadok kódu alebo povedzte mi, máte nejakú predstavu, čo to linky Kód by mal robiť? Prečo sa začneme tu, a potom budeme pokračovať v pohybe po izbe odpovedanie na otázky. Kurt? Čo je prvý? DIVÁKOV: Ocean_array, držiak, delfín. Rovná delfíny, držiak, delfín? DOLPHINS s hlavným všetko. JASON Hirschhorn: OK. Poďme sa prejsť syntax. Práve tu, je to ako foreach, takže je to vlastne robí veľa veci pre nás. A delfín je objekt. Takže nepotrebujeme niečo napísať ako delfíny, delfín, pretože delfín sám je namietajú, že chcem. Nie je to index. Má to zmysel? DIVÁKOV: Jo. JASON Hirschhorn: Tak ako sa vám navrhnúť zmenu kódu? Ak vieme, že sme vzhľadom k indexu? Oh, ospravedlňujem sa. Si dobrá. Ale ako - dovoľte mi položiť inú otázku. Ak chceme, aby - poďme vlastne píšem. To nič. Budeme písať to. To je skvelé. Prepáčte. Len som tam veľmi mätúce. Poďme sa nechať, že tam teraz, a vrátime k výcviku delfína, nastavenie delfína. Povedzme najprv vyriešiť tento výkres oceán funkcie, a vrátime sa že, Kurt. Ale tak ďaleko, tak dobrý. Poďme sa pozrieť dovnútra draw_ocean. Riadok, ktorý vyzerá, že je v poriadku, je to "Ukladať obrázky delfínov v oceán v reťazci HTML. "A práve teraz, som rovnako ako TODO, ale ja Naozaj chcete, aby delfínmi obrázky v oceáne. Tak čo, Noah, myslíš, že je Prvá vec, ktorú by som mal urobiť? Ak chcem ísť cez celé polia, to, čo je prvá čo mám robiť? DIVÁKOV: Musíme vytvoriť pre sláčiky. JASON Hirschhorn: pre sláčiky. A čo by, ktoré pre sláčiky vyzerať? DIVÁKOV: Pro - musíme prejsť každý delfín v oceáne poľa. Takže pre var delfína v - môžete napísať oceánu pole? JASON Hirschhorn: Ako, že? DIVÁKOV: Asi to je pravda. JASON Hirschhorn: Držme sa že teraz, a potom budeme vrátiť sa k nemu. A vy budete zodpovedný na tomto riadku. Takže mám tým na slučku. Michael, si teraz. Čo mám robiť teraz? DIVÁKOV: Budete musieť vziať ukladať obrázky z delfínov. JASON Hirschhorn: Tak kde je, že uložené? DIVÁKOV: V delfínov poli? JASON Hirschhorn: Som zmätený teraz taky o tom, čo sa deje. Poďme zistiť, ako môžeme urobiť ladenie to, a potom prídem späť k vám, OK? Čo je to ekvivalent printf v JavaScriptu? Annie? DIVÁKOV: Je to dokument, ktorý napísať? JASON Hirschhorn: Alebo ako môže Vidím niečo konzola sa v spodnej časti? DIVÁKOV: Console.log. JASON Hirschhorn: Console.log, presne. Takže poďme robiť console.log, a poďme stačí dať "delfín" na, OK? V ideálnom prípade, ak to bude fungovať, budeme má - poďme sa pozrieť, späť do súboru dolphins.js, tam bolo šesť delfíny, takže by som mal dostať šesť alebo tak niečo dúfajme, vytlačená na konzola, nie? To je miesto, kde sme sa tak ďaleko, pretože sme áno KURTOVU linku tu, a potom sme robil Noah je pre sláčiky, a máme to linka, takže dúfajme, že by sme mali vidieť šesť veci, tlačené na konzole. Takže poďme tu, poďme otvoriť naše konzoly a obnoviť našu stránku. OK, takže to vyzerá, sme videli šesť indexy. Nula, jedna, dva, tri, štyri päť, jo. DIVÁKOV: Ako sa dostať do že stránky vnútri vášho - JASON Hirschhorn: Ako získam k tejto veci tu dole? DIVÁKOV: Nie, strana Chrome vnútri [Nepočuteľné] spotrebič. Môžeme vidieť, že, alebo nie? JASON Hirschhorn: To Chrome Stránka tu? DIVÁKOV: Jo. JASON Hirschhorn: Takže rovnako ako v P sady osem, som otvoril okno Chrome na mojom desktope, na mojom Macintosh desktop. A ak si všimnete tu toto URL sa na vľavo hore, ktorý zodpovedá tejto IP riešiť tu. Tak, ako to urobiť, aj keď začiatok problému nastavenie spec vás prevedie cez presne, ako to urobiť. Ale ja proste vyplynulo, že, a namiesto toho zo s dopravou kódom, proste som to urobil naše vlastné kód. Super vec je, môžeme tiež prezrieť ocean_array. Takže to vyzerá, že ocean_array je pole šiestich objektov, a poďme otvoriť každý z nich. Boom! Jeden. Takže Kurt, vyzerá to, že vaša Kód fungovalo perfektne. Všetko, čo začali v ocean_array. Pretože som misspoke skôr. Ale áno, super práca. Ocean_array je správne, a vyzerá to ako teraz vidíme, že delfín je číslo od 0 do 5, takže to vyzeralo, ako indexy v poli. Takže za predpokladu, že vedomosti, Michael, Čo by sme mali robiť teraz? Myslite nahlas. Čo je niečo, čo chcete robiť? DIVÁKOV: Chceme sa dostať JPEG pre každého delfína. JASON Hirschhorn: OK. Takže, ako môžeme odkazovať - ako sa môžeme dostať JPEG? Kde začať? Tam, kde je všetko uložené? DIVÁKOV: V ocean_array? JASON Hirschhorn: OK. DIVÁKOV: Tak ocean_array, delfín - JASON Hirschhorn: Ako sme niečo vo vnútri - tak to nám dáva tento objekt. A my sme videli predtým s štruk. Takže, aký druh zápisu potrebujeme používať? DIVÁKOV: Bolo by bodka. JASON Hirschhorn: bodka. A čo potom pole? DIVÁKOV: Obrázok? Alebo to nie je pole - JASON Hirschhorn: Čo je to zavolal dolphins.js? A vidíte, môžete sa pozrieť. Môžeme len ísť sem späť. Vidíme ocean_array, môžeme preskúmať. Ako sa to volá? DIVÁKOV: Typ. Počkajte. Obrázok? Povedal som obrázok. JASON Hirschhorn: Picture. Správne. Vy ste to znieť ako vieš čo si hovoril, hoci. Znelo to skôr ako odhad. Takže obraz, takže by sa dať nám URL obrázka. Jeff, máte nejakú otázku? DIVÁKOV: Jo, nemôžem dostať to, čo máte na Chrome prehliadač na svojom počítači. Len som si o "nezachytené odkaz chyba, konzola nie je definovaná. " JASON Hirschhorn: Vy ste nastaviť všetko? DIVÁKOV: No, myslím, že som robil všetko, čo robil na veľkej obrazovke. JASON Hirschhorn: A chmodded všetky súbory? A ste si prejsť Celé nastavenie? DIVÁKOV: Skúsim to znova. JASON Hirschhorn: OK. Preskočila som, že veľa na začiatku, ale budete musieť prejsť Celé nastavenie, rovnako ako na počiatok problému nastavenej špec. Chmod všetko a uistite sa, že je to palcov DIVÁKOV: pôjdem a skontrolovať ju. Myslel som, že som to urobil, ale Budem skontrolovať. JASON Hirschhorn: Takže to vyzerá ako to bude nám string a obraz. Skvelé. Máme URL obrázka. Ako môžeme teraz dať do - čo sa stane, ak budeme písať len to, Michael? DIVÁKOV: To jednoducho dostane obrázok. To nie je v skutočnosti ho zobraziť. JASON Hirschhorn: Poďme vidieť, čo sa stane. Budeme šetriť, že. Urobíme to tu. Vyzerá to, že nedostanú nič. Mám chcete preskúmať túto tabuľku, to vyzerá vo vnútri - jo, vyzerá to, že to nechápem nič. DIVÁKOV: Ešte musíme - JASON Hirschhorn: Toto je reťazec, Tento kód tu. Tam, kde chcem, aby tento reťazec? DIVÁKOV: Ak chcete vložte ho do oceánu? JASON Hirschhorn: OK. A tu dávam reťazec tzv html v oceáne. DIVÁKOV: Tak to by bolo dolár znamenie, oceán, html [nepočuteľný]. JASON Hirschhorn: To by dať to rovno tam. Ale čo keď chcem pridať do - Už som vytvoriť reťazec, nie? K tomu, aby sa v oceáne, čo je názov tohto reťazca? DIVÁKOV: HTML. JASON Hirschhorn: HTML. Tak čo mám písať ďalej? DIVÁKOV: Rovná, rovná. Alebo len rovná? JASON Hirschhorn: Čo bude stane, keď píšem rovná? DIVÁKOV: Nebude to nastaviť rovná - alebo nie, že - DIVÁKOV: Priradenie? JASON Hirschhorn: To bude priradiť, ale to, čo sa stane so všetkým , Ktorý bol uložený v ňom predtým? DIVÁKOV: Bude sa ho zbaviť. JASON Hirschhorn: Bude sa ho zbaviť. Tak ako môžem pridať to do konca? Ja by som len kopírovať - DIVÁKOV: Plus rovná. JASON Hirschhorn: Plus rovná, perfektné. To je presne to pravé. Takže teraz poďme zistiť, čo to robí. Boom! Oh, môj bože. To je len veľa textu. OK. Takže to vyzerá, že máme veľa texte, ale to je skvelé. Vy ste urobil - Viem, že je to ťažké, je to nové. Zatiaľ tri z vás urobili fantastický. OK, si na rade. Čo by sme mali robiť ďalej? My samozrejme nechceme ju hrať len reťazec. Jo? DIVÁKOV: Mám len jednu otázku. Viete, keď robíte ocean_array, delfín, v zátvorke, nie je delfín ako asociatívne pole samo o sebe? JASON Hirschhorn: misspoke som. Dolphin je index. DIVÁKOV: ale nie je var delfín v oceáne - Mám na mysli, keď ste pôvodne načítať ako dobre, var delfín na delfíny, nie je že delfín asociatívne pole? JASON Hirschhorn: Tento delfín? DIVÁKOV: Jo. JASON Hirschhorn: Nie Tento delfín je index. DIVÁKOV: OK. Takže je tam delfín premenná? Myslím, že ako delfín kľúč asociatívne pole? JASON Hirschhorn: Tu? Ako dolphin.name? DIVÁKOV: Jo, je tam ako delfín bodka - rovnako ako nie je delfín určený byť každý objekt? DIVÁKOV: Jo, to je to, čo som si myslel taky. DIVÁKOV: Myslel som, že delfín je ako asociatívne polia v delfínmi. Vzhľadom k tomu, že je šesť asociatívne polia v delfínmi, nie? JASON Hirschhorn: Správne. Spôsob, akým sme to napísal teraz, to nie je. DIVÁKOV: Prečo je to? JASON Hirschhorn: Mohli by sme to urobiť, a je to vlastne funkcia jQuery volal. každý, ktorý dáva každý z vás vec. Ale táto syntax nie je - Aj misspoke skôr - túto syntax Nie je to index. To je len, že nám indexov. Ale môžete urobiť znak dolára. Každý, čo je funkcia jQuery. To by vám každý spolupracovník poľa. Tak to skontrolovať. Ale to je to, čo všetko tento kód robí. DIVÁKOV: Tak to prvé pre sláčiky, som myslím, že by sa opakujúce šesťkrát preto, že máte šesť indexy. A potom druhý pre sláčiky, nie je, že iterácie rovnaké množstvo časov? JASON Hirschhorn: Jo. DIVÁKOV: Takže je to naozaj nie - mohol napísať prvý pre sláčiky znovu, a bolo by to fungovalo. Ako var delfín v DOLPHINS? JASON Hirschhorn: Áno, ale my sme Teraz pomocou ocean_array. Presunuli sme všetko do ocean_array preto, že sme chceli zmeniť to, čo je v dolphins.js, alebo ak chceme manipulovať ocean_array neskôr, nechceme manipulovať delfíny, variabilný. Chceme pracovať s jeho kópiu, pretože ak chceme, aby sa niečo mimo, takto budeme len bude v bezpečí. Má to zmysel. DIVÁKOV: Jo. JASON Hirschhorn: OK. Takže, Carlos, ako som si tento reťazec a aby to obraz miesto, a získať skutočný obraz? Vy ste predtým vidieť tento kód. Ako mám vložiť obrázok na stránke? DIVÁKOV: Je to vec, ktorú sme urobili na že HTML a rovná te volanie pomlčku šírka, to zmazal? JASON Hirschhorn: Tento veci tu? DIVÁKOV: Jo. Druh. JASON Hirschhorn: nie obávať, že. To jednoducho spustí reťazec HTML. Chcem chcete vložiť obrázok v mojom HTML webovej stránky, čo tag mám použiť? DIVÁKOV: Nespomínam si. JASON Hirschhorn: OK. Avie, mu pomohol? DIVÁKOV: Bolo by to kotva, href, a potom to prepojiť? JASON Hirschhorn: Tak ako kotva. DIVÁKOV: Nemusíte sa odkaz na to, že jo? JASON Hirschhorn: Čo keď som Chcete vytvoriť obraz? DIVÁKOV: Bolo by img, a potom src rovná bez ohľadu na reťazec? JASON Hirschhorn: OK, tak to je pravda, img. Carlos, budete vziať odtiaľ. img je skratka pre "obraz", a src stojany pre "zdroj." a je potrebné, aby to URL alebo niektoré z nich - ani URL. Niektorí miesto, kde to Obraz je uložený. Takže viem, že ma dostane image, takže teraz ako mám dať to všetko dohromady, myslel? Mám nejaké syntax musím opraviť. Čo presne potrebujem typu, Carlos? DIVÁKOV: Nechápem, čo sa snažíte robiť. Takže sa snažíte dať všetky obrazy do tabuľky? JASON Hirschhorn: Chceme zobraziť všetky obrázky na stránke. A videli sme, ako tento riadok kódu práva tu pridané reťazca na našom reťazci HTML a vytlačiť ich takto. Namiesto toho chceme zobrazovať obrázky. A uvedomili sme si, Maru, povedal nám že tento riadok kódu - tak sa poďme pozrieť tu. Ak by sme šli a preskúmali, budeme editovať to ako HTML. Maru, povedal, keď sme tento druh syntaxe, dostaneme obraz. Takže to, že zmysel? Jedná sa o typ reťazec, ktorý sme Naozaj chcem, aby vo vnútri oceánu skok, nie len samotný text. DIVÁKOV: [nepočuteľné] JASON Hirschhorn: Je nám ľúto? DIVÁKOV: Nemôžeš len skopírovať že ten, ktorý Kianna dal, a dať ju do toho - JASON Hirschhorn: Kopírovať tento, a dať to tu? DIVÁKOV: Jo. JASON Hirschhorn: Je to blízko, ale je tu jeden problém s tým, a Čo je to? HTML je reťazec, a my potrebujeme pridať reťazca k nemu. DIVÁKOV: Takže potom si dať to - nah. JASON Hirschhorn: A máme tri - to tu nie je reťazec. Ako to robíme reťazec? Ako sa vám vždy niečo string? DIVÁKOV: Ja neviem. JASON Hirschhorn: Ak mám texte, ako mám urobiť to reťazec? Páči sa mi tu na tejto linke tu? DIVÁKOV: Daj to do tabuľky? JASON Hirschhorn: Čo je to? DIVÁKOV: Citácia. JASON Hirschhorn: Double citácie, nie? Úvodzovky robí niečo reťazec. Takže to robí, že reťazec, a to je reťazec. Ako môžem dať dva reťazce spoločne v JavaScriptu? DIVÁKOV: Dot. JASON Hirschhorn: Nie dot. To je PHP. DIVÁKOV: Plus. JASON Hirschhorn: Plus, presne tak. Takže plus, a potom to, čo sa vám navrhujú robím tu? DIVÁKOV: Ďalšie citácie. JASON Hirschhorn: Ďalšie citácie, OK. Ako môžem ukončiť reťazec? DIVÁKOV: Ďalšie citácie. JASON Hirschhorn: Ďalšie citácie. A ako to mám dať tento reťazec spolu s týmto reťazcom? Naviac. To je presne to pravé. Práve si to urobil pre nás. To je perfektné. Takže teraz poďme robí to. A pozrite sa, máme celú banda snímok. Ach, môj Bože. Tí, ktorí sú desivé. Budeme skúmať je v sekunde. Jo, Noah? DIVÁKOV: Viem, že to nie je naozaj záležitosť, ale mala by zavrieš prvky s image značky? JASON Hirschhorn: Mohli, ak Chceli sme, zatvorte náš obraz tag, rovnako ako to. Poďme urobiť to. On nie, môžeme to urobiť. DIVÁKOV: Oh, som to zlomil. JASON Hirschhorn: Myslím, že to je overenie, hoci. Nemyslím si, že budete potrebovať uzatváracie lomítko. OK, to je skvelé. Carlos, ďakujem. Zatiaľ štyri z vás urobil úžasnú prácu. Samozrejme, ako môžete vidieť, že sme vytvára nejaký druh tabuľky skosenie. A ja chcem tieto veci sa v tabuľke. Tak ako som si to veci v tabuľke? Som jasne potrebovať viac HTML. Assam, aké HTML mám chýba? DIVÁKOV: Čo si chcete urobiť, prosím? JASON Hirschhorn: Chcem, aby všetky tieto obrázky v tabuľke, takže každý obrázok by mali byť v jednom stĺpci tabuľky. Ako hovorím, je to jeden stĺpec? Vy ste videl tento kód. To je v P set sedem. DIVÁKOV: Spomínam si jeden bol tr? JASON Hirschhorn: tr je na rade. DIVÁKOV: Neviem ho moje srdce, ale ja som sa mohla pozrieť. JASON Hirschhorn: Má niekto pamätať? DIVÁKOV: td? JASON Hirschhorn: td, presne tak. td dá to ako stĺpec. Takže keď som dal TD tam, Assam, to, čo potrebujem dal? Čo ešte musím pridať? DIVÁKOV: Musíš to ukončiť? JASON Hirschhorn: Presne tak. Tam, kde to má ísť? DIVÁKOV: Tu? JASON Hirschhorn: Tu? DIVÁKOV: Myslím, že áno. JASON Hirschhorn: Čo je to zatváranie tu? Čo je to za? To modrá vec? DIVÁKOV: To je na obrázku. Malo by ísť po, myslím. JASON Hirschhorn: OK, presne tak. Takže poďme sa pozrieť, čo to urobil. Oh, to je trápne. Poďme otvoriť oceán, stôl, Tabuľka telo, tr. Takže máme veľa, ale ja Nevidím obrázky. To je divné. Vyzerá to, že ho postavil, ale sa mi nezobrazia obrázky. Nejaké nápady, prečo to môže byť prípad? Akékoľvek myšlienky? DIVÁKOV: Ak prejdete dole, budete vidieť. JASON Hirschhorn: Boom! To sa tak tam, ale to je divné, že oni sú úplne dole. DIVÁKOV: Sú tiež všetci v rade. JASON Hirschhorn: A všetci sú v ř, a všetci sú rôzne veľkosti. Takže Assam, daj mi ešte jeden riadok kódu či môžem urobiť každý obrázok rovnakej veľkosti, a vyzerá to, že som už uvedené veľkosť Aj chcete, aby boli. Ako môžem urobiť každý obrázok rovnakú veľkosť? Dajte divoký odhad. Čo o tomto riadku kódu? DIVÁKOV: Dokážete Ako konštantný? JASON Hirschhorn: Alebo, kde je ďalšia miesto, kde by som mohol dať tento riadok kódu, keby som ho kopírovať? DIVÁKOV: Celú cestu dole na rovnakom riadku? JASON Hirschhorn: OK, poďme dať je to tu, presne tak. A teraz sa pozrime, čo sa stane. Ach, môj bože! Teraz to vyzerá, že začíname mať niečo, a vyzerá to, že všetky nejako vojde do tabuľky, ktorá sme postavený v každom td. Tiež, Assam, povedzme, že sa mi páči ich výšky, ako byť trochu viac - výšky vec je hádzanie ma, tak čo by som mal nastaviť v ich výške? Vyberte si ľubovoľný počet. DIVÁKOV: 200? JASON Hirschhorn: 200. Idem vyzdvihnúť 100.. To je skvelé. Pre naozaj páči 200. Tam ideme! OK, teraz to začína vyzerať trochu lepšie a trochu viac organizovanej. Akékoľvek iné myšlienky na to, čo potrebujeme, aby urobiť pre ukladanie obrázkov delfínov? Jo? DIVÁKOV: Sú citácie, alebo jeden úvodzovky okolo hodnôt pre zdroj, výška, šírka, sú voliteľné? JASON Hirschhorn: Kde sú jednoduché úvodzovky? DIVÁKOV: Rovnako ako v niektorej z príkladov, budeš mať ako výšky rovná citácie "150". Je Dôvodu nie je nutné. JASON Hirschhorn: Tak poďme pozrite sa sem. Ak klikneme na oceán, ísť do tabuľky, všimnete si tu dole to vlastne pridal tie úvodzovky pre mňa. DIVÁKOV: OK. JASON Hirschhorn: A tak som si uvedomil, čo robíme zdá bolestne pomalý. Máme len napísal tri riadky kódu tak ďaleko, alebo štyri riadky kódu, ale to je v skutočnosti, že proces Aj prejsť zakaždým, keď chcete aby sa tento web. Riadok po riadku, pomocou konzoly dole tu, poznávanie vecí a zisťuje sa krok-za-krokom, čo chcem robiť. Takže dúfajme, že tento napodobňuje pre vás v dobrom, pedagogickej, ako to, čo bude vlastne robiť, keď môžete vytvoriť svoje webové stránky. Poďme ďalej. Vytvorili sme tieto veci. Chystám sa vlastne - Avie, mám veľkú otázku pre vás. Neviem, budeme ďalej. Poďme do "vlaku delfína, keď jeho obraz je klikli. "Ako sa vám navrhujú som napísať, že riadok kódu? DIVÁKOV: K dispozícii je funkcia s názvom "vlak." JASON Hirschhorn: K dispozícii je funkcia s názvom "vlak," presne to pravé. DIVÁKOV: To predpokladá, že index. JASON Hirschhorn: Vlak očakáva, index, takže OK. Avie, to je presne to úvaha že by som rád videl. Vlak očakáva, že index. DIVÁKOV: Takže ideš mať pre sláčiky. JASON Hirschhorn: No, ja chcem robiť keď je obraz kliknutí, takže Avie, Ako môžem sledovať, kedy obrázok kliknutie? K dispozícii je niekoľko spôsobov, ako to urobiť. To je sila JavaScriptu a jQuery, ale aj najťažšia časť. DIVÁKOV: Ak zátvorky, nie. Alebo ak zátvorka udalosť, alebo tak niečo relatívne jednoduché? JASON Hirschhorn: Tak sme videli pár spôsoby, ako robiť toto v prednáške. Jedna vec bolo, tu dole, môžete urobiť niečo, ako by ste mohli vytvoriť Funkcie ako na kliknutie, alebo robiť niečo ako na kliknutie. Každý Spomínam si niečo také? Môžete to urobiť v HTML tagu. Vidím nejaké prázdne tváre. Niektorí ľudia sú ako to, čo to hovorí? To je v poriadku, pretože si myslím, že je to zložitejší spôsob, ako to urobiť. Budeme robiť oveľa jednoduchšie spôsob, ako pomocou jQuery. Takže, Avie? DIVÁKOV: Hm? JASON Hirschhorn: Ak chcem urobiť niečo, jQuery, som samozrejme štart, ako predtým, s týmto znakom dolára, otvorený paren, zatvoriť zátvorka a dvakrát kliknite cituje tu. Teraz už viem, že je potrebné volič tu. Čo volič si navrhnúť by sa vzťahovala ku každému obrázku alebo každý jeden obrázok? DIVÁKOV: Image? JASON Hirschhorn: To je Presne tak. To sa bude vzťahovať na každú snímku. Dostane všetky z nich. Nie je to číslo, nie je to trieda, je to typ tagu, a to bude dostať všetky do jedného. A teraz budem ti to teraz, a môžete vyhľadať viac Dokumentácia o tom neskôr, ale to čomu sa hovorí "na" sa zaoberá udalosťami. Takže to, čo máte urobiť teraz, a ktorý je super výkonný, je povedať, aký typ Akcie hľadáte, a to, čo Ak chcete robiť, keď vám dostane túto udalosť. Takže budem vám málo trochu viac kódu, Avie, potom musíš ísť, OK? DIVÁKOV: OK. DIVÁKOV: On - budeme hovoriť "Kliknite na" v tomto prípade, ktorý budete všeobecne používajú. Takže na kliknutie, a potom budeme prejsť to anonymné funkcie. A táto syntaxe budete vidieť veľa, a dúfajme, že bude písať veľa. Čo to však je, opäť, na kliknutie o niečo, čo nazýva obrazu, bez ohľadu na, niečo tzv image, budeme Na spustenie tohto anonymné funkcie. Nebudem dávať to meno. Nie som odovzdaním žiadne argumenty. Som, rád, vytvára tu fungovať, a tu je to, čo kód budete robiť. To je s týmto syntaktických prostriedkov. A tiež, ako ste si všimli, že vyzerá veľmi podobne ako to, že sa tu napísal predtým. OK, Avie. Takže chcete volať vlak na indexe. Je to to, čo chcete robiť? DIVÁKOV: Áno. JASON Hirschhorn: To je? OK. Pozrime sa, čo sa stane. DIVÁKOV: Počkaj, hoci. Index nie je premenná práve teraz. JASON Hirschhorn: Takže index nie je premenná práve teraz. Neviem, kde ste ju dostali od. DIVÁKOV: [nepočuteľné]. Takže sa budete musieť najprv zistiť, ktoré delfín dostal klikli? JASON Hirschhorn: Výborný. Musíte zistiť, ktoré delfín dostal klikli. To je divoký výstrel do tmy. Niekto nejaký nápad, ako môžem prísť na čo delfín dostal klikli? Ak nie, budem len vám to, pretože je to dosť šialené. OK. Takže poďme vytlačiť cez console.log. Táto vec. Takže, znak dolára, otvorené zátvorka, tak blízko zátvorka. Takže keď som kliknite na tento obrázok, idem tlačiť to konzola, a uvidíme, čo sa stane. Vráťme sa tu. Poďme sa utešiť. Žiadne chyby, vďaka bohu. OK. Som klikol. Dovoľte mi, aby som to urobil znova. Som klikol tento prvý záber, a to dostal vytlačená na konzole, tento rad vecí. Budem používať Slovo "to" veľa. To, čo tu, to je veľmi špeciálne, a to robí presne to, čo Avie chce to urobiť. Začína to, čo bolo klikol na alebo čokoľvek iného. Vzhľadom k tomu, opäť, tento výber sa deje vysporiadať s mnohými vecami, my nie nutne vedieť, ktorý vec sme hovorí, a tak chceme prísť z ktorých vec, hovoríme o pomocou tejto syntaxe. V tomto prípade je tu, hashtag oceán, vždy vieme, čo to, že sme bude hovoriť o, tak Nikdy sme naozaj potreba tento vnútri Hashtag oceánu. Je to vždy oceánu, že div. Je to číslo, len jedna možná vec. Ale v tomto prípade to platí pre mnoho obrazov, v skutočnosti, šesť obrázkov, a tak chceme vedieť, aké konkrétne Snímok bol klikol na. A vyzerá to, že to je typ informácií dostaneme. Dostávame to vyzerá, že niektoré veľké reťazec, a dostaneme všetko Informácie s týmto. Dostávame tony a tony a veľa vecí. jQuery je veľmi silný. Je nám dáva veľa informácií o tomto konkrétnom prvku HTML. Avie, čo chceme vedieť, o tomto prvku HTML? DIVÁKOV: Niečo ako ID. JASON Hirschhorn: ID. No, máme zdroj, na šírku, a výšky. DIVÁKOV: Môžeme použiť zdroj. JASON Hirschhorn: My možno použiť zdroj. To nám dám reťazec, URL reťazec. Čo budeme robiť s že akonáhle budeme mať, že? Ako sa dostaneme späť do našich Obsah v ocean_array? DIVÁKOV: Môžeme porovnať to druhé. JASON Hirschhorn: Tak sme sa mohli prechádzať každý. Teraz by sme mohli slučku znova a potom porovnať to. Predstavte si, čo by bolo jednoduchšie spôsob, ak by ste mohol len predstaviť jeden? DIVÁKOV: Nemať na slučke. JASON Hirschhorn: Nemať na slučke. DIVÁKOV: Len prísť na to, delfín, [nepočuteľný]. JASON Hirschhorn: Zisťuje čo delfín. OK. Takže poďme sa okrem toho, že informácie v tomto snímku tagu. A opäť, práve teraz, časť z týchto vecí je jednoducho čarovný, pretože som mohol sa vám to ukazovať prvýkrát, ale dúfajme, že to sú veci, budete robiť. Tak to je niečo, čo magické, čo môžete urobiť. Môžete ušetriť nejaké extra metadáta v prvku. To sa neukáže, že nebude na nič vplyv. Stačí si len uložiť to tam. A ja navrhujem, aby sme uložiť index každého obrázku. Takže spôsob, ako to urobiť, je vytvoriť atribút nazvaný údaje pomlčka, a potom, čo meno vás chcete dať. Údaje pomlčka je zvláštna vec, ktorá je s ohľadom na vás, a hovorí, že to je niečo, čo sa užívateľ chystá vytvoriť. Tak sme sa vytvoriť túto vec s názvom index, tento kľúč nazvaný index. A vnútri nej, budeme klásť nie len jeden zakaždým, ale čo robiť, vložíme do nej, Avie? Čo sa deje tu? DIVÁKOV: Dolphin. JASON Hirschhorn: Dolphin. To nie je to slovo. Dolphin. A opäť, už tlačený delfína skôr, že 0, 1, 2, 3, 4, 5, a šetríme, že s obrazom. Takže teraz, keď som to - a opäť, sme sa okrem toho, že metadáta. Ako získať prístup, že metadáta? Je to s funkciou len s názvom "dáta". A budete musieť prejsť to jedno a iba jeden argument, ktorý je názov veci. Takže budem tlačiť na to, a potom budem mať otázky. Ale v podstate, ja hovorím, daj mi to Objekt, ktorý bol klikli na, pozrite sa vo všetkých svojich dátových atribútov, a jeden s názvom "indexované" daj mi túto hodnotu. A pozrime sa, čo sa stane, keď sme obnovte túto stránku. Presne to, čo sme očakávali. Opäť platí, že bolo celkom čarovné. Robili sme veľa tu. Kto má nejaké otázky týkajúce že? Jo? DIVÁKOV: Mám len otázku o svoje živé kódu. Môžete použiť ako jednoduchú úvodzovky, dvojité citácie, ako práve tam. JASON Hirschhorn: Tu. DIVÁKOV: Jo. Je nejaký dôvod, prečo to robíte jednoduché úvodzovky, dvojité úvodzovky? JASON Hirschhorn: Tam je dôvod, a to sa vráti k tomu, čo Marcus spýtal skôr. V tejto línii, som bol trochu lepšie v mojom kódovanie. Chcem to, a to je to, čo som poctivo mal urobiť všetky čas, pre šírku a výšku najmä. Poďme sa pozrieť sem. Uvidíte tu, Môžete vidieť, že? Viem, že je to taká malá, ale dáta index pomlčka je v úvodzovkách. Tieto veci treba vždy byť v úvodzovkách. Hodnota musí vždy byť v úvodzovkách. Ale tu, keď som robil dvojité úvodzovky, ktoré skončí tento reťazec tu, a teraz by som nemal byť písanie v reťazci. Tak som si asi, že len pomocou jeden citát, pretože jeden citát nekončí reťazec JavaScript, ale HTML nie je jedno, či ste dávať to jednoduché úvodzovky alebo dvojité úvodzovky. Bude to len interpretovať ako úvodzoviek. Má to zmysel? Jo? DIVÁKOV: Ako sa dostať, že IP adresa v spodnej časti vášho klienta? Mine hovorí, že nemá IP adresu. Je tu niečo, čo by som mal sa vykonáva v [nepočuteľný]. JASON Hirschhorn: Vo vašom zariadení, to nemá nič spoločné? DIVÁKOV: Áno. JASON Hirschhorn: Tam je niečo čo môžete urobiť pre to opraviť, ale ja nie som tráviť čas chodením vďaka, že práve teraz. Ale môžeme to urobiť po bode. DIVÁKOV: Ak sa vydáte späť na konzoly, prečo bol číslo uvedené 012321? JASON Hirschhorn: konzola? No, pretože som bol kliknutím okolo seba. DIVÁKOV: Oh, OK. To nič. JASON Hirschhorn: A znova, môžem kliknite na niečo, čo bajillion krát. DIVÁKOV: Mám otázku ohľadom Váš slučka znova, vaše pre slučky. Pretože viete, P set osem, ktoré použiť inú formu tejto slučky. Takže to, ako var i rovná 0, aj menej ako ocean_array.length, i + +. Sú tie, ktoré rovnocenné? JASON Hirschhorn: To je štandard pre slučku. Alebo jo, to je pre slučky. V skutočnosti, sme videli, že je to ekvivalent. DIVÁKOV: Tak to je ekvivalentná na to, čo si tu urobil? Je jedno považované za lepšie ako ostatné? JASON Hirschhorn: Nie Takže, ešte raz, sme išli nad niektorými vecami. Teraz sme presťahovali z našej komfortnej zóny a začal robiť nejaké naozaj cool veci, ktoré sme nutne preč viac než v triede skôr, bude ale dúfajme, že bude veľmi silný pre vás, keď kódovanie. Avie, vráťme sa sem. Mám index delfína. A teraz, čo mám robiť? DIVÁKOV: Musíte trénovať. Takže namiesto toho, aby console.log, vás možno nastaviť premenné rovná, že? JASON Hirschhorn: OK. Takže? DIVÁKOV: Nie som si istý, ak môžete urobiť, že. JASON Hirschhorn: Tak var x sa rovná to, čo to vracia, to bude to vrátiť. Nezáleží na tom. Je možné vrátiť žiadnu premennú. Je tu žiadne druhy tu. DIVÁKOV: Alebo si len mohol to volanie funkcie. JASON Hirschhorn: Jo, prečo by som to robil? Len to volanie funkcie. DIVÁKOV: Jo. Dajte inú sadu zátvoriek. JASON Hirschhorn: Perfect. To je presne to pravé. Tak, že bude volať funkciu vlak. Samozrejme, nič nie je vo vlaku funkcie, takže navrhujem, Akshar to, čo som by mal robiť vo funkcii vlaku. Daj mi nejaký pseudo kód. DIVÁKOV: Myslím, že by ste mali odstrániť delfín z pôvodnej tabuľky. JASON Hirschhorn: A to je stále Noemovi predtým, prečo by sme kopírovanie sa do nového poľa. Správne, pretože nemáme upraviť naše delfíny poľa, pretože čo keby iný Program je používať, alebo to, čo chceme sa k nim dostať niekam inam? My chceme urobiť kópiu, a to ten budeme upravovať. DIVÁKOV: Potom umiestnite že vo svojom novom umiestnení. JASON Hirschhorn: A čo robiť musíme urobiť po tom? DIVÁKOV: A potom vytlačiť Informácie o delfína. JASON Hirschhorn: To je Presne tak. My ju odstrániť z ocean_array sme vložte ho do bazéna, a potom sme sa kresliť oceán v bazéne. Ako môžem odstrániť delfín z ocean_array? DIVÁKOV: Idete do indexu. Oh, OK. Použite funkciu zostrih. JASON Hirschhorn: OK, tak to je pravda. Mohol by som použiť funkciu zostrih, ktorý berie niečo z poľa a kondenzácii. To je niečo nové, sme ešte nevideli. Ale ja naozaj chcem, aby priestor tam, pretože chcem vytlačiť prázdne miesto v oceáne. DIVÁKOV: Takže si môžete nastaviť obrázok tohto indexu, ocean_array index bodka obrázok. JASON Hirschhorn: OK, ocean_array, index. DIVÁKOV: Dot obrázok. JASON Hirschhorn: Dot obrázok. DIVÁKOV: A nastaviť ju na hodnotu null? JASON Hirschhorn: Rovná null. OK. Takže nič, čo tam je, tak potom Ako môžem dať do bazéna? Constantine, ako to mám vložte ho do bazéna? Máme túto premennú sme nazvali, zavolal bazén, tu. DIVÁKOV: Ešte sme sa jednoducho rovná ocean_array index? DIVÁKOV: Nemali by ste prepnúť na objednávku? JASON Hirschhorn: Jeden sec. Jo? DIVÁKOV: Jo, to bolo naozaj dobrý postreh. JASON Hirschhorn: Čo sa deje tu? DIVÁKOV: Je to index? JASON Hirschhorn: Index, presne tak. A čo si povedal, Constantine, je niečo, čo by sme mali robiť? DIVÁKOV: Mali by sme možno prepnúť na objednávku. JASON Hirschhorn: A prečo by zapneme príkaz, možná? DIVÁKOV: Vzhľadom k tomu, že na upozorniť, že je to už null. JASON Hirschhorn: Takže to nie je všetko null, ale my sme stratili URL obrázka. Už sme ho stratili navždy? DIVÁKOV: Technicky nie? JASON Hirschhorn: Have sme ho stratili navždy? Divákov: Nie JASON Hirschhorn: No, kde to je? DIVÁKOV: Vo svojom pôvodnom delfína - JASON Hirschhorn: Je to v delfínmi, ale v ocean_array sme stratili navždy. Takže Constantine, môžete navrhnúť lepší spôsob, ako napísať tento riadok? V skutočnosti, je mi ľúto, je to uložené v bazéne. Máme ho v bazéne, pretože Bazén je objekt, nie? Ocean_array index, ocean_array je pole objektov. Takže bazén je objekt, a máme URL tam, a dole Tu je nastavená na hodnotu null. Takže vlastne, my nie stratil navždy. Je to len uloží do bazéna. Ale rozhodne to nie je v ocean_array, a ako si hovoril, Carlos, je v pole delfíny. Takže to vyzerá sladko. A potom ako sa kresliť oceán a bazén? Mario? DIVÁKOV: Môžete len zavolať draw_pool a draw_ocean? Tak ako, draw_pool, a potom - No, jo, to neberie nič. JASON Hirschhorn: Skvelé. Čo draw_pool robiť? DIVÁKOV: Nakreslite bazén? JASON Hirschhorn: Jo, no, čo to bude robiť? DIVÁKOV: Ospravedlňujem sa. Dalo by sa urobiť to isté vec, ako sú - JASON Hirschhorn: Vydrž, budeme sa tam dostať. Nič. To nič nerobí práve teraz. Uvidíme, či to funguje, aj keď. Kto nám dal ten kód? Akshar a Constantine nám dal ten kód? OK, poďme sa pozrieť, čo sa stane. Ah! Bolo to tak vzrušujúce. Je to preč. Oh, chlapče. To je celkom škaredá. No, môžeme sa vrátiť a opraviť neskôr. Zaujímalo by ma, kde to je? Zachránili sme ho do tejto premennej bazéna. Ako môžem zistiť, či je to V tejto premennej bazéna? No, opäť, sila JavaScript, a najmä na nástroje, ktoré Chrome vám dáva, je teraz môžete skontrolujte, že premenné bazén. Je to globálny, pamätáš? Nechceli sme dať kľúčového slova var. Takže keď som typ Enter tu, Constantine, čo si myslíš, že som dostaneme, keď som stlačte klávesu Enter? DIVÁKOV: Ja neviem. JASON Hirschhorn: Guess. DIVÁKOV: Nič? JASON Hirschhorn: Nič zlého. To bolo dobrý odhad, keď. Mám objekt. Pamätaj si dal si mi že riadok kódu. Bazén, ste uložili v tom, že variabilný objekt. A skutočne, vidíme objekt ste uložili v ňom. To je úžasné. Môžeme prezrieť tu. Je to skoro ako v reálnom čase GDB, že sa môžeme pozrieť prostredníctvom nášho kódu a prísť veci von. To je super cool a super výkonný. OK, poďme dokončiť to. Poďme nakresliť bazén päť minút. Maru, dajte mi linku Kód čerpať bazén. DIVÁKOV: Tie by mohli mať ďalšie variabilné HTML, ale / pre. JASON Hirschhorn: Urobme Je to veľmi jednoduché, pre teraz. Povedzme, tlač názvu delfín sme školenie. DIVÁKOV: A potom si môžete urobiť dolár podpísať, otvorené zátvorky, a potom otvorte ponuku. Myslím, že libra bazén, ak to bolo niečo. Nespomínam si. JASON Hirschhorn: Poďme sa pozrieť späť. Myslím, že je to vec. DIVÁKOV: OK, jo. A zatvorte ponuku, uzavrieť zátvorky . Html, otvorené zátvorky, a potom myslím, že bazén, rovnako ako otvorené konzoly 0, alebo niečo také. Zavrieť dot názov. Neviem, či to funguje. DIVÁKOV: OK, poďme sa pozrieť, čo sa stane. "Nemožno čítať vlastnosť názov definovaný. "Takže znovu, tu je to, čo ideme na check-out. Budeme skúmať to. Urobil si bazén, ktorý je otvorený bracket0,. Názvu. Opäť platí, že to robím celý čas, a ja som zmätený, čo sa deje, čo robí toto varovanie. Poďme sa pozrieť na bazéne. Poďme sa pozrieť na bazén držiaku 0, nedefinované. Tak to je miesto, kde sme beží do nášho problému, že jo? Pool držiak 0 nie, Je zrejmé, že existujú. Čo si myslíte, že existuje? DIVÁKOV: Je bazén len objekt sám o sebe? JASON Hirschhorn: No, a čo to hovorí tu? Keď sme stlačte klávesu Enter na bazén, čo to hovoria, že to je? DIVÁKOV: Object. JASON Hirschhorn: Jedná sa o objekt, tak? DIVÁKOV: Jo, jo. Takže len pool.name miesto - JASON Hirschhorn: Pool.name dáva presne to, čo ste chceli. A uvedomujem si, idem cez tento pomaly a hašteriť tento bod, ale to je presne to, ako to robím toto. Budeš bežať do týchto chýb počas konečného projektu, tak dúfam, že je to posilnenie, aby ste mohli použiť všetky tieto nástroje. Ide o zásadný a bude vám Super duper ďaleko. Takže nechcem, aby len vytlačiť meno. Urobme to trochu trochu krajší ako toto. DIVÁKOV: Čo ešte chcete robiť? JASON Hirschhorn: OK, v pohode. Budeme robiť len to. Fuj. Chlapci, nemáte života. OK, boom, to mám. Vyzerá to dobre. Uvidíte, Akshar, tu dole, sme null, nebol nájdený. Takže to vyzerá, že sa stále snaží nájsť nejaký obraz, a že neurobil presne to, čo sme chceli urobiť. Nebudeme ísť do toho hneď, ale je to asi čistejšie spôsob robí to. DIVÁKOV: Mohli by ste odísť ako prázdne miesto na obrázku? Ako miesto nastavenie na hodnotu null, môžete nastaviť tak, aby chceli prázdny reťazec alebo tak niečo? JASON Hirschhorn: Takto? DIVÁKOV: Jo. JASON Hirschhorn: [nepočuteľné]. Nebol nájdený. Takže tam je to lepší spôsob, ako to urobiť. Navrhoval by som robil to. Len nastavenie null tam. Potom samozrejme, čo je bude diať? Je to ísť preč úplne. Takže ak by sme chceli, aby sa priestor a to že sme pravdepodobne chcieť niečo urobiť sa aj tu. Chystám sa, ako začať. Akshar, daj mi tento riadok z kódu naozaj rýchlo. DIVÁKOV: Ak ocean_array, delfín, rovná, rovná, rovná - rovná null? Jo. JASON Hirschhorn: Tak čo? DIVÁKOV: Tak to html. Stačí skopírovať spodnej kódu, naozaj. JASON Hirschhorn: Kopírovanie, čo? DIVÁKOV: Môžete kopírovať - JASON Hirschhorn: to? DIVÁKOV: Jo. JASON Hirschhorn: Všetko z toho? Nemáme obraz. DIVÁKOV: Mám na mysli vás môže len tak nechať - jo, stačí zavrieť. Ale myslím, že budete musieť nastaviť šírku. JASON Hirschhorn: No, práve vytvoriť prázdny stĺpec. OK. A potom v tom prípade budeme pravdepodobne chcem to urobiť rovnako. Oops. Oh. Nefungovalo to, ale nie sme ako túto chybu. Poďme sa pozrieť, čo sa stalo tu. Takže tam nič nie je, tak čo ste hovoril, že by sme mali pridať? DIVÁKOV: Mali by sme nastaviť šírka riadku. JASON Hirschhorn: Na čo? DIVÁKOV: Myslím, že je to 150. DIVÁKOV: Jo, to bolo 150. JASON Hirschhorn: Budeme dať to sem aby môj kód v súlade. Ale to nie je jedno. OK, dobre. Pridal. OK? Takže je to stále ísť preč. DIVÁKOV: Oh, zavolaj šírku? JASON Hirschhorn: Vyzerá to, , Ako je šírka 150. Poďme sa pozrieť. Teraz budeme robiť v konečnom znení, cool, silná vec, že ​​som vám ukážem. Nejdeme do konca tohto kódu, ale on-line, ako sme prestať, to všetko Kód bude správne. Ja vám zašleme e-mailom opravenú verziu s niektorými z môjho vlastného štýlu po sekcie, a že bude zverejnený on-line. Odporúčam vám, aby sa skúmanie tejto a použiť ako odkaz, ale ja Chcem vám ukázať konečné nástroj pre tento triedy, a to je tu na pravá strana. A my sme sa pozerali na tento minulý týždeň, ale teraz dúfajme, že to je trochu známejší pre vás a pohodlné. Môžete dynamicky hrať s CSS stránky. My sme vlastne už nás vidieť dynamicky hrať s HTML. Pamätaj sme urobili správnu kliknite na tlačidlo Upraviť vo formáte HTML? Tu? Takže sme hrali dynamicky s HTML. V konzole môžete dynamicky hrať s JavaScriptu časti stránky. Napríklad, že je platný JavaScript riadok. Boom, dostal som presne to, čo som chcel. Takže môžeme dynamicky hrať s HTML, dynamicky hrať s JavaScript. Teraz ideme do dynamicky hrať sa s CSS. A to všetko preto, že je to ako okamžité, živé GDB spätnú väzbu, a tak si môžete poznať právo niečo deje pred tým, než ísť kódu, a môžete nie hádať, čo niečo je bude vyzerať. Tak to je super duper cool. A poďme sa konečne pozrieť na dynamicky hrať s CSS. To je tu na pravej strane strane, element.style. Poďme na to. Tu je náš živel. Poďme dať nejaké extra CSS. Alebo ľúto, by sme mohli dať nejaký ďalší CSS, ale pravdepodobne, v tomto prípade, Chcete zmeniť toto atribút. Takže poďme sa tu na tomto riadku. Oh, nemôžem to urobiť tu. Prepáčte. Upraviť AS - tak to je, ako by ste mohli upraviť CSS. Nebudeme upraviť CSS na to druhý, ale my chceme editovať HTML a dať mu ďalší atribút. Čo si navrhnúť zmenu to? Myslel som, že Avie mal návrh. DIVÁKOV: šírka Col? JASON Hirschhorn: To vyzeralo ako to neurobil jeden. Skúsme CSS. DIVÁKOV: [nepočuteľné] trieda? JASON Hirschhorn: To hovorí, to nefunguje. To dáva tú žltú vec. DIVÁKOV: Ale [nepočuteľné]. DIVÁKOV: Nie si nastavenie šírky obrazu na 150, keď robíte, že? Ako by to jednoducho používať šírku? JASON Hirschhorn: Jo. DIVÁKOV: Ale my nemáme image už. JASON Hirschhorn: Nie Nemáme nič tam. Takže nebudeme riešiť špecifický problém. Ideme sa vrátiť do Akshar je riešenie, pretože chcem nastaviť delfín zadarmo pre bytie času, alebo je to posledné vec, ktorú chcem dokončiť. Takže ideme nechať to tu pričom sa uznáva, že to nie je tak celkom správne, a budeme vrátiť sa k nemu. Prepáčte. Povedal som, môžeme dynamicky zmeniť CSS. Poďme sa pozrieť na to, a to že naozaj rýchlo. Takže keď som sa pozrieť tento prvok tu dole, a že chcem, aby to modrej, môžete prísť sem, farba, pretože Viem, že mení farbu niečo, a my sme videli, ako to zmenilo to modré. Tak to som ja dynamicky zmenou CSS. Nie je to zmeniť k dobrému, ale potom Môžem sa vrátiť do svojho CSS súboru a zmeniť farbu objektu. OK. To bolo veľa. My nedokončil svoj úžasný program. Dovoľte mi ukázať vám, že to naozaj rýchlo, a potom vyrazíme von. Oh, kde to je? Nie! Vydrž. OK, tak ako ste baliť, úžasný náhľad alebo predné zobraziť na nabudúce. To je Dolphin Trainer 2013, a to nefunguje. Skvelé. [Smiech] JASON Hirschhorn: Oh! Boom! Čo to znamená? DIVÁKOV: Ty si chmod. JASON Hirschhorn: Nechcel som chmod to. DIVÁKOV: Riadok jeden. JASON Hirschhorn: Oh, pozri sa na to. OK. Takže, mám šesť delfínmi. Čo sa stane? Poďme sa pozrieť. Ak by som trénovať jeden, teraz tréning Lili. Oh, chcem vás oslobodí, Lili. Tu máš, späť do oceánu. Tak to bolo tento týždeň. Ak máte nejaké otázky, budeme vonku. A opäť, tak ja posielam vás Zvyšok tohto kódu. Ďakujem vám, páni.