Jquery

Selectors

Same as CSS

:first / :last
:even / :odd
:eq( index ) /
:gt( index ) / :lt( index )
:header
:animated
: not()

$( ".rolling" )
$( "ul li:nth-child(3n)" )

$( "tr:first" )
$( "input:not(:checked) + span" )
$( "tr:even" )
$( "td:eq( 2 )" )
$( ":header" )

$( "div:contains('John')" )
$( "td:empty" )
$( "div:has(p)" )
$( "td:parent" )

$( ":input" )
$( "form input:text" )
$( "form input:radio" )
$( ":submit" )
$( ":image" )
$( "input:enabled" )
$( "input:disabled" )
$( "input:checked" )
$( "select option:selected" )

Content filters

:contains( text )
:empty
:has( selector )
.parent

Visibility filters

:visible
:hidden

Form filters

:input
:radio / :checkbox
:submit / :button
:image / :reset / :file
:enabled
:disabled
:checked
:selected

Attributes

.attr( name )
.attr( properties )
.attr( key, value )
.removeAttr( name )

var title = $( "img" ).attr( "title" );
$( "img" ).attr({
    src: "/images/hat.gif",
    title: "jQuery",
    alt: "jQuery Logo"
});
$( "button:gt(1)" ).attr( "disabled", "disabled" );
$( "button" ).removeAttr( "disabled" );

$( "p:last" ).addClass( "selected" );
var rightString = $( "p:first" ).hasClass( "selected" );
$( "p:even" ).removeClass( "blue" );
$( "h2" ).toggleClass( "highlight" );

$( "p" ).css( "background", "#FF0000" );

var content = $( "p" ).html();
$( "div" ).html( "<span class='red'>Hello <b>Again</b></span>" );

var str = $( "p:first" ).text();
$( "p" ).text( "<b>Some</b> new text." );

ar multipleValues = $( "#multiple" ).val() || [];
$( "input" ).val( "Enter Password" );

.addClass( class )
.hasClass( class )
.removeClass( class )
.toggleClass( class )

Traversing

Filtering

.eq( ) / .filter ( )
.first( ) / .last( )
.has( )
.is( )
.not( )
.slice( )

$("li").eq(5)
$("p span").first()
$("li").has("ul")
$(event.target).is("li")
$("li").not(":even")
$("li").slice(2)
$( "li" ).filter( ":even" ).css( "background", "#FF0000" );

$("ul.level-2").children()
$("li.third-item").next()
$("li.item-a").parent()
$("li.third-item").prev()
$("li.third-item").siblings()
$('#google_translate_element').find('*').unbind('click');

$("p").add("div")
$("div.after-addback").find("p").addBack()
$("#frameDemo").contents()
$( "ul.first" )
  .find( ".foo" )
    .css( "background-color", "red" )
  .end()
  .find( ".bar" )
    .css( "background-color", "green" );

var list = $( '#my-unordered-list' );
// Сделать нечто со списком, а затем...
var listAndListItems = list.add( '#my-unordered-list li' );

Tree traversing

.children( ) / .closest( ) / .find( )
.next( ) / .nextAll( ) / .nextUntil( )
.offsetParent( ) / .parent( ) / .parents( ) / .parentsUntil( )
.prev( ) / .prevAll( ) / .prevUntil( )
.siblings( )

Miscellaneous

Traversing

.add( )
.addBack( )
.contents( )
.end( )

Вы также можете добавить что-то в существующую выборку с помощью метода .add().

Array

.map( callback )
.each( callback )
.index( ) / .index( selector ) / .index( element )
.get( index ) / .get( )
.toArray( )

$( ":checkbox" ).map(function() {
    return this.id;
  }).get().join();

$( "li" ).each(function( index ) {
  console.log( index + ": " + $( this ).text() );
});

console.log( $( "li" ).get( 0 ) );
alert( "Index: " + $( "#bar" ).index() );
alert( $( "li" ).toArray() );

Without a parameter, .get() returns an array of all of the elements:

Dom Manipulation

Inside

.append( )
в конец
.appendTo( )
.prepend( )
в начало
.prependTo( )

Outside

.after( )
.insertAfter( )
.before( )
.insertBefore( )

Around

.wrap(.. )
.wrapAll( )
.unwrap( )

$(".container").append($("h2"));
$("h2").appendTo($(".container"));
$( ".inner" ).prepend( "<p>Test</p>" );
$( "<p>Test</p>" ).prependTo( ".inner" );

$( ".container" ).after( $( "h2" ) );
$( "h2" ).insertAfter( $( ".container" ) );
$( ".inner" ).before( "<p>Test</p>" );
$( "<p>Test</p>" ).insertBefore( ".inner" );

$( "p" ).unwrap();
$( ".inner" ).wrap( "<div class='new'></div>" );
$( ".inner" ).wrapAll( "<div class='new'></div>");
$( ".inner" ).wrapInner( "<div class='new'></div>");

$( "<h2>New heading</h2>" ).replaceAll( ".inner" );
$( "div.second" ).replaceWith( "<h2>New heading</h2>" );

$( ".hello" ).remove();
var p = $( "p" ).detach();
$( ".hello" ).empty();

$( ".hello" ).clone().appendTo( ".goodbye" );

Replacement

.replaceAll( )
.replaceWith( )

Removal

remove( )
.detach( )
.empty( )

Clone

.clone()

CSS workaround

.css( propertyName )
.css( propertyName, propertyValue )

var color = $( "h2" ).css( "background-color" );
$( "div.example" ).css( "width", function( index ) {
  return index * 50;
});

var p = $( "p:last" );
var offset = p.offset();
p.html( "left: " + offset.left +
", top: " + offset.top );

var p = $( "p:first" );
var position = p.position();
$( "p:last" ).text( "left: " + position.left +
", top: " + position.top );

var p = $( "p:first" );
$( "p:last" ).text( "scrollTop:" + p.scrollTop() );

var modWidth = 50;
$( "div" ).one( "click", function() {
  $( this ).width( modWidth ).addClass( "mod" );
  modWidth -= 8;
});

$( "div" ).on( "click", function() {
  $( this ).height( 30 ).css({
    cursor: "auto",
    backgroundColor: "green"
  });
});

Position

.position( )
.offset( )
.scrollTop( ) / .scrollLeft( )

W idth/Height

.height( ) / .outerHeight( ) / .innerHeight( )
.width( ) / .outerWidth( ) / .innerWidth( )

Events

resize, scroll
Loading: .ready()
Operations: .trigger(), .off()
.on()
- Mouse events: click, focus, hover, etc.
- Keyboard events: keyup, keydown, etc.

$( document ).ready(function() {
  // Handler for .ready() called.
});

$( "#foo" ).on( "click", function() {
  alert( $( this ).text() );
});
$( "#foo" ).trigger( "click" );

$( "p" ).off();

$( "p" ).on( "click", function() {
  alert( $( this ).text() );
});

.trigger( ) Execute all handlers and behaviors attached to the matched elements for the given event type.

.off( ) Remove an event handler.

Effects

Basic: .show(), .hide(), toggle()
Slide :
.slideUp( )

.slideDown( )

.slideToggle( )
Fade
.animate( )
.delay( ) / .finish( ) / .stop( )

$( "p" ).hide();

$( "p" ).show( "slow"/ "fast");

$( "#book" ).toggle( "slow", function() {
    // Animation complete.
  });

$( "div" ).slideDown( "slow" );
$( "div" ).slideUp();
$( "#book" ).slideToggle( "slow", function() {
    // Animation complete.
  });

$( "#book" ).animate({
    opacity: 0.25,
    left: "+=50",
    height: "toggle"
  }, 5000, function() {
    // Animation complete.
  });

$( "#foo" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );

Структуры данных

способы хранить и организовывать данные, чтобы эффективней решать различные задачи.

O - оценки производительности алгоритмов (Оценка времени выполнения — общее количество операций, которое алгоритм проведёт на данном множестве данных. Оценка объёма — общее количество памяти, требующееся алгоритму для обработки данного множества данных.)

О показывает насколько быстро возрастает время выполнения алгоритма при увеличении входных данных

Хеш-таблица — неупорядоченная структура данных. Вместо индексов мы работаем с «ключами» и «значениями», вычисляя адрес памяти по ключу.

Смысл в том, что ключи «хешируются» и позволяют эффективно работать с памятью — добавлять, получать, изменять и удалять значения.

var hashTable = new HashTable();

hashTable.set('myKey', 'myValue');
hashTable.get('myKey'); // >> 'myValue'

hashKey("abc") =>  96354
hashKey("xyz") => 119193

хеш-функция должна ограничивать размер ключей, т.е. ограничивать число доступных адресов памяти для неограниченного количества значений.

Стеки - список с 1 точкой входа, можно добавлять и убирать значения только из конца списка, реализуется принцип " 1 вошел - последний вышел"

class Stack {

    constructor() {
        this.list = [];
        this.length = 0;
    }
    push(value) {
    this.length++;
    this.list.push(value);
    }
    pop() {
    // Нет элементов — ничего не делаем.
    if (this.length === 0) return;

    // Возьмём последний элемент списка и вернём значение.
    this.length--;
    return this.list.pop();
    }
}

Очередь - список с 1 точкой входа и 1 точкой выхода, данные добавляются в конец и извлекаются из начала, реализуется принцип " 1 вошел - последний вышел"

class Queue {

    constructor() {
        this.list = [];
        this.length = 0;
    }
    enqueue(value) {
        this.length++;
        this.list.push(value);
    }
    dequeue() {
    // Нет элементов — ничего не делаем.
    if (this.length === 0) return;

    // Убираем первый элемент методом shift и возвращаем значение.
    this.length--;
    return this.list.shift();
}
}

Связные списки Преимущество связного списка — эффективность добавления элементов в начало, середину и конец. вы работаете с вершинами, указывающими на другие вершины.

В отличие от графа, связный список имеет единственную вершину, из которой начинается внутренняя цепочка. Её называют «головой», головным элементом или первым элементом связного списка.

