M3 | WebDev

🧩 Понимание DOM: Управление веб-страницей изнутри 🧩

📜 Что такое DOM?

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

🌳 Структура DOM:

Представьте вашу веб-страницу как дерево:

- Корневой элемент: <html> — вершина дерева.
- Дочерние элементы: <head>, <body> — ветви, идущие от корня.
- Листья: Текст и другие вложенные элементы.

<html>
  <head>
    <title>Заголовок страницы</title>
  </head>
  <body>
    <h1>Заголовок</h1>
    <p>Текстовый параграф</p>
  </body>
</html>

На этой структуре построено всё взаимодействие с элементами страницы.

🔧 Работа с DOM в JavaScript:

1. Доступ к элементам
Вы можете получить доступ к элементам страницы с помощью методов, таких как getElementById, getElementsByClassName, querySelector, и querySelectorAll.

   const header = document.getElementById('main-header');
   const paragraphs = document.querySelectorAll('p');

2. Изменение содержания
С помощью DOM можно изменять текст, HTML-контент и атрибуты элементов.

   header.textContent = 'Новый заголовок';
   paragraphs[0].innerHTML = '<strong>Обновленный текст</strong>';

3. Создание и удаление элементов
Вы можете добавлять новые элементы на страницу или удалять существующие.

   const newElement = document.createElement('div');
   newElement.textContent = 'Новый элемент';
   document.body.appendChild(newElement);

   document.body.removeChild(paragraphs[1]);

💡 Зачем изучать DOM?

Работа с DOM — это основа создания динамических веб-страниц. Без понимания DOM трудно эффективно управлять контентом, взаимодействием с пользователем и реализацией интерактивных функций.

Тэги : #javascript

699 views06:01

M3 | WebDev

🛠 Разбираемся в отличиях: var, let, и const в JavaScript! 🌟

Сегодня мы погрузимся в основные различия между тремя способами объявления переменных в JavaScript: var, let, и const. Каждый из них имеет свои особенности, которые важно понимать, чтобы писать эффективный и безопасный код.

1. var — 🏛 Редкоиспользуемый в нынешнем времени

- Область видимости (Scope): var имеет функциональную область видимости. Это означает, что если вы объявите переменную внутри функции, она будет доступна только внутри этой функции. Если же переменная объявлена в глобальной области, она будет доступна везде.
- Hoisting (Поднятие переменных): Переменные, объявленные с var, поднимаются (hoisting). Это значит, что объявление переменной доступно до её фактического появления в коде, но инициализация остаётся на месте.
- Поведение в циклах: Переменные, объявленные с помощью var, не имеют блочной области видимости, что может приводить к неожиданным результатам в циклах (как в примере с setTimeout выше).
- Переопределение: Переменную, объявленную с помощью var, можно переопределить в той же области видимости.

var a = 10;
var a = 20; // Допустимо

2. `let` — 🔒 Безопасный выбор

- Область видимости (Scope): let имеет блочную область видимости. Переменные, объявленные с let, существуют только внутри того блока кода, где они были объявлены (например, внутри {}).
- Поведение в циклах: В отличие от var, let создаёт новую переменную для каждой итерации цикла, что помогает избежать ошибок.
- Переопределение: Переменную, объявленную с let, нельзя объявить заново в той же области видимости, но можно изменить её значение.

let b = 10;
b = 20; // Допустимо

3. const — 🛡 Для неизменяемых значений

- Область видимости (Scope): Как и let, const имеет блочную область видимости, что делает её использование безопасным.
- Инициализация: Переменную, объявленную с const, необходимо инициализировать сразу. Её значение нельзя изменять после присвоения.
- Константность: Хотя значение переменной нельзя изменить, если const ссылается на объект или массив, вы можете изменять свойства объекта или элементы массива.

const c = 30;
// c = 40; // Ошибка

const obj = { name: 'John' };
obj.name = 'Doe'; // Допустимо

