ALLISON BUCHHOLTZ-AU: Vredu vsi. Dobrodošli nazaj na oddelek. To je naš predzadnji oddelek. To je tako žalostno. Ne vem, kaj bom naredil ne da bi vas videl fantje vsak ponedeljek. Mislim, da bi morali just-- Mogoče smo lahko samo izpolnjujejo tukaj in večerjo ali kaj podobnega. Jaz ne vem. Jaz bom prinesla hrano, namesto. Bomo samo govoriti. Ampak ja, bo naslednji teden naša zadnja oddelek. Na tej opombi, imate kviz naslednji teden. Vem, da sem pozabil narediti moj, kot so, dva tedna vnaprej obvesti o prejšnji teden, upam pa vidva Vedel se bo to zgodilo. Upajmo, da je to ena od zadnjega izpitih za vaju za semester. Ampak to se dogaja, da se pokrijejo vsi Material, ki smo šli skozi. Torej to ni všeč, si lahko samo pozabi približno štiri zanke ali spremenljivke. Ker smo se naučili tistim v začetku, tistih, ki so očitno pošteno igro za vaš kviz. 

To se dogaja, da isti format, enak dolžina, zato vas že se uporabljajo za to. Tam se dogaja, da kodiranje ročnega problema morda nekaj res false, Mogoče nekateri kratek odgovor. Torej bi morali biti seznanjeni z obliko, še posebej, če ste vzeli testi praksa. Ampak kot sem rekel sem, da je kumulativni, vendar smo zagotovo dogaja se, da se osredotočajo na stvari iz šestih tedna dalje. Torej, smo verjetno ne bo vas vprašati, koliko bajtov so v vsaki vrsti ali te vrste stvari, vendar smo verjetno bo zanimajo stvari kot povezanih seznamov, ali različne podatkovne strukture, ali različni algoritmi da smo se pogovarjali o tem. Zato poskrbite, da ste res in če vas gor na tiste, potrebujete nobenih sredstev, tukaj je veliko virov. Pravkar sem vam dal vrste za hitro seznama tam. 

Naslednji teden bo kviz pregleda v tem času. Torej, če imate kakršnakoli vprašanja ali specifične teme, posebne stvari na kvizu, ki bi radi, da gredo skozi, prosim jih pošljite k meni pred časom, tako da sem lahko vrsta pripravili nekaj materiala za to. In poleg tega Pregled oddelek, bomo širok tok, prav tako se držite pregleda, kot smo storili zadnjič. In to se dogaja, da narejeno z istimi ljudmi. Ne vem, če je to omogoča boljše ali slabše, vendar se dogaja, da se mi, Hannah, Davan in Gabe znova. Torej, če želite, da pridejo videti Vse nas Šala seboj in sprehod skozi kviz Pregled, morate definitivno prišli tudi na ta naslednji ponedeljek. Torej, boste samo še ponedeljek marmelado pakirane pregleda kviza, kar je dobro ker potem imaš torek obdelati skozi vse. 

Vendar je vsekakor treba storiti, preverite iz teh virov. Study.csv.net je daleč, sem mislim, eden najbolj koristno, predvsem zato, ker ima Veliko vzorčne kode, ima vse točke moči na z vsemi pojasnili o tem, ki so res tisto, kar sem najbolj pripravi mojih rubriki materialov iz. Če je kaj v prejšnji oddelki, ki sem jih lahko poslale da ne boste imeli prišel, mi povej. Podobno oznako vzorca prejšnji teden, če kdo ni dobil, da samo email mi ali prihajajo govoriti z menoj, in bom se prepričajte, da ste dobili to. 

Torej, s tem, danes se bomo da bi govorili o JavaScript. Torej, tukaj smo, Tommy, ki sem bil samo pogovarjam s tabo sinoči. Ljubim Tommy. JavaScript je njegov najljubši jezik, kot pravi tukaj. Ti bom poskusil in vam povem, da je to ni najboljši, in bodo narobe. Torej Tommy je mojster JavaScript. Nisem čisto na svojem ravni, vendar sem si mislil, "Tommy, kako sem se naučil ti otroci JavaScript? " Tako sem dobil nekaj nasvetov, tako da upajmo, da jim izšlo. 

Torej, nekaj stvari, ki jih morate vedeti, je, da JavaScript je scriptinga jezik, zato ker PHP je nekaj da smo upoštevali več server-side, je bilo naložiti na strežnik, zbrati in tam izvajajo. Tole se izvrši na svojem računalniku. OK? Torej si naložite nekaj JavaScript stran, in se izvaja na vašem računalniku. Sintaksa je zelo podobna C in PHP. Smo šli skozi nekateri primeri JavaScript, in boste videli, da Tako govorimo o spremenljivkah, zank, in pogoje, so vsi zelo podobni. OK? Dejstvo, da so tako podobna je verjetno, da bo potovanje nekateri od vas se v nekaterih primerih, samo zato, ker boste vključili malo C če ne bi smelo biti. Morda poskusite in vnesite nekaj ko ne bi bilo treba tipkal. 

In da je ena stvar, da vem, je, da je JavaScript je dinamično vnesli jezik, kot so PHP. Torej, če vi spomnite iz oddelka prejšnji teden, ko smo bili nekako počne Naša PHP crash seveda, bomo videli, kako lahko en niz lahko spremenila v int enega, in tako naprej. Tip vaših spremenljivk se določi na doživljenjsko času, tako da lahko preidejo potek programa, in na enak način, da nikoli Res razglasi tipe za PHP spremenljivke, bomo počeli enako stvar tukaj, kjer smo v resnici ne zatiranje vrst naših spremenljivk, tako rekoč, kot smo storili v C. 

In potem ena stvar da je precej kul je da lahko napake preverite preko konzole, s tem veliko funkcijo console.log, ki vam omogoča, da natisnete razlikuje spremenljivke ali predmeti, da bomo govoriti. Tako kot prejšnji teden, ko sem bila podobno, "uporabiti to funkcijo," z smetišče iz vašega pset je to funkcija ki jo želite uporabiti, console.log. Bil sem tako presenečen, koliko študenti na uradnih ur ni vedel, o funkciji smetišče. In sem si mislil, "fantje, ta volja da bo vaše življenje tako veliko lažje. " 

Vse je v redu, tako da je bila vrsta Samo kratek stvar, kot vedno, imamo primere. Vem, da fantje radi tiste. Torej, tukaj je primer zelo preprost JavaScript datoteko tukaj. Torej, to je le, da bo ustvarjanje to pop-up, ki pravi, "Svetu zdravo," ko vas vnesite strani, vendar Dovolite poskusite in sprehod skozi to malo. Torej, očitno je to le kot običajne index.html. Torej, samo naša običajna template tukaj, in imamo HTML, imamo glavo, in tako kot s CSS, kako smo vključenih nekaj zunaj datoteko, kajne? Imamo nekaj script type besedilo, ki je JavaScript. In vir je hello.js, ki je tukaj dol. To je celotna datoteka hello.js. In potem imamo nekaj Naslov in nekaj telesne HTML da ne bomo res skrbi. 

Kaj se zgodi, ko smo naložiti to stran, samodejno izvaja ta scenarij. OK? Torej JavaScript bo samodejno izvršiti. Torej, kaj se dogaja, da ne, gre iti takoj in izvršitev tega. In to se dogaja, da reči, "opozorilo. Zdravo svet. " Ki Opozarjanje je funkcija, ki dejansko ustvarja to polje. OK? Torej, to je nekako vse vključujeta. Nič ni extra smo imeli narediti poleg pravkar pozorni, in potem, kar smo hoteli v naši Alert polje. OK? Torej, to je samo super enostavna Primer, kaj je mogoče storiti JavaScript. 

Ena res kul stvari, kot bomo videli, je, da vam omogoča JavaScript manipulirati svoje spletne strani, ne da bi jim osvežite vsakič. Torej, če ste want-- za primer, če ste lebdi nad nečim, če sploh kdaj ste fantje obravnavati kot Meni bari, ali ko hover čez nekaj Tema se prikaže v spustnem meniju, da je zaradi JavaScript. OK? Torej ne boš ponovno naložiti celoten stran, da se to meni, da pokažejo, ste samo iščejo nekaj specifičnih Dejanje, ki je uporabnik sprejeti, ki se imenuje prireditev, da bomo dobili na, in ko boste videli, da ste rekli, "OK, urediti nekaj na tem stran in bi bilo videti drugačen, vendar le urejanje te posebne stvari. Ne osvežite celotno stvar. " Torej je v resnici veliko lepše in nimate, da osvežite svoje strani, in to je res kul. 

Torej deklaracije spremenljivk, tako da lahko nekako videti, Sem dal na vrhu tukaj, ohlapno vnesli. Torej, to je zelo všeč PHP. Mi ni treba povedati, JavaScript kakšna vrsta smo pričakuje vsaka od teh spremenljivk biti. So lahko karkoli vrste želimo. Torej, ste opazili, v tem primeru, izjavljamo jim zelo preprosto, samo z "var" in potem karkoli želimo naše ime spremenljivke biti. Ena stvar je tudi omeniti, da je pri vas dal var pred imenu spremenljivke, je lokalno ga področji. OK? To je popolnoma smiselno za vas v celoti samo izbrisali var in samo še s enak CS50, in da bi bilo samo globalna spremenljivka. OK? Torej lahko to inicializacijo v obe smeri, samo odvisno od tega, kako si ga želite. Torej, če ste inicializacijo je v funkciji, in želite, da spremenljivko ostanejo scoped v tej funkciji, boste želeli storiti nekaj podobnega var ime spremenljivke, versus če hočeš globalno scoped, si lahko samo naredi ime spremenljivka in nato karkoli bi si želeli, da nastavite enako. OK? 

To je nekako kul stvari tu spodaj, ker če smo opazili, naša spremenljivka b začne ven kot resnična. In kaj je to lahko does-- kdorkoli povej mi, kaj to počne? Torej, imamo nekaj opozorilo. Kaj bi tip B v začetku? OBČINSTVO: Boolean. ALLISON BUCHHOLTZ-AU: Boolean. Prav. In potem smo dodelite b na ta niz, kajne? Torej tukaj, kaj tip b bilo? To bi bilo niz, kajne? Torej, kaj je pomembno, da se obvestilo, da je v c smo bi skoraj nikoli ne nekaj takega. Mi bi morali imeti spremenljivke, vrzi kot nekaj drugega, Morda še nekaj funkcijo z dvema i, gredo od dajatev na celo število. Ampak, če smo opazili tukaj, b Zelo enostavno spremeni tip. 

OBČINSTVO: Počakajte, da si lahko samo bilo všeč, "da b celo število?" 

ALLISON BUCHHOLTZ-AU: Ja. Lahko samo dodelite b na celo Å¡tevilo. 

OBČINSTVO: Res? 

ALLISON BUCHHOLTZ-AU: Ja. In potem bi bilo int. Torej vaše spremenljivke lahko preidejo potek programa preveč. Niso strogo vnesli. To je zelo ohlapno tipkal. OK? V bistvu vaši spremenljivke lahko storite karkoli hočejo, saj smo nekako videla s PHP. Ti lahko narediš nekaj nore stvari, tako je pomembno, da je precej previdni. Ime vašega spremenljivke dobro. Če tega ne storite, kar naenkrat boš všeč, "Počakaj, sem mislil, da je to niz, zdaj pa je int, in nisem ravno prepričan, kaj se dogaja. " Torej je to samo preprost primer prikazuje, kako spremenljivka zlahka spremeni svojo vrsto v Seveda programa. 

OK. Zato bi bilo treba to pogledati super, super pozna. Torej, to so naši zanke v JavaScript. So popolnoma enaka, razen namesto štirih int i enaka nič, smo lahko samo povem, var i enaka nič. In potem bi mi imamo iste vrste stanja, enaka vrsta posodobitve, i plus plus deluje v redu. Torej so štiric enaka, whiles so enaki, in ne whiles so popolnoma enake. Same neke vrste splošni obliki. Opazili smo, štiri, oklepaji, nosilci, to je vse isto. Prav tako bo prišlo do podpičja ko pridemo na primer kode. Boste videli, da je precej podobno kot c. 

Za deklaracije funkcije, spet zelo podobni. Imamo nekatere funkcije, ki so pravkar pravi, da je to funkcija, in nato ime našega funkcija, in vložki. In spet, če smo opazili, smo imeli nobene vrste tukaj whatsoever. Kajne? Imamo nič rekel, da so ti morajo biti Ints ali podvoji ali plava. Lahko bi bilo karkoli hočejo. Pomembno je pripomniti, da moramo funkcijo predhodno pisanje pustiti JavaScript vedeti, da To je pravzaprav funkcija. 

Torej, to je le nekaj preprostih vsota funkcija, ki vrne X ali Y, in kaj potem je tudi kul je, da lahko dejansko dodelite funkcijo spremenljivke. Torej, v tem primeru vsota je sedaj funkcija, ki dejansko počne vsoto. Torej, če ste opazili, imamo funkcija, ime funkcije, vhodi. Kajne? Tukaj imamo samo funkcijo in vhode. Torej se to imenuje anonimni funkcija. In to je nekaj, kar bi morala biti nova za večino od vas fantje, če ne vsi. Torej v bistvu, kaj to pomeni, da ne bomo morali ime našega funkcija v tem primeru. Mi lahko samo rekel, "OK, bom ima to funkcijo, ki izvaja, tukaj so njegovi vložki, in tukaj je kaj se dogaja, da narediti. " In še posebej, če ste dodeljevanju Funkcija do neke spremenljivke da boste manipulirati, vam ni nujno, morali poimenovati, ker boš se sklicuje s to spremenljivko ime, ne glede na funkcija je pravzaprav ime. OK? 

Torej, če bomo videli tu, nekaj spremenljivo vsoto zdaj ki je enaka vsoto tri in pet. In mi bi to dobili. In bi s tem samo še nekaj opozorilo, tri plus pet enako število. To bo samo plus združevanje glede na naš odgovor je bil na vrvici. Prav tako kul, plus lahko združevanje nizov. 

Za JavaScript, tako kot pri PHP, HTML in CSS, kot smo rekli, Veliko od tega, da smo vrsto sprejemanja kolesa za usposabljanje off tukaj in ti fantje imajo veliko znanja in izkušenj kako zares razumeti te stvari. Oni so nekoliko drugačna, ampak oni niso tako tuji in da ga ni mogoče vprašaš stvari ali jih poiščete na spletu z W3 šolah. In smo res vas pričakuje fantje, vrsta, eksperiment in se naučite sami. Torej, vem, da je to morda zdi malo manj temeljito kot nekateri c stvari počnemo, ampak to je dejansko z razlogom. Vendar upam, da to ni preveč drugačen, in to ni prepričljivo. 

Torej nizi v JavaScript, spet zelo, zelo podobni. Kajne? Imamo nekaj spremenljiv niz to je enako praznih oklepajev, in to je samo prazen niz. To se pogosto imenuje dobesedni niz zapis. To je samo ena stvar, ki jo imenujemo. Če vidimo niz dve, imamo nekaj dobesedni niz, ki ima tri elemente, kajne? In potem imamo nekaj var Tretji element, ki je neka spremenljivka, ki je samo dogaja, da imajo ta niz, JS. 

Elementi, dobre opazil, so ločeni z vejicami, tako kot mi bi pričakovali. In lahko tudi dostop do njih, kot smo to storili v C, s tem indeksnem zapisu, kajne? Tako drugačen od PHP zdaj, gremo nazaj samo nekako se nanašajo za stvari, ki jih indeks. Tako kot C, je prav nič kazalo. Počutim se, kot da bi bilo res kruto če nenadoma je JavaScript eno indeks, in si moral v celoti premisliti, kako mislite o nizi. 

Ena kul stvar je, da namesto da bi morali do--, če vas kdaj Želeli dolžino array, Morda boste Ponovil skozi njo dokler ne boste našli nekaj konec, ali bi le vedel, kaj je to. Ker JavaScript je zelo ohlapno v več načinov kot le tip, kot vidimo tukaj, smo lahko le, da ta niz večji, ker smo se odločili. Če bomo opazili niz treh ima tri stvari, za začetek, potem pa kar naenkrat, smo podobno, "oh, samo hecam. Mi smo dejansko dogaja da bi ji 101 stvari. " Torej, če si kdaj želeli vedeti Dejanska dolžina vašega matrike, vam je všeč to. In da bomo videli veliko tega zapisa v primerih, vendar z JavaScript to je običajno, kar predmet, ki ga govoriš pika ne glede na vrsto funkcije ki jih želite uporabiti za to. OK? 

Torej, v tem primeru, naše Objekt je matrika dva, in smo rekli, želimo Dolžina niza dveh. Torej je to samo zahteva o dolžini na to. In da se bodo vrnili dolžino. Tudi nekaj omeniti, da če opazimo naše nizi, razliko C, nimajo da se vsi istega tipa. To je veliko več, kot so PHP. JavaScript je v bistvu tako kot to zanimivo stapljajo C in PHP. Tako bomo dobili v tem. Za zdaj, kaj je samo prevzeti da so vaši nizi bistvu kot nizi C, da so nič indeksirajo. OK, tako da je vse. Lahko tudi samo razširi array karkoli indeks hočeš. Ker bi to verjetno SEG Napaka na vas ali vam nekaj napak, JavaScript je všeč, "nah, to je v redu. To sem dobil. Mi bomo samo pojdi naravnost kadar želite. " 

OK, tako da predmeti so zelo pomembni. Vidva se bo z veliko teh v P set, če se prav spomnim. Torej, stvar, ki se ti podobno kot v C so konstruktov. Torej si lahko mislite about-- ko gremo na primer pravica Po tem sem mislil, da bom narediti veliko več sense-- vendar smo v bistvu uporabljajo predmete na organiziranje informacij seveda povezana. Ko smo se pogovarjali o konstruktov v C, smo pogosto govori o študentu, ki je imel nekaj ime, ID, hiša, veste, koncentracija. In to je nekako isto stvar ki jih uporabljamo predmete za tukaj. To je samo, da organizirajo podobne informacije. 

Lahko tudi, da o teh bolj podobno Povezovalne matrike v PHP. Tako da bi bilo to nekako stvar kjer imamo nekaj ključ z nekaj vrednosti, Zelo podobna PHP. Tako da lahko inicializacijo nekaj prazen objekt, kot smo videli tu gor, Samo z zavitimi oklepaji. Torej nizi so oglati oklepaji. Prazne predmeti so zaviti oklepaji. Dobro razlikovanje imeti. In to so samo dve različni načinov, da nastavite lastnosti. Torej, to je nekako še več, da je podobna PHP, z našimi asociativne nize, z našim ključem, in naša vrednost, medtem ko je tale is-- jih boste videti veliko bolj v JavaScript. To kaže, da je konvencija. In na enak način, da smo naredili Niz dveh dot dolžino, to je rekel, "OK, daj mi to atribut tega objekta. " Kajne? Torej, na enak način, kot je bilo, "daj mi Dolžina atribut niz dveh " To je rekel, »daj mi nekaj last našega praznega objekta. " Ali v tem primeru smo ga dodelite do neke vrednosti tukaj. Vendar pa lahko dostopate tudi na tak način. 

In potem je tukaj, to je samo prikazuje dva različna opozorila. Torej bi to pokazal opozorila bi bila popolnoma enaka, to je le dve različne načine dostop do elementa, ki jo želimo. Ali, da je smiselno, da se vsakogar? Počutim se, kot je tale verjetno bolj smiselno, samo zato, ker smo snele PHP. Toda, kot smo storili več primerov, to je dobesedno enak. Veliko od tega je samo spremeni v skladnji. 

OK, tako primeri. Ljubim primere. Torej, tukaj je nekaj CS50 spremenljivka, ki je predmet, in hranimo vse to informacije o tem. Torej imamo seveda, inštruktor, TFS, psets in posnet. Tako smo opazili, so te skoraj vse vrste. Kajne? Tako da lahko predmete shranite lastnosti različnih vrst. Mi lahko zamislite this-- je zelo podobna naši asociativni array PHP. Torej, ključ, vrednost, ključ, vrednost, ključ, vrednost, tako naprej in tako naprej. Kaj je zanimiv tudi enako da imamo lahko nize znotraj nizi, lahko imamo tudi predmete v predmeti ali nize znotraj objektov. Ste nikoli zares omejeni na le en sam ena od stvari. Mi lahko dobite zelo Inceptionesque, samo nadaljuj zajec luknjo tam. 

Torej, če smo opazili, smo imajo neko smer, ki je niz, inštruktor, ki je niz, in matrika, int, in logični. Torej, vse te različne stvari. 

Vse je v redu, tako da imamo še enega. Torej v tem primeru smo array predmetov. Torej, tako kot predmet lahko niz v njem. Bomo lahko tudi vrsto predmetov. To je lahko koristno pomislite podobna naravi o tem, kako smo imeli hash mizo, smo imeli niz vseh teh različnih vrste konstruktov, ki so bili kazalci na drugačen vozlišča in malenkosti. Toda v tem primeru smo imajo vrsto predmetov. Torej, to je kot array od asociativne nize. Torej, imamo nekaj prvi element bi je objekt z imenom James in hišo Winthrop. 

Vi morda spomnite Nekaj ​​zelo podoben temu s svojim zadnjim pset, kjer, če vas potegnil nekaj iz vaše baze podatkov, Prva vrsta stvar v vašem paleto bilo vse informacije o Prvi uporabnik, ki ga je srečal, in potem si moral indeks v to , da bi dobili svojo živino ali predpomnilnik ali malenkosti. Torej, to je zelo podobna stvar, le malo sprememb v skladnji, malo spremembe besede, ki jih uporabljajo, da jih opišejo. 

Torej, če želimo, lahko kdo pove me kaj to alert bi naredil tukaj? Ali kaj je to malo koda bi naredil za nas? OBČINSTVO: To vam bo dal vsa imena. ALLISON BUCHHOLTZ-AU: Right, zato ji bi samo opozori z vsemi imeni ker bi bilo iti skozi Počitniška hiša i, tako da bi začeli na ničlo. Torej bi bilo reči, OK iščeva Ta prvi predmet, ki je prva reža v naši matriki. In pravi: "daj mi atribut, ime tega predmeta. " Torej, gremo tukaj, bi skeniranje, sva ugotovili, ime, in bi mi izpisal James, Molly, in Carl. Vsa vprašanja doslej? JavaScript žal si bo delaš veliko gledanja na vašem lastno, ugotoviti sintakso, spopadajo z njo. Seveda sem vedno tu, Uradne ure so vedno tu. Mogoče sem ob torkih ta teden. Torej, če si tam, si lahko obisk pride me ta teden. To bi bilo super. 

OK, tako da je DOM Document Object Model. Torej je to samo način, da mi je všeč, da razmišljajo O tem, kako naši HTML in vse okviru je organizirana. To je zelo veliko nekaj, bo verjetno prišel na kvizu. Vem, da moje leto, je bilo všeč tukaj HTML datoteka, izpolnite DOM zanjo. In si samo izpolnite malenkosti. To bi moralo biti enostavno točke upajmo. Upajmo, da boste see-- 

OBČINSTVO: [neslišno] 

ALLISON BUCHHOLTZ-AU: Torej vidite to drevo tukaj? 

OBČINSTVO: Ja. 

ALLISON BUCHHOLTZ-AU: Tako bodo vprašati uporabe zapolniti, kaj se dogaja pod telesom. Mogoče po telesu, imamo nekaj Divs ali imamo nekaj odstavkov, in vas bom prosil, da izpolnite Drevo je zelo všeč. Torej bomo hojo skozi to. Torej Document Object- Model je samo način, strukturirati in mislim, o našem HTML grafično. In tudi, ko smo dobili v več JavaScripta, to se dogaja, da se Tako, da smo pravzaprav manipulirajo različni elemente na strani. Moramo način za dostop do vsakega stvari v naši HTML, in tako to nam daje zelo beton standardiziran način na različnih spletnih straneh, da to storim. 

Torej, če smo samo sprehod skozi To tod seveda naš dokument je kot naš celoten spis. To je seveda smiselno, da je največja stvar, in potem imamo dejansko HTML, ki ustreza tej oznaki tukaj. Tudi, če ste v alinea vaše tags pravilno, potem ustvarja ta DOM drevo postane super enostavna. Torej, imamo nekaj glavo tukaj. Imamo nekaj organ, ki bomo videli izvornih off HTML, ki je, zakaj imamo glavo in telo. V glavi, imamo nekaj naslov tag, končni naslov tag, tako vemo, da prihaja po glavi. In v našem naslovu tag, imamo Pozdravljen, svet. OK? Tako da je ta celotna leva veja roko. In nato za desno vejo strani Tukaj vidimo, da imamo HTML, OK, smo naredili ta del glave, smo iskali le na telo, tako da imamo nekaj telesne površine. In v tem, da je edina stvar, ki jo imamo, je zdravo, svet. OK? Če bi imeli stvari, kot nekatere nosilec p in nato Zdravo, svet, nato pa še Nosilec p slovesa, svet, bi imeli dve mehurčki snele tukaj. Ker oni so tako v telesu, vendar oni so ločene odstavke tem primeru. Je vsekakor praksa o tem v prejšnjih kvizov, kot tudi veliko online na njej. OK, tako, to samo vam vidimo vse lepo in manipulira stvari zelo sistematično. OK? Točno vemo, kako prečkala skozi ta drevesa, tako da vemo, kaj želimo dostopati. 

OK, tako da to je razlog, zakaj želimo da imajo te vrste modela, tako da bomo lahko uporabite stvari, kot je ta, in razumemo, kaj pomenijo, in oni so standardizirani v vseh stvareh, ki jih počnemo. Torej, naslov dokumenta dot je samo Naslov our-- vse te so precej samoumevne, Rad si mislim. Torej prva tri primeri so samo rekel, "OK, daj mi Naslov te spletne strani. " Tako da vam bo dal, kar ustreza naslovu. 

Dokument dot telo se dogaja, da vam vse, kar je v teh telesnih oznak. Tako da lahko manipulira, da. In dokument dot telo dot vpišite HTML je zelo kul enega, in morda ni všeč super intuitiven, vendar notranja HTML ustreza tem tukaj. Torej, če si kdaj želeli, da manipulirati besedila na strani, običajno boš, da se delaš nekaj s telesa dot notranjo HTML. OK? Tako notranja HTML ponavadi nanašajo na kaj je pravzaprav med temi oznakami. OK? In potem uporabne funkcije. Torej, če boste želeli, da bi dobili koli od teh, vsak element, imamo nekaj Id, razred ime ali ime oznake. To je zelo podobna stvari smo naredili s CSS, kajne? Kjer imamo nekaj selektorje, ki ustreza bodisi oznako, razred da smo jih, ali Id njih. To je zelo veliko na enak način. Če imate nekaj, kar ima nekaj razred psa, in rečeš dobili elemente po imenu tag, in si dal psa v there-- ali žal, ime razreda. Lahko dajo piko tam. To se dogaja, da se vrnejo vsi tisti, Elementi za vas, da imajo ta razred. Tako da lahko manipulira le teh. Na enak način, pa si samo želijo manipulirati nekaj glavo, tako da nekateri h1 header, kot smo se mi. Lahko bi naredil dobili elemente po oznakah ime, saj h1 ime oznake. In na enak način, če želite, da bi dobili nekateri edinstvena stvar, ki jo lahko naredimo get oznako. Get element, ki ga Id. In so dejansko veliko teh. To so samo kot tri zelo veliko. Torej, če greste na spletu, kot Jaz grem za spodbujanje boste storiti, in še nekaj Raziskave na svoje, Jaz vsekakor priporočam videti v vse tiste. Lahko bi bilo super koristno, zlasti kadar želite le nekako manipulirati zelo specifične stvari, ne da bi iti skozi in poskusite izloči vse. 

OK, tako da je zadnja stvar, je JavaScript dogodkov. Torej, ko sem govoril prej o tem bo na spletni strani, in ko hover nad nečim, ali miško lebdi nad nečim, nekaj drugega se dogaja. To je tisto, kar bi radi, da misliti kot dogodek. Torej, kaj imamo, da bi koristno je tu onclick. Torej je bila moja na lebdenje, ki sem precej prepričan, da je samo na lebdenja. Tudi ton od teh da si lahko ogledate. Tam je cel seznam na spletu različnih stvari ki jih lahko poslušate za. 

Vendar JavaScript dogodki v bistvu samo odzivati ​​na stvareh da je vaš uporabnik počne. Kajne? Torej vaš uporabnik ne nekaj, da je dogodek, in JavaScript bo odzval pa ti bo všeč. To bo ustrezno odzvati. Torej v tem primeru smo nekateri okno dot onload. Torej, kaj to pove, je, "počakajte dokler se okno je naložen. " OK? Torej, ko bo vse v obremenjenem onload, potem lahko izvedete to funkcijo. Torej, ko je vse naložen, boste imeti nekaj gumb za iskanje da postane element s Id, in ga natisne karkoli, da element, kot je gumb Išči. In potem imamo to spremenljivko, smo rekli, "OK, onclick." Torej, ko smo zaslišali klik na gumb Search, izvršiti to funkcijo, ki je pozorni, boste kliknili na gumb Iskanje. 

Torej, kaj se zgodi, is-- je to lepo malo grafična predstavitev tukaj. Torej, naši obremenitve dokumentov, da je naša onload, smo našli naš Iskanje gumb, ki je ta. Iščemo za naše gumb Išči. In potem, ko je gumb za iskanje kliknil, da ustreza točno tukaj. Onclick. Potem smo končno opozori naš uporabnik, ki je ta zadnja vrstica tukaj. OK? Tako je vsak od teh štirih korakov samo ustreza štiri škatle dol na dnu. Ali, da je smiselno, da se vsakogar? 

Nato pa ena stvar, ki sem le, da bo omenjamo zelo, zelo na kratko, da sem Vam spodbujajo fantje go videti bolj v je jQuery, ki je le knjižnica ki je zgrajen na vrhu JavaScript. To je zelo koristno, saj pri večini knjižnic. Obstaja veliko funkcij. Torej, če je kdaj kaj, da želite storiti v JavaScript, vaš prvi instinkt ne bi smelo biti, da razmišljajo o, naj "kaj funkcija Jaz kodo? «Bi bilo treba, "Vidim kdo je to že naredil zame. " Ker devetkrat od desetih, nekdo bo to storil že, in so verjetno storili bolje. Ljudje preživijo veliko časa delaš ti, in JavaScript se zelo pogosto uporablja, tako da ljudje so nenehno trudijo, da bi bilo bolje. In jQuery ima veliko funkcij da bo verjetno koristno za vas v svojem zadnjem projektu, če ste delaš karkoli z web design. Kot sem želel povedati, "delo pametneje, ne težje. " Če vi storili, bo to super. Ko smo na hackathon jaz ne želim si, da bi vsi pod stresom. Želim si, da bi podobno, "sem to. jQuery je dobil moj hrbet. Ne rabim pisati te funkcije. " 

Torej samo dve stvari do zapomni si, jaz grem pustiti vi videti bolj v jQuery na svoje. Vse bom rekel, je to, počne nekaj precej super stvari in lahko svoje življenje celota veliko lažje. Toda, kaj želite imeti, je ne glede datoteka da boš se ga uporablja v, boste želeli teh dveh linij. Boste želeli Scenarij JS jQuery dot js. In dejansko je vaš vir se bo nekaj URL. Če se vprašaš jQuery, Google dejansko gosti vse datoteke za vas. Tako da boste zagotovo želeli vhod, ki URL namesto. Pravkar sem dal to sem zavoljo enostavnosti je. Vse to pomeni, da je, če bi našli svojo knjižnico jQuery. To je ogromen, zato nočete da ga gosti na svojem računalniku če lahko to prepreči, kar je razlog, zakaj smo ponavadi samo dal v Googlov URL, ki gosti vse te datoteke za vas. OK? Lahko ga vprašaš, obljubim da bo tam. 

In potem karkoli JavaScript datoteka, ki ste uporabo, tako da to je samo nekaj zunanjega JavaScript datoteka, ki ga uporabljate. Na enak način, da povezujejo naš CSS datotek, to je ista reč. To samo povezave do datoteke kjer je vaš JavaScript je. In imam nekaj primerov z enostavnim JavaScript. Torej bomo šli skozi to. In potem v vašem indeks JavaScript, kateri je vaš JavaScript datoteke tukaj, to je vrsta ovoja da imate za jQuery. Skoraj ste že 99,9 odstotkov časa bo da ima ta v vašem index.js datoteki. Ker kaj je to pravi se, "Ne izvrši ničesar dokler dokument je pravzaprav pripravljena ", ki je točno tisto, kar želite. Ker če vaš dokument še ni pripravljen, in jQuery začne delati stvari, to je samo nered. Tako da boste vedno želeli imeti to ovoja. In potem se za stvari, ki gredo tja, sem prepušča lastno perusing vaših fantje. 

OK, tako da so se vsa vprašanja pravica Zdaj približno JavaScript na splošno? Ali model DOM? Če ne, imamo nekaj kul primeri, da lahko gremo skozi, da lahko vi pomoč mi kodo. Ampak jaz sem tudi dogaja, da se super lepo, in če vas Ne želim reči ničesar za to, da je v redu. Lahko pa vam daj primere. Ampak, kaj na PowerPoint, preden gremo naprej? Cool. 

Počutim se, kot vi potrebujete energijo. Tako da mislim, da bomo začeli z mojo primer stranke prvi. Imamo tri primere, imaš izbiro. Torej imamo uro, kam gremo izvajati dejansko uro, ki je bo posodobitev, kot čas goes z. Imamo to veliko funkcijo Twitter. This-- veš kaj, počakaj. Bomo, da bo to izginilo. Bam. OK. 

Imamo to veliko funkcijo Twitter tukaj, that-- vem, kajne? To se dogaja, da je super. Ali vi navdušeni? To se dogaja, da preštejemo znakov, ki ste jih zapustili, tako da, če sem tip prav zdaj, Očitno je še vedno pravi, 140, vendar vemo, da to ni res. In potem z našim zadnjim Tukaj kliknite tukaj za zabavo. Kaj se bo zgodilo, ko kliknemo, ozadje je gre za spremembo barve. Torej vidva imela svoje možnosti za ki jo želite storiti najprej. Obljubim, da bom zelo enostaven za vas. Počutim se, kot vsi nekako s samo zelo nizko ključni danes. Tako vam bom sprehod skozi kako bomo izvajati vse te. Če želite gonge s tem, da je super, ampak jaz Počutim se, kot vsakdo je malo utrujen. Tako da bom samo sprehod preko teh primerov. Ali imamo nekaj, smo želeli storiti najprej? Kdorkoli? Ni izbrano? OK. Veš kaj? Mi smo na zabavi. Počutim se, kot vi potrebujete little-- tako da bomo narediti eno stranko najprej. OK. 

