[MUSIK SPELA] 

DOUG LLOYD: Så nu vi är gamla proffs på webbprogrammering, eller hur? Och vi har täckt flera språk i enskilda videoklipp. Och nu ska vi göra en mer JavaScript. 

Första goda nyheter, JavaScript är en modern programmering språk likt PHP vars Syntaxen är härledd från C, så det är ett bra ställe att börja. Det är ungefär lika gammal som PHP, liksom, har funnits cirka 20 år. Det uppfanns runt Samtidigt som PHP. Och JavaScript är faktiskt ganska grundläggande för användarupplevelsen av banan. I själva verket finns det tre språk som jag skulle säga sorts göra upp användarens upplevelse av att interagera med webbplatsen, html, CSS och JavaScript. Och så nu ska vi prata lite om JavaScript. 

De dåliga nyheterna är dock med JavaScript är att det sätter en massa regler för sig själv, och sedan det bryter dem. Och JavaScript kan faktiskt vara typ av en utmaning att lära sig, eftersom det är till skillnad från C och PHP, vilket mycket är strukturerade och har mycket strikta regler för hur saker och ting kan fungera. JavaScript har sortens av blivit så flexibel det kanske det inte går att fungerar som vi förväntar oss, och kanske vi verkligen kan inte lära vår första programmeringsspråk som en JavaScript. Så kanske eftersom det inte satt några regler, och det spelar egentligen ingen driva goda kodning vanor. Men nu har vi förhoppningsvis utvecklat några bra kodning vanor, och så att vi kan börja att razzia i JavaScript lite. 

För att skriva JavaScript, liknande öppning upp en C-fil med en punkt C förlängning eller PHP-fil med en prick PHP förlängning, allt vi behöver göra är att öppna upp en fil med pricken js filändelsen. Vi behöver inte ha någon särskild avgränsare som vi gjorde i PHP. Denna typ av vinkeln fäste frågetecken PHP att vi är vana vid från det, hur vi berätta vår webbläsare som vad vi har är JavaScript är genom att ta den i en HTML-tagg, och vi får se lite om hur man gör det på bara ett ögonblick. 

Den andra saken som gör JavaScript olika, är dock att det körs på klientsidan. Så minns med PHP som Vi kunde aldrig riktigt se PHP som underströk en webbplats. Om vi ​​någonsin sett den sida källa, vi skulle bara se html som var genereras av att PHP. Men JavaScript driver klientsidan. JavaScript körs på din dator. Och det är därför du kan göra saker som lägger blockerare. Höger? Annonsblockering görs oftast genom döda alla JavaScript som körs på en viss webbplats. Och eftersom det skulle behöva körs på din maskin klientsidan, du kan bara stoppa JavaScript för att köra helt. Det innebär också att när du använder en webbplats som innehåller JavaScript, du måste skicka JavaScript källa kod som en del av http svar till kunden när de begär det. Och så du kanske inte vill använda JavaScript att göra riktigt känsliga saker som vidarebefordrar information om användarnas lösenord rygg och framåt, eftersom de är faktiskt kommer att få alla av källkoden, inte bara html som genereras, såsom skulle vara fallet med säga PHP. 

Så hur gör vi inkluderar JavaScript i vår html till att börja med? Tja, i likhet med CSS, faktiskt, är en slags hur vi gör det här. Med CSS har vi stil taggar. Och insidan av dessa stil taggar, Vi kan definiera en CSS-formatmall. På samma sätt med JavaScript kan vi öppna upp script-taggar, annan html tag vi inte tala om i vår html video, och skriva JavaScript mellan dessa script-taggar. Även om, som CSS, vi kunde länka in utanför CSS-filer och dra in dem i vårt program på det sättet. Med CSS kan vi också, ursäkta mig, med JavaScript Vi kan också ange källan attribut av skripttagg länka in JavaScript separat, så att du inte måste skriva det i mellan script-taggar, vi kan länka det att använda att skripttagg också. Och precis som i fallet med CSS där Vi rekommenderar att det var förmodligen i ditt bästa intresse att skriva din CSS i en separat fil i fall du behöver ändra det, på samma sätt gör vi rekommenderar att du skriver ditt JavaScript i separata filer och använda skripttaggarna källa skriva knyta JavaScript i din html, din webbsida. 

Så JavaScript variabler, vi ska börja tala om syntaxen här. Och vi ska gå igenom denna typ av snabbt, eftersom vi har gjort detta i PHP, så allt detta borde vara ganska bekant. Så variabler i JavaScript är mycket lik PHP variabler. Det finns ingen typ specificerare, och när du införa en variabel, du prefix det med nyckelordet var. I PHP skulle vi göra något så här, dollartecken x. Det är hur vi indikerade en variabel, men nej, vi inte nämna vilken typ av variabeln alls. Vi skulle säga något i stil dollartecken x är lika 44 i PHP. Om vi ​​gjorde det Samma sak i JavaScript, skulle vi säga var x är lika med 44. Så var är typ av vägen att införa en variabel. Det är kanske lite mer intuitiv än bara dollartecken variabel. 

Återigen, eftersom det inte finns någon datatyper, skulle vi kunna göra detta med någon datatyp, strängar, något annat skulle alla vara var. Villkors, alla våra gamla vänner från C och PHP är fortfarande tillgängliga, så vi har om, else if, annars, strömbrytare och fråga märke kolon. Switch kvar så flexibel som den var i PHP, men alla dessa du bekant med vid det här laget. Och på liknande sätt med öglor är de favoriter medan, gör tid, och för fortfarande tillgängliga för oss. Så redan vet vi en hel del av grundläggande JavaScript slags fundamenta bara genom att ha en hel kunskap nu om C och PHP. 

Vad om funktioner i JavaScript? Tja, i likhet med PHP varje funktion är introducerades med nyckelordet function. Du säger funktion, och sedan börja definiera din funktion. Vad är lite annorlunda om JavaScript är dock möjligheten att ha vad som kallas en anonym funktion. Så du kan definiera funktioner som inte har ett namn. Detta är något som vi verkligen inte har sett förut. Vi kommer verkligen använda begreppet av en anonym funktion lite senare i denna video, eftersom det ska göra lite mer känsla i sitt sammanhang när vi ser det i en viss situation att jag har skapat här. Men låt oss bara ta en titt på vad en enkel JavaScript Funktionen kan se ut. 

Så jag har gått vidare och öppnat min CS50 IDE och jag har redan kör Apache att börja min server som kör. Och jag har den här filen öppna kallas home.html. Och jag kommer att zooma in lite här. Och i princip kan du se Home.html är bara en massa knappar. Och jag hävdar upptill här att detta är JavaScript sektionen material. Så det finns en massa knappar här, men vad gör dessa knappar faktiskt gör? 

Tja, vi bege dig till min IED, och jag har home.html öppna här. Alldeles i början, här är där jag länka i alla mina JavaScript källfilerna. Höger? Så jag har anonymous.js, clock.js, Jag använder källattributet av skripttagg att länka in filen. Så jag har inte skrivit någon JavaScript direkt i den här filen, men jag har dragit i alla JavaScript Jag har skrivit separat. Och om vi rulla ner här, detta bör alla ser något bekant med lite ny syntax. Vi har här sidhuvudtagg för funktioner och sedan en knapp. Jag har en ingång som är en knapp typ, och tydligen när jag klickar på den, Jag ska ringa några fungera alert datum. Och det är hur vi slags kan blanda ihop en liten bit av JavaScript och html. De spelar faktiskt ganska snyggt tillsammans, och så uppenbarligen när Jag klickar på den här knappen, jag kommer att ringa någon funktion alert datum. Och på samma sätt har jag definierade beteenden för alla andra knappar som är på den home.html sida, som vi kommer att hålla tillbaka till under loppet av denna video. Men låt oss gå tillbaka upp här och ta en titt vid clock.js, som är den JavaScript-fil som jag skrev som har denna första funktion Vi ska ta en titt på. Som ni kan se, jag börjar min JavaScript fungera med sökordet funktion, och jag har gett detta ett namn, det kallas alert datum. Inuti det, jag uppenbarligen skapa en ny lokal variabel kallad aktuellt datum. Och jag kommer att tilldela en lika med ett nytt datum. Och vi kunde få in en hel del detalj om vad ett datum är, och verkligen JavaScript är så stor att vi kan omöjligen täcka allt i en video. Men det räcker att säga, detta kommer att återvända till mig ett dataelement som kapslar aktuellt datum och klockslag. Jag lagrar det i en variabel som jag uppenbarligen kommer att varna dagens datum. 

