ALLISON BUCHHOLTZ-AU: Toate toată lumea drept. Bine ați revenit la pct. Este secțiunea noastră penultima. E atât de trist. Nu știu ce am de gând să fac fără să te văd băieți fiecare zi de luni. Cred că ar trebui să doar-- poate am putea pur și simplu întâlni aici și cina sau ceva. Nu știu. Voi aduce mâncare în schimb. Vom vorbi doar. Dar, da, săptămâna viitoare va fi ultima noastră secțiune. Pe această notă, aveți un test săptămâna viitoare. Știu că am uitat să fac mea, cum ar fi, două săptămâni în avans Notă săptămâna trecută, dar sperăm că voi știut că aceasta venea. Sperăm că acest lucru este unul dintre ultimele examenele pentru voi pentru semestrul. Dar o să acopere toate material care am trecut peste. Deci, nu e ca poti uita doar aproximativ patru bucle sau variabile. Pentru că am învățat cei la început, acestea sunt în mod evident joc corect pentru testul dumneavoastră. 

Va fi același format, aceeași lungime, pentru ca tu deja sunt obișnuit. Acolo va fi codificare de probleme de mână, Poate unii fals adevărat, Poate unii răspuns scurt. Deci, ar trebui să fie familiarizat cu formatul, mai ales dacă luați testele de practică. Dar, așa cum am spus aici, e cumulativ, dar suntem cu siguranta O să se concentreze pe lucruri din sase saptamani incoace. Deci, suntem probabil, nu va să vă întreb despre cât de multe bytes sunt în fiecare tip sau aceste felul de lucruri, dar vom probabil, va fi interesat în lucruri cum ar fi listele postat, sau diferite structuri de date, sau algoritmi diferite că am vorbit despre. Deci, asigurați-vă că sunteți într-adevăr pe acestea, și dacă nevoie de resurse, aici o mulțime de resurse. Ți-am dat un fel de o listă scurtă acolo. 

Săptămâna viitoare va fi test revizuiește în acest timp. Deci, dacă aveți orice întrebări sau teme specifice, anumite lucruri pe care testul doriți să mergeți peste, vă rog trimite-le la mine inainte de timp, asa ca am putea fel de a pregăti un material pentru asta. Și în plus față de această secțiune revizuire, vom De asemenea, se ține cursul la nivel revizui așa cum am făcut data trecută. Și va fi efectuată de către aceiași oameni. Nu știu dacă asta face mai bine sau mai rău, dar o să fiu eu, Hannah, Davan, și Gabe din nou. Deci, dacă vrei să vii vadă ne bătaie de joc cu altele și te plimbi prin testul recenzie, trebuie cu siguranta ajunge la care lunea viitoare, de asemenea. Deci, veți avea doar un blocaj luni ambalate de revizuire test, care este bun pentru că atunci ai marți pentru a procesa prin tot. 

Dar cu siguranta nu a verifica aceste resurse. Study.csv.net este, de departe, am cred că, una dintre cele mai utile, mai ales pentru că ea are o mulțime de mostre de cod, are toată puterea Punctele cu toate notele pe ea, care sunt cu adevărat ceea ce am trage cel mai mult materialelor mele secțiune din. Dacă e ceva în precedent secțiunile ca să fi trimise ca să nu aveți ajuns, doar să-mi spuneți. Ca exemplu de cod de săptămâna trecută, dacă cineva nu a primit asta, doar mi e-mail sau vin vorbesc cu mine, și mă voi asigura că veți obține asta. 

Deci, cu asta, astăzi vom să fie vorba despre JavaScript. Deci, aici suntem Tommy, care am fost doar vorbesc cu tine aseară. Îmi place Tommy. JavaScript este preferata lui limbă, așa cum spune el aici. Ei vor încerca să-ți spun că este nu cel mai bun, iar ei vor fi greșit. Deci, Tommy este un maestru JavaScript. Eu nu sunt destul de la său nivel, dar am fost ca, "Tommy, cum predau acești copii JavaScript? " Asa ca am luat câteva sfaturi, astfel încât sperăm că lucra. 

Deci, un cuplu lucruri de reținut este faptul că JavaScript este un client-side scripting limbă, deci în timp ce PHP este ceva că am considerat mai de server-side, a fost încărcați la server, compilat și executat acolo. Acesta este executat pe cont propriu mașină. OK? Deci încărcați unele pagină JavaScript, și-l execută pe calculatorul dumneavoastră. Sintaxa este foarte similar cu C și PHP. Vom trece prin câteva exemple de activarea JavaScript-, și vei vedea că mod vorbim despre variabile, bucle, și condițiile sunt toate foarte asemănătoare. OK? Faptul că ele sunt atât de asemănătoare este probabil, va declanșa unii dintre voi sus, în unele cazuri, doar pentru că vei includă un pic de C unde nu ar trebui să fie. Poate să încercați și tastați ceva atunci când nu ar trebui să fie tastat. 

Și pe asta, un singur lucru a știu este că JavaScript este un dinamic tastat limbă, cum ar fi PHP. Deci, dacă voi aminti din secțiunea săptămâna trecută, când am fost un fel de a face cursul nostru accident PHP, am văzut cum un șir poate fi transformat într-un singur int, și așa mai departe. Tipul de variabilele sunt determinate la momentul execuției, astfel încât acestea se pot schimba peste parcursul programului, și în același mod în care noi nu într-adevăr declara tipuri de variabile PHP, vom face același lucru lucru aici, în cazul în care nu suntem cu adevărat controlul tipurile de variabilele, ca să spunem așa, așa cum facem în C. 

Și apoi un lucru care este destul de rece este pe care le puteți eroare verifica prin consola, cu această funcție mare console.log, care vă permite să imprimați diferit variabile sau obiecte pe care le vom vorbesc despre. La fel ca săptămâna trecută, când am fost cum ar fi, "a utiliza această funcție," cu benă din PSET dumneavoastră este o funcție doriți să utilizați, console.log. Am fost atât de surprins cât de multe studenții de la ore de birou nu știa despre funcția de groapa. Și am fost ca, "băieți, această voință face viața mult mai ușoară. " 

În regulă, astfel că a fost un fel de doar un lucru scurt, ca întotdeauna, avem exemple. Știu că voi iubi pe cei. Deci, aici este un exemplu de o foarte simplu de activarea JavaScript-fișier aici. Deci, este doar de gând să creeze acest pop-up care spune, "Hello World", atunci când intra pe pagina, dar hai încercați și plimbare prin aceasta un pic. Deci, în mod evident, aceasta este doar ca index.html normal. Deci, doar șablonul nostru obișnuit aici, și avem HTML, avem capul nostru, și la fel ca și cu CSS, cum ne inclus un fisier afară, nu? Avem unele script type text care este JavaScript. Iar sursa este hello.js, care este aici. Acesta este întregul dosar de hello.js. Și apoi avem unele titlu și unele organism HTML că nu ne pasă cu adevărat despre. 

Ce se întâmplă este, când am încărca această pagină, se execută în mod automat acest script. OK? Deci JavaScript va executa în mod automat. Deci, ce se va face, va pentru a merge imediat și să execute acest lucru. Și se va spune, "alerta. Salut Lume. " Care alerta este funcția pe care genereaza de fapt această casetă. OK? Deci e un fel de tot Encompass. Nu e nimic în plus am avut de a face în afară de doar de alertă, și apoi orice ne-am dorit în cutia noastră alertă. OK? Deci, asta e doar un super-simplu exemplu de ceea ce poate face JavaScript. 

Unul dintre foarte cool lucruri, așa cum vom vedea, este că JavaScript voi permite a manipula paginile dvs. de web, fără a fi nevoie să le reîncărcați de fiecare dată. Deci, dacă o doresti de exemplu, în cazul în care sunteți situându-se peste ceva, dacă voi avea vreodată văzut ca bare de meniu, sau atunci când treceți peste unele subiect, un meniu drop-down apare, asta e din cauza JavaScript. OK? Deci, nu te reîncărcarea întregul Pagina a obține acest meniu pentru a arăta în sus, sunteți în căutarea doar pentru unele specifice acțiune care utilizatorul a luat, care sunt numite evenimente care vom primi în, și o dată veți vedea că, vă spun, "OK, edita ceva pe aceasta pagina și să-l arate diferit, dar numai edita aceste lucruri specifice. Nu reîncărcați totul. " Deci, de fapt, este mult mai frumos, și nu trebuie să reîncărcați paginile dvs., și e foarte misto. 

Deci, declarații variabile, astfel încât să puteți vedea un fel de, Am pus pe partea de sus aici, vag tastat. Deci, acest lucru este foarte mult ca PHP. Nu avem nevoie să-i spuneți JavaScript ce tip suntem așteaptă fiecare dintre aceste variabile să fie. Acestea pot fi orice tipuri vrem. Deci observați în acest caz, ne vom declara ele foarte simplu, doar cu "var" și apoi ce vrem numele nostru variabilă să fie. Un lucru de remarcat este faptul că, atunci când pune var în fața unui nume de variabilă, ea la nivel local se domeniile de valabilitate. OK? Este complet rezonabil pentru tine a șterge complet doar var și doar au s egal CS50, și care ar fi doar o variabilă globală. OK? Deci, puteti inițializa ambele sensuri, doar depinde de modul în care doriți. Deci, dacă sunteți de inițializare acesta, în funcție, si doriti ca variabila să rămâne cad în această funcție, ai de gând să vrei să faci ceva de genul var numi o variabilă, versus dacă doriți scoped la nivel global, tu poate face doar numele variabila si apoi orice dorești o egală cu. OK? 

Aceasta este un fel de lucru misto aici, pentru că dacă observăm variabila nostru b incepe ca adevărat. Și ce does-- acest lucru poate cineva spune-mi ce face acest lucru? Deci avem ceva de alertă. Ce s-ar tip de b fie la început? Audiența: Boolean. ALLISON BUCHHOLTZ-AU: Boolean. Corect. Și apoi ne-am realocați b la acest șir, nu? Deci aici, ce tip de b să fie? Ar fi un șir, nu? Deci, ce este important pentru Notă este că în C, am nu ar putea face aproape ceva de genul asta. Va trebui să aibă un variabil, a aruncat-o ca altceva, poate face unele funcții cu două i, du-te la o taxă la un număr întreg. Dar dacă observăm aici, b foarte schimbă ușor de tip. 

Audiența: Stai, astfel încât să puteți doar fie ca, "a face b un număr întreg?" 

ALLISON BUCHHOLTZ-AU: Da. Puteți realoca doar b la un număr întreg. 

Audiența: Într-adevăr? 

ALLISON BUCHHOLTZ-AU: Da. Și atunci ar fi o int. Astfel, variabilele pot schimba peste parcursul programului asemenea. Acestea nu sunt strict tastate. Este foarte vag tastat. OK? Practic variabilele pot face orice doresc, așa cum am văzut cu un fel de PHP. Ei pot face unele lucruri nebun, așa este important să fie destul de atent. Nume variabilele bine. Dacă nu, să faceți totul dintr-o dată vei fi ca, "Stai, am crezut că acest lucru a fost o șir, iar acum este un int, și eu nu sunt foarte sigur ce se întâmplă aici. " Deci, aceasta este doar un simplu exemplu de care arată cum o variabilă poate cu ușurință schimba tipul acesteia peste cursul unui program. 

OK. Deci, aceasta ar trebui să se uite super, super familiar. Deci, acestea sunt bucle noastre în JavaScript. Acestea sunt exact la fel, cu excepția în loc de patru int i este egal cu zero, am putea spune pur și simplu var i este egal cu zero. Și atunci am putea avea același fel nostru de stare, același fel de modificare, i plus plus functioneaza foarte bine. Deci patru labe sunt aceleași, whiles sunt aceleași, și de a face whiles sunt exact la fel. Același tip de format general. Observăm, patru, paranteze, paranteze, e tot la fel. De asemenea, vor exista semne punct și virgulă când ajungem la exemplul de cod. Veți vedea că e destul de la fel ca și c. 

Pentru declarațiile funcțiilor, din nou, foarte asemănătoare. Avem o funcție care tocmai spune că este o funcție, și apoi numele noastre funcție, precum și intrările. Și din nou dacă observăm, ne-am nu au tipuri de aici un fel de. Chiar? Nu avem nimic spunând că acestea trebuie să fie int sau double, sau flotoare. Ar putea fi orice doresc. Ceea ce este important este să observe că avem nevoie pentru a scrie în prealabil funcție pentru a permite JavaScript știe că aceasta este de fapt o funcție. 

Deci, aceasta este doar o sumă simplu funcție care returnează x sau y, și apoi ceea ce este, de asemenea, rece este că puteți de fapt atribui o funcție de o variabilă. Deci, în acest caz, suma este acum Funcția care face de fapt sumă. Deci, dacă observați aici, avem funcție, numele funcției, intrări. Chiar? Aici avem doar funcția și intrări. Deci, aceasta se numește o funcție anonim. Și acest lucru este ceva care ar trebui să fie nou la cele mai multe dintre voi, dacă nu toți. Deci, practic despre ce înseamnă că noi nu facem Trebuie să numele nostru Funcția în acest caz. Putem spune doar, "OK, am de gând să au această funcție care execută, aici sunt intrările sale, și aici e ceea ce va face. " Și mai ales atunci când sunteți atribuirea o funcție de unele variabile care ai de gând să manipuleze, tu nu neapărat Trebuie să-l numească, deoarece ai de gând să fie de trimitere de către această variabilă nume, nu prin orice funcția a fost de fapt numit. OK? 

Deci, dacă vom vedea aici, ne-am au unele sumă variabilă acum care este egal cu sumă de trei și cinci. Și ne-ar lua asta. Și acest lucru ar trebui doar câteva alertă, trei plus cinci este egal cu numărul. Acest plus va înlănțui doar indiferent de răspunsul nostru a fost pe șirul. De asemenea rece, plus poate înlănțui siruri de caractere. 

Pentru JavaScript, ca și cu PHP, HTML, CSS și așa cum am spus, o mulțime de ea ne-am cam bază de luare roțile de formare off aici și voi avea o mulțime de know cum să înțeleagă cu adevărat aceste lucruri. Sunt ușor diferit, dar ele nu sunt atât de străin și că nu poți pe Google lucruri sau uite-le on-line cu școlile W3. Și ne chiar te asteptam baieti la, un fel de, experiment și să învețe pe cont propriu. Deci, eu știu acest lucru ar putea părea un pic mai aprofundată decât unele dintre c lucrurile facem, dar asta e de fapt un motiv. Dar sperăm că nu e prea diferite, și nu e copleșitoare. 

Deci, tablouri in JavaScript, din nou foarte, foarte asemănătoare. Chiar? Avem niște matrice variabilă care este egală cu paranteze goale, și că e doar un array gol. Aceasta este adesea numit literal notație matrice. Asta e doar un singur lucru o numim. Dacă vom vedea matrice două aici, avem niște matrice literal că are trei elemente, dreapta? Și apoi avem unele al treilea element var care este unele variabile asta e doar O să dețină acest șir, JS. 

Elementele, bun pentru a observa, sunt separate prin virgula, la fel ca ne-am aștepta. Și puteți accesa, de asemenea, aceste, așa cum am făcut-o în C, cu această notație indice, nu? Deci, diferit de PHP acum, ne întoarcem la doar un fel de trimitere la lucruri de index. La fel ca C, este, de asemenea, indicele zero. Mă simt ca și cum ar fi într-adevăr crud în cazul în care a făcut brusc de activarea JavaScript-o index, și a trebuit să complet regândim modul în care gândesc despre tablouri. 

Un lucru cool este că, în loc de a trebui să do-- dacă vreodată dorit lungimea unei matrice, poate ai repeta prin ea până când găsiți ceva scop, sau ar trebui să știi exact ce este. Deoarece JavaScript este foarte slab în mai multe modalități decât doar tip, după cum vom vedea aici, putem face doar acest tablou mai mare pentru că ne vom hotărî să. Dacă observăm matrice trei are trei lucruri pentru a începe, dar apoi dintr-o dată, suntem ca, "oh, doar glumesc. Vom merge de fapt să-l facă 101 de lucruri. " Deci, dacă doriți vreodată să știți Lungimea efectivă a matrice dvs., Puteți să o faceți ca acest lucru. Și vom vedea o mulțime din această notație în exemple, dar cu JavaScript este de obicei orice obiect care vorbești despre dot orice tip de funcție doriți să aplicat la acesta. OK? 

Deci, în acest caz, nostru obiect este matrice doi, și spunem că ne dorim ca lungime de matrice două. Deci, acest lucru necesită ca lungime pe asta. Și că va reveni lungime ta. De asemenea, ceva de remarcat este că dacă observăm tablouri noastre, spre deosebire de C, ele nu au să fie toate de același tip. Acest lucru este mult mai mult ca PHP. JavaScript este practic la fel ca acest amestec interesant de C și PHP. Deci, vom ajunge în acel. Pentru moment, hai să presupunem că matrice tale sunt de fapt cum ar fi C tablouri, în care ele sunt la zero indexate. OK, astfel că este totul. Puteți, de asemenea doar extinde un matrice pentru orice index vrei. Întrucât aceasta ar duce probabil SEG vina pe tine sau vă dau câteva erori, JavaScript este ca, "Nu, e în regulă. Am asta. Vom merge doar drept în cazul în care doriți să. " 

OK, deci obiectele sunt foarte importante. Voi va folosi o mulțime de acestea în setul de P, dacă îmi amintesc corect. Deci lucrul care acestea sunt similare la C sunt struct. Deci, vă puteți gândi about-- când mergem la un exemplu drept după ce aceasta cred că o să face mult mai mult sense-- dar vom folosi practic obiecte de organiza de informații legate de curs. Când am vorbit despre struct în C, de multe ori vorbim despre un elev care a avut unele nume, ID-ul, casa, știi, de concentrare. Și asta e un fel de același lucru pe care le folosim obiecte de aici. E doar pentru a organiza informații similare. 

