[MUSIC SPILLE] 

DOUG LLOYD: Så nå vi er gamle proffene på web-programmering, ikke sant? Og vi har dekket flere språkene i enkelte videoer. Og nå la oss gjøre en mer, Javascript. 

Først den gode nyheten, Javascript er en moderne programmerings språket mye som PHP som Syntaksen er avledet fra C, så det er et godt sted å begynne. Det er omtrent like gammel som PHP, også, etter å ha vært rundt 20 år. Den ble oppfunnet rundt Samtidig som PHP. Og Javascript er faktisk ganske grunnleggende for brukeropplevelsen av nettet. Faktisk er det tre språk at jeg vil si liksom gjøre opp brukeropplevelsen av å samhandle med nettsiden, html, CSS og Javascript. Og så nå la oss snakke Litt om Javascript. 

Den dårlige nyheten, men med Javascript er at det setter en masse regler for seg selv, og da det bryter dem. Og Javascript kan faktisk være slags utfordrende å lære, fordi det er i motsetning til C og PHP, som er meget strukturert og har veldig strenge regler for hvordan ting kan fungere. Javascript har kind av fått så fleksibel at kanskje ting ikke kommer til å fungerer slik vi forventer at de skal, og kanskje vi egentlig ikke kan lære vår første programmeringsspråk som en Javascript. Så kanskje fordi det ikke satt seg noen regler, og det gjør egentlig ikke håndheve gode koding vaner. Men nå har vi forhåpentligvis utviklet noen gode koding vaner, og slik at vi kan begynne å streiftog inn Java litt. 

Å skrive Javascript, i likhet med åpning opp en C-fil med en prikk C forlengelse eller en PHP-fil med en prikk PHP extension, alt vi trenger å gjøre er å åpne opp en fil med prikken js filtypen. Vi trenger ikke å ha noen spesiell skilletegn som vi gjorde i PHP. Den slags vinkel brakett spørsmålstegn PHP som vi er vant til fra det, slik vi forteller nettleseren vår at det vi har er Javascript er ved å inkludere det i en html kode, og vi får se litt om hvordan du gjør det på bare et øyeblikk. 

Den andre tingen som gjør Javascript annerledes, skjønt, er at det kjører klientsiden. Så husker med PHP som Vi kunne aldri virkelig se PHP som understreket et nettsted. Hvis vi noen gang sett på siden kilden, ville vi bare se html som var generert av at PHP. Men Script kjører klientsiden. Javascript kjører på datamaskinen. Og det er derfor du kan gjøre Ting som legger blokkere. Høyre? Ad blokkering gjøres vanligvis ved drepe alle av Javascript som kjører på et bestemt nettsted. Og fordi det ville ha å kjøres på maskinen din klientsiden, du kan bare stoppe Javascript for å kjøre helt. Det betyr også at når du bruker en nettside som inneholder Javascript, du må sende Javascript kilde kode som en del av HTTP-svar til klienten når de ber om det. Og så du kanskje ikke ønsker å bruke Javascript å gjøre virkelig sensitive ting som informasjon som passerer om brukernes passord rygg og frem, fordi de er faktisk kommer til å motta alle kildekoden, ikke bare html som genereres, slik som vil være tilfelle med si PHP. 

Så hvordan skal vi inkludere Javascript i vår html til å begynne med? Vel, i likhet med CSS, faktisk, er liksom hvordan vi gjør det her. Med CSS har vi stil koder. Og innsiden av disse stil koder, vi kan definere en CSS-stilark. Tilsvar med Javascript kan vi åpne opp skriptkodene, en annen html tag vi ikke snakke om i vår html video, og skrive Javascript mellom disse skriptkodene. Også skjønt, som CSS, vi kunne koble inn utenom CSS-filer og trekke dem inn i vårt program på den måten. Med CSS kan vi også, Unnskyld meg, med Javascript Vi kan også angi kilde egenskap av skriptmerket å knytte i Javascript separat, slik at du ikke må skrive det i mellom skriptkodene, vi kan koble den inn ved hjelp at skriptmerket også. Og akkurat som med tilfellet med CSS der Vi anbefaler at det var trolig i din beste interesse å skrive CSS i en egen fil i tilfelle du trenger å endre det, på samme måte gjør vi anbefaler at du skriver din Javascript i separate filer og bruke skriptkodene kilde attributt å knytte Javascript inn i html, nettsiden din. 

Så Javascript variabler, vil vi begynne å snakke om syntaksen her. Og vi vil gå gjennom denne typen hurtig, fordi vi har gjort dette i PHP, så Dette bør alle være ganske kjent. Så variabler i Javascript er svært lik PHP variabler. Det finnes ingen type Specifier, og når du introdusere en variabel, du prefiks det med VAR-nøkkelordet. I PHP ville vi gjøre noe som dette, dollartegn x. Det er hvordan vi indikert en variabel, men ingen, vi nevner ikke typen av den variable i det hele tatt. Vi vil si noe sånt dollartegn x er lik 44 i PHP. Hvis vi gjorde det samme i Javascript, vi ville si var x lik 44. Så Var er liksom vår måte for innføring av en variabel. Det er kanskje litt mer intuitiv enn bare dollartegn variabel. 

Igjen, siden det er ingen datatyper, kan vi gjøre dette med en hvilken som helst datatype, strenger, noe annet ville alle være var. Conditionals, alle våre gamle venner fra C og PHP er fortsatt tilgjengelig, så vi har om, annet hvis, annet, bryter og spørsmål mark kolon. Bryter rester så fleksibelt som det var i PHP, men alle disse er du kjent med nå. Og på samme måte med sløyfer er de gamle favoritter av mens, gjøre mens, og for fortsatt tilgjengelig for oss. Så allerede vet vi mye av den grunnleggende Javascript slags grunnleggende bare i kraft av å ha ganske mye av kunnskap nå om C og PHP. 

Hva med funksjoner i Javascript? Vel, i likhet med PHP hver funksjon er introdusert med funksjonen søkeordet. Du sier funksjon, og deretter begynner å definere din funksjon. Hva er litt annerledes om Javascript, om er muligheten til å ha det som kalles en anonym funksjon. Så du kan definere funksjoner som ikke har et navn. Dette er noe vi egentlig ikke har sett før. Vi vil virkelig bruke begrepet av en anonym funksjon litt senere i denne video, fordi det vil gjøre litt mer fornuftig i sammenheng når vi ser det i en bestemt situasjon som jeg har laget her. Men la oss bare ta en titt på hva en enkel Javascript Funksjonen kan se ut. 

Så jeg har gått foran og åpnet opp min CS50 IDE og jeg har allerede kjørt Apache å starte min server kjører. Og jeg har på dette bildet åpne kalt Home.html. Og jeg skal zoome inn litt her. Og i utgangspunktet, kan du se Home.html er bare en haug med knapper. Og jeg hevde på toppen her at dette er den Script seksjon materialer. Så det er en haug med knapper her, men hva gjør disse knappene egentlig gjøre? 

Vel, vi hodet over til min IED, og jeg har Home.html åpne her. Helt i begynnelsen, her er der jeg knytte i alle mine Javascript kildefilene. Høyre? Så jeg har anonymous.js, clock.js, Jeg bruker kildeattributtet av skriptmerket til å lenke i filen. Så jeg har ikke skrevet noen Javascript direkte inn i denne filen, men jeg har trukket i alle Java jeg har skrevet separat. Og hvis vi bla nedover her, dette bør alle ser litt kjent med en liten bit av ny syntaks. Vi har her overskriften koden for funksjoner og deretter en knapp. Jeg har en inngang som er en type knapp, og tilsynelatende når jeg klikker på den, Jeg kommer til å ringe noen fungere varsling dato. Og dette er hvordan vi kan liksom blande opp en liten bit av Javascript og HTML. De faktisk spiller ganske pent sammen, og så tilsynelatende når Jeg klikker på denne knappen, kommer jeg til å kalle noen funksjon varsling dato. Og på samme måte har jeg definert atferd for alle de andre knapper som er på denne home.html side, som vi vil holde tilbake i løpet av dette video. Men la oss gå tilbake opp her og ta en titt ved clock.js, som er Javascript-fil som jeg skrev at har denne første funksjonen vi kommer til å ta en titt på. Som du kan se, begynner jeg min Script fungere med nøkkelordet funksjon, og jeg har gitt denne en navn, det heter varsling dato. Innsiden av det, jeg tydeligvis skape en ny lokal variabel kalt gjeldende dato. Og jeg kommer til å tildele en lik til en ny dato. Og vi kunne få inn en masse detalj om hva en dato er, og virkelig Javascript er så stor at vi ikke kan muligens dekke alt i én video. Men nok det å si, dette kommer å komme tilbake til meg data som innkapsler gjeldende dato og klokkeslett. Jeg lagre det i en variabel som jeg er tilsynelatende kommer til å varsle gjeldende dato. 

Vel, hva gjør varsling gjeldende dato ser ut? La oss ta en titt på selve filen tilbake over i nettleservinduet. Så igjen, dette er den knappen som jeg har knyttet til, denne heter funksjonen. Og jeg klikker det der og se hva den gjorde, det varslet. Det dukket opp denne typen boksen forteller meg at det nåværende tidspunkt er, tilsynelatende det er November 4 ved 10:43:43 i morgen. Og hvis jeg klikker det igjen, nå det er noen få sekunder senere, ikke sant? Så det er all denne funksjonen gjør. Når jeg klikker på denne knappen, den dukker opp en varselmelding til meg. Så det er egentlig ikke for mye til funksjoner som er forskjellig fra PHP, bare en liten bit av ny syntaks som følger med å arbeide med Javascript. 

Arrays i Javascript er ganske grei. Å erklære en matrise, bruker du den hakeparentes syntaks at vi er kjent med fra PHP. Og i likhet med PHP, vi også kan blande datatyper. Så dette array, både av disse arrays ville være helt legitimt Javascript. En som er alle heltall, og en som er blandet opp forskjellige datatyper. 

Hva er noe helt annet i Javascript, skjønt? Det er forestillingen om et objekt. Så kanskje du har hørt om objektorientert programmering. Vi gjør ikke mye av det i CS50, men vi vil gjøre en liten bit av det her i sammenheng med Javascript. Nå Java har evnen til å oppfører seg som et objektorientert programmerings språk, men det er ikke i seg selv utelukkende et objektorientert programmeringsspråk. Og dette igjen kommer tilbake til hvorfor jeg sa det kan være svært utfordrende å lære Javascript som første programmerings språk, fordi den ikke virkelig passe en bestemt paradigme. 

C på den annen side er en funksjonelle programmeringsspråk. Hvis vi vil, funksjoner er liksom den store sjefen mann, ikke sant? De diktere hva skjer alt annet. Vi ønsker å endre variabler, vi kaller funksjoner. Vi gjør ting til funksjoner. Objekter i stedet, i en objektorientert språk, objekter liksom blitt stjernen og funksjoner blir liksom sekundært. Men hva er et objekt, hva er denne oppfatningen av et objekt? Vel, hvis det hjelper, tror om det først sorter som en C struktur eller en struct at vi har lært om før. I C, inneholder en struktur en rekke felter, og kanskje vi nå kan begynne å kaller disse felt egenskaper. Men egenskapene egentlig aldri stå på egne, ikke sant? Hvis jeg definerer en struktur for en bil som dette med de følgende to felt eller egenskaper, en an heltall for året på bilen og en annen 10 tegn string for modellen av bilen, Jeg kan si noe sånt som dette, Jeg kan erklære en ny variabel av type struct bilen Herbie. Og så kan jeg si noe som herbie.year lik 1963, og herbie.model lik Beetle. Det er greit. Jeg bruker feltene i forbindelse av strukturen, men jeg kunne aldri bare si noe sånt som dette. Høyre? Jeg kan ikke bruke navnet felt uavhengig av strukturen. Det er liksom en fundamental ting. 

