[MUSIC JOC] 

DOUG LLOYD: Deci până acum suntem vechi Pro de la programare web, nu? Și am acoperit mai multe Limbile în videoclipuri individuale. Și acum să facem o mai, JavaScript. 

În primul rând o veste bună, JavaScript este un moderne de programare Limba de mult ca PHP, acesta Sintaxa este derivat din C, așa că e un loc bun pentru a începe. Este vorba despre fel de vechi ca PHP, precum și, au fost în jur de aproximativ 20 de ani. Acesta a fost inventat în jurul în același timp cu PHP. Și este, de fapt destul de activarea JavaScript- fundamentală pentru experiența utilizatorului de pe web. De fapt, există trei limbi pe care am ar spune un fel de a face până experiența utilizatorului de a interactiona cu site-ul, html, CSS, JavaScript și. Și așa acum hai sa vorbim un pic despre JavaScript. 

Vestea proastă, deși, cu JavaScript este că stabilește o mulțime de reguli de la sine, și apoi le sparge. Și JavaScript poate fi de fapt un fel de provocatoare pentru a învăța, pentru că este, spre deosebire de C și PHP, care sunt foarte structurate și au reguli foarte rigide pentru modul în care lucrurile pot funcționa. JavaScript are un fel de ajuns atât de flexibil că poate lucrurile nu sunt de gând să de lucru modul în care le așteptăm să, și poate că într-adevăr nu se poate învăța primul nostru limbaj de programare ca JavaScript. Deci, poate că nu stabilit reguli, și nu prea impune obiceiuri bune de codificare. Dar acum ne-am dezvoltat, sperăm unele obiceiuri bune de codificare, si astfel încât să putem începe să incursiune într-un pic de activarea JavaScript-. 

Pentru a scrie JavaScript, similar cu deschidere un fișier cu o extensie C punct C sau un fișier PHP cu o extensie punct PHP, tot ce trebuie să faceți este să deschideți un fișier cu extensie de fișier punctul js. Noi nu trebuie să aibă nici o speciale delimitatori cum am făcut în PHP. Acest tip de unghi Suport semn de întrebare PHP că suntem obișnuiți să de faptul că, așa cum spunem browser-ul nostru că ceea ce avem este JavaScript este prin includerea o într-un tag html, si vom vedea un pic despre cum se face că într-o clipă. 

Un alt lucru care face JavaScript diferite, însă, este faptul că se execută partea de client. Deci, amintesc cu PHP care nu am putut vedea cu adevărat PHP care a subliniat un site web. Dacă vom vizualizat vreodată sursă pagină, ne-ar numai vedea HTML care a fost generate de faptul că PHP. Dar JavaScript ruleaza partea de client. JavaScript ruleaza pe computer. Și de aceea poți să faci lucruri place adauga blocante. Dreapta? De blocare a anunțurilor se face de obicei de uciderea tuturor de JavaScript care se execută pe un anumit site. Și pentru că aceasta ar trebui să rula pe partea de client de mașini, Puteți opri doar JavaScript pentru a rula în întregime. Asta înseamnă, de asemenea, că atunci când folosiți un site web care include JavaScript, trebuie să trimiteți sursa JavaScript Codul, ca parte a răspunsului dumneavoastră http clientului, atunci când îl solicită. Și așa s-ar putea să nu doriți să utilizați JavaScript de a face lucruri cu adevărat sensibile cum ar fi informațiile care trece despre parolele utilizatorilor spate și mai departe, pentru că sunt de fapt va primi toate codul sursă, nu doar HTML care este generat, cum ar fi ar fi cazul cu spune PHP. 

