# Qualified

• Event handling (bubbling and capturing)

• SPA

  • main ideas
  • advantages and disadvantages

• Comunication with server-side

  • HTTP
  • HTTPS
  • WS

• REST concept

  • HTTP methods and their using
  • additional headers

• AJAX

• JSON vs XML

• jQuery, Zepto - wan't do

• Using underscoreJS/lodash

# Event handling (bubbling and capturing)

Events are responsible for interaction of JavaScript with HTML web pages. The general definition of event is any act can occur by someone. In the web development, the definition of events is also same. Events can be subscribed by listeners that occurs only when the particular event can be fired.

Event Bubbling is the event starts from the deepest element or target element to its parents, then all its ancestors which are on the way to bottom to top. At present, all the modern browsers have event bubbling as the default way of event flow.

If you want to stop the event bubbling, this can be achieved by the use of the event.stopPropagation() method. If you want to stop the event flow from event target to top element in DOM, event.stopPropagation() method stops the event to travel to the bottom to top.

Event Capturing is the event starts from top element to target element. Modern browser doesn’t support event capturing by default but we can achieve that by code in JavaScript.

Every event flow has three phase:

1. Event Capturing
2. Event Target
3. Event Bubbling

W3C стандарт позволяет программисту самому задавать поведение событий на странице, используя третий параметр метода

addEventListener(type, listener, useCapture)

То есть при клике сначала будет происходить фаза «спуска», и будут вызываться события, привязанные с флагом useCapture = true, затем будет запущена фаза «подъема», и остальные события будут вызываться в порядке подъема по DOM-дереву. По умолчанию события всегда подписываются на bubbling фазу, то есть, при таком способе подписки на событие useCapture = false

• При наступлении события – элемент, на котором оно произошло, помечается как «целевой» (event.target).
• Далее событие сначала двигается вниз от корня документа к event.target, по пути вызывая обработчики, поставленные через addEventListener(...., true).
• Далее событие двигается от event.target вверх к корню документа, по пути вызывая обработчики, поставленные через on* и addEventListener(...., false).

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

• event.type ('click')
• event.target (самый глубокий, на котором произошло событие)
• event.currentTarget (Элемент, на котором сработал обработчик)
• event.clientX / event.clientY

# Стадии

• Событие сначала идет сверху вниз. Эта стадия называется «стадия перехвата» (capturing stage)
• Событие достигло целевого элемента. Это – «стадия цели» (target stage)
• После этого событие начинает всплывать. Это – «стадия всплытия» (bubbling stage)

# bubbling (всплытие)

исключение focus - не всплывает

• При наступлении события обработчики сначала срабатывают на самом вложенном элементе, затем на его родителе, затем выше и так далее, вверх по цепочке вложенности.

• event.stopPropagation() - прекратить всплытие

• event.stopImmediatePropagation() - прекратить немедленно (для одного уровня )

# capturing (погружение)

• редко используется

# SPA

• main ideas
• advantages and disadvantages

A single-page application is an app that works inside a browser and does not require page reloading during use. You are using this type of applications every day. These are, for instance: Gmail, Google Maps, Facebook or GitHub. SPAs are all about serving an outstanding UX by trying to imitate a “natural” environment in the browser — no page reloads, no extra wait time. It is just one web page that you visit which then loads all other content using JavaScript — which they heavily depend on.

SPA requests the markup and data independently and renders pages straight in the browser. We can do this thanks to the advanced JavaScript frameworks like AngularJS, Ember.js, Meteor.js, Knockout.js. Single-page sites help keep the user in one, comfortable web space where content is presented to the user in a simple, easy and workable fashion.

A single-page application works in the browser and requires no page reloads and no extra time for waiting. The page doesn’t need to be updated since content is downloaded automatically. We use these types of applications every day. Just think of Facebook or Trello. These are excellent examples of single-page apps.

Single-page web applications fit perfectly for building dynamic platforms with small data volumes. Furthermore, a single-page app is ideal as a base for future mobile app development. The main drawback of this development approach is poor SEO optimization. But this architecture is excellent for SaaS platforms, social networks, and closed communities where search engine optimization doesn’t matter. If a project requires effective SEO, on the other hand, then you should use a multi-page application.

# Advantages

• Fast and responsive
• Caching capabilities
• The development is simplified and streamlined. There is no need to write code to render pages on the server. It is much easier to get started because you can usually kick off development from a file file://URI, without using any server at all.
• It’s easier to make a mobile application because the developer can reuse the same backend code for web application and native mobile application.
• SPA can cache any local storage effectively. An application sends only one request, store all data, then it can use this data and works even offline.
• No extra queries to the server to download pages.
• User friendly.
• Performance improvement, Single Page Application can improve performance in many ways, Single time file load each of HTML, CSS, JS.

# Disadvantages

