ALLISON BUCHHOLTZ-AU: U redu svi. Dobro došli natrag u odjeljak. To je naša pretposljednje poglavlje. To je tako tužno. Ne znam što ću učiniti ne vidim ti dečki svakog ponedjeljka. Mislim da bismo trebali just-- Možda bismo mogli jednostavno upoznati ovdje i imati večeru ili nešto. Ne znam. Ja ću donijeti hranu umjesto. Samo ćemo razgovarati. Ali da, sljedeći tjedan će biti naš zadnji dio. Na toj bilješci, imate kviz sljedeći tjedan. Znam da sam zaboravio da radim svoj, kao što je, Obavijest dva tjedna unaprijed prošlog tjedna, ali nadamo se da dečki Znao je to dolazi. Nadam se da je ovo jedan od posljednja midterms za vas dečki za semestar. No, to će pokriti sve materijal koji smo otišli preko. Dakle, to nije kao što možete jednostavno zaboraviti oko četiri petlje ili varijabli. Budući da smo naučili oni u početku, oni su očito fer igra za svoj kviz. 

To će biti isti format, isti Duljina, tako da su već naviknuti na to. Tu će biti kodiranje rukom problemima, možda neki istina lažni, možda neki kratki odgovor. Dakle, što bi trebao biti upoznati s formatu, pogotovo ako se uzme U praksi testovi. Ali kao što sam rekao ovdje, to je kumulativno, ali mi smo svakako će se usredotočiti na stvari od tjedan dana šest dalje. Dakle, mi smo vjerojatno ne ide vas pitati o tome koliko je bajtova u svakoj vrsti ili one vrste stvari, ali vjerojatno će biti zainteresirani za stvari kao što su povezane liste, ili različite strukture podataka, ili različiti algoritmi da smo razgovarali o tome. Tako bi bili sigurni da ste doista se na one koji, i ako vas potrebno sve resurse, Ovdje je puno resursa. Upravo sam ti dao kakav od brzog popisa tamo. 

Sljedeći tjedan će biti kviz pregled u ovom trenutku. Dakle, ako imate bilo kakvih pitanja ili određene teme, određene stvari na kviz koji želite ići preko, molimo pošalji mi ih ispred vremena, tako da mogu vrsta pripremiti neke materijale za to. I osim toga poglavlje pregled, provjerit ćemo Također se drži tečaj na razini pregled kao što smo učinili prošli put. I to će biti učinjeno od strane istih ljudi. Ne znam je li to čini bolje ili lošije, ali to će biti ja, Hannah, Davan, a Gabe opet. Dakle, ako želite doći vidjeti sve nas šala međusobno i vas kroz kviz pregled, svakako biste trebali doći do tog ponedjeljka također. Tako ćete samo zastoj ponedjeljak pakiran u kvizu pregleda, što je dobro jer tada imate utorak obraditi kroz sve. 

No, svakako da provjerite iz tih izvora. Study.csv.net je daleko, ja mislim, jedan od najkorisnijih, uglavnom zato što ima Puno uzorak koda, to je sve utičnice sa svim bilješkama o tome, koji su zapravo ono što najviše privući moji sekcija materijala iz. Ako postoji nešto u prethodna dijelovi koje sam možda šalju da ne mogu imati stečen, samo javite mi. Kao prošlotjednog uzorak koda, Ako netko ne bi da je, Samo mi e-mail ili dolaze razgovarati sa mnom, a ja ću se pobrinuti da dobijete to. 

Dakle s tim, danas nam se događa da se govori o tome JavaScript. Dakle, ovdje mi Tommy, koji je sam bio Upravo razgovor s tobom sinoć. Volim Tommy. JavaScript je njegova omiljena jezik, kako kaže ovdje. Oni će pokušati vam reći da je Nije najbolje, i oni će biti u redu. Dakle, Tommy je JavaScript majstor. Nisam baš na njegov razini, ali sam bio kao, "Tommy, kako mogu naučiti ovi klinci JavaScript? " Tako sam dobio neke savjete, pa nadam se da raditi. 

Dakle, par stvari koje trebate znati je da JavaScript je klijent-side skriptni jezik, pa dok PHP nešto koje smo smatrali više na strani poslužitelja, to je uploadati na server, sastaviti i izvršiti tu. Ovaj se izvršava na vlastitom stroju. OK? Tako ćete učitati neke JavaScript stranici, i izvršava na vašem računalu. Sintaksa je vrlo sličan C i PHP. Mi ćemo proći kroz neki primjeri JavaScript, i ti ćeš vidjeti da način na koji smo razgovarati o varijabli, petlje, a uvjeti su vrlo slični. OK? Činjenica da su toliko slični se Vjerojatno će se spotaknuti neki od vas se, u nekim slučajevima, samo zato ćete uključiti malo C tamo gdje ne bi trebalo biti. Možda ćete pokušati upisati nešto kad ne treba pisati. 

I na tome, jedna stvar zna se da je JavaScript je dinamički upisali jezik, kao što je PHP. Dakle, ako ste vi sjećate iz odjeljka prošlog tjedna, kad smo bili vrsta radi naša PHP ubrzani tečaj, Vidjeli smo kako je niz moglo bi biti pretvorio u int jednu, i tako dalje. Vrsta svoje varijabli određuju u vrijeme izvođenja, tako da oni mogu mijenjati tijekom tijek programa, i na isti način na koji mi nikada stvarno proglasiti vrste za PHP varijable, ćemo raditi isto stvar ovdje, gdje smo zapravo i nije kontrolu vrste naših varijabli, da tako kažemo, kao što smo učinili u C. 

I onda jedno to je baš fora je koje možete pogrešaka provjeriti putem konzole, s ovom velikom funkcije console.log, koji omogućuje vam ispis drugačije varijable ili predmete da ćemo razgovarati o tome. Baš kao i prošlog tjedna, kada sam bio kao što su, "koristiti ovu funkciju," sa smetlišta iz svog pset to je funkcija želite koristiti, console.log. Bio sam toliko iznenađen koliko studenti radnog vremena ne znam o funkciji odlagalište. I ja sam bio kao, "dečki, to će učiniti vaš život mnogo lakše. " 

U redu, tako da je vrsta Samo kratka stvar, kao i uvijek, imamo primjere. Znam da dečki vole one. Dakle, ovdje je primjer vrlo Jednostavan JavaScript podnijeti ovdje. Dakle, to je samo ide za stvaranje ovaj pop-up koji kaže, "Hello World", kad vas unesite stranicu, ali neka je pokušati proći kroz ovaj malo. Dakle, očito je to samo kao što je vaša normalan index.html. Dakle, samo je naša normalno predložak ovdje, a imamo HTML, imamo glavu, i baš kao i sa CSS, kako bismo uključene neke vanjske datoteke, zar ne? Imamo neku vrstu skripte Tekst koji je JavaScript. A izvor je hello.js, što je ovdje dolje. To je cijela datoteke hello.js. I onda imamo neke Naslov a neki Tijelo HTML da mi stvarno ne stalo. 

Ono što se događa je, kad smo učitati ovu stranicu, automatski izvršava ovu skriptu. OK? Dakle JavaScript hoće izvršiti automatski. Dakle, ono što će učiniti, to se događa odmah ići i izvršiti ovo. A to će reći, "upozorenje. Pozdrav svijetu ". Koji je upozorenje funkcija zapravo stvara taj okvir. OK? Dakle, to je vrsta obuhvatim. Nema ništa extra smo imali učiniti osim samo na oprezu, a onda ono što smo htjeli unutar naše Alert kutije. OK? Dakle, to je samo super jednostavan primjer onoga što može učiniti JavaScript. 

Jedan od stvarno cool stvari, kao što ćemo vidjeti, je da vam omogućuje JavaScript manipulirati svoje web stranice, bez učitati ih svaki put. Dakle, ako ste want-- primjer, ako ti si lebdi nad nečim, Ako ti dečki ikada vidi se kao izbornik trake, ili kada prelazite preko nekih tema, pojavljuje se izbornik Drop-down, to je zbog JavaScript. OK? Pa niste pretovara cjelokupni stranica da bi ovaj izbornik da se pojavi, ste samo u potrazi za neke specifične akcija koje korisnik preuzme, koji se nazivaju događaje koji ćemo dobiti u, a kada vidite da je, kažeš, "OK, uređivanje nešto na ovu stranica i čine ga izgledaju drugačije, ali samo urediti te određene stvari. Ne učitati cijelu stvar. " Dakle, to je zapravo mnogo ljepše, a ne morate se ponovno učitati vaše stranice, i to je stvarno cool. 