Deci, cum putem să includă JavaScript în html noastră pentru a începe cu? Ei bine, similar cu CSS, de fapt, este un fel de modul în care o facem aici. Cu CSS avem etichete de stil. Și în interiorul acestor tag-uri de stil, putem defini o foaie de stil CSS. În mod similar cu JavaScript putem deschide tag-uri script, un alt tag html nu am vorbesc despre în videoclipul nostru html, și scrie JavaScript în între aceste tag-uri script-ul. De asemenea, deși, cum ar fi CSS, am ar putea lega în afara fișiere CSS și trageți-le în programul nostru în acest fel. Cu CSS putem, de asemenea,, scuză-mă, cu JavaScript putem specifica, de asemenea, sursa atribut al tag-ul script-ul pentru a lega în JavaScript separat, astfel încât să nu trebuie să-l scrie în între tag-uri script, am poate lega în utilizarea că tag-ul script-ul, de asemenea. Și, la fel ca și cu cazul în care CSS am recomandat că a fost, probabil, în interesul dumneavoastră pentru a scrie CSS-ul într-un fișier separat în cazul în care aveți nevoie să-l schimbe, face în mod similar, vă recomandăm pe care le scrie dvs. JavaScript în fișiere separate și de a folosi tag-uri script-ul sursa atribuie lega JavaScript în HTML, pagina web. 

Variabile Deci JavaScript, vom începem să vorbim despre sintaxa aici. Și vom trece prin acest tip de rapid, pentru că am făcut acest lucru în PHP, astfel încât acest lucru ar trebui să fie destul de familiar tuturor. Deci, variabile în JavaScript sunt foarte asemănător cu PHP variabile. Nu e nici un tip specificator, și atunci când introduce o variabilă, îl prefixul cu cuvântul cheie var. În PHP am face ceva ca aceasta, semnul dolar X. Așa am indicat o variabilă, dar nu, noi nu menționează tipul variabilei deloc. Ne-ar spune ceva de genul dolar semn X este egal cu 44 în PHP. Dacă am fost faci același lucru în JavaScript, am spune var x este egal cu 44. Deci este un fel de var modul nostru introducerii unei variabile. Asta e, probabil, un pic mai intuitiv decât variabila semn dolar. 

Din nou, din moment ce nu exista nici tipuri de date, am putea face acest lucru cu orice tip de date, siruri de caractere, orice altceva ar fi toate var. Condiționale, toate noastre prieteni vechi din C și PHP sunt încă disponibile, așa că avem în cazul în care, altceva în cazul în care, altfel, comutator și întrebarea marca de colon. Comutator rămas la fel de flexibil ca aceasta a fost în PHP, dar toate acestea te familiarizat cu de acum. Și în mod similar cu bucle sunt favorite vechi de timp, face în timp, și pentru încă disponibile pentru noi. Deci, deja știm o mulțime de de bază fel JavaScript fundamentelor doar în virtutea de a avea destul de un pic de cunoștințe acum despre C și PHP. 

Ce zici de funcții în JavaScript? Ei bine, similar cu PHP fiecare funcție este introdus cu cuvântul cheie funcția. Tu spui funcție, și apoi începe să se definească funcția. Ce este un pic diferit despre JavaScript, deși este capacitatea de a avea ceea ce se numește o funcție anonim. Astfel încât să puteți defini funcții care nu au un nume. Acest lucru este ceva ce într-adevăr nu s-au mai văzut până acum. Vom folosi într-adevăr conceptul de de o funcție anonim un pic mai târziu în acest video, pentru că o să face un pic mai mult sens în contextul atunci când vom vedea într-o situație particulară care l-am conceput aici. Dar să ia doar o privire la ceea ce un simplu JavaScript Funcția ar putea arata ca. 

Așa că am mers mai departe și deschis IDE mea CS50 si am rulat deja Apache pentru a începe de rulare serverul meu. Și am acest fișier deschide numit home.html. Și voi mări un pic aici. Și, practic, puteți vedea Home.html este doar o adunatura de butoane. Și mă susținând la partea de sus aici că aceasta este secțiunea JavaScript Materiale. Deci, există o grămadă de butoane aici, dar ce, de fapt fac aceste butoane? 

