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

Майк Риццо: И я Майк Риццо. 

ТОМАС Реймерс: Мы два из CS50s TS. И сегодня мы ведем семинар по JavaScript и CSS для веб-приложений. Если вы хотите следовать, ссылка прямо там. И вы хотите, чтобы положить его на компьютере кратко? 

Там в ссылке. Это небольшой сайт, который содержит ссылки на все ресурсы, которые мы собираемся быть указывая вам сегодня, а также имеет много полезная информация написана нас читать далее в глубину, когда вы вернетесь, и вы пытаетесь вспомнить, что точно мы говорили, что вы были говорите, и так далее. 

Майк Риццо: Хорошо. Итак, начнем. 

ТОМАС Реймерс: Итак, вы хотите, чтобы начать? ОК. 

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

Так вы, ребята, в этой точке - с ним будучи в пятницу вечером - должны иметь представили свой CS50 финансы Проблема устанавливает. Будем надеяться, что это был хороший вкус о том, что веб-программирования может быть. Но здесь мы хотим, вид, дать Вы другой вкус, а также. 

ТОМАС Реймерс: Так что просто резюмировать, что происходит, когда вы набираете в вашем URL к ваш веб-браузер, что URL получает посмотрел в компьютер. И ваш компьютер, подключенных к другому компьютеру, в котором находится этот сайт. Итак, когда вы идете на google.com, вы подключен к одному из компании Google компьютеры, имеет файлы для google.com. 

Затем он просит конкретного файла. Так что, если вы идете в - Я не знаю, - example.com / index.html или / test.html, Вы собираетесь попросить что конкретный файл. И сервер веб собирается чтобы вернуть его к вам. 

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

Файлы JavaScript, который определяет взаимодействие с веб-страницы. Файлы изображений, которые являются всего изображения. И, возможно, ссылаются на другие файлы HTML, которые то вы можете посетить. 

Майк Риццо: ОК, отлично. Так вы, ребята, все, пожалуй, кропотливо настроить локальный хост на вашей виртуальной машине. И это просто, вид, является местным домена, что ваш компьютер принимает только для вас на свой страх и IP-адреса. 

Таким образом, внутри это, то вы можете добавить к нему свои собственные веб-страницы. Я имею в виду, в CS50 финансов, вы должны иметь добавлены некоторые HTML страницы, которые, рода, завернутый в обертку PHP. Но в конечном счете, на какие страницы вашего PHP были вывода было HTML. 

Но вспоминая самого начала из PSET, мы должны были установить разрешений за все, верно? Так что это просто в основном дает нам знать, кто может читать, писать, и, возможно, выполнить каждый из файлов. Так что мы собираемся сделать быстрый - HM? 

ТОМАС Реймерс: Итак, мы собираемся сделать быстрый демо. Так что просто, чтобы напомнить вам, когда вы подключить к компьютеру компании Google - кто - и попросить файл, компьютер сначала необходимо убедиться, что вы авторизованы на самом деле посмотреть файл или читали, что файл, потому что вы не можете просто спросить для любого файла на этом компьютере, не так ли? Это было бы рискованно,. 

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

Так что, если у нас есть владелец, группа, а затем мир. И затем, для каждой из этих групп, вы может иметь одно из трех разрешений, ОК или несколькими из них. Вы можете прочитать разрешения. Вы можете иметь права доступа. И вы можете иметь права на исполнение. 

Так что в плане реальных типов файлов, чтения разрешение, как на самом деле чтение содержимое файла. Право доступа пишет к указанному файл. Разрешение на выполнение работает файл, как вы делаете, когда вы запускаете один из Ваши CS50 проектов. 

Поэтому, когда мы думаем о файлах например, когда нам нужно, чтобы прочитать HTML файл, который должен быть мир читается, не так ли? Предположительно, также владелец хочет , чтобы иметь возможность редактировать файл. Таким образом, владелец будет нуждаться читать и писать разрешения. Они действительно не нужно выполнять. 

Группа, мы собираемся лечить же, как и в мире на данный момент. Поэтому они нуждаются разрешения на чтение. Но они не должны писать или права на исполнение. И теперь, если мы вспомним бывший PSETs, что мы понимаем, это такого рода выглядят как двоичный, не так ли? 1 означает да. 0 для нет. И мы действительно можем перевести это в двоичную. 

Так 110 в двоичном будет 6. 100 будет 4. То же самое с миром. Таким образом, число вы получили бы для Разрешения для этого будет 644. 

Майк Риццо: И если вы вспомните когда вы права измененными что-то, я считаю, они дали в задаче установить пример того, где вы могли бы сделать что-то вроде CHMOD 644 а затем имя файла. 644, то, теперь вы можете видеть непосредственно где, что исходит от. Так, мы надеемся, что делает, что немного более ясным. 

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

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

И PHP, которые вы, ребята, видели хотя мы не будем говорить об этом строго, как правило, права измененными с разрешение 600, потому что это бежать с разрешений владельца. По крайней мере, на приборе. 

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

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

Круто. Так что это просто повторение всего, надеюсь, что мы рассмотрели в раздел, и лекция, и до сих пор в CS50. И теперь мы собираемся начать говорить о специально библиотеки. JavaScript и CSS библиотеки для веб-приложений. 

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

Так много людей написали называется библиотеки. И в этом контексте, что они также называется рамки. Мы собираемся использовать два синонимы. И то, что они есть, что они в основном предварительно сделанные куски кода - либо CSS или JavaScript - что отнять много объединиться у вас есть в кодировании. 

Таким образом, они заранее определить кучу классов или предварительно определить кучу функций для Случай в JavaScript, которые вы можете позвонить позже. И тогда вы можете, своего рода, получить доступ к этому коду, не необходимости что-либо делать. Пример библиотеки был CS50.H. Это была библиотека мы дали вам обратно в неделю один, что позволило вам сделать такие вещи, как то GetInt и GetString без необходимости писать любой код самостоятельно. 

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

Поэтому у нас есть равных типа сценария JavaScript источником равно Javascript.js. И если вы думаете на ваш CS50 Проблема финансов установить, если вы смотрели в header.php в папке шаблонов, Вы бы видели, некоторые из них включены. Так что это первый - сценарии - является в том числе библиотеки JavaScript. В том числе библиотеку CSS является немного отличается. 

Здесь вместо сценария TAG вам нужно тег ссылки. А потом, тип текста CSS немного отличается. Вы не всегда должны включать в себя отн стилей. Но я думаю, что это, вообще говоря, хорошая практика. 

И, наконец, HREF, который вы наверное, видели в ваших ATAGs для связи в различных звеньях всего определяет звено, где найти это. Например, если мы хотели, чтобы связать отличается библиотека - давайте просто скажем, - что жил в styles.css. И мы хотели, чтобы связать, что в это состоялся в Интернете, мы бы скопировать это. А потом вставьте его в то, что мы имеем право здесь вместо этого. 

ТОМАС Реймерс: Хорошо, мы надеемся, вы ребята уже знакомы с тем, как связать CSS. Вы должны были сделать это на ваш последний коричневый комплект. JavaScript, некоторые из вас, возможно, есть опыт работы с. Некоторые из вас не может. 

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

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

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

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

Для этого CS50 окончательного проекта, они не должны быть супер значение, поскольку проекты, которые вы, ребята используют, вероятно, скорее, своего рода, известны. Но когда вы на самом деле выйти в мир и начать использовать библиотеки, которые может или не может быть также реализован в виде некоторые из наиболее популярных из них мы будет переживает. Это хорошо, чтобы быть в состоянии понять эти лицензии и в понять, что они означают. И возвращаясь. 

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

Это называется браузеру браузера совместимость. И все чаще это становится все более и больше проблемы, тем более, -браузеры все больше и больше свободы на выполнение того, как они хотят. Таким образом, чтобы преодолеть это, там на самом деле замечательная библиотека называется Normalize.CSS. 

ТОМАС Реймерс: Мы включили ссылку. В этот момент, это полезно, если у вас есть свой ноутбук в там глядя на сайте. И мы даем вам это право сейчас просто потому, что окончательный CS50 Проект на самом деле происходит, чтобы прошу вас ее реализации аналогично и через браузеры. 

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

Майк Риццо: Так что, если мы хотели просто нажмите на ссылку действительно быстро и шоу Вы, как это выглядит, вам можете скачать его с помощью гигант кнопку Скачать. Или я призываю вас, чтобы узнать больше об этом нажав на эту ссылку в нижней правый угол. 

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

Майк Риццо: ОК, отлично. Так вот Нормализовать. Мы хотели дать вам что очень быстро. О, у вас есть вопрос? 

АУДИТОРИЯ: Итак, когда вы загружаете его, вы просто следуйте этот код, что они имеют под кнопкой Download? 

ТОМАС Реймерс: Да, так при загрузке - 

Майк Риццо: О, это великий момент. Так что вопрос в том, как сделать мы на самом деле ее скачать? Так что, если мы нажмите на ссылку, мы видим, что это на самом деле всплывает на исходный код. Таким образом, чтобы сделать это, то, что мы могли бы сделать, это просто нажмите кнопку Сохранить как. Сохранить как и что следует воспитывать файл. И тогда мы сможем выбрать, чтобы сохранить это как normalize.CSS. И тогда вам придется связать его в - 

ТОМАС Реймерс: Так же, как вы ссылаются в любой другой файл. И как только вы связать его в то, что это здорово о Нормализация это будет на самом деле заботиться о всех трудно работать сам по себе. Это означает, что у вас нет добавить любые классы. 

Вы не должны ничего делать странные. Это нормализует без тебя делать что-либо дальше. Да, вы должны включить его. Google Chrome не отвечает. 

Просто быстро в сторону - Я заметил, мы прыгнули в это. Остальная часть этой презентации будет краткий обзор. Обзор библиотек. 

В принципе, то, что они есть. То, что они делают. Как они полезны. Как вы могли бы реализовать их. Если вы хотите начать смотреть на них, следующих вместе, и прочитав им, я настоятельно рекомендую бы это. 

Кроме того, вы всегда можете также начать загрузку их и в том числе их в виде просто чтобы посмотреть, что они выглядят, как и что они делают, если у вас есть ваш ноутбук перед вами. Если нет, то вы всегда можете держать слушать нас говорят. Мы собираемся продолжать говорить. И у нас есть время в конце, мы надеемся, мы на самом деле попасть в показывая вам, что некоторые из этих библиотек выглядеть. 

Майк Риццо: Круто. Ладно, теперь давайте поговорим о шрифта Высокий. 

ТОМАС Реймерс: так шрифта удивительное является очень аккуратным сайт, особенно для тех, из нас, кто менее художественно талантливый. Не обращая внимания на имя шрифта Удивительный, это дает Вы куча значков, которые очень полезно. Так много раз вы будете осуществлять значок, который вы можете как хороший х так что вы можете закрыть что-то. 

Или вы можете какую-то кнопку Изменить с карандашного рисунка, как у всех остальных есть. И вот, когда вы узнаете, что рисование эти значки могут быть очень утомительным и трудным. Шрифт Потрясающий - если вы на самом деле перейти на сайт - дает огромное количество иконок под значки на самом верху. Да, просто верх. Это даст вам много иконок бесплатно. 

Так вот вы видите у нас есть такие вещи, как Звездочка, бары, молния, календарь, ошибка, книга и так далее. Это может быть очень полезно. То, как вы включить это вы включаете буквально файл CSS. И после того как вы включили файл CSS, то, что вы можете сделать, это создать тег называется I. Он satands для значок с классом Англии стоя шрифта Высокий. И потом, все, что вам больше подойдет класс. 

Так что, если я хотел икону этом плюс квадрат прямо здесь, я дал бы это класс Англии. А потом FA дефис плюс дефис квадрат. 

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

ТОМАС Реймерс: И потом, в последний CSS Библиотека мы хотим, чтобы пройти через мы пытаясь сохранить его минимальная на CSS библиотеки, потому что мы понимаем, Название этой презентации является JavaScript библиотеки. Но мы думали, что мы можем, а познакомить вас с другими библиотеками в то время как мы говорили о библиотеках. 

Это Google Веб шрифты. И то, что Google Веб Шрифты позволяет вам сделать, это добавить шрифты на ваш сайт, который является действительно простой способ сделать это довольно и отличить свой набор от всех остальных, если у него есть красивый шрифт или если у него есть хороший Коллекция шрифтов. Google Web Fonts хорош в отличие от других библиотеки в том смысле, что это действительно руководствуется установки. 

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

А потом, прокрутите вниз. Прежде всего, они дают вам CSS, что вам нужно на самом деле ссылаются на него. Это прямо там. Вы можете просто скопировать и вставить, что дюйма И хорошая вещь об этом один является Вы на самом деле не нужно даже скачать файл. 

Что он собирается сделать, это он собирается перейти по ссылке версии компании Google от него. Итак, вернемся к что это значит. Это означает, что когда пользователь загружает файл - загружает ваша страница HTML - ваш HTML страница будет ссылаться на этот файл. 

Итак, ваш компьютер увидит, О, это размещается на google.com, а чем на theirsite.com. Отпусти меня спросите Google для этого файла. И потом, это будет включать в себя это почти как если бы это было частью вашего собственного сайта. 

ТОМАС Реймерс: Круто. И как только вы включаете это, то в включить его в свой CSS, это дает вам фактическая линия. Таким образом, вы установите семейство шрифтов недвижимость совпадает с именем вашего шрифта. 

Майк Риццо: ОК. Таким образом, мы только что закончили с CSS. И некоторые из вас могут подумать: ну, у нас было немного CSS на CS50 финансов. Но библиотека CSS был загрузочный. Мы фактически включают начальной загрузки немного позже под JavaScript, потому что с библиотека начальной загрузки CSS также поставляется с большим количеством JavaScript этой Начальной загрузки или Twitter - кто сделал Bootstrap - использует для управления всеми их CSS. 

ТОМАС Реймерс: Кто-нибудь есть любая вопросы до сих пор о CSS в целом? Мы хорошо? Потрясающе. 

Майк Риццо: Потрясающе. 

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

Майк Риццо: Таким образом, мы хотели поговорить о JQuery с самого начала. Кто-нибудь слышал о JQuery до или использовал его? Да, пару? Так что если вы просто работать с родными JavaScript, вы окажетесь набрав много длинных селекторов много. Так что JQuery делает это обеспечивает хороший оболочка для JavaScript язык, который позволяет легко выбрать и манипулировать различными элементами в объектной модели документа веб-страницы или DOM, который я думаю, вы, ребята, слышали о в лекции в этой точке. 

ТОМАС Реймерс: Если вы еще не слышали о это или если вы еще не смотрели лекция тем не менее, объектной модели документа является в основном, как представлены вещи. Так HTML вроде выглядит как дерево, когда вы на самом деле сделать это. У вас есть HTML элемент на вершине. У вас есть голова и тело. 

А потом, в том, что вы есть все остальное. Вот называют DOM - Объектной модели документа. Так модель, которая представляет объекты в документ представляет собой простой способ думать об этом. И один из Самое замечательное в JQuery это действительно делает обходе что и манипуляции элементы внутри что невероятно просто. 

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

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

Так что если вам нужно выбрать элемент, Internet Explorer может сказать, что вы должен делать этот путь. Firefox может сказать правильное путь таким образом. JQuery не заботится. Когда вы говорите JQuery, чтобы выбрать элемент будет выяснить, как это должен делать это в браузере пользователь в данный момент, а затем сделать это таким образом. 

Майк Риццо: Так что давайте не будем говорить о использование JQuery немного. Так же, как PHP, JQuery имеет конкретный любовь к знака доллара. Таким образом, вы увидите, что любой JQuery - ну, не все. Иногда можно заменить доллар подписать со словом JQuery. Но в целом, только потому, что короче, когда вы видите JQuery быть используется это будет со знаком доллара. 

Так вот, мы просто показывая начало Селектор для элемента в DOM. Здесь, у нас есть знак доллара с последующим открытыми скобках, а затем котировки. И в течение кавычек идут наши селекторы для различных элементов. Так же, как в CSS, в чем мы нуждались селекторы уметь укладывать различные элементы на странице. Эти различные селекторы перевести точно в JQuery и JavaScript, по большей части. 

Так вот у нас есть точка Foo. Так что если вы помните из лекции, точка просто означает класс. Таким образом, мы выбрав элемент с класса Foo. Так что если я иду вперед и открыть наш Консоль JavaScript здесь очень быстро просто продемонстрировать это, если я просто наберите знак доллара, мы видим, что это какая-то Функция, которая идет вверх. И это просто определяется JQuery. 

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

Так в то время как, GDB может быть как, ты уверены, что хотите запустить следующий шаг? Консоль это в реале. Так как веб-страница является оказание и делать все, что он делает, Совет также работает вместе с ней. И вы можете поместить приписать код в что консоль, которая будет быть запущена на странице. 

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

Кроме того, можно также прошли в верхнем правом углу, который отрезали на этом экране, где она имеет три горизонтальные полосы. И вы спускаетесь до инструментов и Затем JavaScript консоль здесь, где можно увидеть - по крайней мере, на Windows - ярлык управления переключением J. Итак если бы мы хотели, чтобы выбрать элемент в пределах этой странице, точно так же как я показал прежде, мы делаем знак доллара открытые скобок а затем цитирует. 

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

Поэтому я хочу, чтобы выбрать что-то с классом. Контейнер, только потому, что я знаю, что это то, что на нашей веб-страницы прямо сейчас. И я ударил Enter. И мы видим, что она выбрала его. Так он показывает, что это вернулся этот объект. Так что это основной выбор. Если бы мы хотели на самом деле работать с ним, вам придется позвонить что-то на этом выборе, который мы получим в дальнейшем. 

ТОМАС Реймерс: Так что просто смотреть на это более подробно, это ничем не отличается чем вызовов функций, которые мы сделали в C. Имя функции здесь является немного странно. Это знак доллара. Это просто имя функции. Там нет ничего особенного в этом нет. 

У нас есть открытые скобки. Тогда, у нас есть один аргумент, который в этом случае оказывается, строка, который является селектором для него. И потом, у нас есть наш закрытая скобка. Вот и все. 

Это не так сильно отличаются. Хотя, это действительно выглядит очень странно. И это может быть, своего рода, камнем указать для многих людей. 

Майк Риццо: Итак, подобным образом, если бы мы хотели , чтобы выбрать элемент, который имеет идентификатор, теперь мы хотим, чтобы выбрать по ID вместо класса. Было бы нечто подобное, где мы просто сделать резкий знак для ID. Таким образом, мы выбора здесь все элементы, которые имеют ID бар. 

ТОМАС Реймерс: И это распространяется. Это CSS распространяется. Так же, как в CSS, вы можете выбрать все Ссылки, которые имеют класс Foo. Вот, это то же самое. 

Вы могли бы сделать a.foo, который будет выбирать все ссылки с классом пищевой. Вы могли бы сделать резкий бар, который будет выберите ссылку с идентификатором бар и т. далее, и так далее. Любой селектор CSS является допустимым Селектор JQuery. 

Майк Риццо: Да. Итак, теперь давайте перейдем к немного манипуляции, что мы можем сделать с наша JQuery. Так JQuery имеет определенный тип обозначений, где мы просто использовать точка в конце. И вы можете думать об этом, как и в С, как мы были разные структур. И идти в тех структур, вы бы использовать точку, чтобы попасть в них. 

Это, своего рода, нечто подобное. Только теперь у нас есть функции в этом селектор, который мы можем назвать на нем. Так вот, самый первый пример Вы можете видеть это селектор CSS. А в принципе, что это делает это относится первый элемент CSS на это вещь, которую вы выбрали - это элемент, который вы выбрали - со значением этого. 

ТОМАС Реймерс: Так просто перевод что было бы, если JQuery, в основном, просто взял Foo. И тогда в CSS сказал, Цвет красный и близко. Это та же идея. Что это делается в ее выборе все элементы Foo. А потом он применяется. Вроде, цвет собственности равна красный. 

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

ТОМАС Реймерс: И когда вы думаете о каковы полезные приложения это, это CSS один, первое, что Вы можете начать думать о том, с точки зрения даже выпадающие меню. Вы можете начать делать вещи, как, когда пользователь наводит курсор на верхней части из выпадающего, вы хотите сделать нижняя часть видна. Не так ли? 

Таким образом, в CSS, у нас есть свойства сделать что-то видимое. Такие вещи, как дисплей толстой кишки ни сделает его невидимым. Показать блок будет сделать его видимым. Или даже если вы хотите пойти более простым, вам есть такие вещи, как видимости равных видно, и видимость составляет скрыта. 

А вы могли бы приступить к осуществлению вещи как выпадающие меню право после получения через идею о том, как Вы можете выяснить, когда это открывает, которые мы получим через очень короткое время. Но мы можем начать видеть применения этого. В том же смысле, если бы вы попытались и осуществлять, скажем, чат двигатель, и вы хотите, чтобы сделать немного речи пузырь придумать, когда у Вас есть получил новое сообщение, как только вы получите новое сообщение, вы можете сделать немного речи пузырь придумать путем изменения HTML страницы, не так ли? Добавив, что дополнительный речи пузырь с дополнительным текстом на там. Да? 

АУДИТОРИЯ: Таким образом, вы бы встроить это в HTML код в вроде как [Неразборчиво]? 

Майк Риццо: Верно. Да, мы вернемся к этому в немного. Да, это похоже немного, чтобы PHP. Не совсем похожи. 

Хороший различие, чтобы сделать то, что эта на самом деле редактирования, когда мы редактировать страница, потому что это не будет редактирования сам файл, что в настоящее время , хранящихся на сервере, потому что мир не должны иметь разрешение редактировать файлы. Это просто редактирования, что находится на странице и то, что отображается в браузер. Так что если вы были, чтобы перезагрузить страницу после, говорят, удаление что-то, как мы видеть, что мы можем сделать с призывом удалить, что всего было то вновь. 

ТОМАС Реймерс: Так один способ думать о это если я компьютер и Майк, вроде, сервер. Что случится, я собираюсь спросите Майка, эй, я могу иметь копию эта веб-страница? И он даст мне его копию. 

Нет, это не оригинал вещь. Это просто копия. И то это было бы как, о, есть JavaScript здесь. Очевидно, что я должен изменить страницы, чтобы быть, как это. И я редактирования вашу копию. 

Но это не осуществления фактическая копия. И если бы я спросил его снова обновите страницу, - эй, я могу иметь другой чистую копию - он собирается дать мне другой чистовик. И потом, я собираюсь сделать то же самое как, о, это JS здесь, что говорит редактировать этот. И я буду продолжать это делать. 

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

Оказывается JQuery имеет встроенные функции которые делают все, что анимация очень, очень легко. Так что есть первый увядает из функция, вы можете позвонить на что-то. И это способ изменить CSS из этот элемент в оживленной дороге. Так оно принимает независимо элемент вы называете это исчезать на. А потом, медленно меняет его непрозрачность пока он не станет полностью прозрачной. 

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

