Перейти к основному содержимому

О языке +

  • Браузерный язык программирования (Browser API, логика), браузер парсит js. Компилятор не требуется.
  • Взаимодействие с сервером (запрос-ответ)
  • Манипуляция html (DOM)

Комментарии​

// -- JS --
// JS - язык программирования, который понимают браезеры (парсится JS - JS-движок V8 в Chrome)
// выполняется слева-направо, сверху-вниз, язык ланитицей, другие языки - плохая практика

// -- COMMENTS --
// однострочный комментарий
/*
  много
  строчный
  комментарий
*/

// -- SYNTAX --
// синтаксис состоит из выражений и инструкций

// -- EXPRESSION --
// expression - выражение (возвращает какое-то значение)
'some-string';
1 + 2;
Math.random();

// -- STATEMENT --
// statement - инструкция, синтакис языка
// if - else
// for (...)
// const, let, var

// вывод данных в браезерную консоль
console.log('Hello, JS!!!');
// инструкции отделяются друг от драга semocolon ; statement1; statement2; ...; statementN;
// JS игнорирует пробелы и переводы строк, поэтому часто инсрукции пишут на новых строках
// statment1;
// statment2;
// statment3;

// блок {} инструкций (составные инструкции)
// {
// statment1;
// statment2;
// statment3;
// }
// можно группировать инструкции в блоки - ошибки не будет
{
  console.log('Hello, JS!!! 1');
  console.log('Hello, JS!!! 2');
  console.log('Hello, JS!!! 3');

  {
    console.log('Hello, JS!!! 4');
    console.log('Hello, JS!!! 5');
    console.log('Hello, JS!!! 6');
  }
}
  • Браузерный язык программирования
  • Высокоуровневый язык программирования (использующий высокий уровень абстракции для быстрой и упрощённой записи компьютерных программ)
  • Использует набор инструкций и выражений, образующий так называемые скрипты
  • Скрипт - последовательность команд, выполняющихся друг за другом сверху-вниз в одном потоке
  • Основа логики для фронтенда, других альтернатив нет (как у бэкенда)
  • Также может быть использован для написания бэк-енда (Node.js)
  • Node.js в свою очередь используется как инструмент для локальной разработки (npm-пакеты для разработки ПО)
  • Не требует компилятора, интерпретируется встроенными механизмами в браузере (интерпретатор)
  • Везде, где есть браузер, есть JS

Логические решения​

  • Бизнес-логика
  • Манипуляция html и css (DOM)
  • Обработка действий пользования (eventListener) - клики, скролл, заполнение форм и т.д.
  • Отправка запросов и обработка ответов (клиент-серверное взаимодействие)
  • Хранение данных в браузере (cookies and localStorage)
  • В разработке используется большое кол-во библиотек и фреймворков, которые упрощают процесс разработки

Еще важные слои JS​

  1. Версии JavaScript (ECMAScript): Краткая история развития языка, включая основные версии (ES5, ES6/ES2015, и последующие ежегодные обновления).
  2. Типы данных: Перечисление основных типов данных в JavaScript (number, string, boolean, null, undefined, object, symbol, bigint).
  3. Асинхронность: Упоминание о том, что JavaScript является однопоточным языком, но поддерживает асинхронное выполнение кода (callbacks, promises, async/await).
  4. Функциональное программирование: JavaScript поддерживает функциональное программирование, включая функции высшего порядка и замыкания.
  5. Объектно-ориентированное программирование: JavaScript использует прототипное наследование, но также поддерживает классы (с ES6).
  6. Event Loop: Краткое объяснение механизма работы событийного цикла в JavaScript.
  7. Модульность: Информация о модульной системе JavaScript (CommonJS, ES modules).
  8. Строгий режим: Упоминание о 'use strict' и его значении.
  9. Области видимости: Объяснение различий между глобальной, функциональной и блочной областями видимости.
  10. Hoisting: Концепция "поднятия" объявлений переменных и функций.
  11. Инструменты разработки: Краткий обзор популярных инструментов для разработки на JavaScript (например, Babel, Webpack, ESLint).
  12. Тестирование: Упоминание о важности тестирования и популярных фреймворках для тестирования JavaScript кода.
  13. JavaScript вне браузера: Более подробная информация о серверном JavaScript (Node.js) и других средах выполнения.

Полезные ссылки​

Программа обучения​

📘 Месяц 1: Основы JavaScript​