Ei bine, vom peste cap de la IED mea, și am deschide home.html aici. De la bun început, aici e unde am leagă în toate fișierele mele sursă JavaScript. Dreapta? Deci, am anonymous.js, clock.js, Sunt folosind atributul sursă de tag-ul script-ul pentru a lega în fișierul. Deci, eu nu am scris nici un JavaScript direct în acest fișier, dar am tras în toate JavaScript Am scris separat. Și dacă vom derula aici, acest ar trebui să arate toate familiar oarecum cu un pic de noi sintaxă. Avem aici tag header pentru funcții și apoi pe un buton. Am o intrare care este un buton de tip, și se pare atunci când am faceți clic pe el, Am de gând să sun unele Funcția Data de alertă. Și acest lucru este modul în care putem fel de amesteca un pic de JavaScript si HTML. Acestea joacă, de fapt destul de frumos împreună, și așa pare când Dau click pe acest buton, am de gând pentru a apela o dată de alertă funcție. Și au în mod similar am definit comportamente pentru toate celelalte butoane care sunt pe acea pagină home.html, pe care le vom păstra returnarea la timpul acestui film. Dar să ne întoarcem la aici și să ia o privire la clock.js, care este Fișier JavaScript pe care am a scris că are această primă funcție vom arunca o privire la. După cum puteți vedea, încep JavaScript meu funcționează cu funcția de cuvinte cheie, și am dat asta o nume, se numește data de alertă. In interiorul acolo, am aparent crea o nouă variabilă locală numită data curentă. Și am de gând să atribui un egal cu o nouă dată. Și am putea obține într-o mulțime de detaliu cu privire la ceea ce o dată este, și într-adevăr este atât de JavaScript mare care nu putem, eventual, acoperi totul într-un singur film. Dar este suficient să spun, acest lucru se întâmplă pentru a reveni la mine un articol de date care încapsulează data și ora curentă. Sunt stocarea că într-o variabilă care sunt aparent va alerta data curentă. 

Ei bine, ceea ce face de alertă Data aspectul actual ca? Să aruncăm o privire la fișierul în sine înapoi peste în fereastra browser-ului. Deci, din nou, acest lucru este butonul pe care am au legat de, această funcție pe nume. Si l-am faceți clic pe acolo și uite ce a făcut, el a alertat. Acesta a apărut acest tip de cutie spune mi că ora curentă este, aparent că la 4 noiembrie, la 10:43:43 dimineața. Și dacă l-am faceți clic din nou, acum Este o câteva secunde mai târziu, nu? Deci asta e tot această funcție nu. Când m-am faceți clic pe acest buton, se apare un mesaj de avertizare pentru mine. Deci, există într-adevăr nu e prea mult pentru a funcțiilor care este diferit de la PHP, doar un pic de noi sintaxă care vine cu de lucru cu JavaScript. 

Matrice în JavaScript sunt destul de simplă. Pentru a declara o matrice, utilizați sintaxa paranteze drepte că suntem familiarizați cu de la PHP. Și similar cu PHP, am De asemenea, se pot amesteca tipuri de date. Deci această matrice, atât din aceste tablouri ar fi fi perfect legitimă JavaScript. Unul care este toate numere întregi, și una care este amestecat diferite tipuri de date. 

Ce e ceva foarte diferit în JavaScript, deși? Asta e ideea unui obiect. Asa ca, probabil ați auzit de Programare orientata pe obiecte. Noi nu facem o mulțime de ea în CS50, dar vom face un pic de ea aici, în contextul JavaScript. Acum JavaScript are capacitatea de a se comporta ca un programării orientate pe obiecte limbă, dar nu este în sine exclusiv orientate obiect limbaj de programare. Și aceasta vine din nou Înapoi la ce am spus, poate fi foarte dificil de a învăța JavaScript ca prima programare limbă, pentru că nu se potrivesc într-adevăr un anumit paradigmă. 

C pe de altă parte este un limbaj de programare funcțional. Dacă vrem să, funcții sunt un fel de om seful mare, nu? Ei dictează ceea ce se întâmplă orice altceva. Vrem să se schimbe variabilele, numim funcții. Facem lucruri la funcții. Obiecte schimb, într-un obiecții limbaj orientat, obiecte fel de a deveni vedeta și Funcțiile devenit un fel de secundare. Dar ceea ce este un obiect, ceea ce este această noțiune a unui obiect? Ei bine, în cazul în care vă ajută, cred că cu privire la aceasta, la prima fel de ca o structură C sau o struct că am învățat despre înainte. În C, o structură conține o serie de domenii, și poate că acum ar putea începe să numesc aceste proprietăți domenii. Dar proprietățile niciodată cu adevărat sta pe cont propriu, nu? Dacă am defini o structură de o masina ca acest lucru cu următoarele două câmpuri sau proprietăți, una o întreg pentru anul masinii și un alt personaj 10 o șir de modelul masinii, Pot spune ceva de genul asta, Pot declara o nouă variabilă de tip Herbie masina struct. Și apoi pot spune ceva ca este egal cu herbie.year 1963, și herbie.model egal Beetle. Asta e ok. Sunt folosind câmpurile din Contextul a structurii, dar am putut niciodată doar spune ceva de genul asta. Dreapta? Nu pot utiliza numele câmpului independent de structura. Este un fel de lucru fundamental. 

