‌

01. JS с нуля, ваще с нуля (введение)

Оценить качество материала и подачу материала автором видео:

Front-end

Трудоустройтесь middle front-end разработчиком на React JS (TypeScript) за 12-16 месяцев обучения с ежедневной менторской поддержкой в формате видео 1 на 1 и коммерческими проектами в портфолио

Перейти на курс
Front-end

Back-end

Трудоустройтесь middle back-end разработчиком за 12-16 месяцев обучения с ежедневной менторской поддержкой в формате видео 1 на 1 и коммерческими проектами в портфолио

Перейти на курс
Back-end

Карьерный бустер

Получите коммерческий опыт на реальных стартапах, прокачайте tech & soft навыки, научитесь работать в команде, проходить собеседования и получите первую работу в IT!

Перейти на курс
Карьерный бустер

Основы Front-end

Сделайте первый шаг в IT, освоив базовые знания разработки и научившись создавать небольшие проекты на JavaScript

Перейти на курс
Основы Front-end

Основы Back-end

Сделайте первый шаг в IT, освоив базовые знания разработки. Без опыта. Без математики. Только практика: JavaScript, SQL, Node JS, база данных

Перейти на курс
Основы Back-end

Введение в JavaScript с Нуля

Автор конспекта: Андрей Комаров

Введение в JavaScript и HTML: Практическое знакомство

Цель курса:

Научить программировать на JavaScript (JS) с нуля, предполагая, что слушатель является полным новичком (zero / ноль) в программировании, но продвинутым пользователем ПК.

Фундаментальная связь JS и HTML

  • JavaScript — это язык программирования, используемый для написания программ, представляющих собой набор команд, выполняющих полезные действия.
  • JS (в контектсе веб-приложений) взаимодействует с HTML, изменяя его, дополняя, улучшая или удаляя элементы.
  • Это взаимодействие происходит через Document Object Model (DOM) — программное представление HTML-документа в виде дерева объектов, которое JavaScript может читать и модифицировать.
  • Без HTML JavaScript (в контексте веб-приложений) бесполезен и не сможет существовать, так как ему не с чем будет работать.
  • Поэтому прежде чем углубляться в JS, необходимо хотя бы минимально познакомиться с HTML.

Практическое знакомство с HTML

1. Создание рабочей среды

  • Создаем пустую папку (например, 01)

  • Создаем текстовый файл и меняем расширение

index.html

🔎

Умение самостоятельно искать информацию в интернете (гуглить) — навык номер один для программиста.

2. Открытие HTML-файла в браузере

  • Откройте файл index.html двойным кликом в браузере
  • Одновременно откройте этот же файл в текстовом редакторе

3. Написание базового HTML-кода

html
<!DOCTYPE html>
<html lang="ru">
  <head>
    <title>Моя первая страница</title>
  </head>
  <body>
    Hello
    <input id="message" type="text" />
 
    <script>
      // JavaScript код будет здесь
    </script>
  </body>
</html>

После сохранения файла (Ctrl+S) и обновления страницы в браузере (Ctrl+R), вы увидите текст "Hello" и поле ввода.

Практическое знакомство с JavaScript

Встраивание JavaScript-кода

html
<script>
  setInterval(function () {
    var userInput = document.getElementById("message")
    window.alert(userInput.value)
  }, 4000)
</script>

Что происходит в коде:

  • setInterval выполняет функцию каждые 4 секунды
  • document.getElementById('message') находит элемент с id="message"
  • .value получает значение из поля ввода
  • window.alert() отображает значение во всплывающем окне

На начальном этапе НОРМАЛЬНО не до конца понимать каждую строчку кода. Главное — повторить шаги и увидеть результат.

Общий контекст: Загрузка файлов и работа браузера

Загрузка через Интернет (сервер)

Downloading via the Internet (server)

  1. Пользователь вводит адрес сайта (например, vk.com)
  2. Браузер отправляет запрос на сервер
  3. Сервер возвращает файл index.html
  4. Браузер загружает HTML и выполняет JavaScript

Локальная загрузка (для разработчиков)

text
file:///D:/index.html
💡

Для разработки не требуется собственный сервер — достаточно локального файла.

Инструменты разработчика

Откройте инструменты разработчика в браузере:

  • Клик правой кнопкой мыши → Inspect
  • Или нажмите F12

Вкладка Network показывает все файлы, которые загрузились по сети (включая локальные файлы).

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

Боевой маршрут (JS Ваще с нуля)

Видеоурок - 1 видео из 29