[Musiikkia] 

DOUG Lloyd: Joten nyt olemme vanhoja ammattilaisilta joko web ohjelmointi, eikö? Ja olemme kattaa useita kielet yksittäisissä videoita. Ja nyt tehkäämme yksi, JavaScript. 

Ensimmäinen hyvä uutinen, JavaScript on moderni ohjelmointi kieli aivan kuten PHP, jonka syntaksi on johdettu C: ssa, joten se on hyvä paikka aloittaa. Se on suunnilleen yhtä vanha kuin PHP, samoin, on ollut noin noin 20 vuotta. Se keksittiin noin samaan aikaan kuin PHP. Ja JavaScript on oikeastaan ​​aika olennainen käyttökokemusta rainan. Itse asiassa, on kolmella kielellä, että olen sanoisi tavallaan muodostavat käyttäjäkokemuksen vuorovaikutuksessa kanssa verkkosivuilla, html, css ja JavaScript. Ja nyt puhutaan vähän tietoa JavaScript. 

Huono uutinen, vaikka, jossa JavaScript on että se asettaa paljon sääntöjä itse, ja sitten se hajoaa niitä. Ja JavaScript voi todella olla Tällainen haastavaa oppia, koska se on toisin kuin C ja PHP, joka on hyvin jäsennelty ja ovat hyvin jäykät säännöt miten se voidaan tehdä. JavaScript on eräänlainen on mennyt niin joustava että ehkä asiat eivät aio toimi niin me odotamme heidän, ja ehkä me todella voi oppia ensimmäinen ohjelmointikieli kuten JavaScript. Joten ehkä koska se ei asettanut itselleen sääntöjä, ja se ei ole oikeastaan valvoa hyvä koodausta tapoja. Mutta nyt olemme toivottavasti kehittäneet hyviä koodausta tapoja, ja jotta voimme aloittaa kokeilu JavaScriptiä hieman. 

Voit kirjoittaa JavaScript, samanlainen aukko ylös C tiedosto pisteellä C laajennus tai PHP-tiedosto pisteellä PHP laajennus, kaikki meidän tarvitsee vain avata tiedosto kanssa piste js tiedostopääte. Emme tarvitse olla mitään erityisiä erottimia kuten teimme PHP. Että sellainen kulma kiinnike kysymysmerkki PHP että olemme tottuneet siitä, miten kerromme selain, mitä meillä on JavaScript on sisällyttämällä se html tag, ja näemme hieman siitä miten se vain hetken. 

Toinen asia, joka tekee JavaScript eri, kuitenkin se, että se toimii asiakkaan puolella. Joten muistaa PHP että emme voisi koskaan todella nähdä PHP, joka korosti verkkosivuilla. Jos me koskaan katsottu sivun lähdekoodi, olisimme vain katso html joka oli syntyy että PHP. Mutta JavaScript toimii asiakkaan puolella. JavaScript toimii tietokoneessa. Ja siksi voit tehdä asioita, kuten lisätä salpaajia. Oikea? Mainos esto tehdään yleensä tappaa kaikki JavaScript- joka on käynnissä erityisesti verkkosivuilla. Ja koska se on ajaa koneen asiakkaan puolelta, voit vain lopettaa Javascript käynnissä kokonaan. Tämä tarkoittaa myös sitä, että kun käytät sivusto, joka sisältää JavaScript, sinun täytyy lähettää JavaScript lähde koodi osana http vastaus asiakkaalle, kun he sitä pyytävät. Ja niin saatat ei haluavat käyttää JavaScript tehdä todella herkkiä asioita kuten välittämästä tietoa noin käyttäjän salasanat takaisin ja ulos, koska he todella menossa saada kaikki lähdekoodin, ei vain html, joka syntyy, kuten olisi asianlaita sanoa PHP. 

Miten siis sisällyttää JavaScript meidän html aloittaa? No, samanlainen CSS, todella, on eräänlainen miten sen teemme täällä. CSS meillä on tyylitunnisteet. Ja sisältä ne tyylitunnisteet, voimme määritellä CSS tyylisivu. Samoin JavaScript voimme avata koodit, toinen html tag emme puhua meidän html video, ja kirjoittaa Javascriptin näiden koodit. Myös kuitenkin, kuten CSS, me voisi yhdistää ulkopuolella CSS-tiedostoja ja vetää heidät meidän ohjelma, joka tavalla. CSS voimme myös, anteeksi, JavaScript voimme myös määrittää lähde ominaisuus komentosarjatunnus yhdistää JavaScript erikseen, joten et täytyy kirjoittaa se välillä koodit, me voidaan linkittää sen avulla että komentosarjatunnus samoin. Ja aivan kuten tapauksessa CSS jossa suosittelemme, että se oli luultavasti oman edun kirjoittaa CSS erilliseen tiedostoon, jos sinun täytyy muuttaa sitä, Samoin me suosittelemme että kirjoitat Javascriptin erillisinä tiedostoina ja käyttää koodit lähde Yhdistän sitoa JavaScript omaan html, web-sivulla. 