Deci domenii fiind fundamental pentru structurile C sunt foarte asemănătoare cu proprietăți fiind fundamental la obiecte JavaScript. Dar ceea ce le face deosebit de interesant este că obiectele pot avea, de asemenea, ceea ce sunt numite metode, care sunt într-adevăr doar un cuvânt fantezist pentru funcții care sunt inerente obiectului, de asemenea. Deci, este o funcție care poate fi doar numit în contextul unui obiect. Doar un obiect care a definit această funcție în interiorul ei, dacă te gândești la o struct, funcția este definită în interiorul cele care definesc acolade ale structurii. Deci, aceasta înseamnă doar ceva la structura. Și asta e un fel de ceea ce facem aici cu obiecte și metode. E practic ca suntem definind o funcție care are sens doar pe o obiect special, și așa ne-am apela că o metodă a obiectului. Și noi nu putem numi asta funcție independentă a obiectului, la fel ca nu putem spune an sau model independent de struct în C. 

De programare, astfel funcțional paradigme arata ceva de genul asta. Funcție și apoi, când treci în obiectul ca un parametru. Într-un programării orientate pe obiecte limbi, acest tip de devine oglindită, si ne-ar gândi despre place asta, object.function. Deci, un fel de punct care Operatorul din nou implicând că este un fel de proprietate sau atribut al obiectului în sine. Dar aceasta este ceea ce un obiect limbaj de programare orientat s-ar putea face pentru a face o funcție apel la o metodă, din nou, ceea ce este doar un cuvânt special pentru o funcție care este inerentă la un obiect. Aceasta este ceea ce că sintaxă ar putea arata ca. Și așa vom începe pentru a vedea unele dintre acest lucru în contextul JavaScript. 

Vă puteți gândi, de asemenea, despre un obiect un fel de un tablou asociativ, care suntem familiarizați cu de la PHP. Amintiți-vă un tablou asociativ permite noi să avem perechi de valori-cheie, în schimb de a avea indici 0, una, două, trei, și așa mai departe ca și cum suntem obișnuiți să de la C matrice. Matrice asociative pot hartă cuvinte, cum ar fi video PHP, am vorbit despre topping de pizza. Și astfel am avut o serie numite pizza, iar noi brânză avut a fost o cheie și $ 8,99 a fost valoare, iar apoi a fost o cheie pepperoni, $ 9.99 a fost o valoare, și așa mai departe. Și astfel ne putem gândi, de asemenea, despre un obiecții fel de similar cu un asociativ matrice. Și astfel această sintaxă aici ar crea un nou obiect numit Herbie cu două proprietăți interior. An, care se atribuie valoarea 1963, și model, care este atribuit sirul Gândac. 

Și observați că aici eu sunt, folosind ghilimele simple în JavaScript. Puteți folosi ghilimele simple sau duble atunci când vorbim despre siruri de caractere. E doar convențional cazul în care cele mai multe ori când scrii JavaScript, utilizați doar ghilimele simple. Dar mi-ar prinde ghilimele aici, și care ar fi foarte bine, de asemenea. 