Torej, kaj smo here-- imeli, da je Ne bi smel biti tam. Zdaj je dober. OK. Torej, kaj imamo tukaj je samo preprosto HTML stran da bi morali vsi fantje super pozna iz vaših zadnjih dveh psets. imamo vrsto dok tukaj. Lahko vsi videli? OK. Cool. Imamo HTML očitno. Imamo nekaj glavo, ki je vezan na slog stanja, ki pravkar moja pisava lepo in veliko in drzno. Torej, ne skrbi. 

Imamo nekaj telo z Id ozadje, OK? Ker bomo, da bo spreminjanje ozadja. Torej, ko smo spreminjanje ozadje našega telesa, se spomnimo iz pred dvema tednoma ko imamo opravka s spletnih strani. Tako dobro, da ima to. In imamo nekaj Id stranko enaka. Ta h sodnik funt samo pomeni, da to se dogaja, da gredo na isti strani. In kliknite tukaj, da stranka, zato je, ko smo ga kliknite, mora spremeniti barve, na srečo. 

In potem imamo nekaj skript, ki tukaj je le povezano s tem js dot strank datoteka, ki je prazna, ker še nismo naredili ničesar. In to je tako žalostno. A zelo kmalu, bo spremenila barve in bo super. 

Tako da sem šele tekoč, da vam hodi fantje s tem, kako lahko ta pristop. Torej prva stvar, ki bomo morda želeli storiti, če smo spremenili ozadje telo, prva stvar, ki jo morda želeli storiti, je dejansko zgrabi kaj je telo, kajne? Zato želimo imeti vsoto, naša ozadje, in če opazite, Pravkar sem avtomatično šele začnite tipkati. Ni nič posebnega, da smo morate storiti za naše JavaScript datotek. Lahko začnem razglasitvi spremenljivk, in razglasitev naključne funkcije. In to je veliko bolj proste oblike. To je tako kot s C, smo dali ste vse ti trde pravila in ste odraščali, tako da smo kot "iti naprej. Bodite brezplačno. To, kar hočeš. " In to je tisto, kar je JavaScript. Torej, imamo nekaj ozadja tukaj. Z našega modela DOM, mi vemo, lahko storite dokument dot dobili element, in če opazimo tu, Naše telo ima Id. Kajne? Tako da bomo lahko dobili dokument, ki ga Id, in tukaj je preprost. Kaj je naša Id da hočemo tu? OBČINSTVO: Ozadje. ALLISON BUCHHOLTZ-AU: Ozadje. Popolna. In podpičjem na koncu. Ki še ni izginila. Morate še vedno svoje podpičji. OK. Torej, to je naša prva. In ko smo kliknite nekaj, smo želijo nekaj, da se zgodi, kajne? Tako bomo morda želeli nekaj spremenljivka ki je čakala na klik. Kaj bomo storiti, je, da bomo bo naša povezava bolj podoben gumb. Torej bomo imeli nekaj gumb, enaka dokumentirati dot dobili element, ki ga Id. In če govorim o kliknite na povezavo ali kliknite tukaj za zabavo povezava, kaj bi moj Id tukaj? Party. Pravilna. OK, ne preveč slabo doslej. Vsi dobili tisto, kar počnemo? 

OK, tako da zdaj imamo gumb, in želimo, Stvari se spremenijo, ko smo kliknite nanj. Torej, če se spomnimo iz naše PowerPoint, zelo preprosta stvar, ki jo lahko naredite je samo gumb dot onclick, kajne? In to se dogaja, da enaka nekatere funkcije. To je anonimna funkcija. In to samo as-- pravzaprav sem dogaja, da je to malo večji. 

Torej, kaj sem naredil Tukaj je Pravim, OK, ko smo kliknite našo gumb, ki je ta povezava, ki smo ga pravkar navedeno, se bomo, da izvrši ta anonimni funkcija. Mi ne potrebujemo nobenih vhodov. Mi ne zanima, kaj si povedal. Ko kliknejo na to, da smo dogaja, da stori vse, kar smo želeli, ki je spremeniti barvo ozadja. OK? Torej, to je, zakaj nimamo nobenih vhodov, imamo samo to anonimno funkcijo. In zdaj smo dejansko dogaja napisati to funkcijo. 

Torej, obstaja kup načinov, kako lahko ustvari naključno barvo. Tako, da sem naredil je bilo, da ustvarijo tri naključnih številk in jih pretvorite v RGB triple. Torej, vam je to samo kaže, nekaj kul stvari, če ste všeč, "oh, Moram ustvariti naključno število. ", če ga na Googlu, To je tisto, kar boste našli. 

Torej imamo tri različne stvari, var, ne že spet rdeča, zelena. Kajne? Torej, to so trije Stvari, ki sestavljajo barve. Modra, rdeča in zelena. Cool. In kaj lahko storimo, je, da vemo, da mora biti med 255, in če si pogledal nekaj Generator naključnih števil, da bi dobili nekaj podobnega matematiki dot random, ki, če je to pogledaš gor vrne določeno število med nič in ena. OK? In kaj številke naredimo RGB trojk iti med? Zero in kaj? Kaj lahko gredo do? 255. Torej, če math dot naključno gre med nič in ena, kako bi se želimo spremeniti to? OBČINSTVO: čas? ALLISON BUCHHOLTZ-AU: Ja, točno. Torej čas je 255. 

OBČINSTVO: [neslišno] To je kot [neslišno]. ALLISON BUCHHOLTZ-AU: Math dot naključno. OBČINSTVO: Cool. ALLISON BUCHHOLTZ-AU: Da. JavaScript samo skrbi za vas. OK. Tako da lahko naredimo, da je za vse to. Kajne? Math dot naključno krat 255. Sprejeto. Cool. Torej, stvar je lahko to ne vrne celo število. Kajne? Morda bomo dobili nekaj več med nič in ena, in povzroči, da se nekoliko off, in naši RGBs ne more biti plava. Morajo biti Ints. Torej, če ste poskusili to, bi verjetno imajo neko nepredvidljivo vedenje. To bi bilo malo funky. Torej, kaj mi je, da smo želeli, da bi Prepričajte se, da so te zaokrožene, in lahko zaokroži v katero koli smer. Sem zaokrožen s tlemi. Tako sem vedno poskrbel, da se zaokroži navzdol. Ampak gredo dol, kako preprosto je je bil le dobili naključno število, kako misliš, da bi Morda nadstropje to številko? To je zelo podoben. Kakšna ideja? Torej, če je bila le naključno math dot naključno, da misliš, da bi naredil tla? Math dot tla. In lahko storite tudi matematiko dot strop. Krog je nekako dvoumen ker si ne vem, ali naj se zaokroži navzgor ali navzdol zaokroži. Torej ponavadi smo vedno math dot nadstropje, math dot strop. Vendar honestly-- 

OBČINSTVO: Ali krog talnega dol? 

ALLISON BUCHHOLTZ-AU: Floor zaokroži navzdol. In to je samo izbira na moji strani. 

Torej, zdaj imamo tri številke ki so bile naključno, in kaj bomo storili zdaj, je, da smo šele tekoč, da spremenite ozadje. OK? Tako smo že imamo ozadje nekako shranjena V tem elementu imenovano ozadje. Torej, kaj boste opazili, je, če je ste igral okoli s tem, želimo spremeniti slog. In to je nekako nekaj, bi Google in ugotovimo, všeč, kako spremeniti barvo. 

Ampak način lahko dostopate ta barva Ozadje dot dot slog ozadje. Torej, to je rekel dana objekt, ozadje, ki se nanaša na to element Id tam, gremo pogledati stil v stilu, gremo pogledati v ozadje. OK? In če greš in si to gor, to bi lahko dal malo več smisla, ampak to je v bistvu samo rekel, "Daj mi to zelo posebno lastnost kaj sem definirana prej. " Torej, kaj smo ga spreminja, da je nekateri RGB, saj je smiselno. Mi smo s pomočjo RGB potroji, kajne? In smo have-- želim, da bi zagotovil, da sem dobili pravo število citatov tukaj. Torej, kaj mi je, da smo imeli RGB, in gremo to-- je to všeč Združitev, ki je rdeče barve. In potem smo želeli nekaj vejico. In potem smo se želeli plus zelena, potem nekaj vejica, in nekaj modrega. 

Torej ti pluse samo pomeni kot spoj. Torej, to je samo ustvarja ta Niz, ki se dogaja v RGB. OK? 

OBČINSTVO: [neslišno] plus potem zeleni plus potem rdeče. 

ALLISON BUCHHOLTZ-AU: Ja, ker sem zamočil, da je gor. V redu, da je eden je. Oh, počakaj. No. Ker moram prepričati da imam vse te pravice. Torej bom razložil v uno Momento. Zelena, modra, odlično. Zdaj sem naredil. Verjamem. 