Joten JavaScript muuttujia, käymme alkaa puhua syntaksin täällä. Ja käymme läpi tällaista nopeasti, koska olemme tehneet tämän PHP, joten tämä kaikkien pitäisi olla tuttuja. Joten muuttujat JavaScript ovat hyvin samanlainen kuin PHP muuttujia. Ei ole tyyppi määrittelyksi, ja kun esitellä muuttuja, voit etuliite sen var avainsanan. PHP tekisimme jotain näin, dollarin merkki X. Näin saimme ilmoitettu muuttuja, mutta ei, meidän ei mainita tyyppi muuttujan lainkaan. Haluamme sanoa jotain dollarin merkki X vastaa 44 PHP. Jos teemme Sama JavaScript, sanoisimme var X vastaa 44. Joten var on tavallaan meidän tapa ottaa käyttöön muuttuvan. Se ehkä hieman intuitiivinen kuin vain dollarin merkki muuttuja. 

Jälleen, koska ei ole mitään tietotyypit, voisimme tehdä tämän tahansa tietotyyppi, jouset, mitään muuta olisivat kaikki var. Conditionals, kaikki meidän vanhat ystävät C ja PHP ovat edelleen käytettävissä, joten meillä on jos, if, muu, kytkin ja kysymys merkki paksusuolen. Kytkin jäljellä yhtä joustava kuin se oli PHP, mutta kaikki nämä olet tuntee nyt. Ja samoin silmukat ovat vanha suosikkeja samalla, tehdä, kun, ja edelleen käytettävissämme. Joten jo tiedämme paljon perus JavaScript tavallaan perustekijöiden vain sen vuoksi ottaa melko vähän tiedon nyt noin C ja PHP. 

Entä toiminnot JavaScript? No, samanlainen PHP jokainen toiminto on otettu käyttöön toiminto avainsanan. Sanot toiminto, ja sitten alkaa määritellä toiminnon. Mikä on hieman erilainen noin JavaScript, vaikka on kyky on mitä kutsutaan anonyymi toiminto. Joten voit määrittää funktiot jotka eivät ole nimeä. Tämä on jotain me todellakaan ole ennen nähneet. Me todella käyttää käsitettä nimetön funktio vähän myöhemmin tässä videota, koska se tulee tehdä vähän enemmän järkeä yhteydessä kun näemme sen erityisen tilanteen että olen muotoillut täällä. Mutta haluan vain katsomaan mitä yksinkertainen JavaScript toiminto voisi näyttää. 

Joten olen mennyt eteenpäin ja avannut minun CS50 IDE ja olen jo ajaa Apache aloittaa minun palvelin käynnissä. Ja minulla on tämän tiedoston avata kutsutaan home.html. Ja minä zoomata vähän täällä. Ja pohjimmiltaan, voit nähdä Home.html on vain joukko painikkeita. Ja minä väittäen yläreunassa täällä että tämä on JavaScript osio materiaaleja. Joten siellä on joukko painikkeita täällä, mutta mitä nämä painikkeet itse tehdä? 

No, me pään yli minun IED, ja olen home.html Avataan tästä. Aivan alussa, tässä missä olen yhdistää kaikissa minun JavaScript lähdetiedostot. Oikea? Olen siis anonymous.js, clock.js, Käytän lähdemäärite on komentosarjatunnus linkittää tiedostoon. Joten en ole kirjoittanut JavaScript suoraan tähän tiedostoon, mutta olen vetänyt kaikki JavaScript Olen kirjoittanut erikseen. Ja jos me selaa täällä, tämä olisi kaikki näyttävät hieman perehtynyt kanssa hieman uusia syntaksin. Meillä on täällä ylätunnisteeseen toiminnot ja sitten -painiketta. Minulla on tulo, joka on eräänlainen painiketta, ja ilmeisesti kun klikkaa sitä, Aion soittaa joitakin toimiakseen hälytys päivämäärä. Ja näin voimme tavallaan sekoittaa hieman JavaScriptin ja html. He todella pelata aika mukavasti yhteen, ja niin ilmeisesti kun Olen klikkaa tätä painiketta, aion soittaa jonkin toiminnon hälytys päivämäärä. Ja samoin olen määritellyt käyttäytymistä kaikkien muiden painikkeita, ovat että home.html sivulla, joka me palaavat sen aikana tämän videon. Mutta mennään takaisin ylös täällä ja katsomaan klo clock.js, joka on JavaScript-tiedoston, että olen kirjoitti, että on tämä ensimmäinen toiminto aiomme katsomaan. Kuten näette, aloitan JavaScriptin toimi avainsanan toiminto, ja olen antanut tämä nimi, sitä kutsutaan hälytys päivämäärä. Sisältä siellä, olen ilmeisesti luoda uusi paikallinen muuttuja nimeltä nykyinen päivämäärä. Ja aion antaa vastaa uuden päivämäärän. Ja voisimme päästä paljon täsmennä, mitä päivämäärä on, ja todella JavaScript on niin iso, että emme voi mahdollisesti kattavat kaikki yhden videon. Mutta riittää sanoa, tämä on menossa palata minulle datatieto kiteyttää nykyisen päivämäärän ja kellonajan. Olen tallentamiseksi, että muuttuja että olen ilmeisesti menossa varoittamaan nykyisen päivämäärän. 

No, mitä hälytys nykyinen päivämäärä näyttää? Katsotaanpa katsomaan itse tiedosto takaisin yli selainikkunassa. Joten jälleen, tämä on painike, joka I ovat sidottu, tämä nimeltään toiminto. Ja minä klikkaa sitä siellä ja katso mitä se teki, se hälytti. Se piipahti tällainen laatikko kertoo minulle, että nykyinen aika on ilmeisesti se marraskuussa 4: 10:43:43 aamulla. Ja jos minä klikkaa sitä uudelleen, nyt se on muutaman sekunnin kuluttua, eikö? Niin, että kaikki tämä toiminto tekee. Kun napsautan tätä painiketta, se ponnahtaa varoitusviesti minulle. Joten ei todellakaan ole liian paljon toimintoja se on erilainen kuin PHP, vain vähän uusia syntaksin mukana työskentelee JavaScript. 

Taulukot JavaScript ovat melko yksinkertainen. Julistaa array, käytät hakasulkeissa syntaksin että olemme tuttuja PHP. Ja samanlainen PHP, me voi myös sekoittaa tietotyyppejä. Joten tämä array, sekä näistä paneelit olisi olla täysin oikeutettu JavaScript. Yksi siinä kaikki kokonaislukuja, ja joka on sekaisin erilaiset tiedot. 

Mikä on jotain hyvin erilaista JavaScript, vaikka? Se käsite objektin. Joten ehkä olet kuullut olio-ohjelmoinnin. Emme tee paljon se CS50, mutta teemme hieman se tässä yhteydessä JavaScript. Nyt JavaScript on kyky käyttäytyä kuin olio-ohjelmoinnin kieli, mutta se ei ole itsessään yksinomaan olio ohjelmointikieli. Ja tämä taas tulee takaisin miksi sanoin, se voi olla erittäin haastavaa oppia JavaScriptiä ensimmäinen Programming kieli, koska se ei ole todella sopii erityisesti paradigma. 

C Toisaalta on toiminnallinen ohjelmointikieli. Jos haluamme, toimintoja tavallaan iso pomo mies, eikö? He sanella mitä tapahtuu kaiken muun. Haluamme muuttaa muuttujia, kutsumme toimintoja. Teemme asioita toimintoja. Objects Sen sijaan olio, esineet tavallaan tullut tähti ja toiminnot tullut eräänlainen toissijainen. Mutta mikä on esine, mitä on tämä käsite esineen? No, jos se auttaa, ajatella siitä ensin järjestä samankaltaisten C rakenne tai struct että olemme oppineet ennen. C, rakenne sisältää monilla aloilla, ja ehkä me nyt voi alkaa kutsuvat näitä aloja ominaisuuksia. Mutta ominaisuudet koskaan seisomaan omilla, eikö? Jos määrittelen rakenne auto näin kaksi seuraavaa kenttiä tai ominaisuuksia, yksi kokonaisluku vuodelle auton ja toinen 10 merkki merkkijono mallin auton, Voin sanoa jotain tällaista, Voin julistaa uusi muuttuja Tyypin struct auton Herbie. Ja sitten voin sanoa jotain kuten herbie.year vastaa 1963, ja herbie.model vastaa Beetle. Se on ok. Käytän kentät yhteydessä rakenteen, mutta en voisi koskaan vain sanoa jotain tällaista. Oikea? En voi käyttää kentän nimi riippumaton rakenne. Se on eräänlainen perustavanlaatuinen asia. 

Joten kentät ovat olennaista C rakenteita ovat hyvin samanlaisia ​​ominaisuuksia ovat olennaista JavaScript esineitä. Mutta mitä tekee niistä erityisen mielenkiintoinen on, että esineet voivat myös olla mitä kutsutaan menetelmiä, jotka ovat todella vain hieno sana toimintoja ovat ominaisia ​​esine samoin. Joten se on toiminto, joka voi olla vain kutsutaan yhteydessä esineen. Vain esine, joka on määritellyt Tämän toiminnon sisällä sen, jos ajattelee struct, toiminto määritellään sisälle joissa määritellään aaltosulkeita rakenteen. Joten se vain tarkoittaa jotain rakenteeseen. Ja se on sellainen mitä teemme täällä ja -tavat. Se on pohjimmiltaan kuin olisimme määritellään toiminto vain on järkevää päälle erityisesti objekti, ja niin me soittaa, että menetelmä esineen. Emmekä voi koskaan kutsua että toiminnallisesti itsenäinen esine, aivan kuten emme voi sanoa vuoden tai mallin riippumaton struct C. 

Niin Functional Programming ajattelutavat näyttää suunnilleen tältä. Toiminto ja sitten kun ohitat vuonna objektin parametri. Vuonna olio-ohjelmoinnin kielet, tällainen saa selattava, ja me ajatella sitä näin, object.function. Joten se tavallaan että piste operaattori taas mikä että se on jonkinlainen omaisuuden tai ominaisuus esine itse. Mutta tämä on mitä esine ohjelmointikieli voisi tehdä, jotta toiminto soittaa menetelmä, jälleen, joka on vain erityinen sana toiminto joka on ominaista objekti. Tämä on mitä se syntaksi voisi näyttää. Ja niin me alkaa nähdä joitakin Tässä yhteydessä JavaScript. 

Voit myös ajatella esine tavallaan kuin assosiatiivisia array, joka olemme tuttuja PHP. Muista assosiatiivisen taulukon avulla meillä keskeinen arvo pareja, sen sijaan ottaa indeksit 0, yksi, kaksi, kolme, ja niin edelleen kuin olemme tottuneet C: ltä taulukot. Assosiatiiviset taulukot voi kartta sanoja, kuten PHP video, puhuimme täytettä pizzat. Ja niin meillä oli array nimeltään pizzat, ja me oli juusto oli keskeinen ja $ 8.99 oli arvoa, ja sitten pepperoni oli keskeinen, $ 9.99 oli arvo, ja niin edelleen. Ja jotta voimme myös ajatella esine tavallaan samanlainen assosiatiivinen array. Ja niin tämä syntaksin tässä loisi uuden objektin nimeltään Herbie kaksi ominaisuudet sen sisälle. Vuosi, johon on liitetty arvo 1963, ja malli, johon liitetään merkkijono Beetle. 

Ja huomaa täällä, että olen käyttäen puolilainausmerkkejä JavaScript. Voit käyttää yhden tai kahden hengen lainausmerkkejä kun puhut jouset. Se on vain perinteisesti Siinä tapauksessa, että useimmat kertaa kun olet kirjoittamassa JavaScript, käytät vain puolilainausmerkkejä. Mutta voisin käyttää lainausmerkkejä täällä, ja että olisi täysin kunnossa samoin. 

Joten muistakaa kuinka PHP meillä oli tätä käsitystä of jokaisen silmukan, jonka avulla voisimme iteroida hoitaakseen kaikki avainarvon paria assosiatiivinen array, koska me ei ole tätä kykyä kerrata kautta 0, yksi, kaksi, kolme, neljä, ja niin edelleen? JavaScript on jotain hyvin samanlaista, mutta se ei ole kutsuttu kunkin silmukan, sitä kutsutaan varten silmukoita. Jos siis sanoi minulle kuin tämä, sillä var avain esine, se on tavallaan samanlainen sanomalla kullekin jotain niin jotain. Mutta kaikki Teen täällä on iteroimalla läpi kaikki avaimet minun esine. Ja sisällä kihara olkaimet siellä, olisin käyttää esine hakasulkeita avain viitata arvoa kyseisessä avainpaikkojen. 

Vaihtoehtoisesti, siellä jopa toinen lähestymistapa. Jos vain vain välitä arvot, voin sanoa avain esine, ja vain käyttää avainta. Joten var avain esine, minulla on käyttää olio hakasulkeita avain silmukan sisällä. Var avain esine, voin vain käyttää avain silmukan sisällä, koska olen vain erikseen puhumme arvoista siellä. 

Joten ehkä ottaa katso ero vain nopeasti näyttää ero neljän vuonna ja on hyvin erityinen array, joka meillä on täällä, viikko array. Joten minun täytyy löytää new Array että olen täynnä seitsemän jouset, Maanantai, tiistai, keskiviikko, Torstai, perjantai, lauantai, sunnuntai. Ja haluan nyt kerrata tällä array, tulostamalla tiettyjä tietoja. Jos käytän varten silmukka tulostaa tietoa, mitä luulet aion saada? No, katsotaanpa katsomaan. Ja ennen kuin hypätä minun selainikkunaan, juuri tietää, että console.log on tavallaan yksi tapa tehdä tulosta F JavaScript. Mutta mikä on konsoli? No, mitä aiomme mennä katsomaan juuri nyt. 

OK, joten olemme takaisin täällä minun selainikkunassa, ja aion avata minun kehitystyökalut. Jälleen olen vain kävi F12 avata kehitystyökalut. Ja huomaa, että täällä top Olen valinnut konsoli. Joten tämä on käsite kehittäjä konsolin, ja se antaa meille mahdollisuuden tulostaa tietoa ulos, eräänlainen kuten terminaali, mutta kuten näet vähän myöhemmin, Voimme myös kirjoittaa tietoja vuorovaikutuksessa nettisivuillamme. Aion zoomata vähän täällä, ja aion nyt napsauttamalla varten testissä. Ja neljä test-- En aio näyttää koodi juuri nyt, mutta saat sen jos ladata lähdekoodin, että on liitetty tähän video-- on juuri sitä varten silmukka että näimme vain toinen sitten diassa. 

Joten aion klikkaa että painiketta, ja tänne, tässä mitä on tulostettu ulos konsoli, 0, yksi, kaksi, kolme, neljä, viisi, kuusi. En tulostaa tiedot sisällä niitä array paikoissa, koska käytin varten silmukka. Ja kehossa silmukan, minä vain tulostaa näppäin ei vastusta avain. Mutta jos nyt tyhjentää konsoli, ja minä vaihtaa varten testin, ja neljä testi Sanon käytän silmukan sijaan ja tulostaa avain, jos napsautan että, nyt Saan todellinen Sisällä minun esine tai minun array tässä tapauksessa. Oma valikoima arkisin. Olen tulostaa Maanantai, Tiistai, keskiviikko. Niin, että eroa varten silmukka, joka tulostaa vain näppäimiä, jos käytät vain avain sisällä rungon silmukan, ja varten loop, joka tulostaa ulos arvot, jos käytät vain avain kehossa silmukan. 

Okei, miten me nyt alkaa liität jouset ja ehkä sekoittaa joitakin muuttujia interpoloinnissa kuten pystyimme tekemään PHP? No, olemme melko tuttuja tämän PHP. Näin voisimme tehdä sen käyttämällä piste operaattori ketjuttaa merkkijonoja. JavaScript, vaikka, me todella käyttää jotain nimeltään plus operaattori, joka on ehkä jopa hieman enemmän intuitiivinen, eikö? Lisäämme joukko merkkijonojen yhdessä. Joten pää takaisin yli ja nähdä, mitä tämä tulostaa jos yritämme tulostaa kaikki tiedot viikolla jono. Selvä, joten alle tässä alle merkkijono ketjutus, Minulla on kaksi vaihtoehtoa, merkkijono rakennus V1 ja sitten jono rakennus V2. Ja näemme, miksi me tarvitsevat V2 toinen. Mutta aion klikkaa merkkijono rakennus V1, joka on koodi olimme vain vilkaisemalla, console.log kaikkien ansioita. Katsotaanpa, jos tämä tulosteita mitä odotamme. 

Maanantai on päivä 01 viikon, Tiistai on päivä numero 11 viikon. No, mitä yritin tehdä siellä oli saada se tulostaa Maanantai on päivä numero yksi, tiistai on päivä numero kaksi. Mutta näyttää siltä kuin olisin aina tulostamalla yksi. No, miksi? No, se kääntyy pois, katsomaan uudelleen tässä pieni koodinpätkä täällä. Huomaa, että käytämme plus operaattori kahdessa eri yhteydessä. 

Ja niin täällä on, jos ehkä asiat että olemme tavallaan sanoneet, Voi, se on niin suuri. Emme käsitellä tietotyyppejä enää. Mutta tässä tarina siitä että menetämme tietotyypit voi todella olla hieman ongelma meille. Nyt plus operaattori käytetään liität jouset ja lisätä numeroita yhdessä, JavaScript on tehdä sen paras arvaus siitä, mitä haluan sen tehdä minulle. Ja tässä tapauksessa, se arvata väärin. Se vain ketjutettuja päivä, joka olisi 0, yksi, kaksi, kolme, neljä, viisi tai kuusi, ja sitten se vain ketjutetaan että ja sitten ketjutettujen yksi. Se ei itse lisätä niitä yhteen. Ja niin kielillä, PHP ja JavaScript, että abstracts pois tämä käsite tyyppejä, sinun ei tarvitse käsitellä sitä enää. He eivät vielä tyyppejä konepellin alle. Ja voimme tilanteissa näin, hyödyntää tämä seikka sanomalla jotain kuten ehkä tämä, joka kertoo JavaScript, jonka tavalla, käsittelemään tätä kokonaisluku, eivät käsittele sitä merkkijono, jopa vaikka olemme sekoittamista jouset ja kokonaislukuja täällä. 

Se on vain yksi niistä asioista että se tuntuu niin hyvältä yhteydessä että meillä ei tarvitse käsitellä tyypit enää, mutta joskus ll törmätä tilanteeseen juuri näin, jos se, että sinulla ei ole valvoa tyyppisiä voi epäonnistua sinua jos et ole varovainen. Joten jos me pop takaisin yli IDE, olen menossa siivota minun konsoli uudelleen, ja aion klikkaa merkkijono rakennus versio kaksi, joka on, jos käytän Parse int toiminto. Nyt se tulostamalla tiedot, jotka Odotan. Maanantain päivä ykkönen, sunnuntai on päivä numero kaksi, ja niin edelleen. 

Joten puhua toimintoja uudelleen. Lupasin me puhumme anonyymi toiminnot, ja nyt yhteydessä kyseisen on vihdoin saapunut. Joten ennen kuin teemme niin, Puhutaanpa uudelleen noin paneelit vain toisen. Joten paneelit ovat erityisen kyseessä esine. Itse kaiken JavaScript on todella esine. Joten toiminnot ovat erikoistapaus objektin, kokonaisluvut ovat erityinen kyseessä esine, mutta paneelit erityisesti on useita menetelmiä. Muista koska he esineitä, niillä voi olla ominaisuuksia ja menetelmiä. Niillä on useita menetelmiä, jotka voidaan soveltaa näitä esineitä. On kutsuttua menetelmää koko, array.size, joka palaa teitä ehkä odottaa elementtien määrä matriisisi. array.pop, tavallaan kuin käsityksemme popping pois pino, jos muistatte meidän pinot video, poistaa viimeinen elementti jono. Array.push lisätään uusi elementti loppuun jono. array.shift on eräänlainen kuten DQ, se jatkokset ulos ensimmäinen osa array. 

Mutta on myös toinen erityinen menetelmä array nimeltä kartalla. Ja tämä on tavallaan mielenkiintoinen käsite. Joten mikä on ajatus kartan? Sinun todella nähdä tämän useilla muilla kielillä, ja emme puhu eräänlainen kartanpiirtäjille kartta täällä, puhumme kartoitus toiminto. Yhteydessä olemme puhumme täällä, kartta on erityinen toimenpide me voivat suorittaa array soveltaa tietyn toiminnon jokaiseen osa tätä array. ja niin sanoisimme vuonna Tällöin ehkä array.map, ja sen sisällä, olemme ohimennen osaksi kartta on toiminto, joka haluamme sovellettava jokaiseen elementtiin. Joten se on eräänlainen analoginen käyttäen silmukka iteroida yli jokainen elementti ja soveltaa tiettyä toimivat jokainen elementti, vain JavaScript on tämä rakennettu käsite kartoitus, joita voidaan soveltaa. Ja tämä on suuri yhteydessä puhua nimettömänä toiminto. 

Joten sanokaamme meillä tämä joukko kokonaislukuja. Sitä kutsutaan nums, ja se sai viisi mitä siinä on yksi, kaksi, kolme, neljä, viisi. Nyt haluan kartoittaa joitakin toimintoa tähän array. Haluan olla funktio sovellettava jokaiseen alkiota. No, sanotaan, että mitä haluan tehdä, on vain kaksinkertainen kaikki elementit. Mitä voisin tehdä on vain käyttää silmukka var minä ollessa 0, I on vähemmän kuin tai yhtä suuri kuin 4, minä plus, plus, ja sitten kaksinkertaistuu jokaisen numeron. Mutta voin myös tehdä jotain tällaista. Voin sanoa nums oli aiemmin yksi kaksi kolme neljä viisi, nyt, vaikka haluan sinun sovelletaan kartoitus päälle tämän taulukon jossa haluaisin teidän kaksinkertaistaa jokainen numero. Ja juuri mitä täällä tapahtuu. Mutta huomaa, mitä olen ohimennen niin väite karttaan. Tämä on nimetön funktio. Ja huomaa En ole antanut Tämän toiminnon nimi, Olen vain antanut sille parametriluettelo. Ja niin tämä on esimerkki nimetön funktio. 

Olemme yleensä koskaan kutsua tätä funktio ulkopuolella yhteydessä kartalla. Olemme se määritellään parametri kartoittaa, ja niin emme oikeastaan täytyy olla nimi, jos Ainoa asia, joka välittää on kartta ja se on määritelty oikeus siellä sisällä kartan. Ja niin tämä on anonyymi funktio. Emme ole pystyneet tehdä tätä aiemmin. Kartta jokin funktio, että hyväksyy yksi parametri, num, ja mitä tämä toiminto tekee on palaa num kertaa 2. Ja niin sen jälkeen tämä kartoitus on sovellettu, tämä on nyt mitä nums näyttää kuten, kaksi, neljä, kuusi, kahdeksan, 10. Ja me pop yli minun selainikkunan ja vain katsomaan tämä todella nopeasti samoin. 

Joten minulla on toinen painike täällä kotini sivun nimeltä kaksinkertainen. Ja kun klikkaa kaksinkertainen, ja se kertoo minua ennen kuin se oli yksi, kaksi, kolme, neljä, viisi jälkeen kaksi, neljä, kuusi, kahdeksan, 10. Ja vaikka minä menen takaisin ja valitse kaksinkertainen jälleen, kaksi, neljä, kuusi, kahdeksan, 10. Ja sitten sen jälkeen, neljä, kahdeksan, 12, 16, ja sitten 20. Ja mitä olen tehnyt tämän toiminnon? No, jos me vain pop yli IDE, ja Vedän minun nimetön funktio, tässä rivillä seitsemän kautta 13, olen tekee vähän fancy työtä täällä, mutta olen vain tulostamalla mitä tällä hetkellä jono. Sitten linja 16, 17, ja 18, siellä on minun kartalla. Tämä on, jos olen soveltaa tätä kaksinkertaistamista toiminto jokaiseen elementtiin. Ja sitten hieman alempana, Olen vain tehdä sama asia Tein ennen, paitsi nyt olen tulostamalla sisältö array jälkeenpäin. Mutta kaikki olen tehnyt tässä vain käyttää anonyymi toiminto kartoittaa poikki koko ryhmän. 

Joten yksi iso aihe puhua vuonna JavaScript on käsite tapahtuman. Tapahtuma on jotain, joka vain sattuu kun käyttäjä on vuorovaikutuksessa web sivu, joten ehkä he osoita jotain, tai ehkä sivu on ladattu, tai ehkä he muuttivat niiden hiiri jotain, tai he kirjoittanut jotain syöttökentässä. Kaikki nämä asiat ovat tapahtumia että tapahtuvat nettisivuillamme. Ja JavaScript on kyky tukea jotain kutsutaan tapahtuma käsittelijä, joka on soittopyynnön toiminto, joka vastaa html tapahtumaan. Ja mikä soittopyynnön toiminto? No, se on yleensä vain yksi nimetä nimettömän funktion. Se on toiminto, vastaa tapahtuman. Ja tämä on silloin tulemme Ajatus sitova tiettyjen toimintojen tiettyyn html ominaisuus. Useimmat HTML-elementit ovat tuki ominaisuus että emme puhu html video jotain click tai Hover tai kuorman, kaikki nämä tapahtumat että voit kirjoittaa toimintoja jotka käsittelevät näiden tapahtumien kun kyseiset tapahtumat esiintyy Web-sivulla. 

