Предыдущий ролик Следующий ролик  

Видео урок: Исследование JavaScript

Основы веб-дизайна

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

Несмотря на то что для отображения веб-сайтов необязательно использовать JavaScript, он стал важной составляющей веб-дизайна. Именно поэтому этим языком нужно обязательно овладеть. В этот раз файл hello.htm из предыдущего упражнения у меня не открыт. Зато открыт файл из папки 01_03. Этот файл немного отличается от предыдущего. Если вы спуститесь пониже, то поймете, о чем я говорю: в нем уже присутствует некоторый дополнительный код. Если я открою этот файл в браузере, то увижу, что на страницу добавлена кнопка "Change color" (Изменить цвет). Если нажать эту кнопку прямо сейчас, то ничего не произойдет. Сбоку от этой кнопки размещен какой-то непонятный текст.

Можете не обращать на него внимания. После того как мы все доведем до ума, этого текста здесь уже не будет. Аналогично тому, как при работе с CSS нам пришлось использовать HTML, для того чтобы заключить код CSS в тег style, при написании кода JavaScript нам приходится заключать этот код в тег script. Благодаря этому браузер понимает, что это некий скрипт. Поэтому ниже кнопки, но перед закрывающим тегом body, я открою тег script. После этого я добавлю закрывающий тег script.

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

В результате он приостановит все остальные процессы, выполнит скрипт, а затем вернется к остальным процессам. Таким образом, если разместить скрипт в самом начале, наша страница не загрузится при его выполнении. Поэтому я спущусь в нижнюю часть страницы, скопирую или вырежу всю эту абракадабру (на самом деле я ее вырежу), и вставлю ее внутри тега script. По сути, я просто пытаюсь сэкономить время на вводе. Итак, давайте обратим свое внимание на этот код и разберемся в том, что здесь происходит. В первой строке внутри тега script говорится: "document.getElementById('color').onclick = changeColor;".

Звучит это, конечно, довольно устрашающе, но на самом деле все очень просто. Аналогично тому, как мы использовали ранее CSS-селекторы для указания нужного элемента страницы, мы теперь используем так называемый "точечный синтаксис" (dot syntax) для этих же самых целей. Таким образом мы говорим: "Эй, просмотри этот документ и найди в нем элемент по его ID, по атрибуту getElementById. Какое значение у атрибута? Color." Итак, если вы просмотрите HTML-документ, то увидите, что у этого элемента, кнопки, есть атрибут ID со значением "color". Отлично.

По сути, данная строка говорит: "Эй, найди вот эту кнопку". Есть еще одна точка, за которой следует текст "onclick". "Onclick" - это событие. По сути, оно означает, что при нажатии этой кнопки браузер должен что-то выполнить. И что должен сделать браузер? Мы хотим, чтобы он изменил цвет. То есть при нажатии кнопки должен изменяться цвет текста. Так что же такое changeColor? Это что-то уже встроенное в JavaScript? Нет, я взял это из воздуха. Я мог использовать любое название: switchColor, toggleColor, changeColor.

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

Именно это мы и делаем вот здесь. По сути, здесь говорится: "Выполняй этот код при каждом нажатии данной кнопки". Именно здесь. Отлично! Итак, внутри этого кода есть условный оператор if. Перед тем как добраться до этого места, необходимо задать переменную. Итак, я спущусь ниже той строки, которая начинается со слова "document", и введу там слово "var", а затем пробел. Var - это ключевое слово, указывающее на то, что нужно создать новую переменную. После вводим "currentColor". Обратите внимание, что это одно слово, и я использую так называемую "верблюжью" нотацию или стандарт наименования camelCase.

Это когда первое слово начинается со строчной буквы, а следующие за ним слова, соединенные без помощи каких-либо разделителей, начинаются с заглавной буквы. Итак, мы ввели "var currentColor ", далее вводим символ "=" и в кавычках слово "red". Кавычки указывают на то, что это строка символов. Итак, по сути, в этом коде... полагаю, можно избавиться от некоторых пробелов... В этом коде говорится: "Нужно создать переменную с именем "currentColor" и присвоить ей значение "red"". Вот этот знак равенства мы называем "оператором присваивания". С помощью него переменной присваивается значение.

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

В нашем случае переменная currentColor содержит значение "red", поскольку текущий цвет нашей страницы - красный. Отлично! А теперь давайте вернемся к нашей функции и завершим ее создание. Опять все кажется очень сложным, но это не так. Здесь имеется так называемый оператор "if-else". Это условный оператор, условная логика, которая позволяет создавать умные приложения, писать умный код, который, в свою очередь, дает приложению указания выполнять какие-то действия в случае выполнения условия. Поэтому внутри скобок, сразу после слова "if" я введу "current"... Упс! Надо правильно написать слово: currentColor. В JavaScript имеют значение и орфография, и регистр. Если после тестирования кода обнаружатся ошибки, в результате чего код не будет выполняться, вернитесь к вашему коду и повторно проверьте и орфографию, и правильность употребления регистров, и пунктуацию, поскольку все это имеет большое значение. Итак, я ввел "if(currentColor ". А что это? Это та переменная, которую мы только что обсуждали... Далее вводим "==", итак, два знака равенства, а после - опять в кавычках слово "red". Как вы помните, один знак равенства используется для обозначения так называемого "оператора присваивания".

