[Speel van musiek] 

DOUG LLOYD: So nou is ons ou voor op die web programmering, reg? En ons het 'n paar gedek tale in individuele videos. En nou, laat ons doen een, JavaScript. 

Eers die goeie nuus, JavaScript is 'n moderne programmeertaal taal baie soos PHP wie sintaksis is afgelei van C, so dit is 'n goeie plek om te begin. Dit gaan oor so oud soos PHP, asook, rondom sowat 20 jaar nadat was. Dit was rondom uitgevind dieselfde tyd as PHP. En JavaScript is eintlik redelik fundamenteel tot die gebruikers ervaring van die web. In werklikheid, daar is drie tale wat ek sou soort van sê maak die gebruikers ervaring van interaksie met die webwerf, html, css, en JavaScript. En so nou kom ons praat 'n bietjie oor JavaScript. 

Die slegte nuus, al is, met JavaScript is dat dit stel 'n baie van die reëls vir homself, en dan is dit breek hulle. En JavaScript kan eintlik soort uitdaging om te leer, want dit is in teenstelling met C en PHP, wat baie gestruktureer en het baie streng reëls vir hoe dinge kan werk. JavaScript is soort van gekry so buigsaam dat miskien dinge gaan nie werk die manier waarop ons hulle verwag om, en miskien kan ons regtig nie leer ons eerste programmeertaal as 'n JavaScript. So miskien omdat dit nie stel homself enige reëls, en dit nie regtig dwing goeie kodering gewoontes. Maar nou het ons hopelik ontwikkel 'n paar goeie kodering gewoontes, en so kan ons begin om inval in JavaScript 'n bietjie. 

Om JavaScript, soortgelyk aan opening skryf 'n C-lêer met 'n dot C uitbreiding of 'n PHP lêer met 'n dot PHP uitbreiding, Al wat ons moet doen is om oop te maak 'n lêer met die dot js lêer uitbreiding. Ons het nie nodig om enige spesiale het delimiters soos ons gedoen het in PHP. Dat die soort van hoek bracket vraagteken PHP wat ons gebruik om uit dat die pad ons kan inlig oor ons leser dat wat ons het, is JavaScript is deur die insluiting van dit in 'n html etiket, en ons sal 'n bietjie oor te sien hoe om dit te doen in net 'n oomblik. 

Die ander ding wat maak JavaScript verskillende, al is, is dat dit loop kliënt kant. So onthou dat met PHP ons kon nooit regtig sien die PHP dat 'n webwerf onderstreep. As ons ooit gesien die bladsy bron sou ons net sien die html dit was gegenereer deur daardie PHP. Maar JavaScript loop kliënt kant. Jou JavaScript loop op jou rekenaar. En dit is die rede waarom jy kan doen dinge soos blokkers te voeg. Reg? Sluit van advertensies word gewoonlik gedoen deur doodmaak al die JavaScript wat is wat loop op 'n spesifieke webwerf. En omdat dit sou hê om loop op jou rekenaar kliënt kant, jy kan net stop die JavaScript vir hardloop heeltemal. Dit beteken ook dat wanneer jy gebruik 'n webwerf wat JavaScript sluit, jy het die JavaScript bron stuur kode as deel van jou http reaksie aan die kliënt wanneer hulle vra. En sodat jy kan nie wil JavaScript gebruik om werklik sensitiewe dinge te doen soos verbygaande inligting oor gebruikers se wagwoorde terug en uit, want hulle is eintlik gaan al die bronkode ontvang, nie net die html wat gegenereer word, soos wat die geval sou wees met sê PHP. 

