JavaScript

1. JavaScript Александр Березневатый, Senior Java Developer & Team Lead

3. > new Array() + new Array() = ?

4. > new Array() + new Array() = ‘’

5. > new Array() + new Array() = “ > new Array() + new Object() = ?

6. > new Array() + new Array() = “ > new Array() + new Object() = [object Object]

7. > new Array() + new Array() = “ > new Array() + new Object() = [object Object] > 0 == ‘’ ?

8. > new Array() + new Array() = “ > new Array() + new Object() = [object Object] > 0 == ‘’ => true > 0 == ‘0’ ?

9. > new Array() + new Array() = “ > new Array() + new Object() = [object Object] > 0 == ‘’ => true > 0 == ‘0’ => true > 0 == false ?

10. > new Array() + new Array() = “ > new Array() + new Object() = [object Object] > 0 == ‘’ => true > 0 == ‘0’ => true > 0 == false => true > '0' == false ?

11. > new Array() + new Array() = “ > new Array() + new Object() = [object Object] > 0 == ‘’ => true > 0 == ‘0’ => true > 0 == false => true > '0' == false => true > 0 == ' \r \t \n \t ‘ ?

12. > new Array() + new Array() = “ > new Array() + new Object() = [object Object] > 0 == ‘’ => true > 0 == ‘0’ => true > 0 == false => true > '0' == false => true > 0 == ' \r \t \n \t ‘ => true > NaN == NaN ?

13. > new Array() + new Array() = “ > new Array() + new Object() = [object Object] > 0 == ‘’ => true > 0 == ‘0’ => true > 0 == false => true > '0' == false => true > 0 == ' \r \t \n \t ‘ => true > NaN == NaN => false

15. План дня > История Web (продолжение) > Синтаксис > Работа с DOM > Good Parts & Bad Parts > Libraries > Performance notes > Домашнее задание

16. Цели > Общее понимание языка > Часто встречающиеся сложности > Заинтересовать в изучении > Best practice

17. Жалобы > Программирование в браузере это ужас >JS тормозит > я плохо знаю JS > JS просто большая куча ошибок

19. История: JavaScript > Разработан за две недели > Много чего бездумно скопировано > Пострадал в результате войны браузеров > Стандартизируется ECMA + W3C

21. Синтаксис

22. Синтаксис: Объекты > неупорядоченный набор свойств > var x = new Object() > var y = {};

23. Синтаксис: JSON > очень краткий и емкий формат > {}, [] > свойства в кавычках

24. Синтаксис: JSON { “status” : “success” “result” : [ 12, 22, { “id”: 45, “name”: “Alex” } ] }

25. Синтаксис: Функции > функция тоже объект > ключевое слово function > аргументы и локальные переменные

26. Синтаксис: Функции varmyFunc = function(arg0, arg1) { arguments[0] === arg0;//true arguments[2] === 3;//true }; myFunc(1, 2, 3);

27. Синтаксис: Функции function iter(fn, array) { for (vari = 0; i < array.length; i++) { fn(array[i]); } }; iter(function(el){ alert(el); }, [1, 2, 3, 4]);

28. Синтаксис: Глобальный контекст > глобальные переменные этосвойства объекта window > ключевое слово var > ключевое слово delete

29. Синтаксис: Видимость переменных > ключевое слово var (продолжение) > цепочки скоупов > ключевое слово with

30. Синтаксис: Видимость переменных

31. Синтаксис: Контекст > ключевое слово this > варианты контекста > методы call и apply

32. Синтаксис: Контекст function myFunc() { console.log(this);} varobj = { method : myFunc }; myFunc(); // this === window obj.method(); // this === obj obj.method.call(document); // this === document obj.method.apply(console); // this === console

33. Синтаксис: Прототипы и наследование > наследуются объекты > цепочки свойств > перезапись и удаление свойств

34. Синтаксис: Прототипы и наследование var x = { name: ‘Alex’ }; var y = {}; assert(y.name === undefined); y.prototype = x; assert(y.name === x.name); y.name = ‘Sasha’; assert(y.name === ‘Sasha’); assert(x.name === ‘Alex’);

35. Синтаксис: Прототипы и наследование varJSProgrammer = { skills: ‘javascript’ }; varLuxoftJsProgrammer = function(name, city) { this.name = name; this.city = city || ‘unknown’; }; LuxoftJsProgrammer.prototype = JSProgrammer; var me = new LuxoftJsProgrammer(‘Alex’); assert(me instanceofLuxoftJsProgrammer);

36. Синтаксис: Прототипы и наследование

37. Синтаксис: Прототипы и наследование

38. Синтаксис: Прототипы и наследование

39. Синтаксис: eval() == evil > вызывется в той же области видимости > хуже по производительности > потенциальная дыра в безопасности > используйте заменители когда это возможно

40. Синтаксис: strict mode >"use strict"; > запрещает «скрытые» ошибки > улучшает безопасность кода > не разрешает пользоваться «неправильными» инструментами

41. Синтаксис: Вопросы

42. Работа с DOM

43. Document ><div id=“myElementId”/> > document.getElementById(“myElementId”); > document.getElementsByTagName(“div”); > xpath

44. Live collections vardivs = document.getElementsByTagName(“div”); for (vari = 0; i < divs.length; i++) { var el = divs[i]; el.parentNode.removeChild(el);// хитрая ошибка }

45. Node > Document, Element, TextNode > appendChild/removeChild > firstChild/lastChild > childNodes > getAttribute/setAttribute

46. Window > setTimeout/clearTimeout > концепция кадров > Некоторый контроль над браузером > alert/confirm/prompt

47. События > addEventListener/attachEvent > фазы просачивания и перехвата > удаление обработчиков > не используйте html аттрибуты!

48. События

49. События function on(el, event, fn) { if (el.addEventListener) { el.addEventListener(event, fn, false); } else if (el.attachEvent) { el.attachEvent(‘on’ + event, fn); } else { // выдать ошибку – странный браузер } } on(element, ‘click’, function() { alert(‘Hi’);});

50. События element.addEventListener(‘click’, function() { alert(‘hi’); }, false); // … // скрытая ошибка element.removeEventListener(‘click’, function() { alert(‘hi’); }, false);