4327

Язык Javascript и его модификации

Реферат

Информатика, кибернетика и программирование

Язык Javascript и его модификации. HTML+JavaScript Начиная изучать web-технологии, Вы узнали, что все web-документы создаются с помощью языка HTML, который не является языком программирования, а лишь языком разметки гипертекстовых документов. Тепер...

Русский

2012-11-16

147.97 KB

22 чел.

Язык Javascript и его модификации

1.HTML+JavaScript

Начиная изучать web-технологии, Вы узнали, что все web-документы создаются с помощью языка HTML, который не является языком программирования, а лишь языком разметки гипертекстовых документов. Теперь же выясняется, что для создания web-документов недостаточно знать только язык HTML, а нужно уметь еще и программировать. Зачем это?

Дело в том, что без программирования можно создавать лишь статичные web-документы, которые никак не реагируют на действия пользователя - их можно только просматривать. Однако web-страницы могут быть интерактивными, их содержание или стиль могут изменяться в зависимости от действий пользователя или наступления каких-либо событий.

Например, можно

  1.  изменить картинку при наведении курсора на определенную область;
  2.  заставить картинку "бегать" по заданной траектории;
  3.  перетащить картинку или другой фрагмент с одного места на другое;
  4.  или заставить ее двигаться на курсор (а то так и просто бросаться на него) или от курсора;
  5.  изменить текст или стиль фрагмента, а то и весь документ (не заменяя его новым и вообще не обращаясь к серверу);
  6.  создать несложную анимацию;
  7.  включать или выключать звук;
  8.  заставить фон измениться (резко или постепенно);
  9.  заставить отдельные фрагменты появляться или исчезать;
  10.  создать хронометр для контроля за временем;
  11.  создать кроссворды и еще сделать много всего интересного.

Все это (и многое другое) делается средствами так называемых клиентских сценариев, т.е. программ, исходный код которых внедряется в HTML-код и интерпретируется браузером. Наиболее распространенным языком написания клиентских сценариев является JavaScript, но нередко используется и VBScript.

Все примеры, которые мы только что привели, выполнены средствами JavaScript. Но этим возможности этого языка не исчерпываются. Список основных "должностных обязанностей" клиентских сценариев выглядит, примерно следующим образом:

  1.  Обеспечение интерактивности Web-страниц, реагирования на различные события (нажатия на кнопки, наведение курсора на различные области документа, щелчки мыши, "перетаскивание" фрагментов, получение фокуса полями формы или его потерю и т.д.); создание анимационных эффектов.
  2.  Определение характеристик браузера клиента соответствующее "ветвление" HTML-кода;
  1.  Первичная обработка пользовательских данных (введенных посредством формы) до отправки их на сервер. Это позволяет снизить траффик и нагрузку на сервер.
  1.  Автоматическое обновление страниц через определенные интервалы времени.
  1.  Динамическое создание документов ("на лету", "on-the-fly").
  1.  Всевозможные расчеты.
  1.  Сохранение небольших количеств информации на компьютере клиента (с целью последующего ее использования).

1.2.Java и JavaScript.

Нередко приходится слышать, как язык JavaScript называют Java. Это грубая ошибка. Дело в том, что Java - это другой язык программирования. И Java, и JavaScript - языки программирования для Интернет, но между ними существует принципиальная разница.

На языке JavaScript, как Вы уже знаете, создаются программы (так называемые клиентские сценарии), которые встраиваются в код HTML-документа и интерпретируются браузером.

Программы, написанные на языке Java сначала компилируются, а уже потом в откомпилированном виде перемещаются по сети. Главным преимуществом языка Java является платформенная независимость, т.е. возможность выполнения на компьютерах с различной архитектурой, различными операционными системами.

Язык Java позволяет создавать программы двух типов:

  1.  приложения (applications), т.е. обычные прикладные программы, аналогичные тем, которые создаются на других языках программирования;
  2.  апплеты (applets), т.е. программы, которые могут существовать только в среде HTML-документа (пример).

Язык JavaScript, или язык сценариев, появился в в конце 1995 г. благодаря совместным усилиям компаний Netscape и Sun Microsystems. Технология Java к этому времени была уже очень популярной. Как и Java, JavaScript является объектно-ориентированным.

Почти сразу же после появления языка JavaScript, компания Microsoft оценила его значимость и создала собственную его версию - язык сценариев JScript. Этот язык сейчас широко применяется для разработки серверных сценариев, в частности, в технологии Microsoft ASP (Active Server Pages).

