[Musik spiller] 

DOUG LLOYD: Så nu er vi gamle proffer på webprogrammering, ikke? Og vi har dækket flere sprog i de enkelte videoer. Og lad os nu gøre en mere, JavaScript. 

Først de gode nyheder, JavaScript er en moderne programmering sprog meget gerne PHP, hvis syntaks er afledt af C, så det er et godt sted at starte. Det handler om så gammel som PHP, så godt, have været omkring omkring 20 år. Det blev opfundet omkring samtidig med PHP. Og JavaScript er faktisk temmelig grundlæggende for brugeroplevelsen af banen. I virkeligheden er der tre sprog, som jeg ville sige slags udgør brugeroplevelse interagere med hjemmesiden, html, css, og JavaScript. Og så lad os nu snakke lidt om JavaScript. 

Den dårlige nyhed, dog med JavaScript er at det sætter en masse regler for sig selv, og derefter det bryder dem. Og JavaScript kan faktisk være form for udfordrende at lære, fordi det er i modsætning til C og PHP, som er meget struktureret og har meget strenge regler til, hvordan tingene kan fungere. JavaScript har slags af fået så fleksibel at måske tingene ikke kommer til at arbejde på den måde, vi forventer, at, og måske vi kan virkelig ikke lære vores første programmeringssprog som en JavaScript. Så måske fordi det ikke sat sig nogen regler, og det gør egentlig ikke håndhæve gode kodning vaner. Men nu har vi forhåbentlig udviklet nogle gode kodning vaner, og så vi kan begynde at strejftog ind i javascript en lille smule. 

For at skrive JavaScript, svarende til åbning en C-fil med en prik C forlængelse eller en PHP-fil med en prik PHP udvidelse, alt, hvad vi skal gøre, er at åbne op en fil med dot js filtypen. Vi behøver ikke at have nogen særlig afgrænsere som vi gjorde i PHP. Den slags vinkel beslag spørgsmålstegn PHP at vi er vant til fra det, den måde vi fortæller vores browser, hvad vi har, er JavaScript er ved at inkludere det i en html-tag, og vi vil se lidt om hvordan man gør det på bare et øjeblik. 

Den anden ting, der gør JavaScript anderledes, er dog, at det kører klientsiden. Så husker med PHP som vi kunne aldrig rigtig se PHP, der understregede en hjemmeside. Hvis vi nogensinde set den side kilde, ville vi kun se html, der var genereret ved denne PHP. Men JavaScript kører klientsiden. Din JavaScript kører på din computer. Og det er derfor, du kan gøre tingene gerne tilføje blokkere. Højre? Ad blokering sker som regel ved dræbe alle de JavaScript der kører på et bestemt websted. Og fordi det ville være nødt til køre på din maskine klientsiden, kan du bare stoppe JavaScript til at køre helt. Det betyder også, at når du bruger en hjemmeside, der indeholder JavaScript, du nødt til at sende JavaScript kilde kode som en del af din HTTP-svar til kunden, når de anmoder om det. Og så ikke måske du ønsker at bruge JavaScript at gøre virkelig følsomme ting ligesom videregive oplysninger om brugernes adgangskoder bakke og frem, fordi de er faktisk kommer til at modtage alle kildekoden, ikke kun html, der genereres, såsom det ville være tilfældet med sige PHP. 

