ТОМАС Реймерс: Привіт, всім. Мене звуть Томас Реймерс. 

Майк Ріццо: І я Майк Ріццо. 

ТОМАС Реймерс: Ми два з CS50s ТЗ. І сьогодні ми ведемо семінар з JavaScript і CSS для веб-додатків. Якщо ви хочете слідувати, посилання прямо там. І ви хочете, щоб покласти його на комп'ютері стисло? 

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

Майк Ріццо: Добре. Отже, почнемо. 

ТОМАС Реймерс: Отже, ви хочете, щоб почати? ОК. 

Майк Ріццо: Так. Таким чином, ми спочатку хотіли почати з широким Огляд про Інтернет і Типи файлів при проектуванні веб-сайтів. У той час як ця презентація ми хочемо потрапити в в JavaScript багато багато надалі, ми хотіли почати з просто, вид, як з висоти пташиного польоту чого сайт і як думати про проектування Веб-сайт для початку. 

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

ТОМАС Реймерс: Так що просто резюмувати, що відбувається, коли ви набираєте у вашому URL до ваш веб-браузер, що URL отримує подивився в комп'ютер. І ваш комп'ютер, підключених до іншого комп'ютера, в якому знаходиться цей сайт. Отже, коли ви йдете на google.com, ви підключений до одного з компанії Google комп'ютери, має файли для google.com. 

Потім він просить конкретного файлу. Так що, якщо ви йдете в - Я не знаю, - example.com / index.html або / test.html, Ви збираєтеся попросити що конкретний файл. І сервер веб збирається щоб повернути його до вас. 

Потім, коли ви йдете через цей файл - як тільки ви комп'ютер отримує, що файл - це збирається почати створити веб-сторінку. Так що тепер у нього є HTML файл, який ніби як Структура веб-сторінки. HTML файл також може посилатися на CSS-файли, які визначають стиль веб-сторінки. 

Файли JavaScript, який визначає взаємодія з веб-сторінки. Файли зображень, які є всього зображення. І, можливо, посилаються на інші файли HTML, які то ви можете відвідати. 

Майк Ріццо: ОК, відмінно. Так ви, хлопці, все, мабуть, копітко налаштувати локальний хост на вашій віртуальній машині. І це просто, вид, є місцевим домену, що ваш комп'ютер приймає тільки для вас на свій страх і IP-адреси. 

Таким чином, всередині це, то ви можете додати до нього свої власні веб-сторінки. Я маю на увазі, в CS50 фінансів, ви повинні мати додані деякі HTML сторінки, які, роду, загорнутий в обгортку PHP. Але в кінцевому рахунку, на які сторінки вашого PHP були виведення було HTML. 

Але згадуючи самого початку з PSET, ми мали встановити дозволів за все, вірно? Так що це просто в основному дає нам знати, хто може читати, писати, і, можливо, виконати кожен з файлів. Так що ми збираємося зробити швидкий - HM? 

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

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

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

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

Тому, коли ми думаємо про файлах наприклад, коли нам потрібно, щоб прочитати HTML файл, який повинен бути світ читається, чи не так? Імовірно, також власник хоче , Щоб мати можливість редагувати файл. Таким чином, власник потребуватиме читати і писати дозволу. Вони дійсно не потрібно виконувати. 

Група, ми збираємося лікувати само, як і в світі на даний момент. Тому вони потребують дозволу на читання. Але вони не повинні писати або права на виконання. І тепер, якщо ми згадаємо колишній PSETs, що ми розуміємо, це такого роду виглядають як двійковий, чи не так? 1 означає так. 0 для немає. І ми дійсно можемо перевести це в двійкову. 

Так 110 в двійковому буде 6. 100 буде 4. Те ж саме з світом. Таким чином, число ви отримали б для Дозволи для цього буде 644. 

Майк Ріццо: І якщо ви згадаєте коли ви права зміненими щось, я вважаю, вони дали в задачі встановити приклад того, де ви могли б зробити щось на зразок CHMOD 644 а потім ім'я файлу. 644, то, тепер ви можете бачити безпосередньо де, що виходить від. Так, ми сподіваємося, що робить, що трохи більш ясним. 

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

ТОМАС Реймерс: А потім ми повинні швидко Список загальних дозволів. Так каталоги, ви хочете насправді CHMOD 711. Швидкий сторону - для каталогу, щоб мати виконуваний дозвіл означає бути в змозі , Щоб відкрити каталог. Зображення, CSS, JavaScript, HTML потреби 644, тому що, в принципі, світ потреби дозволу на читання. 

І PHP, які ви, хлопці, бачили хоча ми не будемо говорити про це строго, як правило, права зміненими з дозвіл 600, тому що це бігти з дозволів власника. Принаймні, на приладі. 

Майк Ріццо: Так що якщо ви не спеціально вказати, який тип файлу ви хочете справді установка до цієї презентації - у нас була проблема з цим, тому що все, що не було права зміненими правильно - Ви збираєтеся отримати, начебто, А заборонено помилка, що сайт насправді не має дозволу для доступу до будь-який файл Ви хочете, щоб доступ. І, звичайно, що може бути виправлено - як і в задачі набір - шляхом зміни дозволів відповідним чином. 