OK. Torej, kaj je to, je, da je v ozadju se dogaja, da se določi, da neki niz. Kajne? Ki je to, kar imamo tukaj. To se dogaja, da nekateri RGB 255 vejica 255 vejica nič, ali karkoli vam številka imajo tam. Torej delamo tukaj, imamo nekaj niz. In tisto, kar smo želeli storiti, je, da smo vrsta dinamično ustvarjanje da, ko smo dejansko vodijo ta program. Torej je to nekaj niz. Plus to use z vrednost, ki ima rdeče, ki ga use z vejica, ki jo use s tem, kar je zeleno, in tako naprej in tako naprej. OK? Do konca, ki je zapiranje oklepaje tega RGB tukaj. OK? 

Torej, kaj se to dogaja, da ustvarila je nekaj ukaz res da je RGB treh številk da je v ozadju je zdaj nastavljen na. OK? Torej, da vidimo, če to deluje. Upam, da ne, ker če ji ne, bom biti resnično žalostno. Oh, ne. OK, počakaj. Definitivno ozadje dot dot slog ozadja. Jaz sem definitivno manjka nekaj samo majhen. Ne vidva sovražim to? Ko je samo majhen malo napako? Vsemogočni ozadje. RGB. 

OBČINSTVO: [neslišno] ALLISON BUCHHOLTZ-AU: No. Poskušal sem te pred razredom. Imam vse, kar sem storil, preden razred v primeru, da sem podobno, "Čakaj, kaj sem naredil narobe?" Ker sem bil kot, "bom verjetno nered to gor na neki točki. " Plus zelena. Vse izgleda, kot da je pravilno združena z verigo. OK. 

OBČINSTVO: [neslišno] 

ALLISON BUCHHOLTZ-AU: Oh, tam greš. To je tisto, kar sem potreboval. Poglej. Tiffany rešiti. Popolna. OK. Zdaj pa poglejmo, če deluje. Oh moj bog. OK. Počakaj. 

OBČINSTVO: Space po drugi plus. 

ALLISON BUCHHOLTZ-AU: Katerega? Oh, počakajte, počakaj. Prostor obrabe? 

OBČINSTVO: Drugi plus v zelena podaljšek. ALLISON BUCHHOLTZ-AU: Oh. OBČINSTVO: Ni prostora po plus, ja. ALLISON BUCHHOLTZ-AU: You ne potrebujem, ampak-- OBČINSTVO: Oh, vi pa ne? ALLISON BUCHHOLTZ-AU: To izgleda precej. OBČINSTVO: OK. OK. 

ALLISON BUCHHOLTZ AU: Poglejmo, če to deluje. OK. Jaz seveda ne na to demo, ki me spominja na predavanja drugi teden, ampak vem, da bo to delovalo. Vem, da bo to delovalo. Tako blizu. Razen če sem zbrisal moj scenarij o tem. Ne, to je pika družabne js. OK, počakaj. Grem kopirati to, in sem tudi le, da bo izbrisati vse, ker sem imel to delovno prej. 

Obljubim, da deluje. Če ne, vam bom pokazal, kaj je Tommy je. In tam. 

OBČINSTVO: Ti si na to zabavo dot CSS, in to je stranka dot js. 

ALLISON BUCHHOLTZ-AU: Ah, dobro Tukaj je js dot oseb. OK, kaj sem naredil drugače? OK, bomo videli, če to deluje zdaj. Bam. Torej, ne vem, kaj sem storil drugače, ampak to je tisto, kar bi se moralo zgoditi. Nekako kul. Sem kliknil na to, kot, vedno. Vendar pa lahko poskusite in videli, kaj sem storil, drugače, da je to ena. Ne vem o vas, ampak to izgleda v bistvu tisto, kar sem napisal. Tam je bil verjetno manjkajoči podpičje nekje je moja stvar. Pravzaprav, ko mislim, da sem bil odsoten podpičje tukaj pravzaprav. Vendar nisem mogel videti, ker je bilo z zaslona. 

Ampak, če smo opazili, da je to precej precej točno to, kar sem napisal. Mislim, da je verjetno najtežji del o to je le nekako to stvar prav tukaj, razumevanje kaj pa počne tam. Te vrste stvari, ki jih učijo res samo Googling in pošteno samo poskušam. Če misliš, da obstaja nekaj atribut, pa verjetno je. Tako da ga preizkusite. Poglejte, kaj se dogaja. Kot sem rekel, tam je veliko eksperimentiranje z JavaScript, in PHP, in vse, stvari, in CSS posebej. To je edina prava način, da ga razumejo. 

OK, tako da po tem polomu s stranko dot js, imamo dve drugi možnosti. Imamo uro ali Twitter. Oni so tako zanimivo. Mogoče ni tako zabavno kot stranka, ki je imela kul malo Utripanje stvar na koncu. Ali vidva imela prednost? OBČINSTVO: Ura? ALLISON BUCHHOLTZ-AU: Ura? OK. Cool. 

Torej še enkrat, imamo prazno datoteko JavaScript. In kot smo videli tu, imajo nekaj zelo preprostih HTML. Imamo slogi, ki so pravkar formate, kaj naj bi izgledal. Imamo div z Id za uro, ki Samo pravi, "to bi morala biti ura." In imamo povezavo za naše datoteke JavaScript da se dejansko dogaja, da ustvarjajo našo uro za nami. Ker je kul stvar je, da lahko nastavite JavaScript samodejno osvežitev sama. OK? Torej, namesto čakanja Uporabnik udaril Refresh na strani tako da lahko dobite posodablja čas, JavaScript lahko posodobite pa je všeč. 

Tako, kot pri našem zadnjem enega, smo želeli dostop do naše ozadje, kajne? Torej, kaj misliš, da bi bilo Prva stvar, ki smo želeli narediti tukaj? Če smo nekako gredo off to neke paradigme tukaj? Verjetno želimo dostop do naše uro, kajne? Torej, imamo nekaj var ura, ki equals-- Kaj menimo, da se dogaja, da je? Dokument dot dobili element by-- I tudi ljubezen Sublime-- Id in naša Id je ura. Podpičje. Dobil se prepričajte, da bi dobili ti podpičja ta čas, ker se počutim, kot da problem je bil zadnji čas. OK, tako, kot sem pravkar rekel, ko poskušate imeti JavaScript sama osveževanja tam je to super funkcija, I Vem, da je prišel v priročni zadnjem letu, Nisem prepričan, da gre prav za to pset, vendar je pozval set interval. In to je dejansko res kul, če vidva storiti ničesar s časom ali pridobivanje posodobljene informacije. Na spletni strani za končno projekt, to je verjetno Funkcija želite dobili super poznajo. Torej, kaj nastaviti interval pa je, da bomo izročiti to funkcijo, in kako pogosto naj pokličite to funkcijo. OK? 

Torej, v tem primeru smo le, da bo znova ustvariti neko anonimno funkcijo, OK, to se dogaja, da bi dobili naš datum, in naš čas, in nato posodobite stvari in ga prikažete. Torej bomo skrbeti. Bomo kot ustvarjanje ura tukaj. Ampak tisto, kar potrebujemo, je, kako Pogosto jo osveži. Torej, v tem primeru, to je samo nekaj milisekundah. Tako da smo le, da bo narediti 100 milisekund. Seveda, popolnoma poljubna. Če boste želeli, da posodobite precej bolj počasi, bi lahko. Mi lahko igral pri določenem intervalu, kako velik je naš interval je potem, ko smo dobili delovna ura, ki upam, da bom priti. Torej, to je samo rekel, "OK, call ta funkcija vsakih 100 milisekund. " OK? To je vse, kar počne. 

Torej, kaj želimo našo funkcijo storiti je, da želimo imeti nekaj datum in nekaj časa je kaj bomo imeli. Torej, lahko začnemo z našim Datum enaka nekaj, in naš čas je enako nekaj da ne vemo še. Ali dejansko, moramo samo datum, ker Datum se dogaja, da vključuje vse. Spet če si Google kaj o kaj želite storiti, če ste napisali, "OK, Želim, da bi dobili čas prek JavaScript, "to vam bo to veliko Funkcija se imenuje datum get. Dobesedno, je večina stvari ki jo želite storiti, JavaScript se dogaja, da imajo to naredil za vas že. Torej, to je dobesedno kot nov dobili datum, ki je creating-- ali nov datum, rather-- ki ustvarja nekateri predmet, ki predstavlja datum. 

In kaj bomo storili, tukaj je To is-- bom to napisati, in potem razloži, kaj počne. Tako da bom zagotovil, da sem dobil to pravico. 

OK, pa kaj ta funkcija počne, je, da smo pravkar ustvarjanje HTML, ki je dejansko bo šel v naši div id uro. Torej, kaj se to dogaja, da se delaš se samo ustvarjajo nekaj niz, v redu? To pa bo presaditi v našo HTML. V bistvu, kaj se dogaja, da storiti, je karkoli we-- kaj sem vam bo pokazal, je, da karkoli rečemo HTML je bomo namesto tega besedila tukaj z karkoli HTML je. Torej, to se dogaja, da se omogoči nas, da spremenimo naše ure dot HTML od tega, da samo besedilo tega mora biti na uro, dejansko prikazuje številke in stvari, ki jih skrbi O, in dejansko ura. 

