[Prehrávanie hudby] 

DOUG LLOYD: Takže teraz sme starí profesionáli na webové programovanie, že jo? A my sme sa vzťahuje niekoľko jazykov v jednotlivých videí. A teraz poďme urobiť ešte jeden, JavaScript. 

Prvá dobrá správa, JavaScript je moderný programovací jazyk podobne ako PHP, ktorého syntax je odvodený z C, takže je to dobré miesto pre štart. Je to asi tak stará ako PHP, rovnako, čo bolo okolo 20 rokov. To bolo vynájdené v okolí v rovnakom čase ako PHP. A JavaScript je vlastne celkom zásadné pre užívateľské skúsenosti z webu. V skutočnosti, tam sú tri jazyky, ktoré som by som, že druh tvorí užívateľské skúsenosti interagujúcich s webovými stránkami, html, css, a JavaScript. A tak teraz poďme hovoriť Niečo málo o JavaScript. 

Zlou správou, aj keď s JavaScript je že stanovuje niekoľko pravidiel pre seba, a potom je to poruší. A JavaScript môže byť v skutočnosti druh náročné sa učiť, pretože je to na rozdiel od C a PHP, ktoré sú veľmi štruktúrované a majú veľmi prísne pravidlá na to, ako sa veci môžu pracovať. JavaScript má druh z dostali tak flexibilné že možno sa veci nebudú pracovať tak, ako očakávame, že, a možno by sme naozaj nemôže učiť naše prvé programovací jazyk ako JavaScript. Možno preto, že to nie je stanovila nejaké pravidlá, a to nie je naozaj presadzovať dobré kódovanie návyky. Ale teraz sme sa snáď vyvinuli niektoré dobré kódovanie návyky, a tak môžeme začať vpád do JavaScriptu trochu. 

Ak chcete písať JavaScript podobný otvor up súboru C s bodkou C predĺženie alebo súbor PHP s príponou dot PHP, všetko, čo musíte urobiť, je otvoriť súbor s príponou bodkou js. Nepotrebujeme mať nejaké špeciálne oddeľovača ako sme to urobili v PHP. Taká uhla držiak otáznik PHP že sme zvyknutí od toho, na ceste povieme náš prehliadač, že to, čo máme, je JavaScript je zahrnutím to v html tagu, a uvidíme trochu o ako to urobiť, že za chvíľu. 

Ďalšia vec, ktorá robí Odlišné JavaScript však je, že beží na strane klienta. Takže pripomenúť, že s PHP by sme nikdy naozaj vidieť PHP, ktorý zdôraznil, webové stránky. Ak by sme niekedy prezeral zdrojová stránka, my by sme len pozri html, ktorý bol generované, že PHP. Ale JavaScript beží na strane klienta. Váš JavaScript beží na vašom počítači. A to je dôvod, prečo si môžete robiť veci, ako je pridať blokátory. Je to tak? Blokovanie reklám sa zvyčajne vykonáva zabíjať všetky JavaScriptu ktorý je spustený na konkrétne webové stránky. A pretože by musel spustiť na vašom počítači strane klienta, stačí zastaviť JavaScript pre beh úplne. To tiež znamená, že pri použití webová stránka, ktorá obsahuje JavaScript budete musieť poslať zdroj JavaScript kód ako súčasť svojho http odpovede klientovi, ak o to požiadajú. A tak možno nie chcete používať JavaScript robiť naozaj citlivé veci ako je odovzdávanie informácií o používateľských hesiel a späť ďalej, pretože sú v skutočnosti bude dostávať všetky zdrojového kódu, nielen html, ktorý je generovaný, , Ktorá by mohla byť v prípade povedzme PHP. 

Tak ako sme sa zahŕňajú JavaScript v našej html začať? No, podobne ako CSS, v skutočnosti, je niečo o tom, ako to robíme tu. S CSS máme tagy štýl. A vo vnútri týchto štýle značiek, môžeme definovať CSS štýlov. Podobne sa JavaScriptu môžeme otvoriť značiek skriptu, ďalšie html tag my nie hovoriť o tom, v našej html video, a písať JavaScript medzi týmito značkami script. Tiež aj keď, ako CSS, sme mohol spojiť v vonku CSS súborov a vytiahnuť ich do nášho programu, ktorý spôsobom. S CSS môžeme tiež, prepáčte, Javascript môžeme tiež určiť zdroj atribút tagu script prepojiť v JavaScripte zvlášť, takže sa nemusíte musí napísať do medzi značky skriptu, my môžete prepojiť ju s použitím že tag skript rovnako. A rovnako ako v prípade s CSS kde odporúčame, aby to bolo pravdepodobne vo vašom najlepšom záujme, aby písať Váš CSS do samostatného súboru v prípade, je potrebné ho zmeniť, Podobne tomu odporúčame že napíšete JavaScript v samostatných súboroch a používať zdroj tagy skriptu pripisovať zviazať si JavaScript do html, svoje webové stránky. 

Takže JavaScript premenné, budeme začnite tu hovoriť o syntaxe. A pôjdeme cez tento druh rýchlo, preto, že sme urobili to v PHP, takže to všetko by malo byť docela oboznámení. Takže premenné v JavaScripte sú veľmi podobné PHP premenné. Neexistuje žiadny Špecifikátor typu, a keď si predstaviť premennú, ho prefix pomocou kľúčového slova var. V PHP budeme robiť niečo takto, znak dolára x. To je, ako sme naznačili variabilné, ale nie, my nezmieňujú typ premenné vôbec. Radi by sme povedať niečo podobné znak dolára x rovná 44 v PHP. Ak by sme robili to isté v JavaScripte, by sme povedali var x rovná 44. Takže var je trochu našej ceste zavedenie premenné. To je možno trochu viac intuitívne než len znak dolára premenné. 

Opäť platí, pretože nie je dátové typy, mohli by sme to urobiť s ľubovoľný typ dát, struny, Čokoľvek iné by všetci var. Podmieňovací spôsob, všetky naše starí priatelia z C a PHP sú stále k dispozícii, takže ak máme, else if, else, switch a otázka Značka hrubého čreva. Spínač zostáva tak flexibilný, ako to bol v PHP, ale všetky z nich, že ste oboznámení s teraz. A podobne sa slučky staré favoritov chvíľu, robiť, zatiaľ čo, a ešte k dispozícii. Takže už vieme, že mnoho z Základné JavaScript druh základov Len na základe ktorej majú celkom dosť vedomostí teraz o C a PHP. 

Čo funkcií v JavaScripte? No, podobne ako PHP každá funkcia je predstavil pomocou kľúčového slova function. Hovoríte, že funkcie, a potom vás začína definovať funkciu. Čo je to trochu inak o JavaScriptu, hoci je schopnosť mať čo sa nazýva anonymný funkcie. Takže môžete definovať funkcie že nemajú meno. To je niečo, čo sme Naozaj ešte nevideli. Budeme naozaj používať pojmu z anonymný funkcie o niečo neskôr v tomto video, pretože to bude aby trochu väčší zmysel v kontexte keď ju vidíme v konkrétnej situácii že som tu remeselne. Ale poďme stačí sa pozrieť na to, čo jednoduchého JavaScriptu Funkcia by mohla vyzerať. 

Tak som išiel dopredu a otvoril môj CS50 IDE a už som bežať Apache začať svoj server beží. A ja mám tento súbor otvoriť tzv home.html. A ja budem priblížiť trochu tu. A v podstate, môžete vidieť Home.html je len banda tlačidiel. A ja som tvrdil hore tu že sa jedná o úsek JavaScript materiály. Takže je tu veľa tlačidiel tú, ale čo tieto tlačidlá vlastne robiť? 

No, budeme cez hlavu na moje IED, a ja som home.html otvoriť tu. Na samom počiatku, tu je miesto, kde som spájajúcej vo všetkých mojich zdrojových súborov JavaScript. Je to tak? Takže mám anonymous.js, clock.js, Som pomocou atribútu zdroja tagu script prepojiť do súboru. Takže som nenapísal akýkoľvek JavaScript priamo do tohto súboru, ale ja som vytiahol na všetky JavaScript som napísal samostatne. A ak budeme posúvať tu, to dole mali všetci vyzerajú trochu povedomý s trochou novou syntaxou. Máme tu hlavičky tag pre funkcie a potom tlačidlo. Mám vstup, ktorý je tlačidlo typu, a zrejme keď som sa na neho, Budem volať niektoré Funkcie Deň upozornenia. A to je, ako môžeme nejako namiešať trochu JavaScriptu a HTML. Sú to vlastne hrajú celkom dobre spolu, a tak zrejme keď Aj kliknite na toto tlačidlo, idem zavolať nejakú dátum funkcia upozornenia. A rovnako som definovaná správanie Pre všetky ostatné tlačidiel, ktorá sú na tejto stránke home.html, ktorý budeme držať vracať sa v priebehu tohto videa. Ale vráťme sa späť nahor Tu sa pozrieť pri clock.js, čo je Súbor JavaScriptu, ktoré som napísal, že má tento prvý funkcie budeme sa pozrieť na. Ako môžete vidieť, začnem môj JavaScript pracovať s funkciou kľúčových slov, a ja som dal toto meno, je to len dátum v strehu. Vnútri tam, som zrejme vytvoriť nová lokálna premenná s názvom aktuálny dátum. A budem priradiť rovnaký s novým dátumom. A my sme mohli dostať do veľa detail na to, čo je dátum, a naozaj JavaScript je tak veľká, že môžeme v žiadnom prípade pokrývajú všetko v jednom videu. Ale stačí povedať, že to bude vrátiť sa ku mne položka dát, ktorá sumarizuje aktuálny dátum a čas. Som ukladanie, že v premennej, že som zrejme chystá upozorniť aktuálny dátum. 

No, čo robí záznam aktuálny dátum vyzerať? Poďme sa pozrieť na samotný súbor späť cez v okne prehliadača. Takže znova, toto je tlačidlo, ktoré som boli viazané na, tomto názvom funkcie. A ja kliknite na neho tam a pozri sa, čo to urobil, to upozornil. To vyskočila tento druh box rozprávanie mi, že je aktuálny čas, zrejme je novembrovom 4 Na 10:43:43 ráno. A keď som sa na neho znova, teraz je to pár sekúnd neskôr, jo? Tak to je všetko, táto funkcia robí. Keď som kliknite na toto tlačidlo, to vyskočí výstražnú správu ku mne. Takže je to naozaj nie je príliš veľa funkcií To je odlišné od PHP, len trochu novou syntaxou , Ktorý je dodávaný s prácou s JavaScriptom. 

Polia sú v JavaScripte celkom jednoduché. Ak chcete deklarovať pole, použite Syntaxe v hranatých zátvorkách že sme oboznámení s z PHP. A podobne ako PHP, my tiež môže miešať dátové typy. Tak toto pole, a to ako z týchto polí by byť úplne legitímne JavaScript. Jeden, ktorý ich všetky celé čísla, a ten, ktorý zmiešanie rôzne dátové typy. 

Čo je to niečo úplne iné v JavaScripte, aj keď? To je pojem objektu. Tak snáď ste počuli o objektovo orientovaného programovania. Nechceme robiť veľa to v CS50, ale urobíme trochu z toho tu v kontexte JavaScript. Teraz JavaScript má schopnosť správať ako objektovo orientovaného programovania jazyka, ale nie je sama o sebe výlučne orientované objekt programovací jazyk. A to zase príde späť, prečo som povedal, je môže byť veľmi náročné sa učiť JavaScript ako prvý programovanie jazyk, pretože to nie je naozaj fit zvláštne paradigma. 

C na druhej strane je funkčné programovací jazyk. Ak chceme, funkcia druh veľkého šéfa muža, nie? Oni diktovať, čo sa stane všetko ostatné. Chceme zmeniť premenné, nazývame funkcií. Robíme veci, k funkciám. Objekty namiesto toho, An objektovo orientovaný jazyk, objekty druh sa stal hviezdou a Funkcia sa stal akýmsi sekundárne. Ale to, čo je objekt, čo je tento pojem objektu? No, či to pomôže, myslím, o tom na prvý druh ako sa štruktúry C alebo struct že sme sa dozvedeli o skôr. V C, štruktúra obsahuje počet polí, a možno by sme teraz sa môže začať nazývajú tieto polia vlastnosti. Ale vlastnosti nikdy stáť na vlastných, že jo? Ak mám definovať štruktúru pre auto takto sa týchto dvoch polí alebo vlastnosti, jedno lietadlo AN celé číslo, pre rok vozu a ďalšie 10 charakter reťazec pre model vozidla, Môžem povedať niečo také, Môžem deklarovať novú premennú typu struct autá Herbie. A potom môžem niečo povedať ako herbie.year sa rovná 1963, a herbie.model rovná Beetle. To je v poriadku. Som pomocou polí v kontext štruktúry, ale ja som mohol nikdy len hovoriť niečo také. Je to tak? Nemôžem použiť názov poľa nezávislé na štruktúre. Je to niečo ako zásadnú vec. 

Tak pole bytia základné pre C štruktúr sú veľmi podobné vlastnosti bytia zásadný k objektom JavaScript. Ale to, čo z nich robí obzvlášť zaujímavé je to, že predmety môžu mať tiež čo sa nazývajú metódy, ktoré sú naozaj len fantázia slovo pre funkcie, ktoré sú vlastné objekt rovnako. Takže je to funkcia, ktorá môže byť iba volal v rámci objektu. Iba objekt, ktorý definoval Táto funkcia vnútri IDS, ak si myslíte, asi struct, funkcia je definovaná v tých, ktoré vymedzujú zložené zátvorky konštrukcie. Takže to len niečo, čo znamená do konštrukcie. A to je to tak nejako to, čo robíme tu s objektmi a metódami. Je to v podstate ako by sme boli definovanie funkcie, ktorá má zmysel iba na Konkrétne predmet, a tak sme volanie, že spôsobom podľa objektu. A nikdy nemôžeme hovoriť, že Funkcie nezávislé na objekte, rovnako ako nemôžeme povedať rok alebo modelu nezávisle na struct v C. 

Tak funkcionálne programovanie paradigmy vyzerať nejako takto. Funkcie a potom pri odovzdaní v objekte ako parameter. V objektovo orientovaného programovania jazyky, tento druh dostane vyletel, a my by sme premýšľať o tom, to takto, object.function. Tak to nejako tohto bodu operátor opäť implikovať že je to nejaký druh nehnuteľnosti alebo atribút samotného objektu. Ale to je to, čo je objekt orientovaný programovací jazyk by mohol urobiť, aby funkcia volania na metóde, znovu, čo je len špeciálne slovo pre funkciu ktorá je vlastná objekt. To je to, čo, že syntax by mohla vyzerať. A tak začneme vidieť niektoré z to v súvislosti s JavaScript. 

Môžete si tiež myslieť o objekte niečo ako asociatívne pole, ktorý sme oboznámení s z PHP. Nezabudnite, asociatívne pole umožňuje aby sme mali kľúče a hodnoty, namiesto toho mať indexov 0, jedna, dva, tri, a tak ďalej, ako sme zvyknutí z C poľa. Asociatívne polia môžu mapovať slová, ako napríklad vo videu PHP, sme hovorili o zálievky pízz. A tak sme mali celý rad tzv pizze, a my mal syr bol kľúčovým a $ 8,99 bol hodnota, a potom pepperoni bol kľúčovým, $ 9,99 bola hodnota, a tak ďalej. A tak môžeme tiež premýšľať o objekt nejako podobne ako asociatívne array. A tak táto syntaxe tu by vytvoril nový objekt volal Herbie s dvomi Vlastnosti vnútri nej. Rok, ktorý má hodnotu 1963, a model, ktorý je priradený reťazec Beetle. 

A všimnite si, že tu som pomocou jednoduché úvodzovky v JavaScripte. Môžete použiť jednoduché alebo dvojité úvodzovky keď hovoríte o reťazcoch. Je to len konvenčne prípade, že sa väčšina časov keď píšete JavaScript stačí použiť apostrofy. Ale ja som mohol použiť úvodzoviek tu, a ktorý by bol úplne v poriadku tiež. 

Takže pamätajte, ako v PHP sme mali tento pojem zo for each, že by nám umožňujú iterovat cez všetky hodnoty kľúča párov asociatívne poľa, pretože sme nemal túto schopnosť iterovania až 0 ° C, jeden, dva, tri, štyri, a tak ďalej? JavaScript má niečo veľmi podobného, ale nie je to nazýva pre každú slučku, je to nazýva v slučkách. Takže keď som povedal, pre mňa ako to pre var kľúč v objekte, že to trochu podobné ako hovoriť Pre každý niečo ako niečo. Ale všetko, čo robím tu je iterácie cez všetky kľúče môjho objektu. A vnútri kučeravé traky tam, urobil by som to použitie objektu hranatých zátvorkách kláves odkazovať na hodnotu v danom umiestnení kľúča. 

Inak, tam je aj iný prístup. Keby som práve len starostlivosť o Hodnoty, môžem povedať, na kľúč objektu, a stačí použiť kláves vnútri. Takže pre var kľúč v objekte, mám použiť objekt hranaté zátvorky kľúč vnútri slučky. Pre var kľúče objekte, môžem stačí použiť kláves vnútri slučky, pretože ja som len špecificky tam hovorí o hodnotách. 

Takže poďme možná trvať pozrite sa na rozdiel len preto, aby sa rýchlo ukázať vám, rozdiel medzi štyri v a spolu s veľmi špecifickým pole, ktoré tu máme, týždeň pole. Tak som si nájsť nové pole že som naplnený siedmich reťazcov, Pondelok, utorok, streda, Štvrtok, piatok, sobota, nedeľa. A ja chcem teraz iterácii prostredníctvom tohto poľa, vytlačiť určité informácie. Ak mám použiť pre v slučke vytlačiť informácie, čo si myslíte, že budem mať? Dobre, poďme sa pozrieť. A predtým, než sme preskočiť do okna môjho prehliadača, len viem, že console.log je trochu jedného spôsob, ako robiť tlačové F v JavaScripte. Ale čo je konzola? No, to je to, čo budeme ísť sa pozrieť na práve teraz. 

OK, takže sme späť v mojom okne prehliadača, a idem otvoriť up mojich vývojárskych nástrojov. Opäť som len biť F12 otvoriť vývojárske nástroje. A všimnite si, že tu u top som zvolil konzoly. Tak to je pojem z vývojárskej konzolu, a to nám umožní vytlačiť informácie von, niečo ako terminálu, ale ako budete o niečo neskôr vidieť, môžeme tiež zadať informácie komunikovať s našej webovej stránke. Chystám sa priblížiť trochu tu, a budem teraz kliknite na v teste. A štyri test-- nebudem ukáže kód pre neho práve teraz, ale budete to pochopíte, ak ste stiahnuť zdrojový kód, ktorý je spojená s týmto video-- je len, že v slučke že sme videli len sekunda na snímke. 

Takže ja som chcel, aby kliknite tlačidlo, a tu, tu je to, čo sa vytlačiť v konzola, 0, jeden, dva, tri, štyri, päť, šesť. Nechcel som vytlačiť informácie vo vnútri týchto pole miestach, pretože som použil v slučke. A vo vnútri tela slučky, I len vytlačiť kľúč nič namietať kľúč. Ale keď som teraz jasné svoju konzolu, a ja prepnúť na na skúšky, a štyri z testu Hovorím, že som použiť pre slučky Miesto a vytlačiť kľúč, keď som kliknite na to, že teraz som dostať to Skutočné prvky vnútri môjho objektu , Alebo moje pole v tomto prípade. Má rad dní v týždni. Aj vytlačiť Pondelok, Utorok, streda. Tak to je rozdiel medzi for v slučke, čo vytlačí len kľúče, ak ste práve použite klávesu vnútri tela slučky, a pre slučky, ktoré publikujú out hodnoty, ak použijete práve kľúč vo vnútri tela slučky. 

Dobre, ako sme teraz začať zřetězit reťazca a možno zmiešať niektoré premenné s interpoláciou ako by sme boli schopní urobiť v PHP? No, my sme celkom oboznámení s tým z PHP. To je, ako by sme to urobiť pomocou dot prevádzkovateľ zřetězit reťazca. V JavaScriptu, hoci, sme vlastne použiť niečo volal operátor plus, ktorý je možno aj trochu viac intuitívne, že jo? Sme pridávanie veľa reťazcov dohromady. Takže poďme vrátime nad a uvidíte, čo to sa bude tlačiť, ak sa snažíme vytlačiť všetky informácie v týždni poli. Dobre, tak za tú pod zřetězením reťazca, Mám dve možnosti, string budova V1 a potom reťazec budova V2. A uvidíme, prečo sme Potrebujete V2 v druhom. Ale budem kliknite na string budova V1, ktorý je kód sme boli Len pri pohľade na, console.log so všetkými plusmi. Uvidíme, či toto výtlačkov to, čo očakávame. 

Pondelok je deň číslo 01 v týždni, Utorok deň číslo 11 v týždni. No, čo som sa snažil urobiť, bolo dostať sa tam to vytlačiť pondelok je deň číslo človek, v utorok je deň číslo dva. Ale zdá sa, ako by som vždy vytlačiť jeden. Tak prečo je to? No, to dopadá, sa znovu pozrieť v tejto malej fragment kódu tu. Všimnite si, že sme pomocou tlačidiel plus operátor v dvoch rôznych kontextoch. 

A tak tu je miesto, kde sa veci možno že sme trochu hovorili, Oh, to je tak veľký. Nechceme rokovať s dátovými typmi ešte. Ale tu je miesto, kde skutočnosť, že strácame dátové typy môže byť v skutočnosti trochu problém pre nás. Teraz, keď operátor a je používaný zřetězit reťazca a pridať čísla spolu, JavaScript má aby sa jeho najlepší odhad pokiaľ ide o to, čo chcem, aby to pre mňa urobiť. A v tomto prípade, uhádli ste zle. Proste dlhých deň, ktorý by bol 0, jeden, dva, tri, štyri, päť, alebo šesť, a potom to jednoducho zlúčia to a potom zlúčia jeden. Nebolo vlastne pridať ich dohromady. A tak tieto jazyky, PHP a JavaScript že súhrny preč tento pojem typov, nemusíte sa už sa s tým vyrovnať. Oni ešte majú typy pod kapotou. A môžeme, v situáciách, takto, využiť túto skutočnosť tým, že hovorí niečo, Treba to, čo hovorí JavaScript touto cesta, liečiť to ako celé číslo, nebudete liečiť ako reťazec, a to aj aj keď sme zmiešaní reťazca a celé čísla tu. 

Je to len jedna z tých vecí, že sa zdá, tak veľký v súvislostiach že nemáme na vysporiadať sa s typmi už, ale niekedy budete bežať do situácie, rovnako ako to, kde sa skutočnosť, že nemáte kontrolu nad typmi môže zlyhať na vás ak si nedáte pozor. A tak ak by sme pop späť k IDE, som bude znovu vypratať svoju konzolu, a budem kliknite na reťazce budova verzie dvoch, čo je miesto, kde som použiť túto funkciu parse int. Teraz je to vytlačenie Informácie, ktoré som očakával. Pondelkové deň číslo jedna, v utorok je deň číslo dva, a tak ďalej. 

Tak poďme hovoriť o funkciách znova. Sľúbil som, že hovoriť o anonymite funkcie, a teraz za to kontext je konečne tu. Takže ako tak urobíme, poďme hovoriť znova o poliach len na sekundu. Takže polia sú zvláštnym Prípad objektu. V skutočnosti, všetko v JavaScript je vlastne objekt. Takže funkcie sú Špeciálnym prípadom objekte, celé čísla sú zvláštnym Prípad objekte, ale pole špecificky majú rad metód. Nezabudnite preto, že sú objekty, môžu mať vlastnosti a metódy. Majú rad metód, ktoré môžu byť aplikované na tieto objekty. K dispozícii je metóda zvaná veľkosť, array.size, , Ktoré sa vrátia do ste ako sa dalo očakávať počet prvkov vo vašom poli. Array.pop, niečo ako Naša predstava popping off zo zásobníka, ak si spomínate z nášho stohov videa, odstráni posledný prvok z poľa. Array.push pridáva nový prvok na koniec poľa. array.shift je druh ako DQ ,, spája sa úplne prvý prvok poľa. 

Ale je tu aj ďalšie špeciálne Spôsob pole zvanej mapu. A to je akýsi zaujímavý koncept. Takže to, čo je myšlienka na mape? Budete skutočne vidieť v niekoľkých ďalších jazykoch, a my nehovoríme asi druh kartografov máp tu, hovoríme o mapovanie funkcie. V súvislosti sme tu hovoríš, mapa je špeciálne operácie nám môže hrať na poli uplatňovať určité funkcie na každý prvok tejto matice. a tak by sme povedať tento prípad, možno array.map, a vo vnútri nej, sme okolo do mapy je funkcia, ktorá chceme ktoré majú byť použité na každý prvok. Takže je to niečo analogický k používaniu slučky pre iteráciu cez každý element a použiť zvláštne fungujú tak, že každý prvok, Len JavaScript bol tento postavená v roku poňatie o mapovanie, ktoré možno použiť. A je to skvelý kontext hovoriť o anonymné funkcie. 

Takže povedzme, že máme toto pole celých čísel. Hovorí sa tomu nums, a je to tu päť veci v tom, jeden, dva, tri, štyri, päť. Teraz chcem zmapovať niektoré funkcia na tomto poli. Chcem mať aplikovať funkciu na každý prvok poľa. No, povedzme, že to, čo chcem urobiť, je len dvojnásobok všetkých prvkov. To, čo som mohol urobiť, je len použiť slučku pre var Aj rovná 0, I je menšia ako alebo sa rovná 4, I plus, plus, a potom dvakrát každý číslo. Ale ja si tiež urobiť niečo také. Môžem povedať, nums bol predtým jeden dva tri štyri päť, Teraz, aj keď by som rád, aby ste aplikovať mapovanie na tomto poli kde by som rád zdvojnásobiť každé číslo. A to je presne to, čo sa tu deje. Ale všimnúť, čo som okolo sa ako argument mapovať. Jedná sa o anonymné funkcie. A všimnite si ja nedal táto funkcia meno, Dal som to len zoznam parametrov. A tak toto je príklad z anonymný funkcie. 

Sme sa všeobecne nikdy nazvať Funkcie mimo kontextu mapy. My ju definuje ako parameter zmapovať, a tak sme naozaj nemám musí mať jeho názov v prípade, že Jediná vec, ktorá sa stará o je mapa a to je definované právo tam vnútri mapy. A tak to je anonymný funkcia. Neboli sme schopní to urobiť skôr. Mapa nejakú funkciu, ktorá prijíma jeden parameter, num, a čo to robí funkcie sa vracia Num krát 2. A tak po tomto mapovanie bola použitá, toto je teraz aké nums vzhľad ako, dve, štyri, šesť, osem, 10. A budeme pop ku mne okno prehliadača a len sa pozrieť na to veľmi rýchlo tiež. 

Takže mám iné tlačidlo tu v mojej domovskej stránke s názvom double. A keď som kliknite na double, a povie me pred tým, ako bol jeden, dva, tri, štyri, Päť po dve, štyri, šesť, osem, 10. A keď som sa vrátiť a kliknite na double opäť, dve, štyri, šesť, osem, 10. A potom po, štyri, ôsmich, 12, 16, a potom 20. A čo robím v tejto funkcii? No, ak by sme len pop sa k IDE, a Som vytiahnuť svoju anonymné funkcie, tu na linke sedem až 13, ja som robí trochu vymysleného prácu tu, ale ja som jednoducho vytlačení čo je v súčasnej dobe v poli. Potom sa na riadku 16, 17, a 18, tu je moja mapa. To je miesto, kde som uplatňovanie tohto zdvojnásobenie Funkcia na každý prvok. A potom sa trochu ďalej, Robím len to isté Som robil predtým, až teraz som vytlačenie obsah poľa potom. Ale všetko, čo som urobil, je tu stačí použiť anonymný funkcie zmapovať v rámci celej poľa. 

Takže ešte jeden veľký tému hovoriť o v JavaScript je poňatie o udalosti. Udalosť je niečo, čo sa práve deje Keď používateľ pracuje s web strana, takže možno, že kliknite na niečo, alebo možno je stránka dokončenie načítanie, alebo možno, že som sa sťahoval ich myš nad niečím, alebo že som napísal niečo vo vstupnom poli. Všetky tieto veci sú udalosti , Ktoré sa vyskytujú na našej webovej stránke. A JavaScript má schopnosť podporovať niečo, volal spracovanie udalosti, ktorá je funkcia spätného volania, že reaguje na html udalosti. A čo je funkcia spätného volania? No, je to zvyčajne len ďalší meno pre anonymné funkcie. Je to funkcia, ktorá reaguje na udalosť. A to je miesto, kde sa dostávame k Myšlienka na viazanie určité funkcie na konkrétne html atribútu. Väčšina html elementy majú Podpora pre atribút že sme nemali hovoriť o v html Video pre niečo ako na kliknutie alebo na zavesené alebo na zaťaženie, všetkých týchto akciách ktoré potom môžete písať funkcie ktoré sa zaoberajú týmito udalosťami keď tieto udalosti sa vyskytujú na svojej webovej stránke. 

