>> [Гуляе музыка]
>> Даг Lloyd: Такім чынам, зараз мы старыя профі на вэб-праграмавання, праўда?
І мы разгледзелі некалькі мовы ў асобных відэа.
А цяпер давайце зробім яшчэ адзін, JavaScript.
>> Першая добрая навіна, JavaScript гэта сучасны праграмавання
мова гэтак жа, як PHP, чые Сінтаксіс з'яўляецца вытворным ад C,
так што гэта добрае месца, каб пачаць.
Гэта прыкладна як стары, як PHP, а таксама, Існуючы каля 20 гадоў.
Ён быў вынайдзены каля у той жа час, як PHP.
І JavaScript на самай справе даволі асноватворнае значэнне для карыстацкага досведу
у Інтэрнэце.
На самай справе, ёсць трох мовах, што я
скажа роду складаюць Карыстальнік вопыт узаемадзеяння
з вэб-сайта, HTML, CSS, JavaScript, і.
І вось зараз давайце пагаворым Крыху пра JavaScript.
>> Дрэнная навіна, хоць, з JavaScript, гэта што ён усталёўвае шмат правілаў для сябе,
а затым разбурае іх.
І JavaScript сапраўды можа быць выгляд выклік, каб даведацца,
таму што гэта ў адрозненне ад C і PHP, якія вельмі структураваныя
і маюць вельмі жорсткія правілы аб тым, як рэчы могуць працаваць.
JavaScript мае выгляд з сталі настолькі гнуткімі
што, магчыма, рэчы не збіраюся працаваць так, як мы чакаем, што яны,
і, магчыма, мы сапраўды не можам даведацца наш першы мова праграмавання
як JavaScript.
Так, можа быць, таму што гэта не ўсталяваць сам нейкія правілы,
і гэта сапраўды не захаванне добрыя звычкі кадавання.
Але цяпер, спадзяюся, мы распрацавалі некаторыя добрыя звычкі кадавання,
і такім чынам мы можам пачаць набег у JavaScript няшмат.
>> Каб запісаць JavaScript, падобны на адкрыцці капіраванне файла C з кропкай C пашырэннем
або PHP файл з пашырэннем кропка PHP, усё, што трэба зрабіць, гэта адкрыць файл
з пашырэннем файла кропка JS.
Мы не павінны мець нейкі адмысловы падзельнікі, як мы рабілі ў PHP.
Такога роду вуглом Кранштэйны знак пытання PHP
што мы прывыклі, што ад шляху, Мы кажам нашым браўзэр, што ў нас ёсць,
JavaScript з'яўляецца ў тым ліку гэта ў HTML тэга,
і мы ўбачым крыху пра як зрабіць, што праз хвіліну.
>> Іншая справа, што робіць JavaScript адрозніваецца,
аднак, з'яўляецца тое, што ён працуе на баку кліента.
Так ўспамінаю з PHP, што мы ніколі не маглі сапраўды ўбачыць
РНР, што падкрэсліў сайта.
Калі мы калі-небудзь разглядаў зыходны код старонкі, мы б толькі
паглядзець HTML, які быў генераваных гэтай PHP.
Але ў JavaScript працуе на баку кліента.
Ваш JavaScript, працуе на вашым кампутары.
І вось чаму вы можаце зрабіць рэчы, як дадаць блокаторы.
Дакладна?
Блакіроўка рэкламы звычайна робіцца забойства усё JavaScript
што працуе на пэўным сайце.
І таму, што ён павінен запусціць на кліенцкім кампутары баку,
вы можаце проста спыніць JavaScript для запуску цалкам.
Гэта таксама азначае, што калі вы выкарыстоўваеце сайт, які ўключае ў сябе JavaScript,
Вы павінны адправіць крыніца JavaScript Код, як частка вашага адказу HTTP
кліенту, калі яны запытваюць іх.
І таму вы можаце не хочаце выкарыстоўваць JavaScript
зрабіць сапраўды адчувальныя рэчы як праходзіць інфармацыі
аб паролях карыстальнікаў спіне і наперад, таму што яны на самой справе
збіраецца атрымаць увесь зыходны код, не толькі HTML, які генеруецца,
такія, як было б у выпадку з скажам PHP.
>> Так як мы ўключаць JavaScript у нашым HTML пачаць?
Ну, падобны на CSS, на самай справе, з'яўляецца свайго роду, як мы робім гэта тут.
З дапамогай CSS мы маем тэгі стыль.
І ўнутры гэтых тэгаў стыляў, мы можам вызначыць ліст CSS стыль.
Аналагічна з JavaScript мы можам адкрыць тэгі сцэнара,
іншы тэг HTML мы не гаварыць аб нашай HTML відэа,
і напісаць JavaScript у паміж гэтымі тэгамі скрыптоў.
Таксама, хоць, як CSS, мы можа звязаць у непрацоўны CSS файлаў
і цягнуць іх у нашай праграме, што шлях.
З дапамогай CSS мы можам таксама, прабачце, з JavaScript
мы можам таксама пазначыць крыніца атрыбут тэга сцэнара
каб звязаць у JavaScript асобна, так што вам не
павінны напісаць яго ў паміж тэгамі сцэнар, мы
можа звязаць яго пры дапамозе што сцэнар тэг, а таксама.
І гэтак жа, як і ў выпадку з CSS дзе мы рэкамендавалі, што, верагодна,
ў вашых інтарэсах, каб напісаць Ваш CSS у асобным файле ў выпадку
Вы павінны змяніць яго, Аналагічна мы рэкамендуем
што вы пішаце JavaScript у асобныя файлы
і выкарыстоўваць крыніца тэгі сцэнара атрыбут, каб звязаць свой JavaScript
ў вашым HTML, вэб-старонкі.
>> Так JavaScript зменныя, мы будзем пачаць гаварыць аб сінтаксісе тут.
І мы пойдзем праз гэты від хутка,
таму што мы зрабілі гэта ў PHP, так усё гэта павінна быць даволі знаёмым.
Так зменныя ў JavaScript з'яўляюцца вельмі падобны на РНР зменныя.
Там няма спецификатор тыпу, і калі вы ўводзіце зменную,
Вы прэфікс з вар ключавое слова.
У PHP мы нешта зрабіць як гэта, знак даляра х.
Вось як мы паказалі пераменная, але няма, мы
не згадваюць тып зменнай наогул.
Мы хацелі б сказаць нешта накшталт Знак даляра х роўны 44, у PHP.
Калі мы рабілі тое Тое ж самае ў JavaScript,
мы б сказалі, вар х роўны 44.
Так вар накшталт нашага шляху ўвядзення зменнай.
Гэта, магчыма, трохі больш зразумелым чым проста даляра зменнай знакам.
>> Зноў жа, паколькі няма ніякіх тыпы дадзеных, мы маглі б зрабіць гэта
з любым тыпам дадзеных, радкі, што-небудзь яшчэ ўсё будзе вар.
Ўмоўныя, усе нашы старыя сябры з C і PHP
па-ранейшаму даступныя, так што ў нас ёсць, калі інакш, калі, інакш, выключальнік і пытанне
знак двукроп'я.
Перамыкач застаючыся гнуткім, як гэта быў у PHP, але ўсе з іх вы
знаёмыя з цяпер.
І сапраўды гэтак жа з пятлі старыя фаварыты час,
зрабіць час, і па-ранейшаму даступныя для нас.
Так, мы ўжо ведаем шмат з Асноўны JavaScript роду асноў
проста ў сілу таго, зусім няшмат веды зараз аб З і PHP.
>> А як наконт функцый у JavaScript?
Ну, падобны на PHP кожны функцыя ўведзеныя з функцыяй ключавое слова.
Вы кажаце, функцыі, а затым вам пачаць вызначыць сваю функцыю.
Што крыху адрозніваецца аб JavaScript,
хоць гэта здольнасць мець тое, што называецца ананімнай функцыяй.
Такім чынам, вы можаце вызначыць функцыі якія не маюць назвы.
Гэта тое, што мы сапраўды не бачыў раней.
Мы сапраўды выкарыстоўваць канцэпцыю з ананімнай функцыі
крыху пазней у гэтым відэа, таму што гэта будзе
зрабіць трохі больш сэнсу ў кантэксце калі мы бачым яго ў канкрэтнай сітуацыі
што я створаны тут.
Але давайце проста паглядзім на якой простага JavaScript
функцыя можа выглядаць.
>> Так што я пайшоў наперад і адкрыў свой CS50 IDE
і я ўжо запускаць Apache каб пачаць мой сервер працуе.
І ў мяне ёсць гэты файл адкрытае называецца home.html.
І я буду павялічваць трохі тут.
І ў прынцыпе, вы можаце бачыць Home.html гэта проста куча кнопак.
І я сцвярджаючы у верхняй тут што гэта раздзел JavaScript
матэрыялы.
Такім чынам, ёсць куча кнопак тут, але тое, што гэтыя кнопкі на самай справе?
>> Ну, мы накіруемся да майго IED, і я home.html адкрыць тут.
У самым пачатку, вось дзе я звязваючы
ва ўсіх маіх зыходных файлаў JavaScript.
Дакладна?
Так што я anonymous.js, clock.js, Я выкарыстоўваю атрыбут крыніцы
ў тэг сцэнара, каб звязаць у файле.
Так што я не напісаў ні JavaScript непасрэдна ў гэтым файле,
але я выцягнуў ва ўсіх JavaScript я напісаў асобна.
І калі мы пракруціць ўніз тут, гэта ўсе павінны выглядаць крыху знаёмыя
з трохі новага сінтаксісу.
Мы маем тут тэг загалоўка для функцыі і затым кнопку.
У мяне ёсць ўваходу, кнопка тыпу, і, мабыць, калі я націскаю яго,
Я збіраюся патэлефанаваць некаторым функцыя сігналу трывога дату.
І гэта, як мы можам роду пераблытаць трохі JavaScript і HTML.
Яны на самой справе гуляюць даволі прыгожа разам, і так, па-відаць, калі
Я націсніце на гэтую кнопку, я збіраюся каб выклікаць некаторыя функцыі абвесткі дату.
І сапраўды гэтак жа ёсць я вызначыў паводзін для ўсіх іншых кнопак, якія
знаходзяцца на гэтай старонцы home.html, якія мы будзем трымаць вяртання
каб у ходзе гэтага відэа.
Але давайце вернемся на тут і зірнуць
у clock.js, які з'яўляецца Файл JavaScript, што я
пісаў, што ёсць гэтая першая функцыя мы збіраемся, каб зірнуць на.
Як вы можаце бачыць, я пачынаю свой JavaScript функцыянаваць з функцыяй ключавых слоў,
і я даў гэты імя, гэта называецца абвесткі Дата.
Унутры ёсць, я, здаецца, стварыць Новы лакальная пераменная называецца бягучая дата.
І я збіраюся прызначыць роўнае на новую дату.
І мы маглі б атрымаць у шмат дэталь, як да таго, што дата,
і сапраўды настолькі JavaScript вялікі, што мы не можам
ахапіць усё ў адным відэа.
Але досыць сказаць, гэта будзе вярнуцца да мне элемент дадзеных, які
Інкапсулюйце бягучую дату і час.
Я захоўвання, што ў зменнай, што я па-відаць, збіраецца папярэдзіць бягучую дату.
>> Ну, тое, што робіць папярэджанне бягучая дата выглядае?
Давайце зірнем на сам файл таму на ў акне браўзэра.
Такім чынам, яшчэ раз, гэта кнопка, што я звязалі з гэтай, па імені функцыі.
І я націсніце яго там і паглядзіце, што ён зрабіў, гэта насцярожыла.
Гэта выскачыў гэты від скрынкі, кажучы што мяне бягучы час, па-відаць,
гэта 4 лістапада ў 10:43:43 раніцы.
І калі я націскаю яго зноў, цяпер гэта праз некалькі секунд, праўда?
Дык вось усё гэта робіць функцыя.
Калі я націскаю гэтую кнопку, яго ўсплывае папераджальнае паведамленне для мяне.
Так што на самай справе не занадта шмат, каб функцыі
што адрозніваецца ад PHP, проста трохі новага сінтаксісу
які пастаўляецца з працы з JavaScript.
>> Масівы ў JavaScript з'яўляюцца даволі простая.
Каб абвясціць масіў, вы карыстаецеся сінтаксіс квадратных дужак
што мы знаёмыя з PHP.
І падобна на PHP, мы Таксама можна змешваць тыпы дадзеных.
Так што гэта масіў, і з гэтых масіваў будзе
зусім законным JavaScript.
Адзін вось і ўсё цэлыя лікі, і адзін, што змешваюць розныя тыпы дадзеных.
>> Што-то вельмі розныя у JavaScript, праўда?
Гэта паняцце аб'екта.
Так што, магчыма, вы чулі пра аб'ектна-арыентаванага праграмавання.
Мы не робім шмат што з гэтага ў CS50, але мы зробім трохі пра яго
Тут у кантэксце JavaScript.
Цяпер JavaScript мае магчымасць паводзіць сябе як аб'ектна-арыентаванага праграмавання
мовай, але ён сам не выключна аб'ектна-арыентаваны
мова праграмавання.
І гэта зноў прыходзіць таму, чаму я сказаў, гэта
можа быць вельмі складаным, каб даведацца JavaScript, як ваш першы праграмавання
Мова, таму што гэта не сапраўды падыходзяць канкрэтнай парадыгмы.
>> З іншага боку гэта функцыянальны мова праграмавання.
Калі мы хочам, каб, функцыі накшталт вялікага боса чалавека, праўда?
Яны дыктуюць, што адбываецца ўсё астатняе.
Мы хочам змяніць зменныя, мы называем функцыі.
Мы робім тое, да функцый.
Аб'екты замест, У аб'ектна-арыентаванай мове,
аб'екты накшталт стаць зоркай і функцыі становяцца свайго роду другасным.
Але тое, што з'яўляецца аб'ектам, тое, што гэта паняцце аб'екта?
Ну, калі гэта дапаможа, думаю, Пра гэта на першага роду
з, як структуры C або структуры што мы даведаліся раней.
У C, структура змяшчае лік палёў,
і, магчыма, цяпер мы маглі б пачаць называць гэтыя ўласцівасці палёў.
Але ўласцівасці ніколі сапраўды стаяць на сваіх уласных, ці не так?
Калі я вызначыць структуру для аўтамабіля як гэта з наступнымі двума
поля або ўласцівасці, адзін А.М. лік за год аўтамабіля
і яшчэ 10 сімвалаў Радок для мадэлі аўтамабіля,
Я магу сказаць, што нешта накшталт гэтага, Я магу аб'явіць новую зменную
тыпу структура аўтамабіля Херб.
І тады я магу нешта сказаць як herbie.year роўная 1,963,
і herbie.model роўная Beetle.
Гэта нармальна.
Я выкарыстоўваю поля ў кантэкст структуры,
але я ніколі не мог проста нешта накшталт гэтага.
Дакладна?
Я не магу выкарыстоўваць імя поля залежыць ад структуры.
Гэта свайго роду фундаментальнай рэчы.
>> Так поля з'яўляецца асноватворнае значэнне для структуры Сі
вельмі падобныя на ўласцівасці быцця асноватворнае значэнне для аб'ектаў JavaScript.
Але тое, што робіць іх Асабліва цікава
з'яўляецца тое, што аб'екты могуць таксама мець што называюцца метады, якія сапраўды
проста прыгожае слова для функцый, якія ўласцівыя аб'екту, а таксама.
Так што гэта функцыя, якая можа быць толькі выклікаецца ў кантэксце аб'екта.
Толькі аб'ект, які вызначыў гэтая функцыя ўнутры ІТС,
калі вы думаеце пра структура, функцыя
вызначаецца ў тых вызначэнні Фігурныя дужкі структуры.
Дык гэта значыць толькі тое нешта структуры.
І гэта свайго роду тое, што мы робім Тут з аб'ектамі і метадамі.
Гэта ў асноўным, як мы вызначэння функцый,
мае сэнс толькі на канкрэтны аб'ект, і таму мы
назваць гэта метадам аб'екта.
І мы ніколі не можам назваць гэта Функцыя залежыць ад аб'екта,
гэтак жа, як мы не можам сказаць, год ці мадэль залежыць ад структуры ў З
>> Так функцыянальнае праграмаванне парадыгмы выглядаць так.
Функцыя, а затым, калі вы праходзіце ў аб'ект у якасці параметру.
У аб'ектна-арыентаванага праграмавання мовы, такога роду атрымлівае
перавярнуўся, і мы будзем думаць пра гэта, як гэта, object.function.
Так ён накшталт гэтага кропка Аператар зноў маючы на ​​ўвазе
што гэта свайго роду маёмасці або атрыбут самога аб'екта.
Але гэта тое, што аб'ект арыентаваная мова праграмавання
можа зрабіць, каб зрабіць функцыю патэлефанаваць па метадзе, зноў, што
гэта проста спецыяльная слова для функцыі што ўласціва аб'екту.
Гэта тое, што, што Сінтаксіс можа выглядаць.
І таму мы пачнем бачыць некаторыя з гэта ў кантэксце JavaScript.
>> Вы таксама можаце думаць аб аб'екце накшталт як асацыятыўны масіў,
які мы знаёмыя з PHP.
Запомніць асацыятыўны масіў дазваляе каб у нас пары ключ-значэнне, а не
мець індэксаў 0, адзін, два, тры, і гэтак далей, як мы прывыклі з C
масівы.
Асацыятыўныя масівы можна супаставіць словы, напрыклад, у відэа PHP,
мы гаворым пра Начынне піцы.
І такім чынам, мы мелі масіў званыя піцы, і мы
быў сыр быў ключ і $ 8.99 быў значэнне, а затым пепперони быў ключавым,
$ 9.99 быў значэнне, і гэтак далей.
І такім чынам мы можам таксама падумаць аб аб'ект роду падобныя на асацыятыўнай
масівам.
І гэты сінтаксіс тут будзе ствараць новы аб'ект
называецца Херб з двума ўласцівасці ўнутры яго.
Год, які прысвойваецца значэнне 1963, і мадэль, якая прысвойваецца радок
Жук.
>> І звярніце ўвагу, вось што я выкарыстоўваю адзінкавыя двукоссі ў JavaScript.
Вы можаце выкарыстоўваць адзінарныя або двайныя двукоссі калі вы кажаце пра радках.
Гэта проста традыцыйна справа, што ў большасці выпадкаў
калі вы пішаце JavaScript, вы проста выкарыстоўваць адзінарныя двукоссі.
Але я мог бы выкарыстаць падвойныя двукоссі тут, і што б выдатна, як добра.
>> Так памятаем, як у PHP мы мелі гэта паняцце
А для кожнага цыклу, што дазволіць нам перабраць усе значэння ключа
пары асацыятыўнай Масіў, таму што мы
не маюць гэтую здольнасць, каб перабіраць праз 0, адзін, два, тры, чатыры,
і гэтак далей?
JavaScript мае нешта вельмі падобнае, але гэта не называецца для кожнага цыклу,
гэта называецца па завесамі.
Так што, калі я сказаў мне, як Гэта, вар ключа ў аб'екце,
гэта свайго роду падобныя на кажучы для кожнага нешта неяк.
Але ўсё, што я раблю тут ітэрацыі праз усе ключы маёй аб'екта.
І ўнутры фігурных дужкі там, я б
выкарыстоўваць аб'ект ключ квадратныя дужкі для абазначэння да значэння ў гэтым ключавым месцы.
>> Акрамя таго, існуе нават іншы падыход.
Калі я проста клапоцяцца толькі пра значэння, я магу сказаць, ключ аб'екта,
і проста выкарыстоўваць ключ ўнутры.
Такім чынам, для вар ключа ў аб'ект, у мяне ёсць выкарыстоўваць аб'ект квадратныя дужкі
Ключ ўнутры цыклу.
Для вар ключ аб'екта, я магу проста выкарыстоўваць ключ ўнутры цыклу,
таму што я проста спецыяльна гаварыць пра каштоўнасці там.
>> Так што давайце, можа быць, узяць паглядзіце на розніцу
проста хутка паказаць вам, розніца паміж чатыры
у сабе і для якія не з вельмі спецыфічным Масіў, які мы маем тут, тыдзень масіў.
Так што я павінен знайсці новы масіў што я напоўнены сямі радкоў,
Панядзелак, аўторак, серада, Чацвер, пятніца, субота, нядзеля.
І я хачу, каб у цяперашні час ітэрацыі праз гэты масіў,
раздрукаваць пэўную інфармацыю.
Калі я выкарыстоўваю для цыклу ў раздрукаваць інфармацыю,
што вы думаеце, што я збіраюся атрымаць?
Ну, давайце зірнем.
І перш, чым мы пераскочыць да майго акна браўзэра,
проста ведаю, што console.log з'яўляецца свайго роду адзін
спосаб рабіць друку F у JavaScript.
Але тое, што кансоль?
Ну, гэта тое, што мы збіраемся ісці зірнуць на прама цяпер.
>> ОК, так што мы сюды ў маім акне браўзэра,
і я збіраюся адкрыць да маіх інструментаў распрацоўніка.
Зноў жа, я проста націскаючы F12 каб адкрыць інструменты распрацоўніка.
І заўважце, што тут на топ я выбраў кансоль.
Так што гэта паняцце з кансолі распрацоўніка,
і гэта дазволіць нам друкаваць інфармацыю з,
накшталт тэрмінала, але як вы ўбачыце крыху пазней,
мы таксама можам ўвесці інфармацыю ў ўзаемадзейнічаць з нашай вэб-старонцы.
Я збіраюся павялічыць трохі тут, і я збіраюся Цяпер націсніце на для тэсту ст.
І чатыры test-- Я не збіраюся паказаць вам код для яго прама зараз,
але вы атрымаеце яго, калі вы спампаваць зыходны код, які
звязана з гэтай video-- Проста для завесы ў
што мы бачылі толькі Секунду назад на слайдзе.
>> Так што я збіраюся пстрычка, які Кнопка і тут,
вось тое, што друкуецца ў Кансоль, 0, адзін, два, тры, чатыры, пяць,
шэсць.
Я не друкаваць інфармацыю ўнутры гэтых месцах масіва,
таму што я выкарыстаў для ў пятлі.
І ў целе цыклу я проста раздрукаваць ключ не прымаю ключ.
Але калі цяпер я ачысціць кансоль, і я пераключыцца на для тэсту, і чатыры з цеста
Я кажу, што выкарыстоўваць для завесы замест гэтага і раздрукаваць ключ,
калі я націсну, што цяпер я атрымліваю фактычныя элементы ўнутры майго аб'екта
ці мой масіў у гэтым выпадку.
Мой масіў дзён тыдня.
Я раздрукаваў панядзелак, Аўторак, серада.
Так што розніца паміж а пры ў пятлі, якая выводзіць
толькі ключы, калі вы проста выкарыстоўваць ключ ўнутры цела цыкла,
і для завесы, якая друкуе з значэнняў, калі вы выкарыстоўваеце толькі
Ключ ўнутры цела цыклу.
>> Добра, як мы цяпер пачынаем канкатэнацыі радкоў і, магчыма, змешваць
некаторыя зменныя з інтэрпаляцыяй як мы былі ў стане зрабіць у PHP?
Ну, мы даволі добра знаёмыя з гэтым з PHP.
Гэта, як мы хацелі б зрабіць гэта з дапамогай кропка аператар для аб'яднання радкоў.
У JavaScript, хоць, мы на самай справе выкарыстаць нешта
называецца плюс аператар, які гэта, можа быць, нават трохі больш
інтуітыўна, ці не так?
Мы дадаем кучу радкоў разам.
Такім чынам, давайце галаву назад і ўбачыць, што гэта
будзе друкаваць, калі мы спрабуем вывесці уся інфармацыя ў тыдзень масіва.
Усе правы, таму ў тут пад канкатэнацыі,
У мяне ёсць два варыянты, радок будынак V1 і затым радок будынак V2.
І мы ўбачым, чаму мы трэба V2 у секунду.
Але я збіраюся націснуць на Радок будынак V1, які
гэта код, які мы былі толькі зірнуць на,
console.log з усімі плюсамі.
Давайце паглядзім, калі друкуецца тое, што мы чакалі.
>> Панядзелак дзень нумар 01 тыдня, Аўторак, дзень нумар 11 у тыдзень.
Ну, што я спрабаваў там рабіць было атрымаць
гэта раздрукаваць панядзелак, дзень нумар Адзін з іх, аўторак дзень нумар два.
Але, падобна, я заўсёды друку адну.
Ну, чаму ж?
Ну, аказваецца, яшчэ раз зірнуць ў гэтай маленькай фрагменце кода тут.
Звярніце ўвагу, што мы выкарыстоўваем плюс аператар у двух розных кантэкстах.
>> І так вось, дзе магчыма ўсё што мы накшталт казалі,
О, гэта так выдатна.
Мы не займаемся з тыпамі дадзеных больш.
Але вось дзе то што мы губляем тыпы дадзеных
можа на самай справе быць трохі праблемы для нас.
Цяпер, што аператар плюс выкарыстоўваецца для канкатэнацыі радкоў і складання лікаў
разам, JavaScript мае каб зрабіць свой лепшы здагадка
а тое, што я хачу, каб гэта зрабіць для мяне.
І ў гэтым выпадку, гэта не адгадаў.
Гэта проста счапляюцца дзень, які будзе 0, адзін, два, тры, чатыры, пяць ці шэсць,
і затым ён проста аб'ядноўваюцца што і тады злучаюцца сябар.
Гэта на самай справе не дадаць іх разам.
І таму гэтыя мовы, PHP і JavaScript,
што абстрагуюцца гэта паняцце тыпаў,
Вы не павінны мець справу з ім больш.
Яны да гэтага часу тыпы пад капотам.
І мы можам, у сітуацыях, як гэта, выкарыстоўваць гэты факт
кажучы нешта як можа быць, гэта, што
кажа JavaScript, да чынам, ставіцца да гэтага як цэлае,
не разглядаць яго як радок, нават хоць мы разам радкоў змешвання
і цэлыя тут.
>> Гэта проста адна з тых рэчаў што, здаецца, настолькі вялікі, у кантэксце
што мы не павінны справу з тыпамі больш,
але часам вы будзеце сутыкнецеся з сітуацыяй,
дакладна як гэта, дзе тое, што Вы не павінны кантраляваць тыпы
можа мець непрыемныя наступствы на вас калі вы не будзеце асцярожныя.
І таму, калі мы поп-зваротна да IDE, я збіраецца ачысціць свой пульт зноў,
і я збіраюся націснуць радок Будынак другой версіі, якая
дзе я выкарыстоўваць гэтую функцыю разбору Int.
Зараз гэта раздрукоўкі Інфармацыя, што я чакаў.
Дзень нумар адзін у панядзелак, аўторак дзень нумар два, і гэтак далей.
>> Такім чынам, давайце пагаворым пра функцыі зноў.
Я абяцаў, што мы будзе казаць аб ананімнага функцыі, і зараз кантэкст, што
нарэшце, прыбыў.
Таму, перш чым мы гэта зробім, давайце зноў казаць аб масівах на секунду.
Так масівы ўяўляюць сабой асаблівы Выпадак аб'екта.
На самай справе, усё ў JavaScript на самай справе аб'ект.
Так функцыі з'яўляюцца Асаблівы выпадак аб'екта,
цэлыя лікі спецыяльная выпадак аб'екта,
але масівы спецыяльна маюць шэраг метадаў.
Памятаеце, таму што яны аб'ектаў, яны могуць мець ўласцівасці і метады.
Яны маюць шэраг метадаў, якія могуць быць ужытыя да гэтых аб'ектаў.
Там гэта метад, званы памер, array.size,
якія будуць вяртацца ў Вы, як вы маглі б чакаць
колькасць элементаў у масіве.
array.pop, накшталт як наша паняцце з'яўляюцца ад
стэка, калі вы памятаеце, з нашага стэкі відэа,
выдаляе апошні элемент з масіва.
Array.push дадае новы элемент да канца масіў.
Array.shift з'яўляецца свайго роду як DQ, гэта зрошчвання з
самы першы элемент масіва.
>> Але ёсць і іншая спецыяльная Спосаб масіва называецца карту.
І гэта свайго роду цікавая канцэпцыя.
Так што ідэя карце?
Вы на самой справе ўбачыце, што гэта у шэрагу іншых моў,
і мы не гаворым пра Сартаваць картографаў карту тут,
мы гаворым пра функцыі адлюстравання.
У кантэксце мы гаворым тут, карта
гэта спецаперацыя мы можа выконваць на масіў
прымяняць пэўную функцыю да кожнага элементу гэтага масіва.
і такім чынам, мы сказалі б у гэты выпадак, можа быць, array.map,
і ўнутры яго, мы перадаем ў карце ёсць функцыя, што мы хочам
для нанясення на кожны асобны элемент.
Так што гэта свайго роду аналагам дапамогай пятля для перабору кожнага элемента
і прымяніць прыватнасці функцыю да кожнага элементу,
проста JavaScript была пабудавана ў гэта Паняцце адлюстравання, якія могуць прымяняцца.
І гэта вялікі кантэкст казаць аб ананімнай функцыі.
>> Так што давайце, у нас ёсць гэты масіў цэлых лікаў.
Гэта называецца НУМС, і ён атрымаў пяць рэчы ў ім, адзін, два, тры, чатыры,
пяць.
Цяпер я хачу, каб адлюстраваць некаторыя Функцыя на гэтым масіве.
Я хачу, каб функцыя прымяняецца да кожнага элементу масіву.
Ну, давайце скажам, што тое, што я хачу, каб зрабіць, гэта проста ў два разы ўсе элементы.
Што я мог зрабіць, гэта проста выкарыстоўваць цыкл для вар я роўная 0, я менш
або роўна 4, я плюс, плюс, і затым двойчы кожны нумар.
Але я таксама магу зрабіць нешта накшталт гэтага.
Я магу сказаць, НУМС раней быў адзін, два, тры, чатыры, пяць,
Зараз, аднак, я б хацеў, каб вы прымяніць адлюстраванне на гэтым масіве
дзе я хацеў бы вас падвоіць кожны нумар.
І гэта менавіта тое, тое, што тут адбываецца.
Але заўважце, што я перадаю у якасці аргументу для адлюстравання.
Гэта ананімная функцыя.
І заўважце, я не даў гэтая функцыя імя,
Я толькі даў яму спіс параметраў.
І так гэта прыклад з ананімнай функцыі.
>> Мы наогул ніколі не назваў бы гэта функцыя па-за кантэкстам мапе.
Мы вызначаючы яго ў якасці параметру на карту, і такім чынам, мы сапраўды ня
павінны мець для яго імя, калі Адзінае, што клапоціцца аб карце
і гэта вызначаецца права там унутры карты.
І так гэта ананімная функцыя.
Мы не змаглі зрабіць гэта раней.
Карта некаторую функцыю, што прымае адзін параметр, Num,
і што, што робіць функцыя з'яўляецца вяртаецца Уяўная раз 2.
І так пасля гэтага Адлюстраванне быў ужыты,
гэта зараз нейкія Nums знешнасць як, два, чатыры, шэсць, восем, 10.
І мы будзем трашчаць на мой акно браўзэра і проста
зірніце на гэта вельмі хутка, як добра.
>> Так што ў мяне яшчэ адну кнопку тут у маёй хатняй старонцы званае падвойнае.
І калі я націсніце двойчы, і ён кажа мне, перш чым ён быў адзін, два, тры, чатыры,
пяць праз два, чатыры, шэсць, восем, 10.
І калі я вярнуся і націсніце двойчы зноў, два, чатыры, шэсць, восем, 10.
А пасля, чатыры, восем, 12, 16, а затым 20.
І што я раблю ў гэтай функцыі?
Ну, калі мы проста поп да IDE, і Я цягну маю ананімную функцыю, тут
на лініі сем праз 13, я рабіць хоць трохі фантазіі працу тут,
але я проста раздрукаваць што ў цяперашні час у масіве.
Затым у радку 16, 17, і 18, ёсць мая карта.
Гэта дзе я ўжываю гэтую падваенне функцыя кожнай элемента.
А потым крыху далей ўніз, Я проста раблю тое ж самае
Я рабіў раней, толькі цяпер я раздрукаваць змесціва масіва
пасля гэтага.
Але ўсё, што я зрабіў тут проста выкарыстоўваць ананімную функцыю
на карту праз увесь масіў.
>> Так што яшчэ вялікая тэма, каб гаварыць аб ў JavaScript з'яўляецца паняцце падзеі.
Падзея гэта тое, што проста адбываецца калі карыстальнік ўзаемадзейнічае з вашага вэб-
старонка, таму, магчыма, яны нешта націсніце, ці, можа быць, старонка завяршэння загрузкі,
ці, можа быць, яны пераехалі іх мышы над чымсьці,
або яны набралі-то ў полі ўводу.
Усе гэтыя рэчы з'яўляюцца падзеі што адбываюцца на нашай вэб-старонцы.
І JavaScript мае Магчымасць падтрымліваць нешта
называецца апрацоўшчык падзей, які з'яўляецца функцыяй зваротнага выкліку,
рэагуе на HTML выпадку.
І тое, што функцыя зваротнага выкліку?
Ну, гэта наогул проста яшчэ адзін імя для ананімнай функцыі.
Гэта функцыя, якая рэагуе на падзеі.
І гэта, дзе мы прыходзім да Ідэя звязвання пэўных функцый
у прыватнасці атрыбуту HTML.
Большасць HTML элементы маюць Падтрымка атрыбуту
што мы не гаворым пра ў HTML відэа нешта накшталт мышы на
або пры навядзенні або ад нагрузкі, усе гэтыя падзеі
што вы можаце пісаць функцыі што здзелка з гэтымі падзеямі
калі гэтыя падзеі адбываюцца на вашай вэб-старонцы.
>> І так можа быць, ваш HTML выглядае наступным чынам.
І ў мяне ёсць дзве кнопкі тут, адна кнопка і кнопка два,
і вось я ў цяперашні час не вызначана іншае,
але гэта дзе атрыбут Клікніце па-відаць, частка маёй HTML тэга.
Такім чынам, відавочна, калі я вызначаю тое, што адбываецца ўнутры гэтага атрыбуту,
гэта будзе нейкі JavaScript функцыя, якая рэагуе на падзеі
як мяркуецца, націснуўшы на адна кнопка або кнопка два.
>> Што крута пра гэта што мы можаце напісаць апрацоўшчык падзеі радавой.
І гэта апрацоўшчык падзеі будзе стварыць аб'ект падзеі.
І аб'ект падзеі скажуць нам які з двух кнопак была націснутая.
Цяпер, як гэта працуе?
Ну, гэта можа выглядаць наступным чынам.
Такім чынам, мы спачатку вызначым нашы кнопкі мець адказ на зваротны выклік
функцыя, якая будзе называцца калі кнопка націснутая,
мы будзем называць абвесткі назву падзеі.
І заўважце, у абодвух выпадках мы праходзячы па гэтым параметры падзей.
Так мы называем гэтую функцыю або калі гэтая функцыя
спрацоўвае па падзеі адбываецца, ён збіраецца стварыць гэты аб'ект падзеі
і перадаць яго ў якасці Параметр, каб папярэдзіць імя.
І, што аб'ект падзеі будзе ўтрымліваць інфармацыю
аб, якая кнопка была націснутая.
І як гэта зрабіць?
Ну, гэта можа выглядаць наступным чынам.
Так што цяпер у маёй асобна Файл JavaScript, я мог бы
павінны знайсці гэта Функцыя абвесткі імя, якое
зноў прымае гэты параметр падзеі.
А потым тут, дзе я выяўлення Кнопка, якая была выкліканая,
вар трыгера роўная падзея кропка зыходны элемент.
Што было крыніцай, які стварыў гэты аб'ект падзеі, які быў прыняты ў?
Ці было гэта адна кнопка ці гэта кнопка два?
>> А потым вось усё, што я раблю, раздрукоўкі trigger.innerhtml.
Ну, у дадзеным выпадку, у гэтым Кантэкст, trigger.innerhtml
гэта тое, што напісана на кнопцы.
Проста так здарылася, калі скокнуць таму на секунду, што б
быць тое, што ў перыяд паміж гэтымі тэгамі кнопкі.
Гэта будзе адна кнопка або кнопка два.
І давайце зірнем на як гэта падзея будзе апрацоўшчык
глядзець, калі ў нас было гэта працуе на практыцы.
>> Такім чынам, перш за ўсё, вы, адкрылі events.js,
што файл JavaScript, дзе Я вызначыў гэтую функцыю.
І як вы можаце бачыць, гэта ў значнай ступені менавіта тое, што
мы толькі што бачылі на слайдзе секунду таму.
І я буду пераходзіць да Галоўная старонка мы выкарыстоўвалі.
А ў мяне вось кнопка адно і кнопку два.
І я буду націсніце на кнопку адзін.
Вы націснулі на кнопку адзін, калі вы можна ўбачыць прама тут, у баявой гатоўнасці.
ДОБРА.
Націсніце на кнопку два, вам націснуў на кнопку два.
>> Такім чынам, абедзве кнопкі маюць Выклік ж функцыя, праўда?
Яны абодва былі напагатове імя падзея, але гэты аб'ект падзеі
які ствараецца, калі мы націскаем на ён кажа нам, якая кнопка была націснутая.
Мы не павінны напісаць два асобных функцыі або здзелка з наяўнасцю
прайсці любую дадатковую інфармацыю.
Мы проста спадзявацца на тое, што JavaScript будзе
зрабіць для нас, што для стварэння, што Сартаваць аб'екта падзеі ад нашага імя.
Там вельмі шмат больш, каб JavaScript чым тое, што мы разгледзелі ў гэтым відэа,
але якія маюць гэтыя фундаментальнае павінна вам
даволі доўгія шляху да навучанне ўсё, што вам
трэба ведаць аб гэтым цікавы мову.
Я Дуг Лойд.
Гэта CS50.