Så hvordan gør vi inkluderer JavaScript i vores html at starte med? Nå, svarende til CSS, faktisk, er sortering af hvordan vi gør det her. Med CSS har vi stil tags. Og inde i disse stil tags, Vi kan definere en CSS style sheet. Tilsvarende med JavaScript kan vi åbne op scripttags, anden html-tag, vi ikke gjorde taler om i vores html-video, og skrive JavaScript i mellem disse script tags. Også selvom, som CSS, vi kunne forbinde med uden CSS-filer og trække dem ind i vores program på den måde. Med CSS kan vi også, undskyld mig, med JavaScript Vi kan også angive kilden attribut i script-tag at linke i JavaScript separat, så du ikke gør nødt til at skrive det i mellem scripttags, vi kan linke det i at bruge at script-tag så godt. Og ligesom med tilfældet med CSS, hvor anbefaler vi, at det var nok i din bedste interesse at skrive din CSS i en separat fil i tilfælde du har brug for at ændre det, ligeledes gør vi anbefaler at du skriver din JavaScript i separate filer og bruge scripttags kilde tillægge binde din JavaScript ind i din html, din webside. 

Så JavaScript variabler, vi får begynde at tale om syntaksen her. Og vi vil gå igennem denne form for hurtigt, fordi vi har gjort dette i PHP, så dette bør alle være temmelig bekendt. Så variabler i JavaScript er meget lig PHP variabler. Der er ingen form anvisning, og når man indfører en variabel, du præfikset det med nøgleordet var. I PHP ville vi gøre noget som dette, dollartegn x. Det er, hvordan vi angivet en variabel, men nej, vi ikke nævner den type af den variable overhovedet. Vi ville sige noget lignende dollar tegn x er lig 44 i PHP. Hvis vi gjorde det samme ting i JavaScript, vi ville sige var x er lig 44. Så Var er sortering af vores måde for at indføre en variabel. Det er måske lidt mere intuitiv end blot dollartegn variabel. 

Igen, da der ikke er nogen datatyper, kunne vi gøre det med enhver datatype, strygere, alt andet ville alle være var. Betingede, alle vores gamle venner fra C og PHP er stadig tilgængelige, så vi har, hvis ellers hvis, ellers, switch og spørgsmål mark colon. Switch resterende så fleksibel som det var i PHP, men alle disse du er bekendt med nu. Og tilsvarende med loops er de gamle favoritter i mens, gøre, mens og til stadig til rådighed for os. Så allerede ved vi en masse af det grundlæggende JavaScript slags fundamentale lige ved at have ganske lidt viden nu omkring C og PHP. 

Hvad med funktioner i JavaScript? Nå, svarende til PHP hver funktion er indføres med funktionen nøgleordet. Du siger funktion, og så skal du begynde at definere din funktion. Hvad er en lidt anderledes om JavaScript, er dog evnen til at have hvad der kaldes en anonym funktion. Så du kan definere funktioner der ikke har et navn. Det er noget, vi virkelig ikke har set før. Vi vil virkelig bruge konceptet af en anonym funktion lidt senere i denne video, fordi det vil gøre lidt mere mening i kontekst når vi ser det i en bestemt situation at jeg har lavet her. Men lad os bare tage et kig på, hvad en simpel JavaScript Funktionen kan se ud. 

Så jeg har gået videre og åbnet min CS50 IDE og jeg har allerede kørt Apache at begynde min server kører. Og jeg har denne fil åbne kaldt home.html. Og jeg vil zoome ind på en lille smule her. Og dybest set, kan du se Home.html er bare en masse knapper. Og jeg hævder i toppen her at dette er JavaScript afsnittet materialer. Så der er en masse knapper her, men hvad gør disse knapper rent faktisk gør? 

Nå, vil vi hovedet over til min IED, og jeg har home.html åbne her. I begyndelsen, her er hvor jeg forbinder i alle mine JavaScript kildefiler. Højre? Så jeg har anonymous.js, clock.js, Jeg bruger attributten kilde af script-tag til at linke i filen. Så jeg har ikke skrevet nogen JavaScript direkte ind i denne fil, men jeg har trukket i alle JavaScript Jeg har skrevet hver for sig. Og hvis vi rulle ned her, dette bør alle se noget bekendt med en lille smule af nye syntaks. Vi har her header tag for funktioner og derefter en knap. Jeg har et input, der er en type knap, og tilsyneladende når jeg klikker på det, Jeg har tænkt mig at ringe til nogle fungere alarm dato. Og det er, hvordan vi kan slags blande en lille smule af JavaScript og html. De rent faktisk spiller temmelig pænt sammen og så tilsyneladende når Jeg klikker på denne knap, jeg har tænkt mig at kalde en funktion alarm dato. Og på samme måde har jeg definerede adfærd for alle de andre knapper, er på denne home.html side, som vi vil holde tilbage til i løbet af denne video. Men lad os gå tilbage op her og tage et kig ved clock.js, som er JavaScript-fil, som jeg skrev der har denne første funktion vi kommer til at tage et kig på. Som du kan se, jeg begynder min JavaScript fungere med søgeordet-funktion, og jeg har givet denne en navn, kaldes det alarm dato. Inde i der, jeg tilsyneladende skabe en ny lokal variabel kaldet aktuelle dato. Og jeg har tænkt mig at tildele lige til en ny dato. Og vi kunne komme ind i en masse detaljer om, hvad en date er, og virkelig JavaScript er så stort, at vi ikke kan muligvis dække alt i én video. Men er det tilstrækkeligt at sige, vil dette at vende tilbage til mig et dataelement, der indkapsler den aktuelle dato og tid. Jeg opbevare det i en variabel, at jeg er tilsyneladende vil advare aktuelle dato. 

Nå, hvad betyder alarm aktuelle dato ud? Lad os tage et kig på selve filen bakke ovre i browservinduet. Så igen, det er den knap, som jeg har bundet til denne angivne funktion. Og jeg klikker på det der, og se, hvad det gjorde, det advaret. Det dukkede op denne slags boks fortæller mig, at det aktuelle klokkeslæt er, tilsyneladende det er november 4 ved 10:43:43 i morgen. Og hvis jeg klikker på det igen, nu det er et par sekunder senere, ikke? Så det er alt denne funktion gør. Når jeg klikker på denne knap, det popper op en advarsel besked til mig. Så der er virkelig ikke for meget at funktioner der er forskellig fra PHP, bare en lille smule af nye syntaks der kommer med at arbejde med JavaScript. 

Arrays i JavaScript er temmelig ligetil. At erklære et array, du bruger De kantede parenteser syntaks at vi er bekendt med fra PHP. Og ligner PHP, vi også kan blande datatyper. Så dette array, både af disse arrays ville være helt legitimt JavaScript. En, der er alle heltal, og en, er blandet op forskellige datatyper. 

Hvad er noget helt andet i JavaScript, selv? Det er forestillingen om et objekt. Så måske du har hørt om objektorienteret programmering. Vi gør ikke en masse af det i CS50, men vi vil gøre en lille smule af det her i forbindelse med JavaScript. Nu JavaScript har evnen til at opføre sig som et objektorienteret programmeringssprog sprog, men det er ikke i sig selv udelukkende en objektorienteret programmeringssprog. Og dette igen kommer tilbage til, hvorfor jeg sagde, det kan være meget udfordrende at lære JavaScript som din første programmering sprog, fordi den ikke virkelig passe en bestemt paradigme. 

C på den anden side er en funktionelt programmeringssprog. Hvis vi vil, funktioner slags den store boss mand, ikke? De diktere, hvad sker alt andet. Vi ønsker at ændre variabler, vi kalder funktioner. Vi gør tingene til funktioner. Objekter stedet, i en objektorienteret sprog, objekter slags blive stjerne og funktioner bliver slags sekundært. Men hvad er et objekt, hvad er denne forestilling om et objekt? Tja, hvis det hjælper, tror om det på først Sorter ligesom en C struktur eller en struct at vi har lært om før. I C, en struktur indeholder en række områder, og måske vi nu kan begynde at kalder disse felter egenskaber. Men de egenskaber, aldrig rigtig stå på egne, ikke? Hvis jeg definerer en struktur for en bil som dette med følgende to marker eller egenskaber, en an heltal for året af bilen og en anden en 10 karakter streng for den model af bilen, Jeg kan sige noget som dette, Jeg kan erklære en ny variabel af typen struct bil herbie. Og så kan jeg sige noget ligesom herbie.year lig 1963, og herbie.model lig Beetle. Det er ok. Jeg bruger felterne i forbindelse af strukturen, men jeg kunne aldrig bare sige noget som dette. Højre? Jeg kan ikke bruge navnet feltet uafhængig af strukturen. Det er sortering af en grundlæggende ting. 

Så felter er grundlæggende for C strukturer er meget lig egenskaber bliver grundlæggende for JavaScript objekter. Men hvad der gør dem særligt interessant er, at objekter også kan have hvad kaldes metoder, som er virkelig bare en fancy ord for funktioner, er forbundet til objektet samt. Så det er en funktion, der kun kan kaldes i forbindelse med et objekt. Kun et objekt, der har defineret denne funktion inde i sin, hvis du tænker over en struct, funktionen defineres inden de definerer krøllede parenteser af strukturen. Så det kun betyder noget til strukturen. Og det er slags, hvad vi laver her med genstande og metoder. Det er dybest set ligesom vi er definerer en funktion, kun mening på en særligt formål, og så vi ringe, at en fremgangsmåde af objektet. Og vi kan aldrig kalde det fungerer uafhængigt af objektet, ligesom vi ikke kan sige år eller model uafhængig af struct i C. 

Så funktionel programmering paradigmer ser noget som dette. Funktion og derefter, når du passerer i objektet som en parameter. I et objektorienteret programmering sprog, denne slags får vendt, og vi ville tænke over det sådan, object.function. Så det slags, at dot operatør igen indebærer at det er en slags ejendom eller attribut af objektet selv. Men dette er hvad et objekt orienterede programmeringssprog kunne gøre for at gøre en funktion kalder på en metode, igen, som er blot en særligt ord for en funktion der er uløseligt forbundet med et objekt. Dette er, hvad der syntaks kunne se ud. Og så vi vil begynde at se nogle af dette i forbindelse med JavaScript. 

Du kan også tænke på et objekt lidt ligesom et associativt array, som vi er bekendt med fra PHP. Husk en associativt array tillader os at have vigtige værdipar, i stedet for at have indekser 0, en, to, tre, og så videre, som vi er vant til fra C arrays. Associative arrays kan kortlægge ord, såsom i PHP video, vi talte om toppings af pizzaer. Og så havde vi en matrix kaldet pizzaer, og vi havde ost var en nøgle og $ 8,99 var den værdi, og derefter pepperoni var en nøgle, $ 9.99 var en værdi, og så videre. Og så kan vi også tænke på en objekt slags svarer til en associativ array. Og så denne syntaks her ville skabe et nyt objekt kaldte herbie med to egenskaber inde i den. År, hvilket er tildelt værdien 1963 og model, som er forsynet med strengen Bille. 

Og bemærke her, at jeg bruger enkelte anførselstegn i JavaScript. Du kan bruge enkelt eller dobbelt citationstegn når du taler om strenge. Det er bare konventionelt sådan, at de fleste gange når du skriver JavaScript, du bare bruge enkelte anførselstegn. Men jeg kunne bruge dobbelte anførselstegn her, og det ville være helt fint så godt. 

Så huske, hvordan i PHP havde vi dette begreb en for hver løkke, der ville tillade os at gentage over alle de nøgleværdi par af en associativ array, fordi vi havde ikke denne mulighed for at gentage gennem 0, en, to, tre, fire, og så videre? JavaScript har noget meget lignende, men det er ikke kaldes en for hver sløjfe, det hedder et i sløjfer. Så hvis jeg sagde til mig som dette, for var nøglen i objektet, det er slags ligner sige for hver noget som noget. Men alt jeg gør her er iteration gennem alle nøglerne til mit formål. Og inde i de krøllede seler der, jeg ville bruge objekt skarpe parenteser nøglen til at henvise til værdien ved, at centrale beliggenhed. 

Alternativt er der endda en anden tilgang. Hvis jeg bare kun bekymrer sig om værdier, kan jeg sige for centrale objekt, og bare bruge nøglen inde. Så for var nøglen i objekt, jeg har at bruge objekt kantede parenteser nøglen i sløjfen. Til Var nøgle objekt, kan jeg bare bruge nøglen inde i løkken, fordi jeg er bare specifikt taler om de værdier der. 

Så lad os måske tage et se på forskellen lige hurtigt vise dig forskellen mellem fire i og for af med en meget specifik array, som vi har her, uge ​​array. Så jeg er nødt til at finde et nyt array at jeg er fyldt med syv strygere, Mandag, tirsdag, onsdag, Torsdag, fredag, lørdag, søndag. Og jeg vil gerne nu gentage gennem denne matrix, udskrivning ud visse oplysninger. Hvis jeg bruger en i løkke at udskrive oplysninger, hvad tror du, jeg har tænkt mig at få? Nå, lad os tage et kig. Og før vi springe over til mit browservindue, bare vide, at console.log er sortering af en måde at gøre et print F i JavaScript. Men hvad er den konsol? Tja, det er, hvad vi vil at gå tage et kig på lige nu. 

OK, så er vi tilbage her i mit browservindue, og jeg har tænkt mig at åbne mine udviklingsværktøjer. Igen, jeg bare trykke F12 at åbne op for udviklingsværktøjer. Og bemærk, at her på top Jeg har valgt konsol. Så dette er forestillingen af en udvikler konsol, og det vil give os mulighed for at udskrive oplysninger ud, slags ligesom terminalen, men som du kan se lidt senere, Vi kan også skrive oplysninger i at interagere med vores hjemmeside. Jeg har tænkt mig at zoome ind en lille smule her, og jeg vil nu klikke på i test. Og fire i test-- jeg ikke gonna vise dig koden for det lige nu, men du får det, hvis du downloade kildekode, er tilknyttet denne video-- er bare, at i loop at vi så bare en sekund siden på diaset. 

Så jeg vil klik, knappen, og herovre, her er hvad der er udskrevet i konsol, 0, en, to, tre, fire, fem, seks. Jeg havde ikke udskrive oplysningerne inden for disse Array steder, fordi jeg brugte en i løkke. Og inde i kroppen af ​​løkken, jeg bare udskrives tast ikke modsætte tasten. Men hvis jeg nu klart min konsol, og jeg skifte til for test, og fire af test Jeg siger jeg bruge til loop i stedet og udskrive nøgle, hvis jeg klikker der, nu er jeg får den konkrete elementer inde i mit objekt eller min array i dette tilfælde. Min vifte af ugedage. Jeg udskrives mandag Tirsdag, onsdag. Så det er forskellen mellem a i loop, der udskriver bare tasterne, hvis du bare bruger nøgle indersiden af ​​kroppen af ​​løkken, og et for loop, som udskriver de værdier, hvis du bruger bare tasten inde i kroppen af ​​løkken. 

Okay, hvordan kan vi nu begynde at sammenkæde strenge og måske blande nogle variable med interpolation ligesom vi var i stand til at gøre i PHP? Nå, vi er temmelig bekendt med dette fra PHP. Dette er, hvordan vi ville gøre det ved hjælp af dot operatør at sammenkæde strenge. I JavaScript, selv om, vi faktisk bruge noget kaldet plus operatør, som er måske endda en lille smule mere intuitiv, ikke? Vi tilføjer en flok af strenge sammen. Så lad os hovedet tilbage igen og se, hvad det vil udskrive, hvis vi forsøger at udskrive alle oplysningerne i uge array. Okay, så under her under streng sammenkædning, Jeg har to muligheder, snor bygning V1 og derefter string bygning V2. Og vi vil se, hvorfor vi brug V2 i en anden. Men jeg skal du klikke på string bygning V1, som er koden var vi bare tage et kig på, den console.log med alle de plusser. Lad os se, om denne udskrifter ud af, hvad vi forventer. 

Mandag er dag nummer 01 i ugen, Tirsdag er dag nummer 11 i ugen. Nå, hvad jeg prøvede at gøre der var få det at udskrive mandag er dag nummer én, tirsdag er dag nummer to. Men det ser ud som jeg er altid udskrive en. Tja, hvorfor er det? Tja, det viser sig, tage endnu et kig på denne lille stump kode her. Bemærk, at vi ved hjælp af plus operatør i to forskellige sammenhænge. 

Og så her er, hvor måske ting at vi har sådan sagt, Åh, det er så stor. Vi behandler ikke datatyper længere. Men her er, hvor det faktum at vi mister datatyper kan faktisk være en smule af et problem for os. Nu, plus operatøren anvendes til at sammenkæde strenge og tilføje numre sammen, JavaScript har at gøre sit bedste gæt om, hvad jeg vil have det til at gøre for mig. Og i dette tilfælde, det gættede forkert. Det bare sammenkædet dag, hvilket ville være 0, en, to, tre, fire, fem eller seks, og så er det bare sammenkædet det, og derefter sammenkædet én. Det gjorde faktisk ikke tilføje dem sammen. Og så disse sprog, PHP og JavaScript, der abstracts væk dette begreb typer, du behøver ikke at beskæftige sig med det længere. De har stadig typer under kølerhjelmen. Og vi kan, i situationer som dette, udnytte denne omstændighed ved at sige noget Ligesom måske dette, der fortæller JavaScript, ved måde, behandle dette som et heltal, ikke behandle det som en streng, selv selvom vi blande strygere og heltal her. 

Det er bare en af ​​disse ting at det forekommer så stor i forbindelse at vi ikke behøver at behandle typer længere, men nogle gange vil du ende i en situation præcis som dette, hvor den omstændighed, at du ikke har kontrol over typer kan give bagslag på dig hvis du ikke er forsigtig. Og så hvis vi pop tilbage over til IDE, jeg er kommer til at rydde min konsol igen, og jeg har tænkt mig at klikke på strengen bygning udgave to, som er, hvor jeg bruger, at parse int funktion. Nu er det at udskrive oplysninger, som jeg forventer. Mandagens dag nummer et, tirsdag er dag nummer to, og så videre. 

Så lad os tale om funktioner igen. Jeg lovede, vi ville tale om anonym funktioner og nu forbindelse til det er endelig ankommet. Så før vi gør det, lad os tale igen om arrays for kun et sekund. Så arrays er en speciel tilfælde af et objekt. Faktisk alt i JavaScript er faktisk et objekt. Så funktioner er en særligt tilfælde af et objekt, heltal er en speciel tilfælde af en genstand, men arrays specifikt har en række metoder. Husk fordi de er objekter, de kan have egenskaber og metoder. De har en række metoder, der kan anvendes til disse objekter. Der er en metode, der kaldes størrelse, array.size, som vil vende tilbage til dig, som man kunne forvente antallet af elementer i din array. array.pop, lidt ligesom vores opfattelse af popping off af en stak, hvis du husker fra vores stakke video, fjerner det sidste element fra arrayet. array.push tilføjer et nyt element til slutningen af ​​et array. array.shift er sortering af Ligesom DQ, det splejsninger ud den allerførste element i et array. 