Vă puteți gândi, de asemenea, de acestea ca mai similar cu asociative tablouri în PHP. Deci, acest lucru ar fi un fel de lucru în cazul în care avem o cheie cu o valoare, foarte asemănător cu PHP. Astfel, puteți inițializa unele obiect gol, așa cum vom vedea aici, doar cu acolade. Matrice Deci sunt paranteze drepte. Obiecte goale sunt acolade. Distincție bun pentru a avea. Și acestea sunt doar două diferite moduri de a seta proprietăți. Deci asta e un fel de mult mai mult de un mod care este similar cu PHP, cu nostru tablouri asociative, cu cheia noastră, și valoarea noastră, în timp ce acesta este-- veți aceasta mult mai în JavaScript. Acest lucru tinde să fie convenție. Și, în același mod în care am făcut Lungimea punct matrice doi, aceasta spune, "OK, da-mi aceasta atribut de acest obiect. " Chiar? Deci, la fel a fost ca, "da-mi lungimea atribut de matrice două " acest spune, "da-mi ceva proprietate a obiectului nostru gol. " Sau, în acest caz, suntem atribuirea se la o valoare aici. Dar ai putea, de asemenea, în acest fel acces. 

Și apoi aici este doar arătând două alerte diferite. Deci, acest lucru ar arăta alertelor ar fi exact același lucru, e doar două moduri diferite de accesarea elementul pe care ne-o dorim. Asta face sens pentru toată lumea? Mă simt ca aceasta probabil are mai mult sens, doar pentru că noi venim de pe PHP. Dar, așa cum facem mai multe exemple, acest este literalmente exact la fel. O mulțime de acesta este doar schimba în sintaxă. 

OK, așa exemple. Îmi place exemple. Deci, aici este ceva CS50 variabilă care este un obiect, și noi Magazin Toate acestea informații despre el. Deci avem Desigur, instructor, TFS, psets, și cu bandă adezivă. Deci, noi observăm, acestea sunt aproape toate diferite tipuri. Chiar? Astfel de obiecte pot stoca atribute de diferite tipuri. Ne putem gândi la asta: ea e foarte similar cu oferta noastră asociativ în PHP. Deci cheie, valoare, cheie, valoare, cheie, valoare, așa mai departe și așa mai departe. Ce este, de asemenea, interesant în același fel că putem avea tablouri în matrice, putem avea, de asemenea, obiecte din cadrul obiecte sau tablouri în obiecte. Niciodată nu ești limitat într-adevăr la doar un singur de lucruri. Putem obține foarte Inceptionesque, doar păstra merge în jos gaura de iepure acolo. 

Deci, dacă observăm, ne-am au unele curs care este un șir de caractere, instructor e un șir de caractere, și matrice, un int, și un Boolean. Deci, toate aceste lucruri diferite. 

Bine, deci, avem altul. Deci, în acest caz, ne-am o serie de obiecte. Deci, la fel ca un obiect poate avea o serie din ea. Putem, de asemenea, o serie de obiecte. Acest lucru ar putea fi util pentru gândiți-vă similar natură de modul în care am avut o hash masă, am avut o serie de toate acestea diferit tipuri de structs care au fost pointeri la diferite noduri și fleacuri. Dar, în acest caz, ne vom au o serie de obiecte. Deci, aceasta este ca un tablou tablouri de asociative. Deci avem ceva prim element ar face obiectul cu numele James și casa Winthrop. 

Voi ar putea aminti ceva foarte similar cu acesta cu ultima ta PSET, în cazul în care, dacă tras ceva din baza de date, primul fel de lucru în matrice ta a fost toate informațiile cu privire la primul utilizator care a îndeplinit, și apoi a trebuit să indice în care pentru a obține stocul sau cache lor sau fleacuri. Deci, acest lucru este foarte mult la fel lucru, doar o mica schimbare în sintaxă, schimbare pic în cuvintele pe care le folosesc pentru a le descrie. 

Deci, dacă ne-am dorit, poate cineva spune mi ce ar face aici această alertă? Sau ce acest bit de cod-ar face pentru noi? Audiența: Va voi da toate numele. ALLISON BUCHHOLTZ-AU: Corect, așa că ar alerta doar cu toate numele pentru că ar trece prin cabana I, așa că ar începe de la zero. Deci ar spune, OK căutăm la acest prim obiect, care este primul slot din oferta noastră. Și spune: "da-mi atribut, numele acestui obiect. " Deci mergem aici, am scanare, vom găsi nume, și ne-am imprima Iacov, Molly, și Carl. Orice întrebări până acum? JavaScript, din păcate, vei fi face o mulțime de a privi pe dumneavoastră propriu, imaginind sintaxa, lupta cu ea. Dar, desigur, eu sunt mereu aici, Programul de lucru este mereu aici. S-ar putea fi în zilele de marți în această săptămână. Deci, dacă ești acolo, puteți veni vizita mine această săptămână. Ar fi grozav. 

OK, deci DOM este Document Object Model-. Deci, aceasta este doar o modalitate că ne place să ne gândim despre cum HTML noastre și tot în cadrul acestuia se organizează. Acest lucru este foarte mult ceva care va veni probabil pe testul dumneavoastră. Știu anul meu, a fost ca aici e Fișier HTML, completați în DOM pentru ea. Și veți completa în lucrurile mici. Acestea ar trebui să fie puncte de ușor, sperăm. Sperăm că veți see-- 

Audiența: [inaudibil] 

ALLISON BUCHHOLTZ-AU: Deci vezi acest copac aici? 

Audiența: Da. 

ALLISON BUCHHOLTZ-AU: Deci, ei vor cere utilizare să completeze ceea ce trece pe sub corpul. Poate în organism, avem niște divs sau avem unele paragrafe, și vă vom cere să completați un copac foarte mult ca aceasta. Deci, vom fi mersul pe jos prin ea. Deci obiectului document Modelul este doar un mod a structura și cred că despre HTML noastră grafic. Și, de asemenea, atunci când vom ajunge în mai JavaScript, se va fi încât suntem de fapt manipula diferite Elemente pe pagina. Avem nevoie de o modalitate de a accesa fiecare de lucrurile din HTML noastre, și așa acest lucru ne dă o foarte mod standardizat beton în diferite pagini web pentru a face asta. 

Deci, dacă ne-am mers prin acest aici, desigur documentul nostru este ca intreaga noastra fișier. Asta are în mod evident sens că este cel mai mare lucru, și apoi ne-am HTML noastre actuale, ceea ce corespunde la această etichetă aici. De asemenea, dacă în liniuță etichetele în mod corespunzător, atunci crearea acestui copac DOM devine super-simplu. Deci avem niște cap aici. Avem unele organism care vom vedea stem off de HTML, care este motivul pentru care ne-am cap și corp. În cap, avem niște tag-ul titlu, un tag titlu scop, astfel știm că vine după cap. Și în tag-ul nostru din titlu, avem salut, lume. OK? Deci, asta e această ramură stângă întreg. Și apoi pentru ramura dreaptă aici, vom vedea că avem HTML, OK am făcut această parte cap, ne uitam doar la trup, așa că avem niște zonă a corpului. Și în faptul că, singurul lucru pe care îl avem este salut, lume. OK? Dacă am fi avut lucruri de genul unele suport p și apoi salut, lume, iar apoi un alt Suport p de la revedere, lume, am avea două bule venind de pe aici. Pentru că sunt atât în ​​trup, dar ei sunt punctele separate pentru acest caz. Nu este cu siguranta practică pe faptul că, în teste anterioare, precum și o mulțime online pe ea. OK deci, aceasta doar execută ne vedem tot frumos și manipula lucruri foarte sistematic. OK? Știm exact cum să traversa prin acest copac, deci știm ce vrem să acceseze. 

OK deci acesta este motivul pentru care ne-o dorim pentru a avea acest tip de model astfel încât să putem folosi lucruri de genul asta, și am înțeles ce înseamnă, și sunt standardizate peste toate lucrurile pe care le facem. Deci, titlu de document punct este doar titlul de our-- toate acestea sunt destul de sine explicativ, Îmi place să cred. Astfel, primele trei exemple sunt doar că, "OK, doar da-mi titlul de aceasta pagina web. " Deci, vă va da ceea ce corespunde titlu. 

