МИНИСТЕРСТВО НАУКИ И ВЫСШЕГО ОБРАЗОВАНИЯ РОССИЙСКОЙ ФЕДЕРАЦИИ

федеральное государственное автономное образовательное учреждение высшего образования

«САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ АЭРОКОСМИЧЕСКОГО ПРИБОРОСТРОЕНИЯ»

ИНСТИТУТ НЕПРЕРЫВНОГО И ДИСТАНЦИОННОГО ОБРАЗОВАНИЯ

КАФЕДРА 41

ОЦЕНКА

ПРЕПОДАВАТЕЛЬ

старший преподаватель				Н. А. Соловьева
должность, уч. степень, звание		подпись, дата		инициалы, фамилия

ПРАКТИЧЕСКАЯ РАБОТА №3

КЛИЕНТСКИЕ ЯЗЫКИ СЦЕНАРИЕВ. JAVASCRIPT

по дисциплине: Основы профилизации

РАБОТУ ВЫПОЛНИЛ

СТУДЕНТ ГР. №	Z9411				Р. С. Кафка
	номер группы		подпись, дата		инициалы, фамилия
Студенческий билет №	2019/3603

Санкт-Петербург 2022

Цель работы: получение опыта написания и применения функций на языке javascript.

Задание:

Подготовить несколько сценариев по заданиям ниже. Все сценарии встроить в сайт из лабораторной работы № 2. Способы реализации сценариев (тип события, способ включения сценария, метод выбора элемента на странице, оформление функции) представлены в индивидуальном варианте ниже.

1. Вызов всплывающего окна с ФИО и группой автора сайта.

2. Добавить сценарий по варианту из задания.

3. Добавить/удалить строку таблицы.

4. Изменить цвет или размер элемента.

Вариант задания №8:

Событие: keydown

Способ включения сценария: тег <script>

Поиск элемента: getElementsByTagName

Оформление функции: анонимная

Сценарий: Движение текста.

Ход работы:

Согласно заданию для включения сценария используем тег <script> внутри HTML файла.

Для триггера события использовалось нажатие клавиши.

Была создана анонимная функция, которая считывала какая клавиша клавиатуры была нажата. При помощи метода addEventListener сайт проверял нажатие клавиш. В зависимости от клавиши выполнялось то или иное действие.

<script>

addEventListener("keydown", function (event) {

if (event.key == "a"){

…

}

</script>

1. Вызов всплывающего окна с фио и группой автора сайта.

JavaScript код:

        if (event.key == "a"){

        alert("Кафка Роман Сергеевич. Z9411")

        }

При нажатии клавиши «а» на странице появляется уведомление с ФИО и группой.

Результат выполнения кода представлен на рисунке 1.

Рисунок 1 – Вызов всплывающего окна с ФИО и группой

2. Сценарий по движению текста.

При нажатии клавиши «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 – Движение текста

3. Добавить/удалить строку таблицы.

   1. Добавление строки таблицы

При нажатии клавиши «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 – Добавление строки таблицы

2. Удаление строки таблицы

При нажатии клавиши «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 – Удаление строки таблицы