Файл: Лабораторная работа2 по дисциплине технологии обработки информации Студент гр. Иб71вп П. П. Иванов.docx
ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 07.11.2023
Просмотров: 116
Скачиваний: 2
ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.
МИНИСТЕРСТВО ЦИФРОВОГО РАЗВИТИЯ,СВЯЗИ И МАССОВЫХ КОММУНИКАЦИЙ РОССИЙСКОЙ ФЕДЕРАЦИИФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ«САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ ТЕЛЕКОММУНИКАЦИЙ ИМ. ПРОФ. М.А. БОНЧ-БРУЕВИЧА» (СПбГУТ)Кафедра информационных управляющих систем
}}flag_color = !flag_color;}function _PrepareTable(num_rows, num_columns) {//1. подготавливаем пустую таблицу:// num_rows строк, num_columns столбцовlet gen_tab = document.createElement("table");gen_tab.setAttribute("class", "minimalistBlack");//2. добавляем строку "шапки" таблицы let row = gen_tab.insertRow(-1);for (let j = 0; j < num_columns; j++) { let headerCell = document.createElement("th");//запоминаем 1-мерный индекс ячейки//headerCell.setAttribute("ind", j);headerCell.innerHTML = " "; //arr_table[0][i];row.appendChild(headerCell);}//3. добавляем пустые строкиfor (let i = 1; i < num_rows; i++) { row = gen_tab.insertRow(-1);for (let j = 0; j < num_columns; j++) { let cell = row.insertCell(-1);//запоминаем 1-мерный индекс ячейки//cell.setAttribute("ind", i*num_columns+j); cell.innerHTML = " "; // arr_table[i][j]; } }//4. добавляем пустую таблицу let dTable = document.getElementById("dvTable");dTable.innerHTML = "";dTable.appendChild(gen_tab);}ДЕМОСТРАЦИЯ РАБОТЫ ФУНКЦИЙ JAVASCRIPTПродемонстрируем построение таблиц пошагово, используя для этого соответствующие функции JavaScript и кнопки в HTML (рис. 1-3) https://jsfiddle.net/b2ouyr5m/:<input type="button" value="Раскрасить" onclick="ChangeColors()" /> [см. заготовку кода в лабораторно-практической работе 08]Соответствующий код CSS для отображения таблиц: [также переименовать и присвоить другие настройки отображения, включая цвета]…Рис. 1. Демонстрация результата загрузки двух пустых таблиц, созданных с помощью функции _PrepareTable()Рис. 2. Демонстрация результата заполнения двух таблиц с помощью функции InitializeTable()Рис. 3. Демонстрация результата закрашивания двух таблиц с помощью функции ChangeColors()Вывод: о конкретных функциях JavaScript для отображения табличных данных: 5-7 строк.
Лабораторная работа2
по дисциплине «ТЕХНОЛОГИИ ОБРАБОТКИ ИНФОРМАЦИИ»Студент гр. ИБ-71вп_____________________________ П. П. Иванов(подпись)Проверил ___________________________ А. В. Параничев(оценка и подпись)Санкт-Петербург2023 год СОЗДАНИЕ И ЗАПОЛНЕНИЕ ТАБЛИЦ С ПОМОЩЬЮ JAVASCRIPT[выделенное зеленым прочитать и перед отправкой отчета удалить; выделенное желтым поменять на свое; в данном задании нужно автоматизировать заполнение табличных данных из лабораторной работы № 1: с помощью JavaScript вместо HTML]Для автоматического построения табличных данных добавлен следующий код JavaScript:Примерный код см. в методе InitializeTable() и связанных с ним методах: Все функции назвать по своему, используя свой номер в формате ИБ_12 или ФИО латиницей: по 1й кнопке инициализировать пустую таблицу, по 2й кнопке - заполнить таблицу, по 3й кнопке - закрасить данные по умолчанию по каждому из параметров обеих таблиц!]function InitializeTable(){// 1. Объявляем исходные данныеlet arr_table = new Array(); arr_table.push(["Индекс", "Название", "Цена"]);arr_table.push([1, "Навигатор 1", "10000"]);arr_table.push([2, "Навигатор 2", "15000"]);arr_table.push([3, "Навигатор 3", "14000"]);// 2. Подставляем данные в таблицу по идентификатору "ind"let dTable = document.getElementById("dvTable");for(let i = 0; i < this._num_rows; i++){ for(let j = 0; j < this._num_columns; j++){ dTable.childNodes[0].rows[i].cells[j].innerHTML = arr_table[i][j]; }}}this.flag_color = falsefunction ChangeColors(){// Меняем цвета по заданному алгоритмуlet color_select = this.flag_color ?"data_select" : "data_default"; let dTable = document.getElementById("dvTable");for(let i = 0; i < this._num_rows; i++){ for(let j = 0; j < this._num_columns; j++){ let cell = dTable.childNodes[0].rows[i].cells[j];if(i == j)cell.setAttribute("class", color_select);}}flag_color = !flag_color;}function _PrepareTable(num_rows, num_columns) {//1. подготавливаем пустую таблицу:// num_rows строк, num_columns столбцовlet gen_tab = document.createElement("table");gen_tab.setAttribute("class", "minimalistBlack");//2. добавляем строку "шапки" таблицы let row = gen_tab.insertRow(-1);for (let j = 0; j < num_columns; j++) { let headerCell = document.createElement("th");//запоминаем 1-мерный индекс ячейки//headerCell.setAttribute("ind", j);headerCell.innerHTML = " "; //arr_table[0][i];row.appendChild(headerCell);}//3. добавляем пустые строкиfor (let i = 1; i < num_rows; i++) { row = gen_tab.insertRow(-1);for (let j = 0; j < num_columns; j++) { let cell = row.insertCell(-1);//запоминаем 1-мерный индекс ячейки//cell.setAttribute("ind", i*num_columns+j); cell.innerHTML = " "; // arr_table[i][j]; } }//4. добавляем пустую таблицу let dTable = document.getElementById("dvTable");dTable.innerHTML = "";dTable.appendChild(gen_tab);}ДЕМОСТРАЦИЯ РАБОТЫ ФУНКЦИЙ JAVASCRIPTПродемонстрируем построение таблиц пошагово, используя для этого соответствующие функции JavaScript и кнопки в HTML (рис. 1-3) https://jsfiddle.net/b2ouyr5m/:<input type="button" value="Раскрасить" onclick="ChangeColors()" /> [см. заготовку кода в лабораторно-практической работе 08]Соответствующий код CSS для отображения таблиц: [также переименовать и присвоить другие настройки отображения, включая цвета]…Рис. 1. Демонстрация результата загрузки двух пустых таблиц, созданных с помощью функции _PrepareTable()Рис. 2. Демонстрация результата заполнения двух таблиц с помощью функции InitializeTable()Рис. 3. Демонстрация результата закрашивания двух таблиц с помощью функции ChangeColors()Вывод: о конкретных функциях JavaScript для отображения табличных данных: 5-7 строк.