- •Федеральное государственное учреждение
- •©Российская таможенная академия, 2008
- •Ростовский филиал
- •© Крицкий с.П.
- •Содержание
- •Введение
- •Основные понятия программирования
- •Классификация языков программирования
- •Характеристика систем программирования на языкахJavaScript/Jscript
- •Типы значений в языкеJavaScript
- •Числовые литералы и значения и их организация в памяти Литералы целых чисел
- •Литералы вещественных чисел (чисел с плавающей точкой)
- •Логические литералы и значения и их организация в памяти
- •Строковые литералы, значения и их организация в памяти
- •Массивы и их организация в памяти. Многомерные массивы, матрицы
- •Записи и их организация в памяти
- •Операции над различными типами данных
- •Арифметические операции
- •Строковые операции
- •Логические операции
- •Операции сравнения
- •Операции выборки
- •Переменные, выражения, условия Переменные
- •Выражения
- •Вызовы функций и методов
- •Порядок вычисления выражения
- •Операции присваивания
- •Автоматическое преобразование типов значений. Функции преобразования и проверки типов
- •Ввод и вывод значений
- •Понятие оператора. Простые и составные операторы. Блок-схемы программ и модулей Операторы и модули
- •Блок-схемы
- •Составные операторы (последовательность, условные). Их синтаксис, блок-схемы и правила выполнения Последовательность операторов
- •Условный операторif … else
- •Операторы цикла (while, do-while и for). Их синтаксис, блок-схемы и правила выполнения. Операторыbreakиcontinue Оператор циклаwhile
- •Операторbreak
- •Операторcontinue
- •Оператор циклаdo…while
- •Оператор циклаfor
- •Функции. Определение и вызов. Выход из функцииreturn. Массив аргументовarguments Определение функции – операторfunction
- •Выход из функции – операторreturn
- •Определение переменной – операторvar
- •Отладка программ. Трассировка, отладочная печать. Тестирование программы
- •Основные понятия объектного подхода
- •ОбъектMath, назначение, свойства, методы. Значения NaN, Infinity, null, undefined.
- •Свойства объектаMath– константы:
- •Методы объекта Math
- •Специальные константы
- •Массивы как объекты в языкеJavaScript. Конструкторы, свойства и методы массивов. Задача копирования массива вJavaScript
- •Конструктор объектов типаArray
- •Свойство объектов типаArray
- •Методы объектов типаArray
- •Типичные задачи с массивами: линейная алгебра
- •Скалярное произведение векторов
- •Произведение матриц
- •Транспонирование квадратной матрицы
- •Типичные задачи с массивами: сортировка. Сортировка вставками. Методsort
- •Сортировка вставками
- •Методsort
- •Типичные задачи с массивами: поиск. Двоичный поиск в упорядоченном массиве
- •Обработка строк. Конструкторы, свойства, методы строк
- •Конструктор объектов типаString
- •Свойство объектов типаString
- •Методы объектов типаString
- •Шаблоны и регулярные выражения. Их использование методами строк.
- •Простые шаблоны
- •Составные шаблоны
- •Пользовательский интерфейс программ. Общее понятие
- •Html-страница как средство интерфейса для программ на языкеJavaScript. Тэги и атрибутыHtml
- •ОбъектыHtml-страниц иWeb-браузера, их свойства и методы. События и их обработка Объектные модели
- •Объекты страницы
- •Объекты браузера
- •СтилиHtml-объектов. Свойства позиционирования объектов страницы
- •Таймеры, примеры использования
- •Понятие ссылочной структуры данных. Односвязный список. Запись списков с помощью литералов.
- •Понятие стека. Функции для стека
- •Двухсвязный список, его структура
- •Понятие очереди и дека, их организация
- •Понятие дерева как ссылочной структуры. Бинарные деревья. Представление дерева литералом
- •Обработка деревьев. Рекурсия
- •Обход дерева «в глубину»
- •Обход дерева «в ширину»
- •Файлы и файловая система
- •Работа с текстовыми файлами
- •Объекты типа TextStream
- •Управление файлами и папками
- •Коллекции дисков, папок и файлов
- •Технология и методология создания программ
- •Жизненный цикл программы
- •Организация процесса разработки
- •Методологии проектирования программ
- •Заключение
- •Приложение 1. Теги, атрибуты и соответствующие свойства Общая структура html-документа
- •Форматирование текста
- •Вставка графики
- •Гиперссылки и карты
- •Приложение 2. События вHtmLи их источники
- •Приложение 3. Атрибуты и свойства стилейCss
- •Приложение 4. Работа с файловой системой вJScript
- •Свойства, методы и коллекции объектов файловой системы
- •Список литературы
- •Словарь терминов
- •If (условие) оператор1 [else оператор2]
- •Основы программирования
Объекты браузера
Все доступные объекты браузера имеют собственные имена, по которым к ним и обращается сценарий: window, document, event, external, history, location, navigator, screen. Главным из них является window, а все остальные являются его свойствами. Рассмотрим кратко наиболее важные из этих объектов.
Объект window
Объект window предоставляет всю доступную информацию о браузере, открытом в нём документе и происходящих событиях. Такие методы объекта window, как alert, confirm и prompt, уже были рассмотрены в п. 14. Методы работы с таймерами будут рассмотрены в п. 32. Методы этого объекта позволяют изменять окно браузера, создавать новые окна и закрывать их. При указании свойств и методов объекта window его имя можно опускать, если это не приводит к коллизиям.
Вся структура узлов документа, загруженного в браузер, доступна через свойство window.document или просто document.
Объект document
Объект document является родительским узлом (parentNode) для узла тега <HTML>. Свойство document.documentElement выдаёт ссылку на узел тега <HTML>, а от него можно добраться до любого узла страницы с помощью навигационных свойств тегов.
Методы createElement и createTextNode объекта document позволяют создавать новые узлы тегов и текста, а рассмотренные выше методы страницы дают возможность встраивать эти новые узлы в систему «родственных» отношений, т.е. в объектную модель. При этом будет меняться и отображение страницы в браузере.
Метод document.write("текст или HTML-текст") пишет указанный параметром текст в то место страницы, где стоит вызов метода. Текст может задаваться выражением, что позволяет его создавать динамически.
Объект location
Объект location содержит полную информацию об URL (адресе) загруженного документа. Эта информация в виде строки выдаёт выражение location.href (href – это свойство объекта location), или просто location. Оператор присваивания location="URL" приводит к загрузке в браузер новой страницы. У этого объекта есть и другие свойства, позволяющие получить разные части URL.
Метод location.reload() перезагружает текущую страницу.
Объект event
Объект event содержит всю информацию о событии, доступную в обработчике события. Так, свойства event.x и event.y выдают координаты курсора мыши в момент события, свойство event.srcElement выдаёт ссылку на самый нижний тег в иерархии тегов, к которому относится событие, свойства event.fromElement и event.toElement сообщают, от какого тега и на какой тег переместился курсор, а event.button указывает, какая кнопка мыши была нажата.
СтилиHtml-объектов. Свойства позиционирования объектов страницы
Чтобы расширить возможности атрибутов и добавить новые качества объектам страницы, в HTML было введено понятие стиля и средства его описания – каскадные таблицы стилей (CSS – Cascading Style Sheets). Язык CSS, на котором описываются стили, встроен в HTML и довольно прост. Предусмотрено три способа включения CSS-стилей в HTML-страницу:
С помощью тега <LINK>, помещаемого в содержимое тега <HEAD>, с указанием ссылки (URL) на файл с расширением .css, содержащий определения CSS-стилей. Например:
<link href="styles.css">
С помощью тегов <STYLE>:
<STYLE> определения CSS-стилей </STYLE>
Например:
<STYLE> P.cntr {text-align: center} </STYLE>
В любом теге с помощью атрибута style:
<ТЕГ style="определения атрибутов стиля">
Например:
<P style="text-align: center">Абзац</P>
Определение CSS-стиля имеет вид:
тег {определения атрибутов стиля},
что значит, что все вхождения указанного тега будут обладать этим стилем; или
.класс {определения атрибутов стиля},
что значит, что все вхождения тегов данного класса будут обладать этим стилем; или
тег.класс {определения атрибутов стиля},
что значит, что все вхождения указанного тега, принадлежащие данному классу, будут обладать этим стилем.
Класс – это имя, которое можно использовать для определения стиля. Чтобы указать, что данный тег принадлежит некоторому классу, нужно в этом теге задать атрибут class:
<ТЕГ class="имя_класса" … >
Определения атрибутов стиля имеют вид:
атрибут_стиля: значение_атрибута; атрибут_стиля: значение_атрибута; …
Список атрибутов стиля и их возможных значений приводится в приложении 3.
В FrontPage создание таблиц стилей сильно облегчено. Для создания тега <STYLE> выберите в меню Формат/Стиль… При создании стиля для класса имя класса появится в списке стилей, его можно будет применять к любым тегам. Для создания атрибута style в свойствах тега определите его стиль.
В объектной модели документа у каждого тега есть свойство style, которое является объектом со своими свойствами, определяющими характеристики этого тега. Свойства стиля (т.е. свойства объекта style), в основном, соответствуют атрибутам стиля. Они также приведены в приложении 3. В сценарии свойства стиля используются, как свойства объекта style, являющегося в свою очередь свойством объекта-тега:
объект-тег.style.свойство_стиля
Перечислим группы атрибутов и свойств стилей:
свойства шрифта,
свойства текста,
свойства списка,
свойства фона и цвета элемента,
свойства размера и рамки элемента,
свойства видимости элемента,
свойства позиционирования элемента,
свойства печати,
свойства фильтров (эффектов), применимых к элементу,
форма курсора при наведении на элемент.
Пример. Благодаря изменению CSS-свойств позиционирования (см. приложение 3) для тега IMG на следующей HTML-странице картинка «бегает» за курсором мыши при её перемещении. Щелчок мыши отцепляет картинку от курсора или прицепляет снова.
<html><head>
<title>Корова, бегающая за мышью</title>
</head>
<body onmousemove="cow.style.left=event.x;
cow.style.top=event.y"
onclick="stop()">
<img border="0" src="cow.gif"
style="position: absolute" id="cow">
<script>
function stop()
{if (cow.style.position=='absolute')
cow.style.position='static'
else cow.style.position='absolute'
}
</script></body></html>