[Muziek] 

DOUG LLOYD: Dus nu we oud profs op web programmeren, toch? En we hebben meerdere overdekte talen in individuele video's. En laten we nu nog één, JavaScript. 

Eerst het goede nieuws, JavaScript is een moderne programmeertaal taal net als PHP wiens syntaxis is afgeleid van C, dus dat is een goede plek om te beginnen. Het is ongeveer net zo oud als PHP, maar ook, rond ongeveer 20 jaar te zijn geweest. Het was rond uitgevonden Tegelijkertijd PHP. En JavaScript is eigenlijk best fundamenteel voor de gebruikerservaring van het web. In feite zijn er drie talen die ik zou soort van zeggen uitmaken van de gebruikerservaring van interactie met de website, html, CSS en JavaScript. En nu laten we praten beetje over JavaScript. 

Het slechte nieuws is echter JavaScript is dat het zich veel regels voor zichzelf, en dan breekt ze. En JavaScript kan eigenlijk soort uitdagend om te leren, omdat het anders dan C en PHP, die zeer gestructureerd en hebben zeer strenge regels hoe dingen kunnen werken. JavaScript heeft soort van gekregen zo flexibel dat misschien dingen niet gaan werken de manier waarop we verwachten dat ze, en misschien kunnen we echt niet leren onze eerste programmeertaal als JavaScript. Dus misschien omdat het niet set zelf alle regels, en het doet niet echt dwingen goede codering gewoonten. Maar nu hebben we hopelijk ontwikkeld een aantal goede codering gewoonten, en zo kunnen we beginnen aan inval in JavaScript een beetje. 

JavaScript, vergelijkbaar met de opening te schrijven een C-bestand met een punt C extensie of een PHP-bestand met een punt PHP extensie, alles wat we moeten doen is het openen van een bestand met de stip js bestandsextensie. We hebben geen behoefte aan een speciale hebben delimiters zoals wij deden in PHP. Dat soort hoek beugel vraagteken PHP dat we gewend zijn van dat, de weg vertellen we onze browser dat wat we hebben is Javascript is door het opnemen van in een html-tag, en we zullen een klein beetje over zien hoe dat te doen in slechts een moment. 

Het andere ding dat maakt JavaScript verschillende, echter, is dat het draait client-side. Zo herinneren met PHP die konden we nooit echt zien PHP dat een website onderstreept. Als we ooit gezien de pagina bron, zouden we alleen zie de html dat was gegenereerd door dat PHP. Maar JavaScript loopt client side. JavaScript draait op uw computer. En dat is de reden waarom je kunt doen dingen willen blokkers toe te voegen. Rechts? Ad blokkeren wordt meestal gedaan door het doden van alle van de JavaScript- die wordt uitgevoerd op een bepaalde website. En omdat het zou moeten draaien op uw machine client-side, je kunt gewoon stoppen met de JavaScript voor het uitvoeren van volledig. Dat betekent ook dat wanneer u een website die JavaScript bevat, je moet de JavaScript-bron te sturen code als onderdeel van uw http reactie de klant bij verstrekken. En dus je misschien niet willen JavaScript gebruiken om echt gevoelige dingen te doen zoals het doorgeven van informatie over wachtwoorden van gebruikers terug en weer, omdat ze eigenlijk naar alle broncode ontvangt, niet alleen de HTML die gegenereerd, zoals het geval zou bijvoorbeeld PHP. 

Dus hoe kunnen we onder andere JavaScript in onze html beginnen? Nou, vergelijkbaar met CSS, eigenlijk, is een soort van hoe we het hier doen. Met CSS hebben we de stijl labels. En de binnenkant van de stijltags, kunnen we een CSS style sheet definiëren. Evenzo JavaScript we kunnen openstellen script-tags, andere html-tag hebben we niet praten over in onze html-video, en schrijf JavaScript tussen de script-tags. Ook al is, zoals CSS, we kon koppelen buiten CSS-bestanden en trek ze in ons programma op die manier. Met CSS kunnen we ook, neem me niet kwalijk, JavaScript We kunnen ook de bron opgeven attribuut van de script-tag koppelen in JavaScript afzonderlijk, zodat je niet hoeft op te schrijven in tussen de script-tags, we kan koppelen via dat script-tag ook. En net als bij het geval met CSS, waar We raden dat het waarschijnlijk in uw belang om te schrijven je CSS in een apart bestand in het geval je nodig hebt om het te veranderen, op dezelfde manier doen we raden dat u schrijf uw JavaScript in aparte bestanden en het gebruik van het script-tags bron toeschrijven aan uw JavaScript binden in uw html, uw webpagina. 