So hoe kan ons sluit JavaScript in ons html om te begin met? Wel, soortgelyk aan CSS, eintlik, is 'n soort van hoe ons hier doen. Met CSS het ons styl tags. En binnekant van die styl tags, kan ons 'n CSS style sheet te definieer. Net so met JavaScript kan ons oop script tags, 'n ander html tag het ons nie praat oor in ons html video, en skryf JavaScript in tussen diegene script tags. Ook al is, soos CSS, ons kon skakel in buite CSS lêers en trek hulle in ons program dat die pad. Met CSS kan ons ook verskoon my, met JavaScript Ons kan ook die bron spesifiseer kenmerk van die script tag om te skakel in JavaScript afsonderlik, sodat jy dit nie doen nie het om dit te skryf in tussen script tags, ons kan dit 'n skakel in die gebruik van dat script tag so goed. En net soos met die geval met die CSS waar Ons het aanbeveel dat dit was waarskynlik in jou beste belang om te skryf jou CSS in 'n aparte lêer in die geval wat jy nodig het om dit te verander, insgelyks doen ons beveel dat jy jou JavaScript in afsonderlike lêers en gebruik die script tags bron toe te skryf aan jou JavaScript bind in jou html, jou webblad. 

So JavaScript veranderlikes, sal ons begin praat oor die sintaksis hier. En ons sal deurgaan hierdie soort vinnig, omdat ons dit gedoen het in PHP, so hierdie moet almal mooi vertroud. So veranderlikes in JavaScript is baie soortgelyk aan veranderlikes PHP. Daar is geen tipe specific, en wanneer jy 'n veranderlike stel, jy voorvoegsel by die var navraag. In PHP sou ons iets doen soos hierdie, dollar teken x. Dit is hoe ons aangedui 'n veranderlike, maar nee, ons nie die tipe nie noem van die veranderlike nie. Ons wil sê iets soos dollar teken x gelyk aan 44 in PHP. As ons doen die dieselfde ding in JavaScript, ons sou sê var x gelyk aan 44. So var is soort van ons pad van die instelling van 'n veranderlike. Dit is dalk 'n bietjie meer intuïtief as net dollar teken veranderlike. 

Weer, aangesien daar geen tipes data, kan ons dit doen met 'n tipe data, snare, enigiets anders sou almal var. Conditionals, almal van ons ou vriende van C en PHP is nog beskikbaar, so ons het indien anders as, anders, skakelaar en die vraag merk kolon. Switch oorblywende so buigsaam soos dit was in PHP, maar al hierdie jy vertroud is met nou. En insgelyks met loops is die ou gunstelinge van ruk, doen terwyl, en vir nog beskikbaar vir ons. So al wat ons weet 'n baie van die basiese JavaScript soort grondbeginsels net by wyse van 'nogal 'n bietjie van kennis nou sowat C en PHP. 

Wat van funksies in JavaScript? Wel, soortgelyk aan PHP elke funksie is bekendgestel met die funksie navraag. Jy sê funksie, en dan moet jy begin om jou funksie te definieer. Wat is 'n bietjie anders oor JavaScript al is die vermoë om wat 'n anonieme funksie genoem. Sodat jy kan definieer funksies wat nie 'n naam. Dit is iets wat ons regtig nie gesien nie. Ons sal regtig gebruik die konsep van 'n anonieme funksie 'n bietjie later in hierdie video, want dit sal 'n bietjie meer sin in konteks wanneer ons sien dit in 'n bepaalde situasie dat ek hier gemaak. Maar laat ons net 'n blik na wat 'n eenvoudige JavaScript funksie kan lyk. 

So ek het vooruit gegaan en oopgemaak my CS50 IDE en ek het reeds Apache loop om my bediener loop begin. En ek het hierdie lêer oop genoem home.html. En ek sal in 'n bietjie zoom hier. En basies, kan jy sien die Home.html is net 'n klomp van die knoppies. En ek beweer aan die bokant hier dat dit die artikel JavaScript materiale. So is daar 'n klomp van die knoppies hier maar wat doen hierdie knoppies eintlik doen? 

