Лабораторная работа №10.  Использование функций при процедурном подходе в программировании на языке JavaScript

Цель лабораторной работы:

• ознакомление с способами создания HTML-страниц с использованием сценариев JavaScript;
• освоить основные возможности языка JavaScript;
• ознакомление с базовым синтаксисом языка  JavaScript;
• обучение навыкам работы с JavaScript на HTML-страницах;
• приобретение навыков создания HTML – документов с использованием JavaScript.

Учащиеся должны научиться:

• познакомиться со способами создания HTML-страниц с использованием сценариев JavaScript;
• познакомиться с базовым синтаксисом языка  JavaScript;
• работе с базовым синтаксисом, основными элементами JavaScript;
• работе с различными способами подключения JavaScript  при создании HTML -страницы;
• использованию JavaScript при создании HTML –страницы.

Программные средства: текстовый редактор Блокнот, различные Браузеры.

ВОПРОСЫ ДЛЯ САМОПОДГОТОВКИ

1. Базовые понятия JavaScript;
2. Элементы языка программирования JavaScript;
3. Функции;
4. Введение в Объектную Модель.

КРАТКИЕ ТЕОРЕТИЧЕСКИЕ СВЕДЕНИЯ

Функции

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

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

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

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

Пример 1. Простая функция: function simplefun(str)

{ document.write("<HR><P>" + str); }

Эта функция получает строку str как аргумент, добавляет некоторые HTML-признаки к ней с помощью оператора конкатенации и выводит результат в текущем документе с помощью метода write.

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

<SCRIPT language="JavaScript"> simplefun(”Вызвать функцию simplefun”); </SCRIPT>

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

Пример 2. Вычисляет факториал

function factorial(n)

{ if (n<=1) { return 1;}

else { result = (n * factorial(n-1)); return result;

}

}

for (x = 0; x < 5; x++) { document.write("<BR>", x, " factorial is ", factorial(x)); }

Результат:

0. factorial is 1
1. factorial is 1
2. factorial is 2
3. factorial is 6
4. factorial is 24
5. factorial is 120

Введение в Объектную Модель

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

В Объектной Модели браузера существуют два главных объекта:

• window - собственно окно просмотра,
• document - загруженная в это окно страница.

Чтобы увидеть это, следует загрузить в браузер какую-либо HTML-страницу и посмотреть на экран.

Все, что относится к браузеру: кнопки навигации, строка состояния, поле ввода адреса, меню и т.д. все это принадлежит объекту window.

Все, что относится к загруженной странице: графика, формы, ссылки, заголовок и т.д. - относится к объекту document.

Чтобы воспользоваться этими свойствами, получить к ним доступ, необходимо организовать ссылки на данные объекты. Например, чтобы записать что-либо в строку состояния нужно обратится к соответствующему объекту status:

window.status = “Запись в строке состояния”;

Объектная модель состоит из совокупности объектов, свойств, методов и событий.

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

Свойства возвращают информацию о данном объекте. Например, через свойство объекта location можно узнать, какая страница загружена.

С помощью методов объекты выполняют возложенные на них функции. Например, методы объекта window позволяют открывать новые окна.

Посредством событий объекты сообщают о каких-либо произошедших действиях. Например, событие для кнопки формы onClick сообщает, что кнопка была нажата.

Объект window

К объекту window относится открытое окно браузера. Объект window является главным объектом объектной модели браузера, - все остальные объекты являются дочерними объектами объекта window.

Свойства window представлены в таблице 2:

Свойства window.

       Таблица 2

Методы window

• open С помощью метода open() открываются новые окна просмотра.

Синтаксис:

Значения свойства Установки нового окна (WindowFeatures) приведены в таблице 3.

Значения свойства (WindowFeatures)        Таблица3.

Самый простой способ открыть окно, это применение метода open без параметров. Нужно просто указать адрес открываемой страницы:

function Open_Window() { window.open("New.htm"); }

В результате на экране появится новое окно, размер которого зависит от настроек используемого браузера.

Можно задать параметры явно:

function Open_Window()

{ window.open("New.htm","My_Win","toolbar=yes,height=200,width=600"); }

• close Закрывает текущее окно просмотра.

Пример 3.

<SCRIPT language="JavaScript">

function close_window() { close(); }

</ SCRIPT >

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

• alert  Выводит на экран окно сообщения.

Синтаксис: alert (текст окна сообщения)

• confirm Выводит окно подтверждения.

Синтаксис: confirm (текст окна подтверждения)

• prompt Выводит окно ввода.

Синтаксис: prompt (текст окна ввода, начальное значение поля ввода)

Например, prompt (“Введите ваше имя”, “Вводите сюда”);

• setTimeout Выполняет заданное выражение по истечении установленного времени (в миллисекундах).

Синтаксис: setTimeout(expression, msec)

где expression - выражение, msec - задержка в миллисекундах.

Объект location

Объект location содержит информацию об адресе страницы (URL) и позволяет управлять им.

• Свойство href объекта location содержит адрес страницы: alert(“Данная страница находится по адресу: “ + location.href);
• С помощью метода reload объекта location загруженная страница может быть обновлена. Эффект тот же, что и при нажатии кнопки Обновить.

Пример 4.

<SCRIPT language="JavaScript"> if (confirm(“Обновить страницу?”))

{ location.reload();        //обновляем страницу:

alert(“Cтраница обновлена”);

}