• Browser history
• It is very tricky and not an easy task to make SEO optimization of a Single-Page Application. Its content is loaded by AJAX (Asynchronous JavaScript and XML) — a method of exchanging data and updating in the application without refreshing the page.
• Client must enable JavaScript, Single Page Application build with JavaScript, So JavaScript should be enabled in client browser. JavaScript enabled in all modern browsers by default.
• Security: Compare to traditional page Single Page Application is less secure due to Cross-site scripting (XSS).
• Memory Leak: Memory leak in JavaScript can even cause powerful system to slow down.

# Comunication with server-side

# HTTP

Этот протокол описывает взаимодействие между двумя компьютерами (клиентом и сервером), построенное на базе сообщений, называемых запрос (Request) и ответ (Response). Каждое сообщение состоит из трех частей: стартовая строка, заголовки и тело. При этом обязательной является только стартовая строка.

• GET — получение ресурса
• POST — создание ресурса
• PUT — обновление ресурса
• DELETE — удаление ресурса

# HTTPS

• HTTPS не является отдельным протоколом передачи данных, а представляет собой расширение протокола HTTP с надстройкой шифрования;
• передаваемые по протоколу HTTP данные не защищены, HTTPS обеспечивает конфиденциальность информации путем ее шифрования;
• HTTP использует порт 80, HTTPS — порт 443.

SSL-сертификат — это цифровая подпись, которая позволяет обеспечить безопасное зашифрованное соединение между веб-сервером (сайтом) и веб-клиентом (браузером) посредством протокола HTTPS. В свою очередь, HTTPS использует криптографический протокол SSL или TLS для шифрования передаваемых данных. SSL-сертификат особенно необходим ресурсам, которые работают с личными данными пользователей, платежными системами, конфиденциальной информацией. Шифрование таких данных обеспечит их защиту от перехвата третьими лицами, а также станет свидетельством заботы о пользователях.

# WS

современное средство коммуникации. Кросс-доменное, универсальное, безопасное.

const socket = new WebSocket('ws://mypage.ua/ws');

при new WebSocket браузер посылает специальные заголовки, для проверки, поддерживает ли сервер эот протокол (их нельзя установить кодом)

Есть 4 колбека

• socket.onopen
• socket.onclose
• socket.onmessage
• socket.onerror

Для посылки данных socket.send(data); (можно и файлы)

есть ws и wss (WebSocket над HTTPS)

# REST concept

# HTTP methods and their using

• Ключевое понятие в REST — это ресурс. Ресурс имеет состояние, и мы можем его получать или изменять при помощи представлений.

• GET /books/ — получить список всех книг
• GET /books/3/ — получить книгу номер 3
• PUT /books/ — добавить книгу (данные в теле запроса)
• POST /books/3 – изменить книгу (данные в теле запроса)
• DELETE /books/3 – удалить книгу

# Additional headers

# Request headers

• Accept

  • specifies the content types that are valid in the response message
  • application/xml, application/json

• Content-Type

  • indicates the content type that is used in the body of the request
  • application/xml

• Authorization

  • contains the credentials to authenticate a user agent with a server

• Keep-Alive

  • controls how long a persistent connection should stay open

• Cookie

  • contains stored HTTP cookies previously sent by the server with the Set-Cookie header.

• Access-Control-Allow-Origin

  • indicates whether the response can be shared

# AJAX

• Свойства

  • xhr.readyState (0-4)
  • xhr.status
  • xhr.responseText
  • xhr.onreadystatechange

• Методы

  • xhr.open(method, url) 'GET', 'POST'
  • xhr.send([data]) data только при POST запросе
  • xhr.abort() отменить
  • xhr.setRequestHeader() установить заголовок

const xhr = new XMLHttpRequest();

xhr.open('GET', 'action.php');
xhr.send();

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
}

# JSON vs XML

• similarities and differences
• pros and cons

# JSON

• JSON.parse(str, reviver(key, value))
• JSON.stringify(value, replacer, space) (функции игнорируются, ссылки на DOM)

# XML

<?xml version="1.0"?>
<catalog>
   <book id="bk101">
      <author>Gambardella, Matthew</author>
      <title>XML Developer's Guide</title>
      <genre>Computer</genre>
      <price>44.95</price>
      <publish_date>2000-10-01</publish_date>
      <description>An in-depth look at creating applications 
      with XML.</description>
   </book>
</catalog>

# jQuery, Zepto

• selectors
• events
• work with litst of elements
• effects
• manipulations with DOM
• ajax
• promises

# Using underscoreJS/lodash

• Collections

  • every, some, filter, forEach, map, reduce, reject
  • groupBy, orderBy
  • includes
  • size

• Arrays

  • concat
  • difference
  • fill
  • indexOf
  • first, last
  • join, pull
  • reverse, slice
  • sorted, sortedUnique
  • take, takeRight
  • uniq, unzip

• Functions

  • bind
  • curry
  • debounce
  • memoize
  • once
  • throttle

• Objects

  • assign, assignIn
  • findKey
  • forIn
  • get, has
  • keys
  • merge
  • omit, omitBy
  • pick, pickBy
  • set, unset
  • values

• Utility

  • noop
  • range
  • times
  • uniqueId
  • identity
  • bindAll