Аллісон Бухгольц-AU: Всі права все. Ласкаво просимо до розділу. Це наша передостанньому розділі. Це так сумно. Я не знаю, що я збираюся зробити не бачачи вас, хлопці кожен понеділок. Я думаю, ми повинні просто-- Може бути, ми могли б просто зустрітися тут і пообідати або щось. Я не знаю. Я принесу замість їжі. Ми просто говоримо. Але так, на наступному тижні буде наш останній розділ. На цій ноті, ви повинні вікторину на наступному тижні. Я знаю, що забув зробити мій, як, два тижні завчасне повідомлення минулого тижня, але, сподіваюся, ви, хлопці, знав, що це станеться. Сподіваємося, це один з останніх проміжних виборах для вас, хлопці, за семестр. Але це буде охоплювати всі матеріал, який ми пішли знову. Так що це не подобається, ви можете просто забути близько чотирьох петель або змінні. Тому що ми дізналися ті, на початку, ті, очевидно, справедлива гра для вікторини. 

Це буде той же формат, те ж саме довжина, так що ви вже звикли до цього. Там буде кодування за допомогою ручних проблем, Можливо, деякі вірно невірно, Можливо, якийсь короткий відповідь. Таким чином, ви повинні бути знайомі з форматом, особливо якщо ви берете Практичні тести. Але, як я кажу тут, це накопичувальними, але ми безумовно буде упором на речі з шостому тижні вперед. Таким чином, ми, ймовірно, не буде запитати вас про те, скільки байт в кожному типі або ці види речей, але ми, ймовірно, буде зацікавлені в таких речах, як пов'язані списки, або різні структури даних, або різні алгоритми що ми говорили. Тому переконайтеся, що ви дійсно на тих, і якщо ви потрібні будь-які ресурси, ось багато ресурсів. Я просто дав вам вид про швидке списку є. 

Наступний тиждень буде вікторина огляд протягом цього часу. Так що, якщо у вас є які-небудь питання або конкретні теми, конкретні речі, на вікторині, що Ви хотіли б піти знову, будь ласка, надсилайте їх мені завчасно, так що я можу вид підготовки деякий матеріал для цього. І на додаток до цього розділ огляді ми також проведення курсу всій огляд, як ми зробили минулого разу. І це буде робиться тими ж людьми. Я не знаю, якщо це робить це краще або гірше, але це буде мене, Ханна, Даван, і Гейб знову. Так що, якщо ви хочете прийти і побачити нам все жартували один з одним і ви пройдете через вікторини Огляд, ви повинні обов'язково прийшли до цього в наступний понеділок також. Таким чином, ви будете тільки варення понеділок упаковані огляду вікторини, і це добре бо тоді у вас є вівторок для обробки через все. 

Але, безумовно, не перевірити з цих ресурсів. Study.csv.net на сьогоднішній день, я думаю, один з найбільш корисним, в основному тому що він має Багато прикладів коду, він має всю владу Окуляри з усіма примітками на ньому, які дійсно те, що я малюю найбільш мої розділі матеріалів. Якщо є що-небудь в попередньому розділи, які я, можливо, що посилаються що ви не можете мати отримав, просто дайте мені знати. Як приклад коду минулого тижня, якщо хтось не отримав, що, Просто напишіть мені або прийти поговорити зі мною, і я подбаю про те, що ви отримаєте це. 

Так з цим, сьогодні ми будемо буде говорити про JavaScript. І ось ми з Томмі, який я був просто кажу вам вчора ввечері. Я люблю Томмі. JavaScript є його улюбленим Мова, як він говорить тут. Вони будуть намагатися і сказати вам, що це чи не краще, і вони будуть праві. Так Томмі майстер JavaScript. Я не зовсім на його рівні, але я був би, "Томмі, як я вчу ці діти JavaScript? " Так що я отримав кілька порад, так сподіваюся, вони вийшло. 

Так пара речей, які потрібно знати, що JavaScript є сценаріїв на стороні клієнта мову, тому в той час як PHP є те, що ми розглянули більше на стороні сервера, було завантажити на сервер, компілюватиметься і виконуватися там. Цей виконаний на своїй машині. ОК? Таким чином, ви завантажити деякі сторінки JavaScript, і він виконує на вашому комп'ютері. Синтаксис дуже схожий на C і РНР. Ми збираємося пройти через Деякі приклади JavaScript, і ви будете бачити, що Так ми говоримо про змінних, цикли, та умови дуже схожі. ОК? Справа в тому, що вони такі схожі є ймовірно, буде спрацьовувати деякі з вас до, в деяких випадках, просто тому, що Ви включити трохи C де не повинно бути. Може бути, ви спробуєте і щось типу коли він не повинен бути надрукований. 

І від того, одна справа знаю, що JavaScript в динамічно типізованих мову, як PHP. Так що, якщо ви, хлопці, пам'ятайте, з розділу минулого тижня, коли ми були доброзичливими робити наш PHP прискорений курс, ми бачили, як рядок можна бути перетворився на INT, і так далі. Тип ваших змінних визначаються під час виконання, тому вони можуть змінюватися з плином Курс програми, і таким же чином, що ніколи дійсно оголосити типи для PHP змінних, ми будемо робити те ж саме що тут, де ми насправді не контролювати типи наших змінних, так сказати, як це робимо ми в С. 

І тоді одна річ, це досить круто що ви можете про помилки перевірити за допомогою консолі, з цією великою функції console.log, що дозволяє виводити різні змінні або об'єкти, які ми про що поговорити. Так само, як минулого тижня, коли я був як, "використовувати цю функцію," зі скиданням від вашого PSET це функція Ви хочете використовувати, console.log. Я був так здивований, як багато студенти робочий час не знаю про функції скидання. І я подумав: «Хлопці, це воля зробити ваше життя набагато простіше ". 

Гаразд, так що це було свого роду тільки короткий річ, як завжди, у нас є приклади. Я знаю, що ви, хлопці люблять тих ,. Так ось приклад дуже просто JavaScript файлу тут. Так що це просто збирається створити це спливаюче вікно, яке говорить, "Привіт світ", коли ви зайдіть на сторінку, але давайте спробувати пройти через це небагато. Так, очевидно, це просто як вашої звичайної index.html. Так, тільки наша нормальна шаблон тут, і у нас є HTML, ми маємо нашу голову, і так само, як за допомогою CSS, як ми включені деякі поза файл, вірно? У нас є певний тип скрипта текст, який JavaScript. І джерело hello.js, який є тут. Це весь файл з hello.js. І тоді у нас є деякі Назва та деякі тіла HTML що ми насправді не хвилює. 

Що відбувається, є, коли ми завантажуємо цю сторінку, він автоматично виконує цей сценарій. ОК? Так JavaScript буде виконати автоматично. Так що це буде робити, це буде негайно піти і виконати це. І це скаже, "попередження. Привіт світ ". Які оповіщення є функція, яка фактично, породжує цей прапорець. ОК? Так що це свого роду чергу охоплювала. Там немає нічого зайвого у нас було зробити Крім того, тільки попередження, а потім все, що ми хотіли в нашому вікні попередження. ОК? Так що це просто супер просто приклад того, що JavaScript може зробити. 

Один з дійсно здорово речі, як ми побачимо, є те, що JavaScript дозволяє маніпулювати веб-сторінок, без завантажити їх в будь-який час. Так що якщо ви want-- наприклад, якщо Ви нависли над чимось, якщо ви, хлопці коли-небудь бачив, як меню барів, або при наведенні курсору на деякі тема з'являється випадаюче меню, це тому, що з JavaScript. ОК? Таким чином, ви не перезавантаження всієї сторінку, щоб отримати це меню, щоб показати, ви просто шукаєте для деяких конкретних дія, яка користувач прийняв, які називаються події, які ми отримаємо в, і як тільки ви бачите, що ви говорите, "Добре, редагувати щось на це сторінка і зробити його виглядати по-різному, але тільки редагувати ці конкретні речі. Не завантажуйте все це ". Так що насправді набагато краще, і Ви не повинні перезавантажити ваші сторінки, і це дійсно здорово. 

Так декларації змінних, так що ви можете почасти бачити, Я поклав зверху тут, слабо типізований. Так що це дуже схоже на PHP. Нам не потрібно, щоб розповісти JavaScript який тип ми чекаючи кожної з цих змінних буде. Вони можуть бути все, що типу ми хочемо. Таким чином, ви помітите, в даному випадку, ми заявляємо, їх дуже просто, тільки з "Var" а потім, що ми хочемо наш ім'я змінної, щоб бути. Одна річ, щоб відзначити, що, коли ви покласти VAR перед ім'ям змінної, це локально Приціли його. ОК? Це абсолютно розумним для вас повністю зітріть Вар і просто з рівним CS50, і це було б просто глобальна змінна. ОК? Таким чином, ви можете ініціалізувати його в обох напрямках, Все залежить від того, як ви цього хочете. Так що якщо ви ініціалізації це всередині функції, і ви хочете, щоб змінну залишитися областю дії в рамках цієї функції, Ви будете хотіти зробити щось на зразок Var ім'я змінної, в порівнянні з, якщо ви хочете його глобальну область, то можете просто зробити ім'я змінної, а потім все, що ви хотіли б це встановлюється рівним. ОК? 

