Available now! Telegram Research 2025 — the year's key insights 
JavaScript заметки
Open in Telegram
Регулярные заметки по практическому JavaScript. Обучащию посты позволят прокачать навыки во Frontend-разработке. Можно почитать пока компилируется проект :) Сотрудничество: @noname_media Канал на бирже: telega.in/channels/notesjs/card?r=Wj7h1mbl
Show more7 737
Subscribers
-324 hours
-77 days
-5430 days
Posts Archive
7 737
💡 JavaScript - канал, в котором админ рассказывает сложный javascript человеческим языком.
Подписывайся, если хочешь прокачать JS и повысить свой чек за работу - t.me/simple_js
7 737
Хочешь постоянно практиковаться в решении задач и получать подробное объяснение?
Тогда подписывайся на JavaScript | Тесты для проверки знаний! Здесь ты найдешь огромное количество задач по JS с подробными объяснениями! Идеально подойдёт для тех разработчиков, которые хотят постоянно улучшать свои знания и развиваться вширь.
Можно почитать пока компилируется проект :)
Переходи и развивайся ежедневно! 👇
7 737
Symbol.iterator
Symbol.iterator - специальный встроенный
Symbol , который позволяет сделать объект итерируемым.
Например, у нас есть объект range, который представляет собой диапазон чисел. Чтобы сделать range итерируемым (и позволить for..of работать с ним), нам нужно добавить в объект метод с именем Symbol.iterator.
- Когда цикл for..of запускается, он вызывает этот метод один раз (или выдаёт ошибку, если метод не найден). Этот метод должен вернуть итератор – объект с методом next.
- Дальше for..of работает только с этим возвращённым объектом.
- Когда for..of хочет получить следующее значение, он вызывает метод next() этого объекта.
- Результат вызова next() должен иметь вид {done: Boolean, value: any}, где done=true означает, что итерация закончена, в противном случае value содержит очередное значение.
#перебираемые_объекты #symbol_iterator7 737
Set
Объект Set – это особый вид коллекции: «множество» значений (без ключей), где каждое значение может появляться только один раз.
Его основные методы это:
-
new Set(iterable) – создаёт Set, и если в качестве аргумента был предоставлен итерируемый объект (обычно это массив), то копирует его значения в новый Set.
- set.add(value) – добавляет значение (если оно уже есть, то ничего не делает), возвращает тот же объект set.
- set.delete(value) – удаляет значение, возвращает true, если value было в множестве на момент вызова, иначе false.
- set.has(value) – возвращает true, если значение присутствует в множестве, иначе false.
- set.clear() – удаляет все имеющиеся значения.
- set.size – возвращает количество элементов в множестве.
Основная «изюминка» – это то, что при повторных вызовах set.add() с одним и тем же значением ничего не происходит, за счёт этого как раз и получается, что каждое значение появляется один раз.
#set #словари7 737
True Figma - канал, где публикуется макеты Figma для практики вёрстки.
Макеты для вёрcтки - > @true_figma
7 737
У стрелочных функций нет «this»
Стрелочные функции особенные: у них нет своего «собственного»
this.
Если мы используем this внутри стрелочной функции, то его значение берётся из внешней «нормальной» функции.
Например, на картинке выше arrow() использует значение this из внешнего метода user.sayHi().
Это является особенностью стрелочных функций. Они полезны, когда мы на самом деле не хотим иметь отдельное значение this, а хотим брать его из внешнего контекста.
#this #стрелочные_функции7 737
Прокачивай навыки JavaScript решая практические тесты!
На нашем втором канале JavaScript тесты каждый день выходят викторины на знание особенностей языка.
Подпишись, чтобы не потерять 👇
#javascript #тесты
7 737
Прокачивай свой технический английский без больших усилий, уделяя 5 минут в день!
На этом канале регулярно публикуют самые популярные слова и выражения из мира IT.
Подойдет всем IT-специалистам, которые хотят без труда читать документацию на английском и свободно общаться с иностранными заказчиками.
Подписывайся на @enforit и качай свой инглиш, пока компилируется проект👌
7 737
DOM-дерево
Основой HTML-документа являются теги.
В соответствии с объектной моделью документа («Document Object Model», коротко DOM), каждый HTML-тег является объектом. Вложенные теги являются «детьми» родительского элемента. Текст, который находится внутри тега, также является объектом.
Все эти объекты доступны при помощи JavaScript, мы можем использовать их для изменения страницы.
Например,
document.body – объект для тега <body>.
Если запустить код на картинке выше, то <body> станет красным на 3 секунды:
#DOM #документ7 737
Как выделиться среди других верстальщиков и забрать заказ себе?
Лучший способ — наполнить свое портфолио настоящими работами, а не учебными!
Макеты для вёрстки сайтов - канал, где собраны уникальные примеры реальных макетов, которые заказчики присылают на вёрстку.
Присоединяйся к @uniquetemplates и строй свое сильное портфолио уже сегодня!
7 737
new.target
Используя специальное свойство
new.target внутри функции, мы можем проверить, вызвана ли функция при помощи оператора new или без него.
В случае, если функция вызвана при помощи new, то в new.target будет сама функция, в противном случае undefined.
Это можно использовать, чтобы отличить обычный вызов от вызова «в режиме конструктора».
Такой подход иногда используется в библиотеках для создания более гибкого синтаксиса, который позволяет разработчикам вызывать функции при помощи оператора new или без него.
#new_target #объекты7 737
Имена переменных
В JavaScript есть два ограничения, касающиеся имён переменных:
- Имя переменной должно содержать только буквы, цифры или символы
$ и _.
- Первый символ не должен быть цифрой.
Если имя содержит несколько слов, обычно используется верблюжья нотация, то есть, слова следуют одно за другим, где каждое следующее слово начинается с заглавной буквы: myVeryLongName.
Самое интересное – знак доллара '$' и подчёркивание '_' также можно использовать в названиях.
Это обычные символы, как и буквы, без какого-либо особого значения.
Важно помнить!!! Регистр имеет значение. Переменные с именами apple и AppLE – это две разные переменные.
#имена_переменных #основы7 737
@davidobryakov — фуллстак-разработчик (Django + Vue / Node + Vue), преподает в Университете ИТМО (видео-лекции есть на личном YouTube-канале).
В блоге рассказывает о современной веб-разработке: важных событиях сферы, интересных статьях и находках среди открытых решений.
7 737
Глобальный объект
Глобальный объект предоставляет переменные и функции, доступные в любом месте программы.
По умолчанию это те, что встроены в язык или среду исполнения.
В браузере он называется
window, в Node.js — global, в другой среде исполнения может называться иначе.
Недавно globalThis был добавлен в язык как стандартизированное имя для глобального объекта, которое должно поддерживаться в любом окружении.
Ко всем свойствам глобального объекта можно обращаться напрямую.
В браузере глобальные функции и переменные, объявленные с помощью var (не let/const!), становятся свойствами глобального объекта.
#глобальный_объект #window7 737
ТехноГайд | Большой справочник программиста
В канале @Techno_guids тебя ждут полезные видеоуроки, лайфхаки и подробные инструкции, которые можно сразу применять в работе.
7 737
Браузерные события
Событие – это сигнал от браузера о том, что что-то произошло.
Все DOM-узлы подают такие сигналы (хотя события бывают и не только в DOM).
Вот список самых часто используемых DOM-событий:
События мыши:
-
click – происходит, когда кликнули на элемент левой кнопкой мыши (на устройствах с сенсорными экранами оно происходит при касании).
- contextmenu – происходит, когда кликнули на элемент правой кнопкой мыши.
- mouseover / mouseout – когда мышь наводится на / покидает элемент.
- mousedown / mouseup – когда нажали / отжали кнопку мыши на элементе.
- mousemove – при движении мыши.
События на элементах управления:
- submit – пользователь отправил форму <form>.
- focus – пользователь фокусируется на элементе, например нажимает на <input>.
Клавиатурные события:
- keydown и keyup – когда пользователь нажимает / отпускает клавишу.
#браузерные_события #DOM7 737
Какой стек выбрать для разработки web приложений?
Подпишись на Web Stack и узнаешь как разрабатывать современные веб приложения, какие фреймворки использовать на фронте и беке и как писать чистый код.
Админы собирают топовые статьи по front end и backend разработке, фишки ЯП и лучшие практики разработки.
Пиши приложения как профи с Web Stack!
7 737
Function Expression
Функция в JavaScript – это не магическая языковая структура, а особого типа значение.
Синтаксис, который часто используется называется Function Declaration (Объявление Функции).
Существует ещё один синтаксис создания функций, который называется Function Expression (Функциональное Выражение).
На картинке выше функция создаётся и явно присваивается переменной, как любое другое значение. По сути без разницы, как мы определили функцию, это просто значение, хранимое в переменной
sayHi.
Смысл обоих примеров кода одинаков: "создать функцию и поместить её значение в переменную sayHi"
#функции #function_expression7 737
Благодаря этому каналу JavaScript будет тебя бояться!
Хватит думать, что JS сложный. Это всего лишь коробка с инструкциями для решения задач. В канале JS mentor эти инструкции описаны простым и понятным языком.
Подпишись и прокачайся, уделяя всего 5 минут в день
