JavaScript заметки
رفتن به کانال در Telegram
Регулярные заметки по практическому JavaScript. Обучащию посты позволят прокачать навыки во Frontend-разработке. Можно почитать пока компилируется проект :) Сотрудничество: @noname_media Канал на бирже: telega.in/channels/notesjs/card?r=Wj7h1mbl
نمایش بیشتر7 740
مشترکین
-124 ساعت
-77 روز
-5930 روز
آرشیو پست ها
7 741
.cookie
При разработке сайтов часть информации (например,
токен авторизации или данные пользователя) нужно хранить и читать как в браузере, так и на сервере. Для этого используют Cookie (произносится «куки»).
Куки передаются в виде HTTP-заголовка, это накладывает на них ограничения. Например, максимальный размер куки в 4096 байт или отсутствие в содержимом пробелов или запятых. Чтобы обезопасить содержимое, можно закодировать его с помощью функции encodeURIComponent().
#Объект_страницы
Подробнее7 741
.getAttribute()
Метод
getAttribute() позволяет получить значение указанного атрибута у HTML-элемента. Если атрибута нет, то метод вернёт null.
#Элемент_на_странице
Подробнее7 741
.forms
forms — это поле объекта document. Оно хранит коллекцию всех элементов <form>, которые есть на текущей странице.
Коллекция доступна только для чтения.
#Объект_страницы
Подробнее7 741
.getElementById()
Метод объекта
document, который позволяет найти элемент на веб-странице по его идентификатору (атрибут id). Возвращает Element или null, если ничего не нашлось.
#Объект_страницы
Подробнее7 741
📌 Бесплатное обучение по дизайну с нуля. Вместе сделаем тебе портфолио из 3+ новых работ
Что ты получишь?
- Фидбэк (разбор всех ДЗ от куратора)
- Тусовка (личный кабинет с уроками + живой чат)
- Портфолио (упакуем по урокам и проверим)
- Экзамен (аттестация и балл)
Будем делать: веб-дизайн, графический дизайн, анимация интерфейсов - https://t.me/YudaevSchoolmkbot?start=ZGw6MTA1NTcw
Программа обучения:
- Как работать в Figma с нуля
- Изучение основ дизайна (сетки, композиция т.д.)
- Способы поиска контента и правильной работы с ним
- Создание анимации интерфейса
- 4 домашних задания
- Личные разборы от наставника (дизайнер с опытом и доходом от 100к)
- Эфир - "Как найти себе первого клиента"
👉 Переходи в чат, там тебя уже ждут кураторы, уроки, домашки и живое общение! - https://t.me/YudaevSchoolmkbot?start=ZGw6MTA1NTcw
7 741
.removeEventListener()
Удаляет обработчик события с элемента, установленный с помощью
addEventListener().
#Объект_страницы
Подробнее7 741
.addEventListener()
Добавляет элементу
действие, которое будет выполнено после срабатывания события. Например, на клик мышки или нажатие клавиши.
#Объект_страницы
Подробнее7 741
CodePen Amazing - канал, на который выкладывают самые клевые проекты с
CodePen.
Смотрите, вдохновляйтесь, творите!
- > @codepen_amazing7 741
Событийная модель
Чтобы приложение было интерактивным, нам нужно понимать, что пользователь совершил то или иное действие на странице. Браузер распознает действия пользователя и создаёт событие.
События — это сигналы, которые браузер посылает разработчику, а разработчик может на сигнал реагировать.
События бывают разных типов: клик, нажатие клавиши на клавиатуре, прокрутка страницы и так далее.
Происходящие события можно обрабатывать и выполнять код, когда нужное событие происходит. Например, при клике на кнопку показывать всплывающее окно.
#Объектная_модель_документа_DOM
Подробнее7 741
Element
Элемент — это кусочек
HTML в DOM-дереве. Браузер создаёт DOM для взаимодействия между JavaScript и HTML. Каждый HTML-тег при этом превращается в элемент DOM. Ещё такие элементы называют узлами.
Из DOM можно получить элемент и изменить его. Браузер заметит изменения и отобразит их на странице.
#Объектная_модель_документа_DOM
Подробнее7 741
Команда DevEducation открывает набор на курс FrontEnd!
Длительность курса: 5 месяцев
Количество занятий: 5 в неделю
Продолжительность занятий: 2 часа
Курс рассчитан на интенсивную подготовку новичков без опыта в IT и продвижения их за 4 месяца до уровня Junior FrontEnd Developer.
После успешного выпуска студент имеет возможность пройти трехмесячную стажировку в международной IT-компании.
Подача заявки на курс на сайте — https://bit.ly/deveducation_js_notes
7 741
Хранение данных в браузере
При разработке современных
веб-сайтов достаточно часто необходимо сохранять данные на стороне клиента. Для таких целей в браузере существует несколько разных способов, которые появились в разное время и отличаются друг от друга.
#О_браузере
Подробнее7 741
Координаты
Чтобы перемещать и позиционировать элементы на экране в браузере имеется
система координат. Оси координат начинаются в левом верхнем углу экрана и идут вправо для оси x и вниз для оси y.
Позиционирование с помощью координат может быть относительно окна браузера или относительно отдельного элемента. Всего существует две системы координат: одна начинается от угла HTML-страницы (документа), а вторая от угла окна браузера. С помощью первой можно определять, как элемент расположен относительно всей страницы, а с помощью второй – как элемент расположен относительно окна браузера и того, что там находится. Объекты события мыши и тач-события содержат координаты места на экране и в документе, где событие произошло: pageX/pageY – для документа, clientX/clientY – для экрана.
#О_браузере
Подробнее7 741
Как браузер рисует страницы
Чтобы нарисовать на экране
результат работы нашего кода, браузеру нужно выполнить несколько этапов:
1. Сперва ему нужно скачать исходники.
2. Затем их нужно прочитать и распарсить.
3. После этого браузер приступает к рендерингу — отрисовке.
Каждый из процессов очень сложен, и мы не будем рассматривать их до мельчайших подробностей.
Мы лишь обратим внимание на те детали, которые необходимо знать фронтенд-разработчикам, чтобы лучше понимать, почему разные решения по-разному влияют на производительность и скорость отрисовки.
#О_браузере
Подробнее7 741
Intersection Observer
Intersection Observer — браузерный API, который позволяет асинхронно отслеживать пересечение элемента с его родителем или областью видимости документа (viewport). В момент пересечения можно запустить какое-либо действие, например, подгрузить дополнительные посты в ленте новостей («бесконечный скролл») или сделать «ленивую» загрузку контента.
#Браузерное_окружение
Подробнее7 741
Привет, это HTML Academy!
Принесли вам скидку 50% на чёрную пятницу — это отличная возможность самостоятельно научиться веб-разработке и сменить профессию.
Если интересно — оставьте заявку по ссылке и мы с вами свяжемся.
7 741
window.print()
Вызов метода
print() объекта window открывает стандартный диалог печати текущей страницы.
#Браузерное_окружение #windowprint
Подробнее7 741
window.open()
Метод
open() объекта window позволяет открывать ссылки в новом окне, в новой вкладке или в iframe.
#Браузерное_окружение
Подробнее7 741
.has()
Метод
has() проверяет, содержится ли значение в коллекции Set. Если значение есть в коллекции, метод вернёт true, в противном случае — false.
#множества #has
Подробнее7 741
Хотите освоить профессию фронтенд-разработчика в 3 раза быстрее, чем на обычном онлайн-курсе? Тогда станьте фронтенд-разработчиком в онлайн-буткемпе Хекслета!
✅ Мы переработали формат обучения — разбили классическую программу «Фронтенд-разработчик» на модули со спринтами и дедлайнами.
✅ Погрузили в продакшен. В рамках обучения студенты будут участвовать в Open Source проектах Хекслета и работать с чужим кодом, чтобы развить soft skills и повысить шансы на трудоустройство.
✅ Усилили поддержку наставника. Теперь он с вами на связи 8 часов в день. Будет больше активностей в чате и времени на каждого студента, чтобы помочь разобраться со сложностями.
✅ Сделали основной упор на практику. Помимо лайвкодинг-сессий, добавили формат практических разборов упражнений, консультаций. Вы будете очень много кодить: набивать руку и перестраивать мозг.
✅ Приблизили к трудоустройству. Собрали 2-недельный Карьерный трек из самых важных этапов подготовки к поиску работы. Готовое резюме, упакованное портфолио и настрой на успех.
Буткемп потребует от вас максимум включенности и личного времени. Будет сложно, но оно того стоит!🤘
اکنون در دسترس! پژوهش تلگرام ۲۰۲۵ — مهمترین بینشهای سال 