Deci, amintiți-vă cum în PHP am avut această noțiune de o pentru fiecare buclă, care ne-ar permite pentru a itera peste tot din valoarea cheie perechi de o asociativă matrice, pentru că am nu au avut capacitatea de a repeta această prin 0, unu, doi, trei, patru, si asa mai departe? JavaScript are ceva foarte similar, dar nu este numit un pentru fiecare buclă, se numește un în bucle. Deci, dacă i-am spus ca mi- acest, pentru cheie var în obiect, asta e un fel de a spune similare pentru fiecare ceva ca pe ceva. Dar tot ce fac aici este iterarea prin toate cheile de obiect meu. Și în interiorul cret bretele acolo, aș utilizați obiect cheie paranteze pătrate pentru a se referi la valoarea la acea locație cheie. 

Alternativ, există chiar o altă abordare. Dacă doar am grijă doar despre valori, pot să spun pentru cheie de obiect, și de a folosi doar tasta interior. Deci, pentru cheie var în obiect, am pentru a utiliza paranteze pătrate obiect cheie în interiorul buclei. Pentru cheie var de obiect, pot trebuie doar să utilizați cheie în interiorul buclei, pentru că eu sunt doar în mod special vorbind despre valorile de acolo. 

Așa că haideți să aruncăm o poate uita-te la diferenta doar să-ți arăt rapid diferența dintre patru de în și pentru a, cu o foarte specifice matrice, pe care o avem aici, saptamana matrice. Așa că trebuie să găsească o nouă gamă pe care am umplut cu șapte corzi, Luni marți miercuri, Joi, vineri, sâmbătă, duminică. Și vreau să repeta acum prin această matrice, imprimarea anumite informații. Dacă am folosi o buclă de pentru a imprima informații, ce crezi că am de gând pentru a obține? Ei bine, haideți să aruncăm o privire. Și înainte de a ne sari peste la fereastra browser-ul meu, știu doar că console.log este un fel de un mod de a face un F de imprimare în JavaScript. Dar ceea ce este consola? Ei bine, asta e ceea ce vom pentru a merge aruncăm o privire la acest moment. 

OK, asa ca ne-am întors aici în fereastra browser-ul meu, și am de gând să deschidă up Instrumentele mele de dezvoltare. Din nou, eu sunt doar lovind F12 pentru a deschide instrumente pentru dezvoltatori. Și observați că aici, la top Am ales consola. Deci aceasta este noțiunea de o consolă dezvoltator, și ne va permite să imprima informațiile afară, un fel de terminal, dar după cum veți vedea un pic mai târziu, putem, de asemenea, informații în tip de a interacționa cu site-ul nostru. Am de gând pentru a mări un pic aici, și voi acum click pe la încercare. Și patru în test-- nu voi vă arată codul pentru ea, chiar acum, dar veți obține, dacă descărca codul sursă care este asociată cu această video-- este doar faptul că în buclă că am văzut doar o în al doilea rând în urmă pe diapozitiv. 

Deci, voi faceți clic pe care buton, și aici, aici e ceea ce a imprimat în consolă, 0, unul, doi, trei, patru, cinci, şase. Nu am imprima informațiile în interiorul acele locații matrice, pentru că am folosit o de loop. Și în interiorul corpului buclei, am doar imprimate cheie nu obiecții cheie. Dar dacă acum clar consola mea, și eu comuta la pentru a testului, și patru de testare Eu spun că am folosi pentru a buclei în schimb și imprima cheie, dacă faceți clic pe asta, acum am obtinerea de elemente reale din interiorul obiectului meu sau array mea în acest caz. Matrice mea de zile lucrătoare. Am imprimate luni, Marti miercuri. Deci asta e diferența dintre o în buclă, care afiseaza doar tastele dacă utilizați doar cheie în interiorul corpului buclei, și o pentru a bucla, care imprimă în valorile dacă utilizați doar cheie în interiorul corpului buclei. 

Bine, cum putem acum începe să înlănțui siruri de caractere și poate amesteca unele variabile cu interpolare ca și cum am fost în stare să facă în PHP? Ei bine, suntem destul de familiar cu acest din PHP. Acesta este modul în care ne-ar face folosind Operatorul punct de înlănțui siruri de caractere. În JavaScript, însă, vom folosi de fapt, ceva numit operatorul plus, care este poate chiar un pic mai mult intuitiv, nu? Suntem adăugarea de o grămadă de siruri de caractere împreună. Deci, haideți să ne întoarcem de peste si a vedea ce aceasta va imprima dacă noi încercăm să imprima toate informațiile din săptămână matrice. Bine, deci sub aici în șir concatenare, Am două opțiuni, clădire șir V1 și V2 apoi construcție șir. Și vom vedea de ce am nevoie V2 într-o secundă. Dar voi să faceți clic pe șir de construcție V1, care este codul am fost a lua doar o privire la, console.log cu toate plusurile. Să vedem dacă acest printuri ce ne asteptam. 

Luni este numărul zi 01 a săptămânii, Marți este numărul zi 11 a săptămânii. Ei bine, ceea ce am încercat a face nu a fost minim l pentru a imprima luni este numărul zi o, marți este ziua pe locul doi. Dar se pare ca eu sunt întotdeauna imprimarea unul. Ei bine, de ce este asta? Ei bine, se pare, să ia o privire la acest mic fragment de cod aici. Observați că am utilizați plus Operatorul in doua contexte diferite. 

Și așa că aici e în cazul în care, poate, lucruri că am fost un fel de a spune, Oh, e atât de mare. Nu mai face cu tipuri de date. Dar aici e în cazul în care faptul că ne pierdem tipuri de date poate fi de fapt un pic de o problemă pentru noi. Acum că operatorul plus este utilizat pentru a înlănțui siruri de caractere și se adaugă numere împreună, JavaScript are pentru a face cele mai bune ghici sale cu privire la ceea ce vreau să facă pentru mine. Și în acest caz, ghicit greșit. Aceasta zi doar concatenate, care ar fi 0, unul, doi, trei, patru, cinci, sau șase, și apoi doar concatenate care apoi concatenate unul. Nu a fapt adăugați-le împreună. Și astfel aceste limbi, PHP și JavaScript, că rezumate departe această noțiune de tipuri, nu trebuie să mai ocupe de ea. Ei nu au încă tipuri sub capota. Și putem, în situații ca aceasta, efectul de levier acest fapt prin a spune ceva ca poate acest lucru, care spune JavaScript, de Astfel, trata acest lucru ca un întreg, nu-l trateze ca pe un șir de caractere, chiar deși suntem amestecarea siruri de caractere și numere întregi aici. 

Este doar unul din acele lucruri că se pare că atât de mare în context că nu trebuie să mai face cu tipuri, dar, uneori, veți rula într-o situație exact ca în cazul în care acest lucru faptul că nu ai control asupra tipuri poate intoarce impotriva pe tine dacă nu ești atent. Și așa dacă ne pop înapoi peste la IDE, eu sunt O să clar consola mea din nou, și am de gând să faceți clic pe string clădire versiune doi, care este locul unde am folosi această funcție analizare Int. Acum este imprimarea informații pe care Aștept. Luni numarul zi, marți este ziua numărul doi, și așa mai departe. 

Deci, hai sa vorbim despre funcțiile din nou. I-am promis ne-ar vorbi despre anonim funcții, iar acum contextul pentru care a sosit în sfârșit. Deci, înainte de a face acest lucru, hai să vorbim din nou despre matrice pentru o secundă. Deci, matrice sunt o specială cazul unui obiect. De fapt, totul în JavaScript este de fapt un obiect. Deci, sunt un funcții caz special a unui obiect, întregi sunt un special cazul unui obiect, dar în mod special tablouri au un număr de metode. Amintiți-vă că sunt obiecte, ele pot avea proprietăți și metode. Ei au o serie de metode care pot fi aplicate acestor obiecte. Există o metoda numita dimensiune, array.size, care va reveni la tine, ca te-ar putea aștepta numărul de elemente din matrice dumneavoastră. array.pop, un fel de noțiunea noastră de popping off de o stivă, dacă vă amintiți din stive nostru video, elimină ultimul element din matrice. Array.push adaugă un element nou la sfârșitul unei matrice. array.shift este un fel de ca DQ, se îmbină în chiar primul element al unui tablou. 