Це своєрідна прохолодна річ тут, тому що, якщо ми помічаємо, наша змінна б починається як правда. І те, що це does-- може хто-небудь сказати мені, що це робить? Отже, ми маємо деяку тривогу. Що б типу В бути на самому початку? АУДИТОРІЯ: Boolean. Аллісон Бухгольц-AU: Boolean. Вірно. І тоді ми перепризначити б в цьому рядку, чи не так? Так то ось, який тип B бути? Було б рядок, вірно? Так що важливо для повідомлення, що в C, ми не міг майже ніколи не роблять щось подібне. Ми повинні були б мати змінну, кинути його якось інакше, Може бути, зробити якусь функцію з двома я, йдуть від заряду до цілого числа. Але якщо ми помічаємо тут, б дуже легко змінює тип. 

АУДИТОРІЯ: Почекайте, так що ви можете просто бути, як "зробити б ціле?" 

Аллісон Бухгольц-AU: Так. Ви можете просто перепризначити б в ціле. 

АУДИТОРІЯ: Справді? 

Аллісон Бухгольц-AU: Так. І тоді це було б Int. Так що ваші змінні можуть змінюватися з плином Курс програми теж. Вони не є строго типізований. Це дуже слабо типізований. ОК? В основному ваші змінні можуть робити все, що вони хочуть, а ми якось бачив PHP. Вони можуть робити деякі божевільні речі, так важливо бути досить обережним. Ім'я змінні також. Якщо ви цього не зробите, всі раптом Ви будете як, "Почекайте, я думав, що це було рядок, і тепер це INT, і я не зовсім впевнений, що тут відбувається. " Так що це просто простий приклад показуючи, як змінна можете легко змінити його тип по Курс програми. 

ОК. Так це має виглядати супер, супер знайомі. Так ось наші петлі в JavaScript. Вони точно так само, за винятком Замість чотирьох Int я дорівнює нулю, ми могли б просто сказати, вар я дорівнює нулю. І тоді ми могли б у той же самий вид стану, той же самий вид оновлення, я плюс плюс працює просто відмінно. Так Четвірки ж, whiles такі ж, і робити whiles точно те ж саме. Те ж роду загальному форматі. Зауважимо, чотири круглі дужки, кронштейни, це все те ж саме. Також буде коми коли ми доберемося до прикладі коду. Ви побачите, що це досить так само, як в. 

Для оголошення функцій, знову ж таки, дуже схожі. У нас є деякі функції, які просто каже, що це функція, а потім Назва нашої функції і входи. І знову, якщо ми помічаємо, ми не мають жодного типу тут взагалі. Вірно? У нас є нічого не кажучи, що це повинні бути Інтс або двомісні, або поплавці. Вони можуть бути все, що вони хочуть. Що важливо, так це, зауваживши, що ми повинні написати функцію заздалегідь щоб JavaScript знаємо, що це насправді функція. 

Так що це просто деякі прості сума Функція, яка повертає X або Y, і що тоді також круто є те, що ви можете насправді призначити функцію змінної. Таким чином, в цьому випадку, сума тепер функція, яка насправді суму. Так що, якщо ви помітили, тут, у нас є Функція, ім'я функції, входи. Вірно? Тут ми просто функції і входи. Отже, це називається анонімної функцією. І це те, що повинно бути новим для більшості з вас, хлопці, якщо не всі з вас. Так в основному, що це означає, що ми не потрібно ім'я нашого Функція в цьому випадку. Ми можемо просто сказати: "Добре, я збираюся мають цю функцію, яка виконує, тут є його входи, і ось що він збирається робити ". І особливо, коли ви привласнюєте Функція деякої змінної що ви збираєтеся управляти, Вам не обов'язково потрібно назвати, тому що Ви збираєтеся мати на увазі до нього по цій змінній ім'я, не те, що функція була насправді називається. ОК? 

Так що, якщо ми бачимо тут, ми є деяка змінна суму зараз , Що дорівнює сума трьох і п'яти років. І ми б це. І це буде просто є попередження, три плюс п'ять дорівнює числу. Це плюс просто об'єднати всі наша відповідь була на рядок. Також здорово, плюс може об'єднувати рядки. 

Для JavaScript, як і PHP, HTML і CSS, як ми вже говорили, Багато що з цього ми начебто приймаючи навчальні колеса від тут і ви, хлопці, є багато курсі як насправді зрозуміти ці речі. Вони трохи відрізняються, але вони не настільки далекі і що ви не можете Google речей або шукати їх в Інтернеті з W3 Schools. І ми дійсно чекаємо вас хлопці, начебто, експеримент і вчитися на свій власний. Таким чином, я знаю, це може здатися трохи менш ретельно, ніж деякі з гр речей що ми робимо, але це насправді причини. Але, сподіваюся, це не надто різні, і це не переважна. 

Так як масиви в JavaScript, знову дуже, дуже схожі. Вірно? У нас є масив змінних це одно порожні дужки, і це тільки порожній масив. Це часто називають Буквальний позначення масив. Ось тільки одна річ, ми її називаємо. Якщо ми бачимо масив два тут, у нас є деякі Буквальний масив, який складається з трьох елементів, чи не так? І тоді у нас є деякі вар третій елемент це деяка змінна це просто збирається провести цей рядок, JS. 

Елементи, хороші зауважити, розділених комами, так само, як можна було б очікувати. І ви також можете отримати доступ до цих, як ми зробили в С, з цим індексом позначень, чи не так? Так відрізняється від PHP Зараз ми повертаємося просто вид увазі до речей за індексом. Так само, як С, це також нульової позначки. Я відчуваю, що це буде насправді жорстокий якщо вони раптом зробив JavaScript одного Індекс, і ви повинні були повністю переосмислити те, як ви думаєте, про масивах. 

Одна прохолодна річ у тому, що замість того, щоб do-- якщо ви коли-небудь хотів довжину масиву, Може бути, ви ітерації через неї поки ви не знайдете якоїсь мети, або ви б просто знати, що це таке. Оскільки JavaScript є дуже вільним у більш способи, ніж просто типу, як ми бачимо, тут, ми можемо тільки зробити цей масив більше, тому що ми вирішили. Якщо ми помічаємо, масив три має три речі, щоб почати, але потім все раптово, ми, як: "О, я просто жартую. Ми насправді відбувається щоб зробити його 101 речей ". Так що якщо ви коли-небудь хотіли знати Фактична довжина вашого масиву, Ви робите це, як це. І ми збираємося, щоб побачити багато цього позначення в прикладах, але з JavaScript це, як правило, те, що Об'єкт, ви говорите про точка будь-якого роду функції Ви хочете використовувати з нею. ОК? 

Таким чином, в цьому випадку наша об'єкт є масивом два, і ми говоримо, що хочемо Довжина масиву два. Так що це просто викликає як довжини на що. І це буде повернути довжину. Також щось потрібно зазначити, що якщо ми помічаємо, наші масиви, На відміну від C, вони не мають щоб бути все ж типу. Це набагато більше схоже на PHP. JavaScript в основному так само, як Це цікаво зливаються С і PHP. Таким чином, ми ввійдемо в це. В даний час, давайте припустимо, що ваші масиви в основному як C масиви, в тому, що вони дорівнюють нулю індексуються. ОК, так що це все. Ви також можете просто розширити Масив до того, що індекс ви хочете. У той час як це, ймовірно, SEG вина на вас або дати вам якусь помилку, JavaScript, як, "Ні, це нормально. Я отримав це. Ми просто їхати прямо де ви хочете ". 

Отже, об'єкти дуже важливо. Ви, хлопці, будете використовувати багато з них в P SET, якщо я правильно пам'ятаю. Так речі, що вони є схоже в C є структурами. Таким чином, ви можете думати about--, коли ми йдемо до прикладу право після цього я думаю, що це зробити набагато більше sense-- але ми в основному використовувати об'єкти в організувати інформації про курс пов'язані між собою. Коли ми говорили про Структури в С, ми часто говорити про студента, який мав якусь назву, ID, будинок, ви знаєте, концентрація. І це свого роду те ж саме що ми використовуємо об'єкти тут. Це просто організувати Аналогічна інформація. 

