>> Ред.
Значи, го вклучите Javascript-.
Речиси сите во оваа соба веројатно има одреден степен
на удобност со тоа дали тоа беше начин назад кога во SC50
или тоа е лична веб проекти, па дури и
ако не малку на него со минатата PHP база на проекти,
но во најголем дел, многумина од вас,
дури и ако имате некои удобност
со JavaScript, можеби не се земени
здраво за готово како јазик работи и она што се случува
на под хауба и она што ние ќе се обидеме
да се направи денес е кора назад некои од технички слоеви
на она што го вклучите Javascript-е, како таа се разликува од јазикот
како PHP, како може да биде користи не само клиентската страна
но исто така и од страна на серверот и потоа се фокусира многу конкретно
на оваа рамка, не забележат никакви ЈС која е во суштина рок време,
програма со која може може да се изврши JavaScript код,
серверот и тоа е да стане повеќе популарен вид
на истиот раст оваа дена од веројатно Руби и PHP
и Python и ќе видите
тоа што има некои прилично моќни карактеристики по пат на некои
на вградена во јазикот конструкции.
Но, прво, некои од лесен работи само за да ве потсетам
за тоа како овој јазик работи и ако имате проблеми со гледањето на било
на ова, само викам надвор и ние ќе се приспособат.
Значи, еден како во PHP има без сфаќање на главната функција,
само на проектот пишување код
и можете да за тоа протолкува тоа врвот до дното.
Во контекст на прелистувачот
или во нешто серверот од страна на ќе видиме некои примери
во малку.
Услови, синтаксички еквивалент на PHP, како и C,
C + + и некои други јазици па само да ви даде чувство
за тоа како да ја структурираат,
има само канонски состојба.
Булова изрази, иста синтаксички како сте виделе
во истите други јазици, како за oring
и за крај работите заедно.
Го вклучите Javascript-има прекинувачи, слично како PHP и други направиме
и вие не сте ограничени, како во C до составен примитивците
како карактери и ints може да всушност прават други видови на вредности.
Петелки. Значи, ова е иста
и веројатно десетина јазици, додека петелки, направите додека петелки
а потоа овој трик тука.
Значи, ова е вид на познат како брзо набројување
и тоа е многу паметен начин само како во PHP прави
за секој FU како бар можете слично на тоа,
во вклучите Javascript-објект, каде предмет е името
на променливата тука, да речеме, var i во објектот и на секоја итерација
на овој циклус, i е ќе биде еден
на клучеви од тој објект.
Значи, ако имате некој предмет за студент, и студент има проект
и име и куќа, iteratively јас ќе се
на вредноста на ID и име и куќа и можете да за тоа индекс
во објект како и покрај тоа што е низа користење на плоштад заграда
нотација да се добие вредноста од клучните проект или името
или куќа и така натаму.
И спротивно на здравиот претпоставка, го вклучите Javascript-објекти,
својства не се мора да гарантираат дека ќе бидат
во истиот редослед, ова е, исто така, точно во PHP па не претпоставувам
дека работите ќе останат во истиот редослед
што ќе се стави овие клучни вредност парови во објектот.
Како за низи?
Има неколку начини да го пишувам синтаксички
но ова е веројатно најголемиот заеднички сега само со користење квадратни
заградата нотација.
Значи, ова е променлива повикувате броеви кои содржат низа
на шест броеви таму, тука е едноставен низа
и ќе забележите што е отсутен од овие примери,
она што е да го вклучите Javascript очигледно недостасува.
Да. Значи, нема поим на пишување, секако, не
во овој контекст тука, но ова навистина е стринг.
Значи, да го вклучите Javascript има видови и тоа беше навистина низа
која и самата е еден вид и секој од елементите
во таа низа беа од типот број како го вклучите Javascript ги нарекува.
Значи, тоа е лабаво отчукува јазик и ќе видиме
дека го вклучите Javascript-како PHP има идентитет оператор
и други механизми за всушност проверка на она што вид
на некои променлива е како за грешка проверка
и за други апликации.
И тука е примерок објект содржи само ID и име.
И сега, да се забележи дека ние сме користење кадрави заграда нотација,
вовлекувањето и бела простор е вид на бесмислени
и ова се декларира променлива чие име е Роб
и чија ID е 1 и датум тип е тука нашиот број
и гудачки соодветно.
И тогаш ова е нешто малку различни
ако некогаш сте направиле ништо со Ајакс овие денови?
Најверојатно користи објект како овој
но она што е вреди да се напомене тука?
Што е синтаксички некогаш толку различни, само неколку
работи меѓу овој пример кој е значително помал
и овој поголем пример.
Значи, прво во лаик рок, што е ова?
Што е од типот на персонал ќе ви кажам?
Добро, тоа е низа, тоа е низа од што?
>> Објекти.
>> Добро, тоа е низа од објекти.
И сега, се фокусира на само еден - било кое од овие предмети,
она што е различно помеѓу ова и ова?
>> На копчињата се стрингови.
>> Да. Значи, клучеви се стрингови,
и копчињата се всушност жици во двата случаи
и ова е вид на идиотски
според мое мислење историски дизајн одлука кога сте користење
JSON, го вклучите Javascript- Објект нотација,
која е во суштина транспорт формат
за испраќање на податоци обично преку мрежа
помеѓу клиентот и серверот, треба да се запамети
дека ова не е всушност валидна JSON и ова е една
на овие FYIs освен ако не сте некогаш тресне главата на ѕидот
за неколку минути за да нема добра причина, тоа не е валидна JSON
бидејќи клучевите се всушност не цитираше.
JSON idiotically бара не само што копчињата да се цитира,
но дека тие се двојно цитирани, единечен наводник не се доволни.
Значи, глупав малку нешто и повеќе од забава фактот
за целите денес, но овој исто така ќе бидат валидни го вклучите Javascript-
тоа е само не - на CONVERSE не е точно.
Во ред е.
Така, ќе видиме многу повеќе од тоа.
Во ред е.
Значи, тоа е да го вклучите Javascript синтаксички прилично веројатно
познато, никој од вас кои имаат никогаш не се користи JavaScript пред
тоа не е огромен скок од PHP или повеќето било процедурални јазик
кои може да се користи.
Значи, денес ние ќе се фокусираат на интересните аспекти
на JavaScript особено во контекст на не ЈС
но не исклучиво поради до сега сте веројатно,
ако се користи Javascript-от, користи го во внатрешноста на прелистувачот.
Значи, без ЈС е околина потоа во малку ќе
за да ни овозможи пристап до JavaScript код клиент -
серверот од страна, но прво, ајде да ги разгледаме
на нешто што е малку повеќе клиентската страна.
Значи, јас сум качил во и ова е поврзани на интернет страницата курсеви,
ако сакаат да играат заедно, постојат два поддиректориуми
во денешниот Поштенски на нарекува извор столпчиња поштенски на веб-сајтот
и овие се само Неколку примери се присеќава
на работи што може да се види пред и јас вид на нив изградени
за разлика од наједноставни до малку покомплицирано да душманке
некои од карактеристиките на JavaScript.
Значи, ајде да одиме напред и да ги изглед на пример на ова.
Значи, за жал таг трепкање беше уби пред неколку години
како начин имаат поубава и поубава
и ознака трепкање беше буквално отворена заграда трепкање блиску заграда,
и тоа вид на не повеќе со нас.
Но, ние се уште може да воскресне оваа идеја на таг со само вид
на размислување за тоа логично, како да одите
за правење на нешто како овој трепкање интуитивно?
Претпоставувајќи дека знаете малку малку на JavaScript и CSS или
во овој момент, тоа е Нормално ако не се направи.
>> Поставете време надвор и ќе се скрие Таа потоа откако ќе го таг
надвор и ја прикажете повторно.
>> Да, совршено.
Ова е вид на програмирање 101,
како ќе се постигне визуелен ефект, како тоа?
Па, ти некако мора да покаже нешто
а потоа се скрие нешто, шоу нешто, скрие нешто
и како Џонатан предлага користење на некој вид на времето,
некој вид на распоред можете да направите ова постојано, без потреба
да се користи телефонска линија или нешто слично.
Значи, дозволете ми да одат во трепкање-0.html
и дозволете ми да се намали фонтот малку
така што повеќе од тоа се вклопува.
И ајде да ги разгледаме во она што се случува овде.
Значи, прв од сите, забележите дека телото
на оваа страница е супер едноставен, во внатрешноста на телото
од страната е само div.
Сум произволно даден лична на поздрав
и дека може да биде ништо толку долго како што тоа е единствен
а потоа јас само имаат некои едноставен текст, Здраво светот.
Значи, ако јас сега скролувајте горе, забележите дека некои меки стил.
Значи, велам, остри поздрав, кој како што знаете
во CSS само значи уникатно идентификуваат елемент
со идеја за поздрав,
големина на фонт ќе произволно биде оваа, маргина и текст усогласување.
Значи, неинтересни естетски детали
на околу центарот на текстот.
Значи, интересен дел е во сценариото таг тука
кои јас се случи да се стави внатре на главата на страната.
Значи, we'll - можете да го направите ова во било кој број на начини
и ќе видиме неколку повторувања на истата програма
но да почнеме од врвот.
Значи, јас сум прогласена за функција наречена трепкање
и очигледно тоа го користи ова вграден ДОМ метод наречен
getElementById што е можеби еден од повеќе моќни методи
што ќе добиете надвор од кутијата со JavaScript во потрага по
"Поздрав" не мора да биде двојни наводници како што беше
во HTML е или е во ред толку долго
како што се стилски во согласност овие денови јас се осмелувам да кажам
многу луѓе го користат Јава, единечен наводник во JavaScript,
двојни наводници во HTML но тоа не е навистина важно
толку долго како што се доследни.
Значи, тука, ако не сте запознаени, всушност можете да пристапите
со JavaScript, CSS својства на елементите.
Значи, да се забележи дека јас сум прогласена за променлива наречена div
и се чуваат внатре на таа променлива,
повикување на она што дека ДОМ елемент е.
Значи, ако се сетам на CS50 или која било класа во која си мислел
за структури дрво и ДОМ, документ Object Model,
ова е само референца на јазол на дрво,
што претставува оваа страница
и ако div.style.visibility имотот еднаква, е еднаква на, е еднаква,
скриени, а потоа јас само сакате вклучите го
како што е предложено Џонатан инаку сакам
да го смениш во текот на скриени.
Сега, како што на страната, зошто трокреветни еднаква таму?
Или што е тоа што наспроти двојно изнесува?
>> Строга еквивалентни.
>> Извини.
>> Строга еквивалентни.
Значи, тоа е оператори идентитетот
каде што од вас не си проверка само на вредноста на варијаблата
како еднаков, рамноправен смисла но исто така и од типот на тоа.
Значи, иако ние не треба специфицирани оваа далеку било податоци
типови за сите променливи во оваа или било која од слајдови,
постои вид поврзани со стрингот скриени
со таа вредност, скриени и дека е, се разбира низа.
Значи, во овој случај, тоа Навистина не е важно
бидејќи нема начин на кој ние ќе се помешаат со низа
на "скриени" со некои други вредност
но ова е често е добра навика би рекол да се добие
во користење на еднакви, рамноправни,
знак за еднаквост е генерално добра работа.
Тоа ќе го направи вашиот код повеќе робустен и двете во PHP, но
и во вклучите Javascript- бидејќи ќе се кандидира
во време агол случаи каде што вредноста може да биде нула
дека сте проверка за и нула може да се измешано со лажни
или може да има и како во PHP,
Javascript-от исто така може да имаат повеќе лажно вредности, каде што од нула
и лажни и ништожни и недефинирани сите можат да го решат имплицитно
на false.
Но, ако сте навистина сакаат да се провери за одредена вредност
како нула, број, или лажни Булова, тогаш мора
да го користите овој идентитет оператор.
Значи, тоа би можело да се случи да добие во секој случај, иако тука,
тоа е вид на бесмислени бидејќи знаеме дека се проверуваат
за вредноста на стрингот и тоа е нема да биде ништо друго.
Значи, тука е магија, тогаш, ако јас дојдете до оваа линија тука,
очигледно, изграден во прозорецот објект
и ова е карактеристика на интернет пребарувач можете да пристапите
на овој супер глобалната објект наречен прозорецот,
внатре во тоа е некои функционалност,
ако парче од кои е поставена интервал
и тоа трае очигледно какви аргументи?
Да.
>> Повик на функција и време.
>> Добро. Значи, функцијата јавете се и време
и така особено е референца на функција,
покажувач на функција во смисла
и тоа е функција што се случува
да се извршуваат секој број на милисекунди и во овој случај,
тоа е секој 500 милисекунди.
Значи, тоа е начин на поттикнување на ефикасно и бесконечна јамка
без користење на повторување, но наместо да кажувам го вклучите Javascript-
на моторот во на прелистувачот
да го направите ова секој 500 милисекунди или е блиску
500 милисекунди, како што може,
излегува дека под капакот на моторот,
има она што се нарекува настан јамка и ние ќе се вратам на оваа
во контекст на јазол ЈС дека само постојано вид
на седи таму, се врти, чекајќи работа да се направи
и штом тоа ќе се реализира,
500 милисекунди имаат положено трепкање ќе се нарекува повторно
и повторно и повторно е заедно од било која друга работа
што треба да се направи.
Значи, она што можеме да ја подобриме тука?
Па, дозволете ми отвори до трепкање-1.html
и да демонстрираат на трепкање-1.html
како естетски совршено идентични.
Значи, она што ние би можеле да се подобри тука?
Па, забележувате дека таа беше вид на бескорисни
да се дефинира функција наречена Трепкање, бидејќи колку
во колку места никако не можев повик на функција на трепкање на?
>> Само еднаш.
>> Значи, еден.
Значи, тоа не е лошо, во Всушност тоа е прилично веројатно
право напред.
Јас дефинирани функција трепкање, јас се јавите на функција трепкање по пат
на овој параметар, но технички,
немаше причина за тоа и заедничка парадигма
во JavaScript е да се всушност се направи употреба на Ламбда функции
како што може да се сети од 51 или анонимни функции
каде што ако не треба име за некоја функција,
ако сте само нарекувајќи сигурно на едно место,
зошто да се мачи cluttering вашиот код, cluttering на програмери ум
и вашето име простор навистина со симболи
дека навистина не треба да се грижи за него.
И така, во оваа верзија овде,
забележите дека јас го повикувам window.SetInterval директно
во самиот врв на мојата скрипта таг тогаш јас сум поминува
во безимени функција кој ги зема без аргументи
и тоа е совршено ред, а потоа телото
на таа функција се чини е идентични со она што беше пред
и само синтаксички Разликата сега е
овде до 500.
Јас сум затворање на тело на функцијата
а потоа сакам да кажам дека изврши дека претходните код,
секои 500 милисекунди.
Значи, многу маргинални промена
но чекор кон она што е веројатно повеќе домот
имплементација на ова.
Значи, ајде да го извадиме ова чекор понатаму, ако јас сега одиме
во трепкање две, ќе види заедничка библиотека,
ефектот на кој ќе
да биде целосно безначаен естетски, но ако одиме
во верзија две тука, најава дека на врвот на мојата глава,
Јас сум вклучен на најновата верзија на jQuery.
А потоа, тука долу, Јас само се чистат
до кодот по малку, тоа е нема да биде забавно светот
да продолжите со користење на мајчин ДОМ функции
и вид на суровини и го вклучите Javascript-.
Всушност, jQuery како што може знаат стана толку популарна
дека повеќето луѓе едноставно конфликт jQuery со вклучите Javascript-
но навистина само вечера корисни библиотека напишан
од страна на колеги по име Џон Resig и од други
кои имаат само прави многу досадни работи
во JavaScript полесно и повеќе содржаен.
Значи, во овој случај тука она што се случува?
Значи, јас ја имаат оваа појава на знакот за долар, повеќе за тоа
во само еден миг, а потоа ова е CSS селектор.
Значи, тоа е многу слична во духот на она што го направив пред,
но овој пат, јас сум буквално со користење на хаш таг
за да се покаже уникатен идентификатор наречен поздрав
а потоа очигледно . CSS е метод вграден
во она што објектот е дека јас само замислен
и јас сум проверка на вредноста од клучните видливост.
И ако вредноста на тој клуч еднакво, е еднаква, е еднаква, скриени,
тогаш јас одам да го смениш и Одам да го смениш тоа време
со користење на истиот начин која очигледно е преоптоварен
во смисла дека има две различни потписи,
еден со еден аргумент и еден со два аргументи,
вториот од кои е сетер,
поранешниот на кој е на копач така да се каже.
И ако љубопитни и ако сакате всушност никогаш не погледна ова,
ако одиме да jquery.css се надевам врвот хит е навистина ова
и можете да видите повеќе формално објаснување
дека ние само го користите ова, . CSS со името на имотот
а потоа сетер е точка CSS
со име на имот и вредноста.
Значи, малку почиста, но забележите вид на шаблон овде
едни со повторување на овој законик,
ние сме вид на тоа што го прави построги и построги и построги
и таму велат подобри дизајни
бидејќи ние сме со користење на некој друг код кој е елиминиран
некои од комплексноста.
Значи, сега ајде да се направи ова е уште поедноставно.
И во фактот, ако јас се отстранат сите цитати ќе видите само сите
коментира ќе видите колку едноставна оваа има добивано.
На една разлика тука се разбира, е
дека јас сум со користење на преклопник метод кој, исто така, доаѓа вграден
во jQuery и тоа е само
бидејќи некој друг напиша кодот
кои, всушност, го префрла поставување на видливоста
од ниту ДОМ елемент што ќе го испрати.
Значи, подобро и подобро.
И така, ова е шема,
иако ова е вечера едноставен пример и вид
глупаво нето ефектот кој е трепне парче на текст,
Тоа е еден вид на мислата процес кој треба да се размислува -
да се размислува за да не мора самиот прв
пасивни пишување нешто за претстојните проекти
но сигурно како ќе iterate со вашиот советник или со мене
и вашиот тим на состаноците или само ги видиш вашиот соиграчи код
за затегнување работите, нели?
По сите, тие се помалку -
на помалку линии на код што во крајна линија има
во теоријата на помалку грешки ќе најверојатно ќе се поканува
бидејќи има се едноставно помалку код, за да се плеткаш со.
Во ред е.
Значи, неколку takeaways.
Ламбда функции, анонимни функции,
од кои многу ќе видовме пред
а потоа, исто така, само затегнување работите со библиотека
како jQuery во овој конкретниот случај.
Во ред е.
Било какви прашања?
Ајде да направиме една друга клиентската страна аспект тука,
во форма нула имаме Оваа нето ефект.
Супер едноставна форма и очигледно ако јас се обидувам да кликнете да се регистрирате тука,
Првично тоа ми кажува дека се регистриран, добро, навистина не.
Па, зошто е тоа така?
Добро, тука е форма-0.html Многу малку код,
без JavaScript она што и тоа е сосема лажни вид
на формата зашто акција вредност е registered.html
што значи без разлика што Јас тип во оваа форма,
каде е таа ќе да бидат испратени на серверот?
Да. Значи, да се registered.html што е јасно HTML датотека
кој е тоа статички датотека која нема средства
за преземање на корисникот влез претпоставувајќи нема JavaScript код
вградени во него и тоа е во потрага во URL-то
па ова е сосема NOOP и дека ништо не се случува да се случи
со доставените податоци, но можете да видите структура
на прилично едноставен HTML5 форма
кој има неколку лозинка, неколку влезни видови.
Значи, ајде да всушност сега додадете некои грешка проверка
и да видиме како можеме подобрување на ова.
Значи, тука е вид на сиромашните начин на спроведување на овој човек
и тоа е еден вид на гаден парче од код.
Значи, прво нека дојдете надолу кон дното
за да видите што е исто и она што е различно.
Единственото нешто различно сега меѓу овој
и претходната верзија е дека јас сум со оглед на формата и проект
на "регистрација" би можеле да имаат се што сакам
но неговата замислена да биде уникатно препознатливи дури и тоа не е
строго неопходни затоа што ако страница има само една форма сигурно јас
може да го најдете со еден од селектор методи jQuery е.
Но на овој начин само го прави повеќе детерминистички.
Значи, ако одам до сега да ми скрипта ознака, забележиме следниве,
window.onload еднаквите анонимен функција.
Значи, што е ова се прави?
Значи, вие може да се потсетиме дека во Client-Side Програмирање -
Го вклучите Javascript-а HTML страници имаат различни настани поврзани
со елементи, со кликнување и поднесување и фокусирање
и замаглување и други такви настани кои може да се случи
како корисник обично се поврзува со страницата,
window.onload прави она што го вели.
На прозорците целиот вчитување
па откако сите слики биле симнат еднаш сите датотеки
е симнат и еднаш страница е вчитан,
направи го следниов код и известување, ако јас се префрлат на дното
на овој метод, да се забележи дека нема заграда
по кадрава голема заграда што да се каже
дека не сум извршување оваа функција до тука сега,
прелистувачот ќе се изврши тоа за мене кога станува утврди
дека страницата има вчитан.
Значи, ајде да видиме што ние го направивме,
document.getElementById регистрација
така што само ми дава референца на јазол
во дрво, што е на има лична за регистрација.
И сега, јас ќе одам да регистрираат уште еден настан управувачот
со тоа form.onsubmit добива овој анонимен функција
што значи следново кодот треба да се изврши секогаш кога
таа форма е поднесена.
Сега, повеќето од ова е само вид на здодевни логика.
Значи, ако вредноста на e-mail поле во форма е
"Ништо", тогаш мора да обезбеди вашата e-mail адреса,
ви се развикам на корисникот со сигнализација и потоа се врати лажни.
И тогаш имам куп други проверки,
проверки за лозинка,
проверките ако лозинки се исти,
проверки и ако договорот наога е избрана или не
и јас само се развикам на корисникот, ако било
на овие тестови, всушност, не успеваат.
И така, тука е еден пример дури и иако тоа е малку смислена
тука фактот дека јас сум со користење еднакво, е еднаква, е еднаква,
значи дека корисникот не може да се обиде да ми трик
со впишување на она што вредност.
Или подобро кажано, јас сум навистина проверка за присуство
на празен стринг, на корисникот не внесе ништо сеуште.
Ако корисникот ја внеле во буквално нула,
"Нула" потенцијално би можело да биде мешаат со празен стринг.
И јас велат дека тоа е еден вид на бесмислено тука
бидејќи очигледно дури и нула не е-мејл адреса.
Но, ако ова беше повеќе генерички поле како поле за текст
или име или опис или нешто што сакате да го цениме за
и тоа не е нужно синтаксички имаат
да се биде е-мејл адреса, корисникот да напишете нешто како нула
и повторно агол случај, но тоа е зошто обично проверка видови е
корисна работа.
Ти си навистина проверка за корисникот ја внеле ништо
во таа област.
Значи, она што се случува ако никој на овие тестови не успеваат, добро,
враќање вистина внатре на управувачот настан
како onsubmit само значи ајде оригиналниот однесување всушност
пропагира и затоа форма ќе се поднесе.
И тоа е причината зошто, кога јас конечно Кликање поднесе пред добив
до register.html и ако го направам тоа сега, известување,
Јас се викна на ако не го правам обезбеди е-мејл адреса
и јас да напишете во malan@harvard.edu,
Crimson [фонетски], Crimson, проверка на кутија,
и сега се регистрираат и Тоа ми кажува, повторно,
сте се регистрирале или навистина не.
Во ред е.
Значи, ајде да се исчисти овој горе само малку и потоа транзиција
на новиот понови серверот од страна на работи.
Значи, ако одам во форма-2.html, забележите неколку работи.
Значи, еден, јас го донесов jQuery назад во микс
па таму повторно е овој знакот за долар
и сега јас сум со користење некои методи jQuery.
Значи, прво, што е тоа за доларот знак дека е
толку посебен овде?
Што е знакот за долар Украсен во текот на повеќето било jQuery код?
Да.
[Беззвучен Забелешка]
OK. Значи, знакот за долар функција оди преку ДОМ потрага
за нешто со ова особено CSS селектор.
Значи, вистина, но речиси премногу прецизни.
Тоа е она што се случува кога ќе помине во низа
како во овој случај, но вие не секогаш мора да поминат во низа.
Всушност, случај во точка, многу прва линија, тука е тоа не е
CSS селектор, јас сум поминува во ламбда функција.
Значи, поопшто - така, добар одговор, но премногу прецизни.
Поопшто, она што е знакот за долар претставуваат?
>> Само jQuery.
>> Да. Значи, само jQuery или тоа е само функција
дека некое момче пред неколку години напиша и други луѓе имаат
бидејќи подобрен кои буквално стандардно се нарекува -
Упс, се нарекува jQuery.
Тоа само - тоа се врти надвор за разлика од многу
на јазиците знакот за долар е совршено валидни симбол за користење
во името на променливата а
во PHP знакот за долар очигледно има посебно значење
но во JavaScript како во некои јазици, знакот за долар
и нагласам и други такви специјални карактери целосно legit
да се користи во вашата симбол имиња за променливи.
Значи, некој само одлучи тоа, знаеш што?
Тоа се случува да биде прилично досадни
да се направи целиот свет тип jQuery цело време,
дозволете ми вид на посади удел во земјата и да каже,
"Оваа библиотека ќе користат знакот за долар. "
И всушност, овој се подигне ризикот
дека некој друг надменно се случува да се користи знакот за долар
за неговата или нејзината библиотека, но има начини да се вид на се осигура
дека кога користите на доларот потпишат мапи за jQuery
бидејќи може да се тестира дали тоа е веќе доделен
на нешто друго во суштина.
Во ред е.
Значи, тоа е се што е, нема магија.
Тоа е само секси бараат парче синтаксата што е убаво
и брзо и лесно да напишеш.
Значи, она што се случува кога ќе тип знакот за долар отворен paren
а потоа анонимен функција.
Добро, се испоставува дека ова е всушност стенографија нотација
за документ точка подготвени отворени paren.
Значи, како што Синтија забележав порано ние веќе се најде еден
агол случај.
Ако само помине во ламбда функција,
ефектот на доларот знак е малку различен.
Всушност, она што навистина се случува е дека тоа е еквивалентно на ова,
поминува во однос на глобалната документ објектот
тоа е глобален исто како прозорецот објект е
кој ви дава некои посебна функционалност
која влијае на цела страница или интернет пребарувач, и испоставува
дека документот кога ќе ја заврши со jQuery,
jQuery суштина сфаќа, ох, ова е референца
за таа посебна документ објектот,
А сега допуштете ми регистрирате ракувачот со настани наречени подготвени
кој не е роден JavaScript или ДОМ поврзани.
Подготвени е jQuery нешто што вели
кога страната е вчитан сите HTML елементи
но не мора да се вчита, сите CSS и слики
и JavaScript датотеки и Флеш Датотеки и се допаѓаат.
Значи, тоа е чекор пред на оптоварување па ќе одиме напред
и извршување на следниве.
И главата на користење на готови значи дека можете да, знаеш,
дека сите елементи во вашиот ДОМ,
сите уникатно идентификувани работи со лични карти, тие постојат дури и
ако страната, нејзината содржина се уште вчитување и вчитување
и имаш некои скршени икони за момент
или бела страница во позадина.
Да.
>> Што ќе се случи ако [нечујни]?
>> Совршен пример, совршен прашање.
Значи, ајде да видиме дали можеме да симулираат ова право сега.
Значи, дозволете ми да оди напред и да го избришете овие две линии до тука, а потоа
без пречеше да го поправат вовлекување, дозволете ми да оди напред
и да го избришете овој долу тука - Упс, ова овде долу.
И сега, дозволете ми да одам во текот на страница, одете на форма-2.html и видот
Регистрирајте се, ништо не чинеше да се да се случи, да речеме, зошто беше тоа,
ајде да одиме напред и да се отвори до инспекторот Хром,
отвори конзола само за да ја видите ако нешто се случува тука, сега,
регистрираат, уште ништо.
Значи, го кодот е синтаксички парична казна
па јас не гледам никаква пораки со црвени грешка,
но она што јасно не се случува?
Никој од моите кодот е право, тоа не е работа, па никој
од моите кодови се чини дека извршување, па зошто е ова?
Па, JavaScript и прелистувачи поопшто изврши
содржината на веб страница, врвот до дното, лево кон десно.
И проблемот е дека, бидејќи на врвот
на оваа страница HTML потоа главата тогаш скрипта потоа уште скрипта,
ова ќе се извршуваат пред она што е дури и подготвени,
или дури и постои во дрво застапеност на страната.
Форма себе, дури ни тело постои во овој момент.
Значи, jQuery е доволно паметни со тоа е грешка проверка
дека ако не постои елемент со уникатен проект на регистрација,
тоа нема да спасување на вас
и само да предизвика некои конзола грешка и се скрши целиот страница,
тоа се случува да тивко ги игнорираат вас, но причината што никој
на овој код некогаш извршува е
бидејќи кога имате регистрирани ова достават управувачот,
немаше елемент да го закачите на.
Значи, тоа е еден вид на не оп таму.
Значи, со впишување наместо тоа, почекајте додека на возраст е вчитан
ако ние го сторивме на window.onload нешто што е вид
на старата школа начин на вршење на или на sexier jQuery начин
вака, може да се каже дека тоа почека до сите
на оние HTML тагови се се разложени, па дури и
Ако сликите не се вчитани, во Барем тоа јазол е во дрво,
тогаш JQuery може да се обезбеди дека сè е таму.
Да.
[Беззвучен Забелешка]
Да, добро, да апсолутно.
Значи, друго решение да ова, ако не го користеле овој
или не се сеќавам дека ова постоело,
можете апсолутно може да се движат сето ова до дното
на веб-страница, во внатрешноста на тело но се уште под форма
и дека исто така, би реши овој проблем.
Тоа е само обично смета лоша практика.
Тоа е малку неуредна и невешт специјално
ако се задржи притискање сето на дното на страната,
особено кога сум водење на работи едноставно со ставање на сите
на мојот код во внатрешноста на HTML страница
кога се разбира можете да сигурно се влезе во навика
на факторинг надвор на посебен фајл
на која точка тоа е само убаво
да се централизира слики во главата.
Освен што е цената што ја плаќате
со ставање вклучите Javascript- друг имот како CSS фајлови
во главата на страницата, што е ризик дека ќе се кандидира?
>> Спора страница вчитување.
>> Спора вчитување на страницата, зошто?
>> Бидејќи ние се обидуваме да се вчита сите библиотеки
пред [нечујни].
>> Токму затоа прелистувачи прочитате код врвот до дното,
лево кон десно, ако Google анализатор се спори
или jQuery CDN е бавно или Фејсбук API е бавно
и таа датотека само виси потенцијално зависност
за тоа како можете натоварен дека датотека, целата страница може да се појави да се откажам.
И ако видите оваа многу искрено
на веб-сајтови што имаат многу низок квалитет реклами
на нив, ние сме само еден бавен или испија веб-сајт може висат страница
за некои недефинирани бројот на секунди
додека конечно пребарувачот се надевам дека пати од за тоа
а потоа ви покажува остатокот од страната.
Значи, ако некогаш сте се користат како Фејсбук, како копче,
во вашиот веб страница, дозволете ми види дали можам да се најдат на овој
без да се најавите тука.
Значи, ако одите на Како копче Фејсбук
и кликнете добијам код, по ѓаволите,
да видиме ако можеме да најдете пример,
сигурно некој има пратено оваа.
[Пауза]
Јас ќе ти дадам во неколку секунди ако не го видите ова.
Фејсбук asynch - Добро.
Значи, ова е кодот и ако тие ги променија неодамна
дека Фејсбук всушност Ви препорачува да употребувате
да се вчита нивната библиотека а всушност предложи
што ќе се стави ова во телото на вашата страница.
Значи, Фејсбук ви советува создаде еден вид на глупави DIV
дека само треба единствен број како ова, тогаш имаш скрипта таг
и сите на оваа комплексност во суштина го прави следново
и тие не се употребуваат никакви JQuery бидејќи тие не сакаат
да се претпостави кој било друг зависности,
дозволете ми да се помести ова во текот на само малку.
Значи, забележите дека имаат анонимен функција овде,
повеќе за тоа во само еден миг,
тие потоа користете document.createElement,
тие се создавање ДОМ елемент, ова е како Примерок така да се каже
каде што таг е од типот скрипта, тоа е тогаш специфицирање
дека async атрибут на таа ознака се случува
за да биде вистина тогаш ќе одиме напред и дознаам што URL-то
на JavaScript на Фејсбук треба да биде
и ова е само стилизиран начин
на проверка треба тоа да биде HGP или HDPS.
А потоа, конечно, ќе се забележи она што Фејсбук прави тоа,
тие се ДОМ јазол дека има проект на Фејсбук корен
што е она што тие го кажаа можете да се стави во страница
а потоа тие додаваат на детето па ефектот на сите ова е
да вид на динамички инјектираат нова скрипта таг во вашата страница
како дете на DIV дека вметната таму, така што остатокот
на страница товари среќно
а потоа овој код всушност добива натоварени асинхроно.
Значи, во суштина по Всушност и јас одложено спомене
од анонимни функција,
што е ова фанки синтакса се однесуваат тука
кога јас не само што имаат функција отвори paren, во близина paren
а потоа големи загради, зошто отворен paren тука
и потоа на отворен блиску, во близина paren таму, што е тоа го прават?
>> [Беззвучен] дефинирање и потоа извршување?
>> Точно, тоа е дефинирање на функција која е анонимна
туку само дефинирање на функција,
се разбира не изврши функција се додека вие го викате
по име, но се разбира ова е анонимен функција
така да не може да го наречеме по име, но можете да
во JavaScript изврши анонимен функција само
од концизирајќи целата работа во заграда како што го направив
со овој paren и ова paren тука, а потоа и одредување
до крајот на функцијата отворен paren, во близина paren,
ако не сакате да Поминете го никакви аргументи.
Но тоа се чини глупаво,
како зошто оваа дополнителна синтаксичка комплексност
дека повеќето луѓе не се чини да се признае, она што е вредноста
на завиткување оние три линии на код
во анонимен функција на овој начин.
Да.
>> Да се ​​избегне пребрише на вредни во [нечујни].
>> Точно, за да се избегне пребрише променлива
во постоечка страница, нели?
Фејсбук е нешто надменно одлучи,
тие се случува да се користи променлива Е, тоа е сосема веројатно
дека ти или било користење Фејсбук како копче
или што и други социјални приклучок
во има променлива некаде се нарекува Е Значи,
од страна на encapsulating сите на нивниот код во внатрешноста
на овој анонимен функција, тие во суштина имаат свој опсег
тоа не ризикуваат clobbering сите постоечки варијабли.
Значи, тоа исто така е всушност многу честа парадигма,
особено кога пишувате библиотека код
или кога ќе се не сакате да натрупува Вашето име простор
со други променливи сакате вредноста да се живее
и умре еднаш ќе излезете тој блок од код,
ова е убаво техника во JavaScript.
Во ред е.
Значи, потоа назад до овој пример тука, сите ние го направивме на крајот
со овој пример е само исчистени код.
Значи, тоа е сè уште во целина куп на прекинувачи, целиот куп
услови тука, но забележите малку синтакса,
овој пристапи ДОМ јазол со уникатен проект за регистрација,
просторот средства погледне сега за потомок на тој јазол,
најдете ако тоа е од типот влезни и потоа дури и
ако не сте го виделе ова пред, може да знам
дека ова само значи најдете тоа со внесување ознака,
влез елементи кои има атрибут на името со вредност
на e-mail, а потоа нека ме бран мојата рака во некои
на одмор не е сите што стимулативна
но, навистина само jQuery синтакса за истите операции.
Во ред е.
Но, она што не е толку важно тука е прелистувачот страна работи
туку фактот дека ние имаше почиста и почисти начини
на всушност прави дека кодот работа.
Во ред е.
Било какви прашања?
[Беззвучен Забелешка]
OK. Сега на забавата дел.
Значи, node.js Зошто?
Кој се грижи?
Што знаеш за тоа денес?
Node.js, зошто?
Хенри [претпоставува правопис].
[Беззвучен Забелешка]
Батерија ресетирање?
Што - ова е совршен карпа закачалката
за втората половина на денешницата.
Зошто да не одам и да 5 минути пауза тука,
има половина бонбони машина таму, ако би
како некои бонбони без ставање една четвртина внатре