Wel, sal ons kop bo aan my IED, en ek het home.html oop hier. Aan die begin, hier is waar ek 'n skakel in al my JavaScript bron lêers. Reg? So ek het anonymous.js, clock.js, Ek gebruik die kenmerk bron van die script tag om te skakel in die lêer. So ek het nie geskryf nie JavaScript direk in hierdie lêer, maar ek het in al die getrek JavaScript Ek het afsonderlik geskryf. En as ons hier blaai, dit neer almal moet kyk ietwat vertroud met 'n bietjie van die nuwe sintaksis. Ons het hier kop tag vir funksies en dan 'n knoppie. Ek het 'n inset wat 'n tipe knoppie, en blykbaar wanneer ek op dit, Ek gaan 'n paar noem funksioneer waarskuwing datum. En dit is hoe ons soort kan meng 'n bietjie van JavaScript en HTML. Hulle het eintlik speel mooi mooi bymekaar, en so glo wanneer Ek op hierdie knoppie, ek gaan sommige datum funksie waarskuwing noem. En insgelyks het ek gedefinieer gedrag vir al die ander knoppies wat is op daardie home.html bladsy wat ons sal hou terugkeer om in die loop van hierdie video. Maar laat ons teruggaan up hier en 'n blik op clock.js, wat is die JavaScript lêer wat ek geskryf wat die eerste funksie ons gaan 'n blik op te neem. Soos jy kan sien, begin ek my JavaScript funksioneer met die sleutelwoord funksie, en ek het hierdie een 'n gegewe naam, is dit genoem waarskuwing datum. Binnekant van daar, ek glo skep 'n nuwe plaaslike veranderlike genoem huidige datum. En ek gaan wys 'n gelykstaande aan 'n nuwe datum. En ons kon kry in 'n baie detail as wat 'n datum is, en regtig JavaScript is so groot dat ons nie kan nie moontlik dek alles in een video. Maar om te sê, dit gaan om 'n data-item terug te keer na my omvat die huidige datum en tyd. Ek stoor dit in 'n veranderlike wat ek is blykbaar gaan huidige datum te waarsku. 

Wel, wat doen waarskuwing huidige datum lyk? Kom ons neem 'n blik op die lêer self terug oor in die venster. So weer, dit is die knoppie wat ek vasgebind het om hierdie funksie genoem. En ek is daar kliek dit en kyk wat dit gedoen het, is dit gewaarsku. Dit opgeduik hierdie soort van boks vertel my dat die huidige tyd is, blykbaar dit is op November 4 10:43:43 in die oggend. En as ek op dit weer, nou dit is 'n paar sekondes later, reg? So dit is al wat hierdie funksie doen. As ek op hierdie knoppie, dit verskyn 'n waarskuwing boodskap aan my. So daar is regtig nie te veel om funksies dit is verskillend van PHP, net 'n bietjie van die nuwe sintaksis wat kom met die werk met JavaScript. 

Skikkings in JavaScript is redelik eenvoudig. Om 'n verskeidenheid te verklaar, wat jy gebruik die vierkante hakies sintaksis dat ons vertroud is met van PHP. En soortgelyk aan PHP, ons kan ook tipes data te meng. So hierdie skikking, sowel van hierdie skikkings sou wees volkome wettige JavaScript. Een wat alle heelgetalle, en een wat is deurmekaar verskillende tipes data. 

Wat is iets heel anders in JavaScript, al is? Dit is die idee van 'n voorwerp. So miskien het jy al gehoor van objekgeoriënteerde programmering. Ons het nie 'n baie dit te doen in CS50, maar ons sal 'n bietjie van dit te doen hier in die konteks van JavaScript. JavaScript het nou die vermoë om optree as 'n objekgeoriënteerde programmering taal, maar dit is nie self uitsluitlik 'n objekgeoriënteerde programmeertaal. En dit kom weer terug na die rede waarom ek gesê het, dit kan baie uitdagend wees om te leer JavaScript as jou eerste programmering taal, omdat dit nie regtig inpas 'n bepaalde paradigma. 

C Aan die ander kant is 'n funksionele programmeertaal. As ons wil, funksies soort van die groot baas man, reg? Hulle dikteer wat gebeur alles anders. Ons wil veranderlikes verander, ons noem funksies. Ons doen dinge om funksies. Voorwerpe plaas, in 'n objekgeoriënteerde taal, voorwerpe soort van die ster geword en funksies geword soort van sekondêre. Maar wat is 'n voorwerp, wat is hierdie idee van 'n voorwerp? Wel, as dit help, dink oor dit op die eerste soort soos 'n C struktuur of 'n struct dat ons geleer het oor voor. In C, 'n struktuur bevat 'n aantal velde, en miskien kan ons nou kan begin om noem hierdie velde eienskappe. Maar die eienskappe nooit werklik staan ​​op hul eie, reg? As ek definieer 'n struktuur vir 'n motor soos hierdie met die volgende twee velde of eiendomme, een 'n heelgetal vir die jaar van die motor en 'n ander 'n 10 karakter string vir die model van die motor, Ek kan iets soos hierdie te sê, Ek kan 'n nuwe veranderlike verklaar van die tipe struct motor Herbie. En dan kan ek iets sê soos herbie.year gelyk 1963, en herbie.model gelyk Beetle. Dit is OK. Ek gebruik die velde in die konteks van die struktuur, maar ek kon nooit net iets soos hierdie te sê. Reg? Ek kan nie die naam veld gebruik nie onafhanklik van die struktuur. Dit is soort van 'n fundamentele ding. 