Ви також можете думати про них, як більш схожий на асоціативні масиви в PHP. Так що це буде свого роду речі де у нас є деякі ключові з деякого значення, дуже схожий на PHP. Таким чином, ви можете ініціалізувати деякі порожній об'єкт, як ми бачимо тут, тільки з фігурні дужки. Так масиви квадратні дужки. Порожні об'єкти фігурні дужки. Добре відмінність є. І це тільки два різних способи установки властивостей. Так що це свого роду набагато більше таким чином, що схожий на PHP, з нашої асоціативні масиви, з нашими ключовими, і наша цінність, у той час як Це один is-- ви будете побачити це набагато більше, в JavaScript. Це, як правило умовність. І таким же чином, що ми зробили Масив двома точковими довжина, це говорить, "Добре, дай мені це атрибутів цього об'єкта ". Вірно? Так само, як це було, "дайте мені атрибут довжини масиву два, " Це говорить, "Дай мені трохи властивість нашого порожній об'єкт ". Або в даному випадку, ми призначивши її до деякого значення тут. Але ви також можете отримати доступ до нього таким чином. 

А потім ось це просто показані два різних попередження. Так це покаже оповіщення буде точно такий же, це просто два різні способи доступ до елементу, який ми хочемо. Чи має це сенс для всіх? Я відчуваю, як цей Можливо, має сенс, тільки тому, що ми сходить PHP. Але, як ми робимо більше прикладів, це буквально в точності те ж саме. Багато це просто змінити в синтаксисі. 

Отже, приклади. Я люблю прикладів. Так ось деякі CS50 Змінна, є об'єктом, і ми зберігаємо все це Інформація про це. Отже, ми маємо, звичайно, інструктор, TFS, psets, і в записі. Таким чином, ми помітили, це майже всі різних типів. Вірно? Так об'єкти можуть зберігати атрибути різних типів. Ми можемо думати про this-- це дуже схожа на нашу асоціативного масиву в PHP. Так ключ, значення, ключ, значення, ключ, значення, так далі, і так далі. Те, що також цікаво так само, що ми можемо мати масиви в масивах, ми також можемо мати об'єкти в об'єкти або масиви в межах об'єктів. Ви ніколи не дійсно обмежені просто жодного з речей. Ми можемо отримати дуже Inceptionesque, просто продовжуйте спускатися по кролячій норі є. 

Так що, якщо ми помічаємо, ми є курс, який є рядок, інструктор, що це рядок, і масив, INT, і Boolean. Таким чином, всі ці різні речі. 

Гаразд, це так, у нас є ще один. Так що в цьому випадку ми маємо Масив об'єктів. Так що просто як об'єкт може мати масив в ньому. Ми також можемо мати масив об'єктів. Це може бути корисно думаю про подібне до виду про те, як ми повинні були хеш стіл, ми мали масив з усіх цих різних типи структур, які були покажчики на різні вузли та ще багато чого. Але в даному випадку, ми є масив об'єктів. Так що це як масив асоціативних масивів. Отже, ми маємо деякий перший елемент буде бути об'єкт з ім'ям Джеймса і будинок Уинтроп. 

Ви, хлопці, можливо, пам'ятаєте, то дуже схожа на цей з вашого останнього PSET, де, якщо ви витягнув щось з вашої бази даних, сортувати по річ у вашому масиві був всю інформацію про Перший користувач, який зустрівся з ним, і тоді ви мали на якості індексу в тому, що щоб отримати свої акції або їх кеш або ще багато чого. Таким чином, це дуже так само, саме, тільки трохи змінити в синтаксисі, зміна трохи в слова, які ми використовуємо для опису їх. 

Так що, якщо ми хотіли, може хто-небудь сказати мені, що це попередження буде робити тут? Або те, що це трохи код буде зробити для нас? АУДИТОРІЯ: Це дасть вам всі імена. Аллісон Бухгольц-AU: справа, так це те, просто попередити всіх імен тому що вона буде йти через Котедж я, так що було б почати з нуля. Так було б говорити, ОК ми шукаємо в цьому перший об'єкт, який перший слот в масиві. І це говорить: "Дайте мені атрибутів, ім'я цього об'єкта ". Так ми йдемо сюди, ми б сканування, ми знайдемо ім'я, і ми роздрукувати Джеймс, Моллі, і Карл. Є питання досі? JavaScript, на жаль, Ви будете робити багато дивитися на ваших самостійно, з'ясувати, синтаксис, бореться з ним. Але, звичайно, я завжди тут, Прийомні години завжди тут. Я міг би бути по вівторках на цьому тижні. Так що, якщо ви там, ви можете прийти провідати мене на цьому тижні. Це було б здорово. 

Отже, DOM є документ-Object Model. Так що це просто спосіб що нам подобається думати, Про те, як наш HTML і все всередині, вона організована. Це дуже багато те, що ймовірно, прийти на вашому вікторини. Я знаю, що мій рік, це було як от HTML-файл, заповнити DOM для нього. І ви просто заповнити у дрібницях. Вони повинні бути легко точок з надією. Сподіваюся, ви see-- 

АУДИТОРІЯ: [нерозбірливо] 

Аллісон Бухгольц-AU: Так Ви бачите це дерево тут? 

АУДИТОРІЯ: Так. 

Аллісон Бухгольц-AU: Таким чином, вони будуть просити використання заповнити те, що відбувається під тілом. Може бути під тілом, ми маємо деяких діви або у нас є деякі пункти, і ми просимо вас заповнити дерево дуже схоже на це. Таким чином, ми будемо ходити через нього. Так Документ-Object Модель просто спосіб структурувати і думаю, про нашу HTML графічно. А також, коли ми отримуємо в більш JavaScript, це буде так, що ми насправді маніпулювати різними елементи на сторінці. Нам потрібен спосіб, щоб отримати доступ друг речей в нашій HTML, і так що це дає нам дуже бетон стандартний спосіб в різних веб-сторінок, щоб зробити це. 

Так що, якщо ми просто пройти через це тут, звичайно наш документ як весь наш файл. Це, очевидно, має сенс що це найвище, і тоді ми маємо реальну HTML, що відповідає цій мітці тут. Також, якщо ви в абзаці Ваші теги належним чином, то створення цього дерева DOM стає супер просто. Отже, ми маємо деякі голови тут. У нас є тіло, ми бачимо стовбурових офф HTML, який є, чому ми повинні голову і тіло. У голові, у нас є деякі Тег заголовка, тег заголовка кінець, так що ми знаємо, що йде після голови. І в нашій тег заголовка, у нас є Hello, World. ОК? Так ось вся ця ліва рука філія. А потім правої гілки тут, ми бачимо, що у нас є HTML, ОК, ми зробили це головна частина, ми шукаємо тільки на тіло, тому ми маємо деякі області тіла. І в тому, що тільки що у нас є, привіт, світ. ОК? Якби ми мали щось на зразок деякі кронштейн р, а потім привіт, мир, а потім ще Кронштейн р побачення, мир, ми повинні були б два бульбашки сходить тут. Тому що вони обидва під тілом, але вони окремі пункти цієї справи. Існує, безумовно, практика на що в попередніх вікторин, а також великим онлайн на ній. Добре, таким чином, це тільки дозволяє Подивимося, все красиво і маніпулювати речі дуже систематично. ОК? Ми точно знаємо, як пройти через це дерево, так що ми знаємо, що ми хочемо отримати доступ. 

ОК, так що це, чому ми хочемо мати таку модель, так що ми можемо використовувати речі, як це, і ми розуміємо, що вони означають, і вони стандартизовані всіх речей, які ми робимо. Так документі точка назву тільки Назва our-- всі з них досить зрозумілі, Мені подобається думати. Так перші три приклади просто кажу, "Добре, дайте мені Назва цієї веб-сторінці ". Так це дасть вам те, що відповідає назві. 