Documentul punct corp este de gând să vă dau tot ce este în aceste etichete corporale. Astfel, puteți manipula asta. Și corpul punct de documente punct introduceți HTML este una foarte cool, și poate că nu este ca super- intuitiv, dar HTML interior corespunde cu acest drept aici. Deci, dacă doriți vreodată să manipula textul de pe o pagină, de obicei, ai de gând să faci ceva cu punct corp HTML interior. OK? Deci HTML interior tinde să se refere la ceea ce este de fapt între aceste tag-uri. OK? Și apoi funcții utile. Deci, dacă ai vrut să obțineți oricare dintre acestea, orice element, avem unele id, class numele, sau nume de etichetă. Acest lucru este foarte similar cu lucruri am făcut cu CSS, nu? În cazul în care avem unele selectoare că corespund fie o etichetă, o clasă că le, ​​sau un Id da. Acest lucru este foarte mult la fel. Dacă aveți ceva care are unele clasă de câine, și tu spui obține elemente după nume etichetă, și ai pus câine în there-- sau rău, Numele de clasă. Puteți pune punct acolo. Va reveni tuturor celor Elemente pentru tine care au această clasă. Astfel, puteți manipula doar cele. În același mod, poate că pur și simplu doresc să manipuleze unele antet, astfel încât unii antet h1, așa cum am făcut-o. Ai putea face obține elemente dupa eticheta nume, pentru că h1 este un nume de etichetă. Și, în același fel, dacă doriți să obțineți ceva unic, poți să faci tag get. Ia elementul de Id. Și ei sunt de fapt o mulțime de aceste. Acestea sunt doar ca trei din foarte multe. Deci, dacă te duci on-line, cum Am de gând să încurajeze să faci, și de a face unele cercetare pe cont propriu, Vă recomandăm cu siguranta Cautati in toate cele. Ele ar putea fi foarte util, în special atunci când vrei sa doar un fel de a manipula lucruri foarte specifice, fără a avea pentru a merge prin și să încerce să elimine tot. 

OK, deci ultimul lucru este JavaScript evenimente. Așa că atunci când am vorbit mai devreme despre a merge pe un site web, și atunci când treceți peste ceva, sau mouse-ul trece peste ceva, se întâmplă altceva. Aceasta este ceea ce am dori să gândiți-vă ca un eveniment. Deci, ce avem că s-ar putea fi util aici este onclick. Deci, a mea a fost pe hover, care, sunt destul de sigur, este doar pe hover. De asemenea, o tona de acestea pe care le puteți căuta. Există o întreagă listă on-line a diferitelor lucruri pe care le puteți asculta. 

Dar evenimentele JavaScript sunt practic doar a răspunde la lucruri că dvs. de utilizator este de a face. Chiar? Deci, utilizatorul dvs. nu ceva, e un eveniment, și JavaScript va răspunde cu toate acestea ai o să-mi placă. Acesta va răspunde în consecință. Deci, în acest caz, ne-am unele onload fereastră punct. Deci, ceea ce spune acest lucru este "așteptați până încărcat ferestrei. " OK? Așa că atunci când totul e încărcat, onload, atunci puteți executa această funcție. Așa că atunci când totul e încărcate, mergi a avea unele buton de căutare care devine un element de identificare, și se imprimă indiferent de faptul că elementul este ca butonul de căutare. Și apoi avem această variabilă, spunem, "OK, onclick". Așa că atunci când am auzit un clic pe butonul de căutare, executați această funcție, care este o alertă, ați făcut clic pe butonul de căutare. 

Deci, ce se întâmplă este-- aceasta este o frumos puțin reprezentare grafică aici. Deci, loturile noastre de documente, asta e onload noastră, găsim Căutare noastre buton, care este aceasta. Căutăm butonul noastră de căutare. Și când butonul de căutare este clic, aceasta corespunde chiar aici. Onclick. Apoi ne-am avertiza în cele din urmă utilizator nostru, care este această ultimă linie de aici. OK? Astfel, fiecare dintre aceste patru etape doar corespunde celor patru căsuțe acolo jos pe partea de jos. Asta face sens pentru toată lumea? 

Și apoi un lucru pe care Mă duc să menționeze foarte, foarte pe scurt, că am , va incurajam baieti la du-te uita-te mai mult în este jQuery, care este doar o bibliotecă care este construit pe partea de sus a JavaScript. Este foarte util, în calitate de cu cele mai multe biblioteci. Există o mulțime de funcții. Deci, dacă există vreodată ceva care vrei să faci în JavaScript, primul instinct nu ar trebui să fie să se gândească de, "ceea ce ar trebui funcția Am cod? ", Ar trebui să fie, "Lasă-mă să văd pe cineva e deja făcut asta pentru mine. " Pentru că de nouă ori din zece, cineva va fi făcut deja, și ei, probabil, l-au făcut mai bine. Oamenii petrec o mulțime de timp face acestea, și JavaScript este utilizat pe scară foarte largă, astfel încât oamenii sunt în mod constant încercarea de a face mai bine. Și jQuery are o multime de functii care va fi, probabil, util pentru tine în proiectul final daca esti a face ceva cu web design. În ceea ce îmi place să spun, "locul de muncă inteligent, nu mai greu. " În cazul în care voi face asta, va fi grozav. Când suntem la hackathon nu-mi place Vreau să fie totul stresat. Vreau să fie ca, "am acest. a jQuery-am întors meu. Nu am nevoie să scrie aceste funcții. " 

Deci, doar două lucruri amintiți-vă, am de gând să vă voi uita mai mult în jQuery pe cont propriu. Tot am de gând să spun este face unele lucruri destul de minunat și poate face viata ta un întreg mult mai ușor. Dar, ce vrei să avem este orice fișier care ai de gând să fie folosind-o în, ai de gând să vrei aceste două linii. Ai de gând să doriți script de JS jQuery dot js. Și, de fapt sursa ta va fi ceva URL. Dacă Google jQuery, Google găzduiește, de fapt toate fișierele pentru tine. Deci dori în mod sigur să de intrare care URL-ul în schimb. Am pus asta aici pentru simplitate. Toate acestea înseamnă în cazul în care a găsi biblioteca jQuery. E masiv, deci nu vrei să-l gazduiasca pe propriul computer dacă puteți evita, motiv pentru care ne-am tind să pune doar în URL-ul Google că găzduiește toate aceste fișiere pentru tine. OK? Ai Google, promit aceasta va fi acolo. 

Și apoi orice JavaScript fișier ca esti utilizarea, astfel încât acesta este doar un exterior JavaScript fișier pe care îl utilizați. În același mod în care ne leagă de CSS noastre fișiere, acesta este același tip de lucru. Aceasta leagă doar la dosar în cazul în care JavaScript este. Și am câteva exemple cu JavaScript simplu. Deci, vom trece prin ea. Și apoi în index JavaScript, care este JavaScript dosar aici, aceasta este un fel de înfășurare că aveți pentru jQuery. Esti aproape 99,9 la suta din timp merge pentru a avea acest lucru în fișierul index.js. Pentru că ceea ce spune acest lucru este, "Nu executa nimic până documentul este de fapt gata ", care este exact ceea ce vrei. Pentru că, dacă documentul nu e gata, și jQuery începe a face lucrurile, e doar o mizerie. Deci, vrei mereu să aibă această înveliș. Și apoi pentru lucruri care merg acolo, am se lasă la propria luat cunoștință băieții tăi ". 

OK, deci există întrebări dreapta acum aproximativ JavaScript în general? Sau modelul DOM? Dacă nu, avem unele rece exemple pe care le putem merge prin, că voi mă poate ajuta cod. Dar am de asemenea, va fi super frumos, iar daca Nu vreau să spun nimic pentru aceste, e în regulă. Pot, de asemenea, doar să vă dau exemple. Dar nimic pe PowerPoint înainte de a trece mai departe? Se răcește. 

Mă simt ca și cum voi trebuie sa energie. Deci, eu cred că vom începe cu exemplul meu partid întâi. Avem trei exemple, ai alegerea ta. Deci avem ceas, unde mergem să pună în aplicare un ceas real care este O să actualizeze pe măsură ce timpul trece. Avem această mare funcție Twitter. Asta: stii ce, stai. Vom face acest plece. Bam. OK. 

Avem această mare funcție Twitter aici, that-- știu, nu? Va fi mare. Cautati băieți excitat? Aceasta va conta numărul de caractere pe care le-ați lăsat, deci, dacă am de tip chiar acum, evident încă mai spune 140, dar știm că nu e cazul. Și apoi cu ultimul nostru una aici, click aici pentru a petrecere. Ce se va întâmpla este atunci când facem clic, fundal anii va schimba culorile. Deci, voi avea optiunile de care o doriți să faceți mai întâi. Promit că voi lua o foarte ușor pe tine. Mă simt ca și cum toată lumea e un fel de doar foarte low-cheie astăzi. Așa că voi plimba prin modul în care vom implementa toate acestea. Dacă doriți să chime în, e minunat, dar eu simt ca toata lumea e un pic obosit. Așa că o să te conduc doar prin aceste exemple. Avem ceva ce am dori să facem mai întâi? Oricine? Fără preferințe? OK. Știi ce? Suntem pe partid. Mă simt ca și cum voi avea nevoie de un little-- așa, vom face cea partid primul. OK. 