So velde om fundamenteel tot C strukture is baie soortgelyk aan eiendomme synde fundamenteel tot JavaScript voorwerpe. Maar wat maak hulle veral interessant is dat voorwerpe ook kan hê wat genoem metodes, wat werklik is net 'n fancy woord vir funksies wat is inherent aan die voorwerp as well. So dit is 'n funksie wat net kan wees genoem word in die konteks van 'n voorwerp. Slegs 'n voorwerp wat gedefinieer hierdie funksie binne sy, as jy dink oor 'n struct, die funksie is binne-in daardie bepalende gedefinieer krulhakies van die struktuur. So dit beteken net iets aan die struktuur. En dit is soort van wat ons doen hier met voorwerpe en metodes. Dit is basies soos ons is definisie van 'n funksie wat net sin maak op 'n spesifieke voorwerp, en so het ons noem dat 'n metode van die voorwerp. En ons kan nooit noem funksie onafhanklik van die voorwerp, net soos ons nie jaar of model kan sê onafhanklik van die struct in C. 

So funksionele programmering paradigmas lyk so. Funksie en dan wanneer jy slaag in die voorwerp as 'n parameter. In 'n objekgeoriënteerde programmering tale, hierdie soort van kry omgekeer, en ons sal dink oor dit soos hierdie, object.function. So is dit soort van dat dot operateur weer impliseer dat dit 'n soort van eiendom of eienskap van die voorwerp self. Maar dit is wat 'n voorwerp georiënteerde programmeertaal kan doen om 'n funksie te maak 'n beroep op 'n metode, weer, wat is net 'n spesiale woord vir 'n funksie wat inherent aan 'n voorwerp. Dit is wat dit sintaksis lyk. En so sal ons begin om sommige van sien dit in die konteks van JavaScript. 

Jy kan ook dink oor 'n voorwerp soort van soos 'n assosiatiewe skikking, wat ons vertroud is met van PHP. Onthou 'n assosiatiewe skikking kan ons sleutel waarde pare het, in plaas van 'indekse 0, een, twee, drie, en so aan asof ons gebruik om van C skikkings. Assosiatiewe skikkings kan karteer woorde, soos in die PHP video, ons praat oor toppings van pizzas. En so het ons 'n skikking genoem pizzas, en ons moes kaas was 'n sleutel en $ 8,99 was die waarde, en dan pepperoni was 'n belangrike, $ 9,99 'n waarde, en so aan. En so kan ons ook dink oor 'n beswaar soort soortgelyk aan 'n assosiatiewe skikking. En so gaan dit hier sintaks sou 'n nuwe voorwerp te skep genoem Herbie met twee eienskappe binnekant van dit. Jaar, wat die waarde 1963 is toegeken, en model, wat die string opgedra Beetle. 

En let hier dat ek die gebruik van enkelaanhalingstekens in JavaScript. Jy kan enkel of dubbel aanhalings gebruik wanneer jy praat oor snare. Dis net konvensioneel die geval dat die meeste tye wanneer jy skryf JavaScript, jy net gebruik aanhalingstekens. Maar ek kon dubbele aanhalingstekens hier te gebruik, en wat perfek fyn sou wees as well. 

