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-страницы могут быть интерактивными, их содержание или стиль могут изменяться в зависимости от действий пользователя или наступления каких-либо событий.
Например, можно
Все это (и многое другое) делается средствами так называемых клиентских сценариев, т.е. программ, исходный код которых внедряется в HTML-код и интерпретируется браузером. Наиболее распространенным языком написания клиентских сценариев является JavaScript, но нередко используется и VBScript.
Все примеры, которые мы только что привели, выполнены средствами JavaScript. Но этим возможности этого языка не исчерпываются. Список основных "должностных обязанностей" клиентских сценариев выглядит, примерно следующим образом:
|
|
|
|
|
|
Нередко приходится слышать, как язык JavaScript называют Java. Это грубая ошибка. Дело в том, что Java - это другой язык программирования. И Java, и JavaScript - языки программирования для Интернет, но между ними существует принципиальная разница.
На языке JavaScript, как Вы уже знаете, создаются программы (так называемые клиентские сценарии), которые встраиваются в код HTML-документа и интерпретируются браузером.
Программы, написанные на языке Java сначала компилируются, а уже потом в откомпилированном виде перемещаются по сети. Главным преимуществом языка Java является платформенная независимость, т.е. возможность выполнения на компьютерах с различной архитектурой, различными операционными системами.
Язык Java позволяет создавать программы двух типов:
Язык 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> |
Все объекты, к которым позволяет обращаться JavaScript, можно разделить на 3 группы:
Объекты, связанные с тэгами языка HTML:
|
Внутренние (встроенные) объекты JavaScript:
|
Объекты браузера:
|
Именованные значения объектов называются свойствами. Синтаксис обращения к свойствам объектов:
имя объекта.свойство |
Многие объекты имеют также специальные, свойственные только им функции, или методы. Синтаксис для вызова метода:
имя объекта.метод(список параметров) |
Замечание. Получить список всех свойств того или иного объекта можно при помощи кода: for(переменная in объект)alert(переменная); |
Объекты браузера создаются автоматически при загрузке документа браузером. Это:
navigator |
document |
history |
window |
Объект 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" |
clientHeight |
высота окна браузера |
Метод document.write():
Из методов объекта document наибольший интерес представляет метод
write(HTML-код); |
С помощью этого метода web-страницы можно создавать динамически.
Пример. Пусть пользователь введет в текстовое поле свое имя (скажем, Вася), после чего откроется документ, в котором будет фраза: "ПРИВЕТ, ВАСЯ!". var s='<html><body bgcolor=yellow text=DarkGreen><h1 align=center>ПРИВЕТ, '+myName.value+'</h1></body></html>';document.write(s);
|
2.1.3.Объект history
Объект history содержит информацию о документах, посещенных в течение данного сеанса работы браузера.
Свойство:
Методы:
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'
<input type='button' value='Закроем окно' onclick="ww.close();"> |
Теперь Вы можете выполнить первые 5 заданий, связанных с использованием объектов JavaScript, их свойствами и методами.
Минимальное число баллов:
Параметры Окна |
Начало формы Ширина Высота Конец формы |
Начало формы Конец формы |
|
Начало формы Конец формы |
Начало формы Конец формы |
Начало формы Конец формы |
Начало формы
forms |
frames |
images |
links |
anchors |
При загрузке документа браузер автоматически создает ряд объектов. В частности, создаются объекты, хранящие информацию обо всех формах документа (массив forms), всех изображениях (массив images), всех фреймах (массив frames), всех гиперссылках (массив links) и всех метках (массив anchors).
Все эти массивы объектов являются свойствами объекта document, содержащего информацию о документе, загруженном в окно браузера. (Об объекте document мы поговорим подробнее в одной из следующих лекций.)
Как и все массивы в JavaScript, перечисленные массивы объектов нумеруются, начиная с нуля. Для них, как и для всех массивов в JavaScript, определено свойство length (длина), т.е. число элементов в массиве.
Обращаться к элементам этих массивов (в JavaScript-сценариях) можно двумя способами:
Именовать можно не только тэги <forms>, <frames>, <images>, <links> и <anchors>, но и многие другие тэги, например: <table>, <td>, <div>, <span>. Информация об именованных тэгах также хранится в автоматически создаваемых одноименных объектах.
Свойствами объектов, связанных с тэгами, являются атрибуты соответствующих тэгов.
Рассмотрим перечисленные выше массивы объектов подробнее.
Массив объектов forms содержит информацию о формах, содержащихся в документе, в том числе и обо всех элементах форм.
Вспомним известные сведения о формах
Напомним, что формы - это фрагменты Web-документов, "ответственные" за ввод данных клиентом и передачу их на сервер.
Создание форм подробно описано в разделе "Формы".
При создании форм следует учитывать два правила:
|
Все атрибуты тэга <form> являются свойствами соответствующего элемента массива document.forms:
name |
Имя, по которому можно обращаться к элементам массива forms: <form name='имя формы'... При этом слово forms можно опускать, например, если создана форма: <form name='myForm'>, то к ней допустимо обращение document.myForm.
|
action |
Адрес и имя серверного сценария, принимающего и обрабатывающего данные, введенные клиентом при помощи формы. |
method |
Метод передачи данных: GET или POST. Метод GET используется для передачи небольших объемов данных (например, значения некоторой переменной). Значение передаваемой переменной можно разместить после имени серверного сценария, отделив от последнего знаком '?'. Метод POST используется для передачи данных, объем которых определить заранее невозможно (например, заказов, сделанных в электронном магазине, текстов поздравительных открыток, записей в гостевой книге и т.п.). |
При запуске серверного сценария Web-сервер формирует переменные среды (environmental variables). Их анализ должен быть предусмотрен в серверном сценарии.
Рассмотрим свойства и методы объектов-форм.
Вернемся к примерам, рассмотренным выше (Формы) и выясним, как для каждого из элементов получить введенные значения.
Наша форма называется myForm, и поскольку мы обращаемся к ее элементам, находясь "внутри" формы, имя формы мы везде опускаем.
Текстовое поле: имеет код: |
Текстовая область: |
Список с единственным выбором:
|
"Флажки" (checkbox'ы) |
"Радиокнопки" (radiobuttons): |
Задание: Добавьте в форму, созданную ранее, кнопку, позволяющую просмотреть все данные, введенные пользователем. |
Для придания фокуса полям формы используется метод focus(). (Его используют в тех случаях, когда проверка данных, введенных пользователем, показывает, что то или иное поле не заполнено или заполнено неверно.)
Перед отправкой данных, введенных пользователем при помощи формы, на сервер их необходимо проверить. Удобнее всего оформить проверку как функцию, (например, ее можно назвать proverka()). Пусть она возвращает значение true в случае успешного завершения проверки и false - в случае обнаружения ошибка. Отправку данных на сервер следует выполнять только в случае успешного завершения проверки! onclick="if (proverka()) submit();"
|
Задание: Создайте функцию, проверяющую заполнение обязательных полей. Предусмотрите вызов этой функции перед отправкой данных из формы на сервер. |
Массив объектов frames содержит информацию о фреймах, позволяет управлять их содержимым, а также динамически создавать фреймсодержащие документы.
Фреймсодержащие документы создаются не только из соображений дизайна, но и для обеспечения возможности передачи значений переменнных между документами. Так, переменные, определенные в фреймсодержащем документе, доступны во всех документах, загружаемых в его фреймы.
Рассмотрим пример.
А теперь попробуем вызвать документ dok2.html без фреймсодержащей структуры.
При динамическом создании фреймсодержащих документов все характеристики фреймов, в том числе и адреса загружаемых документов, (а также и сами коды документов) могут являться переменными величинами.
Пример. Создадим функцию, обеспечивающую формирование документа из двух вертикальных фреймов. Размеры фреймов и адреса загружаемых в них документов должны являться параметрами этой функции. <html> |
Обращение к фреймам возможно по номеру или по имени.
О том, как создавать динамическое содержимое фреймов, описано в разделе "Фреймы".
Массив объектов images содержит информацию об изображениях документа.
Свойства объектов images
Свойство |
Значение |
Изменение присвоением |
src |
адрес файла с изображением |
да |
alt |
альтернативный текст |
да |
title |
альтернативный текст |
да |
name |
имя изображения |
да |
width, height |
ширина, высота области изображения |
да |
border |
толщина рамки (в пикселах) |
да |
complete |
показывает, загружен рисунок в браузер (true) или нет (false). |
нет |
Динамическое изменение изображений
Использование свойств объекта images можно динамически изменять характеристики изображений.
Например,
Разместим в документе рисунок с помощью кода: <img src="Pictures/haretiger.jpg" |
Вот его результат: |
Кроме того создадим кнопку: <input type="Button" value="увеличим рисунок" onclick="document.images[2].width=250;
|
Создание простейших анимаций
Изменяя свойство src объекта images, можно создавать простейшие анимации:
Разместим в документе рисунок с помощью кода: <img name='man' src="Pictures/p1.jpg" |
Вот его результат: |
Кроме того создадим кнопку: <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 - если - другой. |
|
Изменяя изображения через равные промежутки времени можно достичь эффекта анимации. |
Новый имидж - зачем это нужно?
Объекты-рисунки можно создать не только за счет включения в HTML-код документа тэга <img, но и следующим образом:
имя объекта-рисунка = new Image(); |
Созданный таким образом рисунок (объект 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>
|
онец формы
А также другие работы, которые могут Вас заинтересовать | |||
50045. | Статистический характер прочности | 379.5 KB | |
Классификация нагрузок Нагрузки и воздействия представляют собой наиболее неопределенные величины обладающие большим статистическим разбросом. В части математического описания нагрузки делятся на: нагрузки представляющие собой случайные величины; нагрузки представляющие собой случайные функции времени; нагрузки изменяющиеся... | |||
50047. | Визначення показника заломлення та концентрації водних розчинів за допомогою рефрактометра | 316 KB | |
Мета роботи Ознайомитися з будовою і принципом дії рефрактометра типу РПЛ2 оволодіти методикою експериментального визначення показників заломлення та концентрацій водних розчинів цукру визначення граничних кутів які відповідають початку повного внутрішнього відбивання від межі розділу скло досліджуваний розчин Для виконання лабораторної роботи студенту попередньо необхідно: знати закони геометричної... | |||
50048. | Пересування як вид стройових вправ | 44 KB | |
Основи термiнологiï: випади махи ногами тулубом руками. Випади. Випад це рух або положення з виставленням i згинанням опорноï ноги. Випад лівою правою Положення коли опорна лiва права нога виставлена i зігнута вперед iнша нога стоїть позаду випрямлена в колiнi тулуб на однiй вертикалi з тазом Випад влiво вправо Положення коли опорна лiва права нога виставлена влiво впрао i зiгнута в колiнi тулуб вертикально Нахилений випад влiво вправо Положення коли виконується випад... | |||
50050. | Определение индуктивности соленоида и коэффициента взаимной индуктивности с помощью исследования вынужденных колебаний в RL – цепи | 293 KB | |
Определение индуктивности соленоида и коэффициента взаимной индуктивности с помощью исследования вынужденных колебаний в RL-цепи. Цепь состоит из генератора резистора обладающего активным электрическим сопротивлением цепи R и катушки индуктивности обладающей реактивным индуктивным сопротивлением 1 w = 2pn циклическая частота колебаний. Фаза колебаний напряжения на индуктивности опережает фазу колебаний напряжения... | |||
50051. | Изучение петли гистерезиса и измерение параметров ферромагнетика | 168.5 KB | |
Они способны сохранять намагниченность в отсутствие магнитного поля. Особенностью ферромагнетиков является сложная нелинейная зависимость между намагниченностью J и напряженностью магнитного поля H равносильно между вектором магнитной индукции В и напряженностью магнитного поля H. В действительности она является функцией напряженности поля Н и определяется как . Оно проявляется в том что при изменении намагничивающего поля Н магнитная индукция В в ферромагнетике отстает от внешнего магнитного поля Н. | |||
50052. | ЯВЛЕНИЕ САМОИНДУКЦИИ | 99 KB | |
Цель работы: ознакомиться с явлением самоиндукции; изучить зависимость постоянной времени электрической цепи состоящей из катушки индуктивности и омического сопротивления от величины сопротивления; определить величины индуктивности катушки и магнитной проницаемости сердечника соленоида. Найдём функциональную зависимость силы тока от времени. 12 Величину t=L R называют постоянной времени цепи которая равняется времени за которое при разрядке... | |||
50053. | Изучение команд меню Corel Draw10 | 117.5 KB | |
Команда предназначена для загрузки в активный документ векторного растрового или текстового файла. Существует возможность загрузки нескольких десятков форматов и этот набор охватывает большинство наиболее распространенных графических и текстовых форматов. Позволяет сохранить информацию активного документа в различных форматах векторных растровых и текстовых. Текстовая информация может быть экспортирована либо вся либо из текущей страницы при включенном режиме Export this pge only Экспортировать лишь текущую страницу. | |||