Deci, ce avem here-- asta e nu ar trebui să fie acolo. Acum e bine. OK. Deci, ceea ce avem aici este doar o pagină HTML simplu că voi ar trebui sa fie toate super- familiarizat cu de la ultimele tale doua psets. Avem tip nostru doc ​​aici. Poate toată lumea vezi? OK. Se răcește. Avem HTML nostru, evident. Avem ceva în afara că este legat de o foaie de stil care doar voi font meu frumos și mare și îndrăzneț. Deci, nu vă faceți griji cu privire la asta. 

Avem unele organism cu un fond Id, bine? Pentru că vom fi schimbe fundalul. Așa că atunci când suntem schimbarea fundal de corpul nostru, ne amintim de acum două săptămâni când este vorba de pagini web. Deci, bun pentru a avea acel. Și avem niște Id egal petrecere. Acest h Arbitrul livră înseamnă doar că se va merge la aceeași pagină. Și click aici pentru petrecere, care este motivul pentru care atunci când faceți clic pe el, aceasta ar trebui să schimbe culorile, din fericire. 

Și apoi avem unele script aici că este doar legat de acest partid js dot fișier, care este gol, deoarece nu am făcut nimic încă. Și e așa de trist. Dar, foarte curând, se va schimba culori, și va fi minunat. 

Așa că Mă duc să vă plimbare baieti prin modul în care am putea aborda acest lucru. Deci, primul lucru pe care am putea dori să facă, dacă ne schimba fundalul corpul, primul lucru pe care ar putea dori sa faci este de fapt apuca ceea ce corpul este, nu? Deci, vrem sa avem sumă, noastră fundal, iar dacă observați, Doar automat începe doar dactilografiere. Nu e nimic special că noi Trebuie să facem pentru fișierele noastre JavaScript. Pot începe de declarare variabile, și declararea funcții aleatoare. Și este mult mai formă liberă. E ca și cum cu C,-am dat pe toți aceste reguli dure, și ai crescut, deci suntem ca, "du-te mai departe. Fii liber. Fă ce vrei. " Și asta e ceea ce este JavaScript. Deci avem unele de fundal aici. Cu modelul nostru DOM, noi știm pot face documentul punct minim de element, iar dacă observăm aici, corpul nostru are un Id. Chiar? Deci, putem te document prin Id-ul, și aici e unul simplu. Ce este ID-ul nostru pe care ne-o dorim aici? Audiența: Context. ALLISON BUCHHOLTZ-AU: Fond. Perfect. Și punct și virgulă la sfârșitul anului. Asta nu a dispărut încă. Ai nevoie de încă virgulă tale. OK. Deci, asta e prima noastră unul. Și când facem click ceva, ne-am vrea să se întâmple ceva, nu? Așa că s-ar putea dori niște variabile care este de asteptare pentru un clic. Ceea ce vom face este că vom face legătura noastră mai mult similar cu un buton. Deci, vom avea unele buton care este egal cu documenta punct primi elementul de Id. Și dacă eu vorbesc despre faceți clic pe link-ul sau click aici pentru petrecere link-ul, ceea ce ar putea fi ID-ul de mea aici? Party. Corect. OK, nu prea rău până acum. Toată lumea ce facem? 

OK, deci acum avem noastre buton, și vrem lucrurile să se schimbe atunci când faceți clic pe ea. Deci, dacă ne amintim de PowerPoint nostru, lucru foarte simplu putem face este doar punct buton onclick, nu? Și asta se întâmplă pentru a egala o anumită funcție. Aceasta este o funcție anonim. Și aceasta doar as-- de fapt eu sunt de gând să facă acest lucru un pic mai mare. 

Deci, ce am făcut aici este Spun, OK, când ne-am faceți clic pe butonul nostru, care este această legătură pe care ne-am referit, vom executa această funcție anonim. Nu avem nevoie de nici un intrări. Nu-mi pasă ce spune utilizatorul. Atunci când faceți clic pe el, suntem O să facem ce vrem, care este schimba culoarea de fundal. OK? Deci, de aceea nu avem nici un intrări, avem doar această funcție anonim. Și acum suntem de fapt merge a scrie această funcție. 

Deci, există o grămadă de moduri în care ar putea genera o culoare aleatorii. Modul în care am făcut-o a fost să genera trei numere aleatoare și de a le converti la un triplu RGB. Deci, aceasta doar vă arată unele misto lucruri pe care daca esti ca, "oh, Am nevoie pentru a genera un aleatoare număr. "dacă aceasta pe Google, aceasta este ceea ce v-ar găsi. 

Deci avem trei diferite lucruri, var, nu roșu din nou, verde. Chiar? Deci, acestea sunt cele trei lucruri care alcătuiesc o culoare. Albastru, roșu, și verde. Se răcește. Și ce putem face este că știm că aceasta trebuie să fie între 255, și dacă te-ai uitat în sus niște generator de numere aleatorii, ai putea obține ceva de genul matematica dot aleator, pe care dacă te uiți asta se întoarce la un numar între zero și unu. OK? Și ce numere facem nostru Triple RGB merge între? Zero și ce? Ce pot ei merg până la? 255. Deci, dacă matematica dot aleatoare se duce între zero și unu, cum am putea dori pentru a converti acest lucru? Audiența: Timpul? ALLISON BUCHHOLTZ-AU: Da, exact. Deci, timpul este de 255. 

Audiența: [inaudibil] E ca și cum [neauzit]. ALLISON BUCHHOLTZ-AU: Math dot aleatoare. Audiența: cool. ALLISON BUCHHOLTZ-AU: Da. JavaScript are doar grijă de tine. OK. Deci, putem face asta pentru toate acestea. Chiar? Math dot ori aleatoare 255. Am înțeles. Se răcește. Deci lucru este, acest lucru poate nu se mai întoarcă un întreg. Chiar? Poate lua un numar între zero și unu, și o face să fie ușor off, iar RGBS noastre nu pot fi flotoare. Ei au nevoie să fie int. Deci, dacă ați încercat acest lucru, ar probabil au un comportament haotic. Ar fi un pic funky. Deci, ceea ce facem este că doriți să faceți sigur că acestea sunt rotunjite, si ai putea rotunji nici un fel. Am rotunjit cu etaj. Așa că am întotdeauna sigur că rotunjite în jos. Dar merge off de cât de simplu a fost de a obține doar un număr aleator, cum crezi că s-ar putea etaj acest număr? E foarte asemănătoare. Orice idee? Deci, dacă aleator a fost doar matematica punct aleatoare, deci crezi că aș face podea? Math punct podea. Și puteți face, de asemenea, matematica punct plafon. Runda este un fel de ambiguu pentru că nu știu dacă a rotunji în plus sau rotunji în jos. Deci, de obicei, facem mereu matematica podea punct, tavan matematica punct. Dar honestly-- 

Audiența: Are rotund podea jos? 

ALLISON BUCHHOLTZ-AU: Etaj runde jos. Si acesta este doar o alegere din partea mea. 

Deci, acum avem trei numerele noastre care au fost generate aleator, și ceea ce vom face acum este că suntem doar va schimba fundalul. OK? Deci avem deja nostru fundal fel de depozitat în acest element numit fond. Deci, ce veți observa este, în cazul în care ai jucat în jurul cu acest lucru, vrem sa schimbam stilul. Și aceasta este un fel de ceva care v-ar Google și dau seama, place cum pentru a schimba culoarea. 

Dar modul în care accesați această culoare este fundal dot dot stil de fundal. Deci, aceasta spune dat acest obiect, fundal, care se referă la faptul că Element Id acolo, ne vom uita la Stilul în stilul, ne vom uita la fundal. OK? Și dacă te duci și căutați asta, s-ar putea face un pic mai mult sens, dar acest lucru este, în principiu doar că, "Dă-mi această atribut foarte specific de ceea ce am definit mai devreme. " Deci, ceea ce suntem o schimbare este unii RGB, pentru că are sens. Suntem folosind RGB tripleți, nu? Și noi have-- vreau să vă asigurați I obține numărul corect de citate aici. Deci, ceea ce facem este că avem RGB, iar noi te vom sa-- acest lucru este ca concatenare, care este de culoare roșie. Și apoi ne-o dorim ceva virgulă. Și apoi ne-o dorim plus verde, apoi unele virgulă, iar unele albastru. 

Deci aceste plusuri doar Adică concatenare. Deci, aceasta este doar crearea acestui șir care va în RGB. OK? 

Audiența: [inaudibil] plus apoi verde A plus apoi roșu. 

ALLISON BUCHHOLTZ-AU: Da, pentru că am stricat asta. Amenda Asta cuiva. Oh, stai. Nu. Pentru că am nevoie să vă asigurați că ca am primit toate acestea dreapta. Deci, voi explica în momento ONU. Verde, albastru, perfect. Acum am terminat. Eu cred. 