Документ точка тіло буде дати вам все, що в цих тегів тіла. Таким чином, ви можете керувати цим. І крапка тіло документа точка введіть HTML є дуже класний, і, можливо, не схожий на супер Інтуїтивно зрозумілий, але внутрішня HTML відповідає цьому прямо тут. Так що якщо ви коли-небудь хотіли маніпулювати тексту на сторінці, як правило, ви збираєтеся робити щось з тілом точка внутрішньої HTML. ОК? Так внутрішня HTML, як правило, відносяться до що насправді між цими тегами. ОК? І тоді корисні функції. Так що, якщо ви хочете отримати будь-який з них, будь-який елемент, у нас є деякі Id, клас ім'я, або ім'я тега. Це дуже схоже на речі, які ми зробили з CSS, чи не так? Де у нас є деякі селектори, які відповідають або тега, клас що ми даємо їм, або Id. Це дуже точно так само. Якщо у вас є щось, що має клас собаки, а ви кажете, отримати елементи по імені тега, і ви поклали собаку в there-- або вибачте, Ім'я класу. Ви можете поставити крапку в там. Це буде повернути всі ті, елементи для вас, що цей клас. Таким чином, ви можете керувати тільки тим ,. Таким же чином, може бути, ви просто хочу працювати з деякими заголовок, так деякі заголовок h1, як ми зробили. Ви можете зробити отримати елементи за тегом ім'я, тому що h1 є ім'я тега. І таким же чином, якщо ви хочете отримати деякі унікальні речі, ви можете зробити отримати мітку. Отримати елемент, Id. І вони насправді багато з них. Це тільки, як три дуже багато. Так що, якщо ви йдете в Інтернеті, а Я збираюся заохочувати від вас, і робити деякі дослідження на свій розсуд, Я безумовно рекомендую заглядаючи в усі з них. Вони можуть бути супер корисно, особливо коли Ви хочете, щоб просто якась маніпулювати дуже конкретні речі, не маючи щоб пройти і спробувати щоб розібрати все. 

Отже, остання річ, є JavaScript події. Тому, коли я говорю раніше про перехід на веб-сайті, і коли ви наведіть курсор миші на щось, або ваш наведенні покажчика миші на щось, щось ще відбувається. Це те, що ми хотіли б думати про якість події. Отже, що ми маємо, які можуть бути корисним тут OnClick. Так що мій був на режимі висіння, які, я впевнений, це тільки на режимі висіння. Також тонна з них що ви можете шукати. Там-лайн весь список з різних речей що ви можете слухати. 

Але події JavaScript є в основному тільки у відповідь на речі що ваш користувач робить. Вірно? Так що ваш користувач робить те, що це подія, і JavaScript відповідатиме Однак ви хочете, щоб вона. Він буде реагувати відповідним чином. Так що в цьому випадку ми маємо деякі вікна точка OnLoad. Так що ж це говорить, "чекати поки завантажується вікно років ". ОК? Так, коли всі завантажено, OnLoad, то ви можете виконати цю функцію. Так коли все завантажений, ви збираєтеся мати деяку кнопку пошуку що отримує елемент, Id, і він друкує все, що елемент, як кнопки Пошук. А то у нас цю змінну, ми говоримо: "Добре, OnClick." Тому, коли ми чуємо клацання на кнопку Пошук, виконати цю функцію, яка попередження, ви натиснули на кнопку Пошук. 

Так що ж відбувається is-- це приємно трохи графічне представлення тут. Таким чином, наші завантаженні документа, це наша OnLoad, ми знаходимо Пошук Кнопка, яка полягає в наступному. Ми шукаємо для нашого кнопку пошуку. А потім, коли кнопка пошуку натиснув, воно відповідає прямо тут. OnClick. Тоді ми, нарешті, попередити нашого користувача, що це останній рядок тут. ОК? Таким чином, кожен з цих чотирьох кроків просто відповідає чотирьом коробки там на дні. Чи має це сенс для всіх? 

І тоді єдине, що я буду просто кажучи дуже, дуже коротко, що я заохочувати вас, хлопці, подивіться більше в це JQuery, який знаходиться всього в бібліотеці який побудований на вершині JavaScript. Це супер корисно, тому що з більшістю бібліотек. Є багато функцій. Так що якщо є будь-коли щось, що Ви хочете зробити в JavaScript, Ваш перший інстинкт не повинно бути думати з ", які функції повинні Я код? "Вона повинна бути, "Дозвольте мені бачити когось це вже зробили це для мене ". Тому що в дев'яти випадках з десяти, хтось зробив це вже, і вони, ймовірно, зробили це краще. Люди витрачають багато часу на виконання цих, і JavaScript дуже широко використовується, так що люди постійно намагаючись зробити його кращим. І JQuery має багато функцій що, ймовірно, буде корисним для вас в остаточному проекті, якщо ви робити що-небудь з веб-дизайну. Як я люблю говорити, "робота розумніше, а не більше. " Якщо ви, хлопці, що це буде здорово. Коли ми перебуваємо в Hackathon я не хочу, щоб ви всі акцентував. Я хочу, щоб ви, як, "я отримав це. JQuery отримав мою спину. Мені не потрібно, щоб написати ці функції ". 

Так що просто дві речі пам'ятайте, що я збираюся щоб ви, хлопці, виглядають більш в JQuery на свій розсуд. Все, що я збираюся сказати, це робить деякі досить дивні речі і може зробити ваше життя набагато простіше. Але те, що ви хочете мати це будь-який файл, що ви збираєтеся використовувати його, Ви збираєтеся хочу, щоб ці два рядки. Ви будете хотіти Сценарій JS JQuery точок JS. А насправді ваш джерело буде деякі URL. Якщо ви Google JQuery, Google насправді приймає всі файли для вас. Таким чином, ви безумовно хочете, щоб вхід, який URL замість. Я просто поклав це тут для простоти. Все це означає, де Тут ви знайдете бібліотеку JQuery. Це масивний, так що ви не хочете розмістити його на вашому комп'ютері якщо ви можете уникнути його, тому ми як правило, просто покласти в URL Google про те, що приймає всі ці файли для вас. ОК? Ви Google це, я обіцяю він буде там. 

А потім все JavaScript-файл, який ви використовуючи, так що це просто якась зовнішня JavaScript-файл, який ви використовуєте. Таким же чином, що ми пов'язуємо з нашою допомогою CSS файли, це ж роді. Це тільки посилання на файл де ваш JavaScript є. І в мене є кілька прикладів з простим JavaScript. Таким чином, ми будемо йти через нього. І тоді в індексі JavaScript, який є вашим JavaScript файл тут, це ніби обгортки що у вас є для JQuery. Ти майже 99,9 відсотків часу збирається мати це у вашому index.js файлу. Тому що те, що це говорить у тому, "Нічого не виконувати поки ваш документ не є насправді готовий ", який є саме те, що ви хочете. Тому що, якщо ваш документ не готовий, і JQuery починає робити речі, це просто бардак. Таким чином, ви завжди хочете, щоб цей обгортку. А потім речі, які йдуть туди, я залишимо власної переглядаючи ваші хлопці. 

Отже, є які-небудь питання право Тепер про JavaScript в цілому? Або модель DOM? Якщо ні, у нас є якийсь класний Приклади, які ми можемо пройти, що ви, хлопці, можете допомогти мені код. Але я також буде супер красиво, і якщо ви не хочу, щоб щось сказати Для них це нормально. Я також можу просто дати вам приклади. Але нічого на PowerPoint, перш ніж ми перейдемо? Круто. 

Я відчуваю, що ви, хлопці, повинні енергії. Так що я думаю, що ми збираємося почати з моєї Наприклад партійної першу чергу. У нас є три приклади, у вас є вибір. Отже, ми маємо годинник, куди ми йдемо здійснити фактичний годинник, який років буду оновлювати, як спливає час. У нас є великий функції Twitter. This-- ви знаєте, що, тримайся. Ми збираємося зробити це піти. Bam. ОК. 

У нас є великий функції Twitter тут, that-- Я знаю, правильно? Це буде здорово. Раді вам, хлопці? Ось що відбувається, щоб підрахувати кількість символів, які ви залишили, так що якщо я друкую прямо зараз, Очевидно, він як і раніше говорить 140, але ми знаємо, що це не так. А потім з нашої останньої тут, натисніть тут, щоб святкувати. Що станеться, коли ми натискаємо, фон років збирається міняти кольори. Так що ви, хлопці, є свої варіанти що ви хочете зробити в першу чергу. Я обіцяю, що візьму його дуже легко на вас. Я відчуваю, що все начебто просто дуже низький ключ сьогодні. Так що я буду ходити вам, як ми будемо здійснювати всі ці. Якщо ви хочете, щоб дзвонити в, це здорово, але я відчуваю, що все це трохи втомився. Так що я буду просто ходити вас ці приклади. У нас є те, що ми хотіли б зробити в першу чергу? Хто-небудь? Ні уподобання? ОК. Знаєш що? Ми на стороні. Я відчуваю, що ви, хлопці, потрібно little-- Таким чином, ми зробимо сторону за один перший. ОК. 

Отже, що ми маємо here-- це не повинні бути там. Тепер це добре. ОК. Отже, що ми маємо тут справу тільки простий HTML сторінки що ви, хлопці повинні все бути супер знайомі з ваших останніх двох psets. у нас є тип документа тут. Може все бачать? ОК. Круто. У нас є HTML очевидно. У нас є заголовок, який є пов'язана з таблицею стилів, що тільки що зробив мій шрифт красивий і великий і жирний. Так що не турбуйтеся про це. 

