Сайтодел | GitHub, Верстка, Сайты, Вайбкодинг
25.5K subscribers
1.32K photos
101 videos
28 files
2.37K links
FullStack-материалы от Senior-разработчика для WEB-специалистов

Сотрудничество: @CodingLead

РКН: shorturl.at/qinly
Download Telegram
⌨ Сравнение двух чисел на JavaScript

Для того, чтобы сравнить два числа на языке JavaScript, можно использовать оператор if…else. В этом случае задается условие, при котором два числа либо оказываются равны друг другу, либо одно из них больше другого.
Для начала нужно ввести числа, добавив их в переменные при помощи функции prompt():

var a = +prompt (‘Введите число’);
var b = +prompt (‘Введите число’);


Затем вводится конструкция с if:
if (a > b) {
var max = a;
} else if (a == b) {
alert("числа равны")
} else {
max = b;
alert(max);
}

В этом случае на экран будет выведено сравнение двух чисел.

Сайтодел | #код #javascript
🌐 TODO Highlight – расширение VS Code для постановки задач

Расширение работает с комментариями в коде. Если вы часто помечаете в коде какие-либо строки комментариями, но потом не можете их найти, то TODO Highlight вам поможет!

Плагин выделяет комментарии цветом, если в них содержатся слова TODO или FIXME. Таким образом, вы не пропустите необходимые детали, которые нужно сделать или доработать.

Фраза TODO обозначает то, что еще предстоит сделать, а FIXME указывает на уже созданный участок кода, который необходимо исправить. Расширение подходит в первую очередь для JavaScript-разработчиков.

Сайтодел | #расширение #javascript
⌨ Как прикрепить 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