Главная Коллекция "Revolution" Программирование, компьютеры и кибернетика Создание и применение сценариев на JavaScript

Создание и применение сценариев на JavaScript

Сценарии в HTML-документе. Атрибуты async и defer. Изучение структуры основных браузерных объектов. Объектная модель документа. Объекты и функции JavaScript. Методы и свойства Location. Использование сценария с функцией. Обработка значений из формы.

Рубрика	Программирование, компьютеры и кибернетика
Вид	лабораторная работа
Язык	русский
Дата добавления	26.11.2013
Размер файла	323,1 K

посмотреть текст работы

скачать работу можно здесь

полная информация о работе

весь список подобных работ

Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже

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

Размещено на http://www.allbest.ru/

Лабораторная работа

Создание и применение сценариев на JavaScript

Цель: научиться использовать при JavaScript создании web-страниц.

JavaScript - это язык программирования, используемый в составе страниц HTML для увеличения функциональности и возможностей взаимодействия с пользователями.

Он был разработан фирмой Netscape в сотрудничестве с Sun Microsystems на базе языка Sun's Java. С помощью JavaScript на Web-странице можно сделать то, что невозможно сделать стандартными тегами HTML. Скрипты выполняются в результате наступления каких-либо событий, инициированных действиями пользователя.

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

Сценарии в HTML-документе

Сценарии, написанные на языке JavaScript, могут располагаться непосредственно в HTML-документе между тегами <script> и </script>.

Одним из параметров тега <script> является language, который определяет используемый язык сценариев. Для языка JavaScript значение параметра равно "JavaScript". Если применяется язык сценариев VBScript, то значение параметра должно быть равным "VBScript". В случае использования языка JavaScript параметр language можно опускать, т. к. этот язык выбирается браузером по умолчанию.

Обычно браузеры, не поддерживающие какие-либо теги HTML, эти теги просто игнорируют. Попытка браузера проанализировать содержимое не поддерживаемых тегов может привести к неверному отображению страницы. Чтобы избежать такой ситуации, рекомендуется помещать операторы языка JavaScript в теги комментария < !-- //-->.

Для правильной работы интерпретатора перед закрывающим тегом комментария --> следует поставить символы //.

Итак, для размещения сценария в HTML-документе следует написать следующее:

< !--

Операторы языка JavaScript

//-->

</script>

Документ может содержать несколько тегов <script>. Все они последовательно обрабатываются интерпретатором JavaScript. В следующем примере в раздел <BODY> (в тело) HTML-документа вставлены операторы языка JavaScript.

Необходимо написать сценарий, определяющий площадь прямоугольного треугольника по заданным катетам. Сценарий разместим в разделе <BODY> HTML-документа (листинг 1.1).

Листинг 1.1 Первый сценарий в документе:

<HTML>

<HEAD>

<title>Первый сценарий в документе</title>

</HEAD>

<BODY>

<P>Страница, содержащая сценарий.</P>

<!--

var a=8; h=10

document.write ("Площадь прямоугольного треугольника равна", a*h/2,".")

//-->

</script>

<P>Конец формирования страницы, содержащей сценарий</P>

</BODY>

</HTML>

В сценарии описываются и инициализируются две переменные, затем значение выражения записывается в документ. Для формирования вывода в HTML-страницу используется метод write объекта document. Строки, записываемые в документ, могут включать в себя теги HTML и выражения JavaScript.

Тег <noscript> определяет HTML-код, отображаемый на экране в случае, если JavaScript не поддерживается браузером или поддержка отключена. Этот тег следует после кода, заключенного в теги <script> и </script>. Если поддержка включена, то тег <noscript> игнорируется.

Рендеринг страницы и <script>

Когда браузер обрабатывает HTML-страницу и встречает элемент <script>, он переключается в режим исполнения JavaScript и выполняет код, который находится внутри тега. Выполнив его, браузер продолжает обрабатывать страницу.

Таким образом, элемент <script> блокирует рендеринг (отображение) документа, пока не выполнится определённый в нём сценарий.

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

<html>

<body>

<h1>Counting rabbits</h1>

for(var i=1; i<=3; i++) {

alert("Rabbit "+i+" out of the hat!")

}

</script>

<h1>...Finished counting</h1>

</body>

</html>

Порядок исполнения:

Страница начинает отрисовываться браузером, и мы видим начало документа

Затем браузер встречает скрипт и выполняет его, трижды выводя на экран alert.

Только после того, как браузер выполнил скрипт, он возвращается к HTML и отображает остальную часть страницы

Внешние скрипты

Если JavaScript-кода много -- его выносят в отдельный файл, который подключается в HTML:

Здесь /path/to/script.js - это абсолютный путь к файлу, содержащему скрипт (из корня сайта). Можно указать и полный URL. Вы также можете использовать путь относительно текущей страницы, т.е. src="script.js" если скрипт находится в том же каталоге, что и страница.

Например:

<html>

<head>

</script>

</head>

<body>

count_rabbits();

</script>

</body>

</html>

Содержимое файла /files/tutorial/browser/script/rabbits.js:

function count_rabbits() {

for(var i=1; i<=3; i++) {

alert("Кролик номер "+i)

}

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

Чтобы подключить несколько скриптов, используйте несколько тегов:

...

Внешний скрипт блокирует отображение страницы до того, как он загрузится и выполнится.

Атрибуты async и defer

Если у тега <script> есть атрибут async или defer, то браузер ставит его в очередь на загрузку и, не задерживаясь, продолжает отображать страницу.

Когда скрипт загрузится -- он выполнится.

Разница между этими двумя атрибутами заключается в том, что defer сохраняет порядок выполнения скриптов, а async -- нет.

Например, рассмотрим три варианта кода с большим скриптом large.js и маленьким small.js:

Второй скрипт загрузится быстрее и выполнится раньше, чем первый. А если поставить "defer" вместо "async", то браузер придержит запуск второго скрипта, чтобы сохранить относительный порядок выполнения.

В обоих случаях к моменту выполнения скриптов страница может быть уже полностью загружена, браузер не блокируется.

Поддержка:

defer

Везде, кроме Opera.

async

Везде, кроме IE<10, Opera

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

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

Глобальная структура

На рисунке схематически отображена структура основных браузерных объектов.

На вершине стоит window, который еще называют глобальным объектом. Все остальные объекты делятся на 3 группы.

Объектная модель документа (DOM)

Доступна через переменную document. Дает доступ к содержимому страницы.

На странице W3C DOM вы можете найти стандарты DOM, разработанные самим W3C. На данный момент существует 3 уровня DOM. Современные браузеры также поддерживают некоторые возможности, которые называются DOM 0 и которые остались еще с той эпохи, когда не было W3C.

Объектная модель браузера (BOM)

BOM - это объекты для работы с чем угодно, кроме документа.

Доступ к фреймам, запросы к серверу, функции alert/confirm/prompt -- все это BOM.

Большинство возможностей BOM стандартизированы в HTML5, но браузеры любят изобрести что-нибудь своё, особенное.

Объекты и функции JavaScript

Javascript - связующий все это язык. Встроенные в него объекты и сам язык в идеале должны соответствовать стандарту ECMA-262, но пока что браузеры к этому не пришли. Хотя положительная тенденция есть.

Глобальный объект window имеет две роли:

Это окно браузера. У него есть методы window.focus(), window.open() и другие.

Это глобальный объект JavaScript.

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

navigator

Объект navigator содержит общую информацию о браузере. У него есть масса свойств, но в 90% случаях применяется только одно из них: navigator.userAgent.

По свойству navigator.userAgent JavaScript может определить текущий браузер.

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

Тогда в будущем, когда браузер добавит новую возможность, ваш скрипт тут же подхватит её и продолжит работать.

screen

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

Текущее разрешение экрана посетителя по горизонтали/вертикали находится в screen.width/screen.height.

Это свойство можно использовать для сбора статистической информации о посетителях.

JavaScript-код счетчиков считывает эту информацию и отправляет на сервер. Именно поэтому можно просматривать в статистике, сколько посетителей приходило с каким экраном.

location

Объект location предоставляет информацию о текущем URL и позволяет JavaScript перенаправить посетителя на другой URL. Значением этого свойства является объект типа Location.

Методы и свойства Location

Самый главный метод -- это, конечно же, toString. Он возвращает полный URL.

alert( (window.location + ' ').indexOf('://') );

Все следующие свойства являются строками.

Колонка «Пример» содержит их значения для тестового URL:

http://www.google.com:80/search?q=javascript#test

Методы:

assign(url)

загрузить документ по данному url. Можно и просто приравнять window.location.href = url.

reload([forceget])

перезагрузить документ по текущему URL. Аргумент forceget - булево значение, если оно true, то документ перезагружается всегда с сервера, если false или не указано, то браузер может взять страницу из своего кэша.

replace(url)

заменить текущий документ на документ по указанному url. Разница, по сравнению с assign() заключается в том, что после использования replace() страница не записывается в истории посещений. В частности, это значит, что посетитель не сможет использовать для возврата кнопку браузера «Назад».

toString()

Как обсуждалось выше, возвращает строковое представление URL.

При изменении любых свойств window.location, кроме hash, документ будет перезагружен, как если бы для модифицированного url был вызван метод window.location.assign().

Функции: описание и использование

При создании программы разумно выделить в ней логически независимые части (так называемые подпрограммы). Каждую часть при необходимости можно разбить на отдельные подпрограммы и т. д. Разбиение программы на подпрограммы облегчает процесс отладки, т. к. позволяет отлаживать каждую подпрограмму отдельно. Имеет смысл распределить работу по созданию сложной программы между отдельными программистами. Некоторые подпрограммы можно использовать для решения разных задач.

Один раз созданную и отлаженную программу можно использовать произвольное число раз.

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

Основным элементом языка JavaScript является функция. Описание функции имеет вид

function F (V) {S}

где F - идентификатор функции, задающий имя, по которому можно обращаться к функции; v - список параметров функции, разделяемых запятыми; s - тело функции, в нем задаются действия, которые нужно выполнить, чтобы получить результат. Необязательный оператор return определяет возвращаемое функцией значение.

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

function F (vl, v2, ..., vn) {S}

то вызов функции должен иметь вид

F (el, e2, . . ., en)

где el, e2, ..., en - выражения, задающие фактические значения параметров. Параметры vl, v2, ..., vn, указанные в описании функции, называются формальными параметрами, чтобы подчеркнуть тот факт, что они получают смысл только после задания в вызове функции фактических параметров el, е2, ..., en, с которыми функция затем и работает. Если в функции параметры отсутствуют, то описание функции имеет вид

function F () {S}

Наличие скобок в операторе вызова функции обязательно, т. е. вызов функции в этом случае должен иметь вид: ()

Обычно все определения и функции задаются в разделе <HEAD> документа. Это обеспечивает интерпретацию и сохранение в памяти всех функций при загрузке документа в браузер.

В следующем примере в разделе заголовка описана функция саге, вычисляющая площадь прямоугольного треугольника по заданным катетам.

Сценарий с функцией

Необходимо написать сценарий, определяющий площадь треугольника по заданному основанию и высоте. Для вычисления площади воспользуемся функцией, описанной в разделе <HEAD> HTML-документа (листинг 1.2).

Листинг 1.2 Использование сценария с функцией

<HTML>

<HEAD>

<title>Использование сценария с функцией</title>

<!--

function care (a, h) { return a*h/2 };

-->

</script>

</HEAD>

<BODY>

<P>Начало отображения страницы со сценарием и функцией.</P>

<!--

var al=4; hl=16; var s=care (al,hl);

document.write("При вызове функции получено значение ", s,".");

-->

</script>

<P>Конец формирования страницы.</P>

</BODY>

</HTML>

Тело функции состоит лишь из оператора return, который определяет возвращаемое функцией значение. Вызов функции осуществляется в теле документа при выполнении оператора присваивания: s=care (al,hl). Формальным параметрам а и h присваивается значение фактических параметров al и hl, и выполняется тело функции. Полученное значение помещается в документ с помощью метода write.

Обработчики событий

Практически все JavaScript-приложения выполняют те или иные действия, откликаясь на различные события.

Событие - это сигнал от браузера о том, что что-то произошло.

Есть множество самых различных событий.

DOM-события, которые инициируются элементами DOM. Например, событиеclick происходит при клике на элементе, а событие mouseover - когда указатель мыши появляется над элементом.

События окна. Например событие resize - при изменении размера окна браузера.

Другие события, например load, readystatechange. Они используются, скажем, в технологии AJAX.

Именно DOM-события связывают действия, происходящие в документе, с кодом JavaScript, тем самым обеспечивая динамический веб-интерфейс.

Назначение обработчиков

Для того, чтобы скрипт реагировал на событие - нужно назначить хотя бы одну функцию-обработчик. Обычно обработчики называют "on+имя события", например: onclick.

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

Существует несколько способов назначать обработчик на конкретное событие элемента. Все они представлены ниже.

Через атрибут HTML-тега

Обработчик события можно указать в виде inline-записи, прямо в атрибуте onсобытие.

Например, для обработки события click на кнопке input, можно назначить обработчик onclick вот так:

Можно назначить и функцию.

Например, пусть при клике на кнопку input запускается функция count_rabbits(). Для этого запишем вызов функции в атрибут onclick:

<html>

<head>

function count_rabbits() {

for(var i=1; i<=3; i++) {

// оператор + соединяет строки

alert("Из шляпы достали "+i+" кролика!")

}

</script>

</head>

<body>

</body>

</html>

Напомним, что имена атрибутов HTML-тегов нечувствительны к регистру, поэтому атрибут oNcLiCk сработает также, как onClick или onclick.

Но если вы хотите придерживаться хорошего стиля (или спецификации XHTML), то имена тегов и их атрибуты должны быть указаны в нижнем регистре.

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

У этого способа установки обработчика есть и минусы. Как только обработчик начинает занимать больше одной строки - читабельность резко падает.

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

Через свойство объекта

Самый близкий родственник описанного выше способа - установка функции-обработчика через свойство onсобытие соответствующего элемента. Этот способ тоже будет работать в любом браузере с поддержкой JavaScript.

Для этого нужно:

получить элемент

назначить обработчик свойству on+имя

Вот пример установки обработчика события click на элемент с id="myElement":

document.getElementById('myElement').onclick = function() {

alert('Спасибо')

}

Стоит сразу обратить внимание на две детали:

Это именно свойство, а не атрибут. Поэтому, хотя технически и есть кроссбраузерные способы назначать обработчики через setAttribute, но лучше их даже не знать, а пользоваться прямым присвоением.

Кроме того, как и все свойства объектов JavaScript, имя свойства onсобытие чувствительно к регистру символов и должно быть в нижнем регистре.

Обработчик - не текст, а именно функция javascript.

Когда браузер видит свойство on... в HTML-разметке - он создает функцию из содержимого кавычек.

В этом смысле эти два кода работают одинаково:

Только HTML:

HTML + JS:

document.getElementById('button').onclick = function() {

alert('Клик')

}

Специальные методы

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

Классический пример - установка обработчика на событие "содержимое окна загрузилось":

// разные элементы интерфейса могут иметь интерес

// в том, чтобы их вызвали при загрузке документа

window.onload = function() {

alert('Документ загружен!')

}

Существует два основных интерфейса для установки событий.

Решение Microsoft

Методы, предложенные Microsoft, работают только в браузерах Internet Explorer и Opera (она поддерживает метод Microsoft для лучшей совместимости).

Установка обработчика:

element.attachEvent( "on"+имя события, обработчик)

Удаление обработчика:

element.detachEvent( "on"+имя события, обработчик)

var input = document.getElementById('b1')

var handler = function() {

alert('Спасибо!')

}

input.attachEvent( "onclick" , handler) // поставить обработчик

// ....

input.detachEvent( "onclick", handler) // убрать обработчик

Установка по стандарту W3C

Решение W3C работает во всех современных браузерах, кроме Internet Explorer.

Установка обработчика:

element.addEventListener( имя_события, обработчик, фаза)

Удаление обработчика:

element.removeEventListener( имя_события, обработчик, фаза)

Обратите внимание, что имя события указывается без префикса "on".

Еще одно отличие от решения Microsoft это третий параметр - фаза. Если он установлен в true, то при срабатывании события во вложенном элементе, обработчик будет вызван на фазе "перехвата", а если значение будет false, то - на фазе "всплывания".

Использование - аналогично решению от Microsoft:

// ... объявить функцию-обработчик handler ...

input.addEventListener( "click" , handler, false) // поставить обработчик

// ....

input.removeEventListener( "click", handler, false) // убрать обработчик

Навигация по формам

Для форм есть дополнительные свойства DOM, которые упрощают навигацию и поиск элементов.

Элементы FORM можно получить по имени или номеру, используя свойство document.forms[name/index].

Например:

document.forms.my -- форма с именем 'my'

document.forms[0] -- первая форма в документе

Любой элемент формы form можно получить аналогичным образом, используя свойство form.elements.

Например:

<body>

</form>

var form = document.forms.my; // можно document.forms[0]

var elem = form.elements.one; // можно form.elements[0]

alert(elem.value); // "один"

</script>

</body>

Может быть несколько элементов с одинаковым именем. В таком случае form.elements[name] вернет коллекцию элементов, например:

http://learn.javascript.ru/forms-navigation

<body>

<form>

</form>

var form = document.forms[0];

var elems = form.elements.age;

alert(elems[0].value); // 10, первый input

</script>

</body>

Эти ссылки не зависят от окружающих тегов. Элемент может быть зарыт где-то глубоко в форме, но он всё равно доступен через form.elements.

По элементу можно получить его форму, используя свойство element.form.

Пример:

<body>

<form>

</form>

var form = document.forms[0];

var elem = form.elements.surname;

alert(elem.form == form); // true

</script>

</body>

Посмотрите также спецификацию о HTMLInputElement и других типах элементов.

Элемент SELECT дает доступ к своим опциям через elem.options:

<option name="blues" value="blues">Soft blues</option>

</select>

</form>

var form = document.body.children[0];

alert(form.elements['genre'].options[0].value); // blues

</script>

Как и с elements, мы можем использовать оба доступа: по имени options.blues и по номеру: option[0].

Обработка значений из формы

Напишем функцию, вычисляющую площадь треугольника по заданному основанию и высоте. Создадим форму для ввода исходных данных.

Листинг 1.3 Обработка значений из формы

<HTML>

<HEAD>

<title>Обработка значений из формы</title>

<!--//

function care (a, h)

{ var s= (a* h) / 2;

document.write ("Площадь прямоугольного треугольника равна ",s);

return s

}

//-->

</script>

</HEAD>

<BODY>

<P>Пример сценария со значениями из формы</P>

Основание: <input type="text" size=5 name="st1"><hr>

Высота: <input type="text" size=5 name="st2"><hr>

<input type="button" value=Вычислить

onClick="care(document.form1.st1.value,document.form1.st2.value)">

</FORM>

</BODY>

</HTML>

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

При интерпретации HTML-страницы браузером создаются объекты JavaScript. Взаимосвязь объектов между собой представляет иерархическую структуру. На самом верхнем уровне иерархии находится объект windows, представляющий окно браузера. Объект windows является предком или родителем" всех остальных объектов. Каждая страница кроме объекта windows имеет объект document. Свойства объекта document определяются содержимым самого документа: цвет фона, цвет шрифта и т. д. В последнем примере на странице расположена форма. Форма (form) является потомком объекта document, а все элементы формы выступают потомками объекта form. Ссылка на объект может быть осуществлена по имени, заданному параметром name тега <HTML>. Для получения значения основания треугольника, введенного в первом поле формы, должна быть выполнена конструкция document.forml.stl.value.

При ссылке на формы и их элементы можно не указывать объект document. В рассмотренном примере получить значение первого поля ввода можно и следующим образом forml.stl.value

Итак, когда в функцию передаются данные простых типов, например, чисел, как в рассмотренном случае, передача параметров осуществляется по значению. Формальному параметру а присваивается значение фактического параметра forml.stl.value, а формальному параметру b значение form1.st2.value. После этого выполняется тело функции.

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

<BODY>

<P>Вычисление площади прямоугольного треугольника</P>

Основание: <input type="text" size=7 name="stl"><hr>

Высота: <input type="text" size=7 name="st2"><hr>

<input type="button" value=Вычислить

onClick="carel(forml.stl,forml.st2)">

</FORM>

</BODY>

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

function carel(a, h)

{var s=(a.value * h.value)/2;

document.write("Площадь равна ",s);

return s}

Значение основания треугольника получается с помощью конструкции a.value, а высоты h.value.

Обработка события Blur

Событие "потеря фокуса" (Blur) происходит в тот момент, когда элемент формы теряет фокус. В следующем варианте решения задачи вычисления происходят в тот момент, когда поле формы, содержащее данные, потеряло фокус.

Напишем сценарий, определяющий площадь квадрата по заданной стороне. Площадь должна вычисляться в тот момент, когда элемент формы теряет фокус. HTML-код представлен в листинге 1.4.

Листинг 1.4 Обработка события: - потеря объектом фокуса

<HTML>

<HEAD>

<title>Обработка события Blur - потеря объектом фокуса</title>

function srec()

{form1.res.value=form1.num1.value* form1.num1.value}

</script>

</HEAD>

<BODY>

<P>Вычисление площади квадрата</P>

Сторона: <input type="text" size=7 name="num1" value=8

onBlur="srec()"><hr>

Площадь: <input type="text" size=7 name="res"><hr>

</FORM>

</BODY>

</HTML>

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

Обработка события Select

Событие select вызывается выбором части или всего текста в текстовом поле. Например, щелкнув дважды мышью по полю numl, мы выделим поле, наступит событие select, обработка которого приведет к вычислению требуемого значения.

Напишем сценарий, определяющий площадь квадрата по заданной стороне. Площадь должна вычисляться в тот момент, когда выбирается часть или весь текст в текстовом поле. HTML-код представлен в листинге 1.5.

Листинг 1.5 Обработка события Select - выбор поля ввода элемента формы

<HTML>

<HEAD>

<title>Обработка события Select.- выбор поля ввода элемента формы</title>

function srec ()

{form1.res.value=form1.num1.value* form1.num1.value}

</script>

</HEAD>

<BODY>

<P>Вычисление площади квадрата</P>

Сторона: <input type="text" size=7 name="num1" value=9

onSelect="srec()"><hr>

Площадь: <input type="text" size=7 name="res"><hr>

</FORM>

</BODY>

</HTML>

Пример: Перестановка двух изображений

В документе заданы два изображения. Требуется написать сценарий, который осуществляет перестановку заданных изображений. Вид документа приведен на рис. 1. При нажатии на кнопку Обменять изображения меняются местами. Функция chpict вызывается как реакция на событие "щелчок по кнопке" Обменять. Изображения задаются в документе с помощью тегов. Значение параметра src определяет имя файла, в котором хранится изображение. Переменная 1 служит для того, чтобы запомнить имя файла, который связан с первым изображением. Оператор присваивания d.pmi.src=d.pm2.src обеспечит загрузку второго изображения вместо первого. И, наконец, со вторым тегом изображения будет связан тот файл, который первоначально относился к первому изображению. В результате описанных действий изображения в документе будут переставлены. HTML-код документа, осуществляющего обмен изображений, имеет вид, приведенный в листинге 1.6.

Рис 1. Обмен двух изображений

Листинг 1.6 Обмен двух изображений

<HTML>

<HEAD>

<title>Обмен двух изображений</title>

<!-- //

function chpict ()

{ var d=document

var l=d.pm1.src

d.pm1.src=d.pm2.src

d.pm2.src=1

}

//-->

</script>

</HEAD>

<h3>Обмен двух изображений</h3>

</FORM>

</BODY>

</HTML>

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

Пример: Расписание занятий

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

Рис. 2. Расписание занятий

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

Расписание занятий задается списком. В теге <li>, определяющем элемент списка, предусмотрена реакция на два события, связанных с попаданием курсора мыши на элемент списка и выход курсора за пределы элемента списка. При попадании в текстовое поле помещается значение строки. Размещаемая в текстовом поле строка определяется параметром функции. HTML-код документа имеет вид, представленный в листинге 1.7.

Листинг 1.7

<HTML>

<HEAD>

<title>Расписание занятий </title>

<!--

var s1="Контрольная работа"

var s2='Изменилась аудитория 2246. 2 этаж'

var s3='Занятия в компьютерном классе'

var s4='Подготовка реферата'

var s5='Занятия переносятся на следующую неделю'

function sch(s)

{document.form1.m1.value=s}

function delet ()

{document.form1.m1.value=''}

//-->

</script>

</HEAD>

<h4>Расписание занятий</h4>

</FORM>

</TR>

<b><i>l пара </i></b> Математический анализ

<b><i>2 пара </i></b>Высшая алгебра

<b><i>3 пара </i></b> Программирование

<b><i>4 пара </i></b> История

<b><i>5 пара </i></b> Дискретный анализ

</FONT>

</UL>

</TD></TR>

</TABLE>

</BODY>

</HTML>

В табл. 1 представлены события и элементы документов HTML, в которых эти события могут происходить.

Таблица 1. События и объекты

Событие	Объекты	Когда происходит событие
Abort	image	Отказ от загрузки изображения
Blur	windows, элементы формы	Потеря объектом фокуса
Change	text, textarea, select	Изменение значения элемента
Click	button, radio, checkbox, submit, reset, link	Щелчок на элементе или связи
DragDrop	windows	Перетаскивается мышью объект в окно браузера
Error	image, windows	Ошибка при загрузке документа или изображения
Focus	windows, элементы формы	Окно или элемент формы получает фокус
KeyDown	document, image, link, textarea	Нажатие клавиши клавиатуры
KeyPress	document, image, link, textarea	Удержание нажатой клавиши клавиатуры
KeyUp	document, image, link, textarea	Отпускаются клавиши клавиатуры
Load	Тело документа	Загружается документ в браузер
MouseDown	document, button, link	Нажатие кнопки мыши
MouseOut	area, link	Перемещение курсора из области изображения или связи
MouseOver	link	Перемещение курсора над связью
MouseUp	document, button, link	Отпускается кнопка мыши
Move	windows	Пользователь или сценарий перемещает окно
Reset	form	Нажатие кнопки Reset формы
Resize	windows	Пользователь или сценарий изменяет размеры окна
Select	text, textarea	Выбирается поле ввода элемента формы
Submit	form	Нажатие кнопки Submit формы
Unload	Тело документа	Пользователь закрывает документ

Управление CSS свойствами тегов HTML (XHTML) с использованием JavaScript

Получение доступа к объекту

Все теги HTML (XHTML) интерпретируются браузером как объекты, c определенным набором свойств. Изменяя эти свойства с помощью скриптов JavaScript можно управлять внешним видом и положением элементов на странице.

Для того, чтобы тег стал доступен из JavaScript необходимо сообщить его имя браузеру, что реализуется с помощью параметра id='имя тега'.

Также можно использовать параметр name='имя тега', однако этот способ является устаревшим, тогда как с id работают все наиболее распространенные браузеры.

Cкрипты, описываемые ниже и использующие id, тестировались на: Internet Explorer 7 и 8, Opеra 9.6, Mozilla Firefox 3.0, Chrome 1.0.

Из JavaScript доступ к объекту осуществляется при помощи метода document.getElementById('id элемента').

Пример:

Допустим, в коде HTML есть тег IMG:

Тогда доступ к этому тегу из JavaScript будет выглядеть следующим образом:

var obj;

obj=document.getElementById('picture1');

</script>

Переменной obj будет присвоен дескриптор элемента, id которого равно picture1, т.е. тега IMG.

Используя дескриптор, возвращаемый методом getElementById('id элемента'), можно получить доступ к CSS свойствам элемента (считать значения свойств, либо присвоить свойствам новые значения).

Чтение CSS свойств элемента

Чтение CSS свойств элемента осуществляется с помощью дескриптора элемента, возвращаемого методом document.getElementById('id элемента') и метода currentStyle.

Пример:

var obj;

obj=document.getElementById('picture1');

document.write(obj.currentStyle.top);

</script>

Метод document.write выведет значение CSS свойства top элемента с id='picture1', т.е. тэга IMG.

Изменение свойств элемента

Изменение CSS свойств элемента осуществляется с помощью дескриптора элемента, возвращаемого методом document.getElementById('id элемента') и метода style.

Пример:

var obj;

obj=document.getElementById('picture1');

obj.style.top='10px';

</script>

Свойству top, элемента с id='picture1', присваивается значение: '10px'. В данном случае изменение свойства top, приведет к перемещению верхнего правого угла рисунка 'picture1' на позицию 10-ти пикселей от верхней границы родительского элемента.

Особенности работы с CSS свойствами, названия которых содержат дефис

Некоторые названия свойств CSS состоят из нескольких частей, разделенных дефисом. Например: margin-top или border-bottom-color.

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

Правильное написание вышеприведенных свойств в JavaScript: marginTop и borderBottomColor.

Задание:

Ознакомится с материалом по работе JavaScript с формами.

Созданную в ЛР № 6 форму:

переформатировать с помощью CSS;

добавить в неё текстовое поле.

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

Написать script, который при наведении курсора на строку формы изменял цвет её фона.

Написать script, который при нажатии на кнопку формы выводит сообщение.

Скрипты подключить к документу разными способами.

браузерный сценарий документ

Размещено на Allbest.ru

...

лабораторная работа "Создание и применение сценариев на JavaScript" скачать

Подобные документы

Технология написания клиентских приложений с использованием языка сценариев JavaScript
Базовый синтаксис языка сценариев JavaScript. Создание страниц, включающих в себя программы, которые взаимодействуют с пользователем, управляют браузером и динамически создают HTML-содержимое. Работа с объектами, которые инкапсулируют данные и поведение.

лабораторная работа [58,6 K], добавлен 25.05.2016
Встроенные Javascript функции
Характеристика Javascript функции с параметрами (аргументами). Возврат значений, глобальные и локальные переменные в функции. Все способы создания пользовательских функций в Javascript. Область видимости переменных. Рекурсивная функция Javascript.

лабораторная работа [75,8 K], добавлен 19.09.2019
Создание и использование сценариев World
Характеристика понятия веб-сценария - типа компьютерной программы, которая используется для динамического обновления веб-страницы. Принцип работы редактора сценариев Ява-скрипт (JavaScript), который используется для просмотра и редактирования кода HTML.

реферат [30,2 K], добавлен 11.10.2010
JavaScript
Назначение и применение JavaScript, общие сведения. Понятие объектной модели применительно к JavaScript. Размещение кода на HTML-странице. URL-схема. Вставка (контейнер SCRIPT, принудительный вызов интерпретатора). Программирование свойств окна браузера.

лекция [517,1 K], добавлен 09.03.2009
Разработка web сайта на основе HTML с использованием JavaScript
История html. Гипертекст. Структура web-страницы. Переход внутри одного документа. Переход к другому документу. Правила синтаксиса. Кодирование символов. Использование символов. Управление цветом. Конструктор документов. Способы определения таблиц стилей.

дипломная работа [911,3 K], добавлен 25.02.2005
Основы JavaScript
Создание интерактивных веб-страниц. Что такое JavaScript. Полная интеграция с браузером. Мощные средства для создания сетевых соединений. Подключение и выполнение JavaScript. Загрузка данных без перезагрузки страницы. Объекты для работы с мультимедиа.

лекция [16,2 K], добавлен 05.02.2012
Разработка Web-сайта на основе HTML с использованием JavaScript
Язык маркировки гипертекстов HTML, основа создания web-страниц. История спецификаций, каскадные таблицы стилей CSS. Способы определения таблиц стилей (стилевого шаблона). Язык подготовки сценариев JavaScript, его использование. Программный код web сайта.

курсовая работа [26,9 K], добавлен 05.07.2009
Приемы программирования на JavaScript
Изучение создания скриптов на JavaScript. Разработка программы выдачи простого предупреждения по событию Click при выборе гипертекстовой ссылки. Применение контейнера SCRIPT для размещение JavaScript-кода. Получение типа программы просмотра HTML-страниц.

контрольная работа [21,1 K], добавлен 15.02.2010
Web-технологии и компьютерное моделирование
Размещение кода скрипта JavaScript непосредственно на HTML-странице. Сценарий JavaScript и список основных событий. Полезные конструкции на PHP. Некоторые функции для работы с массивами. Фрагмент кода JavaScript из "Эконометрической модели России".

презентация [331,2 K], добавлен 25.09.2013
Веб-программирование
Освоение принципов написания клиентских сценариев JavaScript, управляемых событиями. Связь собственной функции JavaScript с обрабатываемым событием. Оформление ссылок в виде графических кнопок, изменяющих свой вид при наведении на них указателя мыши.

лабораторная работа [605,9 K], добавлен 25.05.2016
Скрипт мови JavaScript
Області застосування JavaScript. Об'єктна модель документа. Ієрархічна структура моделі та їх взаємозв'язки з іншими об'єктами. Іменування об'єктів і точковий синтаксис. Розміщення сценаріїв у документах. Способи визначення моменту запуску сценарію.

реферат [26,5 K], добавлен 20.08.2011
Формирование формального определения и написание программы, реализующей работу машины Тьюринга (Javascript)
Изучение методик языка Javascript по формализации и решению поставленной задачи, технологических приемов разработки программ на языке Javascript, HTML, CSS. Формально определение машины Тьюринга, распознающую язык. Ее программная модель, протоколы работы.

курсовая работа [220,7 K], добавлен 03.03.2015
Циклические операторы языка JavaScript - For
Примеры динамического построения html-страницы при помощи JavaScript. Использование цикла For, когда заранее известно, сколько раз должны повториться циклические действия. Выполнение циклических операторов входа и выхода, прерывание текущей итерации.

лабораторная работа [52,4 K], добавлен 19.09.2019
Создание интерактивных Web-приложений с использованием языка программирования JavaScript
Сравнительная характеристика, возможности и функции языков программирования JavaScript и PHP. Основные области их использования. Разработка интерактивного Web-приложения с применением JavaScript на примере теста по теме "Программирование на языке Delphi".

курсовая работа [19,3 K], добавлен 01.07.2014
Автоматизированное рабочее место заместителя директора по воспитательной работе
Характеристика комплекса технических средств для оснащения рабочего места и программного обеспечения ЭВМ. Разработка приложения для управления автоматизированной информационной системой с помощью сценариев JavaScript, HTML и базы данных MS Access.

дипломная работа [9,6 M], добавлен 26.11.2013
Об’єктна модель мови JavaScript
Javascript як мова програмування, заснована на об'єктах: і мовні засоби, і можливості середовища представляються об'єктами. Структура програм на мові Javascript. Декларація змінних та сфер їх впливу. Типи даних та їх використання. Пріоритети операцій.

курсовая работа [51,4 K], добавлен 12.12.2010
Основные положения языка JavaScript
Особенности составления программы (сценария) на языке JavaScript. Построение выражений из литералов, переменных, знаков операций, скобок. Элементы, используемые для хранения данных. Приоритет операций, порядок, в котором выполняются операции в выражении.

лабораторная работа [40,2 K], добавлен 19.09.2019
Объектная модель Java. Методы, общие для всех объектов
Классы, объекты и объектные ссылки. Особенности статических методов. Конструкторы, специальные переменные, наследование. Создание объектов внутренних классов. Соглашения об именовании. Некоторые методы класса Object. Абстрактные классы и атрибуты.

лекция [130,6 K], добавлен 21.06.2014
Розробка сайту інтернет-портфоліо
Дослідження та аналіз об’єкту програмування. Основні архітектурні риси JavaScript. Переваги CSS розмітки. Структура HTML-документа. Вимоги до апаратного та програмного забезпечення. Опис програми та її алгоритмів. Оцінка вартості програмного продукту.

дипломная работа [1,0 M], добавлен 01.09.2016
Языки программирования
Применение языков программирования в web-разработках. Создание документа с поддержкой гипертекста с помощью HTML. Использование JavaScript для программного доступа к объектам приложений. Perl - процедурный язык программирования; псевдообъектный язык PHP.

курсовая работа [260,9 K], добавлен 07.07.2013

Другие документы, подобные "Создание и применение сценариев на JavaScript"

весь список подобных работ

скачать работу можно здесь

сколько стоит заказать работу?

Работы в архивах красиво оформлены согласно требованиям ВУЗов и содержат рисунки, диаграммы, формулы и т.д.
PPT, PPTX и PDF-файлы представлены только в архивах.
Рекомендуем скачать работу.