💡 Когда что использовать?

- var: Используйте с осторожностью .
- let: Отличный выбор для переменных, значение которых будет изменяться.
- const: Идеально подходит для значений, которые не должны изменяться.

Понимание этих различий поможет вам избежать многих распространённых ошибок и писать более чистый код. 🎯

Тэги : #javascript

677 viewsedited 16:10

M3 | WebDev

💡 Типы данных и встроенные объекты в JavaScript 🧑‍💻

JavaScript поддерживает различные типы данных и встроенные объекты, которые можно разделить на примитивные и объектные.

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

- string (Строка)
Последовательность символов, заключённых в кавычки. Примеры: "Hello, World!", 'JavaScript'.

- number (Число)
Числовые значения, как целые, так и дробные. Примеры: 42, 3.14, -7.

- boolean (Булево значение)
Логический тип, принимающий true или false. Примеры: true, false.

- null (Нулевое значение)
Специальное значение, обозначающее отсутствие значения или пустоту. null используется для явного указания на отсутствие объекта. Пример: let value = null;.

Примечание: typeof null возвращает "object", что является историческим багом JavaScript и может быть не совсем интуитивно понятным.

- undefined (Неопределённое значение)
Значение, присваиваемое переменной, которая была объявлена, но не инициализирована. Пример: let x; // x is undefined.

- symbol (Символ)
Уникальное и неизменяемое значение, часто используется как идентификатор для свойств объектов. Пример: const id = Symbol("id");.

- bigint (Большое целое число)
Позволяет работать с числами, выходящими за пределы Number. Пример: const big = 1234567890123456789012345678901234567890n;.

🗂 Объект в JavaScript

Object

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

Пример создания объекта:

const person = {
  name: "Alice",
  age: 25,
  greet() {
    console.log("Hello, my name is " + this.name);
  }
};

Некоторые из методов объекта:
- `Object.keys(obj)` – возвращает массив ключей объекта.
- `Object.values(obj)` – возвращает массив значений объекта.
- `Object.entries(obj)` – возвращает массив пар [ключ, значение].
- `Object.assign(target, source)` – копирует свойства из одного объекта в другой.

🔍 Некоторые встроенные объекты в JavaScript:

- Function
Особый тип объекта, представляющий собой выполняемый блок кода.
Примечание : typeof для функции возращает "function" , поскольку функции являются частным случаем объектов в JavaScript . Примеры создания функции:

  function greet(name) {
    return "Hello, " + name;
  }

- Array
Специальный объект, представляющий собой упорядоченный список значений. Массивы могут содержать элементы разных типов данных. Пример:

  const numbers = [1, 2, 3, "four", true];

- Map
Коллекция пар ключ-значение, где ключи могут быть любого типа, а значения могут быть дубликатами. Пример:

  const map = new Map([['key1', 'value1'], ['key2', 'value2']]);

- Set
Коллекция уникальных значений, без дубликатов. Пример:

  const set = new Set([1, 2, 3, 1]); // Set {1, 2, 3}

- Math
Встроенный объект, предоставляющий математические функции и константы. Примеры:

  const pi = Math.PI; // 3.141592653589793
  const sqrt = Math.sqrt(16); // 4

- Date
Объект для работы с датами и временем. Примеры:

  const now = new Date(); // Текущая дата и время
  const specificDate = new Date('2024-08-18');

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

  const regex = /abc/;
  const result = regex.test('abcdef'); // true

- Error
Объект для создания и обработки ошибок. Примеры:

  const error = new Error('Something went wrong');

📌 Заключение

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

Тэги : #javascript

434 viewsedited 13:30

M3 | WebDev

💡 Основные способы явного преобразования типов данных в JavaScript 🔄

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

🔢 1. Преобразование в число

- `Number(value)`: Преобразует значение в число.

  Number("123"); // 123
  Number(true);  // 1
  Number("");    // 0
  Number("abc"); // NaN

