МИНИСТЕРСТВО НАУКИ И ВЫСШЕГО ОБРАЗОВАНИЯ РОССИЙСКОЙ ФЕДЕРАЦИИ
федеральное государственное автономное образовательное учреждение высшего образования
«САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ АЭРОКОСМИЧЕСКОГО ПРИБОРОСТРОЕНИЯ»
ИНСТИТУТ НЕПРЕРЫВНОГО И ДИСТАНЦИОННОГО ОБРАЗОВАНИЯ
КАФЕДРА 41
|
ОЦЕНКА
ПРЕПОДАВАТЕЛЬ
старший преподаватель |
|
|
|
Н. А. Соловьева |
должность, уч. степень, звание |
|
подпись, дата |
|
инициалы, фамилия |
ПРАКТИЧЕСКАЯ РАБОТА №3
|
КЛИЕНТСКИЕ ЯЗЫКИ СЦЕНАРИЕВ. JAVASCRIPT
|
по дисциплине: Основы профилизации |
РАБОТУ ВЫПОЛНИЛ
СТУДЕНТ ГР. № |
Z9411 |
|
|
|
Р. С. Кафка |
|
номер группы |
|
подпись, дата |
|
инициалы, фамилия |
Студенческий билет № |
2019/3603 |
|
|
|
Санкт-Петербург 2022
Цель работы: получение опыта написания и применения функций на языке javascript.
Задание:
Подготовить несколько сценариев по заданиям ниже. Все сценарии встроить в сайт из лабораторной работы № 2. Способы реализации сценариев (тип события, способ включения сценария, метод выбора элемента на странице, оформление функции) представлены в индивидуальном варианте ниже.
Вызов всплывающего окна с ФИО и группой автора сайта.
Добавить сценарий по варианту из задания.
Добавить/удалить строку таблицы.
Изменить цвет или размер элемента.
Вариант задания №8:
Событие: keydown
Способ включения сценария: тег <script>
Поиск элемента: getElementsByTagName
Оформление функции: анонимная
Сценарий: Движение текста.
Ход работы:
Согласно заданию для включения сценария используем тег <script> внутри HTML файла.
Для триггера события использовалось нажатие клавиши.
Была создана анонимная функция, которая считывала какая клавиша клавиатуры была нажата. При помощи метода addEventListener сайт проверял нажатие клавиш. В зависимости от клавиши выполнялось то или иное действие.
<script>
addEventListener("keydown", function (event) {
if (event.key == "a"){
…
}
</script>
Вызов всплывающего окна с фио и группой автора сайта.
JavaScript код:
if (event.key == "a"){
alert("Кафка Роман Сергеевич. Z9411")
}
При нажатии клавиши «а» на странице появляется уведомление с ФИО и группой.
Результат выполнения кода представлен на рисунке 1.
Рисунок 1 – Вызов всплывающего окна с ФИО и группой
Сценарий по движению текста.
При нажатии клавиши «z» функция выполняет поиск элементов, содержащих тег «h1». После чего записывает в переменную start текущее значение времени с помощью метода Date.now(). Потом начинается вложенная внутрь функция , которая постепенно увеличивает значение margin с левой стороны и отсчитывает сколько прошло времени. После истечения 2 секунд текст прекращает движение. Поскольку поиск по имени тега возвращает значение в виде списка, в коде обращаемся к нулевому значению списка. Таким образом, будет изменяться самый верхний элемент с тегом h1 в html файле.
JavaScript код:
if (event.key == "z"){
var text = document.getElementsByTagName("h1");
// в то время как timePassed идёт от 0 до 2000
// left изменяет значение от 0px до 400px
let start = Date.now(); // сколько времени прошло с начала анимации?
let timer = setInterval(function() {
let timePassed = Date.now() - start;
text[0].style.marginLeft = timePassed / 5 + 'px';
if (timePassed > 2000) clearInterval(timer); // закончить анимацию через 2 секунды
}, 20);
}
Результат выполнения кода представлен на рисунке 2.
Рисунок 2 – Движение текста
Добавить/удалить строку таблицы.
Добавление строки таблицы
При нажатии клавиши «s» функция выполняет поиск элементов, содержащих тег «table». Затем в переменные записывается метод, который создаёт элементы tr и td – это строки и столбцы, которые нужны для добавления. В каждой строке в моей таблице содержится по 2 столбца, поэтому запускается цикл, у которого будет 2 итерации по созданию ячеек в столбцах друг за другом, и один раз создание строки. Поскольку поиск по имени тега возвращает значение в виде списка, в коде обращаемся к нулевому значению списка. Таким образом, будет изменяться самый верхний элемент с тегом table в html файле.
JavaScript код:
if (event.key == "s"){
var table = document.getElementsByTagName("table"); //Получаем форму
var newRow=document.createElement("tr");
for (var i=0; i<2; i++) {
var newCell=document.createElement("td");
newRow.appendChild(newCell);
}
table[0].appendChild(newRow);
Результат выполнения кода представлен на рисунке 3.
Рисунок 3 – Добавление строки таблицы
Удаление строки таблицы
При нажатии клавиши «d» функция выполняет поиск элементов, содержащих тег «table». Поскольку поиск по имени тега возвращает значение в виде списка, в коде обращаемся к нулевому значению списка. Таким образом, будет изменяться самый верхний элемент с тегом table в html файле.
Затем выполняется итерация по выявлению количества строк в таблице для удаления. После удаления строки table[0].rows.length станет меньше, поэтому сначала присваиваем table[0].rows.length переменной len. В этот раз JS сообщит об ошибке, поскольку каждая строка удаляется. После этого значение len не изменилось, но фактическое количество строк уменьшится.
JavaScript код:
if (event.key == "d"){
var table = document.getElementsByTagName("table"); //Получаем форму
// Затем выполните итерацию по количеству строк в таблице для удаления:
for(var i=0; i<table[0].rows.length; i++){
table[0].deleteRow(i);
}
var len = table.rows.length;
for(var i=0; i<len; i++){ t
table[0].deleteRow(0);
}
}
Результат выполнения кода представлен на рисунке 4.
Рисунок 4 – Удаление строки таблицы