Dar există, de asemenea, un alt special metodă de o serie numită hartă. Și aceasta este un fel de concept interesant. Deci, ce este ideea de o hartă? Veți vedea de fapt acest lucru în mai multe alte limbi, si nu vorbim despre o un fel de cartografi harta aici, vorbim despre o funcție de cartografiere. În contextul suntem vorbim aici, o hartă este un noi special operație poate efectua pe o serie să aplice o anumită funcție la fiecare element din matrice. și așa ne-ar spune în acest caz, poate array.map, și în interiorul de ea, suntem trece în harta este o funcție care ne-o dorim să fie aplicate la fiecare element:. Deci, este un fel de analog, folosind o buclă pentru a itera peste fiecare element de și se aplică un anumit funcționează la fiecare element, tocmai de activarea JavaScript-a construit în acest noțiune de o cartografiere care pot fi aplicate. Și aceasta este o mare de context vorbesc despre o funcție anonim. 

Așa că haideți să spunem că avem această matrice de numere întregi. Se numește Nums, și are cinci ce este în ea, unu, doi, trei, patru, cinci. Acum vreau să harta unele Funcția pe această matrice. Vreau să am aplica o funcție la fiecare element de matrice. Ei bine, să spunem că ceea ce vreau să faci este doar dubla toate elementele. Ceea ce am putea face este doar folosi o buclă pentru var I este egal cu 0, I este mai mică de sau egal cu 4, eu plus, plus, și apoi dublu fiecare număr unic. Dar pot face, de asemenea, ceva de genul asta. Pot spune Nums a fost anterior unu doi trei patru cinci, acum, însă, mi-ar plăcea să se aplică o cartografiere pe această matrice unde doriți de a dubla fiecare număr. Și exact ce se întâmplă aici. Dar observați ceea ce am trece ca argument pentru hartă. Aceasta este o funcție anonim. Și observați nu am dat Această funcție un nume, Am dat-o doar o lista de parametri. Și astfel acesta este un exemplu de o funcție anonim. 

Noi, în general, nu s-ar numi aceasta Funcția în afara contextului de hartă. Suntem o definire ca un parametru la harta, așa că nu prea trebuie să aibă un nume pentru ea în cazul în care Singurul lucru care ii pasa este harta și este definit drept există în interiorul hartă. Și astfel aceasta este o funcție anonim. Noi nu am putut a face acest lucru în prealabil. Harta unele funcție care acceptă un parametru, num, și ceea ce face ca functia este întoarce NUM ori 2. Și așa după acest cartografiere a fost aplicat, acest lucru este acum ceea ce arata Nums cum ar fi, două, patru, șase, opt, 10. Și vom pop pe la meu fereastră de browser și doar aruncăm o privire la acest foarte repede, de asemenea. 

Deci, am un alt buton aici în pagina mea numit dublu. Și atunci când fac clic dublu, și se spune mă înainte de a fi unul, doi, trei, patru, și cinci după două, patru, șase, opt, 10. Și dacă mă duc înapoi și faceți dublu clic din nou, două, patru, șase, opt, 10. Și apoi, după, patru, opt, 12, 16, și apoi 20. Și ce fac in aceasta functie? Ei bine, dacă ne-am pop pe la IDE, și Am trage funcția mea anonim, aici pe linia șapte la 13, sunt a face un lucru fantezie pic aici, dar eu sunt doar imprimarea ceea ce este în prezent în matrice. Apoi, pe linia 16, 17, și 18, nu e harta mea. Acest lucru este în cazul în care aplic această dublare Funcția de fiecare singur element. Și apoi un pic mai jos, Eu doar fac același lucru Făceam înainte, cu excepția acum sunt imprimarea conținutul matrice dupa ce. Dar tot ce am făcut aici este folosi doar o funcție anonim pentru a mapa peste o serie intreaga. 