Контейнер <script>...</script>.

Для того чтобы браузер распознал сценарий, встроенный в HTML-код, его (сценарий) следует заключать в контейнер

<script>...</script>

Сценарий, заключенный в контейнер, может располагаться в любом месте документа, но по возможности следует размещать сценарии в секции <head>...</head>. В этом случае сценарий будет загружен в память сразу же по вызову документа браузером. Кроме того, размещение сценариев в секции <head>...</head> делает код более понятным.

Документ может содержать несколько сценариев - каждый из них должен быть заключен в контейнер <script>...</script>. Исключение составляют сценарии, выполняемые при обработке какого-либо события: они (без контейнера <script>...</script>) помещаются непосредственно в соответствующий тэг. Например, при щелчке на кнопке вызывается метод alert:

<input type="Button" value="Проверим работу метода alert" onclick="alert('ЭТО НАШ ПЕРВЫЙ JAVASCRIPT-сценарий!!!!');"> 

Сценарий можно разместить отдельно от HTML-документа - в другом файле. В этом случае тэг <script> должен иметь атрибут src='адрес файла со сценарием'. Файл, содержащий сценарий, должен иметь расширение js. Тэгов <head>, <body>, <script> в нем указывать не нужно - там должен содержаться только сам сценарий.

<script src="myScript.js"></script>

2.Объектная модель языка JavaScript

Все объекты, к которым позволяет обращаться JavaScript, можно разделить на 3 группы:

Объекты, связанные с тэгами языка HTML:

  1.  forms
  2.  anchors
  3.  links
  4.  images
  5.  frames 

Внутренние (встроенные) объекты JavaScript:

  1.  Date
  2.  Math
  3.  String
  4.  Array
  5.  Обобщенные объекты (generic objects) 

Объекты браузера:

  1.  navigator
  2.  document
  3.  history
  4.  window 

Именованные значения объектов называются свойствами. Синтаксис обращения к свойствам объектов:

имя объекта.свойство

Многие объекты имеют также специальные, свойственные только им функции, или методы. Синтаксис для вызова метода:

имя объекта.метод(список параметров)

Замечание. Получить список всех свойств того или иного объекта можно при помощи кода:

for(переменная in объект)alert(переменная);

2.1.Объекты браузера

Объекты браузера создаются автоматически при загрузке документа браузером. Это:

navigator

document

history

window

2.1.1.Объект navigator и свойства браузера

Объект navigator содержит общую информацию о браузере клиента. Ниже перечислены свойства этого объекта и значения этих свойств для браузера, которым Вы просматриваете данный документ. Для сравнения просмотрите эту же страницу другим браузером и обратите внимание на содержимое правых ячеек приведенной ниже таблицы (а заодно и на вид документа).

СВОЙСТВА ОБЪЕКТА NAVIGATOR:

Свойство

Значение

Текущее значение

appName

название браузера

Microsoft Internet Explorer

appVersion

номер версии браузера

4.0 (compatible; MSIE 5.01; Windows NT 5.0; MyIE2)

cookieEnabled

разрешено или нет использование "ключиков", позволяющих сохранять небольшие фрагменты информации на компьютере клиента

true

cpuClass

тип центрального процессора

x86

systemLanguage

системный язык (например, ru, если используется русская версия Windows)

ru

userLanguage

язык, выбранный пользователем для браузера ("Сервис"-"Свойства обозревателя"-"Общие"-"Языки"-"Выбрать")

ru

Поскольку адаптация документа под все виды и версии браузеров - работа трудоемкая и хлопотливая, иногда разработчики просто закрывают доступ к документу из тех браузеров, для которых он не оптимизирован. Функция, вызываемая при загрузке документа, может выглядеть, например, следующим образом:

function tip_browsera()

{

var brName=navigator.appName; //название браузера

var brVer=parseInt(navigator.appVersion);//версия браузера, как целое число

if ( (brName == "Netscape" && brVer <= 4) ||

       (brName == "Microsoft Internet Explorer" && brVer <= 3))

    {

     var s="Внимание!\n\n Документ содержит таблицы стилей.\n\n  Для оптимального просмотра\n используйте браузеры \n Internet Explorer версии 4 и выше.";

     alert(s);

    }

 return true;

}

2.1.2.Объект document и свойства документа