ТОМАС Реймерс: І останнє коментар для швидко місцевого розвитку - ми підняв це, але ми просто хотіли щоб привести його знову - якщо ви попросите сервері - так локальний хост, наприклад, ком або що завгодно. - і ви не вказаний конкретний файл, файл, який ваш комп'ютер буде попросити називається index.html. Або, якщо це не існує, index.php. 

Круто. Так що це просто повторення всього, сподіваюсь, що ми розглянули в розділ, і лекція, і до цих пір в CS50. І тепер ми збираємося почати говорити про спеціально бібліотеки. JavaScript і CSS бібліотеки для веб-додатків. 

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

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

Таким чином, вони заздалегідь визначити купу класів або попередньо визначити купу функцій для Випадок в JavaScript, які ви можете зателефонувати пізніше. І тоді ви можете, свого роду, отримати доступ до цього коду, що не необхідності що-небудь робити. Приклад бібліотеки був CS50.H. Це була бібліотека ми дали вам назад на тиждень один, що дозволило вам зробити такі речі, як то GetInt і GetString без необхідності писати будь-який код самостійно. 

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

Тому у нас є рівних типу сценарію JavaScript джерелом одно Javascript.js. І якщо ви думаєте на ваш CS50 Проблема фінансів встановити, якщо ви дивилися в header.php в папці шаблонів, Ви б бачили, деякі з них включені. Так що це перший - сценарії - є в тому числі бібліотеки JavaScript. У тому числі бібліотеку CSS є трохи відрізняється. 

Тут замість сценарію TAG вам потрібно тег посилання. А потім, тип тексту CSS трохи відрізняється. Ви не завжди повинні включати в себе отн стилів. Але я думаю, що це, взагалі кажучи, хороша практика. 

І, нарешті, HREF, який ви напевно, бачили в ваших ATAGs для зв'язку в різних ланках все визначає ланка, де знайти це. Наприклад, якщо ми хотіли, щоб зв'язати відрізняється бібліотека - давайте просто скажемо, - що жив у styles.css. І ми хотіли, щоб зв'язати, що в цей відбувся в Інтернеті, ми б скопіювати це. А потім вставте його в те, що ми маємо право тут замість цього. 

ТОМАС Реймерс: Добре, ми сподіваємося, ви хлопці вже знайомі з тим, як зв'язати CSS. Ви повинні були зробити це на ваш останній коричневий комплект. JavaScript, деякі з вас, можливо, є досвід роботи з. Деякі з вас не може. 

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

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

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

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

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

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

Це називається браузеру браузера сумісність. І все частіше це стає все більш і більше проблеми, тим більше, -Браузери все більше і більше свободи на виконання того, як вони хочуть. Таким чином, щоб подолати це, там насправді чудова бібліотека називається Normalize.CSS. 

ТОМАС Реймерс: Ми включили посилання. У цей момент, це корисно, якщо у вас є свій ноутбук в там дивлячись на сайті. І ми даємо вам це право зараз просто тому, що остаточний CS50 Проект насправді відбувається, щоб прошу вас її реалізації аналогічно і через браузери. 

Так тільки, щоб тримати в задній частині вашого голова, це прекрасна бібліотека тому що це буде, свого роду, стандартизувати речі. У Firefox, щось може показати як один піксель зліва. А потім Chrome може вирішити, що насправді що ви мали на увазі був 10 пікселів вліво. І ви хочете, щоб стандартизувати цей. Нормалізація буде насправді зробити дійсно хороший Робота переконавшись, що ваш сайт виглядає так само, у всіх браузерах. 

Майк Ріццо: Так що, якщо ми хотіли просто натисніть на посилання дійсно швидко і шоу Ви, як це виглядає, вам можете завантажити його за допомогою гігант кнопку Завантажити. Або я закликаю вас, щоб дізнатися більше про це натиснувши на це посилання в нижній правий кут. 

ТОМАС Реймерс: І якщо ви насправді натисніть Read More тут же - клацніть джерело на GitHub - ви дійсно будете бачити з відкритим вихідним кодом Ліцензії на LICENSE.md прямо там. І ви побачите, ось дуже популярні ліцензії MIT. Знову ж, якщо ви читаєте по тексту, Ви зможете знайти його на сайті ми звертатися до і вміти зрозуміти його без того, щоб читати через юридичної термінології. 

Майк Ріццо: ОК, відмінно. Так от Нормалізувати. Ми хотіли дати вам що дуже швидко. О, у вас є питання? 

АУДИТОРІЯ: Отже, коли ви завантажуєте його, ви просто дотримуйтесь цей код, що вони мають під кнопкою Download? 

ТОМАС Реймерс: Так, так при завантаженні - 

