⌨ Как прикрепить JavaScript к файлу HTML?

Существует два основных способа, как добавить JavaScript в HTML.

Первый из них подразумевает добавление элементов JavaScript в HTML-код при помощи тега <script></script>, внутри которого и располагается JavaScript. Такой вариант подходит, если объем заключенного в тег кода не очень большой.

<script type="text/javascript">
document.write("t.me/sitоdel");
</script>

Второй способ – привязка JavaScript страницы к файлу с HTML. Внутрь тега <head></head> помещается ссылка на JS-файл.

<html>
<head>
<script src="script.js"></script>
</head>
<body>
</body></html>

Второй способ более предпочтительный и его используют довольно часто.

Сайтодел | #код #javascript

🌐 VSCode Faker – расширение для генерирования случайных данных

Это расширение используется для создания случайных данных. VSCode Faker очень полезен, поскольку он поможет сэкономить много времени. Не у всех настолько хорошо развито воображение, чтобы придумывать произвольную информацию в считанные секунды!

VSCode Faker работает с разными типами данных: это и имена, и адреса, и номера телефонов и даже изображения. При написании кода расширение дает возможность выбрать тип данных.

VSCode Faker отлично подходит для генерации тестовых данных и для наименования плейсхолдеров в формах CSS.

Сайтодел | #расширение #vscode

👨‍💻 [УРОК 72] WOW.js - библиотека для создания анимаций при прокрутке

В этом уроке вы узнаете, как работать с WOW.js – библиотекой для создания анимаций на страницах сайтов. Вы узнаете о преимуществах и недостатках WOW.js, а также сможете установить и подключить ее.

📘 ИЗУЧИТЬ УРОК 📚 ВСЕ УРОКИ | #статья

🌐 Instant Wireframe – расширение Chrome для просмотра структуры сайта

Это расширение показывает структуру компоновки любого сайта – wireframe. Оно полезно веб-дизайнерам и разработчикам, особенно новичкам, которые изучают создание сайтов.

С помощью Instant Wireframe можно посмотреть, как расположен материал на странице и оценить работу дизайнера.

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

Сайтодел | #расширение #chrome

⌨ Как обрезать массив? Быстрый способ

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

Первый способ – задать новую длину массива:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]

Однако можно использовать метод slice(), который содержит в себе копию части исходного массива:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);
console.log(array); // Result: [0, 1, 2, 3]

Такой способ более быстрый и удобный.

Сайтодел | #код #javascript

🌐 Programming Hero – игра для обучения программированию

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

В игре есть возможность изучать Python, Java, C++ и основы веб-разработки. Результаты своей работы можно публиковать, а также добавить в свое портфолио.

Особенно интересен курс веб-разработки для новичков, где можно изучить HTML, CSS и основы JavaScript. Материал легкий для запоминания и усложняется по мере того, как повышается уровень.

Сайтодел | #игра #приложение

⌨ Как сгенерировать случайное число в JavaScript?

Для того, чтобы получить случайное число, в JavaScript используется метод Math.random().

Диапазон полученных чисел варьируется от 0 включительно до 1 не включительно. Эта функция необходима разработчикам, когда нужно сгенерировать что-либо случайное: анимацию, текст или данные игры.

Получить случайное число в заданном диапазоне можно так:

function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

Для вывода числа введем числа интервала:

console.log(getRandomInt(10, 100));

Консоль выдаст любое случайное число между 10 и 100.

Сайтодел | #код #javascript

🌐 Code Runner – расширение для запуска кода

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

Code Runner позволяет работать с отладчиком, что очень удобно для процесса разработки. Также в расширении есть консоль, куда выводятся результаты работы кода.

Отличительная черта Code Runner – это его простота и удобство. Расширение запускается быстро, экономит ресурсы вашего компьютера и даже может работать через консоль с языками программирования, которые не поддерживаются программой.

Сайтодел | #расширение #vscode

👨‍💻 [УРОК 73] HTML5Boilerplate – фронтенд-шаблон для создания веб-приложений

В этом уроке вы узнаете, как работать с HTML5Boilerplate - шаблоном для создания сайтов на основе HTML5, CSS и JavaScript. Вы узнаете о преимуществах сервиса и о том, как начать разработку с его помощью.

📘 ИЗУЧИТЬ УРОК 📚 ВСЕ УРОКИ | #статья

🌐 Bracket Pair Colorizer 2 – расширение VS Code, которое работает со скобками

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

С этой проблемой справляется "Bracket Pair Colorizer 2". Расширение присваивает парным скобкам разные цвета, которые может выбрать сам пользователь. По сравнению с первой версией, вторая более быстрая и точная.

С "Bracket Pair Colorizer 2" код будет выглядеть более понятно и прозрачно.

Сайтодел | #расширение #vscode

⌨ Многомерные массивы в JavaScript

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

let array = [['a', 'b', 'c'], ['d', 'e', 'f'], ['g', 'h', 'i']];

В зависимости от уровня вложенности можно выделить двухмерные - массив с массивами внутри, и трехмерные – массив, в котором есть массивы, которые тоже содержат массивы.

Гораздо удобнее записывать многомерные массивы в столбик:

let array = [
['a', 'b', 'c'],
['d', 'e', 'f'],
['g', 'h', 'i'],
];

Такое расположение данных бывает очень удобным при решении определенных задач.

Сайтодел | #код #javascript

🌐 Luna Paint – редактор для изображений в VS Code

Это расширение позволяет редактировать растровые изображения в редакторе VS Code. Для этого просто откройте изображение и редактируйте его как отдельный файл.

Luna Paint имеет большой спектр опций и инструментов, в том числе карандаш, заливка, пипетка, обрезка, геометрические фигуры, линии и палитра цветов.

Приложение может работать с несколькими слоями изображения, а также смешивать их. Расширение поддерживает форматы .bmp, .ico, .jpg, .png, и .webp.

Сайтодел | #расширение #vscode

⌨ Тернарный оператор

Иногда в коде вместо if…else можно использовать тернарный оператор. Такая форма записи более компактная и наглядная.

Пример: мы хотим проверить год на високосность. Введем:

let year =+prompt(“Введите год”);
alert (year % 4 == 0? “Високосный год”: “Невисокосный год”);

Если условие истинно, то выполняется действие после знака вопроса. Если же оно не истинно, выполняется то, что записано после двоеточия.

Сайтодел | #код #javascript

🌐 Elevator Saga – игра для изучения JavaScript

Эта игра – отличный вариант для изучающих язык JavaScript, своего рода «песочница» для получения необходимых навыков написания кода. В игре есть здание с лифтами, которые перевозят людей. Задача – перевезти пассажиров за указанное время.

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

Elevator Saga рассчитана на умение строить алгоритмы и работать с информацией. Синтаксис тут простой, поэтому игра подойдет даже для новичков.

Сайтодел | #игра #javascript

👨‍💻 [УРОК 74] Figma – инструмент для прототипирования сайтов и приложений

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

📘 ИЗУЧИТЬ УРОК 📚 ВСЕ УРОКИ | #статья

🌐 VSCode Simpler Icons with Angular – иконки для файлов

VSCode Simpler Icons – это коллекция иконок, которые облегчают работу с файлами различных расширений. На выбор представлены изображения, которые показывают папки, документы, а также логотипы приложений. Настроить иконки можно самостоятельно.

Благодаря VSCode Simpler Icons вы не перепутаете открытую папку с закрытой, а также файл с папкой. Разнообразие цветов и форм иконок делают работу более наглядной.

Для того, чтобы расширение заработало, зайдите в настройки (File → Preferences на Windows или Code → Preferences на OSX), выберите тему файловых иконок, затем нажмите VSCode Great Icons.

Сайтодел | #расширение #vscode

🌐 Relative Path – расширение, которое находит путь к файлу

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

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

Просто нажмите Ctrl+Shift+H (MAC: Cmd+Shift+H) и выберите файл. Если в вашей рабочей области более 1000 файлов, вам будет предложено сначала отфильтровать этот список. Кроме того, вы можете открыть панель команд с помощью кнопки F1 и выполнить поиск относительного пути.

Сайтодел | #расширение #vscode

⌨ Способы округления чисел в JavaScript

Язык JavaScript позволяет проводить математические операции с числами, в том числе и округление. Для этого в нем есть целых три метода: Math.floor, Math.ceil и Math.round.

Метод Math.floor округляет всегда в нижнюю сторону. Числа наподобие 5.87 мы привыкли округлять в большую сторону, однако Math.floor выдаст 5:

alert (Math.floor(5.87)); //5

Метод Math.ceil округляет числа в сторону большего числа. Это – противоположность методу Math.floor:

alert (Math.ceil(5.34)); //6

Метод Math.round округляет числа по тому правилу, которое мы учили в школе: если дробная часть больше или равна 5, округляется в большую сторону:

alert (Math.round(5.42)); //5

alert (Math.round(5.73)); //6

Сайтодел | #код #javascript