JASON HIRSCHHORN: Tervetuloa, kaikille, viikkoon yhdeksän. Meillä on jännittävä viikko edessämme koska meillä on lopullinen ongelma asetettu. Meillä on myös uusi kieli, JavaScript, että olet jo Keskellä käyttää paitsi tähän Harjoitus, mutta monet teistä luultavasti käyttää sitä lopullista hankkeita erityisesti web-pohjainen opinnäytetöissä. Niin, että mitä me menemme tänään jälkeen puhuu lyhyesti resursseja, jonka teemme joka viikko. Me hypätä JavaScript, ja sitten Vietämme kaikki osio käytännön toimintaa koodaus Dolphin Trainer 2K13, joka on kuin Madden 2013, mutta delfiinejä ja JavaScript. [Naurua] JASON HIRSCHHORN: Niin kuin aina, lista resursseja voit tarkistaa. Nämä resurssit ovat erityisen tärkeitä koska ensi viikolla Keskiviikko on tietokilpailu yksi, sinun toinen ja lopullinen tietokilpailu tällä kurssilla. Aivan kuten tietokilpailu nolla, se on 75 minuuttia ja alkaa vähän jälkeen kolmetoista. Se kattaa kaiken alkaen Day Zero Tämän kurssin, mutta se varmasti korostaa kaiken, on tapahtunut sen jälkeen tietokilpailu yksi. Mutta tietenkin, kävimme silmukoita alussa vuoden. Silmukoita todennäköisesti vielä menossa olla osa tätä tietokilpailu, joten se ei ole kuten voit jättää kaiken, tapahtui ennen viikkoa viisi tai tietokilpailu nolla koska tämä kurssi perustuu itselleen paljon. Mutta varmasti painopiste on asioita olemme oppineet vuodesta viikolla kuusi. Se sisältää PHP, JavaScript, SQL olla varma, ja myös kehittyneempiä tietorakenteita puhuimme C. Koko joukko muita aiheita, mutta me Keskustelemme ensi viikolla Arvioimme varten tietokilpailu. Ja myös, kuten aina, jos sinulla on kysymyksiä tietokilpailu kuin olet valmisteluun, rohkeasti lähettää ne minun tavallani. Juuri nyt, ei kukaan ole mitään nopea kysymyksiä tietovisa? OK. Ei tarvitse huolehtia siitä tai kummajainen tietoa juuri nyt, mutta pitää tämä takaraivossa, koska se on tapahtumassa viikko ja päivä nyt. Lopuksi, tiedän, olemme käynnissä kohti lukukauden loppuun - on vain kaksi osaa jäljellä jälkeen - mutta olen edelleen innostunut ja innokkaita palautteesta jos sinulla on. Haluan tehdä näitä paras kaksi osaa koskaan. Ne tulevat luultavasti olemaan, koska jokainen osa on hämmästyttävä ja paras koskaan. En tiedä, miten se on mahdollista, mutta he ovat kaikki olleet fantastisia, luulen. Palautetta olen saanut on hinattava pois mitään ja kukaan sillä varten Parin viime viikon aikana, niin antakaa minulle palautetta, jos sinulla on sitä. Se kestää kolme minuuttia. Voit kertoa minulle hyviä asioita sinulle Haluatko minun pitää tehdä tai asioita, joita en voi työskennellä. Yritän olla paras opettaja mahdollista, tai yritän tehdä paras Voin, mutta en voi tehdä sitä, jos en tietää, miten te teette. Ja se on vaikea sanoa, miksi olet laskussa unessa luokassa, joten haluan tietää sen jälkeen, miksi näin oli. Minä näytin sinulle tämän kuvan viime viikolla. Tämä on Teenage Mutant Ninja Turtles pyörä minulla oli, kun olin nuorempi, ja jatkamme ajaa te ilman apupyörät kuin me upota olet toisella kielellä. Mutta uskokaa pois, JavaScript, kuten PHP, on hyvin samanlainen kuin mitä olet tehnyt aiemminkin. Paljon logiikka siirtää yli, jos ei syntaksin, täsmälleen yksi-yhteen. Mutta jälleen kerran, kaikki nämä kielet olemme menneet ohi parin viime viikkoa, vaikka ne näyttävät ylivoimainen, ovat uskomattoman tehokas ja mahdollistaa voit tehdä paljon oman opinnäytetyön ja luultavasti muut sivustot, että olet koodi tulevaisuudessa. Joten pitemmittä puheitta, aiomme aloittaa sukeltamalla JavaScript. Aiomme puhua siitä lyhyesti ja sitten todella päästä käytännön koodaus osa tästä kohdasta. Joten JavaScript on client-side scripting kieli, mikä tarkoittaa että se erilainen kuin PHP ja se on erilaista kuin C. JavaScript ei ole laadittu ja se ei siirretä palvelimelta. Pikemminkin lataat sen. Lataat JavaScript sivun, kun lataat Web-sivun, ja sitten se suorittaa koneellasi. Eli voit nähdä kaikki JavaScript-koodia, joka oli lähetetään käyttäjän omalle koneelle. Joskus se lyhentää tai koodattu bit, salattu vähän, niin että sinulla voi kertoa selkeästi, mitä on tekeillä. Esimerkiksi, jos tarkistaa CS50 tai henkilöstön ratkaisu tämän viikon Harjoitus, ja menet service.js, huomaat et voi itse kertoa mitä tehdä, mitä me annoimme teille. Me salattu se vähän tehdä että hieman vaikeampaa. Kuitenkin, voit nähdä tarkasti JavaScript-tiedoston, että olemme täytäntöönpanosta ja meidän ohjelma on käynnissä. Niin, että mitä merkitsee olla client-side scripting kieli. Samanlainen kuin C ja PHP, vaikka, JavaScript on silmukoita, jos / muu ehtoja ja silmukoita. Samanlaisia ​​PHP, se on foreach silmukka samoin. Ja vielä, hyvin samankaltainen syntaxes että olemme nähneet kielet, joita olemme jo työskennellyt. Lopuksi, yksi hienoimmista osista JavaScript, ja jotain me olla tekee paljon tänään, ja luultavasti olet ll tehdä paljon teidän P setti jos eivät ole kokeneet sitä jo, on sinun voi tarkistaa kaikki virheet olet koodissa kautta JavaScript-konsoli. Me katsoimme sitä hieman viime viikolla. Katselimme eri tyyppistä konsoli tarkastaa sivulle, mutta Chrome, uudelleen, voit nähdä layout, HTML, dokumentoida, että sivu on näyttämällä ruudulla. Voit myös nähdä kaikki JavaScript muodostavat kyseiselle sivulle, ja voit myös, kuten Sanoin, nähdä kaikki virheet JavaScript-konsoli. Ja me kokea, että enemmän vähän kun alamme koodausta. Yksi asia huomata noin JavaScript muuttujia. Kuten PHP muuttujia, ne löyhästi kirjoitettu, joten sinun ei tarvitse antaa heille tietyntyyppisiä. Laajuutensa, joka on määritelty mukaan "var" avainsana. Joten jos et laita avainsanan eteen jotain, voit vain kirjoittaa nimi muuttujan, sitten tehtävän toimija, tässä tapauksessa yhtäläisyysmerkki. Olen unohtanut puolipiste oikeassa, mutta olettaa siellä puolipiste oikeassa. Sitten luot globaali muuttuja. Jos laitat "var" avainsana, niin annat sen tietyntyyppinen paikallisia soveltamisala, onko se on toiminnon tai silmukka. Niin että on yksi asia Huomioithan muuttujia. JavaScript on kieli. jQuery on kirjasto päälle rakennetaan JavaScript kieltä, ja sinulla on nähnyt sen ennenkin luento. Suosittelen, jos aiot käyttää JavaScript lopulliseen projekti, että saat tietää jQuery. Se tekee kaiken mitä haluat tehdä paljon, paljon helpompaa. Sen mukana tulee myös ihana dokumentaation ja esimerkkejä, joiden avulla saat aloitit. Tänään aiomme olla jQuery samoin. Nämä, mitä minulla on tällä liukumäki, ovat hyvin perusasiat jQuery. Yläosassa HTML-tiedoston tai riippumatta - hakemisto.php tiedoston, index.html tiedosto - sinun täytyy sisällyttää nämä kaksi riviä. Nämä ovat melko yleisiä linjoja. Ensimmäinen rivi sisältää jQuery JavaScript-tiedoston, ja toinen rivi sisältää missä olet kirjoittanut oman JavaScript-koodin. Ja tietenkin, koska sinun JavaScript-koodin olet todennäköisesti käyttänyt Joissakin jQuery-kirjaston toimintoja, että tarvitsee mennä jälkeen jQuery osallisuuden script. Haluamme tutkia tätä hetken kuluttua uudelleen. Ja lopuksi, JavaScript-tiedoston, Kutsun tätä yksi index.js. Se voisi olla scripts.js. Mitä se on, mitä JavaScript tiedosto olet, aloitat yleensä Tämän rivi koodia, dollarin merkki, avoin kantatuote, asiakirja, lähellä paren, aikana, valmis, avoin kantatuote, toiminto, avoin kantatuote, lähellä kantatuote, ja sitten kihara ahdin. Heittää koodin sisällä siellä ja sitten lopettaa se kihara ahdin, lähellä kantatuote, puolipiste. Joten pitää tätä annettu. Jos aiot käyttää jQuery, kääri kaikki jQuery koodin sisällä tämä rivi koodia. Ja näemme, että taas toisen. Jälleen me voidaan työskennellä jQuery, ja kysy kysymyksiä kuin menemme tänään, mutta ei kukaan ole mitään kysymyksiä jQuery tai JavaScript juuri nyt? OK. Joten pitemmittä puheitta, esittelen sinulle Dolphin Trainer 2K13. Olen erittäin innoissani tästä uusimmat versio tuotteesta. Voi ei! Olin niin innoissani. Aioin näyttää sen teille, mutta näyttää siltä, ​​ettemme ole täytäntöön sitä vielä. Tehdään tästä vähän isompi. Joten jos lataan koodi Dolphin Trainer - Dang se. Olen pahoillani, kaverit. Olin työskennellyt tämän ennen luokan. Ajattelin olla se valmis, mutta kai minulla on vieläkin työ jätettiin tekemättä. Mutta onneksi te kaikki on joitakin JavaScript ja jQuery käytännössä niin mennään eteenpäin ja lopettaa tämä yhdessä. Luulen lähettänyt te kopioita tästä, koska olin erittäin innoissani siitä, joten sinun pitäisi olla sama koodi, joka minulla on. Katsotaanpa päänsä - Dang se, kaverit, olen pahoillani. Lähdetään terminaaliin, vaikka. Aivan kuten mennyttä ongelma sarjaa, jos sinulla on minun - Tehdään tästä vähän isompi, myös siitä, että te - otit zip-tiedosto. Olet oletettavasti purit. Mennään tänne. Ja sitten toivottavasti muutit sen samassa hakemistossa, johon olet tallentanut ongelman asetettu kahdeksan koodia. Ja säästämme että hakemistoon, jolloin voin käyttää sitä - tai me kaikki voi käyttää koodin Chrome-selaimessa meidän tietokone. Ja vielä, päästä, että koodia, sinun yksinkertaisesti kirjoittamalla osoitteen osoitteessa alhaalla, oikealla puolella laitteesi, tänne. Löydät oman IP-osoitteen. Kirjoitat, että osaksi Chrome-selain tietokoneeseen, ja tässä tapauksessa koska olemme kohta yhdeksän kansion meillä on myös lisätä slash kohta yhdeksän. Saanen - oho. Aion minimoimaan tätä joten en täytyy pitää klikkaamalla läpi. Niin, että miten otan tämän koodin. Olen jo tehnyt sen jo. En aio käydä läpi näitä vaiheet sillä siitähän alussa Harjoitus kävelee läpi miten. Joten mene eteenpäin ja saat asettaa tämän vuonna toisen, mutta Katsotaanpa ensin tutustua koodi ryhmänä. Katsotaan, mitä tein. Yritin saada suurin osa siitä tapahtuu ennen luokan, mutta luulen oli hieman jäljessä. Joten avaa index.html. OK. Ja index.html on todella yksinkertainen sivu koska en haluavat saada liian hullu. Halusin varmistaa, että se toimi, mutta kai ei mennä siihen. Tässä on pää, joka on oikeassa sisällä näitä HTML-tageja ja huomaamme pari asiaa suoralta kädeltä. Meillä on CSS-tiedoston oikea täällä ja asianmukaiset sijainnin CSS-tiedostoa. Meillä on jQuery-kirjaston täällä, ja huomaat jotain erilaista tästä. Lähde on jotain todella, todella pitkä. ajax.googleapis.com/-- tavallaan näyttää URL, mutta se ei varmasti näyttää js / jquery.js. Ja se johtuu siitä, päätin, että minun eivät halua joutua lataamaan jQuery tiedosto ja vedä se ja säästä se minun kirjasto ja olla vastuussa siitä. Pikemminkin olen juuri menossa ottamaan JavaScript-tiedoston, että Google isännät. Joten Google oikeastaan ​​isännöi useita kirjastot, ja jQuery, koska se on yksi suosituimmista, se isännöi että yhtä hyvin. Ja koska se on hosting sitä, en tarvitse huolehtia siitä, ja he päivittää sitä, mutta kun he eivät päivitä se Olen luultavasti tarvitse muuttaa näitä numerot täällä. Mutta se on vain tehdä minun koko tiedosto järjestelmä hieman vähemmän puhdas. En todellakaan pidä hosting kaikki nämä tiedostot. Se on paljon mukavampaa, jos Google on isäntä ne minulle. Joten tämä taas on tulossa koko JavaScript-tiedoston, mutta se vain on Googlen ylläpitämä sijaan minun tiedostojärjestelmä tietokoneeseen. Näemme myös, että laitoin kaksi tiedostoja dolphins.js ja trainer.js. Tutustumme kuin toisessa. Ja lopuksi, tämä otsikko täällä. Kuka voi kertoa minulle, mitä tämä koodi sisällä Näiden otsikkotunnisteet, jossa että menee sivuni? Yleisö: Like, että asia työkalurivi tai mitä tahansa? JASON HIRSCHHORN: Joo, vähän välilehti päälle kromi ikkuna. Siellä että teksti menee. Kehossa, kuin voit katso, ei paljon tavaraa täällä. Minulla on vain kolme divs. Annan heille joitakin tunnukset, ja Laitoin vähän tekstiä sisään Mutta kai siksi emme näe mitään tänne. Oikeastaan, näemme Dolphin Trainer 2K13. Näemme TODO. En tiedä missä se on lähtöisin koska en näe, että täällä. Joten ehkä se on yksi minun JavaScript-tiedostot. Me tarkistaa, että ulos toisessa. Voiko joku muu kertoa minulle, mitä Tämä tunnus tarkoittaa täällä? Yleisö: Se on tapa vaatia erityisenä osiona [kuultavissa] tiedoston? JASON HIRSCHHORN: Joo. Se on vain tapa viite Tässä nimenomaisessa div. Tunnukset ovat ihanteellisesti ainutlaatuisia. OK? Kova väkijoukkoon. Joten, tunnukset ovat yleensä ainutlaatuisia. Annat heille yhteen tiettyyn elementti koodissa. Mitä jos halusin viite numero elementtejä, onko se CSS styling tai jQuery? Mitä määrite voin antaa heille? Yleisö: Class. JASON HIRSCHHORN: luokka, tarkalleen. Oikea. OK, joten index.html jälleen ei paljon tekeillä. Joten avata toinen tiedosto. Katsotaan, mitä minulla on. Siinä kaikki mitä on täällä. Mennään JS-kansioon. En aio murehtia CSS nyt. Avataan dolphins.js. Oho. Tai pikemminkin - OK. Joten, dolphins.js, se todella näyttää melko samanlainen kuin jotkin koodin annettiin ongelma asetettu kahdeksan. Voit selata sitä. Voiko joku kertoa minulle, vaikka, mikä on DOLPHINS? Tämä kaikki korkit DOLPHINS? Mikä se on? Millaista tietoa se on? Yleisö: Array. JASON HIRSCHHORN: Se on jono. Ja me tiedämme, se on array koska olen nähdä nämä hakasuluissa täällä. Ja joku muu, mikä se joukko? Yleisö: Objects? JASON HIRSCHHORN: Se on erilaisia ​​esineitä. Ja voit nähdä, että. Ja mistä tiedät sen joukko esineitä? Yleisö: Koska sinulla on paksusuolen boot aaltosulkei? JASON HIRSCHHORN: Oikea. Joten minulla on nämä aaltosulkeita täällä, ja sitten voit nähdä pilkulla erottamalla eri esineitä tämän array. Ja sitten sisällä jokainen esine, minulla on jotain paksusuolen ja jotain muuta. Ja mikä on yleensä ensimmäinen osa, asia vasemmalla paksusuolen? Mitä tuo kutsutaan? Yleisesti? Miten me viitata tähän? Yleisö: Index? JASON HIRSCHHORN: Index, tai todennäköisesti yleisemmin avain. Ja sitten oikealla side arvo. Joten indeksi, avain. Mutta jos me puhumme niistä, me yleensä tarkoita asia vasen puoli. Yksinkertaisessa array, jälleen, meillä oli indeksit 0. 1. 2. 3. 4. Ja delfiinejä, meillä on delfiini 0, delfiinien 1, delfiinit 2, delfiinit 3, delfiinejä 4. Meillä on myös, esineen sisään, me ei yleensä viitata asioita. Tai jos meillä on vain tämä esine oikeus täällä, emme aio sanoa objekti 0, esine 1, esine 2. Aiomme sanoa objektin nimi tai objektin tyypin, kohteen pituus, jne.. Ja siitä saamme arvon oikealla puolella. Joten jos me sanoi objektin nimi, esimerkiksi saisimme tämän merkkijono, "Grace." Niin kuin te ovat kertoneet minulle, delfiinit on yksinkertaisesti joukko esineitä. Ja näet kaikki objektit on nimi, tyyppi, suku. Onko se lausutaan oikein? Kukaan? Genus? Suuri. Pituus, paino. Onko se lausutaan oikein? Luulen niin. Ja kuva, vain URL Joidenkin tiedosto verkossa. Ja täällä, suljemme array, alas siellä hyvin vasemmalla puolella minun näytöllä. Niin, että kaikki dolphins.js on. Voi hyvänen aika. Tämä selittää sen. Luulin päättynyt kaiken, mutta näyttää. Siellä ovat kaikki nämä Todos. OK, toivottavasti voimme tekemään niitä yhdessä. Mutta katsotaanpa ensin, ennen kuin teemme että vain kävellä läpi Tämän koodin hyvin nopeasti. Joten kuten sanoin, näemme hyvin alkaa tämän linjan, että minulla oli dioja, (document). ready (function (). Ja pohjimmiltaan mitä se tulee vain odottaa kunnes kaiken oman sivuja on ladattu, niin odota se on kaikki array, kaikki on hyvä mennä, ja sitten alkaa täytäntöönpanosta Tämän koodin. Joten jos tarvitaan ajaa joitakin PHP, jos sinun piti saada joitakin kuvia, mikä se on, kaikki koodi on ollut asettaa ja valmis menemään pääsivusi tai mikä sivu on ladattu, ja nyt aiot aloittaa täytäntöönpanovaltion koodi. Niin ensimmäinen asia mitä teemme on perustimme tämän array. Ja minulla ei ole var avainsanan siellä, niin mikä on soveltamisalaan array? Yleisö: Se on maailmanlaajuinen. JASON HIRSCHHORN: Se on maailmanlaajuinen, joten ocean_array pääsee missä tahansa tämän tiedoston. Ja sitten me näemme tämän silmukan. Siinä ei sanota foreach, mutta tämä on lähinnä foreach silmukka. Ja tämä on vain JavaScript n versio, joten jokaiselle var delfiini delfiinit, mitä tietoja tyyppi? Vaikka, jälleen, Javascript ei nämä tietotyypit sinänsä, mitä tietotyyppi on delfiini? Yleisö: esine. JASON HIRSCHHORN: Se on esine. Saamme kunkin kohteen vuonna DOLPHINS array. Joten täällä, se näyttää unohdin laittaa kaikki nämä delfiinien meidän jättiläinen DOLPHINS ajatella osaksi ocean_array, joten meidän pitäisi luultavasti tehdä että ensimmäinen. Ja sitten, jotain kutsutaan Tämä allas muuttuja. Asetan sen nollaksi. Ja sitten Kutsun tätä toimintoa draw_ocean. Harjoittelen delfiini, kun sen kuva napsautetaan - En ole tehnyt sitä - ja asettaa delfiini ilmaiseksi, kun painiketta napsautetaan. Joten nämä ovat asioita, minun täytyy tehdä. Luulen pitäisi antaa teille joitakin tausta, mitä yritin tehdä. Joten jos menemme täällä, mitä halusin tämä näyttää oli array ylös täällä, sen sijaan se sanomalla "TODO" Minä halusi pöytä, lähinnä kanssa kuvia kaikista delfiinejä. Ja sitten kun klikkaat kuvaa, Halusin laittaa sen alas alaosassa näytön ja antaa sinulle kaikki tiedot, ja että olisi delfiinien altaassa, delfiini treenaisit. Joten ajattelin, että se olisi todella siistiä. Sinulla on kaikki nämä delfiinit meressä täällä, sitten klikkaat, ja se menisin allas, ja sitten voisi kouluttaa sitä. Niin, että mitä yritin tehdä. Ja sitten ei halua olla painike täällä altaassa, ja voit klikata, kuten "Set Free", ja voit asettaa delfiini vapaa, ja se menisi takaisin mereen. Niin, että mitä yritin luoda, mutta jälleen, aion tarvitsevat apuasi luoda se. Joten toivottavasti jotkut näistä avainsanoista tai joitakin näistä ehdoista alkaa tolkkua nyt yhteydessä Tämän ohjelman. Pidetään katsellut tätä kuvaa. Kutsumme tätä toimintoa draw_ocean. Se on yksi ja ainoa tehtävä kutsumme alkaen document.ready osiosta. Joten me kutsumme tätä draw_ocean toiminnon kohdalle ja se näyttää se luo merkkijono, muuttuja, täällä. Put on jotain merkkijono, lisää uusia tavaraa merkkijono, lisää uusia tavaraa merkkijonon, ja niin tämä rivi koodia. Sanon, että tulostaa HTML merkkijono. Ja joku selittää minulle, mitä tämä rivi koodia ei? No, ensinnäkin, mitä että dollarin merkki tarkoittaa? Se ei ole PHP muuttuja, mutta mitä tuo dollarin merkki tarkoittaa? Yleisö: linkittäminen HTML ID - se on kuin sen linkkejä HTML-koodi? JASON HIRSCHHORN: Entä että dollarin merkki? Mitä tuo dollarin merkki osoittaa? Yleisö: linkittäminen HTML jotenkin? JASON HIRSCHHORN: Missä olemme nähneet Tämän dollarin merkki ennen JavaScript? Näimme sen luento. Olemme puhuneet siitä. Mitä dollarin merkki tarkoittaa? Yleisö: Jotain jQuery? JASON HIRSCHHORN: Aivan oikein. Tämä on jotain tekemistä sen kanssa jQuery. Tämä dollarin merkki tarkoittaa Käytän jQuery-kirjaston funktion täällä. Aivan oikein. Joten me kirjoittaa dollarin merkki, ja sitten meillä on tämä avoin kantatuote ja suljettu kantatuote, ja sisällä on, mitä tapahtuu Sisällä kun käytät jQuery-kirjaston funktion tai olet käyttäen jQuery-kirjaston? Jälleen näit tämän luento. Voiko joku antaa minulle - ja sinulle myös nähdä jotain. Mitä menee sisälle siellä? Jeff, anna minulle arvaus. Mitä tämä näyttää, # meressä? Missä olemme nähneet, että ennen? Yleisö: Onko kirjasto tai jotain? Minulla ei ole aavistustakaan. JASON HIRSCHHORN: No, anna kun avaan indeksi dot - Ehei, väärässä paikassa. Näemme siis meillä on jotain nimeltään Ocean täällä. Missä olemme nähneet # valtameren hashtag ocean, syntaksin ennen? Joo? Yleisö: CSS? JASON HIRSCHHORN: CSS. Joten halusimme tyyliin jotain, Muistan haluaisimme laittaa hashtag CSS valitsin, tai hashtag meressä, esimerkiksi ja kaikki muotoilut että halusimme antaa asia ID-ocean laitoimme sisällä on. Joten täällä sisällä se ei ole CSS valitsin menee täällä. jQuery määrittelee omat tyyppi valitsimet. Mutta se on sama idea, ja oikeastaan paljon niitä päällekkäin CSS. Joten sisällä näitä avoimet sulut, sinun laita valitsin, ja mitä valitsin viittaa, että mitä aiot käyttää. Joten tässä tapauksessa, olen Valitsemalla tunnus meressä. Jos olisin luokka - sanokaamme minulla on luokan asioita nimeltään "kuvia" ja annan että paljon elementtejä, miten viite luokan asioita kutsutaan "kuvia?" Yleisö: Minusta se oli piste. JASON HIRSCHHORN: pisteellä. Joten jos sen sijaan laitoin dot kuvia tänne, joka antaisi minulle luokan asioita kutsutaan "kuvia." Tietenkin tämä on erittäin voimakas, ja voit viitata paljon asioita. Itse voisin viitata periaatteessa tahansa tag HTML. Joten jos halusin tehdä niin, td, joka on tag, että olemme nähneet aikaisemmin, kun luo pöytä. Olet todennäköisesti tuttu että P asettaa seitsemän. Tässä tapauksessa se todella tapahtuu Valitse kaikki niistä. Se tulee antamaan minulle array Kaikkien td tageja. Mutta se voi saada hieman ylivoimainen, joten edestakaisin juuri nyt olemme menossa kiinni vain viitataan tunnukset. Joten mitä tämä tekee taas on joka saa tässä tapauksessa - pahoillani. Mene tänne, index.html. Se on meressä, vaan ocean ID viittaa div, joten tämä osa tätä koodiriviä saa joka div. Ja sitten tämä piste tarkoittaa soitan toiminto, ja nimi, joka toiminto on HTML. Ja se on lyhyt, jos te näin ennen, dollarin merkki, asiakirja, piste saada elementti tunnus, piste sisäinen HTML. Tämä on vain jQuery versio. Joten HTML-toiminnon vain saa sisempi HTML. Kyseistä tekijää. Joten jälleen, jos katsomme taaksepäin Täällä me katso ei ole sisäistä HTML. Joten jos tein tämän, olisin yrittää saada HTML. Kun kirjoitan tätä, olen asettamalla HTML. Joten olen ohimennen tätä toimintoa merkkijonon, merkkijono, joka olen luonut täällä, ja sanoi laittaa että sisällä meressä div. Joo? Yleisö: Kun saat HTML, olet juuri kopio, jos se, eikö? Et sen poistamista. JASON HIRSCHHORN: Oikea. Jos tein tämän ja halusi tallentaa tämän var - oho. Se olisi saada kaikki tiedot, jotka oli siellä ja tallentaa sen jossakin toisessa muuttuja, tee siitä kopio. Yleisö: OK. Sain sen. JASON HIRSCHHORN: loimme muutamia HTML, paitsi että merkkijonon. Me säästää enemmän. Täällä näet, että TODO merkkijono. Niin se on luultavasti missä olemme saada, että TODO siitä, kun menemme sivuillemme. Ja todella, jos olen oikealla klikkaa TODO, tarkastaa Element, puhuimme viime viikolla. Niin näimme HTML rakenne sivuillemme. Huomaat, että täällä - Tehdään tästä vähän isompi, liian - meillä on div ID meressä täällä. Kaikki näkevät, että rivi koodia? Ja sitähän me tyypit vuonna index.html. Sen sisälle, näemme nyt tämä taulukon riviä koodia. Ja mitä kyseisen taulukon rivi koodia on, se koodi me vain työnnetään tämä elementti. Ja se katsomme sen sisälle, emme koskaan konekirjoitettu COLGROUP ja TBODY. Joka lisättiin meille, koska teimme hienoja juttuja. Mutta huomaat siellä tr, siellä td kanssa TODO. Niin se näyttää jälleen koodi, joka me kirjoitti täällä. Juuri tämä linja oli tekemässä. Se on ottamassa HTML merkkijono ja laitat sen sisälle div täällä. Se on aluksi mitään. Tämä sivu latautuu. Dollarin merkki, document.ready. Tämä alkaa täytäntöönpanosta. Vaadimme draw_ocean toiminto, ja sisällä draw_ocean toiminto otamme tämän HTML ja laita se sisälle että div. Me vain meni läpi paljon oikeassa. Onko kellään mitään kysyttävää siitä? Tai miten se toimii, tai jQuery? Koska jos ymmärrät, että sitten jQuery toivottavasti tulevat suhteellisen helppoa. Joo? Yleisö: Mitä sinulla oli sisällä sulkeisiin alle tuloste HTML merkkijono, joka on nimi HTML muuttuja, että olet ovat ilmoittaneet aiemmin? JASON HIRSCHHORN: Tämä täällä? Yleisö: Kyllä JASON HIRSCHHORN: Kyllä. Yleisö: Joten jos oli nimennyt, että jotain muuta, että jotain muuta oli mitä voisi laittaa tänne. JASON HIRSCHHORN: Aivan oikein. Ja se on hyvä pointti. Tämä on hieman sekava, koska Minulla on HTML, html. Tämä täällä sisällä on nimi minun muuttuja, ja tämä oikeus tässä Nimi jQuery toiminto. Yleisö: Mutta jotta jQuery toiminto toimii, sinun täytyy antaa sille joitakin HTML panos? JASON HIRSCHHORN: Aivan. Tai sinulla on antaa sille merkkijono. Se laittaa merkkijonon sisällä div tai mitä tahansa. Tämä on vain merkkijono. Se ei tiedä tätä on HTML, mutta ilmeisesti muotoilla sen tarkoituksella olla voimassa HTML. Vastaako se kysymykseesi? Yleisö: Kyllä. JASON HIRSCHHORN: OK. Joo? Yleisö: Mitä jos meressä tarkoitetun to painiketta tai jotain? Mikä olisi. Html tehdä? Se vaikuttaisi teksti-painiketta? JASON HIRSCHHORN: Eli kysymys on mitä jos se viittasi nappia? Se muuttaa sisempi HTML jotain. Joten jos se on avoin tunniste ja sulje tag, se laittaa jotain siltä väliltä avata ja sulkea tag. Jos ei ole avata ja sulkea tag, se ei tee mitään. Yleisö: Se on kirjaimellisesti kopio ja liitä jutuissa? JASON HIRSCHHORN: Joo. Se kopioi ja pastat jotain mitä muuttuja kuljen sitä, string kuljen sen sisällä nämä avata ja sulkea tageja. Katsotaanpa tänne. Voi hyvänen aika. draw_pool ei tehdä mitään oikein siellä. Paska juttu. Kouluttaa, wow. OK, joten ei paljon muuta lisäksi, että. Joten päästä alkuun, ja Katsotaanpa korjata ylöspäin. Aion tarvitsevat kaikkien auttaa saada tämä tehtävä. Ei ole itse asiassa monta riviä koodia, luulen, kirjoittaa. Mielestäni tein tämän pari vuotta sitten varten 2K12 versio, ja siellä pitäisi olla niin monta riviä koodia kirjoittaa. Minun ei olisi pitänyt poistaa kyseisen koodin. Minun olisi pitänyt vain tallentanut sen. Voi, hullu. Anyway, Mennään alkoi. Joten olen tässä array, tai olen tässä linja, ja minulla on ocean_array. Ja haluan laittaa kaiken tämän, kaiken tämän tiedoston, minun ocean_array. Joten miten voin ottaa kaiken siellä, ja laita se ocean_array? Se on yhtä riviä koodia. Kuka voi antaa minulle Koodirivin tai kertoa minulle, on jonkinlainen käsitys mitä se viiva koodin pitäisi tehdä? Miksei aloitamme täällä, ja sitten me jatkaa liikkuvat ympäri huonetta vastaamalla kysymyksiin. Kurt? Mikä on ensimmäinen? Yleisö: Ocean_array, kiinnike, delfiini. Yhtä delfiinejä, kiinnike, delfiini? Delfiinit isolla kaiken. JASON HIRSCHHORN: OK. Käydään läpi syntaksin. Juuri täällä, tämä on kuin foreach silmukka, niin se todella tekee paljon asioita meille. Ja delfiini on esine. Meidän ei siis tarvitse kirjoittaa jotain kuten delfiinejä, delfiini, koska delfiini itsessään on väittävät, että haluan. Se ei ole indeksiä. Onko järkeä? Yleisö: Joo. JASON HIRSCHHORN: Joten miten ehdottaa vaihdat koodin? Jos tiedämme meille annetaan indeksi? Anteeksi. Olet hyvä. Mutta miten - saanen kysyä eri kysymys. Jos haluamme - Katsotaanpa itse kirjoittaa tämän. Ei se haittaa. Aiomme kirjoittaa tämän. Se on hienoa. Anteeksi. Olin vain hyvin sekava siellä. Jätetään että siellä nyt, ja Palaamme koulutukseen delfiini, jossa delfiini. Toivotaan vain ensimmäinen korjata piirtäminen valtameri toiminto, ja tulemme takaisin että Kurt. Mutta toistaiseksi, niin hyvä. Katsotaanpa sisällä draw_ocean. Linja, joka näyttää olevan väärässä tämä "Store kuvat Delfiinien meressä HTML merkkijono. "Ja juuri nyt olen aivan kuten TODO, mutta todella haluavat laittaa delfiinejä kuvia meressä. Niin mitä, Noah, on mielestäsi ensimmäinen asia minun pitäisi tehdä? Jos haluan mennä läpi koko array, mikä on ensimmäinen asia, joka minun pitäisi tehdä? Yleisö: Meidän luoda silmukka. JASON HIRSCHHORN: silmukka. Ja mitä pitäisi että silmukka näyttää? Yleisö: For - Meidän täytyy mennä läpi jokaisen delfiini meressä array. Joten var delfiini - voit kirjoittaa meressä array? JASON HIRSCHHORN: Näinkö? Yleisö: Luultavasti se on totta. JASON HIRSCHHORN: Pysytään että nyt, ja sitten me palata siihen. Ja te tulette olemaan vastuussa että linja. Joten minulla on vuoteen silmukka. Michael, olet nyt. Mitä minun pitäisi tehdä nyt? Yleisö: Sinun olisi pitänyt ottaa tallentaa kuvia delfiinejä. JASON HIRSCHHORN: Missä on, että säilytetään? Yleisö: Vuonna delfiini array? JASON HIRSCHHORN: En ymmärrä nyt liian mitä tapahtuu. Katsotaanpa selvittää, miten voimme tehdä debug Tämän, ja sitten tulen takaisin, OK? Mikä vastaa printf JavaScript? Annie? Yleisö: Se on asiakirja, joka kirjoittaa? JASON HIRSCHHORN: Tai miten Näen jotain lohduttaa alas alareunassa? Yleisö: console.log. JASON HIRSCHHORN: console.log, tarkalleen. Tehdäänpä console.log, ja lähdetään vain laittaa "delfiini" in, OK? Ihannetapauksessa jos tämä toimii, aiomme on - Katsotaan, takaisin kyseisessä tiedostossa dolphins.js oli kuusi delfiinejä, joten minun pitäisi saada kuusi tai jotain toivottavasti tulostetaan ulos konsoli, eikö? Siellä olemme niin pitkälle, koska me teki Kurt riviin täällä, ja sitten me teki Nooan silmukka, ja meillä on tämä line, joten toivottavasti meidän pitäisi nähdä kuusi asioita tulostetaan konsoliin. Joten mennään täällä, nyt avaamme lohduttaa ja virkistää sivuillemme. OK, niin se näyttää näimme kuusi indeksit. Nolla, yksi, kaksi, kolme, neljä viisi, joo. Yleisö: Miten sinä saat kyseiselle sivulle sisällä - JASON HIRSCHHORN: miten saan Tämän juttu tänne? Yleisö: Ei, Chrome sivun sisällä [Äänetön] laite. Voimmeko nähdä, että vai ei? JASON HIRSCHHORN: Tämä Chrome sivu täällä? Yleisö: Joo. JASON HIRSCHHORN: Eli aivan kuten P sarja kahdeksan, olen avannut Chrome ikkuna työpöydälle, minun Macintoshin työpöydällä. Ja jos huomaat täällä tätä URL ylös vasemmassa yläkulmassa, joka vastaa tämän IP käsitellä täällä. Joten tehdä tämän, vaikka alku Ongelman asettaa spec kävelee sinua kautta tarkalleen miten tämä. Mutta minä vain seurannut, että ja sen sijaan tavallisen shuttle-koodin, tein omaa koodia. Cool juttu on, voimme myös tarkastaa ocean_array. Niin se näyttää ocean_array on joukko kuusi esineitä, ja Avataan jokainen. Boom! Yksi. Joten Kurt, se näyttää teidän koodi toimi täydellisesti. Kaikkea käynnistyi ocean_array. Koska en misspoke aiemmin. Mutta kyllä, mahtavaa työtä. Ocean_array on oikea, ja se näyttää kuten nyt näemme, että delfiini on numero 0-5, joten se näytti kuten indeksit array. Joten koska tieto, Michael, mitä meidän pitäisi tehdä nyt? Ajattele ääneen. Mitä me haluamme tehdä? Yleisö: Haluamme saada JPEG kunkin delfiini. JASON HIRSCHHORN: OK. Joten kuinka voimme viite - miten voimme saada JPEG? Mistä aloitetaan? Missä on kaikki tallennettu? Yleisö: Vuonna ocean_array? JASON HIRSCHHORN: OK. Yleisö: Niin ocean_array, delfiini - JASON HIRSCHHORN: Miten me saada jotain sisällä - joten tämä antaa meille, että esine. Ja olemme nähneet tämän ennenkin kanssa raken. Millainen merkintätapa meidän tulee käyttää? Yleisö: Olisi piste. JASON HIRSCHHORN: piste. Ja sitten mitä alalla? Yleisö: Kuva? Tai että ei ole kenttä - JASON HIRSCHHORN: Mikä se kutsutaan dolphins.js? Ja katso, voit katsoa. Voimme vain mennä takaisin tänne. Voimme nähdä ocean_array, voimme tutkia sitä. Mikä sen nimi on? Yleisö: Type. Odota. Kuva? Sanoin kuva. JASON HIRSCHHORN: Kuva. Oikea. Et kuulosta tiedät mitä puhuit, vaikka. Se kuulosti enemmän kuin arvaus. Niin että kuva, niin että antaisi meille URL kuvan. Jeff, sinulla on kysymys? Yleisö: Joo, en voi saada mitä sinulla on Chrome selain tietokoneeseen. Haluan vain saada "uncaught viite virhe, konsoli ei ole määritelty. " JASON HIRSCHHORN: Sinulla perustaa kaiken? Yleisö: No, luulen teki kaiken, mitä teki valkokankaalla. JASON HIRSCHHORN: Ja sinä chmodded kaikki tiedostot? Ja sinä menit läpi koko asennuksen? Yleisö: Yritän uudelleen. JASON HIRSCHHORN: OK. Olen ohitetaan, että paljon on alussa, mutta sinun täytyy mennä läpi koko setup aivan kuin alussa Harjoitus spec. Chmod kaiken ja varmista, että se on sisään Yleisö: Minä menen ja kaksinkertaistaa tarkistaa sen. Ajattelin tein sen, mutta Minä kaksinkertainen tarkistaa. JASON HIRSCHHORN: Niin, tämä näyttää maali Saamme merkkijono ja kuva. Suuri. Meillä on URL kuvan. Miten me nyt laittaa sen - mitä tapahtuu, jos kirjoitetaan juuri tämä, Michael? Yleisö: Se vain kuvaa. Se ei oikeastaan ​​näyttää sen. JASON HIRSCHHORN: Katsotaanpa katso mitä tapahtuu. Me paitsi että. Näytämme sen täältä. Näyttää siltä, ​​emme saa mitään. Jos minä tutustua tähän taulukkoon, se näyttää sisältä - joo, näyttää En tajua mitään. Yleisö: Täytyykö meidän - JASON HIRSCHHORN: Tämä on merkkijono, tämä koodi täällä. Mistä halua laittaa tähän merkkijono? Yleisö: Haluat laita se meressä? JASON HIRSCHHORN: OK. Ja täällä Laitan merkkijono kutsutaan html meressä. Yleisö: Joten olisiko dollari merkki, ocean, html [äänetön]. JASON HIRSCHHORN: Se olisi laita se suoraan sinne. Mutta mitä jos haluan lisätä sen - Olen jo luomassa merkkijonon, eikö? Laittaa meressä, mitä nimi merkkijonon? Yleisö: HTML. JASON HIRSCHHORN: HTML. Joten mitä minä kirjoitan seuraavaksi? Yleisö: Yhtä, tasavertaisina. Tai vain vastaa? JASON HIRSCHHORN: Mitä tapahtuisi, jos minä kirjoitan tasavertaisia? Yleisö: Eikö se aseta se yhtä - tai eivät, että - Yleisö: Määritä? JASON HIRSCHHORN: Se määrittää sen, mutta mitä tapahtuu kaiken että oli varastoitu sitä ennen? Yleisö: Se tulee päästä eroon siitä. JASON HIRSCHHORN: Se tulee päästä eroon siitä. Joten miten voin lisätä sen loppuun? Haluan vain kopioida - Yleisö: Plus tasavertaisina. JASON HIRSCHHORN: Plus vastaa, täydellinen. Se on aivan oikein. Joten nyt Katsotaanpa tarkistaa mitä tämä tekee. Boom! Voi hyvänen aika. Se on vain paljon tekstiä. OK. Niin se näyttää saimme paljon tekstiä, mutta se on hienoa. Olette tehneet - Tiedän, että tämä on vaikeaa, tämä on uutta. Tähän mennessä kolme te ovat tehneet fantastista. OK, olet seuraava. Mitä meidän pitäisi tehdä seuraavaksi? Emme tietenkään halua sitä pelata vain merkkijono. Joo? Yleisö: Minulla on vain kysymys. Tiedäthän, kun teet ocean_array, delfiini, suluissa, ei delfiini kuin assosiatiivinen array itsessään? JASON HIRSCHHORN: I misspoke. Dolphin on indeksi. Yleisö: mutta ei var delfiini meressä - Tarkoitan, kun ensin se ladataan hyvin, var delfiinien delfiinejä, ei ole että delfiinejä assosiatiivisia array? JASON HIRSCHHORN: Tämä delfiini? Yleisö: Joo. JASON HIRSCHHORN: Ei. Tämä delfiini on indeksi. Yleisö: OK. Onko siis olemassa delfiini muuttuja? Tarkoitan, kuten delfiini näppäile assosiatiivinen array? JASON HIRSCHHORN: Juuri täällä? Like, dolphin.name? Yleisö: Joo, on olemassa kuten delfiini dot - kuten ei delfiini tarkoitus olla kunkin kohteen? Yleisö: Joo, se on mitä ajattelin, too. Yleisö: Luulin delfiini oli kuin assosiatiivinen joukko delfiinejä. Koska siellä on kuusi associative taulukot delfiinejä, eikö? JASON HIRSCHHORN: Oikea. Miten olemme tämän kirjallisen nyt se ei ole. Yleisö: Miksi se on? JASON HIRSCHHORN: Voisimme tehdä niin, ja siellä on todella jQuery toiminto kutsutaan. jokainen joka antaa sinulle joka asia. Mutta tämä syntaksi ei ole - I misspoke aiemmin - tämän syntaksin ei se indeksiin. Tämä on vain antaa meille indeksit. Mutta voisit tehdä dollarin merkki. Jokaisen, joka on jQuery toiminto. Joka antaisi sinulle joka osakkuusyrityksen array. Joten tarkista, että ulos. Mutta se mitä kaikki tämä koodi ei. Yleisö: Joten tämä ensimmäinen silmukka, I arvata, että olisi kerrata kuusi kertaa koska teillä on kuusi indeksit. Ja sitten toinen silmukka, ei ole, että iteroimalla sama määrä kertoja? JASON HIRSCHHORN: Joo. Yleisö: Joten siellä oikeastaan ​​mitään - me voinut kirjoittaa ensin silmukka uudelleen, ja se olisi toiminut. Kuten, var delfiini delfiinien? JASON HIRSCHHORN: Kyllä, mutta olemme nyt käyttävät ocean_array. Olemme siirtyneet kaikkemme ocean_array koska sanovat haluamme joskus muuttaa mitä on dolphins.js, tai jos haluamme manipuloida ocean_array myöhemmin, emme halua manipuloida delfiinejä, muuttuja. Haluamme käsitellä kopio, sillä jos haluamme tehdä jotain pois, näin olemme vain olemaan turvassa. Onko järkeä. Yleisö: Joo. JASON HIRSCHHORN: OK. Joten, Carlos, miten voin ottaa tämän merkkijono ja tehdä siitä kuvan sijasta, ja saada todellisen kuvan? Olet nähdä tämän koodin ennen. Miten teen kuuluvat kuvan sivulla? Yleisö: Onko se asia, teimme noin että HTML plus vastaa te call viiva leveys, hän poistanut sen? JASON HIRSCHHORN: Tämä juttuja täällä? Yleisö: Joo. Tavallaan. JASON HIRSCHHORN: älä huolehtia siitä. Se vain alkaa HTML merkkijono. Jos haluan lisätä kuvan minun HTML web-sivun, mitä tag voin käyttää? Yleisö: En muista. JASON HIRSCHHORN: OK. Avie, auttaa häntä ulos? Yleisö: Olisiko ankkuri, href, ja sitten liität sen? JASON HIRSCHHORN: Niin kuin Anchor. Yleisö: Sinun ei tarvitse linkittää sen, vaikka, eikö? JASON HIRSCHHORN: Mitä jos vain haluavat luoda kuvan? Yleisö: Olisi img, ja sitten src vastaa mitä tahansa merkkijono on? JASON HIRSCHHORN: OK, joten aivan oikein, img. Carlos, olet menossa jatkamme tästä. img sanoista "kuva" ja src seisoo for "lähde." ja sinun täytyy antaa sille URL tai jokin - ei edes URL. Jotkut paikkaan, jossa se kuva tallennetaan. Joten tiedän, että se, joka saa minut kuva, joten nyt miten voin laittaa tämä kaikki yhteen, ajatteli? Minulla on joitakin syntaksin minun täytyy korjata. Mitä tarvitsen kirjoittaa, Carlos? Yleisö: En tajua, mitä yrität tehdä. Joten yrität laittaa kaikki kuvat pöytään? JASON HIRSCHHORN: Haluamme näyttää kaikki kuvat sivulla. Ja näimme, miten tämä rivi koodia oikeus täällä lisätty jouset meidän HTML merkkijono ja tulostaa ne näin. Me sen sijaan halua näyttää kuvia. Ja tajusimme, Maru, kertoi meille että tämä rivi koodia - joten katsotaanpa täällä. Jos menisimme ja tutkitaan, näytämme muokata tätä HTML. Maru, sanoi, jos teemme tällaista syntaksin, saamme kuvan. Joten tuo järkeä? Tämä on sen tyyppinen merkkijono, että me todella haluavat laittaa sisälle meressä sukellus, ei pelkästään itse tekstissä. Yleisö: [kuultavissa] JASON HIRSCHHORN: Anteeksi? Yleisö: Etkö voi vain kopioida että yksi, joka Kianna, saatiin ja laita se, että - JASON HIRSCHHORN: Kopioi tämä, ja laittaa tämä täällä? Yleisö: Joo. JASON HIRSCHHORN: Se on lähellä, mutta on olemassa yksi ongelma tässä, ja mikä tuo on? HTML on merkkijono, ja me tarvitsemme lisätä jouset siihen. Yleisö: Joten sitten laitat sen - nah. JASON HIRSCHHORN: Ja meillä on kolme - Tämä täällä ei ole merkkijono. Kuinka teemme sen merkkijono? Miten aina jotain merkkijono? Yleisö: En tiedä. JASON HIRSCHHORN: Jos minulla on tekstiä, miten saan sen merkkijono? Like tänne tällä linjalla täällä? Yleisö: Laita se pöytä? JASON HIRSCHHORN: Entäs tämä? Yleisö: Quote. JASON HIRSCHHORN: Double lainauksia, eikö? Lainausmerkit tekee jotain merkkijono. Niin että tekee, että merkkijono, ja tämä on merkkijono. Miten laitan kaksi merkkijonoa yhdessä JavaScript? Yleisö: Dot. JASON HIRSCHHORN: Ei piste. Se on PHP. Yleisö: Plus. JASON HIRSCHHORN: Plus, aivan oikeassa. Niin plus, ja sitten mitä sinä ehdottavat teen täällä? Yleisö: Toinen lainaus. JASON HIRSCHHORN: Toinen lainaus, OK. Miten voin lopettaa merkkijonon? Yleisö: Toinen lainaus. JASON HIRSCHHORN: Toinen lainaus. Ja miten voin laittaa tämän merkkijono yhdessä tämän merkkijono? Plus. Se on aivan oikein. Teit tämän meille. Tämä on täydellinen. Joten nyt Katsotaanpa tehdä tätä. Ja katso, meillä koko nippu kuvia. Voi luoja. Nämä ovat pelottavia. Aiomme tutkia niitä toisessa. Joo, Noah? Yleisö: Tiedän, se ei ole oikeastaan asia, mutta pitäisi pistää elementtien kuva tag? JASON HIRSCHHORN: Voisimme jos halusimme, suljemme kuva tag vain. Katsotaanpa tehdä tämän. On, ei, emme voi tehdä sitä. Yleisö: Voi, rikoin sen. JASON HIRSCHHORN: Mielestäni tämä on validointi, vaikka. En usko, että tarvitset sulkeminen slash. OK, tämä on hyvä. Carlos, kiitos. Tähän mennessä neljä te ovat tehneet mahtavaa työtä. Tietenkin, kuten näette, olemme luoda joitakin taulukon tyyppi viiste. Ja haluan näitä asioita olla taulukossa. Joten miten voin laittaa nämä asioita pöytään? Olen selvästi tarvitaan lisää HTML. Assam, millaisia ​​HTML olen puuttuu? Yleisö: Mitä teet haluavat tehdä, sorry? JASON HIRSCHHORN: Haluan laittaa kaikki Näiden kuvien taulukko, joten jokainen kuva pitäisi olla yhdessä sarakkeessa. Miten sanoa tämä on yksi sarake? Olet nähnyt tämän koodin ennen. Tämä on P asettaa seitsemän. Yleisö: Muistan yksi oli tr? JASON HIRSCHHORN: tr on jono. Yleisö: En tiedä sitä pois sydäntäni, mutta en voinut tarkistaa. JASON HIRSCHHORN: Onko joku muistaa? Yleisö: td? JASON HIRSCHHORN: td, aivan oikeassa. td esittää asian sarakkeeseen. Joten jos laitan td siellä, Assam, mitä minun pitää laittaa? Mitä muuta tarvitsen lisätä? Yleisö: Sinun täytyy sulkea se? JASON HIRSCHHORN: Aivan. Mihin se meni? Yleisö: Tuolla? JASON HIRSCHHORN: Juuri täällä? Yleisö: Luulen niin. JASON HIRSCHHORN: Mikä tämä sulkeminen täällä? Mikä tämä on? Tuo sininen juttu? Yleisö: Tuo on kuva. Sen pitäisi mennä sen jälkeen, luulen. JASON HIRSCHHORN: OK, aivan oikeassa. Katsotaanpa, mitä tämä teki. Ai, se on hankala. Avataan valtameri, pöytä, pöydän runko, tr. Meillä on siis ton, mutta en eivät näe kuvia. Outoa. Se näyttää siltä kuin se rakensi sen, mutta ei näytä minulle kuvia. Kaikki ajatukset, miksi se voisi olla kyse? Mitään ajatuksia? Yleisö: Jos siirryt alas, näet ne. JASON HIRSCHHORN: Boom! Joten ne ovat siellä, mutta se on outoa, että he kaikki alas sinne. Yleisö: Ne ovat myös kaikki peräkkäin. JASON HIRSCHHORN: Ja ne ovat kaikki rivi, ja ne ovat kaikki erikokoisia. Joten Assam, anna minulle yksi rivi koodia jos voin tehdä jokaisen kuvan samankokoisia, ja se näyttää olen jo ilmoittanut koko I haluavat niitä. Miten voin tehdä jokaisen kuvan samankokoisia? Anna villi arvaus. Entä tämä rivi koodia? Yleisö: Voitko tehdä Kuin vakio? JASON HIRSCHHORN: Tai jos on toinen aseta voisin laittaa tämän Koodirivin jos vain kopioida sen? Yleisö: Kaikki alas samana linja? JASON HIRSCHHORN: OK, laitetaan se täällä, aivan oikeassa. Ja nyt katsotaan mitä tapahtuu. Voi hyvänen aika! Nyt näyttää siltä, ​​että olemme alkaneet saada jotain, ja se näyttää ne kaikenlaisia ​​sopivat taulukosta, joka olemme rakennettava kunkin td. Myös, Assam, sanokaamme pidän heidän korkeudet olla hieman enemmän - korkeudet asia heittää minut pois, niin mitä minun pitäisi asettaa niiden korkeus? Valitse mikä tahansa numero. Yleisö: 200? JASON HIRSCHHORN: 200. Aion valita 100. Se on hienoa. Saat todella 200. Siellä mennään! OK, nyt tämä alkaa näyttää vähän paremmin ja hieman enemmän järjestetty. Muita ajatuksia, mitä meidän tehdä tallentaa kuvia vaikkapa delfiinejä? Joo? Yleisö: Ovatko lainausmerkkejä tai yksittäinen lainausmerkkejä, noin arvoja lähde, korkeus, leveys, ovat ne valinnaisia? JASON HIRSCHHORN: Missä ovat puolilainausmerkkejä? AUDIENCE: Kuten muutamia esimerkkejä, sinun on kuin korkeus vastaa lainaus "150". On että ei ole tarpeen. JASON HIRSCHHORN: Joten katso tänne. Jos me klikkaa meressä, mennä pöytä, huomaat täällä se todellisuudessa lisätty lainausmerkit minulle. Yleisö: OK. JASON HIRSCHHORN: Ja niin minä ymmärrä, mitä teemme näyttää tuskallisen hidasta. Olemme vain kirjoittanut kolme riviä koodia Toistaiseksi tai neljä riviä koodia, mutta Tämä on itse asiassa prosessi, joka Käyn läpi joka kerta haluan tehdä tällä sivustolla. Rivi riviltä käyttäen konsoli alas täällä, tutkia asioita ja mietitään out askel-askeleelta, mitä haluan tehdä. Joten toivottavasti tämä matkii sinulle kaverit hyvä, pedagoginen tapa mitä todella tekemässä kun luot sivuston. Siirrytään. Olemme luoneet nämä asiat. Aion itse - Avie, minulla on iso kysymys. En tiedä, jatkamme matkaa. Mennään "kouluttaa delfiinejä, kun sen kuva napsautetaan. "How do you ehdottavat Kirjoitan, että linja-koodin? Yleisö: On funktio nimeltään "juna". JASON HIRSCHHORN: Ei toimintoa nimeltään "junaan" aivan oikeassa. Yleisö: Se odottaa indeksin. JASON HIRSCHHORN: Juna odottaa indeksiin, niin OK. Avie, tämä on juuri perustelut että rakastan nähdä. Juna odottaa indeksin. Yleisö: Eli olet menossa on silmukka. JASON HIRSCHHORN: No, haluan tehdä kun kuva on napsautetaan, niin Avie, miten voin seurata, kun kuva napsautetaan? Siellä pari tapoja tehdä sitä. Tämä on voima JavaScript ja jQuery, mutta myös vaikein osa. Yleisö: Jos suluissa, ei. Tai jos suluissa tapahtuma tai jotain suhteellisen yksinkertainen? JASON HIRSCHHORN: Joten näimme pari tapoja tehdä tämä luento. Yksi asia oli, tänne, voisit tehdä jotain voit luoda toimivat kuten on napsautuksella, vai jotain on napsautuksella. Everybody muista nähneeni jotain sellaista? Teet sen sisällä HTML-tunniste. Näen joitakin tyhjiä kasvoja. Jotkut ihmiset ovat kuin, mitä hän puhuu? Se on hyvä, koska mielestäni se on monimutkaisempi tapa tehdä se. Aiomme tehdä paljon helpompaa tavalla käyttäen jQuery. Joten, Avie? Yleisö: Hm? JASON HIRSCHHORN: Jos haluan tehdä jotain jQuery, olen tietysti aloittaa, kuten ennenkin, tällä dollarin merkki, avoin kantatuote, lähellä kantatuote, ja kaksinkertainen lainauksia täällä. Nyt tiedämme tarvitsen valitsin täällä. Mitä valitsin aiotte sovellettaisiin joka ikinen kuva tai joka Yksittäisen kuvan? Yleisö: Image? JASON HIRSCHHORN: Tuo Aivan oikein. Joita sovelletaan jokaiseen kuvaan. Saa ne kaikki. Se ei ole ID, se ei ole luokka, se on tyypin tunnisteen, ja tämä tulee saat joka ikisen. Ja nyt aion kertoa teille tämän nyt, ja voit etsiä lisää asiakirjoja tästä aiheesta myöhemmin, mutta tämä juttu nimeltä "päällä" käsittelee tapahtumia. Joten mitä saat tehdä nyt, ja joka on super tehokas, on sanoa, minkälainen Jos etsit ja mitä haluat tehdä, kun saavat tässä tapauksessa. Joten aion antaa sinulle hieman hieman koodia, Avie sitten sinun täytyy mennä, OK? Yleisö: OK. Yleisö: On - aiomme sanoa "Klikkaa" tässä tapauksessa, joka sinun yleensä käyttää. Joten klikkaa, ja sitten me aiomme siirtää sen Nimetön toiminto. Ja tämä syntaksin aiot nähdä paljon, ja toivottavasti kirjoittavat paljon. Mikä tämä on, jälleen, on click jotain kutsutaan kuvan riippumatta, mitään kutsutaan kuva, aiomme suorittaa tämän Nimetön toiminto. En anna sen nimi. En kulkee sen argumentteja. Olen vain, kuten luoden tässä toimiakseen, ja tässä mitä koodi aiot tehdä. Se on tällä syntaksilla keinoin. Ja kuten huomaat, se näyttää hyvin samanlainen kuin tämä täällä, että me kirjoitti ennen. OK, Avie. Joten haluat soittaa juna indeksiin. Sitäkö haluat tehdä? Yleisö: Kyllä. JASON HIRSCHHORN: Tuo on? OK. Katsotaan, mitä tapahtuu. Yleisö: Odota, vaikka. Indeksi ei ole muuttuja juuri nyt. JASON HIRSCHHORN: Eli indeksi ei ole muuttuja juuri nyt. En tiedä mistä sait sen. Yleisö: [kuultavissa]. Joten sinun ei tarvitse ensin selvittää joka delfiini sai napsautetaan? JASON HIRSCHHORN: Erinomainen. Sinun täytyy selvittää, mikä delfiini sai napsautetaan. Tämä on villi Laukaus pimeässä. Kellään mitään käsitystä siitä, miten voin selvittää mitä delfiini sai napsautetaan? Jos ei, minä vain antaa sen sinulle, koska tämä on aika hullu. OK. Joten tulostaa kautta console.log. Tämä asia. Joten, dollarin merkki, avoin paren, näin lähellä paren. Joten kun klikkaa tämän kuvan, aion tulostaa tämän konsoliin, ja katsotaan mitä tapahtuu. Mennään takaisin tänne. Mennään lohduttaa. Ei virheitä, luojan kiitos. OK. Klikkasin. Anna minun tehdä sen uudestaan. Klikkasin tämän ensimmäisen kuvan, ja tämä sai tulostetaan konsoliin tätä linjaa asioita. Aion käyttää Sana "tämä" paljon. Tämä juttu täällä, tämä on hyvin erityinen, ja se tekee juuri sitä, mitä Avie haluaa sen tehdä. Se alkaa mitä oli napsautti tai mitä tahansa. Koska taas tämä valitsin tapahtuu käsitellä monia asioita, emme välttämättä tiedä, mikä asia olemme puhumme, joten haluamme selvittää mitkä asia puhumme noin tätä kautta syntaksin. Tässä tapauksessa täällä, hashtag ocean, me aina tiedä, mitä asia olemme aiotaan puhua, niin emme koskaan todella tarvitaan tämän sisällä hashtag meressä. Se on aina merelle, että div. Se on tunnus, vain yksi mahdollinen asia. Mutta tässä tapauksessa tämä koskee paljon kuvia, itse asiassa, kuusi kuvaa, ja siksi haluamme tietää, mitä erityisesti kuva on napsautetaan. Ja se näyttää tältä on millaista tietoa saamme. Saamme se näyttää joitakin suuria merkkijono, ja saamme kaiken tämän tietoja tämän. Saamme tonneittain ja tonnia tavaraa. jQuery on erittäin voimakas. Se antaa meille ton tietoa tästä erityisesti HTML-elementti. Avie, mitä haluamme tietää tästä HTML-elementti? Yleisö: Jotain tunnus. JASON HIRSCHHORN: tunnus. No, meillä on lähde, leveys ja korkeus. Yleisö: Voimme käyttää lähteenä. JASON HIRSCHHORN: Meillä voi käyttää lähteenä. Että annan meille merkkijono, URL-osoitteen. Mitä me aiomme tehdä että kun meillä on tuo? Miten pääsemme takaisin meidän indeksin ocean_array? Yleisö: Voimme verrata sen muille. JASON HIRSCHHORN: jotta voisimme silmukan läpi jokaisen. Nyt voisimme silmukka uudelleen ja sitten verrata tätä. Kuvitella mikä olisi yksinkertaisempi tapa, jos voisi vain kuvitella yksi? Yleisö: Ei tarvitse silmukka. JASON HIRSCHHORN: Ei tarvitse silmukka. Yleisö: Vain mietitään delfiini, [äänetön]. JASON HIRSCHHORN: Mietitään mitä delfiini. OK. Joten tallentaa nämä tiedot Tässä kuva tag. Ja taas, juuri nyt, osa tätä kamaa on vain maaginen, koska voisin osoittaa teille tämän ensimmäistä kertaa, mutta toivottavasti nämä ovat asioita, aiot olla tekemässä. Joten tämä on jotain maaginen voit tehdä. Voit tallentaa ylimääräistä metatiedot in elementti. Se ei näy, se ei vaikuta mitään. Voit vain tallentaa sen siellä. Ja ehdotan säästämme indeksi jokaisen kuvan. Joten miten tässä on luot määreen tietojen ajatusviiva, ja sitten halutun nimen haluat antaa sille. Data viiva on erityinen asia, joka on annetaan sinulle, ja se sanoo tämä on jotain käyttäjä aikoo luoda. Joten olemme luomassa tätä asia sanottu indeksi, tämä avain vieras indeksi. Ja sen sisällä, aiomme laittaa ei vain yksi joka kerta, mutta mitä laitamme sen sisälle, Avie? Mikä menee täällä? Yleisö: Dolphin. JASON HIRSCHHORN: Dolphin. Se ei ole sitä sanaa. Dolphin. Ja vielä, meillä on jo painettu delfiini aikaisemmin, että 0, 1, 2, 3, 4, 5, ja säästämme että kuvan. Joten nyt, jos en tee - ja uudestaan, säästämme metatiedon. Miten voit käyttää metatiedon? Se sisältää toiminnon soitti juuri "data." Ja sinun täytyy siirtää se yksi ja vain yksi argumentti, joka on nimi juttu. Joten aion tulostaa tämän ulos, ja sitten otan kysymyksiä. Mutta pohjimmiltaan, sanon anna minulle sitä objekti, joka napsautti, katso kaikissa sen tiedot attribuutteja, ja yksi nimeltään "indeksoidaan" Anna se minulle arvo. Ja katsotaan mitä tapahtuu, kun me päivitä tämä sivu. Juuri sitä, mitä odotimme. Jälleen oli aika maaginen. Me vain teimme paljon tuolla. Kenellä on kysyttävää, että? Joo? Yleisö: Minulla on vain kysymys noin live koodi. Käytät kuin yksi tarjous, kahden lainaus, kuten tuolla. JASON HIRSCHHORN: Juuri täällä. Yleisö: Joo. Onko syytä miksi teet yksi tarjous, lainausmerkki? JASON HIRSCHHORN: On syy, ja tämä menee takaisin siihen, mitä Marcus kysyi aiemmin. Tätä linjaa, minä oltiin hieman paremmin minun koodausta. Haluan tämän, ja tämä on mitä olen rehellisesti olisi pitänyt tehdä kaikki aikaan, sillä leveys ja korkeus erityisesti. Katsotaanpa tänne. Näet täällä, näetkö sen? Tiedän, se on sellainen pieni, mutta tiedot viiva indeksi on lainausmerkkeihin. Nuo asiat aina tarvitse olla lainausmerkkeihin. Arvo tarvitsee aina oltava lainausmerkkien. Mutta täällä, jos en lainausmerkki, että loppuisi tämä merkkijono täällä, ja nyt en olisi kirjoittamalla merkkijonon. Niin saan noin, että vain käyttämällä yksi tarjous, koska vain yksi tarjous ei pääty JavaScript merkkijono, mutta HTML se ei välitä, jos olet jolloin se puolilainausmerkkejä tai lainausmerkkeihin. Se täytyy vain tulkita sitä kuten lainausmerkkeihin. Onko järkeä? Joo? Yleisö: Miten saat että IP-osoite pohjassa asiakkaasi? Mine sanoo ei IP-osoitetta. Onko jotain minun pitäisi tehneet [kuultavissa]. JASON HIRSCHHORN: In your laite, sillä ei ole mitään? Yleisö: Kyllä. JASON HIRSCHHORN: On jotain voit tehdä korjata sen, mutta en ole aikovat viettää aikaa kävely läpi juuri nyt. Mutta voimme tehdä sen jakson jälkeen. Yleisö: Jos menet takaisin konsoli, miksi oli numeroon 012321? JASON HIRSCHHORN: Console? Voi, koska olen juuri oli klikkaamalla noin villisti. Yleisö: Oh, OK. Ei se haittaa. JASON HIRSCHHORN: Ja vielä, voin sitten jotain bajillion kertaa. Yleisö: Minulla on kysymys silmukka uudelleen, sinun silmukoita. Koska tiedät P asetettu kahdeksan, ne käyttää eri muodossa, että silmukka. Joten he eivät kuten var i on 0, i vähemmän kuin, ocean_array.length, i + +. Ovatko nuo vastaavat? JASON HIRSCHHORN: Tämä on standardi silmukka. Tai joo, se on silmukoita. Itse asiassa, olemme nähneet, että vastine. Yleisö: Niin, että vastaavia mitä olet tehnyt täällä? On yksi pidetään paremmin kuin muut? JASON HIRSCHHORN: Ei. Joten jälleen olemme menneet yli joitakin asioita. Nyt tekniikka on viety pois meidän comfort zone ja alkoi tehdä joitakin todella hienoja asioita, joita emme ole välttämättä mennyt yli luokassa ennen, mutta toivottavasti hyvin voimakas sinua, kun koodausta. Avie, mennään takaisin tänne. Minulla on indeksi delfiini. Nyt mitä minun pitää tehdä? Yleisö: Sinun täytyy kouluttaa sitä. Joten sen sijaan että console.log, voit voi asettaa muuttujan sama? JASON HIRSCHHORN: OK. Joten? Yleisö: En ole varma jos voit tehdä sen. JASON HIRSCHHORN: Niin var x vastaa tämä riippumatta tämä palaa, se tulee palauttaa sen. Ei ole väliä. Se voi palauttaa muuttuja. Ei ole tyyppejä täällä. Yleisö: Tai voit tehdä funktiokutsuna. JASON HIRSCHHORN: Joo, miksi en tee sitä? Just do funktiokutsuna. Yleisö: Joo. Laita toinen joukko sulkeissa. JASON HIRSCHHORN: Perfect. Se on aivan oikein. Niin, että soittaa juna toiminto. Tietenkin, mikään ei ole junassa toiminto, joten ehdottaa, Akshar, mitä minä pitäisi tehdä junan toiminto. Anna minulle pseudo koodia. Yleisö: Minusta sinun pitäisi poistaa delfiini alkuperäisestä taulukosta. JASON HIRSCHHORN: Ja tämä on tulossa Nooalle aikaisemmin miksi me kopioida se uuteen array. Oikeassa, koska emme muokata meidän delfiinit array koska mitä jos toinen ohjelman käyttää sitä tai mitä jos haluamme Voit avata sen jossain muualla? Emme halua tehdä kopion, ja se on yksi aiomme muokata. Yleisö: Sitten asetat se uuteen paikkaan. JASON HIRSCHHORN: Ja mitä tehdä meidän täytyy tehdä sen jälkeen? Yleisö: Ja sitten tulostaa tietoa delfiini. JASON HIRSCHHORN: Tuo Aivan oikein. Me poista se ocean_array, me laita se altaan, ja sitten vedämme meressä altaassa. Miten voin poistaa delfiini alkaen ocean_array? Yleisö: Menet indeksiin. Oh, OK. Käytä liitos toiminto. JASON HIRSCHHORN: OK, niin se on totta. Voisin käyttää jatkos-toiminto, joka vie jotain pois array ja tiivistyy siihen. Se on jotain uutta me ole ennen nähneet. Mutta olen itse haluavat pitää tilaa siellä koska haluan tulostaa tyhjä tila meressä. Yleisö: Joten voit asettaa kuva Kyseisen indeksin, ocean_array index dot kuva. JASON HIRSCHHORN: OK, ocean_array, indeksi. Yleisö: Dot kuva. JASON HIRSCHHORN: Dot kuva. Yleisö: Ja olet asettanut sen, null? JASON HIRSCHHORN: Yhtä null. OK. Joten mikään ei ole siellä, niin sitten miten voin laittaa allas? Constantine, miten voin laita se allas? Meillä on tämä muuttuja soitimme, nimeltään allas, täällä. Yleisö: Onko meillä vain tehdä tasavertaisina ocean_array indeksi? Yleisö: Eikö sinun pitäisi vaihtaa tilauksen? JASON HIRSCHHORN: Yksi sekuntia. Joo? Yleisö: Niin, se oli todella hyvä pointti. JASON HIRSCHHORN: Mitä tulee tähän? Yleisö: Onko se indeksi? JASON HIRSCHHORN: Index, tarkalleen. Ja mitä sanoit, Constantine, meidän pitäisi tehdä? Yleisö: Meidän pitäisi ehkä kytkin järjestyksessä. JASON HIRSCHHORN: Ja miksi me vaihtaa järjestystä, ehkä? Yleisö: Koska tuohon kohta se on jo null. JASON HIRSCHHORN: Joten se ei ole kaikki null, mutta olemme menettäneet kuvan URL. Olemmeko menettäneet sen ikuisesti? Yleisö: Teknisesti ei? JASON HIRSCHHORN: Have menetimme sen ikuisesti? Yleisö: Ei. JASON HIRSCHHORN: No, missä se on? Yleisö: In alkuperäinen delfiini - JASON HIRSCHHORN: Se on delfiinejä, mutta ocean_array menetimme sen ikuisesti. Joten Constantine, voit ehdottaa parempi tapa kirjoittaa tätä linjaa? Oikeastaan, anteeksi, se on tallennettu allas. Olemme se altaassa, koska Allas on esine, eikö? Ocean_array indeksi, ocean_array on joukko esineitä. Joten allas on esine, ja meillä on URL siellä, ja alas tässä se on asetettu nollaksi. Joten oikeastaan, meillä ei menetti sen ikuisesti. Se on vain tallennettu allas. Mutta se on varmasti ole ocean_array, ja kuten sanoit, Carlos, se on delfiinejä array. Joten tämä näyttää makea. Ja sitten miten vedämme merelle ja uima-allas? Mario? Yleisö: Voit vain soittaa draw_pool ja draw_ocean? Joten kuten, draw_pool, ja sitten - No, joo, se ei vie mitään. JASON HIRSCHHORN: Great. Mitä draw_pool aiot tehdä? Yleisö: Piirrä allas? JASON HIRSCHHORN: Niin, no, mitä se aikoo tehdä? Yleisö: Anteeksi. Voisit tehdä saman asia, kuten on - JASON HIRSCHHORN: Pidä kiinni, aiomme päästä sinne. Mitään. Se ei tee mitään juuri nyt. Katsotaanpa, jos tämä toimii, vaikka. Kuka antoi meille, että koodin? Akshar ja Constantine antoi meille, että koodin? OK, katsotaanpa mitä tapahtuu. Ah! Se oli niin jännittävää. Se on poissa. Voi pojat. Se on aika ruma. No, voimme mennä takaisin ja korjata myöhemmin. Missähän se on? Me tallentanut sen, että allas muuttuja. Miten voin selvittää, jos se on että allas muuttuja? No, taas, voima JavaScript, ja erityisesti työkaluja, Chrome antaa sinulle, on voit nyt tarkastaa, että allas muuttuja. Se on maailmanlaajuinen, muistatko? Emme laittaneet var avainsanan. Joten jos kirjoitan Anna täällä, Constantine, mitä luulet olen menossa kun lyön Anna? Yleisö: En tiedä. JASON HIRSCHHORN: Arvaa. Yleisö: Ei mitään? JASON HIRSCHHORN: Ei mitään, väärä. Se oli hyvä arvaus, vaikka. Sain objekti. Muista annoit minulle Koodirivin. Allas, pelastit että muuttuja esine. Ja todellakin, me näemme esineen olet tallentanut sen. Se on mahtava. Voimme tarkastaa täältä. Se on melkein kuin reaaliajassa GDB että voimme katsoa läpi koodi ja selvittää tavaraa ulos. Tämä on super cool ja erittäin tehokas. OK, nyt lopettaa tämän ylös. Katsotaanpa piirtää allas viidessä minuutissa. Maru, anna minulle linja koodi piirtää allas. Yleisö: Voisit olla toinen muuttujan HTML, mutta / varten. JASON HIRSCHHORN: Tehdään se hyvin yksinkertainen nyt. Toivotaan vain tulostaa nimi delfiini olemme koulutusta. Yleisö: Ja sitten voit tehdä dollari allekirjoittaa, avoimet sulut, ja avaa lainaus. Luulen punta allas, jos että oli asia. En muista. JASON HIRSCHHORN: Katsotaanpa takaisin. Minusta se on asia. Yleisö: OK, joo. Ja sulje lainaus, lähellä suluissa . Html, avoimet sulut, ja niin kai allas, kuten alkusulkumerkki 0 tai jotain. Sulje dot nimi. En tiedä, jos se toimii. Yleisö: OK, katsotaanpa mitä tapahtuu. "Ei voi lukea omaisuutta nimeä määrittelemätön. "Joten jälleen, tässä mitä aiomme tarkistaa. Aiomme tutustua. Teit allas, avoinna bracket0,. Nimeä. Jälleen Teen tämän kaiken aikaa, ja olen hämmentynyt mitä on tekeillä, mitä tämä varoitus tarkoittaa. Katsotaanpa allas. Katsotaanpa allas kiinnike 0, määrittelemätön. Niin että sinne olemme käynnissä meidän ongelma, eikö? Allas kiinnike 0 ei, tietenkin, on olemassa. Mitä mieltä olet olemassa? Yleisö: Onko allas vain esine itsestään? JASON HIRSCHHORN: No, mitä se sano täällä? Kun me Enter-allas, mitä se sano se on? Yleisö: Object. JASON HIRSCHHORN: Se on esine, niin? Yleisö: Joo. Joten pool.name sijasta - JASON HIRSCHHORN: Pool.name antaa juuri sitä mitä halusi. Ja ymmärrän, olen menossa läpi tämän hitaasti ja belaboring tässä vaiheessa, mutta tämä on juuri sitä, miten teen tätä kamaa. Aiot törmätä nämä virheet aikana opinnäytetyö, joten toivon, tämä on valtuuttamisesta voit pystyä käyttää kaikkia näitä välineitä. Nämä on olennaista ja sinut Super duper pitkälle. Joten en halua vain tulostaa nimi. Tehdään tästä hieman vähän mukavampaa kuin tämä. Yleisö: Mitä muuta me haluamme tehdä? JASON HIRSCHHORN: OK, hieno. Teemme juuri tämä. Ugh. Kaverit, teillä ei ole elämää. OK, boom, sain sen. Näyttää hyvältä. Näet, Akshar, tänne, olemme null, ei löytynyt. Joten se näyttää se vielä yrittää löytää kuvan, ja jotka eivät tee mitä halusimme tehdä. Emme aio mennä tuohon nyt, mutta on luultavasti puhtaampi tapa Näin. Yleisö: Voisitko jättää like tyhjä tila kuvan? Kuten sen sijaan että se null, voisi asetat sen pitävän tyhjä merkkijono tai jotain? JASON HIRSCHHORN: Näinkö? Yleisö: Joo. JASON HIRSCHHORN: [kuultavissa]. Ei löytynyt. Joten on parempi tapa tehdä se. Ehdotan näin. Vain asettamalla null siellä. Sitten tietenkin, mitä tulee tapahtumaan? Se katoa kokonaan. Joten jos halusimme säilyttää tilaa ja tehdä että emme todennäköisesti halua tehdä jotain täällä samoin. Aion pääset alkuun. Akshar, anna minulle tätä linjaa koodia todella nopeasti. Yleisö: Jos ocean_array, delfiini, vastaa, vastaa, vastaa - vastaa null? Joo. JASON HIRSCHHORN: Mitä sitten? Yleisö: Sitten tee html. Sinä vain kopioi pohja koodin, todella. JASON HIRSCHHORN: kopioida mitä? Yleisö: Voit kopioida - JASON HIRSCHHORN: Tämä? Yleisö: Joo. JASON HIRSCHHORN: Kaikki sitä? Meillä ei ole kuvaa. Yleisö: Tarkoitan sinua voi vain jättää - joo, voit vain sulkea sen. Mutta luulen sinun täytyy asettaa leveyden. JASON HIRSCHHORN: No, vain luoda tyhjään sarakkeeseen. OK. Ja niin siinä tapauksessa, me luultavasti haluamme tehdä tämän hyvin. Oho. Oh. Ei toimi, mutta emme ole saada, että virhe. Katsotaan, mitä tapahtui täällä. Joten siellä ei ole mitään, niin mitä sanoit meidän pitäisi lisätä? Yleisö: Meidän pitäisi asettaa leveys peräkkäin. JASON HIRSCHHORN: Missä? Yleisö: Minusta se on 150. Yleisö: Joo, se oli 150. JASON HIRSCHHORN: Laitamme tämän tästä pitää minun koodi johdonmukainen. Mutta tämä ei ole yksi. OK, hyvä. Lähetetty. OK? Joten se on edelleen menossa pois. Yleisö: Voi, soita leveys? JASON HIRSCHHORN: Näyttää kuten leveys on 150. Katsotaanpa. Nyt aiomme tehdä lopullinen, viileä, voimakas asia, että olen aikoo näyttää. Emme aio lopettaa tämän koodin, mutta verkossa ennen kuin lopettaa, kaikki tämä koodi on oikea. Minä sinulle sähköpostitse oikaisu joidenkin oman styling jälkeen jakso, ja että tulee olemaan julkaistaan ​​verkossa. Kehotan teitä pitämään tutustua tähän ja käyttää tätä apuna, mutta Haluan näyttää sinulle lopullinen työkalu tähän luokka, ja joka on yli täällä oikealla puolella. Ja me katsoimme viime viikolla, mutta nyt toivottavasti se on hieman tutumpi sinulle ja mukava. Voit dynaamisesti pelata kanssa CSS sivun. Olemme itse asiassa jo nähneet meitä dynaamisesti pelata HTML. Muista teimme oikean Muokkaa HTML? Täällä? Joten olemme dynaamisesti pelit HTML. Konsoli, voit dynaamisesti pelata Javascript sivun. Esimerkiksi, se on voimassa JavaScript linja. Boom, sain mitä halusin. Joten voimme dynaamisesti pelata HTML, dynaamisesti leikkiä JavaScript. Nyt aiomme dynaamisesti pelata CSS. Ja kaikki tämä on, koska se on kuin hetkessä, elää GDB palautetta, ja niin voi tietää joku on oikein ennen kuin mennä koodia, ja voit ei arvaa mitä jokin on tulee näyttämään. Joten tämä on super duper viileä. Ja nyt vihdoin katsoa dynaamisesti leikkii CSS. Se on täällä oikealla laidalta, element.style. Mennään tähän. Tässä on meidän elementti. Annetaan sitä ylimääräistä CSS. Tai anteeksi, voisimme antaa sille ylimääräistä CSS, mutta emme todennäköisesti tässä tapauksessa, haluat muuttaa tätä ominaisuutta. Joten mennään tänne tätä linjaa. Voi, en voi tehdä sitä täällä. Anteeksi. Muokkaa AS - niin se on, miten voit muokata CSS. Emme aio muokata CSS tässä toinen, mutta haluamme muokata HTML ja antaa sille ylimääräinen määrite. Mitä ehdotatte muuttuvat tämän? Luulin Avie oli ehdotus. Yleisö: Col leveys? JASON HIRSCHHORN: Tuo näytti se ei ole tehnyt mitään myöskään. Kokeillaan CSS. Yleisö: [kuultavissa] luokka? JASON HIRSCHHORN: Siinä sanotaan se ei toimi. Se antaa että keltainen juttu. Yleisö: Mutta [kuultavissa]. Yleisö: Ettekö asettamalla leveys kuvan 150 kun teet noin? Kuten ei juuri käytä leveys? JASON HIRSCHHORN: Joo. Yleisö: Mutta meillä ei ole kuva enää. JASON HIRSCHHORN: Ei. Meillä ei ole mitään siellä. Joten emme aio ratkaista erityinen ongelma. Aiomme palata Akshar n ratkaisu, koska haluan asettaa delfiini vapaa toistaiseksi, tai että on viimeinen asia, jonka haluan lopettaa. Joten aiomme lähteä tästä täällä tunnustaen se ei ole aivan oikea, ja me aiomme palata siihen. Anteeksi. Sanoin voimme dynaamisesti muuttaa CSS. Katsotaan, että ja tehdä että todella nopeasti. Jos siis tarkastaa tämä elementti tänne, ja sanoa haluan tehdä sininen, voit tulla tänne, väri, koska Tiedän, että värin muuttaminen jotain, ja näimme kuinka se muutti se sininen. Niin, että minua dynaamisesti muuttamalla CSS. Ei muuta sitä hyvää, mutta sitten En voi mennä takaisin minun CSS-tiedosto ja vaihtaa väriä esineen. OK. Se oli paljon. Emme päätän hämmästyttävä ohjelma. Haluan vain näyttää sen todella nopeasti, ja sitten me pään pois. Oh, missä se on? Ei! Pidä kiinni. OK, niin olet pakkaamaan, hämmästyttävä esikatselu tai edessä näkyviin, ja ensi kerralla. Tämä on Dolphin Trainer 2013, ja se ei toimi. Suuri. [Naurua] JASON HIRSCHHORN: Oh! Boom! Mitä tämä tarkoittaa? Yleisö: Et chmod. JASON HIRSCHHORN: En chmod sitä. Yleisö: rivi one. JASON HIRSCHHORN: Oi, katso tuota. OK. Joten, minulla on kuusi delfiinejä. Mitä tapahtuu? Katsotaanpa. Jos minä opettaa yhtä, nyt koulutusta Lili. Oh, haluan vapauttaa sinut, Lili. Siellä mennään, takaisin merelle. Joten se oli tällä viikolla. Jos sinulla on kysyttävää, me olla ulkopuolella. Ja vielä, minä lähetän sinulle loput tämän koodin. Kiitos, kaverit.