>> [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.