So onthou hoe in PHP ons het hierdie idee van 'n lus vir elke wat ons sal toelaat om Itereer oor al die sleutel waarde pare van 'n assosiatiewe skikking, want ons het hierdie vermoë om Itereer nie deur 0, een, twee, drie, vier, en so aan? JavaScript iets baie soortgelyk, maar dit is nie bekend as 'n vir elke lus, dit is bekend as 'n in loops. So as ek sê vir my soos hierdie, vir var sleutel voorwerp, Dit is soort van soos gesê vir elke iets so iets. Maar al wat ek hier doen, is iterating deur al die sleutels van my voorwerp. En binnekant van die krullerige draadjies daar, sou ek gebruik voorwerp vierkantige hakies sleutel tot verwys om die waarde wat die sleutel plek. 

Alternatiewelik, is daar selfs 'n ander benadering. As ek maar net omgee vir die waardes, kan ek sê vir die sleutel voorwerp, en net gebruik sleutel binne-in. So vir var sleutel voorwerp, ek het om voorwerp vierkantige hakies gebruik sleutel binne-in die lus. Vir var sleutel van voorwerp, ek kan net gebruik sleutel binne-in die lus, want ek is net spesifiek praat oor die waardes is daar. 

So laat miskien neem 'n kyk na die verskil net om te wys jy vinnig die verskil tussen vier in en vir van met 'n baie spesifieke skikking, wat ons hier het, week skikking. So ek het 'n nuwe reeks vind dat ek gevul met sewe snare, Maandag, Dinsdag, Woensdag, Donderdag, Vrydag, Saterdag, Sondag. En ek wil nou Itereer deur middel van hierdie verskeidenheid, uit te druk sekere inligting. As ek 'n lus vir die in om uit te druk inligting, wat dink jy ek gaan kry? Wel, laat ons neem 'n blik. En voor ons spring oor my blaaier, weet net dat console.log is 'n soort van 'n manier van doen 'n afdruk F in JavaScript. Maar wat is die konsole? Wel, dit is wat ons gaan om te gaan 'n blik op die oomblik. 

OK, so ons is hier terug in my blaaier, en ek gaan om oop te maak my ontwikkelaar gereedskap. Weereens, ek is net slaan F12 om oop te maak ontwikkelaar gereedskap. En agterkom dat hier by die top Ek het gekies console. So, dit is die idee van 'n ontwikkelaar console, en dit sal ons toelaat om druk inligting uit soort van soos die terminaal nie, maar as jy later sal sien 'n bietjie, ons kan ook inligting tik in om met ons webblad. Ek gaan in 'n bietjie om te vergroot hier en ek gaan klik nou op in toets. En vier in test-- Ek is nie gonna wys jou die kode vir dit reg nou, maar jy sal dit kry as jy laai die bronkode wat geassosieer met hierdie video-- is net dat in lus wat ons gesien het net 'n tweede gelede op die skyfie. 

So ek gaan kliek wat knoppie, en hier, hier is wat uit gedruk in die console, 0, een, twee, drie, vier, vyf, ses. Ek het nie die druk van die inligting binne die verskeidenheid plekke, want ek het 'n in lus. En binne-in die liggaam van die lus, ek net gedruk sleutel sleutel nie beswaar. Maar as ek nou duidelik my troos, en ek oorskakel na vir toets, en vier van die toets Ek sê ek vir lus plaas en druk die sleutel, as ek dit op, nou is ek kry die werklike elemente binnekant van my voorwerp of my opgestel in hierdie geval. My verskeidenheid van week dae. Ek gedruk Maandag, Dinsdag, Woensdag. So wat is die verskil tussen 'n in lus, wat druk uit net die sleutels as jy net gebruik sleutel binnekant van die liggaam van die lus, en 'n lus vir die van wat afdrukke die waardes as jy net gebruik sleutel binne-in die liggaam van die lus. 

Alle reg, hoe kan ons nou begin om koppel snare en miskien meng sommige veranderlikes met interpolasie soos wat ons in staat was om te doen in PHP? Wel, ons is redelik vertroud met hierdie van PHP. Dit is hoe ons dit sou doen met die dot operateur snare koppel. In JavaScript, al is, ons eintlik iets te gebruik genoem die plus operateur, wat is dalk selfs 'n bietjie meer intuïtief, reg? Ons voeg 'n klomp snare saam. So laat kop terug oor en sien wat hierdie sal druk as ons probeer om uit te druk al die inligting in week skikking. Alle reg, sodat onder hier onder string aaneenskakellling, Ek het twee opsies, string gebou V1 en dan string gebou V2. En ons sal sien waarom ons moet V2 in 'n tweede. Maar ek gaan klik op string gebou V1, wat is die kode wat ons was net 'n blik op, die console.log met al die plus punte. Kom ons kyk of hierdie afdrukke uit wat ons verwag. 