У нас є тіло з Id фон, ОК? Тому що ми збираємося бути зміна фону. Тому, коли ми міняємо фон нашого тіла, ми пам'ятаємо з два тижні тому коли ми маємо справу з веб-сторінок. Так добре, що це. І у нас є деякі Id дорівнює партію. Це ч Ref фунт просто означає, що це буде йти в тій же сторінці. І натисніть тут, щоб святкувати, який є, чому, коли ми натискаємо її, він повинен змінити колір, на щастя. 

А то у нас деякий скрипт тут просто пов'язані з цієї партії точкових JS файл, який порожній, тому що ми ще нічого не зроблено. І це так сумно. Але дуже скоро, вона буде змінюватися кольору, і це буде дивним. 

Так що я просто буду ходити вам, хлопці, з тим, як ми могли б підійти до цього. Так перше, що ми могли б зробити, Якщо ми міняємо фон тіло, перше, що ми могли б зробити, це насправді захопити що тіло, чи не так? Тому ми хочемо, щоб мати суму, наша фон, і, якщо ви помітили, Я просто автоматично просто почати друкувати. Там немає нічого особливого, що ми потрібно зробити для наших файлів JavaScript. Я можу почати оголошенні змінних, і оголосити випадкових функцій. І це набагато більш вільній формі. Це як з C, ми дали вам все Ці жорсткі правила, і ви виросли, так що ми начебто, "йти вперед. Бути вільним. Робіть те, що ви хочете ". І ось що JavaScript є. Отже, ми маємо певний досвід тут. З нашої моделі DOM, ми знаємо, може зробити документ точка отримати елемент, і якщо ми помічаємо тут, наше тіло має свій ідентифікатор. Вірно? Таким чином, ми можемо зробити отримати документ, Id, а от просто. Що наша Id, що ми хочемо тут? АУДИТОРІЯ: Background. Аллісон Бухгольц-AU: Background. Ідеально підходить. І крапку з комою в кінці. Це ще не пішов. Ви як і раніше потрібні ваші коми. ОК. Так от наша перша. І коли ми натискаємо щось, ми хочете щось трапиться, вірно? Таким чином, ми, можливо, захочете деяка змінна що чекає за клік. Те, що ми збираємося зробити, це ми збираємося зробити наше посилання більше схожа на кнопки. Таким чином, ми будемо мати деякий кнопку, дорівнює документ точка отримати елемент, Id. І якщо я говорю про натисніть посилання або натисніть тут, щоб святкувати з'єднання, що може мій Id бути тут? Партія. Правильно. ОК не так уже й погано досі. Всі отримують те, що ми робимо? 

Отже, тепер у нас є Кнопка, і ми хочемо, речі, щоб змінитися, коли ми натискаємо на нього. Так що, якщо ми пам'ятаємо з нашого PowerPoint, дуже проста річ ми можемо зробити це просто кнопка точка OnClick, чи не так? І це буде дорівнювати деякі функції. Це анонімна функція. І це тільки as-- насправді я збирається зробити це трохи більше. 

Так що я тільки що зробив тут я кажу, добре, Коли ми натискаємо нашу кнопку, яка є це посилання, що ми тільки що говорив, ми збираємося виконати Ця анонімна функція. Нам не потрібно будь-яких витрат. Ми не хвилює, що говорить користувач. Якщо натиснути на нього, ми буде робити все, що ми хочемо, що змінити колір фону. ОК? Так ось чому у нас немає ніяких входів, ми просто повинні це анонімну функцію. І тепер ми насправді відбувається записати цю функцію. 

Так що купа способів може генерувати випадковий колір. Так, що я зробив це було генерувати три випадкових чисел і конвертувати їх в RGB трійки. Так що це зайвий раз показує, якийсь класний речі, які, якщо ви, як "О, Мені потрібно створити випадковий число. "Якщо ви в пошуковій системі Google його, це те, що ви знайдете. 

Таким чином, ми маємо три різних речі, Вар, що не знову червоний, зелений. Вірно? Так що ті три речі, які становлять колір. Синій, червоний і зелений. Круто. І що ми можемо зробити, це, що ми знаємо що він повинен бути в межах від 255, і якби ви дивилися на деякі генератор випадкових чисел, ви могли б отримати щось на зразок математики точка випадковим чином, які, якщо ви подивитеся це вгору повертає до деякого числа між нулем і одиницею. ОК? І те, що цифри не наш RGB трійки йти між ними? Нуль і що? Що вони можуть піти до? 255. Так що, якщо математика точка випадковим йде між нулем і одиницею, як ми можемо хочу, щоб перетворити це? АУДИТОРІЯ: Час? Аллісон Бухгольц-AU: Так, саме так. Так що час є 255. 

АУДИТОРІЯ: [нерозбірливо] Це як [нерозбірливо]. Аллісон Бухгольц-AU: Math точка випадковим чином. АУДИТОРІЯ: Круто. Аллісон Бухгольц-AU: Так. JavaScript просто піклується про вас. ОК. Таким чином, ми можемо зробити це для всіх з них. Вірно? Математика точка випадкові моменти часу 255. Розмістіть цей. Круто. Так справа в тому, це може не повертають ціле число. Вірно? Може бути, ми отримаємо деяку кількість між нулем і одиницею, і це призводить до його злегка вимкнений, і наші RGBS не може бути поплавці. Вони повинні бути Інтс. Так що якщо ви пробували це, це, напевно, є дивна поведінка. Було б трохи наляканий. Отже, що ми робимо, ми хочемо, щоб Переконайтеся, що вони округлі, і ви могли б округлити в будь-якому випадку. Я округлив з підлогою. Так що я завжди впевнений, що округлюється в меншу сторону. Але йдуть, як це просто було просто отримати випадкове число, як ви думаєте, ми може поверх цей номер? Це дуже схоже. Будь-яка ідея? Так що, якщо випадкова був просто математика точка випадковим, так що ви думаєте, що ми зробимо пол? Математика точка підлогу. І ви також можете зробити математику точка стелю. Круглий начебто неоднозначно Тому що ви не чи знаєте округляти вгору або округлити. Так, як правило, ми завжди робимо математику точка підлогу, математика точка стелю. Але honestly-- 

АУДИТОРІЯ: Чи підлогу округлити? 

Аллісон Бухгольц-AU: житлова округлює. І це тільки вибір з мого боку. 

Так що тепер у нас є три номери які були випадковим чином, і те, що ми збираємося зробити зараз, це ми просто хочу, щоб змінити фон. ОК? Таким чином, ми вже маємо нашу фон роду зберігається У цьому елементі під назвою фон. Так що ви помітите, якщо Ви грали навколо з цим, ми хочемо, щоб змінити стиль. І це начебто те, що Ви б Google і з'ясувати, подобається, як змінити колір. 

Але спосіб доступу цей колір фон точка стиль точка фон. Так що це висловлювання з урахуванням цей об'єкт, тло, який відноситься до того, що елемент Id там, ми будемо дивитися на стиль в стилі, ми будемо дивитися на задньому плані. ОК? І якщо ви йдете і дивитеся від цього, це може зробити трохи більше сенсу, але це в основному просто кажу, "Дайте мені цю дуже специфічну атрибут що я визначив раніше ". Так що ми міняємо його на це деякі RGB, тому що це має сенс. Ми використовуємо RGB трійок, чи не так? І ми have-- я хочу переконатися, що я отримати потрібну кількість цитат тут. Отже, що ми робимо, ми повинні RGB, і ми збираємося to-- це як об'єднання, яке в червоний колір. А потім ми хочемо трохи кому. А потім ми хочемо плюс зелений, то деякі кома, а деякі синій. 

Таким чином, ці плюси просто значить конкатенацію. Так що це просто створення цього Рядок, відбувається в RGB. ОК? 

АУДИТОРІЯ: [нерозбірливо] плюс те зелений плюс те червоним. 

Аллісон Бухгольц-AU: Так, тому що я зіпсував, що до. Що один нормально. О, тримайся. Ні. Тому що мені потрібна, щоб переконатися, що я отримав всі ці права. Так що я буду пояснювати в ООН Momento. Зелений, синій, досконалим. Тепер я зробив. Я вважаю. 

ОК. Так що ж це, є те, що фон збирається бути встановлений в деякій рядка. Вірно? Що ми маємо тут. Це буде якийсь RGB 255 кома 255 кома нуль, або щось число, яке ви Тобто там. Так що ми тут робимо, у нас є деякі рядки. І те, що ми хочемо зробити, це ми вид динамічного створення що, коли ми насправді запустити цю програму. Так що це деяка рядок. Плюс об'єднує його з значення, яке має червоний, який об'єднує його з кома, яка об'єднує його з тим, що зелений і так далі, і тому подібне. ОК? До кінця, який закриття дужок цього RGB тут. ОК? 