Объект document соответствует всему HTML-документу. Все объекты, связанные с тэгами HTML, являются свойствами объекта document. Свойств этих достаточно много, мы перечислим лишь некоторые из них.

СВОЙСТВА ОБЪЕКТА DOCUMENT:

Свойство

Значение

Тэг, атрибут

Можно ли изменить присвоением

bgColor

цвет фона

<body bgсolor='цвет'>

да, например:

fgColor

цвет букв

<body text='цвет'>

да, например:

linkColor

цвет непосещенной гиперссылки

<body link='цвет'>

да, например:

первая ссылка

вторая ссылка

vlinkColor

цвет посещенной гиперссылки

<body vlink='цвет'>

да

alinkColor

цвет активной гиперссылки

<body alink='цвет'>

да

URL

адрес документа

-

да, что приведет к загрузке нового документа

location

адрес документа

-

да, что приведет к загрузке нового документа

title

значение титульной строки

<title>...</title>

да

fileCreatedDate

дата создания файла

-

нет

fileSize

размер файла в байтах

-

нет

anchors

массив объектов, соответствующих меткам документа

<a name='имя метки'>

-

links

массив объектов, соответствующих гиперссылкам документа

<a href='адрес'>

-

images

массив объектов, соответствующих изображениям, встроенным в документ

<img src='адрес'>

-

forms

массив объектов, соответствующих формам документа

<form>...</form>

-

frames

массив объектов, соответствующих фреймам документа

<frame>...</frame>

-

body

объект, содержащий информацию о характеристиках "тела" документа, заключенного в контейнер <body>...</body> 

Свойства объекта document.body:

Свойство

Значение

Пример применения

background

адрес фонового изображения

<body background="pictures/myPic.jpg">

innerHTML

весь HTML-код "тела" документа

Изменяя значение этого свойства, можно сменить документ, не перегружая его

clientWidth

ширина окна браузера

<input type="button"
value="Узнать ширину окна браузера"
onclick="alert('Ширина окна браузера: '+document.body.clientWidth);">

clientHeight

высота окна браузера

Метод document.write():

Из методов объекта document наибольший интерес представляет метод

write(HTML-код); 



С помощью этого метода web-страницы можно создавать динамически.

Пример. Пусть пользователь введет в текстовое поле свое имя (скажем, Вася), после чего откроется документ, в котором будет фраза: "ПРИВЕТ, ВАСЯ!".

HTML-код, задающий текстовое поле, очень прост. Мы приведем здесь лишь его результат:

ВВЕДИТЕ ВАШЕ ИМЯ:

Вот как выглядит код сценария, вызываемого по onclick для кнопки:

var s='<html><body bgcolor=yellow text=DarkGreen><h1 align=center>ПРИВЕТ, '+myName.value+'</h1></body></html>';document.write(s);



Здесь myName, как Вы уже догадались - имя текстового поля.

2.1.3.Объект history

Объект history содержит информацию о документах, посещенных в течение данного сеанса работы браузера.

Свойство:

  1.  history.length - число посещенных документов.

Методы:

  1.  history.back() - возвращает к предыдущему документу;
  2.  history.go(n) - вызывает переход на n документов вперед (если n>0) или назад (если n<0) по списку.

2.1.4.Объект window

Объект window содержит информацию об окне браузера - до появления фреймов он содержал информацию лишь о главном (и единственном) его окне; во фреймсодержащих документах, для обращения к главному или текущему окну (фрейму) используются синонимы: top и self соответственно.

Например, для того, чтобы разместить какой-либо документ "поверх" всех фреймов, следует выполнить присвоение:

top.location.href='адрес нового документа'; 

СВОЙСТВА ОБЪЕКТА WINDOW:

Свойство

Значение

name

имя окна 

status

сообщение, выводимое в статусной строке (например, при наведении курсора на какую-либо область).

event

[объект] содержит информацию об источнике события


МЕТОДЫ:

Метод

Действие

alert('строка');

Вызывает окно с сообщением и кнопкой "ОК".

<input type='button' value='Вызовем метод alert' onclick="alert('Это результат работы метода alert');">

Используется, в основном, для вывода предупреждений, например, для того, чтобы сообщить пользователю, для какого браузера оптимизирован данный документ.

confirm('строка');

Вызывает окно с сообщением и кнопками "ОК" и "ОТМЕНА".

Возвращает значение "true" или "false" в зависимости от выбора кнопки пользователем.

<input type='button' value='Вызовем метод confirm' onclick="confirm('Продолжить просмотр?');">

