Часть 3

Изучение языка JavaScript.

Цель работы: Изучить основы языка программирования JavaScript на стороне клиента.

Теоретическая часть:

JavaScript — это язык программирования, предназначенный прежде всего для создания интерактивных HTML-страниц. Первая версия языка была разработана фирмой Netscape Communications в 1995 году. Обратите внимание, с языком Java, созданным фирмой Sun Microsystems, у JavaScript мало общего.

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

JavaScript — интерпретируемый язык. Это означает, что для исполнения программы не требуется предварительная компиляция (преобразование исходного текста программы в системо-зависимый машинный код). Текст программы интерпретируется, то есть анализируется и сразу же исполняется.

Приведем простейший пример HTML-страницы с программой на JavaScript:

<HTML><HEAD><TITLE>Заголовок страницы</TITLE> <SCRIPT language="JavaScript"> function click_func(){alert('Hello, world!');} </SCRIPT> </HEAD><BODY> <input type="button" value="Click me!" onClick="javascript:click_func();"> </BODY></HTML>

Создайте данную HTML-страницу и посмотрите как она работает.

Текст программы заключен между тегами <SCRIPT> и </SCRIPT>. Программа состоит из одной функции click_func(), которая, в свою очередь вызывает стандартную функцию alert с параметром "Hello, world!". Функция активизируется по событию onClick — нажатие на кнопку. Результатом выполнения программы является вывод на экран окна предупреждения с заданным текстом.

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

<HTML><HEAD><TITLE>Заголовок страницы</TITLE> <SCRIPT language="JavaScript"> function click_func(){document.write('Hello, world!');} </SCRIPT> </HEAD><BODY> <input type="button" value="Click me!" onClick="javascript:click_func();"> </BODY></HTML>

Создайте данную HTML-страницу и посмотрите как она работает.

Как вы заметили, вместо вызова функции alert производится вызов функции write объекта document. Эта функция выводит на экран текст, передаваемый в качестве параметра и стирает все, что содержалось на странице до ее вызова.

Объект document создается браузером в момент загрузки страницы. Необходимо отметить, что в JavaScript определена целая иерархия объектов, которые должен создавать браузер всякий раз при загрузке страницы или при открытии окна. Эти объекты доступны для использования разработчиками. Их использование сводится к вызову методов объекта или чтения/переопределения его свойств. Методы объекта вызываются так:

объект.метод([параметры])

Вспомните, так было для объекта document, когда мы вызывали его метод write.

Доступ к свойствам осуществляется по той же схеме:

объект.свойство.

Например, document.location будет содержать строку с адресом страницы.

Разберем, как пользоваться подобными свойствами в программе. Рассмотрим пример:

<title>Тестируем JavaScript</title><SCRIPT LANGUAGE="JavaScript">var bgc = document.bgColor;var fgc = document.fgColor;var lc = document.linkColor;var al = document.alinkColor;var vlc = document.vlinkColor;var url = document.location;var ref = document.referrer;var t = document.title;var lm = document.lastModified; document.write("Цвет фона этой страницы: " + bgc);document.write("<br>Цвет текста этой страницы: " + fgc);document.write("<br>Цвет ссылок этой страницы: " + lc);document.write("<br>Цвет активных ссылок: " + al);document.write("<br>Цвет посещенных ссылок: " + vlc);document.write("<br>URL этой страницы: " + url);document.write("<br>До этого вы были на странице: " + ref);document.write("<br>Заголовок этой страницы: " + t);document.write("<br>Последние изменения внесены: " + lm)</SCRIPT>

Создайте данную HTML-страницу и посмотрите на работу этого скрипта.

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

В терминах объектов JavaScript эти взаимоотношения могли бы быть выражены следующим образом:

средстваПередвижения.наземныйТранспорт.велосипед.педаль

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

Проиллюстрируем иерархию объектов:

Используя иерархию объектов, попробуем вывести в статус-панель адрес первой ссылки на текущей странице. Статус-панель находиться в самом низу вашего обозревателя:

Если эта панель скрыта, вы можете подключить ее: меню View > Status Bar.

При нажатии на в статус-панели должен появиться адрес первой ссылки на текущей странице.

Исходный текст выглядит так:

Обратите внимание, что первую ссылку на странице мы нашли в массиве links под номером 0. К самому массиву доступ был получен перечислением всех объектов иерархии текущего документа window.document.links. Адрес, относящийся к ссылке, хранится в свойстве href объекта link, в нашем случае это links[0].

Ход работы:

Объявление функций.

С помощью текстового редактора "Блокнот" (Notepad) создайте страницу testjs.html и поместите в начало страницы следующий код:

2. <html>3. <head>4. <title>Script test</title>5. </head>6. <body>7. <script language="JavaScript">8. 9. document.write("Добро пожаловать на мою страницу!<br>");10.document.write("Это JavaScript!<br>");11. 12.document.write("Добро пожаловать на мою страницу!<br>");13.document.write("Это JavaScript!<br>");14. 15.document.write("Добро пожаловать на мою страницу!<br>");16.document.write("Это JavaScript!<br>");17. 18.</script>19.</body>20.</html>

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

23.Добро пожаловать на мою страницу!24.Это JavaScript!

три раза. Наверняка вы заметили, что для получения необходимого результата определенная часть его кода была повторена три раза. Это неэффективно, поэтому попробуем оптимизировать код.

Определите функцию welcome_func(), которая будет выводить на экран строки:

26.Добро пожаловать на мою страницу!27.Это JavaScript!

Затем вызовите функцию несколько раз. Для этого вы можете использовать цикл:

29. 30.for(i=0; i<3; i++){31.welcome_func();32.}33.

Функции могут также использоваться в совместно с процедурами обработки событий. Рассмотрим пример. Создайте страницу testjs2.html, введите следующий код:

35.<html>36.<head>37. 38.<script language="JavaScript">39. 40.function calculation() {41.var x = 12;42.var y = 5;43. 44.var result = x + y;45. 46.window.status = result;47.}48. 49.</script>50. 51.</head>52.<body>53. 54.<form>55.<input type="edit" onFocus="calculation()">56.</form>57. 58.</body>59.</html>

В приведенном примере интрес представляют следующие нововведения:

var x = 12; — так в JavaScript объявляются переменные, тип переменной не дифференцируется — одинаково объявляются переменные типа double, integer, String и прочие;
window.status = result; — свойству window.status присваивается новое значение, в нашем случае это строка 17, эта строка будет отображена в статус-панели браузера.
onFocus — это команда, которая вызывает действие, когда пользователь "фокусируется" на элементе страницы, в нашем случае — помещает курсор в текстовое поле.

Сохраните файл.
Для просмотра созданной Web-страницы используйте браузер Microsoft Internet Explorer.
Вы должны увидеть Web-страницу с определенным в ее верхней части окном редактирования, установка курсора в этом окне приведет к появлению строки 17 в статус-панели браузера.
На этой же странице создайте функцию, которая будет вызываться при потере фокуса полем редактирования и помещать в статус-панель результат, полученный от разности чисел x и y. Обработчику события "потеря фокуса" в JavaScript соответствует параметр onBlur.
Продемонстрируйте полученный документ преподавателю.

Манипуляция объектами.

Сохраните на жестком диске своего компьютера файлы aircraft1.jpg и aircraft2.jpg.
Создайте с помошью текстового редактора "Блокнот" (Notepad) файл testjs3.html и поместите в начало страницы следующий код:

3. <IMG NAME="aircraft" SRC="aircraft1.jpg">

В своем скрипте вы можете назначать этому объекту новое изображение:

document.images["aircraft"].src='new_image.jpg'

Обратите внимание, что к интересующему нас объекту Image в массиве images мы обращаемся не по порядковому номеру, а по имени элемента images["aircraft"]. Более того, если имя объекта на странице оригинально, мы можем обратиться к нему напрямую, минуя упоминание массива:

document.aircraft.src='new_image.jpg'

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

5. <IMG NAME="aircraft" SRC="aircraft1.jpg">6. <script language="JavaScript">7. document.aircraft.src='aircraft2.jpg';8. </script>

Попробуйте просмотреть страницу в браузере — сразу же после загрузки документа картинка aircraft1.jpg должна замениться на aircraft2.jpg.
Эффект происходит очень быстро и заметить его сложно. Модифицируем страницу таким образом, чтобы рисунки замещались при наведении курсора мыши на рисунок:

11.<IMG NAME="aircraft" SRC="aircraft1.jpg" onMouseOver="onOver();">12. 13.<script language="JavaScript">14.function onOver(){15.document.images["aircraft"].src='aircraft2.jpg';16.}17.</script>

Попробуйте просмотреть страницу в браузере — картинка aircraft1.jpg заменяется на aircraft2.jpg при наведении указателя мыши на изображение.
Добавьте обработчик события onMouseOut — удаление указателя мыши с поверхности изображения. Пусть по этому событию активным становится рисунок aircraft1.jpg.
Скачайте и сохраните на своей машине файл aircraft3.jpg.
Добавьте обработчик события onMouseDown — нажатие мыши. Пусть при клике на изображении активным рисунком становится aircraft3.jpg
Сохраните файл.

Управление объектами формы.

Форма (form) — это контейнер html-страницы, в котором могут быть размещены элементы, позволяющие пользователю вводить данные для отправки на сервер. К таким элементам можно отнести тектстовые поля, списки, кнопки выбора и т.п.
С помощью текстового редактора "Блокнот" (Notepad) создайте страницу testform.html и поместите на странице следующий код:

3. <head>4. <title>Управление объектами формы</title>5. </head>6. <body bgcolor=#ffffff>7. 8. <img src="aircraft1.jpg" name="pic1">9. 10.<p>11. 12.<form name="myForm">13.Ваше имя: 14.<br>15.<input type="text" name="name" value=""><br>16.e-mail:17.<br>18.<input type="text" name="email" value=""><br><br>19.<br>20.<input type="button" value="Нажмите!" name="myButton">21.</form>22. 23.<p>24.<img src="aircraft2.jpg" name="pic2">25. 26.<p>27.<a href="http://www.tpu.ru/">Томский Политехнический Университет</a>28. 29.</body>30.</html>

Вот так должна выглядеть Ваша страница:

На странице размещено два рисунка, одна ссылка и форма с двумя полями для ввода текста и одной кнопкой. Как уже отмечалось выше, с точки зрения языка JavaScript, загруженная в настоящий момент html-страница, представляет собой объект document. Через этот объект можно получить доступ ко всем элементам, размещенным на странице. На следующем рисунке иллюстрируется иерархия объектов, создаемая HTML-страницей, приведенной в примере:

Создадим скрипт, который позволит заполнять текстовые поля формы предопределенными значениями.
В разделе <head> ... </head> разместите следующий код:

35.<script>36.function fillIn(){37.document.forms[0].elements[0].value = "Евгений";38.document.forms[0].elements[1].value = "vest@list.ru";39.}40.</script>

Привяжите запуск функции к событию onClick кнопки "Нажмите!".
Сохраните страницу и просмотрите ее в окне браузера. При правильно работе скрипта по нажатию кнопки "Нажмите!" текстовые поля должны заполняться значениями.
Так как все элементы на странице имеют свои уникальные имена (обратите внимание на параметр name в каждом элементе), в скрипте их можно вызывать не по индексам, а по именам в соответствующих массивах:

44.<script>45.function fillIn(){46.document.forms['myForm'].elements['name'].value = "Евгений";47.document.forms['myForm'].elements['email'].value = "vest@list.ru";48.}49.</script>

или даже так:

Продемонстрируйте полученный документ преподавателю.

<49 50 51 52 535455 >

Дата добавления: 2015-02-10; просмотров: 817;