Men der er også en anden særlig Fremgangsmåde ifølge et array kaldet kort. Og det er sortering af en interessant koncept. Så hvad er ideen om et kort? Du vil faktisk se denne på flere andre sprog, og vi taler ikke om en slags kartografer kort her, vi taler om en kortlægning funktion. I forbindelse er vi taler om her, et kort er en særlig operation, vi kan udføre på en række at anvende en bestemt funktion til hvert element af denne matrix. og så ville vi sige i dette tilfælde måske array.map, og inde i det, vi passerer i kortet er en funktion, vi ønsker der skal anvendes på hver enkelt element. Så det er lidt analogt med at bruge en løkke til at gentage over hvert element og anvende en særlig fungere til hvert element, netop JavaScript har denne indbygget begrebet kortlægning, der kan anvendes. Og det er en stor sammenhæng tale om en anonym funktion. 

Så lad os sige, vi har dette array af heltal. Det hedder nums, og det har fået fem ting i den, en, to, tre, fire, fem. Nu vil jeg kortlægge nogle funktion på dette array. Jeg vil gerne have en funktion, gælder til hvert element i arrayet. Nå, lad os sige, at det, jeg vil gøre er bare fordoble alle elementerne. Hvad jeg kunne gøre er bare at bruge en løkke til Var I lig 0, jeg er mindre end eller lig med 4, jeg plus, plus, og derefter fordoble hver enkelt nummer. Men jeg kan også gøre noget som dette. Jeg kan sige nums var tidligere en to tre fire fem, nu, vil jeg dog gerne have dig til anvende en mapning dette array hvor jeg vil gerne have dig at fordoble hvert nummer. Og det er præcis hvad der sker her. Men mærke til, hvad jeg passerer i som argument til at kortlægge. Dette er en anonym funktion. Og bemærk jeg har ikke givet denne funktion et navn, Jeg har kun givet det en parameter listen. Og så dette er et eksempel af en anonym funktion. 

Vi generelt ville aldrig kalde dette funktion uden for rammerne af kortet. Vi definerer det som en parameter at kortlægge, og så vi ikke rigtig nødt til at have et navn for det, hvis det eneste, der bekymrer sig om, er kortet og det er defineret rigtigt der inde i kortet. Og så dette er en anonym funktion. Vi har ikke kunnet at gøre dette tidligere. Marker en funktion, som accepterer en parameter, num, og hvad denne funktion gør er afkast num gange 2. Og så efter denne kortlægning er blevet anvendt, dette er nu hvad nums udseende lignende, to, fire, seks, otte, 10. Og vi vil pop over til min vinduet og bare browser tage et kig på dette virkelig hurtigt så godt. 

Så jeg har en anden knap her i mit hjem side kaldet dobbelt. Og når jeg klikker dobbelt, og det fortæller mig før det var en, to, tre, fire, fem efter to, fire, seks, otte, 10. Og hvis jeg gå tilbage og klik dobbelt igen, to, fire, seks, otte, 10. Og så efter, fire, otte, 12, 16, og derefter 20. Og hvad gør jeg i denne funktion? Tja, hvis vi bare pop over til IDE, og Jeg trækker min anonyme funktion, her on line syv til 13, jeg er laver lidt fancy arbejde her, men jeg er bare udskrive hvad der i øjeblikket i array'et. Derefter på linje 16, 17, og 18, der er mit kort. Det er her, jeg anvender denne fordobling funktion til hver enkelt element. Og så lidt længere nede, Jeg er bare gøre det samme Jeg gjorde før, bortset fra nu er jeg udskrive indholdet af arrayet bagefter. Men alt jeg har gjort her er bare bruge en anonym funktion til kort over en hel vifte. 