Tja, vad gör alert aktuellt datum ser ut? Låt oss ta en titt på själva filen tillbaka över i webbläsarfönstret. Så återigen, detta är den knapp som jag knutit till denna namngiven funktion. Och jag klickar på den där och titta vad det gjorde, varnade det. Det dök upp denna typ av box berättar mig att den aktuella tiden är tydligen Det är 4 november kl 10:43:43 på morgonen. Och om jag klickar på den igen, nu Det är ett par sekunder senare, eller hur? Så det är allt här funktionen gör. När jag klickar på den här knappen, det dyker upp ett meddelande till mig. Så det finns egentligen inte för mycket funktioner som skiljer sig från PHP, bara en liten bit av ny syntax som kommer med att arbeta med JavaScript. 

Matriser i JavaScript är ganska enkelt. Att förklara en array använder du Hakparenteserna syntax att vi är bekant med från PHP. Och liknar PHP, vi kan också blanda datatyper. Så denna array, både av dessa matriser skulle vara helt legitimt JavaScript. En som är alla heltal, och en som blandas upp olika datatyper. 

Vad är något helt annat i JavaScript, men? Det är begreppet ett objekt. Så kanske du har hört talas om objektorienterad programmering. Vi gör inte mycket av det i CS50, men vi kommer att göra en liten bit av det här i samband med JavaScript. Nu JavaScript har förmågan att beter sig som ett objektorienterat programmeringsspråk språk, men det är inte i sig uteslutande ett objektorienterat programmeringsspråk. Och detta igen kommer tillbaka till varför jag sa, det kan vara mycket utmanande att lära JavaScript som din första program språk, eftersom den inte verkligen passa en viss paradigm. 

C på andra sidan är en funktionell programmeringsspråk. Om vi ​​vill, funktioner sorts big boss mannen, eller hur? De diktera vad händer allt annat. Vi vill ändra variabler, vi kallar funktioner. Vi gör saker till funktioner. Objekt i stället, i ett objektorienterat språk, föremål slags bli stjärnan och funktioner blir slags sekundär. Men vad är ett objekt, vad är denna föreställning om ett objekt? Tja, om det hjälper, tror om det först sortera av som en C-struktur eller en struct att vi har lärt oss om tidigare. I C, innehåller en struktur ett antal områden, och kanske vi nu kan börja kalla dessa fält egenskaper. Men egenskaperna aldrig riktigt stå på egna ben, eller hur? Om jag definierar en struktur för en bil såhär med följande två fält eller fastigheter, en an heltal för det år då bilen och en annan 10 tecken sträng för modellen av bilen, Jag kan säga något sådant, Jag kan förklara en ny variabel av typen struct bil herbie. Och då kan jag säga något liknande herbie.year lika 1963, och herbie.model lika Beetle. Det är ok. Jag använder fälten i ramen för struktur, men jag kunde aldrig bara säga något så här. Höger? Jag kan inte använda fältnamnet oberoende av strukturen. Det blir liksom en grundläggande sak. 

Så inriktningarna är grundläggande för C strukturer är mycket lika egenskaper är grundläggande för JavaScript-objekt. Men vad som gör dem särskilt intressant är att objekt också kan ha vad kallas metoder, som egentligen bara ett fint ord för funktioner som är inneboende till objektet samt. Så det är en funktion som bara kan vara kallas i samband med ett föremål. Endast ett objekt som har definierat denna funktion inne i dess, om du tänker på en struct, funktionen definieras inuti de definierar klammerparenteserna av strukturen. Så det bara betyder något till strukturen. Och det är typ av vad vi gör här med objekt och metoder. Det är i princip som vi är att definiera en funktion som bara vettigt på en visst objekt, och så vi ring att en metod av objektet. Och vi kan aldrig kalla det funktion oberoende av objektet, precis som vi inte kan säga år eller modell oberoende av struct i C. 

