>> [Muusika mängib]
>> DOUG LLOYD: Nii et nüüd oleme vanad plusse on veebi programmeerimine, eks?
Ja oleme kaetud mitme Keelte üksikute videos.
Ja nüüd teeme veel ühe, JavaScript.
>> Esimene hea uudis, JavaScript on kaasaegne programmeerimine
keelt palju nagu PHP, kelle süntaksi tuletatakse C,
nii et see on hea koht alustamiseks.
See on umbes sama vana kui PHP, samuti, olles olnud juba umbes 20 aastat.
See leiutati umbes Samal ajal kui PHP.
Ja JavaScript on tegelikult päris põhiline kasutaja kogemus
veebis.
Tegelikult on kolmes keeles, et ma
ütleksin omamoodi moodustavad kasutaja kogemus suheldes
kodulehega, html, CSS ja JavaScript.
Ja nii nüüd Räägime natuke JavaScript.
>> Halb uudis, aga JavaScript on et see seab palju reegleid ise,
ja siis murrab neid.
Ja JavaScript olla tegelikult Selline keeruline õppida,
sest see on erinevalt C ja PHP, mis on väga struktureeritud
ja on väga jäigad reeglid kuidas asjad võivad töötada.
JavaScript peab sellist on saanud nii paindlik
et äkki asjad ei kavatse töötada, kuidas me ootame neilt,
ja võibolla me tõesti ei saa õppida Meie esimene programmeerimiskeel
kui JavaScript.
Ehk sest see ei seadnud mingeid reegleid,
ja see ei ole tegelikult jõustada hea kodeerimine harjumusi.
Aga nüüd oleme loodetavasti arenenud häid koodis harjumuste,
ja nii saame alustada Tuhoamisretki arvesse JavaScript natuke.
>> Selleks, et kirjutada JavaScript, sarnane avamine kuni C faili dot C pikendamine
või PHP faili dot PHP laiendus, kõik me peame tegema, on avada faili
dot js faili laiend.
Me ei pea olema mingeid erilisi piirajaid nagu me tegime PHP.
Sedasorti nurk sulg küsimärk PHP
et me oleme harjunud sellest, kuidas Me ütleme oma brauseri et mis meil on
JavaScript on lisades see html tag,
ja me näeme natuke kuidas teha vaid hetkeks.
>> Teine asi, mis muudab JavaScript erinevad,
aga see, et see töötab kliendi poolel.
Nii meenutavad PHP, et me võiks kunagi näha
PHP, et toonitas kodulehel.
Kui me kunagi vaadanud lehekülje lähtekoodi, oleksime ainult
vaata html mis oli loodud, et PHP.
Aga JavaScript töötab kliendi poolel.
Teie JavaScript jookseb arvuti.
Ja sellepärast sa saad teha Asjad lisada blokaatorid.
Õigus?
Kuulutus blokeerimine tehakse tavaliselt tappes kõik JavaScript
mis töötab konkreetse veebilehel.
Ja kuna see oleks käivitada oma masinale kliendi poolel,
sa võid lõpetada JavaScript töötab täiesti.
See tähendab ka seda, et kui te kasutate veebileht, mis sisaldab JavaScript,
sa pead saatma JavaScript allikas kood osana oma http vastus
kliendile, kui nad seda soovivad.
Ja nii sa ei pruugi soovite kasutada JavaScript
teha tõesti tundlikud asjad nagu möödaminnes info
umbes kasutajate paroolid ja tagasi edasi, sest nad on tegelikult
kavatse saada kõik lähtekoodi, mitte ainult html, mis on loodud,
nagu oleks tegu näiteks PHP.
>> Niisiis, kuidas me hulka JavaScript Meie html alustada?
Noh, sarnane CSS, tegelikult, on omamoodi kuidas me seda teeme siin.
CSS meil stiilis sildid.
Ja sees need stiilis sildid, saame määrata CSS stiili lehed.
Sarnaselt JavaScript saame avada skripti silte
teise html tag me ei räägime meie html video,
ja kirjutada JavaScript vahel script sildid.
Lisaks sellele, nagu CSS, me võiks lingi väljaspool CSS faile
ja tõmmake need meie programmi nii.
CSS saame ka, vabandage, JavaScript
saame määrata ka allikas atribuut script tag
siduda JavaScript eraldi, nii et teil ei ole
pea kirjutama seda vahel script sildid, me
võib seostada seda kasutades et script tag samuti.
Ja just nagu tegu CSS kus soovitame, et see oli ilmselt
oma huvides kirjutada Sinu CSS eraldi faili puhul
sa pead seda muuta, Samamoodi me soovitame
et sa kirjutad oma JavaScript eraldi failides
ja kasutada skripti sildid allikas atribuut siduda Teie JavaScript
oma html, oma veebilehel.
>> Nii JavaScript muutujaid, siis me hakatakse rääkima süntaks siin.
Ja me läheme läbi Sellise kiiresti,
sest me oleme seda teinud PHP, nii see peaks kõik olema üsna tuttav.
Nii muutujad JavaScript on väga sarnane PHP muutujad.
Pole tüübist specifier ja kui kasutusele muutuja
sa eesliide ta koos var märksõna.
PHP me teeks midagi niimoodi, dollari märk x.
See, kuidas me märgitud Muutuva, kuid ei, me
ei mainita tüüp muutuja üldse.
Me ütleks midagi dollari märk x võrdub 44 PHP.
Kui me teeme Sama asi JavaScript,
me ütleks var x võrdub 44.
Nii var on omamoodi meie tee kehtestada muutuv.
See on võib-olla natuke rohkem intuitiivne kui lihtsalt dollari märk muutuja.
>> Jällegi, kuna seal ei ole andmetüübid, me võiks seda teha
mis tahes andmete tüübi, stringid, midagi oleksime kõik var.
Conditionals, kõik meie vanad sõbrad on C ja PHP
on veel saadaval, nii et meil on, kui muud kui mujal, lüliti ja küsimus
märgi jämesooles.
Switch jäädes paindlikuks, nagu see oli PHP, kuid kõik need oled
tuttav nüüd.
Ja samamoodi silmad on Vana lemmikud ajal,
teha samal ajal, ja veel meile kättesaadav.
Nii juba teame palju põhilised JavaScript omamoodi põhialused
lihtsalt alusel, millel on üsna vähe teadmiste nüüd umbes C ja PHP.
>> Aga funktsioone JavaScript?
Noh, sarnane PHP iga funktsioon on kasutusele funktsioon märksõna.
Sa ütled funktsioon, ja siis hakata määratlema oma funktsiooni.
Mis on natuke erinev umbes JavaScript,
kuigi on võime on mida nimetatakse anonüümne funktsioon.
Nii saab määratleda funktsioonid mis ei ole veel nime.
See on midagi, mida me tõesti ei ole näinud.
Me tõesti kasutada mõistet anonüümse funktsiooni
veidi hiljem selle video, sest see saab
teha natuke rohkem mõistust kontekstis kui me näeme seda eriti olukorras
et ma olen meisterdatud siin.
Aga võtame lihtsalt pilk millise lihtne JavaScript
funktsiooni tunduda.
>> Nii et ma olen läinud edasi ja avas oma CS50 IDE
ja ma olen juba käivitada Apache alustada oma serveris.
Ja mul on selle faili open nimetatakse home.html.
Ja ma suumida natuke siin.
Ja põhimõtteliselt, näete Home.html on lihtsalt hunnik nuppe.
Ja ma väidan, ülaosas siin et see on JavaScript osa
materjale.
Nii et hunnik nuppe siin aga mida need nupud teevad?
>> Noh, me pea üle mu IED, ja ma olen home.html avada siin.
Alguses, siin, kus ma ühendab
kõik mu JavaScript allikas faile.
Õigus?
Nii et mul on anonymous.js, clock.js, Ma kasutan allikas atribuut
script tag siduda faili.
Nii et ma ei ole kirjutatud ühegi JavaScript otse seda pilti,
aga ma olen tõmmatakse kõik JavaScript olen kirjutanud eraldi.
Ja kui me keri siin, see peaks kõik näevad mõnevõrra tuttav
natuke uute süntaks.
Meil on siin header tag jaoks funktsioone ja seejärel nuppu.
Mul on sisend, mis on tüüpi nuppu, ja ilmselt kui ma vajutan seda,
Ma kutsun mõned toimida alert kuupäeva.
Ja see, kuidas me saame omamoodi sassi natuke JavaScript ja HTML.
Nad tegelikult mängida päris kenasti kokku, ja nii ilmselt, kui
Ma vajutan seda nuppu, et ma lähen helistada mõne funktsiooni alert kuupäeva.
Ja samamoodi on määratletud I käitumist Kõigi teiste nuppudega, et
on sel home.html lehel mis me hoiame tagasi
to käigus selle video.
Aga lähme tagasi üles siin ja tutvu
at clock.js, mis on JavaScript fail, mis ma
kirjutas, et on see esimene funktsioon me ei kavatse võtta pilk.
Nagu näete, ma hakkan minu JavaScript funktsiooni märksõna funktsiooni,
ja ma olen andnud selleks siis nimi, seda nimetatakse alert kuupäeva.
Toas on olemas, ma ilmselt luua uus kohalik muutuja nimega tänane kuupäev.
Ja ma lähen määrata võrdne uue kuupäeva.
Ja me võiksime sattuda palju üksikasjalikult, milline kuupäev on
ja tõesti JavaScript on nii suur, et me ei saa kuidagi
katta kõik ühte video.
Aga piisab, kui öelda, et see saab tagasi mulle andmebaasi objekt,
kapseloi praeguse kuupäeva ja kellaaja.
Ma salvestamiseks, et muutuja, mis ma olen ilmselt läheb hoiatada tänane kuupäev.
>> Noh, mis teeb hoiatuse Praeguse kuupäeva nägema?
Võtame pilk faili ise tagasi üle brauseriaknas.
Nii jälle, see on nupp, mis ma on seotud, seda nimetatakse funktsiooni.
Ja ma vajutan seda seal ja vaadake, mis ta tegi, ta hoiatas.
See hüppasid üles sellist kasti ütlen mulle, et praegune aeg on ilmselt
see on 4. november kell 10:43:43 hommikul.
Ja kui ma vajutan seda uuesti, nüüd see paar sekundit hiljem, eks?
Nii et kõik see funktsioon teeb.
Kui ma vajutan seda nuppu, et hüppab hoiatusteade mulle.
Nii et tegelikult ei ole liiga palju funktsioone
see erineb PHP, natuke uute süntaks
mis on koos töötavad JavaScript.
>> Massiivid JavaScript on üsna lihtne.
Tunnistada massiivi, mida kasutate nurksulgudes süntaks
et me oleme tuttavad PHP.
Ja sarnane PHP, me Samuti võib segada andmetüüpe.
Nii et see massiiv, nii Nende massiivid oleks
täiesti õigustatud JavaScript.
Üks, mis on kõik täisarvud, ja üks, mis segatakse kuni Eri andmetüüpide.
>> Mis on midagi väga erinevad JavaScript küll?
See mõiste objekti.
Nii et ehk olete kuulnud objektorienteeritud programmeerimine.
Me ei tee palju see CS50, aga teeme natuke seda
siin kontekstis JavaScript.
Nüüd JavaScript on võimeline käituvad nagu objektorienteeritud programmeerimine
keele, kuid see ei ole iseenesest ainult objektorienteeritud
programmeerimiskeelt.
Ja see tuleb jälle tagasi miks ma ütlesin, see
võib olla väga raske õppida JavaScript oma esimese programmeerimine
keele, sest see ei tõesti sobiks konkreetse paradigma.
>> C teisalt on funktsionaalne programmeerimiskeel.
Kui me tahame, funktsioonid omamoodi suur boss mees, eks?
Nad dikteerida, mida juhtub kõike muud.
Me tahame muuta muutujaid, Me nimetame funktsioone.
Me teeme asju funktsioone.
Objektid asemel, mõnes objektorienteeritud keel,
objekte omamoodi saada star ja funktsioonid muutunud omamoodi teisejärguline.
Aga mis on objekt, mida Arusaamine objekti?
Noh, kui see aitab, arvan umbes seda enne sorteeri
ja nagu C struktuuri või struct et me oleme õppinud varem.
In C, struktuur sisaldab mitmes valdkonnas,
ja äkki me nüüd võib hakata nimetame neid valdkondi omadused.
Kuid omadused kunagi seista oma, eks?
Kui ma määratleda struktuuri auto niimoodi kahest järgmisest
valdkonnas või omadusi, üks AN täisarv aasta auto
ja teine ​​10 tegelane string mudeli auto,
Ma ei saa öelda midagi sellist, Võin tunnistada uue muutuja
tüüpi struktuure auto Herbie.
Ja siis ma ei ütle midagi nagu herbie.year võrdub 1963,
ja herbie.model võrdub Beetle.
See on OK.
Ma kasutan väljad kontekstis struktuuri,
aga ma ei saa kunagi lihtsalt öelda midagi sellist.
Õigus?
Ma ei saa välja nime sõltumatu struktuuri.
See on omamoodi oluline asi.
>> Nii väljad on põhiline C struktuurid
on väga sarnased omadused olles põhiline JavaScript objekte.
Aga mida teeb neid Eriti huvitav
on see, et objektid võivad olla ka see, mida nimetatakse meetodeid, mis on tõesti
lihtsalt väljamõeldud sõna funktsioonid on omane objekt samuti.
Nii et see on funktsioon, mis saab olla ainult nimetatakse kontekstis objekti.
Ainult objekt, mis on määratletud Selle funktsiooni sees oma,
kui sa arvad struct, funktsioon
määratletakse sees need määratlevad looksulg struktuuri.
Nii et see tähendab ainult midagi struktuurile.
Ja see on omamoodi mida me teeme siin objektid ja meetodid.
See on põhimõtteliselt nagu me oleme määratleda funktsiooni
mõttekas ainult kohta konkreetse objekti, ja nii me
sea ​​seda meetodit objekti.
Ja me ei saa kunagi helistada, et töös sõltumatu objekti,
nagu me ei saa öelda, aasta või mudeli järgi sõltumatu struct in C.
>> Nii funktsionaalne programmeerimine paradigmad nägema midagi sellist.
Funktsioon ja siis, kui te kaotate objektis parameetrina.
Objektorienteeritud programmeerimine keeles, selline saab
keerata, ja me mõtleme seda niimoodi, object.function.
Nii see omamoodi et dot operaator jälle tähendab
et see on mingi omadus või atribuut objekt ise.
Aga see, mida objekt orienteeritud programmeerimiskeel
võiks teha, et funktsioon kutsuda meetod, jälle, mis
on lihtsalt eriline sõna funktsioon mis on omane objekt.
See on see, mida see süntaks tunduda.
Ja nii me hakkame nägema mõned Käesoleva kontekstis JavaScript.
>> Võite mõelda objekti omamoodi nagu assotsiatiivne massiiv,
mis me oleme tuttavad PHP.
Pea meeles, assotsiatiivne massiiv võimaldab meil põhiväärtus paari asemel
millel indeksid 0, üks, kaks, kolm, ja nii edasi, nagu oleme harjunud C
massiivid.
Associative massiivid saab map sõnad, näiteks PHP video,
me rääkisime toppings kohta pitsad.
Ja nii oli meil hulgaliselt nimetatakse pitsad, ja me
oli juust oli oluline ja $ 8,99 oli väärtus ja seejärel pepperoni oli oluline,
$ 9,99 oli väärtus, ja nii edasi.
Ja nii me ka mõelda umbes vastuväiteid mingi sarnane assotsiatiivne
massiivi.
Ja nii see süntaks siin looks uue objekti
nimetatakse Herbie kahe omadused sees on.
Aasta, mis on määratud väärtus 1963 ja mudel, millele on määratud stringi
Beetle.
>> Ja märkate siin, et ma kasutan ülakoma JavaScript.
Te võite kasutada ühte või jutumärkide kui sa räägid stringid.
See on lihtsalt tavapäraselt Juhul, kui enamik korda
kui olete kirjalikult JavaScript, sa lihtsalt kasutada ülakoma.
Aga ma võiks kasutada jutumärkides siin, ja et oleks täiesti trahvi ka.
>> Seega pidage meeles, kuidas PHP pidime seda mõistet
on iga silmus, mis võimaldaks meil itereerima üle kogu põhiväärtus
paari assotsiatiivne massiiv, sest me
ei ole seda võimet itereerima kaudu 0, üks, kaks, kolm, neli,
ja nii edasi?
JavaScript on midagi väga sarnast, Aga see ei ole nn iga loop,
seda nimetatakse nähtud silmad.
Nii et kui ma ütlesin, et mulle meeldib see, et var võti objekti,
see on omamoodi sarnane öeldes Iga midagi midagi.
Aga ma siin teen on iterating läbi kõik võtmed minu esemega.
Ja sees lokkis traksid olemas, oleksin
kasutada objekti nurksulgudes võti viidata väärtuse juures, et võti asukohta.
>> Teise seal isegi teistsugust lähenemist.
Kui ma ainult hoolid väärtused, võin öelda, et võti objekti,
ja lihtsalt kasutada võti sees.
Nii var võti objekti, mul on kasutada objekti nurksulgudes
võti sees silmus.
Juba var võti objekti, suudan lihtsalt kasutada võti sees silmus,
sest ma olen lihtsalt konkreetselt Rääkides väärtustest seal.
>> Nii saab ehk võtta vaadata vahe
lihtsalt kiiresti näitan sulle vahe nelja
in ning of väga spetsiifilise massiiv, mis meil siin on, nädal massiivi.
Nii et ma pean leidma uue massiivi et ma täis seitse stringid,
Esmaspäev, teisipäev, kolmapäev, Neljapäev, reede, laupäev, pühapäev.
Ja ma tahan nüüd itereerima läbi selle massiiv,
väljatrükk teatud informatsiooni.
Kui ma kasutan nähtud loop välja trükkida andmeid,
Mis sa arvad, et ma lähen?
Noh, võtame pilk.
Ja enne kui me üle hüpata minu brauseri aknas
lihtsalt tean, et console.log on omamoodi üks
viisiks prindi F JavaScript.
Aga milline on konsool?
Noh, see on see, mida me kavatseme minna, kui heita pilk kohe.
>> OK, nii et me oleme siia tagasi minu brauseri aknas
ja ma lähen avada up my arendaja tööriistad.
Jällegi, ma lihtsalt lööb F12 avada arendaja tööriistad.
Ja märkad, et siin on top olen valinud konsooli.
Nii et see on mõiste arendaja konsooli,
ja see annab meile võimaluse prindi info välja,
omamoodi nagu terminal, kuid nagu näete natuke hiljem,
saame ka kirjutada info suhelda meie veebilehte.
Ma lähen suumida natuke siin, ja ma hakkan nüüd kliki nähtud test.
Ja neli test-- Ma ei hakka näitan sulle koodi just nüüd,
aga sa saad, kui sa lae lähtekoodi, et
seostatakse seda video-- on lihtsalt, et silmus
me nägime vaid Teises tagasi slaidile.
>> Nii et ma hakkan kliki, et nuppu, ja siin,
Siin on, mida on trükitud läbi konsool, 0, üks, kaks, kolm, neli, viis,
kuue.
Ma ei trükkima andmed sees need massiivi kohtades,
sest ma kasutasin jaoks silmus.
Ja keha sees silmus, ma lihtsalt välja printida võti ole vastu võti.
Aga kui ma nüüd kustutan oma konsooli, ja ma lülituda jaoks test, ja neli katset
Ma ütlen ma kasutada aasa asemel ja välja printida võti,
Kui ma vajutan, et nüüd ma saan tegelik elemendid sees minu objekt
või minu rida sellisel juhul.
Minu massiivi nädalapäevad.
Ma trükkida esmaspäev Teisipäev, kolmapäev.
Nii et see vahe A silmus, mis prindib välja
lihtsalt võtmed kui sa lihtsalt kasutada võtit korpuse sees silmus,
ja jaoks silmus, mis prindib välja väärtused, kui te kasutate ainult
võti kehas silmus.
>> Olgu, kuidas me nüüd hakkame concatenate stringid ja võibolla segatakse
mõned muutujad interpoleerimist nagu suutsime teha PHP?
Noh, me oleme päris tuttav Selle PHP.
See, kuidas me seda kasutada dot operaatori concatenate stringid.
In JavaScript, aga me tegelikult kasutada midagi
nimetatakse pluss operaator, mis on võibolla isegi natuke rohkem
intuitiivne, eks?
Lisame kamp stringid koos.
Nii saab pea tagasi üle ja näha, mida see
trükib kui me üritame välja printida kogu teave nädalal massiivi.
Olgu, nii siin all all stringi liitmise tehe,
Mul on kaks võimalust, string hoone V1 ja siis string hoone V2.
Ja me näeme, miks me vaja V2 teise.
Aga ma hakkan klikkima string hoone V1, mis
on kood olime lihtsalt võttes pilk,
console.log kõik plussid.
Vaatame, kas see prindib välja, mida me ootame.
>> Esmaspäev on päev number 01 nädala, Teisipäev on päev number 11 nädala.
Noh, mida ma üritasin teha oli saada
see välja printida esmaspäev on päev number üks, teisipäev on päev number kaks.
Aga tundub, et ma olen alati välja trükkida üks.
Noh, miks see nii on?
Noh, selgub, võtta teise ilme sel vähe koodilõige siin.
Pange tähele, et me kasutame pluss operaator kahes erinevas kontekstis.
>> Ja nii siin, kus äkki asjad et me oleme omamoodi öelnud,
oh, see on nii suur.
Me ei tegele andmetüübid enam.
Aga siin, kus asjaolu, et me kaotame andmetüübid
võib tegelikult olla natuke on meie jaoks probleem.
Nüüd, pluss operaator kasutatakse concatenate stringid ja lisada numbrid
kokku JavaScript peab teha oma parim oletus
et mida ma tahan seda teha minu jaoks.
Ja sel juhul, see arvasid valesti.
See lihtsalt liitsõnumite päev, mis oleks 0, üks, kaks, kolm, neli, viis või kuus,
ja siis lihtsalt konkateneeriti et siis märge on üks.
See tegelikult ei lisa neid koos.
Ja nii need keeled, PHP ja JavaScript,
mis imab ära Selle mõiste tüüpi,
sa ei pea tegelema enam.
Nad on veel tüüpe kapoti alla.
Ja saame olukordades niimoodi, võimendada seda asjaolu
öelda midagi nagu võibolla see, mis
räägib JavaScript, mida Muide, käsitada seda täisarv,
ei käsitle seda string, isegi kuigi me kokkusegamise stringid
ja täisarvud siin.
>> See on lihtsalt üks nendest asjadest et see tundub nii suur kontekstis
et me ei pea tegeleda tüüpi enam,
kuid mõnikord saate joosta olukord
täpselt nagu selles kus fakt, et Teil ei ole kontrolli liigid
võib tagasilöök teile kui sa ei ole ettevaatlik.
Ja kui me hüpata tagasi üle IDE, ma olen läheb tühjendama minu konsooli uuesti,
ja ma lähen klõpsake string Hoone versioon kaks, mis
on koht, kus ma saan kasutada, et sõeluda int funktsiooni.
Nüüd on väljatrükk informatsiooni, et ma ootan.
Esmaspäeval päev number üks, teisipäev on päev number kaks, ja nii edasi.
>> Nii räägime funktsioonid uuesti.
Lubasin me räägime anonüümne funktsioonid ja nüüd seoses selle
on lõpuks saabunud.
Nii enne kui me seda teha, räägime jälle umbes massiivid lihtsalt teine.
Nii massiivid on eriline Kui objekt.
Tegelikult kõik JavaScript on tegelikult objekt.
Nii funktsioonid on erijuhul objekti,
täisarvud on spetsiaalne Kui objekt,
kuid massiivid spetsiaalselt on mitmeid meetodeid.
Pea meeles, sest nad on objektid neil võib olla omadused ja meetodid.
Neil on mitmeid meetodeid, mis saab rakendada neid objekte.
Seal on meetodit nimetatakse suurus, array.size,
mis naaseb nagu te võite arvata
arvu elemente oma valikut.
array.pop, omamoodi nagu Meie idee popping välja
virna, kui te mäletate meie korstnad video,
kõrvaldab viimase elemendi massiivist.
array.push lisab uue elemendi lõppu massiivi.
array.shift on omamoodi nagu DQ, see Splices välja
kõige esimene element massiivi.
>> Aga seal on ka teine ​​eriline meetod massiivi nimega kaart.
Ja see on omamoodi huvitav kontseptsioon.
Mis on idee kaardil?
Sa tegelikult näha seda mitmetes teistes keeltes,
ja me ei räägi omamoodi cartographers map siin
me räägime korrastuse funktsiooni.
Seoses me oleme räägime siin kaardil
on spetsiaalne operatsioon me saab sooritada massiivi
kohaldada konkreetse funktsiooni iga element, mis massiivi.
ja nii me ütleks Sel juhul võibolla array.map,
ja sees on, me möödaminnes arvesse kaart on funktsioon, mida me tahame
tuleb kohaldada iga element.
Nii et see on omamoodi analoogne kasutades silmuse Käi iga element
ja rakendada eelkõige toimida iga element,
lihtsalt JavaScript on see ehitatud mõiste kaardistamine, mida saab rakendada.
Ja see on suur kontekstis rääkida anonüümne funktsioon.
>> Ütleme, et meil on Selle hulga täisarve.
Seda nimetatakse nums ja see sai viis asju see, üks, kaks, kolm, neli,
viis.
Nüüd ma tahan kaardistada mõned funktsiooni sellele massiivi.
Ma tahan olla funktsioon kohaldata iga element massiivi.
Noh, oletame, et see, mida ma tahan tegema, on lihtsalt kahekordistada kõik elemendid.
Mida ma võiksin teha, on lihtsalt kasutada loop var Ma võrdub 0, ma alla
või võrdne 4, ma pluss, pluss, ja siis kahekordistub iga ühe numbri.
Aga ma ei saa ka midagi sellist teha.
Ma ei saa öelda, nums varem üks kaks kolm neli viis,
Praegu aga ma tahaksin teile kohaldatakse kaardistamise peale selle massiivi
kus ma tahaksin teile kahekordistub iga number.
Ja see on täpselt mis toimub siin.
Aga teate, mida ma möödaminnes aastal, kui argument kaardistada.
See on anonüümne funktsiooni.
Ja teate ma pole antud Selle funktsiooni nimi,
Ma olen ainult andnud talle parameetrite nimekirja.
Ja nii on see näiteks anonüümne funktsioon.
>> Me üldiselt ei oleks kunagi nimetame seda funktsioon väljaspool konteksti kaart.
Me defineerib seda parameetrit kaardistada, ja nii me tegelikult ei
peab olema nimi see, kui Ainuke asi, mis hoolib on kaart
ja see on määratletud õigus seal sees kaart.
Ja nii see on anonüümne funktsioon.
Me ei ole suutnud seda teha varem.
Kaart teatavat funktsiooni nõustub üks parameeter num,
ja mida see funktsioon teeb on tagasi Num korda 2.
Ja nii pärast seda kaardistamine on kohaldatud,
see on nüüd see, mida nums välimus jms, kaks, neli, kuus, kaheksa, 10.
Ja me pop üle minu brauseriaknas ja lihtsalt
heita pilk selle tõesti kiiresti ka.
>> Nii et mul on veel üks nupp siin minu kodulehekülg nimetatakse topelt.
Ja kui ma vajutan topelt, ja see ütleb mul enne seda oli üks, kaks, kolm, neli,
viie pärast kahte, nelja, kuue, kaheksa, 10.
Ja kui ma tagasi minna ja klõpsake topelt jälle kahe, nelja, kuue, kaheksa, 10.
Ja siis pärast neli, Kaheksa, 12, 16, ja seejärel 20.
Ja mida ma teen selle funktsiooni?
Noh, kui me lihtsalt pop üle IDE ja Ma tõmba oma anonüümne funktsioon, siin
real seitse läbi 13, ma olen teed natuke väljamõeldud tööd siin,
aga ma lihtsalt printida Mis praegu massiivi.
Siis on line 16, 17, ja 18, seal on mu kaart.
See on koht, kus ma rakendades seda kahekordistada funktsiooni iga element.
Ja siis veel veidi alla, Ma lihtsalt teeme sama asja
Ma tegin enne, va nüüd olen väljatrükk sisu massiivi
hiljem.
Aga ma olen teinud siin lihtsalt kasutada anonüümset funktsiooni
kaardistada üle kogu massiivi.
>> Nii et üks rohkem suur teema rääkida ka JavaScript on mõiste sündmus.
Sündmus on midagi, mis lihtsalt juhtub kui kasutaja suhtleb oma veebi
lehele, et äkki nad klõpsavad midagi, või äkki leht on laetud,
või äkki nad on kolinud oma hiirega üle midagi,
või nad kirjutasid midagi in sisend valdkonnas.
Kõik need asjad on sündmused mis toimuvad meie veebilehel.
Ja JavaScript on suutlikkust toetada midagi
nimetatakse sündmuse käitleja, mis on tagasihelistamise funktsioon, mis
vastab html korral.
Ja mis tagasihelistamise funktsioon?
Noh, see on üldiselt lihtsalt üks nimi anonüümse funktsiooni.
See on funktsioon, mis vastab sündmus.
Ja see on koht, kus me tuleme Idee siduv teatud funktsioone
konkreetse html atribuut.
Enamik HTML elemendid on toetust atribuut
et me ei rääkinud html video jaoks midagi klikkimise
või hõljuda või koormus, Kõikidel nendel üritustel
mis saab siis kirjutada funktsioonid et tegeleda nende sündmuste
kui need sündmused esinevad oma veebilehel.
>> Ja nii äkki oma html näeb välja umbes selline.
Ja mul on kaks nuppu siin nuppu üks ja nuppu kaks,
ja siin ma pean praegu määratletud midagi,
kuid see on koht, kus atribuudi click on ilmselt osa minu html tag.
Nii ilmselt kui ma määratleda, mis on sees toimub selle atribuudi
see saab olema mingi JavaScript funktsioon, mis vastab sündmus
arvatavasti klõpsates nuppu üks või nuppu kaks.
>> Mis selline lahe on see, me saab kirjutada generic korral käitleja.
Ja selle sündmuse käitleja luua sündmuse objekti.
Ja kui objekt ütleb meile mis on kaks nuppu klõpsatud.
Nüüd, kuidas see toimib?
Noh, see näeks välja umbes selline.
Nii me kõigepealt määratleda meie nupud on vastuseks tagasihelistamise
funktsioon, mis saab nimeks Kui klõpsad nupule,
me nimetame sündmuse alert nimi.
Ja teate Mõlemal juhul oleme kulgeb sel juhul parameeter.
Nii et me nimetame seda funktsiooni või kui see funktsioon
käivitab sündmuse toimumisest, see saab luua selle sündmuse objekti
ja liigu seda parameeter hoiatada nimi.
Ja sel juhul objekti läheb sisaldama teavet
millest nuppu klõpsatud.
Ja kuidas see teha?
Noh, see näeks välja umbes selline.
Nüüd minu eraldi JavaScript fail, võin
pead leidma selle funktsiooni alert nimi, mis
jälle nõus, et üritus parameeter.
Ja siis siin on koht, kus ma avastamiseks mis nupp tingis,
var vallandada võrdub sündmus dot allikas element.
Mis oli allikas, mis on loodud Selle ürituse eesmärk, mis oli möödunud aastal?
Oli see nupp ühe või oli see nupp kaks?
>> Ja siis siin ma teen on väljatrükk trigger.innerhtml.
Noh, sel juhul selle kontekstis, trigger.innerhtml
on just see, mida on kirjutatud nupul.
See lihtsalt nii juhtub, kui me hüpata tagasi teise, et oleks
olla milline on nende vahel nuppu sildid.
See nupp ühe või nuppu kaks.
Ja võtame pilk kuidas see sündmus oleks
vaatame, kui meil oleks see töötab praktikas.
>> Nii esiteks, sa oled avanud events.js,
mis on JavaScript fail, kus Olen määratletud selle funktsiooni.
Ja nagu näete, see on päris palju täpselt, mida
me just nägin slaidile teine ​​tagasi.
Ja ma lähen üle avalehele oleme kasutanud.
Ja mul on siin nuppu üks ja nuppu kaks.
Ja ma klõpsake nuppu üks.
Sa klõpsad nuppu üks, kui te näete siinsamas valvas.
OKEI.
Vajuta nuppu kaks, siis klõpsanud nuppu kaks.
>> Nii nii nupud on Sama funktsioon kõne, eks?
Nad mõlemad olid alert nimi sündmus, kuid sel juhul objekti
mis saab luua, kui me vajuta see ütleb meile, millist nuppu klõpsatud.
Me ei pea kirjutama kaks eraldi funktsioone või tegeleda võttes
edasi mis tahes lisateavet.
Me lihtsalt tuginedes Mis JavaScript hakkab
teha meie jaoks, milleks on luua selle omamoodi sündmus objekti meie nimel.
Seal on palju rohkem JavaScript kui mida oleme kaetud selle video,
kuid võttes neid põhiõiguste peaks sulle
üsna pikk, kuidas õppida kõike saate
vaja teada seda huvitav keel.
Ma olen Doug Lloyd.
See on CS50.