class LinkedList {
    constructor() {
        this._head=null;
        this._tail=null;
        this._length=0;
    }
    get(position) {
    // Выведем ошибку, если искомая позиция превосходит число вершин в списке.
    if (position >= this.length) {
        throw new Error('Позиция выходит за пределы списка');
    }

    // Начнём с головного элемента списка.
    var current = this.head;

    // Пройдём по всем элементам при помощи node.next,
    // пока не достигнем требуемой позиции.
    for (var index = 0; index < position; index++) {
        current = current.next;
    }
    return current;
    }
}

add(value, position) {
    var node = {
        value: value,
        next: null
    };
    if (position === 0) {
        node.next = this.head;
        this.head = node;
    } else {
          // Сперва найдём предыдущую и текущую вершины.
          var prev = this.get(position - 1);
          var current = prev.next;
          // Затем вставим новую вершину между ними, установив поле «next»
          // на текущую вершину current,
          // и поле «next» предыдущей вершины previous — на вставляемую.
          node.next = current;
          prev.next = node;
    }
    this.length++;
}

class Tree {
    constructor() {
        this.root = null;
    }
   add(value) {
    var node = {
        value: value,
        left: null,
        right: null
    };
    // Частный случай, если не существует корневой вершины — добавим её.
    if (this.root === null) {
        this.root = node;
        return;
    }
    var current = this.root;
    while (true) {
        // Если значение value больше current.value, двигаемся вправо.
        if (value > current.value) {
            if (!current.right) {
                current.right = node;
                break;
            }
            current = current.right;
        // Если значение value меньше current.value, двигаемся влево.
        } else if (value < current.value) {
            if (!current.left) {
                current.left = node;
                break;
            }
            current = current.left;
        // Если значение ни больше и не меньше, оно должно быть совпадать
        // с текущим, значит ничего делать не надо.
        } else {
            break;
        } }}}

Вот пример, как работает бинарное дерево. У каждой вершины есть два потомка:

Левый — меньше, чем значение вершины-родителя.
Правый – больше, чем значение вершины-родителя.

иерархическая структура данных, в которой каждый узел имеет не более двух потомков (детей)

Сортировка - процесс упорядочения элементов в массиве по возрастанию/ убыванию значений. Цель: ускорить поиск

function BubbleSort(A)      
{                          
    var n = A.length;
    for (var i = 1; i < n; i++){ 
        for (var j = n-1; j >=i; j--){
            if (a[j-1] > a[j]){ 
                var tmp = a[j-1]; 
                a[j-1] = a[j];
                a[j]=tmp;
            }
        }
     }                     
    return A;  
}

Пузырьком

Выбором