Så felt blir grunnleggende for C strukturer er svært like egenskaper som grunnleggende for Javascript objekter. Men hva gjør dem spesielt interessant er at objekter kan også ha det kalles metoder, som er virkelig bare et fancy ord for funksjoner som er iboende til objektet i tillegg. Så det er en funksjon som bare kan være heter i sammenheng med en gjenstand. Bare et objekt som har definert denne funksjonen inne i sin, hvis du tenker på en struct, funksjonen defineres innenfor de definerer klammeparentes av strukturen. Så det betyr bare noe til strukturen. Og det er liksom det vi gjør her med objekter og metoder. Det er i utgangspunktet som vi er å definere en funksjon som bare fornuftig på en bestemt objekt, og så vi kalle det en fremgangsmåte av objektet. Og vi kan aldri kalle det funksjon uavhengig av objektet, akkurat som vi ikke kan si år eller modell uavhengig av struct i C. 

Så funksjonell programmering paradigmer se omtrent slik ut. Funksjon og deretter når du passerer i objektet som en parameter. I et objektorientert programmerings språk, denne typen får snudd, og vi ville tenke på det liker dette, object.function. Så det liksom at dot operatør igjen antyde at det er noen form for eiendom eller egenskap av selve objektet. Men dette er hva et objekt orientert programmeringsspråk kan gjøre for å gjøre en funksjon kalle på en metode, igjen, som er bare et spesielt ord for en funksjon som er iboende i et objekt. Dette er hva som syntaks kan se ut. Og så vil vi begynne å se noen av dette i sammenheng med Javascript. 

Du kan også tenke på et objekt liksom som en assosiativ array, som vi er kjent med fra PHP. Husk en assosiativ array tillater oss å ha sentrale verdi-par, i stedet av å ha indekser 0, en, to, tre, og så videre som vi er vant til fra C arrays. Assosiative arrays kan kartlegge ord, slik som i PHP video, vi snakket om påfyll av pizza. Og så hadde vi en matrise kalt pizza, og vi hadde ost var en nøkkel og $ 8,99 var verdi, og deretter pepperoni var en nøkkel, $ 9,99 var en verdi, og så videre. Og så kan vi også tenke på en objekt slags ligner en assosiativ array. Og så denne syntaksen her ville skape et nytt objekt heter Herbie med to- egenskaper innsiden av det. År, noe som er tildelt verdien 1963, og modell, som er tilordnet strengen Beetle. 

Og legg merke til her at jeg bruker apostrof i Javascript. Du kan bruke enkle eller doble anførselstegn når du snakker om strenger. Det er bare konvensjonelt slik at de fleste ganger når du skriver Javascript, du bare bruke enkle anførselstegn. Men jeg kunne bruke anførselstegn her, og som ville være helt greit også. 

Så husker hvordan i PHP vi hadde denne oppfatningen en for hver sløyfe som ville tillate oss å iterere over alle knappe verdi par av en assosiativ array, fordi vi ikke har denne evnen til å reagere gjennom 0, en, to, tre, fire, og så videre? Javascript har noe veldig likt, men det er ikke kalt en for hver sløyfe, det kalles en for i sløyfer. Så hvis jeg sa til meg som dette, for Var nøkkelen i objektet, det er liksom lik si for hvert noe som noe. Men alt jeg gjør her er itera gjennom alle nøklene til mitt formål. Og innsiden av krøllete seler der, ville jeg bruker objekt klammer nøkkelen til å referere til verdien på den tasten stedet. 

Alternativt, det er enda en annen tilnærming. Hvis jeg bare bare bryr seg om verdier, kan jeg si for nøkkelen objekt, og bare bruke tasten inne. Så for Var nøkkelen i objektet, har jeg å bruke objekt klammer tast innenfor sløyfen. For Var nøkkelen objekt, kan jeg bare bruke tasten inne i loop, fordi jeg er bare spesifikt snakker om verdiene der. 

Så la oss kanskje ta en se på forskjellen bare for å raskt vise deg forskjellen mellom fire i og for sammen med en meget spesifikk array, som vi har her, uke array. Så jeg må finne en ny matrise at jeg fylt med syv strenger, Mandag, tirsdag, onsdag, Torsdag, fredag, lørdag, søndag. Og jeg ønsker å nå iterere gjennom denne array, skrive ut visse opplysninger. Hvis jeg bruker en for i sløyfe å skrive ut informasjon, hva tror du jeg kommer til å få? Vel, la oss ta en titt. Og før vi hoppe over til min nettleservindu, bare vet at console.log er liksom én måte å gjøre en utskrifts F i Javascript. Men hva er den konsollen? Vel, det er det vi skal å gå ta en titt på akkurat nå. 

OK, så vi er tilbake her i min nettleservindu, og jeg kommer til å åpne opp min utviklerverktøy. Igjen, jeg bare trykke F12 å åpne opp utviklerverktøy. Og legg merke til at her på Toppen jeg har valgt konsollen. Så dette er oppfatningen av en utvikler konsoll, og det vil gi oss mulighet til å skrive ut informasjon ut, liksom som terminalen, men som du vil se litt senere, Vi kan også skrive informasjon i å samhandle med vår nettside. Jeg kommer til å zoome inn litt her, og jeg skal nå klikke på for i testen. Og fire i test-- Jeg skal ikke vise deg koden for det akkurat nå, men du får det hvis du laste ned kildekoden som er assosiert med denne video-- er bare at for i sløyfe som vi så bare en andre siden på lysbildet. 

Så jeg skal klikk som knappen, og over her, her er det som har skrevet ut i konsoll, 0, en, to, tre, fire, fem, seks. Jeg ble ikke skrevet ut ut informasjon inni disse array-steder, fordi jeg brukte en for i loop. Og inne i kroppen av sløyfen, I bare skrives ut nøkkelen ikke motsette nøkkelen. Men hvis jeg nå fjerne min konsoll, og jeg bytte til for test, og fire av test Sier jeg at jeg bruker for av sløyfe stedet og skrive ut nøkkel, hvis jeg klikker det, nå får jeg den faktiske elementer inne i mitt objekt eller min array i dette tilfellet. Mitt utvalg av ukedager. Jeg printet ut mandag, Tirsdag, onsdag. Så det er forskjellen mellom en for i løkke, som skriver ut bare nøklene hvis du bare bruker nøkkelen på innsiden av kroppen til sløyfen, og en for loop, som skriver ut verdiene hvis du bruker bare nøkkelen inne i kroppen av løkken. 

Greit, hvordan kan vi nå begynne å sette sammen strenger og kanskje blande noen variabler med interpole at vi var i stand til å gjøre i PHP? Vel, vi er ganske kjent med dette fra PHP. Dette er hvordan vi ville gjøre det ved hjelp av dot operatøren å sette sammen strenger. I Javascript, skjønt, vi faktisk bruke noe kalt pluss operatøren, som er kanskje enda litt mer intuitive, ikke sant? Vi legger en haug strenger sammen. Så la oss dra tilbake over og se hva dette vil skrive ut hvis vi prøver å skrive ut all informasjon i uken array. Greit, så under her etter streng sammensetning, Jeg har to alternativer, string bygning V1 og deretter streng bygning V2. Og vi vil se hvorfor vi trenger V2 i et sekund. Men jeg skal klikke på string bygning V1, som er koden vi var bare å ta en titt på, den console.log med alle de positive. La oss se om dette utskrifter ut hva vi kan forvente. 

Mandag er dag nummer 01 i uken, Tirsdag er dag nummer 11 i uken. Vel, det jeg prøvde å gjøre det var få det å skrive ut mandag er dag nummer en, er tirsdag dag nummer to. Men det virker som jeg er alltid å skrive ut en. Vel, hvorfor er det? Vel, det viser seg, ta en ny titt på denne lille kodebiten her. Legg merke til at vi bruker pluss Operatøren i to forskjellige sammenhenger. 

Og så her er der kanskje ting som vi har på en måte vært å si, Å, det er så stor. Vi trenger ikke forholde seg til datatyper lenger. Men her er der det faktum at vi mister datatyper faktisk kan være litt av et problem for oss. Nå som pluss-operatoren blir brukt til å sette sammen strenger og legge sammen tall sammen, har Javascript å gjøre sitt beste gjetning om hva jeg vil den skal gjøre for meg. Og i dette tilfellet, det gjettet feil. Det bare sammensatt dag, noe som ville bli 0, en, to, tre, fire, fem eller seks, og da er det bare sammenkjedet det og deretter sammenkjedet en. Det gjorde faktisk ikke legge dem sammen. Og så disse språkene, PHP og Javascript, som abstraherer vekk denne oppfatningen av typer, du trenger ikke å forholde seg til det lenger. De har fortsatt typer under panseret. Og vi kan, i situasjoner som dette, utnytte det faktum ved å si noe som kanskje dette som forteller Javascript, ved måte, behandle dette som et heltall, ikke behandle den som en streng, selv selv om vi blander sammen strenger og heltall her. 

Det er bare en av de tingene at det virker så bra i sammenheng at vi ikke trenger å håndtere typer lenger, men noen ganger vil du kjøre inn i en situasjon akkurat som dette, hvor det faktum at du har ikke kontroll over typer kan slå tilbake på deg hvis du ikke er forsiktig. Og så hvis vi komme tilbake over til IDE, jeg kommer til å tømme ut min konsoll igjen, og jeg kommer til å klikke string bygning versjon to, hvilke er der jeg bruker det parse int funksjon. Nå er det å skrive ut informasjon som jeg forventer. Mandagens dag nummer en, tirsdag dag er nummer to, og så videre. 

Så la oss snakke om funksjoner igjen. Jeg lovet at vi ville snakke om anonym funksjoner, og nå konteksten for at har endelig kommet. Så før vi gjør det, la oss snakke igjen om arrays for bare et sekund. Så arrays er en spesiell tilfelle av et objekt. Faktisk, alt i Javascript er faktisk et objekt. Så funksjoner er en spesielt tilfelle av et objekt, heltall er en spesiell tilfelle av en gjenstand, men arrays spesifikt har en rekke metoder. Husk fordi de er objekter, de kan ha egenskaper og metoder. De har en rekke metoder som kan anvendes på disse stedene. Det er en metode som kalles størrelse, array.size, som vil returnere til du som du kan forvente antall elementer i matrisen. array.pop, liksom som vår oppfatningen av dukker av av en stabel, hvis du husker fra vår stabler video, fjerner det siste elementet fra matrisen. Array.push tilfører et nytt element til enden av en matrise. array.shift er liksom som DQ, skjøter det ut det første element av en matrise. 

