Download
slide1 n.
Skip this Video
Loading SlideShow in 5 Seconds..
JavaScript PowerPoint Presentation

JavaScript

410 Vues Download Presentation
Télécharger la présentation

JavaScript

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

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

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

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

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

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

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

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

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

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

  10. > 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 ‘ ?

  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 ‘ => true > NaN == NaN ?

  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 => false

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

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

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

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

  17. Синтаксис

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

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

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

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

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

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

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

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

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

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

  28. Синтаксис: Контекст 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

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

  30. Синтаксис: Прототипы и наследование 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’);

  31. Синтаксис: Прототипы и наследование 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);

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

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

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

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

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

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

  38. Работа с DOM

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

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

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

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

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

  44. События

  45. События 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’);});

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