Основы DHTML.
Upcoming SlideShare
Loading in...5
×
 

Основы DHTML.

on

  • 1,806 views

 

Statistics

Views

Total Views
1,806
Views on SlideShare
1,806
Embed Views
0

Actions

Likes
0
Downloads
14
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Основы DHTML. Основы DHTML. Presentation Transcript

  • Основы DHTML. Программируем формы на Javascript Автор: Павел Сериков
  • Типы данных Javascript 1) Литералы - данные, которые используются в программе непосредственно. А именно в присваивании значений переменным или в операциях сравнения. Например: числовые литералы — 10, 2.31, 2.3e+2, строковые литералы — 'строка', "строка" 2) Переменные - это области памяти, имеющие свое имя и хранящие некоторые данные. Объявляются с помощью оператора var. 3) Массивы - упорядоченные наборы данных, идентифицируемых с помощью одного или нескольких индексов. Делятся на встроенные (document.links[], document.images[] и т.п. — их еще называют коллекциями) и определяемые пользователем. Для определения массива пользователя существует специальный конструктор Array. Методы: join(), sort(), reverse(). 4) Функции - механизм многократного использования кода программы. Функция как тип данных определяется при помощи ключевого слова function. 5) Объекты - главный тип данных JavaScript. Любой другой тип данных имеет объектовую "обертку" (wrapper). Каждая функция является не только именем для группы операторов, но одновременно и объектом. Объекты же (пользовательские) создаются с помощью функций (конструкторов).
  • Объектная модель документа (DOM — Document Object Model) Суть: каждому HTML-контейнеру соответствует объект. Обращение к методам, свойствам и событиям объекта осуществляется при помощи точечной нотации. Объект методы свойства события Определяют Атрибуты функции, Атрибуты HTML = контейнера с помощью свойства объекта расширяются которых Например: выполняются атрибуту HREF будет атрибутами действия соответствовать свойство обработки href этого объекта с этим объектом document.links[0].href='http://ya.ru/' события document.write() onClick
  • Свойства, методы и события ● Свойства. Многие HTML-контейнеры имеют атрибуты. Как мы уже знаем, каждому контейнеру соответствует объект. При этом соответствии атрибутам отвечают свойства объекта. Соответствие между атрибутами HTML-контейнеров и свойствами DOM-объектов не всегда прямое. Обычно каждому атрибуту отвечает некоторое свойство объекта. Но, во- первых, название этого свойства не всегда легко угадать по названию атрибута, а во-вторых, у объекта могут быть свойства, не имеющие аналогов среди атрибутов. Кроме того, как мы знаем, атрибуты являются регистро-независимыми, как и весь язык HTML, тогда как свойства объектов нужно писать в точно определенном регистре символов. К свойствам можно также обращаться с помощью скобочной нотации: объект['свойство'] ● Методы объекта определяют функции, с помощью которых выполняются действия с этим объектом, например, изменение его свойств, отображения их на web-странице, отправка данных на сервер, перезагрузка страницы и т. п. Например, если у нас есть ссылка <A HREF="http://intuit.ru/">intuit</A> (будем считать, она первая в нашем документе), то у соответствующего ей объекта document.links[0] есть метод click(). Его вызов в любом месте JavaScript-программы равносилен тому, как если бы пользователь кликнул по ссылке, что демонстрирует пример: <A HREF="http://intuit.ru/">intuit</A><SCRIPT> document.links[0].click(); </SCRIPT> ● События. Кроме методов и свойств, объекты характеризуются событиями. Собственно, суть программирования на JavaScript заключается в написании обработчиков этих событий. Например, с объектом типа button (контейнер INPUT типа button — "кнопка") может происходить событие Click, т.е. пользователь может нажать на кнопку. Для этого атрибуты контейнера INPUT расширены атрибутом обработки этого события — onClick. В качестве значения этого атрибута указывается программа обработки события, которую должен написать на JavaScript автор HTML-документа.
  • Иерархия классов объектов в DOM
  • Коллекции в объектной модели документа Коллекция — это структура данных JavaScript, похожая на массив. Отличие коллекции от массивов заключается в том, что массивы программист создает сам в коде программы и заполняет их данными; коллекции же создаются браузером и "населяются" объектами, связанными с элементами Web-страницы. Коллекцию можно рассматривать как другой, зачастую более удобный способ доступа к объектам Web-страницы.
  • Объект document Объект document является важнейшим свойством объекта window. Все элементы HTML-разметки, присутствующие на web-странице, — текст, абзацы, гиперссылки, картинки, списки, таблицы, формы и т.д. — являются свойствами объекта document. Можно сказать, что технология DHTML (Dynamic HTML), т.е. динамическое изменение содержимого web-страницы, заключается именно в работе со свойствами, методами и событиями объекта document (не считая работы с окнами и фреймами). document.getElementsByTagName('P') - коллекция всех элементов (точнее, соответствующих им объектов) вида <P>, т.е. абзацев. document.getElementsByName('important') выдаст коллекцию (объектов) HTML- элементов любых типов, у которых был задан атрибут NAME="important" document.getElementById('id5') выдаст тот HTML-элемент (если их несколько, то первый), у которого был задан атрибут ID="id5".
  • Mind map. Подводим итоги Операторы языка {...}, if... else..., ()?, while, Типы данных for, break, continue, return; Литералы, переменные, var, with массивы, функции, объекты Методы document.write() Объекты Свойства События window, как Функции href onClick document ы вид Пользовательские function f (...) {...} Клиентские Встроенные Array, String, Date, window, document, Number, Function, Boolean, Коллекции location, navigator Math forms[], images[], frames[] Встроенные Например window.document.forms[4] - document.write, Серверные 5-я форма на странице alert Server, Project, Пользовательские Client, File