Так що це буде генерувати якусь команду дійсно що RGB з трьох чисел що фон тепер встановлений у положення. ОК? Отже, давайте подивимося, якщо це працює. Я сподіваюся, що він робить, бо якщо він нє, я збираюся бути реальним сумно. О, ні. Добре, тримайся. Безумовно фон точка стиль точка фон. Я безумовно не вистачає то якраз невелика. Чи є у вас, хлопці ненавиджу це? Коли це просто маленькі помилки? Всемогутній фон. RGB. 

АУДИТОРІЯ: [нерозбірливо] Аллісон Бухгольц-AU: Немає Я спробував це перед класом. У мене є все, що я зробив, перш ніж клас у випадку, якщо я був би, "Чекати, що я зробив не так?" Тому що я був би, "Я, ймовірно, споганити в якийсь момент ". Плюс зелений. Все виглядає, як ніби це об'єднуються правильно. ОК. 

АУДИТОРІЯ: [нерозбірливо] 

Аллісон Бухгольц-AU: О, там ви йдете. Ось що мені було потрібно. Подивіться на це. Tiffany, щоб врятувати. Ідеально підходить. ОК. Тепер давайте подивимося, чи працює він. Боже мій. ОК. Утримувати. 

АУДИТОРІЯ: Space після другої плюс. 

Аллісон Бухгольц-AU: Яка? Ой, почекайте, почекайте. Космічна одяг? 

АУДИТОРІЯ: Другий плюс в зелений об'єднання. Аллісон Бухгольц-AU: Ой. АУДИТОРІЯ: Там немає місця після плюсі, так. Аллісон Бухгольц-AU: Ви не потрібно, но-- АУДИТОРІЯ: О, ви не знаєте? Аллісон Бухгольц-AU: Це виглядає красиво. АУДИТОРІЯ: OK. ОК. 

Аллісон Бухгольц AU: Давайте подивимося, якщо це працює. ОК. Очевидно, я з провалом на це демо, який нагадує мені з лекції на два тижні, але я знаю, що це буде працювати. Я знаю, що це буде працювати. Так близько. Якщо я випадково не видалити мій сценарій на цьому. Ні, це партійні точкові JS. ОК триматися. Я збираюся копіювати це, і я теж просто хочу, щоб видалити всі, бо я цей робочий раніше. 

Я обіцяю, що це працює. Якщо ні, то я покажу вам, що Томмі є. І там. 

АУДИТОРІЯ: Ви посилання партію точка CSS, і це партія точкові JS. 

Аллісон Бухгольц-AU: А, ну тут є учасником точкові JS. Добре, що я зробив по-іншому? Добре, ми побачимо, якщо це тепер працює. Bam. Таким чином, я не знаю, що я зробив по-іншому, але це те, що мало статися. Круто. Я натиснув на це, начебто, назавжди. Але ми можемо спробувати і подивитися, що я зробив інакше, що це треба було. Я не знаю, про вас, хлопці, але це виглядає в основному те, що я тільки що написав. Був, імовірно, відсутня крапка з комою десь моя справа. Насправді після цього, я думаю, що я пропав безвісти Крапка з комою тут насправді. Але я не міг бачити, бо це було на екрані. 

Але якщо ми помічаємо, що це дуже багато саме те, що я тільки що написав. Я думаю, що, ймовірно, найважча частина про це просто якась цю річ право тут, розуміння те, що він там робить. Ці види речей, які ви дізнаєтеся дійсно просто погуглити і чесно просто намагаюся. Якщо ви думаєте, є якась атрибутів, там, ймовірно, є. Так спробуйте. Подивіться, що відбувається. Як я вже сказав, є багато експериментування з JavaScript, і PHP, і все, що матеріал, і CSS особливо. Ось тільки правда спосіб зрозуміти це. 

Отже, після цього фіаско з партією точкові JS, у нас є два інших варіанти. У нас є годинник або Twitter. Вони обидва цікаво. Може бути, не так весело, як партії, який мав трохи прохолодної стробирования що в кінці. Як ви, хлопці, є якісь переваги? АУДИТОРІЯ: годинник? Аллісон Бухгольц-AU: годинник? ОК. Круто. 

Отже, ще раз, у нас є порожній файл JavaScript. І, як ми бачимо, тут ми є дуже простий HTML. У нас є таблиця стилів, які просто Формати, що вона повинна виглядати. У нас є DIV з Ідентифікатор годинник, який просто говорить, "це має бути годинник." І у нас є зв'язок в нашому файлі JavaScript що насправді відбувається в генеруємо нашу годинник для нас. Тому що здорово, що, те, що ви можете встановити наявність на автоматичне оновлення Сам. ОК? Таким чином, замість того, щоб чекати Користувач вдарити Оновити на сторінці так що ви можете отримати оновлюються раз, JavaScript можете оновити її, однак вона любить. 

Так що, як з нашим останнім, ми хотіли для доступу до нашого фону, чи не так? Отже, що ви думаєте, може бути Перше, що ми хочемо зробити тут? Якщо ми начебто йдуть Такого роду парадигму тут? Ми, ймовірно, хочете, щоб доступ до нашої годинник, чи не так? Таким чином, у нас є деякі VAR годинники, які equals-- Що ми думаємо, що це збирається бути? Документ точка отримати елемент по-- I також люблю Sublime-- Id і наша Id є годинами. Крапка з комою. Добрався, щоб переконатися, що для отримання Крапка з комою в цей раз, тому що я відчуваю, що була проблема минулого разу. Добре так, як я тільки що говорив з намаганням мати JavaScript оновити себе, там це чудова функція, я знаю, що це дуже знадобилися в минулому році, Я не впевнений, що це дуже зручно, для цього PSET, але це називається заданий інтервал часу. І це насправді дуже здорово, якби ви, хлопці, що-небудь з часом або отримання Оновлена ​​інформація. На сайті по Остаточний Проект, це, ймовірно, Функція, яку ви хочете отримати супер знайомі. Так що встановити інтервал робить те, що ми збираємося дати йому функцію, і як часто він повинен викликати цю функцію. ОК? 

Таким чином, в цьому випадку, ми просто збираємося створити якісь анонімні функції знову, Добре, що збирається отримати наша дата, і наш час, а потім обновити речі і показати його. Таким чином, ми будемо турбуватися про це. Ми будемо, як генерувати години тут. Але те, що нам потрібно, це як часто, щоб оновити його. Таким чином, в цьому випадку, це просто мілісекунди. Таким чином, ми тільки збираємося зробити 100 мілісекунд. Звичайно, абсолютно довільно. Якщо ви хочете, щоб це оновлення набагато повільніше, ви могли б. Ми можемо возитися із заданим інтервалом, наскільки великий наш інтервал після отримання нами роботи години, які, сподіваюся, я буду добратися. Так що це просто кажу: "Добре, виклик Ця функція кожні 100 мілісекунд ". ОК? От і все, що він робить. 

Отже, що ми хочемо, щоб наші функції робимо, ми хочемо мати деяку дату і якийсь час, що ми будемо мати. Так ми можемо почати з нашого Дата дорівнює те, і наш час становить щось що ми ще не знаємо. Або насправді, нам просто потрібно дату, тому що Дата збирається включати в себе все. Знову ж таки, якщо ви просто Google що-небудь про те, що ви хочете робити, якщо ви пишете: "Добре, Я хочу, щоб отримати час за допомогою JavaScript, "це дасть вам цей великий Функція називається дата отримати. Буквально, більшість речей що ви хочете зробити, JavaScript матиме це було зроблено для вас уже. Так що це в буквальному сенсі, як новий отримати дату, яка є creating-- або нова дата, rather-- який генерує якийсь об'єкт, який являє собою дату. 

І те, що ми збираємося зробити тут це is-- Я збираюся написати це, а потім пояснити, що він робить. Так що я буду робити, що я отримую це право. 

Отже, те, що ця функція робить, це ми просто створення HTML, що насправді буде йти в рамках нашої сну ідентифікатор годин. Так що ж це буде робити просто створити певний рядок, ОК? Тобто те буде пересаджують в нашій HTML. В основному те, що він збирається зробити, це всі we--, що я покажу вам, є те, що б ми не говорили HTML є, ми збираємося замінити цей текст тут з тим, що HTML є. Так що це буде дозволяти нам змінити нашу синхросигналу HTML від того, тільки текст цього повинні бути годинник, насправді показує число і речі, які ми дбаємо о, а насправді бути годин. 

