JavaScript заметки
Відкрити в Telegram
Регулярные заметки по практическому JavaScript. Обучащию посты позволят прокачать навыки во Frontend-разработке. Можно почитать пока компилируется проект :) Сотрудничество: @noname_media Канал на бирже: telega.in/channels/notesjs/card?r=Wj7h1mbl
Показати більше7 740
Підписники
-124 години
-77 днів
-5930 день
Архів дописів
7 740
for
Классический цикл максимально удобен для работы со счётчиками. Управляющая конструкция, которая создаёт цикл.
Что произойдёт при запуске данного кода?
Один раз выполнится инициализация.
Потом создастся переменная
i и ей присвоится значение 0, let i = 0. Эта переменная доступна только пока работает цикл, так как мы её объявили через let. Переменные созданные через let доступны только в рамках блока, где они созданы. В нашем случае блок — это тело цикла и шаги инициализации, условия и итоговой операции.
Идёт проверка условия i < 5. Значение переменной в текущий момент времени это 0. 0 меньше 5, значит условие истинно.
Так как условие истинно, выполняется тело цикла: console.log('Счётчик равен: ' + i);
#цикл #for #переменная7 740
JS - полезные заметки. Здесь публикуются отрывки кода, которые могут пригодиться любому фронтендеру. Автор канала – действующий разработчик на фрилансе.
Здесь вы научитесь:
– Отложено загружать изображения веб-страницы
– Отправлять запросы на сервер без jQuery
– Запоминать данные пользователя в браузере
– Асинхронно получать и обрабатывать данные
и многое другое
7 740
switch
Управляющая конструкция
switch позволяет выполнять различные блоки кода, в зависимости от значения переменной.
Похож на if...else, но решает более узкую задачу.
#переменные #switch7 740
True Figma - канал, где публикуются макеты Figma для практики вёрстки.
Макеты для вёрcтки - @true_figma
7 740
Цикл
Цикл — это повторяющаяся последовательность действий.
Цикл состоит из условия и тела цикла.
Перед запуском цикла проверяется условие. Если условие истинное, то выполняется блок кода, который называется телом цикла. Затем этот шаг повторяется. Так будет продолжаться, пока условие не станет ложным.
Каждое выполнение тела цикла называется итерацией.
JavaScript предоставляет несколько способов создания цикла. Самые распространённые из них —
while и for (инициализация; условие; завершающая операция) {}
#циклы7 740
if...else
Управляющая конструкция. В зависимости от условия выбирает, какой блок кода выполнить.
В разработке много задач, в которых нужно по-разному обрабатывать данные. Все эти примеры описываются фразой «если ..., то ...»:
- если пользователь вошёл в систему, то показать содержание почтового ящика. В противном случае — форму логина.
- если сумма покупки больше 2000₽, то посчитать скидку 10%.
- если покупка оплачена, то показать экран успеха. В противном случае — экран с ошибкой.
Фразой «если ...» определяется условие. Если условие выполняется, то мы выполняем часть, описанную фразой «то...». Если условие не выполняется, то нужно смотреть на фразу «В противном случае ...», когда она есть.
#переменные #if #else
7 740
if...else
Управляющая конструкция. В зависимости от условия выбирает, какой блок кода выполнить.
В разработке много задач, в которых нужно по-разному обрабатывать данные. Все эти примеры описываются фразой «если ..., то ...»:
- если пользователь вошёл в систему, то показать содержание почтового ящика. В противном случае — форму логина.
- если сумма покупки больше 2000₽, то посчитать скидку 10%.
- если покупка оплачена, то показать экран успеха. В противном случае — экран с ошибкой.
Фразой «если ...» определяется условие. Если условие выполняется, то мы выполняем часть, описанную фразой «то...». Если условие не выполняется, то нужно смотреть на фразу «В противном случае ...», когда она есть.
#переменные #if #else
7 740
Не используйте setAttribute для обработчиков
Такой вызов работать не будет, т.к.
setAttribute приводит все в строковый тип.
#браузер #документ #события7 740
🤬ДА БЛ**ТЬ🤬
Да-да, именно такая реакция у создателей курсов, когда они увидели этот канал с бесплатными курсами по:
>JavaScript (20гб видео)
>Python (64гб видео)
>C# (27гб курсов)
>Java (45гб видео)
>PHP (34гб видео)
>Go (23гб видео)
>Rust (37гб видео)
>SQL (41гб видео)
>MySQL (21гб видео)
>Другое (114гб видео)
ВСЕ БЕСПЛАТНО❤️
7 740
const
Это ключевое слово языка для объявления констант. Константа — переменная, значение которой нельзя переназначить.
Константы — те же переменные. Единственная разница в том, что их нельзя переопределить.
Если попробовать это сделать, то код упадёт с ошибкой TypeError: invalid assignment to const.
#переменные #const
7 740
Переменные
Переменные — это именованные контейнеры для хранения данных.
Для создания переменной используется ключевое слово
let, const или var. Сразу за ключевым словом идёт название переменной либо перечень переменных через запятую. Создание переменной также называют объявлением переменной.
#переменные #let #const #var7 740
Нужен человек, который хочет работать в IT, но не имеет опыта! Зарплата 70.000 рублей в месяц. Работа из дома.
Агентство NOP выкладывает айти вакансии, пользуясь которыми, даже новички без стажа и опыта получают от 70-160 тысяч в месяц, а люди с опытом от 350.000 рублей.
Работа на удалёнке: https://t.me/nuancesprogrecruiterremote
7 740
Блоки кода
Мы также можем использовать «простые» блоки кода
{...}, чтобы изолировать переменные в «локальной области видимости».
Например, в браузере все скрипты (кроме type="module") разделяют одну общую глобальную область. Так что, если мы создадим глобальную переменную в одном скрипте, она станет доступна и в других. Но это становится источником конфликтов, если два скрипта используют одно и то же имя переменной и перезаписывают друг друга.
Это может произойти, если название переменной – широко распространённое слово, а авторы скрипта не знают друг о друге.
Если мы хотим этого избежать, мы можем использовать блок кода для изоляции всего скрипта или какой-то его части(на картинке выше)
Из-за того, что у блока есть собственное лексическое окружение, код снаружи него (или в другом скрипте) не видит переменные этого блока.
#функции #блоки7 740
For, while
Для цикла у каждой итерации своё отдельное лексическое окружение. Если переменная объявлена в
for(let ...), то она также в нём
Обратите внимание: let i визуально находится снаружи {...}. Но конструкция for – особенная в этом смысле, у каждой итерации цикла своё собственное лексическое окружение с текущим i в нём.
И так же, как и в if, ниже цикла i невидима.
#циклы #for #while7 740
Хочешь научиться решать задачки с собеседований?
А представь, что все это в формате MMORPG бота, где ты можешь прокачивать своего пресонажа, батлиться с друзьями, проходить собесы в разные IT компании и главное - прокачивать себя как разработчика!
В Dev’s Battle ты найдешь:
👉 1000+ задачек по JS, Java и Python
👉 2000+ активных игроков
👉 7 компаний для собеседований. От Рабов Галерных до Facebook
👉 Прокачку и развитие внутриигрового персонажа
👉 Фан и общение с другими разработчиками
Все это бесплатно, с небольшим кринжом и крутым комьюнити!
😎 Залетай в Dev’s Battle, если, конечно, сможешь…
7 740
Вложенные функции
Функция называется «вложенной», когда она создаётся внутри другой функции. Это очень легко сделать в JavaScript.
Мы можем использовать это для упорядочивания нашего кода, например, как в картинке выше.
Здесь вложенная функция
getFullName() создана для удобства. Она может получить доступ к внешним переменным и, значит, вывести полное имя. В JavaScript вложенные функции используются очень часто.
Что ещё интереснее, вложенная функция может быть возвращена: либо в качестве свойства нового объекта (если внешняя функция создаёт объект с методами), либо сама по себе. И затем может быть использована в любом месте. Не важно где, она всё так же будет иметь доступ к тем же внешним переменным.7 740
Function Declaration
В отличие от переменных, объявленных с помощью
let, они полностью инициализируются не тогда, когда выполнение доходит до них, а раньше, когда создаётся лексическое окружение.
Для верхнеуровневых функций это означает момент, когда скрипт начинает выполнение.
Вот почему мы можем вызвать функцию, объявленную через Function Declaration, до того, как она определена.
Следующий код демонстрирует, что уже с самого начала в лексическом окружении что-то есть. Там есть say, потому что это Function Declaration. И позже там появится phrase, объявленное через let
#функции #function_declaration7 740
7 740
Нестандартные атрибуты, dataset
Все атрибуты, начинающиеся с префикса «
data-», зарезервированы для использования программистами. Они доступны в свойстве dataset.
Например, если у elem есть атрибут "data-about", то обратиться к нему можно как elem.dataset.about.
Как в примере на картинке.
Вже доступно! Дослідження Telegram за 2025 — головні інсайти року 
