CERN – European Organization for Nuclear Research IT Department – e – Business Section Прошлое, настоящее и будущее JavaScript Дж. Дрансфилд, Р. Титов Группа е-бизнеса отдела ИТ ЦЕРН – Женева, Швейцария

CERN e – Business Что такое JavaScript? function runMe() { d = new Date(); window.alert("Точное время: " + d.getHours() + ":" + d.getMinutes()); } Применяется при разработке веб-страниц Выполняется на клиенте (внутри браузера) Интерпретируемый

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

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

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

CERN e – Business 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());

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

CERN e – Business Видимость методов и переменных Внутренние (Private)Глобальные (Public)Привилегированные (Priveleged) Переменные с префиксом this. видны извне (глобальные) В противном случае видимость ограничена скобками { }

CERN e – Business Наследование и перегрузка методов 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; }

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

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

CERN e – Business Наследование и перегрузка - 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"

CERN e – Business Малоизвестные возможности try { x = new String(); if (x instanceof String) throw "x is a String"; } catch (e) { alert(e); } try { … } catch (e) { … } X instanceOf Y

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

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

CERN e – Business DHTML Через JavaScript можно управлять стилями CSS element.style.height = 50px; background-colorbackgroundColor

CERN e – Business Всплытие (Bubbling) События document div img нажатие Захват (Capture)

CERN e – Business Традиционный (кросс-платформенный)

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

CERN e – Business Кросс-платформенность: события Пример: Таблица совместимости для событий:

CERN e – Business Новые технологии AJAX (Asynchronous JavaScript and XML) Demo:

CERN e – Business Новые технологии Пользовательский интерфейс на XML Сложные элементы форм XUL, Mozilla Foundation XSML, Microsoft XForms, W3C Demo:

CERN e – Business Контактная информация Эта презентация: Для связи: