[Přehrávání hudby] 

DOUG LLOYD: Takže teď jsme staří profesionálové na webové programování, že jo? A my jsme se vztahuje několik jazyků v jednotlivých videí. A teď pojďme udělat ještě jeden, JavaScript. 

První dobrá zpráva, JavaScript je moderní programovací jazyk podobně jako PHP, jehož syntax je odvozen z C, takže je to dobré místo pro start. Je to asi tak stará jako PHP, stejně, co bylo kolem 20 let. To bylo vynalezeno v okolí ve stejnou dobu jako PHP. A JavaScript je vlastně docela zásadní pro uživatelské zkušenosti z webu. Ve skutečnosti, tam jsou tři jazyky, které jsem bych, že druh tvoří uživatelské zkušenosti interagujících s webovými stránkami, html, css, a JavaScript. A tak teď pojďme mluvit Něco málo o JavaScript. 

Špatnou zprávou, i když s JavaScript je že stanoví řadu pravidel pro sebe, a pak je to poruší. A JavaScript může být ve skutečnosti druh náročné se učit, protože je to na rozdíl od C a PHP, která jsou velmi strukturované a mají velmi přísná pravidla na to, jak se věci mohou pracovat. JavaScript má druh z dostali tak flexibilní že možná se věci nebudou pracovat tak, jak očekáváme, že, a možná bychom opravdu nemůže učit naše první programovací jazyk jako JavaScript. Možná proto, že to není stanovila nějaká pravidla, a to není opravdu prosazovat dobré kódování návyky. Ale teď jsme se snad vyvinuli některé dobré kódování návyky, a tak můžeme začít vpád do JavaScriptu trochu. 

Chcete-li psát JavaScript, podobný otvor up souboru C s tečkou C prodloužení nebo soubor PHP s příponou dot PHP, vše, co musíte udělat, je otevřít soubor s příponou tečkou js. Nepotřebujeme mít nějaké speciální oddělovače jako jsme to udělali v PHP. Taková úhlu držák otazník PHP že jsme zvyklí od toho, na cestě řekneme náš prohlížeč, že to, co máme, je JavaScript je zahrnutím to v html tagu, a uvidíme trochu o jak to udělat, že za chvíli. 

Další věc, která dělá Odlišné JavaScript, však je, že běží na straně klienta. Takže připomenout, že s PHP bychom nikdy opravdu vidět PHP, který zdůraznil, webové stránky. Pokud bychom někdy prohlížel zdrojová stránka, my bychom jen viz html, který byl generované, že PHP. Ale JavaScript běží na straně klienta. Váš JavaScript běží na vašem počítači. A to je důvod, proč si můžete dělat věci, jako je přidat blokátory. Právo? Blokování reklam se obvykle provádí zabíjet všechny JavaScriptu který je spuštěn na konkrétní webové stránky. A protože by musel spustit na vašem počítači straně klienta, stačí zastavit JavaScript pro běh úplně. To také znamená, že při použití webová stránka, která obsahuje JavaScript, budete muset poslat zdroj JavaScript kód jako součást svého http odpovědi klientovi, pokud o to požádají. A tak možná ne chcete používat JavaScript dělat opravdu citlivé věci jako je předávání informací o uživatelských hesel a zpět dále, protože jsou ve skutečnosti bude dostávat všechny zdrojového kódu, nejen html, který je generován, , která by mohla být v případě řekněme PHP. 