Так що ми збираємося зробити, це ми збирається почати виробляти цей HTML. Таким чином, в одній і тій же чином, що ми використовували зробити плюс дорівнює для цілих чисел, тепер ви можете робити, що для струнних, за винятком того, що відбувається в їх конкатенацію. Вірно? Як ми бачили з Партією точок JS, це всього лише об'єднує всі ці речі разом. Таким чином, ви можете об'єднати різні біти HTML з змінних, або біт рядків що ви пишете з самостійно, і це просто дійсно дозволяє динамічно генерувати HTML, який є досить прохолодно. Так що, якщо у вас є щось дуже зручно конкретні, це може дозволити вам зробити це. 

Отже, ми маємо HTML, щоб я збираюся спробуйте і переконайтеся, що я отримую це право. Так що ми збираємося зробити деякі заголовок h1. Так що важливо розуміти тут є те, що це насправді просто HTML. Вірно? Ми пишемо фактична HTML код тут, це не тільки рядок в нормальне так, що ми будемо думати про це. Отже, ми маємо деяку HTML. Це вважається рядок, хоча тут. І ми робимо дату dot-- ми хочете отримати наші годинники. Знову ж таки, якщо ви подивитеся що-небудь про дату, було б сказати, це все атрибути, дата має. А ось те, що ви можете використовувати на ньому. Так що, ймовірно, має щось на зразок отримати годинник, і отримати хвилин, і отримати секунд, і отримати мілісекунд, і хто знає, що ще вони є. Але якщо ви подивитеся на документація, все це буде там. 

Отже, ми маємо отримати годинник, і тоді ми б хотіли щоб об'єднати, що with-- Я буде рухатися в цьому тут. Так що, якщо ми генеруємо зараз, ми насправді генерації час, чи не так? У нас є годинник, а потім те, що між годинами і хвилинами? У вас є крапка з комою, чи не так? Тому ми хочемо, щоб зробити деякі коми тут. А потім ми хочемо отримати наші хвилин, так що таким же чином, що у нас є дата точка отримаєте годинник, як ми можемо отримати наші хвилин? Це буквально дата, точка отримати хвилин, які я ніби як. Це як: "О, як я можу отримати мої хвилин? " Я просто отримати мої хвилин. 

ОК. І тоді у нас є ще двокрапка тут. І потім, якщо ми хочемо отримати наш секунд, як ми могли б отримати наш другий? Дата точка отримати секунд. Я думаю, що це дуже здорово. І, що важливо для усвідомлювати, що ми також потрібно закрити наш HTML тег тут, тому що він як і раніше має бути дійсний HTML, так h1. Круто. 

Таким чином, після того, що ми можемо зробити годинник Точка внутрішня HTML-одно HTML. ОК? Так що пам'ятаєте, як я сказав, внутрішній HTML в основному приймає все, що між два тега, які ми говорили про і вставки або маніпулює все, що там? Так що ж це робить, якщо ми повернемося до наших годинах, є те, що годинник відноситься до Все всередині цієї справ. Це внутрішній HTML- цієї Id тактовою справ. І тому він збирається змінити його HTML, що ми тільки що згенерували, яка, які, як ми сподіваємося, сподіваюся, ми сподіваємося, покаже час прямо зараз. Ми будемо бачити. Звичайно. Так багато технічних питань. Просто-- Еллісон Я від моєї гри Сьогодні хлопці. Добре, що працює. синхросигналу внутрішній HTML. Це було HTML насправді? Крім того, це те, що відбувається. Якщо ви не можете побачити щось, вам просто подивіться на вихідний код. ОК. Ти хочеш знати, прохолодний роботу навколо що ми збираємося зробити прямо тут? 

АУДИТОРІЯ: Ви можете зробити великі літери? Заголовні літери? Тому що у вас отримати годинник, а потім отримати хвилин. 

Аллісон Бухгольц-AU: Це це отримати годин і get-- о. Ви are-- золоту зірку. Це всі випробування, хлопці. Я обіцяю, що це працює перед класом. 

Добре, але щось здорово знати, що ви можете also-- якщо іноді ваші зовнішні файли отримати трохи божевільним, Ви також можете просто покласти їх прямо тут, які, як правило, щоб виправити становище. Крім цього, як дійсно некрасиво. Звичайно відформатувати все. Переконайтеся, що це все досить. ОК. 

Я хотів зробити всі класні демки, і вони просто не виходить. ОК. Сценарій вар годинник. У кожному разі, важливо те, що це спільний шлях що ви відформатувати JavaScript. Як ви можете бачити, це може бути дуже вибагливі, іноді, навіть тоді, коли це було буквально працює у дві секунди тому. Або не два секунду тому але дуже, дуже недавно. 

Таким чином, щоб показати вам, що це має виглядати, і показати вам, що я не божевільний, і що все саме так, те ж саме, це те, що вона має виглядати. Ти просто це зробити верхню частину тут, і якщо ви подивитеся вихідний код сторінки, Якщо ви помітили, він зробив деякі божевільні речі, я спростив. Крім того, кредит Томмі McWilliam, хто насправді допоміг мені створити ці приклади, який є, чому я знаю, що вони працюють. Тому що Томмі майстер JavaScript. Але якщо ми помічаємо, у нас є деякий набір. У нас є функції годинника тут. Це все JavaScript, що ми тільки що написали, або деякі з них. Ми тільки що написав цей один прямо тут. І в нього є додатковий функція, яка просто колодки його поставивши нуль перед буква або перед числом, якщо це тільки один з них. Так що, якщо ви помітили, це досить багато саме те, що ми тільки що написали. У вас є змінна годинник, який має наш елемент, отримати елемент за ідентифікатором, що годинник. У нас є безліч інтервал Функція, це анонімна функція який виконує все це. У нас є деякі, починаючи рядок HTML, що ми динамічно генерують тим, що деякі h1 заголовок, об'єднання з отримати годинник, а також наш товстої кишки, а також отримати хвилини, плюс ще товстої кишки, а також наші секунд, і, нарешті, закінчуючи HTML для цього. А потім ми оновлюємо нашу годинник точка внутрішній HTML для HTML, і ми оновлюємо кожні 100 мілісекунд. ОК? 

Бачите, я обіцяю, що я не є божевільним. Я не знаю. Я не знаю, чому він не любить мене. Я відчуваю, як виглядає те ж саме, але, мабуть, ненавидить мене. 

Отже, давайте подивимося, якщо навколо трьох йде краще. Ми збираємося, щоб бачити. Я не знаю, як це буде йти. Це все, принаймні отримати мінуси, як тільки спільною темою з JavaScript, хоча? Я сподіваюся, що, принаймні корисно, більш ніж показуючи, що це трохи вередливі. Але ваша проблема набір буде дуже весело. Це буде здорово. Це не буде настільки ж втомлює як це, я не думаю. Ви насправді отримати см дійсно класні речі. 

Тому в минулому, але не менше, ми постараємося той Twitter. Я дуже боюся зараз, хлопці. Я не знаю, як це буде йти. Але тільки, щоб дати вам трохи більше смаку, і це насправді маніпулювання рядками і Входи, що ми збираємося робити Тобто, якщо ми помічаємо тут з HTML-- у цього є трохи more-- у нас є деякі текстову область, яка відповідає даній області текст тут. ОК? І це має ідентифікатор тексту. Ми рестайлінг його трохи з деякою ширини і висоти що ми зумовлені, і ми h1, які просто наш заголовок той, який представляє наші залишилось символів. Ми дали йому якесь ідентифікатор Залишилося символів, а то у нас якийсь сценарій тут, що я насправді сподіваючись, що втретє х чарівність тут, хлопці. 

Так що ми хочемо зробити, в тому ж загальному ключі що ми зробили з синхросигналу JS і партійні точка JS, як ми відзначили, що ми почали, фактично захоплення те, що ми дбаємо про, правильно? Таким чином, в цьому випадку, є два речі, які ми піклуємося про, добре? Одна річ, що ми насправді вид дивлячись в і малювання дані з, і одна річ, яка ми насправді змінюється. Так що наш HTML. Якщо це наша веб-сторінка тут, що Дані, які ми дивимося на? Це буде що завгодно Текст в наших коробках, чи не так? Тому, що б я друкую тут. Ось що я хочу знати, чи це те, що я хочу подивитися. І те, що буде зміни на нашій веб-сторінці? Інші персонажі. Таким чином, в одній і тій же дорозі, ми хочемо, щоб почати з ініціалізації змінних що насправді утримати цих елементів. ОК? Так що, якщо у нас є деякі Var це наша текстова область, і у нас є деякі VAR, що залишилося. Вірно? Так вони збираються тримати ці дві речі. Так само роду речі, документ dot-- ОК, я буде переконатися, що це буде працювати в цей раз. Я дуже непохитний. Отже, якщо ми хочемо, щоб наші Текст площа, по в нашому HTML, що наша ідентифікатор? Що наша Id? Це просто буде текст, тому що це створює нашу текстову область, OK, і наша Id текстів, так що як ми можемо захопити, що там. ОК, крапка з комою. Я збираюся бути супер Точна про це, тому що я хочу, щоб це працювало на цей раз. ОК, зробити те ж саме, отримати елемент, Id. Я дійсно цікаво, що має причиною двох інших зіпсувати. Добре, тоді в цьому, що ж ми хочемо отримати доступ? Що наша Id тут? У нас є ще ідентифікатор в наш HTML, що це таке? АУДИТОРІЯ: Залишилось символів. Аллісон Бухгольц-AU: Залишилося символів. 

