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