Лекции

Lectures.txt

Front-end Elementary.
Лекция 1.
Преподаватель: Юрий Федоренко.
yura.fedorenko. = skype
socialId = djamah
learnJavaScript.ru

Типы данных:
1) undefined
2) boolean
3) string
4) number : NaN = not a number;
5) null
6) object : array, function

typeof 42; // "number";
typeof(42) - определить тип данных, но не правильно определяет null (смотри ниже); // "number";
typeof(null); // "object";
null === null; // true
typeof []; // "object"

underscore // какая-то крутая библиотека

number // float, int, infinity
-2/0 // -Infinity
JS плохо работает с математикой

отличие null от underfined в том, что
var a; // underfined, пока не задали ему значение
null; // можем задать переменной, обработчики событий возвращают null по умолчанию, пока ничего не произошло (ничего не задано)

NaN // незнамо что, но не число
NaN === NaN // false
isNaN(); // функция для определения NaN;

создание объекта
var o = {
  firstName: "yura",
  lastName: "fedorenko"
};
console.log(o.firstName);
console.log(o["first name"]);

var c = prompt('code please?');
alert(codes[c]);
for(var i in codes) {
  if(codes[i] === c){
    alert(i);
  }
}

json = как преобразовать js представление в строку
массив = подвид объекта, в котором ключами выступают не строки, а ряд чисел

функции в js
function function_name(argument){

};

var function_name = function(argument){

};

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

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

=== проверяет совпадение типа

Лекция 2. 
Объяснение дз.
Если (function(){})() // анонимная функция, которая сразу же вызывается
arguments // объект, похожий на массив, но не массив, который содержит всё переданные в функцию аргументы
специальный параметр, который не нужно явно прописывать, не наследуется от прототипа массива. 
есть length и arguments.callee // количество аргументов и самовызов функции (для сравнения), callee может понадобиться для рекурсии 
без именования функции
function add(){
  for(var i - 0; i < arguments.length; i++){
    sum += arguments[i];
  }
  return sum;
}
add(1, 2,3 ,4 ,5);
add(a, b, ...arr); // при вызове первый в a, второй в b, а все остальные в arr.
typeof [1,2,3]; // object

Если функции не понятен контекст вызова, то она контекстом берет глобальный объект
Если this нельзя понять из вызова, то this считается глобальным объектом

console.dir(); // выводит всё как объект
.apply(o2); // позволяет задать this принудительно 
console.log( calcAge.apply(o2) ); // this задаем принудительно
console.log( o.age() ); // o.age.applye(o);

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

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

Лекция 3. 
var o = new Object(); // так объекты лучше не создавать
var o = {};

Примитивные типы: number, string, bool
Когда мы применяем метод, то JS временно превращают в объект-оберкту, возвращает значение, которое снова примитивный тип.
Можно специально объявить объектом для того чтобы потом обращаться к нему
var n = new Object(42); // или var n = new Number(42);
n.count++;

var o = new Object(); // тоже самое, что o = {};
console.dir(o.constructor);
ссылку на object

function HillelConstructor() { // функции конструкторы принято писать с большой
  // body...
  //this = {}; // неявно
  //return this; // тоже неявно
}
var o = new Constructor(); // если создавать так, то получаем this при вызове
console.dir(o.constructor);

proto и prototype = разные ссылки
свойство prototype = явное, задукоментированное свойство, у которого есть своя ссылка proto, есть конструктор, который указывает на саму функцию

у созданного объекта ссылка proto указывает на prototype
var o = {}; // ссылка на верховный object
var o = new HillelConstructor();
o.bron = 1990;
function HillelConstructor() {
  this.age = function() {
    return 2016 - this.born;
  }
}
HellelConstructor.prototype.age = function(){
  return 2016 - this.born;
}
o.age; // вернет возраст
var o = new HillelConstructor();
var o2 = new HillelConstructor(); // унаследованы от одного объекта.
o.born = 1990;
o2.born = 1970; // записываем born
теперь у каждого o есть born и age, унаследованый из конструктора, объекты не равны

HillelConstructor.prototype.age = function(){
  return 2016 - this.born;
}
o и o2 теперь ведут на один объект, общий прототип, который содержит функцию age
прототайп хорош для экономии памяти, 
а без протипа лучше производительность

методы засовывать лучше в прототайп
а свойства в сам объект