Torej, kaj bomo storili, je, da smo dogaja, da začnete ustvarjati to HTML. Torej, na enak način, kot smo ga uporabili narediti plus enako cela števila, zdaj lahko storite, da se za godala razen da se bo njihovo združevanje. Kajne? Kot smo videli pri dot družabne js, to samo use vse te stvari skupaj. Torej si lahko sestavite različne bitov HTML od spremenljivk, ali bitov godala da napišete ven sami, in to samo Res vam omogoča dinamično ustvari HTML, kar je precej kul. Torej, če imate kaj zelo uporabniku specifična, To vam omogoča, da to storim. 

Torej imamo HTML, da se bom Poskusite in se prepričajte, sem dobil to pravico. Torej bomo narediti nekaj h1 glavo. Torej, kaj je pomembno, da se zavedaš, tu je, da je to pravzaprav samo HTML. Kajne? Pišemo dejansko HTML koda tukaj, to je ne samo niz v normalno način, da bi morali razmišljati o tem. Torej, imamo nekaj HTML. To velja za niz, čeprav. In mi datum dot-- mi želijo, da bi dobili naše ure. Še enkrat, če ste bili videti up karkoli o datumu, da bi vam povedal vse to so atributi, ki ima datum. In tukaj je tisto, kar lahko uporabite na njej. Tako da ima verjetno stvari, kot dobili ure, in dobili minut, in dobili sekund in dobili milisekund, in kdo ve kaj še imajo. Ampak, če pogledaš na dokumentacijo, bo to vse tam. 

Torej moramo priti ur, nato pa bi želeli za združevanje da with-- sem dogaja, da se premaknete to tukaj. Torej, če smo generiranje zdaj, smo dejansko ustvarjajo čas, kajne? Imamo čas, nato pa kaj med urah in minutah? Imate podpičje, kajne? Tako smo želeli narediti nekaj podpičjem tukaj. Nato pa želimo, da se naša minut, tako da na enak način, da imamo datum pika dobiti ur, kako bi lahko dobili naši minut? To je dobesedno Datum dot dobili minut, kar sem nekako všeč. To je kot, "oh, kako dobim minut? " Pravkar sem dobil moje minut. 

OK. In potem imamo še eno debelo črevo tukaj. In potem, če želimo, da se naše sekunde, kako bi lahko dobili našo sekundo? Datum dot dobili sekund. Mislim, da je precej kul. In tisto, kar je pomembno za zavedati, je, da smo tudi morali zapreti naš HTML tag, kajti da mora biti še vedno veljaven HTML, tako h1. Cool. 

Torej, po tem, kar lahko storimo uro dot notranja HTML je enaka HTML. OK? Torej, ne pozabite, kaj sem rekel Notranja HTML osnovi ima vse, kar je med dve oznake, da smo se pogovarjali o in vložki ali obdela vse, kar je tam notri? Torej, kaj to počne, če gremo nazaj na našo uro, je, da ura nanaša vse, kar je v tem div. To je notranja HTML te Id uro div. In tako se dogaja, da ga spremeni v HTML, ki smo ga pravkar ustvarili, ki, ki, upajmo, upajmo, upajmo, bo pokazal čas, prav zdaj. Bomo videli. Seveda. Toliko tehnična vprašanja. Allison je just-- sem off mojih iger danes fantje. OK, to deluje. Ura dot notranjo HTML. Bilo je HTML Really? Prav to je tisto, kar se zgodi. Ko ne vidite kaj vam, samo pogled na vaše izvorne kode. OK. Ali hočeš vedeti kul delo okoli da bomo storili tukaj? 

OBČINSTVO: Lahko narediš velike črke? Velike tiskane črke? Ker imate dobili ure, nato pa dobil minut. 

ALLISON BUCHHOLTZ-AU: It je dobil ure in get-- oh. Vi are-- zlato zvezdo. Vse to je test, fantje. Obljubim, da je delal pred razredom. 

OK, ampak nekaj, kar kul, da vem, je da lahko also-- če včasih vaše zunanje datoteke dobili malo nor, lahko tudi samo jih dal naravnost tu, ki se nagiba k popraviti stvari. Razen to, kot res grdo. Seveda formatirati vse. Prepričajte se, da je vse lepo. OK. 

Želel sem narediti vse kul demos se, in oni so samo ne delajo. OK. Script var ura. Kakorkoli, kar je pomembno, je da je to splošen način da bi si oblikujete JavaScript. Kot lahko vidite, je to lahko zelo finicky včasih, tudi takrat, ko je bilo dobesedno delajo pred dve sekundi. Ali dve drugi nazaj, ampak zelo, zelo pred kratkim. 

Torej, da vam pokažem, kaj naj bi izgledal, in da ti pokažem, da nisem nor, in da je vse, kar je točno isto, to je tisto, kar naj bi izgledal. Ste pravkar storili to zgornji del tukaj, in če ste Ogled vira, Če opazite, da je naredil nekaj noro stvari, sem ga poenostaviti. Tudi kredit Tommyjem MCWILLIAM, ki dejansko mi je pomagal ustvariti te primere, zato vem, da deluje. Ker Tommy je mojster JavaScript. Ampak, če smo opazili, imamo nekaj niz. Imamo ura funkcijo tukaj. To je vse, da je JavaScript smo samo napisal, ali pa nekaj od tega. Pravkar smo zapisali tole tukaj. In ima ekstra Funkcija, ki jo je pravkar blazinice s tem da nič pred pismo ali pred številko, če je to Samo eden od njih. Torej, če ste opazili, da je to precej precej točno to, kar smo pravkar napisal. Imate kakšno uro, da se variabilni je naš element, dobil element po ID, ki je ura. Mi imamo nastavljeno interval Funkcija, ki je anonimni funkcija da izvede vse to. Imamo nekaj začenja niz HTML, ki jih nato dinamično ustvarjajo ga imajo nekateri h1 header, združite z dobiti ure, plus naša kolona, ​​plus pridobivanje zapisniki, plus ena debelega črevesa, plus naših sekund, in na koncu konča HTML za to. In potem bomo posodobiti naše uro dot notranjo HTML HTML, in bomo posodobiti vsakih 100 milisekund. OK? 

Oglejte si obljubim, da nisem nor. Jaz ne vem. Ne vem, zakaj me ne želi. Počutim se, kot je videti enako, ampak očitno me sovraži. 

Torej, da vidimo, če je krog treh gre bolje. Bomo kmalu videli. Nisem prepričan, kako se to dogaja, da gredo. Je vsakdo vsaj pridobivanje slabosti, kot so le splošne teme JavaScript, čeprav? Upam, da je vsaj uporabna, bolj kot kaže, da je malo finicky. Vendar bo vaš problem niz zelo zabavno. To se dogaja, da je super. To ne bo čisto tako dolgočasno kot je ta, ne mislim. Boste dejansko dobili za videti res kul stvari. 

Torej, ne nazadnje, bomo poskušali na Twitter enega. Res sem prestrašen zdaj, fantje. Ne vem, kako se to dogaja, da gredo. Ampak samo, da vam malo bolj okus, in to je dejansko manipuliranjem strune in vhodi, kaj bomo storili je, če opazimo tu z HTML-- tale je malo more-- imamo nekaj besedilno območje, ki ustreza tem besedilnem polju tukaj. OK? In da ima Id besedila. Oblikovan na osnovi smo ga malo z nekaj širino in višino da smo vnaprej določena, in smo H1 ki pravkar je naša glava tista, ki predstavlja naše znakov. Dali smo mu nekaj ID Preostali znaki, in potem imamo nekaj skript tu, kar sem res v upanju, tretji čas je čar tukaj, fantje. 

Torej, kaj želimo narediti, v isti splošni vene da smo naredili z js ura dot in družabne dot js kot smo opazili, je smo ga dejansko začel vzbujajoči stvari, ki nam je mar, kajne? Torej, v tem primeru obstajata dve stvari, ki nam je mar, OK? Ena stvar, da smo pravzaprav nekako preučuje in risanje podatke, in ena stvar, ki smo dejansko spreminja. Torej je naša HTML. Če je to naša spletna stran tukaj, kaj je Podatki, ki jih gledaš? To se dogaja, da se karkoli besedilo v naših poljih, kajne? Torej, karkoli sem tipa tukaj. To je tisto, kar želim vedeti, ali da je tisto, kar želim pogledati. In kaj se dogaja, da se spreminjajo na naši spletni strani? Preostali liki. Torej, na enak način, želimo začnete z inicializacijo spremenljivk da se dejansko držite teh elementov. OK? Torej, če imamo nekaj var da je naša besedila območje, in imamo nekaj var, ki je ostala. Kajne? Torej se ti dogaja, da držite teh dveh stvari. Torej ista reč, Dokument dot-- OK, sem dogaja, da se prepričajte, da je to bo šlo tokrat. Zelo sem ostal neomajen. OK, tako da, če želimo, da naši Besedilo območje, po za naše HTML, kaj je naša identifikator? Kakšna je naša Id? To je le, da bo treba besedilo, ker to ustvarja našo besedilno območje, OK, in naša Id je besedilo, tako da je kako lahko zgrabi, kaj je notri. OK, podpičje. Jaz grem, da bo super natančno o tem, ker želim to delati ta čas. OK, to isto stvar, dobili element, ki ga Id. Res sem se spraševala, kaj je povzročila druga dva Raščerupati. OK, nato pa v tem enem, kaj želimo dostopati? Kaj je naša Id tukaj? Imamo še eno ime, ki v naša HTML, kaj je to? OBČINSTVO: Znaki preostalih. ALLISON BUCHHOLTZ-AU: Znaki preostalih. 