Så en mere stort emne at tale om i JavaScript er forestillingen af ​​en begivenhed. En begivenhed er noget, der bare sker når en bruger interagerer med din web side, så måske de klikker noget, eller måske siden er loadet, eller måske de har flyttet deres musen over noget, eller de har indtastet noget i et input felt. Alle disse ting er begivenheder der er indtruffet på vores hjemmeside. Og JavaScript har evne til at understøtte noget kaldes en event handler, som er en callback funktion, reagerer på en html begivenhed. Og hvad er en callback funktion? Tja, det er generelt bare en anden navn til en anonym funktion. Det er en funktion, som reagerer på en begivenhed. Og det er her vi kommer til Ideen til at binde visse funktioner til en bestemt html attribut. De fleste HTML-elementer har støtte til en attribut at vi ikke taler om i html video til noget lignende på klik eller på hover eller belastning, alle disse begivenheder som du derefter kan skrive funktioner at beskæftige sig med disse begivenheder når disse begivenheder forekommer på din webside. 

Og så måske din html ser noget som dette. Og jeg har to knapper her, one og knap to, og her har jeg i øjeblikket defineret noget, men det er her attributten på klik er tilsyneladende en del af min html-tag. Så tilsyneladende når jeg definerer, hvad der er foregår inde i denne egenskab, det kommer til at være nogle javascript funktion, der reagerer på begivenheden formentlig for at klikke på knap en eller knap to. 

Hvad er slags cool om dette er vi kan skrive en generisk event handler. Og denne begivenhed Handler vil oprette en begivenhed objekt. Og begivenheden objektet vil fortælle os, hvilken af ​​de to knapper blev klikket. Nu, hvordan hænger det sammen? Tja, det kan se sådan ud. Så vi vil først definere vores knapper at have en reaktion på tilbagekald funktion, der vil blive kaldt når der klikkes på knappen, vi vil kalde begivenhed alarm navn. Og meddelelse i begge tilfælde vi er passerer i denne begivenhed parameter. Så vi kalder denne funktion eller når denne funktion udløses af hændelse sker, det kommer til at skabe denne begivenhed objekt og videregive det som en parameter at advare navn. Og så fald formål er kommer til at indeholde oplysninger om, hvilken knap blev klikket. Og hvordan gør den det? Tja, det kan se sådan ud. Så nu i min separat JavaScript-fil, jeg kunne nødt til at finde denne funktion alarm navn, som igen accepterer, at begivenheden parameter. Og så her er hvor jeg detektering hvilken knap blev udløst, Var trigger lig begivenhed dot kildeelementet. Hvad var kilden, der skabte denne begivenhed objekt, der blev vedtaget i? Var det knap én eller var det knap to? 

Og så her hele jeg gør er udskrivning ud trigger.innerhtml. Tja, i dette tilfælde, i dette sammenhæng trigger.innerhtml er lige, hvad der er skrevet på knappen. Det bare så sker, hvis vi hopper tilbage til en anden, der ville være, hvad der er i mellem disse knapper tags. Det vil være knap en eller knap to. Og lad os tage et kig på hvordan dette event handler ville se ud, hvis vi havde det kører i praksis. 

Så først og fremmest, du har åbnet events.js, som er JavaScript fil, hvor Jeg har defineret denne funktion. Og som du kan se, er det temmelig meget præcis, hvad vi lige har set på diaset et sekund siden. Og jeg vil gå over til hjemmeside vi har brugt. Og jeg har her knap en og knap to. Og jeg vil klikke på knappen én. Du har klikket på knappen én, hvis du kan se lige her i indberetningen. OK. Klik på knappen to, du klikket på en knap to. 

Så begge knapper har den samme funktion opkald, ikke? De begge var alarm navn begivenhed, men denne begivenhed objekt der bliver skabt, når vi klikker på det fortæller os, hvilken knap blev klikket. Vi havde ikke til at skrive to separate funktioner eller aftale med have at videregive yderligere oplysninger. Vi er bare stole på hvad JavaScript vil gøre for os, som er at skabe den slags begivenhed objekt på vores vegne. Der er meget mere at JavaScript end hvad vi har dækket i denne video, men har disse grundlæggende bør få dig ganske lang måder at læring alt, hvad du brug for at vide om dette interessant sprog. Jeg er Doug Lloyd. Det er CS50.