Dakle, varijabilni izjave, tako da možete vrsta vidjeti, Stavio sam na vrhu ovdje, labavo upisali. Dakle, to je vrlo slično kao PHP. Ne morate reći JavaScript ono tipa smo očekujući svaki od tih varijabli se. Oni mogu biti što god želimo vrste. Tako ćete primijetiti u ovom slučaju, izjavljujemo ih vrlo jednostavno, samo s "var" a onda ono što želimo naše ime varijable biti. Jedna stvar na umu je da kada staviti var ispred ime varijable, je lokalno ga opsezima. OK? To je potpuno razumno za vas potpuno jednostavno izbrisati var i samo s jednako CS50, a da bi samo biti globalna varijabla. OK? Tako da možete ga inicijalizirati u oba smjera, samo ovisi o tome kako vi to želite. Dakle, ako ste inicijalizacije je u funkciji, i želite da varijabla u ostati scoped u toj funkciji, ti si idući u ištanje za napraviti nešto poput var ime varijable, nasuprot, ako ga želiš globalno scoped, što možete jednostavno napraviti ime promjenjiva, a zatim što god želite da postavite jednaka. OK? 

To je vrsta cool stvar ovdje, jer ako primijetite naša varijabla b počinje kao istina. A što to može does-- tko reći mene što to radi? Dakle, imamo neke upozorenja. Što bi tip B biti u početku? PUBLIKA: Boolean. ALLISON BUCHHOLTZ-AU: Boolean. Pravo. A onda ćemo preraspodijeliti B ovom nizu, zar ne? Dakle ovdje, što tip B biti? Bilo bi string, zar ne? Dakle, ono što je važno obavijest da je u C, što može gotovo nikad ne nešto slično. Morali bismo imati varijablu, baci ga kao nešto drugo, možda napraviti neke funkcije s dva I, ide od zadužen za cijeli broj. Ali ako primijetite ovdje, b Vrlo lako se mijenja tip. 

PUBLIKA: Čekaj, tako da možete jednostavno biti poput, "napraviti b cijeli broj?" 

ALLISON BUCHHOLTZ-AU: Da. Vi samo možete preraspodijeliti B na cijeli broj. 

PUBLIKA: Stvarno? 

ALLISON BUCHHOLTZ-AU: Da. A onda će biti int. Dakle, vaši varijable mogu mijenjati tijekom Naravno programa previše. Oni nisu strogo upisali. To je vrlo labavo upisali. OK? Uglavnom vaši varijable može raditi što god oni žele, kao što smo vidjeli vrsta s PHP. Oni mogu napraviti neke lude stvari, tako važno je biti prilično oprezan. Ime svoje varijable dobro. Ako ne, odjednom ti si idući u biti kao što je, "Čekajte, mislila sam da je to string, a sada je int, a nisam baš siguran što se događa ovdje. " Dakle, ovo je samo jednostavan primjer pokazujući kako varijabla može lako promijeniti svoj tip više Tijek programa. 

OK. Tako bi to trebalo izgledati super, super upoznati. Dakle, to su naši petlje u JavaScriptu. Oni su isti, osim za umjesto četiri int i jednaka nuli, bismo mogli reći var i jednak nuli. A onda smo mogli imamo istu vrstu stanja, ista vrsta ažuriranja, I plus plus radi sasvim u redu. Dakle, četvorke su isti, dokle iste, i to dokle su isti. Ista vrsta općeg formata. Primjećujemo, četiri, zagrade, zagrade, to je sve isto. Također će se zarezom kad dođemo do primjer koda. Vidjet ćete da je prilično mnogo isto kao c. 

Za funkciju deklaracija, Ponovno, vrlo slično. Imamo neku funkciju koja je upravo kaže da je funkcija, a zatim ime našeg funkcija, a ulazi. A opet, ako smo najavu, nemaju vrste ovdje god. Pravo? Nemamo ništa rekavši da je to Morate biti Ints ili parovima ili pluta. Oni mogu biti što god žele. Ono što je važno je zamijetiti da je moramo napisati funkciju prije pustiti JavaScript znati da to je zapravo funkcija. 

Dakle, ovo je samo neki jednostavan zbroj funkcija koja vraća X ili Y, a onda ono što je također kul je da možete zapravo dodijeliti funkciju na varijablu. Dakle, u ovom slučaju, iznos je sada funkcija koja zapravo radi svotu. Dakle, ako primijetite ovdje, imamo funkcija, naziv funkcije, ulazi. Pravo? Ovdje smo samo funkciju i ulaza. Dakle, to se zove anonimni funkcija. A to je nešto što bi trebalo biti novo za većinu od vas dečki, ako ne i svi vi. Tako je u osnovi ono koje znači da mi ne potrebno je naziv naše funkcija u ovom slučaju. Mi samo možemo reći: "U redu, ja ću ima tu funkciju koja se izvršava, ovdje su njegovi ulazi, a evo ono što će učiniti. " A pogotovo kad ste dodjeljivanje funkcija u nekoj varijabli da ćeš manipulirati, što ne mora nužno treba ga imenovati, jer ti si idući u biti odnosi za njega u ovom varijablom ime, a ne ono što funkcija zapravo zove. OK? 

Dakle, ako smo vidjeli ovdje, mi imaju neku varijablu zbroj sada koji je jednak zbroj tri i pet. I mi bi dobili to. A to bi samo malo upozorenje, tri plus pet jednak broj. To plus će samo spojiti bez obzira na naš odgovor je na nizu. Također super, plus možete spojite žice. 

Za JavaScript, kao i sa PHP, HTML, CSS i kao što smo rekli, Mnogo toga smo vrsta polaganja kotači trening off ovdje a vi imate puno znaju Kako stvarno razumjeti ove stvari. Oni su malo drugačiji, ali oni nisu toliko strano a da vi ne možete google stvari ili gledati ih on-line s W3 školama. I doista smo vas očekuju dečki, vrsta, eksperimenta i uče na svoju vlastitu. Dakle, znam da to može činiti malo manje temeljita nego neke od stvari c radimo, ali to je zapravo s razlogom. No, nadam se da nije previše drugačije, a to nije velika. 

Dakle polja u JavaScript, opet vrlo, vrlo slični. Pravo? Imamo neku varijablu niz to je jednako praznim zagradama, a to je samo prazna polja. To se često naziva doslovni niz zapis. To je samo jedna stvar mi to zovemo. Ako vidimo niz dvije ovdje, imamo neke Doslovno niz koji ima tri elementa, zar ne? I onda imamo neke var Treći element koji je Neki varijabla koja je samo će održati taj niz, JS. 

Elementi, dobro da primijetiti, su odvojeni zarezom, baš kao što se i očekuje. A također možete pristupiti njih, kao što smo učinili u C, s ovim indeks zapis, zar ne? Dakle, različito od PHP Sada, idemo natrag samo vrsta odnosi stvari indeksom. Baš kao što je C, to je također nula indeks. Osjećam se kao da će to biti jako okrutna Ako se iznenada napravio JavaScript jedno indeks, a imali ste potpuno promisliti kako vi mislite o tome polja. 

Jedna super stvar je da se umjesto da mora do-- Ako ikada Želio duljinu niza, možda ponoviti kroz njega dok ne nađete neku kraj, ili ti bi samo znali što je to. Zbog JavaScript je jako labav više načina nego samo vrste, kao što vidimo ovdje, mi samo može napraviti ovo polje veća jer smo odlučili da. Ako primijetite niz tri ima tri stvari na početak, ali onda odjednom, mi smo kao, "Oh, samo se šalim. Mi smo zapravo događa da bi ga 101 stvari. " Dakle, ako ste ikada željeli znati Stvarna duljina vašeg polja, to učiniti ovako. A mi ćemo vidjeti puno u ovom načinu u primjerima, ali s JavaScriptom to je obično bilo Objekt koji govorite dot bez obzira na vrstu funkcije koje želite primijeniti na njega. OK? 

Dakle, u ovom slučaju, naša Cilj je niz dva, i kažemo što želimo Duljina niza dva. Znači li to samo pozivi kao i dužinu na to. I da će se vratiti svoju duljinu. Također je nešto na umu da li smo primijetiti naše polja, za razliku od C, oni nemaju to se sve istog tipa. To je mnogo više kao PHP. JavaScript je u osnovi kao Ova zanimljiva stapaju u C i PHP. Tako ćemo dobiti na to. Za sada, neka je samo pretpostavljati da vaši polja u osnovi kao što su C polja, u koje oni su nula indeksirane. U redu, tako da je sve. Također možete jednostavno proširiti Niz se god indeks želite. Dok to bi vjerojatno SEG kvara na vas i dati vam neke pogreške, JavaScript je kao, "Ne, to je u redu. Dobio sam ovo. Samo ćemo ići ravno gdje želite. " 

U redu, tako da predmeti su vrlo važni. Vi dečki će se primjenom puno njih U Vašem P set, ako sam dobro sjećam. Tako je stvar da se radi slično u C su konstrukt. Dakle, možete misliti kad about-- idemo na primjer pravo Nakon toga mislim da će napraviti puno više sense-- ali mi zapravo koristiti predmete organiziranje informacija naravno povezane. Kad smo razgovarali o tome konstrukt u C, što je često govoriti o učeniku koji je imao neko ime, ID, kuća, znaš, koncentracija. I to je vrsta iste stvari da koristimo objekte za tu. To je samo organizirati slične informacije. 

