1 00:00:00,000 --> 00:00:07,440 2 00:00:07,440 --> 00:00:08,180 >> ТОМАС Реймерс: Привіт, всім. 3 00:00:08,180 --> 00:00:09,250 Мене звуть Томас Реймерс. 4 00:00:09,250 --> 00:00:10,500 >> Майк Ріццо: І я Майк Ріццо. 5 00:00:10,500 --> 00:00:12,990 >> ТОМАС Реймерс: Ми два з CS50s ТЗ. 6 00:00:12,990 --> 00:00:18,910 І сьогодні ми ведемо семінар з JavaScript і CSS для веб-додатків. 7 00:00:18,910 --> 00:00:22,140 Якщо ви хочете слідувати, посилання прямо там. 8 00:00:22,140 --> 00:00:25,190 І ви хочете, щоб покласти його на комп'ютері стисло? 9 00:00:25,190 --> 00:00:27,460 >> Там на засланні. 10 00:00:27,460 --> 00:00:30,390 Це невеликий сайт, який містить посилання на всі ресурси, які ми збираємося бути 11 00:00:30,390 --> 00:00:36,490 вказуючи вам сьогодні, а також має багато корисна інформація написана нас 12 00:00:36,490 --> 00:00:39,680 читати далі в глибину, коли ви повернетеся, і ви намагаєтеся згадати, що 13 00:00:39,680 --> 00:00:42,166 точно ми говорили, що ви були говорите, і так далі. 14 00:00:42,166 --> 00:00:43,870 >> Майк Ріццо: Добре. 15 00:00:43,870 --> 00:00:44,890 Отже, почнемо. 16 00:00:44,890 --> 00:00:45,700 >> ТОМАС Реймерс: Отже, ви хочете, щоб почати? 17 00:00:45,700 --> 00:00:45,970 ОК. 18 00:00:45,970 --> 00:00:47,170 >> Майк Ріццо: Так. 19 00:00:47,170 --> 00:00:51,730 Таким чином, ми спочатку хотіли почати з широким Огляд про Інтернет і 20 00:00:51,730 --> 00:00:54,240 Типи файлів при проектуванні веб-сайтів. 21 00:00:54,240 --> 00:00:57,550 У той час як ця презентація ми хочемо потрапити в в JavaScript багато багато 22 00:00:57,550 --> 00:01:00,320 надалі, ми хотіли почати з просто, вид, як з висоти пташиного польоту 23 00:01:00,320 --> 00:01:03,270 чого сайт і як думати про проектування 24 00:01:03,270 --> 00:01:04,800 Веб-сайт для початку. 25 00:01:04,800 --> 00:01:08,370 >> Так ви, хлопці, в цій точці - з ним будучи в п'ятницю ввечері - повинні мати 26 00:01:08,370 --> 00:01:11,000 представили свій CS50 фінанси Проблема встановлює. 27 00:01:11,000 --> 00:01:15,260 Будемо сподіватися, що це був хороший смак про те, що веб-програмування може бути. 28 00:01:15,260 --> 00:01:18,261 Але тут ми хочемо, вид, дати Ви інший смак, а також. 29 00:01:18,261 --> 00:01:23,190 >> ТОМАС Реймерс: Так що просто резюмувати, що відбувається, коли ви набираєте у вашому URL до 30 00:01:23,190 --> 00:01:26,650 ваш веб-браузер, що URL отримує подивився в комп'ютер. 31 00:01:26,650 --> 00:01:28,590 І ваш комп'ютер, підключених до іншого комп'ютера, 32 00:01:28,590 --> 00:01:29,890 в якому знаходиться цей сайт. 33 00:01:29,890 --> 00:01:33,150 Отже, коли ви йдете на google.com, ви підключений до одного з компанії Google 34 00:01:33,150 --> 00:01:36,496 комп'ютери, має файли для google.com. 35 00:01:36,496 --> 00:01:38,750 >> Потім він просить конкретного файлу. 36 00:01:38,750 --> 00:01:40,020 Так що, якщо ви йдете в - 37 00:01:40,020 --> 00:01:41,550 Я не знаю, - 38 00:01:41,550 --> 00:01:48,170 example.com / index.html або / test.html, Ви збираєтеся попросити 39 00:01:48,170 --> 00:01:49,340 що конкретний файл. 40 00:01:49,340 --> 00:01:52,780 І сервер веб збирається щоб повернути його до вас. 41 00:01:52,780 --> 00:01:54,910 >> Потім, коли ви йдете через цей файл - 42 00:01:54,910 --> 00:01:57,750 43 00:01:57,750 --> 00:01:59,950 як тільки ви комп'ютер отримує, що файл - це збирається почати 44 00:01:59,950 --> 00:02:00,820 створити веб-сторінку. 45 00:02:00,820 --> 00:02:03,020 Так що тепер у нього є HTML файл, який ніби як 46 00:02:03,020 --> 00:02:05,170 Структура веб-сторінки. 47 00:02:05,170 --> 00:02:08,620 HTML файл також може посилатися на CSS-файли, які визначають 48 00:02:08,620 --> 00:02:09,889 стиль веб-сторінки. 49 00:02:09,889 --> 00:02:12,970 >> Файли JavaScript, який визначає взаємодія з веб-сторінки. 50 00:02:12,970 --> 00:02:15,200 Файли зображень, які є всього зображення. 51 00:02:15,200 --> 00:02:19,450 І, можливо, посилаються на інші файли HTML, які то ви можете відвідати. 52 00:02:19,450 --> 00:02:22,656 53 00:02:22,656 --> 00:02:24,380 >> Майк Ріццо: ОК, відмінно. 54 00:02:24,380 --> 00:02:28,980 Так ви, хлопці, все, мабуть, копітко налаштувати локальний хост 55 00:02:28,980 --> 00:02:30,810 на вашій віртуальній машині. 56 00:02:30,810 --> 00:02:35,650 І це просто, вид, є місцевим домену, що ваш комп'ютер приймає тільки 57 00:02:35,650 --> 00:02:38,760 для вас на свій страх і IP-адреси. 58 00:02:38,760 --> 00:02:43,300 >> Таким чином, всередині це, то ви можете додати до нього свої власні веб-сторінки. 59 00:02:43,300 --> 00:02:47,655 Я маю на увазі, в CS50 фінансів, ви повинні мати додані деякі HTML сторінки, які, 60 00:02:47,655 --> 00:02:49,410 роду, загорнутий в обгортку PHP. 61 00:02:49,410 --> 00:02:54,690 Але в кінцевому рахунку, на які сторінки вашого PHP були виведення було HTML. 62 00:02:54,690 --> 00:02:58,210 >> Але згадуючи самого початку з PSET, ми мали встановити 63 00:02:58,210 --> 00:03:00,890 дозволів за все, вірно? 64 00:03:00,890 --> 00:03:07,270 Так що це просто в основному дає нам знати, хто може читати, писати, і, можливо, 65 00:03:07,270 --> 00:03:08,730 виконати кожен з файлів. 66 00:03:08,730 --> 00:03:11,870 Так що ми збираємося зробити швидкий - HM? 67 00:03:11,870 --> 00:03:15,660 >> ТОМАС Реймерс: Отже, ми збираємося зробити швидкий демо. 68 00:03:15,660 --> 00:03:19,560 Так що просто, щоб нагадати вам, коли ви підключити до комп'ютера компанії Google - 69 00:03:19,560 --> 00:03:20,690 хто - 70 00:03:20,690 --> 00:03:24,060 і попросити файл, комп'ютер спочатку необхідно переконатися, що ви авторизовані 71 00:03:24,060 --> 00:03:28,790 насправді подивитися файл або читали, що файл, тому що ви не можете просто запитати 72 00:03:28,790 --> 00:03:30,430 для будь-якого файлу на цьому комп'ютері, чи не так? 73 00:03:30,430 --> 00:03:32,260 Це було б ризиковано,. 74 00:03:32,260 --> 00:03:37,020 >> Так файлів на системах, які ми використовуємо, як це CS50 прилад, є три 75 00:03:37,020 --> 00:03:39,200 загальні люди, які можуть мати дозволу на щось. 76 00:03:39,200 --> 00:03:41,610 Перший є фактичним Власник сказав файлу. 77 00:03:41,610 --> 00:03:43,820 Друга група, яка файл належить. 78 00:03:43,820 --> 00:03:46,090 Ми не збираємося зосередитися занадто багато на що. 79 00:03:46,090 --> 00:03:50,010 І останнє, що є, свого роду, як світ або, як все ВООЗ 80 00:03:50,010 --> 00:03:54,130 не відносяться до цього файлу і не мають жодних прав власності на нього. 81 00:03:54,130 --> 00:04:05,650 >> Так що, якщо у нас є власник, група, а потім світ. 82 00:04:05,650 --> 00:04:10,510 І потім, для кожної з цих груп, ви може мати одне з трьох дозволів, 83 00:04:10,510 --> 00:04:13,010 ОК або декількома з них. 84 00:04:13,010 --> 00:04:15,070 Ви можете прочитати дозволу. 85 00:04:15,070 --> 00:04:16,560 Ви можете мати права доступу. 86 00:04:16,560 --> 00:04:18,880 І ви можете мати права на виконання. 87 00:04:18,880 --> 00:04:22,060 >> Так що в плані реальних типів файлів, читання дозвіл, як насправді читання 88 00:04:22,060 --> 00:04:23,250 вміст файлу. 89 00:04:23,250 --> 00:04:24,730 Право доступу пише до зазначеного файл. 90 00:04:24,730 --> 00:04:28,370 Дозвіл на виконання працює файл, як ви робите, коли ви запускаєте один з 91 00:04:28,370 --> 00:04:29,620 Ваші CS50 проектів. 92 00:04:29,620 --> 00:04:32,190 93 00:04:32,190 --> 00:04:38,820 >> Тому, коли ми думаємо про файлах наприклад, коли нам потрібно, щоб прочитати HTML 94 00:04:38,820 --> 00:04:41,790 файл, який повинен бути світ читається, чи не так? 95 00:04:41,790 --> 00:04:44,420 Імовірно, також власник хоче , Щоб мати можливість редагувати файл. 96 00:04:44,420 --> 00:04:46,610 Таким чином, власник потребуватиме читати і писати дозволу. 97 00:04:46,610 --> 00:04:48,710 Вони дійсно не потрібно виконувати. 98 00:04:48,710 --> 00:04:50,950 >> Група, ми збираємося лікувати само, як і в світі на даний момент. 99 00:04:50,950 --> 00:04:54,610 Тому вони потребують дозволу на читання. 100 00:04:54,610 --> 00:04:57,310 Але вони не повинні писати або права на виконання. 101 00:04:57,310 --> 00:05:01,920 І тепер, якщо ми згадаємо колишній PSETs, що ми розуміємо, це такого роду 102 00:05:01,920 --> 00:05:03,360 виглядають як двійковий, чи не так? 103 00:05:03,360 --> 00:05:04,210 1 означає так. 104 00:05:04,210 --> 00:05:05,040 0 для немає. 105 00:05:05,040 --> 00:05:06,870 І ми дійсно можемо перевести це в двійкову. 106 00:05:06,870 --> 00:05:10,478 >> Так 110 в двійковому буде 6. 107 00:05:10,478 --> 00:05:13,270 100 буде 4. 108 00:05:13,270 --> 00:05:14,690 Те ж саме з світом. 109 00:05:14,690 --> 00:05:20,846 Таким чином, число ви отримали б для Дозволи для цього буде 644. 110 00:05:20,846 --> 00:05:24,400 >> Майк Ріццо: І якщо ви згадаєте коли ви права зміненими щось, я вважаю, 111 00:05:24,400 --> 00:05:28,980 вони дали в задачі встановити приклад того, де ви могли б зробити 112 00:05:28,980 --> 00:05:36,470 щось на зразок CHMOD 644 а потім ім'я файлу. 113 00:05:36,470 --> 00:05:39,980 644, то, тепер ви можете бачити безпосередньо де, що виходить від. 114 00:05:39,980 --> 00:05:42,840 Так, ми сподіваємося, що робить, що трохи більш ясним. 115 00:05:42,840 --> 00:05:45,600 >> А потім для наочності ви хлопця - 116 00:05:45,600 --> 00:05:48,200 о так, ось це знову. 117 00:05:48,200 --> 00:05:53,260 Так 600, то буде просто приклад ми дали тут, де власник має 118 00:05:53,260 --> 00:05:56,360 читати і правий дозволу в той час як група і світ не мають жодних дозволів 119 00:05:56,360 --> 00:05:58,145 отримати доступ до файлу. 120 00:05:58,145 --> 00:06:01,500 >> ТОМАС Реймерс: А потім ми повинні швидко Список загальних дозволів. 121 00:06:01,500 --> 00:06:05,250 Так каталоги, ви хочете насправді CHMOD 711. 122 00:06:05,250 --> 00:06:08,930 Швидкий сторону - для каталогу, щоб мати виконуваний дозвіл означає бути в змозі 123 00:06:08,930 --> 00:06:11,680 , Щоб відкрити каталог. 124 00:06:11,680 --> 00:06:15,280 Зображення, CSS, JavaScript, HTML потреби 644, тому що, в принципі, світ 125 00:06:15,280 --> 00:06:16,400 потреби дозволу на читання. 126 00:06:16,400 --> 00:06:20,960 >> І PHP, які ви, хлопці, бачили хоча ми не будемо говорити про це 127 00:06:20,960 --> 00:06:24,880 строго, як правило, права зміненими з дозвіл 600, тому що це бігти з 128 00:06:24,880 --> 00:06:26,540 дозволів власника. 129 00:06:26,540 --> 00:06:27,790 Принаймні, на приладі. 130 00:06:27,790 --> 00:06:30,200 131 00:06:30,200 --> 00:06:36,870 >> Майк Ріццо: Так що якщо ви не спеціально вказати, який тип файлу 132 00:06:36,870 --> 00:06:39,480 ви хочете справді установка до цієї презентації - 133 00:06:39,480 --> 00:06:43,490 у нас була проблема з цим, тому що все, що не було права зміненими правильно - 134 00:06:43,490 --> 00:06:47,550 Ви збираєтеся отримати, начебто, А заборонено помилка, що сайт 135 00:06:47,550 --> 00:06:49,700 насправді не має дозволу для доступу до будь-який файл 136 00:06:49,700 --> 00:06:51,370 Ви хочете, щоб доступ. 137 00:06:51,370 --> 00:06:54,780 І, звичайно, що може бути виправлено - як і в задачі набір - шляхом зміни 138 00:06:54,780 --> 00:06:56,405 дозволів відповідним чином. 139 00:06:56,405 --> 00:06:59,620 >> ТОМАС Реймерс: І останнє коментар для швидко місцевого розвитку - ми 140 00:06:59,620 --> 00:07:02,000 підняв це, але ми просто хотіли щоб привести його знову - 141 00:07:02,000 --> 00:07:06,230 якщо ви попросите сервері - так локальний хост, наприклад, ком або що завгодно. - 142 00:07:06,230 --> 00:07:09,170 і ви не вказаний конкретний файл, файл, який ваш комп'ютер буде 143 00:07:09,170 --> 00:07:11,540 попросити називається index.html. 144 00:07:11,540 --> 00:07:12,790 Або, якщо це не існує, index.php. 145 00:07:12,790 --> 00:07:15,560 146 00:07:15,560 --> 00:07:16,350 >> Круто. 147 00:07:16,350 --> 00:07:19,560 Так що це просто повторення всього, сподіваюсь, що ми розглянули в 148 00:07:19,560 --> 00:07:22,800 розділ, і лекція, і до цих пір в CS50. 149 00:07:22,800 --> 00:07:26,110 І тепер ми збираємося почати говорити про спеціально бібліотеки. 150 00:07:26,110 --> 00:07:30,270 JavaScript і CSS бібліотеки для веб-додатків. 151 00:07:30,270 --> 00:07:36,350 >> Так один швидкий причина, чому у нас є бібліотеки є програмування - 152 00:07:36,350 --> 00:07:39,000 є багато проблем в програмування, які тримають вискакують 153 00:07:39,000 --> 00:07:40,570 знову, і знову, і знову. 154 00:07:40,570 --> 00:07:43,870 Ви можете помітити, що багато веб-сайтів потрібна можливість мати випадає 155 00:07:43,870 --> 00:07:49,100 меню, наприклад, або повинні мати можливість мати дуже стандартна кнопка 156 00:07:49,100 --> 00:07:51,400 стиль, який не може бути найпростіше. 157 00:07:51,400 --> 00:07:54,670 Тепер, коли ви почнете одержувати в HTML, ви розуміють, що кнопки можуть насправді 158 00:07:54,670 --> 00:07:57,720 виглядають дійсно потворні, якщо вам нічого не роблять. 159 00:07:57,720 --> 00:08:00,830 >> Так багато людей написали називається бібліотеки. 160 00:08:00,830 --> 00:08:02,990 І в цьому контексті, що вони також називається рамки. 161 00:08:02,990 --> 00:08:04,790 Ми збираємося використовувати два синоніми. 162 00:08:04,790 --> 00:08:07,360 І те, що вони є, що вони в основному попередньо зроблені шматки коду - 163 00:08:07,360 --> 00:08:09,130 або CSS або JavaScript - 164 00:08:09,130 --> 00:08:13,240 що відняти багато об'єднатися у вас є в кодуванні. 165 00:08:13,240 --> 00:08:17,290 >> Таким чином, вони заздалегідь визначити купу класів або попередньо визначити купу функцій для 166 00:08:17,290 --> 00:08:20,110 Випадок в JavaScript, які ви можете зателефонувати пізніше. 167 00:08:20,110 --> 00:08:22,690 І тоді ви можете, свого роду, отримати доступ до цього коду, що не 168 00:08:22,690 --> 00:08:23,710 необхідності що-небудь робити. 169 00:08:23,710 --> 00:08:27,750 Приклад бібліотеки був CS50.H. Це була бібліотека ми дали вам назад 170 00:08:27,750 --> 00:08:32,090 на тиждень один, що дозволило вам зробити такі речі, як то GetInt і GetString 171 00:08:32,090 --> 00:08:35,237 без необхідності писати будь-який код самостійно. 172 00:08:35,237 --> 00:08:36,179 >> Майк Ріццо: Добре. 173 00:08:36,179 --> 00:08:40,299 Так от, так само, як ми повинні були включати в себе в нашій з файлів відрізняється 174 00:08:40,299 --> 00:08:46,570 бібліотеки, ми також повинні включати в наш HTML файли різних бібліотек. 175 00:08:46,570 --> 00:08:50,310 Наприклад, якщо ми хотіли включити специфічний бібліотека JavaScript тут, 176 00:08:50,310 --> 00:08:52,850 можливо, той, який ми написали самі, як це локально відбувся 177 00:08:52,850 --> 00:08:56,000 звані script.js, ми просто використовувати ці позначення. 178 00:08:56,000 --> 00:08:59,500 >> Тому у нас є рівних типу сценарію JavaScript джерелом одно 179 00:08:59,500 --> 00:09:01,260 Javascript.js. 180 00:09:01,260 --> 00:09:05,190 І якщо ви думаєте на ваш CS50 Проблема фінансів встановити, якщо ви дивилися в 181 00:09:05,190 --> 00:09:09,190 header.php в папці шаблонів, Ви б бачили, 182 00:09:09,190 --> 00:09:10,970 деякі з них включені. 183 00:09:10,970 --> 00:09:13,250 Так що це перший - сценарії - 184 00:09:13,250 --> 00:09:16,080 є в тому числі бібліотеки JavaScript. 185 00:09:16,080 --> 00:09:18,760 У тому числі бібліотеку CSS є трохи відрізняється. 186 00:09:18,760 --> 00:09:21,430 >> Тут замість сценарію TAG вам потрібно тег посилання. 187 00:09:21,430 --> 00:09:27,110 А потім, тип тексту CSS трохи відрізняється. 188 00:09:27,110 --> 00:09:29,270 Ви не завжди повинні включати в себе отн стилів. 189 00:09:29,270 --> 00:09:30,970 Але я думаю, що це, взагалі кажучи, хороша практика. 190 00:09:30,970 --> 00:09:35,810 >> І, нарешті, HREF, який ви напевно, бачили в ваших ATAGs для зв'язку 191 00:09:35,810 --> 00:09:39,440 в різних ланках все визначає ланка, де знайти це. 192 00:09:39,440 --> 00:09:42,250 Наприклад, якщо ми хотіли, щоб зв'язати відрізняється бібліотека - давайте просто скажемо, - 193 00:09:42,250 --> 00:09:49,330 що жив у styles.css. 194 00:09:49,330 --> 00:09:54,030 І ми хотіли, щоб зв'язати, що в цей відбувся в Інтернеті, ми б скопіювати це. 195 00:09:54,030 --> 00:09:58,834 А потім вставте його в те, що ми маємо право тут замість цього. 196 00:09:58,834 --> 00:10:01,340 >> ТОМАС Реймерс: Добре, ми сподіваємося, ви хлопці вже знайомі 197 00:10:01,340 --> 00:10:02,410 з тим, як зв'язати CSS. 198 00:10:02,410 --> 00:10:04,000 Ви повинні були зробити це на ваш останній коричневий комплект. 199 00:10:04,000 --> 00:10:07,110 JavaScript, деякі з вас, можливо, є досвід роботи з. 200 00:10:07,110 --> 00:10:07,980 Деякі з вас не може. 201 00:10:07,980 --> 00:10:12,190 >> Так що на даний знаю, що файл JavaScript дуже схоже на файл CSS в 202 00:10:12,190 --> 00:10:15,640 відчуття, що ви можете посилатися на нього чи що ви можете включити його внутрішньо. 203 00:10:15,640 --> 00:10:17,360 І це дозволяє сценаріїв речей. 204 00:10:17,360 --> 00:10:21,820 І ми збираємося вас через Трохи JavaScript надалі. 205 00:10:21,820 --> 00:10:23,560 >> Так використанням бібліотеки - 206 00:10:23,560 --> 00:10:26,150 як тільки ви включили його, це як просто, як буквально виклику 207 00:10:26,150 --> 00:10:29,640 функції або додавання імена класів до нього. 208 00:10:29,640 --> 00:10:32,220 Останнє, що ми хочемо говорити про з точки зору бібліотеки - 209 00:10:32,220 --> 00:10:34,180 і це, швидше, технічної записці - 210 00:10:34,180 --> 00:10:35,860 є ліцензування з відкритим вихідним кодом. 211 00:10:35,860 --> 00:10:41,550 Отже, коли ви знайти ці фактичні бібліотеки, Ви можете думати про 212 00:10:41,550 --> 00:10:47,630 питання подобається це ОК, що я просто за допомогою коду чужий, особливо 213 00:10:47,630 --> 00:10:51,970 тому що це те, що ми дуже багато сказав тобі не робити в цьому курсі. 214 00:10:51,970 --> 00:10:55,790 >> Таким чином, у разі відкритих джерел ліцензування, багато розробників - 215 00:10:55,790 --> 00:10:57,540 як тільки вони написав бібліотеку, які вони думають, що може бути 216 00:10:57,540 --> 00:10:59,450 корисним і для інших людей - 217 00:10:59,450 --> 00:11:02,420 опублікує його в Інтернеті і дати йому ліцензію. 218 00:11:02,420 --> 00:11:06,620 І ліцензія основному говорить, що я добровільно містить дозвіл на одного 219 00:11:06,620 --> 00:11:11,250 людей, щоб використовувати цю програму з наступною роду 220 00:11:11,250 --> 00:11:13,230 застереження. 221 00:11:13,230 --> 00:11:16,100 >> Ми включили посилання на хороший сайт на допоможе вам зрозуміти ліцензій в 222 00:11:16,100 --> 00:11:17,720 випадку, якщо ви зіткнетеся з ними. 223 00:11:17,720 --> 00:11:21,680 Загальні угоди є речі, як Ви можете використовувати мою бібліотеку так 224 00:11:21,680 --> 00:11:23,000 Поки ви даєте мені кредит. 225 00:11:23,000 --> 00:11:25,670 Ви завжди можете використовувати мою бібліотеку за умови, що, коли вона виходить 226 00:11:25,670 --> 00:11:26,790 Ви не звинувачуйте мене. 227 00:11:26,790 --> 00:11:30,310 Ви завжди можете використовувати мою бібліотеку так довго як ви не використовуєте його, щоб заробити гроші 228 00:11:30,310 --> 00:11:31,910 для себе. 229 00:11:31,910 --> 00:11:34,130 Це види загального застереження. 230 00:11:34,130 --> 00:11:37,780 >> Для цього CS50 остаточного проекту, вони не повинні бути супер значення, оскільки 231 00:11:37,780 --> 00:11:41,440 проекти, які ви, хлопці використовують, ймовірно, швидше, свого роду, відомі. 232 00:11:41,440 --> 00:11:44,170 Але коли ви насправді вийти в світ і почати використовувати бібліотеки, які 233 00:11:44,170 --> 00:11:48,100 може або не може бути також реалізований у вигляді деякі з найбільш популярних з них ми 234 00:11:48,100 --> 00:11:49,780 буде переживає. 235 00:11:49,780 --> 00:11:53,310 Це добре, щоб бути в змозі зрозуміти ці ліцензії та в 236 00:11:53,310 --> 00:11:54,560 зрозуміти, що вони означають. 237 00:11:54,560 --> 00:11:58,120 238 00:11:58,120 --> 00:11:58,586 І повертаючись. 239 00:11:58,586 --> 00:12:00,960 >> Майк Ріццо: ОК. 240 00:12:00,960 --> 00:12:04,850 Так що тепер перейти на прикладах фактичного CSS. 241 00:12:04,850 --> 00:12:07,770 У цей момент до цих пір, ви, можливо, не зіткнулися з цією. 242 00:12:07,770 --> 00:12:10,300 Але ви, напевно, стикалися з цим в ваше повсякденне життя, де щось 243 00:12:10,300 --> 00:12:13,160 , Який виглядає в одну сторону на одному браузері може не виглядати так само, 244 00:12:13,160 --> 00:12:14,880 спосіб в іншому браузері. 245 00:12:14,880 --> 00:12:17,400 >> Це називається браузеру браузера сумісність. 246 00:12:17,400 --> 00:12:20,780 І все частіше це стає все більш і більше проблеми, тим більше, 247 00:12:20,780 --> 00:12:25,260 -Браузери все більше і більше свободи на виконання того, як вони хочуть. 248 00:12:25,260 --> 00:12:28,440 Таким чином, щоб подолати це, там насправді чудова бібліотека називається Normalize.CSS. 249 00:12:28,440 --> 00:12:32,236 250 00:12:32,236 --> 00:12:33,770 >> ТОМАС Реймерс: Ми включили посилання. 251 00:12:33,770 --> 00:12:36,210 У цей момент, це корисно, якщо у вас є свій ноутбук в там 252 00:12:36,210 --> 00:12:38,740 дивлячись на сайті. 253 00:12:38,740 --> 00:12:42,580 І ми даємо вам це право зараз просто тому, що остаточний CS50 254 00:12:42,580 --> 00:12:44,370 Проект насправді відбувається, щоб прошу вас її реалізації 255 00:12:44,370 --> 00:12:45,860 аналогічно і через браузери. 256 00:12:45,860 --> 00:12:49,250 >> Так тільки, щоб тримати в задній частині вашого голова, це прекрасна бібліотека 257 00:12:49,250 --> 00:12:51,170 тому що це буде, свого роду, стандартизувати речі. 258 00:12:51,170 --> 00:12:54,230 У Firefox, щось може показати як один піксель зліва. 259 00:12:54,230 --> 00:12:58,390 А потім Chrome може вирішити, що насправді що ви мали на увазі був 10 пікселів 260 00:12:58,390 --> 00:12:59,380 вліво. 261 00:12:59,380 --> 00:13:01,030 І ви хочете, щоб стандартизувати цей. 262 00:13:01,030 --> 00:13:05,360 Нормалізація буде насправді зробити дійсно хороший Робота переконавшись, що ваш сайт 263 00:13:05,360 --> 00:13:08,070 виглядає так само, у всіх браузерах. 264 00:13:08,070 --> 00:13:10,660 >> Майк Ріццо: Так що, якщо ми хотіли просто натисніть на посилання дійсно швидко і шоу 265 00:13:10,660 --> 00:13:13,140 Ви, як це виглядає, вам можете завантажити його за допомогою 266 00:13:13,140 --> 00:13:14,670 гігант кнопку Завантажити. 267 00:13:14,670 --> 00:13:18,520 Або я закликаю вас, щоб дізнатися більше про це натиснувши на це посилання в нижній 268 00:13:18,520 --> 00:13:19,310 правий кут. 269 00:13:19,310 --> 00:13:22,420 >> ТОМАС Реймерс: І якщо ви насправді натисніть Read More тут же - 270 00:13:22,420 --> 00:13:24,340 клацніть джерело на GitHub - 271 00:13:24,340 --> 00:13:31,720 ви дійсно будете бачити з відкритим вихідним кодом Ліцензії на LICENSE.md прямо там. 272 00:13:31,720 --> 00:13:35,740 І ви побачите, ось дуже популярні ліцензії MIT. 273 00:13:35,740 --> 00:13:38,940 Знову ж, якщо ви читаєте по тексту, Ви зможете знайти його на сайті 274 00:13:38,940 --> 00:13:42,550 ми звертатися до і вміти зрозуміти його без того, щоб читати 275 00:13:42,550 --> 00:13:45,920 через юридичної термінології. 276 00:13:45,920 --> 00:13:46,850 >> Майк Ріццо: ОК, відмінно. 277 00:13:46,850 --> 00:13:47,940 Так от Нормалізувати. 278 00:13:47,940 --> 00:13:49,190 Ми хотіли дати вам що дуже швидко. 279 00:13:49,190 --> 00:13:50,030 О, у вас є питання? 280 00:13:50,030 --> 00:13:53,013 >> АУДИТОРІЯ: Отже, коли ви завантажуєте його, ви просто дотримуйтесь цей код, що вони мають 281 00:13:53,013 --> 00:13:54,098 під кнопкою Download? 282 00:13:54,098 --> 00:13:55,860 >> ТОМАС Реймерс: Так, так при завантаженні - 283 00:13:55,860 --> 00:13:58,130 >> Майк Ріццо: О, це великий момент. 284 00:13:58,130 --> 00:14:00,700 Так що питання в тому, як зробити ми насправді її скачати? 285 00:14:00,700 --> 00:14:03,260 Так що, якщо ми натисніть на посилання, ми бачимо, що це насправді спливає 286 00:14:03,260 --> 00:14:05,030 на вихідний код. 287 00:14:05,030 --> 00:14:08,550 Таким чином, щоб зробити це, то, що ми могли б зробити, це просто натисніть кнопку Зберегти як. 288 00:14:08,550 --> 00:14:10,830 Зберегти як і, що слід виховувати файл. 289 00:14:10,830 --> 00:14:14,160 І тоді ми зможемо вибрати, щоб зберегти це як normalize.CSS. 290 00:14:14,160 --> 00:14:15,810 І тоді вам доведеться зв'язати його в - 291 00:14:15,810 --> 00:14:18,660 >> ТОМАС Реймерс: Так само, як ви посилаються в будь-який інший файл. 292 00:14:18,660 --> 00:14:22,250 І як тільки ви пов'язати його в те, що це здорово про Нормалізація це буде насправді 293 00:14:22,250 --> 00:14:25,920 піклуватися про всіх важко працювати сам по собі. 294 00:14:25,920 --> 00:14:27,730 Це означає, що у вас немає додати будь-які класи. 295 00:14:27,730 --> 00:14:29,690 >> Ви не повинні нічого робити дивні. 296 00:14:29,690 --> 00:14:34,590 Це нормалізує без тебе робити що-небудь далі. 297 00:14:34,590 --> 00:14:36,083 Так, ви повинні включити його. 298 00:14:36,083 --> 00:14:38,990 299 00:14:38,990 --> 00:14:40,240 Google Chrome не відповідає. 300 00:14:40,240 --> 00:14:43,270 301 00:14:43,270 --> 00:14:44,860 >> Просто швидко в сторону - 302 00:14:44,860 --> 00:14:46,800 Я помітив, ми стрибнули в це. 303 00:14:46,800 --> 00:14:49,010 Решта цієї презентації буде короткий огляд. 304 00:14:49,010 --> 00:14:50,380 Огляд бібліотек. 305 00:14:50,380 --> 00:14:52,710 >> В принципі, те, що вони є. 306 00:14:52,710 --> 00:14:53,350 Те, що вони роблять. 307 00:14:53,350 --> 00:14:54,060 Як вони корисні. 308 00:14:54,060 --> 00:14:56,540 Як ви могли б реалізувати їх. 309 00:14:56,540 --> 00:14:59,730 Якщо ви хочете почати дивитися на них, наступних разом, і прочитавши 310 00:14:59,730 --> 00:15:01,990 їм, я настійно рекомендую б це. 311 00:15:01,990 --> 00:15:07,620 >> Крім того, ви завжди можете також почати завантаження їх і в тому числі 312 00:15:07,620 --> 00:15:11,400 їх у вигляді просто щоб подивитися, що вони виглядають, як і що вони роблять, якщо у вас є 313 00:15:11,400 --> 00:15:12,270 ваш ноутбук перед вами. 314 00:15:12,270 --> 00:15:14,650 Якщо ні, то ви завжди можете тримати слухати нас говорять. 315 00:15:14,650 --> 00:15:15,500 Ми збираємося продовжувати говорити. 316 00:15:15,500 --> 00:15:18,680 І у нас є час в кінці, ми сподіваємося, ми насправді потрапити в показуючи вам, 317 00:15:18,680 --> 00:15:20,946 що деякі з цих бібліотек виглядати. 318 00:15:20,946 --> 00:15:22,320 >> Майк Ріццо: Круто. 319 00:15:22,320 --> 00:15:25,466 Гаразд, тепер давайте поговоримо про шрифту Високий. 320 00:15:25,466 --> 00:15:30,480 >> ТОМАС Реймерс: так шрифту дивовижне є дуже акуратним сайт, особливо для тих, 321 00:15:30,480 --> 00:15:32,450 з нас, хто менш художньо талановитий. 322 00:15:32,450 --> 00:15:36,330 323 00:15:36,330 --> 00:15:38,880 Не звертаючи уваги на ім'я шрифту Дивовижний, це дає Ви купа значків, які 324 00:15:38,880 --> 00:15:41,050 дуже корисно. 325 00:15:41,050 --> 00:15:45,950 Так багато разів ви будете здійснювати значок, який ви можете як хороший х так 326 00:15:45,950 --> 00:15:47,170 що ви можете закрити щось. 327 00:15:47,170 --> 00:15:49,910 >> Або ви можете якусь кнопку Змінити з олівцем малюнка, як 328 00:15:49,910 --> 00:15:50,940 у всіх інших є. 329 00:15:50,940 --> 00:15:53,850 І ось, коли ви дізнаєтеся, що малювання ці значки можуть бути 330 00:15:53,850 --> 00:15:55,510 дуже виснажливим і важким. 331 00:15:55,510 --> 00:15:59,160 Шрифт Приголомшливий - якщо ви насправді перейти на сайт - 332 00:15:59,160 --> 00:16:02,892 дає величезна кількість ікон під значки на самому верху. 333 00:16:02,892 --> 00:16:06,980 Так, просто верх. 334 00:16:06,980 --> 00:16:09,030 Це дасть вам багато ікон безкоштовно. 335 00:16:09,030 --> 00:16:15,210 >> Так от ви бачите у нас є такі речі, як Зірочка, бари, блискавка, 336 00:16:15,210 --> 00:16:19,750 календар, помилка, книга і так далі. 337 00:16:19,750 --> 00:16:21,110 Це може бути дуже корисно. 338 00:16:21,110 --> 00:16:24,290 Те, як ви включити це ви включаєте буквально файл CSS. 339 00:16:24,290 --> 00:16:29,760 І після того як ви включили файл CSS, то, що ви можете зробити, це створити 340 00:16:29,760 --> 00:16:33,430 тег називається I. Він satands для значок з класом Англії 341 00:16:33,430 --> 00:16:34,460 стоячи шрифту Високий. 342 00:16:34,460 --> 00:16:36,330 І потім, все, що вам більше підійде клас. 343 00:16:36,330 --> 00:16:41,220 >> Так що, якщо я хотів ікону цьому плюс квадрат прямо тут, я дав би 344 00:16:41,220 --> 00:16:43,290 це клас Англії. 345 00:16:43,290 --> 00:16:46,230 А потім FA дефіс плюс дефіс квадрат. 346 00:16:46,230 --> 00:16:50,325 347 00:16:50,325 --> 00:16:53,710 >> Майк Ріццо: Круто, ОК. 348 00:16:53,710 --> 00:16:56,980 >> ТОМАС Реймерс: І потім, в останній CSS Бібліотека ми хочемо, щоб пройти через ми 349 00:16:56,980 --> 00:16:59,950 намагаючись зберегти його мінімальна на CSS бібліотеки, тому що ми розуміємо, 350 00:16:59,950 --> 00:17:03,660 Назва цієї презентації є JavaScript бібліотеки. 351 00:17:03,660 --> 00:17:07,089 Але ми думали, що ми можемо, а познайомити вас з іншими бібліотеками 352 00:17:07,089 --> 00:17:09,569 в той час як ми говорили про бібліотеки. 353 00:17:09,569 --> 00:17:11,400 >> Це Google Веб шрифти. 354 00:17:11,400 --> 00:17:17,040 І те, що Google Веб Шрифти дозволяє вам зробити, це додати шрифти на ваш сайт, 355 00:17:17,040 --> 00:17:22,079 який є дійсно простий спосіб зробити це досить і відрізнити свій набір 356 00:17:22,079 --> 00:17:24,460 від всіх інших, якщо у нього є красивий шрифт або якщо у нього є хороший 357 00:17:24,460 --> 00:17:27,790 Колекція шрифтів. 358 00:17:27,790 --> 00:17:31,410 Google Web Fonts хороший на відміну від інших бібліотеки в тому сенсі, що це 359 00:17:31,410 --> 00:17:33,490 дійсно керується установки. 360 00:17:33,490 --> 00:17:38,680 >> Так що якщо ви, перейдіть за посиланням, це google.com / шрифти, я вважаю. 361 00:17:38,680 --> 00:17:41,100 Якщо ви будете слідувати, що, вас можете вибрати свій шрифт. 362 00:17:41,100 --> 00:17:44,410 Ви можете вибрати зліва від товщина, нахил, і так далі. 363 00:17:44,410 --> 00:17:48,970 А потім, як тільки ви вибрали один, ви можете натиснути швидкий використання. 364 00:17:48,970 --> 00:17:49,820 Прямо там. 365 00:17:49,820 --> 00:17:51,590 Права нижня частина коробки. 366 00:17:51,590 --> 00:17:54,380 367 00:17:54,380 --> 00:17:56,700 >> А потім, перейдіть вниз. 368 00:17:56,700 --> 00:17:59,600 369 00:17:59,600 --> 00:18:02,650 Насамперед, вони дають вам CSS, що вам потрібно насправді посилаються на нього. 370 00:18:02,650 --> 00:18:03,330 Це прямо там. 371 00:18:03,330 --> 00:18:05,170 Ви можете просто скопіювати і вставити, що дюйма 372 00:18:05,170 --> 00:18:07,250 І хороша річ про це один є Ви насправді не потрібно навіть 373 00:18:07,250 --> 00:18:08,340 скачати файл. 374 00:18:08,340 --> 00:18:11,170 >> Що він збирається зробити, це він збирається перейти за посиланням версією компанії Google від нього. 375 00:18:11,170 --> 00:18:14,130 Отже, повернемося до що це означає. 376 00:18:14,130 --> 00:18:18,270 Це означає, що коли користувач завантажує файл - 377 00:18:18,270 --> 00:18:22,300 завантажує ваша сторінка HTML - ваш HTML сторінка буде посилатися на цей файл. 378 00:18:22,300 --> 00:18:26,790 >> Отже, ваш комп'ютер побачить, О, це розміщується на google.com, а 379 00:18:26,790 --> 00:18:28,170 ніж на theirsite.com. 380 00:18:28,170 --> 00:18:30,370 Відпусти мене запитаєте Google для цього файлу. 381 00:18:30,370 --> 00:18:32,800 І потім, це буде включати в себе це майже як якби це було 382 00:18:32,800 --> 00:18:35,584 частиною вашого власного сайту. 383 00:18:35,584 --> 00:18:36,540 >> ТОМАС Реймерс: Круто. 384 00:18:36,540 --> 00:18:40,980 І як тільки ви включаєте це, то в включити його в свій CSS, це дає вам 385 00:18:40,980 --> 00:18:41,830 фактична лінія. 386 00:18:41,830 --> 00:18:45,188 Таким чином, ви встановите сімейство шрифтів нерухомість збігається з ім'ям вашого шрифту. 387 00:18:45,188 --> 00:18:47,936 388 00:18:47,936 --> 00:18:50,440 >> Майк Ріццо: ОК. 389 00:18:50,440 --> 00:18:52,220 Таким чином, ми тільки що закінчили з CSS. 390 00:18:52,220 --> 00:18:57,230 І деякі з вас можуть подумати: ну, у нас було небагато CSS на CS50 фінансів. 391 00:18:57,230 --> 00:19:00,390 Але бібліотека CSS був завантажувальний. 392 00:19:00,390 --> 00:19:05,190 Ми фактично включають початкового завантаження трохи пізніше під JavaScript, тому що з 393 00:19:05,190 --> 00:19:09,660 бібліотека початкового завантаження CSS також поставляється з великою кількістю JavaScript цієї 394 00:19:09,660 --> 00:19:12,060 Початкового завантаження або Twitter - хто зробив Bootstrap - 395 00:19:12,060 --> 00:19:15,426 використовує для управління всіма їх CSS. 396 00:19:15,426 --> 00:19:19,592 >> ТОМАС Реймерс: Хто-небудь є будь-яка питання досі про CSS в цілому? 397 00:19:19,592 --> 00:19:20,723 Ми добре? 398 00:19:20,723 --> 00:19:21,216 Приголомшливо. 399 00:19:21,216 --> 00:19:22,495 >> Майк Ріццо: Приголомшливо. 400 00:19:22,495 --> 00:19:25,136 >> ТОМАС Реймерс: Так при переміщенні на JavaScript. 401 00:19:25,136 --> 00:19:27,900 >> Майк Ріццо: Таким чином, ми хотіли поговорити про JQuery з самого початку. 402 00:19:27,900 --> 00:19:30,780 Хто-небудь чув про JQuery до або використовував його? 403 00:19:30,780 --> 00:19:32,180 Так, пару? 404 00:19:32,180 --> 00:19:36,000 Так що якщо ви просто працювати з рідними JavaScript, ви опинитеся 405 00:19:36,000 --> 00:19:41,000 набравши багато довгих селекторів чимало. 406 00:19:41,000 --> 00:19:44,400 Так що JQuery робить це забезпечує хороший оболонка для JavaScript 407 00:19:44,400 --> 00:19:48,180 мова, яка дозволяє легко вибрати і маніпулювати різними елементами 408 00:19:48,180 --> 00:19:52,470 в об'єктній моделі документа веб-сторінки або DOM, який я думаю, 409 00:19:52,470 --> 00:19:54,290 ви, хлопці, чули про в лекції в цій точці. 410 00:19:54,290 --> 00:19:57,550 >> ТОМАС Реймерс: Якщо ви ще не чули про це або якщо ви ще не дивилися лекція 411 00:19:57,550 --> 00:20:01,870 проте, об'єктної моделі документа є в основному, як представлені речі. 412 00:20:01,870 --> 00:20:05,290 Так HTML начебто виглядає як дерево, коли ви насправді зробити це. 413 00:20:05,290 --> 00:20:06,850 У вас є HTML елемент на вершині. 414 00:20:06,850 --> 00:20:07,560 У вас є голова і тіло. 415 00:20:07,560 --> 00:20:09,500 >> А потім, в тому, що ви є все інше. 416 00:20:09,500 --> 00:20:10,660 Ось називають DOM - 417 00:20:10,660 --> 00:20:12,120 Об'єктної моделі документа. 418 00:20:12,120 --> 00:20:16,090 Так модель, яка представляє об'єкти в документ являє собою простий спосіб думати 419 00:20:16,090 --> 00:20:18,560 про це. 420 00:20:18,560 --> 00:20:22,520 І один з Саме чудове в JQuery це дійсно робить обході 421 00:20:22,520 --> 00:20:26,460 що і маніпуляції елементи всередині що неймовірно просто. 422 00:20:26,460 --> 00:20:30,300 >> Так просто, по суті, що більшість JavaScript бібліотеки або якщо не 423 00:20:30,300 --> 00:20:34,200 Більшість, великий більшість з них ви побачите насправді вимагають JQuery так 424 00:20:34,200 --> 00:20:37,530 що вони можуть працювати самі просто тому що, якщо у вас не було JQuery, вам 425 00:20:37,530 --> 00:20:40,540 буде витрачати багато часу, намагаючись з'ясувати, як вибрати певний 426 00:20:40,540 --> 00:20:43,660 елементи і як робити інші речі. 427 00:20:43,660 --> 00:20:47,950 А другий цікава річ про JQuery те, що це взаємний браузер, сумісний. 428 00:20:47,950 --> 00:20:51,550 >> Так що пам'ятайте, коли ми сказали, що не всі браузери реалізації 429 00:20:51,550 --> 00:20:53,100 речі таким же чином? 430 00:20:53,100 --> 00:20:55,120 Це вірно навіть в JavaScript. 431 00:20:55,120 --> 00:20:58,220 І одна з великих речей про JQuery є те, що він виявить 432 00:20:58,220 --> 00:21:00,300 браузер і виявити відповідний метод. 433 00:21:00,300 --> 00:21:03,420 >> Так що якщо вам потрібно вибрати елемент, Internet Explorer може сказати, що ви 434 00:21:03,420 --> 00:21:05,770 повинен робити цей шлях. 435 00:21:05,770 --> 00:21:08,300 Firefox може сказати правильне шлях таким чином. 436 00:21:08,300 --> 00:21:09,710 JQuery не дбає. 437 00:21:09,710 --> 00:21:12,550 Коли ви говорите JQuery, щоб вибрати елемент буде з'ясувати, як це 438 00:21:12,550 --> 00:21:16,290 повинен робити це в браузері користувач в даний момент, а потім зробити 439 00:21:16,290 --> 00:21:18,584 це таким чином. 440 00:21:18,584 --> 00:21:22,650 >> Майк Ріццо: Так що давайте не будемо говорити про використання JQuery небагато. 441 00:21:22,650 --> 00:21:27,670 Так само, як PHP, JQuery має конкретний любов до знака долара. 442 00:21:27,670 --> 00:21:30,880 Таким чином, ви побачите, що будь JQuery - 443 00:21:30,880 --> 00:21:32,060 ну, не все. 444 00:21:32,060 --> 00:21:35,210 Іноді можна замінити долар підписати зі словом JQuery. 445 00:21:35,210 --> 00:21:38,980 Але в цілому, тільки тому, що коротше, коли ви бачите JQuery бути 446 00:21:38,980 --> 00:21:41,420 використовується це буде зі знаком долара. 447 00:21:41,420 --> 00:21:47,030 >> Так от, ми просто показуючи початок Селектор для елемента в DOM. 448 00:21:47,030 --> 00:21:52,850 Тут, у нас є знак долара з подальшим відкритими дужках, а потім котирування. 449 00:21:52,850 --> 00:21:56,130 І протягом лапок йдуть наші селектори для різних елементів. 450 00:21:56,130 --> 00:21:59,810 Так само, як в CSS, у чому ми потребували селектори вміти укладати різні елементи 451 00:21:59,810 --> 00:22:00,840 на сторінці. 452 00:22:00,840 --> 00:22:06,555 Ці різні селектори перевести точно в JQuery і JavaScript, 453 00:22:06,555 --> 00:22:07,820 по більшій частині. 454 00:22:07,820 --> 00:22:10,120 >> Так от у нас є точка Foo. 455 00:22:10,120 --> 00:22:14,780 Так що якщо ви пам'ятаєте з лекції, точка просто означає клас. 456 00:22:14,780 --> 00:22:18,850 Таким чином, ми вибравши елемент з класу Foo. 457 00:22:18,850 --> 00:22:22,670 Так що якщо я йду вперед і відкрити наш Консоль JavaScript тут дуже швидко 458 00:22:22,670 --> 00:22:26,830 просто продемонструвати це, якщо я просто наберіть знак долара, ми бачимо, що це якась 459 00:22:26,830 --> 00:22:28,090 Функція, яка йде вгору. 460 00:22:28,090 --> 00:22:29,420 І це просто визначається JQuery. 461 00:22:29,420 --> 00:22:32,120 >> ТОМАС Реймерс: Для тих з вас, незнайомі, консоль є інструментом 462 00:22:32,120 --> 00:22:35,430 в Chrome, який дозволяє, в основному, запустіть наявність на 463 00:22:35,430 --> 00:22:36,450 поточна сторінка. 464 00:22:36,450 --> 00:22:39,420 Це ви знайдете неймовірно корисно, коли ви насправді налагодження і ви 465 00:22:39,420 --> 00:22:42,400 повинні бути, як, що в даний час значення деякої глобальної змінної або що 466 00:22:42,400 --> 00:22:43,910 щось ще? 467 00:22:43,910 --> 00:22:47,620 Це ніби як GDB, за винятком що ви можете насправді 468 00:22:47,620 --> 00:22:51,600 маніпулювати елементи на сторінці з це в набагато легшій формі. 469 00:22:51,600 --> 00:22:55,080 А також це не так, в принципі, перевірити з вами, перш ніж він нічого не робить. 470 00:22:55,080 --> 00:22:58,660 >> Так у той час як, GDB може бути як, ти впевнені, що хочете запустити наступний крок? 471 00:22:58,660 --> 00:22:59,830 Консоль це в реалі. 472 00:22:59,830 --> 00:23:03,690 Так як веб-сторінка є надання і робити все, що він робить, 473 00:23:03,690 --> 00:23:05,720 Рада також працює разом з нею. 474 00:23:05,720 --> 00:23:08,330 І ви можете помістити приписати код в що консоль, яка буде 475 00:23:08,330 --> 00:23:09,260 бути запущена на сторінці. 476 00:23:09,260 --> 00:23:12,190 >> Майк Ріццо: Так, щоб увійти в консоль, Думаю, я повинен коротко 477 00:23:12,190 --> 00:23:13,750 кажучи вже про те, щоб зробити це. 478 00:23:13,750 --> 00:23:17,850 В останні проблеми, які ви можете мати б Хрому елемент огляньте 479 00:23:17,850 --> 00:23:20,440 функції або подання джерела сторінка - 480 00:23:20,440 --> 00:23:23,870 і ті, доступні тільки по праву натиснувши на сторінці або конкретного 481 00:23:23,870 --> 00:23:28,430 елемент і робити або перевірити елемент або подання джерела сторінки. 482 00:23:28,430 --> 00:23:31,190 Ми також можемо отримати доступ до JavaScript Консоль безпосередньо 483 00:23:31,190 --> 00:23:33,630 виборі огляньте елемент. 484 00:23:33,630 --> 00:23:37,930 Тоді ви просто натисніть консоль в правій стороні. 485 00:23:37,930 --> 00:23:41,900 >> Крім того, можна також пройшли у верхньому правому куті, 486 00:23:41,900 --> 00:23:46,820 який відрізали на цьому екрані, де вона має три горизонтальні смуги. 487 00:23:46,820 --> 00:23:52,010 І ви спускаєтеся до інструментів і Потім JavaScript консоль 488 00:23:52,010 --> 00:23:53,240 тут, де можна побачити - 489 00:23:53,240 --> 00:23:54,370 принаймні, на Windows - 490 00:23:54,370 --> 00:23:59,680 ярлик управління перемиканням J. Отже якби ми хотіли, щоб вибрати елемент 491 00:23:59,680 --> 00:24:06,060 в межах цій сторінці, точно так само як я показав перш, ми робимо знак долара відкриті дужок 492 00:24:06,060 --> 00:24:08,180 а потім цитує. 493 00:24:08,180 --> 00:24:11,750 >> Цікава річ, взагалі, одинарні лапки і подвійні лапки 494 00:24:11,750 --> 00:24:12,370 змінний. 495 00:24:12,370 --> 00:24:16,050 Так багато людей просто використовувати один котирування, тому що вони швидше набирати 496 00:24:16,050 --> 00:24:19,780 ніж подвійні лапки, тому що ви не треба утримувати клавішу Shift. 497 00:24:19,780 --> 00:24:21,770 Так що я просто зробити це прямо зараз. 498 00:24:21,770 --> 00:24:24,510 >> Тому я хочу, щоб вибрати щось з класом. 499 00:24:24,510 --> 00:24:27,200 Контейнер, тільки тому, що я знаю, що це те, що на нашій 500 00:24:27,200 --> 00:24:28,740 веб-сторінки прямо зараз. 501 00:24:28,740 --> 00:24:29,520 І я вдарив Enter. 502 00:24:29,520 --> 00:24:31,670 І ми бачимо, що вона вибрала його. 503 00:24:31,670 --> 00:24:34,990 Так він показує, що це повернувся цей об'єкт. 504 00:24:34,990 --> 00:24:36,620 Так що це основний вибір. 505 00:24:36,620 --> 00:24:40,080 Якби ми хотіли насправді працювати з ним, вам доведеться зателефонувати щось 506 00:24:40,080 --> 00:24:43,925 на цьому виборі, який ми отримаємо надалі. 507 00:24:43,925 --> 00:24:49,030 >> ТОМАС Реймерс: Так що просто дивитися на це більш докладно, це нічим не відрізняється 508 00:24:49,030 --> 00:24:52,245 ніж викликів функцій, які ми зробили в C. Ім'я функції тут є 509 00:24:52,245 --> 00:24:52,580 трохи дивно. 510 00:24:52,580 --> 00:24:55,640 Це знак долара. 511 00:24:55,640 --> 00:24:57,010 Це просто ім'я функції. 512 00:24:57,010 --> 00:24:58,810 Там немає нічого особливого в цьому немає. 513 00:24:58,810 --> 00:25:00,450 >> У нас є відкриті дужки. 514 00:25:00,450 --> 00:25:03,880 Тоді, у нас є один аргумент, який в цьому випадку виявляється, рядок, 515 00:25:03,880 --> 00:25:05,680 який є селектором для нього. 516 00:25:05,680 --> 00:25:08,130 І потім, у нас є наш закрита дужка. 517 00:25:08,130 --> 00:25:09,960 Ось і все. 518 00:25:09,960 --> 00:25:11,500 >> Це не так сильно відрізняються. 519 00:25:11,500 --> 00:25:12,900 Хоча, це дійсно виглядає дуже дивно. 520 00:25:12,900 --> 00:25:17,220 І це може бути, свого роду, каменем вказати для багатьох людей. 521 00:25:17,220 --> 00:25:21,460 >> Майк Ріццо: Отже, подібним чином, якщо б ми хотіли , Щоб вибрати елемент, який має ідентифікатор, 522 00:25:21,460 --> 00:25:23,470 тепер ми хочемо, щоб вибрати по ID замість класу. 523 00:25:23,470 --> 00:25:28,080 Було б щось подібне, де ми просто зробити різкий знак для ID. 524 00:25:28,080 --> 00:25:33,576 Таким чином, ми вибору тут все елементи, які мають ID бар. 525 00:25:33,576 --> 00:25:35,400 >> ТОМАС Реймерс: І це поширюється. 526 00:25:35,400 --> 00:25:36,450 Це CSS поширюється. 527 00:25:36,450 --> 00:25:42,260 Так само, як в CSS, ви можете вибрати все Посилання, які мають клас Foo. 528 00:25:42,260 --> 00:25:43,420 Ось, це те ж саме. 529 00:25:43,420 --> 00:25:52,750 >> Ви могли б зробити a.foo, який обиратиме всі посилання з класом харчової. 530 00:25:52,750 --> 00:25:58,860 Ви могли б зробити різкий бар, який буде виберіть посилання з ідентифікатором бар і т. 531 00:25:58,860 --> 00:25:59,770 далі, і так далі. 532 00:25:59,770 --> 00:26:02,120 Будь селектор CSS є допустимим Селектор JQuery. 533 00:26:02,120 --> 00:26:03,370 >> Майк Ріццо: Так. 534 00:26:03,370 --> 00:26:07,996 535 00:26:07,996 --> 00:26:11,460 Отже, тепер давайте перейдемо до трохи маніпуляції, що ми можемо зробити з 536 00:26:11,460 --> 00:26:12,870 наша JQuery. 537 00:26:12,870 --> 00:26:19,280 Так JQuery має певний тип позначень, де ми просто використовувати 538 00:26:19,280 --> 00:26:20,170 точка в кінці. 539 00:26:20,170 --> 00:26:23,340 І ви можете думати про це, як і в С, як ми були різні структур. 540 00:26:23,340 --> 00:26:27,110 І йти в тих структур, ви б використовувати точку, щоб потрапити в них. 541 00:26:27,110 --> 00:26:28,480 >> Це, свого роду, щось подібне. 542 00:26:28,480 --> 00:26:33,570 Тільки тепер у нас є функції в цьому селектор, який ми можемо назвати на ньому. 543 00:26:33,570 --> 00:26:38,640 Так от, найперший приклад Ви можете бачити це селектор CSS. 544 00:26:38,640 --> 00:26:45,290 А в принципі, що це робить це відноситься перший елемент CSS на це 545 00:26:45,290 --> 00:26:46,230 річ, яку ви обрали - 546 00:26:46,230 --> 00:26:47,720 це елемент, який ви обрали - 547 00:26:47,720 --> 00:26:49,290 із значенням цього. 548 00:26:49,290 --> 00:26:55,390 >> ТОМАС Реймерс: Так просто переклад що було б, якщо JQuery, в основному, 549 00:26:55,390 --> 00:26:57,790 просто взяв Foo. 550 00:26:57,790 --> 00:27:05,480 І тоді в CSS сказав, Колір червоний і близько. 551 00:27:05,480 --> 00:27:06,670 Це та ж ідея. 552 00:27:06,670 --> 00:27:08,800 Що це робиться в її виборі всі елементи Foo. 553 00:27:08,800 --> 00:27:10,170 А потім він застосовується. 554 00:27:10,170 --> 00:27:15,884 Начебто, колір власності дорівнює червоний. 555 00:27:15,884 --> 00:27:21,070 >> Майк Ріццо: Аналогічно можна також змінити фактичний зміст, що є 556 00:27:21,070 --> 00:27:24,870 показуючи на HTML сторінки, які дійсно здорово, тому що це означає, що ваш 557 00:27:24,870 --> 00:27:28,095 Тепер веб-сторінки можуть бути повністю динамічний і не повинні бути статичними 558 00:27:28,095 --> 00:27:31,660 Вам роздрукувати за допомогою PHP на самому початку 559 00:27:31,660 --> 00:27:33,320 сторінка завантажується. 560 00:27:33,320 --> 00:27:36,810 Так от, якщо б ми хотіли змінити Фактичний HTML сторінки, ми б зараз 561 00:27:36,810 --> 00:27:43,550 викликати функцію HTML, який потім просто вставки, що ми вказати в 562 00:27:43,550 --> 00:27:45,390 що елемент, який ми обрали. 563 00:27:45,390 --> 00:27:49,810 Так от ми вибравши елемент з клас Foo, а потім кажуть, що це HTML 564 00:27:49,810 --> 00:27:52,200 це тепер привіт світ. 565 00:27:52,200 --> 00:27:55,600 >> ТОМАС Реймерс: І коли ви думаєте про якими корисні додатки 566 00:27:55,600 --> 00:28:00,800 це, це CSS один, перше, що Ви можете почати думати про те, 567 00:28:00,800 --> 00:28:03,070 з точки зору навіть випадають меню. 568 00:28:03,070 --> 00:28:08,350 Ви можете почати робити речі, як, коли користувач наводить курсор на верхній частині 569 00:28:08,350 --> 00:28:11,970 з випадаючого, ви хочете зробити нижня частина видна. 570 00:28:11,970 --> 00:28:12,540 Чи не так? 571 00:28:12,540 --> 00:28:15,610 >> Таким чином, в CSS, у нас є властивості зробити щось видиме. 572 00:28:15,610 --> 00:28:19,330 Такі речі, як дисплей товстої кишки ні зробить його невидимим. 573 00:28:19,330 --> 00:28:21,190 Показати блок буде зробити його видимим. 574 00:28:21,190 --> 00:28:25,860 Або навіть якщо ви хочете піти простішим, вам є такі речі, як видимості рівних 575 00:28:25,860 --> 00:28:27,520 видно, і видимість становить прихована. 576 00:28:27,520 --> 00:28:30,330 577 00:28:30,330 --> 00:28:34,780 >> А ви могли б приступити до здійснення речі як випадають меню право 578 00:28:34,780 --> 00:28:38,410 після отримання через ідею про те, як Ви можете з'ясувати, коли це відкриває, 579 00:28:38,410 --> 00:28:39,850 які ми отримаємо через дуже короткий час. 580 00:28:39,850 --> 00:28:42,160 Але ми можемо почати бачити застосування цього. 581 00:28:42,160 --> 00:28:45,540 У тому ж сенсі, якби ви спробували і здійснювати, скажімо, чат 582 00:28:45,540 --> 00:28:48,620 двигун, і ви хочете, щоб зробити трохи промови міхур придумати, коли у Вас є 583 00:28:48,620 --> 00:28:52,880 отримав нове повідомлення, як тільки ви отримаєте нове повідомлення, ви можете зробити трохи 584 00:28:52,880 --> 00:28:55,890 промови міхур придумати шляхом зміни HTML сторінки, чи не так? 585 00:28:55,890 --> 00:29:00,540 Додавши, що додатковий промови міхур з додатковим текстом на там. 586 00:29:00,540 --> 00:29:01,140 Так? 587 00:29:01,140 --> 00:29:07,750 >> АУДИТОРІЯ: Таким чином, ви б вмонтувати це в HTML код в ніби як 588 00:29:07,750 --> 00:29:10,534 [Нерозбірливості]? 589 00:29:10,534 --> 00:29:12,940 >> Майк Ріццо: Вірно. 590 00:29:12,940 --> 00:29:16,190 Так, ми повернемося до цього в небагато. 591 00:29:16,190 --> 00:29:18,810 Так, це схоже трохи, щоб PHP. 592 00:29:18,810 --> 00:29:21,240 Не зовсім схожі. 593 00:29:21,240 --> 00:29:24,730 >> Хороший відмінність, щоб зробити те, що ця насправді редагування, коли ми редагувати 594 00:29:24,730 --> 00:29:28,480 сторінка, тому що це не буде редагування сам файл, що в даний час 595 00:29:28,480 --> 00:29:31,380 , Що зберігаються на сервері, тому що світ не повинні мати дозвіл 596 00:29:31,380 --> 00:29:32,610 редагувати файли. 597 00:29:32,610 --> 00:29:36,080 Це просто редагування, що знаходиться на сторінці і те, що відображається в 598 00:29:36,080 --> 00:29:36,950 браузер. 599 00:29:36,950 --> 00:29:40,340 Так що якщо ви були, щоб перезавантажити сторінку після, кажуть, видалення щось, як ми 600 00:29:40,340 --> 00:29:44,730 бачити, що ми можемо зробити із закликом видалити, що всього було те знову. 601 00:29:44,730 --> 00:29:48,590 >> ТОМАС Реймерс: Так один спосіб думати про це якщо я комп'ютер і 602 00:29:48,590 --> 00:29:50,170 Майк, начебто, сервер. 603 00:29:50,170 --> 00:29:53,850 Що трапиться, я збираюся запитайте Майка, агов, я можу мати копію 604 00:29:53,850 --> 00:29:54,630 ця веб-сторінка? 605 00:29:54,630 --> 00:29:56,190 І він дасть мені копію. 606 00:29:56,190 --> 00:29:57,430 >> Ні, це не оригінал річ. 607 00:29:57,430 --> 00:29:58,620 Це просто копія. 608 00:29:58,620 --> 00:30:00,450 І то це було б як, про, є JavaScript тут. 609 00:30:00,450 --> 00:30:02,450 Очевидно, що я повинен змінити сторінки, щоб бути, як це. 610 00:30:02,450 --> 00:30:04,250 І я редагування вашу копію. 611 00:30:04,250 --> 00:30:05,920 >> Але це не здійснення фактична копія. 612 00:30:05,920 --> 00:30:08,480 І якби я запитав його знову обновіть сторінку, - 613 00:30:08,480 --> 00:30:10,060 агов, я можу мати інший чисту копію - 614 00:30:10,060 --> 00:30:11,440 він збирається дати мені другий чистовик. 615 00:30:11,440 --> 00:30:14,240 І потім, я збираюся зробити те ж саме як, о, це JS тут, що говорить 616 00:30:14,240 --> 00:30:14,866 редагувати цей. 617 00:30:14,866 --> 00:30:17,460 І я буду продовжувати це робити. 618 00:30:17,460 --> 00:30:20,930 >> Майк Ріццо: Так дійсно класна річ що ви можете зробити з JQuery є 619 00:30:20,930 --> 00:30:24,350 насправді додати різні типи анімацій на свою сторінку. 620 00:30:24,350 --> 00:30:27,440 Я не знаю, якщо ви ще не бачили, де Ви намагаєтеся заливки форму 621 00:30:27,440 --> 00:30:31,250 Інтернеті, і ви не заповните Правильно речі. 622 00:30:31,250 --> 00:30:33,440 Так мало, що ковзає вниз у верхній і каже, що ви 623 00:30:33,440 --> 00:30:34,820 ще не зробили це правильно. 624 00:30:34,820 --> 00:30:36,260 Будь ласка, спробуйте ще раз. 625 00:30:36,260 --> 00:30:37,890 І потім, це може навіть просто ковзати вгору. 626 00:30:37,890 --> 00:30:40,710 >> Виявляється JQuery має вбудовані функції які роблять все, що 627 00:30:40,710 --> 00:30:44,180 анімація дуже, дуже легко. 628 00:30:44,180 --> 00:30:46,750 Так що є першою в'яне з функція, 629 00:30:46,750 --> 00:30:47,710 ви можете зателефонувати на щось. 630 00:30:47,710 --> 00:30:55,650 І це спосіб змінити CSS з цей елемент у жвавій дорозі. 631 00:30:55,650 --> 00:30:58,480 Так воно приймає незалежно елемент ви називаєте це зникати на. 632 00:30:58,480 --> 00:31:03,990 А потім, повільно змінює його непрозорість поки він не стане повністю прозорою. 633 00:31:03,990 --> 00:31:07,330 >> ТОМАС Реймерс: Інший популярний ковзатиме вниз, що зробить 634 00:31:07,330 --> 00:31:08,800 щось з'явитися, зсунувши її вниз. 635 00:31:08,800 --> 00:31:12,840 Таким чином, у разі меню, що випадає, знову, коли ми дізналися, як виявити 636 00:31:12,840 --> 00:31:15,310 коли це було завис над, ви могли б просто сказати цьому дно 637 00:31:15,310 --> 00:31:16,910 частина скотитися зараз. 638 00:31:16,910 --> 00:31:19,270 А потім, здавалося б, зсунувши вниз. 639 00:31:19,270 --> 00:31:22,042 640 00:31:22,042 --> 00:31:26,590 >> Майк Ріццо: І потім, якщо ви просто повинні деякий тип анімації на увазі, що 641 00:31:26,590 --> 00:31:29,080 JQuery не обов'язково забезпечує. 642 00:31:29,080 --> 00:31:32,690 Наприклад, припустимо, що JQuery дійсно забезпечує вас з гіркою 643 00:31:32,690 --> 00:31:33,750 вниз і слайд вгору. 644 00:31:33,750 --> 00:31:36,740 Ну, скажімо, ви хотіли, щоб ковзати щось на лівому фланзі або в від 645 00:31:36,740 --> 00:31:39,880 право ніби як CS50 головна сторінка робить щоразу, коли 646 00:31:39,880 --> 00:31:42,080 ви йдете на нову панель. 647 00:31:42,080 --> 00:31:45,030 Потім ви повинні, ймовірно, доведеться реалізувати його самостійно, використовуючи 648 00:31:45,030 --> 00:31:49,310 анімувати функцію в JQuery. 649 00:31:49,310 --> 00:31:51,350 >> Отже, подібним чином, ви просто живу. 650 00:31:51,350 --> 00:31:55,850 А потім, в ньому він приймає словник з різних значеннях 651 00:31:55,850 --> 00:31:57,340 що ти повинен пройти. 652 00:31:57,340 --> 00:32:06,960 Так от, якщо ми хочемо, щоб оживити елемент Foo таким чином, що його ширина або 653 00:32:06,960 --> 00:32:10,880 розширюється або стискається до 80 пікселів, залежно від того, що це в даний час. 654 00:32:10,880 --> 00:32:14,100 Ми б просто передати, що, як аргумент в ньому. 655 00:32:14,100 --> 00:32:18,060 >> Анімація також є деякі інші аргументи що ви могли б передати його, наприклад, 656 00:32:18,060 --> 00:32:21,150 швидкість анімації що ви хочете, щоб дати його. 657 00:32:21,150 --> 00:32:26,220 А для цього, я б просто сказати, швидко Google JQuery анімації. 658 00:32:26,220 --> 00:32:31,710 А потім, в результаті чого до цієї сторінки, ви можете см. він отримав купу різних 659 00:32:31,710 --> 00:32:33,560 властивості, які ви можете передати його. 660 00:32:33,560 --> 00:32:35,990 >> І я закликаю вас - щоразу, коли ви приходите через те, що ви робили не 661 00:32:35,990 --> 00:32:40,390 знають або просто хочете дізнатися більше про Зокрема метод, який можна назвати 662 00:32:40,390 --> 00:32:41,270 на щось - 663 00:32:41,270 --> 00:32:44,440 Просто Google це. JQuery є надзвичайно добре документовані. 664 00:32:44,440 --> 00:32:49,140 І часто є багато приклади, які вони надають для вас. 665 00:32:49,140 --> 00:32:52,470 Якщо ми перейдіть вниз - 666 00:32:52,470 --> 00:32:53,720 шлях вниз - 667 00:32:53,720 --> 00:32:57,660 668 00:32:57,660 --> 00:32:59,190 що ми можемо використовувати, а також. 669 00:32:59,190 --> 00:33:02,480 >> Знову ж, коли розробник фактично йде через проблеми укладення 670 00:33:02,480 --> 00:33:05,810 бібліотека, вони зазвичай хочуть хтось його використовувати. 671 00:33:05,810 --> 00:33:09,400 Так поряд збирається бути документація. 672 00:33:09,400 --> 00:33:12,270 І, що документація, як правило, бути дізнатися на сторінці проекту, який 673 00:33:12,270 --> 00:33:14,970 чому ми дали вам, що оригінальний сайт в початок, який з'єднує вас з 674 00:33:14,970 --> 00:33:18,080 Сторінки проекту, щоб ви могли бачити, що документацію. 675 00:33:18,080 --> 00:33:22,670 >> Як правило, сторінка проекту в разі з [нерозбірливо], він сказав вам в 676 00:33:22,670 --> 00:33:23,940 імена класів. 677 00:33:23,940 --> 00:33:27,250 У разі JavaScript, це дає Ви назву функцій. 678 00:33:27,250 --> 00:33:35,310 До речі, якщо ми прокрутки вгору до вершини, швидкий цікаво відзначити на функцій 679 00:33:35,310 --> 00:33:39,080 всякий раз, коли ви бачите функцію реалізований як це з важко 680 00:33:39,080 --> 00:33:43,800 дужки в середині, це означає, що це властивість є необов'язковим. 681 00:33:43,800 --> 00:33:44,750 Просто голови. 682 00:33:44,750 --> 00:33:47,350 Я бачив багато питань про це. 683 00:33:47,350 --> 00:33:50,370 >> І ось ми бачимо, що живої приймає властивості 684 00:33:50,370 --> 00:33:51,800 в якості необхідного аргументу. 685 00:33:51,800 --> 00:33:54,870 А все інше не є обов'язковим. 686 00:33:54,870 --> 00:33:56,136 Примітка боку - 687 00:33:56,136 --> 00:33:58,090 Ви можете думати про це, свого роду з, як людина сторінок. 688 00:33:58,090 --> 00:34:04,275 Довідкові сторінки документації для C і для багатьох інших речей, а також. 689 00:34:04,275 --> 00:34:11,020 >> Майк Ріццо: Таким чином, ми дізналися, як змінити різні CSS на сторінці, 690 00:34:11,020 --> 00:34:14,040 оживити його, і зняти додати HTML. 691 00:34:14,040 --> 00:34:16,889 Але один з дійсно самий потужний речі про JavaScript 692 00:34:16,889 --> 00:34:18,270 і особливо JQuery - 693 00:34:18,270 --> 00:34:22,570 що це дозволяє зробити, це відповісти на різні елементи, які відбуваються. 694 00:34:22,570 --> 00:34:25,380 Наприклад, тут ми маємо обробник події. 695 00:34:25,380 --> 00:34:28,210 І це просто означає, всякий раз, коли це Подія відбувається, ми з нею в 696 00:34:28,210 --> 00:34:29,280 певним чином. 697 00:34:29,280 --> 00:34:35,159 >> Так от, загальний подія JQuery обробник є точка на. 698 00:34:35,159 --> 00:34:42,949 А потім, перше, що ви надали це те, що подія це має 699 00:34:42,949 --> 00:34:43,810 слухати для. 700 00:34:43,810 --> 00:34:45,610 Так от, це клацання, що ми чекаємо. 701 00:34:45,610 --> 00:34:49,250 >> ТОМАС Реймерс: З іншого боку, у вас є при наведенні, який є дуже популярним. 702 00:34:49,250 --> 00:34:52,000 Отже, повернемося до моєї випадає ідеї меню. 703 00:34:52,000 --> 00:34:54,239 Ви повинні були б верхню один на наведенні курсору миші. 704 00:34:54,239 --> 00:34:56,096 І тоді ви могли б змінити цю ситуацію. 705 00:34:56,096 --> 00:34:56,830 >> Майк Ріццо: Вірно. 706 00:34:56,830 --> 00:35:01,680 А потім, коли це станеться, це просто виконує цю функцію, що ми даємо йому 707 00:35:01,680 --> 00:35:05,080 як аргумент, і що він попереджає привіт або привіт. 708 00:35:05,080 --> 00:35:08,900 >> ТОМАС Реймерс: Так у випадку JavaScript, це місце, де ми повинні 709 00:35:08,900 --> 00:35:12,970 видалити себе від С. Ми можемо насправді прийняти функції як аргументи. 710 00:35:12,970 --> 00:35:15,940 І є багато дійсно складні способи зробити це. 711 00:35:15,940 --> 00:35:17,940 Ми збираємося сприяти в одну сторону, що ви можете визначити 712 00:35:17,940 --> 00:35:19,270 функціонувати прямо там. 713 00:35:19,270 --> 00:35:22,540 >> Так що, коли ви просите функції як параметр, ви в основному тільки 714 00:35:22,540 --> 00:35:24,500 збирається визначити функцію на місці. 715 00:35:24,500 --> 00:35:27,090 І те, як ви визначаєте функцію в JavaScript є ви 716 00:35:27,090 --> 00:35:28,820 буквально сказати функцію. 717 00:35:28,820 --> 00:35:30,130 Потім, як правило, назва функції. 718 00:35:30,130 --> 00:35:32,510 Але ми ніколи не будемо посилатися на ця функція знову. 719 00:35:32,510 --> 00:35:34,040 Таким чином, ми залишити його безіменним. 720 00:35:34,040 --> 00:35:40,440 >> Тоді дужки, то фігурні дужки, а потім код всередині цього. 721 00:35:40,440 --> 00:35:42,540 Таким чином, ми розуміємо, це може бути трохи заплутаним. 722 00:35:42,540 --> 00:35:45,180 Таким чином, ми даємо вам загальний вигляд що обробник подій виглядає 723 00:35:45,180 --> 00:35:47,790 нижче, що на події. 724 00:35:47,790 --> 00:35:50,598 А потім, ваш код всередині цього. 725 00:35:50,598 --> 00:35:52,478 >> Майк Ріццо: Чи є питання з цього приводу? 726 00:35:52,478 --> 00:35:54,818 Це може бути трохи заплутаним, в перший раз ви його бачите. 727 00:35:54,818 --> 00:35:57,550 >> ТОМАС Реймерс: Ви насправді хочете відкрити файл і показати їм деякі 728 00:35:57,550 --> 00:35:58,155 JQuery прямо зараз? 729 00:35:58,155 --> 00:35:59,853 >> Майк Ріццо: Так, давайте зробимо це. 730 00:35:59,853 --> 00:36:00,256 ОК. 731 00:36:00,256 --> 00:36:02,490 >> ТОМАС Реймерс: Так що тепер ми в приладі. 732 00:36:02,490 --> 00:36:07,730 І те, що ми зробили, ми прийняли свобода створення як в index.html 733 00:36:07,730 --> 00:36:10,100 файл, який відображає посилання на файл JavaScript. 734 00:36:10,100 --> 00:36:12,880 І чи можемо ми відкрити - 735 00:36:12,880 --> 00:36:15,170 да. 736 00:36:15,170 --> 00:36:16,630 Ну, це робить дві речі. 737 00:36:16,630 --> 00:36:18,350 >> Перший це посилання на файл JavaScript. 738 00:36:18,350 --> 00:36:21,250 І ми побачимо, що тут. 739 00:36:21,250 --> 00:36:25,340 Ми бачимо, що в голові HTML документ, зокрема. 740 00:36:25,340 --> 00:36:28,260 Таким чином, ви побачите, що там ми, в основному, кажуть SRC, 741 00:36:28,260 --> 00:36:29,590 яка виступає за джерелом. 742 00:36:29,590 --> 00:36:30,630 І це URL. 743 00:36:30,630 --> 00:36:32,700 >> Тому тут можна сказати, що ми включені JQuery. 744 00:36:32,700 --> 00:36:34,290 І ми також включили скрипти. 745 00:36:34,290 --> 00:36:40,630 Інший спосіб включити JavaScript є що можна включити вбудований скрипт 746 00:36:40,630 --> 00:36:44,600 Тег, як у нас на дні, де він говорить типу сценарій текст JavaScript. 747 00:36:44,600 --> 00:36:46,960 >> Так ми говоримо, слухати, ми про включати сценарій. 748 00:36:46,960 --> 00:36:51,890 І тип цього сценарію є JavaScript, який є одним з видів тексту. 749 00:36:51,890 --> 00:36:52,550 Дуже просто. 750 00:36:52,550 --> 00:36:56,490 >> Майк Ріццо: Так що це, свого роду, потрапляє в ваше запитання про те, як ми включаємо 751 00:36:56,490 --> 00:37:02,340 JavaScript в наших файлах, тому що, коли ми що PHP, ми зробити щось на зразок цього. 752 00:37:02,340 --> 00:37:07,570 І потім, є свої PHP функції - скажімо запаси робити 753 00:37:07,570 --> 00:37:09,150 щось з цим - 754 00:37:09,150 --> 00:37:10,490 йде туди. 755 00:37:10,490 --> 00:37:13,860 Тим не менше, тепер у нас є теги сценарію що ми даємо його, що насправді 756 00:37:13,860 --> 00:37:19,470 частиною самого HTML, тому що це не прикидається бути HTML файл подобається 757 00:37:19,470 --> 00:37:25,070 знаходиться в PHP тому що якщо ви насправді йти в і подивитися на вихідний код сторінки, 758 00:37:25,070 --> 00:37:28,430 ви побачите ці теги сценарію там з JavaScript, пов'язаний з 759 00:37:28,430 --> 00:37:29,800 їм у цьому. 760 00:37:29,800 --> 00:37:31,760 >> Отже, якщо ми хочемо написати деякий наявність - 761 00:37:31,760 --> 00:37:37,110 давайте просто скажемо, ми хотіли змінити тіло тому що зараз у мене немає 762 00:37:37,110 --> 00:37:40,020 будь-які інші теги, що я можу дійсно редагувати крім тіла. 763 00:37:40,020 --> 00:37:42,450 Давайте просто скажемо, що я хотів змінити CSS цього. 764 00:37:42,450 --> 00:37:46,190 Тому ми будемо йти вперед і зміни колір нього на червоний. 765 00:37:46,190 --> 00:37:47,380 >> Так що я зберегти файл. 766 00:37:47,380 --> 00:37:52,700 Давайте повернемося до нашої веб-сторінці, поновлення, і він робить це автоматично 767 00:37:52,700 --> 00:37:55,920 тому що це не здавалося, що це чекали взагалі, тому що ми не слухали 768 00:37:55,920 --> 00:37:59,450 для події або щось подібне. 769 00:37:59,450 --> 00:38:02,800 >> ТОМАС Реймерс: Так що, якщо ми повернемося до того, що подати зокрема - HTML, 770 00:38:02,800 --> 00:38:04,710 Файл - Що ви збираєтеся щоб побачити це у нас є - 771 00:38:04,710 --> 00:38:06,810 пам'ятати, що це буде завантажений, роду, в хронологічному порядку. 772 00:38:06,810 --> 00:38:09,910 Тому у нас є перший керівник. він завантажує ці два файли. 773 00:38:09,910 --> 00:38:10,800 Тоді ми йдемо до тіла. 774 00:38:10,800 --> 00:38:11,640 І ми бачимо, привіт світ. 775 00:38:11,640 --> 00:38:13,030 Так ми надаємо привіт світ. 776 00:38:13,030 --> 00:38:15,240 >> І те останнє, що у нас є буде у нас є тег сценарію. 777 00:38:15,240 --> 00:38:20,880 Так він працює тег сценарію, тому що це не кажу це, щоб чекати. 778 00:38:20,880 --> 00:38:24,700 І це саме основне спосіб запустити JavaScript. 779 00:38:24,700 --> 00:38:29,200 >> З урахуванням сказаного, ви можете покласти сценарій помітити в заголовку просто 780 00:38:29,200 --> 00:38:31,240 показати цю точку? 781 00:38:31,240 --> 00:38:34,450 782 00:38:34,450 --> 00:38:35,700 І запустити це. 783 00:38:35,700 --> 00:38:38,880 784 00:38:38,880 --> 00:38:41,070 Ми збираємося відзначити, що це не змінити колір. 785 00:38:41,070 --> 00:38:44,210 І це одна з проблем JavaScript є те, що речі завантажені 786 00:38:44,210 --> 00:38:45,930 в хронологічному порядку. 787 00:38:45,930 --> 00:38:49,750 >> Так в той час, що код втік, ми вибрали - 788 00:38:49,750 --> 00:38:52,530 повернутися - 789 00:38:52,530 --> 00:38:53,670 тіло тега. 790 00:38:53,670 --> 00:38:57,560 Тег тіло ще не існує, тому що JavaScript є відповідно до HTML. 791 00:38:57,560 --> 00:39:01,790 Таким чином, браузер, як виберіть тіла. 792 00:39:01,790 --> 00:39:02,760 Там немає такого поняття, ще. 793 00:39:02,760 --> 00:39:03,600 Таким чином, ми можемо ігнорувати це. 794 00:39:03,600 --> 00:39:05,330 І ми продовжуємо. 795 00:39:05,330 --> 00:39:07,200 >> А потім ми визначаємо тіло тега. 796 00:39:07,200 --> 00:39:09,670 Але це ніколи не оновлюється. 797 00:39:09,670 --> 00:39:12,560 Тому, коли ви реалізуєте сценарій теги, переконайтеся, що ви помістіть 798 00:39:12,560 --> 00:39:15,502 після тега тіла. 799 00:39:15,502 --> 00:39:16,820 Наступний слайд. 800 00:39:16,820 --> 00:39:17,830 >> Майк Ріццо: ОК. 801 00:39:17,830 --> 00:39:19,330 Таким чином, ми змінили щось. 802 00:39:19,330 --> 00:39:21,910 Але це не було схоже, що відповіли на нам взагалі, тому що це тільки частково 803 00:39:21,910 --> 00:39:24,150 зробив це, як тільки він завантажується сторінку. 804 00:39:24,150 --> 00:39:27,700 Так що тепер, замість того, щоб робити це, то чому не ми додаємо обробник події. 805 00:39:27,700 --> 00:39:31,020 >> Так що давайте робити щось до тіла знову. 806 00:39:31,020 --> 00:39:33,490 І скажемо, ми робимо це на - 807 00:39:33,490 --> 00:39:34,500 натисніть. 808 00:39:34,500 --> 00:39:35,750 Ми додамо функцію. 809 00:39:35,750 --> 00:39:38,270 810 00:39:38,270 --> 00:39:39,690 >> Зміна Давайте: Tomas Реймерс його колір на червоний знову. 811 00:39:39,690 --> 00:39:40,000 Чому ні? 812 00:39:40,000 --> 00:39:41,680 >> Майк Ріццо: Так, давайте зміни його «колір на червоний знову. 813 00:39:41,680 --> 00:39:46,310 814 00:39:46,310 --> 00:39:46,900 Добре. 815 00:39:46,900 --> 00:39:48,480 Так що давайте перезавантажте сторінку. 816 00:39:48,480 --> 00:39:49,530 ОК, ми бачимо - 817 00:39:49,530 --> 00:39:52,290 як і очікувалося, він не почервоніє ще. 818 00:39:52,290 --> 00:39:53,610 Але тоді ми можемо йти вперед і клацніть по ньому. 819 00:39:53,610 --> 00:39:54,270 >> ТОМАС Реймерс: І це стає червоним. 820 00:39:54,270 --> 00:39:56,090 >> Майк Ріццо: І це робить червоніють, як очікувалося. 821 00:39:56,090 --> 00:39:59,010 >> ТОМАС Реймерс: І ми бачимо, як ми можемо почати будувати дуже основним 822 00:39:59,010 --> 00:40:00,170 взаємодія. 823 00:40:00,170 --> 00:40:03,850 Інші речі, які ми могли б хотіти зробити, це, якщо ми не хочемо, щоб зробити тіло 824 00:40:03,850 --> 00:40:07,230 Колір червоний, давайте зробимо HTML фон червоний колір. 825 00:40:07,230 --> 00:40:08,480 Саме так це те ж саме CSS. 826 00:40:08,480 --> 00:40:19,960 827 00:40:19,960 --> 00:40:23,320 >> І коли ми змінити його, ми можемо побачити це дуже драматично ефект зміни 828 00:40:23,320 --> 00:40:25,510 вся сторінка. 829 00:40:25,510 --> 00:40:29,100 Отже, ще раз, якщо ви реалізуєте речі, Ви можете мати один компонент 830 00:40:29,100 --> 00:40:30,150 який призначений для клацнули. 831 00:40:30,150 --> 00:40:32,710 Скажімо кнопку Exit і Весь інший компонент, 832 00:40:32,710 --> 00:40:33,830 який призначений, щоб відповісти. 833 00:40:33,830 --> 00:40:35,755 Таким чином, ви б видалити вікно коли це станеться. 834 00:40:35,755 --> 00:40:39,341 835 00:40:39,341 --> 00:40:40,700 >> Майк Ріццо: ОК. 836 00:40:40,700 --> 00:40:42,200 Просто як приклад - 837 00:40:42,200 --> 00:40:44,400 ви не отримаєте, щоб побачити це раніше - 838 00:40:44,400 --> 00:40:47,500 Я просто покажу вам, що це виглядає подобається, коли ми щось приховати. 839 00:40:47,500 --> 00:40:52,220 Так що я буду йти вперед і не ковзати вгору. 840 00:40:52,220 --> 00:40:54,440 >> ТОМАС Реймерс: Хочете, щоб обернути, що в Тип пункту, перш ніж ми це зробити? 841 00:40:54,440 --> 00:40:55,132 >> Майк Ріццо: ОК. 842 00:40:55,132 --> 00:40:59,135 Так, чому б нам не зробити це просто так ми можемо вибрати його трохи більше. 843 00:40:59,135 --> 00:41:00,490 >> ТОМАС Реймерс: І давайте дати йому клас. 844 00:41:00,490 --> 00:41:01,740 >> Майк Ріццо: Так. 845 00:41:01,740 --> 00:41:06,575 846 00:41:06,575 --> 00:41:09,920 Отже, давайте подивимося. 847 00:41:09,920 --> 00:41:14,820 Замість вибору фактичне тіло Тепер, я просто виберіть все з 848 00:41:14,820 --> 00:41:18,780 Клас привіт, яку ми тут просто є одна річ. 849 00:41:18,780 --> 00:41:20,900 Таким чином, ми не повинні турбуватися про це. 850 00:41:20,900 --> 00:41:23,080 >> Так що я буду оновлювати його. 851 00:41:23,080 --> 00:41:24,230 Я буду йти вперед і клацніть по ньому. 852 00:41:24,230 --> 00:41:27,890 І це, свого роду, зробив дивний Slide до річ, яка не дивився, що 853 00:41:27,890 --> 00:41:29,580 привабливим. 854 00:41:29,580 --> 00:41:31,060 Як правило, вони виглядають досить приємно. 855 00:41:31,060 --> 00:41:32,720 Я думаю, це - для деяких Причина - немає. 856 00:41:32,720 --> 00:41:36,640 Я просто зробити зникати так, ви можете подивитися на це теж. 857 00:41:36,640 --> 00:41:38,100 Набагато приємніше. 858 00:41:38,100 --> 00:41:41,150 >> І потім, якщо я відкриваю наявність втішити знову, і ми хочемо побачити, що 859 00:41:41,150 --> 00:41:43,900 він виглядає, коли ми зникати його дюйма 860 00:41:43,900 --> 00:41:46,920 Тепер, я просто зателефонуйте зникати на цьому. 861 00:41:46,920 --> 00:41:48,830 І вона зникає масштаб 862 00:41:48,830 --> 00:41:56,150 >> Точно так само ми могли насправді також проходять Аргумент зникати або зникати, 863 00:41:56,150 --> 00:41:57,640 який є, свого роду, швидкість його. 864 00:41:57,640 --> 00:42:02,220 Так що давайте йти вперед і сказати, що ми хочемо це йти повільно зникати дюйма 865 00:42:02,220 --> 00:42:04,250 Так що я думаю це все ще здавалося досить швидко. 866 00:42:04,250 --> 00:42:06,180 Але це було повільніше, ніж раніше. 867 00:42:06,180 --> 00:42:10,340 >> ТОМАС Реймерс: І якщо ви хочете, щоб знайти більше про ці речі, знову ж таки, 868 00:42:10,340 --> 00:42:13,410 просто піти в документації JQuery, які ми дали вам, і читати 869 00:42:13,410 --> 00:42:13,735 через них. 870 00:42:13,735 --> 00:42:15,790 Вони документують свої функції неймовірно добре. 871 00:42:15,790 --> 00:42:18,622 872 00:42:18,622 --> 00:42:19,570 >> Майк Ріццо: ОК. 873 00:42:19,570 --> 00:42:21,560 Так що я думаю давайте повернемося до цього. 874 00:42:21,560 --> 00:42:23,490 І ми можемо говорити про нашу останній сторінці. 875 00:42:23,490 --> 00:42:24,690 Ну, ми можемо закінчити з Bootstrap. 876 00:42:24,690 --> 00:42:27,140 І тоді ми будемо відкрити його на деякі питання. 877 00:42:27,140 --> 00:42:30,180 І якщо ви, хлопці, є які-небудь ідеї, що Ви хотіли б, щоб спробувати кинути і подивитися, 878 00:42:30,180 --> 00:42:34,150 якщо ми можемо реалізувати їх з JavaScript швидко. 879 00:42:34,150 --> 00:42:37,890 >> Так насправді швидко про початкового завантаження, який автоматично включені в 880 00:42:37,890 --> 00:42:41,700 ваша остання проблема встановити в папці CSS а насправді пов'язані з у вашому 881 00:42:41,700 --> 00:42:43,190 header.php. 882 00:42:43,190 --> 00:42:46,740 Таким чином, ви могли б додати класи, визначені в Bootstrap до нього. 883 00:42:46,740 --> 00:42:50,490 І це було б автоматично стилі ті речі, відповідно. 884 00:42:50,490 --> 00:42:54,550 >> ТОМАС Реймерс: Так початкового завантаження є дуже чарівна річ, розроблений людей 885 00:42:54,550 --> 00:42:55,340 на Twitter. 886 00:42:55,340 --> 00:42:57,230 І те, що вона повинна була зробити, було - 887 00:42:57,230 --> 00:43:00,740 перед веб-сайти були дійсно важко зробити добре виглядати, особливо коли у нас були 888 00:43:00,740 --> 00:43:02,200 багато спільних компонентів. 889 00:43:02,200 --> 00:43:04,770 Так багато кнопок на веб виглядали однаково. 890 00:43:04,770 --> 00:43:08,960 >> Багато текстових полів можуть бути зроблені виглядати краще, ніж стандартний текст 891 00:43:08,960 --> 00:43:13,620 полі ви, напевно, знаєте з дійсно старі веб-сайти або дійсно погано зробив 892 00:43:13,620 --> 00:43:18,210 веб-сайти, які просто виглядають як буквальне текстові поля без будь-яких вигляді тексту 893 00:43:18,210 --> 00:43:21,190 тінь або будь-який вид хороший контуром. 894 00:43:21,190 --> 00:43:24,540 Так що Бутстреп зробив, він сказав, ну, У нас є багато спільних стилів. 895 00:43:24,540 --> 00:43:28,210 Чому б нам не зробити один загальний набір CSS і загальний набір JavaScript як 896 00:43:28,210 --> 00:43:32,210 добре, що може укладати все як є, а які може дати людям такі речі, як падіння 897 00:43:32,210 --> 00:43:34,610 вниз меню, які можуть дати людям речі, як модальностей. 898 00:43:34,610 --> 00:43:38,580 >> Модальні те, що спливає на сторінці всякий раз, коли це, строго кажучи, 899 00:43:38,580 --> 00:43:41,090 щось, що перешкоджає подальшому взаємодія до вас 900 00:43:41,090 --> 00:43:43,110 взаємодіяти з ним. 901 00:43:43,110 --> 00:43:45,820 Щось подібне, ви впевнені, , Що хочете видалити цю річ? 902 00:43:45,820 --> 00:43:49,100 Ви не можете дійсно зробити що-небудь ще поки ви не сказати так чи ні. 903 00:43:49,100 --> 00:43:52,720 >> Знадобилося всього цього, і це упаковано його разом і сказав, тут ми йдемо. 904 00:43:52,720 --> 00:43:54,630 Тепер люди можуть використовувати це. 905 00:43:54,630 --> 00:43:56,830 І ви можете знайти його на в getbootstrap.com. 906 00:43:56,830 --> 00:44:00,480 Було автоматично включені в ваша остання проблема встановити. 907 00:44:00,480 --> 00:44:04,160 І ви більше, ніж можете використовувати його на своєму остаточному проекті. 908 00:44:04,160 --> 00:44:06,950 І якщо ви хочете слідувати, що посиланням, щоб отримати Bootstrap. 909 00:44:06,950 --> 00:44:10,590 910 00:44:10,590 --> 00:44:15,700 >> Ви побачите тут є BootStrap CSS сайт. 911 00:44:15,700 --> 00:44:16,860 Ви побачите Bootstrap. 912 00:44:16,860 --> 00:44:20,450 І якщо ви прокрутіть вниз, ви побачите як завантажити його, як 913 00:44:20,450 --> 00:44:21,900 встановити його, і так далі. 914 00:44:21,900 --> 00:44:24,700 >> Майк Ріццо: І ви також можете, що цікаво, налаштувати його на 915 00:44:24,700 --> 00:44:27,770 бути будь-який вид теми що ви хочете. 916 00:44:27,770 --> 00:44:31,270 Я знаю, що те, що я зробив для мого Остаточний проект, коли я взяв клас 917 00:44:31,270 --> 00:44:32,050 був налаштувати його. 918 00:44:32,050 --> 00:44:34,540 Інший варіант початкового завантаження, що було іншу колірну схему і 919 00:44:34,540 --> 00:44:36,700 різні форми деякі різні речі. 920 00:44:36,700 --> 00:44:38,250 Тому я закликаю вас, щоб грати з цим. 921 00:44:38,250 --> 00:44:39,440 Це забавно робити. 922 00:44:39,440 --> 00:44:43,230 >> ТОМАС Реймерс: Дивлячись у верхній знову ж, це дуже схоже на Font 923 00:44:43,230 --> 00:44:44,970 Відмінний сайт. 924 00:44:44,970 --> 00:44:47,810 Багато документації розпочнеться щоб здатися схожими, коли ви 925 00:44:47,810 --> 00:44:48,940 бачив достатньо. 926 00:44:48,940 --> 00:44:51,260 Так от у нас є CSS компонентом цього. 927 00:44:51,260 --> 00:44:53,540 І ви побачите, як це можете стиль речі. 928 00:44:53,540 --> 00:44:56,780 Так що якщо ви клацніть на столах, наприклад, ви можете миттєво зробити 929 00:44:56,780 --> 00:45:01,710 таблиця досить простим додаванням клас таблиці до нього. 930 00:45:01,710 --> 00:45:03,150 >> Ті ж речі для кнопок. 931 00:45:03,150 --> 00:45:12,140 Якщо ви просто додати клас BTN і BTN за умовчанням або BTN первинний, ви можете 932 00:45:12,140 --> 00:45:16,240 отримати будь-яку з цих кнопок з цими попередньо зроблених стилів. 933 00:45:16,240 --> 00:45:18,570 І потім, якщо ви шукаєте щось більш складне, ніж просто 934 00:45:18,570 --> 00:45:24,100 рестайлінгу, що ж уже є, більш на вкладка JavaScript по верхній ми 935 00:45:24,100 --> 00:45:25,120 є купа компонентів. 936 00:45:25,120 --> 00:45:30,410 >> Так от у нас переходи, модальності, меню, що випадає, вкладок і спливаючі підказки. 937 00:45:30,410 --> 00:45:35,530 Підказка те, що спливає під вашим миші при наведенні на щось. 938 00:45:35,530 --> 00:45:40,280 Popovers, оповіщення, кнопки, збірно-розбірні акордеони те, що 939 00:45:40,280 --> 00:45:41,190 вони зазвичай називають. 940 00:45:41,190 --> 00:45:43,045 Каруселі, які фліп через, наприклад, зображень. 941 00:45:43,045 --> 00:45:52,190 942 00:45:52,190 --> 00:45:54,840 >> Так що ті компоненти бутстраповскіх. 943 00:45:54,840 --> 00:45:57,620 Я хотів би закликати вас високо піти подивитися на них. 944 00:45:57,620 --> 00:46:01,780 Там в компонент JavaScript і компонент CSS. 945 00:46:01,780 --> 00:46:03,880 Не соромтеся використовувати їх як хочете. 946 00:46:03,880 --> 00:46:06,730 Ми не збираємося йти занадто багато в них тому що ми відчуваємо в документації 947 00:46:06,730 --> 00:46:09,360 дійсно добре зроблено. 948 00:46:09,360 --> 00:46:10,540 І так. 949 00:46:10,540 --> 00:46:14,500 Чи є у вас питання з цього приводу? 950 00:46:14,500 --> 00:46:19,430 >> Майк Ріццо: Так як насправді швидко сторона, дизайн цієї веб-сторінці, що 951 00:46:19,430 --> 00:46:21,830 ми швидко зібрали для ця презентація 952 00:46:21,830 --> 00:46:24,290 насправді робиться за допомогою завантаження. 953 00:46:24,290 --> 00:46:27,810 Як ви можете бачити, коли ми натисніть на них різні вкладки, ми ніколи не фактично 954 00:46:27,810 --> 00:46:30,750 залишаючи цю поточну сторінку index.html. 955 00:46:30,750 --> 00:46:36,400 Так що у нас є це різні діви протягом цього index.html. 956 00:46:36,400 --> 00:46:39,610 А потім, коли ми натисніть відрізняється Вкладка, це просто зміна 957 00:46:39,610 --> 00:46:41,590 які своє показ. 958 00:46:41,590 --> 00:46:47,390 >> Так що, відповідно, позиціонує їх, змінює HTML сторінки, так що 959 00:46:47,390 --> 00:46:52,330 вкладка ток позначений як активний, так виявляється по-іншому і зовнішній вигляд 960 00:46:52,330 --> 00:46:52,820 дійсно хороший. 961 00:46:52,820 --> 00:46:57,260 >> ТОМАС Реймерс: Так що все було зроблено без нас писати практично будь-які CSS. 962 00:46:57,260 --> 00:47:01,440 Ми також бачимо, заголовок у верхній, якій кольори нами. 963 00:47:01,440 --> 00:47:04,800 Але фактичне поставивши його на верхня частина сторінки і зробити 964 00:47:04,800 --> 00:47:06,660 це сувій був початкового завантаження. 965 00:47:06,660 --> 00:47:09,720 А потім навіть для іншої бібліотеки - це не один ми говорили про але 966 00:47:09,720 --> 00:47:11,580 Ви можете Google, якщо ви хочете. 967 00:47:11,580 --> 00:47:15,130 Це називається prettify.js. 968 00:47:15,130 --> 00:47:20,650 І це буде Підсвічування синтаксису коду для вас, використовуючи як CSS і JavaScript. 969 00:47:20,650 --> 00:47:23,480 970 00:47:23,480 --> 00:47:27,070 >> Останнє, що ми хочемо говорити про перш, ніж ми випустити вас з в 971 00:47:27,070 --> 00:47:30,620 Світ подивитися в бібліотеках, щоб з'ясувати, як їх використовувати і, сподіваюся, 972 00:47:30,620 --> 00:47:34,640 читати документацію і знайти те, що вам Необхідність в тому, як знайти бібліотеки. 973 00:47:34,640 --> 00:47:37,000 Таким чином, перший є ми просто штовхатиме Google. 974 00:47:37,000 --> 00:47:37,810 Відразу Google. 975 00:47:37,810 --> 00:47:41,150 >> Це буквально те, що ми робимо, коли ми потрібно щось робити, ми Google. 976 00:47:41,150 --> 00:47:44,730 Є бібліотека JavaScript, що дозволяє мені керувати часом в 977 00:47:44,730 --> 00:47:45,400 корисний спосіб? 978 00:47:45,400 --> 00:47:49,510 Так що, якщо я знаю, що який-небудь користувач створення рахунки тут, і це 979 00:47:49,510 --> 00:47:53,010 поточний час, як я можу вирахувати Різниця з що без того, щоб 980 00:47:53,010 --> 00:47:55,020 розрахувати його самостійно? 981 00:47:55,020 --> 00:47:59,630 Так що це насправді звичайна справа, JavaScript бібліотека часу. 982 00:47:59,630 --> 00:48:02,440 І ось ми, Moment.js-- один з найпопулярніших. 983 00:48:02,440 --> 00:48:06,530 >> Якщо нам потрібна бібліотека для маніпулювання щось на зразок кольору, щоб мати можливість 984 00:48:06,530 --> 00:48:08,650 генерувати купу випадкових кольорів - 985 00:48:08,650 --> 00:48:10,660 можливо, щоб генерувати стиль або щось - 986 00:48:10,660 --> 00:48:13,480 ми могли Google щось на зразок JavaScript колір бібліотека. 987 00:48:13,480 --> 00:48:15,620 І я впевнений, що ми б спливаюче вікно з Тисяча і одна з них. 988 00:48:15,620 --> 00:48:18,290 989 00:48:18,290 --> 00:48:21,410 Ви завжди можете прочитати їх. 990 00:48:21,410 --> 00:48:24,610 >> Так більшість речей - коли ви їх знайдете - збираються бути розміщений на одному з 991 00:48:24,610 --> 00:48:25,920 сайти, які приймають код. 992 00:48:25,920 --> 00:48:26,960 Вони кілька популярні з них. 993 00:48:26,960 --> 00:48:30,870 Найпопулярніший, за безумовно, є github.com. 994 00:48:30,870 --> 00:48:35,300 І якщо ви йдете в GitHub це насправді де було організовано Нормалізувати. 995 00:48:35,300 --> 00:48:36,950 Так що якщо ви хочете, щоб повернутися до того. 996 00:48:36,950 --> 00:48:38,135 Покажіть їм, що. 997 00:48:38,135 --> 00:48:40,516 >> Майк Ріццо: А що насправді, де це розміщується теж, якщо ви помітили. 998 00:48:40,516 --> 00:48:41,000 >> ТОМАС Реймерс: Так. 999 00:48:41,000 --> 00:48:49,078 Так що, якщо ви йдете до Нормалізувати і перейти до GitHub. 1000 00:48:49,078 --> 00:48:51,936 Були це? 1001 00:48:51,936 --> 00:48:54,620 >> Майк Ріццо: Ця маленька кішка річ є символом GitHub. 1002 00:48:54,620 --> 00:48:56,330 >> ТОМАС Реймерс: Ох. 1003 00:48:56,330 --> 00:49:02,180 Так GitHub використовує метод, званий Git для зберігання коду. 1004 00:49:02,180 --> 00:49:05,150 Чи є ви не знаєте, що це таке або це лякає вас, це нормально. 1005 00:49:05,150 --> 00:49:16,100 Ви не повинні знати, що Git є тому GitHub має кнопку Завантажити 1006 00:49:16,100 --> 00:49:17,200 у правому нижньому куті. 1007 00:49:17,200 --> 00:49:21,350 >> Інша корисна річ, щоб знати про GitHub є більшість продуктів 1008 00:49:21,350 --> 00:49:23,200 читатиме мені. 1009 00:49:23,200 --> 00:49:25,400 І якщо вони не мають веб-сайт, читати мені буде говорити про те, як ви 1010 00:49:25,400 --> 00:49:28,310 встановити його, як ви його використовуєте, то, що він робить, і так далі, і так далі, і так далі. 1011 00:49:28,310 --> 00:49:31,033 Те, що ми в основному були вас через. 1012 00:49:31,033 --> 00:49:32,326 >> Майк Ріццо: Вихід Інтернету. 1013 00:49:32,326 --> 00:49:34,020 >> ТОМАС Реймерс: Це нормально. 1014 00:49:34,020 --> 00:49:36,980 Останні дві речі, які ми хотіли говорити про - 1015 00:49:36,980 --> 00:49:38,750 ми говорили про Git - 1016 00:49:38,750 --> 00:49:40,290 є пошук і усунення несправностей. 1017 00:49:40,290 --> 00:49:43,020 А це не так актуально для кінцевий продукт, як це 1018 00:49:43,020 --> 00:49:44,870 коли ви залишаєте 50. 1019 00:49:44,870 --> 00:49:48,310 І коли ви зіткнетеся з продуктами реалізації бібліотеки або реалізації 1020 00:49:48,310 --> 00:49:50,230 Ваш власний проект, ви будете є питання або ви 1021 00:49:50,230 --> 00:49:51,660 будемо дивитися на ваші запитання. 1022 00:49:51,660 --> 00:49:53,060 >> Знову ж, Google його. 1023 00:49:53,060 --> 00:49:54,630 Це буквально те, що ми робимо. 1024 00:49:54,630 --> 00:49:56,400 Це звучатиме нерозумно. 1025 00:49:56,400 --> 00:49:58,310 Але буквально, ми Google його. 1026 00:49:58,310 --> 00:50:01,810 І знову ж, одним з перших речей, ви будете як правило, працюють в це 1027 00:50:01,810 --> 00:50:06,550 stackoverflow.com, який є прекрасним питання і відповідь видовище. 1028 00:50:06,550 --> 00:50:10,530 >> Це чудово і тому, що ви можете розміщувати на питання і шукати 1029 00:50:10,530 --> 00:50:12,760 відповіді, але й тому, що він вже має багато 1030 00:50:12,760 --> 00:50:14,590 попередньо заповнені вміст. 1031 00:50:14,590 --> 00:50:18,510 Так зазвичай, коли ви Google програмування питання протягом перших 1032 00:50:18,510 --> 00:50:22,620 пару хітів ви, можливо, вже запустили в нього під час ваших проблемних множин. 1033 00:50:22,620 --> 00:50:27,840 >> А потім, в останній справді короткий річ є JSFIDDLE, що - сьогодні ми в 1034 00:50:27,840 --> 00:50:32,110 робили багато роботи з JavaScript HTML CSS. 1035 00:50:32,110 --> 00:50:39,820 JSFIDDLE є веб-додаток, який в основному дозволяє прийняти ваш HTML, ваші 1036 00:50:39,820 --> 00:50:42,820 JavaScript внизу ліворуч, і ваш CSS в правому верхньому куті. 1037 00:50:42,820 --> 00:50:47,840 І то це може створити швидкий рендер з нього і подивитися, як він взаємодіє. 1038 00:50:47,840 --> 00:50:50,500 Це дуже корисно, коли люди намагаються зробити доказ концепції, як 1039 00:50:50,500 --> 00:50:52,910 це, як ви б зробити меню, що випадає. 1040 00:50:52,910 --> 00:50:54,980 Може бути, швидкий розкрити або будь-який інший. 1041 00:50:54,980 --> 00:50:56,560 >> Майк Ріццо: Так що давайте йти вперед і натисніть на цю. 1042 00:50:56,560 --> 00:50:57,820 Невелика примітка - 1043 00:50:57,820 --> 00:51:00,430 в той час як, перш, ніж ми були роблять на клацанням миші. 1044 00:51:00,430 --> 00:51:04,380 Виявляється JCorey Корея також має вбудований в обробник подій клік, що це 1045 00:51:04,380 --> 00:51:07,020 використовує тільки через те, що це цифри ви захоче зробити багато речей 1046 00:51:07,020 --> 00:51:08,410 коли ви хочете, щоб натиснути щось. 1047 00:51:08,410 --> 00:51:09,690 >> Крім того, він також має наведенні. 1048 00:51:09,690 --> 00:51:12,850 Але щоб отримати повний спектр тих, подивіться на JQuery 1049 00:51:12,850 --> 00:51:15,320 документація і зробити це. 1050 00:51:15,320 --> 00:51:18,760 Я зробив щось дурне тут. 1051 00:51:18,760 --> 00:51:21,490 >> ТОМАС Реймерс: Так що я дуже швидко Програма прямо тут, в якому говориться, 1052 00:51:21,490 --> 00:51:22,640 кнопка на клацанням миші. 1053 00:51:22,640 --> 00:51:23,890 Тоді у нас є цикл. 1054 00:51:23,890 --> 00:51:26,810 Для я менше 404. 1055 00:51:26,810 --> 00:51:29,530 Це просто буде спливав Ці повідомлення. 1056 00:51:29,530 --> 00:51:33,425 >> Майк Ріццо: І те, що було Код 404 стояв в HTML? 1057 00:51:33,425 --> 00:51:34,145 Чи пам'ятає хтось? 1058 00:51:34,145 --> 00:51:35,450 Не знайдено, правильно. 1059 00:51:35,450 --> 00:51:38,640 1060 00:51:38,640 --> 00:51:40,885 Хром також додав цей акуратний річ, де можна - 1061 00:51:40,885 --> 00:51:43,430 >> ТОМАС Реймерс: Тому що люди, як Майк почав робити це багато, і 1062 00:51:43,430 --> 00:51:47,230 дратівливі користувачів, що дозволяє Вам бачити інформацію. 1063 00:51:47,230 --> 00:51:48,286 >> Майк Ріццо: Так. 1064 00:51:48,286 --> 00:51:50,690 >> ТОМАС Реймерс: Чи є у нас якісь питання про це, про JavaScript 1065 00:51:50,690 --> 00:51:53,420 бібліотеки, пошуку бібліотек, або виглядає те, що веб-розробки 1066 00:51:53,420 --> 00:51:55,400 як в реальному світі? 1067 00:51:55,400 --> 00:51:56,880 Ми біжимо проти часу. 1068 00:51:56,880 --> 00:52:00,400 Так що я не впевнений, що ми збираємося встигнути реалізувати 1069 00:52:00,400 --> 00:52:02,290 якщо це не дуже швидко. 1070 00:52:02,290 --> 00:52:04,580 Невже ми добре? 1071 00:52:04,580 --> 00:52:08,110 >> Майк Ріццо: Все, що ви, хлопці, хотіли б щоб побачити дуже швидко в, як, два 1072 00:52:08,110 --> 00:52:09,556 хвилин або менше? 1073 00:52:09,556 --> 00:52:10,870 >> ТОМАС Реймерс: Всі ми можемо уточнити? 1074 00:52:10,870 --> 00:52:12,500 Як написати в - 1075 00:52:12,500 --> 00:52:13,260 >> АУДИТОРІЯ: [нерозбірливо]? 1076 00:52:13,260 --> 00:52:16,070 >> Майк Ріццо: Так, так that's - 1077 00:52:16,070 --> 00:52:18,065 >> ТОМАС Реймерс: Ви можете просто натиснути Контрольно-U на сайті. 1078 00:52:18,065 --> 00:52:19,275 >> Майк Ріццо: О, я не знав, що. 1079 00:52:19,275 --> 00:52:22,290 >> ТОМАС Реймерс: Я думаю, да. 1080 00:52:22,290 --> 00:52:23,300 Контрольно-U. Так. 1081 00:52:23,300 --> 00:52:25,970 >> Майк Ріццо: О, так це те, Код для сайту. 1082 00:52:25,970 --> 00:52:29,580 Але якщо ви дійсно хочете, щоб завантажити наш файли і все, він розміщений 1083 00:52:29,580 --> 00:52:32,650 на github.com 1084 00:52:32,650 --> 00:52:34,850 >> ТОМАС Реймерс: скоротити моє ім'я - 1085 00:52:34,850 --> 00:52:38,504 Томас Реймерс - слеш CS50 дефіс семінар. 1086 00:52:38,504 --> 00:52:40,710 >> Майк Ріццо: А можна там є все. 1087 00:52:40,710 --> 00:52:42,310 >> ТОМАС Реймерс: Це те, що GitHub виглядає, до речі. 1088 00:52:42,310 --> 00:52:44,910 Отже, ще раз, коли ви бачите з відкритим вихідним кодом Проект, як правило, вони будуть для читання 1089 00:52:44,910 --> 00:52:45,950 мене там, що ви можете прочитати. 1090 00:52:45,950 --> 00:52:50,200 І якщо повернутися, ви помітите, що у вас є завантажити ZIP, який буде 1091 00:52:50,200 --> 00:52:52,130 дозволяють завантажувати джерело Код включити 1092 00:52:52,130 --> 00:52:53,666 продукт у вашій власній речі. 1093 00:52:53,666 --> 00:52:56,890 >> Майк Ріццо: Так, і якщо ми просто натисніть на index.html дійсно швидко - 1094 00:52:56,890 --> 00:52:59,180 >> ТОМАС Реймерс: Ви побачите ось Вихідний код для нашого сайту. 1095 00:52:59,180 --> 00:53:02,016 1096 00:53:02,016 --> 00:53:06,070 >> Майк Ріццо: Крім того, я забув натиснути правою раніше з великим столом він 1097 00:53:06,070 --> 00:53:09,860 включений, але є також стіл з chmods, що ми включені 1098 00:53:09,860 --> 00:53:13,210 якраз для вашої ясності. 1099 00:53:13,210 --> 00:53:16,940 Але якщо ми виділіть все, аж до дно, ми фактично не роблять дуже 1100 00:53:16,940 --> 00:53:21,160 багато з JavaScript матеріал взагалі з цим. 1101 00:53:21,160 --> 00:53:26,610 Це виключно від усього інше, що ми мали. 1102 00:53:26,610 --> 00:53:28,730 >> Так що спасибі вам, хлопці, що прийшли і слухати. 1103 00:53:28,730 --> 00:53:29,830 Ми сподіваємося, що це був дійсно попереджувальний. 1104 00:53:29,830 --> 00:53:33,020 Якщо у Вас виникли наявність відповідної питання або просто хочете, щоб говорити про 1105 00:53:33,020 --> 00:53:36,240 що ще подобається те, що інші цікаві речі ви можете зробити з JavaScript, ми будемо раді 1106 00:53:36,240 --> 00:53:37,186 поговорити з тобою. 1107 00:53:37,186 --> 00:53:40,010 >> ТОМАС Реймерс: Якщо у вас є питання про свій проект або, якщо це може бути 1108 00:53:40,010 --> 00:53:42,740 ставлення, ми, ймовірно, залишитися трохи після цього. 1109 00:53:42,740 --> 00:53:44,640 Але крім цього, є хороший уїк-енд. 1110 00:53:44,640 --> 00:53:45,845 >> Майк Ріццо: Так, подобається. 1111 00:53:45,845 --> 00:53:46,120 Побачимося. 1112 00:53:46,120 --> 00:53:47,370 >> ТОМАС Реймерс: Побачимося. 1113 00:53:47,370 --> 00:53:47,926