Ninja

Матрица поддержки браузера

  • Ожидания и потребности целевой аудитории
  • Доля браузера на рынке
  • Затраты труда на поддержку браузера

 

Angular

app/app.component.ts – It is the root component of what will become a tree of nested components as the application evolves.

app/app.module.ts – the root module that tells Angular how to assemble the application.

main.ts – The recommended place to bootstrap a JIT-compiled browser application is in a separate file in the src folder named src/main.ts

quickstart

 

git clone https://github.com/angular/quickstart.git quickstart 
cd quickstart
npm install
npm start

@Component decorator’s templateUrl property

Interpolation {{ … }}

<p>My current hero is {{currentHero.name}}</p>

Template expression

JavaScript expression that have or promote side effects are prohibited, includes :

  • assignments (=+=-=, …)
  • new
  • chaining expressions with ; or ,
  • increment and decrement operators (++ and --)

The pipe operator

<div>Title through uppercase pipe: {{title | uppercase}}</div>

The safe navigation operator (?.) and null property path

The Angular safe navigation operator (?.) is a more fluent and convenient way to guard against nulls in property paths. The expression bails out when it hits the first null value. The display is blank, but the app keeps rolling without errors.

The current hero's name is {{currentHero?.name}}

*NgIf

<hero-detail *ngIf="isActive"></hero-detail>

*NgFor

<div *ngFor="let hero of heroes">{{hero.name}}</div>

NgFor is a repeater directive — a way to present a list of items. You define a block of HTML that defines how a single item should be displayed. You tell Angular to use that block as a template for rendering each item in the list.

microsyntax

“let hero from heroes” – Take each hero in the heroes array, store it in the local hero looping variable, and make it available to the templated HTML for each iteration.

create class

export class Hero {
  constructor(
    public id: number,
    public name: string) { }
}
  • Declares a constructor parameter and its type.
  • Declares a public property of the same name.
  • Initializes that property with the corresponding argument when creating an instance of the class.

Событие on