OK. Deci, ce este aceasta, este faptul că de fond va fi setat la o anumită șir. Chiar? Care este ceea ce avem aici. Va fi ceva RGB 255 virgulă 255 de zero virgulă, sau orice ai numărul au acolo. Deci, ce facem aici, avem unele șir. Și ceea ce vrem să facem, este că suntem fel de dinamic creare că, atunci când vom rula de fapt acest program. Deci, aceasta este un șir. Plus concateneaza cu valoarea pe care roșie are, care concateneaza cu o virgulă, care se concateneaza cu ceea ce este verde, și așa mai departe, și așa mai departe. OK? Până la sfârșit, care este închidere paranteze de acest RGB aici. OK? 

Deci, ce acest lucru se întâmplă la genera unele comenzi într-adevăr că este RGB de trei numere acest context este acum setată la. OK? Să vedem dacă funcționează. Sper că nu, pentru că în cazul în care nu, am de gând să fie reală trist. Oh, nu. OK, stai. Categoric fundal punct stil punct de fundal. Îmi lipsește siguranta ceva doar mic. Nu te voi urî asta? Când este doar o mica eroare pic? Fundal Atotputernic. RGB. 

Audiența: [inaudibil] ALLISON BUCHHOLTZ-AU: Nu. Am încercat acest lucru înainte de clasă. Am tot ce am făcut înainte clasă în cazul în care am fost ca, "Stai, ce am gresit?" Pentru că am fost ca, "voi, probabil, mizerie asta la un moment dat. " Plus verde. Totul pare ca e concatenate în mod corect. OK. 

Audiența: [inaudibil] 

ALLISON BUCHHOLTZ-AU: Oh, nu te duci. Asta e ceea ce am nevoie. Uită-te la asta. Tiffany a salva. Perfect. OK. Acum, să vedem dacă merge. Oh, Doamne. OK. Stai. 

Audiența: Space după a doua plus. 

ALLISON BUCHHOLTZ-AU: Care? Oh, așteptați, stai. Uzura spațiu? 

Audiența: Al doilea plus în concatenarea verde. ALLISON BUCHHOLTZ-AU: Oh. Audiența: Nu există spațiu după plus, da. ALLISON BUCHHOLTZ-AU: Tu nu au nevoie de asta, dar-- Audiența: Oh, nu? ALLISON BUCHHOLTZ-AU: Se pare destul de. Audiența: OK. OK. 

ALLISON BUCHHOLTZ AU: Să vedem dacă funcționează. OK. Mă evident faptul că nu la acest demo, care-mi aduce aminte de o prelegere pe de altă săptămână, dar știu că acest lucru va funcționa. Știu că acest lucru va funcționa. Atât de aproape. Dacă nu am șters din greșeală script-ul meu de data asta. Nu, este dot partid js. OK stai. Am de gând să copiați acest lucru, și eu sunt, de asemenea, doar de gând să șterge totul, pentru că am avut acest lucru mai devreme. 

Promit că funcționează. Dacă nu, vă voi arăta ce Tommy este. Și acolo. 

Audiența: Ești corelarea partid punct CSS, și este un punct de partid js. 

ALLISON BUCHHOLTZ-AU: Ah, bine aici este js dot partid. OK, ce am făcut altfel? OK, vom vedea dacă aceasta funcționează acum. Bam. Deci, eu nu știu ce am făcut altfel, dar acest lucru este ceea ce trebuie să se întâmple. Cam rece. Am apasat pe această, cum ar fi, pentru totdeauna. Dar putem încerca și a vedea ceea ce am făcut diferit că acesta a avut. Nu știu despre voi, dar acest lucru Se pare practic ceea ce tocmai am scris. Nu a fost, probabil, o lipsă punct și virgulă undeva e treaba mea. De fapt, după, cred că lipsea un punct și virgulă aici de fapt. Dar nu am putut vedea că a fost în afara ecranului. 

Dar dacă observați, acest lucru este destul de mult exact ceea ce tocmai am scris. Cred că, probabil, cea mai grea parte despre acest lucru este doar un fel de acest lucru drept aici, înțelegere ce face acolo. Aceste tipuri de lucruri pe care le invata într-adevăr doar prin Googling și sincer Încerc doar. Dacă credeți că e ceva atribut, probabil este. Deci, încercați. Vezi ce se întâmplă. Așa cum am spus, există o mulțime de experimentarea cu JavaScript, și PHP, și tot ce chestii, și CSS în special. Asta e singurul adevărat mod de a înțelege. 

OK, astfel încât după fiasco cu partidul js dot, avem alte două opțiuni. Avem ceas sau Twitter. Sunt amândoi interesant. Poate nu la fel de distractiv ca partid, care a avut un strobing răcească puțin lucru la sfârșitul anului. Nu voi avea vreo preferință? Audiența: Ceas? ALLISON BUCHHOLTZ-AU: Ceas? OK. Se răcește. 

Deci, din nou, ne-am nostru gol fișier JavaScript. Și, după cum vom vedea aici, ne-am au unele HTML foarte simplu. Avem foaie de stil noastră, că doar formate cum ar trebui să arate. Avem div noastră cu o Id-ul de ceas, care doar spune, "aceasta ar trebui să fie un ceas." Și avem link-ul nostru la dosarul nostru de activarea JavaScript- care este de fapt o să genera ceasul nostru pentru noi. Pentru că lucrul rece, este că puteți setat JavaScript pentru a actualiza automat în sine. OK? Deci, în loc de așteptare pentru utilizator a lovit Refresh la o pagină astfel încât să puteți obține timp actualizate, JavaScript poate actualiza totuși îi place. 

Astfel, ca și în ultimul nostru este de ne-am dorit pentru a accesa trecutul nostru, nu? Deci, ce crezi că ar putea fi primul lucru pe care vrem să facem aici? Dacă vom fel de a merge off acest tip de paradigmă aici? Probabil Vrem să acces la ceasul nostru, nu? Deci, avem niște var ceas, care equals-- ce credem că va fi? Documentul a obține punct element de by-- eu, de asemenea, dragoste Sublime-- Id-ul și ID-ul de nostru este de ceas. Punct și virgulă. Trebuie să asigurați-vă că pentru a obține aceste punct și virgulă acest timp, pentru că mă simt ca și cum asta a fost problema ultima dată. OK așa, cum am fost doar că cu încercarea sa ai JavaScript în sine refresh, există această funcție mare, eu Știu că a venit la îndemână anul trecut, Nu sunt sigur că vine la îndemână pentru această PSET, dar se numește interval stabilit. Și aceasta este de fapt într-adevăr rece dacă voi face nimic cu timpul sau asistent Informații actualizate. Pe un site web pentru o finala proiect, aceasta este, probabil, o funcție pe care doriți să obține super-familiarizat cu. Deci, ce a seta intervalul face este că vom da o funcție, si cat de des ar trebui numesc această funcție. OK? 

Deci, în acest caz, vom doar de gând să a crea din nou o funcție anonim, OK, că este mergi la a lua data nostru, și timpul nostru, și apoi actualizați lucruri și afișa. Deci, vom face griji cu privire la asta. Vom fi ca genera ceas aici. Dar ceea ce avem nevoie este cum de multe ori să-l refresh. Deci, în acest caz, e doar milisecunde. Așa că doar de gând să face 100 de milisecunde. Desigur, complet arbitrar. Dacă ați fi dorit să actualizeze mult mai lent, ai putea. Putem mizerie în jurul valorii de cu intervalul stabilit, cat de mare interval nostru este, după ne un ceas de lucru, pe care sperăm Voi ajunge la. Deci, aceasta este doar spune, "OK, apel această funcție la fiecare 100 de milisecunde. " OK? Asta e tot ce face. 

Deci, ceea ce vrem funcția noastră să faci este dorim să avem o dată și de ceva timp este ceea ce vom avea. Astfel încât să putem începe cu nostru data este egal cu ceva, și timpul nostru este egal cu ceva că nu știm încă. Sau de fapt, avem nevoie doar de data, deoarece data este de gând să includă totul. Din nou, dacă ai doar Google ceva despre ceea ce vrei să faci, dacă ai scrie, "OK, Vreau să ajung ora prin JavaScript ", se vă va da acest mare funcție numită data get. Literal, cele mai multe lucruri pe care doriți să faceți, JavaScript va avea făcut deja pentru tine. Deci e literalmente ca nou obține data, care este creating-- sau noua dată, rather-- care este generatoare un obiect care reprezintă o dată. 

Și ce vom face aici este acest este-- am de gând să scrie acest lucru, și apoi să explice ceea ce face. Așa că voi asigura că primesc acest drept. 

OK, deci ce această funcție nu, este că suntem doar crearea HTML care este de fapt de gând să meargă în Id nostru div de ceas. Deci, ce acest lucru se va face Este doar generatoare de unii șir, bine? Acest lucru este atunci va fi transplantate în HTML nostru. Practic ceea ce va face este indiferent de we-- ceea ce vă va arăta este că orice am spune HTML este, vom înlocui acest text aici cu orice HTML este. Deci, acest lucru se întâmplă pentru a permite ne pentru a schimba ceasul dot nostru HTML de la a fi doar textul prezentei ar trebui să fie un ceas, pentru care arată de fapt numărul și lucrurile pe care le pasă despre, și să fie de fapt ora. 