- Унарный оператор `+`: Преобразует значение в число.

  +"456";  // 456
  +true;   // 1

- Метод `parseInt(string, radix)`: Преобразует строку в целое число с заданной системой счисления.

  parseInt("42", 10); // 42
  parseInt("101", 2); // 5

- Метод `parseFloat(string)`: Преобразует строку в число с плавающей точкой.

  parseFloat("3.14"); // 3.14
  parseFloat("2.718"); // 2.718

📜 2. Преобразование в строку

- `String(value)`: Преобразует значение в строку.

  String(123); // "123"
  String(false); // "false"

- Метод `toString()`: Преобразует значение в строку (доступен у чисел, булевых значений, объектов и т. д.).

  (456).toString(); // "456"
  (true).toString(); // "true"

🔘 3. Преобразование в логическое значение

- `Boolean(value)`: Преобразует значение в логическое значение (true или false).

  Boolean(1);      // true
  Boolean(0);      // false
  Boolean("text"); // true
  Boolean("");     // false

- Оператор `!!` (двойное отрицание): Преобразует значение в логическое значение.

  !!"hello";  // true
  !!0;        // false
  !!null;     // false

🧩 4. Преобразование объектов и массивов

- `JSON.stringify(value)`: Преобразует объект или массив в строку JSON.

  JSON.stringify({ name: "Alice", age: 25 }); // '{"name":"Alice","age":25}'

- `JSON.parse(string)`: Преобразует строку JSON обратно в объект или массив.

  JSON.parse('{"name":"Alice","age":25}'); // { name: "Alice", age: 25 }

📅 5. Преобразование даты

- Метод `Date.prototype.toString()`: Преобразует объект Date в строку.

  new Date().toString(); // "Sat Aug 17 2024 13:42:15 GMT+0000 (Coordinated Universal Time)"

- Метод `Date.prototype.toISOString()`: Преобразует объект Date в строку в формате ISO.

  new Date().toISOString(); // "2024-08-17T13:42:15.000Z"

- Конструктор `Date(value)`: Преобразует строку или число в объект Date.

  new Date("2024-08-17T13:42:15.000Z"); // Date object

🧪6. Сравнение значений: == и ===

Оператор == (нестрогое равенство): Сравнивает значения после приведения их к одному типу. Это может привести к неожиданным результатам из-за автоматического преобразования типов.

0 == '0';         // true (строка '0' преобразуется в число 0)
null == undefined; // true (специальное правило в JavaScript)
1 == true;        // true (булевое значение true преобразуется в 1)

Оператор === (строгое равенство): Сравнивает значения без преобразования типов. Значения должны быть одного типа и равными, чтобы результат был true.

0 === '0';        // false (разные типы данных)
null === undefined; // false (разные значения)
1 === true;       // false (разные типы данных)

📌 Заключение

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

Тэги : #javascript

98 views17:30

M3 | WebDev

🚀 Массивы в JavaScript: Методы и манипуляции! 🚀

Массивы в JavaScript — это мощный инструмент для работы с упорядоченными данными! 🛠 Они позволяют хранить и управлять коллекциями элементов. Давайте подробнее рассмотрим массивы и некоторые полезные методы для работы с ними. 📚

🌟 Что такое массив?

Массив — это объект, который позволяет хранить несколько значений в одном месте. Эти значения могут быть любого типа: числа, строки, объекты и даже другие массивы! 📊

1️⃣ Создание массива

Вы можете создать массив несколькими способами:

С помощью литерала массива

const fruits = ['Apple', 'Banana', 'Orange'];
console.log(fruits); // Выведет: ["Apple", "Banana", "Orange"]

С помощью конструктора массива

const numbers = new Array(1, 2, 3);
console.log(numbers); // Выведет: [1, 2, 3]

2️⃣ Основные методы массива

`push` и `pop`

Добавляют и удаляют элементы с конца массива.