Майк Ріццо: О, це великий момент. Так що питання в тому, як зробити ми насправді її скачати? Так що, якщо ми натисніть на посилання, ми бачимо, що це насправді спливає на вихідний код. Таким чином, щоб зробити це, то, що ми могли б зробити, це просто натисніть кнопку Зберегти як. Зберегти як і, що слід виховувати файл. І тоді ми зможемо вибрати, щоб зберегти це як normalize.CSS. І тоді вам доведеться зв'язати його в - 

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

Ви не повинні нічого робити дивні. Це нормалізує без тебе робити що-небудь далі. Так, ви повинні включити його. Google Chrome не відповідає. 

Просто швидко в сторону - Я помітив, ми стрибнули в це. Решта цієї презентації буде короткий огляд. Огляд бібліотек. 

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

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

Майк Ріццо: Круто. Гаразд, тепер давайте поговоримо про шрифту Високий. 

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

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

Так от ви бачите у нас є такі речі, як Зірочка, бари, блискавка, календар, помилка, книга і так далі. Це може бути дуже корисно. Те, як ви включити це ви включаєте буквально файл CSS. І після того як ви включили файл CSS, то, що ви можете зробити, це створити тег називається I. Він satands для значок з класом Англії стоячи шрифту Високий. І потім, все, що вам більше підійде клас. 

Так що, якщо я хотів ікону цьому плюс квадрат прямо тут, я дав би це клас Англії. А потім FA дефіс плюс дефіс квадрат. 

Майк Ріццо: Круто, ОК. 

ТОМАС Реймерс: І потім, в останній CSS Бібліотека ми хочемо, щоб пройти через ми намагаючись зберегти його мінімальна на CSS бібліотеки, тому що ми розуміємо, Назва цієї презентації є JavaScript бібліотеки. Але ми думали, що ми можемо, а познайомити вас з іншими бібліотеками в той час як ми говорили про бібліотеки. 

Це Google Веб шрифти. І те, що Google Веб Шрифти дозволяє вам зробити, це додати шрифти на ваш сайт, який є дійсно простий спосіб зробити це досить і відрізнити свій набір від всіх інших, якщо у нього є красивий шрифт або якщо у нього є хороший Колекція шрифтів. Google Web Fonts хороший на відміну від інших бібліотеки в тому сенсі, що це дійсно керується установки. 

Так що якщо ви, перейдіть за посиланням, це google.com / шрифти, я вважаю. Якщо ви будете слідувати, що, вас можете вибрати свій шрифт. Ви можете вибрати зліва від товщина, нахил, і так далі. А потім, як тільки ви вибрали один, ви можете натиснути швидкий використання. Прямо там. Права нижня частина коробки. 

А потім, перейдіть вниз. Насамперед, вони дають вам CSS, що вам потрібно насправді посилаються на нього. Це прямо там. Ви можете просто скопіювати і вставити, що дюйма І хороша річ про це один є Ви насправді не потрібно навіть скачати файл. 

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

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

ТОМАС Реймерс: Круто. І як тільки ви включаєте це, то в включити його в свій CSS, це дає вам фактична лінія. Таким чином, ви встановите сімейство шрифтів нерухомість збігається з ім'ям вашого шрифту. 

Майк Ріццо: ОК. Таким чином, ми тільки що закінчили з CSS. І деякі з вас можуть подумати: ну, у нас було небагато CSS на CS50 фінансів. Але бібліотека CSS був завантажувальний. Ми фактично включають початкового завантаження трохи пізніше під JavaScript, тому що з бібліотека початкового завантаження CSS також поставляється з великою кількістю JavaScript цієї Початкового завантаження або Twitter - хто зробив Bootstrap - використовує для управління всіма їх CSS. 

ТОМАС Реймерс: Хто-небудь є будь-яка питання досі про CSS в цілому? Ми добре? Приголомшливо. 

Майк Ріццо: Приголомшливо. 

ТОМАС Реймерс: Так при переміщенні на JavaScript. 

Майк Ріццо: Таким чином, ми хотіли поговорити про JQuery з самого початку. Хто-небудь чув про JQuery до або використовував його? Так, пару? Так що якщо ви просто працювати з рідними JavaScript, ви опинитеся набравши багато довгих селекторів чимало. Так що JQuery робить це забезпечує хороший оболонка для JavaScript мова, яка дозволяє легко вибрати і маніпулювати різними елементами в об'єктній моделі документа веб-сторінки або DOM, який я думаю, ви, хлопці, чули про в лекції в цій точці. 

ТОМАС Реймерс: Якщо ви ще не чули про це або якщо ви ще не дивилися лекція проте, об'єктної моделі документа є в основному, як представлені речі. Так HTML начебто виглядає як дерево, коли ви насправді зробити це. У вас є HTML елемент на вершині. У вас є голова і тіло. 

А потім, в тому, що ви є все інше. Ось називають DOM - Об'єктної моделі документа. Так модель, яка представляє об'єкти в документ являє собою простий спосіб думати про це. І один з Саме чудове в JQuery це дійсно робить обході що і маніпуляції елементи всередині що неймовірно просто. 

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

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

