ncer

/*
Стенограмма видео https://www.youtube.com/watch?v=xydnbUZqzto

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

После вызова функции, она получает 2 доп параметра: 
- Ключевое слово this
- Псевдомассив arguments

Всего есть 4 шаблона (паттерна) вызова функций:

ncer

JS Advanced 1. Конструкторы и прототипы

Содержание

• Конструкторы
• Создание пользовательских конструкторов, ключевое слово this
• Прототипы
• Конструктор Object и его методы
• Техники ООП: инкапсуляция, наследование, полиморфизм

В ходе урока рассматриваются:

ncer

Web Components 1. Введение

Веб-компоненты - набор технологий, задача которых позволить нам создавать повторно используемые HTML элементы.

В HTML5 есть ряд элементов, которые являются нечто большим, чем просто теги. Например, <audio> - это целый компонент, который в браузере превращается в набор логики и контролов (play/pause/stop/progressbar). Идея веб-компонентов - дать возможность создавать свои теги, которые в браузере будут превращаться в кусок DOM со своей логикой и структурой. В разметке пишем просто тег, в барузере отрисовывается целый компонент.

Предпосылки возникновения веб-компонентов

Слабая семантика (div soup)

ncer

Подготовка проекта

Шрифты

Нужно получить список всех шрифтов в макете, чтоб сразу их скачать. 2 способа:

• скрипт https://github.com/frontendbeast/list-fonts
• загрузить на https://assets.adobe.com

Скачиваем. Далее нужно сгенерировать шрифты для веба: https://transfonter.org/

ncer

ncer

<?xml version="1.0" encoding="utf-8"?>
<!-- Please read: https://msdn.microsoft.com/en-us/library/ie/dn455106.aspx -->
<browserconfig>
    <msapplication>
        <tile>
            <square70x70logo src="tile.png"/>
            <square150x150logo src="tile.png"/>
            <wide310x150logo src="tile-wide.png"/>
            <square310x310logo src="tile.png"/>
        </tile>

ncer

<? for ($i = 1; $i <= 5; $i++) {?>
	<p><?= $i ?></p>
<?}?>

ncer

.visible-android {
  display:none;
}
.visible-ios {
  display:none;
}
.on-device .visible-android, .on-device .visible-android {
  display:inherit;
}
.device-ios .visible-android {

ncer

// Font variables
@reserveFonts: sans-serif;
@fontPrimary: 'Roboto Condensed', @reserveFonts;



// Font mixins
.font-primary() {
  font-family: @fontPrimary;
  font-weight: normal;

ncer

JS Шаблоны. Содержание

• Литералы и конструкторы
• Функции
• Шаблоны создания объектов и повторное использование кода
• Шаблоны проектирования
• [Работа с DOM](#js-%D0%A8%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D1%8B