Maandag is die dag nommer 01 van die week, Dinsdag is die dag nommer 11 van die week. Wel, wat ek probeer om te doen was daar te kry dit uit te druk Maandag is die dag nommer een, Dinsdag dag is nommer twee. Maar dit lyk asof ek altyd uit te druk een. Wel, hoekom is dit? Wel, dit blyk uit, neem 'n ander kyk op hierdie klein brokkie van die kode hier. Let daarop dat ons met behulp van die plus operateur in twee verskillende kontekste. 

En so hier is waar dinge dalk wat ons het soort van is gesê: Ag, dit is so groot. Ons het nie meer hanteer tipes data. Maar hier is waar die feit dat ons verloor datatipes kan eintlik 'n bietjie wees van 'n probleem vir ons. Nou dat die plus operateur gebruik word om koppel snare en getalle te voeg saam, JavaScript het om sy beste raaiskoot maak as wat ek wil om dit te doen vir my. En in hierdie geval, is dit geraai verkeerd. Dit is net aaneen dag, wat sou wees 0, een, twee, drie, vier, vyf, ses of, en dan is dit net saamgevoeg dit en dan saamgevoeg een. Dit het nie eintlik voeg hulle saam. En so hierdie tale, PHP en JavaScript, dat abstraheer weg hierdie idee van tipes, jy hoef nie meer te hanteer. Hulle het nog tipes onder die enjinkap. En ons kan, in situasies soos hierdie, hefboom feit deur iets te sê soos miskien is hierdie, wat vertel JavaScript, deur die manier te behandel dit as 'n heelgetal is, dit nie hanteer as 'n string, selfs al ons saam te meng snare en heelgetalle hier. 

Dit is net een van daardie dinge dat dit lyk so groot in konteks dat ons nie hoef te hanteer tipes nie, maar soms jy sal loop in 'n situasie hierdie presies soos waar die feit dat jy nie beheer oor tipes het kan boemerang op jou as jy nie versigtig is nie. En so as ons pop terug na IDE, ek is gaan weer uit te duidelik my troos, en ek gaan klik string gebou weergawe twee, wat is waar ek die gebruik dat parse int funksie. Nou is dit uit te druk inligting wat ek verwag het nie. Maandag se dag nommer een, Dinsdag dag is nommer twee, en so aan. 

So laat ons praat oor funksies weer. Ek belowe ons sal praat oor anonieme funksies, en nou is die konteks vir daardie het uiteindelik aangebreek. So voordat ons dit doen, laat ons praat weer oor skikkings vir net 'n sekonde. So skikkings is 'n spesiale geval van 'n voorwerp. Trouens, alles in JavaScript is eintlik 'n voorwerp. So funksies is 'n spesiale geval van 'n voorwerp, heelgetalle is 'n spesiale geval van 'n voorwerp, maar skikkings spesifiek 'n aantal van die metodes. Onthou, want hulle is voorwerpe, hulle kan eienskappe en metodes. Hulle het 'n aantal van die metodes wat aangewend kan word om die voorwerpe. Daar is 'n metode genoem grootte, array.size, wat sal terugkeer na jou as wat jy kan verwag die aantal elemente in jou skikking. array.pop, soort van soos ons idee van knal af van 'n stapel, as jy onthou van ons stapels video, verwyder die laaste element van die skikking. array.push voeg 'n nuwe element tot aan die einde van 'n skikking. array.shift is soort van soos DQ, dit display toon uit die heel eerste element van 'n skikking. 

