⌨ Многомерные массивы в 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

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

Многомерный массив – это массив, который содержит в себе другие массивы. Таким образом, элементы одного массива сами являются массивами.

var array = [[2, 5, 7], [3, 1, 4], [6, 8, 9]];

Данные внутри массивов могут быть не только числами. Например, мы хотим сделать массив с русскими словами и их переводом на английский язык. Это можно сделать при помощи многомерного массива:

var word = [
[“солнце”, “sun”],
[“небо”, “sky”],
[“облако”, “cloud”],
[“слово”, “word”],
[“время”, “time”],
]

Такое распределение данных облегчит работу с ними и сделает процесс более наглядным, чем обычный массив.

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

🌐 Code Spell Checker – расширение для редактирования кода

Это расширение предназначено для проверки грамотности кода. Оно проверяет распространенные ошибки и уменьшает количество ложных срабатываний. Проверка орфографии позволяет легко обнаружить опечатки в вашем коде, который вы пишете в VSCode. Code Spell Checker использует волнистые линии для обозначения опечаток.

Расширение отлично работает с написанием составных слов в стиле CamelCase (верблюжий регистр). Code Spell Checker понимает ключевые слова на нескольких языках программирования, включая TypeScript, JavaScript и Python.

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

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

⌨ Эффект перехода transition-timing-function

Функция transition-timing-function задает скорость перехода объекта из одного состояния в другое.

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

Существует 5 основных значений свойства transition-timing-function:

linear – равномерный переход;
ease – переход сначала медленный, а потом разгоняется и в конце замедляется;
ease-in – переход сначала медленный, а потом плавно ускоряется;
ease-out – переход сначала быстрый, а потом плавно замедляется;
ease-in-out – переход начинается и заканчивается медленно.

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

👨‍💻 [УРОК 75] HAML – HTML-препроцессор и шаблонизатор

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

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

🌐 Git History – расширение VSCode для отображения истории коммитов

Это популярное расширение для Visual Studio Code, которое показывает подробную информацию о коммитах в Git, просматривая предыдущие копии файлов, изменения активной строки в редакторе и т.д.

С помощью Git History вы найдете несколько наборов функций для вашего репозитория Git, таких как просмотр сведений о каждом коммите в иерархии, просмотр истории файла или строки, сравнение предыдущей копии файла с версией в локальной рабочей области, просмотр изменений в активной строке.

Удобство состоит в том, что расширение работает из Visual Studio Code. На панели задач выберите Git: View History (git log), а затем нажмите Git History Window, чтобы начать работу.

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

🌐 Ext JS – фреймворк для создания приложений

Ext JS – это наиболее полный набор инструментов для создания современных, кроссплатформенных веб-приложений и мобильных приложений на любом современном устройстве. В состав Ext JS входят более 140 предварительно интегрированных и протестированных составляющих пользовательского интерфейсa.

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

Ext JS содержит также инструмент для тестирования Sencha Test и менеджер по верстке, при помощи которого вы сможете управлять отображением контента в разных браузерах и на различных экранах.

Сайтодел | #фреймворк #javascript

🌐 JavaScript (ES6) code snippets – расширение VSCode с фрагментами кода JavaScript ES6

Расширение содержит в себе сниппеты кода JavaScript в новом синтаксисе ES6 для редактора Visual Studio Code. Оно поддерживает JavaScript (.js), TypeScript (.ts), JavaScript React (.jsx), TypeScript React (.tsx), Html (.html) и Vue (.vue).

Одно из преимуществ JavaScript (ES6) code snippets – это набор горячих клавиш для создания кода. Ознакомиться с ним можно на сайте, где представлено расширение. С помощью горячих клавиш вы сможете вставлять фрагменты кода очень быстро и легко!

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

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

🌐 SweetАlert – библиотека JavaScript со всплывающими окнами

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

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

Модальные окна имеют несколько типов: успех, ошибка, предупреждение, информация и вопрос. Для каждого типа предусмотрена своя иконка.

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

⌨ Логические операторы в JavaScript

В языке JavaScript есть 3 логических оператора: || (или), && (и) и ! (не).

Оператор || возвращает true, если хотя бы один из операндов равен true.

Оператор && возвращает true, только если оба операнда равны true. Если хотя бы один из них выдает false, то общее значение будет равно false.

Оператор ! представляет собой отрицание. Он возвращает противоположное значение.

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

🌐 FullPage.js – библиотека JavaScript для создания эффектов прокрутки

FullPage.js представляет собой плагин на jQuery, позволяющий создавать скроллинг секций на веб-страницах. Библиотека идеально подходит для работы с одностраничными сайтами.

Библиотека позволяет создавать отдельные секции на сайте и слайдеры. Внешний вид элементов можно изменять при помощи специальных свойств, предусмотренных в FullPage.js. Также имеется возможность создавать свои стили.

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

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

⌨ Как сделать таблицу в HTML?

Таблица в языке HTML создается с помощью тега <table>

Для строки применяется тег <tr>, а ячейки делаются тегом <td>

Ячейки находятся внутри строки. Один тег <tr> содержит в себе несколько тегов <td>. Все теги парные, то есть требуют закрытия.

Давайте создадим таблицу с тремя строками и пятью столбцами. В ней будет три тега <tr>, в каждом из которых будет содержаться тег <td>

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