>> Добре.
Так, 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-хвилинну перерву тут,
Тобто половина цукерки машина є, якщо ви б
як деякі цукерки без покласти чверть дюйма