Bootcamp. JS

EduBootcamp. JS

let day = 2;

3..2..1.. Поехали!

Начинаем программировать

Для чего же нужен JavaScript?

Самая простая веб-страница может состоять всего из 3 частей:

• HTML ответственнен за содержимое страницы
• CSS за то как это всё будет выглядеть
• JavaScript позволяет нам "оживить" нашу страницу, сделать ее более интерактивной и интересной

Первые шаги

Куда писать код?

Код JS может быть написан несколькими способами. Самый простой из них - специальный тег script

Другой вариант

А можно использовать внешние скрипты, тогда весь код будет находиться в другом файле проекта

Комментарии

Браузеры не обращают внимания на то, что там написано и пропускают мимо ушей все комментарии, даже сказанные в их адрес

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

можно переносить строку и весь текст все еще будет не виден браузеру*/

//а это однострочный комментарий

если мы перенесем строку, эту часть наш браузер уже увидит и будет ругаться

Теперь углубимся в саму суть

Переменных требуют наши сердца!

Переменные используются для хранения любой информации

querySelector

Чтобы получить нужный нам элемент с HTML страницы, мы обращаемся к нашему документу (document), а потом уже, с помощью запроса querySelector, просим у него элемент или несколько.

addEventListener

Мы можем назначать слушателя событий (это, так сказать, маленький бот, который ждет определенное событие, связанное с элементом) любому элементу на странице.

События могут быть абсолютно разными, в интернете вы сможете найти больше вариантов.

Что еще можно сделать в теле функции с элементами HTML страницы? Примеры:

• Изменять style свойства: el.style.свойство = новое значение

• Убирать и добавлять классы: el.classList.add("class") и el.classList.remove("class")

• Изменять текст: el.innerText = "Новый текст"

Конкатенация, ну, а если проще - сложение строк

text1 = "Мы можем складывать строки," + " с помощью конкатенаци, это достаточно просто"

text2 = " нужно всего лишь использовать знак сложения."

allText = text1 + text2 + " Это работает даже с переменными"

Практика!

Что там было про функции?

Чтобы создать свою функцию, никаких сложных действий не требуется

Списки

list1[0] - такая запись вернет нам первый элемент списка list1

list.length - выясняем длину списка, узнаем сколько же там всего элементов

Добавим условностей

if-else. Такая конструкция помогает нам использовать разный код, для разных возможных значений одной переменной или функции.

Если if возвращает значение true, те истина, то мы выполняем код в скобочках, если нет, идем дальше

Например, number может иметь значения: 1, 2, 3

Логические операторы для if

• Равенство: мы можем проверить равна ли переменная чему-то (==) или наоборот не равна (!=)

• Также мы можем использовать операторы больше > меньше. 5 > 3 и 4 < 10

• Когда нужно использовать несколько условий в одном if, можно воспользоваться оператором и - &&, если нужно, чтоюы выполнялись оба условия, а также оператором или ||, если нужно чтобы было истинно хотя бы одно из утверждений в if

Циклы

Чтобы не писать 10 строчек одинакового кода, можно создать один цикл с этой строчкой и выполнить ее 10 раз.

Очень удобно использовать циклы, когда у нас есть список

Цикл со списком

Практика!

Math.random()

Чтобы сформировать рандомное число, мы пользуемся математической функцией Math.random()

ВРЕМЯ! Таймеры, интервалы, часы..

Для работы со временем в JS существует множество инструментов

Разберем некоторые из них

Таймеры и Интервалы

setTimeout - выполняет код один раз через определённый интервал времени

setInterval - выполняет код регулярно, повторяя его через каждый определённый интервал

Работа с датами

Date() имеет много методов

• getFullYear() - вернет год даты (yyyy)

• getMonth() - номер месяца

• getDate() - число дня (1-31)

• getDay() - номер дня недели (0-6)

• Date.now() - даст текущие дату и время

• getTime() - вернет количество милисекунд с 1 января 1970 года

• getHours() - часы (0-23)

• getMinutes() - минуты (0-59)

• getSeconds() - секунды (0-59)

Практика!

Canvas

<canvas> — это HTML элемент, а используется он для рисования графики, например, с помощью JS

Как работать с канвасом?

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

Начинаем работу с канвасом:

• Создаем <canvas></canvas> в HTML

• Задаем рамку для канваса в CSS, через параметр border, чтобы видеть наше "полотно"

• Используем канвас в JS, пользуясь разными функциями

Работа с канвас в JS

• Создаем переменную для нашего canvas

• Задаем канвасу размеры через параметры width и height

• Накладываем на канвас 2D холст, на котором будем рисовать.

Функции для рисования.

Какие фигуры можно нарисовать?

Рисуем линию

Круг

Текст

Прямоугольник

Практика!

Очищаем полотно

clearRect(x, y, width, height)  - Очистка  прямоугольной области, делает нарисованное содержимое совершенно прозрачным.

Рисунок в канвас

Динамика.

Чтобы добавить динамики фигурам в канвас можно воспользоваться функциями JS

• Начать рисовать рисунок по нажатию на кнопку

• Добавить взаимодействие фигуры с курсором мышки

• Заставить рисунок перемещаться с помощью интервала

Практика!