Tak jak jsme se zahrnují JavaScript v naší html začít? No, podobně jako CSS, ve skutečnosti, je něco o tom, jak to děláme tady. S CSS máme tagy styl. A uvnitř těchto stylu značek, můžeme definovat CSS stylů. Podobně se JavaScriptu můžeme otevřít značek skriptu, další html tag my ne mluvit o tom, v naší html video, a psát JavaScript mezi těmito značkami script. Také i když, jako CSS, jsme mohl spojit v venku CSS souborů a vytáhnout je do našeho programu, který způsobem. S CSS můžeme také, promiňte, Javascript můžeme také určit zdroj atribut tagu script propojit v JavaScriptu zvlášť, takže se nemusíte musí napsat do mezi značky skriptu, my můžete propojit ji s použitím že tag skript stejně. A stejně jako v případě s CSS kde doporučujeme, aby to bylo pravděpodobně ve vašem nejlepším zájmu, aby psát Váš CSS do samostatného souboru v případě, je třeba jej změnit, Podobně tomu doporučujeme že napíšete JavaScript v samostatných souborech a používat zdroj tagy skriptu připisovat svázat si JavaScript do html, své webové stránky. 

Takže JavaScript proměnné, budeme začněte zde mluvit o syntaxi. A půjdeme přes tento druh rychle, proto, že jsme udělali to v PHP, takže to vše by mělo být docela obeznámeni. Takže proměnné v JavaScriptu jsou velmi podobné PHP proměnné. Neexistuje žádný specifikátor typu, a když si představit proměnnou, ho prefix pomocí klíčového slova var. V PHP budeme dělat něco takhle, znak dolaru x. To je, jak jsme naznačili variabilní, ale ne, my nezmiňují typ proměnné vůbec. Rádi bychom říci něco podobného znak dolaru x rovná 44 v PHP. Pokud bychom dělali totéž v JavaScriptu, bychom řekli var x rovná 44. Takže var je trochu naší cestě zavedení proměnné. To je možná trochu více intuitivní než jen znak dolaru proměnné. 

Opět platí, protože není datové typy, mohli bychom to udělat s libovolný typ dat, struny, Cokoliv jiného by všichni var. Podmiňovací způsob, všechny naše staří přátelé z C a PHP jsou stále k dispozici, takže máme-li, else if, else, switch a otázka Značka tlustého střeva. Spínač zůstává tak flexibilní, jak to byl v PHP, ale všechny z nich, že jste obeznámeni s nyní. A podobně se smyčky staré favority chvíli, dělat, zatímco, a ještě k dispozici. Takže už víme, že mnoho z Základní JavaScript druh základů Jen na základě které mají docela dost znalostí nyní o C a PHP. 

Co funkcí v JavaScriptu? No, podobně jako PHP každá funkce je představil pomocí klíčového slova function. Říkáte, že funkce, a pak vás začíná definovat funkci. Co je to trochu jinak o JavaScriptu, ačkoli je schopnost mít co se nazývá anonymní funkce. Takže můžete definovat funkce že nemají jméno. To je něco, co jsme Opravdu ještě neviděli. Budeme opravdu používat pojmu z anonymní funkce o něco později v tomto video, protože to bude aby trochu větší smysl v kontextu když ji vidíme v konkrétní situaci že jsem tady řemeslně. Ale pojďme stačí se podívat na to, co jednoduchého JavaScriptu Funkce by mohla vypadat. 

Tak jsem šel dopředu a otevřel můj CS50 IDE a už jsem běžet Apache začít svůj server běží. A já mám tento soubor otevřít tzv home.html. A já budu přiblížit trochu zde. A v podstatě, můžete vidět Home.html je jen banda tlačítek. A já jsem tvrdil nahoře zde že se jedná o úsek JavaScript materiály. Takže je tu spoustu tlačítek tu, ale co tato tlačítka vlastně dělat? 

No, budeme přes hlavu na mé IED, a já jsem home.html otevřít zde. Na samém počátku, tady je místo, kde jsem spojující ve všech mých zdrojových souborů JavaScript. Právo? Takže mám anonymous.js, clock.js, Jsem pomocí atributu zdroje tagu script propojit do souboru. Takže jsem nenapsal jakýkoli JavaScript přímo do tohoto souboru, ale já jsem vytáhl na všechny JavaScript jsem napsal samostatně. A pokud budeme posouvat tady, to dole měli všichni vypadají trochu povědomý s trochou novou syntaxí. Máme tu záhlaví tag pro funkce a pak tlačítko. Mám vstup, který je tlačítko typu, a zřejmě když jsem se na něj, Budu volat některé Funkce Datum upozornění. A to je, jak můžeme nějak namíchat trochu JavaScriptu a HTML. Jsou to vlastně hrají docela dobře spolu, a tak zřejmě když I klikněte na toto tlačítko, jdu zavolat nějakou datum funkce upozornění. A stejně jsem definována chování Pro všechny ostatní tlačítek, která jsou na této stránce home.html, který budeme držet vracet se v průběhu tohoto videa. Ale vraťme se zpět nahoru Zde se podívat při clock.js, což je Soubor JavaScriptu, které jsem napsal, že má tento první funkce budeme se podívat na. Jak můžete vidět, začnu můj JavaScript pracovat s funkcí klíčových slov, a já jsem dal tohle jméno, je to jen datum ve střehu. Uvnitř tam, jsem zřejmě vytvořit nová lokální proměnná s názvem aktuální datum. A budu přiřadit stejný s novým datem. A my jsme mohli dostat do hodně detail na to, co je datum, a opravdu JavaScript je tak velká, že můžeme v žádném případě pokrývají vše v jednom videu. Ale stačí říct, že to bude vrátit se ke mně položka dat, která shrnuje aktuální datum a čas. Jsem ukládání, že v proměnné, že jsem zřejmě chystá upozornit aktuální datum. 

No, co dělá záznam aktuální datum vypadat? Pojďme se podívat na samotný soubor zpět přes v okně prohlížeče. Takže znovu, toto je tlačítko, které jsem byly vázány na, tomto názvem funkce. A já klikněte na něj tam a podívej se, co to udělal, to upozornil. To vyskočila tento druh box vyprávění mi, že je aktuální čas, zřejmě je listopadovém 4 Na 10:43:43 ráno. A když jsem se na něj znovu, teď je to pár vteřin později, jo? Tak to je vše, tato funkce dělá. Když jsem klikněte na toto tlačítko, to vyskočí výstražnou zprávu ke mně. Takže je to opravdu není příliš mnoho funkcí To je odlišné od PHP, jen trochu novou syntaxí , který je dodáván s prací s JavaScriptem. 

Pole jsou v JavaScriptu docela jednoduché. Chcete-li deklarovat pole, použijte Syntaxe v hranatých závorkách že jsme obeznámeni s z PHP. A podobně jako PHP, my také může míchat datové typy. Tak tohle pole, a to jak z těchto polí by být naprosto legitimní JavaScript. Jeden, který je všechny celá čísla, a ten, který smíchání různé datové typy. 

Co je to něco zcela jiného v JavaScriptu, i když? To je pojem objektu. Tak snad jste slyšeli o objektově orientovaného programování. Nechceme dělat hodně to v CS50, ale uděláme trochu z toho zde v kontextu JavaScript. Nyní JavaScript má schopnost chovat jako objektově orientovaného programování jazyka, ale není sama o sobě výlučně orientované objekt programovací jazyk. A to zase přijde zpět, proč jsem řekl, je může být velmi náročné se učit JavaScript jako první programování jazyk, protože to není opravdu fit zvláštní paradigma. 

C na druhé straně je funkční programovací jazyk. Chceme-li, funkce druh velkého šéfa muže, ne? Oni diktovat, co se stane všechno ostatní. Chceme změnit proměnné, nazýváme funkcí. Děláme věci, k funkcím. Objekty místo toho, An objektově orientovaný jazyk, objekty druh se stal hvězdou a Funkce se stal jakýmsi sekundární. Ale to, co je objekt, co je tento pojem objektu? No, jestli to pomůže, myslím, o tom na první druh jako se struktury C nebo struct že jsme se dozvěděli o dříve. V C, struktura obsahuje počet polí, a možná bychom teď se může začít nazývají tato pole vlastnosti. Ale vlastnosti nikdy stát na vlastních, že jo? Mám-li definovat strukturu pro auto takto se těchto dvou polí nebo vlastnosti, jedno letadlo AN celé číslo, pro rok vozu a další 10 charakter řetězec pro model vozu, Mohu říci něco takového, Mohu deklarovat novou proměnnou typu struct auta Herbie. A pak můžu něco říct jako herbie.year se rovná 1963, a herbie.model rovná Beetle. To je v pohodě. Jsem pomocí polí v kontext struktury, ale já jsem mohl nikdy jen říkat něco takového. Právo? Nemohu použít název pole nezávislé na struktuře. Je to něco jako zásadní věc. 

Tak pole bytí základní pro C struktur jsou velmi podobné vlastnosti bytí zásadní k objektům JavaScript. Ale to, co z nich dělá zvláště zajímavé je to, že předměty mohou mít také co se nazývají metody, které jsou opravdu jen fantazie slovo pro funkce, které jsou vlastní objekt stejně. Takže je to funkce, která může být pouze volal v rámci objektu. Pouze objekt, který definoval Tato funkce uvnitř ITS, pokud si myslíte, asi struct, funkce je definována v těch, která vymezují složené závorky konstrukce. Takže to jen něco, co znamená do konstrukce. A to je to tak nějak to, co děláme zde s objekty a metodami. Je to v podstatě jako bychom byli definování funkce, která má smysl pouze na Konkrétní předmět, a tak jsme volání, že způsobem podle objektu. A nikdy nemůžeme říkat, že Funkce nezávislé na objektu, stejně jako nemůžeme říci rok nebo modelu nezávisle na struct v C. 

Tak funkcionální programování paradigmata vypadat nějak takto. Funkce a poté při předání v objektu jako parametr. V objektově orientovaného programování jazyky, tento druh dostane vyletěl, a my bychom přemýšlet o tom, to takhle, object.function. Tak to nějak tohoto bodu operátor opět implikovat že je to nějaký druh nemovitosti nebo atribut samotného objektu. Ale to je to, co je objekt orientovaný programovací jazyk by mohl udělat, aby funkce volání na metodě, znovu, což je jen speciální slovo pro funkci která je vlastní objekt. To je to, co, že syntax by mohla vypadat. A tak začneme vidět některé z to v souvislosti s JavaScript. 

Můžete si také myslet o objektu něco jako asociativní pole, který jsme obeznámeni s z PHP. Nezapomeňte, asociativní pole umožňuje abychom měli klíče a hodnoty, místo toho mít indexů 0, jedna, dva, tři, a tak dále, jako jsme zvyklí z C pole. Asociativní pole mohou mapovat slova, jako například ve videu PHP, jsme mluvili o zálivky pizz. A tak jsme měli celou řadu tzv pizzy, a my měl sýr byl klíčovým a $ 8,99 byl hodnota, a poté pepperoni byl klíčovým, $ 9,99 byla hodnota, a tak dále. A tak můžeme také přemýšlet o objekt nějak podobně jako asociativní array. A tak tato syntaxe zde by vytvořil nový objekt volal Herbie se dvěma Vlastnosti uvnitř ní. Rok, který má hodnotu 1963, a model, který je přiřazen řetězec Brouk. 

A všimněte si, že tady jsem pomocí jednoduché uvozovky v JavaScriptu. Můžete použít jednoduché nebo dvojité uvozovky když mluvíte o řetězcích. Je to jen konvenčně případě, že se většina časů když píšete JavaScript, stačí použít apostrofy. Ale já jsem mohl použít uvozovek tady, a který by byl zcela v pořádku také. 

Takže pamatujte, jak v PHP jsme měli tento pojem ze for each, že by nám umožňují iterovat přes všechny hodnoty klíče párů asociativní pole, protože jsme neměl tuto schopnost iterování až 0 ° C, jeden, dva, tři, čtyři, a tak dále? JavaScript má něco velmi podobného, ale není to nazývá pro každou smyčku, je to nazývá ve smyčkách. Takže když jsem řekl, pro mě jako to pro var klíč v objektu, že to trochu podobné jako říkat Pro každý něco jako něco. Ale všechno, co dělám tady je iterace přes všechny klíče mého objektu. A uvnitř kudrnaté šle tam, udělal bych to použití objektu hranatých závorkách klávesu odkazovat na hodnotu v daném umístění klíče. 