Maar daar is ook 'n ander spesiale metode van 'n skikking met die naam kaart. En dit is soort van 'n interessante konsep. So, wat is die idee van 'n kaart? Jy sal hierdie eintlik sien in verskeie ander tale, en ons praat nie oor 'n soort van kartograwe karteer hier ons praat oor 'n kartering funksie. In die konteks ons praat hier, 'n kaart is 'n spesiale operasie ons kan uitvoer op 'n verskeidenheid om 'n spesifieke funksie van toepassing elke element van daardie skikking. en so sal ons sê in hierdie geval, miskien array.map, en binnekant van dit, ons verby in kaart is 'n funksie wat ons wil toegepas moet word om elke enkele element. So dit is soort van analoog aan die gebruik van 'n lus om Itereer oor elke element en toe te pas 'n bepaalde funksioneer om elke element, net JavaScript het hierdie gebou in idee van 'n kartering wat toegepas kan word. En dit is 'n groot konteks praat oor 'n anonieme funksie. 

So kom ons sê ons het hierdie verskeidenheid van heelgetalle. Dit is bekend as nume en dit het vyf dinge in dit, een, twee, drie, vier, vyf. Nou wil ek 'n paar te karteer funksie om hierdie skikking. Ek wil 'n funksie van toepassing is elke element van die skikking. Wel, laat ons sê dat wat ek wil doen is net al die elemente te verdubbel. Wat ek kan doen is net gebruik om 'n lus vir var ek gelyk 0, ek is minder as of gelyk aan 4, ek plus, plus, en dan verdubbel elke enkele nommer. Maar ek kan ook iets soos dit te doen. Ek kan sê nume was voorheen een twee drie vier vyf, nou, al is, wil ek hê jy moet 'n afbeelding van toepassing op hierdie verskeidenheid waar ek wil jou elke getal te verdubbel. En dit is presies wat gebeur hier. Maar let op wat ek verby in die argument te karteer. Dit is 'n anonieme funksie. En sien ek het nie gegee hierdie funksie 'n naam, Ek het net dit gegee 'n parameter lys. En so is dit 'n voorbeeld van 'n anonieme funksie. 

Ons wil die algemeen nooit hierdie skakel funksie buite die konteks van kaart. Ons definieer dit as 'n parameter na die kaart, en so het ons nie regtig nodig om 'n naam vir dit as die enigste ding wat omgee is kaart en dit is reg gedefinieer daar binnekant van kaart. En so is dit 'n anonieme funksie. Ons het nie in staat was hierdie voorheen doen nie. Kaart 'n funksie wat een parameter aanvaar, num, en wat daardie funksie nie is opbrengste NUM keer 2. En so na hierdie kartering toegepas is, dit is nou wat nume lyk soos, twee, vier, ses, agt, 10. En ons sal oor my pop venster en net neem 'n blik op hierdie regtig vinnig as well. 

So ek het 'n ander knoppie hier in my tuisblad genoem dubbel. En wanneer ek op dubbel, en dit vertel my voor dit was een, twee, drie, vier, vyf na twee, vier, ses, agt, 10. En as ek gaan terug en klik dubbel weer, twee, vier, ses, agt, 10. En dan na vier, agt, 12, 16, 20 en dan. En wat doen ek in hierdie funksie? Wel, as ons pop net meer om IDE, en Ek trek my anonieme funksie hier op die lyn sewe deur 13, ek is doen 'n bietjie fancy werk hier, maar ek is net uit te druk Wat is tans in die skikking. Dan op die lyn 16, 17, en 18, is daar my kaart. Dit is waar ek die toepassing van hierdie verdubbeling funksie om elke enkele element. En dan 'n bietjie verder af, Ek is net doen dieselfde ding Ek het voor doen nie, behalwe nou is ek druk die inhoud van die skikking daarna. Maar al wat ek hier gedoen is net gebruik 'n anonieme funksie na die kaart in 'n hele reeks. 

So een groot onderwerp om oor te praat in JavaScript is die idee van 'n gebeurtenis. 'N gebeurtenis is iets wat net gebeur wanneer 'n gebruiker op jou web bladsy, so miskien het hulle op iets, of dalk die bladsy laai, of miskien het hulle verskuif hul muis oor iets, of hulle het iets getik in 'n invoer veld. Al hierdie dinge is gebeure wat plaasvind op ons webblad. En JavaScript het die vermoë om iets te ondersteun genoem 'n event handler, wat is 'n terugbel funksie wat reageer op 'n html gebeurtenis. En wat is 'n terugbelfunksie? Wel, dit is oor die algemeen net 'n ander naam vir 'n anonieme funksie. Dit is 'n funksie wat reageer op 'n gebeurtenis. En dit is waar ons kom na die idee van bindende sekere funksies om 'n bepaalde eienskap html. Die meeste html elemente ondersteuning vir 'n kenmerk dat ons nie praat oor die html video vir iets soos op kliek of op hover of op las, al hierdie gebeure wat jy dan kan skryf funksies wat handel oor die gebeure wanneer daardie gebeure voorkom op jou webblad. 