Također možete razmišljati o ovome što je više slično asocijativnih polja u PHP. Dakle, to će biti vrsta stvar gdje imamo neku tipku s nekim vrijednosti, Vrlo sličan PHP. Tako možete inicijalizirati neke prazna objekt, kao što smo vidjeli ovdje, Samo vitičastih zagrada. Tako polja su uglate zagrade. Prazne predmeti su vitičastim zagradama. Dobro razlika imati. A to su samo dvije različite načina za postavljanje svojstva. Dakle, to je vrsta još je tako da je sličan PHP, s našim asocijativne nizove, uz našu ključem, i naše vrijednosti, dok je ovo is-- vi ćete vidjeti puno više u JavaScriptu. To teži biti konvencije. I na isti način na koji smo radili Niz dva točka dužine, to govori, "U redu, daj mi tu atribut ovog objekta. " Pravo? Dakle, na isti način je to bilo "daj mi Duljina atribut niz dva " to je rekao, "daj mi neki vlasništvo naše prazne objekta. " Ili u ovom slučaju, mi smo to dodjeljivanje neke vrijednosti ovdje. No, također je mogao na taj način pristupiti. 

I onda ovdje je to samo prikazuje dva različita upozorenja. Dakle, to će pokazati upozorenja će biti isti, to je samo dva različita načina Pristupom elementa koji želimo. Znači li to da smisla svima? Osjećam se poput ove Vjerojatno ima više smisla, Upravo zbog toga smo išli s PHP. No, kao što smo učinili više primjera, ovaj doslovno isti. Mnogo toga je samo promijeniti u sintaksi. 

U redu, tako da primjeri. Volim primjere. Dakle, ovdje je neke CS50 varijabla koja je predmet, a mi pohraniti sve to Informacije o tome. Tako smo, naravno, instruktor, TFS, psets i snimao. Tako smo obavijest od njih su sve različite vrste. Pravo? Dakle, objekti mogu pohraniti atribute različitih vrsta. Možemo misliti this-- to je vrlo slična našoj asocijativni niz u PHP. Dakle ključ, vrijednost, ključ, vrijednost, ključ, vrijednost, tako dalje i tako dalje. Ono što je također zanimljivo na isti način da možemo imati polja unutar polja, mi također može imati objekte unutar objekata, ili polja unutar objekata. Nikada si jako ograničen na Samo jedna jedna od stvari. Možemo dobiti vrlo Inceptionesque, samo nastaviti niz zečju rupu tamo. 

Dakle, ako smo najavu, imaju neki tečaj koji je string, instruktor koji je string, i niz, int, a Boolean. Dakle, sve ove različite stvari. 

U redu, tako da, imamo još jednu. Dakle, u ovom slučaju, imamo niz objekata. Dakle, baš kao objekt može imati niz u njemu. Također može imati niz objekata. To bi moglo biti korisno razmišljati o slična vrsti kako smo imali mljeveno meso stol, imali smo niz od svih tih različitih vrste konstrukt koji bili upućuje na drugačiji čvorovi i sitnica. No, u ovom slučaju, mi ima niz objekata. Dakle, to je kao niz asocijativnih polja. Dakle, imamo neke prvi element bi biti predmet s imenom James i kuće Winthrop. 

Vi dečki mogli zapamtiti nešto vrlo slično ovome sa zadnjeg pset, gdje ako vas izvukao nešto iz svoje baze podataka, Prva vrsta stvar je u svom nizu bio je sve informacije o prvi korisnik koji ga upoznao, i onda je morao indeksa u to dobiti svoje dionice ili njihovu memoriju ili sitnica. Dakle, to je jako puno isto stvar, samo malo promjene u sintaksi, malo promjena riječi kojima bi ih opisao. 

Dakle, ako smo htjeli, može bilo tko reći me što to upozoriti će učiniti ovdje? Ili što je to malo broj će učiniti za nas? PUBLIKA: To će vam dati sve imena. ALLISON BUCHHOLTZ-AU: Dobro, pa to bi samo upozoriti sa svim imenima jer bi to proći Vikendica sam, pa bih početi od nule. Tako da bih rekao, u redu tražimo U ovom prvom ostvarenju, koje je prvi automat u našem polje. A ona kaže: "Dajte mi atribut, ime tog objekta. " Dakle, idemo ovdje, mi bismo skeniranje, mi bismo pronašli ime, a mi bismo ispisati James, Molly, i Carl. Bilo kakva pitanja do sada? JavaScript žalost ti si idući u biti radi puno gleda na vašem vlastiti, figuring out sintaksu, bori s njom. Ali, naravno, ja sam uvijek ovdje, Radno vrijeme su uvijek tu. Možda ću biti utorkom ovaj tjedan. Dakle, ako ste tamo, možete došao posjetiti me ovaj tjedan. To bi bilo sjajno. 

U redu, tako da je DOM Document Object Model-. Dakle, ovo je samo način da mi volimo misliti o tome kako naš HTML i sve u njemu se organiziraju. To je vrlo mnogo nešto što Vjerojatno će doći na vašem kvizu. Znam moje godine, bilo je kao ovdje HTML datoteka, ispunite DOM za njega. A vi samo ispunite malim stvarima. To bi trebalo biti lako bodova nadamo. Nadam se da ćete see-- 

PUBLIKA: [nečujan] 

ALLISON BUCHHOLTZ-AU: Pa vidiš ovo drvo ovdje? 

PUBLIKA: Da. 

ALLISON BUCHHOLTZ-AU: Dakle, oni će se pitati korištenja ispuniti ono što se događa u tijelu. Možda u tijelu, imamo neke DIVs ili imamo neke stavke, a mi ćemo vas da ispunite Stablo je vrlo mnogo kao taj. Tako ćemo biti šetnju kroz njega. Dakle, dokument-objekt Model je samo način strukturirati i mislim O našoj HTML grafički. A i kad smo dobili u više JavaScript, to će biti Način na koji smo zapravo manipulirati drugačiji elemenata na stranici. Trebamo način pristupiti svaki od stvari u našem HTML, pa to nam daje vrlo beton standardizirani način preko raznih web stranice za to. 

Dakle, ako mi samo šetati ovo ovdje, naravno naš dokument kao što je naš cijele datoteke. To očito ima smisla da je najveća stvar, a onda mi imamo stvarnu HTML, koji odgovara tom oznakom ovdje. Također, ako ste u alineje vaše oznake ispravno, a zatim stvara ovu DOM stablo postaje super jednostavna. Dakle, imamo neke glave ovdje. Imamo neku tijelo koje vidimo se zaustavio izvan HTML, što je razlog zašto smo glavu i tijelo. Unutar glave, imamo neke oznaka, kraj oznaka, tako da smo znali da dolazi nakon glavi. I u našem naslovu oznaku, imamo Pozdrav, svijet. OK? Tako da je ova cijela lijeva ruka grana. A onda na desnoj grani Ovdje vidimo da imamo HTML, OK mi smo učinili ovaj glave dijela, tražimo samo na tijelo, tako da imamo neke tjelesne površine. I unutar toga, samo što smo se Pozdrav, svijet. OK? Ako smo imali takve stvari Neki nosač p, a zatim Pozdrav, Svijet, a zatim još jedan Nosač p zbogom, svijet, imali bismo dva mjehurića dolaze off ovdje. Budući da su obojica pod tijelo, ali oni su odvojene stavke ovom slučaju. Tu je svakako praksa na koje je u prethodnim kvizova, kao i puno online na njega. U redu, tako, to samo omogućuje vidimo sve lijepo i manipulirati stvari vrlo sustavno. OK? Mi znamo točno kako prošli kroz ovaj stabla, tako da znamo što želimo pristupiti. 

U redu, tako je to razlog zašto želimo da imaju ovu vrstu modela, tako da možemo koristiti stvari kao što je ovaj, i mi razumijemo ono što oni znače, i oni su standardizirani svim stvarima koje radimo. Dakle, naslov dokumenta točka je jednostavno Naslov our-- sve to su prilično samo sebi, Volim misliti. Dakle, prva tri primjeri su samo govoreći, "U redu, samo mi dajte naslov ove web stranice. " Dakle, to će vam dati ono što odgovara naslovu. 

