JavaScript

1. JavaScript Продолжение

2. Приведение типов

3. Приведение типов • Зависит от оператора • Алгоритм работы оператора определяет тип значения • Зависит от типа аргумента и места • Функции приведения типовв JavaScript • ToNumber, ToString, ToBoolean, ToObject

4. Примеры оператора “+” примитив • Оператор перегружен для строк (конкатенация): “1” + “2” = “12” “1” + 2 = “12” 1 + 2 = 3 // Что происходит в внутренностях JavaScript: • if(Type(“1”)=== “String” ||Type(2)=== “String”){ returnConcat(ToString(“1”), ToString(2)); }else{ returnToNumber(1)+ToNumber(2); }

5. Пример оператора “+” {} • “1” + {} = “1[object Object]" Concat(ToString(“1”), ToString({})); ToString({})->ToPrimitive({}, “String”) ToPrimitive({}, “String”)-> ({}).[[DefaultValue]](“String”) if(IsCallable({}.toString)){ return({}).toString(); }elseif(IsCallable({}.valueOf)){ return({}). valueOf(); }else{ thrownewTypeError(); }

6. Пример оператора “+” {} • Если объявить операторы toStringили valueOfявно, то можно получить ожидаемое поведение • Иначе операторы навязаны прототипом объекта "2"+{toString:function(){return"1"}}//"21“ "2"+{valueOf:function(){return"1"}}//"21" "2"+{valueOf:null, toString:null} //TypeError: Cannotconvertobjecttoprimitivevalue

7. Операторы “==” и “===” • Алгоритм абстрактного сравнения • Алгоритм строгого сравнения '' == '0' // false 0 == '' // true 0 == '0' // true false == undefined // false false == null // false null == undefined // true '' === '0' // false 0 === '' // false 0 === '0' // false false === undefined // false false === null // false null === undefined // false +0 === -0 // true

8. Оператор typeof • Если ссылка не может быть разрешена то undefined • Иначе в соответствии с таблицей

9. На самом деле typeofобманывает • Функция это объект. Function в JavaScript – это Object со скрытым полем [[Call]] • Null это не объект

10. Оператор сравнения • [1] > 0; // true • [1,1] > 0; // false • [1,2] > 0; // false • [1,2,3] > 0; // false • [1] > "0"; // true

11. Область видимости

12. Понятия • Statement (блок) • Expression (выражение, оператор)

13. Function Declaration • Это Statement, т.е. блок • Инициализируется во время входа в контекст • Контекст может быть либо контекстом функции либо глобальным a();// OK function a(){ b();// OK function b(){} } a();

14. Function Declaration • По стандарту такое недопустимо • Будет работать по разному в зависимости от реализации движка js if(true){ function a(){ return1; } }else{ function a(){ return2; } } a();// Firefox – 1, Others - 2

15. Strict Mode • При использовании режима строгого следования стандартам возникает ошибка SyntaxError "usestrict"; if(true){ function a(){ return1; } }else{ function a(){ return2; } } // SyntaxError// FunctionExpression!

16. Function Expression • Это Expression, т.е. выражение • Инициализируется в runtime a();// error var a =function(){ b();// error var b =function(){}; b();// ok }; a();// ok

17. Function Expression • Это тоже Function Expression • В блоке можно обратиться по имени (functiontimer(){ setTimeout(timer,1000); console.log(newDate); }()); typeoftimer;// undefined

18. Immediately-Invoke Function Expressing (IIFE) • Это тоже Function Expression • Применяется для создания блочной области видимости var a =function(){}(); var a =(function(){}());// The better • var a =(function(){})();// Thebest

19. Область видимости • Определяется во время создания функции • Образует цепочку области видимости • Образует замыкание

20. Область видимости var a =1; functionfoo(){ var c =2; functionbar(e){ return a + c + e; } returnbar(3); } foo();// 6

21. Цепочка области видимости

22. This В JavaScript thisможет встречатся в • Прямом вызове функции • Вызов через оператор “.” или “[]” • Вызов через new • Вызов через call, apply или bind This определяется во время вызова функции

23. Прямой вызов через () • () – это обычный вызов функции • This всегда undefined, но он трансформируется в window • В строгом режиме всегда undefined function a(){ console.log(this); } a();// window (undefined -> window) function b(){ “usestrict”; console.log(this); } b();// undefined

24. Оператор . И [] • This указывает на объект у которого был вызван оператор varfoo={ bar:function(){ console.log(this); } }; foo.bar();// foo varbaz={}; baz.bar=foo.bar; baz.bar();// baz varfooBar=foo.bar; fooBar();// ???

25. Оператор new • Каждая функция может быть конструктором • This – пустой объект со ссылкой на prototype вызываемой функции • Совпадение прототипов является единственным кросбраузерным способом задать прототип объекта var A =function(){ console.log(this); console.log(this.__proto__ ===A.prototype); }; new A();// Object, true

26. call, apply • Способ управлять значением this • This будет являться объект, который передаётся в первом параметре var a =function(a, b){ console.log(this, a, b); }; a.call([]);// [], undefined, undefined a.call([],1,2);// [], 1, 2 a.apply([],[1,2]);// [], 1, 2

