Что такое data-атрибуты, и привести примеры, когда они полезны?
data - атрибуты позволяют хранить дополнительную информацию в стандартных элементах HTML
любой атрибут, чьё имя начинается с data-, является data - атрибутом
Также можно использовать селекторы атрибутов в CSS для изменения стилей в соответствии с данным:
data - атрибуты позволяют хранить дополнительную информацию в стандартных элементах HTML
любой атрибут, чьё имя начинается с data-, является data - атрибутом
<article
id="electriccars"
data-columns="3"
data-index-number="12314"
data-parent="cars">
</article>
Чтобы получить data-атрибут можно взять свойство объекта dataset с именем, равным части имени атрибута после data- (обратите внимание, что дефисы в имени преобразуются в camelCase). var article = document.getElementById('electriccars');
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"
Каждое свойство является строкой и может быть прочитано и записано.Также можно использовать селекторы атрибутов в CSS для изменения стилей в соответствии с данным:
article[data-columns='3']{ width: 400px; }
article[data-columns='4']{ width: 600px; }Какой HTML атрибут устанавливает inline стили?
Anonymous Quiz
10%
styles
2%
styleName
9%
class
76%
style
2%
className
Что такое doctype и зачем он нужен?
Элемент
Директива doctype необходима, чтобы браузер понимал как обрабатывать текущую веб-страничку, так как существует несколько версий языка HTML, а еще имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), который похож на HTML, но различается с ним по синтаксису.
Поэтому если вы хотите, чтобы ваш сайт отображался одинаково красиво и ровно во всех популярных браузерах, то обязательно указывайте эту директиву с версией языка html, которую вы используете. Причем doctype следует указывать с общепринятыми правилами.
Элемент
<!doctype> — DTD (document type definition, описание типа документа) указывает тип документа, который используется при написании html кода. Это непарный тег, который должен стоять самым первым в коде каждой страницы вашего сайта.Директива doctype необходима, чтобы браузер понимал как обрабатывать текущую веб-страничку, так как существует несколько версий языка HTML, а еще имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), который похож на HTML, но различается с ним по синтаксису.
Поэтому если вы хотите, чтобы ваш сайт отображался одинаково красиво и ровно во всех популярных браузерах, то обязательно указывайте эту директиву с версией языка html, которую вы используете. Причем doctype следует указывать с общепринятыми правилами.
Для чего нужна директива use strict?
Режим strict (строгий режим), введенный в ECMAScript 5, позволяет использовать более строгий вариант JavaScript
Во первых, строгий режим делает невозможным случайное создание глобальных переменных.
Во-вторых, строгий режим заставляет присваивания, которые всё равно завершились бы неудачей, выбрасывать исключения.
Режим strict (строгий режим), введенный в ECMAScript 5, позволяет использовать более строгий вариант JavaScript
Во первых, строгий режим делает невозможным случайное создание глобальных переменных.
Во-вторых, строгий режим заставляет присваивания, которые всё равно завершились бы неудачей, выбрасывать исключения.
var undefined = 5; // выдаст TypeErrorВ-третьих, в строгом режиме попытки удалить неудаляемые свойства будут вызывать исключения (в то время как прежде такая попытка просто не имела бы эффекта):
"use strict";В-четвёртых, строгий режим требует, чтобы все свойства, перечисленные в сериализованном объекте, встречались только один раз.
delete Object.prototype; // выдаст TypeError
"use strict"; var o = { p: 1, p: 2 }; // !!! синтаксическая ошибка
В-пятых, строгий режим требует, чтобы имена аргументов в объявлении функций встречались только один раз. function sum(a, a, c) { // !!! синтаксическая ошибка
"use strict";
return a + a + c; // ошибкаЧто такое тернарный оператор?
Условный (тернарный) оператор - единственный оператор в JavaScript, принимающий три операнда: условие, за которым следует знак вопроса (?), затем выражение, которое выполняется, если условие истинно, сопровождается двоеточием (:), и, наконец, выражение, которое выполняется, если условие ложно. Он часто используется в качестве укороченного варианта условного оператора if.
Синтаксис:
Условный (тернарный) оператор - единственный оператор в JavaScript, принимающий три операнда: условие, за которым следует знак вопроса (?), затем выражение, которое выполняется, если условие истинно, сопровождается двоеточием (:), и, наконец, выражение, которое выполняется, если условие ложно. Он часто используется в качестве укороченного варианта условного оператора if.
Синтаксис:
let result = условие ? значение1 : значение2;
«Eloquent Javascript» является одной из популярных книг в среде веб-разработчиков.
Эта книга состоит из 22 частей, раскрывающих все лучшее в JS на уровне от базового до среднего с указанием лучших приемов.
Прочтя эту книгу вы узнаете о разнообразных вещах, от базового синтаксиса и структуры данных в JavaScript до эффективности DOM и управления node.js для создания сервера.
Эта книга состоит из 22 частей, раскрывающих все лучшее в JS на уровне от базового до среднего с указанием лучших приемов.
Прочтя эту книгу вы узнаете о разнообразных вещах, от базового синтаксиса и структуры данных в JavaScript до эффективности DOM и управления node.js для создания сервера.
Что делает оператор for..in? Какие имеются особенности при использовании этого оператора с массивами?
Цикл for...in проходит через перечисляемые свойства объекта. Он пройдёт по каждому отдельному элементу.
Синтаксис:
Индексы массива - это перечисляемые свойства с целочисленными именами, в остальном они аналогичны свойствам объектов.
Нет гарантии, что for...in будет возвращать индексы в конкретном порядке. Цикл for...in возвращает все перечисляемые свойства, включая имеющие нецелочислиненные имена и наследуемые.
Так как порядок прохода зависит от реализации, проход по массиву может не произойти в правильном порядке. Следовательно лучше с числовыми индексами использовать циклы forEach() или for...of, когда проходим по массивам, где важен порядок доступа к свойствам.
Цикл for...in проходит через перечисляемые свойства объекта. Он пройдёт по каждому отдельному элементу.
Синтаксис:
for (variable in object) {...}
Замечание: for...in не следует использовать для массивов, где важен порядок индексов.Индексы массива - это перечисляемые свойства с целочисленными именами, в остальном они аналогичны свойствам объектов.
Нет гарантии, что for...in будет возвращать индексы в конкретном порядке. Цикл for...in возвращает все перечисляемые свойства, включая имеющие нецелочислиненные имена и наследуемые.
Так как порядок прохода зависит от реализации, проход по массиву может не произойти в правильном порядке. Следовательно лучше с числовыми индексами использовать циклы forEach() или for...of, когда проходим по массивам, где важен порядок доступа к свойствам.
Удаление элемента из массива (какие есть способы)
Удаление последнего элемента массива
arr.splice(str) – это универсальный «швейцарский нож» для работы с массивами. Умеет всё: добавлять, удалять и заменять элементы.
Его синтаксис:
Удаление последнего элемента массива
const fruits = ["Яблоко", "Банан", "Апельсин"]Удаление первого элемента массива
const last = fruits.pop(); // удалим Апельсин (из конца)
// ["Яблоко", "Банан"];
const first = fruits.shift(); // удалим Яблоко (из начала)
// ["Банан"];
Удаление нескольких элементов, начиная с определённого индексаarr.splice(str) – это универсальный «швейцарский нож» для работы с массивами. Умеет всё: добавлять, удалять и заменять элементы.
arr.splice(index[, deleteCount, elem1, ..., elemN])Он начинает с позиции index, удаляет deleteCount элементов и вставляет elem1, ..., elemN на их место. Возвращает массив из удалённых элементов.
let arr = ["Я", "изучаю", "JavaScript"];Метод arr.slice намного проще, чем похожий на него arr.splice.
arr.splice(1, 1); // начиная с позиции 1, удалить 1 элемент
// осталось ["Я", "JavaScript"]
Его синтаксис:
arr.slice([start], [end])Он возвращает новый массив, в который копирует элементы, начиная с индекса start и до end (не включая end). Оба индекса start и end могут быть отрицательными. В таком случае отсчёт будет осуществляться с конца массива.
let arr = ["t", "e", "s", "t"];
alert( arr.slice(1, 3) ); // e,s (копирует с 1 до 3)
alert( arr.slice(-2) ); // s,t (копирует с -2 до конца)