Dokument dot tijelo će vam dati sve što je unutar tih tijela oznake. Tako možete manipulirati tim. A dokument dot dot tijelo unesite HTML je vrlo cool jedan, a možda i nije kao super intuitivno, ali unutarnji HTML odgovara tom upravo ovdje. Dakle, ako ste ikada željeli manipulirati tekst na stranici, obično ti si idući u biti događaj nešto s tijela dot unutarnje HTML. OK? Dakle, unutarnji HTML teži da se odnosi na što je zapravo između ovih oznaka. OK? A onda korisne funkcije. Dakle, ako ste htjeli doći bilo koji od njih, bilo koji element, imamo neke Id, klasa Ime ili naziv oznake. To je vrlo sličan Ono što mi je učinio s CSS, zar ne? Gdje smo neke selektora koji odgovaraju bilo oznake, klasa da dajemo ih, ili broj osobne iskaznice. To je vrlo mnogo na isti način. Ako imate nešto što ima klasu psa, a ti kažeš dobiti elemenata naziva oznake, i stavite psa u there-- ili žao, Naziv klase. Možete staviti točku tamo. To će vratiti sve one Elementi za vas da imaju tu klasu. Na taj način možete upravljati samo oni. Na isti način, možda ste upravo žele manipulirati neki zaglavlje, tako Neki H1 zaglavlja, kao što smo učinili. Ti bi mogao učiniti dobiti elemente po oznakama ime, jer H1 je naziv oznake. I na isti način, ako želite da biste dobili Neki jedinstvena stvar, možete to dobiti oznaku. Nabavite elementa po ID. A oni su zapravo puno njih. To su samo kao tri vrlo mnogo. Dakle, ako idete online, kao Idem ohrabriti što učiniti, a ne neki Istraživanje na svoju vlastitu, I svakako preporučujem gleda na sve njih. Oni mogu biti super korisno, posebice kada Želite li samo vrsta rukovati vrlo specifične stvari bez potrebe proći i isprobati izdvoji sve. 

U redu, tako da posljednja stvar je JavaScript događanja. Dakle, kada sam razgovarao prije o odlasku na web stranici, i kada prelazite preko nečega, ili miš lebdi nad nečim, nešto drugo događa. To je ono što smo željeli razmišljati o kao događaj. Dakle, ono što imamo tu moć korisno je ovdje onclick. Dakle, moje je bilo na hover, što sam prilično siguran, samo je na lebdjeti. Također tona od njih da možete tražiti. Postoji cijeli popis online različitih stvari koje možete slušati. 

Ali JavaScript događaji zapravo samo reagirati na stvari da je vaš korisnički radi. Pravo? Dakle, vaš korisnički radi nešto, to je događaj, i JavaScript da će odgovoriti No da bih ga volio. To će odgovoriti u skladu s tim. Dakle, u ovom slučaju, imamo Neki prozor dot onload. Pa što to govori je "čekati do prozora je učitan. " OK? Dakle, kada je sve u učita, onload, tada možete izvršiti tu funkciju. Dakle, kada je sve učitava, idete da su neki gumb za pretraživanje koje dobiva jedan element po ID, i ispisuje što god da je element kao gumb Traži. I onda smo tu varijablu, kažemo, "U redu, onclick." Dakle, kada čujemo klik na gumb pretrage, izvršiti ovu funkciju, što je upozorenja, ste kliknuli na gumb Traži. 

Dakle, ono što se događa is-- to je lijepa Malo grafički prikaz ovdje. Dakle, naši opterećenja dokumenata, to je naša onload, smo pronašli naš Pretraga gumb, što je to. Mi smo u potrazi za našu gumb Traži. A onda, kada gumb Traži se kliknuli, što odgovara upravo ovdje. Onclick. Onda smo napokon upozoriti naše korisnika, što je ovo zadnja linija ovdje. OK? Dakle, svaki od tih četiri koraka jednostavno odgovara četiri kutije dolje na dnu. Znači li to da smisla svima? 

A onda jedna stvar koju sam upravo ide spomenuti vrlo, vrlo kratko, da Ohrabrujem vas dečki na ići pogledati više u je jQuery, što je samo knjižnica koja je izgrađena na vrhu JavaScript. To je super korisno, kao što je s većinom knjižnica. Postoji puno funkcija. Dakle, ako postoji nešto što nikad Želite li raditi u JavaScript, Vaš prvi instinkt Ne bi trebalo biti da misle o, "ono što je funkcija trebala I kod? ", To bi trebalo biti, "Da vidim da netko to već učinili za mene. " Jer devet od deset puta, netko će to već učinili, a vjerojatno su to učinili bolje. Ljudi provode puno vremena radi njih, i JavaScript je vrlo široko koristi, tako da su ljudi stalno pokušava da bude bolje. I jQuery ima puno funkcija koji će vjerojatno biti korisne za vas U svom završnom projektu, ako ste radiš ništa s web dizajnom. Kao što volim reći, "rad pametnije, a ne teže. " Ako ti dečki to učiniti, to će biti velika. Kad smo na hackathon ja ne Želim da se svi pod stresom. Želim biti poput, "Dobio sam ova. jQuery je dobio leđa. Ne moram pisati ove funkcije. " 

Tako je samo dvije stvari za zapamtite, idem neka ti dečki izgledaju više u jQuery na svoju vlastitu. Sve ću reći je to radi neke prilično strašan stvari i može učiniti vaš život cijeli mnogo lakše. No ono što želite imam je god datoteka da ste idući u biti koristeći ga u, ti si idući u ištanje te dvije linije. Ti si idući u ištanje Skripta JS jQuery točaka JS. A zapravo tvoj izvor će biti nekih URL. Ako Google jQuery, Google zapravo domaćini sve datoteke za vas. Tako ćete svakako želite ulaz koji URL umjesto. Upravo sam stavio ovo ovdje Radi jednostavnosti. Sve to znači da je mjesto gdje se pronaći svoj jQuery knjižnicu. To je masivan, tako da ne želim da ga domaćin na svoje računalo ako to mogu izbjeći, što je razlog zašto smo imaju tendenciju da se samo stavi u Googleovom URL-a koji domaćini sve te datoteke za vas. OK? Možete ga Google, obećajem to će biti tamo. 

I onda ono JavaScript datoteke koje ste koristite, tako da je ovo samo neki vanjski JavaScript datoteke koje koristite. Na isti način na koji smo link na našu CSS datoteka, to je ista vrsta stvar. To samo linkovi na datoteke gdje vam je JavaScript. I ja imam neke primjere s jednostavnim JavaScript. Tako ćemo se ide preko njega. A onda je u svom indeksu JavaScript, koji je vaš JavaScript podnijeti ovdje, To je vrsta omota da li za jQuery. Vi ste gotovo 99,9 posto vremena ide da su to u svom index.js datoteku. Zato što je to, kaže se, "Ne izvrši ništa dok je dokument zapravo spremni ", što je upravo ono što želite. Jer, ako je vaš dokument nije spremna, i jQuery počne raditi neke stvari, to je samo nered. Tako ćete uvijek želite imati taj omot. A onda za stvari koje idu tamo, sam ostaviti na svoj momci 'vlastitog uvida. 

U redu, tako da postoje bilo kakva pitanja u pravu Sada oko JavaScript u cjelini? Ili DOM modela? Ako ne, imamo neke kul primjeri koje možemo proći, da ti dečki mogu pomoći mi kôd. Ali ja ću biti super lijepo, a ako Ne želim reći ništa za to, to je u redu. Ja mogu samo dati primjere. No, ništa na PowerPoint prije nego što smo prešli na? Cool. 

Osjećam se kao da dečki trebaju energiju. Zato mislim da ćemo početi s moje stranke primjer prvi. Imamo tri primjera, imate svoj izbor. Dakle, imamo sat, kamo idemo provesti stvarnu sat koji je će ažurirati kako vrijeme prolazi. Imamo ovu veliku Twitter funkciju. This-- znate što, držite. Idemo napraviti ovaj ode. Bam. OK. 

Imamo ovu veliku Twitter funkciju Ovdje, that-- znam, zar ne? To će biti velik. Jeste li vi uzbuđeni? To će brojati znakova da ste ostavili, pa ako sam upisati upravo sada, Očito je to još uvijek kaže 140, ali znamo da to nije slučaj. A onda s našim posljednji Ovdje, kliknite ovdje za party. Što će se dogoditi kada smo klik, pozadina je ide za promjenu boje. Dakle, ti dečki imaju svoje opcije koje želite učiniti prvi. Obećajem da ću se vrlo lako na vas. Osjećam se kao da su svi ljubazni samo vrlo niska ključ i danas. Dakle, ja ću vas provesti kroz kako ćemo provesti sve to. Ako želite pridružiti u, to je super, ali ja Osjećam se kao da svatko je malo umoran. Dakle, ja samo ću vas prošetati kroz tih primjera. Imamo li nešto što mi bismo željeli učiniti prvi? Svatko? Svejedno? OK. Znate što? Mi smo na zabavi. Osjećam se kao da dečki trebaju little-- Dakle, mi ćemo učiniti party jedan na prvom mjestu. OK. 

Dakle, ono što smo here-- imamo da je Ne bi trebao biti tamo. Sada je dobro. OK. Dakle, ono što imamo ovdje Samo jednostavne HTML stranice da ti dečki bi trebali svi biti super upoznati s tijekom zadnje dvije psets. imamo tip doc ovdje. Može li svatko vidjeti? OK. Cool. Mi imamo HTML očito. Imamo neke zaglavlje koje je vezan za stil list koji Samo je napravio moj font lijep i veliki i hrabar. Dakle, ne brinite o tome. 

Imamo neku tijelo s Id pozadini, u redu? Budući da ćemo biti mijenja pozadinu. Dakle, kada smo promjene pozadina našeg tijela, sjećamo se prije dva tjedna kada smo se bave web stranice. Zato je dobro imati to. I mi imamo neke Id jednak stranku. To h sudac pound samo znači da je to će ići na istoj stranici. A kliknite ovdje za party, što je razlog zašto, kada smo ga pritisnite, to bi trebalo mijenjati boje, srećom. 

I onda imamo neku skriptu ovdje je samo vezano za ovaj JS točaka strana file, koji je prazna, jer nismo učinili ništa još. I to je tako tužno. No, vrlo brzo, to će se promijeniti boje, a to će biti strašan. 

Tako Samo ću hodati dečki putem kako bismo mogli pristupiti tome. Dakle, prva stvar koja što možda želite učiniti, ako se mijenja pozadinu Tijelo, prva stvar koju možda želite učiniti je zapravo dograbiti ono tijelo, zar ne? Zato želimo da se svemu, pozadina, a ako primijetite, Upravo sam automatski Samo počnite tipkati. Nema ništa posebno da mi trebate učiniti za naše JavaScript datoteke. Mogu početi izjavljuje varijable, a proglašenje slučajne funkcije. I to je puno više slobodnog oblika. To je kao s C, dali smo ti svi ovi tvrde pravila, a ti odrastao, tako da smo kao, "ići naprijed. Budite slobodni. Učinite ono što želite. " I to je ono što je JavaScript. Dakle, imamo neke pozadine ovdje. Uz naše DOM modela, mi znamo možete napraviti dokument dot dobili elementa, a ako primijetite ovdje, naše tijelo ima ID. Pravo? Dakle, možemo li dobiti dokument Id, i ovdje je jednostavan. Što je naša Id da želimo ovdje? PUBLIKA: Pozadina. ALLISON BUCHHOLTZ-AU: Pozadina. Savršeno. I točka-zarezom na kraju. To nije nestala još. I dalje su mi potrebne vaše zarezom. OK. Dakle, to je naš prvi. A kad smo kliknite nešto, što Želite nešto dogoditi, zar ne? Tako smo možda želite neka varijabla koji je čekao klik. Ono što ćemo napraviti je da ćemo se bi naša veza više sličan gumb. Tako ćemo imati neki gumb da jednak dokumentirati dot dobili elementa po ID. A ako ja govorim kliknite vezu ili kliknite ovdje za party Link, što bi moglo Id moje biti ovdje? Party. Ispravan. OK nije loše do sada. Svatko dobili ono što mi radimo? 

U redu, tako da sada imamo naš gumb, a mi želimo stvari se mijenjaju kada kliknete na njega. Dakle, ako se sjećate iz naše PowerPoint, Vrlo jednostavna stvar koju možete učiniti samo gumb dot onclick, zar ne? I to će biti jednak neke funkcije. Ovo je anonimni funkcija. I to samo as-- zapravo sam će se to malo veći. 

Dakle, ono što sam upravo učinio Ovdje je sam rekao, u redu, kad smo kliknite na gumb naše, što je ovaj link koji smo upravo iz, ćemo izvršiti ovo anonimno funkcija. Ne trebate bilo kakve ulaza. Ne zanima me što korisnik govori. Kad kliknete na nju, mi smo učiniti što god želimo, koji je promijeniti boju pozadine. OK? Dakle, to je razlog zašto mi nemamo nikakve ulaza, upravo smo ovo anonimno funkciju. I sada smo zapravo događa napisati ovu funkciju. 

Dakle, postoji hrpa načina na koje može generirati slučajni boju. Način na koji sam učinio bilo je da generirati tri slučajnih brojeva te ih pretvoriti u RGB triple. Dakle, to samo pokazuje neke kul stvari koje, ako ste poput: "Oh, Trebam za generiranje slučajnih Broj. "ako ga u Google, to je ono što bi se naći. 

Dakle, imamo tri različita stvari, var, ne opet crvena, zelena. Pravo? Dakle, to su tri stvari koje čine boju. Plava, crvena, zelena i. Cool. A ono što možemo učiniti je da znamo da to treba biti između 255, a ako ste gledali neke slučajni broj generatora, što bi mogao dobiti nešto poput matematike dot slučajna, što ako ovo gledate vraća se neki broj između nula i jedan. OK? A što brojevi učiniti naš RGB trojke ići između? Zero i što? Što oni mogu ići i do? 255. Dakle, ako je matematika dot slučajna prolazi između nula i jedan, Kako bi mogli želimo pretvoriti ovo? PUBLIKA: Vrijeme? ALLISON BUCHHOLTZ-AU: Da, točno. Dakle, vrijeme je 255. 

PUBLIKA: [nečujan] To je kao [nečujan]. ALLISON BUCHHOLTZ-AU: Matematika dot slučajan. PUBLIKA: Cool. ALLISON BUCHHOLTZ-AU: Da. JavaScript samo brine o vama. OK. Dakle, što možemo učiniti da se za sve njih. Pravo? Matematika dot slučajnim puta 255. Primljeno. Cool. Dakle, stvar je, to može Nije vratiti cijeli broj. Pravo? Možda ćemo dobiti neki broj između nula i jedan, i to uzrokuje da se nešto off, a naši RGBs ne može biti pluta. Oni moraju biti Ints. Dakle, ako ste pokušali to, to bi vjerojatno imaju neki čudan ponašanje. Bilo bi malo funky. Dakle, ono što mi radimo je želimo napraviti sigurni da su ovi zaobljeni, a ti bi mogao obići jednu stranu. I zaobljeni s poda. Zato sam se uvijek pobrinuo da je zaokružen. Ali ide off kako jednostavan posrijedi Bio bi samo dobili slučajni broj, Kako misliš da možda kat taj broj? To je vrlo slično. Bilo koji ideja? Dakle, ako slučajna je samo matematika dot random, tako da ne mislite da bih to pod? Matematika dot kat. A vi možete učiniti math dot strop. Okrugli je vrsta dvosmislen zato što ne znate li da se naviše ili naniže zaokružiti. Tako obično mi uvijek radimo matematiku dot kat, matematika dot strop. Ali honestly-- 

PUBLIKA: Da li podnu zaokružiti? 

ALLISON BUCHHOLTZ-AU: Kat zaokružuje prema dolje. A to je samo izbor s moje strane. 

Tako sada imamo tri broja koji su nasumično generiraju, i što ćemo napraviti sada smo Upravo će se promijeniti pozadinu. OK? Tako smo već imamo svoje Pozadina vrsta pohranjeni U ovom elementu se zove pozadina. Dakle, ono što ćete primijetiti jest, ako ste igrali okolo s tim, želimo promijeniti stil. A to je vrsta nešto što što bi Google i shvatiti, Sviđa mi se kako se mijenjaju boju. 

No, način na koji pristupate ova boja Pozadina dot dot stil pozadine. Dakle, to je rekao daje ovaj objekt, pozadine, koji se odnosi na to Id elementa gore, ćemo pogledati stil u stilu, ćemo gledati na pozadini. OK? A ako idete i tražiti ovo gore, možda bi malo više smisla, ali to je u osnovi samo kažem, "Daj mi ovo vrlo specifičan atribut od onoga što sam ranije definirano. " Dakle, ono što smo ga mijenja se nalazi Neki RGB, jer ima smisla. Mi smo pomoću RGB trojke, zar ne? A mi have-- Želim biti siguran da dobiti pravi broj citati ovdje. Dakle, ono što mi radimo je imamo RGB, a mi ćemo to-- to je kao ulančavanje, što je crveno. A onda želimo nešto zarez. A onda želimo plus zelena, onda neki zarez, a neki plavi. 

Tako ti plusa samo Misliš kao ulančavanje. Dakle, to samo stvara ova niz koji ide u RGB. OK? 

PUBLIKA: [nečujan] plus onda zeleni plus zatim crveno. 

ALLISON BUCHHOLTZ-AU: Da, jer sam zabrljao da je gore. Taj jedan je u redu. Oh, držite dalje. Ne. Zato što je potrebno kako bi bili sigurni da sam dobio sve te pravo. Dakle, ja ću objasniti u Uno Momento. Zelena, plava, savršena. Sada sam učinio. Vjerujem. 