Deci, ce vom face este că suntem O să înceapă generarea acest cod HTML. Deci, în același mod în care am folosit să facă plus egal pentru numere întregi, puteți face acum asta pentru siruri de caractere, cu excepția că va să le înlănțui. Chiar? După cum am văzut cu punct de partid js, acest doar concateneaza toate aceste lucruri împreună. Astfel, puteți înlănțui diferite biți de HTML din variabile, sau bucăți de siruri de caractere pe care le scrie le și acest lucru doar permite într-adevăr să dinamic genera HTML, care este destul de rece. Deci, dacă aveți ceva foarte utilizator specific, acest lucru poate permite să faci asta. 

Deci, avem HTML, să am de gând să încerca și asigurați-vă că primesc acest drept. Deci, vom face unele în afara h1. Deci, ce este important să realizăm aici este faptul că aceasta este de fapt doar HTML. Chiar? Vă scriem real Codul HTML aici, e nu doar un șir în normal astfel încât ne-ar gândi la asta. Deci avem niște HTML. Aceasta este considerată un șir aici, deși. Și noi facem dată dot-- noi doriți să obțineți ore noastre. Din nou, dacă ar fi să te uiți up nimic despre data, v-ar spune toate acestea sunt atributele această dată are. Și aici e ceea ce se poate folosi pe ea. Deci, probabil că are lucruri cum ar fi obține ore, și de a lua de minute, și de a lua de secunde, și de a lua milisecunde, și cine știe ce altceva au. Dar daca te uiti in documentație, aceasta va fi tot acolo. 

Deci avem lua ore, iar apoi ne-am dori a înlănțui că aplice: eu sunt va muta acest aici. Deci, dacă suntem generatoare de acum, suntem generarea de fapt momentul, nu? Avem de ore, iar apoi ceea ce este între ore și minute? Ai un punct și virgulă, nu? Așa că vrem să facem ceva și virgulă aici. Și apoi ne-am dori să ne punem minute, deci în același mod că avem dată punct minim de ore, cum am putea obține minute noastre? E pur și simplu data la care au minim punct minute, pe care îmi place. E ca și cum, "oh, cât de face I a lua de minute mele? " Tocmai am lua de minute mele. 

OK. Și apoi avem un alt colon aici. Și apoi, dacă vrem să ne punem secunde, cum am putea obține al doilea nostru? Data dot primi secunde. Cred că e destul de cool. Și ce este important pentru dau seama, este că noi, de asemenea, Trebuie să închideți tag HTML aici, pentru că ar trebui să fie în continuare HTML valabile, așa h1. Se răcește. 

Deci, după care, putem face ceas punct HTML interior este egal cu HTML. OK? Deci, amintiți-vă cum am spus HTML interior practic ia tot ce este între două etichete care am vorbit despre și inserții sau manipulează tot ce este acolo? Deci, ce face acest lucru, dacă ne întoarcem la ceasul nostru, este faptul că ceasul se referă la tot în acest div. Aceasta este interioară HTML din acest ceas Id div. Și așa va schimba la HTML pe care tocmai l-am generat, care, care, sperăm, sperăm, sperăm, va arăta momentul potrivit acum. Vom vedea. Desigur. Atât de multe probleme tehnice. Doar-- lui Allison am off astăzi băieții mei de joc. OK, care funcționează. ceas dot HTML interior. A fost HTML Serios? De asemenea, aceasta este ceea ce se întâmplă. Când nu poți vedea ceva ce, doar uita-te la codul sursă. OK. Vrei să știi un lucru rece în jurul că vom face chiar aici? 

Audiența: Poți să faci cu majuscule? Literele de capital? Pentru că ai primi de ore, și apoi a lua de minute. 

ALLISON BUCHHOLTZ-AU: Se este să ore și get-- oh. Ai are-- stele de aur. Totul e un test, băieți. Promit a fost de lucru înainte de clasă. 

OK, dar ceva cool să știu este pe care le puteți also-- dacă uneori fișierele externe obtinerea un pic nebun, puteți de asemenea, doar le-a pus drept aici, care tinde să repari lucrurile. Cu excepția acest lucru este ca într-adevăr urât. Format Desigur totul. Asigurați-vă că totul e frumos. OK. 

Am vrut să fac toate demo-urile reci, și ei pur și simplu nu merge. OK. Script ceas var. Oricum, ceea ce este important este că aceasta este calea generală care le-ar formatați JavaScript. După cum puteți vedea, ea poate fi foarte delicat uneori, chiar și atunci când a fost literalmente de lucru în urmă cu două secunde. Sau acum nu două secunde, dar foarte, foarte recent. 

Deci, pentru a vă arăta cum ar trebui sa arate, și să vă arăt că nu sunt nebun, și că tot ceea ce este exact același, aceasta este ceea ce ar trebui sa arate. Ai doar de gând să faci această parte de sus aici, iar dacă vizualizați sursa pagină, dacă observați, el a făcut unele lucruri nebunești, am simplificat. De asemenea, credit pentru Tommy McWilliam, care de fapt ma ajutat să creeze aceste exemple, motiv pentru care am știu că lucrez. Pentru ca Tommy este un maestru JavaScript. Dar dacă observați, avem un anumit set. Avem functia noastra ceas aici. Acest lucru este cu JavaScript care am scris doar, sau o parte din ea. Am scris doar asta aici. Și el are un plus funcție care doar tampoane prin punerea un zero în fața unei scrisoare sau înainte de un număr dacă este doar una dintre ele. Deci, dacă observați, acest lucru este destul de mult exact ceea ce am scris. Ai ceva ceas variabilă care are elementul nostru, pentru a primi elementul de identitate, care este ceas. Avem interval nostru set funcție, asta e o funcție anonim care execută toate astea. Am unele șir de pornire HTML pe care le atunci dinamic genera prin care au unele antet h1, concatenarea cu obține orele, plus colon nostru, plus asistent procesul-verbal, plus un alt colon, plus secunde noastre, și în cele din urmă se încheie HTML pentru aceasta. Și apoi ne-am actualizat ceasul nostru dot HTML interior de HTML, și ne-am actualizat la fiecare 100 de milisecunde. OK? 

Vezi Promit că nu sunt nebun. Nu știu. Nu știu de ce nu mă place. Mă simt ca arata la fel, dar se pare că mă urăște. 

Să vedem dacă runda trei merge mai bine. Suntem pe cale de a vedea. Nu sunt sigur cum se va merge. Este toată lumea, cel puțin asistent contra, cum ar fi doar tema generală JavaScript, totuși? Sper că e cel puțin util, mai decât arătând că este un pic delicat. Dar setul problemă va fi foarte distractiv. Va fi mare. Nu va fi la fel de plictisitor ca aceasta, nu cred. Veți obține de fapt, la a se vedea lucrurile cu adevarat misto. 

Deci, nu în ultimul rând, vom încerca cel Twitter. Sunt foarte speriat acum, băieți. Nu știu cum se va merge. Dar să vă dau un mic mai gust, iar acest lucru este de fapt siruri de caractere manipularea și intrări, ceea ce vom face este, dacă observăm aici cu HTML-- acesta are un pic more-- avem unele zonă de text, care corespunde acest domeniu text aici. OK? Și că are o Id de text. Am restilizată un pic cu unele lățime și înălțime pe care le-am predeterminată, și ne-am H1, care este doar una noastră în afara că reprezintă personajele noastre din stânga. Am dat unele Id de caractere rămase, și apoi avem unele script aici, care sunt foarte sperând treia oară lui farmecul aici, băieți. 

Deci, ceea ce vrem să facem, în aceeași ordine de idei generale pe care le-am făcut cu js ceas dot și punct de partid JS așa cum am observat, este că am pornit de fapt hapsân lucrurile pe care le pasă, nu? Deci, în acest caz, există două lucruri pe care le pasă, OK? Un lucru pe care suntem de fapt un fel de căutați în și desen date de la, și un lucru care suntem de fapt în schimbare. Deci, există HTML nostru. Dacă aceasta este pagina web aici, ce-i datele pe care le căutați la? O să fie orice textul în cutii noastre, nu? Deci, indiferent de tip I aici. Asta e ceea ce vreau să știu, sau asta e ceea ce vreau să se uite la. Și ce va fi schimbarea pe pagina noastră de web? Personajele rămas. Deci, în același fel, vrem să începe prin inițializarea variabilelor care de fapt ține pe aceste elemente. OK? Deci, dacă avem unele var că este zona noastră de text, și avem niște var care a rămas. Chiar? Deci, acestea sunt de gând să deține aceste două lucruri. Deci, același tip de lucru, Document dot-- OK, eu sunt O să vă asigurați că acesta este de gând să lucreze acest moment. Sunt foarte neclintit. OK, deci dacă vrem nostru zonă de text, în conformitate la HTML noastre, care e identificator nostru? Care e Id-ul nostru? E doar de gând să fi text deoarece acest lucru creează zona noastră de text, OK, și Id-ul nostru este un text, astfel încât este cum o putem apuca de ce e acolo. OK, punct și virgulă. Am de gând să fie super precise despre acest lucru, pentru că vreau ca aceasta să funcționeze acest moment. OK, face același lucru, obține elementul de Id. Sunt foarte mirat ce are a provocat celelalte două să distrugeți. OK, atunci în acesta, ceea ce vrem pentru a avea acces? Ce este ID-ul de aici? Avem un alt ID-ul de la HTML nostru, ce este? Audiența: caractere rămase. ALLISON BUCHHOLTZ-AU: Caractere rămase. 

