АЛЛИСОН Бухгольц-AU: Все права все. Добро пожаловать в раздел. Это наша предпоследнем разделе. Это так грустно. Я не знаю, что я собираюсь сделать не видя вас, ребята каждый понедельник. Я думаю, мы должны просто-- Может быть, мы могли бы просто встретиться здесь и пообедать или что-то. Я не знаю. Я принесу вместо еды. Мы просто говорим. Но да, на следующей неделе будет наш последний раздел. На этой ноте, вы должны викторину на следующей неделе. Я знаю, что забыл сделать мой, как, две недели заблаговременное уведомление на прошлой неделе, но, надеюсь, вы, ребята, знал, что это произойдет. Надеемся, это один из последних промежуточных выборах для вас, ребята, за семестр. Но это будет охватывать все материал, который мы пошли снова. Так что это не нравится, вы можете просто забыть около четырех петель или переменные. Потому что мы узнали те, в начале, те, очевидно, справедливая игра для викторины. Это будет тот же формат, то же самое длина, так что вы уже привыкли к этому. Там будет кодирования с помощью ручных проблем, Может быть, некоторые верно неверно, Может быть, какое-то короткое ответ. Таким образом, вы должны быть знакомы с форматом, особенно если вы берете Практические тесты. Но, как я говорю здесь, это накопительными, но мы определенно будет упором на вещи из шестой неделе вперед. Таким образом, мы, вероятно, не будет спросить вас о том, сколько байт в каждом типе или эти виды вещей, но мы, вероятно, будет заинтересованы в таких вещах, как связанные списки, или различные структуры данных, или различные алгоритмы что мы говорили. Поэтому убедитесь, что вы действительно на тех, и если вы нужны какие-либо ресурсы, вот много ресурсов. Я просто дал вам вид о быстром списке есть. Следующая неделя будет викторина обзор течение этого времени. Так что, если у вас есть какие-либо вопросы или конкретные темы, конкретные вещи, на викторине, что Вы хотели бы пойти снова, пожалуйста, присылайте их мне раньше времени, так что я могу вид подготовки некоторый материал для этого. И в дополнение к этому раздел обзоре мы также проведения курса всей обзор, как мы сделали в прошлый раз. И это будет делается теми же людьми. Я не знаю, если это делает это лучше или хуже, но это будет меня, Ханна, Даван, и Гейб снова. Так что, если вы хотите прийти и увидеть нам все подшучивали друг над другом и вы пройдете через викторины Обзор, вы должны обязательно пришли к этому в следующий понедельник также. Таким образом, вы будете только варенье понедельник упакованы обзора викторины, и это хорошо потому что тогда у вас есть Вторник для обработки через все. Но, безусловно, не проверить из этих ресурсов. Study.csv.net на сегодняшний день, я думаю, один из наиболее полезным, в основном потому что он имеет Много примеров кода, он имеет всю власть Очки со всеми примечаниями на нем, которые действительно то, что я рисую наиболее мои разделе материалов. Если есть что-нибудь в предыдущем разделы, которые я, возможно, посылаемые что вы не можете иметь получил, просто дайте мне знать. Как пример кода на прошлой неделе, если кто-то не получил, что, Просто напишите мне или прийти поговорить со мной, и я позабочусь о том, что вы получите это. Так с этим, сегодня мы будем будет говорить о JavaScript. И вот мы с Томми, который я был просто говорю вам вчера вечером. Я люблю Томми. JavaScript является его любимым Язык, как он говорит здесь. Они будут пытаться и сказать вам, что это не лучше, и они будут правы. Так Томми мастер JavaScript. Я не совсем на его уровне, но я был бы, "Томми, как я учу эти дети JavaScript? " Так что я получил несколько советов, так надеюсь, они вышло. Так пара вещей, которые нужно знать, что JavaScript является сценариев на стороне клиента язык, поэтому в то время как PHP является то, что мы рассмотрели более на стороне сервера, было загрузить на сервер, компилироваться и выполняться там. Этот выполнен на своей машине. ОК? Таким образом, вы загрузить некоторые страницы JavaScript, и он выполняет на вашем компьютере. Синтаксис очень похож на C и РНР. Мы собираемся пройти через Некоторые примеры JavaScript, и вы будете видеть, что Так мы говорим о переменных, циклы, и условия очень похожи. ОК? Дело в том, что они так похожи является вероятно, будет срабатывать некоторые из вас до, в некоторых случаях, просто потому, что Вы включить немного C где не должно быть. Может быть, вы попробуете и что-то типа когда он не должен быть напечатан. И от того, одно дело знаю, что JavaScript в динамически типизированных язык, как PHP. Так что, если вы, ребята, помните, из раздела прошлой неделе, когда мы были доброжелательными делать наш PHP ускоренный курс, мы видели, как строка можно быть превратился в INT, и так далее. Тип ваших переменных определяются во время выполнения, поэтому они могут меняться с течением Курс программы, и таким же образом, что никогда действительно объявить типы для PHP переменных, мы будем делать то же самое что здесь, где мы на самом деле не контролировать типы наших переменных, так сказать, как это делаем мы в С. И тогда одна вещь, это довольно круто что вы можете об ошибках проверить с помощью консоли, с этой великой функции console.log, что позволяет выводить различные переменные или объекты, которые мы о чем поговорить. Так же, как на прошлой неделе, когда я был как, "использовать эту функцию," со сбросом от вашего PSET это функция Вы хотите использовать, console.log. Я был так удивлен, как много студенты рабочее время не знаю о функции сброса. И я подумал: «Ребята, это воля сделать вашу жизнь намного проще ". Ладно, так что это было своего рода только краткий вещь, как всегда, у нас есть примеры. Я знаю, что вы, ребята любят тех,. Так вот пример очень просто JavaScript файла здесь. Так что это просто собирается создать это всплывающее окно, которое говорит, "Привет мир", когда вы зайдите на страницу, но давайте попытаться пройти через это немного. Так, очевидно, это просто как вашей обычной index.html. Так, только наша нормальная шаблон здесь, и у нас есть HTML, мы имеем нашу голову, и так же, как с помощью CSS, как мы включены некоторые вне файл, верно? У нас есть некоторый тип скрипта текст, который JavaScript. И источник hello.js, который является здесь. Это весь файл из hello.js. И тогда у нас есть некоторые Название и некоторые тела HTML что мы на самом деле не волнует. Что происходит, является, когда мы загружаем эту страницу, он автоматически выполняет этот сценарий. ОК? Так JavaScript будет выполнить автоматически. Так что это будет делать, это будет немедленно пойти и выполнить это. И это скажет, "предупреждение. Привет мир ". Какие оповещения является функция, которая фактически, порождает этот флажок. ОК? Так что это своего рода очередь охватывала. Там нет ничего лишнего у нас было сделать Кроме того, только предупреждение, а затем все, что мы хотели в нашем окне предупреждения. ОК? Так что это просто супер просто пример того, что JavaScript может сделать. Один из действительно здорово вещи, как мы увидим, является то, что JavaScript позволяет манипулировать веб-страниц, без загрузить их в любое время. Так что если вы want-- например, если Вы нависли над чем-то, если вы, ребята когда-либо видел, как меню баров, или при наведении курсора на некоторые тема появляется выпадающее меню, это потому, что из JavaScript. ОК? Таким образом, вы не перезагрузки всей страницу, чтобы получить это меню, чтобы показать, вы просто ищете для некоторых конкретных действие, которое пользователь принял, которые называются события, которые мы получим в, и как только вы видите, что вы говорите, "Хорошо, редактировать что-то на это страница и сделать его выглядеть по-разному, но только редактировать эти конкретные вещи. Не загружайте все это ". Так что на самом деле гораздо лучше, и Вы не должны перезагрузить ваши страницы, и это действительно здорово. Так декларации переменных, так что вы можете отчасти видеть, Я положил сверху здесь, слабо типизированным. Так что это очень похоже на PHP. Нам не нужно, чтобы рассказать JavaScript какой тип мы ожидая каждой из этих переменных будет. Они могут быть все, что типа мы хотим. Таким образом, вы заметите, в данном случае, мы заявляем, их очень просто, только с "Var" а затем, что мы хотим наш имя переменной, чтобы быть. Одна вещь, чтобы отметить, что, когда вы положить VAR перед именем переменной, это локально Прицелы его. ОК? Это совершенно разумным для вас полностью сотрите Вар и просто с равным CS50, и это было бы просто глобальная переменная. ОК? Таким образом, вы можете инициализировать его в обоих направлениях, Все зависит от того, как вы этого хотите. Так что если вы инициализации это внутри функции, и вы хотите, чтобы переменную остаться областью действия в рамках этой функции, Вы будете хотеть сделать что-то вроде Var имя переменной, по сравнению с, если вы хотите его глобальную область, то можете просто сделать имя переменной, а затем все, что вы хотели бы это устанавливается равным. ОК? Это своего рода прохладная вещь здесь, потому что, если мы замечаем, наша переменная б начинается как правда. И то, что это does-- может кто-нибудь сказать мне, что это делает? Итак, мы имеем некоторую тревогу. Что бы типа В быть в самом начале? АУДИТОРИЯ: Boolean. АЛЛИСОН Бухгольц-AU: Boolean. Верно. И тогда мы переназначить б в этой строке, не так ли? Так то вот, какой тип B быть? Было бы строка, верно? Так что важно для уведомление, что в C, мы не мог почти никогда не делают что-то подобное. Мы должны были бы иметь переменную, бросить его как-то иначе, Может быть, сделать какую-то функцию с двумя я, идут от заряда до целого числа. Но если мы замечаем здесь, б очень легко меняет тип. АУДИТОРИЯ: Подождите, так что вы можете просто быть, как "сделать б целое?" АЛЛИСОН Бухгольц-AU: Да. Вы можете просто переназначить б в целое. АУДИТОРИЯ: В самом деле? АЛЛИСОН Бухгольц-AU: Да. И тогда это было бы Int. Так что ваши переменные могут меняться с течением Курс программы тоже. Они не являются строго типизированным. Это очень слабо типизированным. ОК? В основном ваши переменные могут делать все, что они хотят, а мы как-то видел PHP. Они могут делать некоторые сумасшедшие вещи, так важно быть довольно осторожным. Имя переменные также. Если вы этого не сделаете, все вдруг Вы будете как, "Подождите, я думал, что это было строка, и теперь это INT, и я не совсем уверен, что здесь происходит. " Так что это просто простой пример показывая, как переменная можете легко изменить его тип по Курс программы. ОК. Так это должно выглядеть супер, супер знакомы. Так вот наши петли в JavaScript. Они точно так же, за исключением Вместо четырех Int я равна нулю, мы могли бы просто сказать, вар я равна нулю. И тогда мы могли бы в тот же самый вид состояния, тот же самый вид обновления, я плюс плюс работает просто отлично. Так Четверки же, whiles такие же, и делать whiles точно то же самое. То же рода общем формате. Заметим, четыре круглые скобки, кронштейны, это все то же самое. Также будет запятой когда мы доберемся до примере кода. Вы увидите, что это довольно так же, как в. Для объявления функций, опять же, очень похожи. У нас есть некоторые функции, которые просто говорит, что это функция, а затем Название нашей функции и входы. И снова, если мы замечаем, мы не имеют ни одного типа здесь вообще. Верно? У нас есть ничего не говоря, что это должны быть Интс или двухместные, или поплавки. Они могут быть все, что они хотят. Что важно, так это, заметив, что мы должны написать функцию заранее чтобы JavaScript знаем, что это на самом деле функция. Так что это просто некоторые простые сумма Функция, которая возвращает X или Y, и что тогда также круто является то, что вы можете на самом деле назначить функцию переменной. Таким образом, в этом случае, сумма теперь функция, которая на самом деле сумму. Так что, если вы заметили, здесь, у нас есть Функция, имя функции, входы. Верно? Здесь мы просто функции и входы. Итак, это называется анонимной функцией. И это то, что должно быть новым для большинства из вас, ребята, если не все из вас. Так в основном, что это означает, что мы не нужно имя нашего Функция в этом случае. Мы можем просто сказать: "Хорошо, я собираюсь имеют эту функцию, которая выполняет, здесь являются его входы, и вот что он собирается делать ". И особенно, когда вы присваиваете Функция некоторой переменной что вы собираетесь управлять, Вам не обязательно нужно назвать, потому что Вы собираетесь иметь в виду к нему по этой переменной имя, не то, что функция была на самом деле называется. ОК? Так что, если мы видим здесь, мы есть некоторая переменная сумму сейчас , что равно сумма трех и пяти лет. И мы бы это. И это будет просто есть предупреждение, три плюс пять равно числу. Это плюс просто объединить все наш ответ был на строку. Также здорово, плюс может объединять строки. Для JavaScript, как и PHP, HTML и CSS, как мы уже говорили, Многое из этого мы вроде принимая учебные колеса от здесь и вы, ребята, есть много курсе как на самом деле понять эти вещи. Они немного отличаются, но они не настолько чужды и что вы не можете Google вещей или искать их в Интернете с W3 Schools. И мы действительно ждем вас ребята, вроде, эксперимент и учиться на свой собственный. Таким образом, я знаю, это может показаться немного менее тщательно, чем некоторые из гр вещей что мы делаем, но это на самом деле причины. Но, надеюсь, это не слишком разные, и это не подавляющее. Так как массивы в JavaScript, снова очень, очень похожи. Верно? У нас есть массив переменных это равно пустые скобки, и это только пустой массив. Это часто называют Буквальный обозначения массив. Вот только одна вещь, мы ее называем. Если мы видим массив два здесь, у нас есть некоторые Буквальный массив, который состоит из трех элементов, не так ли? И тогда у нас есть некоторые вар третий элемент это некоторая переменная это просто собирается провести эту строку, JS. Элементы, хорошие заметить, разделенных запятыми, так же, как можно было бы ожидать. И вы также можете получить доступ к этим, как мы сделали в С, с этим индексом обозначений, не так ли? Так отличается от PHP Сейчас мы возвращаемся просто вид виду к вещам по индексу. Так же, как С, это также нулевой отметки. Я чувствую, что это будет на самом деле жестокий если они вдруг сделал JavaScript одного Индекс, и вы должны были полностью переосмыслить то, как вы думаете, о массивах. Одна прохладная вещь в том, что вместо того, чтобы do-- если вы когда-либо хотел длину массива, Может быть, вы итерации через нее пока вы не найдете какой-то цели, или вы бы просто знать, что это такое. Поскольку JavaScript является очень свободным в более способы, чем просто типу, как мы видим, здесь, мы можем только сделать этот массив больше, потому что мы решили. Если мы замечаем, массив три имеет три вещи, чтобы начать, но потом все внезапно, мы, как: "О, я просто шучу. Мы на самом деле происходит чтобы сделать его 101 вещей ". Так что если вы когда-либо хотели знать Фактическая длина вашего массива, Вы делаете это, как это. И мы собираемся, чтобы увидеть много этого обозначения в примерах, но с JavaScript это, как правило, то, что Объект, вы говорите о точка любого рода функции Вы хотите использовать с ней. ОК? Таким образом, в этом случае наша объект является массивом два, и мы говорим, что хотим Длина массива два. Так что это просто вызывает как длины на что. И это будет вернуть длину. Также что-то нужно отметить, что если мы замечаем, наши массивы, В отличие от C, они не имеют чтобы быть все же типа. Это гораздо больше похоже на PHP. JavaScript в основном так же, как Это интересно сливаются С и PHP. Таким образом, мы войдем в это. В настоящее время, давайте предположим, что ваши массивы в основном как C массивы, в том, что они равны нулю индексируются. ОК, так что это все. Вы также можете просто расширить Массив к тому, что индекс вы хотите. В то время как это, вероятно, SEG вина на вас или дать вам какую-либо ошибку, JavaScript, как, "Нет, это нормально. Я получил это. Мы просто ехать прямо где вы хотите ". Итак, объекты очень важно. Вы, ребята, будете использовать много из них в P SET, если я правильно помню. Так вещи, что они являются похоже в C являются структурами. Таким образом, вы можете думать about--, когда мы идем к примеру право после этого я думаю, что это сделать намного больше sense-- но мы в основном использовать объекты в организовать информации о курсе связаны между собой. Когда мы говорили о Структуры в С, мы часто говорить о студенте, который имел какое-то название, ID, дом, вы знаете, концентрация. И это своего рода то же самое что мы используем объекты здесь. Это просто организовать Аналогичная информация. Вы также можете думать о них, как более похож на ассоциативные массивы в PHP. Так что это будет своего рода вещи где у нас есть некоторые ключевые с некоторого значения, очень похож на PHP. Таким образом, вы можете инициализировать некоторые пустой объект, как мы видим здесь, только с фигурные скобки. Так массивы квадратные скобки. Пустые объекты фигурные скобки. Хорошо различие есть. И это только два разных способы установки свойств. Так что это своего рода намного больше таким образом, что похож на PHP, с нашей ассоциативные массивы, с нашими ключевыми, и наша ценность, в то время как Это один is-- вы будете увидеть это намного больше, в JavaScript. Это, как правило условность. И таким же образом, что мы сделали Массив двумя точечными длина, это говорит, "Хорошо, дай мне это атрибутов этого объекта ". Верно? Так же, как это было, "дайте мне атрибут длины массива два, " Это говорит, "Дай мне немного свойство нашего пустой объект ". Или в данном случае, мы назначив ее до некоторого значения здесь. Но вы также можете получить доступ к нему таким образом. А потом вот это просто показаны два разных предупреждения. Так это покажет оповещения будет точно такой же, это просто два разных способа доступ к элементу, который мы хотим. Имеет ли это смысл для всех? Я чувствую, как этот Возможно, имеет смысл, только потому, что мы сходит PHP. Но, как мы делаем больше примеров, это буквально в точности то же самое. Много это просто изменить в синтаксисе. Итак, примеры. Я люблю примеров. Так вот некоторые CS50 Переменная, является объектом, и мы храним все это Информация об этом. Итак, мы имеем, конечно, инструктор, TFS, psets, и в записи. Таким образом, мы заметили, это почти все разных типов. Верно? Так объекты могут хранить атрибуты различных типов. Мы можем думать о this-- это очень похожа на нашу ассоциативного массива в PHP. Так ключ, значение, ключ, значение, ключ, значение, так далее, и так далее. То, что также интересно так же, что мы можем иметь массивы в массивах, мы также можем иметь объекты в объекты или массивы в пределах объектов. Вы никогда не действительно ограничены просто ни одного из вещей. Мы можем получить очень Inceptionesque, просто продолжайте спускаться по кроличьей норе есть. Так что, если мы замечаем, мы есть курс, который является строка, инструктор, что это строка, и массив, INT, и Boolean. Таким образом, все эти разные вещи. Ладно, это так, у нас есть еще один. Так что в этом случае мы имеем Массив объектов. Так что просто как объект может иметь массив в нем. Мы также можем иметь массив объектов. Это может быть полезно думаю о подобном к виду о том, как мы должны были хэш стол, мы имели массив из всех этих различных типы структур, которые были указатели на разные узлы и еще много чего. Но в данном случае, мы есть массив объектов. Так что это как массив ассоциативных массивов. Итак, мы имеем некоторое первый элемент будет быть объект с именем Джеймса и дом Уинтроп. Вы, ребята, возможно, помните, то очень похожа на этот с вашего последнего PSET, где, если вы вытащил что-то из вашей базы данных, сортировать по вещь в вашем массиве был всю информацию о Первый пользователь, который встретился с ним, и тогда вы имели в качестве индекса в том, что чтобы получить свои акции или их кэш или еще много чего. Таким образом, это очень так же, самое, только немного изменить в синтаксисе, изменение немного в слова, которые мы используем для описания их. Так что, если мы хотели, может кто-нибудь сказать мне, что это предупреждение будет делать здесь? Или то, что это немного код будет сделать для нас? АУДИТОРИЯ: Это даст вам все имена. АЛЛИСОН Бухгольц-AU: справа, так это то, просто предупредить всех имен потому что она будет идти через Коттедж я, так что было бы начать с нуля. Так было бы говорить, ОК мы ищем в этом первый объект, который первый слот в массиве. И это говорит: "Дайте мне атрибутов, имя этого объекта ". Так мы идем сюда, мы бы сканирования, мы найдем имя, и мы распечатать Джеймс, Молли, и Карл. Есть вопросы до сих пор? JavaScript, к сожалению, Вы будете делать много смотреть на ваших самостоятельно, выяснить, синтаксис, борется с ним. Но, конечно, я всегда здесь, Приёмные часы всегда здесь. Я мог бы быть по вторникам на этой неделе. Так что, если вы там, вы можете прийти навестить меня на этой неделе. Это было бы здорово. Итак, DOM является документ-Object Model. Так что это просто способ что нам нравится думать, О том, как наш HTML и все внутри, она организована. Это очень много то, что вероятно, прийти на вашем викторины. Я знаю, что мой год, это было как вот HTML-файл, заполнить DOM для него. И вы просто заполнить в мелочах. Они должны быть легко точек с надеждой. Надеюсь, вы see-- АУДИТОРИЯ: [неразборчиво] АЛЛИСОН Бухгольц-AU: Так Вы видите это дерево здесь? АУДИТОРИЯ: Да. АЛЛИСОН Бухгольц-AU: Таким образом, они будут просить использование заполнить то, что происходит под телом. Может быть под телом, мы имеем некоторых дивы или у нас есть некоторые пункты, и мы просим вас заполнить дерево очень похоже на это. Таким образом, мы будем ходить через него. Так Документ-Object Модель просто способ структурировать и думаю, о нашей HTML графически. А также, когда мы получаем в более JavaScript, это будет так, что мы на самом деле манипулировать различными элементы на странице. Нам нужен способ, чтобы получить доступ друг вещей в нашей HTML, и так что это дает нам очень бетон стандартный способ в различных веб-страниц, чтобы сделать это. Так что, если мы просто пройти через это здесь, конечно наш документ как весь наш файл. Это, очевидно, имеет смысл что это самое высокое, и тогда мы имеем реальную HTML, что соответствует этой метке здесь. Также, если вы в абзаце ваши метки должным образом, то создание этого дерева DOM становится супер просто. Итак, мы имеем некоторые головы здесь. У нас есть тело, мы видим стволовых офф HTML, который является, почему мы должны голову и тело. В голове, у нас есть некоторые Тег заголовка, тег заголовка конец, так что мы знаем, что идет после головы. И в нашей тег заголовка, у нас есть Hello, World. ОК? Так вот вся эта левая рука филиал. А потом правой ветви здесь, мы видим, что у нас есть HTML, ОК, мы сделали это головная часть, мы ищем только на тело, поэтому мы имеем некоторые области тела. И в том, что только что у нас есть, привет, мир. ОК? Если бы мы имели что-то вроде некоторые кронштейн р, а затем привет, мир, а потом еще Кронштейн р свидания, мир, мы должны были бы два пузырька сходит здесь. Потому что они оба под телом, но они отдельные пункты этого дела. Существует, безусловно, практика на что в предыдущих викторин, а также большим онлайн на ней. Хорошо, таким образом, это только позволяет Посмотрим, все красиво и манипулировать вещи очень систематически. ОК? Мы точно знаем, как пройти через это дерево, так что мы знаем, что мы хотим получить доступ. ОК, так что это, почему мы хотим иметь такую ​​модель, так что мы можем использовать вещи, как это, и мы понимаем, что они означают, и они стандартизированы всех вещей, которые мы делаем. Так документе точка название только Название our-- все из них довольно понятны, Мне нравится думать. Так первые три примеры просто говорю, "Хорошо, дайте мне Название этой веб-странице ". Так это даст вам то, что соответствует названию. Документ точка тело будет дать вам все, что в этих тегов тела. Таким образом, вы можете управлять этим. И точка тело документа точка введите HTML является очень классный, и, возможно, не похож на супер Интуитивно понятный, но внутренняя HTML соответствует этому прямо здесь. Так что если вы когда-либо хотели манипулировать текста на странице, как правило, вы собираетесь делать что-то с телом точка внутренней HTML. ОК? Так внутренняя HTML, как правило, относятся к что на самом деле между этими тегами. ОК? И тогда полезные функции. Так что, если вы хотите получить любой из них, любой элемент, у нас есть некоторые Id, класс имя, или имя тега. Это очень похоже на вещи, которые мы сделали с CSS, не так ли? Где у нас есть некоторые селекторы, которые соответствуют либо тега, класс что мы даем им, или Id. Это очень точно так же. Если у вас есть что-то, что имеет класс собаки, а вы говорите, получить элементы по имени тэга, и вы положили собаку в there-- или извините, Имя класса. Вы можете поставить точку в там. Это будет вернуть все те, элементы для вас, что этот класс. Таким образом, вы можете управлять только тем,. Таким же образом, может быть, вы просто хочу работать с некоторыми заголовок, так некоторые заголовок h1, как мы сделали. Вы можете сделать получить элементы по тегу имя, потому что h1 является имя тега. И таким же образом, если вы хотите получить некоторые уникальные вещи, вы можете сделать получить метку. Получить элемент, Id. И они на самом деле много из них. Это только, как три очень много. Так что, если вы идете в Интернете, а Я собираюсь поощрять от вас, и делать некоторые исследования по своему усмотрению, Я определенно рекомендую заглядывая во все из них. Они могут быть супер полезно, особенно когда Вы хотите, чтобы просто какая-то манипулировать очень конкретные вещи, не имея чтобы пройти и попробовать чтобы разобрать все. Итак, последняя вещь, является JavaScript события. Поэтому, когда я говорю раньше о переходе на веб-сайте, и когда вы наведите курсор мыши на что-то, или ваш наведении указателя мыши на что-то, что-то еще происходит. Это то, что мы хотели бы думать о качестве события. Итак, что мы имеем, которые могут быть полезным здесь OnClick. Так что мой был на режиме висения, которые, я уверен, это только на режиме висения. Также тонна из них что вы можете искать. Там-лайн весь список из разных вещей что вы можете слушать. Но события JavaScript являются в основном только в ответ на вещи что ваш пользователь делает. Верно? Так что ваш пользователь делает то, что это событие, и JavaScript будет отвечать Однако вы хотите, чтобы она. Он будет реагировать соответствующим образом. Так что в этом случае мы имеем некоторые окна точка OnLoad. Так что же это говорит, "ждать пока загружается окно годов ". ОК? Так, когда все загружено, OnLoad, то вы можете выполнить эту функцию. Так когда все загружен, вы собираетесь иметь некоторую кнопку поиска что получает элемент, Id, и он печатает все, что элемент, как кнопки Поиск. А то у нас эту переменную, мы говорим: "Хорошо, OnClick." Поэтому, когда мы слышим щелчок на кнопку Поиск, выполнить эту функцию, которая предупреждение, вы нажали на кнопку Поиск. Так что же происходит is-- это приятно немного графическое представление здесь. Таким образом, наши загрузке документа, это наша OnLoad, мы находим Поиск Кнопка, которая заключается в следующем. Мы ищем для нашего кнопку поиска. А потом, когда кнопка поиска нажал, оно соответствует прямо здесь. OnClick. Тогда мы, наконец, предупредить нашего пользователя, что это последняя строка здесь. ОК? Таким образом, каждый из этих четырех шагов просто соответствует четырем коробки там на дне. Имеет ли это смысл для всех? И тогда единственное, что я буду просто говоря очень, очень кратко, что я поощрять вас, ребята, посмотрите больше в это JQuery, который находится всего в библиотеке который построен на вершине JavaScript. Это супер полезно, так как с большинством библиотек. Есть много функций. Так что если есть когда-либо что-то, что Вы хотите сделать в JavaScript, Ваш первый инстинкт не должно быть думать из ", какие функции должны Я код? "Она должна быть, "Позвольте мне видеть кого-то это уже сделали это для меня ". Потому что в девяти случаях из десяти, кто-то сделал это уже, и они, вероятно, сделали это лучше. Люди тратят много времени на выполнение этих, и JavaScript очень широко используется, так что люди постоянно пытаясь сделать его лучше. И JQuery имеет много функций что, вероятно, будет полезным для вас в окончательном проекте, если вы делать что-либо с веб-дизайна. Как я люблю говорить, "работа умнее, а не больше. " Если вы, ребята, что это будет здорово. Когда мы находимся в Hackathon я не хочу, чтобы вы все акцентировал. Я хочу, чтобы вы, как, "я получил это. JQuery получил мою спину. Мне не нужно, чтобы написать эти функции ". Так что просто две вещи помните, что я собираюсь чтобы вы, ребята, выглядят более в JQuery по своему усмотрению. Все, что я собираюсь сказать, это делает некоторые довольно удивительные вещи и может сделать вашу жизнь намного проще. Но то, что вы хотите иметь это любой файл, что вы собираетесь использовать его, Вы собираетесь хочу, чтобы эти две строки. Вы будете хотеть Сценарий JS JQuery точек JS. А на самом деле ваш источник будет некоторые URL. Если вы Google JQuery, Google на самом деле принимает все файлы для вас. Таким образом, вы определенно хотите, чтобы вход, который URL вместо. Я просто положил это здесь для простоты. Все это означает, где Здесь вы найдете библиотеку JQuery. Это массивный, так что вы не хотите разместить его на вашем компьютере если вы можете избежать его, поэтому мы как правило, просто положить в URL Google о том, что принимает все эти файлы для вас. ОК? Вы Google это, я обещаю он будет там. А потом все JavaScript-файл, который вы используя, так что это просто какая-то внешняя JavaScript-файл, который вы используете. Таким же образом, что мы связываем с нашей помощью CSS файлы, это же роде. Это только ссылки на файл где ваш JavaScript есть. И у меня есть несколько примеров с простым JavaScript. Таким образом, мы будем идти через него. И тогда в индексе JavaScript, который является вашим JavaScript файл здесь, это вроде обертки что у вас есть для JQuery. Ты почти 99,9 процентов времени собирается иметь это в вашем index.js файла. Потому что то, что это говорит в том, "Ничего не исполнять пока ваш документ не является на самом деле готов ", который является именно то, что вы хотите. Потому что, если ваш документ не готов, и JQuery начинает делать вещи, это просто бардак. Таким образом, вы всегда хотите, чтобы этот обертку. А потом вещи, которые идут туда, я оставим собственной просматривая ваши ребята. Итак, есть какие-либо вопросы право Теперь о JavaScript в целом? Или модель DOM? Если нет, у нас есть какой-нибудь классный Примеры, которые мы можем пройти, что вы, ребята, можете помочь мне код. Но я также будет супер красиво, и если вы не хочу, чтобы что-то сказать Для них это нормально. Я также могу просто дать вам примеры. Но ничего на PowerPoint, прежде чем мы перейдем? Круто. Я чувствую, что вы, ребята, должны энергии. Так что я думаю, что мы собираемся начать с моей Например партийной первую очередь. У нас есть три примера, у вас есть выбор. Итак, мы имеем часы, куда мы идем осуществить фактический часы, которые годов буду обновлять, как проходит время. У нас есть большой функции Twitter. This-- вы знаете, что, держись. Мы собираемся сделать это уйти. Bam. ОК. У нас есть большой функции Twitter здесь, that-- Я знаю, правильно? Это будет здорово. Рады вам, ребята? Вот что происходит, чтобы подсчитать количество символов, которые вы оставили, так что если я печатаю прямо сейчас, Очевидно, он по-прежнему говорит 140, но мы знаем, что это не так. А потом с нашей последней здесь, нажмите здесь, чтобы праздновать. Что произойдет, когда мы нажимаем, фон годов собирается менять цвета. Так что вы, ребята, есть свои варианты что вы хотите сделать в первую очередь. Я обещаю, что возьму его очень легко на вас. Я чувствую, что все вроде просто очень низкий ключ сегодня. Так что я буду ходить вам, как мы будем осуществлять все эти. Если вы хотите, чтобы звонить в, это здорово, но я чувствую, что все это немного устал. Так что я буду просто ходить вас эти примеры. У нас есть то, что мы хотели бы сделать в первую очередь? Кто-нибудь? Нет предпочтения? ОК. Знаешь что? Мы на стороне. Я чувствую, что вы, ребята, нужно little-- Таким образом, мы сделаем сторону за один первый. ОК. Итак, что мы имеем here-- это не должны быть там. Теперь это хорошо. ОК. Итак, что мы имеем здесь дело только простой HTML страницы что вы, ребята должны все быть супер знакомы из ваших последних двух psets. у нас есть тип документа здесь. Может все видят? ОК. Круто. У нас есть HTML очевидно. У нас есть заголовок, который является связана с таблицей стилей, что только что сделал мой шрифт красивый и большой и жирный. Так что не беспокойтесь об этом. У нас есть тело с Id фон, ОК? Потому что мы собираемся быть изменение фона. Поэтому, когда мы меняем фон нашего тела, мы помним из две недели назад когда мы имеем дело с веб-страниц. Так хорошо, что это. И у нас есть некоторые Id равен партию. Это ч Ref фунт просто означает, что это будет идти в той же странице. И нажмите здесь, чтобы праздновать, который является, почему, когда мы нажимаем ее, он должен изменить цвет, к счастью. А то у нас некоторый скрипт здесь просто связаны с этой партии точечных JS файл, который пуст, потому что мы еще ничего не сделано. И это так грустно. Но очень скоро, она будет меняться цвета, и это будет удивительным. Так что я просто буду ходить вам, ребята, с тем, как мы могли бы подойти к этому. Так первое, что мы могли бы сделать, Если мы меняем фон тело, первое, что мы могли бы сделать, это на самом деле захватить что тело, не так ли? Поэтому мы хотим, чтобы иметь сумму, наша фон, и, если вы заметили, Я просто автоматически просто начать печатать. Там нет ничего особенного, что мы нужно сделать для наших файлов JavaScript. Я могу начать объявлении переменных, и объявить случайных функций. И это гораздо более свободной форме. Это как с C, мы дали вам все Эти жесткие правила, и вы выросли, так что мы вроде бы, "идти вперед. Быть свободным. Делайте то, что вы хотите ". И вот что JavaScript есть. Итак, мы имеем некоторый опыт здесь. С нашей модели DOM, мы знаем, может сделать документ точка получить элемент, и если мы замечаем здесь, наше тело имеет свой идентификатор. Верно? Таким образом, мы можем сделать получить документ, Id, а вот просто. Что наша Id, что мы хотим здесь? АУДИТОРИЯ: Background. АЛЛИСОН Бухгольц-AU: Background. Идеально подходит. И точку с запятой в конце. Это еще не ушел. Вы по-прежнему нужны ваши запятой. ОК. Так вот наша первая. И когда мы нажимаем что-то, мы хотите что-то случится, верно? Таким образом, мы, возможно, захотите некоторая переменная что ждет за клик. То, что мы собираемся сделать, это мы собираемся сделать наша ссылка больше похожа на кнопки. Таким образом, мы будем иметь некоторое кнопку, равна документ точка получить элемент, Id. И если я говорю о нажмите ссылку или нажмите здесь, чтобы праздновать соединение, что может мой Id быть здесь? Партия. Правильно. ОК не так уж плохо до сих пор. Все получают то, что мы делаем? Итак, теперь у нас есть Кнопка, и мы хотим, вещи, чтобы измениться, когда мы нажимаем на него. Так что, если мы помним из нашего PowerPoint, очень простая вещь мы можем сделать это просто кнопка точка OnClick, не так ли? И это будет равняться некоторые функции. Это анонимная функция. И это только as-- на самом деле я собирается сделать это немного больше. Так что я только что сделал здесь я говорю, хорошо, Когда мы нажимаем нашу кнопку, которая является это ссылка, что мы только что говорил, мы собираемся выполнить Эта анонимная функция. Нам не нужно каких-либо затрат. Мы не волнует, что говорит пользователь. Если нажать на него, мы будет делать все, что мы хотим, что изменить цвет фона. ОК? Так вот почему у нас нет никаких входов, мы просто должны это анонимную функцию. И теперь мы на самом деле происходит записать эту функцию. Так что куча способов может генерировать случайный цвет. Так, что я сделал это было генерировать три случайных чисел и конвертировать их в RGB тройки. Так что это лишний раз показывает, какой-нибудь классный вещи, которые, если вы, как "О, Мне нужно создать случайный число. "Если вы в поисковой системе Google его, это то, что вы найдете. Таким образом, мы имеем три различных вещи, Вар, не снова красный, зеленый. Верно? Так что те три вещи, которые составляют цвет. Синий, красный и зеленый. Круто. И что мы можем сделать, это, что мы знаем что он должен быть в пределах от 255, и если бы вы смотрели на некоторые генератор случайных чисел, вы могли бы получить что-то вроде математике точка случайным образом, которые, если вы посмотрите это вверх возвращает к некоторому числу между нулем и единицей. ОК? И то, что цифры не наш RGB тройки идти между ними? Ноль и что? Что они могут пойти до? 255. Так что, если математика точка случайным идет между нулем и единицей, как мы можем хочу, чтобы преобразовать это? АУДИТОРИЯ: Время? АЛЛИСОН Бухгольц-AU: Да, именно так. Так что время есть 255. АУДИТОРИЯ: [неразборчиво] Это как [неразборчиво]. АЛЛИСОН Бухгольц-AU: Math точка случайным образом. АУДИТОРИЯ: Круто. АЛЛИСОН Бухгольц-AU: Да. JavaScript просто заботится о вас. ОК. Таким образом, мы можем сделать это для всех из них. Верно? Математика точка случайные моменты времени 255. Скопируйте этот. Круто. Так дело в том, это может не возвращают целое число. Верно? Может быть, мы получим некоторое количество между нулем и единицей, и это приводит к его слегка выключен, и наши RGBS не может быть поплавки. Они должны быть Интс. Так что если вы пробовали это, это, наверное, есть странное поведение. Было бы немного напуганный. Итак, что мы делаем, мы хотим, чтобы Убедитесь, что они округлые, и вы могли бы округлить в любом случае. Я округлил с полом. Так что я всегда уверен, что округляется в меньшую сторону. Но уходят, как это просто было просто получить случайное число, как вы думаете, мы может этаж этот номер? Это очень похоже. Любая идея? Так что, если случайная был просто математика точка случайным, так что вы думаете, что мы сделаем пол? Математика точка пол. И вы также можете сделать математику точка потолок. Круглый вроде неоднозначно Потому что вы не знаете ли округлять вверх или округлить. Так, как правило, мы всегда делаем математику точка пол, математика точка потолок. Но honestly-- АУДИТОРИЯ: Есть ли пол округлить? АЛЛИСОН Бухгольц-AU: жилая округляет. И это только выбор с моей стороны. Так что теперь у нас есть три номера которые были случайным образом, и то, что мы собираемся сделать сейчас, это мы просто хочу, чтобы изменить фон. ОК? Таким образом, мы уже имеем нашу фон рода сохраняется В этом элементе под названием фон. Так что вы заметите, если Вы играли вокруг с этим, мы хотим, чтобы изменить стиль. И это вроде то, что Вы бы Google и выяснить, нравится, как изменить цвет. Но способ доступа этот цвет фон точка стиль точка фон. Так что это высказывание с учетом этот объект, фон, который относится к тому, что элемент Id там, мы будем смотреть на стиль в стиле, мы будем смотреть на заднем плане. ОК? И если вы идете и смотрите от этого, это может сделать немного больше смысла, но это в основном просто говорю, "Дайте мне эту очень специфическую атрибут что я определил ранее ". Так что мы меняем его на это некоторые RGB, потому что это имеет смысл. Мы используем RGB троек, не так ли? И мы have-- я хочу убедиться, что я получить нужное количество цитат здесь. Итак, что мы делаем, мы должны RGB, и мы собираемся to-- это как объединение, которое в красный цвет. А потом мы хотим немного запятую. А потом мы хотим плюс зеленый, то некоторые запятая, а некоторые синий. Таким образом, эти плюсы просто значит конкатенацию. Так что это просто создание этого Строка, происходит в RGB. ОК? АУДИТОРИЯ: [неразборчиво] плюс то зеленый плюс то красным. АЛЛИСОН Бухгольц-AU: Да, потому что я испортил, что до. Что один нормально. О, держись. Нет. Потому что мне нужна, чтобы убедиться, что я получил все эти права. Так что я буду объяснять в ООН Momento. Зеленый, синий, совершенным. Теперь я сделал. Я считаю. ОК. Так что же это, является то, что фон собирается быть установлен в некоторой строки. Верно? Что мы имеем здесь. Это будет какой-то RGB 255 запятая 255 запятая ноль, или что-то число, которое вы есть там. Так что мы здесь делаем, у нас есть некоторые строки. И то, что мы хотим сделать, это мы вид динамического создания что, когда мы на самом деле запустить эту программу. Так что это некоторая строка. Плюс объединяет его с значение, которое имеет красный, который объединяет его с запятая, которая объединяет его с тем, что зеленый и так далее, и тому подобное. ОК? До конца, который закрытие скобок этого RGB здесь. ОК? Так что это будет генерировать какую-нибудь команду действительно что RGB из трех чисел что фон теперь установлен в положение. ОК? Итак, давайте посмотрим, если это работает. Я надеюсь, что он делает, потому что если он не, я собираюсь быть реальным грустно. О, нет. Хорошо, держись. Определенно фон точка стиль точка фон. Я определенно не хватает то как раз небольшая. Есть ли у вас, ребята ненавижу это? Когда это просто маленькие ошибки? Всемогущий фон. RGB. АУДИТОРИЯ: [неразборчиво] АЛЛИСОН Бухгольц-AU: Нет Я попытался это перед классом. У меня есть все, что я сделал, прежде чем класс в случае, если я был бы, "Ждать, что я сделал не так?" Потому что я был бы, "Я, вероятно, испоганите в какой-то момент ". Плюс зеленый. Все выглядит, как будто это объединяются правильно. ОК. АУДИТОРИЯ: [неразборчиво] АЛЛИСОН Бухгольц-AU: О, там вы идете. Вот что мне было нужно. Посмотрите на это. Tiffany, чтобы спасти. Идеально подходит. ОК. Теперь давайте посмотрим, работает ли он. Боже мой. ОК. Удерживать. АУДИТОРИЯ: Space после второй плюс. АЛЛИСОН Бухгольц-AU: Какая? Ой, подождите, подождите. Космическая одежда? АУДИТОРИЯ: Второй плюс в зеленый объединение. АЛЛИСОН Бухгольц-AU: Ой. АУДИТОРИЯ: Там нет места после плюсе, да. АЛЛИСОН Бухгольц-AU: Вы не нужно, но-- АУДИТОРИЯ: О, вы не знаете? АЛЛИСОН Бухгольц-AU: Это выглядит красиво. АУДИТОРИЯ: OK. ОК. АЛЛИСОН Бухгольц AU: Давайте посмотрим, если это работает. ОК. Очевидно, я с провалом на это демо, который напоминает мне из лекции в две недели, но я знаю, что это будет работать. Я знаю, что это будет работать. Так близко. Если я случайно не удалить мой сценарий на этом. Нет, это партийные точечные JS. ОК держаться. Я собираюсь копировать это, и я тоже просто хочу, чтобы удалить все, потому что я этот рабочий ранее. Я обещаю, что это работает. Если нет, то я покажу вам, что Томми есть. И там. АУДИТОРИЯ: Вы ссылки партию точка CSS, и это партия точечные JS. АЛЛИСОН Бухгольц-AU: А, ну здесь является участником точечные JS. Хорошо, что я сделал по-другому? Хорошо, мы увидим, если это теперь работает. Bam. Таким образом, я не знаю, что я сделал по-другому, но это то, что должно было произойти. Круто. Я нажал на это, вроде бы, навсегда. Но мы можем попробовать и посмотреть, что я сделал иначе, что это надо было. Я не знаю, о вас, ребята, но это выглядит в основном то, что я только что написал. Был, вероятно, отсутствует точка с запятой где-то мое дело. На самом деле после этого, я думаю, что я пропал без вести Точка с запятой здесь на самом деле. Но я не мог видеть, потому что это было на экране. Но если мы замечаем, что это очень много именно то, что я только что написал. Я думаю, что, вероятно, самая трудная часть о это просто какая-то эту вещь право здесь, понимание то, что он там делает. Эти виды вещей, которые вы узнаете действительно просто погуглить и честно просто пытаюсь. Если вы думаете, есть какая-то атрибутов, там, вероятно, есть. Так попробуйте. Посмотрите, что происходит. Как я уже сказал, есть много экспериментирование с JavaScript, и PHP, и все, что материал, и CSS особенно. Вот только правда способ понять это. Итак, после этого фиаско с партией точечные JS, у нас есть два других варианта. У нас есть часы или Twitter. Они оба интересно. Может быть, не так весело, как партии, который имел немного прохладной стробирования что в конце. Как вы, ребята, есть какие-то предпочтения? АУДИТОРИЯ: часы? АЛЛИСОН Бухгольц-AU: часы? ОК. Круто. Итак, еще раз, у нас есть пустой файл JavaScript. И, как мы видим, здесь мы есть очень простой HTML. У нас есть таблица стилей, которые просто Форматы, что она должна выглядеть. У нас есть DIV с Идентификатор часы, которые просто говорит, "это должно быть часы." И у нас есть связь в нашем файле JavaScript что на самом деле происходит в генерируем нашу часы для нас. Потому что здорово, что, то, что вы можете установить наличие на автоматическое обновление Сам. ОК? Таким образом, вместо того, чтобы ждать Пользователь ударить Обновить на странице так что вы можете получить обновляются раз, JavaScript можете обновить ее, однако она любит. Так что, как с нашим последним, мы хотели для доступа к нашему фона, не так ли? Итак, что вы думаете, может быть Первое, что мы хотим сделать здесь? Если мы вроде уходят Такого рода парадигму здесь? Мы, вероятно, хотите, чтобы доступ к нашей часы, не так ли? Таким образом, у нас есть некоторые VAR часы, которые equals-- Что мы думаем, что это собирается быть? Документ точка получить элемент по-- I также люблю Sublime-- Id и наша Id является часами. Точка с запятой. Добрался, чтобы убедиться, что для получения Точка с запятой в этот раз, потому что я чувствую, что была проблема в прошлый раз. Хорошо так, как я только что говорил с попыткой иметь JavaScript обновить себя, там это великолепная функция, я знаю, что это очень пригодились в прошлом году, Я не уверен, что это очень удобно, для этого PSET, но это называется заданный интервал времени. И это на самом деле очень здорово, если бы вы, ребята, что-нибудь со временем или получения Обновленная информация. На сайте по Окончательный Проект, это, вероятно, Функция, которую вы хотите получить супер знакомы. Так что установить интервал делает то, что мы собираемся дать ему функцию, и как часто он должен вызвать эту функцию. ОК? Таким образом, в этом случае, мы просто собираемся создать некие анонимные функции снова, Хорошо, что собирается получить наша дата, и наше время, а затем обновить вещи и показать его. Таким образом, мы будем беспокоиться об этом. Мы будем, как генерировать часы здесь. Но то, что нам нужно, это как часто, чтобы обновить его. Таким образом, в этом случае, это просто миллисекунды. Таким образом, мы только собираемся сделать 100 миллисекунд. Конечно, совершенно произвольно. Если вы хотите, чтобы это обновление гораздо медленнее, вы могли бы. Мы можем возиться с заданным интервалом, насколько большой наш интервал после получения нами работы часы, которые, надеюсь, я буду добраться. Так что это просто говорю: "Хорошо, вызов Эта функция каждые 100 миллисекунд ". ОК? Вот и все, что он делает. Итак, что мы хотим, чтобы наши функции делаем, мы хотим иметь некоторую дату и какое-то время, что мы будем иметь. Так мы можем начать с нашего Дата равен то, и наше время составляет что-то что мы еще не знаем. Или на самом деле, нам просто нужно дату, потому что Дата собирается включать в себя все. Опять же, если вы просто Google что-нибудь о то, что вы хотите делать, если вы пишете: "Хорошо, Я хочу, чтобы получить время с помощью JavaScript, "это даст вам этот великий Функция называется дата получить. Буквально, большинство вещей что вы хотите сделать, JavaScript будет иметь это было сделано для вас уже. Так что это в буквальном смысле, как новый получить дату, которая является creating-- или новая дата, rather-- который генерирует какой-то объект, который представляет собой дату. И то, что мы собираемся сделать здесь это is-- Я собираюсь написать это, а затем объяснить, что он делает. Так что я буду делать, что я получаю это право. Итак, то, что эта функция делает, это мы просто создание HTML, что на самом деле будет идти в рамках нашей сНу идентификатор часов. Так что же это будет делать просто создать некоторый строку, ОК? То есть то будет пересаживают в нашей HTML. В основном то, что он собирается сделать, это все we--, что я покажу вам, является то, что бы мы ни говорили HTML является, мы собираемся заменить этот текст здесь с тем, что HTML является. Так что это будет позволять нам изменить нашу синхросигнала HTML от того, только текст этого должны быть часы, на самом деле показывает число и вещи, которые мы заботимся о, а на самом деле быть часов. Так что мы собираемся сделать, это мы собирается начать производить этот HTML. Таким образом, в одной и той же образом, что мы использовали сделать плюс равна для целых чисел, теперь вы можете делать, что для струнных, за исключением того, что происходит в их конкатенацию. Верно? Как мы видели с Партией точек JS, это всего лишь объединяет все эти вещи вместе. Таким образом, вы можете объединить различные биты HTML из переменных, или бит строк что вы пишете из самостоятельно, и это просто действительно позволяет динамически генерировать HTML, который является довольно прохладно. Так что, если у вас есть что-то очень удобно конкретные, это может позволить вам сделать это. Итак, мы имеем HTML, чтобы я собираюсь попробуйте и убедитесь, что я получаю это право. Так что мы собираемся сделать некоторые заголовок h1. Так что важно понимать здесь является то, что это на самом деле просто HTML. Верно? Мы пишем фактическая HTML код здесь, это не только строка в нормальное так, что мы будем думать об этом. Итак, мы имеем некоторую HTML. Это считается строка, хотя здесь. И мы делаем дату dot-- мы хотите получить наши часы. Опять же, если вы посмотрите что-нибудь о дате, было бы сказать, это все атрибуты, дата имеет. А вот то, что вы можете использовать на нем. Так что, вероятно, имеет что-то вроде получить часы, и получить минут, и получить секунд, и получить миллисекунд, и кто знает, что еще они есть. Но если вы посмотрите на документация, все это будет там. Итак, мы имеем получить часы, и тогда мы бы хотели чтобы объединить, что with-- Я будет двигаться в этом здесь. Так что, если мы генерируем сейчас, мы на самом деле генерации время, не так ли? У нас есть часы, а затем то, что между часами и минутами? У вас есть точка с запятой, не так ли? Поэтому мы хотим, чтобы сделать некоторые запятой здесь. А потом мы хотим получить наши минут, так что таким же образом, что у нас есть дата точка получите часы, как мы можем получить наши минут? Это буквально дата, точка получить минут, которые я вроде как. Это как: "О, как я могу получить мои минут? " Я просто получить мои минут. ОК. И тогда у нас есть еще двоеточие здесь. И потом, если мы хотим получить наш секунд, как мы могли бы получить наш второй? Дата точка получить секунд. Я думаю, что это очень здорово. И, что важно для осознавать, что мы также нужно закрыть наш HTML тег здесь, потому что он по-прежнему должен быть действителен HTML, так h1. Круто. Таким образом, после того, что мы можем сделать часы Точка внутренняя HTML-равно HTML. ОК? Так что помните, как я сказал, внутренний HTML в основном принимает все, что между два тега, которые мы говорили о и вставки или манипулирует все, что там? Так что же это делает, если мы вернемся к нашим часам, является то, что часы относится к Все внутри этой дел. Это внутренний HTML- этой Id тактовой дел. И поэтому он собирается изменить его HTML, что мы только что сгенерировали, которая, которые, как мы надеемся, надеюсь, мы надеемся, покажет время прямо сейчас. Мы будем видеть. Конечно. Так много технических вопросов. Просто-- Эллисон Я от моей игры Сегодня ребята. Хорошо, что работает. синхросигнала внутренний HTML. Это было HTML самом деле? Кроме того, это то, что происходит. Если вы не можете увидеть что-то, вам просто посмотрите на исходный код. ОК. Ты хочешь знать, прохладный работу вокруг что мы собираемся сделать прямо здесь? АУДИТОРИЯ: Вы можете сделать заглавные буквы? Заглавные буквы? Потому что у вас получить часы, а затем получить минут. АЛЛИСОН Бухгольц-AU: Это это получить часов и get-- о. Вы are-- золотую звезду. Это все испытания, ребята. Я обещаю, что это работает перед классом. Хорошо, но что-то здорово знать, что вы можете also-- если иногда ваши внешние файлы получить немного сумасшедшим, Вы также можете просто положить их прямо здесь, которые, как правило, чтобы исправить положение. Кроме этого, как действительно некрасиво. Конечно отформатировать все. Убедитесь, что это все довольно. ОК. Я хотел сделать все классные демки, и они просто не получается. ОК. Сценарий вар часы. В любом случае, важно то, что это общий путь что вы отформатировать JavaScript. Как вы можете видеть, это может быть очень привередливы, иногда, даже тогда, когда это было буквально работает в две секунды назад. Или не два секунду назад но очень, очень недавно. Таким образом, чтобы показать вам, что это должно выглядеть, и показать вам, что я не сумасшедший, и что все именно так, то же самое, это то, что она должна выглядеть. Ты просто это сделать верхнюю часть здесь, и если вы посмотрите исходный код страницы, Если вы заметили, он сделал некоторые сумасшедшие вещи, я упростил. Кроме того, кредит Томми McWilliam, кто на самом деле помог мне создать эти примеры, который является, почему я знаю, что они работают. Потому что Томми мастер JavaScript. Но если мы замечаем, у нас есть некоторый набор. У нас есть функции часов здесь. Это все JavaScript, что мы только что написали, или некоторые из них. Мы только что написал этот один прямо здесь. И у него есть дополнительный функция, которая просто колодки его поставив ноль перед буква или перед числом, если это только один из них. Так что, если вы заметили, это довольно много именно то, что мы только что написали. У вас есть переменная часы, которые имеет наш элемент, получить элемент по идентификатору, что часы. У нас есть множество интервал Функция, это анонимная функция который выполняет все это. У нас есть некоторые, начиная строку HTML, что мы динамически генерируют тем, что некоторые h1 заголовок, объединения с получить часы, а также наш толстой кишки, а также получить минуты, плюс еще толстой кишки, а также наши секунд, и, наконец, заканчивая HTML для этого. А потом мы обновляем нашу часы точка внутренний HTML для HTML, и мы обновляем каждые 100 миллисекунд. ОК? Видите, я обещаю, что я не являюсь сумасшедшим. Я не знаю. Я не знаю, почему он не любит меня. Я чувствую, как выглядит то же самое, но, видимо, ненавидит меня. Итак, давайте посмотрим, если вокруг трех идет лучше. Мы собираемся, чтобы видеть. Я не знаю, как это будет идти. Это все, по крайней мере получить минусы, как только общей темой из JavaScript, хотя? Я надеюсь, что, по крайней мере полезно, более чем показывая, что это немного привередливы. Но ваша проблема набор будет очень весело. Это будет здорово. Это не будет столь же утомительно как это, я не думаю. Вы на самом деле получить см действительно классные вещи. Поэтому в прошлом, но не менее, мы постараемся тот Twitter. Я очень боюсь сейчас, ребята. Я не знаю, как это будет идти. Но только, чтобы дать вам немного больше вкуса, и это на самом деле манипулирования строками и Входы, что мы собираемся делать есть, если мы замечаем здесь с HTML-- у этого есть немного more-- у нас есть некоторые текстовую область, которая соответствует данной области текст здесь. ОК? И это имеет идентификатор текста. Мы рестайлинг его немного с некоторой ширины и высоты что мы предопределены, и мы h1, которые просто наш заголовок тот, который представляет наши осталось символов. Мы дали ему какое-то идентификатор Осталось символов, а то у нас какой-то сценарий здесь, что я на самом деле надеясь, что в третий раз х очарование здесь, ребята. Так что мы хотим сделать, в том же общем ключе что мы сделали с синхросигнала JS и партийные точка JS, как мы отметили, что мы начали, фактически захват то, что мы заботимся о, правильно? Таким образом, в этом случае, есть два вещи, которые мы заботимся о, хорошо? Одна вещь, что мы на самом деле вид глядя в и рисования данные из, и одна вещь, которая мы на самом деле меняется. Так что наш HTML. Если это наша веб-страница здесь, что Данные, которые мы смотрим на? Это будет что угодно Текст в наших коробках, не так ли? Поэтому, что бы я печатаю здесь. Вот что я хочу знать, или это то, что я хочу посмотреть. И то, что будет изменения на нашей веб-странице? Остальные персонажи. Таким образом, в одной и той же дороге, мы хотим, чтобы начать с инициализации переменных что на самом деле удержать этих элементов. ОК? Так что, если у нас есть некоторые Var это наша текстовая область, и у нас есть некоторые VAR, что осталось. Верно? Так они собираются держать эти две вещи. Так же рода вещи, документ dot-- ОК, я будет убедиться, что это будет работать в этот раз. Я очень непреклонен. Итак, если мы хотим, чтобы наши Текст площадь, по в нашем HTML, что наша идентификатор? Что наша Id? Это просто будет текст, потому что это создает нашу текстовую область, OK, и наша Id текстов, так что как мы можем захватить, что там. ОК, точка с запятой. Я собираюсь быть супер Точная об этом, потому что я хочу, чтобы это работало на этот раз. ОК, сделать то же самое, получить элемент, Id. Я действительно интересно, что имеет причиной двух других испортить. Хорошо, тогда в этом, что же мы хотим получить доступ? Что наша Id здесь? У нас есть еще идентификатор в наш HTML, что это такое? АУДИТОРИЯ: Осталось символов. АЛЛИСОН Бухгольц-AU: Осталось символов. ОК. Круто. Так что я просто хочу, чтобы пишу это очень быстро. Я просто хочу, чтобы написать это в секунду. Так текстовая область. Что интересно, B function-- есть множество функций, которые не только Подходит для Вашего мыши, но клавиатура. ОК? Таким образом, вы можете сказать, когда любой ключ нажата, вы можете сделать что-то вроде этого. Так тот, который мы используем, вызывается клавишей вверх, что говорит, "если вы нажали любую клавишу на клавиатура, когда пользователь поднял их палец этой кнопки, и ключ стал не нажата, затем мы собираемся сделать что-то ". ОК? Так что это имеет смысл, не так ли? Потому что каждый символ мы печатаем, мы собираемся иметь, чтобы поднять наши пальцы об этом, поэтому, когда ключ идет вверх, мы можем знать, для уменьшения остальные наши герои. Итак, мы имеем некоторые на ключ , и таким же образом, мы собираемся сказать, "Хорошо, когда мы это сделаем, мы собираемся создать некоторую функцию, которая собирается взять е ", в данном случае, и то, что мы хотим сделать, это подсчитать количество оставшихся. Итак, давайте просто начать путем создания переменной. Итак, мы имеем некоторую переменную R, который будет представлять сколько символов мы оставили. ОК? Мы знаем, что мы начинаем с 140, и если мы хотим знать, скажем, длина этого Строка, был вход, Есть ли у вас, ребята, есть какие-либо идеи как мы могли бы это сделать? Просто базируется прочь очевидно, вещи, как если бы мы хотели часа, мы использовали получите часы. Мы знаем, что наш объект Текст этой области, но не могли бы вы, ребята, думаю, что может прийти после него? Любые идеи? Так это одно вроде меньше интуитивно, но это значение длины точка. Так что просто дать мне некоторые значение атрибута, что на самом деле длина этой строки. Так что собирается сказать: "Хорошо, я ищу на всей этой строки в текстовом поле, и я собираюсь сказать Вы, как долго это ". Потому что, если мы вспомним, строки действительно только массивы, так что мы можем просто взять длину них. Итак, мы имеем это. Круто. Тогда то, что мы хотим сделать, это мы никогда не хочу, чтобы позволить пользователю для ввода более 140 символов, не так ли? Потому что, если мы говорим так: «ой, вы только это много, оставаясь, " а затем пусть они делают что В любом случае, мы лгали. И это еще один вещь, которая JavaScript может быть очень хорошо для, является проверка пользователь и убедившись, что ваш Пользователь вписывается ни в какие правила что вы ввели на них. Так что если вы хотите сделать что-то, как сделать что кто-то ввести их адрес электронной почты, или убедившись, что, когда они ввести два пароля, они согласованы. JavaScript может сделать это. Вы хотите сделать что-то вроде, "когда Форма представляется, "например или, "Когда кнопку Отправить Форма есть нажал, проверьте все эти вещи ". И мы можем сделать это JavaScript. Так вот именно то, что мы собираемся сделать здесь. Так что может быть способ проверить, если они ушли более 140 символов? Что произойдет с наша значение г, если они попытаются? Это будет отрицательным, не так ли? Или это будет менее или равным нулю. Таким образом, мы можем использовать, если это как и все остальное. ОК? И у нас есть некоторые область текста точку значение, и то, что мы делаем здесь это мы просто cutting-- что это такое? Извините. Это одно, мы просто хотим, чтобы вернуться ложным. Я запутался. Все измотанные от вещей, не работает. Хорошо, мы просто хотим, чтобы вернуться ложным, и тогда мы хочу, чтобы отобразить остальные буквы, верно? Так с часами, мы сделали что-то с внутренней HTML, верно? Где мы устанавливаем его равным некоторые переменной, поэтому то, что мы могли бы здесь делать? Что мы изменить внутреннюю HTML из? АУДИТОРИЯ: Оставшееся? АЛЛИСОН Бухгольц-AU: Мы меняем осталось. Ладно, и что мы хочу, чтобы установить его равным? Это будет г, потому что это должны быть остальные наши герои. ОК? Так что я очень нервничал, чтобы увидеть, если это теперь работает, но мы будем видеть. Оставьте это. Это очень быстро. [Неразборчиво] ОК. Опять же, я просто хочу, чтобы показать вам. По какой-то причине, мое решение не работает, но то, что я покажу вам, что это is-- о, я должен был положить, что в. Хорошо, мы заметили такой же что здесь, получаю текстовое поле. Кроме того, если парень уведомление, если есть либо то, что вы хотите сделать, и вы не знаете, как это сделать это, просто нажмите кнопку Просмотр странице Источник и они собираются рассказать вам. Иногда это будет зашифрован. Для вашего PSET, мы зашифровать все, так это просто выглядит как бред. Но если когда-либо действительно классный сайт, что вы хотите, если вы просто нажмите кнопку Просмотр странице Источник это собираюсь рассказать вам, как это сделать. Итак, еще раз, работать умнее, а не больше. И, как вы видите здесь, все эти вещи одинаковы. этот здесь просто принимает некоторые подстроку что я забыл, что это делает. Но, очевидно, займет некоторое подстроку от стоимости от нуля до десяти, и возвращает ложное, что следует прекратить Пользователь с вводом больше, а затем, очевидно, обновляет Внутренняя HTML там. Круто. Настолько большие Возьмите Выводы из сегодняшнего дня, Эксперимент, посмотрите на исходный код потому что это поможет вам много, и все, иногда JavaScript может быть трудно работать, и не всегда работают так, как вы ожидаете, что, но просто стараться потому что я обещаю, что это будет. Я обещаю, все эти примеры работали перед классом. Я не понимаю, что произошло. Я буквально все же. Еще одна вещь, что я просто хочу, чтобы показать вам, ребята, которые могут быть супер полезно в in--, что работает раньше? Мы получили партию к работе, не так ли? Я так думаю. Да. Мы сделали. Высокий. Итак, одна вещь, которая вы, ребята, должны знать, является лог консоли, что я говорил. Так утешить точка журнал Hello. Так что это своего рода JavaScript эквивалент Printf. Так что если вы когда-либо хотели проверить свои переменные или посмотреть, что там происходит, что Вы можете сделать это, если мы проверяем элемент, это то, что вы хотите пойти чтобы и вы идете, чтобы утешить, Вы увидите, что он напечатан привет. Таким образом, мы могли бы его печатать все, что мы хотели. Если мы хотели, чтобы напечатать фон точка стиль точка фон, мы должны быть в состоянии видеть RGB втрое идет вверх. Или нет. Я забыл, как именно вы печатать переменную подобное, но вы должны быть в состоянии распечатать что-то вроде этого. Это будет очень полезно для PSET когда Вы пытаетесь манипулировать координаты или еще много чего. Таким образом, они также изменить эту часть в классе. Это отличается от прошлых лет, так просто приятно ваших ТФ, или ТФ в рабочее время, а, потому, что мы вид обучения вместе с вами, ребята. Но лог консоли было супер, супер полезно для JavaScript в прошлом году. Так люблю его. Узнайте, как использовать его. Это проще в использовании, чем GDB, так что должно быть не менее плюс точкой. Но спасибо, ребята приносят с собой. Мне жаль, что мой примеры по некоторым причинам просто не хочу, чтобы сотрудничать со мной, но я надеюсь, что она помогла получить вид вы немного больше в зоне JavaScript. И пошлите мне все ваши вопросы на следующей неделе, так что я могу быть супер ремонт, и я принесу конфеты и даже дополнительный конфеты, потому что это было смешно. Но вы, ребята, здорово, и имеют удивительный неделю.