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

Тернарный оператор необходим, когда речь идет о бинарном выборе. Он принимает условие после оператора ? . После него следуют два выражения, разделенные : . Если условие оценивается как истинное, выполняется первое выражение. В противном же случае – второе выражение.

#javascript

Функция в роли переменной

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

@frontend_sovet

#javascript

Крутые трюки с переменными CSS

Переменные в CSS (или custom properties, кому как удобнее) изначально задумывались для хранения повторяющихся свойств вроде цветовой палитры или шрифтов в одном месте. В препроцессорах работа с переменными куда более гибкая, но магия SASS/SCSS применима не всегда и не везде, и в реальном мире часто обходятся без них, что нередко ведёт к раздуванию и размазыванию кодовой базы по разным файлам и форматам. В этой статье мы рассмотрим несколько интересных хаков, которые позволяют построить на механизме custom properties вещи, кажущиеся невозможными без препроцессоров или вмешательства JS.

Подробнее

@frontend_sovet

#css

Свойство flex-wrap

Свойство flex-wrap указывает, должны ли гибкие элементы переноситься или нет. Это относится только к гибким элементам. Как только вы примените к своему контейнеру flex-wrap, оно станет приоритетом над сжатием.

@frontend_sovet

#css

Как сделать скролл до элемента в jquery?

Используйте комбинацию animate() функции в jQuery и scrollTop чтобы передать к какой позиции скроллить.

@frontend_sovet

Этим постом мы запускаем серию уроков по JavaScript с нуля!

Введение в язык JavaScript для новичков #1

Язык JavaScript предназначен для выполнения в браузере наряду с HTML и CSS. Но, если эти языки предназначены для верстки структуры сайта, то JavaScript позволяет "оживлять" web-страницы - делать их реагирующими на действия пользователя или демонстрировать некоторую динамичность (к примеру, смена картинок в блоке или красивые плавно выпадающие менюшки).

https://te.legra.ph/Vvedenie-v-yazyk-JavaScript-dlya-novichkov-04-08

@frontend_sovet

#учебникJavaScript

Переменные в JavaScript

Работа с переменными в JavaScript #2

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

Каждая переменная должна иметь имя, которое может состоять из латинских букв, чисел, символов $ и знаков подчеркивания. Примеры названий переменных: str, my_str, myStr, a1, $, $a, $$a.

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

Учтите, что первый символ имени переменной не должен быть цифрой, то есть, к примеру, имя 1a будет некорректным.

https://te.legra.ph/Peremennye-v-JavaScript-04-09

@frontend_sovet

#учебникJavaScript

JS метод Split. Как преобразовать строку в массив?

Метод split() разбивает объект String на массив строк путём разделения строки указанной подстрокой.

Синтаксис:
str.split([separator[, limit]])

separator
Необязательный параметр. Указывает символы, используемые в качестве разделителя внутри строки. Параметр separator может быть как строкой, так и регулярным выражением. Если параметр опущен, возвращённый массив будет содержать один элемент со всей строкой. Если параметр равен пустой строке, строка str будет преобразована в массив символов.
limit
Необязательный параметр. Целое число, определяющее ограничение на количество найденных подстрок. Метод split() всё равно разделяет строку на каждом сопоставлении с разделителем separator, но обрезает возвращаемый массив так, чтобы он содержал не более limit элементов.

Пример:
var strArray = "StackOverflow".split("");
// strArray = ["S", "t", "a", "c", "k", "O", "v", "e", "r", "f", "l", "o", "w"]

#js

@frontend_sovet

Числа и операции над ними в JavaScript

В JavaScript можно выполнять математические операции над числами. Сложение выполняется с помощью оператора +, вычитание - с помощью -, умножение - с помощью *, а деление - с помощью /.

Подробнее

@frontend_sovet
#учебникJavaScript

Как сделать размытие изображения в css?

Сделать размытие изображения в CSS можно следующим образом:

<head>
<style>
img {
filter: blur(5px);
}
</style>
</head>
<body>
<img src="путь к картинке" />
</body>

@frontend_sovet

#css

Строки в JavaScript

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

@frontend_sovet

#учебникJavaScript

7 советов по оптимизации CSS для уменьшения времени загрузки страницы

Найдите узкие места производительности

Самая важная вещь при всех видах оптимизации — тщательный аудит. К счастью, есть много инструментов диагностики CSS, которые могут помочь вам найти узкие места.

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

Например, в Firefox DevTools вы можете проверить размер и время загрузки всех CSS-файлов, загружаемых страницей, используя вкладку Сеть.

@frontend_sovet


Подробнее

Специальные значения в JavaScript. Урок #5

В JavaScript, как и в других языках программирования, существуют ключевые слова для некоторых специальных значений. Вот они: undefined, null, true, false, NaN, Infinity, -Infinity. Подробнее

@frontend_sovet

#учебникJavaScript

Как создать элемент из строки в JavaScript?

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

Метод createElement() используется для создания элементов в DOM. Он принимает два параметра: tagName, который представляет собой строку, определяющую тип создаваемого элемента, и необязательный объект options, который можно использовать для изменения способа создания элемента. Любой необходимый элемент может быть передан в виде строки в эту функцию. Такой подход можно использовать только для создания одного элемента из одной строки.

В этом примере мы создаем заголовок, задавая строку как «h2».

@frontend_sovet

Как проверить, что данная строка является анаграммой другой строки в JavaScript?

Анаграмма — приём, состоящий в перестановке букв или звуков определённого слова, что в результате даёт другое слово или словосочетание. Несколько примеров анаграмм на английском:

1. evil = vile
2. a gentleman = elegant man
3. eleven plus two = twelve plus one

Так как же проверить, являются ли строки анаграммами в JS? На картинке пример кода, реализующий проверку с помощью встроенных функций.

@frontend_sovet

Как getElementByID работает в JavaScript?

Метод документа getElementById() возвращает объект, представляющий элемент, свойство id которого совпадает с заданным значением. Этот метод используется для управления элементом в нашем документе.

@frontend_sovet

Десериализация JSON в объект JavaScript

Чтобы десериализовать JSON в объект JavaScript, здесь мы будем использовать популярный метод JSON.parse().

Нотация объектов JavaScript используется для обмена данными с веб-сервером или RESTFul API. Данные, полученные от веб-сервера, всегда являются строкой. Чтобы использовать эти данные, вам необходимо проанализировать данные с помощью JSON.parse(), который вернет объект JavaScript или массив объектов.

На картинке рассматриваем простой пример.

@frontend_sovet

Как преобразовать двумерный массив в объект в JavaScript?

Двумерный массив может иметь любое количество строк и два столбца. Например:
[
["John", 12],
["Jack", 13],
["Matt", 14],
["Maxx", 15]
]

Как преобразовать такой массив в объект? Рассмотрим способ с методом reduce() на картинке.

@frontend_sovet

Как перебрать объект JavaScript?

Рассмотрим два простых способа — с помощью цикла for...in и метода Object.entries(). Метод возвращает массив собственных перечисляемых свойств указанного объекта в формате [key, value]. Возвращенный массив используется с методом map() для извлечения ключа и значения из пар.

@frontend_sovet