Dus JavaScript variabelen, zullen we beginnen te praten over de syntax hier. En we gaan door Dit soort snel omdat we dit hebben gedaan in PHP, dus Deze moeten allemaal redelijk bekend. Dus variabelen in JavaScript zijn vergelijkbaar met variabelen PHP. Er is geen soort specificatie, en wanneer je een variabele introduceren, je het prefix met de var trefwoord. In PHP zouden we iets doen als dit, dollarteken x. Dat is hoe we aangegeven een variabele, maar nee, we niet het type dat niet vergeten van de variabele helemaal. We zouden iets zeggen dollarteken x gelijk is aan 44 in PHP. Als we aan het doen waren de hetzelfde in JavaScript, we zouden zeggen var x gelijk is aan 44. Dus var is een soort van de weg invoering van een variabele. Dat is misschien een beetje meer intuïtief dan alleen dollarteken variabel. 

Nogmaals, omdat er geen soorten gegevens, kunnen we dit doen met elk type data, strijkers, iets anders zouden allemaal var. Conditionals, al onze oude vrienden uit C en PHP zijn nog steeds beschikbaar, dus we hebben als, anders als, anders, schakelaar en vraag mark colon. Schakelaar blijft zeer flexibel en was in PHP, maar al die je bent vertrouwd met nu. En ook met lussen de oude favorieten van de tijd, doen tijdens, en nog steeds voor ons beschikbaar. Dus al weten we veel van de basic JavaScript soort van fundamentals alleen op grond van het hebben van heel wat van kennis nu ongeveer C en PHP. 

Hoe zit het met de functies in JavaScript? Nou, vergelijkbaar met PHP elke functie is geïntroduceerd met de functie trefwoord. U zegt functie, en dan moet je beginnen om uw functie te definiëren. Wat is een beetje anders over JavaScript, is echter de mogelijkheid om wat een anonieme functie genoemd. Dus je kunt functies definiëren die niet over een naam. Dit is iets wat we echt nog niet eerder gezien. We zullen echt gebruik maken van het concept van een anonieme functie een beetje verderop in dit video, omdat het zal maken een beetje meer zin in context als we zien het in een bepaalde situatie die ik hier heb gemaakt. Maar laten we gewoon een kijkje nemen wat een eenvoudige JavaScript functie eruit zou kunnen zien. 

Dus ik heb vooruit gegaan en opende mijn CS50 IDE en ik heb al Apache draaien mijn server draait beginnen. En ik heb dit bestand openen genaamd home.html. En ik zal in een klein beetje te zoomen hier. En eigenlijk, kunt u de Home.html is gewoon een stel knoppen. En ik ben beweren aan de top hier dat dit het gedeelte JavaScript materialen. Dus er is een hoop knoppen hier, maar wat deze knoppen eigenlijk doen? 

Nou, zullen we het hoofd naar mijn IED, en ik heb home.html openen hier. In het allereerste begin, hier is waar ik het koppelen in al mijn JavaScript bronbestanden. Rechts? Dus ik heb anonymous.js, clock.js, Ik gebruik de bronkenmerk van de script-tag om te linken in het dossier. Dus ik heb niet geschreven eventuele JavaScript direct in dit bestand, maar ik heb in trok alle JavaScript Ik heb afzonderlijk geschreven. En als we schuiven hier, dit neer moet er allemaal enigszins vertrouwd met een beetje van de nieuwe syntaxis. We hebben hier header tag voor functies en vervolgens een knop. Ik heb een input dat is een soort knop, en blijkbaar als ik erop klik, Ik ga wat te bellen functioneren alert datum. En dit is hoe we een soort van kunt mixen een beetje van JavaScript en HTML. Ze eigenlijk spelen vrij mooi elkaar en dus blijkbaar als Ik op deze knop klikt, ga ik sommige date functie alert noemen. En op dezelfde wijze heb ik bepaald gedrag voor alle andere knoppen zijn op die home.html pagina die we zullen blijven komen om tijdens deze video. Maar laten we terug te gaan omhoog hier en neem een ​​kijkje op clock.js, die de JavaScript-bestand dat ik schreef dat heeft deze eerste functie we gaan om een ​​kijkje te nemen. Zoals je kunt zien, begin ik mijn JavaScript werken met het trefwoord functie, en ik heb dit een gegeven naam, het heet alert datum. Binnenkant van daar, ik blijkbaar maak een nieuwe lokale variabele genaamd huidige datum. En ik ga toewijzen gelijk aan een nieuwe date. En we konden krijgen in een veel detail over wat een datum is, en echt JavaScript is zo groot dat we kunnen onmogelijk bedekken alles in een video. Maar het volstaat te zeggen, dit gaat een data-item terug te keren naar mij dat kapselt de huidige datum en tijd. Ik ben het opslaan dat in een variabele dat ik blijkbaar van plan om de huidige datum te waarschuwen. 

Nou, wat doet alert huidige datum eruit? Laten we eens een kijkje nemen op het bestand zelf back boven in het browservenster. Dus nogmaals, dit is de knop die ik zijn gebonden aan deze functie genaamd. En ik daar klik erop en kijk wat het deed, is gewaarschuwd. Het dook dit soort doos vertellen me dat de huidige tijd is, blijkbaar Het is 4 november op 10:43:43 in de ochtend. En als ik klik op het weer, nu het is een paar seconden later, toch? Dus dat is al deze functie doet. Als ik op deze knop klikt, dan verschijnt een waarschuwing voor mij. Dus er is echt niet te veel functies Dat is anders dan PHP, maar een klein beetje van de nieuwe syntaxis die wordt geleverd met het werken met JavaScript. 

Arrays in JavaScript zijn vrij eenvoudig. Om een ​​array te verklaren, je gebruikt de vierkante haken syntaxis dat we kennen van PHP. En vergelijkbaar met PHP, we Ook kan data types mengen. Dus deze array beide Deze arrays zouden volkomen legitiem JavaScript. Een die alle getallen, en een die wordt gemengd verschillende gegevenstypen. 

Wat is iets heel anders in JavaScript, hoewel? Dat is het idee van een object. Dus misschien je hebt gehoord van object georiënteerd programmeren. We hebben niet veel te doen in de CS50, maar we zullen een beetje te doen hier in het kader van JavaScript. JavaScript heeft nu de mogelijkheid om gedragen als een object georiënteerd programmeren taal, maar het is niet zelf uitsluitend een object-georiënteerde programmeertaal. En dit komt weer terug naar de reden waarom ik al zei, het kan zeer uitdagend om te leren JavaScript als uw eerste programmering taal, omdat het niet echt bij een bepaald paradigma. 

C anderzijds een functionele programmeertaal. Als we willen, functies soort van de grote baas man, toch? Zij dicteren wat gebeurt alles anders. We willen variabelen te veranderen, wij noemen functies. Wij doen dingen functies. Objecten in plaats daarvan, in een object-georiënteerde taal, objecten soort uitgegroeid tot de ster en functies uitgegroeid tot een soort secundaire. Maar wat is een object, wat is deze notie van een object? Nou, als het helpt, denk over het op het eerste soort zoals een C structuur of een structuur dat we hebben geleerd over voordat. In C, een structuur bevat een aantal gebieden, en misschien hebben we nu kunnen beginnen noemen deze velden eigenschappen. Maar de eigenschappen nooit echt staan ​​op hun eigen, toch? Als ik definiëren een structuur voor een auto als dit met de volgende twee velden of eigenschappen, één van een integer voor het jaar van de auto en nog een 10 karakter string voor het model van de auto, Ik kan iets als dit te zeggen, Ik kan een nieuwe variabele declareren van het type struct auto herbie. En dan kan ik iets zeggen zoals herbie.year gelijk aan 1963, en herbie.model gelijk Beetle. Dat is goed. Ik ben met behulp van de velden in de context van de structuur, maar ik kon nooit alleen zoiets als dit te zeggen. Rechts? Ik kan de naam van het veld niet te gebruiken onafhankelijk van de structuur. Het is een soort van een fundamentele zaak. 

Dus velden zijn fundamenteel C structuren zijn zeer vergelijkbaar met die eigenschappen fundamenteel voor JavaScript-objecten. Maar wat maakt ze bijzonder interessant is dat objecten ook wat worden genoemd methoden, die zijn echt gewoon een duur woord voor functies die zijn inherent aan het object ook. Dus het is een functie die alleen kan worden genoemd in de context van een object. Slechts een object dat is gedefinieerd Deze functie binnen zijn, Als u denkt over een struct, de functie is binnen die definiëren gedefinieerd accolades van de structuur. Het betekent dus slechts iets de structuur. En dat is een soort van wat we doen hier met voorwerpen en werkwijzen. Het is eigenlijk alsof we definiëren van een functie alleen zinvol op een bepaald object, en dus hebben we noemen een werkwijze van het object. En we kunnen nooit noemen functie onafhankelijk van het object, net zoals we geen jaar of model kan zeggen onafhankelijk van de structuur in C. 

Zo functioneel programmeren paradigma kijken iets als dit. Functie en dan wanneer je voorbij in het object als een parameter. In een object georiënteerd programmeren talen, dit soort krijgt omgedraaid, en we zouden denken over dat dit leuk, object.function. Dus het soort dat dot exploitant weer impliceert dat het een soort van onroerend goed of eigenschap van het object zelf. Maar dit is wat een object georiënteerde programmeertaal zou kunnen doen om een ​​functie te maken een beroep doen op een manier, nogmaals, die is gewoon een speciaal woord voor een functie die inherent is aan een object. Dat is wat dat syntax eruit zou kunnen zien. En dus zullen we beginnen met een aantal van te zien dit in de context van JavaScript. 

U kunt ook denken aan een object soort als een associatieve array, die we kennen van PHP. Vergeet niet een associatieve array toestaat ons om de belangrijkste waarde paren, in plaats van het hebben indexen 0, één, twee, drie, en zo verder, zoals we gewend zijn van de C arrays. Associatieve arrays kunnen in kaart woorden, zoals in de PHP video, we hadden het over toppings van de pizza's. En dus moesten we een array genaamd pizza, en we had kaas was een sleutel en $ 8,99 was het waarde en pepperoni was een sleutel, $ 9,99 was een waarde, enzovoort. En zo kunnen we ook nadenken over een object soort vergelijkbaar met een associatieve matrix. En dus is deze syntax hier zou een nieuw object te maken riep herbie met twee eigenschappen binnenkant van het. Jaar, waarbij de waarde 1963 is toegekend, en model, dat de snaar toegewezen Kever. 

En merk hier dat ik ben met behulp van enkele aanhalingstekens in JavaScript. U kunt enkele of dubbele aanhalingstekens als je praat over de snaren. Het is gewoon conventioneel het geval dat de meeste tijden als je aan het schrijven bent JavaScript, je gewoon gebruik maken van enkele aanhalingstekens. Maar ik kon dubbele aanhalingstekens hier gebruiken, en die prima zou zijn als goed. 

Dus niet vergeten hoe in PHP hadden we deze notie van een voor elke lus die ons zou toestaan itereren over alle van de sleutelwaarde paren associatief matrix, omdat we heeft dit vermogen om te herhalen niet m 0, één, twee, drie, vier, enzovoort? JavaScript heeft iets zeer vergelijkbaar zijn, maar het is niet opgeroepen voor elke lus, het heet een in lussen. Dus als ik zei tegen me als dit, voor var sleutel in voorwerp, dat is een soort vergelijkbaar met te zeggen voor elk iets als iets. Maar alles wat ik hier doe is iteratie door alle sleutels van mijn object. En de binnenkant van de gekrulde braces daar, zou ik Gebruik object vierkante haken sleutel om te verwijzen om de waarde op die belangrijke locatie. 

Als alternatief is er zelfs een andere aanpak. Als ik maar alleen de zorg over de waarden, kan ik zeggen voor de belangrijkste object, en gewoon gebruik maken van de belangrijkste binnen. Dus voor var sleutel in voorwerp, heb ik om object vierkante haken gebruiken sleutel in de lus. Voor var sleutel van het object, kan ik gewoon gebruik maken van de belangrijkste in de lus, want ik ben gewoon specifiek praten over de waarden daar. 

Dus laten we misschien een kijk naar het verschil gewoon om je snel te laten zien het verschil tussen de vier in en van een zeer specifieke array, die we hier hebben, week array. Dus ik moet een nieuwe array te vinden dat ik gevuld met zeven snaren, Maandag dinsdag woensdag, Donderdag, vrijdag, zaterdag, zondag. En ik wil nu herhalen door deze matrix, afdrukken van bepaalde informatie. Als ik een in lus om uit te printen informatie, wat denk je dat ik ga krijgen? Nou, laten we eens een kijkje nemen. En voordat we springen over mijn browservenster, weet alleen dat console.log is een soort van een manier van het doen van een afdruk F in JavaScript. Maar wat is de console? Nou, dat is wat we gaan om te gaan een kijkje nemen op dit moment. 

OK, dus we zijn hier terug in mijn browser, en ik ga om te openen mijn developer tools. Nogmaals, ik ben gewoon te raken F12 openstellen developer tools. En merk op dat hier bij de top Ik heb gekozen voor de console. Dit is dus het begrip van een ontwikkelaar console, en zal het ons mogelijk maken afdrukken informatie uit, een beetje zoals de terminal, maar zoals u later zult zien een beetje, we kunnen ook informatie intypen om te communiceren met onze webpagina. Ik ga een beetje te zoomen hier en ik ga nu klik voor in de test. En vier in test-- Ik ga niet tonen u de code voor het nu, maar je zult krijgen als je downloaden van de broncode die wordt geassocieerd met dit video-- is alleen dat in lus die we zagen slechts een tweede geleden op de dia. 

Dus ik ga klik die knop, en hier, hier is wat er uit gedrukt in de console, 0, één, twee, drie, vier, vijf, zes. Ik heb geen afdruk van de gegevens binnen die reeks locaties, want ik gebruik gemaakt van een in lus. En in het lichaam van de lus, I gewoon uitgeprint belangrijke sleutel geen bezwaar. Maar als ik nu duidelijk mijn console, en ik overschakelen op voor de test, en vier van de test Ik zeg dat ik gebruiken voor de st plaats en afdrukken-toets, Als ik die klik, nu ben ik het krijgen van de feitelijke elementen binnenkant van mijn object of mijn array in dit geval. Mijn reeks van dagen van de week. Ik uitgeprint maandag, Dinsdag woensdag. Dus dat is het verschil tussen een in lus, die wordt afgedrukt alleen de toetsen als u gewoon gebruik maken van de belangrijkste binnenin het lichaam van de lus, en een voor in de st, die prints de waarden als je gewoon gebruiken sleutel binnen het lichaam van de lus. 

Oké, hoe kunnen we nu beginnen aan aaneenschakelen strijkers en misschien vermengen sommige variabelen interpolatie alsof we kunnen doen in PHP? Nou, we zijn redelijk bekend met deze van PHP. Dit is hoe we het zou doen met behulp van de dot operator om tekenreeksen samen te voegen. In JavaScript, hoewel, we eigenlijk iets te gebruiken de zogenaamde plus-operator, die is misschien zelfs een beetje meer intuïtieve, toch? We zijn het toevoegen van een bos snaren samen. Dus laten we het hoofd terug over en zien wat dit afgedrukt als we proberen om uit te printen alle informatie in week array. Oké, dus onder hier onder tekenreekssamenvoegingsoperator, Ik heb twee opties, touwtje gebouw V1 en V2 touwtje gebouw. En we zullen zien waarom we moet V2 in een tweede. Maar ik ga op koord gebouw V1, waarin is de code die we waren gewoon een kijkje op, de console.log met alle van de pluspunten. Laten we eens zien of dit prints wat we verwachten. 

Maandag is de dag nummer 01 van de week, Dinsdag is dag nummer 11 van de week. Nou, wat ik probeerde te doen was er krijgen het aan uit te printen maandag is dag nummer één, dinsdag is dag nummer twee. Maar het lijkt alsof ik ben altijd afdrukken van één. Nou, waarom is dat? Nou, zo blijkt, nog eens kijken op dit kleine stukje van de code hier. Merk op dat we met behulp van de plus operator in twee verschillende contexten. 

En dus hier is waar misschien dingen dat we soort van gezegd, oh, het is zo geweldig. We hebben niet langer behandelen gegevenstypen. Maar hier is waar het feit dat we verliezen data types kan eigenlijk een beetje te zijn van een probleem voor ons. Nu de plus operator wordt gebruikt om aaneenschakelen strijkers en nummers toe te voegen samen, JavaScript heeft haar best guess maken wat ik wil dat het voor mij doen. En in dit geval, raadt het al mis. Het is gewoon aaneengeschakelde dag, die zou zijn 0, één, twee, drie, vier, vijf of zes, en dan is het gewoon samengevoegd dat en dan samengevoegd één. Het deed er niet echt toe te voegen ze samen. En dus deze talen, PHP en JavaScript, dat abstracts weg Dit begrip types, je hoeft niet meer te behandelen. Ze hebben nog steeds types onder de motorkap. En we kunnen, in situaties als dit, hefboomeffect dat feit door iets te zeggen zoals misschien dit, dat vertelt JavaScript, door de Zo behandelt dit als een integer, het niet behandelen als een string, zelfs hoewel we samen mengen strings en gehele getallen in. 

Het is gewoon een van die dingen dat het lijkt zo groot in context dat we niet hoeven te behandelen types meer, maar soms moet je zult lopen in een situatie dit precies zoals waar het feit dat je geen controle over types hebben kan averechts werken op jou als je niet oppast. En dus als we pop terug over naar IDE, ik ben gaat weer uit te wissen mijn console, en ik ga om te klikken koord gebouw versie twee, die is waar ik gebruik die ontleden int functie. Nu is het afdrukken van informatie die ik verwachtte. Maandag dag nummer één, dinsdag is dag nummer twee, enzovoort. 

Dus laten we praten over de functies weer. Ik heb beloofd dat we zouden praten over anonieme functies, en nu de context van die is eindelijk gearriveerd. Dus voordat we dat doen, laten we praten weer over arrays voor slechts een seconde. Dus arrays zijn een speciale Bij een object. In feite, alles JavaScript is eigenlijk een object. Dus functies zijn een speciaal geval van een voorwerp, integers zijn een speciale Bij een voorwerp, maar arrays specifiek een aantal werkwijzen. Vergeet niet omdat ze voorwerpen, ze kunnen eigenschappen en methoden. Ze hebben een aantal methoden die kunnen worden toegepast op de objecten. Er is een methode genaamd grootte, array.size, die terug naar je zoals je zou verwachten het aantal elementen in de array. Array.pop, een soort als onze notie van knallen van een stapel, als je herinneren Aanbevolen stacks video, verwijdert het laatste element van de array. Array.push voegt een nieuw element aan het einde van een array. Array.shift is een soort van zoals DQ het splits uit het eerste element van een array. 

Maar er is ook een andere speciale Werkwijze volgens een matrix genoemd map. En dit is een soort van een interessant concept. Dus wat is het idee van een kaart? Je zult dit eigenlijk zien in verschillende andere talen, en we hebben het niet over een soort cartografen in kaart hier, we hebben het over een mapping-functie. In de context zijn we hier over een kaart is een speciale operatie we kan uitvoeren op een array een bepaalde functie toepassen elk element van de matrix. en zo zouden we zeggen in dit geval, misschien array.map, en de binnenkant van het, we passeren in kaart is een functie die we willen moet worden toegepast op elk element. Dus het is een soort van analoog aan het gebruik van een lus om itereren over elk element en toepassen van een bepaalde functie voor elk element, net JavaScript heeft deze ingebouwde begrip afbeelding die kan worden toegepast. En dit is een geweldige context praten over een anonieme functie. 

Dus laten we zeggen dat we hebben Deze reeks van gehele getallen. Het heet nums, en het heeft vijf dingen erin, één, twee, drie, vier, vijf. Nu wil ik een aantal in kaart functie op deze array. Ik wil een functie toe te passen elk element van de array. Nou, laten we zeggen dat wat ik wil doen is gewoon alle elementen verdubbelen. Wat ik kon doen is gewoon gebruik maken van een lus voor var I gelijk is aan 0, is dat ik minder dan of gelijk aan 4, I plus, plus, en dan verdubbelen elk nummer. Maar ik kan ook iets als dit te doen. Ik kan zeggen nums was vroeger een twee drie vier vijf, Voorlopig echter, zou ik graag willen dat u een afbeelding aanbrengen op deze array waar ik zou graag willen dat u elk nummer verdubbelen. En dat is precies wat er gebeurt hier. Maar let op wat ik passeren in als argument in kaart. Dit is een anonieme functie. En merk ik heb niet gezien deze functie een naam, Ik heb alleen gezien het een parameter lijst. En dus dit is een voorbeeld van een anonieme functie. 

We zouden over het algemeen nooit noemen functie buiten de context van de kaart. We definiëren als een parameter in kaart, en dus hebben we niet echt Om een ​​naam voor hebben als de enige dat geeft om is kaart en het recht gedefinieerd er binnenkant van de kaart. En dus dit is een anonieme functie. We zijn niet in staat geweest om dit eerder te doen. Kaart een functie die één parameter accepteert, num, en wat die functie doet is terug num tijden 2. En dus na deze mapping is toegepast, dit is nu wat nums looks zoals, twee, vier, zes, acht, 10. En we zullen dan pop tot mijn browservenster en net neem een ​​kijkje op deze heel snel ook. 

Dus ik heb een andere knop hier in mijn homepage genoemd dubbel. En als ik klik dubbel, en het vertelt me voordat het werd een, twee, drie, vier, vijf na twee, vier, zes, acht, 10. En als ik terug en klik dubbel weer, twee, vier, zes, acht, 10. En dan na, vier, acht, 12, 16, en 20. En wat doe ik in deze functie? Nou, als we pop iets meer dan naar IDE, en Ik trek mijn anonieme functie, hier op lijn zeven tot 13, ik ben het doen van een beetje mooie werk hier, maar ik ben gewoon printen wat momenteel in de array. Vervolgens op lijn 16, 17, en 18, daar is mijn kaart. Dit is waar ik het toepassen van deze verdubbeling functie voor elk element. En dan een beetje verder naar beneden, Ik ben gewoon hetzelfde te doen Ik eerder deed, behalve nu ben ik afdrukken van de inhoud van de array daarna. Maar alles wat ik heb hier gedaan is gewoon gebruik maken van een anonieme functie in kaart over een hele reeks. 

Dus nog een groot onderwerp om over te praten in JavaScript is de notie van een gebeurtenis. Een gebeurtenis is iets dat gewoon gebeurt wanneer een gebruiker interageert met uw web pagina, dus misschien ze op iets, of misschien de pagina klaar is met laden, of misschien hebben ze verhuisd hun muis over iets, of ze hebben iets getypt in een invoerveld. Al deze dingen zijn evenementen die zich voordoen op onze website. En JavaScript heeft de vermogen iets ondersteunen riep een event handler, die is een callback functie reageert op een HTML-evenement. En wat is een callback functie? Nou, het is over het algemeen gewoon een andere naam voor een anonieme functie. Het is een functie die reageert op een gebeurtenis. En dit is waar we komen tot de idee van binding bepaalde functies een bepaald attribuut html. De meeste HTML-elementen hebben ondersteuning voor een attribuut dat we niet over praten in de html- Video zoiets op klik of bij aanwijzen of de belasting, al deze gebeurtenissen die u vervolgens kunt schrijven functies die te maken hebben met de gebeurtenissen wanneer die gebeurtenissen plaats op uw webpagina. 

En dus misschien uw HTML ziet er iets als dit. En ik heb hier twee knoppen, knop en een knop twee, en hier heb ik momenteel gedefinieerd niets, maar dit is waar de attribuut klik is blijkbaar deel uit van mijn html-tag. Dus blijkbaar toen ik bepalen wat er aan de binnenkant van die eigenschap, het gaat om een ​​aantal JavaScript te zijn functie die reageert op de gebeurtenis vermoedelijk van te klikken knop een knop of twee. 

Wat is wel cool over deze is dat we kan een generieke event handler te schrijven. En dit evenement Handler zal maak een evenement object. En het evenement object zal ons vertellen welke van de twee knoppen is geklikt. Nu hoe werkt dat? Nou, het zou er ongeveer zo uitzien. Dus zullen we eerst onze knoppen te definiëren een reactie op de callback hebben functie wordt aangeroepen wanneer de knop wordt geklikt, we zullen event alert naam noemen. En het bericht in beide gevallen zijn we passeren in deze parameter event. Dus deze functie noemen we of wanneer deze functie wordt geactiveerd door de gebeurtenis gebeurde, het gaat om dit evenement object te maken en geef het als een parameter naam waarschuwen. En die gebeurtenis object gaan naar informatie te bevatten over welke knop is geklikt. En hoe werkt het dat doen? Nou, het zou er ongeveer zo uitzien. Dus nu in mijn afzonderlijke JavaScript-bestand, zou ik moet dit voorbeeld functie alert naam, die weer aanvaardt dat parameter evenement. En dan is hier waar ik detecteren welke knop werd veroorzaakt, var trekker gelijk evenement dot bronelement. Wat was de bron die gecreëerd dit evenement object dat werd aangenomen in? Was het een knop of was het de knop twee? 

En dan is hier alles wat ik doe is printen trigger.innerhtml. Welnu, in casu, in deze context, trigger.innerhtml is precies wat is geschreven op de knop. Het gebeurt gewoon, dus als we springen terug voor een tweede, dat zou zijn wat er in tussen die Tags. Het zal de knop een of knop twee. En laten we een kijkje nemen op hoe dit event handler zou kijken of we hadden het lopen in de praktijk. 

Dus in de eerste plaats, je hebt opengesteld events.js, dat is de JavaScript-bestand, waar Ik heb deze functie gedefinieerd. En zoals je kunt zien, het is vrij veel precies wat we zagen op de dia een seconde geleden. En Ik zal over te gaan naar de homepage we hebben gebruikt. En ik heb hier de knop één knop en twee. En ik zal u op de knop één klik. Je klikte op de knop een, als je kan hier in de waarschuwing te zien. OK. Klik op de knop twee, u geklikt op een knop twee. 

Zodat beide knoppen hebben de dezelfde functie bellen, toch? Beiden waren alert naam gebeurtenis, maar deze gebeurtenis object dat wordt gemaakt wanneer we op Het vertelt ons welke knop is geklikt. We hoefden niet te schrijven twee afzonderlijke functies of deal met het hebben om extra informatie door te geven. We zijn gewoon te vertrouwen op wat zal JavaScript voor ons, dat is het creëren van dat soort van event object namens ons. Er is veel meer dan JavaScript wat we hebben behandeld in deze video, maar met deze fundamenteel moet je een heel lange manieren om het leren van alles wat je moet weten over deze interessante taal. Ik ben Doug Lloyd. Dit is CS50.