Что такое геттеры и сеттеры в JS?
Есть два типа свойств объекта - свойства-данные и свойства-аксессоры.
Свойства-аксессоры представлены методами: «геттер» – для чтения и «сеттер» – для записи. При литеральном объявлении объекта они обозначаются get и set:
Геттер срабатывает, когда obj.propName читается, сеттер – когда значение присваивается.
Например, у нас есть объект user со свойствами name и surname а также добавим свойство объекта fullName для полного имени, которое в нашем случае "John Smith".
Есть два типа свойств объекта - свойства-данные и свойства-аксессоры.
Свойства-аксессоры представлены методами: «геттер» – для чтения и «сеттер» – для записи. При литеральном объявлении объекта они обозначаются get и set:
Геттер срабатывает, когда obj.propName читается, сеттер – когда значение присваивается.
Например, у нас есть объект user со свойствами name и surname а также добавим свойство объекта fullName для полного имени, которое в нашем случае "John Smith".
let user = {
name: "John",
surname: "Smith",
get fullName() {
return ${this.name} ${this.surname};
}
};
alert(user.fullName);
// John Smith
Сеттер позволит нам изменять свойства объекта.set fullName(value) {
[this.name, this.surname] = value.split(" ");
}
// set fullName запустится с данным значением
user.fullName = "Alice Cooper";
alert(user.name); // Alice
alert(user.surname); // Cooper
В итоге мы получили «виртуальное» свойство fullName. Его можно прочитать и изменить.👍3
Какое значение width будет у элемента с классом .in?
Anonymous Quiz
15%
0px
5%
100px
77%
300px
3%
200px
Безопасные веб-шрифты
При создании сайта очень важно знать какие шрифты можно использовать а какие нет, это нужно знать как дизайнеру так и верстальщику.
Безопасные шрифты это шрифты которые установлены на большинство устройств, а значит достаточно прописать название шрифта чтоб браузер пользователя корректно его отобразил.
Список безопасных шрифтов:
Arial, Calibri, Helvetica, Segoe, Trebuchet MS, Georgia, Optima.
Больше безопасных шрифтов можно увидеть в Статье.
Инструменты для проверки
Если у вас возникли проблемы с выбором шрифта или вы хотите проверить, как будет выглядеть шрифт - эти ресурсы вам отлично подойдут.
fontpair - Там есть раздел, в котором можно посмотреть самые популярные шрифты, доступные в Google Fonts, и какие шрифты лучше всего сочетаются друг с другом.
Wordmark.it - дает вам мгновенный предварительный просмотр того, как ваш текст будет отображаться сразу на нескольких шрифтах.
При создании сайта очень важно знать какие шрифты можно использовать а какие нет, это нужно знать как дизайнеру так и верстальщику.
Безопасные шрифты это шрифты которые установлены на большинство устройств, а значит достаточно прописать название шрифта чтоб браузер пользователя корректно его отобразил.
Список безопасных шрифтов:
Arial, Calibri, Helvetica, Segoe, Trebuchet MS, Georgia, Optima.
Больше безопасных шрифтов можно увидеть в Статье.
Инструменты для проверки
Если у вас возникли проблемы с выбором шрифта или вы хотите проверить, как будет выглядеть шрифт - эти ресурсы вам отлично подойдут.
fontpair - Там есть раздел, в котором можно посмотреть самые популярные шрифты, доступные в Google Fonts, и какие шрифты лучше всего сочетаются друг с другом.
Wordmark.it - дает вам мгновенный предварительный просмотр того, как ваш текст будет отображаться сразу на нескольких шрифтах.
👍1
Какое значение примет result?
Anonymous Quiz
27%
[object Array]
37%
[object Object]
8%
toString
19%
[]
8%
[Object]
Как работает контекст наложения в CSS?
В CSS блок имеет позицию в трех измерениях. В дополнение к горизонтальному и вертикальному положению, блоки выкладываются вдоль оси Z друг над другом.
Порядок, в котором дерево документа отрисовывается на экране, описывается с помощью контекста наложения.
Если для элементов свойства z-index и position не заданы явно, контекст наложения равен порядку их расположения в исходном коде:
1. Корневой элемент <html>
2. Блочные элементы
3. float элементы
4. Строковые элементы
4. Позиционированные элементы
Свойство z-index создает новый контекст наложения. Оно изменяет порядок наложения позиционированных элементов. Элементы будут отображаться на странице в следующем порядке (если для них не заданы свойства -
Корневой элемент <html>.
Позиционированные элементы с отрицательным значением z-index.
Блочные элементы, неплавающие и непозиционированные.
float элементы.
Строковые элементы.
Позиционированные элементы с z-index: 0; и z-index: auto;.
В CSS блок имеет позицию в трех измерениях. В дополнение к горизонтальному и вертикальному положению, блоки выкладываются вдоль оси Z друг над другом.
Порядок, в котором дерево документа отрисовывается на экране, описывается с помощью контекста наложения.
Если для элементов свойства z-index и position не заданы явно, контекст наложения равен порядку их расположения в исходном коде:
1. Корневой элемент <html>
2. Блочные элементы
3. float элементы
4. Строковые элементы
4. Позиционированные элементы
Свойство z-index создает новый контекст наложения. Оно изменяет порядок наложения позиционированных элементов. Элементы будут отображаться на странице в следующем порядке (если для них не заданы свойства -
opacity, filter, transform):Корневой элемент <html>.
Позиционированные элементы с отрицательным значением z-index.
Блочные элементы, неплавающие и непозиционированные.
float элементы.
Строковые элементы.
Позиционированные элементы с z-index: 0; и z-index: auto;.
👍1
Чистая архитектура
«Идеальный программист» и «Чистый код» — легендарные бестселлеры Роберта Мартина — рассказывают, как достичь высот профессионализма. «Чистая архитектура» продолжает эту тему, но не предлагает несколько вариантов в стиле «решай сам», а объясняет, что именно следует делать, по какой причине и почему именно такое решение станет принципиально важным для вашего успеха.
👉 @frontendInterview
«Идеальный программист» и «Чистый код» — легендарные бестселлеры Роберта Мартина — рассказывают, как достичь высот профессионализма. «Чистая архитектура» продолжает эту тему, но не предлагает несколько вариантов в стиле «решай сам», а объясняет, что именно следует делать, по какой причине и почему именно такое решение станет принципиально важным для вашего успеха.
👉 @frontendInterview
Cумма всех массивов
Создайте функцию, которая будет суммировать все значения в массиве и его подмассивах
Примеры:
👉 @frontendInterview
Создайте функцию, которая будет суммировать все значения в массиве и его подмассивах
Примеры:
arraySum([1, 2]) => 3
arraySum([1, 2, 3]) => 6
arraySum([1, 2, [1, 2]]) => 6👉 @frontendInterview
👍1
Плюсы TypeScript. Стоит ли на него переходить?
Typenoscript — это скриптовый язык, компилируемый в JavaScript. Разработка Microsoft, которая, на сегодняшний день, успела завоевать и фанатов и недоброжелателей. Главный вопрос для начинающих, и не только: «Зачем он мне нужен?».
Основные плюсы:
Строгая типизация
Позволяет более полно описывать свойства и методы объектов и классов, из-за чего пропадает необходимость,делать проверку всех, входящих в метод или функцию, аргументов:
Очевидно, что читать код на TypeScript будет проще, ввиду отсутствия нагромождений кода, характерные Javanoscript.
Многие проявляют интерес к JS, но их отпугивает некая хаотичность и непредсказуемость языка. Здесь Вам сильно поможет TS, который позволяет писать JS, более привычным и понятным путем.
Обратная совместимость с JS
И это, таки, приятный бонус, потому как не придется переписывать весь существующий код, чтобы поиграться с TS и написать лишь часть приложения на нем + есть возможность перенести все любимые библиотеки с JS на TS, если будет такая необходимость.
Широкая поддержка IDE
TypeScript, на данный момент, имеет поддержку в любой популярной IDE, включая IDEA, WebStorm, Sublime, Atom, и так далее. Соответственно, менять любимую среду разработки не придется.
👉 @frontendInterview
Typenoscript — это скриптовый язык, компилируемый в JavaScript. Разработка Microsoft, которая, на сегодняшний день, успела завоевать и фанатов и недоброжелателей. Главный вопрос для начинающих, и не только: «Зачем он мне нужен?».
Основные плюсы:
Строгая типизация
Позволяет более полно описывать свойства и методы объектов и классов, из-за чего пропадает необходимость,делать проверку всех, входящих в метод или функцию, аргументов:
function checkAllMyArgsAgain(check: CheckObject, me: MeObject, please: string): string {
return 'Какая проверка аргументов? Вы о чем? ';
}
Читабельность кодаОчевидно, что читать код на TypeScript будет проще, ввиду отсутствия нагромождений кода, характерные Javanoscript.
function checkMe(check, me) {
if(check && me) {
if(check){ ... }
if(me){ ... }
}
}
против function checkMe(check: CheckObject, me: MeObject) {
console.log('Ну круто же!');
}
Более легкий переход в мир JS из мира статикиМногие проявляют интерес к JS, но их отпугивает некая хаотичность и непредсказуемость языка. Здесь Вам сильно поможет TS, который позволяет писать JS, более привычным и понятным путем.
Обратная совместимость с JS
И это, таки, приятный бонус, потому как не придется переписывать весь существующий код, чтобы поиграться с TS и написать лишь часть приложения на нем + есть возможность перенести все любимые библиотеки с JS на TS, если будет такая необходимость.
Широкая поддержка IDE
TypeScript, на данный момент, имеет поддержку в любой популярной IDE, включая IDEA, WebStorm, Sublime, Atom, и так далее. Соответственно, менять любимую среду разработки не придется.
👉 @frontendInterview
👍1
Как использовать media выражения в JS?
Чтобы определить, соответствует ли документ строке медиа-запроса в JavaScript, мы используем метод matchMedia().
Несмотря на то, что он официально является частью спецификации модуля представления объектной модели CSS, находящейся в статусе рабочего проекта, его поддержка браузером великолепна начиная с Internet Explorer 10 с глобальным охватом 98,6%.
Использование почти идентично медиа-запросам в CSS. Мы передаем строку медиа-запроса в matchMedia(), а затем проверяем свойство .matches.
Чтобы определить, соответствует ли документ строке медиа-запроса в JavaScript, мы используем метод matchMedia().
Несмотря на то, что он официально является частью спецификации модуля представления объектной модели CSS, находящейся в статусе рабочего проекта, его поддержка браузером великолепна начиная с Internet Explorer 10 с глобальным охватом 98,6%.
Использование почти идентично медиа-запросам в CSS. Мы передаем строку медиа-запроса в matchMedia(), а затем проверяем свойство .matches.
const mediaQuery = window.matchMedia('(min-width: 768px)')
Медиа-запрос вернет MediaQueryList. Это объект, который хранит информацию о медиа-запросе, и нам нужно ключевое свойство .matches. Это логическое свойство только для чтения, которое возвращает true, если документ соответствует мультимедийному запросу. const mediaQuery = window.matchMedia('(min-width: 768px)')
if (mediaQuery.matches) {
alert('Media Query Matched!')
}Как заставить код работать в старых браузерах?
Когда мы используем современные возможности JavaScript, некоторые движки могут не поддерживать их. Как было сказано выше, не везде реализованы все функции.
И тут приходит на помощь Babel.
Babel – это транспилер. Он переписывает современный JavaScript-код в предыдущий стандарт.
На самом деле, есть две части Babel:
Во-первых, транспилер, который переписывает код. Разработчик запускает Babel на своём компьютере. Он переписывает код в старый стандарт. И после этого код отправляется на сайт. Современные сборщики проектов, такие как webpack или brunch, предоставляют возможность запускать транспилер автоматически после каждого изменения кода, что позволяет экономить время.
Во-вторых, полифил.
Новые возможности языка могут включать встроенные функции и синтаксические конструкции. Транспилер переписывает код, преобразовывая новые синтаксические конструкции в старые. Но что касается новых встроенных функций, нам нужно их как-то реализовать. JavaScript является высокодинамичным языком, скрипты могут добавлять/изменять любые функции, чтобы они вели себя в соответствии с современным стандартом.
Термин «полифил» означает, что скрипт «заполняет» пробелы и добавляет современные функции.
Таким образом, чтобы современные функции поддерживались в старых движках, нам надо установить транспилер и добавить полифил.
👉 @frontendInterview
Когда мы используем современные возможности JavaScript, некоторые движки могут не поддерживать их. Как было сказано выше, не везде реализованы все функции.
И тут приходит на помощь Babel.
Babel – это транспилер. Он переписывает современный JavaScript-код в предыдущий стандарт.
На самом деле, есть две части Babel:
Во-первых, транспилер, который переписывает код. Разработчик запускает Babel на своём компьютере. Он переписывает код в старый стандарт. И после этого код отправляется на сайт. Современные сборщики проектов, такие как webpack или brunch, предоставляют возможность запускать транспилер автоматически после каждого изменения кода, что позволяет экономить время.
Во-вторых, полифил.
Новые возможности языка могут включать встроенные функции и синтаксические конструкции. Транспилер переписывает код, преобразовывая новые синтаксические конструкции в старые. Но что касается новых встроенных функций, нам нужно их как-то реализовать. JavaScript является высокодинамичным языком, скрипты могут добавлять/изменять любые функции, чтобы они вели себя в соответствии с современным стандартом.
Термин «полифил» означает, что скрипт «заполняет» пробелы и добавляет современные функции.
Таким образом, чтобы современные функции поддерживались в старых движках, нам надо установить транспилер и добавить полифил.
👉 @frontendInterview