A tak možno vaše html vyzerá nejako takto. A mám dve tlačidlá tu, Tlačidlo jedného a tlačidlo dva, a tu mám v súčasnej dobe definované nič, ale to je miesto, kde atribút click je zrejme súčasťou mojej html tagu. Tak vraj, keď som definovať, čo je to deje vo vnútri tohto atribútu, že to bude nejaký JavaScript funkcia, ktorá reaguje na udalosti pravdepodobne kliknutie na Tlačidlo jeden alebo tlačidlo dva. 

Čo je to celkom fajn o tom je, že sme Môžete napísať generický obsluhu udalosti. A táto udalosť bude Handler vytvoriť objekt udalosti. A objekt udalosti nám povie ktorá z týchto dvoch tlačidiel klikol. Teraz, ako to funguje? No, mohlo by to vyzerať nejako takto. Takže sme sa najprv definovať naše tlačidiel mať odozvu na spätné volanie funkcia, ktorá sa bude volať Pri kliknutí na tlačidlo, zavoláme Názov zraze upozornenia. A všimnite si v oboch prípadoch sme absolvovanie v tomto parametri udalosti. Preto nazývame túto funkciu alebo ak je táto funkcia je spúšťaný udalosťou deje, to bude k vytvoreniu tohto objektu udalosti a odovzdať ju ako parameter upozorniť meno. A že objekt udalosti je bude obsahovať informácie o tom, ktoré tlačidlo bol klepli. A ako to robí, že? No, mohlo by to vyzerať nejako takto. Takže teraz v mojom oddelený Súbor JavaScript, možno som musieť nájsť to Funkcia upozornenia pre názov, ktorý znovu uznáva, že parameter udalosti. A potom tu je miesto, kde som odhaľovanie ktoré tlačidlo bola spustená, var spúšť rovná udalosť bodka source element. Čo bolo zdrojom, ktorý vytvoril Tento objekt udalosti, ktorý bol odovzdaný v? Bola to raz tlačidlo alebo je to tlačidlo dve? 

A potom tu všetko, čo robím, je vytlačiť trigger.innerhtml. No, v tomto prípade, v tomto kontext, trigger.innerhtml je práve to, čo je napísané na tlačidle. To len tak sa stane, keď skočíme späť na sekundu, že by byť to, čo je medzi týmito tlačidlami značky. Bude to tlačidlo jednou alebo dvoma tlačidlo. A poďme sa pozrieť na ako táto udalosť by handler pozrite sa, či sme mali to beží v praxi. 

Takže v prvom rade, nemáš otvorili events.js, čo je súbor JavaScript, kde Definoval som túto funkciu. A ako môžete vidieť, je to skoro presne to, čo sme práve videli na snímke pred sekundou. A ja budem ísť cez do Domovská stránka sme používali. A mám tu Tlačidlo jedného a tlačidlo dva. A ja budem kliknite na tlačidlo jeden. Ste klikli na tlačidlo jedna, ak ste môžete vidieť priamo tu v pohotovosti. OK. Kliknite na tlačidlo dva, vás klikol na tlačidlo dve. 

Takže obe tlačidlá majú Rovnaká funkcie volania, že jo? Obaja boli v strehu názov udalosť, ale tento objekt udalosti ktorý sa vytvoril, keď klikneme na hovorí nám, ktoré tlačidlo bol klepli. Nemuseli sme písať dva oddelené funkcie alebo riešenie s odovzdať akékoľvek ďalšie informácie. Sme len spoliehať na čo JavaScript bude urobiť pre nás, čo je vytvoriť, že druh objektu udalosti v našom zastúpení. Je tu oveľa viac než do JavaScriptu to, čo sme prebrali v tomto videu, ale s týmito Základným by ste mali dostať pomerne dlhé cesty k učenie všetko, čo budete potrebujete vedieť o tejto zaujímavý jazyk. Som Doug Lloyd. To je CS50.