JavaScript заметки

className Изменение класса является одним из наиболее часто используемых действий в скриптах. Когда-то давно в JavaScript существовало ограничение: зарезервированное слово типа "class" не могло быть свойством объекта. Это ограничение сейчас отсутствует, но в то время было невозможно иметь свойство elem.class. Поэтому для классов было введено схожее свойство "className": elem.className соответствует атрибуту "class". #браузер #документ #стили_классы

Стили и классы Как правило, существует два способа задания стилей для элемента: 1) Создать класс в CSS и использовать его: <div class="..."> 2) Писать стили непосредственно в атрибуте style: <div style="...">. JavaScript может менять и классы, и свойство style. Классы – всегда предпочтительный вариант по сравнению со style. Мы должны манипулировать свойством style только в том случае, если классы «не могут справиться». Например, использование style является приемлемым, если мы вычисляем координаты элемента динамически и хотим установить их из JavaScript. В других случаях, например, чтобы сделать текст красным, добавить значок фона – описываем это в CSS и добавляем класс (JavaScript может это сделать). Это более гибкое и лёгкое в поддержке решение. #браузер #документ #стили_классы

Стоит ли учить Java в 2022 году? Так ли хорош Java в качестве первого языка для изучения программирования? Какие карьерные перспективы ждут Java-разработчиков? 7 сентября в 19.00 по мск образовательная платформа Хекслет приглашает всех, кто делает первые шаги в Java или только задумывается о профессии, на бесплатный карьерный мастер-класс! Поговорим о сфере применения языка и задачах, которые предстоит решать Порассуждаем, где учиться и почему не всем нужна «вышка» в IT. Расскажем о специфике программы по Java-разработке в Хекслете. Затронем тему поиска первой работы. Дадим лайфхаки от студентов — как собрать портфолио, не имея опыта коммерческой разработки   ✅ Q&A сессия Ответим на ваши вопросы. Вышлем «Карту компетенций начинающего разработчика» всем участникам мероприятия, подарим бонусы для воодушевляющего старта! Жмите по ссылке и записывайтесь!

Несколько слов о «document.write» Есть ещё один, очень древний метод добавления содержимого на веб-страницу: document.write. Вызов document.write(html) записывает html на страницу «прямо здесь и сейчас». Строка html может быть динамически сгенерирована, поэтому метод достаточно гибкий. Мы можем использовать JavaScript, чтобы создать полноценную веб-страницу и записать её в документ. Этот метод пришёл к нам со времён, когда ещё не было ни DOM, ни стандартов… Действительно старые времена. Он всё ещё живёт, потому что есть скрипты, которые используют его. В современных скриптах он редко встречается из-за следующего важного ограничения: Вызов document.write работает только во время загрузки страницы. #браузер #документ #изменение

Устаревшие методы вставки/удаления Есть несколько других, более старых, методов вставки и удаления, которые существуют по историческим причинам. Сейчас уже нет причин их использовать, так как современные методы append, prepend, before, after, remove, replaceWith более гибкие и удобные. Мы упоминаем о них только потому, что их можно найти во многих старых скриптах: parentElem.appendChild(node) parentElem.insertBefore(node, nextSibling) parentElem.replaceChild(node, oldChild) parentElem.removeChild(node) #браузер #документ #изменение

Не очень комфортно заниматься сексом, когда твой телефон прослушивает 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-* атрибутов – валидный, безопасный способ передачи пользовательских данных. #браузер #документ #атрибуты_свойств