Deci, încă o temă de mare pentru a vorbi despre în JavaScript este noțiunea unui eveniment. Un eveniment este ceva care se întâmplă atunci când un utilizator interacționează cu dvs. de web pagină, așa că poate fac clic ceva, sau poate pagina este terminat de încărcare, sau poate au mutat mouse-ul peste ceva, sau le-am scris ceva într-un câmp de introducere. Toate aceste lucruri sunt evenimente care au loc pe pagina noastră web. Și JavaScript are capacitatea de a sprijini ceva numit o tratare a evenimentului, care este o funcție de apel invers, care răspunde la un eveniment html. Și ce e un funcție de apel invers? Ei bine, e doar un alt general, nume pentru o funcție anonim. Este o funcție care răspunde la un eveniment. Și acest lucru este în cazul în care am ajuns la Ideea de a lega anumite funcții la un anumit atribut HTML. Cele mai multe elemente HTML au sprijin pentru un atribut că nu a vorbit despre în HTML videoclip pentru ceva de genul pe clic sau pe hover sau pe sarcină, toate aceste evenimente pe care le puteți scrie apoi funcții care se ocupă cu aceste evenimente atunci când aceste evenimente apar pe pagina dvs. web. 

Și astfel poate HTML arata ceva de genul asta. Și am două butoane aici, un singur buton și butonul de două, și aici am în prezent, nimic definit, dar acest lucru este în cazul în care atributul pe clic este aparent o parte din tag meu html. Deci, se pare că, atunci când am defini ceea ce este întâmplă în interiorul acestui atribut, o să fie o JavaScript funcție care răspunde la eveniment probabil de clic pe Butonul unul sau doi buton. 

Ce fel de misto despre acest lucru este ne poate scrie un handler eveniment generic. Și această tratare a evenimentului va a crea un obiect eveniment. Și obiectul eveniment ne va spune care dintre cele două butoane a fost făcut clic. Acum, cum se că munca? Ei bine, s-ar putea arata ceva de genul asta. Deci, vom defini mai întâi butoanele noastre pentru a avea un răspuns la apel invers Funcția care va fi numit atunci când butonul este apăsat, vom suna eveniment numele de alertă. Și observa in ambele cazuri suntem trece în acest parametru eveniment. Deci noi numim această funcție sau atunci când această funcție este declansata de eveniment se întâmplă, se va crea acest obiect eveniment și să-l dați ca un parametru pentru a alerta nume. Și acel obiect eveniment este O să conțină informații despre care buton a fost apasat. Și cum se face asta? Ei bine, s-ar putea arata ceva de genul asta. Deci, acum în separat meu Fișier JavaScript, aș putea trebuie să găsească această Funcția nume de alertă, care acceptă din nou acest parametru eveniment. Si apoi aici este locul unde Detectez Butonul care a fost declanșată, declanșare var este egal eveniment dot element sursă. Care a fost sursa care a creat acest obiect eveniment, care a fost adoptată în? A fost un buton sau a fost buton doi? 

Și apoi aici tot ce fac este imprimarea trigger.innerhtml. Ei bine, în acest caz, în acest context, trigger.innerhtml este doar ceea ce este scris pe butonul. Este doar așa se întâmplă dacă sărim înapoi pentru un al doilea, care ar fie ce e în între aceste tag-uri buton. Acesta va fi unul sau buton buton două. Și haideți să aruncăm o privire la modul în care acest eveniment ar fi handler uite dacă am avea-l rulează în practică. 

Deci, în primul rând, ai deschis events.js, care este fișierul JavaScript unde Am definit această funcție. Și, după cum puteți vedea, este destul de mult exact ceea ce tocmai am vazut pe diapozitiv în urmă cu un al doilea. Și voi merge pe la Pagina de start am fost folosind. Și am aici buton una și două buton. Și voi faceți clic pe butonul o. Ați făcut clic pe butonul unu, dacă Puteti vedea aici, în alertă. BINE. Faceți clic pe butonul doi, clic pe un buton două. 

Deci, ambele butoane au același apel de funcție, nu? Amândoi au fost nume de alertă eveniment, dar acest obiect eveniment care devine creat, atunci când facem click pe ne spune care a fost apasat butonul. Noi nu a trebuit să scrie două separate, funcții sau afacere cu care au pentru a trece orice informații suplimentare. Noi doar bazându-se pe ce JavaScript va face pentru noi, care este de a crea ca un fel de obiect de eveniment în numele nostru. Există o mulțime mai mult decât JavaScript ceea ce ne-am acoperit în acest film, dar având aceste fundamentală ar trebui să te destul de moduri de mult timp la tot de învățare vei trebuie să știți despre acest limbă interesant. Sunt Doug Lloyd. Acest lucru este CS50.