Майк Риццо: И потом, если вы просто должны некоторый тип анимации в виду, что JQuery не обязательно обеспечивает. Например, предположим, что JQuery действительно обеспечивает вас с горкой вниз и слайд вверх. Ну, скажем, вы хотели, чтобы скользить что-то на левом фланге или в от право вроде как CS50 главная страница делает всякий раз, когда вы идете на новую панель. Затем вы должны, вероятно, придется реализовать его самостоятельно, используя анимировать функцию в JQuery. 

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

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

И я призываю вас - всякий раз, когда вы приходите через то, что вы делаете не знают или просто хотите узнать больше о частности метод, который можно назвать на что-то - Просто Google это. JQuery является чрезвычайно хорошо документированы. И зачастую есть много примеры, которые они предоставляют для вас. Если мы прокрутите вниз - путь вниз - что мы можем использовать, а также. 

Опять же, когда разработчик фактически идет через проблемы заключения библиотека, они обычно хотят кто-то его использовать. Так наряду собирается быть документация. И, что документация, как правило, быть узнать на странице проекта, который почему мы дали вам, что оригинальный сайт в начало, которое соединяет вас с Страницы проекта, чтобы вы могли видеть, что документацию. 

Как правило, страница проекта в случае из [неразборчиво], он сказал вам в имена классов. В случае JavaScript, это дает Вы название функций. Кстати, если мы прокрутки вверх к вершине, быстрый любопытно отметить на функций всякий раз, когда вы видите функцию реализованный как это с трудно скобки в середине, это означает, что это свойство является необязательным. Просто головы. Я видел много вопросов об этом. 

И вот мы видим, что живой принимает свойства в качестве необходимого аргумента. А все остальное не является обязательным. Примечание стороны - Вы можете думать об этом, своего рода из, как человек страниц. Справочные страницы документации для C и для многих других вещей, а также. 

Майк Риццо: Таким образом, мы узнали, как изменить различные CSS на странице, оживить его, и снять добавить HTML. Но один из действительно самый мощный вещи о JavaScript и особенно JQuery - что это позволяет сделать, это ответить на различные элементы, которые происходят. Например, здесь мы имеем обработчик события. И это просто означает, всякий раз, когда это Событие происходит, мы с ней в определенным образом. 

Так вот, общий событие JQuery обработчик является точка на. А потом, первое, что вы предоставили это то, что событие это должно слушать для. Так вот, это щелчок, что мы ждем. 

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

Майк Риццо: Верно. А потом, когда это произойдет, это просто выполняет эту функцию, что мы даем ему в качестве аргумента, и что он предупреждает привет или привет. 

ТОМАС Реймерс: Так в случае JavaScript, это место, где мы должны удалить себя от С. Мы можем на самом деле принять функции в качестве аргументов. И есть много действительно сложные способы сделать это. Мы собираемся содействовать в одну сторону, что вы можете определить функционировать прямо там. 

Так что, когда вы просите функции как параметр, вы в основном только собирается определить функцию на месте. И то, как вы определяете функцию в JavaScript является вы буквально сказать функцию. Затем, как правило, название функции. Но мы никогда не будем ссылаться на эта функция снова. Таким образом, мы оставить его безымянным. 

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

Майк Риццо: Есть ли вопросы по этому поводу? Это может быть немного запутанным, в первый раз вы его видите. 

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

Майк Риццо: Да, давайте сделаем это. ОК. 

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

Первый это ссылки на файл JavaScript. И мы увидим, что здесь. Мы видим, что в голове HTML документ, в частности. Таким образом, вы увидите, что там мы, в основном, говорят SRC, которая выступает за источником. И это URL. 

Поэтому здесь можно сказать, что мы включены JQuery. И мы также включили скрипты. Другой способ включить JavaScript является что можно включить встроенный скрипт Тег, как у нас на дне, где он говорит типа сценарий текст JavaScript. 

Так мы говорим, слушать, мы о включать сценарий. И тип этого сценария является JavaScript, который является одним из видов текста. Очень просто. 

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

Итак, если мы хотим написать некоторый наличие - давайте просто скажем, мы хотели изменить тело потому что сейчас у меня нет любые другие теги, что я могу действительно редактировать кроме тела. Давайте просто скажем, что я хотел изменить CSS этого. Поэтому мы будем идти вперед и изменения цвет него на красный. 

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

ТОМАС Реймерс: Так что, если мы вернемся к тому, что подать в частности - HTML, Файл - Что вы собираетесь чтобы увидеть это у нас есть - помнить, что это будет загружен, рода, в хронологическом порядке. Поэтому у нас есть первый руководитель. он загружает эти два файла. Тогда мы идем к телу. И мы видим, привет мир. Так мы оказываем привет мир. 

И то последнее, что у нас есть будет у нас есть тег сценария. Так он работает тег сценария, потому что это не говорю это, чтобы ждать. И это самое основное способ запустить JavaScript. 

С учетом сказанного, вы можете положить сценарий пометить в заголовке просто показать эту точку? И запустить это. Мы собираемся отметить, что это не изменить цвет. И это одна из проблем JavaScript является то, что вещи загружены в хронологическом порядке. 

Так в то время, что код бежал, мы выбрали - вернуться - тело тега. Тег тело еще не существует, потому что JavaScript является в соответствии с HTML. Таким образом, браузер, как выберите тела. Там нет такого понятия, еще. Таким образом, мы можем игнорировать это. И мы продолжаем. 

А потом мы определяем тело тега. Но это никогда не обновляется. Поэтому, когда вы реализуете сценарий теги, убедитесь, что вы поместите после тега тела. Следующий слайд. 

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

Так что давайте делать что-то к телу снова. И скажем, мы делаем это на - нажмите. Мы добавим функцию. 

Изменение Давайте: Tomas Реймерс его цвет на красный снова. Почему нет? 

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

ТОМАС Реймерс: И это становится красным. 

Майк Риццо: И это делает краснеют, как ожидалось. 

ТОМАС Реймерс: И мы видим, как мы можем начать строить очень основным взаимодействие. Другие вещи, которые мы могли бы хотеть сделать, это, если мы не хотим, чтобы сделать тело Цвет красный, давайте сделаем HTML фон красный цвет. Именно так это то же самое CSS. 

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

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

ТОМАС Реймерс: Хотите, чтобы обернуть, что в Тип пункта, прежде чем мы это сделать? 

Майк Риццо: ОК. Да, почему бы нам не сделать это просто так мы можем выбрать его немного больше. 

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

Майк Риццо: Да. Итак, давайте посмотрим. Вместо выбора фактическое тело Теперь, я просто выберите все с Класс привет, которую мы здесь просто есть одна вещь. Таким образом, мы не должны беспокоиться об этом. 

Так что я буду обновлять его. Я буду идти вперед и щелкните по нему. И это, своего рода, сделал странный Slide вверх самое, который не смотрел, что привлекательным. Как правило, они выглядят довольно приятно. Я думаю, это - для некоторых Причина - нет. Я просто сделать исчезать так, вы можете посмотреть на это тоже. Намного приятнее. 

И потом, если я открываю наличие утешить снова, и мы хотим увидеть, что он выглядит, когда мы исчезать его дюйма Теперь, я просто позвоните исчезать на этом. И она исчезает масштаб 

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

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

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

Так на самом деле быстро о начальной загрузки, который автоматически включены в ваша последняя проблема установить в папке CSS а на самом деле связаны с в вашем header.php. Таким образом, вы могли бы добавить классы, определены в Bootstrap к нему. И это было бы автоматически стиле те вещи, соответственно. 

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

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

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

Потребовалось всего этого, и это упаковано его вместе и сказал, здесь мы идем. Теперь люди могут использовать это. И вы можете найти его на в getbootstrap.com. Было автоматически включены в ваша последняя проблема установить. И вы больше, чем можете использовать его на своем окончательном проекте. И если вы хотите следовать, что ссылке, чтобы получить Bootstrap. 

Вы увидите здесь является BootStrap CSS сайт. Вы увидите Bootstrap. И если вы прокрутите вниз, вы увидите как загрузить его, как установить его, и так далее. 

Майк Риццо: И вы также можете, что интересно, настроить его на быть любой вид темы что вы хотите. Я знаю, что то, что я сделал для моего Окончательный проект, когда я взял класс был настроить его. Другой вариант начальной загрузки, что было другую цветовую схему и различные формы некоторые разные вещи. Поэтому я призываю вас, чтобы играть с этим. Это забавно делать. 

ТОМАС Реймерс: Глядя в верхней опять же, это очень похоже на Font Отличный сайт. Много документации начнется чтобы показаться похожими, когда вы видел достаточно. Так вот у нас есть CSS компонентом этого. И вы увидите, как это можете стиль вещи. Так что если вы щелкните на столах, например, вы можете мгновенно сделать таблица довольно простым добавлением класс таблицы к нему. 

Те же вещи для кнопок. Если вы просто добавить класс BTN и BTN по умолчанию или BTN первичный, вы можете получить любую из этих кнопок с этими предварительно сделанных стилей. И потом, если вы ищете что-то более сложное, чем просто рестайлинга, что ж уже есть, более на вкладка JavaScript по верхней мы есть куча компонентов. 

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

