Обращение к свойству элемента по ID либо name

1 2 3 4 5 6 7

ОСНОВЫ JavaScript

МЕТОДИЧЕСКИЕ УКАЗАНИЯ

по дисциплинам «Основы Интернет-технологий», «Теоретические основы Веб-технологий», «Основы веб-технологий»

Уфа 2011

Оглавление

Теоретические сведения. 3

Особенности JavaScript 3

Вставка скрипта. 3

Dynamic HTML. Обработка событий. 3

Использование функций. 3

Создание функции. 3

Вызов функции. 4

Обращение к свойству элемента по ID либо name. 4

Способы возврата результата. 4

Прерывание функции. 5

Изменение свойств объектов. Настройка стилей. 5

Работа со свойствами (параметрами) объектов. 5

Каскадные таблицы стилей (CSS). 6

Способы применения CSS. 6

Синтаксис обращения к атрибутам CSS в Javascript 7

Синтаксис, операторы, операции. 7

Переменные. 8

Основные типы данных. 8

Функции преобразования типов. 8

Объекты.. 8

Массивы.. 8

Строки. 9

Условный оператор. 9

Проверка корректности введенных данных. 10

Проверка на пустоту. 10

Проверка на вхождение подстроки. 10

Проверка, является ли значение числовым.. 10

Проверка на вхождение числа в диапазон. 10

Циклы.. 10

Объектная модель документа. 11

Динамическое формирование документа. 11

innerHTML.. 11

window и document: 11

Изображения (Images). 12

Формы. 12

Обращение к свойству поля формы. 12

Метки (флажки, checkbox) 14

Переключатели (radio) 14

Выпадающие списки (select) 15

Таймер. 16

Интерфейс Frontpage для работы с Javascript 16

Задания. 17

Порядок выполнения. 18

Визуальные эффекты. 18

Тест. 21

Заполнение формы.. 21

Подключение обработчика. 23

Подсчет итогов. 23

Проверка правильного заполнения полей формы перед отправкой. 24

Требования к отчету. 26

Контрольные вопросы.. 26

Цель работы: получение практических навыков создания визуальных эффектов и обработки форм (создание теста) с помощью Javascript.

Теоретические сведения

Особенности JavaScript

Синтаксис JavaScript – основан на синтаксисе C. Он обладает интересными операторами и операциями. И главное: важно помнить, что он чувствителен к регистру, т.е. различает строчные и прописные буквы

Вставка скрипта

Скрипт - это небольшая простая программка на специальном скриптовом языке, в данном случае JavaScript.

Для вставки скрипта используется тег <SCRIPT> с параметром LANGUAGE.

Скрипты могут быть вставлены как в раздел BODY, так и HEAD.

В первом случае скрипт запускается один раз при загрузке документа.

<Script language="javascript">
alert("Welcome!")
</Script>

Это простейший скрипт. При загрузке он выводит сообщение Welcome! с помощью функции alert()

Dynamic HTML. Обработка событий

Как правило, скрипты запускаются в результате совершения определенных событий.

Основные события

onclick	щелчок мыши по объекту
ondblclick	двойной щелчок мыши по объекту
onmouseover	наведение курсора мыши на объект
onmouseout	отведение курсора мыши с объекта
onmousemove	движение курсора мыши над объектом
onkeypress	нажатие клавиши
onsubmit	Отправка формы

Для обработки событий требуется в теге указать событие и его обработку на JavaScript. Причем операторы пишутся подряд через точку с запятой.

В данном примере при щелчке на кнопку выдается сообщение Welcome!

<input type="button" value="Welcome" name="B1" onclick="alert('Welcome!!!')">

Использование функций

Как правило, для обработки событий используются функции. Т.е. в шапке документа (HEAD) оформляются функции, а при обработке только указывается имя функции с параметрами.

Тело функции всегда заключается в символы { }.

Создание функции.

function <имя> (<параметры>)

{<тело функции>

}

Пример.

function ChColor(obj,clr)

{obj.style.color=clr}

В данном примере формируется функция ChColor с параметрами obj и clr.

obj - это ссылка на объект, clr - цвет.

!Внимание: В данном и во всех последующих примерах параметр, обозначающий ссылку на некий объект будет называться obj.

Данная функция устанавливает цвет текста для объекта obj.