1 00:00:00,000 --> 00:00:03,840 >> [Muziek] 2 00:00:03,840 --> 00:00:05,770 3 00:00:05,770 --> 00:00:08,690 >> DOUG LLOYD: Dus nu we oud profs op web programmeren, toch? 4 00:00:08,690 --> 00:00:12,140 En we hebben meerdere overdekte talen in individuele video's. 5 00:00:12,140 --> 00:00:14,690 En laten we nu nog één, JavaScript. 6 00:00:14,690 --> 00:00:17,370 >> Eerst het goede nieuws, JavaScript is een moderne programmeertaal 7 00:00:17,370 --> 00:00:21,410 taal net als PHP wiens syntaxis is afgeleid van C, 8 00:00:21,410 --> 00:00:22,830 dus dat is een goede plek om te beginnen. 9 00:00:22,830 --> 00:00:25,880 Het is ongeveer net zo oud als PHP, maar ook, rond ongeveer 20 jaar te zijn geweest. 10 00:00:25,880 --> 00:00:28,600 Het was rond uitgevonden Tegelijkertijd PHP. 11 00:00:28,600 --> 00:00:32,240 En JavaScript is eigenlijk best fundamenteel voor de gebruikerservaring 12 00:00:32,240 --> 00:00:32,740 van het web. 13 00:00:32,740 --> 00:00:34,448 In feite zijn er drie talen die ik 14 00:00:34,448 --> 00:00:38,480 zou soort van zeggen uitmaken van de gebruikerservaring van interactie 15 00:00:38,480 --> 00:00:42,650 met de website, html, CSS en JavaScript. 16 00:00:42,650 --> 00:00:46,030 En nu laten we praten beetje over JavaScript. 17 00:00:46,030 --> 00:00:50,301 >> Het slechte nieuws is echter JavaScript is dat het zich veel regels voor zichzelf, 18 00:00:50,301 --> 00:00:51,300 en dan breekt ze. 19 00:00:51,300 --> 00:00:54,010 En JavaScript kan eigenlijk soort uitdagend om te leren, 20 00:00:54,010 --> 00:00:57,000 omdat het anders dan C en PHP, die zeer gestructureerd 21 00:00:57,000 --> 00:01:00,270 en hebben zeer strenge regels hoe dingen kunnen werken. 22 00:01:00,270 --> 00:01:03,690 JavaScript heeft soort van gekregen zo flexibel 23 00:01:03,690 --> 00:01:06,650 dat misschien dingen niet gaan werken de manier waarop we verwachten dat ze, 24 00:01:06,650 --> 00:01:09,830 en misschien kunnen we echt niet leren onze eerste programmeertaal 25 00:01:09,830 --> 00:01:10,769 als JavaScript. 26 00:01:10,769 --> 00:01:12,810 Dus misschien omdat het niet set zelf alle regels, 27 00:01:12,810 --> 00:01:15,754 en het doet niet echt dwingen goede codering gewoonten. 28 00:01:15,754 --> 00:01:18,170 Maar nu hebben we hopelijk ontwikkeld een aantal goede codering gewoonten, 29 00:01:18,170 --> 00:01:21,470 en zo kunnen we beginnen aan inval in JavaScript een beetje. 30 00:01:21,470 --> 00:01:25,750 >> JavaScript, vergelijkbaar met de opening te schrijven een C-bestand met een punt C extensie 31 00:01:25,750 --> 00:01:29,770 of een PHP-bestand met een punt PHP extensie, alles wat we moeten doen is het openen van een bestand 32 00:01:29,770 --> 00:01:31,764 met de stip js bestandsextensie. 33 00:01:31,764 --> 00:01:34,430 We hebben geen behoefte aan een speciale hebben delimiters zoals wij deden in PHP. 34 00:01:34,430 --> 00:01:36,750 Dat soort hoek beugel vraagteken PHP 35 00:01:36,750 --> 00:01:40,300 dat we gewend zijn van dat, de weg vertellen we onze browser dat wat we hebben is 36 00:01:40,300 --> 00:01:43,502 Javascript is door het opnemen van in een html-tag, 37 00:01:43,502 --> 00:01:46,210 en we zullen een klein beetje over zien hoe dat te doen in slechts een moment. 38 00:01:46,210 --> 00:01:48,210 >> Het andere ding dat maakt JavaScript verschillende, 39 00:01:48,210 --> 00:01:50,580 echter, is dat het draait client-side. 40 00:01:50,580 --> 00:01:53,430 Zo herinneren met PHP die konden we nooit echt zien 41 00:01:53,430 --> 00:01:57,041 PHP dat een website onderstreept. 42 00:01:57,041 --> 00:01:59,040 Als we ooit gezien de pagina bron, zouden we alleen 43 00:01:59,040 --> 00:02:02,830 zie de html dat was gegenereerd door dat PHP. 44 00:02:02,830 --> 00:02:04,900 Maar JavaScript loopt client side. 45 00:02:04,900 --> 00:02:06,710 JavaScript draait op uw computer. 46 00:02:06,710 --> 00:02:09,050 En dat is de reden waarom je kunt doen dingen willen blokkers toe te voegen. 47 00:02:09,050 --> 00:02:09,550 Rechts? 48 00:02:09,550 --> 00:02:12,704 Ad blokkeren wordt meestal gedaan door het doden van alle van de JavaScript- 49 00:02:12,704 --> 00:02:14,370 die wordt uitgevoerd op een bepaalde website. 50 00:02:14,370 --> 00:02:19,000 En omdat het zou moeten draaien op uw machine client-side, 51 00:02:19,000 --> 00:02:21,910 je kunt gewoon stoppen met de JavaScript voor het uitvoeren van volledig. 52 00:02:21,910 --> 00:02:27,030 Dat betekent ook dat wanneer u een website die JavaScript bevat, 53 00:02:27,030 --> 00:02:32,450 je moet de JavaScript-bron te sturen code als onderdeel van uw http reactie 54 00:02:32,450 --> 00:02:34,159 de klant bij verstrekken. 55 00:02:34,159 --> 00:02:35,950 En dus je misschien niet willen JavaScript gebruiken 56 00:02:35,950 --> 00:02:38,395 om echt gevoelige dingen te doen zoals het doorgeven van informatie 57 00:02:38,395 --> 00:02:41,020 over wachtwoorden van gebruikers terug en weer, omdat ze eigenlijk 58 00:02:41,020 --> 00:02:45,610 naar alle broncode ontvangt, niet alleen de HTML die gegenereerd, 59 00:02:45,610 --> 00:02:49,030 zoals het geval zou bijvoorbeeld PHP. 60 00:02:49,030 --> 00:02:51,620 >> Dus hoe kunnen we onder andere JavaScript in onze html beginnen? 61 00:02:51,620 --> 00:02:54,520 Nou, vergelijkbaar met CSS, eigenlijk, is een soort van hoe we het hier doen. 62 00:02:54,520 --> 00:02:56,190 Met CSS hebben we de stijl labels. 63 00:02:56,190 --> 00:03:00,760 En de binnenkant van de stijltags, kunnen we een CSS style sheet definiëren. 64 00:03:00,760 --> 00:03:03,450 Evenzo JavaScript we kunnen openstellen script-tags, 65 00:03:03,450 --> 00:03:06,660 andere html-tag hebben we niet praten over in onze html-video, 66 00:03:06,660 --> 00:03:09,720 en schrijf JavaScript tussen de script-tags. 67 00:03:09,720 --> 00:03:13,960 Ook al is, zoals CSS, we kon koppelen buiten CSS-bestanden 68 00:03:13,960 --> 00:03:15,900 en trek ze in ons programma op die manier. 69 00:03:15,900 --> 00:03:18,280 Met CSS kunnen we ook, neem me niet kwalijk, JavaScript 70 00:03:18,280 --> 00:03:23,240 We kunnen ook de bron opgeven attribuut van de script-tag 71 00:03:23,240 --> 00:03:25,720 koppelen in JavaScript afzonderlijk, zodat je niet 72 00:03:25,720 --> 00:03:27,680 hoeft op te schrijven in tussen de script-tags, we 73 00:03:27,680 --> 00:03:29,600 kan koppelen via dat script-tag ook. 74 00:03:29,600 --> 00:03:33,230 En net als bij het geval met CSS, waar We raden dat het waarschijnlijk 75 00:03:33,230 --> 00:03:36,090 in uw belang om te schrijven je CSS in een apart bestand in het geval 76 00:03:36,090 --> 00:03:38,500 je nodig hebt om het te veranderen, op dezelfde manier doen we raden 77 00:03:38,500 --> 00:03:40,720 dat u schrijf uw JavaScript in aparte bestanden 78 00:03:40,720 --> 00:03:45,460 en het gebruik van het script-tags bron toeschrijven aan uw JavaScript binden 79 00:03:45,460 --> 00:03:49,520 in uw html, uw webpagina. 80 00:03:49,520 --> 00:03:52,610 >> Dus JavaScript variabelen, zullen we beginnen te praten over de syntax hier. 81 00:03:52,610 --> 00:03:53,600 En we gaan door Dit soort snel 82 00:03:53,600 --> 00:03:56,640 omdat we dit hebben gedaan in PHP, dus Deze moeten allemaal redelijk bekend. 83 00:03:56,640 --> 00:03:59,490 Dus variabelen in JavaScript zijn vergelijkbaar met variabelen PHP. 84 00:03:59,490 --> 00:04:03,270 Er is geen soort specificatie, en wanneer je een variabele introduceren, 85 00:04:03,270 --> 00:04:05,070 je het prefix met de var trefwoord. 86 00:04:05,070 --> 00:04:07,750 In PHP zouden we iets doen als dit, dollarteken x. 87 00:04:07,750 --> 00:04:09,950 Dat is hoe we aangegeven een variabele, maar nee, we 88 00:04:09,950 --> 00:04:12,060 niet het type dat niet vergeten van de variabele helemaal. 89 00:04:12,060 --> 00:04:15,124 We zouden iets zeggen dollarteken x gelijk is aan 44 in PHP. 90 00:04:15,124 --> 00:04:17,040 Als we aan het doen waren de hetzelfde in JavaScript, 91 00:04:17,040 --> 00:04:19,589 we zouden zeggen var x gelijk is aan 44. 92 00:04:19,589 --> 00:04:22,780 Dus var is een soort van de weg invoering van een variabele. 93 00:04:22,780 --> 00:04:26,850 Dat is misschien een beetje meer intuïtief dan alleen dollarteken variabel. 94 00:04:26,850 --> 00:04:29,080 >> Nogmaals, omdat er geen soorten gegevens, kunnen we dit doen 95 00:04:29,080 --> 00:04:34,490 met elk type data, strijkers, iets anders zouden allemaal var. 96 00:04:34,490 --> 00:04:37,260 Conditionals, al onze oude vrienden uit C en PHP 97 00:04:37,260 --> 00:04:41,640 zijn nog steeds beschikbaar, dus we hebben als, anders als, anders, schakelaar en vraag 98 00:04:41,640 --> 00:04:42,240 mark colon. 99 00:04:42,240 --> 00:04:45,890 Schakelaar blijft zeer flexibel en was in PHP, maar al die je bent 100 00:04:45,890 --> 00:04:46,930 vertrouwd met nu. 101 00:04:46,930 --> 00:04:49,900 En ook met lussen de oude favorieten van de tijd, 102 00:04:49,900 --> 00:04:52,700 doen tijdens, en nog steeds voor ons beschikbaar. 103 00:04:52,700 --> 00:04:55,880 Dus al weten we veel van de basic JavaScript soort van fundamentals 104 00:04:55,880 --> 00:05:01,800 alleen op grond van het hebben van heel wat van kennis nu ongeveer C en PHP. 105 00:05:01,800 --> 00:05:03,670 >> Hoe zit het met de functies in JavaScript? 106 00:05:03,670 --> 00:05:08,199 Nou, vergelijkbaar met PHP elke functie is geïntroduceerd met de functie trefwoord. 107 00:05:08,199 --> 00:05:10,740 U zegt functie, en dan moet je beginnen om uw functie te definiëren. 108 00:05:10,740 --> 00:05:12,531 Wat is een beetje anders over JavaScript, 109 00:05:12,531 --> 00:05:15,700 is echter de mogelijkheid om wat een anonieme functie genoemd. 110 00:05:15,700 --> 00:05:18,880 Dus je kunt functies definiëren die niet over een naam. 111 00:05:18,880 --> 00:05:21,222 Dit is iets wat we echt nog niet eerder gezien. 112 00:05:21,222 --> 00:05:23,430 We zullen echt gebruik maken van het concept van een anonieme functie 113 00:05:23,430 --> 00:05:27,880 een beetje verderop in dit video, omdat het zal 114 00:05:27,880 --> 00:05:31,530 maken een beetje meer zin in context als we zien het in een bepaalde situatie 115 00:05:31,530 --> 00:05:33,120 die ik hier heb gemaakt. 116 00:05:33,120 --> 00:05:35,710 Maar laten we gewoon een kijkje nemen wat een eenvoudige JavaScript 117 00:05:35,710 --> 00:05:37,850 functie eruit zou kunnen zien. 118 00:05:37,850 --> 00:05:40,610 >> Dus ik heb vooruit gegaan en opende mijn CS50 IDE 119 00:05:40,610 --> 00:05:43,690 en ik heb al Apache draaien mijn server draait beginnen. 120 00:05:43,690 --> 00:05:46,800 En ik heb dit bestand openen genaamd home.html. 121 00:05:46,800 --> 00:05:48,330 En ik zal in een klein beetje te zoomen hier. 122 00:05:48,330 --> 00:05:52,090 En eigenlijk, kunt u de Home.html is gewoon een stel knoppen. 123 00:05:52,090 --> 00:05:55,291 En ik ben beweren aan de top hier dat dit het gedeelte JavaScript 124 00:05:55,291 --> 00:05:55,790 materialen. 125 00:05:55,790 --> 00:05:59,490 Dus er is een hoop knoppen hier, maar wat deze knoppen eigenlijk doen? 126 00:05:59,490 --> 00:06:03,662 >> Nou, zullen we het hoofd naar mijn IED, en ik heb home.html openen hier. 127 00:06:03,662 --> 00:06:05,620 In het allereerste begin, hier is waar ik het koppelen 128 00:06:05,620 --> 00:06:07,500 in al mijn JavaScript bronbestanden. 129 00:06:07,500 --> 00:06:08,000 Rechts? 130 00:06:08,000 --> 00:06:12,440 Dus ik heb anonymous.js, clock.js, Ik gebruik de bronkenmerk 131 00:06:12,440 --> 00:06:14,440 van de script-tag om te linken in het dossier. 132 00:06:14,440 --> 00:06:18,660 Dus ik heb niet geschreven eventuele JavaScript direct in dit bestand, 133 00:06:18,660 --> 00:06:21,790 maar ik heb in trok alle JavaScript Ik heb afzonderlijk geschreven. 134 00:06:21,790 --> 00:06:24,540 En als we schuiven hier, dit neer moet er allemaal enigszins vertrouwd 135 00:06:24,540 --> 00:06:27,090 met een beetje van de nieuwe syntaxis. 136 00:06:27,090 --> 00:06:32,655 We hebben hier header tag voor functies en vervolgens een knop. 137 00:06:32,655 --> 00:06:35,530 Ik heb een input dat is een soort knop, en blijkbaar als ik erop klik, 138 00:06:35,530 --> 00:06:38,130 Ik ga wat te bellen functioneren alert datum. 139 00:06:38,130 --> 00:06:41,792 En dit is hoe we een soort van kunt mixen een beetje van JavaScript en HTML. 140 00:06:41,792 --> 00:06:44,500 Ze eigenlijk spelen vrij mooi elkaar en dus blijkbaar als 141 00:06:44,500 --> 00:06:48,730 Ik op deze knop klikt, ga ik sommige date functie alert noemen. 142 00:06:48,730 --> 00:06:53,660 En op dezelfde wijze heb ik bepaald gedrag voor alle andere knoppen 143 00:06:53,660 --> 00:06:56,440 zijn op die home.html pagina die we zullen blijven komen 144 00:06:56,440 --> 00:06:59,172 om tijdens deze video. 145 00:06:59,172 --> 00:07:00,880 Maar laten we terug te gaan omhoog hier en neem een ​​kijkje 146 00:07:00,880 --> 00:07:03,850 op clock.js, die de JavaScript-bestand dat ik 147 00:07:03,850 --> 00:07:07,370 schreef dat heeft deze eerste functie we gaan om een ​​kijkje te nemen. 148 00:07:07,370 --> 00:07:11,630 Zoals je kunt zien, begin ik mijn JavaScript werken met het trefwoord functie, 149 00:07:11,630 --> 00:07:14,560 en ik heb dit een gegeven naam, het heet alert datum. 150 00:07:14,560 --> 00:07:18,710 Binnenkant van daar, ik blijkbaar maak een nieuwe lokale variabele genaamd huidige datum. 151 00:07:18,710 --> 00:07:21,500 En ik ga toewijzen gelijk aan een nieuwe date. 152 00:07:21,500 --> 00:07:24,430 En we konden krijgen in een veel detail over wat een datum is, 153 00:07:24,430 --> 00:07:27,060 en echt JavaScript is zo groot dat we kunnen onmogelijk 154 00:07:27,060 --> 00:07:28,330 bedekken alles in een video. 155 00:07:28,330 --> 00:07:32,220 Maar het volstaat te zeggen, dit gaat een data-item terug te keren naar mij dat 156 00:07:32,220 --> 00:07:35,470 kapselt de huidige datum en tijd. 157 00:07:35,470 --> 00:07:39,100 Ik ben het opslaan dat in een variabele dat ik blijkbaar van plan om de huidige datum te waarschuwen. 158 00:07:39,100 --> 00:07:41,300 >> Nou, wat doet alert huidige datum eruit? 159 00:07:41,300 --> 00:07:46,460 Laten we eens een kijkje nemen op het bestand zelf back boven in het browservenster. 160 00:07:46,460 --> 00:07:49,551 Dus nogmaals, dit is de knop die ik zijn gebonden aan deze functie genaamd. 161 00:07:49,551 --> 00:07:51,800 En ik daar klik erop en kijk wat het deed, is gewaarschuwd. 162 00:07:51,800 --> 00:07:56,140 Het dook dit soort doos vertellen me dat de huidige tijd is, blijkbaar 163 00:07:56,140 --> 00:07:59,370 Het is 4 november op 10:43:43 in de ochtend. 164 00:07:59,370 --> 00:08:02,345 En als ik klik op het weer, nu het is een paar seconden later, toch? 165 00:08:02,345 --> 00:08:03,720 Dus dat is al deze functie doet. 166 00:08:03,720 --> 00:08:07,670 Als ik op deze knop klikt, dan verschijnt een waarschuwing voor mij. 167 00:08:07,670 --> 00:08:13,806 168 00:08:13,806 --> 00:08:15,690 Dus er is echt niet te veel functies 169 00:08:15,690 --> 00:08:19,110 Dat is anders dan PHP, maar een klein beetje van de nieuwe syntaxis 170 00:08:19,110 --> 00:08:22,500 die wordt geleverd met het werken met JavaScript. 171 00:08:22,500 --> 00:08:24,650 >> Arrays in JavaScript zijn vrij eenvoudig. 172 00:08:24,650 --> 00:08:27,200 Om een ​​array te verklaren, je gebruikt de vierkante haken syntaxis 173 00:08:27,200 --> 00:08:30,090 dat we kennen van PHP. 174 00:08:30,090 --> 00:08:33,432 En vergelijkbaar met PHP, we Ook kan data types mengen. 175 00:08:33,432 --> 00:08:35,140 Dus deze array beide Deze arrays zouden 176 00:08:35,140 --> 00:08:36,960 volkomen legitiem JavaScript. 177 00:08:36,960 --> 00:08:42,500 Een die alle getallen, en een die wordt gemengd verschillende gegevenstypen. 178 00:08:42,500 --> 00:08:45,020 >> Wat is iets heel anders in JavaScript, hoewel? 179 00:08:45,020 --> 00:08:47,020 Dat is het idee van een object. 180 00:08:47,020 --> 00:08:50,240 Dus misschien je hebt gehoord van object georiënteerd programmeren. 181 00:08:50,240 --> 00:08:53,370 We hebben niet veel te doen in de CS50, maar we zullen een beetje te doen 182 00:08:53,370 --> 00:08:55,670 hier in het kader van JavaScript. 183 00:08:55,670 --> 00:08:59,100 JavaScript heeft nu de mogelijkheid om gedragen als een object georiënteerd programmeren 184 00:08:59,100 --> 00:09:02,615 taal, maar het is niet zelf uitsluitend een object-georiënteerde 185 00:09:02,615 --> 00:09:03,490 programmeertaal. 186 00:09:03,490 --> 00:09:05,281 En dit komt weer terug naar de reden waarom ik al zei, het 187 00:09:05,281 --> 00:09:10,610 kan zeer uitdagend om te leren JavaScript als uw eerste programmering 188 00:09:10,610 --> 00:09:13,890 taal, omdat het niet echt bij een bepaald paradigma. 189 00:09:13,890 --> 00:09:16,430 >> C anderzijds een functionele programmeertaal. 190 00:09:16,430 --> 00:09:22,270 Als we willen, functies soort van de grote baas man, toch? 191 00:09:22,270 --> 00:09:24,410 Zij dicteren wat gebeurt alles anders. 192 00:09:24,410 --> 00:09:26,600 We willen variabelen te veranderen, wij noemen functies. 193 00:09:26,600 --> 00:09:28,220 Wij doen dingen functies. 194 00:09:28,220 --> 00:09:31,250 Objecten in plaats daarvan, in een object-georiënteerde taal, 195 00:09:31,250 --> 00:09:35,937 objecten soort uitgegroeid tot de ster en functies uitgegroeid tot een soort secundaire. 196 00:09:35,937 --> 00:09:38,270 Maar wat is een object, wat is deze notie van een object? 197 00:09:38,270 --> 00:09:40,880 Nou, als het helpt, denk over het op het eerste soort 198 00:09:40,880 --> 00:09:44,540 zoals een C structuur of een structuur dat we hebben geleerd over voordat. 199 00:09:44,540 --> 00:09:47,430 In C, een structuur bevat een aantal gebieden, 200 00:09:47,430 --> 00:09:51,174 en misschien hebben we nu kunnen beginnen noemen deze velden eigenschappen. 201 00:09:51,174 --> 00:09:53,590 Maar de eigenschappen nooit echt staan ​​op hun eigen, toch? 202 00:09:53,590 --> 00:09:56,410 Als ik definiëren een structuur voor een auto als dit met de volgende twee 203 00:09:56,410 --> 00:10:00,750 velden of eigenschappen, één van een integer voor het jaar van de auto 204 00:10:00,750 --> 00:10:04,290 en nog een 10 karakter string voor het model van de auto, 205 00:10:04,290 --> 00:10:07,150 Ik kan iets als dit te zeggen, Ik kan een nieuwe variabele declareren 206 00:10:07,150 --> 00:10:10,080 van het type struct auto herbie. 207 00:10:10,080 --> 00:10:13,730 En dan kan ik iets zeggen zoals herbie.year gelijk aan 1963, 208 00:10:13,730 --> 00:10:15,850 en herbie.model gelijk Beetle. 209 00:10:15,850 --> 00:10:17,000 Dat is goed. 210 00:10:17,000 --> 00:10:19,680 Ik ben met behulp van de velden in de context van de structuur, 211 00:10:19,680 --> 00:10:22,290 maar ik kon nooit alleen zoiets als dit te zeggen. 212 00:10:22,290 --> 00:10:22,790 Rechts? 213 00:10:22,790 --> 00:10:26,836 Ik kan de naam van het veld niet te gebruiken onafhankelijk van de structuur. 214 00:10:26,836 --> 00:10:28,210 Het is een soort van een fundamentele zaak. 215 00:10:28,210 --> 00:10:32,990 >> Dus velden zijn fundamenteel C structuren 216 00:10:32,990 --> 00:10:39,050 zijn zeer vergelijkbaar met die eigenschappen fundamenteel voor JavaScript-objecten. 217 00:10:39,050 --> 00:10:42,080 Maar wat maakt ze bijzonder interessant 218 00:10:42,080 --> 00:10:46,230 is dat objecten ook wat worden genoemd methoden, die zijn echt 219 00:10:46,230 --> 00:10:50,730 gewoon een duur woord voor functies die zijn inherent aan het object ook. 220 00:10:50,730 --> 00:10:55,340 Dus het is een functie die alleen kan worden genoemd in de context van een object. 221 00:10:55,340 --> 00:10:59,200 Slechts een object dat is gedefinieerd Deze functie binnen zijn, 222 00:10:59,200 --> 00:11:02,020 Als u denkt over een struct, de functie 223 00:11:02,020 --> 00:11:05,720 is binnen die definiëren gedefinieerd accolades van de structuur. 224 00:11:05,720 --> 00:11:07,980 Het betekent dus slechts iets de structuur. 225 00:11:07,980 --> 00:11:10,960 En dat is een soort van wat we doen hier met voorwerpen en werkwijzen. 226 00:11:10,960 --> 00:11:13,580 Het is eigenlijk alsof we definiëren van een functie 227 00:11:13,580 --> 00:11:16,670 alleen zinvol op een bepaald object, en dus hebben we 228 00:11:16,670 --> 00:11:19,440 noemen een werkwijze van het object. 229 00:11:19,440 --> 00:11:23,180 En we kunnen nooit noemen functie onafhankelijk van het object, 230 00:11:23,180 --> 00:11:29,260 net zoals we geen jaar of model kan zeggen onafhankelijk van de structuur in C. 231 00:11:29,260 --> 00:11:32,300 >> Zo functioneel programmeren paradigma kijken iets als dit. 232 00:11:32,300 --> 00:11:35,450 Functie en dan wanneer je voorbij in het object als een parameter. 233 00:11:35,450 --> 00:11:38,650 In een object georiënteerd programmeren talen, dit soort krijgt 234 00:11:38,650 --> 00:11:43,464 omgedraaid, en we zouden denken over dat dit leuk, object.function. 235 00:11:43,464 --> 00:11:45,380 Dus het soort dat dot exploitant weer impliceert 236 00:11:45,380 --> 00:11:49,540 dat het een soort van onroerend goed of eigenschap van het object zelf. 237 00:11:49,540 --> 00:11:53,240 Maar dit is wat een object georiënteerde programmeertaal 238 00:11:53,240 --> 00:11:57,150 zou kunnen doen om een ​​functie te maken een beroep doen op een manier, nogmaals, die 239 00:11:57,150 --> 00:12:00,260 is gewoon een speciaal woord voor een functie die inherent is aan een object. 240 00:12:00,260 --> 00:12:03,440 Dat is wat dat syntax eruit zou kunnen zien. 241 00:12:03,440 --> 00:12:09,360 En dus zullen we beginnen met een aantal van te zien dit in de context van JavaScript. 242 00:12:09,360 --> 00:12:12,470 >> U kunt ook denken aan een object soort als een associatieve array, 243 00:12:12,470 --> 00:12:14,160 die we kennen van PHP. 244 00:12:14,160 --> 00:12:17,720 Vergeet niet een associatieve array toestaat ons om de belangrijkste waarde paren, in plaats 245 00:12:17,720 --> 00:12:23,040 van het hebben indexen 0, één, twee, drie, en zo verder, zoals we gewend zijn van de C 246 00:12:23,040 --> 00:12:23,940 arrays. 247 00:12:23,940 --> 00:12:27,472 Associatieve arrays kunnen in kaart woorden, zoals in de PHP video, 248 00:12:27,472 --> 00:12:29,180 we hadden het over toppings van de pizza's. 249 00:12:29,180 --> 00:12:31,180 En dus moesten we een array genaamd pizza, en we 250 00:12:31,180 --> 00:12:36,670 had kaas was een sleutel en $ 8,99 was het waarde en pepperoni was een sleutel, 251 00:12:36,670 --> 00:12:39,190 $ 9,99 was een waarde, enzovoort. 252 00:12:39,190 --> 00:12:43,300 En zo kunnen we ook nadenken over een object soort vergelijkbaar met een associatieve 253 00:12:43,300 --> 00:12:43,840 matrix. 254 00:12:43,840 --> 00:12:47,020 En dus is deze syntax hier zou een nieuw object te maken 255 00:12:47,020 --> 00:12:50,950 riep herbie met twee eigenschappen binnenkant van het. 256 00:12:50,950 --> 00:12:57,310 Jaar, waarbij de waarde 1963 is toegekend, en model, dat de snaar toegewezen 257 00:12:57,310 --> 00:12:58,140 Kever. 258 00:12:58,140 --> 00:13:01,770 >> En merk hier dat ik ben met behulp van enkele aanhalingstekens in JavaScript. 259 00:13:01,770 --> 00:13:05,570 U kunt enkele of dubbele aanhalingstekens als je praat over de snaren. 260 00:13:05,570 --> 00:13:07,772 Het is gewoon conventioneel het geval dat de meeste tijden 261 00:13:07,772 --> 00:13:10,230 als je aan het schrijven bent JavaScript, je gewoon gebruik maken van enkele aanhalingstekens. 262 00:13:10,230 --> 00:13:15,050 Maar ik kon dubbele aanhalingstekens hier gebruiken, en die prima zou zijn als goed. 263 00:13:15,050 --> 00:13:17,470 >> Dus niet vergeten hoe in PHP hadden we deze notie 264 00:13:17,470 --> 00:13:22,730 van een voor elke lus die ons zou toestaan itereren over alle van de sleutelwaarde 265 00:13:22,730 --> 00:13:25,270 paren associatief matrix, omdat we 266 00:13:25,270 --> 00:13:29,050 heeft dit vermogen om te herhalen niet m 0, één, twee, drie, vier, 267 00:13:29,050 --> 00:13:30,710 enzovoort? 268 00:13:30,710 --> 00:13:35,010 JavaScript heeft iets zeer vergelijkbaar zijn, maar het is niet opgeroepen voor elke lus, 269 00:13:35,010 --> 00:13:38,960 het heet een in lussen. 270 00:13:38,960 --> 00:13:42,890 Dus als ik zei tegen me als dit, voor var sleutel in voorwerp, 271 00:13:42,890 --> 00:13:48,670 dat is een soort vergelijkbaar met te zeggen voor elk iets als iets. 272 00:13:48,670 --> 00:13:53,850 Maar alles wat ik hier doe is iteratie door alle sleutels van mijn object. 273 00:13:53,850 --> 00:13:56,070 En de binnenkant van de gekrulde braces daar, zou ik 274 00:13:56,070 --> 00:14:03,410 Gebruik object vierkante haken sleutel om te verwijzen om de waarde op die belangrijke locatie. 275 00:14:03,410 --> 00:14:05,400 >> Als alternatief is er zelfs een andere aanpak. 276 00:14:05,400 --> 00:14:10,880 Als ik maar alleen de zorg over de waarden, kan ik zeggen voor de belangrijkste object, 277 00:14:10,880 --> 00:14:12,360 en gewoon gebruik maken van de belangrijkste binnen. 278 00:14:12,360 --> 00:14:17,240 Dus voor var sleutel in voorwerp, heb ik om object vierkante haken gebruiken 279 00:14:17,240 --> 00:14:19,340 sleutel in de lus. 280 00:14:19,340 --> 00:14:24,580 Voor var sleutel van het object, kan ik gewoon gebruik maken van de belangrijkste in de lus, 281 00:14:24,580 --> 00:14:29,040 want ik ben gewoon specifiek praten over de waarden daar. 282 00:14:29,040 --> 00:14:32,630 >> Dus laten we misschien een kijk naar het verschil 283 00:14:32,630 --> 00:14:35,670 gewoon om je snel te laten zien het verschil tussen de vier 284 00:14:35,670 --> 00:14:40,730 in en van een zeer specifieke array, die we hier hebben, week array. 285 00:14:40,730 --> 00:14:43,616 Dus ik moet een nieuwe array te vinden dat ik gevuld met zeven snaren, 286 00:14:43,616 --> 00:14:46,240 Maandag dinsdag woensdag, Donderdag, vrijdag, zaterdag, zondag. 287 00:14:46,240 --> 00:14:50,530 En ik wil nu herhalen door deze matrix, 288 00:14:50,530 --> 00:14:53,090 afdrukken van bepaalde informatie. 289 00:14:53,090 --> 00:14:58,780 Als ik een in lus om uit te printen informatie, 290 00:14:58,780 --> 00:15:00,710 wat denk je dat ik ga krijgen? 291 00:15:00,710 --> 00:15:01,710 Nou, laten we eens een kijkje nemen. 292 00:15:01,710 --> 00:15:05,300 En voordat we springen over mijn browservenster, 293 00:15:05,300 --> 00:15:08,090 weet alleen dat console.log is een soort van een 294 00:15:08,090 --> 00:15:10,630 manier van het doen van een afdruk F in JavaScript. 295 00:15:10,630 --> 00:15:12,040 Maar wat is de console? 296 00:15:12,040 --> 00:15:14,940 Nou, dat is wat we gaan om te gaan een kijkje nemen op dit moment. 297 00:15:14,940 --> 00:15:16,850 >> OK, dus we zijn hier terug in mijn browser, 298 00:15:16,850 --> 00:15:19,410 en ik ga om te openen mijn developer tools. 299 00:15:19,410 --> 00:15:22,290 Nogmaals, ik ben gewoon te raken F12 openstellen developer tools. 300 00:15:22,290 --> 00:15:25,670 En merk op dat hier bij de top Ik heb gekozen voor de console. 301 00:15:25,670 --> 00:15:28,480 Dit is dus het begrip van een ontwikkelaar console, 302 00:15:28,480 --> 00:15:30,500 en zal het ons mogelijk maken afdrukken informatie uit, 303 00:15:30,500 --> 00:15:33,000 een beetje zoals de terminal, maar zoals u later zult zien een beetje, 304 00:15:33,000 --> 00:15:37,720 we kunnen ook informatie intypen om te communiceren met onze webpagina. 305 00:15:37,720 --> 00:15:42,320 Ik ga een beetje te zoomen hier en ik ga nu klik voor in de test. 306 00:15:42,320 --> 00:15:45,230 En vier in test-- Ik ga niet tonen u de code voor het nu, 307 00:15:45,230 --> 00:15:47,479 maar je zult krijgen als je downloaden van de broncode die 308 00:15:47,479 --> 00:15:50,380 wordt geassocieerd met dit video-- is alleen dat in lus 309 00:15:50,380 --> 00:15:52,610 die we zagen slechts een tweede geleden op de dia. 310 00:15:52,610 --> 00:15:54,810 >> Dus ik ga klik die knop, en hier, 311 00:15:54,810 --> 00:15:58,440 hier is wat er uit gedrukt in de console, 0, één, twee, drie, vier, vijf, 312 00:15:58,440 --> 00:15:58,940 zes. 313 00:15:58,940 --> 00:16:02,490 Ik heb geen afdruk van de gegevens binnen die reeks locaties, 314 00:16:02,490 --> 00:16:05,180 want ik gebruik gemaakt van een in lus. 315 00:16:05,180 --> 00:16:10,670 En in het lichaam van de lus, I gewoon uitgeprint belangrijke sleutel geen bezwaar. 316 00:16:10,670 --> 00:16:18,600 Maar als ik nu duidelijk mijn console, en ik overschakelen op voor de test, en vier van de test 317 00:16:18,600 --> 00:16:22,500 Ik zeg dat ik gebruiken voor de st plaats en afdrukken-toets, 318 00:16:22,500 --> 00:16:28,079 Als ik die klik, nu ben ik het krijgen van de feitelijke elementen binnenkant van mijn object 319 00:16:28,079 --> 00:16:29,120 of mijn array in dit geval. 320 00:16:29,120 --> 00:16:31,760 Mijn reeks van dagen van de week. 321 00:16:31,760 --> 00:16:33,480 Ik uitgeprint maandag, Dinsdag woensdag. 322 00:16:33,480 --> 00:16:36,930 Dus dat is het verschil tussen een in lus, die wordt afgedrukt 323 00:16:36,930 --> 00:16:43,410 alleen de toetsen als u gewoon gebruik maken van de belangrijkste binnenin het lichaam van de lus, 324 00:16:43,410 --> 00:16:46,850 en een voor in de st, die prints de waarden als je gewoon gebruiken 325 00:16:46,850 --> 00:16:48,870 sleutel binnen het lichaam van de lus. 326 00:16:48,870 --> 00:16:52,380 >> Oké, hoe kunnen we nu beginnen aan aaneenschakelen strijkers en misschien vermengen 327 00:16:52,380 --> 00:16:57,220 sommige variabelen interpolatie alsof we kunnen doen in PHP? 328 00:16:57,220 --> 00:16:59,410 Nou, we zijn redelijk bekend met deze van PHP. 329 00:16:59,410 --> 00:17:04,109 Dit is hoe we het zou doen met behulp van de dot operator om tekenreeksen samen te voegen. 330 00:17:04,109 --> 00:17:06,260 In JavaScript, hoewel, we eigenlijk iets te gebruiken 331 00:17:06,260 --> 00:17:09,290 de zogenaamde plus-operator, die is misschien zelfs een beetje meer 332 00:17:09,290 --> 00:17:10,470 intuïtieve, toch? 333 00:17:10,470 --> 00:17:12,609 We zijn het toevoegen van een bos snaren samen. 334 00:17:12,609 --> 00:17:14,520 Dus laten we het hoofd terug over en zien wat dit 335 00:17:14,520 --> 00:17:18,693 afgedrukt als we proberen om uit te printen alle informatie in week array. 336 00:17:18,693 --> 00:17:20,859 Oké, dus onder hier onder tekenreekssamenvoegingsoperator, 337 00:17:20,859 --> 00:17:24,822 Ik heb twee opties, touwtje gebouw V1 en V2 touwtje gebouw. 338 00:17:24,822 --> 00:17:26,530 En we zullen zien waarom we moet V2 in een tweede. 339 00:17:26,530 --> 00:17:28,610 Maar ik ga op koord gebouw V1, waarin 340 00:17:28,610 --> 00:17:30,360 is de code die we waren gewoon een kijkje op, 341 00:17:30,360 --> 00:17:32,980 de console.log met alle van de pluspunten. 342 00:17:32,980 --> 00:17:35,910 Laten we eens zien of dit prints wat we verwachten. 343 00:17:35,910 --> 00:17:39,939 >> Maandag is de dag nummer 01 van de week, Dinsdag is dag nummer 11 van de week. 344 00:17:39,939 --> 00:17:41,730 Nou, wat ik probeerde te doen was er krijgen 345 00:17:41,730 --> 00:17:46,280 het aan uit te printen maandag is dag nummer één, dinsdag is dag nummer twee. 346 00:17:46,280 --> 00:17:50,140 Maar het lijkt alsof ik ben altijd afdrukken van één. 347 00:17:50,140 --> 00:17:51,260 Nou, waarom is dat? 348 00:17:51,260 --> 00:17:55,600 Nou, zo blijkt, nog eens kijken op dit kleine stukje van de code hier. 349 00:17:55,600 --> 00:18:00,160 Merk op dat we met behulp van de plus operator in twee verschillende contexten. 350 00:18:00,160 --> 00:18:03,221 >> En dus hier is waar misschien dingen dat we soort van gezegd, 351 00:18:03,221 --> 00:18:03,970 oh, het is zo geweldig. 352 00:18:03,970 --> 00:18:05,910 We hebben niet langer behandelen gegevenstypen. 353 00:18:05,910 --> 00:18:08,220 Maar hier is waar het feit dat we verliezen data types 354 00:18:08,220 --> 00:18:10,960 kan eigenlijk een beetje te zijn van een probleem voor ons. 355 00:18:10,960 --> 00:18:16,260 Nu de plus operator wordt gebruikt om aaneenschakelen strijkers en nummers toe te voegen 356 00:18:16,260 --> 00:18:19,550 samen, JavaScript heeft haar best guess maken 357 00:18:19,550 --> 00:18:22,030 wat ik wil dat het voor mij doen. 358 00:18:22,030 --> 00:18:23,900 En in dit geval, raadt het al mis. 359 00:18:23,900 --> 00:18:29,340 Het is gewoon aaneengeschakelde dag, die zou zijn 0, één, twee, drie, vier, vijf of zes, 360 00:18:29,340 --> 00:18:32,060 en dan is het gewoon samengevoegd dat en dan samengevoegd één. 361 00:18:32,060 --> 00:18:35,020 Het deed er niet echt toe te voegen ze samen. 362 00:18:35,020 --> 00:18:37,320 En dus deze talen, PHP en JavaScript, 363 00:18:37,320 --> 00:18:39,196 dat abstracts weg Dit begrip types, 364 00:18:39,196 --> 00:18:40,820 je hoeft niet meer te behandelen. 365 00:18:40,820 --> 00:18:43,600 Ze hebben nog steeds types onder de motorkap. 366 00:18:43,600 --> 00:18:46,780 En we kunnen, in situaties als dit, hefboomeffect dat feit 367 00:18:46,780 --> 00:18:49,240 door iets te zeggen zoals misschien dit, dat 368 00:18:49,240 --> 00:18:53,210 vertelt JavaScript, door de Zo behandelt dit als een integer, 369 00:18:53,210 --> 00:18:57,100 het niet behandelen als een string, zelfs hoewel we samen mengen strings 370 00:18:57,100 --> 00:18:58,940 en gehele getallen in. 371 00:18:58,940 --> 00:19:02,204 >> Het is gewoon een van die dingen dat het lijkt zo groot in context 372 00:19:02,204 --> 00:19:04,120 dat we niet hoeven te behandelen types meer, 373 00:19:04,120 --> 00:19:05,828 maar soms moet je zult lopen in een situatie 374 00:19:05,828 --> 00:19:09,110 dit precies zoals waar het feit dat je geen controle over types hebben 375 00:19:09,110 --> 00:19:11,220 kan averechts werken op jou als je niet oppast. 376 00:19:11,220 --> 00:19:18,285 En dus als we pop terug over naar IDE, ik ben gaat weer uit te wissen mijn console, 377 00:19:18,285 --> 00:19:20,660 en ik ga om te klikken koord gebouw versie twee, die 378 00:19:20,660 --> 00:19:23,052 is waar ik gebruik die ontleden int functie. 379 00:19:23,052 --> 00:19:25,260 Nu is het afdrukken van informatie die ik verwachtte. 380 00:19:25,260 --> 00:19:29,330 Maandag dag nummer één, dinsdag is dag nummer twee, enzovoort. 381 00:19:29,330 --> 00:19:31,170 >> Dus laten we praten over de functies weer. 382 00:19:31,170 --> 00:19:34,790 Ik heb beloofd dat we zouden praten over anonieme functies, en nu de context van die 383 00:19:34,790 --> 00:19:36,360 is eindelijk gearriveerd. 384 00:19:36,360 --> 00:19:39,980 Dus voordat we dat doen, laten we praten weer over arrays voor slechts een seconde. 385 00:19:39,980 --> 00:19:42,120 Dus arrays zijn een speciale Bij een object. 386 00:19:42,120 --> 00:19:45,180 In feite, alles JavaScript is eigenlijk een object. 387 00:19:45,180 --> 00:19:47,190 Dus functies zijn een speciaal geval van een voorwerp, 388 00:19:47,190 --> 00:19:49,770 integers zijn een speciale Bij een voorwerp, 389 00:19:49,770 --> 00:19:52,152 maar arrays specifiek een aantal werkwijzen. 390 00:19:52,152 --> 00:19:55,110 Vergeet niet omdat ze voorwerpen, ze kunnen eigenschappen en methoden. 391 00:19:55,110 --> 00:19:58,600 Ze hebben een aantal methoden die kunnen worden toegepast op de objecten. 392 00:19:58,600 --> 00:20:01,197 Er is een methode genaamd grootte, array.size, 393 00:20:01,197 --> 00:20:03,030 die terug naar je zoals je zou verwachten 394 00:20:03,030 --> 00:20:05,120 het aantal elementen in de array. 395 00:20:05,120 --> 00:20:08,480 Array.pop, een soort als onze notie van knallen 396 00:20:08,480 --> 00:20:11,110 van een stapel, als je herinneren Aanbevolen stacks video, 397 00:20:11,110 --> 00:20:13,810 verwijdert het laatste element van de array. 398 00:20:13,810 --> 00:20:17,110 Array.push voegt een nieuw element aan het einde van een array. 399 00:20:17,110 --> 00:20:20,910 Array.shift is een soort van zoals DQ het splits uit 400 00:20:20,910 --> 00:20:23,610 het eerste element van een array. 401 00:20:23,610 --> 00:20:27,549 >> Maar er is ook een andere speciale Werkwijze volgens een matrix genoemd map. 402 00:20:27,549 --> 00:20:29,340 En dit is een soort van een interessant concept. 403 00:20:29,340 --> 00:20:30,930 Dus wat is het idee van een kaart? 404 00:20:30,930 --> 00:20:33,880 Je zult dit eigenlijk zien in verschillende andere talen, 405 00:20:33,880 --> 00:20:38,550 en we hebben het niet over een soort cartografen in kaart hier, 406 00:20:38,550 --> 00:20:41,480 we hebben het over een mapping-functie. 407 00:20:41,480 --> 00:20:44,110 In de context zijn we hier over een kaart 408 00:20:44,110 --> 00:20:47,950 is een speciale operatie we kan uitvoeren op een array 409 00:20:47,950 --> 00:20:51,630 een bepaalde functie toepassen elk element van de matrix. 410 00:20:51,630 --> 00:20:55,190 en zo zouden we zeggen in dit geval, misschien array.map, 411 00:20:55,190 --> 00:21:00,330 en de binnenkant van het, we passeren in kaart is een functie die we willen 412 00:21:00,330 --> 00:21:02,430 moet worden toegepast op elk element. 413 00:21:02,430 --> 00:21:07,299 Dus het is een soort van analoog aan het gebruik van een lus om itereren over elk element 414 00:21:07,299 --> 00:21:09,340 en toepassen van een bepaalde functie voor elk element, 415 00:21:09,340 --> 00:21:14,830 net JavaScript heeft deze ingebouwde begrip afbeelding die kan worden toegepast. 416 00:21:14,830 --> 00:21:19,700 En dit is een geweldige context praten over een anonieme functie. 417 00:21:19,700 --> 00:21:22,370 >> Dus laten we zeggen dat we hebben Deze reeks van gehele getallen. 418 00:21:22,370 --> 00:21:25,370 Het heet nums, en het heeft vijf dingen erin, één, twee, drie, vier, 419 00:21:25,370 --> 00:21:26,410 vijf. 420 00:21:26,410 --> 00:21:30,620 Nu wil ik een aantal in kaart functie op deze array. 421 00:21:30,620 --> 00:21:34,337 Ik wil een functie toe te passen elk element van de array. 422 00:21:34,337 --> 00:21:37,420 Nou, laten we zeggen dat wat ik wil doen is gewoon alle elementen verdubbelen. 423 00:21:37,420 --> 00:21:42,520 Wat ik kon doen is gewoon gebruik maken van een lus voor var I gelijk is aan 0, is dat ik minder dan 424 00:21:42,520 --> 00:21:47,390 of gelijk aan 4, I plus, plus, en dan verdubbelen elk nummer. 425 00:21:47,390 --> 00:21:49,580 Maar ik kan ook iets als dit te doen. 426 00:21:49,580 --> 00:21:53,420 Ik kan zeggen nums was vroeger een twee drie vier vijf, 427 00:21:53,420 --> 00:21:58,310 Voorlopig echter, zou ik graag willen dat u een afbeelding aanbrengen op deze array 428 00:21:58,310 --> 00:22:00,400 waar ik zou graag willen dat u elk nummer verdubbelen. 429 00:22:00,400 --> 00:22:02,540 En dat is precies wat er gebeurt hier. 430 00:22:02,540 --> 00:22:06,870 Maar let op wat ik passeren in als argument in kaart. 431 00:22:06,870 --> 00:22:09,080 Dit is een anonieme functie. 432 00:22:09,080 --> 00:22:11,140 En merk ik heb niet gezien deze functie een naam, 433 00:22:11,140 --> 00:22:13,290 Ik heb alleen gezien het een parameter lijst. 434 00:22:13,290 --> 00:22:16,370 En dus dit is een voorbeeld van een anonieme functie. 435 00:22:16,370 --> 00:22:21,270 >> We zouden over het algemeen nooit noemen functie buiten de context van de kaart. 436 00:22:21,270 --> 00:22:24,110 We definiëren als een parameter in kaart, en dus hebben we niet echt 437 00:22:24,110 --> 00:22:27,910 Om een ​​naam voor hebben als de enige dat geeft om is kaart 438 00:22:27,910 --> 00:22:30,339 en het recht gedefinieerd er binnenkant van de kaart. 439 00:22:30,339 --> 00:22:31,880 En dus dit is een anonieme functie. 440 00:22:31,880 --> 00:22:34,680 We zijn niet in staat geweest om dit eerder te doen. 441 00:22:34,680 --> 00:22:38,400 Kaart een functie die één parameter accepteert, num, 442 00:22:38,400 --> 00:22:41,890 en wat die functie doet is terug num tijden 2. 443 00:22:41,890 --> 00:22:45,330 En dus na deze mapping is toegepast, 444 00:22:45,330 --> 00:22:50,090 dit is nu wat nums looks zoals, twee, vier, zes, acht, 10. 445 00:22:50,090 --> 00:22:52,090 En we zullen dan pop tot mijn browservenster en net 446 00:22:52,090 --> 00:22:55,240 neem een ​​kijkje op deze heel snel ook. 447 00:22:55,240 --> 00:22:58,000 >> Dus ik heb een andere knop hier in mijn homepage genoemd dubbel. 448 00:22:58,000 --> 00:23:03,570 En als ik klik dubbel, en het vertelt me voordat het werd een, twee, drie, vier, 449 00:23:03,570 --> 00:23:07,250 vijf na twee, vier, zes, acht, 10. 450 00:23:07,250 --> 00:23:11,930 En als ik terug en klik dubbel weer, twee, vier, zes, acht, 10. 451 00:23:11,930 --> 00:23:17,400 En dan na, vier, acht, 12, 16, en 20. 452 00:23:17,400 --> 00:23:20,440 En wat doe ik in deze functie? 453 00:23:20,440 --> 00:23:25,210 Nou, als we pop iets meer dan naar IDE, en Ik trek mijn anonieme functie, hier 454 00:23:25,210 --> 00:23:28,780 op lijn zeven tot 13, ik ben het doen van een beetje mooie werk hier, 455 00:23:28,780 --> 00:23:32,240 maar ik ben gewoon printen wat momenteel in de array. 456 00:23:32,240 --> 00:23:36,580 Vervolgens op lijn 16, 17, en 18, daar is mijn kaart. 457 00:23:36,580 --> 00:23:40,930 Dit is waar ik het toepassen van deze verdubbeling functie voor elk element. 458 00:23:40,930 --> 00:23:43,530 En dan een beetje verder naar beneden, Ik ben gewoon hetzelfde te doen 459 00:23:43,530 --> 00:23:46,640 Ik eerder deed, behalve nu ben ik afdrukken van de inhoud van de array 460 00:23:46,640 --> 00:23:48,167 daarna. 461 00:23:48,167 --> 00:23:50,500 Maar alles wat ik heb hier gedaan is gewoon gebruik maken van een anonieme functie 462 00:23:50,500 --> 00:23:53,640 in kaart over een hele reeks. 463 00:23:53,640 --> 00:23:58,466 >> Dus nog een groot onderwerp om over te praten in JavaScript is de notie van een gebeurtenis. 464 00:23:58,466 --> 00:24:01,590 Een gebeurtenis is iets dat gewoon gebeurt wanneer een gebruiker interageert met uw web 465 00:24:01,590 --> 00:24:04,715 pagina, dus misschien ze op iets, of misschien de pagina klaar is met laden, 466 00:24:04,715 --> 00:24:07,200 of misschien hebben ze verhuisd hun muis over iets, 467 00:24:07,200 --> 00:24:09,290 of ze hebben iets getypt in een invoerveld. 468 00:24:09,290 --> 00:24:14,260 Al deze dingen zijn evenementen die zich voordoen op onze website. 469 00:24:14,260 --> 00:24:17,460 En JavaScript heeft de vermogen iets ondersteunen 470 00:24:17,460 --> 00:24:21,760 riep een event handler, die is een callback functie 471 00:24:21,760 --> 00:24:23,329 reageert op een HTML-evenement. 472 00:24:23,329 --> 00:24:24,620 En wat is een callback functie? 473 00:24:24,620 --> 00:24:27,328 Nou, het is over het algemeen gewoon een andere naam voor een anonieme functie. 474 00:24:27,328 --> 00:24:30,170 Het is een functie die reageert op een gebeurtenis. 475 00:24:30,170 --> 00:24:34,130 En dit is waar we komen tot de idee van binding bepaalde functies 476 00:24:34,130 --> 00:24:38,060 een bepaald attribuut html. 477 00:24:38,060 --> 00:24:41,420 De meeste HTML-elementen hebben ondersteuning voor een attribuut 478 00:24:41,420 --> 00:24:45,170 dat we niet over praten in de html- Video zoiets op klik 479 00:24:45,170 --> 00:24:50,540 of bij aanwijzen of de belasting, al deze gebeurtenissen 480 00:24:50,540 --> 00:24:53,120 die u vervolgens kunt schrijven functies die te maken hebben met de gebeurtenissen 481 00:24:53,120 --> 00:24:56,090 wanneer die gebeurtenissen plaats op uw webpagina. 482 00:24:56,090 --> 00:24:59,170 >> En dus misschien uw HTML ziet er iets als dit. 483 00:24:59,170 --> 00:25:02,240 En ik heb hier twee knoppen, knop en een knop twee, 484 00:25:02,240 --> 00:25:04,620 en hier heb ik momenteel gedefinieerd niets, 485 00:25:04,620 --> 00:25:11,170 maar dit is waar de attribuut klik is blijkbaar deel uit van mijn html-tag. 486 00:25:11,170 --> 00:25:15,220 Dus blijkbaar toen ik bepalen wat er aan de binnenkant van die eigenschap, 487 00:25:15,220 --> 00:25:18,590 het gaat om een ​​aantal JavaScript te zijn functie die reageert op de gebeurtenis 488 00:25:18,590 --> 00:25:24,360 vermoedelijk van te klikken knop een knop of twee. 489 00:25:24,360 --> 00:25:28,580 >> Wat is wel cool over deze is dat we kan een generieke event handler te schrijven. 490 00:25:28,580 --> 00:25:32,370 En dit evenement Handler zal maak een evenement object. 491 00:25:32,370 --> 00:25:37,000 En het evenement object zal ons vertellen welke van de twee knoppen is geklikt. 492 00:25:37,000 --> 00:25:38,064 Nu hoe werkt dat? 493 00:25:38,064 --> 00:25:39,730 Nou, het zou er ongeveer zo uitzien. 494 00:25:39,730 --> 00:25:44,860 Dus zullen we eerst onze knoppen te definiëren een reactie op de callback hebben 495 00:25:44,860 --> 00:25:47,470 functie wordt aangeroepen wanneer de knop wordt geklikt, 496 00:25:47,470 --> 00:25:49,520 we zullen event alert naam noemen. 497 00:25:49,520 --> 00:25:53,320 En het bericht in beide gevallen zijn we passeren in deze parameter event. 498 00:25:53,320 --> 00:25:55,460 Dus deze functie noemen we of wanneer deze functie 499 00:25:55,460 --> 00:26:00,330 wordt geactiveerd door de gebeurtenis gebeurde, het gaat om dit evenement object te maken 500 00:26:00,330 --> 00:26:03,300 en geef het als een parameter naam waarschuwen. 501 00:26:03,300 --> 00:26:07,270 En die gebeurtenis object gaan naar informatie te bevatten 502 00:26:07,270 --> 00:26:09,800 over welke knop is geklikt. 503 00:26:09,800 --> 00:26:11,580 En hoe werkt het dat doen? 504 00:26:11,580 --> 00:26:13,654 Nou, het zou er ongeveer zo uitzien. 505 00:26:13,654 --> 00:26:15,570 Dus nu in mijn afzonderlijke JavaScript-bestand, zou ik 506 00:26:15,570 --> 00:26:17,420 moet dit voorbeeld functie alert naam, die 507 00:26:17,420 --> 00:26:19,500 weer aanvaardt dat parameter evenement. 508 00:26:19,500 --> 00:26:24,640 En dan is hier waar ik detecteren welke knop werd veroorzaakt, 509 00:26:24,640 --> 00:26:28,100 var trekker gelijk evenement dot bronelement. 510 00:26:28,100 --> 00:26:33,150 Wat was de bron die gecreëerd dit evenement object dat werd aangenomen in? 511 00:26:33,150 --> 00:26:36,390 Was het een knop of was het de knop twee? 512 00:26:36,390 --> 00:26:40,710 >> En dan is hier alles wat ik doe is printen trigger.innerhtml. 513 00:26:40,710 --> 00:26:43,860 Welnu, in casu, in deze context, trigger.innerhtml 514 00:26:43,860 --> 00:26:45,940 is precies wat is geschreven op de knop. 515 00:26:45,940 --> 00:26:48,830 Het gebeurt gewoon, dus als we springen terug voor een tweede, dat zou 516 00:26:48,830 --> 00:26:51,670 zijn wat er in tussen die Tags. 517 00:26:51,670 --> 00:26:54,150 Het zal de knop een of knop twee. 518 00:26:54,150 --> 00:26:57,320 En laten we een kijkje nemen op hoe dit event handler zou 519 00:26:57,320 --> 00:27:01,080 kijken of we hadden het lopen in de praktijk. 520 00:27:01,080 --> 00:27:03,850 >> Dus in de eerste plaats, je hebt opengesteld events.js, 521 00:27:03,850 --> 00:27:06,517 dat is de JavaScript-bestand, waar Ik heb deze functie gedefinieerd. 522 00:27:06,517 --> 00:27:08,558 En zoals je kunt zien, het is vrij veel precies wat 523 00:27:08,558 --> 00:27:10,230 we zagen op de dia een seconde geleden. 524 00:27:10,230 --> 00:27:14,890 En Ik zal over te gaan naar de homepage we hebben gebruikt. 525 00:27:14,890 --> 00:27:17,660 En ik heb hier de knop één knop en twee. 526 00:27:17,660 --> 00:27:19,820 En ik zal u op de knop één klik. 527 00:27:19,820 --> 00:27:23,930 Je klikte op de knop een, als je kan hier in de waarschuwing te zien. 528 00:27:23,930 --> 00:27:25,810 OK. 529 00:27:25,810 --> 00:27:28,980 Klik op de knop twee, u geklikt op een knop twee. 530 00:27:28,980 --> 00:27:32,150 >> Zodat beide knoppen hebben de dezelfde functie bellen, toch? 531 00:27:32,150 --> 00:27:35,840 Beiden waren alert naam gebeurtenis, maar deze gebeurtenis object 532 00:27:35,840 --> 00:27:41,900 dat wordt gemaakt wanneer we op Het vertelt ons welke knop is geklikt. 533 00:27:41,900 --> 00:27:44,650 We hoefden niet te schrijven twee afzonderlijke functies of deal met het hebben 534 00:27:44,650 --> 00:27:46,470 om extra informatie door te geven. 535 00:27:46,470 --> 00:27:48,220 We zijn gewoon te vertrouwen op wat zal JavaScript 536 00:27:48,220 --> 00:27:53,772 voor ons, dat is het creëren van dat soort van event object namens ons. 537 00:27:53,772 --> 00:27:56,730 Er is veel meer dan JavaScript wat we hebben behandeld in deze video, 538 00:27:56,730 --> 00:27:58,521 maar met deze fundamenteel moet je 539 00:27:58,521 --> 00:28:00,690 een heel lange manieren om het leren van alles wat je 540 00:28:00,690 --> 00:28:04,030 moet weten over deze interessante taal. 541 00:28:04,030 --> 00:28:05,000 Ik ben Doug Lloyd. 542 00:28:05,000 --> 00:28:07,010 Dit is CS50. 543 00:28:07,010 --> 00:28:09,181