else { alert(“Cтраница не обновлена!”); }

</SCRIPT >

Объекты Array

JavaScript не имеет типа данных, определяющих массив (array). Однако, можно использовать встроенный объект Array и его методы и работать с массивами в приложениях. Объект Array имеет методы для соединения, перевертывания и сортировки массивов. У него есть свойство для определения длины массива.

Создание массивов возможно двумя способами:

1. arrayObjectName = new Array([arrayLength]);
2. arrayObjectName = new Array([element0, element1, ..., elementn]);

аrrayObjectName является или названием нового объекта, или свойством существующего объекта, аrrayLength - начальная длина объекта. Можно получить доступ к этому значению используя свойство length; elementO, element1,..., elementn - список значений для элементов массива, если использована вторая форма инициализации массива, его длина определяется количеством аргументов.

Объект Array имеет следующие методы:

• join связывает все элементы массива в строку;
• reverse переворачивает элементы массива: первый элемент становится последним и наоборот;
• sort сортирует элементы массива.

Пример 5.

 Предположим, что мы определяем следующий массив:

 myArray = new Array("Один","Два","Три");

1. myArray.join() возвратит "Один,Два,Три";
2. myArray.reverse преобразует массив так, что myArray[0] есть"Три", myArray[1] есть "Два", и myArray[2] есть "Один".
3. myArray.sort сортирует элементы массива в лексикографическом порядке, так что myArray[0] есть "Два", myArray[1] есть "Один", и myArray[2] есть "Три".

Элементы массива можно определять с помощью оператора присваивания, например:

emp[1] = "Раз"; emp[2] = "Два"; emp[3] = "Три";

Допускается инициализация массива: myArray = new Array("Hello", myVar, 3.14159);

Пример 6. Создаем двумерный массив и выводим на экран.

 a = new Array(4);

for (i=0; i < 4; i++) { a[i] = new Array(4);

for (j=0; j < 4; j++) { a[i][j] = "["+i+","+j+"]"; }

}

for (i=0; i < 4; i++) { str = "Row "+i+":";

for (j=0; j < 4; j++) { str += a[i][j]; } document.write(str,"<P>");

}

В результате будет напечатано:

Row 0:[0,0][0,1][0,2][0,3]

Row 1:[1,0][1,1][1,2][1,3]

Row 2:[2,0][2,1][2,2][2,3]

Row 3:[3,0][3,1][3,2][3,3]

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

Например, для массива myArray = new Array(”Один”,”Два”,”Три”); обращение к первому элементу возможно как myArray [0] или myArray ["Один"].

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

Свойства цвета.        Таблица 7

Пример 7

<SCRIPT> function Change_bgcolor()

{ var Ccolor = prompt( "Введите новый цвет для фона страницы:", ""); document.bgColor = Ccolor;

}

</ SCRIPT >

При запуске данного сценария можно ввести значение цвета RGB-кодом, или его английским названием, например, green.

Методы объекта document (табл. 8) используются для работы с самим содержанием документа, для его изменения и редактирования.

       Методы объекта document.        Таблица 8.

• open Открывает HTML-документ для записи.

Чтобы в документ что-либо записать, его нужно сначала открыть методом open(). Нельзя путать данный метод, с методом open() объекта window. Метод window.open() служит для открытия нового окна просмотра и может быть записан просто open(), а данный метод служит для открытия документа для записи и, чтобы было ясно, что это метод document, нужно обязательно ссылаться на него:

document.open();

• write Позволяет записывать данные в документ.

Пример 8:

<HTML>

<HEAD><TITLE>Использование метода write()</TITLE >

</HEAD >

<BODY>

<SCRIPT>

document.write(“Эта надпись будет видна только в браузерах,<br>

поддерживающих JavaScript.”);

</SCRIPT>

</BODY >

</HTML>

Как видно из примера, при помощи write() можно вставлять также тэги HTML. Вместе с методом write() существует также метод writeln(), который отличается тем, что в конце записываемой строки он автоматически добавляет в конце строки переход на новую строку. Эта разница практически незаметна, кроме нескольких случаев.

Пример 9:

Использование методов объекта document в элементе <PRE>, где сохраняется разбиение на строки:

• close Метод close() закрывает открытую методом open() страницу. Как и метод open(), не следует данный метод смешивать с методом close() объекта window. Нужно всегда перед ним ставить ссылку на объект document: document.close(); так как иначе закроется все окно.
• clear Метод clear, применяется для очистки содержимого страницы, т.е. для удаления всего кода HTML. Для его использования необходимо сначала открыть страницу методом document.open(), а затем закрыть методом document.close().

Пример 10.

<SCRIPT>

function clear_doc()

{ if (confirm(“Очистить документ?”))

{ document.open(); //открываем документ для редактирования document.clear(); //очищаем документ document.close(); //закрываем его

}

}

</SCRIPT>

Задания

1. Написать функции, в которых использовались бы математические функции. Результат вычислений вывести в строку состояния.
2. Написать функции с использованием массивов Array.
3. Создать кнопку, выводящую сообщение с url изображения, загруженного на странице.
4. Выдать окно запроса имени пользователя и вывести его в строку состояния.
5. Вывести заголовок загруженного документа.
6. Задать цвет фона для документа.
7. Задать цвет текста для документа.
8. Задать цвет гиперссылок в документе.
9. Осуществить переход по гиперссылке при нажатии соответствующей кнопки