Основы JavaScript. Веб-разработка коммуникационных продуктов. Практика №9 презентация

Вставка кода внутри HTML
Самый простой способ вставить JS-код в HTML-страницу — использовать парный тег
<br>Он сообщает браузеру, что всё его
содержимое нужно интерпретировать
как исполняемый скрипт,
а не как текст или HTML-код<br></div><!----><!--]--><!--[--><div class="section"><div></div></div><!--]--></div></div><div class="slides-wrapper"><div id="slide3" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/579691/slide-2.jpg" target="_blank" rel="noopener">Слайд 3</a><h3 class="slides-content text-center font-bold"><div><p>Создать электронные часы? Легко<br></div></h3></h3><!----><!----><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide4" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/579691/slide-3.jpg" target="_blank" rel="noopener">Слайд 4</a><h3 class="slides-content text-center font-bold"><div><p>Подключение внешних файлов<br><p>Для подключения JavaScript из внешних файлов тоже используется тег <script>. Только</div></h3></h3><!----><!----><div class="slides-content">внутри него появляется атрибут src,
в котором вы указываете ссылку
на JS-файл:<br> <script src="./time.js">

Есть третий способ – в теге
Вы можете разместить JavaScript внутри тега HTML, используя специальные атрибуты — например, onclick, onmouseover, onkeypress, onload
Они добавляют на элементы обработчики событий
Однако это плохая практика. К тому же, использование обработчиков внутри HTML заметно ухудшает
читабельность кода

Это работает? Да, работает
Можно выполнять практическое задание либо первым способом, либо этим – выбирайте сами

Событие onclick
Событие click происходит, когда пользователь нажимает на элемент на веб-странице. Часто это элементы формы и ссылки. Вы можете обработать событие click с помощью обработчика onclick
Следующий пример покажет вам предупреждающее сообщение при нажатии на элементы:

Событие onmouseover
Событие mouseover происходит, когда пользователь наводит указатель мыши на элемент.
Следующий пример покажет вам предупреждающее сообщение при наведении мыши на элементы:

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

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

Событие onfocus
Событие focus происходит, когда пользователь фокусируется на элементе на веб-странице.
Следующий пример убирает текст «Имя автора», когда пользователь на нём фокусируется

Событие onblur
Событие blur происходит, когда пользователь убирает фокус с элемента формы или окна.
Следующий пример возвращает текст «Имя автора», если пользователь ничего не ввёл в форму

Пример формы с проверкой
Если поле формы (fname) пусто, эта функция предупреждает сообщение
и возвращает значение false, чтобы предотвратить отсылку формы:

Задание на практику №1
В коде на следующей
странице содержится
синтаксическая ошибка
Исправьте её и убедитесь,
что код выполняется
успешно

Задание на практику №1
Синтаксическая ошибка ошибкой)">Наведи на меня курсор

Задание на практику №2*
Сделайте сложение: добавьте на страницу три текстовых поля ввода и кнопку, при нажатии на которую в третьем поле будет сумма из двух других полей

Задание на практику №2*
При выполнении задания помните, что для выполнения задания вам нужны поля ввода (
) и кнопка (
). Можете увидеть их в разделе «Теги HTML»
С помощью JavaSctipt необходимо сделать только вычисление! При этом, важно узнать особенности объединения в JS (как работает плюс) и что такое
унарный плюс