Så funktionell programmering paradigm se ut så här. Funktion och sedan när du passerar i objektet som en parameter. I ett objektorienterat programmeringsspråk språk, denna typ av blir vänt, och vi skulle tänka på det så här, object.function. Så det slags att dot operatören igen innebär att det är någon form av egendom eller ett attribut för själva objektet. Men detta är vad ett objekt orienterade programmeringsspråk kan göra för att göra en funktion uppmana en metod, återigen, som är bara en speciellt ord för en funktion som är inneboende till ett objekt. Detta är vad det syntax kan se ut. Och så vi börjar att se några av detta i samband med JavaScript. 

Du kan också tänka på ett objekt ungefär som en associativ array, som vi känner till från PHP. Kom ihåg en associativ array tillåter vi har nyckelpar värde, i stället att ha index 0, en, två, tre, och så vidare som vi är vana vid från C matriser. Associativa arrayer kan kartlägga ord, såsom i PHP video, Vi pratade om pålägg av pizzor. Och så hade vi en array kallade pizzor, och vi hade ost var en nyckel och $ 8,99 var värde, och sedan pepperoni var en nyckel, $ 9,99 var ett värde, och så vidare. Och så kan vi också tänka på ett invända slags liknar en associativ matris. Och så denna syntax här skulle skapa ett nytt objekt kallas herbie med två fastigheter inne i det. År, som tillskrivs värdet 1963, och modell, som tillskrivs strängen Skalbagge. 

Och lägg märke till här att jag använder apostrof i JavaScript. Du kan använda enkla eller dubbla citattecken när du pratar om strängar. Det är bara på konventionellt sätt Det fall som de flesta gånger när du skriver JavaScript du bara använda enkla citattecken. Men jag kunde använda citationstecken här, och det skulle vara helt bra också. 

Så kom ihåg hur i PHP hade vi detta begrepp en för varje slinga som skulle tillåta oss att iterera över hela nyckelvärdet par av ett associativt array, eftersom vi har inte denna förmåga att iterera genom 0, ett, två, tre, fyra, och så vidare? JavaScript har något liknande, men det är inte kallas en för varje slinga, det kallas en i slingor. Så om jag sade till mig som detta för var nyckeln i objektet, det är typ av lik säga för varje något som något. Men allt jag gör här är iteration genom alla nycklarna till min objekt. Och insidan av lockigt hängslen där, skulle jag använda objekt hakparenteser för att hänvisa värdet på den nyckeln plats. 

Alternativt finns det även ett annat tillvägagångssätt. Om jag bara bara bryr sig om värden, kan jag säga för nyckel av objekt, och bara använda nyckeln inuti. Så för var nyckeln i objektet, har jag att använda objekt hakparenteser nyckeln inuti slingan. För var nyckel objekt, jag kan Använd bara nyckeln inuti slingan, eftersom jag bara specifikt talar om värden där. 

Så låt oss kanske ta en titta på skillnaden bara för att snabbt visa dig skillnaden mellan fyra i och för tillsammans med en mycket specifik array, som vi har här, vecka array. Så jag måste hitta en ny array som jag fyllde med sju strängar, Måndag tisdag onsdag, Torsdag, fredag, lördag, söndag. Och jag vill nu iterera genom denna matris, utskrift av viss information. Om jag använder en i slinga att skriva ut information, vad tror du att jag kommer att få? Nåväl, låt oss ta en titt. Och innan vi hoppa över till min webbläsarfönster, vet bara att console.log är typ av en sätt att göra en utskrift F i JavaScript. Men vad är konsolen? Tja, det är vad vi tänker att gå och ta en titt på just nu. 

OK, så vi är tillbaka hit i min webbläsarfönster, och jag kommer att öppna mina utvecklarverktyg. Återigen, jag bara slår F12 att öppna upp utvecklarverktyg. Och lägg märke till att här på top Jag har valt konsol. Så detta är begreppet av en utvecklarkonsolen, och det ger oss möjlighet att skriva ut information, ungefär som terminalen, men som du ser lite senare, Vi kan också skriva information att interagera med vår hemsida. Jag kommer att zooma in lite här, och jag ska klicka nu i test. Och fyra i test-- Jag tänker inte visa koden för det just nu, men du får det om du ladda källkoden som är associerad med denna video-- är bara det att i loop som vi såg bara en andra sedan på bilden. 

