Введение
В этом лабе участники изучат фундаментальные концепции определения и использования переменных в JavaScript, что является важкой навыком для веб-разработки. Лаб-руководство помогает ученикам понять роль JavaScript в создании интерактивных веб-опытов, настроить HTML-окружение и овладеть методами объявления и манипуляции переменными.
Участники научатся объявлять переменные с использованием ключевого слова var, присваивать им значения и динамически отображать их на веб-страницах. Следуя пошаговым инструкциям, студенты получат практический опыт в основных принципах программирования JavaScript, включая соглашения по именованию переменных и базовые методы скриптования, которые формируют основу современной веб-разработки.
Разберитесь в JavaScript и его роли в веб-разработке
В этом шаге вы узнаете о JavaScript и его важной роли в веб-разработке. JavaScript - это мощный и универсальный язык программирования, который приносит интерактивность и динамичность в веб-сайты.
JavaScript - это клиент-side язык сценариев, используемый в основном в веб-браузерах. Он позволяет разработчикам создавать интерактивные и динамические веб-страницы, манипулируя HTML и CSS, обрабатывая события пользователя и выполняя сложные вычисления в режиме реального времени.
Основные характеристики JavaScript включают:
- Запускается непосредственно в веб-браузерах
- Позволяет создавать интерактивные веб-опыты
- Может динамически изменять HTML и CSS
- Поддерживает событийно-ориентированное программирование
- Используется как для фронтенд-, так и для бэкенд-разработки (с использованием Node.js)
Вот простой пример, демонстрирующий базовую функциональность JavaScript:
<!doctype html>
<html>
<head>
<title>JavaScript Introduction</title>
</head>
<body>
<h1 id="greeting">Hello, Web Development!</h1>
<script>
// JavaScript может динамически изменять содержимое страницы
document.getElementById("greeting").innerHTML = "Welcome to JavaScript!";
</script>
</body>
</html>
Результат выполнения примера в браузере:
Welcome to JavaScript!
Этот пример показывает, как JavaScript может мгновенно изменять содержимое веб-страницы, демонстрируя его силу при создании динамических веб-опытов.
Настройте HTML-файл для JavaScript
В этом шаге вы узнаете, как создать HTML-файл, в котором можно включать и выполнять код JavaScript. HTML предоставляет структуру веб-страниц, а JavaScript добавляет интерактивность и динамичность.
Во-первых, перейдите в директорию проекта:
cd ~/project
Создайте новый HTML-файл с именем variables.html с использованием WebIDE:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>JavaScript Variables</title>
</head>
<body>
<h1>Learning JavaScript Variables</h1>
<!-- В следующих шагах мы добавим JavaScript здесь -->
<script>
// Здесь будет код JavaScript
</script>
</body>
</html>
Основные моменты о структуре HTML:
<!DOCTYPE html>объявляет, что это документ HTML5- Теги
<script>- это место, где будет писаться код JavaScript - Вы можете поместить тег
<script>в раздел<head>или<body>
Результат выполнения примера при открытии в браузере:
Learning JavaScript Variables
Тег <script> позволяет писать JavaScript непосредственно в HTML-файле или ссылаться на внешний JavaScript-файл. В следующих шагах мы добавим код JavaScript в этот файл для работы с переменными.
Объявите переменные с использованием ключевого слова var
В этом шаге вы узнаете, как объявлять переменные в JavaScript с использованием ключевого слова var. Переменные - это контейнеры для хранения значений данных, которые можно использовать и манипулировать в вашем коде.
Откройте файл variables.html в WebIDE и измените раздел <script> для добавления объявлений переменных:
<!doctype html>
<html lang="en">
<body>
<script>
// Объявление переменных с использованием ключевого слова var
var firstName = "John";
var age = 25;
var isStudent = true;
// Также можно объявить переменную без начального значения
var lastName;
</script>
</body>
</html>
Основные моменты о объявлении переменных:
varиспользуется для объявления переменных в JavaScript- Переменные могут хранить разные типы данных:
- Строки (текст):
"John" - Числа:
25 - Булевы значения:
trueилиfalse
- Строки (текст):
- Можно объявить переменную без начального значения
Для того, чтобы увидеть, как работают переменные, можно использовать console.log() для отображения их значений:
<script>
var firstName = "John";
console.log(firstName); // Выводит: John
</script>
Результат выполнения примера в консоли разработчика браузера:
John
Назначьте и отобразите значения переменных
В этом шаге вы узнаете, как назначать значения переменным и отображать их с использованием различных методов в JavaScript. Основываясь на предыдущем шаге, мы исследуем, как работать с значениями переменных.
Откройте файл variables.html и обновите раздел <script> следующим кодом:
<!doctype html>
<html lang="en">
<body>
<div id="output"></div>
<script>
// Объявление и присвоение переменным значений
var firstName = "John";
var age = 25;
var isStudent = true;
// Переприсваивание значений переменным
age = 26;
firstName = "Jane";
// Отображение значений с использованием console.log()
console.log("Name: " + firstName);
console.log("Age: " + age);
console.log("Is Student: " + isStudent);
// Отображение значений на веб-странице
var outputElement = document.getElementById("output");
outputElement.innerHTML =
"Name: " +
firstName +
"<br>Age: " +
age +
"<br>Is Student: " +
isStudent;
</script>
</body>
</html>
Основные моменты о назначении и отображении переменных:
- Используйте
=для назначения или переприсваивания значений переменным console.log()отображает значения в консоли разработчика браузераdocument.getElementById().innerHTMLможет отображать значения непосредственно на веб-странице- Можно конкатенировать строки и переменные с использованием
+
Результат выполнения примера в консоли разработчика браузера:
Name: Jane
Age: 26
Is Student: true
Результат выполнения примера на веб-странице:
Name: Jane
Age: 26
Is Student: true
Практикуйте в правилах именования переменных
В этом шаге вы узнаете о лучших практиках именования переменных в JavaScript. Хорошая именование переменных имеет решающее значение для написания чистого, читаемого и поддерживаемого кода.
Откройте файл variables.html и обновите раздел <script> следующими примерами:
<!doctype html>
<html lang="en">
<body>
<div id="output"></div>
<script>
// Хорошие правила именования переменных
// Используйте camelCase для имен переменных
var firstName = "John";
var lastName = "Doe";
var age = 25;
var isStudent = true;
// Описательные и значащие имена
var totalPrice = 99.99;
var discountPercentage = 10;
var calculatedDiscount = totalPrice * (discountPercentage / 100);
// Избегайте односимвольных имен переменных (кроме особых случаев, таких как циклы)
var x = 10; // Плохо
var width = 10; // Хорошо
// Отобразите результаты
console.log("Full Name: " + firstName + " " + lastName);
console.log("Discounted Price: $" + calculatedDiscount);
var outputElement = document.getElementById("output");
outputElement.innerHTML =
"Full Name: " +
firstName +
" " +
lastName +
"<br>Age: " +
age +
"<br>Discounted Price: $" +
calculatedDiscount;
</script>
</body>
</html>
Основные правила именования переменных:
- Используйте camelCase (например,
firstName,lastName) - Выбирайте описательные и значащие имена
- Избегайте односимвольных имен переменных
- Будьте последовательны в стиле именования
- Используйте существительные для имен переменных
- Используйте осмысленные префиксы, такие как
isдля булевых переменных
Результат выполнения примера в консоли разработчика браузера:
Full Name: John Doe
Discounted Price: $9.999
Результат выполнения примера на веб-странице:
Full Name: John Doe
Age: 25
Discounted Price: $9.999
Резюме
В этом практическом занятии участники исследуют фундаментальные концепции переменных в JavaScript и их роль в веб-разработке. Практическое занятие начинается с представления JavaScript как мощного клиентского языка сценариев, который позволяет создавать интерактивные и динамические веб-опыты, подчеркивая его способность манипулировать HTML и CSS, обрабатывать пользовательские события и выполнять实时ные вычисления.
Пошаговым подходом ученики настраивают HTML-файл и начинают практиковать объявление переменных с использованием ключевого слова var, понимая важность правильных правил именования переменных и как назначать и отображать значения переменных. Практические упражнения дают реальные представления о создании динамического веб-контента, демонстрируя многосторонность JavaScript в преобразовании статических веб-страниц в интерактивные и привлекательные пользовательские опыты.
