Знакомство с JavaScript

Java Script - язык программирования, широко применяемый в браузерах как язык сценариев для придания интерактивности веб-страницам. В отличие от HTML и CSS, JavaScript - это полноценный язык программирования, с функциями, циклами и т.д. и т. п. Когда вы занимались написанием программ в визуальной среде Scratch, вы на самом деле писали их на JavaScript. Теперь пришло время познакомиться с ним поближе.

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

Говорящий кот

Давайте поселим на веб-странице говорящего кота. Для начала - просто разместим на ней картинку с котом. Я сделал это так:

Код HTML

<img id="cat" src="cat.svg">

Код CSS

#cat {
width: 10%;
}

Теперь научим нашего кота говорить при помощи языка JavaScript. Для вывода сообщений на веб-странице в JavaScript используется встроенная функция alert. Для того, чтобы привязать вывод сообщений к какому-то событию, используется обработчик событий. Простейший способ сделать нашего кота говорящим - вписать код прямо в тег img:

Код HTML + JS

<img id="cat" onclick="alert('Привет! Я - кот. Я живу на этом сайте. Тебе здесь нравится?')" src="cat.svg">

В этом коде мы используем обработчик событий onclick (то есть "по щелчку мыши"). Когда обработчик срабатывает (происходит соответствующее событие), начинает выполняться привязанный к нему код JavaScript (заключённый в кавычки). В круглых скобках после функции alert находится её параметр - то, что она должна вывести. В нашем случае это текст - поэтому мы заключаем этот текст в одинарные кавычки - чтобы браузер при выполнении кода JavaScript понимал, что перед ним текст, а не что-то другое - например, переменная.

Задание 1 (на занятии)

Создайте веб-страницу. Разместите на ней любую картинку. Сделайте так, чтобы картинка выводила сообщение при нажатии на неё.

Переменные, условия, функции.

Давайте усложним задачу. Пользователь может не догадаться, что на кота нужно нажимать. Поэтому мы дадим ему подсказку - выведем сообщение "Нажми на меня!", когда указатель мыши будет находиться на картинке. Для этого нам понадобится другой обработчик событий - onmouseover (то есть "когда мышь находится на объекте"). Однако, если мы просто впишем в тег img два обработчика событий с соответствующим кодом, толку от этого будет мало. Затруднительно нажать мышью на картинку, не наведя перед этим курсор мыши на эту же картинку. Поэтому нам придётся написать программу посложнее. Наша задача - сделать так, чтобы сообщение "Нажми на меня!" выводилось только один раз.

Программы на веб-страницах размещаются при помощи тега script. Мы можем либо написать внутри тега весь текст программы либо указать ссылку на отдельный файл с программой. Вот так:

<script>src="cat.js"</script>

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

Переменная - это ящик, в который мы можем положить любое значение - число, текст и т. д. Этот "ящик" мы можем назвать, как нам угодно. Переменные в JavaScript объявляются при помощи слова let ("пусть"). Переменной нужно сразу же присвоить значение - это делается при помощи знака "=". Например:

let box = 3;

/* Пусть переменная box будет равна 3. Обратите внимание на точку с запятой - каждая инструкция (команда) должна заканчиваться этим знаком. */

Функция - это кусок кода, которому мы присвоили название, чтобы не писать его много раз. Это как "другие блоки" в Scratch. Функции объявляются при помощи ключевого слова function. Например:

function Add (x, y) {
return x + y;
}

/* Мы создали функцию, которая называется Add. В качестве параметров мы передаём в неё переменные x и y. Функция складывает эти переменные и возвращает (return) их сумму. */

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

let counter = 0;

/* Я ввожу переменную counter (счётчик) и задаю ей начальное значение 0. Эта переменная нужна, чтобы отслеживать сколько раз пользователь нажал на всплывающее окно с текстом. */

function catsays () {
/* Создаю функцию catsays (кот говорит) */
if (counter == 0) {
/* Если переменная counter равна 0, то */
alert('Нажми на меня!');
/* выводится сообщение */
counter = 1;
/* переменная counter становится равна 1 - значит, больше эта функция срабатывать не будет */
}
}

/* Обратите внимание - при проверке условия, я пишу "==", а не "=". В JavaScript "=" - это не знак равенства, это оператор присвоения значения (переменной). */

function catsays2 (){
if (counter == 1) {
alert('Привет! Я - кот. Я живу на этом сайте. Тебе здесь нравится?');
}
}

/* Вторая аналогичная функция - catsays2. Сообщение выводится, если переменная counter равна 1. */

document.getElementById("cat").addEventListener("mouseover", catsays);

document.getElementById("cat").addEventListener("click", catsays2);

/* Две последние строчки нужны чтобы браузер получил элемент за которым он должен следить (document.getElementById("cat")) - по его id. Картинке с котом я ранее присвоил идентификатор cat. После того, как браузер получает элемент, он отслеживает события, относящиеся к этому элементу:

addEventListener("click", catsays2)) - включает функцию catsays2, когда пользователь щёлкает мышью по коту.

addEventListener("mouseover", catsays) - включает функцию catsays, когда пользователь наводит мышь на кота. */

Чтобы наш код работал, его рекомендуется разместить (в теге script), перед закрывающим тегом body. Дело в том, что браузер читает документ сверху вниз. Если мы поместим наш код, в котором есть инструкция "искать элемент с id="cat"" перед этим элементом (картинкой) - браузер начнёт выполнять код и не найдёт на странице нужную нам картинку - потому что ещё не успел прочитать ту часть документа, где она находится.

Задание 2 (на дом)

Сделайте веб-страницу. Поместите на неё картинку. При помощи JavaScript научите картинку считать, сколько раз пользователь нажал на неё, и выводить сообщение с количеством нажатий.