Jinak, tam je i jiný přístup. Kdybych právě jen péče o Hodnoty, mohu říci, na klíč objektu, a stačí použít klávesu uvnitř. Takže pro var klíč v objektu, mám použít objekt hranaté závorky klíč uvnitř smyčky. Pro var klíče objektu, mohu stačí použít klávesu uvnitř smyčky, protože já jsem jen specificky tam mluví o hodnotách. 

Takže pojďme možná trvat podívejte se na rozdíl jen proto, aby se rychle ukázat vám, rozdíl mezi čtyři v a spolu s velmi specifickým pole, které tady máme, týden pole. Tak jsem si najít nové pole že jsem naplněn sedmi řetězců, Pondělí, úterý, středa, Čtvrtek, pátek, sobota, neděle. A já chci teď iteraci prostřednictvím tohoto pole, vytisknout určité informace. Mám-li použít pro ve smyčce vytisknout informace, co si myslíte, že budu mít? Dobře, pojďme se podívat. A předtím, než jsme přeskočit do okna mého prohlížeče, jen vím, že console.log je trochu jednoho způsob, jak dělat tiskové F v JavaScriptu. Ale co je konzole? No, to je to, co budeme jít se podívat na právě teď. 

OK, takže jsme zpátky v mém okně prohlížeče, a jdu otevřít up mých vývojářských nástrojů. Opět jsem jen bít F12 otevřít vývojářské nástroje. A všimněte si, že tady u top jsem zvolil konzole. Tak to je pojem z vývojářské konzoli, a to nám umožní vytisknout informace ven, něco jako terminálu, ale jak budete o něco později vidět, můžeme také zadat informace komunikovat s naší webové stránce. Chystám se přiblížit trochu tady, a budu teď klikněte na v testu. A čtyři test-- nebudu ukáže kód pro něj právě teď, ale budete to pochopíte, pokud jste stáhnout zdrojový kód, který je spojena s tímto video-- je jen, že v smyčce že jsme viděli jen sekunda na snímku. 

Takže já jsem chtěl, aby klikněte tlačítko, a tady, tady je to, co se vytisknout v konzola, 0, jeden, dva, tři, čtyři, pět, šest. Nechtěl jsem vytisknout informace uvnitř těchto pole místech, protože jsem použil v smyčce. A uvnitř těla smyčky, I jen vytisknout klíč nic namítat klíč. Ale když jsem teď jasné svou konzolu, a já přepnout na na zkoušky, a čtyři z testu Říkám, že jsem použít pro smyčky Místo a vytisknout klíč, když jsem klikněte na to, že teď jsem dostat to Skutečné prvky uvnitř mého objektu , nebo moje pole v tomto případě. Má řadu dnů v týdnu. I vytisknout Pondělí, Úterý středa. Tak to je rozdíl mezi for ve smyčce, což vytiskne jen klíče, pokud jste právě použijte klávesu uvnitř těla smyčky, a pro smyčky, které publikují out hodnoty, pokud použijete právě klíč uvnitř těla smyčky. 

Dobře, jak jsme teď začít zřetězit řetězce a možná smíchat některé proměnné s interpolací jako bychom byli schopni udělat v PHP? No, my jsme docela obeznámeni s tím z PHP. To je, jak bychom to udělat pomocí dot provozovatel zřetězit řetězce. V JavaScriptu, ačkoli, jsme vlastně použít něco volal operátor plus, který je možná i trochu víc intuitivní, že jo? Jsme přidávání spoustu řetězců dohromady. Takže pojďme vrátíme nad a uvidíte, co to se bude tisknout, pokud se snažíme vytisknout všechny informace v týdnu poli. Dobře, tak za tu pod zřetězením řetězce, Mám dvě možnosti, string budova V1 a pak řetězec budova V2. A uvidíme, proč jsme Potřebujete V2 v druhém. Ale budu klikněte na string budova V1, který je kód jsme byli Jen při pohledu na, console.log se všemi plusy. Uvidíme, jestli toto výtisků to, co očekáváme. 