Так що якщо вам потрібно вибрати елемент, Internet Explorer може сказати, що ви повинен робити цей шлях. Firefox може сказати правильне шлях таким чином. JQuery не дбає. Коли ви говорите JQuery, щоб вибрати елемент буде з'ясувати, як це повинен робити це в браузері користувач в даний момент, а потім зробити це таким чином. 

Майк Ріццо: Так що давайте не будемо говорити про використання JQuery небагато. Так само, як PHP, JQuery має конкретний любов до знака долара. Таким чином, ви побачите, що будь JQuery - ну, не все. Іноді можна замінити долар підписати зі словом JQuery. Але в цілому, тільки тому, що коротше, коли ви бачите JQuery бути використовується це буде зі знаком долара. 

Так от, ми просто показуючи початок Селектор для елемента в DOM. Тут, у нас є знак долара з подальшим відкритими дужках, а потім котирування. І протягом лапок йдуть наші селектори для різних елементів. Так само, як в CSS, у чому ми потребували селектори вміти укладати різні елементи на сторінці. Ці різні селектори перевести точно в JQuery і JavaScript, по більшій частині. 

Так от у нас є точка Foo. Так що якщо ви пам'ятаєте з лекції, точка просто означає клас. Таким чином, ми вибравши елемент з класу Foo. Так що якщо я йду вперед і відкрити наш Консоль JavaScript тут дуже швидко просто продемонструвати це, якщо я просто наберіть знак долара, ми бачимо, що це якась Функція, яка йде вгору. І це просто визначається JQuery. 

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

Так у той час як, GDB може бути як, ти впевнені, що хочете запустити наступний крок? Консоль це в реалі. Так як веб-сторінка є надання і робити все, що він робить, Рада також працює разом з нею. І ви можете помістити приписати код в що консоль, яка буде бути запущена на сторінці. 

Майк Ріццо: Так, щоб увійти в консоль, Думаю, я повинен коротко кажучи вже про те, щоб зробити це. В останні проблеми, які ви можете мати б Хрому елемент огляньте функції або подання джерела сторінка - і ті, доступні тільки по праву натиснувши на сторінці або конкретного елемент і робити або перевірити елемент або подання джерела сторінки. Ми також можемо отримати доступ до JavaScript Консоль безпосередньо виборі огляньте елемент. Тоді ви просто натисніть консоль в правій стороні. 

Крім того, можна також пройшли у верхньому правому куті, який відрізали на цьому екрані, де вона має три горизонтальні смуги. І ви спускаєтеся до інструментів і Потім JavaScript консоль тут, де можна побачити - принаймні, на Windows - ярлик управління перемиканням J. Отже якби ми хотіли, щоб вибрати елемент в межах цій сторінці, точно так само як я показав перш, ми робимо знак долара відкриті дужок а потім цитує. 

Цікава річ, взагалі, одинарні лапки і подвійні лапки змінний. Так багато людей просто використовувати один котирування, тому що вони швидше набирати ніж подвійні лапки, тому що ви не треба утримувати клавішу Shift. Так що я просто зробити це прямо зараз. 

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

ТОМАС Реймерс: Так що просто дивитися на це більш докладно, це нічим не відрізняється ніж викликів функцій, які ми зробили в C. Ім'я функції тут є трохи дивно. Це знак долара. Це просто ім'я функції. Там немає нічого особливого в цьому немає. 

У нас є відкриті дужки. Тоді, у нас є один аргумент, який в цьому випадку виявляється, рядок, який є селектором для нього. І потім, у нас є наш закрита дужка. Ось і все. 

Це не так сильно відрізняються. Хоча, це дійсно виглядає дуже дивно. І це може бути, свого роду, каменем вказати для багатьох людей. 

Майк Ріццо: Отже, подібним чином, якщо б ми хотіли , Щоб вибрати елемент, який має ідентифікатор, тепер ми хочемо, щоб вибрати по ID замість класу. Було б щось подібне, де ми просто зробити різкий знак для ID. Таким чином, ми вибору тут все елементи, які мають ID бар. 

ТОМАС Реймерс: І це поширюється. Це CSS поширюється. Так само, як в CSS, ви можете вибрати все Посилання, які мають клас Foo. Ось, це те ж саме. 

Ви могли б зробити a.foo, який обиратиме всі посилання з класом харчової. Ви могли б зробити різкий бар, який буде виберіть посилання з ідентифікатором бар і т. далі, і так далі. Будь селектор CSS є допустимим Селектор JQuery. 

Майк Ріццо: Так. Отже, тепер давайте перейдемо до трохи маніпуляції, що ми можемо зробити з наша JQuery. Так JQuery має певний тип позначень, де ми просто використовувати точка в кінці. І ви можете думати про це, як і в С, як ми були різні структур. І йти в тих структур, ви б використовувати точку, щоб потрапити в них. 