function HillelConstructor() {
  this.firstName = firstName || 'имя не определено';
  this.lastName = lastName || 'фамилия не определена'; 
}
var o =  new HillelConstructor('yura', 'fedorenco');
var o2 = new HillelConstructor('ivan', petrov');
var o3 = new Hillelconstructor();

var p = {

}

HillelConstructor.prototype = p; // ссылка на p;
o4.age = function() {
  return (2016 - this.born) * 5; // метод созхраняется до prototype, и принадлежит только этому объекту
}

if(a || b); // к булевому значению приводится с помощью самого оператора if
/*условие*/ ? /*to*/ : /*ina4e*/;
var p = /*условие*/ ? /*to*/ : /*ina4e*/; можно записать в переменную

this.firstName = (firstName!==underfined) ? firstName :  "petryk";

Лекция 3. 
ДЗ. Сделать padding-left функцию.
paddingleft(str, number, " ");
padding(строка, 5, пробел) = "   5"

function Student(name, last_name){
  return {
    this.name = name;
    this.last_name = last_name;
  }
}

eval = функция, которой можно передать строку кода
eval("var 1 = 42, a = {};") 
работает медленно
eval("var prop = a.firstName;");
console.log(prop);

var a = {
  firstName: 'name',
  lastName: 'last'
}
var q = propmpt('?');
eval("var prop = a;" + q); // можно выводить конкотенацию строк

setTimeout(function(){
  console.log('yo');
}, 3000);

setTimeout("console.log('yo')", 3000); // так можно, но не нужно

Дуглас Крокфард = сильные стороны JS // книга
все значения и ключи следует передавать в кавычках, причем в двойных
var s = '[{"title : "1"}]';

function each(a, f){
  for (var i = 0, i < a.length; i++){
    f(a[i]);
  }
}

each(arr, function(item)){
  sum += item;
}

eacth(arr2, function(item){
  each(item, function(item){
    sum += item;
  }
}

Lecture 6.
Для регистрации доллара.
jQuery(function($) {
  
});

map результат работы
filter сравение ( "< > ==" )

если проверяем много условий, то можно сравнить условия в массив и пройтись по нему

function add(a, b){
  var oldA = a,
      oldB = b;
  if(b === underfined){
    return function(newB){
      return a + newB;
    }
  }
  return a + b;
}

Lecture 7.
Сложность сортировки n значит что нужно n раз пройтись по n элементам, n * n = n^2
<script>
  var e = null;
  document.onclick = function(e){
    e = e || window.e;
    console.log(e);
  }
</script>

.apply() // принудительно задаем this
$('.all-tasks').on('click', '.remove', removeItem); // срабатывает только при нажатии на remove

Lecture 8.
Object.defineProperty(student, "born", {
  value: 1990,
  writable: true // по умолчанию false, нельзя потом менять
  configurable: true // по умолчанию false, определяет можно ли удалить это свойство
  если true, то можно потом написать delete student.born
  enumerable: true // можно ли использовать forIn (вызвать все свойства по очереди), по умолчанию false
  
});

Object.defineProperty(student, "toString", {
  enumerable: false
})
для того чтобы forIn потом не выводил переопределенный toString

for(var i in sturdent){
  if(!student.hasOwnProperty(i)){
    continue;
  }
  console.log(i);
}

var student = {
  get age(){
  return 2016-this.born;
  }
  set age(p){
    this.born = 2016 - p;
  }
  get fullName(){
    return this.firstName + " " + this.lastName;
  }
  set fullName(n)
  { n = n.split(' ');
    this.firstName = n[0];
    this.lastName = n[1];
  }
  
  fucntion Student(firstName, lastName, age){
    var born = 2016 - age; // недоступна извне
    this.firstName = firstName;
    this.lastName = lastName;
    return{
      firstName: firstName,
      lastName: lsadtName,
      get age(){
        return 2016 - born;
      },
      set age(p){
        born = 2016 - p;
      }
    }
  }
  
  Student.prototype = {
    get name(){
        return 2016 - born;
      },
      set name(p){
        born = 2016 - p;
      }
  }
  Object.defineProperty(this, "age", {
    get: function(){
      return 2016 - born;
    }
    set: function(p){
      born = 2016 - p;
    }
  }
}

Lecture 8. 
var arr=[];
for(var i = 0; i < 999; i++){
  arr.push(parseInt(Math.random()*100));
}
console.log(arr);
function mergeSort(arr){
  var chunkSize = arr.length / 2;
  if(chunkSize >== 1){
    var left = mergeSort(arr.slice(0, chunkSize));
    var right = mergeSort(arr.slice(chunkSize));
    var res = [];
    while(left.length && right.length){
     if(left[0] < right[0]) {
      res.push(left.shift());
     } else {
        res.push(right.shift());
      }
    }
    return res.concat(left,right);
  }
  return arr;
}

Lecture 10.
Babel is a JavaScript compiler.
Use next generation JS today.

Install from npm.
{
  "name": "app",
  "version": "1.0.0"
}

npm install --save-dev babel-cli

.\node_modules\.bin\babel script.js
.\node_modules\.bin\babel script.js --out-file script-complied.js

Presets
babelrc

npm intall --save-dev babel-preset-es2015
"babel" : {
  "sourceMaps" : "inline",
  presets: ["babel-presets-es2015"]
}
"scripts": {
  "watch": "./node_modules/.bin/babel script.js --watch --out-file script-complied.js"
}

npm run build

lecture 11
lecture 13 git
Системы контроля версий vcs
Коммит = регистрация изменений в проекте


1) rebase
2) rebase + squash
3) cherry-pick
4) git --amend // позволяет изменить последний commit
5) git reset --soft --hard --mixed
git revert // как изменять последние commit'ы
hooks для github

d3.js
paper.js
chart.js

enqueire.js
retina.js

http://html5.by/blog/flexbox/

https://www.firebase.com/

lecture 22.
http://jade-lang.com/
underscore
mongoose

lecture 23.