Определение и использование переменных в JavaScript

Введение

В этом лабе участники изучат фундаментальные концепции определения и использования переменных в 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 в преобразовании статических веб-страниц в интерактивные и привлекательные пользовательские опыты.