Це, свого роду, щось подібне. Тільки тепер у нас є функції в цьому селектор, який ми можемо назвати на ньому. Так от, найперший приклад Ви можете бачити це селектор CSS. А в принципі, що це робить це відноситься перший елемент CSS на це річ, яку ви обрали - це елемент, який ви обрали - із значенням цього. 

ТОМАС Реймерс: Так просто переклад що було б, якщо JQuery, в основному, просто взяв Foo. І тоді в CSS сказав, Колір червоний і близько. Це та ж ідея. Що це робиться в її виборі всі елементи Foo. А потім він застосовується. Начебто, колір власності дорівнює червоний. 

Майк Ріццо: Аналогічно можна також змінити фактичний зміст, що є показуючи на HTML сторінки, які дійсно здорово, тому що це означає, що ваш Тепер веб-сторінки можуть бути повністю динамічний і не повинні бути статичними Вам роздрукувати за допомогою PHP на самому початку сторінка завантажується. Так от, якщо б ми хотіли змінити Фактичний HTML сторінки, ми б зараз викликати функцію HTML, який потім просто вставки, що ми вказати в що елемент, який ми обрали. Так от ми вибравши елемент з клас Foo, а потім кажуть, що це HTML це тепер привіт світ. 

ТОМАС Реймерс: І коли ви думаєте про якими корисні додатки це, це CSS один, перше, що Ви можете почати думати про те, з точки зору навіть випадають меню. Ви можете почати робити речі, як, коли користувач наводить курсор на верхній частині з випадаючого, ви хочете зробити нижня частина видна. Чи не так? 

Таким чином, в CSS, у нас є властивості зробити щось видиме. Такі речі, як дисплей товстої кишки ні зробить його невидимим. Показати блок буде зробити його видимим. Або навіть якщо ви хочете піти простішим, вам є такі речі, як видимості рівних видно, і видимість становить прихована. 

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

АУДИТОРІЯ: Таким чином, ви б вмонтувати це в HTML код в ніби як [Нерозбірливості]? 

Майк Ріццо: Вірно. Так, ми повернемося до цього в небагато. Так, це схоже трохи, щоб PHP. Не зовсім схожі. 

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

ТОМАС Реймерс: Так один спосіб думати про це якщо я комп'ютер і Майк, начебто, сервер. Що трапиться, я збираюся запитайте Майка, агов, я можу мати копію ця веб-сторінка? І він дасть мені копію. 

Ні, це не оригінал річ. Це просто копія. І то це було б як, про, є JavaScript тут. Очевидно, що я повинен змінити сторінки, щоб бути, як це. І я редагування вашу копію. 

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

Майк Ріццо: Так дійсно класна річ що ви можете зробити з JQuery є насправді додати різні типи анімацій на свою сторінку. Я не знаю, якщо ви ще не бачили, де Ви намагаєтеся заливки форму Інтернеті, і ви не заповните Правильно речі. Так мало, що ковзає вниз у верхній і каже, що ви ще не зробили це правильно. Будь ласка, спробуйте ще раз. І потім, це може навіть просто ковзати вгору. 

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

ТОМАС Реймерс: Інший популярний ковзатиме вниз, що зробить щось з'явитися, зсунувши її вниз. Таким чином, у разі меню, що випадає, знову, коли ми дізналися, як виявити коли це було завис над, ви могли б просто сказати цьому дно частина скотитися зараз. А потім, здавалося б, зсунувши вниз. 

Майк Ріццо: І потім, якщо ви просто повинні деякий тип анімації на увазі, що JQuery не обов'язково забезпечує. Наприклад, припустимо, що JQuery дійсно забезпечує вас з гіркою вниз і слайд вгору. Ну, скажімо, ви хотіли, щоб ковзати щось на лівому фланзі або в від право ніби як CS50 головна сторінка робить щоразу, коли ви йдете на нову панель. Потім ви повинні, ймовірно, доведеться реалізувати його самостійно, використовуючи анімувати функцію в JQuery. 

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

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

І я закликаю вас - щоразу, коли ви приходите через те, що ви робили не знають або просто хочете дізнатися більше про Зокрема метод, який можна назвати на щось - Просто Google це. JQuery є надзвичайно добре документовані. І часто є багато приклади, які вони надають для вас. Якщо ми перейдіть вниз - шлях вниз - що ми можемо використовувати, а також. 

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

Як правило, сторінка проекту в разі з [нерозбірливо], він сказав вам в імена класів. У разі JavaScript, це дає Ви назву функцій. До речі, якщо ми прокрутки вгору до вершини, швидкий цікаво відзначити на функцій всякий раз, коли ви бачите функцію реалізований як це з важко дужки в середині, це означає, що це властивість є необов'язковим. Просто голови. Я бачив багато питань про це. 

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

Майк Ріццо: Таким чином, ми дізналися, як змінити різні CSS на сторінці, оживити його, і зняти додати HTML. Але один з дійсно самий потужний речі про JavaScript і особливо JQuery - що це дозволяє зробити, це відповісти на різні елементи, які відбуваються. Наприклад, тут ми маємо обробник події. І це просто означає, всякий раз, коли це Подія відбувається, ми з нею в певним чином. 