📍 Неделя 1: Введение ✅​

  • Что такое JavaScript и где он используется
  • Подключение JS к HTML (через <script>)
  • Типы данных: string, number, boolean, null, undefined
  • Переменные: let, const, var (разница между ними)
  • Операторы: арифметические, сравнения, логические

📚 Ресурсы:

⸻

📍 Неделя 2: Управляющие конструкции​

  • Условные операторы: if, else, switch
  • Циклы: for, while, do...while
  • Работа с массивами: создание, методы (push, pop, shift, unshift, length)
  • Введение в функции

🛠 Практика:

  • Простые калькуляторы
  • Таблица умножения

⸻

📍 Неделя 3: Функции и область видимости​

  • Функции: объявление, вызов, параметры, возвращаемое значение
  • Стрелочные функции
  • Замыкания (введение)
  • Область видимости (scope)
  • Введение в объекты

⸻

📍 Неделя 4: Объекты и основы DOM​

  • Объекты и свойства
  • Методы объектов
  • Введение в массивы объектов
  • Введение в DOM: getElementById, querySelector, изменение текста и атрибутов

🛠 Мини-проект: интерактивный TODO-лист

⸻

📘 Месяц 2: Углубленное изучение и практика​

📍 Неделя 5: Работа с DOM и событиями​

  • Навигация по DOM-дереву
  • События: click, input, submit
  • Делегирование событий
  • Формы и валидация

⸻

📍 Неделя 6: Работа с массивами и объектами​

  • Метод forEach
  • Метод map, filter, reduce, find
  • Spread-оператор, деструктуризация
  • JSON и преобразование в строки/объекты

⸻

📍 Неделя 7: Асинхронность​

  • setTimeout, setInterval
  • Введение в промисы
  • fetch API
  • async/await
  • Обработка ошибок

🛠 Проект: новостной агрегатор с загрузкой данных по API

⸻

📍 Неделя 8: Модули и основы ООП​

  • Модули ES6 (import, export)
  • Классы и объекты
  • Наследование, super
  • Конструкторы
  • Понимание this

⸻

📘 Месяц 3: Практика, проекты и фреймворки​

📍 Неделя 9–10: Повторение и практика​

  • Реализация небольших проектов:
  • Калькулятор
  • Конвертер валют с API
  • Слайдер изображений
  • Чек-лист дел

⸻

📍 Неделя 11–12: Введение в фреймворки и дальнейшее развитие​

  • Основы React или Vue (на выбор)
  • Разделение кода на компоненты
  • Состояние и события в React (если выбрано)
  • Дальнейшее развитие: TypeScript, Node.js

⸻

📦 Рекомендуемые ресурсы:

  • YouTube: “JavaScript для начинающих” (Хауди Хо, Ulbi TV)
  • Книги: «Выразительный JavaScript» (Marijn Haverbeke), «Современный JavaScript»
  • Практика: codewars.com, leetcode.com

📘 Программа изучения JavaScript (10 недель)​

НеделяТемыПрактика и мини-проекты
1- Современный синтаксис ES6+ (let/const, стрелочные функции, шаблонные строки, деструктуризация)- HTML+CSS страница с кнопкой, по клику менять текст или стиль
2- Массивы и объекты, методы (map, filter, reduce), spread, деструктуризация- Галерея изображений или слайдер: переключение элементов по массиву с помощью событий
3- Работа с DOM: querySelector, getElementById, изменение структуры и стилей, События (click, input, keydown)- TODO-список: добавление, удаление задач, обработка кликов и вводов
4- Формы и валидация: submit, чтение значений, classList, динамические стили- Интерактивная форма: калькулятор или регистрация с проверкой ввода
5- Fetch API, Promise, работа с JSON- Приложение "Погода" или "Поиск фильмов": загрузка данных из внешнего API
6- async/await, try/catch, обработка ошибок- Переписать приложение с async/await, добавить уведомления об ошибках
7- Классы и объекты (class, constructor, наследование), прототипы- Игра "Камень–Ножницы–Бумага": логика с использованием классов
8- Модули ES6: export/import, Введение в сборку (Webpack, Babel), npm- Разделение проекта на модули, настройка Webpack для сборки
9- LocalStorage/SessionStorage, Делегирование событий- Расширение TODO-приложения с сохранением данных и делегированием кликов
10- Качество кода: линтеры (ESLint), юнит-тесты (Jest), рефакторинг- Финальный мини-проект: SPA приложение или викторина с применением всех тем