Pondělí je den číslo 01 v týdnu, Úterý den číslo 11 v týdnu. No, co jsem se snažil udělat, bylo dostat se tam to vytisknout pondělí je den číslo člověk, v úterý je den číslo dvě. Ale zdá se, jako bych vždy vytisknout jeden. Tak proč je to? No, to dopadá, se znovu podívat v této malé fragment kódu zde. Všimněte si, že jsme pomocí tlačítek plus operátor ve dvou různých kontextech. 

A tak tady je místo, kde se věci možná že jsme trochu říkali, Oh, to je tak velký. Nechceme jednat s datovými typy ještě. Ale tady je místo, kde skutečnost, že ztrácíme datové typy může být ve skutečnosti trochu problém pro nás. Nyní, když operátor a je používán zřetězit řetězce a přidat čísla spolu, JavaScript má aby se jeho nejlepší odhad pokud jde o to, co chci, aby to pro mě udělat. A v tomto případě, uhodli jste špatně. Prostě dlouhých den, který by byl 0, jeden, dva, tři, čtyři, pět, nebo šest, a pak to prostě zřetězeny to a potom zřetězeny jeden. Nebylo vlastně přidat je dohromady. A tak tyto jazyky, PHP a JavaScript, že souhrny pryč tento pojem typů, nemusíte se už se s tím vyrovnat. Oni ještě mají typy pod kapotou. A můžeme, v situacích, takhle, využít tuto skutečnost tím, že říká něco, Třeba to, což říká JavaScript, touto cesta, léčit to jako celé číslo, nebudete léčit jako řetězec, a to i i když jsme smísení řetězce a celá čísla zde. 

Je to jen jedna z těch věcí, že se zdá, tak velký v souvislostech že nemáme na vypořádat se s typy už, ale někdy budete běžet do situace, stejně jako to, kde se skutečnost, že nemáte kontrolu nad typy může selhat na vás pokud si nedáte pozor. A tak pokud bychom pop zpátky k IDE, jsem bude znovu vyklidit svou konzolu, a budu klikněte na řetězce budova verze dvou, což je místo, kde jsem použít tuto funkci parse int. Teď je to vytištění Informace, které jsem očekával. Pondělní den číslo jedna, v úterý je den číslo dvě, a tak dále. 

Tak pojďme mluvit o funkcích znovu. Slíbil jsem, že mluvit o anonymitě funkce, a teď za to kontext je konečně tady. Takže než tak učiníme, pojďme mluvit znovu o polích jen na vteřinu. Takže pole jsou zvláštním Případ objektu. Ve skutečnosti, všechno v JavaScript je vlastně objekt. Takže funkce jsou Speciálním případem objektu, celá čísla jsou zvláštním Případ objektu, ale pole specificky mají řadu metod. Nezapomeňte proto, že jsou objekty, mohou mít vlastnosti a metody. Mají řadu metod, které mohou být aplikovány na tyto objekty. K dispozici je metoda zvaná velikost, array.size, , které se vrátí do jste jak se dalo očekávat počet prvků ve vašem poli. Array.pop, něco jako Naše představa popping off ze zásobníku, pokud si vzpomínáte z našeho stohů videa, odstraní poslední prvek z pole. Array.push přidává nový prvek na konec pole. array.shift je druh jako DQ,, spojuje se úplně první prvek pole. 