prompt('строка');

Вызывает окно с сообщением, текстовым полем для ввода и и кнопками "ОК" и "ОТМЕНА".

Возвращает значение введенной переменной.

<input type='button' value='Вызовем метод prompt'

onclick="top.im=prompt('Введите Ваше имя');"> 

Здесь top.im - имя переменной, описанной в секции &head>...<?head>.

open('параметры окна');

Cоздает новое окно браузера с указанными характеристиками.

Если не передавать никаких параметров, будет открыто новое пустое окно браузера.

Например,

<input type='button' value='Вызовем метод open' onclick="window.open();">

close(имя окна);

Закрывает указанное окно.

Параметры метода window.open()

Параметр

Возможные значения

Что определяет

URL

строка

адрес загружаемого в новое окно документа

name

строка

имя окна

width, height

размеры в пикселах

ширина и высота окна

top, left

размеры в пикселах

смещение верхнего (левого) края окна относительно верхнего (левого) края рабочего стола

fullscreen

yes/no/1/0

полноэкранный режим

resizable

yes/no/1/0

возможность изменения размеров окна пользователем

toolbar

yes/no/1/0

наличие панели инструментов в окне браузера

Пример. Создадим новое окно браузера размером 150х50 пикселов и загрузим в него документ 'Osysteme.html'. Назовем новое окно ww. Создадим кнопку, нажатие на которую вызывало бы открытие нового окна:

<input type='button' value='Вызовем метод open'
     onclick= "top.ww=window.open('Osysteme.html','ww','width=150, height=50');"> 

  1.  close() - закрывает окно браузера.

<input type='button' value='Закроем окно' onclick="ww.close();"> 


Теперь Вы можете выполнить первые 5 заданий, связанных с использованием объектов JavaScript, их свойствами и методами.

Минимальное число баллов:

  1.  С помощью метода alert (); просмотрите все свойства объекта navigator.
  2.  Создайте две кнопки: "Открыть окно" и "Закрыть окно". При нажатии на первую должно создаваться окно размером 250x300px и в нем открываться документ "Animat.html". Вторая кнопка должна закрывать это окно.
  3.  Создайте две кнопки: "Открыть окно" и "Закрыть окно". При нажатии на первую должно создаваться окно, размеры которого определены пользователем (введены при помощи формы). Вторая кнопка должна закрывать это окно. Оформите результат примерно так, как показано ниже:

Параметры Окна

Начало формы

Ширина      

Высота  

Конец формы

Начало формы

Конец формы

  1.  Создайте функцию, выводящую (в документ) свойства передаваемого ей объекта. Документ (создаваемый динамически) поместить в плавающий фрейм.  
  2.  Создайте документ, для которого назначены цвет фона и текста. Документ должен содержать текстовые гиперссылки. В этом же документе создайте гиперссылку "Изменить стиль", при щелчке по которой должны меняться все стилевые назначения: цвет фона, букв, посещенных, непосещенных и активных гиперссылок.
  3.  Создайте документ, содержащий различные элементы (например, изображения, элементы форм, списки, бегущие строки и пр.)  Задайте фоновое изображение. В этом же документе создайте гиперссылку "Изменить содержимое", при нажати на которую будет меняться весь HTML-код, например, появится плавающий фрейм с документом "About.html". Создайте конструктор объекта "точка" ("вектор"). Свойствами этого объекта должны быть размерность и координаты точки. Включите в объект методы: 
  4.  вычисления нормы вектора,
  5.  вычисления функции f суммы произведений квадратов компонент точки на параметры функции.

Создайте с помощью данного конструктора точки:

  1.  x=(0,0,0,0),
  2.  x=(1,-1,3).

Вычислите значения их норм, а также значения функции f при следующих значениях параметров:

  1.  a=(1,2,3,4),
  2.  a=(5,3,1).

  1.  Добавьте к объекту String метод, позволяющий определить сколько раз данная подстрока входит в указанную строку.
    (Например, если var s="WHAT YOU SEE IS WHAT YOU GET", то вызов метода alert(s.Count("YOU")); приведет к отображению числа 2). Оформите результат примерно так,как показано ниже.

Вводимая строка..

Начало формы

Конец формы

Начало формы

Конец формы

Начало формы

Конец формы

Регистр не должен приниматься во внимание.

  1.  Напишите функцию, которая выводила бы в документ все свойства передаваемого ей объекта. Создайте интерфейс для нее.
  2.  Добавьте к объекту String метод , позволяющий исключать из вводимой пользователем строки вводимую пользователем подстроку.Оформить результат примерно так, как показано ниже.