Så jag ska klick som knappen och hit, Här är vad som skrivs ut i konsol, 0, ett, två, tre, fyra, fem, sex. Jag ville inte skriva ut informationen inom dessa array platser, eftersom jag använde en i slinga. Och inuti kroppen av slingan, jag bara skrivas ut nyckeln inte objektnyckel. Men om jag nu rensa min konsol, och jag växla till för av test, och fyra test Jag säger att jag använder för av slinga i stället och skriva ut nyckeln, om jag klickar att nu jag får faktiska element inne i mitt objekt eller min array i detta fall. Min samling av veckodagar. Jag skrivas ut måndag, Tisdag onsdag. Så det är skillnaden mellan en i slinga, som skriver ut bara nycklarna om du använder bara nyckel insidan av kroppen av slingan, och en för av slinga, som utskrifter de värderingar om du använder bara nyckel inuti kroppen av slingan. 

Okej, hur ska vi nu börja sammanfoga strängar och kanske blanda ihop vissa variabler med interpolering som vi skulle kunna göra i PHP? Tja, vi är ganska bekant med detta från PHP. Detta är hur vi skulle göra det med hjälp av punktoperatorn för att sammanfoga strängar. I JavaScript, dock, vi faktiskt använda något kallas plus aktör och som är kanske lite mer intuitivt, eller hur? Vi lägger ett gäng av strängar tillsammans. Så låt oss gå tillbaka över och se vad detta skrivs ut om vi försöker att skriva ut all information i veckan array. Okej, så här under enligt strängsammanfogning, Jag har två alternativ, sträng byggnad V1 och sedan sträng byggnad V2. Och vi kommer att se varför vi behöver V2 i en sekund. Men jag ska klicka på sträng byggnad V1, som är koden vi var bara ta en titt på, den console.log med alla plussidan. Låt oss se om detta tryck reda på vad vi förväntar oss. 

Måndag är dagnummer 01 i veckan, Tisdag är dag nummer 11 i veckan. Tja, vad jag försökte att göra det var att få det att skriva ut måndag är dagnummer en, är tisdag dag nummer två. Men det verkar som om jag är alltid att skriva ut en. Tja, varför är det? Tja, det visar sig, ta en titt på denna lilla snutt kod här. Lägg märke till att vi använder plus operatör i två olika sammanhang. 

Och så här är där kanske saker att vi har sådan har sagt, åh, det är så stor. Vi sysslar inte med datatyper längre. Men här är där det faktum att vi förlorar datatyper kan faktiskt vara lite av ett problem för oss. Nu när plusoperatorn används för att sammanfoga strängar och lägga till nummer tillsammans har JavaScript att göra sitt bästa gissning vad jag vill att det ska göra för mig. Och i detta fall, gissade fel. Det bara konkatenerade dag, vilket skulle vara 0, ett, två, tre, fyra, fem, eller sex, och då är det bara sammanfogas det och sedan sammanfogas en. Det faktiskt inte lägga ihop dem. Och så dessa språk, PHP och JavaScript, som abstraherar bort detta begrepp typer, du behöver inte ta itu med det längre. De har fortfarande typer under huven. Och vi kan, i situationer så här, utnyttja detta faktum genom att säga något som kanske detta, som berättar JavaScript, genom sätt, behandla detta som ett heltal, inte behandla det som en sträng, även även om vi blandar ihop strängar och heltal här. 

Det är bara en av dessa saker att det verkar så stor i sammanhang att vi inte behöver hantera typer längre, men ibland du kommer hamna i en situation precis som det där det faktum att du inte har kontroll över olika typer kan slå tillbaka på dig Om du inte är försiktig. Och så om vi pop tillbaka över till IDE, jag kommer att rensa ut min konsol igen, och jag kommer att klicka sträng byggnad version två, som är där jag använder det parse int funktion. Nu är det skrivs ut information som jag förväntat mig. Måndag dag nummer ett, tisdag är dag nummer två, och så vidare. 

Så låt oss tala om funktioner igen. Jag lovade att vi skulle prata om anonym funktioner, och nu sammanhanget för att har äntligen kommit. Så innan vi gör det, låt oss prata igen om arrayer för bara en sekund. Så arrayer är en speciell fallet med ett objekt. Faktum är att allt i JavaScript är faktiskt ett objekt. Så funktioner är en specialfall av ett objekt, heltal är en speciell fallet med ett föremål, men arrayer specifikt har ett antal metoder. Kom ihåg att de är föremål, de kan ha egenskaper och metoder. De har ett antal metoder som kan appliceras på dessa objekt. Det finns en metod som kallas storlek, array.size, som kommer att återvända till dig som du kan förvänta dig antalet element i arrayen. Array.pop, ungefär som vår uppfattning om poppar upp av en stapel, om ni minns från vår stackar video, bort det sista elementet från arrayen. Array.push tillför ett nytt element i slutet av en array. Array.shift är typ av liknande DQ, skarvar den ut den allra första elementet i en array. 

Men det finns också en annan särskild metod för en array med namnet karta. Och detta är typ av en intressant koncept. Så vad är tanken på en karta? Du kommer faktiskt se detta i flera andra språk, och vi pratar inte om en sorts kartografer karta här, Vi pratar om en mappningsfunktion. I samband vi är talar om här, en karta är en speciell operation vi kan utföra på en matris att tillämpa en viss funktion till varje element i den arrayen. och så vi skulle säga i det här fallet, kanske array.map, och inne i det, vi passerar till karta är en funktion som vi vill som skall tillämpas på varje enskilt element. Så det är typ av analogt med att använda en slinga för att iterera över varje element och tillämpa en viss fungera för att varje element, just JavaScript har detta inbyggd begreppet en avbildning som kan tillämpas. Och detta är en stor sammanhang tala om en anonym funktion. 

Så låt oss säga att vi har denna array av heltal. Det kallas nums, och det har fått fem saker i det, ett, två, tre, fyra, fem. Nu vill jag att kartlägga några funktionen till denna matris. Jag vill ha en funktion tillämpas till varje element i gruppen. Nåväl, låt oss säga att det jag vill göra är att fördubbla alla element. Vad jag kan göra är bara använda en slinga för var jag är lika med 0, är ​​jag mindre än eller lika med 4, I plus, plus, och sedan fördubblas varje enda nummer. Men jag kan också göra något sånt här. Jag kan säga nums var tidigare ett två tre Fyra Fem, nu, men skulle jag vilja att ni applicera en avbildning på denna matris där jag skulle vilja att ni att fördubbla varje nummer. Och det är precis vad som händer här. Men lägg märke till vad jag passerar in som argument för att kartlägga. Detta är en anonym funktion. Och märker jag har inte gett denna funktion ett namn, Jag har bara gett det en parameterlista. Och så detta är ett exempel av en anonym funktion. 

Vi brukar aldrig skulle kalla detta funktion utanför ramen för kartan. Vi definierar det som en parameter att kartlägga och så vi egentligen inte måste ha ett namn för det om det enda som bryr sig om är karta och det är definierat rätt där insidan av kartan. Och så detta är en anonym funktion. Vi har inte kunnat att göra detta tidigare. Sätt någon funktion som accepterar en parameter, num, och vad den funktionen gör är returer num gånger 2. Och så efter detta kartläggning har tillämpats, Detta är nu vad nums utseende som, två, fyra, sex, åtta, 10. Och vi kommer att pop över till min webbläsarfönster och bara ta en titt på denna riktigt snabbt också. 

Så jag har en annan knapp här i min hemsida som kallas dubbel. Och när jag klickar dubbel, och det säger mig innan det var en, två, tre, fyra, fem efter två, fyra, sex, åtta, tio. Och om jag går tillbaka och klicka dubbel igen, två, fyra, sex, åtta, 10. Och sedan efter, fyra, åtta, tolv, sexton, och sedan 20. Och vad gör jag i denna funktion? Tja, om vi bara pop över till IDE, och Jag drar upp min anonym funktion, här på rad sju till 13, jag är göra lite fint arbete här, men jag bara skriva ut vad som för närvarande i matrisen. Sedan på linje 16, 17, och 18, det är min karta. Det är där jag tillämpar denna fördubbling funktion till varje enskild del. Och sedan lite längre ner, Jag bara gör samma sak Jag gjorde innan, förutom nu är jag utskrift av innehållet i uppsättningen efteråt. Men allt jag har gjort här är bara använda en anonym funktion karta över en hel rad. 

Så en mer stort ämne att prata om i JavaScript är idén om en händelse. En händelse är något som bara händer när en användare interagerar med din web sida, så kanske de klickar något, eller kanske sidan lästs in, eller kanske de har flyttat musen över något, eller de har skrivit något i ett inmatningsfält. Alla dessa saker är händelser som förekommer på vår hemsida. Och JavaScript har förmåga att stödja något kallas en händelsehanterare som är en callback-funktion som svarar på en html händelse. Och vad är en callback-funktion? Tja, det är i allmänhet bara en annan namn för en anonym funktion. Det är en funktion som svarar på en händelse. Och det är där vi kommer till idé att binda vissa funktioner till en speciell HTML-attribut. De flesta HTML-element har stöd för ett attribut att vi inte talar om i html video för något som på klick eller på hover eller last, alla dessa händelser som du sedan kan skriva funktioner att ta itu med dessa händelser när dessa händelser inträffar på din hemsida. 

Och så kanske din html ser ut ungefär så här. Och jag har två knappar här, knappen en och knapp två, och här har jag för närvarande definierade ingenting, men det är där attributet på klick är uppenbarligen en del av min HTML-tagg. Så uppenbarligen när jag definierar vad som är pågår inne i denna egenskap, det kommer att bli några JavaScript funktion som svarar på händelsen förmodligen att klicka på knapp en knapp eller två. 

Vad är ganska coolt om det här är vi kan skriva en generisk händelsehanterare. Och denna händelse Handler kommer skapa ett händelseobjekt. Och händelseobjektet berättar vilken av de två knapparna klickade. Nu hur fungerar det? Tja, kan det se ut så här. Så vi kommer först definiera våra knappar att ha ett svar på återuppringning funktion som kommer att kallas när knappen klickas, vi kallar händelsen alert namn. Och lägg märke till i båda fallen vi är passerar denna händelse parameter. Så vi kallar denna funktion eller när denna funktion utlöses av händelsen som händer, det kommer att skapa denna händelseobjekt och skicka det som ett parametern för att varna namn. Och det händelseobjektet är kommer att innehålla information om vilken knapp du klickade. Och hur går det göra det? Tja, kan det se ut så här. Så nu i min separat JavaScript-fil, kanske jag måste hitta detta funktionen alert namn, som igen medger att händelsen parametern. Och så här är där jag upptäcka vilken knapp utlöstes, var utlösaren lika händelse punktkällelementet. Vad var källan som skapade denna händelseobjekt som antogs i? Var den knäppas en eller var det knapp två? 

Och så här allt jag gör är utskrift trigger.innerhtml. Jo, i detta fall, i detta sammanhang trigger.innerhtml är precis vad som står skrivet på knappen. Det råkar vara så om vi hoppar tillbaka för en sekund, skulle det vara vad som finns i mellan dessa Taggar. Det kommer att bli knapp en knapp eller två. Och låt oss ta en titt på hur denna händelse handler skulle se om vi hade det körs i praktiken. 

Så först av allt, du har öppnat events.js, vilket är den JavaScript-fil där Jag har definierat denna funktion. Och som ni kan se, är det ganska mycket exakt vad vi bara såg på bilden för en sekund sedan. Och jag kommer att gå över till hemsida som vi har använt. Och jag har här knappen en och knapp två. Och jag ska klicka på knappen en. Du klickade på knappen en, om du kan se här i registreringen. OK. Klicka på knappen två, du klickat på en knapp två. 

Så båda knapparna har samma samtal funktion, eller hur? De båda var alert namn händelse, men denna händelse objekt som blir skapas när vi klickar på Det berättar vilken knapp du klickade. Vi behövde inte skriva två separata funktioner eller affär med att ha att passera någon ytterligare information. Vi är bara förlita sig på vad JavaScript kommer göra för oss, som är att skapa den sorts händelseobjekt för vår räkning. Det finns mycket mer att JavaScript än vad vi har täckt i denna video, men med dessa grundläggande borde få dig ganska lång väg till lärande allt du behöver veta om detta intressant språk. Jag är Doug Lloyd. Detta är CS50.