Макс
@maksmishin
Переношу рабочие заметки из keep.google.com в связи с возможностью блокировки сервиса. В дальнейшем заметки скрою и буду бложить сюда со своего домена
171 posts
JS

JS Переменные. Объявление, вывод в консоль, переприсваивание

let time; //объявление time=34; console.log('Старт поездки. Осталось минут: ' + time); вывели в консоль Переприсваивание console.log('Немного сториз в инстаграме. Осталось минут: ' + time); time=time-10; console.log('Немного новостей. Осталось минут: ' + time); или вот так, с пользой. let header = document.querySelector('header'); переменная находит элемент. Чтобы лишний раз команду не прописывать, мы ее сохранили в переменную. Потом ее можно например вывести в консоль console.log(header); Или например новый класс добавить в ее стили header.classList.add('new-class');

Случайные числа в JS

Для генерации случайных чисел есть команда Math.random(). Она возвращает случайное число между 0 и 1, включая ноль(но не включая 1) let randomNumber = Math.random(); console.log(randomNumber); // например, 0.9752705074780903 Если нужно число от 0 до 10 например, то не получится вот так записать Math.random(0, 10); эта команда не реагирует на то, что вы пишете в её круглых скобках. Вот такой вот пиздец тут творится... Math.random() * 10. Тут будет генерироватья от 0 до 9.9999999999 путем умножения на 10 всех чисел до 1, не включая 1. Math.random()*6; а вот случайное число от 0 до 5.999999999999 Генерируется всегда дробное число. Поэтому его надо округлять. Командой Math.floor; которое по сути не округляет, а отбрасывает дробную часть...

JS массивы

В массиве элементы перечисляются через запятую, все они заключены в общие квадратные скобки. Обычно они однотипны, как товары, которые пользователь добавил в корзину на Алиэкспресс: let aliExpress = ['Лазерная указка Xioamo', 'Гарнитура в виде телефонной трубки', 'Форма для льда «Титаник»']; // Объявили переменную в виде массива console.log(aliExpress[1]); вывели в консоль значение с массива. Выйдет не первое, а второе, так как счёт в массивах начинается с нуля. В консоль одновременно сразу вывести не выйдет через запятую. КАЖДЫЙ ЭЛЕМЕНТ МАССИВА ХОЧЕТ, ЧТОБЫ К НЕМУ ОБРАЩАЛИСЬ ПЕРСОНАЛЬНО. Выводить приходится по очереди console.log(phrases[2]); console.log(phrases[4]); Свойства массива: у массива есть свойство length, оно хранит его...

JS Функции. Создание(объявление), вызов

Функция — это блок кода, который можно переиспользовать много раз. function sayHello() { } sayHello имя функции Между фигурными скобками код функции или «тело функции» function sayHello() { alert('Привет, Андрей'); // вылезает колхозное всплывающее окно 90-х } Создание функции - оно же объявление. Потом ее нужно "вызвать": Чтобы использовать функцию, нужно написать её имя и поставить круглые скобки: sayHello(); Параметр функции. Аргумент функции. function sayHello(хрен) { alert('Привет, ' + хрен); // хрен — параметр } И будет уже поуниверсальнее: sayHello('Анна'); // "Привет, Анна" sayHello('Михаил'); // "Привет, Михаил" Каждый параметр ВНУТРИ функции играет роль переменной. Икс. Х. Хрен. Параметр как раз и указывается в скобках...

Условия в JS. If, Else

Конструкция: if (age >= 18) { console.log('добро пожаловать на выборы'); } else { console.log('вам голосовать ещё рано'); } Проверяя выполнение условия, JavaScript отвечает на вопрос, равно ли оно true или false: let age = 24; console.log(age > 21); // вернёт ответ true

Библиотеки в JS

Не весь код надо писать самим(хоть что-то хорошее блин). Вокруг JavaScript — большое сообщество разработчиков. Они уже решили множество задач, которые встанут перед вами. Многие разработчики выложили результат своей работы в виде библиотек готового кода. Вы просто подключаете их и используете в своём проекте. У библиотеки есть документация. В ней описано, как библиотеку подключить и использовать. Обычно библиотека — это просто JavaScript-файл, лежащий на стороннем сайте. Потому и подключить её можно как простой файл, указав её адрес в атрибуте src тега script: <body> <!-- подключим библиотеку --> <script src="https://library-website.com/lib.js"></script>

Объекты JS

Если в массивах удобно хранить данные об однородных объектов, то для хранения разнородных данных обычно используют структуру — объекты. Они создаются фигурными скобками. let user = { name: 'Мария', dotaLevel: 21, dogName: 'Железногорск' }; Объекты содержат свойства. Свойство объекта состоит из ключа, например, name и значения по этому ключу — 'Мария'. Обратиться к свойству объекта можно через точку: console.log(user.name); // Мария console.log(user.dotaLevel); // 21 Объект — ящик с элементами. Фигурные скобки — стенки ящика, границы объекта. Лежащие внутри ящика элементы разделены запятыми, а не точками с запятой. Это важно, без запятых всё сломается. Объекты могут располагаться внутри массива. Целый массив может состоять...

Циклы в JS

Цикл for позволяет повторять похожие действия, задав условия повторения. Конструкция цикла похожа на конструкцию условия if. Сначала идёт ключевое слово for, потом круглые скобки, а затем фигурные. В фигурных скобках размещают код, который нужно повторять: for () { console.log('Никаких больше вечеринок'); } А в круглых — три условия цикла, разделённых точкой с запятой. for (начало; условие; шаг) { // ... тело цикла ... } На примере: Во-первых, повторения нужно считать. Оттого первое условие — это начальное значение переменной-СЧЕТЧИКА: for (let i = 0;) { console.log('Никаких больше вечеринок'); } Переменная-счётчик отвечает за то, сколько раз будет выполняться код в фигурных скобках. Чтобы ограничить это количество, есть второе...

Найти элемент JS, метод querySelector. Удаление и добавление классов.

Находим элемент с помощью querySelector Программа на JavaScript — это последовательность инструкций, которые указывают браузеру выполнить какие-то действия. Команда это по сути, «найди и принеси элемент» . Называется МЕТОД— querySelector document.querySelector('селектор'); Словом document обозначается веб-страница, к которой подключили скрипт. Неважно, как называется файл на самом деле, в JavaScript это всегда «документ». Если это класс например, то его можно удалить. Убираем класс методом classList.remove элемент.classList.remove('класс'); в данном случае будет так: document.querySelector('.page').classList.remove('light-theme'); Получается такой «паровозик»: нашли элемент, а потом убрали у него класс. Прочитался почти по-русски...

Методы JS шпаргалка

querySelector Метод querySelector ищет по селектору, который указан в скобках. например, document.querySelector('.page');