'

Прошлое, настоящее и будущее JavaScript

Понравилась презентация – покажи это...





Слайд 0

Прошлое, настоящее и будущее JavaScript Дж. Дрансфилд, Р. Титов Группа е-бизнеса отдела ИТ ЦЕРН – Женева, Швейцария


Слайд 1

Что такое JavaScript? Применяется при разработке веб-страниц Выполняется на клиенте (внутри браузера) Интерпретируемый


Слайд 2

Немного истории 1995: cоздан Netscape 1996: перенесен на Internet Explorer (JScript) 1997: Стандартизация - ECMAScript


Слайд 3

JavaScript JavaScript похож на Java? Проблемы переносимости? Язык для непрофессионалов? JavaScript – язык ООП? «Язык, чаще других понимаемый неправильно»


Слайд 4

JavaScript – ООП? Классы/объекты Наследование Перегрузка методов


Слайд 5

JavaScript – классы/объекты this. – Описание и инициализация полей объекта function Person(name, age, weight) { var m_name = name; var m_age = age; var m_weight = weight; this.getName = function() { return m_name }; } slava = new Person("Р. Титов", 32, 95); alert(slava.getName());


Слайд 6

Описание методов function MyObject(arg) { function method1(param) { alert(param); } method2 = function(param) { alert(param); } method3 = new Function(“param”, “alert(param)”); }


Слайд 7

Видимость методов и переменных Переменные с префиксом this. видны извне (глобальные) В противном случае видимость ограничена скобками { }


Слайд 8

Наследование и перегрузка методов function Person(name, age) { var m_name = name; var m_age = age; this.getName = function() { return m_name; } this.getAge = function() { return m_age; } } function Student(name, age, group) { var m_group = group; var m_prototype = new Person(name, age); this.getName = m_prototype.getName; this.getAge = m_prototype.getAge; this.getGroup = function() { return m_group; } } function() { return m_prototype.getName() + “, “ +m_group; }


Слайд 9

Прототипирование Student.prototype.payStipend = new function() { … }; Наследование Добавление новых методов Перегрузка существующих методов Работает и для стандартных объектов!


Слайд 10

Прототипирование - 2 d = new Date(); document.write(d.toString()); // Tue Oct 18 16:40:32 UTC+0200 2005 Date.prototype.toString = function() { return this.getHours() + "ч."; }; document.write(d.toString()); // 16ч. // Object.prototype.doCoolStuff = function() { … }; Любому стандартному и нестандартному объекту можно добавить новые методы, либо заменить существующие


Слайд 11

Наследование и перегрузка - 2 function Person() // Объект Person { this.getName = function() { return "A person" }; this.getAge = function() { return 20; }; } function Student() // Объект Student { this.getGroup = function() { return “K12-221”; } } Student.prototype = new Person(); // Student имеет все свойства Person Student.prototype.getName = function() { return "A student"; } s = new Student(); alert(s.getName()); // "A student" alert(s.getGroup()); // "K12-221" alert(s.getAge()); // "20"


Слайд 12

Малоизвестные возможности try { … } catch (e) { … } X instanceOf Y


Слайд 13

Объектная модель документа (DOM) Разбор HTML В памяти создается объектная модель Доступна через JavaScript document div img


Слайд 14

Методы работы с DOM element :: document.getElementById(id) element[] :: document.getElementByTagname(tagname) element :: document.createElement(elementName) void :: element.appendChild(element) void :: element.removeChild(element)


Слайд 15

DHTML Через JavaScript можно управлять стилями CSS element.style.height = “50px”; background-color backgroundColor


Слайд 16

События document div img


Слайд 17

Традиционный (кросс-платформенный) <img onclick="doSomething()"; Надежно, работает везде, но требует написания кода в HTML element.onclick = doSomething; Наиболее надежный метод, работает везде, лучший выбор сегодня Новый стиль: element.addEventListener(“click”, “doIt”, false); рекомендация W3C, но не работает в IE 5 и 6 element.attachEvent(“onclick”, “doSomething”); стиль Microsoft, но мало где работает, лучше не использовать Регистрация обработчиков событий


Слайд 18

Кросс-платформенность Проверка версии браузера объект navigator: appName appVersion Проверка функциональности например: if (document.all) document.all.element_id;


Слайд 19

Кросс-платформенность: события http://www.quirksmode.org/js/events_compinfo.html Пример: Таблица совместимости для событий:


Слайд 20

Новые технологии AJAX (Asynchronous JavaScript and XML) Demo: http://www.google.com/webhp?complete=1&hl=en


Слайд 21

Новые технологии Пользовательский интерфейс на XML Сложные элементы форм XUL, Mozilla Foundation XSML, Microsoft XForms, W3C Demo: http://www.hevanet.com/acorbin/xul/top.xul


Слайд 22

Контактная информация http://sbnt.jinr.ru/iris Rostislav_Titov@mail.ru Эта презентация: Для связи:


×

HTML:





Ссылка: