Получи случайную криптовалюту за регистрацию!

JavaScript заметки

Логотип телеграм канала @notesjs — JavaScript заметки J
Логотип телеграм канала @notesjs — JavaScript заметки
Адрес канала: @notesjs
Категории: Технологии
Язык: Русский
Количество подписчиков: 9.43K
Описание канала:

Регулярные заметки по практическому JavaScript. Обучащию посты позволят прокачать навыки во Frontend-разработке.
Можно почитать пока компилируется проект :)
Сотрудничество: @noname_media
Канал на бирже: telega.in/channels/notesjs/card?r=Wj7h1mbl

Рейтинги и Отзывы

2.50

2 отзыва

Оценить канал notesjs и оставить отзыв — могут только зарегестрированные пользователи. Все отзывы проходят модерацию.

5 звезд

0

4 звезд

0

3 звезд

1

2 звезд

1

1 звезд

0


Последние сообщения

2022-09-01 14:05:42
Создание сообщения

В нашем случае сообщение – это div с классом alert и HTML в нём.

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

#браузер #документ #изменение
390 views11:05
Открыть/Комментировать
2022-09-01 11:05:22
​​Как сделать код чистым и простым? 10 лайфхаков, которые должен знать каждый разработчик.

1. Логическое преобразование с помощью оператора !!

Оператор !! может использоваться для быстрого преобразования результата в булево true или false. Вот как это сделать:

const greeting = 'Hello there!';
console.log(!!greeting) // returns true
const noGreeting = '';
console.log(!!noGreeting); // returns false

2. Проверка наличия свойства в объекте

С помощью ключевого слова in можно проверить наличие свойства в объекте JavaScript. Вот как это делается:

const person = { name: 'John Doe', salary: 1000 };
console.log('salary' in person); // returns true
console.log('age' in person); // returns false

Остальные пункты ты найдешь на канале Тостер. Наши читатели уже знают все секреты идеального кода, узнай и ты

На канале каждый день публикуются подробные разборы заданий, тесты, ответы на вопросы, видео-уроки и вакансии для фронтендеров

Подписывайся и прокачивай свой код
752 views08:05
Открыть/Комментировать
2022-09-01 10:05:22
Создание элемента

DOM-узел можно создать двумя методами:

document.createElement(tag) - создаёт новый элемент с заданным тегом.

document.createTextNode(text) - создаёт новый текстовый узел с заданным текстом.

Большую часть времени нам нужно создавать узлы элементов, такие как div для сообщения.

#браузер #документ #изменение
797 views07:05
Открыть/Комментировать
2022-08-31 21:10:51
Пример: показать сообщение

Рассмотрим методы изменения документа на примере – а именно, добавим на страницу сообщение, которое будет выглядеть получше, чем alert.

Это был пример HTML. Далее мы будем создавать такой же div, используя JavaScript (предполагаем, что стили в HTML или во внешнем CSS-файле).

#браузер #документ #изменение
1.1K views18:10
Открыть/Комментировать
2022-08-31 18:06:31
Чтобы найти хороший код для внедрения в проект - нужно постараться, а канал CodePen.is поможет с этим.

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

Дерзай, заходи и будь как дома в семье CodePen.is
1.1K viewsedited  15:06
Открыть/Комментировать
2022-08-31 16:05:10
"Зарезервированные" атрибуты (dataset)

Все атрибуты, начинающиеся с префикса «data-», зарезервированы для использования программистами. Они доступны в свойстве dataset.

Например, если у elem есть атрибут "data-about", то обратиться к нему можно как elem.dataset.about.

Атрибуты, состоящие из нескольких слов, к примеру data-order-state, становятся свойствами, записанными с помощью верблюжьей нотации (CamelCase): dataset.orderState.

См. переписанный пример «состояния заказа» на картинке выше.

Использование data-* атрибутов – валидный, безопасный способ передачи пользовательских данных.

#браузер #документ #атрибуты_свойств
1.1K views13:05
Открыть/Комментировать
2022-08-31 14:05:49
Атрибуты для стилизации элементов

Например, здесь для состояния заказа используется атрибут order-state (см. картинку выше).

Почему атрибут может быть предпочтительнее таких классов, как .order-state-new, .order-state-pending, order-state-canceled?

Это потому, что атрибутом удобнее управлять. Состояние может быть изменено достаточно просто.

#браузер #документ #атрибуты_свойств
1.2K views11:05
Открыть/Комментировать
2022-08-31 11:05:48
Привет!

Меня всё ещё зовут Сергей и я Senior Frontend-разработчик из Хельсинки.

Хотя формально, тимлид. Но это сейчас не так важно.

А вот что важно: на канале «Будни разработчика» я выкладываю интересные находки, помогающие в моей работе.

Статьи, заметки, фишки, опросы и разбор багов браузеров.

Подпишись, скучно не будет!

P. S. Моя компания ищет фронтов. Пишите.
1.2K views08:05
Открыть/Комментировать
2022-08-31 10:05:29
Нестандартные атрибуты, dataset

При написании HTML мы используем много стандартных атрибутов. Но что насчёт нестандартных, пользовательских? Давайте посмотрим, полезны они или нет, и для чего они нужны.

Иногда нестандартные атрибуты используются для передачи пользовательских данных из HTML в JavaScript, или чтобы «помечать» HTML-элементы для JavaScript.

#браузер #документ #атрибуты_свойств
1.2K views07:05
Открыть/Комментировать
2022-08-30 16:05:16
DOM-свойства типизированы

DOM-свойства не всегда являются строками. Например, свойство input.checked (для чекбоксов) имеет логический тип.

Есть и другие примеры. Атрибут style – строка, но свойство style является объектом.

Хотя большинство свойств, всё же, строки.

При этом некоторые из них, хоть и строки, могут отличаться от атрибутов. Например, DOM-свойство href всегда содержит полный URL, даже если атрибут содержит относительный URL или просто #hash.

#браузер #документ #свойства_узлов
1.4K views13:05
Открыть/Комментировать