Основы Dynamic HTML (продолжение) Лекция по дисциплине «Программные средства гипермедиа» Подготовил: Д. А. Быстров Поддержка скритов в HTML-документах Скрипт – это внедренная в HTML-документ программа, написанная на интерпретируемом алгоритмическом проблемно-ориентируемом языке JavaScript – разработан Netscape JScript – его модификация Microsoft VBScript – скриптовый язык от Microsoft на основе Visual Basic Внедряемые языки программирования Универсальные языки Процедурные языки Объектноориентированные языки Внедряемые языки Проблемно-ориентированные языки Языки запросов Логическое программирование Функциональные языки Вставка скрипта в HTML-документ Скрипт вставляется с помощью тэга <script> Вариант 1 – – <script language=“язык”> текст_программы </script> язык := javasript | vbscript Вариант 1 – – <script language=“язык” src=“файл”> </script> файл – имя файл с текстом программы Введение в JavaScript JavaScript – это созданный фирмой Netscape межплатформенный объектно-ориентированный язык скрипта (сценариев). JavaScript – небольшой компактный язык. JavaScript предназначен для упрощенного внедрения в другие приложения и продукты. Ядро JavaScript содержит набор основных объектов, таких как Array, Date и Math, и основной набор элементов языка, таких как операции, управляющие структуры и операторы. Простые типы данных Числа, такие как 42 или 3.14159 Логические значения: true или false. Строки, такие как "Howdy!" null – специальное ключевое слово, обозначающее нулевое значение ссылки undefined – свойство верхнего уровня, значение которого не определено Переменные. Переменные обьявляются с помощью ключевого слова var или путем присвоения значения var x, y, z; var hello = “Привет”; Идентификатор состоит из букв латинского алфавита, цифр, символов подчеркивания (_) и знака доллара ($) Идентификатор не должен начинаться с цифр Преобразование типов JavaScript – это динамически типизированный язык Типы данных преобразуются автоматически При наличии операции "+" числа преобразуются в строки x = "The answer is " + 42; y = 42 + " is the answer"; // возвращает "The answer is 42" // возвращает "42 is the answer" В выражениях, с использованием других операций, числа не преобразуется в строки x = "37" – 7; // возвращает 30 y = "49" / 7; // возвращает 7 Глобальные и локальные переменные globalX = 55; // глобальная переменная function funcExample() { var localX = 15; // локальная переменная globalX += localX; globalY = globalX; // объявление глобальной // переменной в теле функции } Выражения Арифметические 5+5 или "234" Логические x>5 4–3*7 Строковые "Fred" или или Объекты str==“hello” Арифметические операции сложение (+) вычитание (-) умножение (*) деление (/). Операция присваивания Операция присвоения присваивает левому операнду значение на базе правого операнда x=y=z=0 Функции. Объявление и вызов В своей простейшей форме функция представляет собой часть программного кода, который в любое время может быть вызван по его имени. глобальная переменная локальная переменная имя функции var globalVar = 0; function factorial( n) { if ((n == 0) || (n == 1)) return 1; else return n * factorial( n - 1); } function factorial2( n) { var m = 1; for (var i=0; i<n; i++) m=m * I; } список аргументов Объекты. Методы. Свойства JavaScript не является объектноориентированным языком, подобным Java или C++, поскольку в нем не реализовано понятие класса. И хотя в JavaScript отсутствует наследование на основе классов, тем не менее, имеется возможность наследования на базе прототипов. В силу этого обстоятельства JavaScript попадает в категорию языков программирования, основанных на объектах. Объекты. Объект – это структура, имеющая свойства Car make : "Ford" model : "Mustang" year : 1969 Car = { make : "Ford ", model : "Mustang", year : 1969 } Функции, ассоциированные с объектом, называются методами объекта. Car = { make : "Ford ", model : "Mustang", year : 1969 } Car.drive = function() { …. } Свойства Свойства объекта описывают характеристики и особенности конкретного объекта. Доступ к свойствам и методам объекта осуществляется с помощью точечной или скобочную формы записи. имяОбъекта."имяСвойства" имяОбъекта["имяСвойства"] Методы Под методом понимается услуга, которую данный объект предлагает другим объектам. Методы подразделяются на следующие четыре категории: Модификатор (modifier), селектор (selector), конструктор (constructor). имяОбъекта.имяФункции(агрументы) имяОбъекта["имяФункции"](агрументы); Объект String Объект String является оболочкой вокруг примитивного типа данных string. s1 = "foo"; //создаётся строковое литеральное значение s2 = new String("foo"); //создаётся String-объект Объекты Number Объект Number содержит свойства для работы с числовыми константами, такими как максимальное значение, not-a-number и infinity/бесконечность. biggestNum = Number.MAX_VALUE; smallestNum = Number.MIN_VALUE; infiniteNum = Number.POSITIVE_INFINITY; negInfiniteNum = Number.NEGATIVE_INFINITY; notANum = Number.NaN; Объекты Boolean. Объект Boolean является оболочкой вокруг примитивного типа данных Boolean. Для создания Boolean-объекта используйте следующий синтаксис: booleanObjectName = new Boolean( value) JavaScript if (…) { … } while (…) { … } if (…) { … } else { … } for (var I = 0; I < n; I++) { … } function имя( аргументы) { … } Массивы. Объект Array. объект Array создается одним из следующих способов: arrayObject = new Array(element0, element1, ..., elementN); arrayObject = new Array(arrayLength); Индексы элементов начинаются с нуля (0), но размер массива (например, myArray.length) отражает точное количество элементов в массиве. Глобальный объект Global Глобальный объект Global – это контекст выполнения программы При инициализации объекта Global устанавливаются следующие свойства: – – Date – объект доступа к текущей дате и времени; Math – объект доступа к математическим функциям. Свойства и методы объекта Global являются доступными из любой части JavaScript-программы. Глобальные переменные и функции в JavaScriptпрограммы на самом деле являются свойствами и методами объекта Global. Функция как объект. Объект Function. В JavaScript функции тоже являются объектами. Создания функции является создание объекта Function. Объект Function обладает всеми свойствами, присущие другим объектам JavaScript var onClickFunc = function() { this.image.visible = true; } onClickFunc(); Объект Object. Создание собственных объектов JavaScript разработан с использованием простой объектно-ориентированной парадигмы. Объект - это конструкция со свойствами, которые являются переменными JavaScript или другими объектами. Объект также может иметь ассоциированные с ним функции, которые известны как методы объекта. Все объекты JavaScript унаследованы от объекта Object. Объект Object. Создание собственных объектов Вы можете определять свои собственные объекты. Создание вашего собственного объекта требует двух шагов: Определить тип объекта, написанной функции. Создать образец объекта с new. Объект Object. Создание собственных объектов var myCar = new Object(); myCar.make = "Ford"; myCar.model = "Mustang"; myCar.year = 1969; Объекты. Классы. Прототипы Иерархия классов (С++, Java) Прототипы объектов (JavaScript) – Шаблон, на основе которого создается объект Эмуляция наследования // Базовый объект представление химической формулы function CFormulaBase() {} CFormulaBase.prototype.left = ""; CFormulaBase.prototype.type = null; CFormulaBase.prototype.value = null; CFormulaBase.prototype.oExpression = null; CFormulaBase.prototype.Create = function( node) { … } // Объект представление химической формулы function CFormula() {} CFormula.prototype = new CFormulaBase(); CFormula.prototype.CFormulaBase_Create = CFormulaBase.prototype.Create; CFormula.prototype.Create = function( node) { this.CFormulaBase_Create( node); … } Объектная модель Каждый тэг – это объект Объект характеризуется: – – – атрибутами – задают параметры объекта методами – задают его функциональность событиями – генерируются в процессе его работы Коллекция объектов – это объект специального типа, обеспечивающий простой механизм хранения и доступа сразу ко многим объектам Каждый контейнер имеет коллекцию из входящих в него объектов Объектная модель DHTML Объект window document – объект загруженного документа event – объект, описывающее последнее событие location – информация о текущем URL alert – выдает сообщение navigate – загружает новую страницу Объект document all – коллекция всех элементов в документе body – объект элемента <body> title – заголовок документа write – вставить текст в документ События Каждый объект может сгенерировать событие Описание последнего порожденного события находится в объекте window.event События порождаются в результате действий пользователя или работы броузера Синтаксис обработчиков событий <тег событие = "обработчик" ... > - все платформы объект.событие = обработчик - Java Script объект.событие = GetRef("обработчик") - Visual Basic Основные события onclick ondblclick onmousedown onmouseup onmouseenter onmouseleave onmouseover onkeydown onkeypress onkeyup onresize onresizeend onresizestart onscroll onselectstart oncontextmenu