Ale je tu i další speciální Způsob pole zvané mapu. A to je jakýsi zajímavý koncept. Takže to, co je myšlenka na mapě? Budete skutečně vidět v několika dalších jazycích, a my nemluvíme asi druh kartografů map tady, mluvíme o mapování funkce. V souvislosti jsme tady mluvíš, mapa je speciální operace nám může hrát na poli uplatňovat určité funkce na každý prvek této matice. a tak bychom říci tento případ, možná array.map, a uvnitř ní, jsme kolem do mapy je funkce, která chceme které mají být použity na každý prvek. Takže je to něco analogický k používání smyčky pro iteraci přes každý element a použít zvláštní fungují tak, že každý prvek, Jen JavaScript byl tento postavena v roce ponětí o mapování, které lze použít. A je to skvělý kontext hovořit o anonymní funkce. 

Takže řekněme, že máme toto pole celých čísel. Říká se tomu nums, a je to tu pět věci v tom, jeden, dva, tři, čtyři, pět. Teď chci zmapovat některé funkce na tomto poli. Chci mít aplikovat funkci na každý prvek pole. No, řekněme, že to, co chci udělat, je jen dvojnásobek všech prvků. To, co jsem mohl udělat, je jen použít smyčku pro var I rovna 0, I je menší než nebo se rovná 4, I plus, plus, a pak dvakrát každý číslo. Ale já si také udělat něco takového. Mohu říci, nums byl dříve Jedna dva tři čtyři pět, Nyní, i když bych rád, abyste aplikovat mapování na tomto poli kde bych rád zdvojnásobit každé číslo. A to je přesně to, co se tady děje. Ale všimnout, co jsem kolem se jako argument mapovat. Jedná se o anonymní funkce. A všimněte si já nedal tato funkce jméno, Dal jsem to pouze seznam parametrů. A tak toto je příklad z anonymní funkce. 

Jsme se obecně nikdy nazvat Funkce mimo kontextu mapy. My ji definuje jako parametr zmapovat, a tak jsme opravdu nemám musí mít jeho název v případě, že Jediná věc, která se stará o je mapa a to je definováno právo tam uvnitř mapy. A tak to je anonymní funkce. Nebyli jsme schopni to udělat dříve. Mapa nějakou funkci, která přijímá jeden parametr, num, a co to dělá funkce se vrací Num krát 2. A tak po tomto mapování byla použita, toto je nyní jaké nums vzhled jako, dvě, čtyři, šest, osm, 10. A budeme pop ke mně okno prohlížeče a jen Podívej se na to velmi rychle také. 

Takže mám jiné tlačítko zde v mé domovské stránce s názvem double. A když jsem klikněte na double, a řekne me před tím, než byl jeden, dva, tři, čtyři, Pět po dvě, čtyři, šest, osm, 10. A když jsem se vrátit a klikněte na double opět, dvě, čtyři, šest, osm, 10. A pak po, čtyři, osmi, 12, 16, a potom 20. A co dělám v této funkci? No, pokud bychom jen pop se k IDE, a Jsem vytáhnout svou anonymní funkce, zde na lince sedm až 13, já jsem dělá trochu vymyšleného práci tady, ale já jsem prostě vytištění co je v současné době v poli. Pak se na řádku 16, 17, a 18, tady je moje mapa. To je místo, kde jsem uplatňování tohoto zdvojnásobení Funkce na každý prvek. A pak se trochu dále, Dělám jen to samé Jsem dělal předtím, až teď jsem vytištění obsah pole poté. Ale všechno, co jsem udělal, je tady stačí použít anonymní funkce zmapovat v rámci celé pole. 

Takže ještě jeden velký téma mluvit o v JavaScript je ponětí o události. Událost je něco, co se právě děje Když uživatel pracuje s web strana, takže možná, že klikněte na něco, nebo možná je stránka dokončení načítání, nebo možná, že jsem se stěhoval jejich myš nad něčím, nebo že jsem napsal něco ve vstupním poli. Všechny tyto věci jsou události , které se vyskytují na naší webové stránce. A JavaScript má schopnost podporovat něco, volal zpracování události, která je funkce zpětného volání, že reaguje na html události. A co je funkce zpětného volání? No, je to obvykle jen další jméno pro anonymní funkce. Je to funkce, která reaguje na událost. A to je místo, kde se dostáváme k Myšlenka na vázání určité funkce na konkrétní html atributu. Většina html elementy mají Podpora pro atribut že jsme neměli mluvit o v html Video pro něco jako na kliknutí nebo na visu nebo na zatížení, všech těchto akcích které pak můžete psát funkce které se zabývají těmito událostmi když tyto události se vyskytují na své webové stránce. 

