>> Добра.
Так, JavaScript.
Амаль усё ў гэтым пакоі верагодна, мае пэўную ступень
з камфорт з ім ці гэта быў шлях назад, калі ў SC50
ці гэта было асабістым вэб-праектаў або нават
калі вы зрабілі трохі гэта з у мінулым PHP базавы праект,
але для найбольш частка, многія з вас,
нават калі ў вас ёсць некаторы суцяшэнне
з JavaScript, можа быць, не былі прынятыя
як належнае, як моўныя работ і тое, што адбываецца
на пад капотам і тое, што мы збіраемся, каб паспрабаваць
зрабіць сёння адслойванне некаторыя тэхнічныя слаёў
аб тым, што JavaScript з'яўляецца, як ён адрозніваецца ад мовы
як PHP, як можа быць выкарыстоўваецца не толькі на баку кліента
але і на боку сервера і затым засяродзіцца вельмі канкрэтна
на базе гэтай структуры, заўважыце ніякай JS які па сутнасці з'яўляецца час працы,
Праграма, з якой вы можа выконваць код JavaScript,
на боку сервера, і гэта становіцца ўсё больш папулярным роду
з па таго ж гэты рост дні, верагодна, Сячы і PHP
і Python, і вы ўбачыце
што ён мае некаторыя даволі магутныя функцыі з дапамогай некаторых
з убудаванага мовы канструкцыі.
Але, па-першае, некаторыя з лёгка рэчы проста, каб нагадаць вам
пра тое, як гэтая мова працуе і калі ў вас ёсць праблемы з адлюстраваннем любой
гэтага, проста крык , І мы будзем карэктаваць.
Так, адзін як у PHP ёсць няма паняцце асноўнай функцыі,
вы проста пачаць пісаць код
і вы можаце для іх інтэрпрэтаваць яго зверху ўніз.
У кантэксце браўзэра
або ў бок нешта сервера мы ўбачым некаторыя прыклады
ў трохі.
Умовы, сінтаксічна эквівалентна РНР а таксама C,
C + + і некаторых іншых мовах так проста каб даць вам пачуццё
пра тое, як мы маглі б структураваць яго,
ёсць толькі кананічнае стан.
Лагічныя выразы, сапраўды такі ж сінтаксічна як вы бачылі
ў тых жа сябра мовы, як для Öring
і заканчваючы рэчы разам.
JavaScript мае перамыкачы, гэтак жа, як PHP і іншыя зробім
і вы не абмежаваныя, як і у З да інтэгральных прымітываў
як сімвалаў і цэлых лікаў можа на самай справе рабіць іншыя тыпы значэнняў.
Завесы. Дык вось, гэта сапраўды гэтак жа
і, верагодна, на тузіне моў, у той час як завесы, рабіць, пакуль завесы
а затым гэты трук тут.
Такім чынам, гэта свайго роду вядомы як хуткае пералік
і гэта вельмі разумны спосаб проста як у PHP рабіць
для кожнага ФУ як бар Вы можаце так жа,
у аб'екце JavaScript, дзе аб'ектам з'яўляецца імя
з зменнай тут, скажам, Var I у аб'екце і на кожнай ітэрацыі
з гэтай завесы, я гэта будзе адзін
з ключоў з гэтага аб'екта.
Так што, калі ў вас ёсць аб'ект для студэнт, і студэнт мае ідэнтыфікатар
і імя і дом, итеративно я вазьму
ад кошту ID, назва і дом, і вы можаце для гэтага індэкс
ў аб'ект, як быццам гэта масіў з дапамогай квадратных дужак
абазначэння, каб атрымаць значэнне з ключавых ID ці імя
або дом і гэтак далей.
І насуперак распаўсюджаным Здагадка, аб'екты JavaScript,
ўласцівасці не абавязкова гарантавана
у тым жа парадку, гэта таксама верным PHP так што не думайце
што ўсё застанецца у тым жа парадку
што вы паклалі тыя ключ пары значэнняў у аб'ект.
Як наконт масіваў?
Там у некалькі спосабаў, напісаць яго сінтаксічна
але гэта, верагодна, найбольш распаўсюджаных у цяперашні час толькі з дапамогай квадратных
Кранштэйны абазначэння.
Такім чынам, гэта зменная, Тэлефонныя нумары, якія змяшчаюць масіў
з шасці лікаў там, вось простая радок
і звярніце ўвагу, што адсутнічае З гэтых прыкладаў,
што JavaScript па-відаць, не хапае.
Так. Так, няма ніякага паняцця тыпізацыі, вядома, не
У гэтым кантэксце тут, але гэта сапраўды радок.
Так, JavaScript мае віды , І гэта было сапраўды масіў
якая сама з'яўляецца тып і кожны з элементаў
у гэтым масіве былі тыпу лік як JavaScript называе іх.
Такім чынам, гэта слаба тыпізаванай мова і мы ўбачым,
што JavaScript як PHP мае адзінкавы аператар
і іншыя механізмы на самай справе праверкі якога тыпу
некаторых пераменная як для праверкі памылак
і для іншых прыкладанняў.
А вось аб'ект ўзор які змяшчае толькі ідэнтыфікатар і імя.
А цяпер звярніце увагу, што мы з дапамогай фігурных дужак,
водступ і белы прастора з'яўляецца свайго роду бессэнсоўна
і гэта заяўляе зменная, клічуць Роб
і чый ID роўны 1, а Тып дата тут наш нумар
і радок адпаведна.
І то гэта нешта крыху адрозніваецца
калі вы калі-небудзь зрабілі нічога з Ajax ў гэтыя дні?
Вы, напэўна, выкарыстоўваць Аб'ект, як гэта
але тое, што варта адзначыць, тут?
Што сінтаксічна калі-небудзь такія розныя, літаральна за пару
рэчаў паміж дадзеным прыкладзе якія, па агульным прызнанні менш
і гэта больш прыклад.
Так, спачатку ў непрафесіянала Тэрмін, што гэта?
Што такое тып персанал б вы сказалі?
ОК, гэта масіў, гэта масіў з чаго?
>> Аб'екты.
>> Добра, гэта масіў аб'ектаў.
А зараз, увага толькі на адным - любы з гэтых аб'ектаў,
што па-іншаму паміж гэтым і гэтым?
>> Ключы з'яўляюцца радкамі.
>> Да. Такім чынам, ключы з'яўляюцца радкамі,
і ключы фактычна радкі ў абодвух выпадках
і гэта з'яўляецца свайго роду ідыёцкай
на мой погляд гістарычнага дызайну Рашэнне, калі вы карыстаецеся
JSON, JavaScript Object Notation,
які з'яўляецца па сутнасці транспартны фармат
для перадачы дадзеных Звычайна ў сеткі
паміж кліентам і серверам, вы павінны памятаць,
што гэта на самай справе не дзейнічае JSON і гэта адна
з гэтых FYIs калі вы калі-небудзь біцца галавой аб сцяну
на працягу некалькіх хвілін без усялякіх Прычына, гэта не дзейнічае JSON
таму што ключы фактычна не каціруецца.
JSON-ідыёцку патрабуе, каб ключы каціравацца не толькі,
але што яны будуць ўдвая цытуе, адзінарныя двукоссі не хапае.
Так, па-дурному дробязь і больш весялосці тым,
для сённяшніх мэтаў, але гэта занадта будзе сапраўдным JavaScript
гэта проста не - Адваротнае няправільна.
Добра.
Такім чынам, мы ўбачым шмат больш за тое.
Добра.
Такім чынам, вось JavaScript сінтаксічна, верагодна, даволі
знаёмыя, каго з вас, у каго ёсць ніколі не выкарыстоўвалі наяўнасць да
гэта не велізарны скачок ад PHP ці большасць любы працэдурны мова
што вы маглі б выкарыстоўваць.
Такім чынам, сёння мы засяродзімся на цікавыя аспекты
з JavaScript у прыватнасці ў кантэксце не JS
але не выключна, таму што да гэтага часу вы, верагодна,
калі вы выкарыстоўвалі Javascript, выкарыстоўвалі яго ўсярэдзіне браўзэра.
Такім чынам, незалежна JS не з'яўляецца асяроддзем затым у трохі збіраецца
каб дазволіць нам доступ JavaScript код кліента -
на боку сервера, але па-першае, давайце зірнем
у чымсьці, што трохі больш на баку кліента.
Так, я пайшоў у і гэта звязаныя на сайце курсы,
калі вы хочаце, каб гуляць разам, Ёсць два падкаталогі
ў сучасным Zip выкліканага Крыніца шпількі паштовы на сайце
і гэта толькі Некалькі прыкладаў успамінаць
рэчаў, якія вы, магчыма, бачылі раней, і я накшталт пабудаваў іх
у параўнанні з простай або злёгку складаней дражніць
некаторыя з асаблівасцяў з JavaScript.
Такім чынам, давайце ісці наперад і прымаць глядзець, напрыклад, на гэта.
Так, на жаль міргаюць тэг быў забіты некалькі гадоў таму
як спосаб патрапілі прыгажэе і прыгажэе
і міргаюць тэг быў літаральна якая адкрывае дужка міргаць якая зачыняе дужку
і гэта свайго роду няма больш з намі.
Але, мы ўсё яшчэ можам адрадзіць гэтая ідэя тэга, проста выгляд
думаць пра яго лагічна, як вы ідзяце
аб тым, каб нешта накшталт гэта міргаць інтуітыўна?
Мяркуючы, што вы ведаеце крыху трохі JavaScript і CSS ці
у гэтай кропцы, гэта Добра, калі вы не робіце.
>> Усталяваць тайм-аўт і схаваць гэта тое пасля таго як я буду адзначаць яго
і паказаць яго зноў.
>> Так, выдатна.
Гэта свайго роду праграмаванне 101,
як бы вы дасягнуць візуальны эфект, як гэта?
Ну, вы так ці інакш павінны паказаць што-то
а затым схаваць нешта, шоу нешта, нешта схаваць
і як прапануе Джонатан з дапамогай нейкі тайм-аўт,
нейкая графіка вы можаце зрабіць гэта неаднаразова без неабходнасці
выкарыстоўваць пятлю або нешта ў гэтым родзе.
Такім чынам, дазвольце мне перайсці ў Blink-0.html
і дазвольце мне скарачацца шрыфт крыху
так што больш гэтага падыходзіць.
І давайце зірнем на тое, што тут адбываецца.
Такім чынам, у першую чаргу, заўважыць, што цела
гэтай старонкі супер просты, ўнутры корпуса
старонкі проста дзіваў.
Я адвольна зададзенай ID прывітання
і што можа быць што заўгодна тых часоў, пакуль яно унікальна
а потым я проста ёсць некаторыя просты тэкст, прывітанне свет.
Так што, калі я зараз прагортку уверх, заўважыць некаторыя пухнаты стыль.
Так, я кажу, рэзкае прывітанне, якое, як вы ведаеце,
ў CSS проста азначае, адназначна ідэнтыфікацыі элемента
з ідэяй прывітання,
памер шрыфта будзе адвольна быць гэтым, рэнтабельнасць і тэкст выраўноўвання.
Так, нецікава эстэтычныя падрабязнасці
каб прыкладна адцэнтраваны тэкст.
Такім чынам, цікавае, ў тэгу сцэнара тут
якія я, здараецца, пакласці ўнутр кіраўніка старонкі.
Так, Мы вырабім - вы можаце зрабіць гэта ў любым ліку шляхоў
і мы ўбачым, некаторыя ітэрацыі гэтай жа праграмы
але давайце пачнем з самага верху.
Такім чынам, я заявіў Функцыя называецца міргаюць
і, мабыць, ён выкарыстоўвае гэты убудаваны метад DOM званай
GetElementById якая, магчыма, адным з найбольш магутных метадаў
што вы атрымаеце з скрынкі з JavaScript шукаеце
"Прывітанне" не павінен быць падвойныя двукоссі, як гэта было
у HTML альбо у парадку да тых часоў,
як вы стылістычна стасуюцца ў гэтыя дні я адважуся сказаць,
многія людзі выкарыстоўваюць Java, адзінарныя двукоссі у JavaScript,
падвойныя двукоссі ў HTML, але гэта сапраўды не мае значэння
тых часоў, пакуль вы паслядоўныя.
Так, тут, калі вы не знаёмыя, Вы можаце фактычна атрымаць доступ да
з JavaScript CSS ўласцівасці на элементах.
Так, звярніце ўвагу, што ў мяне ёсць заявіў зменная з імем спраў
і захоўваецца ўнутры з гэтай зменнай,
спасылка на тое, што што DOM элемент.
Так што, калі вы ўспомніце CS50 або любы клас, у якім вы думалі,
аб дрэвападобных структур і ДОМ, аб'ектнай мадэлі дакумента,
гэта ўсяго толькі спасылка да вузла ў дрэве,
, Які ўяўляе гэтую старонку
і калі div.style.visibility Ўласцівасць роўна, роўна, роўна,
схаваны, то я проста хочаце пераключыць яго
як гэта было прапанавана Джонатан у адваротным выпадку я хачу
для пераключэння яго на схаваны.
Цяпер, як і ў бок, чаму тройка роўная там?
Або тое, што ў тым, што ў параўнанні з падвойныя роўна?
>> Строгая эквівалентныя.
>> Жаль.
>> Строгая эквівалентныя.
Такім чынам, гэта адзінкавыя аператары
дзе на вы правяраеце ня толькі значэнне зменнай
у якасці раўнапраўнага, роўнай сэнсе але і тып з яго.
Такім чынам, нават пры тым, што ў нас ёсць не паказана так далёка любыя дадзеныя
тыпы для любых зменных у гэтай або любы з слайдаў,
ёсць такі тып звязаны с, што радок схаваная
з гэтым значэннем, схаванай і Гэта, вядома, радка.
Такім чынам, у гэтым выпадку не мае значэння
таму што няма ніякага спосабу, якім мы збіраемся аб'ядноўваць радок
"Схаванай" з іншае значэнне
але гэта часта з'яўляецца добрым звычка, я б сказаў, каб атрымаць
ў выкарыстанні роўныя, роўныя,
Знак роўнасці, як правіла, добрая рэч.
Гэта зробіць ваш код больш надзейнай як у PHP, але
і ў JavaScript таму што вы будзеце працаваць
у зрэдку кутніх выпадках дзе значэнне можа быць роўна нуля
што вы правяраеце для і нуля можна аб'яднаць з ілжывым
ці можа быць ніякіх і, як і ў PHP,
Javascript таксама можа мець некалькі ілжыва значэння, дзе на нуль
, ілжывае і якія не маюць вызначана можа ўсё вырашыць няяўна
хлусня.
Але калі вы сапраўды хоча для праверкі асаблівае значэнне
як нуля, лік або ілжывае лагічнае то ў вас ёсць
выкарыстоўваць гэты аператар.
Так, гэта можа адбыцца, каб атрымаць у любым выпадку, нават пры тым, што тут,
гэта свайго роду бессэнсоўна таму што мы ведаем мы правяраем
для радковага значэння, і гэта не будзе што-небудзь яшчэ.
Такім чынам, вось магія затым, калі я пракруціць ўніз да гэтай лініі тут,
мяркуючы па ўсім, пабудаваны ў аб'ект вокны
і гэта з'яўляецца асаблівасцю браўзэр вы маглі атрымаць доступ
каб гэта супер глабальная аб'ект, званы Акно,
ўнутры, што з'яўляецца некаторыя функцыі,
калі кавалак, які усталяваны інтэрвал
і гэта займае, мабыць, якія аргументы?
Так.
>> Выклік функцыі і час.
>> Добра. Так, функцыя тэлефануйце і час
і так асабліва спасылку на функцыю,
паказальнік на функцыю у пэўным сэнсе
і гэта функцыя што адбываецца
каб выконвацца кожны шэраг мілісекунд і ў гэтым выпадку
гэта кожныя 500 мілісекунд.
Так, гэта спосаб індукаваць эфектыўна і бясконцы цыкл
без выкарыстання ітэрацыі, але замест гэтага кажучы наяўнасць
з рухавіком ўнутры браўзэра
рабіць гэта кожны 500 мілісекунд або блізкая
у 500 мілісекунд, як ён можа,
атрымліваецца, што пад капотам,
ёсць тое, што называецца падзея цыкл, і мы вернемся да гэтага
ў кантэксце вузла JS што проста пастаянна роду
сядзець там, спінінг, чакае працы трэба будзе зрабіць
і як толькі ён рэалізаваць,
500 мілісекунд прайшло міргаюць атрымае зноў заклікаў
і зноў і зноў з'яўляецца побач з любой іншай працы
што трэба рабіць.
Такім чынам, што мы можам палепшыць тут?
Ну, дазвольце мне адкрыць да міргаюць-1.html
і прадэманстраваць Blink-1.html
як эстэтычна зусім ідэнтычныя.
Такім чынам, што мы можам палепшыць тут?
Ну, заўважыце, што ён было збольшага бескарысна
вызначыць функцыю з імем Blink таму колькі
у колькіх месцах зрабіў я выклікаць функцыю міргаць?
>> Толькі адзін раз.
>> Так, адзін.
Так, гэта не было дрэнна, у Справа ў тым, што гэта, верагодна, даволі
прама наперад.
Я вызначыў функцыю мігцення, я Функцыю міргаць шляхам
гэтага параметру, але тэхнічна,
не было прычынай гэта і агульная парадыгма
у JavaScript з'яўляецца на самой справе выкарыстоўваць лямбда-функцый
як вы памятаеце з 51 ці ананімныя функцыі
дзе, калі вам не трэба Імя для функцыі,
калі вы толькі назваўшы яго вядома, у адным месцы,
навошта загрувашчваючы код, захламленых розум праграмістаў
і ваша імя прасторы сапраўды з знакамі
што вы сапраўды не трэба клапаціцца аб.
Дык вось, у гэтай версіі тут,
заўважыць, што я тэлефаную window.setInterval непасрэдна
на самым версе майго тэг сцэнара затым я перадаю
ў безназоўнай функцыі што ня прымае аргументаў
і гэта выдатна нармальна, а затым цела
гэтай функцыі аказваецца гэта ідэнтычна таго, што было раней
і толькі сінтаксічны Розніца пояс
тут побач з 500.
Я зачынення корпуса функцыі
і тады я кажу выканаць гэты папярэдні код,
кожныя 500 мілісекунд.
Так, вельмі нязначнае змяненне
але крок да таго, што гэта верагодна, больш элегантны
Рэалізацыя гэтага.
Так, давайце гэты крок далей, калі я цяпер ісці
ў імгненне два, вы будзеце см. агульную бібліятэку,
дзеянне якога адбываецца
каб быць цалкам неістотным эстэтычна, але калі мы ідзем
у версіі два тут, апавяшчэнне , Што на верхняй частцы маёй галавы,
Я уключыў Апошняя версія JQuery.
І потым, тут, Я проста прыбралі
да кода трохі, гэта не збіраецца быць пацешным свет
працягваць выкарыстоўваць убудаваныя функцыі DOM
і быццам сырога JavaScript.
На самай справе, JQuery, як вы можаце ведаю стаў настолькі папулярным,
што большасць людзей проста Канфлікт JQuery з JavaScript
але на самой справе проста суппер карысна бібліятэка, напісаная
хлопец па імені Джон Резиг і так як іншыя
што ёсць проста робіць шмат стомных рэчаў
у JavaScript прасцей і больш кароткім.
Такім чынам, у гэтым выпадку тут, што адбываецца?
Так, у мяне ёсць гэты від знак даляра, больш падрабязна пра гэта
праз хвіліну, затым гэта селектар CSS.
Такім чынам, гэта вельмі падобна на дух да таго, што я рабіў раней,
але на гэты раз, я літаральна з выкарыстаннем хэш-тэг
каб паказаць унікальны ідэнтыфікатар, званы прывітанне
а затым, па-відаць . CSS гэта метад пабудаваны
ў да таго, што аб'ект з'яўляецца тое, што я толькі што стварылі
і я правяраю значэнне ключа бачнасці.
І калі значэнне гэтага ключа роўна, роўна, роўна, схаваныя,
затым я збіраюся пераключыць яго і Я збіраюся перамыкаць яго на гэты раз
з дапамогай таго ж метаду па-відаць, перагружаны
у тым сэнсе, што яна мае дзве розныя подпісы,
адзін з адным аргументам і адзін з двума аргументамі,
другі з якіх з'яўляецца сетэр,
першы з якіх з'яўляецца здабытчык, так бы мовіць.
І калі цікава і калі вы хочаце ніколі не глядзеў на гэта,
калі мы ідзем у jquery.css спадзяюся хітом сапраўды гэта
і вы можаце ўбачыць больш фармальнае тлумачэнне
што мы проста выкарыстоўваць гэта, . CSS з імем ўласцівасці
а затым сетэр кропка CSS
з імем ўласцівасці і значэнне.
Так, нязначна чысцей, але звярніце ўвагу на выгляд карціны тут
з кожнай ітэрацыі гэтага кода,
мы накшталт робіць яго тужэй і тужэй і тужэй
і там кажуць лепш дызайн
так як мы выкарыстоўваем кагосьці чужой код, які ўхіляецца
некаторыя складанасці.
Такім чынам, цяпер давайце зробім гэта яшчэ прасцей.
І на самай справе, калі я выдалю ўсе каціроўкі вы ўбачыце проста ўсё
каментаваць вы ўбачыце, як проста гэтая атрымала.
Адзіная розніца тут, вядома, з'яўляецца
што я выкарыстоўваю перамыкач метад, які таксама пастаўляецца убудаваны
і JQuery і гэта толькі
таму што хтосьці іншы напісаў код
што на самой справе перамыкае налада бачнасці
любога DOM элемента што вы пасылаеце яго.
Так, усё лепш і лепш.
Дык вось, гэта шаблон,
хоць гэта вячэру Просты прыклад і сартавання
тупы чыстага эфекту, які з'яўляецца міргаць фрагмент тэксту,
гэта тое, што від мыслення працэс, які вы павінны думаць -
думаць пра не абавязкова самы першы
пасіўны нешта пісаў на маючы адбыцца праекта
але, вядома, як вы ітэрацыі з вашым кансультантам або са мной
і вашы сустрэчы каманды ці вы проста разгледзець вашыя таварышы па камандзе код
аб узмацненні жорсткасці рэчы, правільна?
У рэшце рэшт, яны менш -
а менш радкоў кода Вы ў канчатковым рахунку маюць
у тэорыі, тым менш памылак вы , Верагодна, будуць запрашаць
таму што ёсць проста менш кода сапсаваць с.
Добра.
Так, пару вынас.
Лямбда-функцыі, ананімныя функцыі,
многія з якіх вы бачылі раней
а затым і проста зацягваючы рэчы з бібліятэкай
як JQuery ў гэты прыватны выпадак.
Добра.
Ёсць пытанні?
Давайце зробім адзін іншы кліент бакавыя аспект тут,
ў выглядзе нулявы у нас ёсць гэта чысты эфект.
Супер простая форма і, мабыць, калі я спрабую націсніце зарэгіструйцеся тут,
першапачаткова ён кажа мне, што ты зарэгістравана, ну, не зусім.
Ну, чаму ж?
Ну, вось форма-0.html вельмі мала код,
няма JavaScript наогул і гэта зусім падробка роду
формы, таму што дзеянне значэнне registered.html
гэта азначае не ад таго, што Я друкую ў гэтую форму,
дзе ён збіраецца накіроўваецца на сэрвэры?
Так. Такім чынам, каб registered.html што відавочна HTML файл
які, такім чынам, статычны файл, які не мае сродкаў
прымаць карыстацкі ўвод пры ўмове, няма кода JavaScript
убудаваны ў яго, што гэта гледзячы ў URL
так што гэта цалкам NOOP і што нічога не здарыцца
з прадстаўленых дадзеных, але Вы можаце ўбачыць структуру
з даволі просты формы HTML5
што мае некалькі пароль, некалькі тыпаў ўводу.
Такім чынам, давайце на самай справе цяпер дадаць апрацоўку памылак
і паглядзець, як мы маглі б палепшыць гэта.
Такім чынам, вось накшталт бедных чалавека спосаб рэалізацыі гэтага
і гэта свайго роду адваротны кавалак кода.
Такім чынам, спачатку давайце пракруткі да дна
каб убачыць, што тое ж самае і што па-іншаму.
Адзінае адрозненне Цяпер паміж гэтым
а папярэдняя версія што я даў форму і ID
з "рэгістрацыя" мог былі ўсе, што захачу
але яго азначала быць адназначна распазнаюцца нават гэта не
строга неабходна, таму што, калі старонка мае толькі адну форму, вядома, я
мог знайсці яго з адным з метады селектар JQuery ст.
Але гэты шлях проста робіць яго больш дэтэрмінаваных.
Так што, калі я іду зараз, каб мой сцэнар тэг, звярніце ўвагу на наступнае,
window.onload роўна ананімная функцыя.
Такім чынам, што ж гэта робіш?
Такім чынам, вы можаце ўспомніць, што ў Праграмаванне на баку кліента -
JavaScript хутчэй HTML старонкі ёсць розныя падзеі, звязаныя
з элементамі, пстрычка і прадстаўлення і факусоўка
і размыццё і іншыя, такія падзеі, якія могуць адбыцца
як карыстальнік звычайна ўзаемадзейнічае са старонкай,
window.onload робіць тое, што ён кажа.
На вокнах ўсёй пагрузкі
таму, як толькі ўсе выявы былі запампавана раз усё файлы
былі загружаныя і адзін раз старонка была загружана,
зрабіць наступны код, і заўважыць, калі я перайсці на дно
гэтага метаду, заўважыць, што няма дужка
пасля фігурнай дужкі які павінен сказаць
што я не выканання гэтая функцыя тут цяпер,
браўзэр будзе выконваць гэта для мяне, калі яна вызначыла
што старонка загружаецца.
Такім чынам, давайце паглядзім, што мы зрабілі,
document.getElementById рэгістрацыя
так што проста дае мне спасылка на вузле
ў дрэве, гэта ад таго, мае ID рэгістрацыі.
А цяпер, я збіраюся зарэгістраваць іншы апрацоўшчык падзеі
робячы form.onsubmit атрымлівае гэта ананімная функцыя
што азначае наступнае код павінен выконвацца пры
што формы.
Цяпер, большасць гэта проста роду сумна логіку.
Так, калі значэнне па электроннай пошце поле ў форме
"Нічога", то вы павінны даць адрас электроннай пошты,
Вы крычыце на карыстальніка з папярэдзіць, а затым вярнуцца ілжывым.
А то ў мяне куча іншых праверак,
чэкі на паролі,
правярае, калі паролі аднолькавыя,
правярае, калі пагадненне сцяжок ці не
і я проста крычаць на карыстальнік, калі любы
з тых выпрабаванняў фактычна правал.
І так, вось прыклад нават хоць гэта крыху надуманы
тут той факт, што я выкарыстоўваю роўна, роўна, роўна,
азначае, што карыстач не можа паспрабаваць падмануць мяне
, Увёўшы ў якім значэнні.
Дакладней я сапраўды праверкі наяўнасці
з пустой радкі, карыстальнік яшчэ нічога не набралі яшчэ.
Калі карыстач увёў літаральна нуля,
"Нуль" патэнцыйна можа быць блытаць з пустой радком.
І я кажу гэта свайго роду з сэнсу тут
таму што відавочна нават нулявы ня адрас электроннай пошты.
Але калі гэта было больш агульны поле, як тэкставае поле
або імя або апісанне або тое, што вы хочаце суадносіны кошту і
і гэта не абавязкова сінтаксічна ёсць
быць адрас электроннай пошты, карыстальнік маглі б увесці нешта накшталт нуля
і зноў кутняй выпадак, але гэта чаму, як правіла, праверкі тыпаў
карысная рэч.
Вы сапраўды праверка карыстальнік не набраўшы нічога
ў гэтай галіне.
Такім чынам, што ж адбудзецца, калі ні адна з гэтых тэстаў не атрымаецца, ну,
вяртае ісціну ўнутры з апрацоўшчыка падзеі
як OnSubmit проста азначае Let першапачатковае паводзіны на самай справе
распаўсюджвацца і, такім чынам, форма будзе атрымаць прадстаўлены.
І менавіта таму, калі я, нарэшце, націснуў прадставіць перш чым я атрымаў
да register.html і А калі раблю то цяпер, заўважце,
Я атрымліваю крычаў на, калі я не паказаць адрас электроннай пошты
і я магу ўвесці malan@harvard.edu,
малінавы [фанетычныя], малінавы, усталяваўшы сцяжок,
і цяпер зарэгістраваць і ён кажа мне, зноў жа,
Вы зарэгістраваныя ці не на самай справе.
Добра.
Такім чынам, давайце ачысціць гэта проста трохі, а затым пераход
да новага навей на боку сервера матэрыял.
Так што, калі я іду ў формаў-2.html, заўважыць некалькі рэчаў.
Так, адзін, я прынёс JQuery назад у сумесі
так што зноў гэта знак даляра
і цяпер я выкарыстоўваю некаторыя метады JQuery.
Так, па-першае, што гэта пра знак даляра, што гэта
такога асаблівага тут?
Што такое знак даляра карункавай На працягу большай любога кода JQuery?
Так.
[Неразборліва Заўвага]
ОК. Так, функцыя знак даляра праходзіць праз DOM гледзячы
нешта з гэтым прыватнасці селектара CSS.
Так, дакладна, але амаль занадта дакладным.
Гэта тое, што адбываецца калі вы праходзіце ў радку
як у дадзеным выпадку, але гэта не так заўсёды павінны прайсці ў радку.
На самай справе, гаворка, вельмі Першы радок тут гэта не
Селектар CSS, я перадаю у функцыі Lambda.
Такім чынам, у больш агульным сэнсе - так, добры адказ, але занадта дакладным.
У больш агульным, чым знак даляра ўяўляюць?
>> Проста JQuery.
>> Да. Так, толькі JQuery ці гэта проста функцыя
што некаторыя хлопец гадоў таму напісаў і іншыя людзі маюць
пасля пашырыла што літаральна па змаўчанні называецца -
ой, называецца JQuery.
Гэта проста - аказваецца з ў адрозненне ад многіх
з моў знак даляра з'яўляецца цалкам дапушчальна сімвал выкарыстоўваць
ў імя зменнай, тады як
ў знак даляра PHP відавочна, мае асаблівае значэнне
але ў JavaScript, як у некаторыя мовы, знак даляра
і падкрэсліваюць і іншыя, такія спецыяльныя сімвалы цалкам законным
выкарыстоўваць у вашай ўласнай сімвал імёны для зменных.
Так, хтосьці проста вырашыў што, вы ведаеце, што?
Гэта збіраецца быць даволі стомна
зрабіць ўвесь свет увядзіце JQuery ўвесь час,
дазвольце мне роду пасадзіць Доля ў зямлю і сказаць,
"Гэтая бібліятэка будзе выкарыстоўваць знак долара ".
І на самай справе, гэта сапраўды павышаюць рызыку
што хтосьці саманадзейна збіраецца выкарыстоўваць знак даляра
для сваёй бібліятэкі, але ёсць спосабы роду застрахаваць
што пры выкарыстанні долар падпісаць гэта адлюстроўваецца на JQuery
таму што вы можаце праверыць, калі гэта ўжо прызначаны
да чаму-то іншаму сутнасці.
Добра.
Так, вось і ўсё, што ня, там ніякай магіі.
Гэта проста сэксуальны гледзячы кавалак сінтаксіс, які добры
і хутка і лёгка друкаваць.
Такім чынам, што ж адбываецца, калі вы увядзіце знак даляра адкрытыя дужка
а затым ананімная функцыя.
Ну, аказваецца, што гэта на самай справе скарочанае пазначэнне
для дакумента кропка гатовыя адкрытым дужка.
Так што, як Сінція заўважыла раней мы ўжо знайшлі адзін
кут выпадак.
Калі вы проста перадаеце ў функцыя лямбда,
эфект ад долара знак трохі адрозніваецца.
На самай справе, тое, што адбываецца на самай справе тое, што гэта эквівалентна гэтага
перадачы спасылкі на глабальны аб'ект дакумент
што з'яўляецца глабальным, як аб'ект акно
што дае некаторыя спецыяльныя функцыі
, Які ўплывае на ўсю старонку або браўзэр і атрымліваецца
з гэтага дакумента, калі Вы абгарніце яго JQuery,
JQuery сутнасці разумее, о, гэта спасылка
да таго спецыяльным аб'екту дакумента,
дазвольце мне зарэгістравацца Апрацоўшчык падзеі, які выклікаецца гатовы
якія не з'яўляецца роднай JavaScript або DOM звязаныя паміж сабой.
Гатовыя з'яўляецца JQuery рэч, якая кажа
калі старонка загружаная ўсе HTML элементаў
але не абавязкова загрузкі усё CSS і малюнкаў
і JavaScript файлы і міргаць файлы і любіць.
Так, што гэта крок, перш чым ад нагрузкі, тады ідуць наперад
і выканаць наступнае.
І Станоўчым аспектам выкарыстання на гатовы азначае, што вы можаце, вы ведаеце,
што ўсе элементы ў вашым DOM,
ўсё адназначна вызначаны рэчы з ідэнтыфікатарамі, яны існуюць нават
калі старонка, яе змест па-ранейшаму загрузкі і загрузка
і ў вас ёсць некаторыя воблачна з абразкі на імгненне
або белая старонка ў фонавым рэжыме.
Так.
>> Што адбудзецца, калі [неразборліва]?
>> Ідэальны прыклад, ідэальны пытанне.
Так, давайце паглядзім, калі мы можам сімуляваць гэта прама цяпер.
Такім чынам, дазвольце мне ісці наперад і выдаліць гэта дзве лініі тут, а затым
не паспрабаваўшы выправіць водступы, дазвольце мне ісці наперад
і выдаліць сюды - ой, гэта адзін тут.
А цяпер, дазвольце мне перайсці да старонкі, перайдзіце да формаў-2.html і тыпу
Рэгістрацыя, нішто, здавалася, здарыцца, скажам, чаму было тое, што,
давайце ісці наперад і адкрыць да інспектара ў Chrome,
Адкрыйце кансоль проста каб паглядзець, калі што-небудзь здарыцца тут, зараз,
зарэгістраваць, усё яшчэ нічога.
Такім чынам, код сінтаксічна выдатна
так што я не бачачы ні Паведамлення чырвоны памылках
але тое, што відавочна не адбываецца?
Ні адзін з майго кода не з'яўляецца правільным, ён не працуе так ні адзін
з маіх кодаў, здаецца, выканання, дык чаму б гэта?
Ну, JavaScript і браўзэры ў больш агульным плане выканання
змесціва вэб-старонкі, зверху ўніз, злева направа.
І праблема што, таму што верхні
з гэтай старонцы HTML затым галаву Затым сцэнар затым іншы сцэнар,
гэта збіраецца атрымаць выкананы перад тым, што нават гатовы,
ці нават не існуе ў дрэве прадстаўленне старонкі.
Сама па сабе форма, нават не цела існуе ў гэтай кропцы.
Так, JQuery досыць разумны, Што гэта праверка памылак
што калі няма элемент з унікальны ідэнтыфікатар рэгістрацыі,
гэта не збіраецца выручыць ад вас
і проста выклікаць некаторыя кансолі памылкі і зламаць ўсю старонку,
гэта будзе моўчкі ігнараваць Вы, але прычына, што ні адзін
гэта код ніколі выконвае ў
таму што калі ў вас ёсць зарэгістраваных у гэтым прадставіць апрацоўшчык,
не было ні аднаго элемента каб прымацаваць яе к.
Такім чынам, гэта не свайго роду не оп там.
Так, паказаўшы замест гэтага, пачакайце, пакуль узрост не загружаецца
калі мы зрабілі window.onload рэч, якая з'яўляецца свайго роду
старой школы спосаб рабіць гэта ці сэксуальней JQuery спосаб
як гэта, мы можам сказаць, што гэта чакаць, пакуль усё
з тых HTML тэгаў ёсць быў разабраны, так што нават
калі выявы не загружаюцца, у меры, што вузел у дрэве,
затым JQuery можна забяспечыць што ўсё ёсць.
Так.
[Неразборліва Заўвага]
Так, добра, ды абсалютна.
Такім чынам, іншае рашэнне, каб гэта, калі вы не карысталіся гэтым
або не памятае, што гэта было,
вы маглі б абсалютна рухацца усё гэта на дно
вэб-старонкі, усярэдзіне цела ўсё яшчэ, але ніжэй форме
і што будзе таксама вырашыць гэтую праблему.
Гэта проста, як правіла, лічыцца дрэннай практыкай.
Гэта трохі брудны і неакуратны спецыяльна
калі вы трымаеце перашкод ўсё у ніжняй частцы старонкі,
асабліва калі я трымаю рэчы простыя, паставіўшы ўсе
майго кода ўнутры старонкі HTML
калі, вядома, вы можаце вядома, атрымаць у звычку
факторынгавыя яго ў асобным файле
і ў гэты момант гэта проста прыемна
цэнтралізаваць файлы ў галаве.
Акрамя ёсць цана, якую вы плаціце
, Паставіўшы наяўнасць яшчэ актывы, як CSS-файлаў
ў галаве старонкі, што рызыка таго, што вы працуеце?
>> Павольней загрузка старонкі.
>> Павольней загрузка старонкі, то чаму?
>> Таму што мы спрабуем загрузіць усе бібліятэкі
да [неразборліва].
>> Менавіта таму, што браўзэры чытаць код зверху ўніз,
злева направа, калі Google аналітыка павольна
або JQuery CDN павольна або API Facebook павольна
і што файл проста завісае патэнцыйна залежнасці
пра тое, як вы загрузілі файл, ўся старонка можа завіснуць.
І калі вы бачыце гэта шмат адкрыта
на вэб-сайтах у іх ёсць шмат нізкай якасці аб'яваў
на іх, мы проста адзін павольны або збіты сайт можа павесіць старонку
для некаторых нявызначаны Колькасць секунд
пакуль, нарэшце браўзэр спадзяюся раз на тым, што
, А затым паказвае вам астатняя частка старонкі.
Так што, калі вы калі-небудзь выкарыстоўвалі як Facebook, як і кнопкі,
у вэб-старонкі, не кажучы мне убачыць, калі я магу знайсці гэты
без таго, каб увайсці сюды.
Так што, калі вы ідзяце ў Як кнопка Facebook,
і націсніце код кароткатэрміновы, чорт вазьмі,
давайце паглядзім, калі мы можам знайсці прыклад,
вядома, хтосьці адправіў гэта.
[Паўза]
Я дам у некалькі секунд, калі мы не бачым гэтага.
Facebook асінхронны - ОК.
Такім чынам, гэта не з'яўляецца кодам, і калі яны змянілі яго нядаўна
што Facebook на самай справе рэкамендуе выкарыстоўваць
загрузіць сваю бібліятэку а на самай справе прапанаваць
што вы паклалі гэта ў цела вашай старонкі.
Так, Facebook раіць вам стварыць свайго роду тупы DIV
што толькі мае унікальны ідэнтыфікатар, як гэта, гэта значыць тэг сцэнара
і ўсё гэтую складанасць па сутнасці робіць наступнае
і яны не выкарыстоўваюць ніякіх JQuery таму што яны не хочуць
выказаць здагадку, любы іншы залежнасцяў,
дазвольце мне перайсці гэты больш проста трохі.
Так, заўважаю, што яны маюць ананімная функцыя тут,
больш падрабязна пра гэта праз хвіліну,
яны затым з дапамогай document.createElement,
яны ствараюць DOM элемент, гэта як Таноса так бы мовіць
дзе тэг мае тып Сцэнар, ён затым паказаўшы
што атрыбут асінхронны з гэтага тэга будзе
каб быць праўдай, то, як ісці наперад і высветліць, што URL
з JavaScript Facebook, павінна быць
і гэта толькі мудрагелісты спосаб
паверкі павінны гэта будзе ПГП або HDPS.
І, нарэшце, вы заўважыць, што Facebook робіць,
яны атрымліваюць DOM вузел, мае ідэнтыфікатар кораня Facebook
якая з'яўляецца тое, што яны сказалі, размясціць у старонку
а затым яны дадаць дзіцяці так што эфект усё гэта
ў свайго роду дынамічна ўводзіць новы тэг сцэнара, на Вашу старонку
як дзіця ў DIV, што вы ўстаўляецца там так, што астатнія
з загрузкі старонкі шчасліва
а затым гэты код на самай справе загружаецца асінхронна.
Так, па сутнасці пасля таго, як Справа ў тым, і я адклала згадка
ананімнай функцыі,
што гэта ў стылі фанк Сінтаксіс на ўвазе тут
калі ў мяне ёсць не толькі функцыю адкрыць Хлопец, блізкія дужка
а затым фігурныя дужкі, чаму адкрытыя дужка тут
а затым адкрытым блізка, блізка Хлопец там, што гэта за справы?
>> [Неразборліва] вызначэння і затым выкананне?
>> Сапраўды, гэта вызначэнне функцыя, якая з'яўляецца ананімным
а толькі вызначэння функцыі,
вядома не выконвае функцыя пакуль не называць яго
па імені, але, вядома, гэта з'яўляецца ананімнай функцыі
так што вы не можаце назваць гэта па імені, але вы можаце
у JavaScript выканаць ананімная функцыя проста
шляхам інкапсуляцыі усё гэта у дужках, як мы зрабілі
з гэтым Paren і гэта Хлопец тут, а затым на фіксацыю
ў канцы функцыі адкрытыя дужка, побач дужка,
калі вы не хочаце перадаць яму ніякіх аргументаў.
Але гэта здаецца збольшага па-дурному,
як, чаму гэтая дадатковая сінтаксічны складанасці
што большасць людзей, здавалася, не прызнаць, што значэнне
абкручванні тых, тры радкі кода
ў ананімнай функцыі такім чынам.
Так.
>> Каб пазбегнуць перазапісу каштоўным у [неразборліва].
>> Вось менавіта, каб пазбегнуць перазапісу зменную
у існуючай старонкі, ці не так?
Facebook некалькі саманадзейна вырашыў,
яны збіраюцца выкарыстоўваць пераменная Е, цалкам верагодна,
што вы ці хто з дапамогай Facebook як кнопка
або любы іншы сацыяльны убудова
у мае зменную дзесьці называецца Е. Такім чынам,
шляхам інкапсуляцыі ўсіх іх код ўнутры
гэтай ананімнай функцыі, яны па сутнасці маюць свае ўласныя сферы
што не рызыкуе выдаліўшы любыя існуючыя зменныя.
Так, гэта таксама на самай справе вельмі распаўсюджаная парадыгма,
асабліва пры напісанні Код бібліятэкі
ці калі вы самі не хочаце загрувашчваць ваша імя прастору
з іншымі зменнымі вы хачу значэнне жыць
і памерці пасля выхаду што блок кода,
гэта добры метад у JavaScript.
Добра.
Так, а затым назад у гэтым прыкладзе тут, усё, што мы зрабілі ў канцы
У гэтым прыкладзе гэта проста ачышчаны код.
Такім чынам, гэта ўсё яшчэ ёсць цэлае куча перамыкачоў, цэлая куча
умоў тут, але заўважыць трохі сінтаксісу,
гэта доступ да DOM вузел з унікальны ідэнтыфікатар рэгістрацыі,
касмічныя сродкі выглядаюць і атрымаеце нашчадак гэтага вузла,
знайсці яго, калі гэта тыпу ўваход, а затым нават
калі вы яшчэ не бачылі гэты і раней, вы маглі б ведаць
што гэта проста азначае знайсці гэта з ўводу тэгаў,
ўваходныя элементы, якія атрыбут імя са значэннем
электроннай пошты, а затым няхай мне махаю рукой на некаторыя
з астатніх ня усё, што стымулюючы
але на самой справе проста сінтаксіс JQuery для адных і тых жа аперацый.
Добра.
Але тое, што не так важна тут з'яўляецца бокам браўзэру матэрыял
а тое, што мы было больш чыстых і экалагічна чыстых спосабаў
фактычна робіць што код працаваць.
Добра.
Ёсць пытанні?
[Неразборліва Заўвага]
ОК. Цяпер самае цікавае.
Так, node.js Чаму?
Каго гэта хвалюе?
Што вы ведаеце пра яго сёння?
Node.js, то чаму?
Генры [мяркуецца напісанне].
[Неразборліва Заўвага]
Скід батарэі?
Што - гэта ідэальна вешалка скалы
для другой паловы сённяшняга дня.
Чаму б нам не пайсці і ўзяць 5-хвілінны перапынак тут,
ёсць палова цукеркі машына ёсць, калі вы б
як некаторыя цукеркі без пакласці чвэрць цалі