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