function SelectionSort(A)       
{                              
    var n = A.length;
    for (var i = 0; i < n-1; i++) { 
        var min = i;
        for (var j = i+1; j < n; j++){ 
            if (A[min] > A[j]) min = j; 
            if( min !=i){
                var t=a[min];
                A[min] = A[ i ]; 
                A[ i ] = t;
     }                    
    return A;   
}

function InsertionSort(A)    
{                              
    var n = A.length;
    for (var i = 1; i < n; i++) { 
        var T = A[ i ];
        for ( var j=i-1; j >= 0 && t<A[j]; j--) {
            A[j+1] = A[j];
        }
       A[j+1] = t;
     }                    
    return A;   
}

Вставками

сначала сравниваются 2 первых элемента и при необходимости меняются местами, 3 ставится в необходимую позицию относительно них и тд

Шелла

function ShellSort(A)
{
  var n=a.length;
  for(var d=3;d>0; d--){
    for( var i=d; i<n;i++){
        var t=a[i];
        for ( var j=i-d; i>=0 && t<a[j]; i-=d){
            a[j+d]=a[j];
        }
        a[j+d]=t;
    }}
    return A;
}

Основан на с вставками. сортирует сначала на расстроении 3 позии зачем 2,1

function quickSort(arr, left, right){
   var len = arr.length, 
   pivot,
   partitionIndex;

  if(left < right){
    pivot = right;
    partitionIndex = partition(arr, pivot, left, right);

   //sort left and right
   quickSort(arr, left, partitionIndex - 1);
   quickSort(arr, partitionIndex + 1, right);
  }
  return arr;
}

function partition(arr, pivot, left, right){
   var pivotValue = arr[pivot],
       partitionIndex = left;

   for(var i = left; i < right; i++){
    if(arr[i] < pivotValue){
      swap(arr, i, partitionIndex);
      partitionIndex++;
    }
  }
  swap(arr, right, partitionIndex);
  return partitionIndex;
}

function swap(arr, i, j){
   var temp = arr[i];
   arr[i] = arr[j];
   arr[j] = temp;
}

Quicksort

Step-1: You have to pick a pivot. This could be randomly selected or the middle one. Here we select the last element of the array.

Step-2: Put all the items smaller than the pivot value to the left and larger than the pivot value to the right.

Step-3:Repeat the step-2 for both left and right side of the pivot (pick a pivot, put all item smaller than the pivot to the left and larger on the right)

Основы ООП

Классом в объектно-ориентированной разработке называют шаблон/программный код, предназначенный для создания объектов и методов.

ООП - методология программирования, основанная на представлении программы в виде совокупности взаимодействующих друг с другом объектов, каждый из которых является экзепляром класса, а классы образуют иерархию наследования

При объектно-ориентированной разработке мы описываем происходящее на уровне объектов, которые создаются, меняют свои свойства, взаимодействуют друг с другом и (в случае браузера) со страницей, в общем, живут.

Методологии: ООП, функциональное программирование, логическое, модульное, структорное

Абстрактный класс - Грубо говоря, это класс-шаблон. Он реализует функциональность только на том уровне, на котором она известна на данный момент.

Абстрактные классы предназначены для создания обобщенных сущностей, на основе которых в дальнейшем предполагается создавать более конкретные производные классы. Абстрактный класс – это класс, который может использоваться лишь в качестве базового класса для некоторого другого класса, поэтому невозможно создать объект типа абстрактного класса

Абстракция подразумевает разделение и независимое рассмотрение интерфейса и реализации

Абстракция выделяет существенные характеристики некоторого объекта, отличающие его от всех других видов объектов. Абстракция отделяет существенные особенности поведения от реализации

Виртуальная функция — это функция, объявленная с ключевым словом virtual в базовом классе и переопределенная в одном или в нескольких производных классах.Любой класс, где объявлена хотя бы одна строго виртуальная функция, называется абстрактным
Суть абстрагирования в том, чтобы определять метод в том месте, где есть наиболее полная информация о том, как он должен работать.

Интерфейс – это набор методов класса, доступных для использования другими классами.

Очевидно, что интерфейсом класса будет являться набор всех его публичных методов в совокупности с набором публичных атрибутов. По сути, интерфейс специфицирует класс, чётко определяя все возможные действия над ним.

Так же стоит заметить, что абстрактный класс наследуется(etxends), а интерфейс реализуется (implements). Вот и возникает разница между ними, что наследовать мы можем только 1 класс, а реализовать сколько угодно.

Инкапсуляция – это свойство системы, позволяющее объединить данные и методы, работающие с ними, в классе и скрыть детали реализации от пользователя. По сути, всё то, что не входит в интерфейс, инкапсулируется в классе.

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

Наследование – это свойство системы, позволяющее описать новый класс на основе уже существующего с частично или полностью заимствующейся функциональностью. Класс, от которого производится наследование, называется базовым или родительским. Новый класс – потомком, наследником или производным классом.

Наследование – создание новых «классов» на основе существующих.

Механизм наследования позволяет определить базовый класс Машина, в нём описать то, что свойственно всем машинам, а затем на его основе построить другие, более конкретные: Кофеварка и т.п.

Полиморфизм – это свойство системы использовать объекты с одинаковым интерфейсом без информации о типе и внутренней структуре объекта.

«Один интерфейс, множество реализаций»

способность функции обрабатывать данные разных типов

Параметрический полиморфизм подразумевает исполнение одного и того же кода для всех допустимых типов аргументов, тогда как ad hoc полиморфизм подразумевает исполнение потенциально разного кода для каждого типа или подтипа аргумента.

персистентный класс - Возможность сохранения состояния объекта в промежутках времени между запусками программ

Шаблоны проектирования

Creational

Factory method - creates objects without specifying the exact class to create. У фабричного метода две основных цели:
1) Не использовать явно конкретные классы
2) Объединить вместе часто используемые методы инициализации объектов
Singleton - restricts object creation for a class to only one instance. Singleton — это класс, который может иметь только один экземпляр.

Structural

Decorator - dynamically adds/overrides behaviour in an existing method of an object
Facade - provides a simplified interface to a large body of code
Proxy - provides a placeholder for another object to control access, reduce cost, and reduce complexity

Behavioral

Observer - is a publish/subscribe pattern which allows a number of observer objects to see an event(позволяет получать экземпляру объекта этого класса оповещения от других объектов об изменении их состояния, тем самым наблюдая за ними)

function Foo () {
  //...
}
function Bar () {
  //...
}
function factory (type) {
  switch (type) {
    case 'foo':
      return new Foo();
    case 'bar':
      return new Bar();
  }
}

jsp.dom.Image = function () {
				
};
jsp.dom.factory = function (type) {
    return new jsp.dom[type];
}
var o = jsp.dom.factory('Link');

var Singleton = (function() {
	var instance;

	// Приватные методы и свойства
	// ...	

	// Конструктор
	function Singleton() {
		if ( !instance )
			instance = this;
		else return instance;

		// Публичные свойства
	}

	// Публичные методы
	Singleton.prototype.test = function() {};

	return Singleton;
})()

Реляционная база данных представляет собой набор таблиц (сущностей). Таблицы состоят из колонок и строк (кортежей). Внутри таблиц могут быть определены ограничения, между таблицами существуют отношения. При помощи SQL можно выполнять запросы, которые возвращают наборыданных, получаемых из одной или нескольких таблиц

Целью нормализации реляционной базы данных является устранение недостатков структуры базы данных, приводящих к избыточности, которая, в свою очередь, потенциально приводит к различным аномалиям и нарушениям целостности данных.

