Основы JavaScript: что это такое, основы синтаксиса и т.д.

Что такое JavaScript и где его используют

JavaScript — это язык программирования, который используется для добавления интерактивных элементов на веб-страницы. С его помощью можно создавать анимации, формы, реагирующие на действия пользователя, игры и многое другое.

• JavaScript используется на большинстве веб-сайтов в Интернете.
• Он работает прямо в браузере, что позволяет изменять содержимое страницы без перезагрузки.
• Он часто используется вместе с HTML и CSS.

Вы, вероятно, сталкивались с JavaScript, даже не подозревая об этом. Например, когда нажимаете на кнопку и появляется всплывающее сообщение, или когда на сайте автоматически обновляется информация без необходимости обновлять страницу — это JavaScript в действии!

История JavaScript и его роль в современном вебе

JavaScript был создан Бренданом Айком за 10 дней в 1995 году и изначально назывался Mocha. Позже он получил название LiveScript, а затем был переименован в JavaScript, чтобы подчеркнуть его связь с Java, популярным в то время языком программирования.

Его первоначальная задача была в том, чтобы добавлять небольшие интерактивные элементы на страницы. Однако с годами язык развивался и стал одним из самых мощных инструментов для веб-разработки. Сегодня JavaScript используется не только для создания динамичных сайтов, но и для разработки мобильных приложений и серверных решений.

Основы синтаксиса JavaScript

Прежде чем мы начнем использовать JavaScript для добавления интерактивности на сайты, давайте познакомимся с его основами. Любой язык программирования имеет свой синтаксис, или набор правил, которые определяют, как пишутся и выполняются команды.

Переменные и типы данных

Переменные — это «коробки», в которые мы можем положить информацию, чтобы затем использовать её. В JavaScript переменные можно создавать с помощью ключевых слов let, const, и var. Например:

let name = "Иван"; 
const age = 30;

Типы данных, которые можно хранить в переменных, бывают разными. Например:

• Числа (например, 42 или 3.14)
• Строки (например, «Привет, мир!»)
• Булевы значения (например, true или false)

Пример:

var имя = "Иван";
let возраст = 25;
const PI = 3.14159;

В этом примере мы создали три переменные: `имя`, `возраст` и `PI`. Переменная `имя` хранит строковое значение «Иван», `возраст` — числовое значение 25, а `PI` — константу с числовым значением 3.14159.

Операторы

Операторы используются для выполнения действий над переменными. Существует несколько типов операторов:

• Арифметические операторы: `+`, `-`, `*`, `/`, `%` (остаток от деления).
• Логические операторы: `&&` (И), `||` (ИЛИ), `!` (НЕ).
• Операторы сравнения: `==`, `!=`, `>`, `<`, `>=`, `<=`.
• Операторы присваивания: `=`, `+=`, `-=`, `*=`, `/=`, `%=`.

Например, с помощью операторов сложения (+) или умножения (*) можно производить математические вычисления:

let x = 5 + 3; // x будет равен 8

Прочие примеры:

let sum = 5 + 10; // Арифметический оператор
let isEqual = (5 == 5); // Оператор сравнения
let isTrue = (5 > 3 && 2 < 4); // Логический оператор

Условные операторы

Условные операторы позволяют выполнять определенные действия в зависимости от условия.

Самый распространенный условный оператор if.

Пример:

var возраст = 20;

if (возраст >= 18) {
  console.log("Вы совершеннолетний");
} else {
  console.log("Вы несовершеннолетний");
}

В этом примере мы проверяем, больше ли возраст 18. Если да, то выводим сообщение «Вы совершеннолетний», иначе — «Вы несовершеннолетний».

Циклы

Циклы позволяют повторять определенные действия несколько раз.

Примеры циклов:

• for: цикл, который выполняется заданное количество раз.
• while: цикл, который выполняется до тех пор, пока условие истинно.
• do while: цикл, который выполняется хотя бы один раз, а затем до тех пор, пока условие истинно.