Начало формы

Введите исходную строку:

Введите подстроку, подлежащую исключению:

Результат:

Регистр не должен приниматься во внимание.("SEA","sea" или "sEa" - одна и та же подстрока.) Создайте функцию для конструирования объектов с информацией о пакетах прикладных программ:

а) категория (информационно-правовая система, электронный архив, офисный пакет и т.д.),

б) название,

в) версия,

г) цена,

д) реквизиты фирмы производителя(представителя),

е) адрес файла с описанием пакета.

Сконструируйте несколько объектов данного типа. Выведите список их категорий и названий в виде гиперссылок на файлы с описаниями.

2.2.Объекты, связанные с тэгами HTML:

forms

frames

images

links

anchors

Тэги и объекты - какая связь?

При загрузке документа браузер автоматически создает ряд объектов. В частности, создаются объекты, хранящие информацию обо всех формах документа (массив forms), всех изображениях (массив images), всех фреймах (массив frames), всех гиперссылках (массив links) и всех метках (массив anchors).

Все эти массивы объектов являются свойствами объекта document, содержащего информацию о документе, загруженном в окно браузера. (Об объекте document мы поговорим подробнее в одной из следующих лекций.)

Как и все массивы в JavaScript, перечисленные массивы объектов нумеруются, начиная с нуля. Для них, как и для всех массивов в JavaScript, определено свойство length (длина), т.е. число элементов в массиве.

Обращаться к элементам этих массивов (в JavaScript-сценариях) можно двумя способами:

  1.  по номеру, например: document.images[0];
  2.  по имени, (если соответствующий тег имеет атрибут name или ID), например: document.images['hare'] или document.hare.

Именовать можно не только тэги <forms>, <frames>, <images>, <links> и <anchors>, но и многие другие тэги, например: <table>, <td>, <div>, <span>. Информация об именованных тэгах также хранится в автоматически создаваемых одноименных объектах.

Свойствами объектов, связанных с тэгами, являются атрибуты соответствующих тэгов.


Рассмотрим перечисленные выше массивы объектов подробнее.

Формы и массив объектов forms

Массив объектов forms содержит информацию о формах, содержащихся в документе, в том числе и обо всех элементах форм.

Вспомним известные сведения о формах

Напомним, что формы - это фрагменты Web-документов, "ответственные" за ввод данных клиентом и передачу их на сервер.

Создание форм подробно описано в разделе "Формы".

При создании форм следует учитывать два правила:

  1.  В любой форме ОБЯЗАТЕЛЬНО должен присутствоват элемент, позволяющий отправить данные на сервер. Это может быть кнопка SUBMIT или обычная кнопка, к которой привязан вызов метода Submit().
  2.  Другим полезным элементом формы (о котором почему-то часто забывают) является кнопка RESET, "сбрасывающая" все, то было введено пользователем? и восстанавливающая заданные в документе значения элементов формы.



Все атрибуты тэга <form> являются свойствами соответствующего элемента массива document.forms:

name

Имя, по которому можно обращаться к элементам массива forms:

<form name='имя формы'...

При этом слово forms можно опускать, например, если создана форма: <form name='myForm'>, то к ней допустимо обращение document.myForm.


Именованные элементы формы являются ее свойствами и допускают обращение по имени. Например, если форма myForm содержит текстовое поле по имени fam, то получить или изменить его значение можно с помощью свойства document.myForm.fam.value.

action

Адрес и имя серверного сценария, принимающего и обрабатывающего данные, введенные клиентом при помощи формы.

method

Метод передачи данных: GET или POST.

Метод GET используется для передачи небольших объемов данных (например, значения некоторой переменной).

Значение передаваемой переменной можно разместить после имени серверного сценария, отделив от последнего знаком '?'.

Метод POST используется для передачи данных, объем которых определить заранее невозможно (например, заказов, сделанных в электронном магазине, текстов поздравительных открыток, записей в гостевой книге и т.п.).
В этом случае считывание данных происходит из стандартного входного потока (standard input stream).

При запуске серверного сценария Web-сервер формирует переменные среды (environmental variables). Их анализ должен быть предусмотрен в серверном сценарии.

Рассмотрим  свойства и методы объектов-форм.

Доступ к значениям элементов форм

