Введение
В этом лабораторном занятии студенты изучат операторы присваивания в JavaScript с помощью практического упражнения на HTML и JavaScript. В лабораторной работе студентам показывается, как создать HTML-файл и реализовать различные операторы присваивания, включая базовый оператор присваивания (=), комбинированные операторы присваивания (+=, -=) и операторы присваивания умножения/деления (*=, /=).
Участники начнут с настройки HTML-структуры с встроенным тегом сценария, а затем пошагово покажут различные приемы работы с операторами присваивания. Используя методы console logging и document.write(), студенты проверит и поймут, как эти операторы работают в JavaScript, приобретая практический опыт в управлении переменными и присвоении значений.
Создайте HTML-файл для операторов присваивания в JavaScript
В этом шаге вы создадите HTML-файл, который будет служить основой для изучения операторов присваивания в JavaScript. HTML предоставляет структуру для встраивания кода JavaScript, позволяя нам демонстрировать и тестировать различные приемы работы с операторами присваивания.
Сначала откройте WebIDE и перейдите в каталог ~/project. Создайте новый файл с именем assignment-operators.html, щелкнув правой кнопкой мыши в проводнике файлов и выбрав пункт "Новый файл".
Вот базовая HTML-структура, которую вы будете использовать:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>JavaScript Assignment Operators</title>
</head>
<body>
<h1>Exploring Assignment Operators</h1>
<script>
// JavaScript code will be added here in subsequent steps
</script>
</body>
</html>
Разберём основные компоненты:
<!DOCTYPE html>объявляет, что это документ HTML5- Тег
<script>— это место, где мы будем писать код JavaScript - На странице есть простой заголовок, который даёт контекст
После создания файла сохраните его в каталоге ~/project. Этот HTML-файл станет нашим полем для экспериментов при изучении операторов присваивания в следующих шагах.
Пример вывода при открытии этого файла в браузере:
Exploring Assignment Operators
Реализуйте базовый оператор присваивания (=)
В этом шаге вы узнаете о базовом операторе присваивания (=) в JavaScript. Оператор присваивания используется для присвоения значения переменной, создавая фундаментальный способ хранения и манипуляции данными.
Откройте файл assignment-operators.html, который вы создали на предыдущем шаге. Внутри тега <script> добавьте следующий код JavaScript, чтобы изучить базовое присваивание:
// Declaring and assigning variables using the = operator
let firstName = "John";
let age = 25;
let isStudent = true;
// Demonstrating variable assignment
console.log("First Name:", firstName);
console.log("Age:", age);
console.log("Is Student:", isStudent);
Разберём основные концепции:
letиспользуется для объявления переменных в современном JavaScript- Оператор
=присваивает значение переменной - Переменные могут хранить разные типы данных: строки, числа и логические значения
console.log()используется для вывода значений в консоль браузера
Вы также можете перезаписать переменные с использованием того же оператора:
// Reassigning variable values
age = 26;
console.log("Updated Age:", age);
// Assigning the value of one variable to another
let originalAge = age;
console.log("Original Age:", originalAge);
Пример вывода в консоли браузера:
First Name: John
Age: 25
Is Student: true
Updated Age: 26
Original Age: 26
Практикуйте комбинированные операторы присваивания (+=, -=
В этом шаге вы изучите комбинированные операторы присваивания += и -= в JavaScript. Эти операторы предоставляют краткий способ выполнить сложение и вычитание при присвоении новой переменной значения.
Откройте файл assignment-operators.html и добавьте следующий код JavaScript внутри тега <script>:
// Initial variable declaration
let score = 100;
console.log("Initial Score:", score);
// Using += operator to add and assign
score += 50; // Equivalent to: score = score + 50
console.log("Score after +50:", score);
// Using -= operator to subtract and assign
score -= 25; // Equivalent to: score = score - 25
console.log("Score after -25:", score);
// Practicing with another variable
let quantity = 10;
console.log("Initial Quantity:", quantity);
quantity += 5; // Add 5 to quantity
console.log("Quantity after +5:", quantity);
quantity -= 3; // Subtract 3 from quantity
console.log("Quantity after -3:", quantity);
Основные моменты о комбинированных операторах присваивания:
+=добавляет значение справа к переменной и присваивает результат-=вычитает значение справа из переменной и присваивает результат- Эти операторы предоставляют более компактный способ изменения значений переменных
- Они работают с числами и могут упростить арифметические операции
Пример вывода в консоли браузера:
Initial Score: 100
Score after +50: 150
Score after -25: 125
Initial Quantity: 10
Quantity after +5: 15
Quantity after -3: 12
Демонстрируйте операторы присваивания умножения и деления (*=, /=
В этом шаге вы изучите операторы присваивания умножения и деления *= и /= в JavaScript. Эти операторы предоставляют краткий способ умножить или разделить переменную и присвоить результат обратно той же переменной.
Откройте файл assignment-operators.html и добавьте следующий код JavaScript внутри тега <script>:
// Multiplication assignment operator (*=)
let price = 10;
console.log("Initial Price:", price);
price *= 3; // Equivalent to: price = price * 3
console.log("Price after *3:", price);
// Division assignment operator (/=)
let quantity = 24;
console.log("Initial Quantity:", quantity);
quantity /= 4; // Equivalent to: quantity = quantity / 4
console.log("Quantity after /4:", quantity);
// Practical example: Calculating total cost
let itemPrice = 5;
let itemCount = 7;
console.log("Item Price:", itemPrice);
console.log("Item Count:", itemCount);
let totalCost = itemPrice * itemCount;
console.log("Total Cost:", totalCost);
totalCost *= 0.9; // Apply 10% discount
console.log("Discounted Total Cost:", totalCost);
Основные моменты о операторах присваивания умножения и деления:
*=умножает переменную на значение справа и присваивает результат/=делит переменную на значение справа и присваивает результат- Эти операторы помогают упростить математические операции и присвоения
- Они работают с числовыми значениями и могут использоваться в различных вычислениях
Пример вывода в консоли браузера:
Initial Price: 10
Price after *3: 30
Initial Quantity: 24
Quantity after /4: 6
Item Price: 5
Item Count: 7
Total Cost: 35
Discounted Total Cost: 31.5
Проверьте результаты операторов присваивания с использованием document.write()
В этом шаге вы узнаете, как использовать document.write() для отображения результатов операторов присваивания непосредственно на веб-странице. Этот метод предоставляет простой способ вывода значений для новичков, чтобы они могли визуализировать свои операции с JavaScript.
Откройте файл assignment-operators.html и измените тег <script>, чтобы включить следующий код:
// Demonstrating assignment operators with document.write()
let initialValue = 10;
document.write("<h2>Assignment Operator Demonstration</h2>");
document.write("Initial Value: " + initialValue + "<br>");
// Basic assignment
initialValue = 20;
document.write("After Basic Assignment (=): " + initialValue + "<br>");
// Compound addition assignment
initialValue += 5;
document.write("After Addition Assignment (+=): " + initialValue + "<br>");
// Compound subtraction assignment
initialValue -= 3;
document.write("After Subtraction Assignment (-=): " + initialValue + "<br>");
// Multiplication assignment
initialValue *= 2;
document.write(
"After Multiplication Assignment (*=): " + initialValue + "<br>"
);
// Division assignment
initialValue /= 4;
document.write("After Division Assignment (/=): " + initialValue + "<br>");
Основные моменты о document.write():
- Пишет HTML или текст непосредственно на веб-страницу
- Может использоваться для отображения значений переменных
- Полезен для отладки и демонстрации операций с JavaScript
- Добавляет содержимое на страницу в порядке, в котором оно вызывается
Пример вывода в браузере:
Assignment Operator Demonstration
Initial Value: 10
After Basic Assignment (=): 20
After Addition Assignment (+=): 25
After Subtraction Assignment (-=): 22
After Multiplication Assignment (*=): 44
After Division Assignment (/=): 11
Резюме
В этом практическом занятии участники исследуют операторы присваивания в JavaScript с помощью практических заданий на HTML и JavaScript. Практическое занятие начинается с создания HTML-файла, который служит основой для демонстрации различных техник работы с операторами присваивания. Сначала рассматривается базовый оператор присваивания (=) для объявления и инициализации переменных разных типов данных, таких как строки, числа и логические значения.
В дальнейшем участники знакомятся с реализацией комбинированных операторов присваивания, такими как +=, -=, *= и /=, которые предоставляют краткий способ выполнения арифметических операций и обновления значений переменных. С помощью document.write() и console.log() участники могут проверить и визуализировать результаты этих операций присваивания, получая практическое понимание того, как эти операторы работают в JavaScript-программировании.