const stack = [1, 2, 3];
stack.push(4); // Добавляет 4 в конец
console.log(stack); // Выведет: [1, 2, 3, 4]

stack.pop(); // Удаляет последний элемент
console.log(stack); // Выведет: [1, 2, 3]

`shift` и `unshift`

Добавляют и удаляют элементы с начала массива.

const queue = [1, 2, 3];
queue.unshift(0); // Добавляет 0 в начало
console.log(queue); // Выведет: [0, 1, 2, 3]

queue.shift(); // Удаляет первый элемент
console.log(queue); // Выведет: [1, 2, 3]

`map`

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

const numbers = [1, 2, 3];
const doubled = numbers.map(x => x * 2);
console.log(doubled); // Выведет: [2, 4, 6]

`filter`

Создает новый массив с элементами, которые прошли проверку функции.

const numbers = [1, 2, 3, 4];
const even = numbers.filter(x => x % 2 === 0);
console.log(even); // Выведет: [2, 4]

`reduce`

Применяет функцию к каждому элементу массива (слева направо) и возвращает одно значение.

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, current) => acc + current, 0);
console.log(sum); // Выведет: 10

`find`

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

const numbers = [1, 2, 3, 4];
const found = numbers.find(x => x > 2);
console.log(found); // Выведет: 3

`forEach`

Выполняет функцию для каждого элемента массива.

const numbers = [1, 2, 3];
numbers.forEach(x => console.log(x));
// Выведет:
// 1
// 2
// 3

### 3️⃣ Методы для поиска и сортировки

`includes`

Проверяет, содержит ли массив определенный элемент.

const fruits = ['Apple', 'Banana', 'Orange'];
console.log(fruits.includes('Banana')); // Выведет: true
console.log(fruits.includes('Grape')); // Выведет: false

`sort`

Сортирует элементы массива.

const numbers = [4, 2, 3, 1];
numbers.sort((a, b) => a - b);
console.log(numbers); // Выведет: [1, 2, 3, 4]

🔍 Заключение

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

Тэги : #javascript

111 views16:02

M3 | WebDev

Понимание this в JavaScript 🔍

Ключевое слово this в JavaScript — это один из самых важных, но и наиболее запутанных аспектов языка. Оно указывает на объект, в контексте которого выполняется функция. Важно понимать, как this изменяется в зависимости от того, как функция была вызвана. Давайте разберем основные случаи и методы управления this:

1. Методы объекта 🧩

Когда функция вызывается как метод объекта, this ссылается на этот объект:

const person = {
  name: 'Alice',
  greet: function() {
    console.log(this.name); // Выводит 'Alice'
  }
};
person.greet();

2. Функции как вызов 🚀

Когда функция вызывается без привязки к объекту (как обычная функция), this ссылается на глобальный объект в нестрогом режиме (window в браузере) или undefined в строгом режиме:

function show() {
  console.log(this); // В браузере выведет объект window
}
show();

Если включить строгий режим ('use strict';), то this будет undefined:

'use strict';
function show() {
  console.log(this); // Выводит undefined
}
show();

3. Конструкторы 🛠

При использовании функции как конструктора с помощью new, this ссылается на создаваемый объект:

function Person(name) {
  this.name = name;
}
const person = new Person('Bob');
console.log(person.name); // Выводит 'Bob'

4. Стрелочные функции →

Стрелочные функции не имеют собственного this. Вместо этого они захватывают значение this из окружающего контекста, в котором были определены:

const person = {
  name: 'Carol',
  greet: function() {
    setTimeout(() => {
      console.log(this.name); // Выводит 'Carol'
    }, 1000);
  }
};
person.greet();

5. Управление this с помощью call, apply и bind 🎯

JavaScript предоставляет несколько способов явного управления значением this в функциях:

- call: Метод call позволяет вызвать функцию с определенным значением this и передать аргументы:


  function greet(greeting) {
    console.log(`${greeting}, ${this.name}`); // Выводит 'Hello, Dave'
  }

  const person = { name: 'Dave' };
  greet.call(person, 'Hello');

- apply: Метод apply похож на call, но принимает аргументы в виде массива:

function greet(greeting, punctuation) {
console.log(`${greeting}, ${this.name}${punctuation}`); // Выводит 'Hi, Eve!'
}

const person = { name: 'Eve' };
greet.apply(person, ['Hi', '!']);

- bind: Метод bind создает новую функцию, которая при вызове будет иметь заданное значение this и, при необходимости, переданные аргументы. В отличие от call и apply, bind не вызывает функцию сразу, а возвращает новую функцию:

function greet(greeting) {
console.log(`${greeting}, ${this.name}`); // Выводит 'Hey, Frank'
}

const person = { name: 'Frank' };
const greetPerson = greet.bind(person);
greetPerson('Hey');

Заключение 🎉

Понимание того, как this работает в различных контекстах и как управлять его значением с помощью call, apply и bind, является ключом к написанию надежного и предсказуемого кода в JavaScript. Эти правила помогают избежать распространенных ошибок и сделать код более понятным и поддерживаемым.

Тэги : #javascript

97 viewsedited 16:02

M3 | WebDev

🔄 Event Loop в JavaScript

Event Loop — это механизм, который позволяет JavaScript работать с неблокирующей моделью ввода-вывода. Хотя Event Loop не является частью самого JavaScript, его реализация зависит от среды, в которой выполняется код (например, браузер или Node.js). Однако, несмотря на различия в реализации, цель Event Loop везде одна — управление асинхронными задачами.

Основные компоненты:

1. Call Stack (Стек вызовов): В нем выполняются функции в порядке LIFO (Last In, First Out). Когда функция вызывает другую функцию, она добавляется на вершину стека. Когда выполнение функции завершается, она удаляется из стека. Если стек пуст, Event Loop начинает извлекать задачи из очереди.

2. Task Queue (Очередь задач): Это очередь, куда попадают асинхронные задачи, такие как колбэки, промисы и другие операции, которые не могут быть выполнены немедленно. Когда стек вызовов становится пустым, Event Loop берет первую задачу из этой очереди и помещает ее в стек вызовов для выполнения.

3. Web API: Это интерфейсы, предоставляемые окружением (например, браузером), такие как setTimeout, DOM events, XHR и т.д. Эти API не входят в спецификацию JavaScript, но они обеспечивают взаимодействие с Call Stack и Task Queue через Event Loop.

Важные детали:

Task Queue делится на два типа очередей :

- Microtask Queue: Помимо обычной очереди задач, существует отдельная очередь для микрозадач, таких как Promise. Microtask Queue имеет более высокий приоритет, чем обычная Task Queue, и обрабатывается Event Loop сразу после выполнения всех синхронных операций и до начала выполнения макрозадач.

- Macrotask Queue: В эту очередь попадают такие задачи, как таймеры, события, AJAX-запросы и другие макрозадачи. Они обрабатываются после выполнения всех микрозадач.

Взаимодействие между компонентами:

1. Выполнение синхронного кода: Все синхронные операции выполняются в Call Stack. Например, вызов функции и ее выполнение.

2. Взаимодействие с Web API: При вызове асинхронных функций, таких как setTimeout, браузер или Node.js перемещают их в Web API, где они ждут своего завершения.

3. Добавление задач в очередь: Как только асинхронная операция завершается (например, таймер истекает), соответствующий колбэк перемещается в Macrotask Queue или Microtask Queue, в зависимости от типа задачи.

4. Обработка задач Event Loop: Event Loop проверяет, есть ли задачи в Microtask Queue и Macrotask Queue. Сначала выполняются все задачи из Microtask Queue, затем Event Loop переходит к задачам из Macrotask Queue.

Пример работы Event Loop:

console.log('Start'); // 1

setTimeout(() => {
  console.log('Timeout'); // 4
}, 0);

Promise.resolve().then(() => {
  console.log('Promise'); // 3
});

console.log('End'); // 2

Последовательность выполнения:
1. Выполняется первый console.log('Start') и выводится в консоль.
2. Вызов setTimeout передает колбэк в Web API, где он ожидает выполнения.
3. Промис перемещает свой колбэк в Microtask Queue.
4. Выполняется второй console.log('End').
5. Event Loop проверяет Microtask Queue, видит там колбэк промиса и выполняет его.
6. После выполнения всех микрозадач, Event Loop переходит к Task Queue и выполняет колбэк из setTimeout.

Результат в консоли:
Start → End → Promise →

Timeout

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

Такое глубокое понимание Event Loop помогает писать более эффективный код и лучше разбираться в особенностях работы JavaScript. 🚀

Тэги : #javascript

81 viewsedited 17:40

M3 | WebDev

🚀 Базовое Понимание и Возможности Классов в JavaScript

В JavaScript классы появились в ES6 и предоставляют новый способ работы с объектами, однако под капотом классы — это всё ещё функции. Классы упрощают создание объектов, наследование и использование методов, делая код более понятным и структурированным. Давайте рассмотрим основные аспекты работы с классами.

📚 Базовый синтаксис класса

Класс объявляется с использованием ключевого слова class, после которого следует имя класса. Внутри класса можно объявить методы. Например:

class User {
  constructor(name) {
    this.name = name;
  }

  sayHi() {
    console.log(`Привет, я ${this.name}!`);
  }
}

const user = new User('Иван');
user.sayHi(); // Привет, я Иван!

Здесь constructor — это специальный метод, который вызывается при создании нового объекта через new. Внутри конструктора определяются свойства объекта.

🧬 Наследование классов

В JavaScript классы поддерживают наследование. Для этого используется ключевое слово extends, которое позволяет одному классу наследовать методы и свойства другого.

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} издает звук.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} лает.`);
  }
}

const dog = new Dog('Барбос');
dog.speak(); // Барбос лает.

📊 Статические свойства и методы

Статические методы и свойства принадлежат классу, а не его экземплярам. Они определяются с помощью ключевого слова static.

class MathUtils {
  static square(x) {
    return x * x;
  }
}

console.log(MathUtils.square(4)); // 16

🔒 Приватные и защищённые методы и свойства

С появлением ES2022 в JavaScript были введены приватные свойства и методы, которые начинаются с символа #. Такие свойства и методы доступны только внутри класса.

class User {
  #password;

  constructor(name, password) {
    this.name = name;
    this.#password = password;
  }

  checkPassword(password) {
    return this.#password === password;
  }
}

const user = new User('Иван', '1234');
console.log(user.checkPassword('1234')); // true

🔧 Расширение встроенных классов

Вы можете расширять встроенные классы JavaScript, такие как Array, добавляя собственные методы.

class PowerArray extends Array {
  isEmpty() {
    return this.length === 0;
  }
}

const arr = new PowerArray(1, 2, 3);
console.log(arr.isEmpty()); // false

🔍 Проверка класса: "instanceof"

Оператор instanceof используется для проверки, принадлежит ли объект определённому классу или его наследнику.

console.log(arr instanceof PowerArray); // true

🧩 Примеси

Примеси позволяют разделять функциональность между классами. В JavaScript примеси реализуются через простое добавление методов в прототип класса.

let sayHiMixin = {
  sayHi() {
    console.log(`Привет, ${this.name}`);
  }
};

class User {
  constructor(name) {
    this.name = name;
  }
}

Object.assign(User.prototype, sayHiMixin);

const user = new User('Иван');
user.sayHi(); // Привет, Иван

🧭 Заключение:

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

Тэги : #javascript

87 viewsedited 17:01

About

Blog

Apps

Platform