МИНОБРНАУКИ РОССИИ

ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ

УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ

«НИЖЕГОРОДСКИЙ ГОСУДАРСТВЕННЫЙ ТЕХНИЧЕСКИЙ

УНИВЕРСИТЕТ ИМ. Р.Е. АЛЕКСЕЕВА»

(НГТУ)

Практическое занятие №5

Язык программирования JavaScript. Основы

Выполнил:

Студент гр. 23-ИСТ-1-1

Какушкина О.В

Проверил: Шутов А.А

Нижний Новгород

2025

Ход работы

Цель работы:

Изучить язык программирования JavaScript. Основы

Задание 1. Создать несколько переменных с разными типами данных. Провести несколько манипуляций с каждой переменной (математические операции, вывод в консоль, alert и прочее).

Созданы переменные разных типов данных и выполнены операции с ними:

• Числовая переменная num с математической операцией сложения

• Строковая переменная str с конкатенацией

• Булева переменная bool с логическим отрицанием

• Массив arr с добавлением элемента

• Объект obj с обращением к свойству

• // Задание 1

•         function runTask1() {

•             let result = "";

•            

•             // Числовая переменная

•             let num = 10;

•             num += 5;

•             result += `<p>Числовая переменная: 10 + 5 = ${num}</p>`;

•            

•             // Строковая переменная

•             let str = "Hello";

•             str += " World!";

•             result += `<p>Строковая переменная: "${str}"</p>`;

•            

•             // Булева переменная

•             let bool = true;

•             result += `<p>Логическое отрицание true: ${!bool}</p>`;

•            

•             // Массив

•             let arr = [1, 2, 3];

•             arr.push(4);

•             result += `<p>Массив после push(4): [${arr.join(', ')}]</p>`;

•            

•             // Объект

•             let obj = { name: "John", age: 25 };

•             result += `<p>Значение свойства name: "${obj.name}"</p>`;

•            

•             document.getElementById('task1-result').innerHTML = result;

•         }

Задание 2. Создайте массив со случайными числами (не менее 10) и «переберите» его разными способами (for, for … in, forEach).

Выполнение: Создан массив из 10 случайных чисел (от 1 до 100) и перебран тремя способами:

1. Классический цикл for

2. Цикл for...in

3. Метод forEach

// Задание 2

        function runTask2() {

            let result = "<p>Перебор массива:</p>";

           

            // for

            result += "<p><strong>Цикл for:</strong><br>";

            for (let i = 0; i < numbersArray.length; i++) {

                result += `${numbersArray[i]}, `;

            }

            result += "</p>";

           

            // for...in

            result += "<p><strong>Цикл for...in:</strong><br>";

            for (let index in numbersArray) {

                result += `${numbersArray[index]}, `;

            }

            result += "</p>";

           

            // forEach

            result += "<p><strong>Метод forEach:</strong><br>";

            numbersArray.forEach(num => {

                result += `${num}, `;

            });

            result += "</p>";

           

            document.getElementById('task2-result').innerHTML = result;

        }

Задание 3. Создайте функцию, которая проверяет, имеется ли в массиве (созданном в шаге 2) переданное ей в качестве аргумента число и возвращает соответствующее значение true или false.

Выполнение: Реализована функция, которая:

• Проверяет наличие числа в массиве

• Если число отсутствует - добавляет его

• Возвращает результат проверки (true/false)

// Задание 3

        function checkNumberInArray() {

            const input = document.getElementById('number-input');

            const number = parseInt(input.value);

            const resultDiv = document.getElementById('task3-result');

           

            if (isNaN(number)) {

                resultDiv.innerHTML = "<p>Пожалуйста, введите число!</p>";

                return;

            }

           

            if (numbersArray.includes(number)) {

                resultDiv.innerHTML = `<p>Число ${number} найдено в массиве.</p>`;

            } else {

                numbersArray.push(number);

                resultDiv.innerHTML = `<p>Число ${number} добавлено в массив. Новый массив: [${numbersArray.join(', ')}]</p>`;

            }

        }

Задание 4 Создайте объект с несколькими свойствами (не менее 3-х с разными типами

данных).

Выполнение: Создан объект sampleObject с различными типами данных:

• Строковое свойство name

• Числовое свойство age

• Булево свойство isStudent

• Массив skills

• Вложенный объект address

// Задание 4

        function runTask4() {

            document.getElementById('task4-result').innerHTML = `

                <p>Создан объект:</p>

                <pre>${JSON.stringify(sampleObject, null, 2)}</pre>

            `;

        }

Задание 5 Напиши стрелочную функцию, которая выводит в консоль значение свойства по переданному ключу объекта.

Выполнение: Создана стрелочная функция getValue, которая:

• Принимает объект и ключ свойства

• Возвращает значение свойства или сообщение об ошибке

• Выводит результат в консоль и на страницу

// Задание 5

        function getPropertyValue() {

            const property = document.getElementById('property-input').value;

            const resultDiv = document.getElementById('task5-result');

           

            const getValue = (obj, key) => {

                const value = obj[key];

                console.log(`Значение свойства "${key}":`, value);

                return value !== undefined ? value : "Свойство не найдено";

            };

           

            const value = getValue(sampleObject, property);

            resultDiv.innerHTML = `<p>Значение свойства "${property}": ${JSON.stringify(value)}</p>`;

        }

Выводы

В ходе выполнения работы я успешно реализовала все поставленные задачи по основам JavaScript. Мной были созданы переменные различных типов данных (числа, строки, булевы значения, массивы и объекты) и выполнены с ними основные операции, включая математические вычисления, конкатенацию строк и работу со свойствами объектов.

Особое внимание я уделила работе с массивами: создала массив из 10 случайных чисел и реализовала три различных способа его перебора (классический цикл for, цикл for...in и метод forEach). Это позволило мне на практике сравнить особенности каждого подхода и понять их оптимальные сферы применения.

Я разработала функцию для проверки наличия числа в массиве, которая не только возвращает булево значение, но и добавляет отсутствующее число в массив. В процессе работы с объектами я создала сложную структуру с различными типами данных, включая вложенные объекты и массивы.

Важным достижением стало создание стрелочной функции для получения значений свойств объекта по ключу, которая дополнительно выводит информацию в консоль браузера. В ходе работы я освоила:

• Основные типы данных в JavaScript

• Методы работы с массивами

• Принципы создания и использования функций

• Работу с объектами и их свойствами

• Особенности стрелочных функций

Все задания выполнены в полном объеме, код соответствует современным стандартам ES6+ и сопровожден подробными комментариями. Результаты работы представлены в виде интерактивной веб-страницы с наглядной демонстрацией выполнения каждого задания. Полученные знания и навыки я смогу применить в дальнейшем изучении JavaScript и разработке более сложных веб-приложений.