1. Основные положения
Язык обработки сценариев JavaScript не следует путать с языком Java. Во-первых, Java — это язык программирования, разработанный в Sun Microsystems, а JavaScript создан в Netscape Corporation. Оба языка представляют собой ООР (Object Orientated Programming). Главное отличие в том, что Java позволяет создавать совершенно самостоятельные программы - "Java-applets", которые могут запускаться с Web - страницы, но на самом деле это полностью независимые программы, хоть и маленькие. К тому же их нельзя просмотреть в виде текста. Для запуска апплета браузеру необходимо "транслировать" его в то, что называется "машинным языком".
Netscape как бы упростил Java до набора более простых команд. JavaScript не может существовать сам по себе, он должен находиться внутри Web - страницы, а Web - страницу необходимо просматривать в браузере, который понимает язык JavaScript (скажем, Netscape Navigator или Internet Explorer).
Итак, в отличие от Java-апплетов , загружаемых отдельно от HTML- документа, в котором они используются, программы, написанные на языке JavaScript, располагаются непосредственно в HTML- документах. Для этого используется специальный тег <SCRIPT> и парный ему </SCRIPT>. Обязательным атрибутом тега <SCRIPT> является атрибут LANGUAGE, который указывает на каком языке написана программа (в данном случае JavaScript). Обычно функции, составляющие программу, написанную на языке JavaScript, располагаются в секции <HEAD> HTML –документа. Вызов функции, реализованной на JavaScript, осуществляется из секции <BODY> В общем случае, структура HTML –документа с имеющимися в его составе функциями, написанными на JavaScript, имеет следующий вид:
<HTML>
<HEAD>
<TITLE> Пример_программы_на_ JavaScript </TITLE>
<SCRIPT LANGUAGE = “JavaScript” >
< ! - -
….
Функции на JavaScript
….
-- >
</SCRIPT>
</HEAD>
<BODY>
< ! - -
….
Текст HTML –документа и вызов функций на JavaScript
….
-- >
</BODY>
</HTML>
Основным элементом языка JavaScript, как уже говорилось выше, является функция. Функция должна иметь уникальное имя и ее код должен быть заключен в фигурные скобки ( {и} ). Например, заголовок функции может быть представлен в следующем виде:
Function showTime ( ) {
…
// функция выводит время на экран
…
}
В этом случаи вызов этой функции внутри HTML –документа будет иметь простой вид: showTime ( )
Функции являются основными единицами большинства скриптовых программ. В редких случаях можно обойтись без их использования - в этом случае последовательность действий на языке JavaScript указывается непосредственно в теле документа, т.е. блок <SCRIPT> … </SCRIPT> размещается внутри секции BODY.
Для удобства отладки Web - документов с JavaScript выберите в Internet Explorer пункт меню «Сервис» - «Свойства обозревателя» и закладку «Дополнительно» и установите флажок «Показывать уведомление о каждой ошибке сценария».
При выдаче браузером сообщения об обнаружении ошибки нажмите кнопку «Показать подробности» и Вы увидите № строки Web – документа (считаются сверху вниз, включая и пустые строки), № символа в строке, где обнаружена ошибка, а также сообщение о виде ошибки.
1. Объектная модель браузера в JavaScript
Объектная модель браузера в JavaScript - это набор связанных между собой объектов, обеспечивающих доступ к содержимому страницы и ряду функций браузера. В составе объектной модели могу быть три основных объекта - объект window, находящийся на вершине иерархии и представляющий собой текущее окно браузера; объект document - предназначен для программного представления самого документа и его содержимого. Последним в перечне основных объектов модели браузера является объект frames, предназначенный для работы с кадрами (фреймами) в окне браузера. В ходе выполнения заданий лабораторной работы используются основные объекты: window и document, свойства, методы и коллекции которых будут определены ниже. Будут затронуты и другие объекты названной модели браузера.
3.1. Методы объекта window
Методы, предоставляемые объектом window, позволяют управлять самим окном, а также выполнять ряд действий внутри него.
Для открытия нового или закрытия уже существующего окна используются методы open и close соответственно. Метод open имеет ряд дополнительных аргументов, которые позволяют задать местоположение окна, его размер и тип, а также указывают, должно ли окно иметь полосы прокрутки, полосу команд и т.п. Полный синтаксис метода open объекта window может быть представлен следующим образом:
New_Wnd = window.open (URL, name, features, replace),
где URL - адрес документа, отображаемого в новом окне; если адрес не задан, будет отображено пустое окно (необходимо указать: “about: blank”).
name - строка, задающая имя окна.
features - строка, задающая параметры нового окна (об этом речь пойдет ниже).
replace - указывает, замещает ли новое окно текущее в списке history или нет ( этот параметр можно и не указывать).
Все параметры окна задаются последовательностью значений, сгруппированной под единым обозначением “ features”. Наиболее важные из этих параметров могут быть прокомментированы следующим образом:
- fullscreen = (yes | no) - определяет, показывать окно на полный экран или как обычное окно;
- toolbar = (yes | no) - указывает, отображается ли полоса кнопок;
- location = (yes | no) - указывает, отображается ли полоса для ввода адреса;
- menubar = (yes | no) - указывает, отображается ли полоса меню;
- scrollbar = (yes| no) -задает отображение вертикальной и горизонтальной полос прокрутки;
- width = число - задает ширину окна в пикселях, минимум равен 100 ;
- heiqht = число - задает высоту окна в пикселях, минимум равен 100.
В качестве примера использования метода open объекта window приведено решение задачи возврата на вызывающую страницу из вызываемой, если в ее конце отображена кнопка (а не гиперссылка !!) возврата на первую страницу:
<HTML>
<HEAD>
<TITLE> Пример для объекта window </TITLE>
<Script LANGUAGE = "JavaScript" >
function ZAGR_ishod_okna() {
new_WND = window.open ( "2.htm", "w1", “height =300,width =300,toolbar = yes, scrollbar = yes, menubar = no")
}
</SCRIPT>
</HEAD>
<BODY>
….
Тело документа
….
<FORM>
<input TYPE = BUTTON VALUE = "Возврат на исходную страницу" OnClick = " ZAGR_ishod_okna() " >
</FORM>
</BODY>
</HTML>
В конце HTML- документа, загружаемого в окно браузера имеется кнопка “Возврат на исходную страницу”, которая реализована тегом <input> с атрибутом TYPE = BUTTON. Значение BUTTON специально введено и поддерживается браузером типа Internet Explorer 4.0 для расширения функций кнопок.
Событие OnClick определяет действие - вызов функции на JavaScript - в случае нажатия этой кнопки. Вызов функции приводит к открытию нового окна и загрузки в него требуемого документа h2.htm (документ должен находится в той же папке, что и вызывающий).
Кроме указанной возможности открывать и закрывать окна, объект window имеет еще ряд методов, позволяющих вводить информацию в программу и выводить ее на экран, печатая в Web – странице.
Язык JavaScript предоставляет два способа вывода информации. Объект window поддерживает один из них - метод alert, который позволяет отображать на экране клиентского браузера небольшие по размеру сообщения - эти сообщения появляются в диалоговой панели, содержащей кнопку OK (панель рассматривается в JavaScript как панель сообщений). Синтаксис метода alert объекта window следующий:
<SCRIPT LANGUAGE = “JavaScript” >
window.alert ( “Пример вывода сообщения ”)
</SCRIPT>
Второй способ вывода информации осуществляется методом write объекта document, о чем речь пойдет ниже.
Для ввода информации используются два стандартных метода объекта window - confirm u prompt.
Метод confirm отображает диалоговую панель, содержащую сообщение и две кнопки - ОК и Cancel. Нажатие кнопки ОК возвращает значение true, Cancel – false.
Фрагмент программы, приведенной ниже, поясняет синтаксис и назначение метода confirm:
<SCRIPT LANGUAGE = “JavaScript” >
if (confirm (“Хотите перейти по переписке?”))
document.write ( “Переход по гиперссылке ”)
else
document.write ( “Отмена перехода по гиперссылке ”)
</SCRIPT>
Второй метод, обеспечивающий ввод информации, является метод prompt. Он выводит диалоговую панель, содержащую текст, строку для ввода текста и кнопки ОК и Cancel. При нажатии кнопки ОК, метод prompt возвращает строку ввода. Общий формат метода prompt следующий:
prompt( “Текст над строкой ввода”, “Текст по умолчанию в строке ввода”)
Следующий пример пояснит использование метода prompt:
<SCRIPT LANGUAGE = “JavaScript” >
var s
s = prompt (“ Введите ваше имя ”, “Иванов Иван”)
document.write ( s )
</SCRIPT>
Наряду с методом open объекта window, для перехода к новой Web-странице может быть использован еще один элемент объектной модели браузера, предоставляемый языком JavaScript, - объект location.
Этот объект содержит информацию об URL-адресе текущей страницы и обеспечивает методы для перезагрузки страницы или загрузки новой страницы.
Для загрузки новой страницы в окно браузера используется или свойство href объекта location, или метод assign. В первом случае свойству присваивается новый URL, например:
window.location.href = “http://www.newsite.com”.
Несмотря на то, что в состав объектной модели браузера входит большое число элементов, их определение завершим рассмотрением еще одного объекта - document.
Объектная модель обеспечивает объект document и ряд дополнительных объектов и коллекций для программного представления самого документа и его содержимого. Из всех методов объекта document упомянем только метод write, выводящий указанный текст в окно браузера, и writeln, выводящий текст, в конце которого устанавливается символ “возврата каретки” (аналог тега <BR>). При этом метод writeln должен быть заключен между тегами <PRE>, </PRE>:
<PRE>
<SCRIPT LANGUAGE = “JavaScript” >
document.writeln ( “Первая строка ”)
document.writeln ( “Вторая строка”)
</SCRIPT>
</PRE>
Другие методы объекта document в рамках данной лабораторной работы использоваться не будут.
Наряду с методами объекта document при программировании сценариев на языке JavaScript используется понятие коллекции (массивы). Для доступа к информации, хранимой на HTML-странице, объект document предоставляет 12 коллекций, среди которых можно выделить следующее, как наиболее важные:
- applets - коллекция всех объектов, находящихся в документе;
- frames - коллекция всех фреймов (кадров), заданы тегами <frameset>;
- forms - коллекция всех форм в данном документе;
- links - коллекция всех ссылок;
- scripts - коллекция всех скриптовых программ, определенных в данном документе.
Каждая из коллекций имеет свойство lenght, определяющее число элементов в коллекции. Метод tags возвращает коллекцию, содержащую только указанные теги языка HTML. Это может быть использовано при поиске того или иного элемента в документе:
if (0 = = document.all.tags( “ H2”).lenght )
{
alert (“ В документе нет тегов <H2>”)
}
Первый элемент коллекции имеет номер 0, последний - lenght –1.
Кроме вышеназванных свойств в коллекциях (в частности в коллекции all ) имеется свойство, позволяющее получать не непосредственно теги, а их названия. Это относится в частности к тегу заголовков в документе <H#>. В результате использования свойства, которое идентифицируется как innerText, можно получать не просто коллекцию (список) тегов заголовков, а список самих названий этих заголовков. Это удобно для получения содержания всего документа по заголовкам в итоговом окне. Для создания такой коллекции нужно присвоить какой-либо переменной (которая является объектом) значения, получаемые при использовании метода tags:
K2 = document.all.tags (“H2”),
где “H2” - идентификатор стиля оформления заголовка.
После этого во вновь открытом пустом окне (“about:blank”) отображение содержания документа может быть осуществлено следующим способом:
WND.document.write (K2( i ).innerText, “<BR>”)
при изменении i в указанных выше пределах с помощью оператора цикла for. В этой записи WND является именем вновь создаваемого окна.
3.2. Встроенные объекты JavaScript
В рамках этой лабораторной работы из всех встроенных объектов JavaScript особое внимание будет уделено объектам Array, Date, String.
Язык JavaScript не имеет встроенного тега данных для создания массивов, поэтому для решения таких задач используется объект Array и его методы. При этом индексирование элементов в массиве начинается с 0 и т.д. Для создания конкретного массива используется конструктор new и после этого каждому элементу присваивается его значение:
AllStr = new Array (4);
AllStr [0] = 1;
AllStr [1] = 2;
AllStr [2] = 3;
AllStr [3] = 4;
AllStr [4] = 5;
Конструктор new в этом случае создал массив AllStr, состоящий из пяти элементов, а затем скрипт произвел заполнение массива.
Для объекта Array в языке JavaScript реализовано всего три метода:
- join - объединяет все элементы массива в одну строку;
- reverse - изменяет порядок элементов в массиве с первого на последний;
- sort - выполняет сортировку массива.
Говоря о массиве, следует указать обязательное для этого объекта свойство - lenght, определяющее длину массива (число его элементов).
Таким образом, для определенного выше массива оговоренные методы будут выглядеть следующим образом:
AllStr.join(); AllStr.reverse(); AllStr.sort().
Помимо методов join, reverse и sort объект Array в Microsoft Internet Explorer поддерживает методы concat и slice. Первый метод обеспечивает конкатенацию двух массивов. Следующий пример поясняет суть использования этого метода:
Var first = new Array (‘январь’, ‘февраль’)
Var second = new Array (‘март’, ‘апрель’)
Var full = new Array
full = first.concat (second)
Метод slice наоборот используется для получения части массива. При вызове метода указываются индексы начального и конечного элементов подмассивов (следует помнить, что нумерация элементов начинается с 0).
Пример, поясняющий использование этого метода приведен ниже:
Var first = new Array
Var second = new Array
// зимние месяцы
first = full.slice (0,1)
document.write ( first )
// весенние месяцы
second = full.slice (2,3)
document.write ( second ).
Значительно большим набором методов обладает объект Date, который используется для работы с датой и временем в скриптовых программах. Для создания экземпляра объекта Date также используется конструктор new:
Mydate = new date ( [параметры] )
Определение переменной Mydate может содержать некоторые параметры, однако неуказание никаких параметров приводит к тому, что переменная будет содержать текущую дату и время (т.е. указывается Mydate = new date ( )).
В этом случае экземпляру объекта типа Date присваивается значение года, месяца, дня, часов, минут и секунд. Большинство методов объекта Date направлено на то, чтобы выделить из полученной исходной последовательности типа даты требуемую информацию. Ниже в таблице приведено описание каждого из этих методов и диапазон значений, с их помощью достигаемый.
| Метод | Описание | Диапазон |
| GetDate | Возвращает день месяца как целое число | 1 - 31 |
| GetDay | Возвращает день недели как целое число | 0 ( воскресенье ) - 6 ( суббота ) |
| GetHours | Возвращает число часов как целое | 0 - 23 |
| GetMinutes | Возвращает минут часов как целое | 0 - 59 |
| GetMonth | Возвращает день месяца как целое число | 0 ( январь ) - 11 ( декабрь ) |
| GetSeconds | Возвращает число секунд как целое | 0 - 59 |
| GetYear | Возвращает две последние цифры года | - |
<HTML>
<HEAD>
<TITLE> Пример_использования_объекта_Date </TITLE>
<SCRIPT LANGUAGE = “JavaScript” >
function show_Time () {
var now = new Date ()
var s
// определение числа
s = now.getDate ()
document.write ( ‘текущее число ’ + s )
// определение месяца
s = now.getMonth ()
document.write ( ‘ текущий месяц ’ + s )
// определение года
s = now.getYear ()
document.write ( ‘ текущий год ’ + s )
}
</SCRIPT>
<IHEAD>
<BODY>
<SCRIPT LANGUAGE = “JavaScript” >
show_Time ()
</SCRIPT>
</BODY>
</HTML>
В том случае, если на Web-странице необходимо отобразить не просто число, характеризующее месяц или день недели, а название того и другого, то для этого создаются специальные массивы имен дней недели и месяцев и из них осуществляется выбор содержимого по индексу, определяемому тем или иным методом объекта Date, например,
mNames [now.getMonth () ], где mNames - массив имен месяцев.
Последний из встроенных объектов, рассматриваемых в рамках лабораторной работы - объект String. С помощью этого объекта возможно изменять шрифты символьных строк так, как это необходимо пользователю. Ниже приведены некоторые методы этого объекта, позволяющие изменять шрифты строк:
- bolds - полужирный шрифт;
- italic - курсив;
- fixed - “обычный” шрифт;
- sub - нижний индекс;
- sup - верхний индекс;
- strike – перечеркнутый шрифт.
Данный объект имеет также ряд других методов, подробно останавливаться на которых не будем.
В заключении приведем текст программы, включающий функции на JavaScript, которые позволяют открыть новый документ в новом окне, вывести содержание документа (при условии, что все заголовки сформированы тегом стиля <H2>), а также представить текущую дату в требуемой форме.
<HTML>
<HEAD>
<TITLE> Пример_программы_с_функциями_ JavaScript </TITLE>
<SCRIPT LANGUAGE = "JavaScript" >
// функция, определяющая содержание документа
function SODERG_DOC ( ) {
WND1 = window.open ("about: blank")
<!-- открытие пустого окна, в котором отображается содержание //-->
// формирование коллекции заголовков
for (i=0; i< K2.length; i++)
{WND1. document.write ( K2 ( i ).innerText, "<BR>" )
// печать элементов коллекции - заголовков
}
}
</SCRIPT>
<SCRIPT LANGUAGE = "JavaScript" >
<!-- функция, открывающая новое окно и загружающая в него документ //-->
function new_window ( ) {
WND2 = window.open ("DOC2.HTML - документ", “win2”, "height =300,widht =300,fullscreen = no, toolbar = no, csrollbar =yes, menubar =yes" )
}
</SCRIPT>
</HEAD>
<BODY>
<H2> Форма для выполнения заказов на покупки через Internet </H2> < BR >
// скрипт, выводящий текущую дату в требуемой форме
<SCRIPT LANGUAGE = "JavaScript" >
new_DATA = new Date ( )
// определение текущего месяца
s1 = new_DATA.getMonth ( )
s1 += 1
s = "Вы делаете заказ"
s += new_DATA.getDate ( ) + " . "
s += s1 + " . "
s += new_DATA.getYear ( )
</SCRIPT>
Текст документа HTML
<!-- определение кнопок перехода к другому документу и вывода в окно содержания этой страницы //-->
<FORM>
<input TYPE = "BUTTON" VALUE = "Открыть документ" OnClick = " new_window ( ) " >
<input TYPE = "BUTTON" VALUE = "Содержание доку-мента" OnClick = " SODERG_DOC ( ) " >
</FORM>
</BODY> </HTML>
0 коммент.:
Отправить комментарий