OK. Pa što je to, da je u pozadini će se postaviti na nekom nizu. Pravo? Koji je ono što smo ovdje. To će biti neki RGB 255 zarezom 255 zarez nula, ili što god vam broj imaju tamo. Dakle, mi radimo ovdje, imamo neki string. A ono što želimo učiniti, je da smo vrsta dinamički stvara da, kad smo zapravo pokrenuti ovaj program. Dakle, ovo je neki niz. Plus to concatenates s Vrijednost da crvena ima, koji concatenates ga zarez, koji ga concatenates s tim što je zeleno, a tako dalje, i tako dalje. OK? Do samog kraja, koji je zatvaranje zagrade ovog RGB ovdje. OK? 

Pa što je ovo će generirati neke naredbe stvarno da je RGB od tri broja da pozadina sada je postavljen. OK? Dakle, neka je vidjeti ako to radi. Nadam se da ne, jer ako njega ne, ja ću biti žao. O, ne. OK, držite dalje. Definitivno pozadina dot dot stil pozadine. Ja sam definitivno nedostaje nešto baš mali. Zar ne dečki mrze to? Kad je to samo mala mala pogreška? Svemogući pozadini. RGB. 

PUBLIKA: [nečujan] ALLISON BUCHHOLTZ-AU: Ne Pokušao sam to prije nastave. Imam sve što sam učinio prije klase u slučaju sam bio kao, "Čekaj, što sam učinio krivo?" Budući da sam bio kao, "Ja ću vjerojatno zabrljati ovo gore u nekom trenutku. " Plus zeleni. Sve izgleda kao da je ispravno spojeni. OK. 

PUBLIKA: [nečujan] 

ALLISON BUCHHOLTZ-AU: Oh, tamo idete. To je ono što mi je potrebno. Pogledajte kako. Tiffany spasiti. Savršeno. OK. Sada ćemo vidjeti ako to radi. O, moj Bože. OK. Držite se. 

PUBLIKA: Space nakon drugog plus. 

ALLISON BUCHHOLTZ-AU: Koji? Čekaj, drže. Prostor trošenje? 

PUBLIKA: Drugi plus zelena ulančavanje. ALLISON BUCHHOLTZ-AU: Oh. PUBLIKA: Nema mjesta nakon plus, da. ALLISON BUCHHOLTZ-AU: Vi ne treba da, but-- PUBLIKA: Oh, vi ne? ALLISON BUCHHOLTZ-AU: Izgleda lijepo. PUBLIKA: OK. OK. 

ALLISON BUCHHOLTZ AU: Idemo vidjeti ako to radi. OK. Ja sam očito nije u Ovaj demo, koji me podsjeća od predavanja drugi tjedan, ali znam da će to raditi. Znam da će to raditi. Tako blizu. Osim ako sam slučajno izbrisane moja skripta na ovom jednom. Ne, to je stranka dot js. OK držite. Ja ću kopirati ovaj, i ja sam također Samo će izbrisati sve, jer sam imala to radno ranije. 

Obećajem da radi. Ako ne, ja ću vam pokazati ono što je Tommy je. I tamo. 

PUBLIKA: Vi ste pozivom stranku dot CSS, a to je stranka dot JS. 

ALLISON BUCHHOLTZ-AU: Ah, dobro Ovdje je js dot strana. OK, ono što sam učinio drugačije? OK, vidjet ćemo, ako se to radi sada. Bam. Dakle, ja ne znam što bih učinio drugačije, ali to je ono što bi se trebalo dogoditi. Kinda cool. Ja kliknuo na to, kao što je, zauvijek. Ali možemo pokušati i vidjeti što sam učinio drugačije da je ovo jedan imao. Ne znam o vama, ali ovo izgleda u osnovi ono što sam napisao. Tu je vjerojatno nestala zarez negdje je moja stvar. Zapravo, nakon, mislim da sam bio nedostaje zarez ovdje zapravo. Ali nisam mogao vidjeti, jer to je off zaslonu. 

Ali ako primijetite, to je lijepa koliko je točno ono što sam napisao. Mislim da je vjerojatno najteži dio o to je samo vrsta ove stvari u pravu Ovdje, razumijevanje ono što je radio tamo. Ovakve stvari učite zapravo samo Googling i iskreno Samo pokušavam. Ako mislite da postoji neki atribut, vjerojatno je. Dakle, to probati. Pogledajte što se događa. Kao što sam rekao, postoji mnogo eksperimentiranje s JavaScriptom, i PHP, i sve to stvari, i CSS posebno. To je jedina istina način da ga razumiju. 

U redu, tako da se nakon tog fijaska sa strankom dot js, imamo i druge dvije opcije. Imamo sat ili Twitter. Obojica su zanimljivi. Možda nije baš zabavno kao stranka, koji je imao cool malo bljeskanje što je na kraju. Imate li vi imati prednost? PUBLIKA: Sat? ALLISON BUCHHOLTZ-AU: Sat? OK. Cool. 

Pa opet, mi imamo prazna JavaScript datoteka. A kao što smo vidjeli ovdje, mi imaju neke vrlo jednostavne HTML. Mi imamo style sheet, da je samo oblikuje ono što bi trebao izgledati. Mi imamo div sa Id sat, koji Samo kaže, "to bi trebao biti sat." I mi imamo vezu našem JavaScript datoteke koji zapravo će stvaraju našu sat za nas. Budući da je cool stvar je da možete postavljen JavaScript automatski osvježiti sama. OK? Dakle, umjesto da čekaju Korisnik pogoditi osvježiti stranicu tako da možete dobiti ažurira vrijeme, JavaScript Možete ga ažurirati no to voli. 

Dakle, što je s našim posljednje smo htjeli pristupiti našu pozadinu, zar ne? Dakle, što mislite bi moglo biti Prva stvar koju želite učiniti ovdje? Ako smo nekako ide off Ova vrsta paradigme ovdje? Mi vjerojatno želite pristup našim sat, zar ne? Dakle, imamo neke var sat, što equals-- Što mislimo da će to biti? Dokument dot dobili elementa by-- i ja volim Id Sublime-- i naš Id je sat. Zarezom. Imate kako bi bili sigurni da se Ti zarezom ovaj put, jer se osjećam kao da je Bio je problem zadnji put. U redu, tako, kao što sam bio samo kažem pokušaj da JavaScript osvježiti se, Tu je ovaj veliki funkcija, ja znam da je došao u ruci prošle godine, Nisam siguran da je to dobro dođe za to pset, ali to se zove skup intervala. I to je zapravo jako super ako ti dečki ništa s vremenom ili dobivanje ažurirane informacije. Na web stranici za konačni Projekt, to je vjerojatno Funkcija koju želite dobili super upoznati. Pa što postavite interval čini se da je ćemo dati funkciju, i koliko često bi trebala nazvati ovu funkciju. OK? 

Dakle, u ovom slučaju, mi samo ide na stvoriti neke anonimne funkciju opet, OK, to je idući u dobiti naš datum, a naše vrijeme, a zatim ažurirati stvari i to prikazati. Tako ćemo brinuti o tome. Mi ćemo biti poput generirati sat ovdje. No, ono što nam je potrebno kako Često ga osvježiti. Dakle, u ovom slučaju, to je samo nekoliko milisekundi. Dakle, mi samo idete na napraviti 100 milisekundi. Naravno, posve proizvoljna. Ako ste htjeli da ažuriranje mnogo sporije, što bi mogao. Možemo zabrljati okolo sa zadanom intervalu, koliko je velika naša interval nakon što smo dobili radni sat, što nadam se da ću doći do. Dakle, ovo je samo rekao: "U redu, poziv Ova funkcija svakih 100 milisekundi. " OK? To je sve što radi. 

Dakle, ono što želimo naš sustav za to je želimo imati neki datum a neko vrijeme je ono što ćemo imati. Tako da možemo početi s našim Datum iznosi nešto, i naše vrijeme iznosi nešto da mi još uvijek ne znamo. Ili zapravo, samo mi treba datum, jer Datum će uključiti sve. Opet, ako ste upravo Google ništa o tome ono što želite učiniti, ako ste napisali, "U redu, Želim dobiti vrijeme preko JavaScript, "to će vam dati ovaj veliki Funkcija zove datum dobiti. Doslovno, većina stvari koje želite učiniti, JavaScript je će imati to učiniti za vas već. Dakle, to je doslovno kao nov dobiti datum, koji je creating-- ili novi datum, rather-- koja se generira neki objekt koji predstavlja datum. 

A što ćemo učiniti ovdje ovo is-- ću napisati ovo, a onda objasniti što to radi. Dakle, ja ću se pobrinuti da dobijete to pravo. 