Так от, загальний подія JQuery обробник є точка на. А потім, перше, що ви надали це те, що подія це має слухати для. Так от, це клацання, що ми чекаємо. 

ТОМАС Реймерс: З іншого боку, у вас є при наведенні, який є дуже популярним. Отже, повернемося до моєї випадає ідеї меню. Ви повинні були б верхню один на наведенні курсору миші. І тоді ви могли б змінити цю ситуацію. 

Майк Ріццо: Вірно. А потім, коли це станеться, це просто виконує цю функцію, що ми даємо йому як аргумент, і що він попереджає привіт або привіт. 

ТОМАС Реймерс: Так у випадку JavaScript, це місце, де ми повинні видалити себе від С. Ми можемо насправді прийняти функції як аргументи. І є багато дійсно складні способи зробити це. Ми збираємося сприяти в одну сторону, що ви можете визначити функціонувати прямо там. 

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

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

Майк Ріццо: Чи є питання з цього приводу? Це може бути трохи заплутаним, в перший раз ви його бачите. 

ТОМАС Реймерс: Ви насправді хочете відкрити файл і показати їм деякі JQuery прямо зараз? 

Майк Ріццо: Так, давайте зробимо це. ОК. 

ТОМАС Реймерс: Так що тепер ми в приладі. І те, що ми зробили, ми прийняли свобода створення як в index.html файл, який відображає посилання на файл JavaScript. І чи можемо ми відкрити - да. Ну, це робить дві речі. 

Перший це посилання на файл JavaScript. І ми побачимо, що тут. Ми бачимо, що в голові HTML документ, зокрема. Таким чином, ви побачите, що там ми, в основному, кажуть SRC, яка виступає за джерелом. І це URL. 

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

Так ми говоримо, слухати, ми про включати сценарій. І тип цього сценарію є JavaScript, який є одним з видів тексту. Дуже просто. 

Майк Ріццо: Так що це, свого роду, потрапляє в ваше запитання про те, як ми включаємо JavaScript в наших файлах, тому що, коли ми що PHP, ми зробити щось на зразок цього. І потім, є свої PHP функції - скажімо запаси робити щось з цим - йде туди. Тим не менше, тепер у нас є теги сценарію що ми даємо його, що насправді частиною самого HTML, тому що це не прикидається бути HTML файл подобається знаходиться в PHP тому що якщо ви насправді йти в і подивитися на вихідний код сторінки, ви побачите ці теги сценарію там з JavaScript, пов'язаний з їм у цьому. 

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

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

ТОМАС Реймерс: Так що, якщо ми повернемося до того, що подати зокрема - HTML, Файл - Що ви збираєтеся щоб побачити це у нас є - пам'ятати, що це буде завантажений, роду, в хронологічному порядку. Тому у нас є перший керівник. він завантажує ці два файли. Тоді ми йдемо до тіла. І ми бачимо, привіт світ. Так ми надаємо привіт світ. 

І те останнє, що у нас є буде у нас є тег сценарію. Так він працює тег сценарію, тому що це не кажу це, щоб чекати. І це саме основне спосіб запустити JavaScript. 

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

Так в той час, що код втік, ми вибрали - повернутися - тіло тега. Тег тіло ще не існує, тому що JavaScript є відповідно до HTML. Таким чином, браузер, як виберіть тіла. Там немає такого поняття, ще. Таким чином, ми можемо ігнорувати це. І ми продовжуємо. 

А потім ми визначаємо тіло тега. Але це ніколи не оновлюється. Тому, коли ви реалізуєте сценарій теги, переконайтеся, що ви помістіть після тега тіла. Наступний слайд. 

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

Так що давайте робити щось до тіла знову. І скажемо, ми робимо це на - натисніть. Ми додамо функцію. 

Зміна Давайте: Tomas Реймерс його колір на червоний знову. Чому ні? 

Майк Ріццо: Так, давайте зміни його «колір на червоний знову. Добре. Так що давайте перезавантажте сторінку. ОК, ми бачимо - як і очікувалося, він не почервоніє ще. Але тоді ми можемо йти вперед і клацніть по ньому. 

ТОМАС Реймерс: І це стає червоним. 

Майк Ріццо: І це робить червоніють, як очікувалося. 

ТОМАС Реймерс: І ми бачимо, як ми можемо почати будувати дуже основним взаємодія. Інші речі, які ми могли б хотіти зробити, це, якщо ми не хочемо, щоб зробити тіло Колір червоний, давайте зробимо HTML фон червоний колір. Саме так це те ж саме CSS. 

І коли ми змінити його, ми можемо побачити це дуже драматично ефект зміни вся сторінка. Отже, ще раз, якщо ви реалізуєте речі, Ви можете мати один компонент який призначений для клацнули. Скажімо кнопку Exit і Весь інший компонент, який призначений, щоб відповісти. Таким чином, ви б видалити вікно коли це станеться. 

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