Men det er også en annen spesiell Fremgangsmåten i en matrise som kalles kartet. Og dette er liksom en interessant konsept. Så hva er ideen om et kart? Du vil faktisk se dette i flere andre språk, og vi snakker ikke om en slags cartographers kart her, vi snakker om en kartlegging funksjon. I sammenheng er vi snakker om her, et kart er en spesiell operasjon vi kan utføre på en matrise å bruke en bestemt funksjon til hvert element i den oppstillingen. og så vi vil si i dette tilfelle kanskje array.map, og innsiden av det, vi passerer inn i kartet er en funksjon som vi ønsker skal anvendes på hvert enkelt element. Så det er liksom analog til hjelp en løkke for å iterere over hvert element og bruke en bestemt fungere til hvert element, bare Javascript har dette innebygget oppfatningen av en kartlegging som kan brukes. Og dette er en stor sammenheng til snakke om en anonym funksjon. 

Så la oss si at vi har Denne rekken av heltall. Det kalles nums, og det har five ting i det, en, to, tre, fire, fem. Nå ønsker jeg å kartlegge noen Funksjonen på denne matrisen. Jeg ønsker å ha en funksjon gjelder til hvert element i matrisen. Vel, la oss si at det jeg ønsker å gjøre er å doble alle elementene. Hva jeg kunne gjøre er å bare bruke en løkke for Var jeg er lik 0, er jeg mindre enn eller lik 4, jeg pluss, pluss, og deretter doble hvert enkelt nummer. Men jeg kan også gjøre noe som dette. Jeg kan si nums var tidligere en to tre fire fem, nå, men jeg vil gjerne at du skal gjelde en kartlegging på denne matrisen hvor jeg vil ha deg å doble hvert nummer. Og det er akkurat hva som skjer her. Men legg merke til hva jeg har bestått inn som argument for å kartlegge. Dette er en anonym funksjon. Og merker jeg ikke har gitt denne funksjonen et navn, Jeg har bare gitt det en parameter liste. Og slik at dette er et eksempel av en anonym funksjon. 

Vi vanligvis ville aldri kalle dette funksjon utenfor rammen av kartet. Vi definerer det som et parameter å kartlegge, og slik at vi ikke egentlig må ha et navn på det hvis det eneste som bryr seg om er kartet og det er definert riktig der innsiden av kartet. Og så dette er en anonym funksjon. Vi har ikke vært i stand for å gjøre dette tidligere. Kart noen funksjon som aksepterer en parameter, num, og hva som funksjon gjør er avkastningen NUM ganger 2. Og så etter dette kartlegging har blitt anvendt, dette er nå hva nums utseende like, to, fire, seks, åtte, ti. Og vi vil komme over til min nettleservinduet og bare ta en titt på denne veldig raskt også. 

Så jeg har en annen knapp her i mitt hjem side som heter dobbel. Og når jeg klikker dobbel, og den forteller meg før det var ett, to, tre, fire, fem etter to, fire, seks, åtte, ti. Og hvis jeg går tilbake og klikk dobbel igjen, to, fire, seks, åtte, ti. Og så etter, fire, åtte, 12, 16, og deretter 20. Og hva gjør jeg i denne funksjonen? Vel, hvis vi bare pop over til IDE, og Jeg trekker opp min anonym funksjon, her på linje sju til 13, jeg er gjøre litt fancy jobb her, men jeg bare skriver ut hva er for tiden i rekken. Deretter på linje 16, 17, og 18, det er kartet mitt. Det er der jeg søker denne fordoblingen Funksjonen til hvert enkelt element. Og så litt lenger ned, Jeg bare gjør det samme Jeg gjorde før, bortsett fra nå er jeg skrive ut innholdet i matrisen etterpå. Men alt jeg har gjort her er bare bruke en anonym funksjon å kartlegge over en hel rekke. 