С помощью него присваивается значение. Двойное равенство, которое имеется вот здесь, проверяет значение. Таким образом, с помощью него сообщается, что если переменная currentColor имеет значение "red", т.е. текущий цвет - красный, то необходимо что-то сделать. Что нужно сделать - указывается тут же, в круглых скобках. Перейдем на следующую строку, чтобы у меня появилось некое свободное пространство, и введем... Знаете, что если воспользоваться клавишей "Tab", то можно отформатировать код так, как вам захочется? Итак, введем "document.body". Не забывайте, что так мы указываем нужный нам элемент страницы, т.е. говорим: "Зайди в текущий документ и найди элемент body".

После этого вводим еще одну точку и слово "style". Я хочу, чтобы вы изменили стиль этого элемента, а вы и правда можете изменить CSS с помощью JavaScript. Затем я ввожу слово "color". Т.е. браузер как бы спрашивает: "Какое свойство нужно изменить?" А я отвечаю: "Нужно изменить свойство color". Зададим для него значение "green". Итак, нужно изменить цвет на зеленый, если текущий цвет - красный. Т.е. по сути, здесь говорится: "Если текущий цвет - красный, возьми элемент body и измени его цвет на зеленый". Весьма просто, правда? Поскольку я хочу, чтобы кнопка переключалась туда-сюда, нужно обновить переменную. Не забывайте, что переменные похожи на ведро с крышкой: в них может храниться все, что мне захочется туда поместить.

В этом случае мне нужно изменить вот это значение. Я скажу, что теперь текущий цвет равен зеленому, и обратите внимание, что для этого я снова использую оператор присваивания. Итак, знак равенства. Здесь говорится: "Если currentColor = red, т.е. текущий цвет - красный, то найди элемент body и измени его цвет на зеленый, а после этого обнови переменную таким образом, чтобы ее значение стало равным "green"". В результате при следующей проверке этого значения браузер скажет: "Ага, значение переменной не равно "red"". Именно в этот момент в игру вступает оператор else. Итак, здесь определяется, что делать, если цвет - красный, а в этой части, после оператора else указывается, что делать, если цвет отличается от красного. И, конечно, в нашем случае, если цвет - не красный, то он точно будет зеленым. Итак, перейдем к оператору else, вот в эти фигурные скобки. И опять же, очень важно, в каком месте размещается этот код. Если вы в первый раз работаете с JavaScript, и никогда раньше не писали ничего подобного, поставьте видео на паузу и проверьте, что вы все правильно ввели, и что изображение на вашем экране совпадает с изображением на моем. Окончательная версия этого файла находится в папке 01_03, поэтому, если вы столкнулись с проблемой, или ваш код отличается от моего, или не выполняется, откройте файл из этой папки и сравните его со своим файлом. Обязательно найдите причину проблемы.

На самом деле иногда мне очень дорого мое время, поэтому можно просто скопировать этот код и вставить его в оператор else. Было бы бессмысленно менять зеленый цвет на зеленый, поэтому я заменю его снова на красный, а также изменю значение переменной currentColor на "red". Нужно еще кое-что здесь сделать, а потом можно уже сохранять изменения. Обратите внимание, что после закрывающей фигурной скобки имеется ключевое слово "return". С помощью него задается вопрос: "Какое значение нужно вернуть после выполнения функции?". Функции необязательно должны возвращать значение.

Но в нашем случае было бы хорошо, если бы функция возвращала значение, поскольку нам нужно убедиться в том, что переменная currentColor имеет значение "red", т.е. в том, что она обновилась. Поэтому я введу "return currentColor". После выполнения одного из этих операторов будет возвращаться значение, таким образом, это значение всегда будет отслеживаться. Оно будет равно либо "red", либо "green". Итак, скрестим пальцы. Если вы все сделали правильно, то сохраните этот файл. Если вернуться в браузер и обновить страницу, то сначала мы заметим, что исчезла эта абракадабра после кнопки. Это хорошо.

Поскольку все, что находится внутри текста стилизации, не воспринимается как HTML, оно будет выполняться как JavaScript. Нажмем кнопку "Change Color" (Изменить цвет). Обратите внимание, что цвет кнопки переключается с красного на зеленый и обратно. Возможно, вы заметите, что с помощью этой кнопки изменяется только цвет абзаца, но не заголовка. Вот тут вы, может быть, зададитесь вопросом: "А не применяли ли мы это ко всему тегу body? Почему изменился только цвет абзаца, а цвет заголовка остался прежним?". Причина в том, что мы применили к заголовку H1 конкретный цвет. А при использовании CSS в случае конфликта побеждает более конкретное значение. Т.е. по сути, так как это значение применялось не ко всему элементу, а только к заголовку H1, то для него используется именно это значение. Любой дочерний стиль переопределяет родительский стиль. Это своего рода правило, которое нужно запомнить при изучении HTML, CSS и JavaScript. Итак, мы получили рабочий скрипт. Скорее всего, это не самый эффективный способ изменения цвета текста, зато этот пример позволяет составить представление о том, на что способен JavaScript. Он позволяет выполнять такие вещи, как отправка форм, валидация информации, содержащейся в форме, анимация элементов страницы и много чего еще.

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