ТОМАС Реймерс: Хочете, щоб обернути, що в Тип пункту, перш ніж ми це зробити? 

Майк Ріццо: ОК. Так, чому б нам не зробити це просто так ми можемо вибрати його трохи більше. 

ТОМАС Реймерс: І давайте дати йому клас. 

Майк Ріццо: Так. Отже, давайте подивимося. Замість вибору фактичне тіло Тепер, я просто виберіть все з Клас привіт, яку ми тут просто є одна річ. Таким чином, ми не повинні турбуватися про це. 

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

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

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

ТОМАС Реймерс: І якщо ви хочете, щоб знайти більше про ці речі, знову ж таки, просто піти в документації JQuery, які ми дали вам, і читати через них. Вони документують свої функції неймовірно добре. 

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

Так насправді швидко про початкового завантаження, який автоматично включені в ваша остання проблема встановити в папці CSS а насправді пов'язані з у вашому header.php. Таким чином, ви могли б додати класи, визначені в Bootstrap до нього. І це було б автоматично стилі ті речі, відповідно. 

ТОМАС Реймерс: Так початкового завантаження є дуже чарівна річ, розроблений людей на Twitter. І те, що вона повинна була зробити, було - перед веб-сайти були дійсно важко зробити добре виглядати, особливо коли у нас були багато спільних компонентів. Так багато кнопок на веб виглядали однаково. 

Багато текстових полів можуть бути зроблені виглядати краще, ніж стандартний текст полі ви, напевно, знаєте з дійсно старі веб-сайти або дійсно погано зробив веб-сайти, які просто виглядають як буквальне текстові поля без будь-яких вигляді тексту тінь або будь-який вид хороший контуром. Так що Бутстреп зробив, він сказав, ну, У нас є багато спільних стилів. Чому б нам не зробити один загальний набір CSS і загальний набір JavaScript як добре, що може укладати все як є, а які може дати людям такі речі, як падіння вниз меню, які можуть дати людям речі, як модальностей. 

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

Знадобилося всього цього, і це упаковано його разом і сказав, тут ми йдемо. Тепер люди можуть використовувати це. І ви можете знайти його на в getbootstrap.com. Було автоматично включені в ваша остання проблема встановити. І ви більше, ніж можете використовувати його на своєму остаточному проекті. І якщо ви хочете слідувати, що посиланням, щоб отримати Bootstrap. 

Ви побачите тут є BootStrap CSS сайт. Ви побачите Bootstrap. І якщо ви прокрутіть вниз, ви побачите як завантажити його, як встановити його, і так далі. 

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

ТОМАС Реймерс: Дивлячись у верхній знову ж, це дуже схоже на Font Відмінний сайт. Багато документації розпочнеться щоб здатися схожими, коли ви бачив достатньо. Так от у нас є CSS компонентом цього. І ви побачите, як це можете стиль речі. Так що якщо ви клацніть на столах, наприклад, ви можете миттєво зробити таблиця досить простим додаванням клас таблиці до нього. 

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

Так от у нас переходи, модальності, меню, що випадає, вкладок і спливаючі підказки. Підказка те, що спливає під вашим миші при наведенні на щось. Popovers, оповіщення, кнопки, збірно-розбірні акордеони те, що вони зазвичай називають. Каруселі, які фліп через, наприклад, зображень. 

Так що ті компоненти бутстраповскіх. Я хотів би закликати вас високо піти подивитися на них. Там в компонент JavaScript і компонент CSS. Не соромтеся використовувати їх як хочете. Ми не збираємося йти занадто багато в них тому що ми відчуваємо в документації дійсно добре зроблено. І так. Чи є у вас питання з цього приводу? 

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

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

ТОМАС Реймерс: Так що все було зроблено без нас писати практично будь-які CSS. Ми також бачимо, заголовок у верхній, якій кольори нами. Але фактичне поставивши його на верхня частина сторінки і зробити це сувій був початкового завантаження. А потім навіть для іншої бібліотеки - це не один ми говорили про але Ви можете Google, якщо ви хочете. Це називається prettify.js. І це буде Підсвічування синтаксису коду для вас, використовуючи як CSS і JavaScript. 

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

Це буквально те, що ми робимо, коли ми потрібно щось робити, ми Google. Є бібліотека JavaScript, що дозволяє мені керувати часом в корисний спосіб? Так що, якщо я знаю, що який-небудь користувач створення рахунки тут, і це поточний час, як я можу вирахувати Різниця з що без того, щоб розрахувати його самостійно? Так що це насправді звичайна справа, JavaScript бібліотека часу. І ось ми, Moment.js-- один з найпопулярніших. 

Якщо нам потрібна бібліотека для маніпулювання щось на зразок кольору, щоб мати можливість генерувати купу випадкових кольорів - можливо, щоб генерувати стиль або щось - ми могли Google щось на зразок JavaScript колір бібліотека. І я впевнений, що ми б спливаюче вікно з Тисяча і одна з них. Ви завжди можете прочитати їх. 

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