27. bind • Способ подменить значение this без вызова функции • This будет объект переданный как параметр var a =function(){ console.log(this); }; var b =a.bind({}); b();// {}

28. Передача значения в функцию • Значения передаются по ссылке • Можно менять поля передаваемого объекта • Примитивы менять нельзя • Можно переписать ссылку, но переданный объект не изменится

29. arguments • Как и this появляется при вызове функции • Это не Array (у него нет некоторых методов массива) • Содержит список аргументов arguments[0], … • Содержит ссылку на вызывающий контекст arguments.caller • Содержит ссылку на себя arguments.calle

30. Прототипе наследование

31. prototype и __proto__ • prototype – свойство функции • Оно есть у всех функции • По умолчанию это пустой объект • __proto__– ссылка на prototype у объекта • Во многих реализациях JavaScript оно скрыто • Определяется во время работы оператора new

32. Цепочка прототипов varFoo=function(){ this.b=146;// собственное свойство }; Foo.prototype.bar=function(){ console.log(this); }; Foo.prototype.a=123; varfoo=newFoo(); foo.bar();// foo foo.a;// 123 foo['b'];// 146 foo.c;// undefined Foo.prototype.c=8; foo.c;// 8 <- Magic???

33. Цепочка прототипов

34. Работа . и [] с прототипами • Выполняет поиск свойства • Использует цепочку прототипов • Поиск: • Ищет в собственных свойствах объекта • Ищет рекурсивно по ссылкам __proto__ • Если __proto__ равен null возвращает undefined

35. Оператор instanceof varFoo=function(){ this.b=146; }; varfoo=newFoo(); fooinstanceofFoo;// true fooinstanceofObject;// true?? fooinstanceofArray;// false

36. Оператор instanceof • Использует цепочку прототипов • Рекурсивно ищет __proto__ === prototype

37. Регулярные выражения

38. RegExpв JavaScript • Имеют короткую форму записи на уровне синтаксиса языка • Работают через специальный объект RegExp • Применяются в специальных методах строк (search, match, replace)

39. Объект RegExp • Оба способа эквивалентны /pattern/флаги new RegExp("pattern"[, флаги]) • Флаги • g (глобальный поиск) • i (регистр неважен) • m (многострочный поиск) • Флаги можно комбинировать • Пример // эквивалентны re=newRegExp("\w+") re=/w+/

40. Спец символы

41. Спец символы

42. Метод test • Пример: • Для строк есть похожий метод search: if(/s/.test("строка")){ ...В строке есть пробелы!... } functiontestinput(re,str){ if(str.search(re)!=-1) returntrue else returnfalse } alert(testinput(/something/,"somestr"))// false

43. Метод exec • Возвращает массив совпадений и выставляет свойства регулярного выражения ["dbBd", "bB", "d"] И установятся свойства myRe: lastIndex = 5 – индекс начала слеующегопоичка флаги: ignoreCase, global, multiline, source – текст патерна // Найти одну d, за которой следует 1 // или более b, за которыми одна d // Запомнить найденные b и следующую за ними d // Регистронезависимый поиск varmyRe=/d(b+)(d)/ig; varmyArray=myRe.exec("cdbBdbsbz");

44. Метод exec • У строк ест похожий метод match //Тоже выражение что и раньше //Но теперь для строки "cdbBdbsbz".match(/d(b+)(d)/i)

45. Jquery

46. Популярность • jQuery 1.0 появилась в 2006 году • Спустя 6 лет выло около 50 версий

47. Подключение • Если библиотека загружена локально • Подключение из внешнего ресурса <scriptsrc=“../jquery/jquery-1.7.js” type="text/javascript"></script> • <scriptsrc=“http://code.jquery.com/jquery-2.0.3.min.js” • type="text/javascript"></script>

48. Загрузка документа • Код в следующем блоке исполнится после загрузки документа • Более короткая запись jQuery(document).ready(function(){ //Codehere }); jQuery(function(){ //Codehere });

49. Поиск элементов DOM • Селектор jQueryполностью повторяет CSS селектор и расширяет его $("div")// все div'ы на странице $("div:first")// только первый div $("div:last")// только последний $("div:even")// все четные div'ы $("div.myclass")// div имеющий class="myclass" $("#mydiv")// элемент с id="mydiv", не обязательно div $("input:text")// все элементы input с type="text" $("input:checkbox:checked")// все чекбоксы с checked=true $("div","#myid")// все div'ы, находящиеся в контейнере с id="myid" $("div.myclassimg")// img, который находится в div'е с class="myclass" $("div.myclass, div.my2")// div'ы имеющие class="myclass" и class="my2"

50. Создание элементов DOM • Можно сразу создать элемент и добавить его в DOM модель • Можно создать элемент, сделать какие-нибудь действия а потом добавить $('#main').append('<div />'); varcDiv= $("<div/>",{ "class":"clickme", text:"Нажми на меня!", click:function(){ $(this).text('Спасибо.'); } });