[MUSIC nagpe-play] DOUG LLOYD: Kaya sa ngayon hindi namin lumang kalamangan sa web programming, di ba? At kami sakop ng ilang mga mga wika sa mga indibidwal na video. At gawin ang isa pa, JavaScript ngayon hayaan. Una ang mabuting balita, JavaScript ay isang modernong programming wika na halos tulad ng PHP na ang syntax ay nagmula mula sa C, kaya na ang isang magandang lugar upang magsimula. Ito ay tungkol sa mga lumang bilang PHP, pati na rin, pagiging sa paligid ng mga 20 taon. Ito ay imbento sa paligid sa parehong oras na PHP. At JavaScript ay talagang pretty pangunahing sa karanasan ng gumagamit ng web. Sa katunayan, may mga tatlong mga wika na ako sasabihin uri ng bumubuo sa karanasan ng gumagamit ng pakikipag-ugnay sa mga website, html, css, at JavaScript. At makipag-usap ng isang kaya ngayon hayaan nang kaunti tungkol sa JavaScript. Ang masamang balita, bagaman, na may JavaScript ay na ito ay nagtatakda ng isang pulutong ng mga panuntunan para sa kanyang sarili, at pagkatapos ay ito break ang mga ito. At JavaScript ay maaari talagang maging uri ng mahirap upang matuto, dahil sa ito ay hindi katulad ng C at PHP, na kung saan ay tunay na nakabalangkas at may tunay matibay patakaran para sa kung paano gumagana ang mga bagay. JavaScript ay may uri ng tapat na paraan upang flexible na siguro ang mga bagay ay hindi pagpunta sa gumagana ang paraan na inaasahan namin sa kanila na, at marahil hindi talaga namin maaaring malaman ang aming unang wika programming bilang JavaScript. Kaya marahil dahil ito ay hindi set mismo anumang mga patakaran, at ito ay hindi tunay ipatupad ang magandang coding gawi. Ngunit ngayon na sana ay nakabuo ng ang ilang mga magandang coding gawi, at upang maaari naming simulan na pandarambong sa JavaScript nang kaunti. Upang magsulat ng JavaScript, na katulad ng pagbubukas up ng isang C file sa isang tuldok C extension o isang PHP file na may extension ng dot PHP, ang lahat ng kailangan naming gawin ay buksan ang isang file may extension file ang tuldok js. Hindi natin kailangan na magkaroon ng anumang mga espesyal na delimiters tulad ng ginawa namin sa PHP. Na uri ng anggulo bracket tandang pananong PHP na kami ay ginagamit upang sa na, ang mga paraan sabihin natin ang ating mga browser na kung ano ang mayroon tayo ay Ang JavaScript ay sa pamamagitan ng kasama ito sa isang html tag, at kami na makita nang kaunti tungkol sa kung paano gawin na sa ilang saglit lamang. Ang iba pang mga bagay na gumagawa ng JavaScript naiiba, bagaman, ay na ito ay nagpapatakbo ng client side. Kaya isipin na may PHP na maaaring hindi namin talaga makita ang PHP na nakasalungguhit isang website. Kung namin kailanman tiningnan ang pinagmulang pahina, gagawin lamang namin makita ang mga html na na nabuo sa pamamagitan ng na PHP. Ngunit JavaScript tumatakbo client side. Ang iyong JavaScript ay tumatakbo sa iyong computer. At iyon ang dahilan kung bakit maaari mong gawin mga bagay na gusto magdagdag ng blockers. Right? Blocking Ad ay karaniwang ginagawa sa pamamagitan ng pagpatay ng lahat ng JavaScript na tumatakbo sa isang partikular na website. At dahil ito ay kailangang tumakbo sa iyong tabi machine client, Maaari mo lamang ihinto ang JavaScript para sa pagpapatakbo ng lahat. Ito ay nangangahulugan din na kapag ikaw ay gumagamit ng isang website na kasama JavaScript, kailangan mong ipadala ang pinagmulan JavaScript code bilang bahagi ng iyong tugon http sa client kapag sila ay humiling ito. At kaya hindi mo maaaring nais na gumamit ng JavaScript na gawin talagang sensitive bagay tulad ng pagpapasa ng impormasyon tungkol sa likod ng mga password ng gumagamit at pa, dahil ang mga ito ang tunay na pagpunta upang makatanggap ng lahat ng mga source code, hindi lamang ang mga html na nabuo, tulad ay ang kaso sa mga sinasabi PHP. Kaya paano namin isama JavaScript sa aming html na magsimula sa? Well, katulad ng CSS, talaga, ay uri ng kung paano namin ito dito. Sa CSS kami estilo ng mga tag. At sa loob ng mga estilo ng mga tag, maaari naming tukuyin ang CSS style sheet. Katulad nito sa JavaScript maaaring buksan up namin script tag, isa pang html na tag kami ay hindi makipag-usap tungkol sa aming mga html video, at isulat ang JavaScript sa sa pagitan ng mga script tag. Bagaman Gayundin, tulad ng CSS, namin maaaring mag-link sa labas CSS file at hilahin ang mga ito sa aming programa na paraan. Sa CSS maaari din namin, patawarin ninyo ako, sa JavaScript maaari rin naming tukuyin ang pinagmulan katangian ng tag script mag-link sa JavaScript hiwalay, kaya hindi mo kung isulat ito sa pagitan ng mga script tag, kami Maaaring i-link ang mga ito sa paggamit ng na script tag pati na rin. At tulad sa mga kaso na may CSS kung saan inirerekomenda namin na ito ay marahil sa iyong pinakamahusay na interes na magsulat iyong CSS sa isang hiwalay na file sa kaso kailangan mong palitan ang mga ito, katulad ng ginagawa namin pinapayo na isulat ang iyong Ang JavaScript sa hiwalay na mga file at gamitin ang source script tag attribute upang itali ang iyong JavaScript sa iyong html, ang iyong mga web page. Variable So JavaScript, bibigyan namin ng magsimula ng pakikipag-usap tungkol sa syntax dito. At kami ay pumunta sa pamamagitan ng ang ganitong uri ng mabilis, dahil tapos na namin ito sa PHP, kaya ito ay dapat na medyo pamilyar sa lahat. Kaya variable sa JavaScript ay halos katulad sa PHP variable. Walang type specifier, at kapag ipakilala mo ang isang variable, prefix mo ito gamit ang var keyword. Sa PHP nais naming gawin ang isang bagay tulad nito, dollar sign x. Iyon ay kung paano namin na ipinahiwatig isang variable, ngunit hindi, kami ay hindi banggitin ang uri mga variable sa lahat. Gusto naming sabihin isang bagay tulad ng sign x dollar ay katumbas ng 44 sa PHP. Kung kami ay ginagawa ang parehong bagay sa JavaScript, gusto naming sabihin var x ay katumbas ng 44. Kaya var ay uri ng aming mga paraan ng pagpapasok ng isang variable. Iyan ay marahil ng isang bit mas madaling maunawaan pa sa dollar sign variable. Muli, dahil walang mga uri ng data, maaari naming gawin ito sa anumang uri ng data, string, kahit ano pa ang magiging var lahat. Conditionals, ang lahat ng aming mga lumang mga kaibigan mula sa C at PHP ay magagamit pa rin, kaya kami ay kung, iba kung, iba pa, lumipat at katanungan mark colon. Lumipat natitirang bilang nababaluktot na ito ay sa PHP, ngunit ang lahat ng mga ito ikaw ay pamilyar sa pamamagitan ng ngayon. At katulad sa loop ay ang mga lumang mga paborito ng mga habang, gawin habang, at para pa rin magagamit sa amin. Kaya namin na malaman ng isang pulutong ng mga basic JavaScript uri ng batayan lamang sa pamamagitan ng kabutihan ng pagkakaroon ng isang lubos na piraso ng kaalaman ngayon ay tungkol sa C at PHP. Ano ang tungkol sa mga pag-andar sa JavaScript? Well, katulad sa PHP bawat function ay ipinakilala sa mga function na keyword. Sabihin mo function, at pagkatapos ay sa iyo simulan upang tukuyin ang iyong function. Ano ang isang maliit na naiiba tungkol JavaScript, bagaman ay ang kakayahan upang magkaroon ng ano ang tinatawag na isang hindi nakikilalang function. Kaya maaari mong tukuyin ang mga function na hindi magkaroon ng isang pangalan. Ito ang isang bagay na namin talagang hindi nakita bago. Ipapakita namin talagang gamitin ang mga konsepto ng isang hindi nakikilalang function isang maliit na mamaya sa video, dahil makikita ito gumawa ng kaunti pa ng kahulugan sa konteksto kapag nakita namin ang mga ito sa isang partikular na sitwasyon na na-crafted ko dito. Ngunit ipaalam sa tumagal lamang ng isang pagtingin sa kung ano ang isang simpleng JavaScript maaaring magmukhang function. Kaya ko na wala na magpatuloy at binuksan ang aking CS50 IDE at na ako na tumakbo ako Apache upang magsimulang tumakbo ang aking mga server. At ako ay may file na ito buksan tinatawag home.html. At kukunin ko na mag-zoom in ng kaunti dito. At isa lamang, maaari mong makita ang Home.html ay lamang ng isang grupo ng mga buttons. At ako na nagke-claim sa tuktok dito na ito ay ang seksyon JavaScript materyales. Kaya mayroong isang grupo ng mga buttons dito, ngunit ano ang mga button na ito talagang gawin? Well, kami ay tumuloy sa aking IED, at home.html ko pa buksan dito. Sa simula pa lamang, narito ang kung saan ako ng pag-uugnay sa lahat ng aking mga file source JavaScript. Right? Kaya ko anonymous.js, clock.js, Gumagamit ako ng source attribute ng tag script na mag-link sa file. Kaya hindi ako nakasulat ng anumang JavaScript direkta sa file na ito, ngunit ko na nakuha ko sa lahat ng JavaScript ko na nakasulat sa hiwalay. At kung mag-scroll namin down dito, ito dapat tumingin lahat medyo pamilyar na may isang maliit na piraso ng bagong syntax. Mayroon kaming dito header tag para sa function at pagkatapos ay isang button. Mayroon akong isang input na ang isang button type, at tila kapag nag-click ako sa mga ito, Pupunta ako sa tawagan ang ilang gumana date alert. At ito ay kung paano namin ang uri ng mga halu-up isang maliit na piraso ng JavaScript at html. Sila ay aktwal na i-play pretty mabuti sama-sama, at iba tila kapag Ako mag-click sa button na ito, pupuntahan ko upang tawagan ang ilang mga petsa sa pag-andar ng alerto. At katulad na may nakatakda na akong pag-uugali para sa lahat ng iba pang mga pindutan na nasa na ang pahina na home.html, na kung saan kami ay patuloy na bumabalik sa panahon ng kurso ng video na ito. Subalit bumalik up hayaan dito at tingnan sa clock.js, na kung saan ay ang JavaScript file na ako sinulat na ito ay may unang function kami ay pagpunta sa tumagal ng isang pagtingin sa. Tulad ng iyong nakikita, magsisimula ang aking JavaScript gumana gamit ang function na keyword, at ibinigay ko na ang isang ito ng pangalan, ito ay tinatawag na petsa ng alerto. Sa loob ng doon, tila ba akong lumikha ng isang mga bagong lokal na variable na tinatawag na kasalukuyang petsa. At ako pagpunta sa italaga isang pantay sa isang bagong petsa. At kami ay maaaring makakuha ng sa isang pulutong ng mga detalye sa kung ano ang isang petsa ay, at talagang JavaScript ay kaya malaki na hindi namin maaaring posibleng masakop ang lahat sa isang video. Ngunit magkasiya ito upang sabihin, ito ay pagpunta upang bumalik sa akin ng isang item ng data na pinapalooban ang kasalukuyang petsa at oras. Ako sa pag-iimbak na sa isang variable na ako tila pagpunta upang alertuhan kasalukuyang petsa. Well, kung ano ang ginagawa ng alerto kasalukuyang hitsura ng petsa tulad ng? Tingnan natin ang isang hitsura at ang mismong file i-back sa ibabaw sa window ng browser. Kaya muli, ito ay ang button na ako may nakatali na, ito pinangalanan function. At i-click ko ito doon at tingnan kung ano ang ginawa ito, humanda ito. Ito pop up na ito uri ng box na nagsasabi sa akin na ang mga kasalukuyang time ay, tila ito ay Nobyembre 4 sa 10:43:43 sa umaga. At kung ako mag-click itong muli, ngayon ito ay isang ilang segundo mamaya, di ba? Kaya na ang lahat ng mga function na ito ay. Kapag nag-click ako sa button na ito, ito nagpa-pop up ang isang mensahe ng alerto sa akin. Kaya mayroong talagang hindi masyadong marami sa mga pag-andar na naiiba mula sa PHP, lamang ng isang maliit na piraso ng bagong syntax na nanggagaling sa mga nagtatrabaho sa JavaScript. Ang mga array sa JavaScript ay medyo direkta. Upang maipahayag ang isang array, gamitin mo ang mga square bracket syntax na hindi namin pamilyar sa mula sa PHP. At katulad sa PHP, namin Maaari ring ihalo uri ng data. Kaya ito array, parehong ng mga array ng gagawin maging ganap na ganap lehitimong JavaScript. Isa na ang lahat integer, at isa na ay halo-halong up ng iba't ibang mga uri ng data. Ano ang isang bagay na ibang sa JavaScript, bagaman? Iyon ang mga kuru-kuro ng isang bagay. Kaya marahil mo na narinig ng object oriented programming. Hindi namin gawin ng maraming mga ito sa CS50, ngunit gagawin namin ang isang maliit na piraso ng ito dito sa konteksto ng JavaScript. Ngayon JavaScript ay may kakayahan na kumilos bilang isang bagay na nakatuon sa programming wika, ngunit ito ay hindi mismo eksklusibo isang object oriented programming language. At ito ay dumating muli bumalik sa kung bakit sinabi ko, ito maaaring maging lubhang mahirap upang malaman JavaScript bilang iyong unang programming wika, dahil ito ay hindi talagang magkasya sa isang partikular tularan. C Sa kabilang banda ay isang functional programming language. Kung gusto naming, function ay uri ng malaking boss na tao, di ba? Magdikta nila kung ano ang mangyayari lahat ng iba pa. Gusto naming baguhin variable, ang tawag namin sa mga pag-andar. Ginagawa namin ang mga bagay na pag-andar. Objects sa halip, sa isang object oriented wika, mga object ng uri ng maging ang mga bituin at function na maging uri ng pangalawang. Ngunit kung ano ang isang bagay, kung ano ang ay ang paniwala na ito ng isang bagay? Well, kung ito ay tumutulong, sa tingin tungkol ito sa unang uri ng tulad ng isang C istraktura o isang struct na aming natutunan tungkol sa bago. Sa C, ang isang istraktura ay naglalaman ng ng isang bilang ng mga patlang, at marahil na namin ngayon ay maaaring magsimula sa tumawag sa mga ari-arian na mga patlang. Ngunit ang ari-arian ay hindi kailanman talagang tumayo sa kanilang mga sarili, right? Kung ako tukuyin ang isang istraktura para sa isang kotse tulad nito na may mga sumusunod na dalawang parang, o ari-arian, ang isa sa isang integer para sa mga taon ng kotse at isa pa sa isang 10 na karakter string para sa mga modelo ng kotse, Maaari ko bang sabihin ng isang bagay na tulad nito, Maaari ko bang magpahayag ng isang bagong variable ng uri herbie struct kotse. At pagkatapos ay maaari kong sabihin ng isang bagay tulad herbie.year katumbas 1963, at herbie.model katumbas salaginto. Iyon ang OK. Gumagamit ako ng mga patlang sa konteksto ng istraktura, ngunit maaari ko lamang ay hindi kailanman sabihin ng isang bagay tulad nito. Right? Hindi ko magamit ang mga pangalan ng patlang independiyenteng ng istraktura. Ito ay uri ng isang pangunahing bagay. Kaya patlang na pangunahing sa C istruktura ay katulad ng sa mga katangian ng pagiging pundamental na mga bagay JavaScript. Ngunit kung ano ang gumagawa ng mga ito partikular na interesante ay na bagay ay maaari ding magkaroon ng kung ano ito ay tinatawag na mga pamamaraan, na kung saan ay tunay na lamang ng isang magarbong salita para sa mga pag-andar na likas sa mga object rin. Kaya ito ay isang function na ay maaari lamang maging tinatawag na sa konteksto ng isang bagay. Isang bagay lamang na may tinukoy mga function na ito sa loob ng kanyang, kung sa tingin mo tungkol sa isang struct, ang function ay tinukoy sa loob ng mga pagtukoy curly braces ng istraktura. Kaya ito ay nangangahulugan lamang ng isang bagay sa istraktura. At na uri ng kung ano ang aming ginagawa dito may mga bagay at pamamaraan. Ito ay isa lamang tulad ng hindi namin pagtukoy ng isang function na lamang ang akma sa isang partikular na bagay, at sa gayon kami ay tumawag na isang paraan ng object. At hindi namin maaaring tumawag na function na independiyenteng ng mga bagay, tulad ng hindi namin maaaring sabihin na taon o modelo independiyenteng ng struct sa C. Kaya functional programming Tumingin paradigms bagay tulad nito. Function at pagkatapos ay kapag kayo na ipasa ang sa bagay bilang isang parameter. Sa isang bagay na nakatuon sa programming wika, ang ganitong uri ng makakakuha Binaligtad, at gusto naming isipin ang tungkol sa ito tulad ng ito, object.function. Kaya ito uri ng na tuldok operator muli nagpapahiwatig na ito ay ilang uri ng mga ari-arian o katangian ng bagay mismo. Ngunit ito ay kung ano ang isang bagay oriented programming language maaaring gawin upang gawin ang isang function tumawag sa isang paraan na ito, muli, na ay lamang ng isang espesyal na salita para sa isang function na likas sa isang bagay. Ito ay kung ano na ang maaaring magmukhang syntax. At kaya makikita namin simulan upang makita ang ilan sa ito sa konteksto ng JavaScript. Maaari mo ring isipin ang tungkol sa isang bagay uri ng tulad ng isang nag-uugnay array, na kung saan kami ay pamilyar sa mula sa PHP. Tandaan nagpapahintulot sa isang nag-uugnay array amin upang magkaroon ng pangunahing mga pares ng halaga, sa halip ng pagkakaroon ng index 0, isa, dalawa, tatlo, at iba pa tulad ng kami ay ginagamit upang mula sa C array. Uugnay array ay maaaring mapa salita, tulad ng sa video PHP, kami ay pakikipag-usap tungkol sa toppings ng pizza. At kaya kami ay nagkaroon ng isang array tinatawag na pizza, at kami nagkaroon keso ay isang susi at $ 8.99 ay ang halaga, at pagkatapos ay pepperoni ay isang key, $ 9.99 ay isang halaga, at iba pa. At upang maaari ring mag-isip tungkol sa isang object uri ng katulad sa isang nag-uugnay array. At kaya ang syntax na ito dito ay lumikha ng isang bagong bagay tinatawag herbie na may dalawang mga katangian sa loob ng mga ito. Taon, na itinalaga sa halaga 1963, at modelo, na kung saan ay itinalaga ang string Salaginto. At mapansin dito na gumagamit ako single quotes sa JavaScript. Maaari mong gamitin ang single o double quotes kapag ikaw ay pakikipag-usap tungkol sa mga string. Ito ay conventionally lamang ang kaso na ang karamihan sa mga oras kapag sumusulat ka ng JavaScript, gumamit ka lamang ng isang solong quotes. Ngunit maaari ko bang gamitin double quotes dito, at na magiging ganap na multa rin. Kaya tandaan kung paano sa PHP nagkaroon kami ito paniwala ng isang para sa bawat loop na ay magpapahintulot sa amin upang umulit sa lahat ng mga halaga ng key mga pares ng isang nag-uugnay array, dahil tayo ay hindi magkaroon ng kakayahan na ito upang umulit sa pamamagitan ng 0, isa, dalawa, tatlo, apat, at iba pa? Ay may isang bagay na halos kapareho JavaScript, ngunit hindi ito ay tinatawag na isang para sa bawat loop, ito ay tinatawag na isang para sa loop. Kaya kung sinabi ko sa akin tulad ng ito, para var key sa object, na uri ng katulad sa sinasabi para sa bawat isang bagay bilang isang bagay. Subalit ang lahat ako ginagawa dito ay iterating sa pamamagitan ng lahat ng mga susi ng aking object. At sa loob ng kulot braces diyan, nais ko gamitin ang object square bracket key upang sumangguni sa ang halaga sa na key na lokasyon. Bilang kahalili, may kahit isa pang diskarte. Kung ako lamang lamang aalaga tungkol sa mga mga halaga, maaari kong sabihin para sa mga susi ng bagay, at gamitin lamang key sa loob. Kaya para var key sa object, mayroon akong gamitin object square bracket susi sa loob ng loop. Para var key ng object, maaari ko gamitin lamang ang susi sa loob ng loop, dahil partikular lang ako pakikipag-usap tungkol sa mga halaga doon. Kaya sabihin siguro kumuha ng isang tingnan ang pagkakaiba upang mabilis na ipakita sa iyo ang pagkakaiba sa pagitan ng apat sa at para sa mga may isang napaka-tukoy na array, na kung saan mayroon kaming dito, linggo array. Kaya kailangan kong makahanap ng isang bagong array na napuno ko na may pitong string, Lunes Martes Miyerkules, Huwebes, Biyernes, Sabado, Linggo. At gusto ko sa ngayon umulit sa pamamagitan ng array na ito, pag-print out ang ilang impormasyon. Kung gumamit ako ng isang para sa loop upang i-print out ang impormasyon, ano sa tingin mo ako pagpunta upang makakuha ng? Well, sabihin kumuha ng isang hitsura. At bago namin tumalon sa ibabaw sa aking window ng browser, lamang malaman na console.log ay uri ng isa paraan ng paggawa ng isang print F sa JavaScript. Ngunit ano ang console? Well, na kung ano kami ay pagpunta upang pumunta tingnan sa ngayon. OK, kaya hindi namin pabalik dito sa aking window ng browser, at ako pagpunta upang buksan ang aking mga tool ng developer. Muli, ako pagpindot lamang F12 upang buksan ang tool ng developer. At pansinin na dito sa top pinili ko ang console. Kaya ito ay ang paniwala ng isang developer console, at ito ay magbibigay-daan sa amin upang i-print ang impormasyon sa labas, uri ng tulad ng mga terminal, ngunit tulad ng makikita mo ang isang maliit na mamaya, maaari rin naming i-type ang impormasyon sa upang makipag-ugnay sa aming web page. Pupunta ako upang mag-zoom in ng kaunti dito, at ako gonna click na ngayon sa para sa pagsubok. At apat sa test-- hindi ako gonna magpapakita sa iyo ang code para dito sa ngayon, ngunit makakakuha ka ng mga ito kung ikaw i-download ang source code na ay nauugnay sa ito video-- ay lamang na para sa loop na nakita namin lamang ng isang segundo na nakalipas sa slide. Kaya ako gonna-click na iyon button, at higit dito, narito ang kung ano ang naka-print out sa console, 0, isa, dalawa, tatlo, apat, lima, anim. Hindi ko i-print out ang impormasyon sa loob ng mga lokasyong iyon array, dahil ginamit ko ang isang para sa loop. At sa loob ng katawan ng loop, ako lamang-print out key hindi object key. Ngunit kung ngayon clear ko ang aking console, at ako lumipat sa para sa pagsubok, at apat sa test Sinasabi ko gagamitin ko para sa loop sa halip at i-print ang key, kung na-click ko na, ngayon ko nakukuha ang aktwal na mga elemento sa loob ng aking mga bagay o ang aking array sa kasong ito. Aking array ng mga araw ng linggo. I-print out Lunes, Martes Miyerkules. Kaya na ang pagkakaiba sa pagitan ng isang para sa loop, na mga Kopya out lamang ang mga key kung ikaw lamang gamitin key sa loob ng katawan ng loop, at isang para sa loop, na kung saan mga kopya out ang mga halaga kung gagamitin mo lang key sa loob ng katawan ng loop. Lahat ng mga karapatan, paano namin simulan ngayon upang pagdugtungin string at marahil ihalo up ang ilang mga variable na may agaw tulad ng nagawa naming gawin sa PHP? Well, kami ay medyo pamilyar sa ito mula sa PHP. Ito ay kung paano namin gawin ito gamit ang dot operator upang pagdugtungin string. Sa JavaScript, bagaman, kami ang tunay na gamitin ang isang bagay tinatawag na ang plus operator, na kung saan ay maaari ring maging isang maliit na mas kaunti intuitive, di ba? Kami ay pagdaragdag ng grupo ng mga string na magkasama. Kaya ng ulo pabalik ipaalam at makita kung ano ito ay i-print kung kami ay sinusubukan upang i-print out lahat ng mga impormasyon sa week array. Lahat ng karapatan, kaya sa ilalim dito sa ilalim ng string pagdudugtong, Mayroon akong dalawang mga pagpipilian, string building V1 at pagkatapos string building V2. At kami na makita kung bakit namin Kailangan V2 sa isang segundo. Ngunit ako gonna mag-click sa string building V1, na ay ang code namin pagkuha lamang ng isang pagtingin sa, ang console.log sa lahat ng mga plus. Tingnan natin kung ito prints Ipaalam kung ano ang inaasahan namin. Lunes ay araw number 01 ng linggo, Martes ay araw number 11 ng linggo. Well, kung ano ako ay sinusubukan gawin nagkaroon makakuha ito upang i-print out ang Lunes ay araw na numero isa, Tuesday ay araw ng dalawang numero. Ngunit parang gusto ako palaging pag-print out ng isa. Well, kung bakit ay na? Well, ito ay lumiliko out, kumuha ng isa pang tumingin sa ito maliit na snippet ng code dito. Pansinin na aming ginagamit ang plus operator sa loob ng dalawang iba't ibang konteksto. At kaya narito ang kung saan siguro bagay na namin ang uri ng ay sinasabi namin, oh, ito ay kaya mahusay. Hindi namin pakikitungo sa mga uri ng data na ngayon. Ngunit narito ang kung saan ang katotohanan na nawala namin uri ng data aktwal na maaaring maging isang bit ng isang problema para sa amin. Ngayon na ang plus operator ay ginagamit upang pagdugtungin string at magdagdag ng mga numero sama-sama, JavaScript ay sa gumawa nito pinakamahusay na hula sa kung ano ang gusto ko ito gawin para sa akin. At sa kasong ito, ito nahulaan mali. Ito lamang concatenated araw, na kung saan ay 0, isa, dalawa, tatlo, apat, lima, o anim, at pagkatapos ay concatenated lang ito pagkatapos ay concatenated na at isa. Ito ay hindi tunay na idagdag ang mga ito nang magkakasama. At kaya ang mga wika, PHP at JavaScript, na abstracts malayo ang paniwala ng mga uri, hindi mo na kailangang humarap sa mga ito anymore. Sila ay magkakaroon pa rin ng uri sa ilalim ng hood. At maaari namin, sa mga sitwasyon tulad nito, pakikinabangan na katotohanan sa pamamagitan ng pagsasabi ng isang bagay tulad marahil na ito, na ay nagsasabi sa JavaScript, sa pamamagitan ng paraan, ituturing ito bilang isang integer, huwag ituring ito bilang isang string, kahit kahit kami ay paghahalo-sama string at integer dito. Ito ay isa sa mga bagay lamang na ito ay tila kaya mahusay sa konteksto na hindi natin kailangang pakikitungo sa mga uri anymore, ngunit kung minsan makikita mo tumakbo sa isang sitwasyon eksakto tulad nito kung saan ang mga katotohanan na wala kang kontrol sa mga uri Maaari kalabang apoy sa iyo kung ikaw ay hindi maingat. At kaya kung pop-back namin sa paglipas ng sa IDE, ako pagpunta sa mga malinaw na ang muli ang aking console, at ako pagpunta sa i-click ang string building bersyon dalawa na ay kung saan ko bang gamitin na parse int function. Ngayon ay ang pag-print out impormasyon na ako umaasa. Araw na numero ng isa Lunes, Martes sa araw na bilang dalawang, at iba pa. Kaya sabihin makipag-usap tungkol sa mga pag-andar muli. Nangako ako sa gusto naming makipag-usap tungkol anonymous pag-andar, at ngayon ang konteksto para sa na ay sa wakas dumating. Kaya bago namin gawin ito, makipag-usap muli ipaalam tungkol sa array para sa isang segundo lang. Kaya array ay isang espesyal na kaso ng isang bagay. Sa katunayan, ang lahat ng bagay sa JavaScript ay tunay na isang bagay. Kaya function ay isang espesyal na kaso ng isang bagay, integer ay isang espesyal na kaso ng isang bagay, ngunit array partikular magkaroon ng isang bilang ng mga pamamaraan. Tandaan dahil ang mga ito ng mga bagay, maaari silang magkaroon ng mga ari-arian at mga pamamaraan. Sila ay may isang bilang ng mga pamamaraan na maaaring ilapat sa mga bagay. May isang paraan na tinatawag na laki, array.size, na kung saan ay babalik sa iyo bilang maaari mong asahan ang bilang ng mga sangkap sa iyong array. array.pop, uri ng tulad aming paniwala ng pop off ng isang stack, kung isipin mo mula sa aming mga stack video, Tinatanggal ang huling elemento mula sa array. array.push nagdadagdag ng isang bagong elemento sa dulo ng isang array. array.shift ay uri ng tulad ng DQ, ito splices out ang pinakaunang elemento ng isang array. Subalit mayroong isa pang espesyal na ring paraan ng isang array na tinatawag na mapa. At ito ang mga uri ng isang kagiliw-giliw na konsepto. Kaya kung ano ay ang ideya ng isang mapa? Makikita mo talagang makita ito sa iba't ibang wika, at hindi kami pakikipag-usap tungkol sa isang uri ng cartographers map dito, pinag-uusapan natin ang tungkol sa isang pag-andar ng pagmamapa. Sa konteksto hindi namin pakikipag-usap tungkol dito, ang isang mapa ay isang espesyal na operasyon namin maaaring gumanap sa isang array upang ilapat ang isang partikular na function sa bawat elemento ng array na. at iba gusto naming sabihin sa kasong ito, marahil array.map, at sa loob ng mga ito, na tayo dumadaan sa mapa ay isang function na gusto naming upang mailapat sa bawat solong elemento. Kaya ito ay isang uri ng kahalintulad sa gamit isang loop upang umulit sa bawat elemento at ilapat ang isang partikular gumana sa bawat elemento, lamang JavaScript ay ito built in paniwala ng isang mapping na maaaring ilapat. At ito ay isang mahusay na konteksto sa makipag-usap tungkol sa isang hindi nakikilalang function. Kaya sabihin nating mayroon kaming ito ang dami ng mga integer. Ito ay tinatawag na nums, at ito ay nakuha ng limang mga bagay-bagay sa loob nito, isa, dalawa, tatlo, apat, limang. Ngayon gusto ko upang i-map ang ilang mga function na sa sa array na ito. Gusto kong magkaroon ng isang function apply sa bawat elemento ng array. Well, sabihin natin na kung ano ang gusto kong gawin ay double lamang ang lahat ng mga elemento. Ano ang maaari kong gawin ay gumamit lamang ng isang loop para var ko ay katumbas ng 0, I ay mas mababa sa o katumbas ng 4, ako plus, plus, at pagkatapos ay i-double ang bawat isang numero. Ngunit maaari din ako gumawa ng isang bagay na katulad nito. Maaari ko bang sabihin nums ay dating isa dalawa tatlo apat lima, ngayon, bagaman, Gusto ko sa iyo upang maglapat ng pagmamapa na ito papunta sa array kung saan Gusto ko sa iyo sa double bawat number. At iyon mismo kung ano ang nangyayari dito. Ngunit mapansin kung ano ako makapasa in bilang argumento sa mapa. Ito ay isang hindi nakikilalang function. At mapansin hindi ko ibinigay mga function na ito ng isang pangalan, Ibinigay ko lamang ito ng isang listahan ng mga parameter. At kaya ito ay isang halimbawa ng isang hindi nakikilalang function. Kami ay karaniwang hindi nais na tawag ito function sa labas ng konteksto ng mapa. Kami ay pagtukoy ito bilang isang parameter upang i-map, at upang gawin namin hindi talaga kailangan upang magkaroon ng isang pangalan para sa mga ito kung ang tanging bagay na nagmamalasakit tungkol sa kung mapa at ito ay tinukoy ng karapatan doon sa loob ng mapa. At kaya ito ay isang hindi nakikilalang function. Hindi namin nagawang upang gawin ito dati. Mapa ng ilang mga pag-andar na tumatanggap ng isang parameter, num, at kung ano ang ginagawa na pag-andar ay nagbabalik NUM beses 2. At kaya pagkatapos nito mapping ay na-apply, ito ay ngayon kung ano ang hitsura nums like, dalawa, apat, anim, walo, 10. At kami na pop sa aking window ng browser at lamang tingnan ang mga ito talagang mabilis na rin. Kaya kailangan ko ng isa pang button dito sa aking home page tinatawag double. At kapag nag-click ako double, at ito ay nagsasabi sa akin bago ito ay isa, dalawa, tatlo, apat, limang pagkatapos dalawa, apat, anim, walo, 10. At kung pumunta ako sa likod at i-click ang double muli, dalawa, apat, anim, walo, 10. At pagkatapos ay pagkatapos, apat, walo, 12, 16, at pagkatapos ay 20. At ano ang ginagawa ko sa function na ito? Well, kung pop lang namin sa paglipas ng sa IDE, at Hilahin ko ang aking function na anonymous, dito sa pitong linya sa pamamagitan ng 13, ako paggawa ng isang maliit na piraso ng magarbong trabaho dito, ngunit lamang ako sa pag-print out kung ano ang kasalukuyang sa array. Pagkatapos ay sa 16 na linya, 17, at 18, may aking mapa. Ito ay kung saan ako nag-aaplay ito pagdodoble function na upang ang bawat isang elemento. At pagkatapos ng isang maliit na karagdagang down, Tingin lang ako sa paggawa ng parehong bagay Ako ay gumagawa ng bago, maliban na ngayon Ako pag-print out ang mga nilalaman ng array pagkatapos. Subalit ang lahat ng nagawa ko dito ay gamitin lamang ang isang hindi nakikilalang function upang i-map sa isang buong array. Kaya isa pang malaking paksa na makipag-usap tungkol sa JavaScript ay ang pagkaunawa ng isang kaganapan. Ang isang kaganapan ay isang bagay na lamang ang mangyayari kapag nakipag-ugnayan ang isang user sa iyong web pahina, kaya siguro nag-click sila sa isang bagay, o marahil ang pahina ay tapos loading, o marahil na inilipat sila kanilang mouse sa isang bagay, o sila na nag-type ng isang bagay sa isang field ng input. Lahat ng mga bagay ay mga kaganapan na nagaganap sa aming web page. At JavaScript ay may mga kakayahan upang suportahan ang isang bagay tinatawag na isang handler ng kaganapan, na ay isang callback function na tumugon sa isang html kaganapan. At kung ano ang isang callback function? Well, ito ay karaniwang lamang ng isa pang pangalan para sa isang hindi nakikilalang function. Ito ay isang function na tumugon sa isang kaganapan. At ito ay kung saan namin dumating sa ideya ng umiiral na ang ilang mga function sa isang partikular na katangian html. Mayroon Karamihan elemento html suporta para sa isang katangian na hindi namin makipag-usap tungkol sa html video para sa isang bagay tulad ng sa pag-click o sa hover o sa load, lahat ng mga kaganapan na maaari mong pagkatapos ay isulat ang mga function na pakikitungo sa mga kaganapan kapag ang mga kaganapan mangyari sa iyong web page. At kaya marahil ang iyong html hitsura ng isang bagay tulad nito. At ako ay may dalawang mga pindutan dito, button isa at button dalawa, at dito ko sa kasalukuyan tinukoy sa wala, ngunit ito ay kung saan ang mga katangian sa click ay tila bahagi ng aking html tag. Kaya tila kapag tinukoy ko kung ano ang nangyayari sa loob ng mga katangiang iyon, ito ay pagpunta sa ilang JavaScript function na tumugon sa mga kaganapan siguro ng pag-click sa button isa o button dalawa. Ano ang uri ng mga cool tungkol sa mga ito ay namin maaaring sumulat ng isang pangkaraniwang kaganapan handler. At ito Handler kaganapan ay lumikha ng isang bagay na kaganapan. At ang object ng kaganapan ay sabihin sa amin kung alin sa dalawang mga pindutan ay nag-click. Ngayon kung paano ang trabaho? Well, ito ay maaaring tingnan ng isang bagay na katulad nito. Kaya una naming tukuyin ang aming mga pindutan na magkaroon ng isang tugon sa mga callback function na ito ay tinatawag na kapag ang pindutan ay nag-click, Makikita kami tatawag sa pangalan ng alerto kaganapan. At paunawa sa parehong mga kaso hindi namin pagpasa sa parameter event na ito. Kaya ang tawag namin sa mga function na ito o kapag ang function na ito ay nag-trigger sa pamamagitan ng mga kaganapan na nangyayari, ito ay pagpunta upang lumikha ng object event na ito at ipasa ito bilang parameter upang alertuhan name. At na object ng kaganapan ay pagpunta sa maglaman ng impormasyon tungkol sa kung aling mga pindutan ay nag-click. At paano ito gawin iyon? Well, ito ay maaaring tingnan ng isang bagay na katulad nito. Kaya ngayon sa aking hiwalay na JavaScript file, maaari ko kung mahanap na ito Pangalan ng alerto function, kung saan muli tumatanggap na parameter kaganapan. At pagkatapos dito ay kung saan makakakuha ako ng tiktik na button ay nag-trigger, var trigger katumbas kaganapan dot pinagmulan element. Ano ang pinagmulan na nilikha object sa kaganapang ito na ay lumampas na sa? Ay ito ng isang pindutan o ito button dalawa? At pagkatapos ay narito ang lahat ng ginagawa ko imprenta ang trigger.innerhtml. Well, sa kasong ito, sa ganitong konteksto, trigger.innerhtml lamang kung ano ang nakasulat sa button. Ito lang kaya ang mangyayari kung namin tumalon bumalik para sa pangalawang, na gagawin maging kung ano ang sa pagitan ng mga tag na iyon button. Ito ay magiging isang pindutan o pindutan ng dalawang. At tumagal ng isang pagtingin sa ipaalam paano handler ng kaganapan na ito gagawin tumingin kung kami ay tumatakbo ito sa pagsasanay. Kaya una sa lahat, na sa iyo nagbukas events.js, kung saan ay ang JavaScript file na kung saan ang Tinukoy ko ang function na ito. At bilang maaari mong makita, ito ay medyo marami kung ano mismo ang Nakita lang namin sa slide sa isang segundo ang nakalipas. At ako ay pumunta sa ibabaw ng home page namin ginagamit. At mayroon akong dito button isa at button dalawa. At kukunin ko na mag-click sa isang pindutan. Nag-click ka sa pindutan ng isa, kung ikaw maaaring makita dito mismo sa alerto. SIGE. Mag-click sa pindutan ng dalawa, ikaw ay nag-click sa isang pindutan sa dalawa. Kaya kung ang parehong mga pindutan ng parehong function na tawag, i-right? Sila ay parehong mga pangalan ng alerto kaganapan, ngunit object event na ito na makakakuha ng nilikha kapag kami i-click ito ay nagsasabi sa amin kung aling mga pindutan ay nag-click. Hindi namin ay may na magsulat ng dalawang magkahiwalay na function o pakikitungo sa pagkakaroon upang pumasa sa anumang karagdagang impormasyon. Kami lamang ay umaasa sa kung ano ang JavaScript ay gawin para sa amin, na kung saan ay upang lumikha ng na uri ng object na kaganapan sa aming ngalan. May isang pulutong ng higit pa sa JavaScript kaysa kung ano ang namin sakop sa video na ito, ngunit ang pagkakaroon ng mga pangunahing dapat na makakuha ka pa ng isang mahabang paraan upang pag-aaral ng lahat ng bagay na makikita kailangang malaman tungkol sa mga ito kagiliw-giliw na wika. Ako Doug Lloyd. Ito ay CS50.