Майк Ріццо: А що насправді, де це розміщується теж, якщо ви помітили. 

ТОМАС Реймерс: Так. Так що, якщо ви йдете до Нормалізувати і перейти до GitHub. Були це? 

Майк Ріццо: Ця маленька кішка річ є символом GitHub. 

ТОМАС Реймерс: Ох. Так GitHub використовує метод, званий Git для зберігання коду. Чи є ви не знаєте, що це таке або це лякає вас, це нормально. Ви не повинні знати, що Git є тому GitHub має кнопку Завантажити у правому нижньому куті. 

Інша корисна річ, щоб знати про GitHub є більшість продуктів читатиме мені. І якщо вони не мають веб-сайт, читати мені буде говорити про те, як ви встановити його, як ви його використовуєте, то, що він робить, і так далі, і так далі, і так далі. Те, що ми в основному були вас через. 

Майк Ріццо: Вихід Інтернету. 

ТОМАС Реймерс: Це нормально. Останні дві речі, які ми хотіли говорити про - ми говорили про Git - є пошук і усунення несправностей. А це не так актуально для кінцевий продукт, як це коли ви залишаєте 50. І коли ви зіткнетеся з продуктами реалізації бібліотеки або реалізації Ваш власний проект, ви будете є питання або ви будемо дивитися на ваші запитання. 

Знову ж, Google його. Це буквально те, що ми робимо. Це звучатиме нерозумно. Але буквально, ми Google його. І знову ж, одним з перших речей, ви будете як правило, працюють в це stackoverflow.com, який є прекрасним питання і відповідь видовище. 

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

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

Майк Ріццо: Так що давайте йти вперед і натисніть на цю. Невелика примітка - в той час як, перш, ніж ми були роблять на клацанням миші. Виявляється JCorey Корея також має вбудований в обробник подій клік, що це використовує тільки через те, що це цифри ви захоче зробити багато речей коли ви хочете, щоб натиснути щось. 

Крім того, він також має наведенні. Але щоб отримати повний спектр тих, подивіться на JQuery документація і зробити це. Я зробив щось дурне тут. 

ТОМАС Реймерс: Так що я дуже швидко Програма прямо тут, в якому говориться, кнопка на клацанням миші. Тоді у нас є цикл. Для я менше 404. Це просто буде спливав Ці повідомлення. 

Майк Ріццо: І те, що було Код 404 стояв в HTML? Чи пам'ятає хтось? Не знайдено, правильно. Хром також додав цей акуратний річ, де можна - 

ТОМАС Реймерс: Тому що люди, як Майк почав робити це багато, і дратівливі користувачів, що дозволяє Вам бачити інформацію. 

Майк Ріццо: Так. 

ТОМАС Реймерс: Чи є у нас якісь питання про це, про JavaScript бібліотеки, пошуку бібліотек, або виглядає те, що веб-розробки як в реальному світі? Ми біжимо проти часу. Так що я не впевнений, що ми збираємося встигнути реалізувати якщо це не дуже швидко. Невже ми добре? 

Майк Ріццо: Все, що ви, хлопці, хотіли б щоб побачити дуже швидко в, як, два хвилин або менше? 

ТОМАС Реймерс: Всі ми можемо уточнити? Як написати в - 

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

Майк Ріццо: Так, так that's - 

ТОМАС Реймерс: Ви можете просто натиснути Контрольно-U на сайті. 

Майк Ріццо: О, я не знав, що. 

ТОМАС Реймерс: Я думаю, да. Контрольно-U. Так. 

Майк Ріццо: О, так це те, Код для сайту. Але якщо ви дійсно хочете, щоб завантажити наш файли і все, він розміщений на github.com 

ТОМАС Реймерс: скоротити моє ім'я - Томас Реймерс - слеш CS50 дефіс семінар. 

Майк Ріццо: А можна там є все. 

ТОМАС Реймерс: Це те, що GitHub виглядає, до речі. Отже, ще раз, коли ви бачите з відкритим вихідним кодом Проект, як правило, вони будуть для читання мене там, що ви можете прочитати. І якщо повернутися, ви помітите, що у вас є завантажити ZIP, який буде дозволяють завантажувати джерело Код включити продукт у вашій власній речі. 

Майк Ріццо: Так, і якщо ми просто натисніть на index.html дійсно швидко - 

ТОМАС Реймерс: Ви побачите ось Вихідний код для нашого сайту. 

Майк Ріццо: Крім того, я забув натиснути правою раніше з великим столом він включений, але є також стіл з chmods, що ми включені якраз для вашої ясності. Але якщо ми виділіть все, аж до дно, ми фактично не роблять дуже багато з JavaScript матеріал взагалі з цим. Це виключно від усього інше, що ми мали. 

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

ТОМАС Реймерс: Якщо у вас є питання про свій проект або, якщо це може бути ставлення, ми, ймовірно, залишитися трохи після цього. Але крім цього, є хороший уїк-енд. 

Майк Ріццо: Так, подобається. Побачимося. 

ТОМАС Реймерс: Побачимося.