ОК. Круто. Так що я просто хочу, щоб пишу це дуже швидко. Я просто хочу, щоб написати це в секунду. Так текстова область. Що цікаво, B function-- є безліч функцій, які не тільки Підходить для Вашого миші, але клавіатура. ОК? Таким чином, ви можете сказати, коли будь-який ключ натиснута, ви можете зробити щось на зразок цього. Так той, який ми використовуємо, викликається клавішею вгору, що каже, "якщо ви натиснули будь-яку клавішу на клавіатура, коли користувач підняв їх палець цієї кнопки, і ключ став не натиснута, потім ми збираємося зробити щось ". ОК? Так що це має сенс, чи не так? Тому що кожен символ ми друкуємо, ми збираємося мати, щоб підняти наші пальці про це, тому, коли ключ йде вгору, ми можемо знати, для зменшення інші наші герої. 

Отже, ми маємо деякі на ключ , І таким же чином, ми збираємося сказати, "Добре, коли ми це зробимо, ми збираємося створити деяку функцію, яка збирається взяти е ", в даному випадку, і те, що ми хочемо зробити, це підрахувати кількість залишилися. Отже, давайте просто почати шляхом створення змінної. Отже, ми маємо деяку змінну R, який представлятиме скільки символів ми залишили. ОК? Ми знаємо, що ми починаємо з 140, і якщо ми хочемо знати, скажімо, довжина цього Рядок, був вхід, Чи є у вас, хлопці, є які-небудь ідеї як ми могли б це зробити? Просто базується геть очевидно, речі, як якщо б ми хотіли години, ми використовували отримаєте годинник. Ми знаємо, що наш об'єкт Текст цієї області, але не могли б ви, хлопці, думаю, що може прийти після нього? Будь-які ідеї? 

Так це одне начебто менше інтуїтивно, але це значення довжини точка. Так що просто дати мені деякі значення атрибута, що насправді довжина цього рядка. Так що збирається сказати: "Добре, я шукаю на всій цій рядки в текстовому полі, і я збираюся сказати Ви, як довго це ". Тому що, якщо ми згадаємо, рядки дійсно тільки масиви, так що ми можемо просто взяти довжину них. Отже, ми маємо це. Круто. 

Тоді те, що ми хочемо зробити, це ми ніколи не хочу, щоб дозволити користувачеві для введення більш 140 символів, чи не так? Тому що, якщо ми говоримо так: «ой, ви тільки це багато, залишаючись, " а потім нехай вони роблять що У будь-якому випадку, ми брехали. І це ще один річ, яка JavaScript може бути дуже добре для, є перевірка користувач і переконавшись, що ваш Користувач вписується ні в які правила що ви ввели на них. Так що якщо ви хочете зробити щось, як зробити що хтось ввести їх адресу електронної пошти, або переконавшись, що, коли вони ввести два пароля, вони узгоджені. JavaScript може зробити це. Ви хочете зробити щось подібне, "коли Форма видається, "наприклад або, "Коли кнопку Відправити Форма є натиснув, перевірте всі ці речі ". І ми можемо зробити це JavaScript. Так ось саме те, що ми збираємося зробити тут. 

Так що може бути спосіб перевірити, якщо вони пішли більше 140 символів? Що станеться з наша значення г, якщо вони спробують? Це буде негативним, чи не так? Чи це буде менш або рівним нулю. Таким чином, ми можемо використовувати, якщо це як і все інше. ОК? І у нас є деякі область тексту точку значення, і те, що ми робимо тут це ми просто cutting-- що це таке? Вибачте. Це одне, ми просто хочемо, щоб повернутися помилковим. Я заплутався. Всі виснажені від речей, не працює. Добре, ми просто хочемо, щоб повернутися помилковим, і тоді ми хочу, щоб відобразити інші літери, вірно? Так з годинником, ми зробили щось із внутрішньої HTML, вірно? Де ми встановлюємо його рівним деякі змінної, тому те, що ми могли б тут робити? Що ми змінити внутрішню HTML з? 

АУДИТОРІЯ: Залишилося? 

Аллісон Бухгольц-AU: Ми міняємо залишилося. Гаразд, і що ми хочу, щоб встановити його рівним? Це буде г, тому що це повинні бути інші наші герої. ОК? Так що я дуже нервував, щоб побачити, якщо це тепер працює, але ми будемо бачити. Залиште це. Це дуже швидко. [Нерозбірливо] ОК. Знову ж таки, я просто хочу, щоб показати вам. З якоїсь причини, моє рішення не працює, але те, що я покажу вам, що це is-- о, я повинен був покласти, що в. Добре, ми помітили такий же що тут, отримую текстове поле. 

Крім того, якщо хлопець повідомлення, якщо є або те, що ви хочете зробити, і ви не знаєте, як це зробити це, просто натисніть кнопку Перегляд сторінці Джерело і вони збираються розповісти вам. Іноді це буде зашифрований. Для вашого PSET, ми зашифрувати все, так це просто виглядає як маячня. Але якщо коли-небудь дійсно класний сайт, що ви хочете, якщо ви просто натисніть кнопку Перегляд сторінці Джерело це збираюся розповісти вам, як це зробити. Отже, ще раз, працювати розумніше, а не більше. І, як ви бачите тут, все ці речі однакові. цей тут просто приймає деякі подстроку що я забув, що це робить. Але, очевидно, займе деякий подстроку від вартості від нуля до десяти, і повертає помилкове, що слід припинити Користувач з введенням більше, а потім, очевидно, оновлює Внутрішня HTML там. 

Круто. Настільки великі Візьміть Висновки з сьогоднішнього дня, Експеримент, подивіться на вихідний код тому що це допоможе вам багато, і все, іноді JavaScript може бути важко працювати, і не завжди працюють так, як ви очікуєте, що, але просто намагатися бо я обіцяю, що це буде. Я обіцяю, всі ці приклади працювали перед класом. Я не розумію, що сталося. Я буквально все ж. 

Ще одна річ, що я просто хочу, щоб показати вам, хлопці, які можуть бути супер корисно в in--, що працює раніше? Ми отримали партію до роботи, чи не так? Я так думаю. Так. Ми зробили. Високий. Отже, одна річ, яка ви, хлопці, повинні знати, є лог консолі, що я говорив. Так втішити точка журнал Hello. Так що це свого роду JavaScript еквівалент Printf. Так що якщо ви коли-небудь хотіли перевірити свої змінні або подивитися, що там відбувається, що Ви можете зробити це, якщо ми перевіряємо елемент, це те, що ви хочете піти щоб і ви йдете, щоб втішити, Ви побачите, що він надрукований привіт. 

Таким чином, ми могли б його друкувати все, що ми хотіли. Якщо ми хотіли, щоб надрукувати фон точка стиль точка фон, ми повинні бути в змозі бачити RGB втричі йде вгору. Чи ні. Я забув, як саме ви друкувати змінну подібне, але ви повинні бути в змозі роздрукувати щось на зразок цього. Це буде дуже корисно для PSET коли Ви намагаєтеся маніпулювати координати або ще багато чого. Таким чином, вони також змінити цю частину в класі. Це відрізняється від минулих років, так просто приємно ваших ТФ, або ТФ в робочий час, а, тому, що ми вид навчання разом з вами, хлопці. Але лог консолі було супер, супер корисно для JavaScript у минулому році. Так люблю його. Дізнайтеся, як використовувати його. Це простіше у використанні, ніж GDB, так що повинно бути не менше плюс точкою. Але спасибі, хлопці приносять із собою. Мені шкода, що мій приклади з деяких причин просто не хочу, щоб співпрацювати зі мною, але я сподіваюся, що вона допомогла отримати вид ви трохи більше в зоні JavaScript. І пошліть мені всі ваші запитання на наступному тижні, так що я можу бути супер ремонт, і я принесу цукерки і навіть додатковий цукерки, бо це було смішно. Але ви, хлопці, здорово, і мають дивовижний тиждень.