Ja niin ehkä html näyttää suunnilleen tältä. Ja minulla on kaksi painiketta täällä, painike yksi ja painiketta kaksi, ja täällä minulla on tällä hetkellä määritelty mitään, mutta tämä on, jos määrite click on ilmeisesti osa minun html tag. Joten ilmeisesti kun määritellä mitä meneillään sisällä että ominaisuus, se tulee olemaan noin JavaScript toiminto, joka vastaa tapahtuman oletettavasti klikkaamalla painike yksi tai -painiketta kaksi. 

Mikä on tavallaan viileä tästä on meidän voi kirjoittaa yleinen tapahtumankäsittelijänä. Ja tämä tapahtuma Handler tulee luoda tapahtuman objekti. Ja tapahtuma objekti kertoo meille joka on kaksi painiketta on napsautettu. Nyt miten se toimii? No, se saattaa näyttää jotain tällaista. Joten me ensin määritellä meidän painikkeet on vastaus soittopyyntö toiminto, jota kutsutaan kun painiketta napsautetaan, soitamme tapahtuman hälytys nimi. Ja ilmoituksen molemmissa tapauksissa olemme kulkee tähän tapahtumaan parametrin. Joten me kutsumme tätä toimintoa tai kun tämä toiminto laukaisee tapahtuma tapahtuu, se tulee luoda tämän tapahtuman objekti ja siirtää sen parametrin varoittaa nimi. Ja että tapahtuma esine on menossa sisältävät tietoja josta napsautettiin. Ja miten se tehdä? No, se saattaa näyttää jotain tällaista. Joten nyt minun erillisessä JavaScript-tiedosto, voisin on löydettävä tähän toiminto hälytys nimi, joka jälleen myöntää, että tapahtuma parametri. Ja sitten tässä missä olen havaitsemiseksi mitä painiketta laukaisi, var laukaista vastaa tapahtuma dot lähde-elementin. Mikä oli lähde joka loi tämä tapahtuma esine, joka hyväksyttiin? Oliko se painike yksi vai oliko painiketta kaksi? 

Ja niin tässä kaikki mulla on tulostamalla trigger.innerhtml. No, tässä tapauksessa, tässä yhteydessä, trigger.innerhtml on juuri sitä mitä on kirjoitettu painiketta. Se vain niin, jos me hypätä takaisin toisen, joka olla mitä on näiden -painiketta tageja. Se on painike yksi tai -painiketta kaksi. Ja lähdetään katsomaan miten tämä tapahtumakäsittely olisi katso jos olisimme sen käynnissä käytännössä. 

Joten ensinnäkin, olet avannut events.js, joka on JavaScript-tiedoston, jossa Olen määritellyt tätä toimintoa. Ja kuten näette, se on aika paljon mitä me vain näki dia toinen sitten. Ja aion mennä yli etusivu olemme käyttäneet. Ja minulla on täällä -painiketta yksi ja -painiketta kaksi. Ja minä napsauta painiketta yksi. Napsautit painiketta yksi, jos voi nähdä täällä hälytys. OK. Klikkaa painiketta kaksi, te napsautti painiketta kaksi. 

Joten molemmat painikkeet ovat Sama toiminto soittaa, eikö? He molemmat olivat hälytys nimi tapahtuma, mutta tämä tapahtuma esine että saa luotu kun klikkaa se kertoo meille joka napsautettiin. Meillä ei tarvitse kirjoittaa kaksi erillistä toimintoja tai käsitellä ottaa välittää lisätietoja. Olemme vain luottaa mitä JavaScript tehdä meille, mikä on luoda että eräänlainen tapahtuma esine meidän puolestamme. Siellä on paljon enemmän JavaScript kuin mitä olemme kuulu tämän videon, mutta, joilla on nämä perusoikeuksien pitäisi saada heti melko pitkä tapoja oppimisen kaiken sinun täytyy tietää tästä mielenkiintoinen kieli. Olen Doug Lloyd. Tämä on CS50.