OK, pa što ova funkcija ne, je da smo upravo stvaranje HTML-a koji je zapravo ići u našoj div id od sat. Pa što je to će biti događaj je samo generira neki string, u redu? To onda će biti presađene u našoj HTML. Uglavnom ono što će učiniti je god we-- što ću ti pokazati je da je ono što mi kažemo HTML je, ćemo zamijeniti ovaj tekst ovdje sa što je HTML. Dakle, to će omogućiti da promijenimo naše sata točku HTML od toga da bude samo tekst ovog treba biti sat, zapravo pokazuje brojeve i stvari koje mi je stalo o, i zapravo se sati. 

Pa što ćemo učiniti je da smo će početak stvaranja ovog HTML-a. Dakle, na isti način na koji smo koristili učiniti plus jednak za cijeli brojevi, sada možete učiniti za gudače, osim što će ih spojite. Pravo? Kao što smo vidjeli sa strane točaka js, to samo concatenates sve ove stvari zajedno. Tako možete spojite različite komadiće HTML od varijabli, ili komadići žice što napisati sebe, i to samo stvarno vam omogućuje da dinamički generiranje HTML, što je prilično cool. Dakle, ako imate nešto vrlo pojedinog korisnika, to može dopustiti da to učiniti. 

Dakle, imamo HTML, da ću pokušajte i uvjerite se da bi to pravo. Tako ćemo napraviti neki h1 zaglavlje. Dakle, ono što je važno shvatiti ovdje je da je to zapravo samo HTML. Pravo? Pišemo stvarna HTML kod ovdje, to je Ne samo string u normalu način na koji ćemo razmišljati o tome. Dakle, imamo neke HTML. To se smatra string ovdje ipak. I mi datum dot-- mi Želite da biste dobili naše vrijeme. Opet, ako ste bili na pogledati up ništa o datumu, to bi ti to su sve atributi taj datum. A evo što možete koristiti na njemu. Tako da vjerojatno ima stvari poput doći vrijeme, i dobiti minuta, i dobiti sekundi, a dobili milisekundi, i tko zna što još imaju. Ali, ako pogledate u dokumentacije, što će sve biti tamo. 

Tako smo dobili sati, a onda bi htjeli da spojite da with-- sam idući u premjestiti to ovdje. Dakle, ako ste se stvaraju upravo sada, mi smo zapravo generira vremena, zar ne? Imamo vremena, a onda ono što je između sati i minuta? Imate zarez, zar ne? Dakle, želimo napraviti neki zarez ovdje. A onda želimo da se naše minuti, te na isti način da imamo datum dot dobili sati, Kako da biste dobili naši minuta? To je doslovno Datum dot doći minuta, što sam vrsta kao. To je kao, "Oh, kako je ću dobiti moje minuta? " Upravo sam dobiti moje minuta. 

OK. I onda imamo još debelo crijevo ovdje. A onda, ako želimo da se naš sekunde, kako bi mogli smo dobili naš drugi? Datum dot dobili sekundi. Mislim da je to prilično cool. I ono što je važno shvate, da i mi morati zatvoriti svoju HTML oznake ovdje, jer ipak bi trebala biti valjana HTML, tako H1. Cool. 

Dakle, nakon toga, možemo napraviti sat dot unutarnje HTML jednaka HTML. OK? Pa sjetite se kako sam rekao Unutarnja HTML osnovi traje sve što je između Dvije oznake da smo razgovarali o tome i umetci ili radi sve što je tamo? Dakle, što to radi, ako idemo natrag u našu sat, je da je sat odnosi se na sve u ovom div. Ova je unutarnje HTML ove Id sata div. I tako će to promijeniti HTML da smo samo generira, koji, što, nadamo se, nadam se, nadam se, pokazat će vrijeme upravo sada. Vidjet ćemo. Naravno. Tako su mnogi tehnički problemi. Allison just-- sam off moje igre danas dečki. OK, to funkcionira. Sat dot unutarnji HTML. To je HTML Stvarno? Također to je ono što se događa. Kad se ne može vidjeti nešto, ti samo pogledajte izvorni kod. OK. Želiš li znati cool zaobilaznicu da ćemo raditi ovdje? 

PUBLIKA: Možete li slova? Slovima? Budući da ste dobili sati, a onda bi minuta. 

ALLISON BUCHHOLTZ-AU: To je dobiti sati i get-- oh. Vi are-- zlatnu zvijezdu. To je sve test, dečki. Obećajem da je radio prije nastave. 

OK, ali nešto super je znati koje možete also-- li ponekad Vaši vanjske datoteke uzimajući malo luda, možete jednostavno ih ravno Ovdje, koja teži popraviti stvari. Osim toga je kao jako ružno. Naravno formatirati sve. Uvjerite se da je sve lijepo. OK. 

Htio sam učiniti sve super demo, a oni samo da ne rade van. OK. Skripta var sat. Uglavnom, ono što je važno je kako je to uopće način da li će oblikovati JavaScript. Kao što možete vidjeti, to može biti vrlo izbirljiv ponekad, čak i kad je bio doslovno rade dvije sekunde prije. Ili ne dvije sekunde prije, ali vrlo, vrlo nedavno. 

Tako da vam pokazati ono što bi trebao izgledati, i da vam pokazati da nisam luda, i da je sve točno Isto, to je ono što bi trebao izgledati. Vi samo će učiniti ovaj gornji dio ovdje, a ako ste vidjeli izvorni kod stranice, Ako primijetite, on je učinio neke luđe stvari, ja to pojednostavljeno. Također, krediti Tommy McWilliam, koji je zapravo mi je pomogao stvoriti te primjere, što je razlog zašto ja znam da rade. Budući da je Tommy JavaScript majstor. Ali ako primijetite, imamo neki skup. Mi ovdje imamo našu sat funkciju. To je sve JavaScript da samo mi je napisao, ili nešto od toga. Mi samo napisao ovo ovdje. I on je extra funkcija koja samo jastučići stavljanjem nulu prije pismo ili pred broj i ako je Samo je jedan od njih. Dakle, ako ste primijetili, ovo je lijepa koliko je točno ono što smo upravo napisao. Imate neku varijablu sat koji ima našu elementa, elementa dobili po ID, što je sat. Mi imamo set interval funkcija, to je anonimni funkcija da izvršava sve to. Mi smo neki polazeći niz HTML da smo tada dinamički stvaraju tako da su neki H1 zaglavlja, nadovezivanjem s dobiti sati, plus naša crijeva, plus sve Zapisnik, plus još debelog crijeva, plus naši sekundi, i na kraju završio HTML za to. A onda ćemo ažurirati naš sat dot unutarnji HTML HTML, a mi ažurirati svakih 100 milisekundi. OK? 

Pogledajte obećajem da nisam lud. Ne znam. Ne znam zašto me ne vole. Osjećam se kao izgleda isto, ali očito da me mrzi. 

Dakle, neka je vidjeti ako je oko tri ide bolje. Mi smo o tome da se vidi. Nisam siguran koliko je to ići. Je li svatko barem dobivanje kontra, kao što su samo opće teme JavaScript, iako? Nadam se da je barem korisna, više nego pokazuje da je malo izbirljiv. Ali tvoj problem set će biti vrlo zabavno. To će biti velik. To neće biti toliko dosadan jer, ja ne mislim. Vi zapravo ćete doći do vidi stvarno cool stvari. 

Dakle, na kraju, ali ne manje važno, ćemo pokušati Twitter jednu. Ja sam jako uplašen sad, momci. Ne znam kako je to ići. Ali samo da vam malo više okus, što je zapravo manipuliraju žice i Ulazi, što ćemo učiniti je, ako primijetite ovdje HTML-- ovo je malo još mnogo toga imamo neki tekst područja, koja odgovara prostoru za tekst ovdje. OK? A da ima ID teksta. Restyled mi to malo s nekim širine i visine da smo predodređeni, a mi smo H1, koja je upravo naša header onaj koji predstavlja naši likovi napustio. Dali smo neke ID Preostalo znakova, a onda ćemo imati neki scenarij Ovdje, što sam stvarno nadajući se treći put a Šarm ovdje, dečki. 

Dakle, ono što želimo učiniti, u istom venu da smo učinili s JS sat točaka i stranački dot js kao što smo primijetili, je da smo počeli tako zapravo grabbing stvari koje mi je stalo, zar ne? Dakle, u ovom slučaju, postoje dvije stvari koje mi je stalo, u redu? Jedna stvar koju smo zapravo vrsta u potrazi i prikupljanje podataka iz, i jedna stvar koja mi zapravo mijenja. Dakle, tu je naš HTML. Ako je ovo naše web stranice ovdje, što je Podaci koje gledamo? To će biti ono Tekst je u našim okvirima, zar ne? Dakle, ono što sam upisati ovdje. To je ono što želim znati, ili to je ono što želim pogledati. A što će biti promjene na našoj web stranici? Likovi preostalo. Dakle, na isti način, želimo početi inicijalizacije varijabli koji zapravo drže na tim elementima. OK? Dakle, ako imamo neke var da je naš tekst područje, i mi imamo neke var da je preostalo. Pravo? Dakle, oni su idući u držite te dvije stvari. Tako isto takve stvari, Dokument dot-- OK, ja sam ide kako bi bili sigurni to je ide na posao ovaj put. Ja sam vrlo odlučan. U redu, tako da, ako želimo da naši Tekst područje, sukladno našem HTML, što je naša oznaka? Što je naš ID? To samo će se tekst, jer to stvara naš tekst područja, OK, a naš Id je tekst, tako da je Kako možemo uhvatiti ono što je unutra. OK, točka. Ja ću biti super precizno o tome, jer želim to raditi ovaj put. OK, napraviti istu stvar, dobili elementa po ID. Ja sam stvarno pitate što ima izazvala druga dva bi zabrljati. OK, onda je u tom jednom, Što želimo pristupiti? Ono što je naš Id ovdje? Imamo još ID u naša HTML, što je to? PUBLIKA: Likovi preostalo. ALLISON BUCHHOLTZ-AU: Likovi preostalo. 