База данных — совокупность данных, хранимых в соответствии со схемой данных, манипулирование которыми выполняют в соответствии с правилами средств моделирования данных.[3]

Реляционная база данных — это совокупность взаимосвязанных таблиц, каждая из которых содержит информацию об объектах определенного типа

Имеется три нормальные формы отношений.

Первая нормальная форма. Реляционная таблица приведена к первой нормальной форме тогда и только тогда, когда ни одна из ее строк не содержит в любом своем поле более одного значения и ни одно из ее ключевых полей не пусто. Так, если из таблицы Студент требуется получать сведения по имени студента, то поле ФИО следует разбить на части Фамилия, Имя, Отчество.

Вторая нормальная форма. Реляционная таблица задана во второй нормальной форме, если она удовлетворяет требованиям первой нормальной формы и все ее поля, не входящие в первичный ключ, связаны полной функциональной зависимостью с первичным ключом. Чтобы привести таблицу ко второй нормальной форме, необходимо определить функциональную зависимость полей. Функциональная зависимость полей — это зависимость, при крторой в экземпляре информационного объекта определенному значению ключевого реквизита соответствует только одно значение описательного реквизита.

Третья нормальная форма. Таблица находится в третьей нормальной форме, если она удовлетворяет требованиям второй нормальной формы, ни одно из ее неключевых полей не зависит функционально от любого другого неключевого поля. Например, в таблице Студент (№ группы, ФИО, № зачетной книжки, Дата рождения, Староста) три поля — № зачетной книжки, № группы, Староста находятся в транзитивной зависимости. № группы зависит от № зачетной книжки, а Староста зависит от № группы. Для устранения транзитивной зависимости необходимо часть полей таблицы Студент перенести в другую таблицу Группа. Таблицы примут следующий вид: Студент (№ группы, ФИО, № зачетной книжки, Дата рождения), Группа (№ группы, Староста).

Анимация

CSS

transition
animation

JS

events
requestAnimationFrame
Web animations (Blink only)

TRANSITIONEVENT

transitionend

ANIMATIONEVENT

animationend
animationiteration
animationstart

Если увеличивать left от 0 до 100 при помощи setInterval, делая по 50 изменений в секунду, то это будет выглядеть как плавное перемещение.

var fps = 50; // 50 кадров в секунду
var timer = setInterval(function() {
  if (время вышло) clearInterval(timer);
  else немного увеличить left
}, 1000 / fps)

SetInterval

Animation timing Он позволяет синхронизировать наши анимации со встроенными механизмами обновления страницы. То есть, сгруппированы будут не только наши, но и CSS-анимации и другие браузерные перерисовки.

используется функция requestAnimationFrame.

var requestId = requestAnimationFrame(callback)
// отменить запланированное выше выполнение callback
cancelAnimationFrame(requestId);

Такой вызов планирует запуск callback в ближайшее время, когда браузер сочтёт возможным осуществить анимацию.

Если запланировать в callback какое-то рисование, то оно будет сгруппировано с другими requestAnimationFrame и с внутренними перерисовками браузера.

Функция callback получает один аргумент – время, прошедшее с начала загрузки страницы, результат вызова performance.now().

function animate(draw, duration) {
  var start = performance.now();

  requestAnimationFrame(function animate(time) {
    // определить, сколько прошло 
    времени с начала анимации
    var timePassed = time - start;

    // возможно небольшое превышение времени,
     в этом случае зафиксировать конец
    if (timePassed > duration) timePassed = duration;

    // нарисовать состояние анимации в момент timePassed
    draw(timePassed);

    // если время анимации не закончилось 
    - запланировать ещё кадр
    if (timePassed < duration) {
      requestAnimationFrame(animate);
    }

  });
}

duration Общее время, которое должна длиться анимация, в мс. Например, 1000.
timing(timeFraction) Временная функция, которая, по аналогии с CSS-свойством transition-timing-function, будет по текущему времени вычислять состояние анимации.
draw(progress) Функция, которая получает состояние завершённости анимации и рисует его. Значению progress=0соответствует начальная точка анимации, progress=1 – конечная.

Компьютерная сеть – набор связанных между собой автономных компьютеров для совместного решения информационных, вычислительных и других задач.

1) Клиентское оборудование (Клиент) - рабочая станция (персональный компьютер), ноутбук, телефон, телевизор... Т.е. любое устройство, которое может сформировать по команде пользователя или автоматически, запрос на получение информации из сети, получить ответ на свой запрос и отобразить полученную информацию в вид, доступный для потребителя информации.

2) Серверное оборудование (Серверы) - это своего рода хранилища данных, которые получают запросы от Клиентов на получение нужной им информации, формируют и отправляют Клиентам ответы на их запросы или передают информацию другим Серверам для хранения или для передачи другим Клиентам.

3) Сетевое Оборудование - оборудование, которое обеспечивает передачу информации по сети между Клиентами и Серверами, и собственно сами каналы связи.

Вся информация в сети передается исключительно небольшими порциями - пакетами. Любой Клиент и любой Сервер умеют преобразовывать поток передаваемой информации в набор отдельных пакетов и "склеивать" полученные пакеты обратно в поток информации.