Пример цикла for:

for (var i = 0; i < 5; i++) {
  console.log(i);
}

Этот код выведет на экран числа от 0 до 4.

Функции и их использование

Функции в JavaScript — это блоки кода, которые можно выполнять многократно. Это как рецепт, который можно использовать снова и снова для выполнения однотипных задач.

Как создать функцию в JavaScript

Для создания функции нужно использовать ключевое слово function, затем имя функции и параметры, если они нужны. Пример:

function sayHello() {
  alert("Привет, мир!");
}

Эта функция, когда будет вызвана, выведет сообщение «Привет, мир!».

Вызов функции и параметры

Чтобы вызвать функцию, нужно просто написать её имя и поставить скобки:

sayHello(); // Вызовет функцию

Функции также могут принимать параметры — это значения, которые передаются внутрь функции для работы. Например:

function greet(name) {
  alert("Привет, " + name + "!");
}

greet("Иван"); // Выведет "Привет, Иван!"

В этом примере мы создали функцию `приветствие`, которая принимает имя в качестве аргумента и выводит приветствие на экран. Затем мы вызвали эту функцию с аргументом «Иван».

Дополнительные темы

Помимо основ, JavaScript предлагает множество дополнительных возможностей, которые позволяют создавать более сложные и интересные веб-приложения.

Массивы

Массивы — это упорядоченные коллекции данных.

Пример:

var числа = [1, 2, 3, 4, 5];

В этом примере мы создали массив `числа`, который содержит пять числовых элементов: 1, 2, 3, 4 и 5.

Объекты

Объекты — это неупорядоченные коллекции данных, которые представляют собой пары ключ-значение.

Пример:

var человек = {
  имя: "Иван",
  возраст: 25,
  профессия: "Программист"
};

В этом примере мы создали объект `человек`, который содержит три свойства: `имя`, `возраст` и `профессия`.

Строки

Строки — это последовательности символов.

Пример:

var приветствие = "Привет, мир!";

В этом примере мы создали строковую переменную `приветствие`, которая содержит строку «Привет, мир!».

Взаимодействие с элементами HTML через JavaScript

Одной из сильных сторон JavaScript является его способность изменять элементы HTML на странице. Например, можно изменить текст на кнопке или скрыть картинку.

Использование document.getElementById и querySelector

Чтобы JavaScript мог «увидеть» элементы страницы, используется метод document.getElementById, который находит элемент по его id. Например:

let header = document.getElementById("myHeader");
header.innerText = "Новый заголовок";

С помощью querySelector можно находить элементы по любым селекторам CSS:

let button = document.querySelector(".myButton");
button.style.backgroundColor = "blue";

Изменение содержимого и стилей элементов

Вы можете легко изменять текст, HTML-код и стили элементов. Например, чтобы изменить текст элемента:

document.getElementById("example").innerText = "Обновленный текст";

Работа с событиями в JavaScript

События — это действия, которые происходят на странице и на которые JavaScript может реагировать. Пример событий: клик мышью, ввод текста, наведение курсора.

События клика, наведения, ввода данных

События позволяют сделать веб-страницу более интерактивной. Например, событие клика:

let button = document.querySelector(".myButton");
button.addEventListener("click", function() {
  alert("Кнопка нажата!");
});

Пример добавления интерактивности на сайт

Давайте рассмотрим пример создания простого интерактивного элемента. Предположим, что на странице есть кнопка, которая при нажатии изменяет цвет фона страницы:

<button id="changeColor">Изменить цвет фона</button>

<script>
  let button = document.getElementById("changeColor");
  button.addEventListener("click", function() {
    document.body.style.backgroundColor = "lightblue";
  });
</script>

В этом примере, когда пользователь нажимает на кнопку, цвет фона страницы изменяется на светло-голубой.

Продвинутые темы JavaScript

Асинхронное программирование

Асинхронное программирование позволяет выполнять операции, не блокируя основной поток выполнения. Основные механизмы включают callback функции, промисы и async/await.

Пример:

async function fetchData() {
let response = await fetch('https://api.example.com/data');
let data = await response.json();
console.log(data);
}
fetchData();

Работа с DOM (Document Object Model)

DOM (Document Object Model) — это модель документа, которая представляет HTML-документ в виде иерархической структуры. JavaScript может взаимодействовать с DOM, чтобы изменять содержимое веб-страницы, реагировать на события и многое другое.

Выбор элементов

Чтобы взаимодействовать с элементами на веб-странице, нужно сначала их выбрать.

Примеры методов выбора элементов:

• getElementById: выбирает элемент по его ID.
• getElementsByTagName: выбирает все элементы с заданным тегом.
• getElementsByClassName: выбирает все элементы с заданным классом.
• querySelector: выбирает первый элемент, соответствующий заданному селектору.
• querySelectorAll: выбирает все элементы, соответствующие заданному селектору.

Пример:

var заголовок = document.getElementById("мойЗаголовок");
заголовок.innerHTML = "Новый заголовок";

В этом примере мы выбираем элемент с ID `мойЗаголовок` и меняем его содержимое на «Новый заголовок».

Изменение содержимого

JavaScript позволяет изменять содержимое элементов на веб-странице.

Примеры методов изменения содержимого:

• innerHTML: изменяет содержимое элемента.
• textContent: изменяет текстовое содержимое элемента.
• setAttribute: добавляет или изменяет атрибут элемента.
• removeAttribute: удаляет атрибут элемента.

События

События — это действия, которые происходят на веб-странице, например, клик мышью, нажатие клавиши, загрузка страницы. JavaScript может реагировать на события, выполняя определенные действия.

Пример:

var кнопка = document.getElementById("мояКнопка");

кнопка.addEventListener("click", function() {
  alert("Вы нажали на кнопку!");
});

В этом примере мы добавляем обработчик события `click` для кнопки с ID `мояКнопка`. Когда пользователь нажимает на кнопку, выводится сообщение «Вы нажали на кнопку!».

Пример:

let element = document.getElementById('myElement');
element.textContent = "Новый текст";

ООП (Объектно-ориентированное программирование)

ООП позволяет моделировать сложные системы с помощью объектов. В JavaScript объекты могут наследовать свойства и методы от других объектов.

Пример:

class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(Привет, меня зовут ${this.name}!);
}
}
let vasya = new Person("Вася", 25);
vasya.greet();

Полезные ресурсы для дальнейшего изучения

Существует множество ресурсов, которые помогут вам изучить JavaScript:

• Книги: см. Учебники по JavaScript, которые стоит прочитать;
• Онлайн-курсы: Нетодология, Skillbox, Kata Academy, Udemy, Stepik, предлагают бесплатные и платные курсы по FRONTEND-разработке (которые включают HTML5, CSS3, JavaScript).;

Практические примеры и проекты

Практика — лучший способ улучшить навыки программирования. Рекомендуется регулярно создавать проекты и участвовать в сообществах разработчиков.

Простые проекты для начинающих

• Калькулятор на JavaScript: простой интерфейс для выполнения арифметических операций.
• Таймер обратного отсчета: показывает оставшееся время до определенной даты.

Проекты средней сложности

• To-Do list: приложение для управления задачами.
• Галерея изображений: отображает и фильтрует изображения.

Сложные проекты

• SPA (Single Page Application): одностраничное приложение с использованием фреймворка (например, React или Angular).

Заключение

JavaScript — это мощный и универсальный язык программирования, который открывает перед вами широкие возможности для создания интерактивных и динамических веб-приложений.

Начните с изучения основ, а затем постепенно углубляйтесь в более сложные темы.

Не бойтесь экспериментировать и создавать собственные проекты.

Удачи в изучении JavaScript!