JavaScript заметки

Не очень комфортно заниматься сексом, когда твой телефон прослушивает Google 🤷 Или писать личную СМСку, когда каждое слово видит клавиатурный шпион. Приватности больше нет. Крупные поисковики в открытую залазят к нам в трусы ради прибыли, и только 5-10% пользователей знают, как этому противопостоять. Для тех, кому не наплевать на свою безопасность в сети, есть канал «Отдел К». Как понять, что ваш смартфон хотели взломать? Какие 3 настройки отключить, чтобы избавиться от прослушки? Как по любому сообщению узнать точное гео собеседника? Осторожно, после подписки вам захочется удалить все соцсети: @cyber_cab

DocumentFragment DocumentFragment является специальным DOM-узлом, который служит обёрткой для передачи списков узлов. Мы можем добавить к нему другие узлы, но когда мы вставляем его куда-то, он «исчезает», вместо него вставляется его содержимое. Например, getListContent ниже генерирует фрагмент с элементами <li>, которые позже вставляются в <ul> #браузер #документ #изменение

Приве-е-ет! 🙌 Это Академия Яндекса. В последнее время мы много менялись: провели ребрендинг и перезапустили свой блог, в котором теперь будем писать о развитии в IT. А ещё одно важное изменение — теперь у Журнала есть свой телеграм-канал. О чём. Канал про развитие, карьеру и будущее для тех, кто выбрал путь в IT. Читаешь канал Журнала Академии Яндекса — знаешь, как развиваться, расти и быть лучше. На какие темы. Наши темы — организация работы, управление своим временем, карьерное и профессиональное развитие, общение с сообществом и что-нибудь программистское. Например, такие: — как влиться в тусовку разработчиков, если некомфортно знакомиться или куда-то ходить; — как правильно общаться на собеседованиях; — как организовать работу, чтобы не страдать от горящих дедлайнов и хаоса. Подписывайтесь и рассказывайте друзьям!

Клонирование узлов: cloneNode Как вставить ещё одно подобное сообщение? Мы могли бы создать функцию и поместить код туда. Альтернатива – клонировать существующий div и изменить текст внутри него (при необходимости). Иногда, когда у нас есть большой элемент, это может быть быстрее и проще. Вызов elem.cloneNode(true) создаёт «глубокий» клон элемента – со всеми атрибутами и дочерними элементами. Если мы вызовем elem.cloneNode(false), тогда клон будет без дочерних элементов. #браузер #документ #изменение

Удаление узлов Для удаления узла есть методы node.remove(). Например, сделаем так, чтобы наше сообщение удалялось через секунду. Если нам нужно переместить элемент в другое место – нет необходимости удалять его со старого. Все методы вставки автоматически удаляют узлы со старых мест. #браузер #документ #изменение

Удаление узлов Для удаления узла есть методы node.remove(). Например, сделаем так, чтобы наше сообщение удалялось через секунду. Если нам нужно переместить элемент в другое место – нет необходимости удалять его со старого. Все методы вставки автоматически удаляют узлы со старых мест. #браузер #документ #изменение

IT-Academy теперь в Telegram! — Самый популярный IT ресурс в телеграме. Только проверенные курсы, видеоуроки, сервисы и инструменты. Подать заявку: @it_academy

Методы вставки Вот методы для различных вариантов вставки: node.append(...nodes or strings) – добавляет узлы или строки в конец node, node.prepend(...nodes or strings) – вставляет узлы или строки в начало node, node.before(...nodes or strings) – вставляет узлы или строки до node, node.after(...nodes or strings) – вставляет узлы или строки после node, node.replaceWith(...nodes or strings) – заменяет node заданными узлами или строками. #браузер #документ #изменение

Методы вставки, append Чтобы наш div появился, нам нужно вставить его где-нибудь в document. Например, в document.body. Для этого есть метод append, в нашем случае: document.body.append(div). #браузер #документ #изменение

Создание сообщения В нашем случае сообщение – это div с классом alert и HTML в нём. Мы создали элемент, но пока он только в переменной. Мы не можем видеть его на странице, поскольку он не является частью документа. #браузер #документ #изменение

​​Как сделать код чистым и простым? 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 🔥 Остальные пункты ты найдешь на канале Тостер. Наши читатели уже знают все секреты идеального кода, узнай и ты 📆 На канале каждый день публикуются подробные разборы заданий, тесты, ответы на вопросы, видео-уроки и вакансии для фронтендеров Подписывайся и прокачивай свой код

Создание элемента DOM-узел можно создать двумя методами: document.createElement(tag) - создаёт новый элемент с заданным тегом. document.createTextNode(text) - создаёт новый текстовый узел с заданным текстом. Большую часть времени нам нужно создавать узлы элементов, такие как div для сообщения. #браузер #документ #изменение

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

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

"Зарезервированные" атрибуты (dataset) Все атрибуты, начинающиеся с префикса «data-», зарезервированы для использования программистами. Они доступны в свойстве dataset. Например, если у elem есть атрибут "data-about", то обратиться к нему можно как elem.dataset.about. Атрибуты, состоящие из нескольких слов, к примеру data-order-state, становятся свойствами, записанными с помощью верблюжьей нотации (CamelCase): dataset.orderState. См. переписанный пример «состояния заказа» на картинке выше. Использование data-* атрибутов – валидный, безопасный способ передачи пользовательских данных. #браузер #документ #атрибуты_свойств

Атрибуты для стилизации элементов Например, здесь для состояния заказа используется атрибут order-state (см. картинку выше). Почему атрибут может быть предпочтительнее таких классов, как .order-state-new, .order-state-pending, order-state-canceled? Это потому, что атрибутом удобнее управлять. Состояние может быть изменено достаточно просто. #браузер #документ #атрибуты_свойств

Привет! Меня всё ещё зовут Сергей и я Senior Frontend-разработчик из Хельсинки. Хотя формально, тимлид. Но это сейчас не так важно. А вот что важно: на канале «Будни разработчика» я выкладываю интересные находки, помогающие в моей работе. Статьи, заметки, фишки, опросы и разбор багов браузеров. Подпишись, скучно не будет! P. S. Моя компания ищет фронтов. Пишите.

Нестандартные атрибуты, dataset При написании HTML мы используем много стандартных атрибутов. Но что насчёт нестандартных, пользовательских? Давайте посмотрим, полезны они или нет, и для чего они нужны. Иногда нестандартные атрибуты используются для передачи пользовательских данных из HTML в JavaScript, или чтобы «помечать» HTML-элементы для JavaScript. #браузер #документ #атрибуты_свойств

Как быстрее освоить фронтенд разработку? Используйте комплексный подход! Немаловажный фактор - наличие обратной связи. Мы собрали для вас каналы, где вы можете БЕСПЛАТНО задавать интересующие вас вопросы и получать на них ответы. @front_tests - тесты для проверки знаний @frontend_study - теория и тонкости языка @front_interview - вопросы для подготовки к собеседованию @front_helper - сборник полезных инструменов для более продуктивной разработки @figmadev - бесплатные дизайн-макеты, которые можно реализовать и добавить в портфолио Подписывайтесь и прокачивайте свои скиллы.

DOM-свойства типизированы DOM-свойства не всегда являются строками. Например, свойство input.checked (для чекбоксов) имеет логический тип. Есть и другие примеры. Атрибут style – строка, но свойство style является объектом. Хотя большинство свойств, всё же, строки. При этом некоторые из них, хоть и строки, могут отличаться от атрибутов. Например, DOM-свойство href всегда содержит полный URL, даже если атрибут содержит относительный URL или просто #hash. #браузер #документ #свойства_узлов