Каждый пакет состоит из заголовка и информационной части.

Заголовок - это аналог почтового конверта. В заголовке указывается кому и от кого этот пакет передан - адрес отправителя пакета и адрес получателя, а также иная служебная информация, необходимая для успешной "склейки" пакетов получателем.

В информационной части - собственно сама передаваемая информация.

Адреса отправителя/получателя в заголовке пакета используется Сетевым Оборудованием для определения - куда какой пакет отправлять.

Применение пакетной передачи данных позволяет строить сеть таким образом, что маршруты доставки от одной точки сети до другой разных пакетов информации могут проходить по разным физическим каналам связи и, меняться в зависимости от их работоспособности или загрузки. Это значительно увеличивает "живучесть" сети в целом - даже если часть каналов связи будут неработоспособными, информация все равно может быть доставлена по другим работающим каналам.

Ку́ки (англ. cookie, буквально — печенье) — небольшой фрагмент данных, отправленный веб-сервером и хранимый на компьютере пользователя. Веб-клиент (обычно веб-браузер) всякий раз при попытке открыть страницу соответствующего сайта пересылает этот фрагмент данных веб-серверу в составе HTTP-запроса. Применяется для сохранения данных на стороне пользователя, на практике обычно используется для:

аутентификации пользователя;
хранения персональных предпочтений и настроек пользователя;
отслеживания состояния сеанса [en] доступа пользователя;
ведения статистики о пользователях.

HTTPS

HTTP (англ. HyperText Transfer Protocol — протокол передачи данных изначально предназначенный для передачи гипертекстовых документов , в настоящий момент используется для передачи произвольных данных)

Протокол HTTP предполагает использование клиент-серверной структуры передачи данных. Клиентское приложение формирует запрос и отправляет его на сервер, после чего серверное программное обеспечение обрабатывает данный запрос, формирует ответ и передаёт его обратно клиенту.

передача данных по протоколу HTTP осущ-ся через TCP/IP-соединения

