Code Ready | Frontend – Telegram

Code Ready | Frontend

20K subscribers

699 photos

313 videos

17 files

468 links

Авторский канал по Frontend разработке.
Ресурсы, гайды, задачи, шпаргалки.
Информация ежедневно пополняется!

Автор: @energy_it

РКН: https://clck.ru/3NJCKs

Реклама на бирже: https://telega.in/c/code_ready

Download Telegram

About

Blog

Apps

Platform

Code Ready | Frontend

20K subscribers

Code Ready | Frontend

This media is not supported in your browser

VIEW IN TELEGRAM

📱

Переключаем видимость пароля

Этот код создает поле ввода пароля и чекбокс, который при активации переключает видимость пароля. При выборе чекбокса, тип ввода пароля меняется с "password" на "text" и наоборот.

<input type="password" id="passwordInput">
  <input type="checkbox" id="showPasswordCheckbox"> Показать пароль

const passwordInput = document.getElementById('passwordInput');
const showPasswordCheckbox = document.getElementById('showPasswordCheckbox');
showPasswordCheckbox.addEventListener('change', function() {
    if (showPasswordCheckbox.checked) {
        passwordInput.type = 'text';
    } else {
        passwordInput.type = 'password';}});

➡️

@code_ready | #обучение #js

Please open Telegram to view this post

VIEW IN TELEGRAM

👍38🔥5👎3

4.16K views05:49

Code Ready | Frontend

📱

Вопрос с собеседования

Что такое рекурсия в JS и как ею пользоваться?

Ответ:

Рекурсия — это техника программирования, при которой функция вызывает саму себя для решения задачи. Рекурсия часто используется для решения задач, которые можно разбить на более простые подзадачи того же типа.

• Принцип работы — Рекурсивная функция должна иметь базовый случай (условие завершения), который предотвращает бесконечные вызовы. Каждый рекурсивный вызов решает более простую версию исходной задачи, пока не будет достигнут базовый случай.

• Проблемы с производительностью — Рекурсивные функции могут потреблять много памяти из-за хранения большого количества вызовов в стеке. Это может привести к ошибке переполнения стека (stack overflow), если глубина рекурсии слишком велика.

➡️

@code_ready | #собеседование #js

Please open Telegram to view this post

VIEW IN TELEGRAM

👍24🔥7

4.63K views07:14

Code Ready | Frontend

📱

Как работает Array.prototype,map() в JS?

Array.prototype,map() создает новый массив, заполняя его результатами вызова указанной функции для каждого элемента массива, по которому он был вызван.

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

Можно использовать map() для преобразования массива чисел в массив их квадратов или для извлечения определенных свойств из объектов.

➡️

@code_ready | #метод #js

Please open Telegram to view this post

VIEW IN TELEGRAM

👍17🔥7👎2

4.43K views16:34

Code Ready | Frontend

📱

Извлечение значений параметров из URL

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

Это необходимо для динамической обработки данных, передаваемых через URL, что часто используется в веб-приложениях для фильтрации и сортировки, обработки данных, переданных через GET-запросы и сохранения состояния страницы.

Важно помнить, что метод get() возвращает null, если параметр отсутствует в URL. Поэтому стоит учитывать это при обработке значений.

➡️

@code_ready | #гайд #js

Please open Telegram to view this post

VIEW IN TELEGRAM

👍18🔥8

4.52K views13:14

Code Ready | Frontend

👩‍💻

Использование метода reduce() для подсчета частоты элементов в массиве.

🔊Таким образом мы можем подсчитывать количество вхождений каждого элемента в массиве и возвращать объект с уникальными элементами в качестве ключей и их частотой в качестве значений.

Метод reduce используется для обработки массивов, сводя их к единственному значению. Он принимает функцию обратного вызова и необязательное начальное значение.

🔊В этом примере мы используем его, чтобы пройти по массиву и создать объект, где ключами являются элементы массива, а значениями — количество их вхождений. Это позволяет быстро получить информацию о частоте элементов.

➡️

@code_ready | #трюк #js

Please open Telegram to view this post

VIEW IN TELEGRAM

👍19🔥11

4.77K views14:14

Code Ready | Frontend

📱