En so miskien is jou html lyk iets soos hierdie. En ek het hier twee knoppies, knoppie een en twee knoppie, en hier Ek het tans gedefinieer niks maar dit is waar die kenmerk op kliek is blykbaar deel van my html tag. So glo toe ek definieer wat is gaan op die binnekant van daardie kenmerk, dit gaan om 'n paar JavaScript wees funksie wat reageer op die gebeurtenis vermoedelik van te kliek knoppie een of twee knoppie. 

Wat is gaaf oor hierdie is ons kan 'n generiese event handler skryf. En hierdie gebeurtenis sal Handler skep 'n geleentheid voorwerp. En die gebeurtenis voorwerp sal ons vertel watter van die twee knoppies is gedruk. Nou hoe werk dit? Wel, dit kan iets soos hierdie. So sal ons eers ons knoppies definieer om 'n reaksie op die terugbel het funksie wat genoem sal word wanneer die knoppie geklik word, ons sal gebeurtenis waarskuwing noem. En in kennis beide gevalle is ons verby in hierdie parameter gebeurtenis. So hierdie funksie noem of wanneer hierdie funksie is veroorsaak deur die gebeurtenis gebeur, dit gaan om hierdie geleentheid te skep voorwerp en slaag dit as 'n parameter naam te waarsku. En so 'n geval voorwerp gaan inligting bevat waaroor knoppie is gekliek. En hoe dit te doen? Wel, dit kan iets soos hierdie. So nou in my aparte JavaScript lêer, kan ek het om hierdie te vind funksie waarskuwing naam, wat weer aanvaar dat parameter gebeurtenis. En dan is hier waar ek die opsporing watter knoppie is geaktiveer, var sneller gelyk gebeurtenis dot bron element. Wat was die bron wat geskep hierdie gebeurtenis voorwerp wat geslaag is in? Was dit knoppie een of was dit knoppie twee? 

En dan hier al wat ek doen, is uit te druk trigger.innerhtml. Wel, in hierdie geval, in hierdie konteks, trigger.innerhtml is net wat geskryf is op die knoppie. Dit gebeur net so as ons spring terug vir 'n tweede, wat sou wees wat in tussen die knoppie tags. Dit sal knoppie een of twee knoppie te wees. En laat ons 'n blik op hoe hierdie gebeurtenis hanteerder sou kyk, as ons het dit loop in die praktyk. 

So die eerste van alles, jy het oopgemaak events.js, wat is die JavaScript-lêer waar Ek het hierdie funksie gedefinieer. En soos jy kan sien, is dit pretty much presies wat sien ons net op die skyfie 'n tweede gelede. En Ek sal oor gaan na die tuisblad ons het al met behulp van. En ek het hier knoppie een en twee knoppie. En Ek sal op die knoppie net een kliek. Jy het op 'n knoppie, as jy kan hier in die waarskuwing te sien. OK. Klik op die knoppie twee, het jy kliek op 'n knoppie twee. 

Sodat beide knoppies die dieselfde funksie oproep, reg? Hulle was albei waarskuwing naam geval, maar hierdie gebeurtenis voorwerp wat kry geskep wanneer ons kliek dit vertel ons watter knoppie is gekliek. Ons het nie om te skryf twee afsonderlike funksies of deal met wat om enige bykomende inligting te slaag. Ons is net vertrou op wat JavaScript vir ons doen, wat is om te skep wat soort gebeurtenis voorwerp namens ons. Daar is 'n baie meer om JavaScript as wat ons het wat in hierdie video, maar met hierdie fundamentele moet jy nogal 'n lang maniere om leer alles wat jy nodig om te weet oor hierdie interessante taal. Ek is Doug Lloyd. Dit is CS50.