OK. Cool. Pa ja sam samo ide napišite to jako brzo. Samo ću napisati to u sekundi. Dakle, tekst područja. Ono što je zanimljivo je B function-- postoji puno funkcija koje ne samo da odgovaraju Vašim miš, ali tipkovnici. OK? Dakle, možete reći kada bilo ključno je pritisnuta, to možete učiniti stvari kao što je to. Dakle, onaj koji smo pomoću je pozvao ključ, kojim kaže: "Ako ste pritisnuli niti jednu tipku na vaša tipkovnica, kada korisnik podiže prst off tu tipku, a ključ je postao nesprešan, onda ćemo učiniti nešto. " OK? Dakle, to ima smisla, zar ne? Budući da svaki lik mi tip, idemo morati podići svoje prste od toga, pa kad tipka ide gore, možemo znati da opadanje naši likovi preostalo. 

Dakle, imamo neke na ključ gore, i na isti način, ćemo reći, "U redu, kad to radimo, mi će stvoriti neku funkciju se događa da se e ", u ovom slučaju, a ono što mi želimo učiniti je izračunati broj preostalih. U redu, pa neka je samo početak stvaranjem varijable. Dakle, imamo neke varijablu r, koja će predstavljati koliko znakova koje smo ostavili. OK? Mi znamo da smo započeli s 140, a ako želimo znati, recimo, trajanja ovog niz koji je bio ulaz, Imate li vi kakvu ideju Kako bismo mogli to učiniti? Samo temelji off očito stvari, kao što je, ako smo htjeli sati, koristili smo dobili sati. Mi znamo da je naš cilj je Tekst, ali možeš li dečki razmišljati o tome što bi moglo doći nakon njega? Bilo koji ideja? 

Dakle, ovaj je nekako manje intuitivno, ali to je vrijednost duljine točaka. Dakle, mi samo dati neke Vrijednost atributa koji zapravo duljina tog niza. Dakle, to će reći: "U redu, ja tražim u cijelom tom nizu u tekstualno područje, a ja ću reći ti koliko je to. " Jer, ako se sjetimo žice su zapravo samo polja, tako da mi samo može uzeti duljinu njih. Tako imamo da je. Cool. 

Onda ono što želimo učiniti je da nikada ne žele dopustiti korisniku za unos više od 140 znakova, zar ne? Jer, ako kažemo poput: "Oh, ti samo toliko preostalih " a onda neka to Uglavnom, mi smo bili lagao. I to je još jedan Ono što JavaScript može biti jako dobar za, je user valjanosti i pazeći da je vaš Korisnik uklapa u bilo pravila da ste pod uvjetom da se njima. Dakle, ako želite raditi stvari kao što je li netko ulaz njihov e-mail adresu, ili pazeći da kad upišite dvije lozinke, oni odgovaraju. JavaScript može učiniti. Ti bi nešto poput: "Kada Obrazac se podnosi "ili slično, "Kada gumb podnijeti Obrazac je kliknuo, provjeriti sve te stvari. " A mi možemo učiniti JavaScript. Dakle, to je upravo ono ćemo učiniti ovdje. 

Dakle, ono što bi moglo biti način da provjerite je li oni su otišli preko 140 znakova? Što će se dogoditi naša vrijednost r, ako oni pokušati? To će biti negativan, zar ne? Ili će to biti manje od ili jednak nuli. Dakle, možemo koristiti, ako je to baš kao i sve drugo. OK? I mi imamo neki tekst područje točku vrijednost, a ono što radimo ovdje je da smo upravo cutting-- što je to? Oprostite. To je jedan, mi samo želimo vratiti false. Dobio sam zbunjen. Sve frazzled od stvari ne rade. OK, mi samo želimo return false, a onda ćemo želite prikazati Preostali likovi, zar ne? Dakle, uz sat, što smo učinili nešto s unutarnjim HTML, zar ne? Gdje smo postavili je jednaka neke promjenjiva, tako da ono što bismo mogli učiniti ovdje? Što smo mijenjaju unutarnji HTML u? 

PUBLIKA: Preostalo? 

ALLISON BUCHHOLTZ-AU: Mijenjamo preostalo. U redu, i što radimo želite postaviti jednaka? To će biti r, jer to trebali biti naši likovi preostalo. OK? Dakle, ja sam jako nervozna da li to radi sada, ali vidjet ćemo. Ostavi to. To je jako brzo. [Nečujan] OK. Opet, ja samo ću vam pokazati. Iz nekog razloga, Mine ne odluči raditi, ali ono što ću vam pokazati da je to is-- oh sam trebao staviti u. OK, možemo uočiti istu vrstu stvar ovdje, uzimajući tekst područje. 

Isto tako, ako ti dečko obavijest, ako postoji sve nešto što želite učiniti, a vi ne znate kako to učiniti da, samo kliknite Prikaži izvor stranice, i oni će vam reći. Ponekad će biti kodiran. Za vaš pset, mi kodirati sve, tako da samo izgleda kao besmislice. Ali ako je ikad doista kul web stranica koja vam se sviđa, Ako ste samo kliknite Prikaži izvor stranice, to će vam reći kako to učiniti. Pa opet, raditi pametnije, ne teže. I kao što vidite ovdje, sve ove stvari su isti. ovaj ovdje samo traje malo podniz da, zaboravio sam točno što to radi. No, to očito treba neki podniz vrijednosti od nula do deset, a false što bi trebalo prestati Korisnik od unosa više, a onda očito ažurira Unutarnja HTML tamo. 

Cool. Tako veliki uzimati prospekti od danas, Eksperiment, pogledati izvorni kod jer to će vam pomoći puno, i svi, ponekad i JavaScript može biti teško raditi i ne uvijek rade onako kako vi očekujete da, ali samo pokušavati jer ja obećavam da ću. I obećavaju sve ove primjere radili prije nastave. Ne razumijem što se dogodilo. I doslovno su sve iste. 

Još jedna stvar koju sam upravo htio pokazati vam dečki koji mogu biti super korisna je in-- ono što je radio prije? Dobili smo stranka rada, zar ne? Mislim da je tako. Da. Napravili smo. Awesome. U redu, tako da jedna stvar koja ti dečki trebali znati je konzola zapisnik da sam govorio o tome. Dakle utješiti dot zapisnik Hello. Dakle, to je vrsta JavaScript ekvivalent printf. Dakle, ako ste ikada željeli provjerite svoje varijable ili vidjeti što se tamo događa, što što možete učiniti je, ako ćemo pregledati elementa, je ono što želite otići da, i idete na utješiti, vidjet ćete da je tiskana Pozdrav. 

Tako smo mogli imati Ispis god smo htjeli. Ako bismo htjeli da se ispisati pozadinu dot dot stil pozadine, bismo trebali biti u mogućnosti vidjeti RGB trostruki koje dolazi. Ili ne. Zaboravio sam točno kako vas ispisati varijablu kao što je to, ali bi trebao biti u mogućnosti ispis slične stvari. To će biti vrlo korisno za svoj pset kada je pokušavate manipulirati koordinira i sitnica. Dakle, oni su također promijeniti ovaj komad u razredu. To je različito od posljednjih godina, tako da Samo se lijepo na svoj TFS, ili TFS na radnog vremena, a, jer smo vrsta učenja zajedno s vama. No konzole dnevnik je super, super korisno za JavaScript prošle godine. Zato ga volim. Saznajte kako ga koristiti. To je lakše koristiti nego GDB, tako da je treba biti barem plus point. Ali hvala vam dečki nose sa sobom. Žao mi je da je moj Primjeri iz nekog razloga Samo ne želim surađivati ​​sa mnom, ali ja nadam se da je pomoglo vrsta dobili ste malo više u zoni JavaScript. I pošalji mi na sva pitanja za sljedeći tjedan, tako da mogu biti super popraviti, a ja ću donijeti slatkiše i još extra Candy, jer je to bilo smiješno. Ali ti dečki su super, i imaju strašan tjedan.