Вопрос с собеседования

Что такое WeakMap в JavaScript?

Ответ:

WeakMap — это коллекция пар "ключ-значение", где ключи являются объектами, а значения могут быть любого типа. Ключи в WeakMap являются слабыми ссылками, что позволяет им быть собранными сборщиком мусора, если на них больше нет сильных ссылок.

Методы WeakMap:

• set(key, value) — Добавляет пару ключ-значение в WeakMap.

• get(key) — Возвращает значение, связанное с указанным ключом. Если ключ не найден, возвращает undefined.

• has(key) — Проверяет наличие ключа в WeakMap.

• delete(key) — Удаляет элемент по указанному ключу.

➡️

@code_ready | #собеседование #js

Please open Telegram to view this post

VIEW IN TELEGRAM

👍22🔥3

5.57K views06:06

Code Ready | Frontend

📱

Работа с Fetch API для выполнения HTTP-запросов

Fetch API — это современный интерфейс для выполнения HTTP-запросов GET и POST. Он предоставляет простой и удобный способ взаимодействия с веб-сервисами и получения данных с серверов, что особенно важно для создания динамичных веб-приложений.

Fetch API отличается простотой использования, поддержкой промисов, возможностью настройки HTTP-запросов и обработкой различных форматов ответов (JSON, текст и др.)

➡️

@code_ready | #гайд #js

Please open Telegram to view this post

VIEW IN TELEGRAM

Please open Telegram to view this post

VIEW IN TELEGRAM

👍21🔥6

6.45K views11:31

Code Ready | Frontend

👩‍💻

Методы для работы с объектом Math

Привет! В этом посте разберём основные методы для работы с математическими операциями, а так же познакомимся с библиотеками для работы с математикой.

🔥 — если было полезно

📣 Code Ready | #метод #js

Please open Telegram to view this post

VIEW IN TELEGRAM

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥42👍17

5.26K views13:27

Code Ready | Frontend

👩‍💻

Работа с локальным хранилищем в JS

Local Storage — это механизм для хранения данных в браузере, который позволяет сохранять информацию в формате пар ключ-значение и обеспечивает доступ к ней даже после перезагрузки страницы.

Вот основные методы для работы:

• setItem — Сохраняет значение по ключу.
• getItem — Извлекает значение по указанному ключу.
• removeItem — Удаляет значение по указанному ключу.
• clear — Очищает все данные из локального хранилища.
• length — Возвращает количество элементов в локальном хранилище.
• key — Возвращает имя ключа по его индексу.

🔥 — если было полезно

📣 Code Ready | #гайд #js

Please open Telegram to view this post

VIEW IN TELEGRAM

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥45👍10

6.25K views14:29

Code Ready | Frontend

👩‍💻

Шпаргалка по методам строк

Она предоставляет список основных методов для работы со строками в JS. Каждый метод сопровождается кратким описанием его функциональности.

📣 Code Ready | #js #шпаргалка

Please open Telegram to view this post

VIEW IN TELEGRAM

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥48👍19

7.12K views10:34

Code Ready | Frontend

👩‍💻

Шпаргалка по методам Set

Set — коллекция уникальных значений любого типа данных. Используется для хранения уникальных элементов в произвольном порядке.

📣 Code Ready | #js #шпаргалка

Please open Telegram to view this post

VIEW IN TELEGRAM

Please open Telegram to view this post

VIEW IN TELEGRAM

2👍36🔥9

6.05K views15:12

Code Ready | Frontend

This media is not supported in your browser

VIEW IN TELEGRAM

👩‍💻

Popup-окно на CSS и JS

Привет! Сегодня мы создадим один из важнейших элементов на любом сайте — popup-окно.

Основополагающим свойством для его создания является свойство display, с помощью которого мы будем управлять видимостью элемента на странице.

🔥 — если было полезно

📣 Code Ready | #гайд #css #js

Please open Telegram to view this post

VIEW IN TELEGRAM

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥73👍10🤝2

6.39K views14:12

Code Ready | Frontend

👩‍💻

Создание и использование кастомных событий

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

Это помогает организовать код и улучшить его читаемость, позволяя реагировать на специфические действия в приложении.