DNS (англ. Domain Name System — система доменных имён) — компьютерная распределённая система для получения информации о доменах. Чаще всего используется для получения IP-адреса по имени хоста (компьютера или устройства

Метод URL HTTP/Версия

HTTP/Версия Код состояния Пояснение

GET / HTTP/1.1
Host: alizar.habrahabr.ru

HTTP/1.1 200 OK

Существующие методы:

GET: получить доступ к существующему ресурсу. В URL перечислена вся необходимая информация, чтобы сервер смог найти и вернуть в качестве ответа искомый ресурс.

POST: используется для создания нового ресурса. POST запрос обычно содержит в себе всю нужную информацию для создания нового ресурса.

PUT: обновить текущий ресурс. PUT запрос содержит обновляемые данные.

DELETE: служит для удаления существующего ресурса.

Метод GET отправляет скрипту всю собранную информацию формы как часть URL:

Метод POST передает данные таким образом, что пользователь сайта уже не видит передаваемые скрипту данные. POST передает данные, используя тело HTTP запроса.

http://www.komtet.ru/script.php?login=admin&name=komtet
http://www.komtet.ru/script.php

STATUS CODE DEFINITIONS

"Informational 1xx"
"Successful 2xx"
"Redirection 3xx"
"Client Error 4xx"
"Server Error 5xx"

Принципы проектрирвоания

Итак, как же расшифровывается S.O.L.I.D.:

Single Responsibility Principle (Принцип единственной обязанности)
Open Closed Principle (Принцип открытости/закрытости)
Liskov’s Substitution Principle (Принцип подстановки Барбары Лисков)
Interface Segregation Principle (Принцип разделения интерфейса)
Dependency Inversion Principle (Принцип инверсии зависимостей)

2. Другими словами, нужно избегать случаев, когда появление новых требований к функциональности влечет за собой модификацию существующей логики, стараясь реализовать возможность ее расширения.

3. Функции, которые используют ссылки на базовые классы, должны иметь возможность использовать объекты производных классов, не зная об этом. Это означает, что класс, разработанный на основании вашего базового класса путем расширения, должен работать в приложении без сбоев.

4. чтобы клиенты маленьких интерфейсов знали только о методах, которые необходимы им в работе. Клиент не должен вынужденно зависеть от элементов интерфейса, которые он не использует.

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

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

когда речь идет о построении архитектуры программы, создании ее структуры, под этим, главным образом, подразумевается декомпозиция программы на подсистемы (функциональные модули, сервисы, слои, подпрограммы) и организация их взаимодействия друг с другом и внешним миром.

хорошая архитектура это, прежде всего, модульная/блочная архитектура.

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

первый уровень по mvc

В этом случае программа из «спагетти-кода» превращается в конструктор, состоящий из набора модулей/подпрограмм, взаимодействующих друг с другом по хорошо определенным и простым правилам, что собственно и позволяет контролировать ее сложность, а также дает возможность получить все те преимущества, которые обычно соотносятся с понятием хорошая архитектура:

Масштабируемость (Scalability)
возможность расширять систему и увеличивать ее производительность, за счет добавления новых модулей.
Ремонтопригодность (Maintainability)
изменение одного модуля не требует изменения других модулей
Заменимость модулей (Swappability)
модуль легко заменить на другой
Возможность тестирования (Unit Testing)
модуль можно отсоединить от всех остальных и протестировать / починить
Переиспользование (Reusability)
модуль может быть переиспользован в других программах и другом окружении
Сопровождаемость (Maintenance)
разбитую на модули программу легче понимать и сопровождать

суть такого распространенного «архитектурного шаблона» как Модель-Вид-Контроллер (MVC)? Всего навсего в отделении представления от бизнес-логики, то есть в том, что любое пользовательское приложение вначале делится на два модуля — один из которых отвечает за реализацию собственно самой бизнес логики (Модель), а второй — за взаимодействие с пользователем (Пользовательский Интерфейс или Представление). Затем, для того чтобы эти модули могли разрабатываться независимо, связь между ними ослабляется с помощью паттерна «Наблюдатель»

Типичными модулями первого уровня (полученными в результате первого деления системы на наиболее крупные составные части) как раз и являются — «бизнес-логика», «пользовательский интерфейс», «доступ к БД», «связь с конкретным оборудованием или ОС».

Главным, что позволяет уменьшать связанность системы, являются конечно же Интерфейсы (и стоящий за ними принцип Инкапсуляция + Абстракция + Полиморфизм):

Модули должны быть друг для друга "черными ящиками" (инкапсуляция). Это означает, что один модуль не должен «лезть» внутрь другого модуля и что либо знать о его внутренней структуре. Объекты одной подсистемы не должны обращаться напрямую к объектам другой подсистемы
Модули/подсистемы должны взаимодействовать друг с другом лишь посредством интерфейсов (то есть, абстракций, не зависящих от деталей реализации) Соответственно каждый модуль должен иметь четко определенный интерфейс или интерфейсы для взаимодействия с другими модулями.

Ajax

AJAX (аббревиатура от «Asynchronous Javascript And Xml») – технология обращения к серверу без перезагрузки страницы.

За счет этого уменьшается время отклика и веб-приложение по интерактивности больше напоминает десктоп.

Что я могу сделать с помощью AJAX?

Элементы интерфейса. AJAX полезен для форм и кнопок, связанных с элементарными действиями: добавить в корзину, подписаться, и т.п.
Динамическая подгрузка данных. Например, дерево, которое при раскрытии узла запрашивает данные у сервера.
Живой поиск

uses XML to send and receive data

performs asynchronous requests/responses

Технически, с помощью AJAX можно обмениваться любыми данными с сервером.

Обычно используются форматы:

JSON – для отправки и получения структурированных данных, объектов.
XML – если сервер почему-то работает в формате XML, то можно использовать и его, есть средства.
HTML/текст – можно и просто загрузить с сервера код HTML или текст для показа на странице.

COMET – общий термин, описывающий различные техники получения данных по инициативе сервера.

Можно сказать, что AJAX – это «отправил запрос – получил результат», а COMET – это «непрерывный канал, по которому приходят данные». ( Чат, аукцион)

Объект XMLHttpRequest (или, как его кратко называют, «XHR») дает возможность из JavaScript делать HTTP-запросы к серверу без перезагрузки страницы.

XMLHttpRequest

Methods:

Open()
open( method, URL, async, userName, password ) настраивает
send(data) отправляет данные
abort() прерывает запрос
setRequestHeader(name, value)

Вызов xhr.abort() прерывает выполнение запроса.

Синхронные вызовы используются чрезвычайно редко, так как блокируют взаимодействие со страницей до окончания загрузки.

xhr.open(method, URL, async, user, password) настроить

Задаёт основные параметры запроса:

method – HTTP-метод. Как правило, используется GET либо POST,
URL – адрес запроса. Можно использовать не только http/https, но и другие протоколы, например ftp:// и file://.
async – если установлено в false, то запрос производится синхронно, если true – асинхронно.
user, password – логин и пароль для HTTP-авторизации, если нужны.

xhr.send([body]) отослать данные

Именно этод метод открывает соединение и отправляет запрос на сервер.

В body находится тело запроса. Не у всякого запроса есть тело, например у GET-запросов тела нет, а у POST – основные данные как раз передаются через body.

function doCompletion(word, callback, errorback) {
  var url = "autocomplete?action=complete&id=" + escape(word);
  var req = initRequest(url);
  req.onreadystatechange = function() {
    if (req.readyState == 4) {
      if (req.status == 200) {
        callback(JSON.parse(req.responseText));
      } else {
        errorback(req.statusText);
      }
    }
  };
  req.open("GET"/*type*/, url/*url*/, true/*async*/);
  req.send(null);
};

function doCompletion(word, callback, errorback) {
  var url = "autocomplete";
  var req = initRequest(url);
  req.onreadystatechange = function() {
    if (req.readyState == 4) {
      if (req.status == 200) {
        callback(JSON.parse(req.responseText));
      } else {
        errorback(req.statusText);
      }
    }
  };
  req.open("POST"/*type*/, url/*url*/, true/*async*/);
  req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
  req.send("action=complete&id=" + escape(word));
};

function initRequest() {
    // XDomainRequest for IE8, IE9
    var XHR = ("onload" in new XMLHttpRequest()) ? 
    XMLHttpRequest : XDomainRequest;
    return new XHR();
};

Properties:

onreadystatechange. Set with an JavaScript event handler that fires at each state change. происходит несколько раз в процессе отсылки и получения ответа. При этом можно посмотреть «текущее состояние запроса» в свойстве xhr.readyState.
readyState. current status of request

0 = uninitialized // начальное состояние
1 = loading // вызван open
2 = loaded // получены заголовки

status. HTTP Status returned from server: 200 = OK
responseText. Текст ответа сервера.
statusText.Текстовое описание статуса от сервера: OK, Not Found, Forbidden и так далее.
responseXML. XML document of data returned from the server

3 = interactive // загружается тело (получен очередной пакет данных)
4 = complete

HTTP-заголовки

XMLHttpRequest умеет как указывать свои заголовки в запросе, так и читать присланные в ответ.

setRequestHeader(name, value) Устанавливает заголовок name запроса со значением value.
getResponseHeader(name) Возвращает значение заголовка ответа name, кроме Set-Cookie и Set-Cookie2.
getAllResponseHeaders() Возвращает все заголовки ответа, кроме Set-Cookie и Set-Cookie2.

xhr.setRequestHeader('Content-Type', 'application/json');
xhr.getResponseHeader('Content-Type')

Максимальную продолжительность асинхронного запроса можно задать свойством timeout. При превышении этого времени запрос будет оборван и сгенерировано событие ontimeout:

xhr.timeout = 30000; // 30 секунд (в миллисекундах)

События

loadstart – запрос начат.
progress – браузер получил очередной пакет данных, можно прочитать текущие полученные данные в responseText.
abort – запрос был отменён вызовом xhr.abort().
error – произошла ошибка.
load – запрос был успешно (без ошибок) завершён.
timeout – запрос был прекращён по таймауту.
loadend – запрос был завершён (успешно или неуспешно)

Jquery Ajax

$.ajax({
	type: 'POST',
	url: 'echo',
	data: { testingMethod: 'Get' },
	success: function(resp) {
    	var responseContainer = document.querySelector(".response");
			responseContainer.innerText = JSON.stringify(resp);
	}
});

можем использовать метод $.ajax() несколькими путями: можем передать объект конфигурации в качестве единственного аргумента или можем передать адрес и необязательный объект конфигурации.

jQuery.get() Load data from the server using a HTTP GET request
jQuery.post() Load data from the server using a HTTP POST request.
.load() Load data from the server and place the returned HTML into the matched element.
jQuery.getJSON() Load JSON-encoded data from the server using a GET HTTP request.
jQuery.getScript() Load JSON-encoded data from the server using a GET HTTP request.

$.get( "test.php", { name: "John", time: "2pm" } )
.done(function( data ) {
	alert( "Data Loaded: " + data );
    });
});