OK. Cool. Tako da sem le, da bo napisati to res hitro. Jaz sem le, da bo to pisanje na sekundo. Tako besedilo območje. Kaj je zanimivo je, B function-- tam veliko funkcij, ki ne samo, ustrezajo vašim miška, ampak tipkovnica. OK? Torej lahko rečemo, če je katero koli tipko pritisnjen, lahko to storite take stvari. Torej tistega, ki ga uporabljamo se imenuje na tipko gor, ki pravi, "če ste pritisnili nobene tipke na tipkovnica, ko je uporabnik dvigne njihov prst off ta gumb, in je ključ postala nestisnjena potem bomo nekaj storiti. " OK? Torej, to smiselno, kajne? Ker vsak znak vpišemo, bomo bi morali dvigniti svoje prste iz njega, tako da, ko ključ dvigne, lahko vemo, da pojemanje Preostali naši liki. 

Torej, imamo nekaj na ključ navzgor, in na enak način, bomo rekli, "OK, ko bomo to storili, bomo se dogaja, da ustvarite nekaj funkcijo, se dogaja, da e ", v tem primeru, in kaj želimo storiti, je izračunati preostalo številko. OK, tako da je šele začetek z ustvarjanjem spremenljivko. Torej, imamo nekaj spremenljivo r, da se dogaja, da predstavljajo koliko znakov smo zapustili. OK? Vemo, da smo začeli z 140, in če želimo vedeti, recimo, koliko je to niz, ki je bil vhod, Ali imate vi kakšno idejo kako lahko to storimo? Samo temelji off z očitno stvari, kot če bi želeli ur, smo uporabili dobili ur. Vemo, da je naš cilj Besedilo področju, vendar bi si fantje razmišljati o tem, kaj bi lahko prišel po njo? Vse ideje? 

Tako da to je nekako manj intuitivno, vendar je dolžina dot vrednost. Torej mi daj nekaj vrednost atributa, ki Pravzaprav je dolžina tega niza. Tako se dogaja, da reči, "OK, iščem Na tej celotni niz v besedilnem polju, in bom povedal, ste, kako dolgo je to. " Ker če se spomnimo, strune so res le nizi, tako da bomo lahko vzemite dolžino njih. Torej imamo to. Cool. 

Potem, kaj želimo storiti je, da smo ne želijo, da se omogoči uporabniku za vnos več 140 znakov, kajne? Ker če rečemo, kot so, "oh, ti Samo še toliko preostalih " in nato pustite, da to, da Kakorkoli, smo se laže. In to je še stvar, ki JavaScript more biti res dober za, je validacija uporabnik in se prepričajte, da vaš Uporabnik prilega v vseh pravil, ki ste jih navedli za njih. Torej, če želite narediti stvari, kot bi Prepričajte vhod nekdo njihov e-poštni naslov, ali pazite, da ko se vnesite obe gesli, se ujema. JavaScript lahko to storite. Vi bi naredil nekaj podobnega, "ko Obrazec je predložil, "ali podobno, "Ko Submit gumb Oblika je kliknil, preverite vse te stvari. " In to lahko storimo JavaScript. Torej, to je samo tisto, bomo tukaj. 

Torej, kaj je lahko način, da preverite, če so šli čez 140 znakov? Kaj se bo zgodilo, da naša vrednost r če bodo poskušali? To se dogaja, da je negativen, kajne? Ali pa se dogaja, da je manj kot ali enaka nič. Tako bomo lahko uporabili, če je to tako kot vse ostalo. OK? In imamo nekaj besedila površino pika vrednost, in kaj delamo tukaj je, da smo si samo cutting-- kaj je to? Žal mi je. Tale, želimo le, da se vrnete false. Sem zmeden. Vse oguljen od stvari, ki ne deluje. OK, želimo le, da vrne false, nato pa smo želite prikazati Preostali znakov, kajne? Torej, z uro, smo naredili nekaj z notranjim HTML, kajne? Kjer smo si zadali, da enako nekaj spremenljivka, kaj lahko počnemo tukaj? Kaj smo se spreminja notranjo HTML? 

OBČINSTVO: Preostala? 

ALLISON BUCHHOLTZ-AU: Spreminjamo preostalo. Vse je v redu, in kaj počnemo želite nastaviti enako? To se dogaja, da se r, ker je mora biti preostali naši znakov. OK? Tako da sem zelo živčna, da vidim, če to deluje sedaj, ampak bomo videli. Pustite to. To je res hitro. [Neslišno] OK. Spet sem šele tekoč, da ti pokažem. Ne glede na razlog, Rudnik odloči, da ne delajo, kaj pa ti bom pokazal je, da je to is-- oh sem moral dati, da je v. OK, smo opazili enako vrsto stvar tukaj, dobili besedilno polje. 

Tudi, če opazite fant, če obstaja kdaj kaj hočeš narediti, in ne veste, kako to storiti je, samo kliknite Ogled vira, in oni 'tekoč, da ti povem. Včasih se bo šifrirana. Za vašo pset smo šifriranje vse, tako da samo izgleda žlobudranje. Ampak, če je kdaj res kul spletna stran, ki vam je všeč, če si samo kliknite Ogled vira, to se dogaja, da vam povem, kako to storiti. Torej še enkrat, delajo pametneje, ne težje. In kot vidite tu, vsi te stvari so enake. tale tukaj samo traja nekaj podniz da sem pozabil, kaj to počne. Ampak to seveda traja nekaj podniz vrednosti od nič do deset, in vrne false, kar se mora ustaviti Uporabnik od vnesla več, in potem seveda posodobitve notranji HTML tam. 

Cool. Tako velike odvzeme Prospekti od danes, eksperiment, poglej izvorno kodo zato, ker se dogaja, da vam pomaga veliko, in vsakdo, včasih JavaScript lahko težko delo in ne vedno deluje tako, kot bi ga pričakovali, da, ampak samo vztrajati težaven ker Obljubim, da bo. Obljubim, da se vsi ti primeri so delali pred razredom. Ne razumem, kaj se je zgodilo. Dobesedno sem imela vse enako. 

Še ena stvar, ki jo želim vam pokažem fantje, ki so lahko zelo koristne je in-- kaj je delal prej? Imamo stranko do dela, ni mi? Mislim, da. Da. Smo naredili. Super. OK, ena stvar, ki fantje bi morali vedeti je log konzolo, ki sem govoril. Torej konzolo dot dnevnik pozdrav. Tako da je ta vrsta JavaScript ekvivalent printf. Torej, če si kdaj želeli, da pregledajo svoje spremenljivke ali pa videli, kaj se tam dogaja, kaj lahko storite, je, če smo pregledati element, je tisto, kar si želijo, da gredo da, in greš v konzolo, boste videli, da je natisnjena zdravo. 

Tako da bi ga lahko imeli tiskanja, kar smo hoteli. Če bomo želeli, da natisnete ozadje dot dot slog ozadje, moramo biti sposobni videti RGB triple, da pride gor. Ali ne. Pozabil sem, kako natančno vas natisniti spremenljivke, kot je ta, vendar bi morali imeti možnost, da izpisal stvari, kot da. Da bo zelo koristno za vaš pset kadar poskušate manipulirati koordinate ali malenkosti. Tako da so morali spremeniti tudi ta del v razredu. To se razlikuje od zadnjih let, tako prav lepo, da vaše TF, ali TFS ob uradnih urah in ne, ker smo vrsta učenja, skupaj z vami. Vendar dnevnik konzola je bila super, super koristno za JavaScript lani. Torej je všeč. Več o tem, kako jo uporabljati. To je lažji za uporabo kot GDB, da mora biti vsaj plus točke. Ampak hvala fantje nosijo s seboj. Žal mi je, da je moj Primeri za neznanega razloga Samo ni hotel sodelovati z mano, ampak jaz upam, da je pomagal nekako dobili malo več v coni JavaScript. In mi pošljete vsa vaša vprašanja za naslednji teden, tako da se bom lahko super popraviti, in bom prinesel sladkarije in še dodatno sladkarije, saj je bilo to smešno. Ampak ti fantje so super, in imajo super teden.