OK. Se răcește. Așa că Mă duc la scrie acest foarte repede. Mă duc să scriu acest al doilea. Deci, zonă de text. Ce este interesant este B function-- acolo sunt o mulțime de funcții care nu numai corespund ta mouse-ul, dar tastatura. OK? Deci, vă pot spune când orice tastă este apăsat, poți să faci lucruri de genul asta. Deci, cel pe care îl utilizăm este numit pe tasta sus, care spune, "dacă ați apăsat orice tastă de pe tastatura, atunci când utilizatorul a ridicat degetul lor la buton, iar cheia a devenit nepresată, atunci vom face ceva. " OK? Deci, acest lucru are sens, nu? Deoarece fiecare personaj noi de tip, vom de a avea pentru a ridica degetele off de ea, astfel încât atunci când cheia merge în sus, putem ști să decrementa caracterele noastre rămase. 

Deci avem ceva pe cheie sus, și în același fel, vom spune, "OK, atunci când facem asta, ne-am sunt de gând să creeze o funcție care este de gând să ia e ", în acest caz, și ceea ce vrem să facem este calcula numărul rămas. OK, deci hai să înceapă prin crearea unei variabile. Deci avem ceva r variabil, care va reprezenta câte caractere ne-au lăsat. OK? Știm că vom începe cu 140, iar dacă vrem să știm, să spunem, lungimea acestei șir care a fost de intrare, nu voi avea nici o idee cum am putea face asta? Doar pe off de evidente lucruri, cum ar fi dacă ne-am dorit de ore, am folosit lua ore. Știm că obiectul nostru este zonă de text, dar ar putea băieți cred că de ceea ce ar putea veni după ea? Orice idei? 

Deci, un fel asta de mai puțin intuitiv, dar e lungime punct valoare. Așa că dă-mi niște atribut valoare care este de fapt lungimea acestui șir. Deci va spun, "OK, eu caut la acest întreg șir în zona de text, și am de gând să-i spun tu cât de mult este. " Pentru că dacă ne amintim siruri de caractere sunt într-adevăr doar tablouri, astfel încât să putem lua doar lungimea lor. Deci avem asta. Se răcește. 

Atunci ce vrem să facem este noi nu doresc să permită utilizatorului pentru a introduce mai mult 140 de caractere, nu? Pentru că dacă spunem ca, "oh, tu doar au atât de mult rămasă, " și apoi să le facă asta oricum, am mințit. Și aceasta este o altă lucru care de activarea JavaScript- poate fi într-adevăr bun pentru, este de validare de utilizare și asigurându-vă că dvs. utilizator se încadrează în orice norme care le-ați furnizat acestora. Deci, dacă vrei să faci lucruri cum ar fi acest site sigur de intrare cineva adresa de e-mail, sau asigurându-vă că, atunci când introduceți două parole, ei potrivit. JavaScript poate face asta. Te-ar face așa ceva ", atunci când formularul este trimis, "sau cum ar fi, "Când Submit buton Forma este clic, verifica toate aceste lucruri. " Și putem face asta JavaScript. Deci, asta e doar ceea ce vom face aici. 

Deci, ceea ce ar putea fi o modalitate de a verifica dacă au trecut peste 140 de caractere? Ce se va întâmpla cu Valoarea noastră de r dacă încearcă? Va fi negativ, nu? Sau o să fie mai puțin mare sau egal cu zero. Deci, putem folosi un cazul în care este la fel ca orice altceva. OK? Și avem niște puncte zonă de text valoare, iar ceea ce facem noi aici este ne doar cutting-- ce este? Scuze. Acesta, vrem doar să se întoarcă fals. Am fost confuz. Toate amețit de la lucrurile nu funcționează. OK, vrem doar să return false, iar apoi ne-am doriți să le afișați caractere rămase, nu? Deci, cu ceas, am făcut ceva cu HTML interior, nu? În cazul în care ne-am propus o egală cu ceva variabil, astfel încât ceea ce s-ar putea să facem aici? Ce ne schimbă HTML interioară a? 

Audiența: ramas? 

ALLISON BUCHHOLTZ-AU: Suntem schimbare rămas. Bine, și ce facem noi doriți să-l setați egală cu? Va fi r, pentru că ar trebui să fie personajele noastre rămase. OK? Deci, eu sunt foarte nervos pentru a vedea dacă funcționează acum, dar vom vedea. Lăsați asta. E foarte repede. [Neauzit] OK. Din nou, Mă duc să-ți arăt. Indiferent de motiv, a mea nu decide să lucreze, dar ceea ce eu vă va arăta că este această este-- oh ar trebui să pună asta la. OK, am observat același tip de lucru aici, obtinerea de zona de text. 

De asemenea, dacă observați tip, dacă există vreodată ceva ce vrei să faci, și nu știi cum să faci ea, doar să faceți clic pe Vedeți sursa paginii, și ei vor să-ți spun. Uneori va fi criptat. Pentru PSET, va cripta totul, așa că doar arata ca păsărească. Dar dacă există vreodată un adevărat site-ul rece care vă place, dacă doar să faceți clic pe Vedeți sursa paginii, o să-ți spun cum se face. Deci, din nou, lucreze mai inteligent, nu mai greu. Și, după cum vedeți aici, toate de aceste lucruri sunt la fel. aceasta de aici ia doar câteva subșir că, am uitat exact ce face acest lucru. Dar este evident nevoie de unele subșir din valoarea de la zero la zece, și returnează false ce ar trebui să se oprească utilizatorul din mai introducere, și apoi, evident, actualizările HTML interior acolo. 

Se răcește. Take aways atat de mare începând de astăzi, experiment, uita-te la codul sursă pentru că te va ajuta foarte mult, și pentru toată lumea, uneori JavaScript poate fi greu de a lucra cu și nu funcționează întotdeauna așa cum vă așteptați să, dar doar continua să încercăm pentru că eu promit că voi. Promit toate aceste exemple au fost de lucru înainte de clasă. Nu înțeleg ce sa întâmplat. Am literalmente tot la fel. 

Un lucru mai mult că vreau doar să vă arată tipi care pot fi foarte utile este in-- ceea ce a fost de lucru înainte? Avem parte de muncă, nu-i așa? Așa cred. Da. Am făcut-o. Minunat. OK, deci un lucru care voi ar trebui să știe este jurnalul consola care am vorbit despre. Deci, consola punct jurnal de salut. Deci, acesta este un fel de Echivalent de activarea JavaScript-de printf. Deci, dacă doriți vreodată să inspecta variabilele dumneavoastră sau pentru a vedea ce se întâmplă acolo, ce ce poti face este, dacă ne inspecta elemente, este ceea ce vrei să mergi la, și te duci la consola, veți vedea că imprimat salut. 

Deci, am putea avea print orice am vrut. Dacă ne-am dorit pentru a imprima fundal punct fundal stil punct, ar trebui să poată vedea RGB triplu care vine. Sau nu. Am uitat exact cum te imprima o variabilă de genul asta, dar ar trebui să fie în măsură să imprima lucruri de genul asta. Acest lucru va fi foarte util pentru PSET atunci când încerci să manipuleze coordonate sau fleacuri. Asa ca schimba, de asemenea, această piesă în clasă. Acest lucru este diferit de ultimii ani, astfel încât doar să fie frumos la TFS dvs., sau TFS la ore de birou, mai degrabă, pentru că suntem fel de învățare, împreună cu voi. Dar jurnalul consolă a fost super, super- de ajutor pentru JavaScript anul trecut. Deci, le place. Aflați cum să-l folosească. Este mai ușor de utilizat decât GDB, astfel încât ar trebui să fie de cel puțin un punct în plus. Dar vă mulțumesc băieții sunt poartă cu mine. Îmi pare rău că mi Exemple pentru un motiv oarecare pur și simplu nu a vrut să coopera cu mine, dar eu Sper că a ajutat un fel de a te o puțin mai mult în zona de JavaScript. Și trimite-mi toate întrebările dvs. pentru săptămâna viitoare ca să pot fi reparate super, și voi aduce bomboane și chiar în plus bomboane pentru că acest lucru a fost ridicol. Dar voi sunt mari, și au o săptămână minunat.