Так что те компоненты бутстраповских. Я хотел бы призвать вас высоко пойти посмотреть на них. Там в компонент JavaScript и компонент CSS. Не стесняйтесь использовать их как хотите. Мы не собираемся идти слишком много в них потому что мы чувствуем в документации действительно хорошо сделано. И да. Есть ли у вас вопросы по этому поводу? 

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

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

ТОМАС Реймерс: Так что все было сделано без нас писать практически любые CSS. Мы также видим, заголовок в верхней, которой цвета нами. Но фактическое поставив его на верхняя часть страницы и сделать это свиток был начальной загрузки. А потом даже для другой библиотеки - это не один мы говорили о но Вы можете Google, если вы хотите. Это называется prettify.js. И это будет Подсветка синтаксиса кода для вас, используя как CSS и JavaScript. 

Последнее, что мы хотим говорить о прежде, чем мы выпустить вас из в Мир посмотреть в библиотеках, чтобы выяснить, как их использовать и, надеюсь, читать документацию и найти то, что вы Необходимость в том, как найти библиотеки. Таким образом, первый является мы просто будет толкать Google. Сразу Google. 

Это буквально то, что мы делаем, когда мы нужно что-то делать, мы Google. Есть библиотека JavaScript, что позволяет мне управлять временем в полезный способ? Так что, если я знаю, что какой-нибудь пользователь создания счета здесь, и это текущее время, как я могу вычислить Разница с что без того, чтобы рассчитать его самостоятельно? Так что это на самом деле обычное дело, JavaScript библиотека времени. И вот мы, Moment.js-- один из самых популярных. 

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

Так большинство вещей - когда вы их найдете - собираются быть размещен на одном из сайты, которые принимают код. Они несколько популярные из них. Самый популярный, по безусловно, является github.com. И если вы идете в GitHub это на самом деле где было организовано Нормализовать. Так что если вы хотите, чтобы вернуться к тому. Покажите им, что. 

Майк Риццо: А что на самом деле, где это размещается тоже, если вы заметили. 

ТОМАС Реймерс: Да. Так что, если вы идете к Нормализовать и перейти к GitHub. Были это? 

Майк Риццо: Эта маленькая кошка вещь является символом GitHub. 

ТОМАС Реймерс: Ох. Так GitHub использует метод, называемый Git для хранения кода. Является ли вы не знаете, что это такое или это пугает вас, это нормально. Вы не должны знать, что Git является потому GitHub имеет кнопку Загрузить в правом нижнем углу. 

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

Майк Риццо: Выход Интернета. 

ТОМАС Реймерс: Это нормально. Последние две вещи, которые мы хотели говорить о - мы говорили о Git - является поиск и устранение неисправностей. А это не так актуально для конечный продукт, как это когда вы покидаете 50. И когда вы столкнетесь с продуктами реализации библиотеки или реализации Ваш собственный проект, вы будете есть вопросы или вы будем смотреть на ваши вопросы. 

Опять же, Google его. Это буквально то, что мы делаем. Это будет звучать глупо. Но буквально, мы Google его. И опять же, одним из первых вещей, вы будете как правило, работают в это stackoverflow.com, который является прекрасным вопрос и ответ зрелище. 

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

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

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

Кроме того, он также имеет наведении. Но чтобы получить полный спектр тех, посмотрите на JQuery документация и сделать это. Я сделал что-то глупое здесь. 

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

Майк Риццо: И то, что было Код 404 стоял в HTML? Помнит ли кто-нибудь? Не найдено, правильно. Хром также добавил этот аккуратный вещь, где можно - 

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

Майк Риццо: Да. 

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

Майк Риццо: Все, что вы, ребята, хотели бы чтобы увидеть очень быстро в, как, два минут или меньше? 

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

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

Майк Риццо: Да, так that's - 

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

Майк Риццо: О, я не знал, что. 

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

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

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

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

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

Майк Риццо: Да, и если мы просто нажмите на index.html действительно быстро - 

ТОМАС Реймерс: Вы увидите вот Исходный код для нашего сайта. 

Майк Риццо: Кроме того, я забыл нажать правой раньше с большим столом он включен, но есть также стол из chmods, что мы включены как раз для вашей ясности. Но если мы выделите все, вплоть до дно, мы фактически не делают очень много с JavaScript материал вообще с этим. Это исключительно от всего остальное, что мы имели. 

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

ТОМАС Реймерс: Если у вас есть вопрос о своем проекте или, если это может быть отношение, мы, вероятно, остаться немного после этого. Но кроме этого, есть хороший уик-энд. 

Майк Риццо: Да, нравится. Увидимся. 

ТОМАС Реймерс: Увидимся.