>> Добре.
Така че, JavaScript.
Почти всички в тази стая вероятно има известна степен
на комфорт с това дали това е път назад, когато в SC50
или това е било лично уеб проекти или дори
ако си направил малко от него с това минало база проект PHP,
но за най-много част, много от вас,
дори и ако имате някаква утеха
с JavaScript може би не е взето
за даденост как езикови работи и какво се случва
на под предния капак и това, което ние ще се опитаме
да се направи днес, е кори обратно някои технически слоеве
на което JavaScript е как Тя се различава от езика
като PHP, как може да бъде използва не само от страна на клиента
но също така и от страна на сървъра и След това се съсредоточи много специално
на тази рамка, не забележите JS който по същество е време за работа,
програма, с която можете може да изпълнява JavaScript код,
сървъра страна и това е все все по-популярен вид
на по еднакъв ръст тази дни от вероятно Ruby и PHP
и Python и ще видите
че има някои доста мощни функции, по пътя на някои
на вградения в езика конструкции.
Но на първо място, някои от най-лесните неща, само за да ви напомня,
за това как работи този език и ако имате затруднения да видите всеки
от това, просто вик навън и ние ще се адаптира.
Така че, един като в PHP има такова понятие за основна функция,
просто започнете да пишете код
и ще можете да за тях го тълкува горе до долу.
В контекста на сваляне
или в нещо, от страна на сървъра ще видим някои примери
след малко.
Условия, синтактично еквивалентни на PHP, както и С,
C + + и други езици така че просто да ви даде усещане
за това как бихме могли да го структурира,
там е просто една канонична състояние.
Булеви изрази, точно същото синтактично като сте виждали
в същите тези други езици, както за oring
и за прекратяване неща заедно.
JavaScript има ключове, много прилича на PHP и други го направим
и вие не сте ограничени, като в C до интегрални примитиви
като символа и целочислени може действително извършване на други видове ценности.
Loops. Така, това е точно същото
и вероятно дузина езици, докато цикли, правя, докато примки
и след този трик тук.
Така че, това е нещо като известен като бързо изброяване
и това е един много хитър начин на точно като в PHP прави
за всеки FU като бар можете по подобен начин,
в обект на JavaScript, когато обектът е на името
на променливата тук, да речем, VAR I в обект и на всяка итерация
на този цикъл, аз е ще бъде едно
на ключовете от този обект.
Така че, ако имате обект за ученик и студент има ID
и име, и къща, итеративно аз ще взема
от стойността на ID, името и къща и можеш тях индекс
в обект, като че ли е масив, използвайки квадратна скоба
нотация, за да получите стойността на ключовата ID или името
или къща и така нататък.
И противно на здравия предположение, JavaScript обекти,
свойства не са непременно да бъде гарантирано
в същия ред, това е също вярна на PHP, така че не си мислете,
че нещата ще останат в същия ред
че сте поставили тези ключови стойност двойки в един обект.
Какво ще кажете за масиви?
Има няколко начина да го напиша синтактично
но това е може би най- често сега само с помощта на квадратен
скоба нотация.
Така, това е променлива набирате номера, съдържащи масив
от шест числа там, Ето един прост низ
и забележете какво е отсъствал от тези примери,
какво е JavaScript очевидно липсва.
Да. Така че, няма понятие от пишете, със сигурност не
в този контекст тук, но това е наистина един низ.
Така че, JavaScript има видове и че наистина е масив
който от своя страна е тип и всеки от елементите
в този масив са от тип номер, както ги нарича JavaScript.
Така че, това е свободно въвели език и ще видим
че JavaScript като PHP има оператор за самоличност
и други механизми за фактическа проверка какъв вид
на някои променлива както за проверка за грешки
и за други приложения.
И тук е обект на проба съдържащ само ID и име.
И сега, забележете, че ние сме използвайки къдрава скоба нотация,
вдлъбнатината и бялото пространство е нещо безсмислено
и това декларира променлива, чието име е Роб
и чийто ID е 1 и дата тип е тук нашата брой
и струнен съответно.
И след това е нещо малко по-различно
ако някога сте направили нищо с Ajax тези дни?
Вероятно използвате обект като този
но това, което си струва да се отбележи тук?
Какво е синтактично някога толкова различно, само за няколко
на нещата между този пример което е несъмнено по-малък
и този по-голям пример.
Така че, на първо място в лаик термин, какво е това?
Какъв е типът на персонал ще ви кажа?
ОК, това е един масив, това е масив от какво?
>> Обекти.
>> OK, това е масив от обекти.
И сега, се фокусира върху само едно - всяка една от тези обекти,
какво е различното между това и това?
>> Ключовете са струни.
>> Да. Така че, ключове са струни,
и клавишите са всъщност струни и в двата случая
и това е нещо идиотско
в мое мнение исторически дизайн решение, когато сте с помощта
JSON, JavaScript Object Notation,
който е по същество формат транспорт
за изпращане на данни обикновено в мрежата
между клиент и сървър, , което трябва да се помни,
че това не е действително валиден JSON и това е една
на тези FYIs освен ако някога взрив главата си срещу стената
в продължение на няколко минути, за нищо добро причина, не е валиден JSON
защото ключовете са всъщност не цитира.
JSON идиотски изисква бутоните да бъдат цитирани не само
но те да бъдат двойно цитира, единични кавички не са достатъчни.
Така че, глупаво малко нещо и повече от един забавен факт
за днешните цели, но тази също ще бъде валиден JavaScript
тя просто не е всичко - на Converse не е вярно.
Добре.
Така че, ние ще видим много повече от това.
Добре.
Така че, това е JavaScript синтактично вероятно доста
познато, някой от вас, които имат никога не използва JavaScript преди
това не е огромен скок от PHP или почти всички процесуално език
, които може да са използвани.
И така, днес ние ще се съсредоточи върху интересните аспекти
на JavaScript особено в рамките на не JS
но не само защото до сега вие сте вероятно,
ако се използва Javascript, тя се използва вътре в браузъра.
Така че, без JS е среда след това в малко ще
да ни позволи да получите достъп до JavaScript код на клиента -
от страна на сървъра, но на първо място, нека да разгледаме
в нещо, което е малко повече от страна на клиента.
Така че, аз съм отишъл в и това е свързан на уебсайта на курсове,
ако искате да играете заедно, има две поддиректории
в днешния Zip на нарича източник шипове профучават на сайта
и това са само Няколко примера спомените
неща, които може да са видели преди и аз някак ги построили
нагоре от простото до леко по-сложно да закачка
някои от функциите, на JavaScript.
Така че, нека да вървим напред и да се поглед например това.
Така че, за съжаление етикет мигане е убит преди няколко години
като начина, по който имам по-хубава и по-хубава
и етикет мигане е буквално отворена скоба мига близо скоба
и някак не вече с нас.
Но, все още можем да възкресим тази идея за етикет с просто вид
на мислене за него логично, как искаш да отида
за вземане на нещо като това мига интуитивно?
Ако приемем, че се знае малко Малко JavaScript и CSS или
в този момент, това е ОК, ако не го направиш.
>> Задаване на време навън и да се скрият то тогава след като ще го маркирате
и да го покаже отново.
>> Да, перфектно.
Това е нещо като програмиране 101,
как ще се постигне визуален ефект като този?
Е, някак си Трябва да покажем нещо
и след това се скрие нещо, шоу нещо, да се крият нещо
и като Jonathan предлага използване на някакъв вид време навън,
някакъв график можете да направите това многократно без да се налага
да използват една линия или нещо подобно.
Така че, нека да отидат в Blink-0.html
и ме остави да се свие шрифта малко
така че повече от това става.
И нека да разгледаме в това, което става тук.
Така, на първо място, забележите, че тялото
на тази страница е супер прост, вътре в тялото
на страницата е просто DIV.
Аз съм произволно даден ИД на поздрав
и че може да бъде всичко толкова дълго, тъй като е уникален
и след това просто трябва някои прост текст, здравей свят.
Така че, ако аз сега превъртете нагоре, забележите някои пухкав стайлинг.
Така че, аз казвам, остър поздрав, който както знаете
в CSS просто означава еднозначно идентифицира елемент
с идея за поздрав,
размер на шрифта става произволно да бъде този, марж и текст подравняване.
Така че, безинтересно естетични детайли
за грубо центриране на текста.
Така че, интересната част е в етикет скрипта тук
което аз се случи да се сложи вътре на главата на страницата.
Така че, we'll - можете да направите това в произволен брой начини
и ще видим няколко повторения на същата програма
но нека да започнем от върха.
Така че, аз съм обявен за функция, наречена Blink
и очевидно той използва тази вграден в DOM метод, наречен
getElementById което е може би един от най-мощните методи
че можете да получите от кутията с JavaScript търсите
"Поздрав", не трябва да бъде двойни кавички, както беше
в HTML или е е добре толкова дълго
като сте стилистично последователна тези дни аз смея да твърдя,
много хора използват Java, единични кавички в JavaScript,
двойни кавички в HTML, но това няма значение,
толкова дълго, колкото ти си последователен.
Така че, тук, ако не сте запознати, всъщност можете да получите достъп до
с JavaScript CSS свойства на елементи.
Така че, забележете, че съм декларирана променлива наречена Разделения
и се съхранява в на тази променлива,
позоваване на каквото и че DOM елемент.
Така че, ако мислите, че обратно на CS50 или всеки клас, в който си мислиш,
за дървесни структури и DOM, Document Object Model,
това е само една препратка на възел в дърво,
, която представлява тази страница
и ако div.style.visibility имот равни, равни, равни,
скрит, тогава аз просто Искам го превключите
както е предложено Jonathan иначе аз искам
за да го превключите към скрит.
Сега, както в страната, защо тройката равнява там?
Или това, което е, че в сравнение с двойни равни?
>> Strict еквивалент.
>> Съжалявам.
>> Strict еквивалент.
Така че, това е операторите на самоличност
където от вас не си проверка само стойността на променливата
като с равен, равен смисъл но също така и от вида на това.
Така че, въпреки че ние не трябва посочени дотук всички данни
видове за всички променливи в тази или някоя от слайдовете,
има вид, свързан с този низ скрит
с тази стойност, скрити и че е разбира низ.
Така че, в този случай, няма значение
защото няма начин, че ние ще обединим низ
на "скрита" с някаква друга стойност
но това е често добра навик бих казал, за да получите
в използването на равни, равни,
знак за равенство е по принцип нещо добро.
Тя ще направи вашия код по-силен, както в PHP, но
и в JavaScript защото вие ще изпълните
в понякога ъглови случаи където стойност може да бъде нула
че сте проверка за и нула може да се смесил с невярно
или може да бъде не и като в PHP,
Javascript също може да има няколко фалшиво стойности, където от нула
и невярна и нищожна и неопределен всички те могат да разрешат имплицитно
да лъжа.
Но ако сте наистина искат за да проверите за определена стойност
като нула, броя, или невярно двоичният тогава ще трябва
да използвате този оператор идентичност.
Така че, това може да се случи, за да получите в така или иначе, въпреки че тук,
това е нещо безсмислено защото знаем, ние сме проверка
за низова стойност и това е няма да бъде нищо друго.
Така че, тук е магията след това, ако аз превъртете надолу до тази линия тук,
очевидно, построена в обект на прозореца
и това е функция на браузър, можете да получите достъп до
до този супер глобален обект, наречен Window,
във вътрешността на който е някои функции,
ако част от които е зададен интервал
и отнема очевидно какви аргументи?
Да.
>> Функция повикване и време.
>> Добре. Така че, една функция обадите и време
и така специално препратка към функция,
указател към функция в известен смисъл
и това е функцията че става
да се изпълнява всеки брой милисекунди и в този случай,
това е на всеки 500 милисекунди.
Така че, това е начин за предизвикване на ефективно и безкраен цикъл
без използване на повторение но като разказва JavaScript
към двигателя вътре на браузъра
да направи това на всеки 500 милисекунди или е близо
до 500 милисекунди, тъй като може,
Оказва се, че под капака,
там е, което се нарича събитие контур и ние ще се върнем към този
в контекста на възел JS че просто постоянно вид
на седи там, предене, чака за работа да се свърши
и веднага след като го осъзнават,
500 милисекунди са преминали Blink ще се нарича отново
и отново е успоредно на всяка друга работа
, която трябва да се свърши.
И така, какво можем да подобрим тук?
Е, нека да се отвори до мигане-1.html
и да покаже за мигане-1.html
като естетически напълно идентични.
Така че, това, което бихме могли да подобрим тук?
Е, забележите, че той Беше нещо безполезно
за определяне на функция, наречена Blink, защото колко
в колко места нали наричаме функция миг?
>> Само веднъж.
>> Така че, един.
Така че, това не е лошо, в Всъщност, вероятно е доста
право напред.
Аз определено функция Blink, I наричаме функция Blink чрез
на този параметър, но технически,
там не е причина за то и обща парадигма
в JavaScript е действително да се възползва от ламбда функции
както може би си спомняте от 51 или анонимни функции
, където, ако не е нужно име на функция,
Ако сте само като го нарече със сигурност на едно място,
защо притеснява задръстват код, задръстват ума на програмисти
и името си пространство наистина със символи
че наистина не трябва да се грижи за.
И така, в тази версия тук,
забележите, че се обаждам window.SetInterval директно
на самия връх на моята скрипт тагове тогава аз съм минаваща
в безименен функция че не възприема аргументи
и това е перфектно глоба и след това тялото
на тази функция изглежда е идентичен с това, което беше преди
и единствената синтактична разлика сега е,
тук до 500.
Аз съм затваряне на тялото на функцията
и след това, което казвам изпълнява тази предишния код,
на всеки 500 милисекунди.
Така че, съвсем незначителни промени
но е стъпка към това, което е вероятно по-елегантен
изпълнение на това.
Така че, нека да вземем този един стъпка по-нататък, ако аз сега отида
в мигване две, вие ще виж обща библиотека,
ефектът от които ще
да бъде напълно маловажен естетически, но ако отидем
в два версия тук, известие че в горната част на главата ми,
Аз бях включен на най-новата версия на JQuery.
И след това, тук долу, Току-що почистени
до кода малко, това е няма да бъде забавно свят
да продължите да използвате типични функции DOM
и вид на сурово JavaScript.
В действителност, тъй като може да JQuery знам е станал толкова популярен
че повечето хора просто Jquery конфликт с JavaScript
но наистина просто вечеря полезна библиотека писмен
от човек на име Джон Resig и от други
които имат само прави много досадни неща
в JavaScript лесно и по-кратка.
Така че, в този случай тук какво става?
Така че, аз имам този вид на знак за долар, повече за това
само за миг, след това това е избор на CSS.
Така че, това е много подобен на духа на това, което съм направил и преди,
но този път, аз съм буквално се използва етикет хеш
да показва уникален идентификатор, наречен поздрав
и след това очевидно . CSS е метод, построена
в какъвто и да е обект е, че аз току-що създадената
и аз съм проверка на стойността на ключа на видимост.
И ако стойността на този ключ равни, равни, равни, скрит,
тогава аз ще го превключите и Отивам да я превключите този път
с помощта на същия метод, което очевидно е претоварен
в смисъл, че е две различни подписи,
един с един аргумент и един с два аргумента,
вторият от които е инкубатора,
първата от които е газопоглъщащ така да се каже.
И ако любопитен и ако искате всъщност никога не погледна в това,
ако отидем в jquery.css надяваме топ хит е наистина това
и можете да видите по- официално обяснение
че ние просто използвайте това, . CSS с име имот
и след това инкубатора е точка CSS
с име на имот и стойност.
Така, незначително по-чиста, но забележите нещо като модел тук
с всяка итерация на този кодекс,
ние сме нещо което го прави по-строг и по-строг и по-строг
и има по-добри казват дизайн
тъй като ние сме с помощта на някого друг код, който е елиминиран
някои от сложността.
Така че, сега нека да се направи това още по-просто.
И всъщност, ако се отстранят всички кавички ще видите точно всички
коментира, че ще видим как просто това е намерила.
В един разликата Тук, разбира се,
че аз съм с помощта на превключване метод, който също идва вграден
, за да Jquery и това е само
защото някой друг пише кода
че всъщност превключва настройката за видимост
на всяко DOM елемент че можете да го изпратите.
Така че, по-добре и по-добре.
И така, това е един модел,
въпреки че това е една вечеря прост пример и сортиране
глупаво нетен ефект, който е мигаща част от текста,
това е този вид на мисълта процес, който трябва да се мисли -
се мисли за не непременно много първи
пасивен писане нещо за предстоящия проект
но със сигурност като си повтаряте с вашия консултант или с мен
и вашият екип срещи или сте просто прегледайте Вашия съотборници код
за затягане неща, нали?
В края на краищата, те са по-малко -
а по-малко реда код в крайна сметка има
на теория колкото по-малко бъгове има вероятност да се канят
защото има само по-малко код да се забъркваш с.
Добре.
И така, няколко храна за вкъщи.
Lambda функции анонимни функции,
много от които ви не сте виждали преди
а след това и просто затягане нещата с библиотека
Jquery като в този конкретен случай.
Добре.
Някакви въпроси?
Нека да направим един друг страна на клиента аспект тук,
във форма нула имаме този нетен ефект.
Super проста форма и очевидно ако се опитам да кликнете регистрирайте тук,
първоначално тя ми каза, че са регистрирани, добре, не съвсем.
Е, защо е така?
Е, тук е форма-0.html много малко код,
не JavaScript каквато и това е напълно фалшив сортиране
на форма, защото действието стойност е registered.html
което означава, че няма значение какво I въведете в тази форма,
, където се върви към да бъде изпратен от сървъра?
Да. Така че, да registered.html което очевидно е HTML файл
който е следователно статично файл, който не разполага със средства
на вземане на приноса на потребителите се предположи, че няма JavaScript код
вградена в него, че е търси в URL адреса
така че това е напълно по NOOP и че нищо няма да се случи
с представените данни, но можете да видите структурата
на сравнително проста форма HTML5
че има няколко парола, няколко вида вход.
Така че, нека всъщност сега добавите някои проверка за грешки
и да видим как бихме могли подобри това.
Така че, тук е нещо лошо начин за прилагане на този човек
и това е нещо като гаден парче код.
Така че, нека първо превъртане надолу към дъното
за да видите какво е същото и това, което е различно.
Единственото различно Сега между този
и предишната версия е че съм дал формата и ID
на "регистрация" може да е било нещо, което искам
но трябвало да бъде еднозначно разпознаваеми дори и това не е
строго необходимо, защото ако страница има само една форма, със сигурност съм
можах да го намеря с един от методи селектор Jquery те години.
Но по този начин просто прави по-детерминирана.
Така че, ако отида аз сега да ми скрипт тагове, забележете следното,
window.onload равни анонимен функция.
Така че, това, което се прави това?
Така че, може би си спомняте, че в програмирането на клиентската страна -
Джава-скоро HTML страници са свързани различни събития
с елементи, щракване и представяне и фокусиране
и размиването и други такива събития, които могат да се случат
като потребител обикновено взаимодейства с страницата
window.onload прави това, което казва.
На прозорците цялата товаренето
Така че след като всички изображения са били изтеглени след като всички файлове са
била изтеглена и веднъж страницата е заредена,
направи следния код, и забележите, ако преминете към дъното
на този метод, забележите, че има не скобите
след фигурна скоба което ще рече
че аз не съм изпълняващата тази функция тук сега,
браузърът ще се изпълни това за мен, когато го е определил
че страницата е заредена.
Така че, нека да видим какво сме направили,
document.getElementById регистрация
така че просто ми дава позоваване на възел
в дърво, което е на има ИД на регистрация.
И сега, аз отивам да регистрирай друго събитие манипулатор
чрез правене form.onsubmit получава тази анонимна функция
което означава, че следните код трябва да се изпълни, когато
че формулярът се подава.
Сега повечето от това е просто нещо скучно логика.
Така че, ако стойността на имейл поле във формата е
"Нищо", тогава вие трябва да предоставите вашия имейл адрес,
викаш на потребителя с сигнализира и след това връщане фалшиви.
И тогава аз имам куп други проверки,
проверките за въвеждане на паролата,
проверките, ако пароли са еднакви
проверките, ако споразумението квадратче е проверена или не
и аз просто крещи потребителя, ако всяка
на тези тестове всъщност се провалят.
И така, тук е един пример дори макар че е малко скалъпен
тук факта, че аз съм с помощта равни, равни, равни,
означава, че потребителят не може да се опиташ да ме измамиш
чрез въвеждане на каква стойност.
Или по-скоро аз съм наистина проверка за наличие
на празен низ, потребителят все още не е напечатано нищо.
Ако потребителят въвели в буквално нула,
"Нула" потенциално би могло да бъде бърка с празен низ.
И аз казвам, че е нещо на безсмислена тук
защото очевидно дори нула не е един имейл адрес.
Но ако това е по- родово поле като текстово поле
или наименование или описание или нещо, което искате да ценим за
и това не е задължително синтактично имат
да бъде имейл адрес, потребителят да напишете нещо като нула
и отново ъгъл случай, но това е Затова обикновено проверка видове се
полезно нещо.
Ти наистина проверка за потребителя като написали нищо
в тази област.
И така, какво се случва, ако никой на тези тестове се провалят, добре,
връщане вярно вътре на манипулатор на събитие
като onsubmit просто означава, нека първоначалното поведение действително
разпространяват и следователно форма ще се подава.
И затова, когато най-накрая щракна представи преди да имам
чрез да register.html и ако го направя, че сега, забележка,
Аз се развиках ако не го направя въведете имейл адрес
и аз да въведете malan@harvard.edu,
пурпурен [фонетичен], пурпурен, проверка на наказателното поле,
и сега се регистрират и тя ми казва, отново,
сте регистрирани или не съвсем.
Добре.
Така че, нека да изчистя само малко и след това преход
към новата по-нов от страна на сървъра неща.
Така че, ако отида в форм-2.html, забележите няколко неща.
Така че, един, донесох Jquery обратно в микса
така че отново е този знак за долар
и сега аз съм с помощта някои JQuery методи.
Така че, на първо място, за какво става въпрос знака за долар, което е
толкова специален тук?
Какъв е знака за долар завързана през по-голямата всеки Jquery код?
Да.
[Безшумен Забележка]
OK. Така че, функцията на знака за долар минава през DOM търсите
за нещо с този специално CSS селектор.
Така че, вярно, но почти твърде точни.
Това е, което се случва, когато премине в низ
като в този случай, но не го направиш Винаги трябва да премине в низ.
В действителност, в случай точка, самата първа линия тук е, че това не е
Селектор CSS, аз съм минаваща във функция Ламбда.
Така, по-общо - така, добър отговор, но твърде точни.
По-общо казано, това, което е знака за долар представлява?
>> Just Jquery.
>> Да. Така че, просто Jquery или това е просто една функция
че някои преди обтяжки години пише и други хора имат
тъй като повишеното че буквално по подразбиране се нарича -
Опа, се нарича Jquery.
Тя просто - тя се превръща навън за разлика от много
на езици знака за долар е перфектно валиден символ да се използва
в името на променливата има предвид, че
в PHP знака за долар очевидно има специално значение
но в JavaScript като в някои езици, знака за долар
и подчертават и други такива специални символи напълно легитимни
да използвате в свой собствен символ имена на променливи.
Така че, някой просто реши че, знаеш ли какво?
Това ще бъде доста досаден
да направи целия свят въведете Jquery през цялото време,
нека вид засадят кол в земята и да кажа,
"Тази библиотека ще използвате знака за долар. "
И в действителност, този поражда риск
че някой друг самонадеяно ще използва знака за долар
за неговото библиотека но Има начини за сортиране на застраховат
че когато използвате долара подпишете го карти за Jquery
защото можете да проверите дали той вече е бил назначен
към нещо друго същество.
Добре.
Така че, това е всичко, което е, че няма магия.
Това е просто секси търси парче синтаксис, че е хубаво
и бързо и лесно да пишете.
Така че, това, което се случва, когато въведете знака за долар отворени Paren
и след анонимен функция.
Е, оказва се, че това е всъщност стенограмите нотация
за документ точка готов отворена скоба.
Така че, както Синтия забелязала по-рано ние вече намери един
ъглов случай.
Ако просто преминават през функцията ламбда,
ефекта на долара знак е малко по-различна.
В действителност, това, което се случва в действителност е, че той е еквивалентен на този,
преминаване в позоваване глобалния обект документ
че е глобален точно като Целта на прозорец е
, която ви дава някои специална функционалност
че засяга цялата страница или браузър и се оказва
, че документ, когато го увийте с JQuery,
Jquery същество осъзнава, О, това е препратка
до този специален документ, обект,
нека сега да се регистрирате манипулатор на събитие, наречено готов
който не е роден JavaScript или DOM свързани.
Готов е Jquery нещо, което се казва
когато страницата е заредена всички HTML елементи
но не непременно зареден всичко на СГО и изображения
и JavaScript файлове и флаш файлове и обича.
Така че, това е една стъпка преди на натоварване след което продължете напред
и изпълнете следната.
И посока нагоре за използване на готови средства е, че можете да, нали знаете,
че всички елементи в DOM,
всички от уникално идентифицирани неща с документи за самоличност, те съществуват още
ако страницата, съдържанието му са все още зарежда и товарене
и вие имате някаква счупени икони за миг
или бяла страница във фонов режим.
Да.
>> Какво ще се случи, ако [недоловим]?
>> Perfect например, перфектен въпрос.
Така че, нека да видим дали можем да симулира това точно сега.
Така че, нека да вървим напред и да изтриете тези две линии до тук и след това
без да си прави труда да се фиксира отстъп, нека вървим напред
и изтриете това тук - Опа, това тук долу.
И сега, нека да преминем към страница, отидете на форма-2.html и тип
Регистрирайте се, сякаш нищо не се да се случи, да кажем, защо беше това,
да вървим напред и да се отвори нагоре инспектор на Chrome,
отваряне на конзолата, само за да видите ако нещо се случи тук, сега,
регистър, все още нищо.
Така че, кодът е синтактично глоба
така че аз не виждам никакви съобщения за грешки, червено
но това, което ясно не се случва?
Никой от моя код е прав, тя не работи така че никой
от моите кодове изглежда е изпълнение, така че защо е това?
Е, JavaScript и браузъри по-общо изпълни
съдържанието на дадена уеб страница, най- до долу, от ляво на дясно.
И проблемът е че тъй като горната
на тази страница е HTML след това главата тогава скрипт след друг скрипт,
това ще се изпълнява преди това, което е дори готов,
или дори съществува в дървото представяне на страницата.
Самата форма, дори и съществува тялото в този момент.
Така че, Jquery е достатъчно умен, с това е проверка за грешки
че ако няма елемент с уникалния идентификационен код на регистрацията,
това няма да спасяват от вас
и просто да предизвика някаква конзола грешка и прекъсне цялата страница,
това ще мълчаливо игнорира вас, но поради причината, че никой
на този кодекс някога изпълнява се
защото, когато имате регистрираните този представят манипулатор,
не е имало елемент да го прикрепя към.
Значи, това е нещо като не оп там.
Така че, като вместо тях се уточнява, изчакайте докато се зареди възраст
ако ние направихме window.onload нещо, което е нещо като
от старата школа начин на правене то или по-секси Jquery начин
по този начин, ние можем да кажи го чакаме, докато всички
на тези HTML тагове имат е анализиран, така че дори
Ако изображенията не са заредени, в поне възел е в дървото,
тогава JQuery може да се гарантира, че всичко, което е там.
Да.
[Безшумен Забележка]
Да, добре, да е абсолютно.
Така, друга разтвор на това, ако не се е възползвал от тази
или не си спомня че това е съществувал,
бихте могли да се движат абсолютно всичко това на дъното
на уеб страницата, от вътрешната страна на тялото все още, но под формата
и че също така би решаване на този проблем.
Това е просто обикновено смята за лоша практика.
Това е малко разхвърлян и помия, специално
ако продължаваш заглушаване всичко на дъното на страницата,
особено когато съм водене нещата прости с удар от всички
на моя код вътре на HTML страницата
когато разбира се можете да със сигурност получите в навик
от него факторинг навън в отделен файл
като на този етап това е просто хубаво
да централизира файлове в главата.
Освен там е цената, която плащате
чрез поставяне JavaScript още активи като CSS файлове
в главата на страницата, какво е риск, който избяга?
>> Бавно зареждане на страницата.
>> Бавно зареждане на страницата, защо?
>> Тъй като ние се опитваме за зареждане на всички библиотеки
преди [недоловим].
>> Точно защото браузъри прочетете горната код до долу,
от ляво на дясно, ако Google Анализ са бавни
или Jquery CDN е бавен или на Facebook API е бавен
и този файл, просто увисва потенциално зависимост
от това как се зарежда този файл, на цяла страница може да се появи, за да се мотае.
И ако видите това много откровено
на уебсайтове те имат много с ниско качество реклами
върху тях, ние сме просто една бавна или повалените уеб сайт може да се мотае една страница
за някои неопределен брой секунди
докато накрая браузъра надявам пъти върху онази
и след това ви показва останалата част на страницата.
Така че, ако някога сте се използва като на Facebook, като бутон,
във вашата уеб страница, позволете ми да видя дали мога да намеря тази
без да се налага да влизате тук.
Така че, ако отидете на Като бутон на Facebook
и щракнете върху Вземете код, дявол да го вземе,
Да видим дали можем да намерите пример,
Със сигурност някой е публикувал това.
[Pause]
Аз ще дам в няколко секунди, ако не виждаме това.
Facebook asynch - OK.
Така че, това е кодът, и освен ако не са го променили наскоро
че всъщност Facebook препоръчва да използвате
да заредите своята библиотека и всъщност предложи
че ще ви постави в тази тялото на вашата страница.
Така че, Facebook ви съветва създаде нещо като глупав DIV
че просто има уникален ID като това, тогава има етикет скрипт
и всичко това сложност по същество прави следното
и те не използват всяка JQuery защото те не искат
да поема никаква друга зависимости,
позволете ми да преместя това над малко.
Така че, забележете, те имат анонимна функция тук,
повече за това в един момент,
След това те използват document.createElement,
те са създаване на DOM елемент, това е като изчистване така да се каже
където етикет е от тип скрипт, това е след това се посочват
че атрибутът асинхр на този етикет ще
за да е истина тогава давай напред и да разбера какво е URL адреса
на Facebook е JavaScript трябва да бъде
и това е само фантазия начин
на проверка трябва да бъде HGP или HDPS.
И накрая, вие забележите това, което прави Facebook,
те ще получат DOM възела, който има ID на Facebook корен
което е това, което те казаха можете да поставите в страницата
и след това те да приложи на детето така че ефектът от всичко това е,
някак динамично се инжектира нов скрипт таг във вашата страница
като дете на DIV, който вмъква там, така че останалата част
на зареждането на страницата щастливо
и след това този код всъщност получава натоварени асинхронно.
Така че, по същество, след като Всъщност и аз отложено споменаване
на анонимната функция,
какво е това фънки синтаксис, отнасящи се до тук
когато имам не само функция отворите Paren, близки Paren
и след това фигурни скоби, защо отворените Paren тук
и след това на открито в близост, в близост Paren там, какво прави това?
>> [Безшумен] определянето и след това изпълнение?
>> Точно така, това е определянето на функция, която е анонимна
но само определяне на функция,
разбира се не изпълни функция, докато не го наричаме
по име, но разбира се това е анонимна функция
така че не може да се нарече по име, но можете
в JavaScript изпълни анонимна функция просто
от капсулиране на цялото нещо в скоби, тъй като ние сме направили
с тази скоба и това Paren тук и след това фиксиране
до края на функцията отворени Paren, близки скоба,
ако не искате да да го давате никакви аргументи.
Но това изглежда много глупаво,
като поради тази допълнителна синтактична сложност
че повечето хора не изглежда да се признае, каква е стойността
опаковане на тези три реда код
в анонимна функция по този начин.
Да.
За да се избегне >> презаписване на ценен в [недоловим].
>> Точно така, за да се избегне презаписване променлива
в съществуващата страница, нали?
Facebook е малко самонадеяно реши,
те започват да използват променлива E, това е доста вероятно,
че вие ​​или някой, използвайки на Facebook Like бутона
или каквото и друга социална щепсел
в има променлива някъде, наречена E. Така че,
от капсулиране всички на техния код вътре
на тази анонимна функция, те по същество имат свой собствен обхват
който не рискува опитва да се докара всички съществуващи променливи.
Така че, това също е всъщност много често срещана парадигма,
особено при писане код библиотека
или когато ти сам не направи Искам да се претрупва вашето име пространство
с други променливи, които можете искате стойността да живеят
и да умре, след като излезете от този блок от код,
Това е хубава техника в JavaScript.
Добре.
Така, след това обратно към този пример тук, всичко, което сме направили в края
с този пример е просто почистени кода.
Така че, това е все още имам цяло куп ключове, цял куп
на условия, но пък забележите малко синтаксис,
това има достъп до DOM възел с уникалния ID регистрация,
космическите средства изглеждат сега за потомък на този възел,
го намери, ако това е от тип вход и след това дори
ако не сте виждали това преди, може би знаете
че това просто означава намерите това с етикет вход,
входните елементи, който има атрибут на име със стойност
на електронна поща, и тогава нека ми помаха с ръката си към някои
на останалите не е всичко, което стимулиращо
но наистина просто Jquery синтаксис за същите операции.
Добре.
Но това, което не е толкова важно тук е страна браузър неща на
а по-скоро на факта, че ние имаше по-чисти и по-чисти начини
на действително вземане на този код работа.
Добре.
Някакви въпроси?
[Безшумен Забележка]
OK. Сега най-забавната част.
Така че, node.js Защо?
На кого му пука?
Какво знаеш за него днес?
Node.js, защо?
Henry [предположи правопис].
[Безшумен Забележка]
Нулиране на батерията?
Какво - това е перфектна скала закачалка
за втората половина на днешния ден.
Защо да не отидем и да вземат 5 минутна почивка тук,
там е половината бонбони машина там, ако бихте
като някои бонбони без пускането една четвърт инч