JavaScript Основы. Что нужно знать? Широко используемая технология и число прецедентов её применения растёт – Web-page, AJAX, Web 2.0 – Увеличение числа. - презентация

1 JavaScript Основы

2 Что нужно знать? Широко используемая технология и число прецедентов её применения растёт – Web-page, AJAX, Web 2.0 – Увеличение числа приложение имеющих Web- интерфейс Интересные и необычные особенности – Каждая функция это объект – У объектов нет классов – Широкие возможности изменения поведения объектов Немного необычно Интересно Очень необычно

3 Много проблем с безопасностью Нет статических типов – типы и переменные могут меняться во время работы программы Сложно предсказать поведение программы заранее

4 Возможности изменения поведения объектов Всегда можно добавить новое поле объекту

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

6 Возможности изменения поведения объектов Вызвать функцию от имени объекта

7 История JavaScript Разработан Брендан Айк (Brendan Eich) в компании Netscape – Скриптовый язык для Navigator 2 Позже стандартизирован для браузерной совместимости – ECMAScript Editor 3 (JavaScript 1.5) Связан с Java только по названию – Название было маркетинговым ходом Доступные версии JavaScript – Spidermonkey – Rhino – V8 – …

8 Мотивации к созданию JavaScript Netscape 1995 – Занимает 90% рынка браузеров – Возможность сделать скрипты для HTML Потребности к использованию JavaScript – Проверка форм – Украшение и специальные эффекты на страницах – Динамическая манипуляция с контентом – Исполнение некоторых действий на машинах клиентов

9 Пример (вычисления) … … var num1, num2, sum num1 = prompt("Enter first number") num2 = prompt("Enter second number") sum = parseInt(num1) + parseInt(num2) alert("Sum = " + sum) …

