Основы работы с атрибутами HTML через JavaScript
Попробуем считывать и изменять атрибуты тегов. Пусть даны инпут с id="test" и кнопка, по клику на которую будет запускаться функция func:
<input type="text" value="!" id="test">
<input type="submit" onclick="func()">
Внутри функции func получим наш инпут по его id и запишем ссылку на него в переменную elem:
function func() {
var elem = document.getElementById('test');
}
Выведем на экран содержимое атрибутов нашего инпута. Чтобы получить доступ, к примеру, к атрибуту value, следует написать следующее: elem.value, где elem – это переменная, в которую мы с помощью getElementById записали ссылку на наш элемент, а value – атрибут тега, который нас интересует.
Можем вывести содержимое атрибута через alert – alert ( elem . value ) или записать в какую-нибудь переменную.
Аналогичным образом мы можем считывать значения и других атрибутов, например – elem . id или elem . type.
Можно не только считывать значения атрибутов, но и изменять их. К примеру, чтобы поменять значение атрибута value, нужно просто присвоить его конструкции elem.value:
function func() {
var elem = document.getElementById('test');
elem.value = 'www'; //присвоим новое значение атрибуту value
}
Можно не вводить переменную elem, а строить цепочку из точек таким образом:
function func() {
alert(document.getElementById('test').value);
}
Таким же образом (цепочкой) можно производить и перезапись атрибутов:
document.getElementById('test').value = 'www';
Исключения: атрибуты class и for
Атрибут class является исключением, чтобы считать из него значение следует писать elem . className, а стобы обратится к атрибуту for, необходимо прописать свойство htmlFor.
|
|
|
Работа с this
Объект this указывает на текущий элемент (элемент, в котором произошло событие). Причем указывает так, как будто этот элемент уже получен методом getElementById.
Задача остается прежней, необходимо по нажатию на инпут вывести на экран содержимое его value. Для этого параметром функции передадим объект this таким образом: func(this). Этот this – уже готовая ссылка на объект. Если у нас на страницы несколько инпутов с различными значениями атрибута value запишется именно тот, на который вы щелкнули кнопкой мыши.
Наш this передается параметром функции и попадает в переменную elem. Elem ведет себя так, как будто был получен таким образом: var elem = document.getElementById(…).
Решение задачи будет следующим:
<input type="submit" onclick="func(this)" value="input1">
<input type="submit" onclick="func(this)" value="input2">
<input type="submit" onclick="func(this)" value="input3">
function func(elem) {
alert(elem.value);
}
Основы работы с CSS
В JavaScript работа с CSS свойствами происходит путем изменения значения атрибута style для элемента. К примеру, чтобы поменять цвет нужно построить следующую цепочку: elem.style.color и присвоить ей значение цвета:
|
|
|
var elem = document.getElementById('test');
elem.style.color = 'red';
или
document.getElementById('test').style.color = 'red';
Существует много CSS свойств, которые пишутся через дефис, например font-size. В этом случае оно преобразуется в fontSize.
Исключение является свойство float, к нему обращение следующее: cssFloat.
ПРАКТИЧЕСКОЕ ЗАНЯТИЕ №10
НАИМЕНОВАНИЕ: Работа с таймерами
3. ЦЕЛЬ: Создание и запуск таймеров в сценариях JavaScript, формирование ОК 2, ОК 4, ОК 5, ПК 1.1, ПК 1.2, ПК 1.3, ПК 1.4, ПК 1.5, ПК 1.6
2. ПОДГОТОВКА К ЗАНЯТИЮ: По предложенной литературе повторить тему «Таймеры в JavaScript» и ответить на следующие вопросы:
1. Какие таймеры в JavaScript существуют?
2. Назначение таймеров в веб - приложениях?
3. ЛИТЕРАТУРА:
3.1 Шомас Е.А. Технологии стороны клиента. Язык JavaScript., Учебное пособие., Самара КС ПГУТИ, 2019г. – 4,9 п. л.
3.2 http://old.code.mu/books/javascript/dom/rabota-s-tajmerami-v-javascript.html- Работа с таймерами
4. ПЕРЕЧЕНЬ ОБОРУДОВАНИЯ И ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ:
4.1 ПЭВМ, подключенные к сети Интернет
4.2 Текстовый редактор
5. ЗАДАНИЕ:
5.1Напишите код, который будет выводить в браузер количество секунд, прошедших с момента запуска программы в формате:
Прошло: 1 сек.
Прошло: 2 сек. // и так далее.
При достижении 5 секунд таймер останавливался и надписи больше не выводились.
|
|
|
5.2Создайте тикающие часики
5.3Создайте таймер обратного отсчета (от 10 секунд)
5.4Создайте простой слайдер, который каждую секунду меняет изображение на другое. Использовать минимум 5 изображений.
5.5Напишите сценарий, в котором при нажатии на кнопку с соответствующим фруктом, открывалось новое окно с изображением данного фрукта. Фруктов и изображений должно быть не менее трех.
5.6Создайте отсчет до полуночи в следующем формате:
Время должно изменяться автоматически!
6. ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ:
6.1 Изучите теоретический материал по теме практической работы перед выполнением задания.
6.2 Примеры выполнения создания простейших функций можно найти в Приложении.
7. СОДЕРЖАНИЕ ОТЧЕТА:
7.1 Наименование и цель работы
7.2 Задание, под каждым поместить код программы и полученные результаты в виде скринов.
7.5 Ответы на контрольные вопросы
7.4 Вывод о проделанной работе
8. КОНТРОЛЬНЫЕ ВОПРОСЫ :
8.1 Назначение таймеров
8.2 Синтаксис запуска таймера и его остановки?
ПРИЛОЖЕНИЕ:
Можно создать два типа таймеров – одноразовые – срабатывают один раз после определенного промежутка времени и многоразовые – срабатывают непрерывно через определенный интервал времени.
|
|
|
На веб – странице может присутствовать несколько таймеров и запускать их можно в любом месте кода, например, когда произойдет событие onload окна или будет нажата кнопка. Область применение таймеров – рекламные баннеры, которые чередуются через определенные интервалы времени или отображают изменяющееся время на веб – странице; все виды анимации также нуждаются в таймерах.
Одноразовый таймер
Для его установки используется метод setTimeout () объекта Window.
setTimeout(“ваш JavaScript- код” , задержка в миллисекундах)
Метод setTimeout() принимает два параметра – первый – это Javascript -код, который вы хотите выполнить, второй – задержка, после которой будет выполняться код.
Метод возвращает значение (целое число), которое является уникальным идентификатором (ID) таймера. Если позже вы решите, что хотите остановить срабатывание таймера, вы будете использовать этот идентификатор, чтобы указать JavaScript, к какому таймеру вы обращаетесь.
Например, чтобы установить таймер, который сработает через три секунды после загрузки страницы, можете использовать следующий код:
<html>
<head>
<script>
var timerID;
function window_onload()
{
timerID = setTimeout("alert('Время вышло')", 3000);
alert("Время пошло");
}
</script>
</head>
<body onload="window_onload()">
</body>
</html>
Установка таймера не приостанавливает выполнение сценариев. Таймер выполняется в фоновом режиме и срабатывает, когда заканчивается время его задержки. Страница при этом выполняется как обычно, и после того, как вы запускаете обратный отсчет таймера, любые сценарии будут немедленно выполнены. В данном примере окно с сообщением, говорящим об установке таймера, появится сразу же после выполнения кода для этой установки.
Чтобы сбросить таймер используется метод clearTimeout(). Он принимает только один параметр – ID таймера, который возвращает метод setTimeot(). Изменим пример и создадим кнопку, которую вы можете нажать, чтобы остановить таймер.
<html>
<head>
<script>
var timerID;
function window_onload()
{
timerID = setTimeout("alert('Время вышло')", 3000);
alert("Время пошло");
}
Дата добавления: 2021-02-10; просмотров: 210; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!