A tak možná vaše html vypadá nějak takto. A mám dvě tlačítka zde, Tlačítko jednoho a tlačítko dva, a zde mám v současné době definováno nic, ale to je místo, kde atribut click je zřejmě součástí mé html tagu. Tak prý, když jsem definovat, co je to děje uvnitř tohoto atributu, že to bude nějaký JavaScript funkce, která reaguje na události pravděpodobně kliknutí na Tlačítko jeden nebo tlačítko dva. 

Co je to docela fajn o tom je, že jsme Můžete napsat generický obsluhu události. A tato událost bude Handler vytvořit objekt události. A objekt události nám řekne která z těchto dvou tlačítek klikl. Nyní, jak to funguje? No, mohlo by to vypadat nějak takhle. Takže jsme se nejprve definovat naše tlačítek mít odezvu na zpětné volání funkce, která se bude jmenovat Při klepnutí na tlačítko, zavoláme Název srazu upozornění. A všimněte si v obou případech jsme absolvování v tomto parametru události. Proto nazýváme tuto funkci nebo pokud je tato funkce je spouštěn událostí děje, to bude k vytvoření tohoto objektu události a předat ji jako parametr upozornit jméno. A že objekt události je bude obsahovat informace o tom, které tlačítko byl klepli. A jak to dělá, že? No, mohlo by to vypadat nějak takhle. Takže teď v mém oddělený Soubor JavaScript, možná jsem muset najít to Funkce upozornění pro název, který znovu uznává, že parametr události. A pak tady je místo, kde jsem odhalování které tlačítko byla spuštěna, var spoušť rovná událost tečka source element. Co bylo zdrojem, který vytvořil Tento objekt události, který byl předán v? Byla to jednou tlačítko nebo je to tlačítko dvě? 

A pak tady všechno, co dělám, je vytisknout trigger.innerhtml. No, v tomto případě, v tomto kontext, trigger.innerhtml je právě to, co je napsáno na tlačítku. To jen tak se stane, když skočíme zpět na vteřinu, že by být to, co je mezi těmito tlačítky značky. Bude to tlačítko jednou nebo dvěma tlačítko. A pojďme se podívat na jak tato událost by handler podívejte se, jestli jsme měli to běží v praxi. 

Takže v první řadě, nemáš otevřely events.js, což je soubor JavaScript, kde Definoval jsem tuto funkci. A jak můžete vidět, je to skoro přesně to, co jsme právě viděli na snímku před vteřinou. A já budu jít přes do Domovská stránka jsme používali. A mám tady Tlačítko jednoho a tlačítko dva. A já budu klikněte na tlačítko jeden. Jste klikli na tlačítko jedna, pokud jste můžete vidět přímo zde v pohotovosti. DOBŘE. Klikněte na tlačítko dva, vás kliknul na tlačítko dvě. 

Takže obě tlačítka mají Stejná funkce volání, že jo? Oba byli ve střehu název událost, ale tento objekt události který se vytvořil, když klikneme na říká nám, které tlačítko byl klepli. Nemuseli jsme psát dva oddělené funkce nebo řešení s předat jakékoliv další informace. Jsme jen spoléhat na co JavaScript bude udělat pro nás, což je vytvořit, že druh objektu události v našem zastoupení. Je tu mnohem víc než do JavaScriptu to, co jsme probrali v tomto videu, ale s těmito Základním byste měli dostat poměrně dlouhé cesty k učení vše, co budete potřebujete vědět o této zajímavý jazyk. Jsem Doug Lloyd. To je CS50.