👍40🔥9👎8
✅ Вопрос с собеседования
Что такое объекты аргументов в JavaScript?
Ответ:
Объект аргументов, это специальный тип объекта, хранящий в себе все переданные в функцию аргументы.
Хотя arguments и не является массивом, но он имеет свойство length, которое вернет количество переданных в него параметров.
@code_ready | #собеседование
Что такое объекты аргументов в JavaScript?
Ответ:
Хотя arguments и не является массивом, но он имеет свойство length, которое вернет количество переданных в него параметров.
Данный код объявляет функцию func с аргументом x. Её функционал заключается в выводе длинны объекта аргуметов, переданных в функцию. В первом случае будет выведено 0, во втором 1, и в третьем 3
@code_ready | #собеседование
👍49🔥15😁2
✅ Фильтры для картинок
Свойство filter в CSS позволяет применять различные изменения на картинки.
• Атрибут blur накладывает размытие на картинку. Он принимает значения в: %, em, rem, vm, vh, px.
• Атрибут bright изменяет яркость картинки. Он принимает значения в процентах.
Это свойство имеет еще несколько атрибутов, они будут описаны в следующих постах.
@code_ready | #свойство #css
Свойство filter в CSS позволяет применять различные изменения на картинки.
• Атрибут blur накладывает размытие на картинку. Он принимает значения в: %, em, rem, vm, vh, px.
• Атрибут bright изменяет яркость картинки. Он принимает значения в процентах.
Это свойство имеет еще несколько атрибутов, они будут описаны в следующих постах.
• В первый раз мы задаем тегу с классом blur свойство фильтр с аргументом blur и значением в 5px. Это значит что картинка будет размыта на 5 пикселей.
• Во второй раз мы меняем яркость со стандартной 100% На 50, поэтому картинка становится в 2 раза темнее.
@code_ready | #свойство #css
👍45🔥18
This media is not supported in your browser
VIEW IN TELEGRAM
Расширение Bookmarks позволяет ставить заметки на любой строчке каждого файла вашего проекта.
Добавлять ярлыки можно с помощью команды Bookmarks: Toggle
@code_ready | #плагин
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥27👍10👎4
Всем привет! 👋
Помню времена, когда я сам был начинающим разработчиком и не знал как настроить редактор кода и комфортно работать в нём(
Было сложно адаптироваться, мало качественного материала на эту тему.
НО! Недавно увидел полезное видео как раз на эту тему, и даже подчерпнул что-то для себя, хотя у меня уже не мало опыта в программировании)
В ходе курса автор показывает:
— как улучшить комфорт работы в редакторе кода VS Code👩💻
— какие плагины лучше всего использовать;
— как ускорить работу с кодом!
В общем рекомендую к просмотру! 💪
https://www.youtube.com/watch?v=SE0_wdokumg
Помню времена, когда я сам был начинающим разработчиком и не знал как настроить редактор кода и комфортно работать в нём(
Было сложно адаптироваться, мало качественного материала на эту тему.
НО! Недавно увидел полезное видео как раз на эту тему, и даже подчерпнул что-то для себя, хотя у меня уже не мало опыта в программировании)
В ходе курса автор показывает:
— как улучшить комфорт работы в редакторе кода VS Code
— какие плагины лучше всего использовать;
— как ускорить работу с кодом!
В общем рекомендую к просмотру! 💪
https://www.youtube.com/watch?v=SE0_wdokumg
Please open Telegram to view this post
VIEW IN TELEGRAM
YouTube
VS Code ПОЛНЫЙ курс + настройка (интерфейс, плагины, работа с кодом)
Основы работы в IDE VS Code, мои настройки, плагины, рекомендации по использованию этого ПО в работе.
— В ходе просмотра рекомендую повторять действия за мной, чтобы закрепить все функции на практике.
— Курс рассчитан на новичков, однако некоторые моменты…
— В ходе просмотра рекомендую повторять действия за мной, чтобы закрепить все функции на практике.
— Курс рассчитан на новичков, однако некоторые моменты…
🔥36👍9
✅ Шпаргалка по событиям JS
Данная шпаргалка представляет собой набор основных событий для обработки действий пользователя.
@code_ready | #шпаргалка #js
Данная шпаргалка представляет собой набор основных событий для обработки действий пользователя.
@code_ready | #шпаргалка #js
🔥53👍21👎3
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Menu Icon Animation
Анимация различных иконок для меню на CSS. Написано без использования JavaScript.
👨💻 Готовый код: Ссылочка
@code_ready | #кодпен
Анимация различных иконок для меню на CSS. Написано без использования JavaScript.
@code_ready | #кодпен
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥55👍22
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Калькулятор массы тела
Данный код реализует калькулятор индекса массы тема(ИМТ), по нажатию кнопки "Рассчитать ИМТ"
@code_ready | #обучение #js
Данный код реализует калькулятор индекса массы тема(ИМТ), по нажатию кнопки "Рассчитать ИМТ"
<label for="weight">Вес (кг):</label>
<input type="number" id="weight" required><br>
<label for="height">Рост (см):</label>
<input type="number" id="height" required><br>
<button onclick="calculateBMI()">Рассчитать ИМТ</button>
<div id="result"></div>
function calculateBMI() {
const weight = parseFloat(document.getElementById('weight').value);
const height = parseFloat(document.getElementById('height').value) / 100;
const bmi = weight / (height * height);
const bmiCat = getBMICategory(bmi);
document.getElementById('result').innerHTML = `Ваш ИМТ: ${bmi.toFixed(1)} (${bmiCat})`;
}
function getBMICategory(bmi) {
if (bmi < 18.5) {
return 'Недостаточный вес';
} else if (bmi >= 18.5 && bmi < 25) {
return 'Нормальный вес';
} else if (bmi >= 25 && bmi < 30) {
return 'Избыточный вес';
} else {
return 'Ожирение';
}
}
@code_ready | #обучение #js
👍50🔥14👎1
✅ Декорация текста с помощью псевдоэлементов
Данный CSS-эффект добавляет декоративные элементы в виде синих квадратов в углах блока. Они создаются с использованием ::before и ::after, которые позиционируются абсолютно относительно родительского элемента .decorated-box.
@code_ready | #обучение #css
Данный CSS-эффект добавляет декоративные элементы в виде синих квадратов в углах блока. Они создаются с использованием ::before и ::after, которые позиционируются абсолютно относительно родительского элемента .decorated-box.
<div class="decorated-box">
<h2>Заголовок</h2>
<p>Некоторый текст</p>
</div>
.decorated-box {
position: relative;
width: 300px;
padding: 20px;
background-color: #f0f0f0;
}
.decorated-box::before, .decorated-box::after {
content: '';
position: absolute;
width: 30px;
height: 30px;
background-color: #3498db;
}
.decorated-box::before {
top: 0;
left: 0;
}
.decorated-box::after {
bottom: 0;
right: 0;
}
@code_ready | #обучение #css
👍36🔥10👎3
👍22🔥8
This media is not supported in your browser
VIEW IN TELEGRAM
✅ CSS Свойство Perspective
Свойство perspective позволяет задавать трехмерным объектам расстояние. То есть то, насколько далеко или близко наблюдатель видит сцену.
Значение задается в стандартных единицах: px, %, em.
Возможны разные вариации, наклона, вращения и масштабирования, как и использование этого свойства в связке с hover.
@code_ready | #свойство #css
Свойство perspective позволяет задавать трехмерным объектам расстояние. То есть то, насколько далеко или близко наблюдатель видит сцену.
Значение задается в стандартных единицах: px, %, em.
Возможны разные вариации, наклона, вращения и масштабирования, как и использование этого свойства в связке с hover.
Я оставлю готовый код с примером из видео в комментариях.
@code_ready | #свойство #css
👍38🔥15
✅ Методы для работы с файлами
В данной шпаргалке представлены основные методы для работы с файлами на JavaScript. После каждого метода есть комментарий поясняющий его функционал
@code_ready | #шпаргалка #js
В данной шпаргалке представлены основные методы для работы с файлами на JavaScript. После каждого метода есть комментарий поясняющий его функционал
@code_ready | #шпаргалка #js
👍31🔥12👎1
✅ Использование сторонней библиотеки для работы с картами
Библиотека Leaflet предоставляет широкий функционал для работы с картой мира. Это может быть удобно для вставки местоположения какого-либо предприятия, или компании к себе на сайт.
@code_ready | #обучение #js
Библиотека Leaflet предоставляет широкий функционал для работы с картой мира. Это может быть удобно для вставки местоположения какого-либо предприятия, или компании к себе на сайт.
<div id="map"></div>
<!-- Подключение библиотеки Leaflet -->
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
let mymap = L.map("map").setView([55.7558, 37.6173], 10);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 19,
}).addTo(mymap);
// Создание маркера с указанными координатами
L.marker([55.7558, 37.6173]).addTo(mymap);
@code_ready | #обучение #js
👍42🔥13
0423.gif
1.6 MB
✅ Компиляция кода прямо в редакторе
Плагин Quokka позволяет компилировать JavaScript код прямо внутри редактора. Результат кода выводится справа от самого кода(не комментарием).
Ссылка на видео с полным функционалом плагина -https://www.youtube.com/watch?v=l-zB8k582k8
@code_ready | #плагин
Плагин Quokka позволяет компилировать JavaScript код прямо внутри редактора. Результат кода выводится справа от самого кода(не комментарием).
Ссылка на видео с полным функционалом плагина -
@code_ready | #плагин
👍29🔥12👎4
✅ Для чего используются операторы break и continue?
Эти два термина относятся к циклам и являются единственными операторами, которые могут прервать выполнение кода.
• Оператор break заставляет интерпретатор перейти в конец цикла или другой инструкции.
• Оператор continue прерывает одну итерацию и продолжает следующую в цикле.
@code_ready | #собеседование
• Оператор break заставляет интерпретатор перейти в конец цикла или другой инструкции.
• Оператор continue прерывает одну итерацию и продолжает следующую в цикле.
• По сути, в коде цикл должен отработать до 10, но поскольку есть условие i === 5, а после него выход из цикла break, то выведется значения до 5.
• В следующем примере ситуация аналогичная, но на значении 5, оно будет пропущено из-за ключевого слова continue.
@code_ready | #собеседование
🔥31👍20
✅ Построение графиков прямо в браузере
Библиотека Chart.js предоставляет собой простой и удобный способ для построения графиков и диаграмм в браузере. График содержит данные о продажах для каждого месяца, а также ось Y, начинающуюся с нуля.
@code_ready | #обучение #js
Библиотека Chart.js предоставляет собой простой и удобный способ для построения графиков и диаграмм в браузере. График содержит данные о продажах для каждого месяца, а также ось Y, начинающуюся с нуля.
Если данный код работает неправильно, или вам не нужно делать его на весь экран, в комментариях оставлю css код для правки.
<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
let ctx = document.getElementById("myChart").getContext("2d");
let myChart = new Chart(ctx, {
type: "line",
data: {
labels: ["Янв", "Фев", "Мар", "Апр", "Май", "Июн"],
datasets: [
{
label: "Продажи",
data: [12, 19, 3, 5, 2, 3],
borderColor: "rgba(255, 99, 132, 1)",
borderWidth: 1,},],},
options: {
scales: {
y: { beginAtZero: true },},},
});
@code_ready | #обучение #js
👍37🔥12
✅ Размещение по центру с помощью html
Тег <center> помогает расположить любой вложенный в него контент по центру страницы, без помощи CSS
@code_ready | #обучение #html
Тег <center> помогает расположить любой вложенный в него контент по центру страницы, без помощи CSS
@code_ready | #обучение #html
👍54🔥18👎13😁9