10 Пример (события) function whichButton(event) { if (event.button==1) { alert("You clicked the left mouse button!") } else { alert("You clicked the right mouse button!") } … … Другие возможные события: onLoad, onMouseMove, onKeyPress, onUnLoad, …

11 Пример работы со страницей Возможности – createElement(elementName) – createTextNode(text) – appendChild(newChild) – removeChild(node) Пример добавления нового маркированного списка: var list = document.getElementById('list1'); var newitem = document.createElement('li'); var newtext = document.createTextNode(text); list.appendChild(newitem); newitem.appendChild(newtext); Этот скрипт изменяет DOM

12 Цели Сделать простой процесс copy/paste полезных участков кода Терпеть незначительные ошибки (нет точки с запятой) Простой процесс обработки событий (onclick, onmousedown, …) Возможност выбора парадигмы: – Процедурная абстракция – ООП через прототипы

13 База языка Чувствительность к регистру – A и a разные идентификаторы Выражения (statements) оканчиваются или возвращением значения или (;) – x=x+1; тоже что и x=x+1 – Точку с запятой лучше ставить для уменьшения числа ошибок Блок – Группа выражений – {…} – Не выделяет отдельное пространство имен (scope) Переменные – Определение переменных с использованием var – Определение без слова var обязывает установить значение при первом использовании При таком определении переменная будет иметь глобальную область видимости

14 Как можно этим воспользоваться V8 Event loop – Вводим выражение – Прерывается выполнение event-loop – Отображается значение – Продолжается выполнение event-loop Пример

15 JavaScript блок Для группировки, но не отделяет пространство имён Не блок в смысле других языков программирования – Только вызов функции и выражение with отделяет область видимости

16 JavaScript типы Boolean – Два значения true и false Number – 64-битное число с плавающей точкой, похоже на java double и Double – Нет целочисленного типа – Специальные значения NaN (Not a Number), Infinity String – Последовательность 0 или больше символов Unicode – Нет типа символ, только строки длиной 1 – Литерал строки отделяется либо () либо () кавычкой Специальные значения – null и undefined – typeof(null) = object – typeof(undefined) = undefined

17 Объекты Объекты это именованные коллекции – Проще всего представить в виде ассоциированного массива – Можно определить множество пар имя-значение objBob = {name: Bob", grade: 'A', level: 3}; – Новое свойство может быть добавлено в любое время objBob.fullname = 'Robert'; – Методы могут ссылаться на this Массивы и функции тоже объекты – Свойствами объекта могут быть функции – Функции это те же объекты с методом () function max(x,y) { if (x>y) return x; else return y;}; max.description = return the maximum of two arguments; y) return x; else return y;}; max.description = return the maximum of two arguments;">

18 Функции В теле функции могут быть – Локальные переменные – Вложенные (inner) функции Передача параметров – Базовые типы передаются по значению, объекты по ссылке Вызов функции можно сделать с любым числом аргументов – functionname.length – число определённых аргументов – functionname.arguments.length – число аргументов с которыми была вызвана функция

19 Функции Анонимные функции (выражение из функции) – (function (x,y) {return x+y}) (2,3); Замыкания и функции возвращающие функции – function CurAdd(x){ return function(y){return x+y} }; Анонимные функции могут быть функциями обратного вызова (callback) – setTimeout(function() { alert("done"); }, 10000)

20 Функции Функции возвращающие функции function CurriedAdd(x){ return function(y){ return x+y} }; g = CurriedAdd(2); g(3) Переменное число аргументов function sumAll() { var total=0; for (var i=0; i< sumAll.arguments.length; i++) total+=sumAll.arguments[i]; return(total); } sumAll(3,5,3,5,3,2,6)

21 Использование анонимных функций Анонимные функции широко применяются как функции обратного вызова setTimeout(function() { alert("done"); }, 10000) // putting alert("done") in function delays evaluation until call Модно сделать блок с отделённым пространством имен var u = { a:1, b:2 } var v = { a:3, b:4 } (function (x,y) { var tempA = x.a; var tempB =x.b; //local variables x.a=y.a; x.b=y.b; y.a=tempA; y.b=tempB }) (u,v) // Объекты здесь передаются по ссылке

22 Лямбда выражения Выражение – x + yx + 2y + z Функции – x.(x + y) z.(x + 2y +z) Приложение – x.(x + y)(3)= 3 + y – z.(x + 2y +z)(5)=x + 2y + 5

23 Порядок выполнения Отдаём функцию f, получаем суперпозицию f o f – f. x. f(f x) Как это должно работать

24 Те же процедуры в синтаксисе Lisp Отдаём функцию f, получаем суперпозицию f o f (lambda (f) (lambda (x) (f (f x)))) Как это работает ((lambda (f) (lambda (x) (f (f x)))) (lambda (y) (+ y 1)) = (lambda (x) ((lambda (y) (+ y 1)) ((lambda (y) (+ y 1)) x)))) = (lambda (x) ((lambda (y) (+ y 1)) (+ x 1)))) = (lambda (x) (+ (+ x 1) 1))

25 Тоже в JavaScript Отдаём функцию f, получаем суперпозицию f o f Как это должно работать function (f) { return function (x) { return f(f(x)); }; } (function (f) { return function (x) { return f(f(x)); };)(function (y) { return y +1; }) function (x) { return ((x + 1) + 1); }

26 Особенности использования объектов Использование функции – конструктора Объект имеет прототип, который можно изменить function car(make, model, year) { this.make = make; this.model = model; this.year = year; } var c = new car(Ford,Taurus,1988); car.prototype.print = function () { return this.year + + this.make + + this.model; } c.print();

27 Особенности this в JavaScript var x = 5; var y = 5; function f() { return this.x + y; } var o1 = {x : 10} var o2 = {x : 20} o1. g = f; o2. g = f; o1.g() o2.g() Оба свойства o1. g и o2. g ссылаются на одну и туже функцию, но результаты её выполнения разные ?

28 Ещё о this В большинстве случаев this указывает на объект который содержит функцию как метод Пример this разрешится динамически во время исполнения метода var o = { x : 10, f : function(){ return this.x } o.f();

29 Особенности для вложенных методов var o = { x: 10, f : function() { function g(){ return this.x }; return g(); } }; o.f() Функция g взмёт глобальный объект как this! (Обычно это window)

30 Особенности закреплённые в стандарте Управляемый стек памяти для функций – Параметры функций и локальные переменные Сборщик мусора (Garbage collector) – Автоматическое освобождение памяти Замыкания Исключения Объектная модель – Динамическое расширение, инкапсуляция и наследование через прототипы Много поточность – Можно делать одновременно несколько задач (JavaScript – всегда однопоточный)

31 Управляемый стек памяти Локальные переменные существуют только внутри функции function f(x) { var y = 3; function g(z) { return y+z; }; return g(x); } var x= 1; var y =2; f(x) + y;

32 Сборщик мусора Постраничное управление памятью – Память освобождается при смене страницы Подсчёт ссылок – Каждая область памяти ассоциирована с числом ссылок на неё – Число пересчитывается при смене указателя – Память очищается когда число становится равным 0 Пометить и смести (mark-and-sweep) – GC помечает память – Собирает и вычищает неиспользуемую память

33 Замыкания Возвращение функции из вызова функции Можно использовать для создания private полей – function f(x) { var y = x; return function (z){ y += z; return y; } var h = f(5); h(3);

34 Исключения Выкидываем исключение throw "Error2"; throw 42; throw {toString: function() { return "I'm an object!"; } }; Ловим try { } catch (e if e == FirstException") { // do something } catch (e if e == SecondException") { // do something else } catch (e){ // executed if no match above }

35 Особенности объектов Динамическое расширение – Значения свойств определяются в момент выполнения (run-time) Инкапсуляция – Объекты могут содержать управляющие конструкции и приватные данные Полиморфизм – Одни объекты могут быть использованы вместо других Наследование – Через прототипы

36 Многопоточность (Concurrency) Сам по себе JavaScript однопоточный AJAX предоставляет возможность конкуренции – Создаём XMLHttpRequest и устанавливаем функцию обратного вызова – Исполняем запрос и дальше всё работает асинхронно – Ответ от удалённого сервера вызывает функцию обратного вызова Событие ждёт своей очереди в общем цикле исполнения Другая форма многопоточности – Использование setTimeout для исполнение нескольких задач

37 eval Вычисляет строку кода – Строка JavaScript кода вычисляется в пространстве имён вызывающего кода Пример var code = "var a = 1"; eval(code); // a теперь '1 var obj = new Object(); obj.eval(code); // obj.a теперь 1 Наиболее частое применение – Быстро обрабатывает JSON полученный через AJAX Чего стоит иметь eval в языке – Представьте eval в C. Как его можно реализовать?

38 Необычные особенности Встроенные функции – eval, проверка типа во время исполнения Регулярные выражения – Поддержка синтаксисом языка Динамическое расширение объектов Интегрирование по методам в объекте for (variable in object) { statements } Выражение with – with (object) { statements }

39 Ресурсы Brendan Eich, slides from ICFP conference talk – Tutorial – (still there?) JavaScript 1.5 Guide – _1.5_Guide Douglas Crockford site – – JavaScript/