📣 Code Ready | #гайд #js

Please open Telegram to view this post

VIEW IN TELEGRAM

Please open Telegram to view this post

VIEW IN TELEGRAM

👍16🔥8

6.38K views10:25

Code Ready | Frontend

👩‍💻

Шпаргалка по регулярным выражениям

Регулярные выражения (RegEx) позволяют легко находить и обрабатывать текст по шаблону. Используются в поиске, валидации данных и других задачах, связанных с обработкой строк.

📣 Code Ready | #js #шпаргалка

Please open Telegram to view this post

VIEW IN TELEGRAM

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥52🤝12👍10

5.5K views07:12

Code Ready | Frontend

👩‍💻

Промисы и цепочка промисов в JavaScript

Промисы — это удобный способ работы с асинхронным кодом в JavaScript, упрощающий управление задачами, которые выполняются с задержкой, как запросы к серверу.

🔥 — если узнал новое
🤝 — если уже пользовался

📣 Code Ready | #гайд #js

Please open Telegram to view this post

VIEW IN TELEGRAM

Please open Telegram to view this post

VIEW IN TELEGRAM

🤝34🔥24👍6

5.07K views15:17

Code Ready | Frontend

This media is not supported in your browser

VIEW IN TELEGRAM

👩‍💻

Эффект дождевых капель

Привет! Сегодня создадим эффект дождевых капель с использованием Canvas API. Капли будут падать с верхней части экрана и при этом постепенно исчезать, создавая эффект дождя.

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

Добавим динамичности, чтобы капли падали случайным образом, создавая натуральный эффект дождя.

🔥 — если было полезно

📣 Code Ready | #гайд #js

Please open Telegram to view this post

VIEW IN TELEGRAM

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥46👍14🤝2

4.97K views12:12

Code Ready | Frontend

👩‍💻

Динамическая работа с DOM в JavaScript

DOM — это интерфейс, позволяющий JavaScript взаимодействовать со структурой HTML-документа. С помощью DOM вы можете находить элементы страницы, изменять их содержимое и внешний вид, а также добавлять или удалять узлы.

Основные возможности:

• Поиск элементов с помощью document.getElementById и document.querySelector.

• Изменение контента и стилей с помощью свойств textContent и style.

• Создание и удаление элементов методами createElement и remove.

📣 Code Ready | #гайд #js

Please open Telegram to view this post

VIEW IN TELEGRAM

Please open Telegram to view this post

VIEW IN TELEGRAM

👍21🔥8😁6🤝1

4.51K views15:41

Code Ready | Frontend

👩‍💻

Научимся работать с замыканиями в JS!

В этом посте мы рассмотрели замыкания, которые позволяют создавать более чистый и понятный код, что делает их незаменимым инструментом для любого разработчика:

- Базовый пример замыкания
- Создание замыканий в циклах
- Использование замыканий в циклах

📣 Code Ready | #гайд #js

Please open Telegram to view this post

VIEW IN TELEGRAM

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥17👍11🤝4

4.64K views16:12

Code Ready | Frontend

This media is not supported in your browser

VIEW IN TELEGRAM

🖥

Учимся создавать эффект параллакса

В этом посте я покажу как создать простой эффект параллакса, который добавляет глубину и динамичность вашему сайту. Рассмотрим, как добавить несколько секций с фоном, настроить их высоту и использовать фиксированный фон для плавного эффекта.

- HTML структура
- Добавляем стили в CSS
- CSS для контента
- JavaScript

📣 Code Ready | #css #js

Please open Telegram to view this post

VIEW IN TELEGRAM

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥19👍14🤝4

4.35K views12:14

Code Ready | Frontend

This media is not supported in your browser

VIEW IN TELEGRAM

👩‍💻

Простое раскрывающееся меню

Всем привет! Сегодня попробую показать, как создать и анимировать простое меню для сайта на Html, Css и Js!

Анимировать меню будем с помощью свойства transform, благодаря которому мы сместим элементы при нажатии на кнопку.

📣 Code Ready | #css #js

Please open Telegram to view this post

VIEW IN TELEGRAM

Please open Telegram to view this post

VIEW IN TELEGRAM

👍21👎6🔥5

4.96K views12:12