$(‘#селектор’).on(‘событие мыши’, селектор, данные(литерал объекта), имя функции);

var linkVar = {message: 'linkVar text'};
var pVar = {message: 'pVar text'};

function showMessage (evt) {
 alert(evt.data.message);
}

$('a').on('mouseover', linkVar, showMessage);
$('p').on('click', pVar, showMessage);

//несколько имен событий
$(document).on('click keypress', function() {
    $('#lightbox').hide();
});

//передача объектной константы
$('#theElement').on({
    'click' : function() {
        //some action
    },
    'mouseover' : function() {
        //some action
    }
});

 Делегирование событий

$('ul').on('click', 'li', function() {
    $(this).css('color' : 'red'); // this - li
});

 

 

События мыши

События мыши

click, dblclick, mousedown, mouseup, mouseover, mouseout, mousemove

События документа/окна

load, resize, scroll, unload

События форм

submit, reset, change, focus, blur

События клавиатуры

keypress, keydown, keyup

Использование событий

$('a').click(function() {});

 Ожидание загрузки HTML-кода

$(function() {})// сокращенная запись
$(document).ready(function() {})

ready() – ожидание загрузки HTML-кода, без ожидания загрузки изображений и роликов

альтернатива – размещение скрипта перед закрывающим тегом body.(загрузка и запуск кода замедлит браузер до тех пор, пока сценарий не загрузится и не прекратит выполняться) – минус – модификация HTML по мере прогрузки скриптов, и если приложение не работает без js.

События наведения и смещения указателя мыши

$('#селектор').hover(функция1, функция2);

$('menu').hover(function(){
    $('submenu').show();
},//окончание события mouseover
    function() {
    $('submenu').hide();
}//окончание события mouseout
);//окончание события hover

 Объект события

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

$(document).click(function(evt) {
    var xPos = evt.pageX;
    var yPos = evt.pageY;
    alert('X: ' + xPos + ' Y: ' + yPos);
}); //конец события click

В каждом браузере могут быть разные свойства, общие: pageX, pageY, screenX, screenY, shiftKey, which (используется с событием нажатия клавиши для определения числового кода нажатой клавиши. Можно узнать клавишу преобразовав с помощью метода String.fromCharCode(evt.which); ), target, data.

Отмена обычного поведения событий

$('#menu').click(function(evt) {
    //some code
evt.preventDefault(); // не переходи по ссылке

// другой вариант
return false;
});

Удаление событий

$('a').mouseover(function(){
    //some action
});

$('#disable').click(function() {
    $('a').off('mouseover') // удаляет событие mouseover, или все события, если не передать аргументы
});

Остановка события (всплытие события)

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

$('#thelink').click(function(evt) {
    //some action
    evt.stopPropagation(); // останавливает событие
});

 

 

Селекторы

Селекторы
http://api.jquery.com/category/selectors/

$('#id');
$('.class');

$('#id .class');
$('parent > child');
$('tag + tag');
$('tag[attribute]');
$('tag[attribute="value"]');
$('tag[attribute^="value"]');
$('tag[attribute*="value"]');
$('tag[attribute&="value"]');

$('tag:even'); возвращает 0-2-4 элементы выборки
$('tag:odd'); возвращает 1-3-5 элементы выборки

$('tag:first');
$('tag:last');

$('tag:not(element)'); без класса element
$('tag:has(element)'); выбирает tag имеющий element
$('tag:contains(content)');

$('tag:hidden'); если не установлен visibility: invisible;
$('tag:visible');


Выборка элементов jQuery отличается от традиционной выборки getElementByTagName() или getElementById() и не понимает традиционных методов объектной модели.

Автоматические циклы

$(‘#slideshow img’).hide(); – автоматически пройдет по всем элементам выборки и к каждому из них применит функцию .hide();

Связывание функций

$('#popUp').width(300)
    .height(300)
    .text('Hi!')
    .fadeIn(1000);

Добавление содержимого на страницу

.html() –  считывает существующий HTML код только внутри первого элемента, а так же замещает текущее содержимое, но во всех элементах выборки другим HTML-кодом.

.text() – похожа на работу функции html, но не принимает HTML элементы.

.append() – добавляет HTML-код в качестве последнего дочернего элемента выбранного элемента.

.prepend() -добавляет HTML-код в качестве первого дочернего элемента выбранного элемента.

.before()

Замена и удаление выборок

.remove() – удаляет выборку

.replaceWith(value) – заменяет выборку на value

.clone() – создает клон

Установка и чтение атрибутов элемента

addClass(‘class-name’) – добавляет класс

removeClass(‘class-name’) – удаляет класс

toggleClass(‘class-name’) – добавляет или удаляет класс

Чтение и изменение свойств CSS

определение текущего значения свойства

var bgColor = $('#main').css('background-color');

$('body').css('font-size' : '200%'); // числовое знач. второго аргумента jQuery переведет в пиксели .css('padding', 100)

var baseFont = $('body').css('font-size');
baseFont = parseInt(baseFont); // вернет значение + px
$('body').css('font-size', baseFont * 2);


jQuery возвращает все цвета в rgb или rgba если есть прозрачность. Всегда все значения в пикселях.

Литерал объекта (объектная константа) – список пар свойств / значение

.css({
    'font-size' : '5em',
    'color' : 'red'
});

Чтение, установка и удаление атрибутов HTML.

.attr(); .removeAttr()

var imageFile = $('#banner img').attr('src','new/image/path');

 Работа с каждым элементом выборки

.each(function() {});

Ключевые слова this и $(this)

$(this) jQuery версия традиционному this – относится к элементу вызывающему анонимную функцию

$('a[href^=http://]').each(function(){
    var extLink = $(this).attr('href');
});

Gulp

Gulp

http://habrahabr.ru/post/250569/ – приятная сборка front-end

http://habrahabr.ru/post/259225/ – ловим ошибки правильно

New projects

npm init

npm install --save-dev gulp-plumber - ошибки

npm install --save-dev gulp-autoprefixer

npm install --save-dev gulp-minify-css

npm install --save-dev browser-sync

npm install --save-dev gulp-imagemin

npm install --save imagemin-pngquant

npm install --save-dev gulp-uglify

npm install gulp-sass --save-dev

npm install --save-dev gulp-rigger - include //= footer.html

npm install --save-dev gulp-watch

npm install rimraf

npm install -g bower

bower init

чат в админке WP

source map - размер файла

 

MCS 1 Урок

Программа урока от гуру JS Антона Шувалова (moscoding.ru)

 

Знакомство с языком и история создания (статья откровение –комментарии от создателя)
Место JavaScript среди других ЯП и зачем его надо изучать
— Консоль/REPL — самый простой способ попробовать язык (Как запустить консоль в браузере)
— Синтаксис и грамматика JavaScript
— Типы данных и операторы

Screen Shot 2015-12-12 at 5.47.30 PM

Лучший учебник по JS в ru коммьюнити

 

Основы от классного парня из интернета – Sorax

По первому уроку – с первого по восьмое видео

Очень полезное, как браузер парсит код – как его следует читать

 

 

Основы от интернет сообщества LoftBlog 

с первого по десятый выпуск

Тестовое задание

See the Pen http://codepen.io/A8H333/pen/aveQpE/‘>aveQpE by Shuvalov Anton (http://codepen.io/A8H333‘>@A8H333) on http://codepen.io‘>CodePen.0

 

Онлайн курсы JS

Treehouse School

Codeacademy

 

Онлайн сообщества начинающих FrontEnd-еров на Youtube

uWebDesign

loftblog

 

ВК сообщества

http://vk.com/designlog

http://vk.com/webtackles

http://vk.com/forwebdev

http://vk.com/uwebdesign

 

Что читаю

Карманный справочник JavaScript Д. Фленаган 2015 г.

 


 

И еще мы съли по такому вот классному бургеру “Брянский парнеь” в кафе Фарш с Денисом.

ce9ac7b9a7c24edf8333bfbadbd04aba