СайтоСтроение

Программирование на JavaSсript.

JavaSсript ни в коем случае не путайте с языком программирования Java, не имеет к JavaScript никакого отношения.


Зачем нужен JavaScript?


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

Начало...

Тег «script» Программы на JavaScript могут быть вставлены в любое место HTML-документа внутри блока <script> ,,,</script>.

<!DOCTYPE HTML>
    <html>
      <body>
       ....................
       HTML-код перед скриптом...
       ....................
       <script>
          alert( 'Привет, мир!' );
       </script>
       ....................
       HTML-код после скрипта.
       ....................
      </body>
    </html>

Коментарии

// Этот комментарий занимает всю строку
/* Пример с двумя сообщениями. Это - многострочный комментарий. */

Строгий режим

На протяжении долгого времени JavaScript развивался без проблем с обратной совместимостью. Новые функции добавлялись в язык, в то время как старая функциональность не менялась. Преимуществом данного подхода было то, что существующий код продолжал работать. А недостатком – что любая ошибка или несовершенное решение, принятое создателями JavaScript, застревали в языке навсегда. Так было до 2009 года, когда появился ECMAScript 5 (ES5). Он добавил новые возможности в язык и изменил некоторые из существующих. Чтобы устаревший код работал, как и раньше, по умолчанию подобные изменения не применяются. Поэтому нам нужно явно их активировать с помощью специальной директивы: "use strict".
В строгом режиме нельзя:
использовать переменные без их объявления;
дублировать имена свойств в объектах;
дублировать параметры функций;
удалять переменные, функции и аргументы;
использовать зарезервированные слова;
использовать устаревшие конструкции.

Введение

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

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

Переменные

Переменная – это «именованное хранилище» для данных. Мы можем использовать переменные для хранения товаров, посетителей и других данных.

Переменные в JavaScript

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

Объявление переменной

Для объявления переменной используются ключевые слова var, let и const. Каждый из них имеет своё назначение и особенности.

var

Ключевое слово var используется ещё с ранних версий JavaScript. Оно создаёт глобальные переменные вне функций и локальные внутри них. Одна из особенностей var заключается в том, что оно допускает повторное объявление одной и той же переменной. var x = 10;
console.log(x); // выведет '10'
Однако var подвержено подъёму (hoisting), что означает, что даже если объявляется позже в коде, интерпретатор поднимает её объявление вверх, создавая неопределённое значение до момента присвоения.

let

С появлением стандарта ES6 было введено ключевое слово let, которое решает некоторые проблемы, присущие var. Главное отличие состоит в области видимости. Переменные, созданные через let, имеют блочную область видимости, то есть они видны только внутри блока {...}, в котором были созданы.
<script>
if (true) {
let y = 20;
}
console.log(y); // ошибка, y видна только внутри блока if
</script>
Также нельзя повторно объявлять одну и ту же переменную внутри одного блока.

const

Ключевое слово const предназначено для констант — значений, которые не меняются после первого присваивания. Попытка изменить такое значение приведёт к ошибке.
<script>
const PI = 3.14;
PI = 3; // выдаст ошибку, поскольку PI является константой
</script>
Хотя const предполагает неизменяемость, важно помнить, что речь идёт именно о ссылке на объект, а не о самом значении объекта. Например, массив или объект, созданный через const, можно изменять.
<script>
const obj = { name: 'John' };
obj.name = 'Jane'; // изменение свойства объекта разрешено
</script>

Именование переменных

</script>
Имена переменных в JavaScript подчиняются следующим правилам:
Имя должно начинаться с буквы, символа подчёркивания _ или знака доллара $.
После первой буквы могут идти цифры, буквы, знаки подчёркивания и доллара.
Регистр букв важен: myVar и MyVar — разные переменные.
Ключевые слова языка и зарезервированные названия (например, for, while) нельзя использовать в качестве имени переменной.
Хорошими практиками именования являются выбор осмысленных и коротких названий, а также соблюдение определённого стиля написания (camelCase, snake_case). Примеры использования переменных
Рассмотрим пример простого калькулятора:

let num1 = prompt('Введите первое число:');
let num2 = prompt('Введите второе число:');
num1 = parseFloat(num1);
num2 = parseFloat(num2);
let sum = num1 + num2;
alert(`Сумма чисел равна ${sum}`);

Здесь переменные хранят ввод пользователя, преобразуют строки в числа и вычисляют сумму двух чисел. Правильная работа с переменными — залог ясного и поддерживаемого кода. Выбор подходящего способа объявления (var, let, const) и внимательное отношение к областям видимости помогают избежать ошибок и делают программу проще для понимания и поддержки.

Типы данных

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

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

Примитивные типы данных представляют собой базовые элементы данных, которые не являются объектами и имеют фиксированный размер памяти. Они передаются по значению, а не по ссылке. К ним относятся:
1. Number
Числа в JavaScript представлены одним типом number, включая целые числа и числа с плавающей точкой.
Например:

let num = 42;
let pi = 3.14159;

2. String Строки используются для хранения текста. Строковые литералы заключены в одинарные ('), двойные ("), или обратные кавычки (``). Пример: let greeting = 'Привет'; let message = "Мир!"; let multiline = `Это многострочная строка.`;

3. Boolean Логический тип данных принимает всего два возможных значения: true и false. Используется для условий и логических операций: let isLoggedIn = true; let hasAccess = false;

4. Null Специальное значение, обозначающее отсутствие какого-либо объекта. Значение null используется специально, чтобы показать намеренное отсутствие значения: let user = null;

5. Undefined Значение присваивается переменным, которым ещё не было присвоено какое-то другое значение. Оно также возвращается функциями, которые ничего не возвращают явно: let variable; console.log(variable); // undefined

6. Symbol (ES6+) Символы введены начиная с ES6. Это уникальные и неизменяемые значения, используемые главным образом для идентификации уникальных свойств объектов: const id = Symbol('id');

7. BigInt (ES10+) Тип BigInt позволяет хранить целые числа произвольной длины, большие, чем обычные численные пределы JavaScript. Обозначается добавлением суффикса n: let bigNum = 123456789012345678901234567890n;

Объектные типы данных

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

1. Object Базовый тип данных для всех сложных структур данных в JavaScript. Может представлять любые структуры данных, такие как массивы, списки, карты и т.п.: let person = { name: 'Иван', age: 30, };

2. Array Специализированный объект для хранения упорядоченных коллекций элементов. Массивы могут содержать элементы любого типа: let fruits = ['яблоко', 'банан', 'груша'];

3. Function Функции в JavaScript также являются объектами первого класса. Их можно передавать в качестве аргументов другим функциям, возвращать из функций и сохранять в переменных: let greet = function() { console.log("Привет"); };

4. Date Объект Date представляет собой специальную структуру для работы с датами и временем: let now = new Date();

5. RegExp Регулярные выражения в JavaScript реализованы через объект RegExp. Используются для поиска и обработки строковых шаблонов: let pattern = /^[a-zA-Z]+$/;

Операции над типами данных

Для проверки типа данных используют оператор typeof, который возвращает строку с названием типа:
typeof 42; // "number"
typeof 'привет'; // "string"
typeof true; // "boolean"
typeof {}; // "object"
Однако, typeof null вернет "object", что является историческим наследием JavaScript.
[] instanceof Array; // true
new Date() instanceof Date; // true
Понимание типов данных в JavaScript крайне важно для написания качественного и надежного программного кода. Каждый разработчик должен понимать различия между примитивными и объектными типами, уметь правильно определять и проверять типы данных, чтобы избежать ошибок и повысить производительность приложений.

Преобразование типов

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

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

Прежде всего, давайте вспомним основные типы данных в JavaScript:

  • number — числовой тип (целые числа и дробные).
  • string — строковый тип.
  • boolean — булевый тип (true, false)./li>
  • null — специальный тип обозначающий отсутствие объекта.
  • undefined — специальное значение неопределенности переменной.
  • object — объектный тип (массивы, объекты и др.).
  • symbol — уникальный неизменяемый примитивный тип.

Строки в числа

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

let a = '5';
let b = 3;
console.log(a + b); // Результат: '53'

Здесь произошло конкатенация строки, поскольку операция сложения (+) интерпретируется как объединение строк, когда хотя бы один операнд является строкой. Если же вам действительно нужны арифметические вычисления, лучше воспользоваться функцией Number() или оператором + перед числом, чтобы явно преобразовать строку в число:

let a = Number('5');
let b = 3;
console.log(a + b); // Результат: 8

Или вот ещё вариант:

let a = +'5'; // Явное преобразование строки в число
let b = 3;
console.log(a + b); // Результат: 8

Числа в строки

Преобразование чисел в строки также часто встречается. Например, при выводе результатов на экран или записи значений в HTML-элементы. Можно явно вызвать метод .toString(), либо использовать оператор объединения с пустой строкой:
let num = 5;
let strNum = String(num); // Или num.toString();
console.log(strNum); // Результат: '5'

Булевые значения в числа и строки

Часто возникает необходимость проверить наличие какого-либо элемента или условия. Вот пример автоматического приведения boolean-значений:

let isTrue = true;
let boolToStr = '' + isTrue; // Автоматическое преобразование в строку
console.log(boolToStr); // Результат: 'true'
let boolToNum = Number(isTrue);
console.log(boolToNum); // Результат: 1

Null и undefined

Типы null и undefined представляют собой отсутствующие или неопределённые значения соответственно. Они ведут себя следующим образом при преобразовании:

  • Преобразуются в число — оба становятся равны нулю (0) или NaN.
  • Приводятся к строке — получаются строки "null" и "undefined".
  • Приведение к boolean — оба становятся ложью (false).
let value = null;
console.log(Number(value)); // Результат: 0
console.log(String(value)); // Результат: 'null'
console.log(Boolean(value)); // Результат: false

Важные моменты Избегайте неявного преобразования там, где возможно: Ошибочное поведение легко избежать, используя явные методы преобразования. Не полагайтесь на автоматику, особенно если это касается важных операций вроде проверки условий или математики. Используйте встроенные функции и операторы: Методы типа parseInt(), parseFloat(), Number(), Boolean(), String() предоставляют контроль над процессом преобразования и позволяют явно задать нужный тип данных.

Базовые операторы

Операторы в JavaScript классифицируются следующим образом:

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

Арифметические операторы используются для выполнения базовых математических операций над числами и строками.
+ Сложение
- Вычитание
* Умножение
/ Деление
% Остаток от деления
++ Инкремент (увеличение на 1)
-- Декремент (уменьшение на 1)
let a = 10;
let b = 5;
console.log(a + b); // Результат: 15

Операции присвоения

Операции присвоения позволяют сохранять значения в переменные.
= Простое присвоение
+= Присвоение со сложением
-= Присвоение с вычитанием
*= Присвоение с умножением
/= Присвоение с делением
%= Присвоение остатком
let x = 10;
x += 5; // Эквивалентно x = x + 5
console.log(x); // Результат: 15

Логические операторы


Логические операторы применяются для комбинирования условий в условных конструкциях (if, while).
&& И (логическое AND)
! НЕ (отрицание)
let age = 18;
if(age >= 18 && age <= 65){
console.log("Вы можете голосовать");
}

Операторы сравнения

Эти операторы сравнивают два выражения и возвращают булево значение (true или false). == Равно
=== Точно равно
!= Не равно
!== Точно не равно
> Больше
< Меньше
>= Больше или равно
<= Меньше или равно
let num1 = 10;
let num2 = '10';
console.log(num1 == num2); // true (тип данных игнорируется)
console.log(num1 === num2); // false (учитывается тип данных)

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

Браузерные события

Раздичают слнующие браузерные события:
События мыши:
click – происходит, когда кликнули на элемент левой кнопкой мыши (на устройствах с сенсорными экранами оно происходит при касании).
contextmenu – происходит, когда кликнули на элемент правой кнопкой мыши.
mouseover / mouseout – когда мышь наводится на / покидает элемент.
mousedown / mouseup – когда нажали / отжали кнопку мыши на элементе.
mousemove – при движении мыши.

События при нажатии на клавиши


С помощью события onkeydown (нажата клавиша клавиатуры) происходит выполнение соответствующего кода. Код нажатой клавиши получаем с помощью свойства keyCode.

Например:
document.onkeydown = function(e) {
if (e.keyCode == 27) {
alert('Была нажата клавиша ESC');
}
}

Например:
var KEY_ESC = 27;
document.onkeydown = function(e) {
if (e.keyCode == KEY_ESC) {
alert('Была нажата клавиша ESC');
}
}

Функции в языке Java Skript


Для создания функций в языке Java Script применяется следующая конструкция.

Например:
function f1(m1,m2,m3) {
var z = m1 * m2 - m3;
return (z); }

Где:
- function - зарезервированное ключевое слово обозначающее объявление функции.
- f1 - имя функции
- m1, m2 ... m3 - входные параметрв функции, может быть неограниченно много.
- { ... } - так называемое тело функции, где происходят необходимые действия.
- return () - необязательный оператор, применяется в случае вывода информации из функции.
С помощью оператора return можно вывести несколько переменных.
например return {w:x, y:h}; где x и h внутренние переменные

Функции для работы с текстом

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

Основные свойства и методы строки
• Свойство length возвращает количество символов в строке.
</script>
const str = 'Привет!';
console.log(str.length); // выведет число 7
</script>

• Преобразование регистра (toUpperCase, toLowerCase)
Методы позволяют изменить регистр всех букв в строке:
const name = 'Иван';
console.log(name.toUpperCase()); // ИВАН
console.log(name.toLowerCase()); // ивaн

• Поиск подстроки (indexOf, includes, startsWith, endsWith)
Эти методы помогают определить наличие подстроки внутри основной строки и её позицию:
indexOf() ищет первое появление подстроки и возвращает индекс начала.
lastIndexOf() аналогичен предыдущему методу, но ищет последнее вхождение.
includes() проверяет наличие указанной подстроки.
startsWith(), endsWith() определяют начало и конец строки соответственно.
const text = 'Это пример строки.';
console.log(text.indexOf('пример')); // 4
console.log(text.includes('строка')); // true
console.log(text.startsWith('Это')); // true
console.log(text.endsWith('.')); // true

• Обрезка пробелов (trim(), trimStart(), trimEnd())
Удаляют лишние пробелы перед началом и концом строки:
let phrase = ' привет мир ';
phrase = phrase.trim(); // удалит начальные и конечные пробелы
console.log(phrase); // 'привет мир'

• Извлечение части строки (slice, substring, substr)
Позволяют извлечь определённую область строки:
slice(start[, end]): извлекает символы начиная с индекса start и заканчивая (не включая) индексом end.
substring(start[, end]): аналогичный slice(), но индексы трактуются иначе, отрицательные значения невозможны.
substr(start[, length]): устаревший способ обрезки, но поддерживается браузерами.
const message = 'Привет, друг!';
console.log(message.slice(0, 6));// Привет
console.log(message.substring(8)); // друг!
console.log(message.substr(8, 4)); // друг

• Замена частей строки (replace, replaceAll)
Заменяют указанную подстроку новым текстом:
const greeting = 'Здравствуйте, друзья!';
const newGreeting = greeting.replace('друзья', 'товарищи');
console.log(newGreeting); // Здравствуйте, товарищи!
 Метод replaceAll() заменяет все совпадения, тогда как обычный replace меняет лишь первое найденное значение.

• Разбиение строки на массив (split)
Разделяет строку на отдельные элементы массива по указанному разделителю:
const sentence = 'яблоко груша лимон апельсин';
const fruitsArray = sentence.split(' ');
console.log(fruitsArray); // ['яблоко', 'груша', 'лимон', 'апельсин']

• Объединение элементов массива в строку (join)
Обратная операция метода split():
const array = ['Москва', 'Санкт-Петербург', 'Новосибирск'];
const citiesString = array.join(', '); // объединяем города запятой
console.log(citiesString); // Москва, Санкт-Петербург, Новосибирск

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

Функции для работы с массивами

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

• Создание и инициализация массивов
Самый простой способ создать массив:
// Создаем пустой массив
const emptyArray = [];
 // Инициализируем массив сразу несколькими элементами
const numbers = [1, 2, 3, 4];
 Также можно создавать массивы используя конструктор Array:
// Можно задать длину массива заранее
const arrayWithLength = new Array(5);
 // Или заполнить числами автоматически
const filledArray = Array.from({ length: 5 }, (_, i) => i + 1); // [1, 2, 3, 4, 5]

• Получение длины массива (length) Для определения количества элементов используется свойство length.
const colors = ["красный", "зеленый", "синий"];
console.log(colors.length); // выводит 3

• Добавление и удаление элементов:Метод push() Используется для добавления элемента в конец массива:
colors.push("желтый");
console.log(colors); // ["красный", "зеленый", "синий", "желтый"]

• Извлечение последнего элемента массива и уменьшение его размера: Метод pop().
const lastColor = colors.pop();
console.log(lastColor); // желтый
console.log(colors); // ["красный", "зеленый", "синий"]

• Помещени нового элемента в начало массива:Метод unshift().
colors.unshift("черный");
console.log(colors); // ["черный", "красный", "зеленый", "синий"]

• Удаление первого элемента массива:Метод shift()
const firstColor = colors.shift();
console.log(firstColor); // черный
console.log(colors); // ["красный", "зеленый", "синий"]

• Изменение структуры массива;Метод splice()
Один из самых универсальных инструментов для изменения содержимого массива. Позволяет вставлять новые элементы, удалять существующие или комбинировать оба действия одновременно.
const students = ["Анна", "Борис", "Виктор"];
students.splice(1, 1, "Григорий"); // Удаляем второго студента ("Бориса") и добавляем Григория
console.log(students); // ["Анна", "Григорий", "Виктор"]

• Создание новыого массиа путем объединения двух или более массивов:Метод concat()
const moreStudents = ["Дмитрий", "Елена"];
const allStudents = students.concat(moreStudents);
console.log(allStudents); // ["Анна", "Григорий", "Виктор", "Дмитрий", "Елена"]

• Проход по массиву и фильтрация:Метод forEach()
Применяется для итерации по каждому элементу массива:
allStudents.forEach((student) => console.log(student));

• Преобразование каждого элемента массива согласно заданному преобразованию:Метод map()
const uppercaseNames = allStudents.map((name) => name.toUpperCase());
console.log(uppercaseNames); // ["АННА", "ГРИГОРИЙ", "ВИКТОР", "ДМИТРИЙ", "ЕЛЕНА"]

• Возвращение нового массива, содержащего только те элементы, которые удовлетворяют условию фильтра:Метод filter()
const shortNames = allStudents.filter((name) => name.length <= 5);
console.log(shortNames); // ["Анна", "Виктор"]

• Последовательное вычисление какого-либо результата, проходя по всему массиву:Метод reduce()
const sum = [1, 2, 3, 4].reduce((acc, currentValue) => acc + currentValue, 0);
console.log(sum); // 10

• Проверка условий.Метод every() Проверяет, выполняются ли условия для каждого элемента массива:
const evenNumbers = [2, 4, 6, 8];
const isEven = evenNumbers.every((num) => num % 2 === 0);
console.log(isEven); // true

• Определяет, существует хотя бы один элемент, соответствующий условиям проверки:Метод some()
const hasOddNumber = evenNumbers.some((num) => num % 2 !== 0);
console.log(hasOddNumber); // false

• Работа с сортировкой:Метод sort()
Сортирует элементы массива по алфавиту или численно:
const sortedStudents = allStudents.sort();
console.log(sortedStudents); // ["Анна", "Виктор", "Григорий", "Дмитрий", "Елена"]
 Чтобы отсортировать числа правильно, используйте callback-функцию сравнения:
const numericArray = [3, 1, 4, 1, 5, 9];
numericArray.sort((a, b) => a - b);
console.log(numericArray); // [1, 1, 3, 4, 5, 9]

•Копирование и работа с частями массива:Метод slice()
Делает копию указанного диапазона элементов:
const slicedArray = numericArray.slice(1, 4); // берем элементы с первого по третий включительно
console.log(slicedArray); // [1, 3, 4]

•Проверяет наличие определенного элемента в массиве:Метод includes()
console.log(evenNumbers.includes(4)); // true

•Ищет первый элемент, удовлетворяющий условию:Метод find() const foundStudent = allStudents.find((name) => name.startsWith("Ан")); console.log(foundStudent); // Анна

•Возвращает индекс первого появления элемента в массиве:Метод indexOf() console.log(allStudents.indexOf("Виктор")); // 2

Итоговая таблица популярных методов
push() Добавляет элемент в конец массива
pop() Убирает последний элемент
unshift() Добавляет элемент в начало
shift() Убирает первый элемент
splice() Меняет структуру массива
concat() Соединяет два массива/a>
forEach() Перебирает элементы
map() Применяет операцию ко всем элементам
filter() Фильтрует элементы
reduce() Агрегирует значения
every() Проверяет условие для всех элементов
some() Проверяет условие хотя бы для одного элемента
sort() Сортирует массив
find() Возвращает первый подходящий элемент
indexOf() Индекс первого подходящего элемента
includes() Есть ли указанный элемент в массиве

Таким образом, JavaScript предоставляет мощный арсенал функций для удобной работы с массивами, позволяя быстро изменять их содержимое, проверять условия, сортировать, копировать и обрабатывать большие объемы данных с минимальными усилиями.

Объектная модель документа «Document Object Model» (DOM)

Основой HTML-документа являются теги.

В соответствии с объектной моделью документа («Document Object Model», коротко DOM), каждый HTML-тег является объектом. Вложенные теги являются «детьми» родительского элемента. Текст, который находится внутри тега, также является объектом.
Все эти объекты доступны при помощи JavaScript, мы можем использовать их для изменения страницы.
Например, document.body – объект для тега <body>.

DOM (Document Object Model) — это объектная модель документа, представляющая структуру HTML-документа в виде дерева узлов. Каждый узел представляет собой отдельный элемент страницы, будь то тег <div>, атрибут class или даже содержимое текста внутри элемента. Для взаимодействия с элементами страницы JavaScript предоставляет удобные методы доступа к узлам DOM. Рассмотрим основные способы доступа к элементам на странице. Основные методы доступа к элементам DOM
1. Метод document.getElementById() Этот метод позволяет обратиться к одному уникальному элементу по значению атрибута id. Атрибут id должен быть уникальным на всей странице.
const element = document.getElementById('myUniqueID');
<div id="mainDiv">Привет мир!</div>
<script>
const divElement = document.getElementById("mainDiv");
console.log(divElement.textContent); // Выведет 'Привет мир!'
</script>
2. Метод document.querySelector() и document.querySelectorAll()
Эти методы позволяют выбрать элементы по CSS-селекторам, таким как классы, атрибуты, псевдоклассы и т.п.
querySelector: возвращает первый найденный элемент, соответствующий селектору.
querySelectorAll: возвращает список всех элементов, соответствующих указанному селектору.
<div class="box"></div>
<div class="box"></div>
<script>
 const firstBox = document.querySelector('.box'); // Первый элемент класса box
 const allBoxes = document.querySelectorAll('.box'); // Все элементы класса box
</script>

3. Методы семейства getElementsBy...
Существуют также старые, но широко используемые методы для выбора группы элементов по имени тега или классу:
getElementsByTagName: выбирает элементы по названию тега.
getElementsByClassName: выбирает элементы по классу.
<p class="paragraph">Абзац №1</p>
<p class="paragraph">Абзац №2</p>
<script>
const paragraphs = document.getElementsByClassName('paragraph');
for(let i = 0; i < paragraphs.length; i++) {
console.log(paragraphs[i].innerText);
}
</script>

Манипуляции с выбранными элементами

Получив доступ к нужному элементу, мы можем изменять его свойства, стиль, контент и поведение. Например:
element.style.backgroundColor = '#ffd700';// Изменение стиля элемента
element.innerHTML += 'Новый текст.';// Добавление нового содержимого
element.addEventListener('click', function(event){alert('Вы кликнули!');});// Обработка события клика


 Заключение

Доступ к элементам DOM является фундаментальной частью разработки веб-приложений на JavaScript. Описанные выше методы предоставляют широкие возможности для манипуляции страницами и реализации интерактивных решений. Правильное использование методов доступа позволит вам создавать динамичные и отзывчивые интерфейсы, обеспечивая качественное взаимодействие пользователей с вашим сайтом.

Объект document в JavaScript играет ключевую роль в работе с веб-документами. Это глобальный объект, предоставляющий интерфейс для доступа к содержимому и структуре текущего HTML-документа. Через этот объект осуществляется большинство операций с документом, включая получение и изменение элементов, обработку событий и выполнение запросов к серверу.

Вот основные концепции и методы объекта document. Свойства объекта document
document.title: Получает или устанавливает заголовок документа (<title>).
document.body: Возвращает корневой элемент тела документа (<body>).
document.head: Предоставляет доступ к контейнеру метаданных (<head>).
document.documentElement: Корневой элемент всего документа (<html>).
document.URL: Текущий адрес страницы.
document.referrer: Адрес предыдущей страницы, с которой пришел посетитель.

Важнейшие методы для доступа к элементам DOM
getElementById(id) Возвращает элемент по заданному id.
querySelector(selector) Возвращает первый элемент, подходящий под указанный CSS-селектор.
querySelectorAll(sel) Возвращает коллекцию всех элементов, подходящих под указанный CSS-селектор.
getElementsByTagName(tag) Возвращает коллекцию элементов с указанным именем тега.
getElementsByClassName(class) Возвращает коллекцию элементов с указанным классом.
createElement(tag) Создает новый элемент указанного типа.
Примеры использования метода доступа к элементам
Выбор элемента по ID
 let myElement = document.getElementById('myDiv');
console.log(myElement.textContent); // Получаем текст элемента с id='myDiv'
Выбор первого элемента по CSS-классу
 let firstItem = document.querySelector('.item'); firstItem.style.color = 'red'; // Меняем цвет текста выбранного элемента
Выбрать все элементы с определенным классом
 let itemsList = document.querySelectorAll('.list-item'); itemsList.forEach(item => item.classList.add('highlight')); // Добавляем класс ко всем элементам
Создание новых элементов
Метод createElement() создает новые элементы в памяти браузера. После создания элемента его нужно добавить в документ, используя методы вроде appendChild() или insertBefore().
let newDiv = document.createElement('div');
newDiv.id = 'new-div';
newDiv.textContent = 'Это новый элемент!';
document.body.appendChild(newDiv); // Добавляем созданный элемент в тело документа
 Работа с текстом и содержанием

Методы для изменения внутреннего содержания элемента: innerHTML: Полностью заменяет внутренний HTML-код элемента. textContent: Устанавливает или получает текстовое содержание элемента. let paragraph = document.querySelector('#intro'); paragraph.textContent = 'Привет миру!'; // Меняем текст абзаца

Работа с объектом document является основой практически любого современного веб-приложения. Используя встроенные методы, разработчик может легко манипулировать элементами DOM, создавая гибкую и адаптивную систему взаимодействий на стороне клиента. Умение эффективно обращаться с методами объекта document значительно упрощает разработку сложных веб-интерфейсов и повышает производительность приложения.

Глобальные объекты доступны везде в JavaScript-коде и обеспечивают базовые функциональные возможности языка. window: Представляет окно браузера и окружающее приложение. Является главным объектом окружения клиентского JavaScript. navigator: Содержит информацию о браузере пользователя (например, версию и тип устройства). screen: Информация о дисплее устройства (ширина экрана, высота и т.д.). history: Управляет историей навигации пользователя в браузере. Math: Предлагает математические константы и функции (например, Math.PI, Math.sqrt(), Math.random()). Date: Используется для работы с датами и временем. Array: Базовый объект массива для хранения коллекций элементов. String, Number, Boolean: Типы примитивных данных, представленные в форме объектов для расширенных возможностей (методов). RegExp: Регулярные выражения для поиска и замены строковых шаблонов. Error: Структура ошибок и исключительных ситуаций в JavaScript. Прочие стандартные объекты Кроме глобальных объектов, в JavaScript используются и другие специализированные объекты, которые помогают решать разные задачи программирования: JSON: Для сериализации и десериализации данных формата JSON. Promise: Объект асинхронных операций, используется для управления последовательностью действий. Set, Map: Коллекционные структуры данных для уникальных значений и ассоциативных массивов соответственно. Proxy: Инструмент для перехвата и модификации операций с объектами. WeakMap, WeakSet: Специализированные версии Map и Set, использующие слабые ссылки. FormData: Используется для отправки форм HTTP-запросов. XMLHttpRequest: Механизм для отправки AJAX-запросов на сервер. Blob, FileReader: Объекты для работы с файлами и бинарными данными. CanvasRenderingContext2D: Контекст рисования для работы с Canvas API. WebSocket: Поддерживает двунаправленную связь с сервером. Библиотеки и фреймворки Многие библиотеки и фреймворки добавляют собственные типы объектов поверх стандартной функциональности JavaScript. Некоторые распространенные примеры: jQuery: Распространённая библиотека, позволяющая управлять DOM и облегчающая процесс написания кроссбраузерного кода. React.Component: Компоненты React, которые представляют части UI в приложении. Vue.component: Аналогично компонентам Vue.js. Axios.AxiosInstance: Объект для совершения HTTP-запросов в библиотеке Axios.

Создание, вставка и удаление элементов

Создание элемента в JavaScript выполняется с помощью метода createElement:

document.createElement(tagName, [options]);
где:
tagName - Имя тега;
options - опции;
Например:
const elem = document.createElement('div');
Создали блок DIV

Создание гиперссылки

Создание элемента в JavaScript выполняется с помощью метода href:
Например:
onclick = "document.location.href= '#Hiper';"   
Создали гиперссылкe на той же странице
< Событие > = "document.location.href= '';"
Конструкция в общем виде

Передача данных

Передача данных методом GET:
Например:
Создаём переход на другую страницу по гиперссылкe onclick = "document.location.href= 'Hiper.php?Data1=123'&Data2=456& ... &Data_n=NNN"

Передача данных методом POST:
Например:
onclick = "document.location.href= '#Hiper';"   
Создали гиперссылкe на той же странице
< Событие > = "document.location.href= '';"
Конструкция в общем виде

Размер экрана

Окно браузера (внутреннее):
ширина - > window.innerWidth,
высота - > window.innerHeight

Окно браузера (внешнее)
ширина - > window.outerWidth,
высота - > window.outerHeight

Экран устройства
ширина - > screen.width,
высота - > screen.heightt

Видимая область без полос прокрутки
ширина - > document.documentElement.clientWidth
высота - > document.documentElement.clientHeight