Så en mer stort tema å snakke om i Javascript er forestillingen om en hendelse. En hendelse er noe som bare skjer når en bruker samhandler med web side, så kanskje de klikker noe, eller kanskje siden er ferdig lastet, eller kanskje de har flyttet musen over noe, eller de har skrevet noe i et inntastingsfelt. Alle disse tingene er hendelser som skjer på vår nettside. Og Javascript har mulighet til å støtte noe kalt en hendelseshåndterer, som er en tilbakeringingsfunksjon som reagerer på en html hendelse. Og hva er en tilbakeringingsfunksjonen? Vel, det er som regel bare en annen nevne for en anonym funksjon. Det er en funksjon som reagerer på en hendelse. Og det er her vi kommer til Ideen om å binde visse funksjoner til en bestemt html attributt. De fleste HTML-elementer har støtte for et attributt at vi ikke snakker om i html video for noe sånt på klikk eller på hover eller på lasten, alle disse hendelsene at du da kan skrive funksjoner som omhandler disse hendelsene når disse hendelsene oppstå på nettsiden din. 

Og så kanskje din html ser omtrent slik ut. Og jeg har to knapper her, knappen én og knapp to, og her har jeg i dag definert ingenting, men dette er hvor attributtet på klikk er tydeligvis en del av min html tag. Så tilsynelatende når jeg definere hva som er går på innsiden av det attributt, det kommer til å være litt Javascript funksjon som svarer til arrangementet formodentlig for å klikke på knappen én eller knapp to. 

Hva er slags kult om dette er vi kan skrive en generisk hendelsesbehandling. Og denne hendelsen Handler vil opprette en hendelse objekt. Og arrangementet objektet vil fortelle oss hvilken av de to knappene ble klikket. Nå hvordan fungerer det? Vel, det kan se slik ut. Så vil vi først definere våre knapper for å ha en respons på tilbakeringing funksjon som vil bli kalt når knappen klikkes, vi kaller hendelsen varsling navn. Og legg merke til i begge tilfeller vi er passerer i denne hendelsen parameter. Så vi kaller denne funksjonen eller når denne funksjonen utløses av hendelse skjer, det kommer til å lage dette arrangementet objektet og gi det som en parameter for å varsle navn. Og at arrangementet objektet er kommer til å inneholde informasjon om hvilken knapp du klikket. Og hvordan gjør den det? Vel, det kan se slik ut. Så nå i min egen Javascript-fil, kan jeg må finne denne funksjon varsling navn, som igjen aksepterer at hendelsen parameter. Og så her er hvor jeg detektere hvilken knapp ble utløst, Var trigger lik hendelse dot source element. Hva var kilden som skapte denne hendelsen objekt som ble vedtatt i? Var det knapp én eller var det knapp to? 

Og så her alt jeg gjør er skrive ut trigger.innerhtml. Brønn, i dette tilfellet, i denne kontekst, trigger.innerhtml er akkurat det som står på knappen. Det bare så skjer hvis vi hopper tilbake for andre, ville det være hva som er i mellom disse knappe koder. Det vil være knapp én eller knapp to. Og la oss ta en titt på hvordan dette hendelseshåndterer ville se om vi hadde det kjører i praksis. 

Så først av alt, har du åpnet opp events.js, som er Javascript-fil der Jeg har definert denne funksjonen. Og som du kan se, er det ganske mye akkurat hva vi nettopp så på lysbildet en andre siden. Og jeg vil gå over til hjemmesiden vi har brukt. Og jeg har her knappen ett og knapp to. Og jeg skal klikke på knappen én. Du klikket på knappen en, hvis du kan se her i varselet. OK. Klikk på knappen to, du klikket på en knapp to. 

Så begge knappene har samme funksjon samtale, ikke sant? De begge var våken navn hendelse, men dette arrangementet objektet som blir skapt når vi klikker på det forteller oss hvilken knapp ble klikket. Vi trengte ikke å skrive to separate funksjoner eller avtale med har å passere tilleggsinformasjon. Vi bare stole på hva Javascript vil gjøre for oss, som er å skape det slags hendelse objekt på våre vegne. Det er mye mer å Java enn hva vi har dekket i denne videoen, men å ha disse fundamental bør få deg Ganske lang måter å lære alt du vil trenger å vite om dette interessant språk. Jeg er Doug Lloyd. Dette er CS50.