1 00:00:00,000 --> 00:00:10,632 2 00:00:10,632 --> 00:00:12,340 Аллісон Бухгольц-AU: Всі права все. 3 00:00:12,340 --> 00:00:13,520 Ласкаво просимо до розділу. 4 00:00:13,520 --> 00:00:15,315 Це наша передостанньому розділі. 5 00:00:15,315 --> 00:00:16,542 Це так сумно. 6 00:00:16,542 --> 00:00:19,500 Я не знаю, що я збираюся зробити не бачачи вас, хлопці кожен понеділок. 7 00:00:19,500 --> 00:00:20,970 Я думаю, ми повинні просто-- Може бути, ми могли б просто 8 00:00:20,970 --> 00:00:22,710 зустрітися тут і пообідати або щось. 9 00:00:22,710 --> 00:00:23,270 Я не знаю. 10 00:00:23,270 --> 00:00:24,370 Я принесу замість їжі. 11 00:00:24,370 --> 00:00:26,290 Ми просто говоримо. 12 00:00:26,290 --> 00:00:29,900 Але так, на наступному тижні буде наш останній розділ. 13 00:00:29,900 --> 00:00:32,390 >> На цій ноті, ви повинні вікторину на наступному тижні. 14 00:00:32,390 --> 00:00:35,660 Я знаю, що забув зробити мій, як, два тижні завчасне повідомлення минулого тижня, 15 00:00:35,660 --> 00:00:39,140 але, сподіваюся, ви, хлопці, знав, що це станеться. 16 00:00:39,140 --> 00:00:42,880 Сподіваємося, це один з останніх проміжних виборах для вас, хлопці, за семестр. 17 00:00:42,880 --> 00:00:46,950 Але це буде охоплювати всі матеріал, який ми пішли знову. 18 00:00:46,950 --> 00:00:50,811 Так що це не подобається, ви можете просто забути близько чотирьох петель або змінні. 19 00:00:50,811 --> 00:00:52,560 Тому що ми дізналися ті, на початку, 20 00:00:52,560 --> 00:00:55,870 ті, очевидно, справедлива гра для вікторини. 21 00:00:55,870 --> 00:01:00,150 >> Це буде той же формат, те ж саме довжина, так що ви вже звикли до цього. 22 00:01:00,150 --> 00:01:02,330 Там буде кодування за допомогою ручних проблем, 23 00:01:02,330 --> 00:01:06,270 Можливо, деякі вірно невірно, Можливо, якийсь короткий відповідь. 24 00:01:06,270 --> 00:01:08,090 Таким чином, ви повинні бути знайомі з форматом, 25 00:01:08,090 --> 00:01:10,940 особливо якщо ви берете Практичні тести. 26 00:01:10,940 --> 00:01:13,950 Але, як я кажу тут, це накопичувальними, але ми безумовно 27 00:01:13,950 --> 00:01:17,410 буде упором на речі з шостому тижні вперед. 28 00:01:17,410 --> 00:01:24,050 Таким чином, ми, ймовірно, не буде запитати вас про те, скільки байт 29 00:01:24,050 --> 00:01:26,180 в кожному типі або ці види речей, 30 00:01:26,180 --> 00:01:29,730 але ми, ймовірно, буде зацікавлені в таких речах, як пов'язані списки, 31 00:01:29,730 --> 00:01:32,750 або різні структури даних, або різні алгоритми 32 00:01:32,750 --> 00:01:33,960 що ми говорили. 33 00:01:33,960 --> 00:01:38,990 Тому переконайтеся, що ви дійсно на тих, і якщо ви 34 00:01:38,990 --> 00:01:41,590 потрібні будь-які ресурси, ось багато ресурсів. 35 00:01:41,590 --> 00:01:44,790 Я просто дав вам вид про швидке списку є. 36 00:01:44,790 --> 00:01:48,330 >> Наступний тиждень буде вікторина огляд протягом цього часу. 37 00:01:48,330 --> 00:01:52,290 Так що, якщо у вас є які-небудь питання або конкретні теми, 38 00:01:52,290 --> 00:01:56,180 конкретні речі, на вікторині, що Ви хотіли б піти знову, будь ласка, 39 00:01:56,180 --> 00:02:01,780 надсилайте їх мені завчасно, так що я можу вид підготовки деякий матеріал для цього. 40 00:02:01,780 --> 00:02:06,310 І на додаток до цього розділ огляді ми 41 00:02:06,310 --> 00:02:09,616 також проведення курсу всій огляд, як ми зробили минулого разу. 42 00:02:09,616 --> 00:02:11,490 І це буде робиться тими ж людьми. 43 00:02:11,490 --> 00:02:13,030 Я не знаю, якщо це робить це краще або гірше, 44 00:02:13,030 --> 00:02:15,670 але це буде мене, Ханна, Даван, і Гейб знову. 45 00:02:15,670 --> 00:02:18,630 Так що, якщо ви хочете прийти і побачити нам все жартували один з одним 46 00:02:18,630 --> 00:02:21,270 і ви пройдете через вікторини Огляд, ви повинні обов'язково 47 00:02:21,270 --> 00:02:22,600 прийшли до цього в наступний понеділок також. 48 00:02:22,600 --> 00:02:26,210 Таким чином, ви будете тільки варення понеділок упаковані огляду вікторини, і це добре 49 00:02:26,210 --> 00:02:29,840 бо тоді у вас є вівторок для обробки через все. 50 00:02:29,840 --> 00:02:32,230 >> Але, безумовно, не перевірити з цих ресурсів. 51 00:02:32,230 --> 00:02:36,030 Study.csv.net на сьогоднішній день, я думаю, один з найбільш корисним, 52 00:02:36,030 --> 00:02:37,990 в основному тому що він має Багато прикладів коду, 53 00:02:37,990 --> 00:02:40,490 він має всю владу Окуляри з усіма примітками на ньому, 54 00:02:40,490 --> 00:02:44,510 які дійсно те, що я малюю найбільш мої розділі матеріалів. 55 00:02:44,510 --> 00:02:47,480 Якщо є що-небудь в попередньому розділи, які я, можливо, що посилаються 56 00:02:47,480 --> 00:02:49,920 що ви не можете мати отримав, просто дайте мені знати. 57 00:02:49,920 --> 00:02:52,520 Як приклад коду минулого тижня, якщо хтось не отримав, що, 58 00:02:52,520 --> 00:02:55,930 Просто напишіть мені або прийти поговорити зі мною, і я подбаю про те, що ви отримаєте це. 59 00:02:55,930 --> 00:03:02,000 >> Так з цим, сьогодні ми будемо буде говорити про JavaScript. 60 00:03:02,000 --> 00:03:04,690 І ось ми з Томмі, який я був просто кажу вам вчора ввечері. 61 00:03:04,690 --> 00:03:06,670 Я люблю Томмі. 62 00:03:06,670 --> 00:03:09,040 JavaScript є його улюбленим Мова, як він говорить тут. 63 00:03:09,040 --> 00:03:14,050 Вони будуть намагатися і сказати вам, що це чи не краще, і вони будуть праві. 64 00:03:14,050 --> 00:03:16,510 Так Томмі майстер JavaScript. 65 00:03:16,510 --> 00:03:19,850 Я не зовсім на його рівні, але я був би, 66 00:03:19,850 --> 00:03:22,900 "Томмі, як я вчу ці діти JavaScript? " 67 00:03:22,900 --> 00:03:26,700 Так що я отримав кілька порад, так сподіваюся, вони вийшло. 68 00:03:26,700 --> 00:03:31,140 >> Так пара речей, які потрібно знати, що JavaScript є сценаріїв на стороні клієнта 69 00:03:31,140 --> 00:03:35,560 мову, тому в той час як PHP є те, що ми розглянули більше на стороні сервера, 70 00:03:35,560 --> 00:03:39,280 було завантажити на сервер, компілюватиметься і виконуватися там. 71 00:03:39,280 --> 00:03:42,871 Цей виконаний на своїй машині. 72 00:03:42,871 --> 00:03:43,370 ОК? 73 00:03:43,370 --> 00:03:46,960 Таким чином, ви завантажити деякі сторінки JavaScript, і він виконує на вашому комп'ютері. 74 00:03:46,960 --> 00:03:49,910 Синтаксис дуже схожий на C і РНР. 75 00:03:49,910 --> 00:03:52,490 Ми збираємося пройти через Деякі приклади JavaScript, 76 00:03:52,490 --> 00:03:56,740 і ви будете бачити, що Так ми говоримо про змінних, цикли, 77 00:03:56,740 --> 00:03:58,910 та умови дуже схожі. 78 00:03:58,910 --> 00:04:00,500 ОК? 79 00:04:00,500 --> 00:04:04,490 Справа в тому, що вони такі схожі є ймовірно, буде спрацьовувати деякі з вас 80 00:04:04,490 --> 00:04:08,529 до, в деяких випадках, просто тому, що Ви включити трохи C 81 00:04:08,529 --> 00:04:09,570 де не повинно бути. 82 00:04:09,570 --> 00:04:14,130 Може бути, ви спробуєте і щось типу коли він не повинен бути надрукований. 83 00:04:14,130 --> 00:04:16,540 >> І від того, одна справа знаю, що JavaScript 84 00:04:16,540 --> 00:04:19,360 в динамічно типізованих мову, як PHP. 85 00:04:19,360 --> 00:04:21,410 Так що, якщо ви, хлопці, пам'ятайте, з розділу минулого тижня, 86 00:04:21,410 --> 00:04:23,680 коли ми були доброзичливими робити наш PHP прискорений курс, 87 00:04:23,680 --> 00:04:28,860 ми бачили, як рядок можна бути перетворився на INT, і так далі. 88 00:04:28,860 --> 00:04:31,650 89 00:04:31,650 --> 00:04:34,850 Тип ваших змінних визначаються під час виконання, 90 00:04:34,850 --> 00:04:38,180 тому вони можуть змінюватися з плином Курс програми, 91 00:04:38,180 --> 00:04:43,109 і таким же чином, що ніколи дійсно оголосити типи для PHP змінних, 92 00:04:43,109 --> 00:04:45,900 ми будемо робити те ж саме що тут, де ми насправді не 93 00:04:45,900 --> 00:04:49,740 контролювати типи наших змінних, так сказати, як це робимо ми в С. 94 00:04:49,740 --> 00:04:52,200 >> І тоді одна річ, це досить круто 95 00:04:52,200 --> 00:04:54,090 що ви можете про помилки перевірити за допомогою консолі, 96 00:04:54,090 --> 00:04:57,240 з цією великою функції console.log, що 97 00:04:57,240 --> 00:05:00,930 дозволяє виводити різні змінні або об'єкти, які ми 98 00:05:00,930 --> 00:05:01,750 про що поговорити. 99 00:05:01,750 --> 00:05:05,720 Так само, як минулого тижня, коли я був як, "використовувати цю функцію," зі скиданням 100 00:05:05,720 --> 00:05:10,490 від вашого PSET це функція Ви хочете використовувати, console.log. 101 00:05:10,490 --> 00:05:12,860 Я був так здивований, як багато студенти робочий час 102 00:05:12,860 --> 00:05:14,530 не знаю про функції скидання. 103 00:05:14,530 --> 00:05:19,010 І я подумав: «Хлопці, це воля зробити ваше життя набагато простіше ". 104 00:05:19,010 --> 00:05:22,960 >> Гаразд, так що це було свого роду тільки короткий річ, як завжди, 105 00:05:22,960 --> 00:05:24,000 у нас є приклади. 106 00:05:24,000 --> 00:05:25,600 Я знаю, що ви, хлопці люблять тих ,. 107 00:05:25,600 --> 00:05:30,930 Так ось приклад дуже просто JavaScript файлу тут. 108 00:05:30,930 --> 00:05:34,000 Так що це просто збирається створити це спливаюче вікно, яке говорить, 109 00:05:34,000 --> 00:05:36,336 "Привіт світ", коли ви зайдіть на сторінку, але давайте 110 00:05:36,336 --> 00:05:37,960 спробувати пройти через це небагато. 111 00:05:37,960 --> 00:05:43,440 Так, очевидно, це просто як вашої звичайної index.html. 112 00:05:43,440 --> 00:05:50,280 Так, тільки наша нормальна шаблон тут, і у нас є HTML, ми маємо нашу голову, 113 00:05:50,280 --> 00:05:55,580 і так само, як за допомогою CSS, як ми включені деякі поза файл, вірно? 114 00:05:55,580 --> 00:05:59,260 У нас є певний тип скрипта текст, який JavaScript. 115 00:05:59,260 --> 00:06:02,680 І джерело hello.js, який є тут. 116 00:06:02,680 --> 00:06:05,630 Це весь файл з hello.js. 117 00:06:05,630 --> 00:06:09,080 І тоді у нас є деякі Назва та деякі тіла HTML 118 00:06:09,080 --> 00:06:11,050 що ми насправді не хвилює. 119 00:06:11,050 --> 00:06:15,970 >> Що відбувається, є, коли ми завантажуємо цю сторінку, він автоматично виконує цей сценарій. 120 00:06:15,970 --> 00:06:16,470 ОК? 121 00:06:16,470 --> 00:06:18,790 Так JavaScript буде виконати автоматично. 122 00:06:18,790 --> 00:06:22,860 Так що це буде робити, це буде негайно піти і виконати це. 123 00:06:22,860 --> 00:06:24,110 І це скаже, "попередження. 124 00:06:24,110 --> 00:06:25,190 Привіт світ ". 125 00:06:25,190 --> 00:06:30,840 Які оповіщення є функція, яка фактично, породжує цей прапорець. 126 00:06:30,840 --> 00:06:31,540 ОК? 127 00:06:31,540 --> 00:06:33,390 Так що це свого роду чергу охоплювала. 128 00:06:33,390 --> 00:06:36,700 Там немає нічого зайвого у нас було зробити Крім того, тільки попередження, 129 00:06:36,700 --> 00:06:40,000 а потім все, що ми хотіли в нашому вікні попередження. 130 00:06:40,000 --> 00:06:40,500 ОК? 131 00:06:40,500 --> 00:06:45,080 Так що це просто супер просто приклад того, що JavaScript може зробити. 132 00:06:45,080 --> 00:06:48,110 133 00:06:48,110 --> 00:06:50,070 >> Один з дійсно здорово речі, як ми побачимо, 134 00:06:50,070 --> 00:06:55,150 є те, що JavaScript дозволяє маніпулювати веб-сторінок, 135 00:06:55,150 --> 00:06:57,720 без завантажити їх в будь-який час. 136 00:06:57,720 --> 00:07:01,830 Так що якщо ви want-- наприклад, якщо Ви нависли над чимось, 137 00:07:01,830 --> 00:07:04,300 якщо ви, хлопці коли-небудь бачив, як меню барів, 138 00:07:04,300 --> 00:07:07,360 або при наведенні курсору на деякі тема з'являється випадаюче меню, 139 00:07:07,360 --> 00:07:08,670 це тому, що з JavaScript. 140 00:07:08,670 --> 00:07:09,170 ОК? 141 00:07:09,170 --> 00:07:12,670 Таким чином, ви не перезавантаження всієї сторінку, щоб отримати це меню, щоб показати, 142 00:07:12,670 --> 00:07:17,240 ви просто шукаєте для деяких конкретних дія, яка користувач прийняв, 143 00:07:17,240 --> 00:07:21,800 які називаються події, які ми отримаємо в, і як тільки ви бачите, що ви говорите, 144 00:07:21,800 --> 00:07:25,960 "Добре, редагувати щось на це сторінка і зробити його виглядати по-різному, 145 00:07:25,960 --> 00:07:28,270 але тільки редагувати ці конкретні речі. 146 00:07:28,270 --> 00:07:29,690 Не завантажуйте все це ". 147 00:07:29,690 --> 00:07:33,110 Так що насправді набагато краще, і Ви не повинні перезавантажити ваші сторінки, 148 00:07:33,110 --> 00:07:34,510 і це дійсно здорово. 149 00:07:34,510 --> 00:07:38,270 >> Так декларації змінних, так що ви можете почасти бачити, 150 00:07:38,270 --> 00:07:40,530 Я поклав зверху тут, слабо типізований. 151 00:07:40,530 --> 00:07:42,570 Так що це дуже схоже на PHP. 152 00:07:42,570 --> 00:07:48,770 Нам не потрібно, щоб розповісти JavaScript який тип ми 153 00:07:48,770 --> 00:07:50,740 чекаючи кожної з цих змінних буде. 154 00:07:50,740 --> 00:07:52,560 Вони можуть бути все, що типу ми хочемо. 155 00:07:52,560 --> 00:07:57,480 Таким чином, ви помітите, в даному випадку, ми заявляємо, їх дуже просто, тільки з "Var" 156 00:07:57,480 --> 00:08:00,990 а потім, що ми хочемо наш ім'я змінної, щоб бути. 157 00:08:00,990 --> 00:08:05,680 Одна річ, щоб відзначити, що, коли ви покласти VAR перед ім'ям змінної, 158 00:08:05,680 --> 00:08:07,520 це локально Приціли його. 159 00:08:07,520 --> 00:08:09,320 ОК? 160 00:08:09,320 --> 00:08:14,025 Це абсолютно розумним для вас повністю зітріть Вар 161 00:08:14,025 --> 00:08:18,970 і просто з рівним CS50, і це було б просто глобальна змінна. 162 00:08:18,970 --> 00:08:19,580 ОК? 163 00:08:19,580 --> 00:08:22,490 Таким чином, ви можете ініціалізувати його в обох напрямках, Все залежить від того, як ви цього хочете. 164 00:08:22,490 --> 00:08:24,448 Так що якщо ви ініціалізації це всередині функції, 165 00:08:24,448 --> 00:08:28,070 і ви хочете, щоб змінну залишитися областю дії в рамках цієї функції, 166 00:08:28,070 --> 00:08:31,620 Ви будете хотіти зробити щось на зразок Var ім'я змінної, 167 00:08:31,620 --> 00:08:34,270 в порівнянні з, якщо ви хочете його глобальну область, то 168 00:08:34,270 --> 00:08:36,240 можете просто зробити ім'я змінної, а потім 169 00:08:36,240 --> 00:08:38,270 все, що ви хотіли б це встановлюється рівним. 170 00:08:38,270 --> 00:08:40,230 ОК? 171 00:08:40,230 --> 00:08:45,580 >> Це своєрідна прохолодна річ тут, тому що, якщо ми помічаємо, наша змінна 172 00:08:45,580 --> 00:08:47,590 б починається як правда. 173 00:08:47,590 --> 00:08:51,280 І те, що це does-- може хто-небудь сказати мені, що це робить? 174 00:08:51,280 --> 00:08:54,190 175 00:08:54,190 --> 00:08:55,890 Отже, ми маємо деяку тривогу. 176 00:08:55,890 --> 00:09:00,156 Що б типу В бути на самому початку? 177 00:09:00,156 --> 00:09:00,905 АУДИТОРІЯ: Boolean. 178 00:09:00,905 --> 00:09:01,330 Аллісон Бухгольц-AU: Boolean. 179 00:09:01,330 --> 00:09:01,940 Вірно. 180 00:09:01,940 --> 00:09:07,260 І тоді ми перепризначити б в цьому рядку, чи не так? 181 00:09:07,260 --> 00:09:11,170 Так то ось, який тип B бути? 182 00:09:11,170 --> 00:09:12,480 Було б рядок, вірно? 183 00:09:12,480 --> 00:09:14,900 Так що важливо для повідомлення, що в C, ми 184 00:09:14,900 --> 00:09:17,330 не міг майже ніколи не роблять щось подібне. 185 00:09:17,330 --> 00:09:22,000 Ми повинні були б мати змінну, кинути його якось інакше, 186 00:09:22,000 --> 00:09:27,185 Може бути, зробити якусь функцію з двома я, йдуть від заряду до цілого числа. 187 00:09:27,185 --> 00:09:31,063 Але якщо ми помічаємо тут, б дуже легко змінює тип. 188 00:09:31,063 --> 00:09:33,760 >> АУДИТОРІЯ: Почекайте, так що ви можете просто бути, як "зробити б ціле?" 189 00:09:33,760 --> 00:09:34,360 >> Аллісон Бухгольц-AU: Так. 190 00:09:34,360 --> 00:09:36,185 Ви можете просто перепризначити б в ціле. 191 00:09:36,185 --> 00:09:36,910 >> АУДИТОРІЯ: Справді? 192 00:09:36,910 --> 00:09:38,035 >> Аллісон Бухгольц-AU: Так. 193 00:09:38,035 --> 00:09:39,810 І тоді це було б Int. 194 00:09:39,810 --> 00:09:43,820 Так що ваші змінні можуть змінюватися з плином Курс програми теж. 195 00:09:43,820 --> 00:09:46,410 Вони не є строго типізований. 196 00:09:46,410 --> 00:09:49,180 Це дуже слабо типізований. 197 00:09:49,180 --> 00:09:50,820 ОК? 198 00:09:50,820 --> 00:09:54,820 В основному ваші змінні можуть робити все, що вони хочуть, а ми якось бачив PHP. 199 00:09:54,820 --> 00:09:59,430 Вони можуть робити деякі божевільні речі, так важливо бути досить обережним. 200 00:09:59,430 --> 00:10:01,200 Ім'я змінні також. 201 00:10:01,200 --> 00:10:03,450 Якщо ви цього не зробите, всі раптом Ви будете як, 202 00:10:03,450 --> 00:10:05,783 "Почекайте, я думав, що це було рядок, і тепер це INT, 203 00:10:05,783 --> 00:10:08,170 і я не зовсім впевнений, що тут відбувається. " 204 00:10:08,170 --> 00:10:12,410 Так що це просто простий приклад показуючи, як змінна можете легко 205 00:10:12,410 --> 00:10:15,890 змінити його тип по Курс програми. 206 00:10:15,890 --> 00:10:16,870 >> ОК. 207 00:10:16,870 --> 00:10:19,200 Так це має виглядати супер, супер знайомі. 208 00:10:19,200 --> 00:10:21,510 Так ось наші петлі в JavaScript. 209 00:10:21,510 --> 00:10:27,780 Вони точно так само, за винятком Замість чотирьох Int я дорівнює нулю, 210 00:10:27,780 --> 00:10:30,470 ми могли б просто сказати, вар я дорівнює нулю. 211 00:10:30,470 --> 00:10:34,100 І тоді ми могли б у той же самий вид стану, той же самий вид оновлення, 212 00:10:34,100 --> 00:10:36,090 я плюс плюс працює просто відмінно. 213 00:10:36,090 --> 00:10:39,800 Так Четвірки ж, whiles такі ж, 214 00:10:39,800 --> 00:10:41,440 і робити whiles точно те ж саме. 215 00:10:41,440 --> 00:10:44,070 Те ж роду загальному форматі. 216 00:10:44,070 --> 00:10:48,840 Зауважимо, чотири круглі дужки, кронштейни, це все те ж саме. 217 00:10:48,840 --> 00:10:51,470 Також буде коми коли ми доберемося до прикладі коду. 218 00:10:51,470 --> 00:10:55,250 Ви побачите, що це досить так само, як в. 219 00:10:55,250 --> 00:10:59,770 >> Для оголошення функцій, знову ж таки, дуже схожі. 220 00:10:59,770 --> 00:11:05,100 У нас є деякі функції, які просто каже, що це функція, а потім 221 00:11:05,100 --> 00:11:07,660 Назва нашої функції і входи. 222 00:11:07,660 --> 00:11:11,590 І знову, якщо ми помічаємо, ми не мають жодного типу тут взагалі. 223 00:11:11,590 --> 00:11:12,090 Вірно? 224 00:11:12,090 --> 00:11:18,150 У нас є нічого не кажучи, що це повинні бути Інтс або двомісні, або поплавці. 225 00:11:18,150 --> 00:11:19,530 Вони можуть бути все, що вони хочуть. 226 00:11:19,530 --> 00:11:23,560 Що важливо, так це, зауваживши, що ми повинні написати функцію заздалегідь 227 00:11:23,560 --> 00:11:26,430 щоб JavaScript знаємо, що це насправді функція. 228 00:11:26,430 --> 00:11:29,820 >> Так що це просто деякі прості сума Функція, яка повертає X або Y, 229 00:11:29,820 --> 00:11:33,800 і що тоді також круто є те, що ви можете насправді 230 00:11:33,800 --> 00:11:35,950 призначити функцію змінної. 231 00:11:35,950 --> 00:11:41,770 Таким чином, в цьому випадку, сума тепер функція, яка насправді суму. 232 00:11:41,770 --> 00:11:47,740 Так що, якщо ви помітили, тут, у нас є Функція, ім'я функції, входи. 233 00:11:47,740 --> 00:11:48,860 Вірно? 234 00:11:48,860 --> 00:11:52,120 Тут ми просто функції і входи. 235 00:11:52,120 --> 00:11:54,310 Отже, це називається анонімної функцією. 236 00:11:54,310 --> 00:11:59,265 І це те, що повинно бути новим для більшості з вас, хлопці, якщо не всі з вас. 237 00:11:59,265 --> 00:12:01,140 Так в основному, що це означає, що ми не 238 00:12:01,140 --> 00:12:03,050 потрібно ім'я нашого Функція в цьому випадку. 239 00:12:03,050 --> 00:12:06,260 Ми можемо просто сказати: "Добре, я збираюся мають цю функцію, яка виконує, тут 240 00:12:06,260 --> 00:12:08,550 є його входи, і ось що він збирається робити ". 241 00:12:08,550 --> 00:12:12,540 І особливо, коли ви привласнюєте Функція деякої змінної 242 00:12:12,540 --> 00:12:14,950 що ви збираєтеся управляти, Вам не обов'язково 243 00:12:14,950 --> 00:12:17,116 потрібно назвати, тому що Ви збираєтеся мати на увазі 244 00:12:17,116 --> 00:12:20,990 до нього по цій змінній ім'я, не те, що 245 00:12:20,990 --> 00:12:22,840 функція була насправді називається. 246 00:12:22,840 --> 00:12:23,550 ОК? 247 00:12:23,550 --> 00:12:27,810 >> Так що, якщо ми бачимо тут, ми є деяка змінна суму зараз 248 00:12:27,810 --> 00:12:30,920 , Що дорівнює сума трьох і п'яти років. 249 00:12:30,920 --> 00:12:33,070 І ми б це. 250 00:12:33,070 --> 00:12:36,750 І це буде просто є попередження, три плюс п'ять дорівнює числу. 251 00:12:36,750 --> 00:12:43,950 Це плюс просто об'єднати всі наша відповідь була на рядок. 252 00:12:43,950 --> 00:12:47,420 Також здорово, плюс може об'єднувати рядки. 253 00:12:47,420 --> 00:12:53,510 >> Для JavaScript, як і PHP, HTML і CSS, як ми вже говорили, 254 00:12:53,510 --> 00:12:56,450 Багато що з цього ми начебто приймаючи навчальні колеса від тут 255 00:12:56,450 --> 00:13:02,030 і ви, хлопці, є багато курсі як насправді зрозуміти ці речі. 256 00:13:02,030 --> 00:13:04,280 Вони трохи відрізняються, але вони не настільки далекі 257 00:13:04,280 --> 00:13:09,460 і що ви не можете Google речей або шукати їх в Інтернеті з W3 Schools. 258 00:13:09,460 --> 00:13:12,755 І ми дійсно чекаємо вас хлопці, начебто, експеримент 259 00:13:12,755 --> 00:13:14,400 і вчитися на свій власний. 260 00:13:14,400 --> 00:13:19,490 Таким чином, я знаю, це може здатися трохи менш ретельно, ніж деякі з гр речей 261 00:13:19,490 --> 00:13:21,936 що ми робимо, але це насправді причини. 262 00:13:21,936 --> 00:13:25,060 263 00:13:25,060 --> 00:13:28,470 Але, сподіваюся, це не надто різні, і це не переважна. 264 00:13:28,470 --> 00:13:31,940 >> Так як масиви в JavaScript, знову дуже, дуже схожі. 265 00:13:31,940 --> 00:13:32,460 Вірно? 266 00:13:32,460 --> 00:13:36,520 У нас є масив змінних це одно порожні дужки, 267 00:13:36,520 --> 00:13:40,340 і це тільки порожній масив. 268 00:13:40,340 --> 00:13:43,420 Це часто називають Буквальний позначення масив. 269 00:13:43,420 --> 00:13:45,280 Ось тільки одна річ, ми її називаємо. 270 00:13:45,280 --> 00:13:51,380 Якщо ми бачимо масив два тут, у нас є деякі Буквальний масив, який складається з трьох елементів, 271 00:13:51,380 --> 00:13:51,910 чи не так? 272 00:13:51,910 --> 00:13:54,640 І тоді у нас є деякі вар третій елемент це 273 00:13:54,640 --> 00:13:58,060 деяка змінна це просто збирається провести цей рядок, JS. 274 00:13:58,060 --> 00:14:01,760 275 00:14:01,760 --> 00:14:06,170 >> Елементи, хороші зауважити, розділених комами, 276 00:14:06,170 --> 00:14:07,740 так само, як можна було б очікувати. 277 00:14:07,740 --> 00:14:14,630 І ви також можете отримати доступ до цих, як ми зробили в С, з цим індексом позначень, чи не так? 278 00:14:14,630 --> 00:14:16,950 Так відрізняється від PHP Зараз ми повертаємося 279 00:14:16,950 --> 00:14:20,180 просто вид увазі до речей за індексом. 280 00:14:20,180 --> 00:14:22,189 Так само, як С, це також нульової позначки. 281 00:14:22,189 --> 00:14:25,230 Я відчуваю, що це буде насправді жорстокий якщо вони раптом зробив JavaScript одного 282 00:14:25,230 --> 00:14:30,630 Індекс, і ви повинні були повністю переосмислити те, як ви думаєте, про масивах. 283 00:14:30,630 --> 00:14:36,140 >> Одна прохолодна річ у тому, що замість того, щоб do-- якщо ви коли-небудь 284 00:14:36,140 --> 00:14:39,240 хотів довжину масиву, Може бути, ви ітерації через неї 285 00:14:39,240 --> 00:14:43,430 поки ви не знайдете якоїсь мети, або ви б просто знати, що це таке. 286 00:14:43,430 --> 00:14:49,310 Оскільки JavaScript є дуже вільним у більш способи, ніж просто типу, як ми бачимо, тут, 287 00:14:49,310 --> 00:14:53,310 ми можемо тільки зробити цей масив більше, тому що ми вирішили. 288 00:14:53,310 --> 00:14:56,177 Якщо ми помічаємо, масив три має три речі, щоб почати, 289 00:14:56,177 --> 00:14:58,510 але потім все раптово, ми, як: "О, я просто жартую. 290 00:14:58,510 --> 00:15:01,370 Ми насправді відбувається щоб зробити його 101 речей ". 291 00:15:01,370 --> 00:15:05,300 Так що якщо ви коли-небудь хотіли знати Фактична довжина вашого масиву, 292 00:15:05,300 --> 00:15:06,680 Ви робите це, як це. 293 00:15:06,680 --> 00:15:10,470 І ми збираємося, щоб побачити багато цього позначення в прикладах, 294 00:15:10,470 --> 00:15:12,730 але з JavaScript це, як правило, те, що 295 00:15:12,730 --> 00:15:16,410 Об'єкт, ви говорите про точка будь-якого роду функції 296 00:15:16,410 --> 00:15:17,740 Ви хочете використовувати з нею. 297 00:15:17,740 --> 00:15:18,240 ОК? 298 00:15:18,240 --> 00:15:20,520 >> Таким чином, в цьому випадку наша об'єкт є масивом два, 299 00:15:20,520 --> 00:15:23,470 і ми говоримо, що хочемо Довжина масиву два. 300 00:15:23,470 --> 00:15:25,716 Так що це просто викликає як довжини на що. 301 00:15:25,716 --> 00:15:27,090 І це буде повернути довжину. 302 00:15:27,090 --> 00:15:32,610 303 00:15:32,610 --> 00:15:36,790 Також щось потрібно зазначити, що якщо ми помічаємо, наші масиви, 304 00:15:36,790 --> 00:15:39,830 На відміну від C, вони не мають щоб бути все ж типу. 305 00:15:39,830 --> 00:15:41,670 Це набагато більше схоже на PHP. 306 00:15:41,670 --> 00:15:45,905 JavaScript в основному так само, як Це цікаво зливаються С і PHP. 307 00:15:45,905 --> 00:15:50,020 308 00:15:50,020 --> 00:15:52,170 Таким чином, ми ввійдемо в це. 309 00:15:52,170 --> 00:15:56,750 В даний час, давайте припустимо, що ваші масиви в основному 310 00:15:56,750 --> 00:16:00,640 як C масиви, в тому, що вони дорівнюють нулю індексуються. 311 00:16:00,640 --> 00:16:04,120 ОК, так що це все. 312 00:16:04,120 --> 00:16:08,850 Ви також можете просто розширити Масив до того, що індекс ви хочете. 313 00:16:08,850 --> 00:16:14,260 У той час як це, ймовірно, SEG вина на вас або дати вам якусь помилку, 314 00:16:14,260 --> 00:16:15,970 JavaScript, як, "Ні, це нормально. 315 00:16:15,970 --> 00:16:16,620 Я отримав це. 316 00:16:16,620 --> 00:16:19,460 Ми просто їхати прямо де ви хочете ". 317 00:16:19,460 --> 00:16:24,310 >> Отже, об'єкти дуже важливо. 318 00:16:24,310 --> 00:16:29,720 Ви, хлопці, будете використовувати багато з них в P SET, якщо я правильно пам'ятаю. 319 00:16:29,720 --> 00:16:34,780 Так речі, що вони є схоже в C є структурами. 320 00:16:34,780 --> 00:16:39,290 Таким чином, ви можете думати about--, коли ми йдемо до прикладу право 321 00:16:39,290 --> 00:16:41,810 після цього я думаю, що це зробити набагато більше sense-- 322 00:16:41,810 --> 00:16:45,830 але ми в основному використовувати об'єкти в організувати інформації про курс пов'язані між собою. 323 00:16:45,830 --> 00:16:47,780 Коли ми говорили про Структури в С, ми часто 324 00:16:47,780 --> 00:16:53,405 говорити про студента, який мав якусь назву, ID, будинок, ви знаєте, концентрація. 325 00:16:53,405 --> 00:16:56,030 І це свого роду те ж саме що ми використовуємо об'єкти тут. 326 00:16:56,030 --> 00:16:59,300 Це просто організувати Аналогічна інформація. 327 00:16:59,300 --> 00:17:03,620 >> Ви також можете думати про них, як більш схожий на асоціативні масиви в PHP. 328 00:17:03,620 --> 00:17:10,010 Так що це буде свого роду речі де у нас є деякі ключові з деякого значення, 329 00:17:10,010 --> 00:17:12,859 дуже схожий на PHP. 330 00:17:12,859 --> 00:17:15,780 Таким чином, ви можете ініціалізувати деякі порожній об'єкт, як ми бачимо тут, 331 00:17:15,780 --> 00:17:17,390 тільки з фігурні дужки. 332 00:17:17,390 --> 00:17:19,160 Так масиви квадратні дужки. 333 00:17:19,160 --> 00:17:21,220 Порожні об'єкти фігурні дужки. 334 00:17:21,220 --> 00:17:24,020 Добре відмінність є. 335 00:17:24,020 --> 00:17:27,319 І це тільки два різних способи установки властивостей. 336 00:17:27,319 --> 00:17:31,460 Так що це свого роду набагато більше таким чином, що 337 00:17:31,460 --> 00:17:35,220 схожий на PHP, з нашої асоціативні масиви, з нашими ключовими, 338 00:17:35,220 --> 00:17:39,910 і наша цінність, у той час як Це один is-- ви будете 339 00:17:39,910 --> 00:17:41,920 побачити це набагато більше, в JavaScript. 340 00:17:41,920 --> 00:17:43,550 Це, як правило умовність. 341 00:17:43,550 --> 00:17:47,660 І таким же чином, що ми зробили Масив двома точковими довжина, це говорить, 342 00:17:47,660 --> 00:17:51,580 "Добре, дай мені це атрибутів цього об'єкта ". 343 00:17:51,580 --> 00:17:52,110 Вірно? 344 00:17:52,110 --> 00:17:55,660 Так само, як це було, "дайте мені атрибут довжини масиву два, " 345 00:17:55,660 --> 00:17:59,970 Це говорить, "Дай мені трохи властивість нашого порожній об'єкт ". 346 00:17:59,970 --> 00:18:02,890 Або в даному випадку, ми призначивши її до деякого значення тут. 347 00:18:02,890 --> 00:18:06,200 Але ви також можете отримати доступ до нього таким чином. 348 00:18:06,200 --> 00:18:09,090 >> А потім ось це просто показані два різних попередження. 349 00:18:09,090 --> 00:18:12,320 Так це покаже оповіщення буде точно такий же, 350 00:18:12,320 --> 00:18:17,150 це просто два різні способи доступ до елементу, який ми хочемо. 351 00:18:17,150 --> 00:18:19,552 Чи має це сенс для всіх? 352 00:18:19,552 --> 00:18:21,510 Я відчуваю, як цей Можливо, має сенс, 353 00:18:21,510 --> 00:18:23,270 тільки тому, що ми сходить PHP. 354 00:18:23,270 --> 00:18:26,400 Але, як ми робимо більше прикладів, це буквально в точності те ж саме. 355 00:18:26,400 --> 00:18:28,170 Багато це просто змінити в синтаксисі. 356 00:18:28,170 --> 00:18:30,710 357 00:18:30,710 --> 00:18:33,030 >> Отже, приклади. 358 00:18:33,030 --> 00:18:34,180 Я люблю прикладів. 359 00:18:34,180 --> 00:18:40,070 Так ось деякі CS50 Змінна, є об'єктом, 360 00:18:40,070 --> 00:18:42,160 і ми зберігаємо все це Інформація про це. 361 00:18:42,160 --> 00:18:46,680 Отже, ми маємо, звичайно, інструктор, TFS, psets, і в записі. 362 00:18:46,680 --> 00:18:51,840 Таким чином, ми помітили, це майже всі різних типів. 363 00:18:51,840 --> 00:18:52,340 Вірно? 364 00:18:52,340 --> 00:18:56,230 Так об'єкти можуть зберігати атрибути різних типів. 365 00:18:56,230 --> 00:19:01,220 Ми можемо думати про this-- це дуже схожа на нашу асоціативного масиву в PHP. 366 00:19:01,220 --> 00:19:07,470 Так ключ, значення, ключ, значення, ключ, значення, так далі, і так далі. 367 00:19:07,470 --> 00:19:11,230 Те, що також цікаво так само, що ми можемо мати масиви в масивах, 368 00:19:11,230 --> 00:19:14,690 ми також можемо мати об'єкти в об'єкти або масиви в межах об'єктів. 369 00:19:14,690 --> 00:19:18,410 Ви ніколи не дійсно обмежені просто жодного з речей. 370 00:19:18,410 --> 00:19:24,220 Ми можемо отримати дуже Inceptionesque, просто продовжуйте спускатися по кролячій норі є. 371 00:19:24,220 --> 00:19:26,080 >> Так що, якщо ми помічаємо, ми є курс, який 372 00:19:26,080 --> 00:19:31,120 є рядок, інструктор, що це рядок, і масив, INT, і Boolean. 373 00:19:31,120 --> 00:19:36,110 Таким чином, всі ці різні речі. 374 00:19:36,110 --> 00:19:39,600 >> Гаразд, це так, у нас є ще один. 375 00:19:39,600 --> 00:19:42,930 Так що в цьому випадку ми маємо Масив об'єктів. 376 00:19:42,930 --> 00:19:45,320 Так що просто як об'єкт може мати масив в ньому. 377 00:19:45,320 --> 00:19:47,210 Ми також можемо мати масив об'єктів. 378 00:19:47,210 --> 00:19:51,250 Це може бути корисно думаю про подібне до виду 379 00:19:51,250 --> 00:19:54,260 про те, як ми повинні були хеш стіл, ми мали масив 380 00:19:54,260 --> 00:19:56,220 з усіх цих різних типи структур, які 381 00:19:56,220 --> 00:19:59,070 були покажчики на різні вузли та ще багато чого. 382 00:19:59,070 --> 00:20:01,420 Але в даному випадку, ми є масив об'єктів. 383 00:20:01,420 --> 00:20:04,890 Так що це як масив асоціативних масивів. 384 00:20:04,890 --> 00:20:09,430 Отже, ми маємо деякий перший елемент буде бути об'єкт з ім'ям Джеймса 385 00:20:09,430 --> 00:20:11,340 і будинок Уинтроп. 386 00:20:11,340 --> 00:20:14,780 >> Ви, хлопці, можливо, пам'ятаєте, то дуже схожа на цей 387 00:20:14,780 --> 00:20:21,710 з вашого останнього PSET, де, якщо ви витягнув щось з вашої бази даних, 388 00:20:21,710 --> 00:20:24,480 сортувати по річ у вашому масиві був 389 00:20:24,480 --> 00:20:27,110 всю інформацію про Перший користувач, який зустрівся з ним, 390 00:20:27,110 --> 00:20:30,765 і тоді ви мали на якості індексу в тому, що щоб отримати свої акції або їх кеш 391 00:20:30,765 --> 00:20:32,110 або ще багато чого. 392 00:20:32,110 --> 00:20:34,620 Таким чином, це дуже так само, саме, тільки трохи змінити 393 00:20:34,620 --> 00:20:39,570 в синтаксисі, зміна трохи в слова, які ми використовуємо для опису їх. 394 00:20:39,570 --> 00:20:45,960 >> Так що, якщо ми хотіли, може хто-небудь сказати мені, що це попередження буде робити тут? 395 00:20:45,960 --> 00:20:48,780 Або те, що це трохи код буде зробити для нас? 396 00:20:48,780 --> 00:20:50,992 397 00:20:50,992 --> 00:20:52,616 АУДИТОРІЯ: Це дасть вам всі імена. 398 00:20:52,616 --> 00:20:54,900 Аллісон Бухгольц-AU: справа, так це те, просто попередити всіх імен 399 00:20:54,900 --> 00:20:57,960 тому що вона буде йти через Котедж я, так що було б почати з нуля. 400 00:20:57,960 --> 00:21:01,330 Так було б говорити, ОК ми шукаємо в цьому перший об'єкт, який 401 00:21:01,330 --> 00:21:03,210 перший слот в масиві. 402 00:21:03,210 --> 00:21:06,900 І це говорить: "Дайте мені атрибутів, ім'я цього об'єкта ". 403 00:21:06,900 --> 00:21:09,030 Так ми йдемо сюди, ми б сканування, ми знайдемо ім'я, 404 00:21:09,030 --> 00:21:11,340 і ми роздрукувати Джеймс, Моллі, і Карл. 405 00:21:11,340 --> 00:21:14,410 406 00:21:14,410 --> 00:21:15,799 Є питання досі? 407 00:21:15,799 --> 00:21:17,590 JavaScript, на жаль, Ви будете 408 00:21:17,590 --> 00:21:20,950 робити багато дивитися на ваших самостійно, з'ясувати, синтаксис, 409 00:21:20,950 --> 00:21:21,910 бореться з ним. 410 00:21:21,910 --> 00:21:25,870 Але, звичайно, я завжди тут, Прийомні години завжди тут. 411 00:21:25,870 --> 00:21:28,260 Я міг би бути по вівторках на цьому тижні. 412 00:21:28,260 --> 00:21:31,050 Так що, якщо ви там, ви можете прийти провідати мене на цьому тижні. 413 00:21:31,050 --> 00:21:32,470 Це було б здорово. 414 00:21:32,470 --> 00:21:36,260 >> Отже, DOM є документ-Object Model. 415 00:21:36,260 --> 00:21:38,900 Так що це просто спосіб що нам подобається думати, 416 00:21:38,900 --> 00:21:45,720 Про те, як наш HTML і все всередині, вона організована. 417 00:21:45,720 --> 00:21:49,930 Це дуже багато те, що ймовірно, прийти на вашому вікторини. 418 00:21:49,930 --> 00:21:58,150 Я знаю, що мій рік, це було як от HTML-файл, заповнити DOM для нього. 419 00:21:58,150 --> 00:21:59,770 І ви просто заповнити у дрібницях. 420 00:21:59,770 --> 00:22:01,500 Вони повинні бути легко точок з надією. 421 00:22:01,500 --> 00:22:03,450 Сподіваюся, ви see-- 422 00:22:03,450 --> 00:22:04,590 >> АУДИТОРІЯ: [нерозбірливо] 423 00:22:04,590 --> 00:22:06,660 >> Аллісон Бухгольц-AU: Так Ви бачите це дерево тут? 424 00:22:06,660 --> 00:22:07,200 >> АУДИТОРІЯ: Так. 425 00:22:07,200 --> 00:22:08,949 >> Аллісон Бухгольц-AU: Таким чином, вони будуть просити використання 426 00:22:08,949 --> 00:22:11,750 заповнити те, що відбувається під тілом. 427 00:22:11,750 --> 00:22:15,770 Може бути під тілом, ми маємо деяких діви або у нас є деякі пункти, 428 00:22:15,770 --> 00:22:19,160 і ми просимо вас заповнити дерево дуже схоже на це. 429 00:22:19,160 --> 00:22:21,440 Таким чином, ми будемо ходити через нього. 430 00:22:21,440 --> 00:22:26,120 Так Документ-Object Модель просто спосіб 431 00:22:26,120 --> 00:22:31,240 структурувати і думаю, про нашу HTML графічно. 432 00:22:31,240 --> 00:22:33,860 433 00:22:33,860 --> 00:22:35,840 А також, коли ми отримуємо в більш JavaScript, 434 00:22:35,840 --> 00:22:37,640 це буде так, що ми насправді 435 00:22:37,640 --> 00:22:39,990 маніпулювати різними елементи на сторінці. 436 00:22:39,990 --> 00:22:43,980 Нам потрібен спосіб, щоб отримати доступ друг речей в нашій HTML, 437 00:22:43,980 --> 00:22:48,050 і так що це дає нам дуже бетон стандартний спосіб 438 00:22:48,050 --> 00:22:51,010 в різних веб-сторінок, щоб зробити це. 439 00:22:51,010 --> 00:22:53,440 >> Так що, якщо ми просто пройти через це тут, звичайно 440 00:22:53,440 --> 00:22:56,790 наш документ як весь наш файл. 441 00:22:56,790 --> 00:22:59,350 Це, очевидно, має сенс що це найвище, 442 00:22:59,350 --> 00:23:03,520 і тоді ми маємо реальну HTML, що відповідає цій мітці тут. 443 00:23:03,520 --> 00:23:08,480 Також, якщо ви в абзаці Ваші теги належним чином, то створення цього дерева DOM 444 00:23:08,480 --> 00:23:10,530 стає супер просто. 445 00:23:10,530 --> 00:23:12,400 Отже, ми маємо деякі голови тут. 446 00:23:12,400 --> 00:23:15,780 У нас є тіло, ми бачимо стовбурових офф HTML, 447 00:23:15,780 --> 00:23:18,530 який є, чому ми повинні голову і тіло. 448 00:23:18,530 --> 00:23:22,880 У голові, у нас є деякі Тег заголовка, тег заголовка кінець, 449 00:23:22,880 --> 00:23:24,570 так що ми знаємо, що йде після голови. 450 00:23:24,570 --> 00:23:28,040 І в нашій тег заголовка, у нас є Hello, World. 451 00:23:28,040 --> 00:23:28,740 ОК? 452 00:23:28,740 --> 00:23:31,311 Так ось вся ця ліва рука філія. 453 00:23:31,311 --> 00:23:34,060 А потім правої гілки тут, ми бачимо, що у нас є HTML, 454 00:23:34,060 --> 00:23:38,680 ОК, ми зробили це головна частина, ми шукаємо тільки на тіло, 455 00:23:38,680 --> 00:23:40,670 тому ми маємо деякі області тіла. 456 00:23:40,670 --> 00:23:44,350 І в тому, що тільки що у нас є, привіт, світ. 457 00:23:44,350 --> 00:23:45,090 ОК? 458 00:23:45,090 --> 00:23:54,130 Якби ми мали щось на зразок деякі кронштейн р, а потім 459 00:23:54,130 --> 00:23:57,500 привіт, мир, а потім ще Кронштейн р побачення, мир, 460 00:23:57,500 --> 00:24:00,080 ми повинні були б два бульбашки сходить тут. 461 00:24:00,080 --> 00:24:05,550 Тому що вони обидва під тілом, але вони окремі пункти цієї справи. 462 00:24:05,550 --> 00:24:11,520 Існує, безумовно, практика на що в попередніх вікторин, 463 00:24:11,520 --> 00:24:14,570 а також великим онлайн на ній. 464 00:24:14,570 --> 00:24:18,260 Добре, таким чином, це тільки дозволяє Подивимося, все красиво 465 00:24:18,260 --> 00:24:20,810 і маніпулювати речі дуже систематично. 466 00:24:20,810 --> 00:24:21,340 ОК? 467 00:24:21,340 --> 00:24:23,640 Ми точно знаємо, як пройти через це дерево, 468 00:24:23,640 --> 00:24:26,910 так що ми знаємо, що ми хочемо отримати доступ. 469 00:24:26,910 --> 00:24:31,690 >> ОК, так що це, чому ми хочемо мати таку модель, 470 00:24:31,690 --> 00:24:35,190 так що ми можемо використовувати речі, як це, і ми розуміємо, що вони означають, 471 00:24:35,190 --> 00:24:38,370 і вони стандартизовані всіх речей, які ми робимо. 472 00:24:38,370 --> 00:24:45,900 Так документі точка назву тільки Назва our-- всі з них 473 00:24:45,900 --> 00:24:48,960 досить зрозумілі, Мені подобається думати. 474 00:24:48,960 --> 00:24:51,660 Так перші три приклади просто кажу, 475 00:24:51,660 --> 00:24:54,770 "Добре, дайте мені Назва цієї веб-сторінці ". 476 00:24:54,770 --> 00:24:58,030 Так це дасть вам те, що відповідає назві. 477 00:24:58,030 --> 00:25:01,880 >> Документ точка тіло буде дати вам все, що в цих тегів тіла. 478 00:25:01,880 --> 00:25:03,240 Таким чином, ви можете керувати цим. 479 00:25:03,240 --> 00:25:07,820 І крапка тіло документа точка введіть HTML є дуже класний, 480 00:25:07,820 --> 00:25:11,660 і, можливо, не схожий на супер Інтуїтивно зрозумілий, але внутрішня HTML 481 00:25:11,660 --> 00:25:13,740 відповідає цьому прямо тут. 482 00:25:13,740 --> 00:25:17,410 Так що якщо ви коли-небудь хотіли маніпулювати тексту на сторінці, 483 00:25:17,410 --> 00:25:22,700 як правило, ви збираєтеся робити щось з тілом точка внутрішньої HTML. 484 00:25:22,700 --> 00:25:23,820 ОК? 485 00:25:23,820 --> 00:25:31,341 Так внутрішня HTML, як правило, відносяться до що насправді між цими тегами. 486 00:25:31,341 --> 00:25:31,840 ОК? 487 00:25:31,840 --> 00:25:33,020 І тоді корисні функції. 488 00:25:33,020 --> 00:25:40,390 Так що, якщо ви хочете отримати будь-який з них, будь-який елемент, 489 00:25:40,390 --> 00:25:43,140 у нас є деякі Id, клас ім'я, або ім'я тега. 490 00:25:43,140 --> 00:25:47,100 Це дуже схоже на речі, які ми зробили з CSS, чи не так? 491 00:25:47,100 --> 00:25:51,360 Де у нас є деякі селектори, які відповідають або тега, клас 492 00:25:51,360 --> 00:25:53,800 що ми даємо їм, або Id. 493 00:25:53,800 --> 00:25:55,310 Це дуже точно так само. 494 00:25:55,310 --> 00:26:00,720 Якщо у вас є щось, що має клас собаки, 495 00:26:00,720 --> 00:26:05,800 а ви кажете, отримати елементи по імені тега, і ви поклали собаку в there-- або вибачте, 496 00:26:05,800 --> 00:26:06,610 Ім'я класу. 497 00:26:06,610 --> 00:26:07,770 Ви можете поставити крапку в там. 498 00:26:07,770 --> 00:26:11,780 Це буде повернути всі ті, елементи для вас, що цей клас. 499 00:26:11,780 --> 00:26:13,880 Таким чином, ви можете керувати тільки тим ,. 500 00:26:13,880 --> 00:26:18,430 Таким же чином, може бути, ви просто хочу працювати з деякими заголовок, так 501 00:26:18,430 --> 00:26:20,980 деякі заголовок h1, як ми зробили. 502 00:26:20,980 --> 00:26:24,900 Ви можете зробити отримати елементи за тегом ім'я, тому що h1 є ім'я тега. 503 00:26:24,900 --> 00:26:29,270 І таким же чином, якщо ви хочете отримати деякі унікальні речі, ви можете зробити отримати мітку. 504 00:26:29,270 --> 00:26:31,100 Отримати елемент, Id. 505 00:26:31,100 --> 00:26:32,710 І вони насправді багато з них. 506 00:26:32,710 --> 00:26:36,300 Це тільки, як три дуже багато. 507 00:26:36,300 --> 00:26:39,600 Так що, якщо ви йдете в Інтернеті, а Я збираюся заохочувати 508 00:26:39,600 --> 00:26:45,342 від вас, і робити деякі дослідження на свій розсуд, 509 00:26:45,342 --> 00:26:48,450 Я безумовно рекомендую заглядаючи в усі з них. 510 00:26:48,450 --> 00:26:50,880 Вони можуть бути супер корисно, особливо коли 511 00:26:50,880 --> 00:26:57,180 Ви хочете, щоб просто якась маніпулювати дуже конкретні речі, не маючи 512 00:26:57,180 --> 00:27:00,390 щоб пройти і спробувати щоб розібрати все. 513 00:27:00,390 --> 00:27:03,540 >> Отже, остання річ, є JavaScript події. 514 00:27:03,540 --> 00:27:10,730 Тому, коли я говорю раніше про перехід на веб-сайті, 515 00:27:10,730 --> 00:27:14,340 і коли ви наведіть курсор миші на щось, або ваш наведенні покажчика миші на щось, 516 00:27:14,340 --> 00:27:15,420 щось ще відбувається. 517 00:27:15,420 --> 00:27:17,900 Це те, що ми хотіли б думати про якість події. 518 00:27:17,900 --> 00:27:23,970 Отже, що ми маємо, які можуть бути корисним тут OnClick. 519 00:27:23,970 --> 00:27:29,140 Так що мій був на режимі висіння, які, я впевнений, це тільки на режимі висіння. 520 00:27:29,140 --> 00:27:31,300 Також тонна з них що ви можете шукати. 521 00:27:31,300 --> 00:27:34,340 Там-лайн весь список з різних речей 522 00:27:34,340 --> 00:27:37,130 що ви можете слухати. 523 00:27:37,130 --> 00:27:41,220 >> Але події JavaScript є в основному тільки у відповідь на речі 524 00:27:41,220 --> 00:27:42,430 що ваш користувач робить. 525 00:27:42,430 --> 00:27:42,930 Вірно? 526 00:27:42,930 --> 00:27:45,220 Так що ваш користувач робить те, що це подія, 527 00:27:45,220 --> 00:27:48,340 і JavaScript відповідатиме Однак ви хочете, щоб вона. 528 00:27:48,340 --> 00:27:49,770 Він буде реагувати відповідним чином. 529 00:27:49,770 --> 00:27:54,630 Так що в цьому випадку ми маємо деякі вікна точка OnLoad. 530 00:27:54,630 --> 00:27:57,170 Так що ж це говорить, "чекати поки завантажується вікно років ". 531 00:27:57,170 --> 00:27:57,780 ОК? 532 00:27:57,780 --> 00:28:02,102 Так, коли всі завантажено, OnLoad, то ви можете виконати цю функцію. 533 00:28:02,102 --> 00:28:03,810 Так коли все завантажений, ви збираєтеся 534 00:28:03,810 --> 00:28:07,760 мати деяку кнопку пошуку що отримує елемент, Id, 535 00:28:07,760 --> 00:28:13,740 і він друкує все, що елемент, як кнопки Пошук. 536 00:28:13,740 --> 00:28:17,050 А то у нас цю змінну, ми говоримо: "Добре, OnClick." 537 00:28:17,050 --> 00:28:20,390 Тому, коли ми чуємо клацання на кнопку Пошук, 538 00:28:20,390 --> 00:28:23,990 виконати цю функцію, яка попередження, ви натиснули на кнопку Пошук. 539 00:28:23,990 --> 00:28:28,910 >> Так що ж відбувається is-- це приємно трохи графічне представлення тут. 540 00:28:28,910 --> 00:28:31,480 Таким чином, наші завантаженні документа, це наша OnLoad, 541 00:28:31,480 --> 00:28:34,340 ми знаходимо Пошук Кнопка, яка полягає в наступному. 542 00:28:34,340 --> 00:28:36,570 Ми шукаємо для нашого кнопку пошуку. 543 00:28:36,570 --> 00:28:40,790 А потім, коли кнопка пошуку натиснув, воно відповідає прямо тут. 544 00:28:40,790 --> 00:28:41,980 OnClick. 545 00:28:41,980 --> 00:28:47,300 Тоді ми, нарешті, попередити нашого користувача, що це останній рядок тут. 546 00:28:47,300 --> 00:28:48,250 ОК? 547 00:28:48,250 --> 00:28:52,960 Таким чином, кожен з цих чотирьох кроків просто відповідає чотирьом коробки 548 00:28:52,960 --> 00:28:55,031 там на дні. 549 00:28:55,031 --> 00:28:56,405 Чи має це сенс для всіх? 550 00:28:56,405 --> 00:29:01,120 551 00:29:01,120 --> 00:29:05,200 >> І тоді єдине, що я буду просто кажучи дуже, дуже коротко, що я 552 00:29:05,200 --> 00:29:08,660 заохочувати вас, хлопці, подивіться більше в це 553 00:29:08,660 --> 00:29:13,210 JQuery, який знаходиться всього в бібліотеці який побудований на вершині JavaScript. 554 00:29:13,210 --> 00:29:16,480 Це супер корисно, тому що з більшістю бібліотек. 555 00:29:16,480 --> 00:29:18,320 Є багато функцій. 556 00:29:18,320 --> 00:29:21,930 Так що якщо є будь-коли щось, що Ви хочете зробити в JavaScript, 557 00:29:21,930 --> 00:29:24,880 Ваш перший інстинкт не повинно бути думати 558 00:29:24,880 --> 00:29:27,340 з ", які функції повинні Я код? "Вона повинна бути, 559 00:29:27,340 --> 00:29:29,560 "Дозвольте мені бачити когось це вже зробили це для мене ". 560 00:29:29,560 --> 00:29:32,800 Тому що в дев'яти випадках з десяти, хтось зробив це вже, 561 00:29:32,800 --> 00:29:35,760 і вони, ймовірно, зробили це краще. 562 00:29:35,760 --> 00:29:39,990 Люди витрачають багато часу на виконання цих, і JavaScript дуже широко використовується, 563 00:29:39,990 --> 00:29:42,810 так що люди постійно намагаючись зробити його кращим. 564 00:29:42,810 --> 00:29:47,110 І JQuery має багато функцій що, ймовірно, буде корисним для вас 565 00:29:47,110 --> 00:29:50,470 в остаточному проекті, якщо ви робити що-небудь з веб-дизайну. 566 00:29:50,470 --> 00:29:53,480 Як я люблю говорити, "робота розумніше, а не більше. " 567 00:29:53,480 --> 00:29:57,130 Якщо ви, хлопці, що це буде здорово. 568 00:29:57,130 --> 00:30:00,330 Коли ми перебуваємо в Hackathon я не хочу, щоб ви всі акцентував. 569 00:30:00,330 --> 00:30:03,600 Я хочу, щоб ви, як, "я отримав це. JQuery отримав мою спину. 570 00:30:03,600 --> 00:30:05,790 Мені не потрібно, щоб написати ці функції ". 571 00:30:05,790 --> 00:30:07,636 >> Так що просто дві речі пам'ятайте, що я збираюся 572 00:30:07,636 --> 00:30:10,220 щоб ви, хлопці, виглядають більш в JQuery на свій розсуд. 573 00:30:10,220 --> 00:30:13,070 Все, що я збираюся сказати, це робить деякі досить дивні речі 574 00:30:13,070 --> 00:30:15,220 і може зробити ваше життя набагато простіше. 575 00:30:15,220 --> 00:30:17,150 Але те, що ви хочете мати це будь-який файл, 576 00:30:17,150 --> 00:30:21,020 що ви збираєтеся використовувати його, Ви збираєтеся хочу, щоб ці два рядки. 577 00:30:21,020 --> 00:30:25,630 Ви будете хотіти Сценарій JS JQuery точок JS. 578 00:30:25,630 --> 00:30:28,500 А насправді ваш джерело буде деякі URL. 579 00:30:28,500 --> 00:30:35,870 Якщо ви Google JQuery, Google насправді приймає всі файли для вас. 580 00:30:35,870 --> 00:30:38,950 Таким чином, ви безумовно хочете, щоб вхід, який URL замість. 581 00:30:38,950 --> 00:30:41,130 Я просто поклав це тут для простоти. 582 00:30:41,130 --> 00:30:45,180 Все це означає, де Тут ви знайдете бібліотеку JQuery. 583 00:30:45,180 --> 00:30:48,600 Це масивний, так що ви не хочете розмістити його на вашому комп'ютері 584 00:30:48,600 --> 00:30:53,390 якщо ви можете уникнути його, тому ми як правило, просто покласти в URL Google про те, що 585 00:30:53,390 --> 00:30:55,880 приймає всі ці файли для вас. 586 00:30:55,880 --> 00:30:56,380 ОК? 587 00:30:56,380 --> 00:30:58,850 Ви Google це, я обіцяю він буде там. 588 00:30:58,850 --> 00:31:01,200 >> А потім все JavaScript-файл, який ви 589 00:31:01,200 --> 00:31:07,150 використовуючи, так що це просто якась зовнішня JavaScript-файл, який ви використовуєте. 590 00:31:07,150 --> 00:31:11,570 Таким же чином, що ми пов'язуємо з нашою допомогою CSS файли, це ж роді. 591 00:31:11,570 --> 00:31:15,480 Це тільки посилання на файл де ваш JavaScript є. 592 00:31:15,480 --> 00:31:18,970 І в мене є кілька прикладів з простим JavaScript. 593 00:31:18,970 --> 00:31:20,220 Таким чином, ми будемо йти через нього. 594 00:31:20,220 --> 00:31:27,230 І тоді в індексі JavaScript, який є вашим JavaScript файл тут, 595 00:31:27,230 --> 00:31:30,900 це ніби обгортки що у вас є для JQuery. 596 00:31:30,900 --> 00:31:33,860 Ти майже 99,9 відсотків часу збирається 597 00:31:33,860 --> 00:31:36,800 мати це у вашому index.js файлу. 598 00:31:36,800 --> 00:31:40,010 Тому що те, що це говорить у тому, "Нічого не виконувати 599 00:31:40,010 --> 00:31:43,480 поки ваш документ не є насправді готовий ", який є саме те, що ви хочете. 600 00:31:43,480 --> 00:31:46,600 Тому що, якщо ваш документ не готовий, і JQuery починає робити речі, 601 00:31:46,600 --> 00:31:48,020 це просто бардак. 602 00:31:48,020 --> 00:31:50,480 Таким чином, ви завжди хочете, щоб цей обгортку. 603 00:31:50,480 --> 00:31:55,760 А потім речі, які йдуть туди, я залишимо власної переглядаючи ваші хлопці. 604 00:31:55,760 --> 00:32:04,610 >> Отже, є які-небудь питання право Тепер про JavaScript в цілому? 605 00:32:04,610 --> 00:32:07,420 Або модель DOM? 606 00:32:07,420 --> 00:32:10,780 Якщо ні, у нас є якийсь класний Приклади, які ми можемо пройти, 607 00:32:10,780 --> 00:32:13,120 що ви, хлопці, можете допомогти мені код. 608 00:32:13,120 --> 00:32:15,877 Але я також буде супер красиво, і якщо ви 609 00:32:15,877 --> 00:32:17,960 не хочу, щоб щось сказати Для них це нормально. 610 00:32:17,960 --> 00:32:20,510 Я також можу просто дати вам приклади. 611 00:32:20,510 --> 00:32:24,581 Але нічого на PowerPoint, перш ніж ми перейдемо? 612 00:32:24,581 --> 00:32:25,080 Круто. 613 00:32:25,080 --> 00:32:26,990 >> Я відчуваю, що ви, хлопці, повинні енергії. 614 00:32:26,990 --> 00:32:31,516 Так що я думаю, що ми збираємося почати з моєї Наприклад партійної першу чергу. 615 00:32:31,516 --> 00:32:33,390 У нас є три приклади, у вас є вибір. 616 00:32:33,390 --> 00:32:37,720 Отже, ми маємо годинник, куди ми йдемо здійснити фактичний годинник, який років 617 00:32:37,720 --> 00:32:41,430 буду оновлювати, як спливає час. 618 00:32:41,430 --> 00:32:43,310 У нас є великий функції Twitter. 619 00:32:43,310 --> 00:32:44,560 This-- ви знаєте, що, тримайся. 620 00:32:44,560 --> 00:32:47,220 Ми збираємося зробити це піти. 621 00:32:47,220 --> 00:32:47,950 Bam. 622 00:32:47,950 --> 00:32:49,060 ОК. 623 00:32:49,060 --> 00:32:56,132 >> У нас є великий функції Twitter тут, that-- Я знаю, правильно? 624 00:32:56,132 --> 00:32:57,090 Це буде здорово. 625 00:32:57,090 --> 00:32:58,350 Раді вам, хлопці? 626 00:32:58,350 --> 00:33:01,170 Ось що відбувається, щоб підрахувати кількість символів, які ви залишили, 627 00:33:01,170 --> 00:33:04,520 так що якщо я друкую прямо зараз, Очевидно, він як і раніше говорить 140, 628 00:33:04,520 --> 00:33:06,190 але ми знаємо, що це не так. 629 00:33:06,190 --> 00:33:08,570 А потім з нашої останньої тут, натисніть тут, щоб святкувати. 630 00:33:08,570 --> 00:33:12,150 Що станеться, коли ми натискаємо, фон років 631 00:33:12,150 --> 00:33:13,340 збирається міняти кольори. 632 00:33:13,340 --> 00:33:17,060 Так що ви, хлопці, є свої варіанти що ви хочете зробити в першу чергу. 633 00:33:17,060 --> 00:33:19,800 Я обіцяю, що візьму його дуже легко на вас. 634 00:33:19,800 --> 00:33:22,680 Я відчуваю, що все начебто просто дуже низький ключ сьогодні. 635 00:33:22,680 --> 00:33:25,540 Так що я буду ходити вам, як ми будемо здійснювати всі ці. 636 00:33:25,540 --> 00:33:28,520 Якщо ви хочете, щоб дзвонити в, це здорово, але я 637 00:33:28,520 --> 00:33:30,020 відчуваю, що все це трохи втомився. 638 00:33:30,020 --> 00:33:32,970 Так що я буду просто ходити вас ці приклади. 639 00:33:32,970 --> 00:33:35,015 У нас є те, що ми хотіли б зробити в першу чергу? 640 00:33:35,015 --> 00:33:38,140 641 00:33:38,140 --> 00:33:39,475 Хто-небудь? 642 00:33:39,475 --> 00:33:41,350 Ні уподобання? 643 00:33:41,350 --> 00:33:41,867 ОК. 644 00:33:41,867 --> 00:33:42,450 Знаєш що? 645 00:33:42,450 --> 00:33:43,290 Ми на стороні. 646 00:33:43,290 --> 00:33:48,380 Я відчуваю, що ви, хлопці, потрібно little-- Таким чином, ми зробимо сторону за один перший. 647 00:33:48,380 --> 00:33:48,880 ОК. 648 00:33:48,880 --> 00:33:51,470 649 00:33:51,470 --> 00:33:56,930 >> Отже, що ми маємо here-- це не повинні бути там. 650 00:33:56,930 --> 00:33:57,910 Тепер це добре. 651 00:33:57,910 --> 00:33:59,810 ОК. 652 00:33:59,810 --> 00:34:03,110 Отже, що ми маємо тут справу тільки простий HTML сторінки 653 00:34:03,110 --> 00:34:07,840 що ви, хлопці повинні все бути супер знайомі з ваших останніх двох psets. 654 00:34:07,840 --> 00:34:10,212 у нас є тип документа тут. 655 00:34:10,212 --> 00:34:10,920 Може все бачать? 656 00:34:10,920 --> 00:34:11,420 ОК. 657 00:34:11,420 --> 00:34:12,560 Круто. 658 00:34:12,560 --> 00:34:13,900 У нас є HTML очевидно. 659 00:34:13,900 --> 00:34:18,360 У нас є заголовок, який є пов'язана з таблицею стилів, що 660 00:34:18,360 --> 00:34:21,420 тільки що зробив мій шрифт красивий і великий і жирний. 661 00:34:21,420 --> 00:34:23,489 Так що не турбуйтеся про це. 662 00:34:23,489 --> 00:34:26,437 >> У нас є тіло з Id фон, ОК? 663 00:34:26,437 --> 00:34:28,520 Тому що ми збираємося бути зміна фону. 664 00:34:28,520 --> 00:34:31,964 Тому, коли ми міняємо фон нашого тіла, 665 00:34:31,964 --> 00:34:35,965 ми пам'ятаємо з два тижні тому коли ми маємо справу з веб-сторінок. 666 00:34:35,965 --> 00:34:36,840 Так добре, що це. 667 00:34:36,840 --> 00:34:39,270 І у нас є деякі Id дорівнює партію. 668 00:34:39,270 --> 00:34:43,909 Це ч Ref фунт просто означає, що це буде йти в тій же сторінці. 669 00:34:43,909 --> 00:34:47,120 І натисніть тут, щоб святкувати, який є, чому, коли ми натискаємо її, 670 00:34:47,120 --> 00:34:48,940 він повинен змінити колір, на щастя. 671 00:34:48,940 --> 00:34:54,322 >> А то у нас деякий скрипт тут просто пов'язані з цієї партії точкових JS 672 00:34:54,322 --> 00:34:58,100 файл, який порожній, тому що ми ще нічого не зроблено. 673 00:34:58,100 --> 00:35:00,450 І це так сумно. 674 00:35:00,450 --> 00:35:06,100 Але дуже скоро, вона буде змінюватися кольору, і це буде дивним. 675 00:35:06,100 --> 00:35:10,520 >> Так що я просто буду ходити вам, хлопці, з тим, як ми могли б підійти до цього. 676 00:35:10,520 --> 00:35:14,030 Так перше, що ми могли б зробити, 677 00:35:14,030 --> 00:35:18,050 Якщо ми міняємо фон тіло, перше, що ми могли б 678 00:35:18,050 --> 00:35:22,730 зробити, це насправді захопити що тіло, чи не так? 679 00:35:22,730 --> 00:35:27,690 Тому ми хочемо, щоб мати суму, наша фон, і, якщо ви помітили, 680 00:35:27,690 --> 00:35:29,567 Я просто автоматично просто почати друкувати. 681 00:35:29,567 --> 00:35:32,400 Там немає нічого особливого, що ми потрібно зробити для наших файлів JavaScript. 682 00:35:32,400 --> 00:35:35,820 Я можу почати оголошенні змінних, і оголосити випадкових функцій. 683 00:35:35,820 --> 00:35:38,110 І це набагато більш вільній формі. 684 00:35:38,110 --> 00:35:41,930 Це як з C, ми дали вам все Ці жорсткі правила, і ви виросли, 685 00:35:41,930 --> 00:35:43,220 так що ми начебто, "йти вперед. 686 00:35:43,220 --> 00:35:44,000 Бути вільним. 687 00:35:44,000 --> 00:35:44,870 Робіть те, що ви хочете ". 688 00:35:44,870 --> 00:35:46,280 І ось що JavaScript є. 689 00:35:46,280 --> 00:35:48,390 Отже, ми маємо певний досвід тут. 690 00:35:48,390 --> 00:35:55,900 З нашої моделі DOM, ми знаємо, може зробити документ точка отримати елемент, 691 00:35:55,900 --> 00:36:00,290 і якщо ми помічаємо тут, наше тіло має свій ідентифікатор. 692 00:36:00,290 --> 00:36:00,930 Вірно? 693 00:36:00,930 --> 00:36:06,310 Таким чином, ми можемо зробити отримати документ, Id, а от просто. 694 00:36:06,310 --> 00:36:08,295 Що наша Id, що ми хочемо тут? 695 00:36:08,295 --> 00:36:09,170 АУДИТОРІЯ: Background. 696 00:36:09,170 --> 00:36:11,280 Аллісон Бухгольц-AU: Background. 697 00:36:11,280 --> 00:36:12,230 Ідеально підходить. 698 00:36:12,230 --> 00:36:14,250 І крапку з комою в кінці. 699 00:36:14,250 --> 00:36:15,610 Це ще не пішов. 700 00:36:15,610 --> 00:36:17,330 Ви як і раніше потрібні ваші коми. 701 00:36:17,330 --> 00:36:17,830 ОК. 702 00:36:17,830 --> 00:36:19,690 Так от наша перша. 703 00:36:19,690 --> 00:36:23,880 І коли ми натискаємо щось, ми хочете щось трапиться, вірно? 704 00:36:23,880 --> 00:36:28,270 Таким чином, ми, можливо, захочете деяка змінна що чекає за клік. 705 00:36:28,270 --> 00:36:32,410 Те, що ми збираємося зробити, це ми збираємося зробити наше посилання більше схожа на кнопки. 706 00:36:32,410 --> 00:36:43,140 Таким чином, ми будемо мати деякий кнопку, дорівнює документ точка отримати елемент, Id. 707 00:36:43,140 --> 00:36:48,670 І якщо я говорю про натисніть посилання або натисніть тут, щоб святкувати 708 00:36:48,670 --> 00:36:51,850 з'єднання, що може мій Id бути тут? 709 00:36:51,850 --> 00:36:52,590 Партія. 710 00:36:52,590 --> 00:36:55,200 Правильно. 711 00:36:55,200 --> 00:36:56,500 ОК не так уже й погано досі. 712 00:36:56,500 --> 00:36:59,060 Всі отримують те, що ми робимо? 713 00:36:59,060 --> 00:37:02,100 >> Отже, тепер у нас є Кнопка, і ми хочемо, 714 00:37:02,100 --> 00:37:04,140 речі, щоб змінитися, коли ми натискаємо на нього. 715 00:37:04,140 --> 00:37:08,750 Так що, якщо ми пам'ятаємо з нашого PowerPoint, дуже проста річ ми можемо зробити 716 00:37:08,750 --> 00:37:12,140 це просто кнопка точка OnClick, чи не так? 717 00:37:12,140 --> 00:37:14,750 718 00:37:14,750 --> 00:37:18,730 І це буде дорівнювати деякі функції. 719 00:37:18,730 --> 00:37:20,620 Це анонімна функція. 720 00:37:20,620 --> 00:37:24,620 І це тільки as-- насправді я збирається зробити це трохи більше. 721 00:37:24,620 --> 00:37:27,330 >> Так що я тільки що зробив тут я кажу, добре, 722 00:37:27,330 --> 00:37:31,810 Коли ми натискаємо нашу кнопку, яка є це посилання, що ми тільки що говорив, 723 00:37:31,810 --> 00:37:34,270 ми збираємося виконати Ця анонімна функція. 724 00:37:34,270 --> 00:37:35,845 Нам не потрібно будь-яких витрат. 725 00:37:35,845 --> 00:37:37,220 Ми не хвилює, що говорить користувач. 726 00:37:37,220 --> 00:37:38,800 Якщо натиснути на нього, ми буде робити все, що ми хочемо, 727 00:37:38,800 --> 00:37:40,660 що змінити колір фону. 728 00:37:40,660 --> 00:37:42,640 ОК? 729 00:37:42,640 --> 00:37:47,224 Так ось чому у нас немає ніяких входів, ми просто повинні це анонімну функцію. 730 00:37:47,224 --> 00:37:49,390 І тепер ми насправді відбувається записати цю функцію. 731 00:37:49,390 --> 00:37:55,040 >> Так що купа способів може генерувати випадковий колір. 732 00:37:55,040 --> 00:37:59,010 Так, що я зробив це було генерувати три випадкових чисел 733 00:37:59,010 --> 00:38:01,910 і конвертувати їх в RGB трійки. 734 00:38:01,910 --> 00:38:06,130 Так що це зайвий раз показує, якийсь класний речі, які, якщо ви, як "О, 735 00:38:06,130 --> 00:38:08,464 Мені потрібно створити випадковий число. "Якщо ви в пошуковій системі Google його, 736 00:38:08,464 --> 00:38:09,630 це те, що ви знайдете. 737 00:38:09,630 --> 00:38:17,580 >> Таким чином, ми маємо три різних речі, Вар, що не знову червоний, зелений. 738 00:38:17,580 --> 00:38:18,080 Вірно? 739 00:38:18,080 --> 00:38:20,740 Так що ті три речі, які становлять колір. 740 00:38:20,740 --> 00:38:22,220 Синій, червоний і зелений. 741 00:38:22,220 --> 00:38:22,960 Круто. 742 00:38:22,960 --> 00:38:27,050 І що ми можемо зробити, це, що ми знаємо що він повинен бути в межах від 255, 743 00:38:27,050 --> 00:38:30,140 і якби ви дивилися на деякі генератор випадкових чисел, 744 00:38:30,140 --> 00:38:36,000 ви могли б отримати щось на зразок математики точка випадковим чином, які, якщо ви подивитеся це вгору 745 00:38:36,000 --> 00:38:39,230 повертає до деякого числа між нулем і одиницею. 746 00:38:39,230 --> 00:38:39,980 ОК? 747 00:38:39,980 --> 00:38:44,470 І те, що цифри не наш RGB трійки йти між ними? 748 00:38:44,470 --> 00:38:47,240 Нуль і що? 749 00:38:47,240 --> 00:38:49,000 Що вони можуть піти до? 750 00:38:49,000 --> 00:38:49,950 255. 751 00:38:49,950 --> 00:38:53,320 Так що, якщо математика точка випадковим йде між нулем і одиницею, 752 00:38:53,320 --> 00:38:56,365 як ми можемо хочу, щоб перетворити це? 753 00:38:56,365 --> 00:38:56,990 АУДИТОРІЯ: Час? 754 00:38:56,990 --> 00:38:57,830 Аллісон Бухгольц-AU: Так, саме так. 755 00:38:57,830 --> 00:38:58,677 Так що час є 255. 756 00:38:58,677 --> 00:39:00,888 >> АУДИТОРІЯ: [нерозбірливо] Це як [нерозбірливо]. 757 00:39:00,888 --> 00:39:02,471 Аллісон Бухгольц-AU: Math точка випадковим чином. 758 00:39:02,471 --> 00:39:03,096 АУДИТОРІЯ: Круто. 759 00:39:03,096 --> 00:39:04,580 Аллісон Бухгольц-AU: Так. 760 00:39:04,580 --> 00:39:06,300 JavaScript просто піклується про вас. 761 00:39:06,300 --> 00:39:07,580 ОК. 762 00:39:07,580 --> 00:39:09,360 Таким чином, ми можемо зробити це для всіх з них. 763 00:39:09,360 --> 00:39:10,540 Вірно? 764 00:39:10,540 --> 00:39:16,480 Математика точка випадкові моменти часу 255. 765 00:39:16,480 --> 00:39:17,740 Розмістіть цей. 766 00:39:17,740 --> 00:39:18,820 Круто. 767 00:39:18,820 --> 00:39:23,350 Так справа в тому, це може не повертають ціле число. 768 00:39:23,350 --> 00:39:24,080 Вірно? 769 00:39:24,080 --> 00:39:26,450 Може бути, ми отримаємо деяку кількість між нулем і одиницею, 770 00:39:26,450 --> 00:39:32,150 і це призводить до його злегка вимкнений, і наші RGBS не може бути поплавці. 771 00:39:32,150 --> 00:39:33,360 Вони повинні бути Інтс. 772 00:39:33,360 --> 00:39:37,610 Так що якщо ви пробували це, це, напевно, є дивна поведінка. 773 00:39:37,610 --> 00:39:38,810 Було б трохи наляканий. 774 00:39:38,810 --> 00:39:43,200 Отже, що ми робимо, ми хочемо, щоб Переконайтеся, що вони округлі, 775 00:39:43,200 --> 00:39:45,400 і ви могли б округлити в будь-якому випадку. 776 00:39:45,400 --> 00:39:47,110 Я округлив з підлогою. 777 00:39:47,110 --> 00:39:49,680 Так що я завжди впевнений, що округлюється в меншу сторону. 778 00:39:49,680 --> 00:39:54,440 Але йдуть, як це просто було просто отримати випадкове число, 779 00:39:54,440 --> 00:39:57,920 як ви думаєте, ми може поверх цей номер? 780 00:39:57,920 --> 00:40:00,720 Це дуже схоже. 781 00:40:00,720 --> 00:40:02,810 Будь-яка ідея? 782 00:40:02,810 --> 00:40:06,450 Так що, якщо випадкова був просто математика точка випадковим, так що ви думаєте, що ми зробимо пол? 783 00:40:06,450 --> 00:40:09,670 Математика точка підлогу. 784 00:40:09,670 --> 00:40:11,340 І ви також можете зробити математику точка стелю. 785 00:40:11,340 --> 00:40:14,030 Круглий начебто неоднозначно Тому що ви не 786 00:40:14,030 --> 00:40:16,110 чи знаєте округляти вгору або округлити. 787 00:40:16,110 --> 00:40:20,797 Так, як правило, ми завжди робимо математику точка підлогу, математика точка стелю. 788 00:40:20,797 --> 00:40:21,380 Але honestly-- 789 00:40:21,380 --> 00:40:22,780 >> АУДИТОРІЯ: Чи підлогу округлити? 790 00:40:22,780 --> 00:40:24,740 >> Аллісон Бухгольц-AU: житлова округлює. 791 00:40:24,740 --> 00:40:26,990 І це тільки вибір з мого боку. 792 00:40:26,990 --> 00:40:32,370 >> Так що тепер у нас є три номери які були випадковим чином, 793 00:40:32,370 --> 00:40:36,610 і те, що ми збираємося зробити зараз, це ми просто хочу, щоб змінити фон. 794 00:40:36,610 --> 00:40:37,310 ОК? 795 00:40:37,310 --> 00:40:41,490 Таким чином, ми вже маємо нашу фон роду зберігається 796 00:40:41,490 --> 00:40:43,280 У цьому елементі під назвою фон. 797 00:40:43,280 --> 00:40:47,300 Так що ви помітите, якщо Ви грали навколо з цим, 798 00:40:47,300 --> 00:40:50,460 ми хочемо, щоб змінити стиль. 799 00:40:50,460 --> 00:40:53,812 І це начебто те, що Ви б Google і з'ясувати, 800 00:40:53,812 --> 00:40:55,020 подобається, як змінити колір. 801 00:40:55,020 --> 00:40:59,210 >> Але спосіб доступу цей колір фон точка стиль точка фон. 802 00:40:59,210 --> 00:41:03,490 Так що це висловлювання з урахуванням цей об'єкт, тло, 803 00:41:03,490 --> 00:41:06,920 який відноситься до того, що елемент Id там, 804 00:41:06,920 --> 00:41:10,690 ми будемо дивитися на стиль в стилі, 805 00:41:10,690 --> 00:41:13,280 ми будемо дивитися на задньому плані. 806 00:41:13,280 --> 00:41:14,270 ОК? 807 00:41:14,270 --> 00:41:17,630 І якщо ви йдете і дивитеся від цього, це може зробити трохи більше сенсу, 808 00:41:17,630 --> 00:41:21,930 але це в основному просто кажу, "Дайте мені цю дуже специфічну атрибут 809 00:41:21,930 --> 00:41:25,770 що я визначив раніше ". 810 00:41:25,770 --> 00:41:32,340 Так що ми міняємо його на це деякі RGB, тому що це має сенс. 811 00:41:32,340 --> 00:41:34,780 Ми використовуємо RGB трійок, чи не так? 812 00:41:34,780 --> 00:41:41,530 І ми have-- я хочу переконатися, що я отримати потрібну кількість цитат тут. 813 00:41:41,530 --> 00:41:43,940 Отже, що ми робимо, ми повинні RGB, і ми збираємося 814 00:41:43,940 --> 00:41:46,800 to-- це як об'єднання, яке в червоний колір. 815 00:41:46,800 --> 00:41:50,030 816 00:41:50,030 --> 00:41:52,610 А потім ми хочемо трохи кому. 817 00:41:52,610 --> 00:41:59,925 А потім ми хочемо плюс зелений, то деякі кома, а деякі синій. 818 00:41:59,925 --> 00:42:10,640 819 00:42:10,640 --> 00:42:14,120 >> Таким чином, ці плюси просто значить конкатенацію. 820 00:42:14,120 --> 00:42:19,810 Так що це просто створення цього Рядок, відбувається в RGB. 821 00:42:19,810 --> 00:42:20,310 ОК? 822 00:42:20,310 --> 00:42:23,200 823 00:42:23,200 --> 00:42:26,684 >> АУДИТОРІЯ: [нерозбірливо] плюс те зелений плюс те червоним. 824 00:42:26,684 --> 00:42:30,163 >> Аллісон Бухгольц-AU: Так, тому що я зіпсував, що до. 825 00:42:30,163 --> 00:42:30,890 Що один нормально. 826 00:42:30,890 --> 00:42:32,110 О, тримайся. 827 00:42:32,110 --> 00:42:32,610 Ні. 828 00:42:32,610 --> 00:42:36,770 Тому що мені потрібна, щоб переконатися, що я отримав всі ці права. 829 00:42:36,770 --> 00:42:39,680 830 00:42:39,680 --> 00:42:43,950 Так що я буду пояснювати в ООН Momento. 831 00:42:43,950 --> 00:42:47,040 Зелений, синій, досконалим. 832 00:42:47,040 --> 00:42:47,971 Тепер я зробив. 833 00:42:47,971 --> 00:42:48,470 Я вважаю. 834 00:42:48,470 --> 00:42:51,570 835 00:42:51,570 --> 00:42:52,530 >> ОК. 836 00:42:52,530 --> 00:42:58,085 Так що ж це, є те, що фон збирається бути встановлений в деякій рядка. 837 00:42:58,085 --> 00:42:58,585 Вірно? 838 00:42:58,585 --> 00:42:59,710 Що ми маємо тут. 839 00:42:59,710 --> 00:43:05,870 Це буде якийсь RGB 255 кома 255 кома нуль, або щось число, яке ви 840 00:43:05,870 --> 00:43:06,512 Тобто там. 841 00:43:06,512 --> 00:43:08,220 Так що ми тут робимо, у нас є деякі рядки. 842 00:43:08,220 --> 00:43:11,910 І те, що ми хочемо зробити, це ми вид динамічного створення 843 00:43:11,910 --> 00:43:14,010 що, коли ми насправді запустити цю програму. 844 00:43:14,010 --> 00:43:16,570 Так що це деяка рядок. 845 00:43:16,570 --> 00:43:20,290 Плюс об'єднує його з значення, яке має червоний, 846 00:43:20,290 --> 00:43:23,320 який об'єднує його з кома, яка об'єднує його 847 00:43:23,320 --> 00:43:26,090 з тим, що зелений і так далі, і тому подібне. 848 00:43:26,090 --> 00:43:26,660 ОК? 849 00:43:26,660 --> 00:43:32,210 До кінця, який закриття дужок цього RGB тут. 850 00:43:32,210 --> 00:43:32,800 ОК? 851 00:43:32,800 --> 00:43:37,230 >> Так що це буде генерувати якусь команду дійсно 852 00:43:37,230 --> 00:43:42,770 що RGB з трьох чисел що фон тепер встановлений у положення. 853 00:43:42,770 --> 00:43:43,940 ОК? 854 00:43:43,940 --> 00:43:46,510 Отже, давайте подивимося, якщо це працює. 855 00:43:46,510 --> 00:43:49,720 Я сподіваюся, що він робить, бо якщо він нє, я збираюся бути реальним сумно. 856 00:43:49,720 --> 00:43:50,250 О, ні. 857 00:43:50,250 --> 00:43:52,710 Добре, тримайся. 858 00:43:52,710 --> 00:43:56,730 Безумовно фон точка стиль точка фон. 859 00:43:56,730 --> 00:43:59,569 Я безумовно не вистачає то якраз невелика. 860 00:43:59,569 --> 00:44:00,610 Чи є у вас, хлопці ненавиджу це? 861 00:44:00,610 --> 00:44:04,020 Коли це просто маленькі помилки? 862 00:44:04,020 --> 00:44:04,990 Всемогутній фон. 863 00:44:04,990 --> 00:44:08,391 864 00:44:08,391 --> 00:44:08,890 RGB. 865 00:44:08,890 --> 00:44:09,765 >> АУДИТОРІЯ: [нерозбірливо] 866 00:44:09,765 --> 00:44:11,729 867 00:44:11,729 --> 00:44:12,770 Аллісон Бухгольц-AU: Немає 868 00:44:12,770 --> 00:44:14,050 Я спробував це перед класом. 869 00:44:14,050 --> 00:44:16,570 У мене є все, що я зробив, перш ніж клас у випадку, якщо я був би, 870 00:44:16,570 --> 00:44:17,970 "Чекати, що я зробив не так?" 871 00:44:17,970 --> 00:44:23,190 Тому що я був би, "Я, ймовірно, споганити в якийсь момент ". 872 00:44:23,190 --> 00:44:24,150 Плюс зелений. 873 00:44:24,150 --> 00:44:26,250 Все виглядає, як ніби це об'єднуються правильно. 874 00:44:26,250 --> 00:44:29,620 875 00:44:29,620 --> 00:44:30,520 ОК. 876 00:44:30,520 --> 00:44:31,870 >> АУДИТОРІЯ: [нерозбірливо] 877 00:44:31,870 --> 00:44:33,810 >> Аллісон Бухгольц-AU: О, там ви йдете. 878 00:44:33,810 --> 00:44:35,520 Ось що мені було потрібно. 879 00:44:35,520 --> 00:44:36,805 Подивіться на це. 880 00:44:36,805 --> 00:44:40,090 Tiffany, щоб врятувати. 881 00:44:40,090 --> 00:44:40,590 Ідеально підходить. 882 00:44:40,590 --> 00:44:41,090 ОК. 883 00:44:41,090 --> 00:44:43,834 Тепер давайте подивимося, чи працює він. 884 00:44:43,834 --> 00:44:44,816 Боже мій. 885 00:44:44,816 --> 00:44:45,641 ОК. 886 00:44:45,641 --> 00:44:46,140 Утримувати. 887 00:44:46,140 --> 00:44:48,280 >> АУДИТОРІЯ: Space після другої плюс. 888 00:44:48,280 --> 00:44:50,310 >> Аллісон Бухгольц-AU: Яка? 889 00:44:50,310 --> 00:44:52,910 Ой, почекайте, почекайте. 890 00:44:52,910 --> 00:44:54,870 Космічна одяг? 891 00:44:54,870 --> 00:44:57,209 >> АУДИТОРІЯ: Другий плюс в зелений об'єднання. 892 00:44:57,209 --> 00:44:58,250 Аллісон Бухгольц-AU: Ой. 893 00:44:58,250 --> 00:44:59,570 АУДИТОРІЯ: Там немає місця після плюсі, так. 894 00:44:59,570 --> 00:45:00,790 Аллісон Бухгольц-AU: Ви не потрібно, но-- 895 00:45:00,790 --> 00:45:01,190 АУДИТОРІЯ: О, ви не знаєте? 896 00:45:01,190 --> 00:45:01,910 Аллісон Бухгольц-AU: Це виглядає красиво. 897 00:45:01,910 --> 00:45:02,530 АУДИТОРІЯ: OK. 898 00:45:02,530 --> 00:45:03,030 ОК. 899 00:45:03,030 --> 00:45:05,170 >> Аллісон Бухгольц AU: Давайте подивимося, якщо це працює. 900 00:45:05,170 --> 00:45:05,670 ОК. 901 00:45:05,670 --> 00:45:07,836 Очевидно, я з провалом на це демо, який нагадує мені 902 00:45:07,836 --> 00:45:12,810 з лекції на два тижні, але я знаю, що це буде працювати. 903 00:45:12,810 --> 00:45:15,860 Я знаю, що це буде працювати. 904 00:45:15,860 --> 00:45:16,580 Так близько. 905 00:45:16,580 --> 00:45:22,330 Якщо я випадково не видалити мій сценарій на цьому. 906 00:45:22,330 --> 00:45:24,035 Ні, це партійні точкові JS. 907 00:45:24,035 --> 00:45:25,776 ОК триматися. 908 00:45:25,776 --> 00:45:28,650 Я збираюся копіювати це, і я теж просто хочу, щоб видалити всі, 909 00:45:28,650 --> 00:45:30,108 бо я цей робочий раніше. 910 00:45:30,108 --> 00:45:32,470 911 00:45:32,470 --> 00:45:33,770 >> Я обіцяю, що це працює. 912 00:45:33,770 --> 00:45:36,160 Якщо ні, то я покажу вам, що Томмі є. 913 00:45:36,160 --> 00:45:38,890 І там. 914 00:45:38,890 --> 00:45:42,380 >> АУДИТОРІЯ: Ви посилання партію точка CSS, і це партія точкові JS. 915 00:45:42,380 --> 00:45:45,940 >> Аллісон Бухгольц-AU: А, ну тут є учасником точкові JS. 916 00:45:45,940 --> 00:45:49,187 Добре, що я зробив по-іншому? 917 00:45:49,187 --> 00:45:50,520 Добре, ми побачимо, якщо це тепер працює. 918 00:45:50,520 --> 00:45:54,180 919 00:45:54,180 --> 00:45:54,980 Bam. 920 00:45:54,980 --> 00:46:02,110 Таким чином, я не знаю, що я зробив по-іншому, але це те, що мало статися. 921 00:46:02,110 --> 00:46:03,230 Круто. 922 00:46:03,230 --> 00:46:06,650 Я натиснув на це, начебто, назавжди. 923 00:46:06,650 --> 00:46:11,185 Але ми можемо спробувати і подивитися, що я зробив інакше, що це треба було. 924 00:46:11,185 --> 00:46:14,560 Я не знаю, про вас, хлопці, але це виглядає в основному те, що я тільки що написав. 925 00:46:14,560 --> 00:46:17,950 Був, імовірно, відсутня крапка з комою десь моя справа. 926 00:46:17,950 --> 00:46:22,064 Насправді після цього, я думаю, що я пропав безвісти Крапка з комою тут насправді. 927 00:46:22,064 --> 00:46:24,230 Але я не міг бачити, бо це було на екрані. 928 00:46:24,230 --> 00:46:29,040 >> Але якщо ми помічаємо, що це дуже багато саме те, що я тільки що написав. 929 00:46:29,040 --> 00:46:33,010 Я думаю, що, ймовірно, найважча частина про це просто якась цю річ право 930 00:46:33,010 --> 00:46:36,830 тут, розуміння те, що він там робить. 931 00:46:36,830 --> 00:46:42,230 Ці види речей, які ви дізнаєтеся дійсно просто погуглити і чесно 932 00:46:42,230 --> 00:46:42,880 просто намагаюся. 933 00:46:42,880 --> 00:46:46,770 Якщо ви думаєте, є якась атрибутів, там, ймовірно, є. 934 00:46:46,770 --> 00:46:48,382 Так спробуйте. 935 00:46:48,382 --> 00:46:49,090 Подивіться, що відбувається. 936 00:46:49,090 --> 00:46:53,000 Як я вже сказав, є багато експериментування з JavaScript, 937 00:46:53,000 --> 00:46:56,810 і PHP, і все, що матеріал, і CSS особливо. 938 00:46:56,810 --> 00:47:00,046 Ось тільки правда спосіб зрозуміти це. 939 00:47:00,046 --> 00:47:07,100 >> Отже, після цього фіаско з партією точкові JS, у нас є два інших варіанти. 940 00:47:07,100 --> 00:47:10,650 У нас є годинник або Twitter. 941 00:47:10,650 --> 00:47:12,190 Вони обидва цікаво. 942 00:47:12,190 --> 00:47:17,720 Може бути, не так весело, як партії, який мав трохи прохолодної стробирования 943 00:47:17,720 --> 00:47:19,595 що в кінці. 944 00:47:19,595 --> 00:47:21,714 Як ви, хлопці, є якісь переваги? 945 00:47:21,714 --> 00:47:22,380 АУДИТОРІЯ: годинник? 946 00:47:22,380 --> 00:47:22,950 Аллісон Бухгольц-AU: годинник? 947 00:47:22,950 --> 00:47:23,450 ОК. 948 00:47:23,450 --> 00:47:25,390 Круто. 949 00:47:25,390 --> 00:47:30,460 >> Отже, ще раз, у нас є порожній файл JavaScript. 950 00:47:30,460 --> 00:47:35,800 І, як ми бачимо, тут ми є дуже простий HTML. 951 00:47:35,800 --> 00:47:40,010 У нас є таблиця стилів, які просто Формати, що вона повинна виглядати. 952 00:47:40,010 --> 00:47:42,860 У нас є DIV з Ідентифікатор годинник, який 953 00:47:42,860 --> 00:47:44,420 просто говорить, "це має бути годинник." 954 00:47:44,420 --> 00:47:47,650 І у нас є зв'язок в нашому файлі JavaScript 955 00:47:47,650 --> 00:47:51,400 що насправді відбувається в генеруємо нашу годинник для нас. 956 00:47:51,400 --> 00:47:56,060 Тому що здорово, що, те, що ви можете встановити наявність на автоматичне оновлення 957 00:47:56,060 --> 00:47:56,963 Сам. 958 00:47:56,963 --> 00:47:57,810 ОК? 959 00:47:57,810 --> 00:48:01,580 Таким чином, замість того, щоб чекати Користувач вдарити Оновити на сторінці 960 00:48:01,580 --> 00:48:03,840 так що ви можете отримати оновлюються раз, JavaScript 961 00:48:03,840 --> 00:48:06,760 можете оновити її, однак вона любить. 962 00:48:06,760 --> 00:48:12,082 >> Так що, як з нашим останнім, ми хотіли для доступу до нашого фону, чи не так? 963 00:48:12,082 --> 00:48:14,790 Отже, що ви думаєте, може бути Перше, що ми хочемо зробити тут? 964 00:48:14,790 --> 00:48:19,538 Якщо ми начебто йдуть Такого роду парадигму тут? 965 00:48:19,538 --> 00:48:22,200 Ми, ймовірно, хочете, щоб доступ до нашої годинник, чи не так? 966 00:48:22,200 --> 00:48:24,724 Таким чином, у нас є деякі VAR годинники, які equals-- 967 00:48:24,724 --> 00:48:26,140 Що ми думаємо, що це збирається бути? 968 00:48:26,140 --> 00:48:29,290 969 00:48:29,290 --> 00:48:42,670 Документ точка отримати елемент по-- I також люблю Sublime-- Id і наша Id є годинами. 970 00:48:42,670 --> 00:48:43,585 Крапка з комою. 971 00:48:43,585 --> 00:48:45,710 Добрався, щоб переконатися, що для отримання Крапка з комою в цей раз, 972 00:48:45,710 --> 00:48:47,835 тому що я відчуваю, що була проблема минулого разу. 973 00:48:47,835 --> 00:48:55,980 Добре так, як я тільки що говорив з намаганням мати JavaScript оновити себе, 974 00:48:55,980 --> 00:48:59,655 там це чудова функція, я знаю, що це дуже знадобилися в минулому році, 975 00:48:59,655 --> 00:49:02,780 Я не впевнений, що це дуже зручно, для цього PSET, але це називається заданий інтервал часу. 976 00:49:02,780 --> 00:49:05,640 977 00:49:05,640 --> 00:49:08,200 І це насправді дуже здорово, якби ви, хлопці, що-небудь 978 00:49:08,200 --> 00:49:11,460 з часом або отримання Оновлена ​​інформація. 979 00:49:11,460 --> 00:49:13,700 На сайті по Остаточний Проект, це, ймовірно, 980 00:49:13,700 --> 00:49:16,240 Функція, яку ви хочете отримати супер знайомі. 981 00:49:16,240 --> 00:49:19,730 Так що встановити інтервал робить те, що ми збираємося дати йому функцію, 982 00:49:19,730 --> 00:49:21,830 і як часто він повинен викликати цю функцію. 983 00:49:21,830 --> 00:49:22,430 ОК? 984 00:49:22,430 --> 00:49:26,890 >> Таким чином, в цьому випадку, ми просто збираємося створити якісь анонімні функції знову, 985 00:49:26,890 --> 00:49:31,530 Добре, що збирається отримати наша дата, і наш час, 986 00:49:31,530 --> 00:49:33,780 а потім обновити речі і показати його. 987 00:49:33,780 --> 00:49:35,130 Таким чином, ми будемо турбуватися про це. 988 00:49:35,130 --> 00:49:39,120 Ми будемо, як генерувати години тут. 989 00:49:39,120 --> 00:49:41,750 Але те, що нам потрібно, це як часто, щоб оновити його. 990 00:49:41,750 --> 00:49:43,930 Таким чином, в цьому випадку, це просто мілісекунди. 991 00:49:43,930 --> 00:49:46,877 Таким чином, ми тільки збираємося зробити 100 мілісекунд. 992 00:49:46,877 --> 00:49:48,210 Звичайно, абсолютно довільно. 993 00:49:48,210 --> 00:49:50,600 Якщо ви хочете, щоб це оновлення набагато повільніше, ви могли б. 994 00:49:50,600 --> 00:49:53,300 Ми можемо возитися із заданим інтервалом, 995 00:49:53,300 --> 00:49:57,240 наскільки великий наш інтервал після отримання нами роботи години, які, сподіваюся, я буду 996 00:49:57,240 --> 00:49:59,660 добратися. 997 00:49:59,660 --> 00:50:04,110 Так що це просто кажу: "Добре, виклик Ця функція кожні 100 мілісекунд ". 998 00:50:04,110 --> 00:50:04,805 ОК? 999 00:50:04,805 --> 00:50:07,280 От і все, що він робить. 1000 00:50:07,280 --> 00:50:12,290 >> Отже, що ми хочемо, щоб наші функції робимо, ми хочемо мати деяку дату 1001 00:50:12,290 --> 00:50:14,200 і якийсь час, що ми будемо мати. 1002 00:50:14,200 --> 00:50:19,740 Так ми можемо почати з нашого Дата дорівнює те, 1003 00:50:19,740 --> 00:50:22,708 і наш час становить щось що ми ще не знаємо. 1004 00:50:22,708 --> 00:50:26,070 1005 00:50:26,070 --> 00:50:29,300 Або насправді, нам просто потрібно дату, тому що Дата збирається включати в себе все. 1006 00:50:29,300 --> 00:50:34,310 1007 00:50:34,310 --> 00:50:40,010 Знову ж таки, якщо ви просто Google що-небудь про те, що ви хочете робити, якщо ви пишете: "Добре, 1008 00:50:40,010 --> 00:50:41,980 Я хочу, щоб отримати час за допомогою JavaScript, "це 1009 00:50:41,980 --> 00:50:45,890 дасть вам цей великий Функція називається дата отримати. 1010 00:50:45,890 --> 00:50:48,664 Буквально, більшість речей що ви хочете зробити, 1011 00:50:48,664 --> 00:50:50,830 JavaScript матиме це було зроблено для вас уже. 1012 00:50:50,830 --> 00:50:55,770 Так що це в буквальному сенсі, як новий отримати дату, яка є creating-- 1013 00:50:55,770 --> 00:50:58,600 або нова дата, rather-- який генерує 1014 00:50:58,600 --> 00:51:03,690 якийсь об'єкт, який являє собою дату. 1015 00:51:03,690 --> 00:51:08,200 >> І те, що ми збираємося зробити тут це is-- Я збираюся написати це, 1016 00:51:08,200 --> 00:51:10,820 а потім пояснити, що він робить. 1017 00:51:10,820 --> 00:51:12,560 Так що я буду робити, що я отримую це право. 1018 00:51:12,560 --> 00:51:17,950 1019 00:51:17,950 --> 00:51:23,440 >> Отже, те, що ця функція робить, це ми просто 1020 00:51:23,440 --> 00:51:30,680 створення HTML, що насправді буде йти в рамках нашої сну ідентифікатор годин. 1021 00:51:30,680 --> 00:51:34,610 Так що ж це буде робити просто створити певний рядок, ОК? 1022 00:51:34,610 --> 00:51:38,510 Тобто те буде пересаджують в нашій HTML. 1023 00:51:38,510 --> 00:51:42,130 В основному те, що він збирається зробити, це всі we--, що я покажу вам, 1024 00:51:42,130 --> 00:51:49,070 є те, що б ми не говорили HTML є, ми збираємося замінити цей текст тут 1025 00:51:49,070 --> 00:51:51,090 з тим, що HTML є. 1026 00:51:51,090 --> 00:51:56,390 Так що це буде дозволяти нам змінити нашу синхросигналу 1027 00:51:56,390 --> 00:52:00,940 HTML від того, тільки текст цього повинні бути годинник, насправді показує 1028 00:52:00,940 --> 00:52:05,630 число і речі, які ми дбаємо о, а насправді бути годин. 1029 00:52:05,630 --> 00:52:09,810 >> Так що ми збираємося зробити, це ми збирається почати виробляти цей HTML. 1030 00:52:09,810 --> 00:52:16,520 Таким чином, в одній і тій же чином, що ми використовували зробити плюс дорівнює для цілих чисел, 1031 00:52:16,520 --> 00:52:20,461 тепер ви можете робити, що для струнних, за винятком того, що відбувається в їх конкатенацію. 1032 00:52:20,461 --> 00:52:20,960 Вірно? 1033 00:52:20,960 --> 00:52:26,070 Як ми бачили з Партією точок JS, це всього лише об'єднує всі ці речі разом. 1034 00:52:26,070 --> 00:52:31,970 Таким чином, ви можете об'єднати різні біти HTML з змінних, або біт рядків 1035 00:52:31,970 --> 00:52:33,750 що ви пишете з самостійно, і це просто 1036 00:52:33,750 --> 00:52:38,650 дійсно дозволяє динамічно генерувати HTML, який є досить прохолодно. 1037 00:52:38,650 --> 00:52:42,040 Так що, якщо у вас є щось дуже зручно конкретні, 1038 00:52:42,040 --> 00:52:44,130 це може дозволити вам зробити це. 1039 00:52:44,130 --> 00:52:47,550 >> Отже, ми маємо HTML, щоб я збираюся спробуйте і переконайтеся, що я отримую це право. 1040 00:52:47,550 --> 00:52:49,890 Так що ми збираємося зробити деякі заголовок h1. 1041 00:52:49,890 --> 00:52:53,610 Так що важливо розуміти тут є те, що це насправді просто HTML. 1042 00:52:53,610 --> 00:52:54,460 Вірно? 1043 00:52:54,460 --> 00:52:56,610 Ми пишемо фактична HTML код тут, це 1044 00:52:56,610 --> 00:53:01,090 не тільки рядок в нормальне так, що ми будемо думати про це. 1045 00:53:01,090 --> 00:53:02,930 Отже, ми маємо деяку HTML. 1046 00:53:02,930 --> 00:53:04,940 Це вважається рядок, хоча тут. 1047 00:53:04,940 --> 00:53:10,380 І ми робимо дату dot-- ми хочете отримати наші годинники. 1048 00:53:10,380 --> 00:53:12,910 Знову ж таки, якщо ви подивитеся що-небудь про дату, 1049 00:53:12,910 --> 00:53:16,160 було б сказати, це все атрибути, дата має. 1050 00:53:16,160 --> 00:53:17,670 А ось те, що ви можете використовувати на ньому. 1051 00:53:17,670 --> 00:53:20,620 Так що, ймовірно, має щось на зразок отримати годинник, і отримати хвилин, 1052 00:53:20,620 --> 00:53:24,669 і отримати секунд, і отримати мілісекунд, і хто знає, що ще вони є. 1053 00:53:24,669 --> 00:53:27,210 Але якщо ви подивитеся на документація, все це буде там. 1054 00:53:27,210 --> 00:53:31,980 >> Отже, ми маємо отримати годинник, і тоді ми б хотіли 1055 00:53:31,980 --> 00:53:35,614 щоб об'єднати, що with-- Я буде рухатися в цьому тут. 1056 00:53:35,614 --> 00:53:38,780 Так що, якщо ми генеруємо зараз, ми насправді генерації час, чи не так? 1057 00:53:38,780 --> 00:53:43,590 У нас є годинник, а потім те, що між годинами і хвилинами? 1058 00:53:43,590 --> 00:53:45,080 У вас є крапка з комою, чи не так? 1059 00:53:45,080 --> 00:53:48,010 Тому ми хочемо, щоб зробити деякі коми тут. 1060 00:53:48,010 --> 00:53:51,780 А потім ми хочемо отримати наші хвилин, так що таким же чином, 1061 00:53:51,780 --> 00:53:56,450 що у нас є дата точка отримаєте годинник, як ми можемо отримати наші хвилин? 1062 00:53:56,450 --> 00:54:01,542 Це буквально дата, точка отримати хвилин, які я ніби як. 1063 00:54:01,542 --> 00:54:03,250 Це як: "О, як я можу отримати мої хвилин? " 1064 00:54:03,250 --> 00:54:05,850 Я просто отримати мої хвилин. 1065 00:54:05,850 --> 00:54:07,500 >> ОК. 1066 00:54:07,500 --> 00:54:10,990 І тоді у нас є ще двокрапка тут. 1067 00:54:10,990 --> 00:54:16,350 І потім, якщо ми хочемо отримати наш секунд, як ми могли б отримати наш другий? 1068 00:54:16,350 --> 00:54:17,400 Дата точка отримати секунд. 1069 00:54:17,400 --> 00:54:20,390 1070 00:54:20,390 --> 00:54:21,590 Я думаю, що це дуже здорово. 1071 00:54:21,590 --> 00:54:23,589 І, що важливо для усвідомлювати, що ми також 1072 00:54:23,589 --> 00:54:31,730 потрібно закрити наш HTML тег тут, тому що він як і раніше має бути дійсний HTML, так h1. 1073 00:54:31,730 --> 00:54:33,481 Круто. 1074 00:54:33,481 --> 00:54:43,110 >> Таким чином, після того, що ми можемо зробити годинник Точка внутрішня HTML-одно HTML. 1075 00:54:43,110 --> 00:54:43,930 ОК? 1076 00:54:43,930 --> 00:54:46,470 Так що пам'ятаєте, як я сказав, внутрішній HTML в основному 1077 00:54:46,470 --> 00:54:50,610 приймає все, що між два тега, які ми говорили про 1078 00:54:50,610 --> 00:54:54,470 і вставки або маніпулює все, що там? 1079 00:54:54,470 --> 00:54:58,290 Так що ж це робить, якщо ми повернемося до наших годинах, 1080 00:54:58,290 --> 00:55:04,180 є те, що годинник відноситься до Все всередині цієї справ. 1081 00:55:04,180 --> 00:55:09,770 Це внутрішній HTML- цієї Id тактовою справ. 1082 00:55:09,770 --> 00:55:13,930 І тому він збирається змінити його HTML, що ми тільки що згенерували, 1083 00:55:13,930 --> 00:55:16,750 яка, які, як ми сподіваємося, сподіваюся, ми сподіваємося, 1084 00:55:16,750 --> 00:55:21,026 покаже час прямо зараз. 1085 00:55:21,026 --> 00:55:23,960 Ми будемо бачити. 1086 00:55:23,960 --> 00:55:25,170 Звичайно. 1087 00:55:25,170 --> 00:55:26,860 Так багато технічних питань. 1088 00:55:26,860 --> 00:55:31,480 Просто-- Еллісон Я від моєї гри Сьогодні хлопці. 1089 00:55:31,480 --> 00:55:34,136 Добре, що працює. 1090 00:55:34,136 --> 00:55:35,760 синхросигналу внутрішній HTML. 1091 00:55:35,760 --> 00:55:42,097 Це було HTML насправді? 1092 00:55:42,097 --> 00:55:43,180 Крім того, це те, що відбувається. 1093 00:55:43,180 --> 00:55:48,750 Якщо ви не можете побачити щось, вам просто подивіться на вихідний код. 1094 00:55:48,750 --> 00:55:49,250 ОК. 1095 00:55:49,250 --> 00:55:51,912 1096 00:55:51,912 --> 00:55:54,870 Ти хочеш знати, прохолодний роботу навколо що ми збираємося зробити прямо тут? 1097 00:55:54,870 --> 00:55:55,740 >> АУДИТОРІЯ: Ви можете зробити великі літери? 1098 00:55:55,740 --> 00:55:56,580 Заголовні літери? 1099 00:55:56,580 --> 00:55:58,996 Тому що у вас отримати годинник, а потім отримати хвилин. 1100 00:55:58,996 --> 00:56:02,590 >> Аллісон Бухгольц-AU: Це це отримати годин і get-- о. 1101 00:56:02,590 --> 00:56:04,945 Ви are-- золоту зірку. 1102 00:56:04,945 --> 00:56:08,114 1103 00:56:08,114 --> 00:56:09,030 Це всі випробування, хлопці. 1104 00:56:09,030 --> 00:56:13,630 1105 00:56:13,630 --> 00:56:17,330 Я обіцяю, що це працює перед класом. 1106 00:56:17,330 --> 00:56:22,590 >> Добре, але щось здорово знати, що ви можете also-- якщо іноді 1107 00:56:22,590 --> 00:56:26,560 ваші зовнішні файли отримати трохи божевільним, 1108 00:56:26,560 --> 00:56:30,960 Ви також можете просто покласти їх прямо тут, які, як правило, щоб виправити становище. 1109 00:56:30,960 --> 00:56:35,840 Крім цього, як дійсно некрасиво. 1110 00:56:35,840 --> 00:56:38,050 Звичайно відформатувати все. 1111 00:56:38,050 --> 00:56:41,425 Переконайтеся, що це все досить. 1112 00:56:41,425 --> 00:56:41,925 ОК. 1113 00:56:41,925 --> 00:56:47,200 1114 00:56:47,200 --> 00:56:50,621 >> Я хотів зробити всі класні демки, і вони просто не виходить. 1115 00:56:50,621 --> 00:56:51,555 ОК. 1116 00:56:51,555 --> 00:56:53,890 Сценарій вар годинник. 1117 00:56:53,890 --> 00:57:00,350 У кожному разі, важливо те, що це спільний шлях 1118 00:57:00,350 --> 00:57:01,870 що ви відформатувати JavaScript. 1119 00:57:01,870 --> 00:57:04,490 Як ви можете бачити, це може бути дуже вибагливі, іноді, 1120 00:57:04,490 --> 00:57:08,780 навіть тоді, коли це було буквально працює у дві секунди тому. 1121 00:57:08,780 --> 00:57:11,820 Або не два секунду тому але дуже, дуже недавно. 1122 00:57:11,820 --> 00:57:16,070 >> Таким чином, щоб показати вам, що це має виглядати, і показати вам, що я не божевільний, 1123 00:57:16,070 --> 00:57:19,730 і що все саме так, те ж саме, це те, що вона має виглядати. 1124 00:57:19,730 --> 00:57:27,410 Ти просто це зробити верхню частину тут, і якщо ви подивитеся вихідний код сторінки, 1125 00:57:27,410 --> 00:57:32,160 Якщо ви помітили, він зробив деякі божевільні речі, я спростив. 1126 00:57:32,160 --> 00:57:35,710 Крім того, кредит Томмі McWilliam, хто насправді 1127 00:57:35,710 --> 00:57:38,810 допоміг мені створити ці приклади, який є, чому я знаю, що вони працюють. 1128 00:57:38,810 --> 00:57:41,560 Тому що Томмі майстер JavaScript. 1129 00:57:41,560 --> 00:57:43,180 Але якщо ми помічаємо, у нас є деякий набір. 1130 00:57:43,180 --> 00:57:45,170 У нас є функції годинника тут. 1131 00:57:45,170 --> 00:57:48,450 Це все JavaScript, що ми тільки що написали, або деякі з них. 1132 00:57:48,450 --> 00:57:51,470 Ми тільки що написав цей один прямо тут. 1133 00:57:51,470 --> 00:57:54,260 І в нього є додатковий функція, яка просто колодки його 1134 00:57:54,260 --> 00:57:57,790 поставивши нуль перед буква або перед числом, якщо це 1135 00:57:57,790 --> 00:57:59,412 тільки один з них. 1136 00:57:59,412 --> 00:58:02,120 Так що, якщо ви помітили, це досить багато саме те, що ми тільки що написали. 1137 00:58:02,120 --> 00:58:06,230 У вас є змінна годинник, який має наш елемент, отримати елемент за ідентифікатором, 1138 00:58:06,230 --> 00:58:07,252 що годинник. 1139 00:58:07,252 --> 00:58:08,960 У нас є безліч інтервал Функція, це 1140 00:58:08,960 --> 00:58:12,670 анонімна функція який виконує все це. 1141 00:58:12,670 --> 00:58:16,940 У нас є деякі, починаючи рядок HTML, що ми динамічно 1142 00:58:16,940 --> 00:58:20,750 генерують тим, що деякі h1 заголовок, об'єднання 1143 00:58:20,750 --> 00:58:23,950 з отримати годинник, а також наш товстої кишки, а також отримати 1144 00:58:23,950 --> 00:58:26,860 хвилини, плюс ще товстої кишки, а також наші секунд, 1145 00:58:26,860 --> 00:58:29,330 і, нарешті, закінчуючи HTML для цього. 1146 00:58:29,330 --> 00:58:34,210 А потім ми оновлюємо нашу годинник точка внутрішній HTML для HTML, 1147 00:58:34,210 --> 00:58:37,640 і ми оновлюємо кожні 100 мілісекунд. 1148 00:58:37,640 --> 00:58:39,060 ОК? 1149 00:58:39,060 --> 00:58:42,470 >> Бачите, я обіцяю, що я не є божевільним. 1150 00:58:42,470 --> 00:58:43,440 Я не знаю. 1151 00:58:43,440 --> 00:58:47,160 Я не знаю, чому він не любить мене. 1152 00:58:47,160 --> 00:58:54,030 Я відчуваю, як виглядає те ж саме, але, мабуть, ненавидить мене. 1153 00:58:54,030 --> 00:58:59,600 >> Отже, давайте подивимося, якщо навколо трьох йде краще. 1154 00:58:59,600 --> 00:59:00,970 Ми збираємося, щоб бачити. 1155 00:59:00,970 --> 00:59:02,910 Я не знаю, як це буде йти. 1156 00:59:02,910 --> 00:59:06,700 Це все, принаймні отримати мінуси, як тільки спільною темою 1157 00:59:06,700 --> 00:59:08,480 з JavaScript, хоча? 1158 00:59:08,480 --> 00:59:15,660 Я сподіваюся, що, принаймні корисно, більш ніж показуючи, що це трохи вередливі. 1159 00:59:15,660 --> 00:59:21,190 Але ваша проблема набір буде дуже весело. 1160 00:59:21,190 --> 00:59:22,590 Це буде здорово. 1161 00:59:22,590 --> 00:59:24,820 Це не буде настільки ж втомлює як це, я не думаю. 1162 00:59:24,820 --> 00:59:28,100 Ви насправді отримати см дійсно класні речі. 1163 00:59:28,100 --> 00:59:31,734 >> Тому в минулому, але не менше, ми постараємося той Twitter. 1164 00:59:31,734 --> 00:59:32,900 Я дуже боюся зараз, хлопці. 1165 00:59:32,900 --> 00:59:35,762 Я не знаю, як це буде йти. 1166 00:59:35,762 --> 00:59:39,930 Але тільки, щоб дати вам трохи більше смаку, і це насправді 1167 00:59:39,930 --> 00:59:44,190 маніпулювання рядками і Входи, що ми збираємося робити 1168 00:59:44,190 --> 00:59:50,960 Тобто, якщо ми помічаємо тут з HTML-- у цього є трохи more-- 1169 00:59:50,960 --> 00:59:57,200 у нас є деякі текстову область, яка відповідає даній області текст тут. 1170 00:59:57,200 --> 00:59:58,030 ОК? 1171 00:59:58,030 --> 01:00:00,420 І це має ідентифікатор тексту. 1172 01:00:00,420 --> 01:00:04,520 Ми рестайлінг його трохи з деякою ширини і висоти 1173 01:00:04,520 --> 01:00:07,310 що ми зумовлені, і ми h1, 1174 01:00:07,310 --> 01:00:11,260 які просто наш заголовок той, який представляє наші залишилось символів. 1175 01:00:11,260 --> 01:00:14,570 Ми дали йому якесь ідентифікатор Залишилося символів, 1176 01:00:14,570 --> 01:00:18,660 а то у нас якийсь сценарій тут, що я насправді 1177 01:00:18,660 --> 01:00:20,790 сподіваючись, що втретє х чарівність тут, хлопці. 1178 01:00:20,790 --> 01:00:26,750 >> Так що ми хочемо зробити, в тому ж загальному ключі 1179 01:00:26,750 --> 01:00:31,480 що ми зробили з синхросигналу JS і партійні точка JS, як ми відзначили, 1180 01:00:31,480 --> 01:00:35,980 що ми почали, фактично захоплення те, що ми дбаємо про, правильно? 1181 01:00:35,980 --> 01:00:42,330 Таким чином, в цьому випадку, є два речі, які ми піклуємося про, добре? 1182 01:00:42,330 --> 01:00:47,199 Одна річ, що ми насправді вид дивлячись в і малювання дані з, 1183 01:00:47,199 --> 01:00:48,990 і одна річ, яка ми насправді змінюється. 1184 01:00:48,990 --> 01:00:52,110 1185 01:00:52,110 --> 01:00:53,730 Так що наш HTML. 1186 01:00:53,730 --> 01:01:00,370 Якщо це наша веб-сторінка тут, що Дані, які ми дивимося на? 1187 01:01:00,370 --> 01:01:03,860 Це буде що завгодно Текст в наших коробках, чи не так? 1188 01:01:03,860 --> 01:01:05,310 Тому, що б я друкую тут. 1189 01:01:05,310 --> 01:01:08,150 Ось що я хочу знати, чи це те, що я хочу подивитися. 1190 01:01:08,150 --> 01:01:10,690 І те, що буде зміни на нашій веб-сторінці? 1191 01:01:10,690 --> 01:01:13,550 1192 01:01:13,550 --> 01:01:14,880 Інші персонажі. 1193 01:01:14,880 --> 01:01:19,550 Таким чином, в одній і тій же дорозі, ми хочемо, щоб почати з ініціалізації змінних 1194 01:01:19,550 --> 01:01:22,030 що насправді утримати цих елементів. 1195 01:01:22,030 --> 01:01:22,890 ОК? 1196 01:01:22,890 --> 01:01:29,930 Так що, якщо у нас є деякі Var це наша текстова область, 1197 01:01:29,930 --> 01:01:33,681 і у нас є деякі VAR, що залишилося. 1198 01:01:33,681 --> 01:01:34,180 Вірно? 1199 01:01:34,180 --> 01:01:36,190 Так вони збираються тримати ці дві речі. 1200 01:01:36,190 --> 01:01:42,370 Так само роду речі, документ dot-- ОК, я 1201 01:01:42,370 --> 01:01:45,920 буде переконатися, що це буде працювати в цей раз. 1202 01:01:45,920 --> 01:01:49,620 Я дуже непохитний. 1203 01:01:49,620 --> 01:01:53,310 Отже, якщо ми хочемо, щоб наші Текст площа, по 1204 01:01:53,310 --> 01:01:55,710 в нашому HTML, що наша ідентифікатор? 1205 01:01:55,710 --> 01:01:56,420 Що наша Id? 1206 01:01:56,420 --> 01:01:59,500 1207 01:01:59,500 --> 01:02:05,540 Це просто буде текст, тому що це створює нашу текстову область, OK, 1208 01:02:05,540 --> 01:02:10,320 і наша Id текстів, так що як ми можемо захопити, що там. 1209 01:02:10,320 --> 01:02:12,130 ОК, крапка з комою. 1210 01:02:12,130 --> 01:02:13,940 Я збираюся бути супер Точна про це, 1211 01:02:13,940 --> 01:02:16,300 тому що я хочу, щоб це працювало на цей раз. 1212 01:02:16,300 --> 01:02:22,120 ОК, зробити те ж саме, отримати елемент, Id. 1213 01:02:22,120 --> 01:02:25,970 Я дійсно цікаво, що має причиною двох інших зіпсувати. 1214 01:02:25,970 --> 01:02:29,750 Добре, тоді в цьому, що ж ми хочемо отримати доступ? 1215 01:02:29,750 --> 01:02:30,760 Що наша Id тут? 1216 01:02:30,760 --> 01:02:33,980 1217 01:02:33,980 --> 01:02:36,261 У нас є ще ідентифікатор в наш HTML, що це таке? 1218 01:02:36,261 --> 01:02:37,552 АУДИТОРІЯ: Залишилось символів. 1219 01:02:37,552 --> 01:02:39,343 Аллісон Бухгольц-AU: Залишилося символів. 1220 01:02:39,343 --> 01:02:43,360 1221 01:02:43,360 --> 01:02:44,330 >> ОК. 1222 01:02:44,330 --> 01:02:46,010 Круто. 1223 01:02:46,010 --> 01:02:49,800 Так що я просто хочу, щоб пишу це дуже швидко. 1224 01:02:49,800 --> 01:02:53,706 1225 01:02:53,706 --> 01:02:55,330 Я просто хочу, щоб написати це в секунду. 1226 01:02:55,330 --> 01:02:56,190 Так текстова область. 1227 01:02:56,190 --> 01:02:59,550 1228 01:02:59,550 --> 01:03:06,180 Що цікаво, B function-- є безліч функцій, які не тільки 1229 01:03:06,180 --> 01:03:09,690 Підходить для Вашого миші, але клавіатура. 1230 01:03:09,690 --> 01:03:10,190 ОК? 1231 01:03:10,190 --> 01:03:16,540 Таким чином, ви можете сказати, коли будь-який ключ натиснута, ви можете зробити щось на зразок цього. 1232 01:03:16,540 --> 01:03:20,450 Так той, який ми використовуємо, викликається клавішею вгору, що 1233 01:03:20,450 --> 01:03:25,320 каже, "якщо ви натиснули будь-яку клавішу на клавіатура, коли користувач підняв 1234 01:03:25,320 --> 01:03:28,064 їх палець цієї кнопки, і ключ став не натиснута, 1235 01:03:28,064 --> 01:03:29,480 потім ми збираємося зробити щось ". 1236 01:03:29,480 --> 01:03:29,980 ОК? 1237 01:03:29,980 --> 01:03:31,370 Так що це має сенс, чи не так? 1238 01:03:31,370 --> 01:03:33,540 Тому що кожен символ ми друкуємо, ми збираємося 1239 01:03:33,540 --> 01:03:36,550 мати, щоб підняти наші пальці про це, тому, коли ключ йде вгору, 1240 01:03:36,550 --> 01:03:40,980 ми можемо знати, для зменшення інші наші герої. 1241 01:03:40,980 --> 01:03:44,440 >> Отже, ми маємо деякі на ключ , І таким же чином, 1242 01:03:44,440 --> 01:03:47,480 ми збираємося сказати, "Добре, коли ми це зробимо, ми 1243 01:03:47,480 --> 01:03:55,110 збираємося створити деяку функцію, яка збирається взяти е ", в даному випадку, 1244 01:03:55,110 --> 01:03:58,800 і те, що ми хочемо зробити, це підрахувати кількість залишилися. 1245 01:03:58,800 --> 01:04:02,510 Отже, давайте просто почати шляхом створення змінної. 1246 01:04:02,510 --> 01:04:05,830 Отже, ми маємо деяку змінну R, який представлятиме 1247 01:04:05,830 --> 01:04:07,720 скільки символів ми залишили. 1248 01:04:07,720 --> 01:04:08,890 ОК? 1249 01:04:08,890 --> 01:04:14,540 Ми знаємо, що ми починаємо з 140, і якщо ми хочемо знати, 1250 01:04:14,540 --> 01:04:18,360 скажімо, довжина цього Рядок, був вхід, 1251 01:04:18,360 --> 01:04:20,860 Чи є у вас, хлопці, є які-небудь ідеї як ми могли б це зробити? 1252 01:04:20,860 --> 01:04:23,900 Просто базується геть очевидно, речі, як якщо б ми хотіли години, 1253 01:04:23,900 --> 01:04:25,870 ми використовували отримаєте годинник. 1254 01:04:25,870 --> 01:04:28,860 Ми знаємо, що наш об'єкт Текст цієї області, але не могли б ви, хлопці, 1255 01:04:28,860 --> 01:04:33,050 думаю, що може прийти після нього? 1256 01:04:33,050 --> 01:04:35,280 Будь-які ідеї? 1257 01:04:35,280 --> 01:04:41,730 >> Так це одне начебто менше інтуїтивно, але це значення довжини точка. 1258 01:04:41,730 --> 01:04:44,700 Так що просто дати мені деякі значення атрибута, що 1259 01:04:44,700 --> 01:04:46,500 насправді довжина цього рядка. 1260 01:04:46,500 --> 01:04:50,340 Так що збирається сказати: "Добре, я шукаю на всій цій рядки в текстовому полі, 1261 01:04:50,340 --> 01:04:52,730 і я збираюся сказати Ви, як довго це ". 1262 01:04:52,730 --> 01:04:55,500 Тому що, якщо ми згадаємо, рядки дійсно тільки масиви, 1263 01:04:55,500 --> 01:04:58,110 так що ми можемо просто взяти довжину них. 1264 01:04:58,110 --> 01:05:01,860 Отже, ми маємо це. 1265 01:05:01,860 --> 01:05:04,058 Круто. 1266 01:05:04,058 --> 01:05:09,360 >> Тоді те, що ми хочемо зробити, це ми ніколи не хочу, щоб дозволити користувачеві 1267 01:05:09,360 --> 01:05:12,340 для введення більш 140 символів, чи не так? 1268 01:05:12,340 --> 01:05:15,610 Тому що, якщо ми говоримо так: «ой, ви тільки це багато, залишаючись, " 1269 01:05:15,610 --> 01:05:20,522 а потім нехай вони роблять що У будь-якому випадку, ми брехали. 1270 01:05:20,522 --> 01:05:22,230 І це ще один річ, яка JavaScript 1271 01:05:22,230 --> 01:05:24,530 може бути дуже добре для, є перевірка користувач 1272 01:05:24,530 --> 01:05:29,062 і переконавшись, що ваш Користувач вписується ні в які правила 1273 01:05:29,062 --> 01:05:30,270 що ви ввели на них. 1274 01:05:30,270 --> 01:05:36,020 Так що якщо ви хочете зробити щось, як зробити що хтось ввести їх адресу електронної пошти, 1275 01:05:36,020 --> 01:05:40,242 або переконавшись, що, коли вони ввести два пароля, вони узгоджені. 1276 01:05:40,242 --> 01:05:41,200 JavaScript може зробити це. 1277 01:05:41,200 --> 01:05:44,010 Ви хочете зробити щось подібне, "коли Форма видається, "наприклад або, 1278 01:05:44,010 --> 01:05:48,170 "Коли кнопку Відправити Форма є натиснув, перевірте всі ці речі ". 1279 01:05:48,170 --> 01:05:49,670 І ми можемо зробити це JavaScript. 1280 01:05:49,670 --> 01:05:52,680 Так ось саме те, що ми збираємося зробити тут. 1281 01:05:52,680 --> 01:05:57,810 >> Так що може бути спосіб перевірити, якщо вони пішли більше 140 символів? 1282 01:05:57,810 --> 01:06:03,310 Що станеться з наша значення г, якщо вони спробують? 1283 01:06:03,310 --> 01:06:04,760 Це буде негативним, чи не так? 1284 01:06:04,760 --> 01:06:07,380 Чи це буде менш або рівним нулю. 1285 01:06:07,380 --> 01:06:13,690 Таким чином, ми можемо використовувати, якщо це як і все інше. 1286 01:06:13,690 --> 01:06:14,270 ОК? 1287 01:06:14,270 --> 01:06:20,480 І у нас є деякі область тексту точку значення, і те, що ми робимо тут 1288 01:06:20,480 --> 01:06:29,940 це ми просто cutting-- що це таке? 1289 01:06:29,940 --> 01:06:30,900 Вибачте. 1290 01:06:30,900 --> 01:06:32,732 Це одне, ми просто хочемо, щоб повернутися помилковим. 1291 01:06:32,732 --> 01:06:34,030 Я заплутався. 1292 01:06:34,030 --> 01:06:36,560 Всі виснажені від речей, не працює. 1293 01:06:36,560 --> 01:06:40,010 Добре, ми просто хочемо, щоб повернутися помилковим, і тоді ми 1294 01:06:40,010 --> 01:06:44,160 хочу, щоб відобразити інші літери, вірно? 1295 01:06:44,160 --> 01:06:48,720 Так з годинником, ми зробили щось із внутрішньої HTML, вірно? 1296 01:06:48,720 --> 01:06:52,070 Де ми встановлюємо його рівним деякі змінної, тому те, що ми могли б тут робити? 1297 01:06:52,070 --> 01:06:54,590 1298 01:06:54,590 --> 01:06:57,750 Що ми змінити внутрішню HTML з? 1299 01:06:57,750 --> 01:07:02,843 1300 01:07:02,843 --> 01:07:03,780 >> АУДИТОРІЯ: Залишилося? 1301 01:07:03,780 --> 01:07:05,738 >> Аллісон Бухгольц-AU: Ми міняємо залишилося. 1302 01:07:05,738 --> 01:07:09,217 1303 01:07:09,217 --> 01:07:11,300 Гаразд, і що ми хочу, щоб встановити його рівним? 1304 01:07:11,300 --> 01:07:14,440 1305 01:07:14,440 --> 01:07:18,437 Це буде г, тому що це повинні бути інші наші герої. 1306 01:07:18,437 --> 01:07:19,600 ОК? 1307 01:07:19,600 --> 01:07:26,060 Так що я дуже нервував, щоб побачити, якщо це тепер працює, але ми будемо бачити. 1308 01:07:26,060 --> 01:07:28,960 1309 01:07:28,960 --> 01:07:29,460 Залиште це. 1310 01:07:29,460 --> 01:07:34,690 1311 01:07:34,690 --> 01:07:37,700 Це дуже швидко. 1312 01:07:37,700 --> 01:07:38,970 [Нерозбірливо] ОК. 1313 01:07:38,970 --> 01:07:44,574 1314 01:07:44,574 --> 01:07:45,990 Знову ж таки, я просто хочу, щоб показати вам. 1315 01:07:45,990 --> 01:07:49,430 З якоїсь причини, моє рішення не працює, 1316 01:07:49,430 --> 01:07:53,354 але те, що я покажу вам, що це is-- о, я повинен був покласти, що в. 1317 01:07:53,354 --> 01:07:57,470 Добре, ми помітили такий же що тут, отримую текстове поле. 1318 01:07:57,470 --> 01:08:01,070 >> Крім того, якщо хлопець повідомлення, якщо є або те, що ви хочете зробити, 1319 01:08:01,070 --> 01:08:04,080 і ви не знаєте, як це зробити це, просто натисніть кнопку Перегляд сторінці Джерело 1320 01:08:04,080 --> 01:08:06,632 і вони збираються розповісти вам. 1321 01:08:06,632 --> 01:08:07,840 Іноді це буде зашифрований. 1322 01:08:07,840 --> 01:08:11,147 Для вашого PSET, ми зашифрувати все, так це просто виглядає як маячня. 1323 01:08:11,147 --> 01:08:13,480 Але якщо коли-небудь дійсно класний сайт, що ви хочете, 1324 01:08:13,480 --> 01:08:17,729 якщо ви просто натисніть кнопку Перегляд сторінці Джерело це збираюся розповісти вам, як це зробити. 1325 01:08:17,729 --> 01:08:20,770 Отже, ще раз, працювати розумніше, а не більше. 1326 01:08:20,770 --> 01:08:24,250 І, як ви бачите тут, все ці речі однакові. 1327 01:08:24,250 --> 01:08:31,930 цей тут просто приймає деякі подстроку що я забув, що це робить. 1328 01:08:31,930 --> 01:08:36,980 Але, очевидно, займе деякий подстроку від вартості від нуля до десяти, 1329 01:08:36,980 --> 01:08:41,540 і повертає помилкове, що слід припинити Користувач з введенням більше, 1330 01:08:41,540 --> 01:08:46,040 а потім, очевидно, оновлює Внутрішня HTML там. 1331 01:08:46,040 --> 01:08:47,410 >> Круто. 1332 01:08:47,410 --> 01:08:53,000 Настільки великі Візьміть Висновки з сьогоднішнього дня, Експеримент, подивіться на вихідний код 1333 01:08:53,000 --> 01:08:58,359 тому що це допоможе вам багато, і все, іноді JavaScript 1334 01:08:58,359 --> 01:09:03,200 може бути важко працювати, і не завжди працюють так, як ви очікуєте, що, 1335 01:09:03,200 --> 01:09:05,700 але просто намагатися бо я обіцяю, що це буде. 1336 01:09:05,700 --> 01:09:08,376 Я обіцяю, всі ці приклади працювали перед класом. 1337 01:09:08,376 --> 01:09:09,750 Я не розумію, що сталося. 1338 01:09:09,750 --> 01:09:13,069 Я буквально все ж. 1339 01:09:13,069 --> 01:09:17,660 >> Ще одна річ, що я просто хочу, щоб показати вам, хлопці, які можуть бути супер корисно 1340 01:09:17,660 --> 01:09:21,630 в in--, що працює раніше? 1341 01:09:21,630 --> 01:09:23,935 Ми отримали партію до роботи, чи не так? 1342 01:09:23,935 --> 01:09:26,569 Я так думаю. 1343 01:09:26,569 --> 01:09:27,069 Так. 1344 01:09:27,069 --> 01:09:27,630 Ми зробили. 1345 01:09:27,630 --> 01:09:28,250 Високий. 1346 01:09:28,250 --> 01:09:31,189 Отже, одна річ, яка ви, хлопці, повинні знати, 1347 01:09:31,189 --> 01:09:33,340 є лог консолі, що я говорив. 1348 01:09:33,340 --> 01:09:37,040 Так втішити точка журнал Hello. 1349 01:09:37,040 --> 01:09:40,430 Так що це свого роду JavaScript еквівалент Printf. 1350 01:09:40,430 --> 01:09:42,810 Так що якщо ви коли-небудь хотіли перевірити свої змінні 1351 01:09:42,810 --> 01:09:49,649 або подивитися, що там відбувається, що Ви можете зробити це, якщо ми перевіряємо елемент, 1352 01:09:49,649 --> 01:09:51,899 це те, що ви хочете піти щоб і ви йдете, щоб втішити, 1353 01:09:51,899 --> 01:09:53,770 Ви побачите, що він надрукований привіт. 1354 01:09:53,770 --> 01:09:55,750 >> Таким чином, ми могли б його друкувати все, що ми хотіли. 1355 01:09:55,750 --> 01:10:04,170 Якщо ми хотіли, щоб надрукувати фон точка стиль точка фон, 1356 01:10:04,170 --> 01:10:08,454 ми повинні бути в змозі бачити RGB втричі йде вгору. 1357 01:10:08,454 --> 01:10:11,140 Чи ні. 1358 01:10:11,140 --> 01:10:13,520 Я забув, як саме ви друкувати змінну подібне, 1359 01:10:13,520 --> 01:10:17,249 але ви повинні бути в змозі роздрукувати щось на зразок цього. 1360 01:10:17,249 --> 01:10:19,040 Це буде дуже корисно для PSET коли 1361 01:10:19,040 --> 01:10:23,330 Ви намагаєтеся маніпулювати координати або ще багато чого. 1362 01:10:23,330 --> 01:10:25,270 Таким чином, вони також змінити цю частину в класі. 1363 01:10:25,270 --> 01:10:30,750 Це відрізняється від минулих років, так просто приємно ваших ТФ, або ТФ 1364 01:10:30,750 --> 01:10:36,350 в робочий час, а, тому, що ми вид навчання разом з вами, хлопці. 1365 01:10:36,350 --> 01:10:41,230 Але лог консолі було супер, супер корисно для JavaScript у минулому році. 1366 01:10:41,230 --> 01:10:42,740 Так люблю його. 1367 01:10:42,740 --> 01:10:43,780 Дізнайтеся, як використовувати його. 1368 01:10:43,780 --> 01:10:49,026 Це простіше у використанні, ніж GDB, так що повинно бути не менше плюс точкою. 1369 01:10:49,026 --> 01:10:50,650 Але спасибі, хлопці приносять із собою. 1370 01:10:50,650 --> 01:10:53,400 Мені шкода, що мій приклади з деяких причин 1371 01:10:53,400 --> 01:10:55,410 просто не хочу, щоб співпрацювати зі мною, але я 1372 01:10:55,410 --> 01:11:01,010 сподіваюся, що вона допомогла отримати вид ви трохи більше в зоні JavaScript. 1373 01:11:01,010 --> 01:11:04,980 І пошліть мені всі ваші запитання на наступному тижні, так що я можу бути супер ремонт, 1374 01:11:04,980 --> 01:11:09,420 і я принесу цукерки і навіть додатковий цукерки, бо це було смішно. 1375 01:11:09,420 --> 01:11:14,000 Але ви, хлопці, здорово, і мають дивовижний тиждень. 1376 01:11:14,000 --> 01:11:15,584