Сергей Леонидович Куринный - Mozilla Введение в веб программирование

function() {
var mySrc = myImage.getAttribute('src');
if(mySrc === 'images/firefox-icon.png') {
myImage.setAttribute ('src','images/firefox2.png');
} else {
myImage.setAttribute ('src','images/firefox-icon.png');
}
}

51

5. Сохраните все файлы и загрузите index.html в браузере.
Теперь, когда вы щёлкните по изображению, оно должно
измениться на другое!
Итак, мы сохраняем ссылку на наш элемент изображения в
переменной myImage. Далее, мы создаём этой переменной
обработчик события onclick с анонимной функцией. Теперь, каждый
раз, когда на этот элемент изображения щёлкнут:
1. Мы получаем значение из атрибута src изображения.
2. Мы используем условие для проверки значения src, равен ли
путь к исходному изображению:
- Если это так, мы меняем значение src на путь ко 2
изображению, заставляя другое изображение загружаться
внутри элемента .
- Если это не так (значит, оно должно было уже измениться),
мы меняем значение src, возвращаясь к первоначальному
пути изображения, каким он был изначально.
ДОБАВЛЕНИЕ ПЕРСОНАЛЬНОГО ПРИВЕТСТВЕННОГО
СООБЩЕНИЯ
Далее мы добавим немного другого кода, чтобы изменить заголовок
страницы и включить персонализированное приветственное
сообщение, когда пользователь впервые заходит на сайт. Это
приветственное сообщение будет сохраняться, когда пользователь
уходит с сайта, а затем приходит назад. Мы также добавим
возможность изменять пользователя и, поэтому приветственное
сообщение необходимо в любое время.
1. В index.html, добавьте следующую строку перед элементом
:
2. Change user
3. В main.js, добавьте следующий код в конец файла, точно так,
как написано - он захватит ссылки на новую кнопку и
заголовок, и сохранит их в переменные:
4. var myButton = document.querySelector('button');
var myHeading = document.querySelector('h1');
52

5. Теперь добавьте следующую функцию для установки
персонализированного приветствия - она ничего не будет
делать, но мы будем использовать её позже:
6. function setUserName() {
var myName = prompt('Please enter your name.');
localStorage.setItem('name', myName);
myHeading.innerHTML = 'Mozilla is cool, ' + myName;
}
7. Эта функция содержит функцию ​
prompt()​, которая вызывает
диалоговое окно, немного похожее на alert() кроме того, что
prompt() просит пользователя ввести некоторые данные, и
сохраняет эти данные в переменной, после того как
пользователь нажимает OK. В данном случае, мы просим
пользователя ввести его имя. Далее, мы вызываем API под
названием localStorage, которое позволяет нам сохранять
данные в браузере и извлекать их позднее. Мы используем
функцию setItem() из localStorage для создания и хранения
данных в свойстве под названием 'name', и устанавливаем это
значение в переменную myName, которая содержит имя
введенное пользователем. В конце мы устанавливаем
textContent заголовку в виде строки и имени пользователя.
8. Затем добавляем блок if ... else, чтобы мы могли вызвать код
инициализации, приложение устанавливает выполняет его,
когда оно впервые загружается:
9. if(!localStorage.getItem('name')) {
setUserName();
} else {
var storedName = localStorage.getItem('name');
myHeading.innerHTML = 'Mozilla is cool, ' + storedName;
}
10. Этот первый блок использует оператор отрицания (логическое
НЕ) чтобы проверить, существуют ли данные в пункте name.
Если нет, то функция setUserName() запускается для его
создания. Если это так (то есть, пользователь установил его
во время предыдущего посещения), мы извлекаем
53

сохраненное имя, используя getItem() и устанавливаем
textContent заголовку в виде строки плюс имя пользователя,
так же, как мы делали внутри setUserName().
11. В заключение, установим обработчик события onclick на
кнопку, чтобы при щелчке по ней запускалась функция
setUserName(). Это позволяет пользователю задавать новое
имя, всякий раз, когда он захочет, нажав на кнопку:
12. myButton.onclick = function() {
setUserName();
}
Теперь, когда вы в первый раз посетите сайт, мы попросим вас
ввести ваше имя пользователя, а затем дадим вам персональное
сообщение. Затем вы можете изменить имя, в любой момент, нажав
на кнопку. В качестве дополнительного бонуса, имя хранится внутри
localStorage, оно сохранится после закрытия сайта, поэтому
персонализированное сообщения все ещё будет там, когда вы
откроете сайт снова!
ЗАКЛЮЧЕНИЕ
Если вы следовали всем инструкциям в этой статье, в конечном итоге
вы должны получить страницу, которая выглядит примерно так (вы
также можете ​
посмотреть нашу версию здесь​):

54

Если вы застряли, вы всегда можете сравнить свою работу с нашим
готовым примером кода на Github​
.

55

Обзор инструментов разработки в
браузерах
Каждый --">