$.post( "ajax/test.html", function( data ) {
	$( ".result" ).html( data );
});

$( "#result" ).load( "ajax/test.html #container" );

$.getScript( "ajax/test.js", function( data, textStatus, jqxhr ) {
	console.log( data ); // Data returned
	console.log( textStatus ); // Success
	console.log( jqxhr.status ); // 200
	console.log( "Load was performed." );
});

var flickerAPI = "http://api.flickr.com/services
/feeds/photos_public.gne?jsoncallback=?";
$.getJSON( flickerAPI, {
	tags: "mount rainier",
	tagmode: "any",
	format: "json"
})
.done(function( data ) {
	$.each( data.items, function( i, item ) {
$( "<img>" ).attr( "src", item.media.m )
.appendTo( "#images" );
		if ( i === 3 ) {
			return false;
		}
	});
});

В функции accept используются два объекта:

req – объект запроса («request»), то есть то, что прислал клиент (обычно браузер), из него читаем данные.
res – объект ответа («response»), в него пишем данные в ответ клиенту.
- вызов res.writeHead(HTTP-код, [строка статуса], {заголовки}) пишет заголовки.
- вызов res.write(txt) пишет текст в ответ.
- вызов res.end(txt) – завершает запрос ответом.

Webpack

Webpack - это система сборки с массой возможностей. В частности, он анализирует JS-код (а также CSS или другой, через лоадеры), это даёт ему superpowers.

Gulp/grunt - это общая система для организации задач, которая сама по себе сборку не поддерживает, но её можно на ней написать, с помощью плагинов. При этом анализа кода, скорее всего, не будет, а значит ряд продвинутых фич отпадут.

То есть, это две разные вещи. В качестве одной из задач на gulp/grunt вполне может быть сборка webpack, так обычно и делают.

Цикл событий решает одну основную задачу: наблюдает за стеком вызовов и очередью коллбэков (callback queue). Если стек вызовов пуст, цикл берёт первое событие из очереди и помещает его в стек, что приводит к запуску этого события на выполнение.

Подобная итерация называется тиком (tick) цикла событий. Каждое событие — это просто коллбэк.

JS other

By Anastasia Shemetillo