Вернемся к примерам, рассмотренным  выше (Формы) и выясним, как для каждого из элементов получить введенные значения.

Наша форма называется myForm, и поскольку мы обращаемся к ее элементам, находясь "внутри" формы, имя формы мы везде опускаем.

Текстовое поле: имеет код:

<input name="fio" value="Горбунков Семен Семенович" align="LEFT" size="28" maxlength="35">

Узнать значение, занесенное в это поле, можно, если обратиться к нему по имени: fio.value (если обращение прооисходит из элемента, находящегося в пределах формы) или myForm.fio.value (если обращение прооисходит из элемента, находящегося в пределах формы).

Создадим кнопку, , которая вызывает метод alert(fio.value):

Текстовая область:
имеет код:

<TEXTAREA name=bio cols=30 rows=6 wrap>
КРАТКАЯ АВТОБИОГРАФИЯ
</TEXTAREA> 

Узнать значение, занесенное в текстовую область, можно (так же, как и в случае текстового поля), если обратиться к ней по имени: bio.value (если обращение прооисходит из элемента, находящегося в пределах формы) или myForm.bio.value (если обращение прооисходит из элемента, находящегося в пределах формы).

Создадим кнопку, , которая вызывает метод alert(bio.value):

Список с единственным выбором:


имеет код:

<select name="week" size="7">
<option value="1">Понедельник</option>
<option value="2">Вторник</option>
<option value="3">Среда</option>
<option value="4">Четверг</option>
<option value="5">Пятница</option>
<option value="6">Суббота</option>
<option value="7">Воскресенье</option>
</select>


Узнаем вначале номер выбранной опции. Он является значением свойства: myForm.week.options.selectedIndex (мы, находясь в пределах формы, обратимся к нему еще проще: week.options.selectedIndex).

Создадим кнопку:

Обратите внимание на то, что нумерация индексов начинается с нуля (а не с единицы). Если не выбран ни один индекс, значением свойства week.options.selectedIndex является "-1".

Попробуем теперь получить текст выбранной опции, пользуясь ее номером. Для этого создадим кнопку, вызывающую метод
alert(myForm.week.options[selectedIndex].text):


Сообщение об ошибке! Ну, конечно же, ведь нужно было обращаться к свойству правильно, то есть вот так:

alert(week.options[week.options.selectedIndex].text);,
а еще проще было бы сначала запомнить номер выбранной опции в отдельной переменной:
var sI=week.options.selectedIndex;,
а затем обратиться к соответствующему элементу массива week.options:
alert(week.options[week.options[sI].text);.
Попробуем так:



Вот теперь все получилось!

Список с множественным выбором:
(он у нас называется food) обработать будет немного сложнее, поскольку выбранных индексов может быть несколько. Нам придется просмотреть все опции (это лучше всего сделать в цикле) и для каждой из них посмотреть, какое значение имеет свойство selected: true (если опция выбрана) или false. Таким образом, тело функции, вызываемой, например, при нажатии на кнопку, будет иметь вид:

for (var i=0; i<food.options.length; i++) if (food.options[i].selected) alert(food.options[i].text);

Попробуем:

"Флажки" (checkbox'ы)
напоминают списки, но доступ к выбранным значениям для них происходит иначе.

В нашем примере было создано 7 checkbox'ов с одним и тем же именем - skill:

HTML
JavaScript
ASP
Perl
PHP
XML
FLASH

тело функции, обеспечивающей вывод значений выбранных опций, будет иметь вид:

for (var i=0; i<skill.length; i++) if (skill[i].checked) alert(i);

Проверим:

Так, отмеченные checkbox'ы определять мы научились. Теперь, казалось бы, мы можем обратиться к свойству text соответствующих элементов массива skill, но не тут то было. Дело в том, что элементы массивв skill такого свойства попросту не имеют - ведь мы просто писали текст р я д о м с флажками. "Исхитриться" здесь можно так: сделать значения атрибута value совпадающими с текстами, расположенными рядом с флажками.

"Радиокнопки" (radiobuttons):

В нашем примере было создано 7 радиокнопок с одним и тем же именем - skills:

HTML
JavaScript
ASP
Perl
PHP
XML
FLASH

Тот факт, что радиокнопки имеют одно имя, обеспечивает единственность выбора. Так же, как и в случае checkbo'ов, нам следует просмотреть массив skills на предмет обнаружения элемента со свойством checked и показать (например, с помощью метода alert) для такового свойство value. Если нас интересует собственно текст, то при создании радиокнопок следует предусмотреть, чтобы текст, находящийся рядом с кнопкой и значение атрибута value совпадали.


Задание: Добавьте в форму, созданную ранее, кнопку, позволяющую просмотреть все данные, введенные пользователем.

Для придания фокуса полям формы используется метод focus(). (Его используют в тех случаях, когда проверка данных, введенных пользователем, показывает, что то или иное поле не заполнено или заполнено неверно.)

Перед отправкой данных, введенных пользователем при помощи формы, на сервер их необходимо проверить. Удобнее всего оформить проверку как функцию, (например, ее можно назвать proverka()). Пусть она возвращает значение true в случае успешного завершения проверки и false - в случае обнаружения ошибка. Отправку данных на сервер следует выполнять только в случае успешного завершения проверки!

Кнопку submit в форме следует заменить на кнопку (button), указав в ней обработчик события:

onclick="if (proverka()) submit();"


(Действие метода submit() аналогично действию кнопки submit.)

Задание: Создайте функцию, проверяющую заполнение обязательных полей. Предусмотрите вызов этой функции перед отправкой данных из формы на сервер.

2.2.3.Фреймы и массив объектов frames

Массив объектов frames содержит информацию о фреймах, позволяет управлять их содержимым, а также динамически создавать фреймсодержащие документы.

Фреймсодержащие документы создаются не только из соображений дизайна, но и для обеспечения возможности передачи значений переменнных между документами. Так, переменные, определенные в фреймсодержащем документе, доступны во всех документах, загружаемых в его фреймы.

Рассмотрим пример.

А теперь попробуем вызвать документ dok2.html без фреймсодержащей структуры.



При динамическом создании фреймсодержащих документов все характеристики фреймов, в том числе и адреса загружаемых документов, (а также и сами коды документов) могут являться переменными величинами.

Пример. Создадим функцию, обеспечивающую формирование документа из двух вертикальных фреймов. Размеры фреймов и адреса загружаемых в них документов должны являться параметрами этой функции.

<html>
<head>
<script>
function
make_frames(width,doc1,doc2)
{
var s="<frameset cols=";
s+=width+"%,*>";
s+="<frame name='odin' src="+'"'+doc1+'"'+">";
s+="<frame name='dva' src="+'"'+doc1+'"'+">";
s+="</frameset>";
document.write(s);
}
make_frames(30,"First.html","Second.html");
</script>
</head>
</html>



Обращение к фреймам возможно по номеру или по имени.


О том, как создавать динамическое содержимое фреймов, описано в разделе "Фреймы".

Изображения и массив объектов images

Массив объектов images содержит информацию об изображениях документа.

Свойства объектов images

Свойство 

Значение 

Изменение присвоением 

src 

адрес файла с изображением 

да 

alt 

альтернативный текст
(появляется при наведении курсора на рисунок, а также выводится вместо рисунка, если браузер не поддерживает графику)

да 

title

альтернативный текст
(появляется при наведении курсора на рисунок)

да 

name 

имя изображения 

да 

width, height 

ширина, высота области изображения 

да 

border 

толщина рамки (в пикселах) 

да 

complete 

показывает, загружен рисунок в браузер (true) или нет (false). 

нет 

Динамическое изменение изображений


Использование свойств объекта images можно динамически изменять характеристики изображений.


Например,

Разместим в документе рисунок с помощью кода:

<img src="Pictures/haretiger.jpg"
     name='hare' width=150 height=160
border=1
alt="заяц">

Вот его результат:

Кроме того создадим кнопку:

<input type="Button" value="увеличим рисунок" onclick="document.images[2].width=250;
document.images[2].height=310;
document.images[2].alt='Нет, кажется все-таки тигр';
document.images[2].border=4;">



Вот результат:

Заметим, что к элементам массива images можно обращаться не только по номеру, но и по имени - в нашем примере:

document.images['hare'] или просто - document.hare.

Создание простейших анимаций


Изменяя свойство src объекта images, можно создавать простейшие анимации:

Разместим в документе рисунок с помощью кода:

<img name='man' src="Pictures/p1.jpg"
   width=150 height=142 border=1>

Вот его результат:

Кроме того создадим кнопку:

<input type="Button" value="заменим рисунок" onclick="zamena();">



Вот результат:

Здесь функция zamena() обеспечивает смену источника изображения:

function zamena ()

{

if(document.images['man'].src=='адрес 1')

    document.images['man'].src='адрес 2';

else document.images['man'].src='адрес 1';

}

Заметим, что использование полного адреса изображения в функции zamena() может оказаться слишком громоздким; для файлов, находящихся в одной папке, можно сравнивать только имена, а еще лучше - объявить переменную, которая будет, например, иметь значение 1, если загружен один из рисунков, и значение 0 - если - другой.

Изменяя изображения через равные промежутки времени можно достичь эффекта анимации.
Для того, чтобы задать время, через которой будет изменяться изображение, следует использовать функцию:

setTimeout("действие","число миллисекунд").

Новый имидж - зачем это нужно?

Объекты-рисунки можно создать не только за счет включения в HTML-код документа тэга <img, но и следующим образом:

имя объекта-рисунка = new Image();
имя объекта-рисунка.src = " адрес рисунка"; 

Созданный таким образом рисунок (объект Image) никак себя не проявит. Но зачем тогда его нужно создавать? Это нужно для того, чтобы рисунок был загружен в память, прежде, чем он будет вызван (клиентским сценарием). Например, панель навигации по разделам сайта нередко оформляют в виде рисунков, содержащих надписи или пиктограммы. При наведении курсора на них они, как правило, изменяются. Это достигается за счет смены источника изображения (свойства src) соответствующего объекта-рисунка. Если не предусмотреть предварительной подгрузки рисунка-заменителя, при наведении курсора на рисунок, будет запрашиваться с сервера новый графический файл в соответствии с указанным src. Поскольку загрузка рисунков происходит, мягко говоря, не моментально, вместо желаемого эффекта пользователь какое-то время будет лицезреть некрасивый "крестик". Предварительная подгрузка рисунка описанным выше способом делает его готовым к использованию. При наведении курсора на рисунок, новый объект будет загружаться не с сервера, а из оперативной памяти.


Обычно подгрузку всех необходимых рисунков оформляют в виде функции, которую вызывают после загрузки документа:

<body onload="вызов функции, подгружающей рисунки"> 

(См., например, документ b.html.)

Гиперссылки (метки) и массив объектов links (anchors)

Массивы объектов anchors, links содержат информацию о метках (гиперссылках) документа.


Не следует путать их с методами anchor(), link(), принадлежащими объекту String:

 методы anchor(), link() создают метки (гиперссылки), связывая их с той строкой, для которой они вызываются (это методы объекта String);

 объекты anchors[ ], links[ ] содержат информацию о существующих связях и могут использоваться для их динамического переопределения (это свойства объекта document).

Например, просмотреть имена всех меток данного документа можно с помощью следующего кода:

for(var i=0; i<document.anchors.length; i++)   alert(document.anchors[i].name);

Код:

document.links[0].href='новый URL'; 


переназначает первую по счету гиперссылку документа.
Теперь щелчок по этому фрагменту (или рисунку) будет приводить к выводу иного документа, чем прежде.

Пользуясь свойствами массивов anchors и links, можно, например, "связать" один и тот же фрагмент текста (или одно и то же изображение) с различными адресами в зависимости от значения некоторой переменной:

<script>
var i=...;
document.write("<a href="+document.links[i].href+">ТЕКСТ ГИПЕРССЫЛКИ</a>");
</script>


В зависимости от значения переменной i щелчок на тексте "ТЕКСТ ГИПЕРССЫЛКИ" будет вызывать загрузку различных документов. Ссылки на эти документы уже существуют на странице и хранятся в массиве document.links[].

онец формы


 

А также другие работы, которые могут Вас заинтересовать

62994. Рушник - це доля, вишита на полотні. Театралізоване дійство 24.64 KB
  До урочистого відкриття запрошуємо організаторів свята: Представники області Вітання організаторів свята ВЕД. Допоки рушники є на моїй землі Дасть Україні Бог щасливу долю й світле щастя...
62998. Гра «Чарівне коло» 1.01 MB
  Правила гри: діти стають один за одним і рухаються по колу слухаючи вчителя який промовляє різні звуки нашої мови. Той хто помилився вибуває з гри. Правила гри: діти стають один за одним.
62999. «Динамічна геометрія» на допомогу вчителю 216.92 KB
  Побудуємо бісектрису отриманого кута найпростіша геометрична задача на побудову Будуємо пряму перпендикулярну до однієї з сторін кута яка проходить через деяку точку яка лежить всередині кута найпростіша задача на побудову перпендикуляра...