методичка. Практическая работа 1. Определение параметров сетевого соединения компьютера Введение

Название	Практическая работа 1. Определение параметров сетевого соединения компьютера Введение
Анкор	методичка.pdf
Дата	27.09.2018
Размер	1.46 Mb.
Формат файла
Имя файла	методичка.pdf
Тип	Практическая работа #25149

Создайте данную HTML-страницу и посмотрите на работу этого скрипта.
Иерархию объектов языка JavaScript можно сопоставить с иерархией объектов в реальном мире. Колеса, руль и педали — это все объекты, принадлежащие велосипеду. Велосипед представляет собой объект, принадлежащий к средствам наземного транспорта, которые, в свою очередь, принадлежат к более общей категории средств передвижения.
В терминах объектов JavaScript эти взаимоотношения могли бы быть выражены следующим образом:
средстваПередвижения.наземныйТранспорт.велосипед.педаль
Наиболее общий объект высшего уровня находится слева в выражении, и слева направо происходит переход к более частным объектам, являющимся при этом наследниками высших в иерархии объектов. Таким образом, чтобы обратиться к определенному свойству этих объектов, вы должны определить имя объекта и всех его предков.
Проиллюстрируем иерархию объектов: navigator window
|
+-- location
|
+-- history
|
+-- document
|
+-- forms
| |
| elements (
text fields
, textarea
, checkbox
, password
| radio
, select
, button
, submit
, reset
)
+-- links
|
+-- images
|
+-- anchors
Используя иерархию объектов, попробуем вывести в статус-панель адрес первой ссылки на текущей странице. Статус-панель находиться в самом низу вашего обозревателя:

Если эта панель скрыта, вы можете подключить ее: меню View > Status Bar.
При нажатии на в статус-панели должен появиться адрес первой ссылки на текущей странице.
Исходный текст выглядит так:

Обратите внимание, что первую ссылку на странице мы нашли в массиве links под номером 0. К самому массиву доступ был получен перечислением всех объектов иерархии текущего документа window.document.links. Адрес, относящийся к ссылке, хранится в свойстве href объекта link, в нашем случае это links[0].
Ход работы:
Объявление функций.
1.
С помощью текстового редактора "Блокнот" (Notepad) создайте страницу testjs.html и поместите в начало страницы следующий код:

Такой скрипт выведет на экран следующий текст:
Добро пожаловать на мою страницу!
Это JavaScript! три раза. Наверняка вы заметили, что для получения необходимого результата определенная часть его кода была повторена три раза. Это неэффективно, поэтому попробуем оптимизировать код.
3.
Определите функцию welcome_func(), которая будет выводить на экран строки:
Добро пожаловать на мою страницу!
Это JavaScript!
4.
Затем вызовите функцию несколько раз. Для этого вы можете использовать цикл:
for(i=0; i<3; i++){
welcome_func();
}
5.
Функции могут также использоваться в совместно с процедурами обработки событий.
Рассмотрим пример. Создайте страницу testjs2.html, введите следующий код:

onFocus — это команда, которая вызывает действие, когда пользователь "фокусируется" на элементе страницы, в нашем случае — помещает курсор в текстовое поле.
6.
Сохраните файл.
7.
Для просмотра созданной Web-страницы используйте браузер Microsoft Internet Explorer.
8.
Вы должны увидеть Web-страницу с определенным в ее верхней части окном редактирования, установка курсора в этом окне приведет к появлению строки 17 в статус- панели браузера.
9.
На этой же странице создайте функцию, которая будет вызываться при потере фокуса полем редактирования и помещать в статус-панель результат, полученный от разности чисел x и y. Обработчику события "потеря фокуса" в JavaScript соответствует параметр
onBlur.
10.
Продемонстрируйте полученный документ преподавателю.
Манипуляция объектами.
1.
Сохраните на жестком диске своего компьютера рисунки, например: aircraft1.jpg и aircraft2.jpg.
2.
Создайте с помошью текстового редактора "Блокнот" (Notepad) файл testjs3.html и поместите в начало страницы следующий код:
В своем скрипте вы можете назначать этому объекту новое изображение: document.images["aircraft"].src='new_image.jpg'
Обратите внимание, что к интересующему нас объекту Image в массиве images мы обращаемся не по порядковому номеру, а по имени элемента images["aircraft"]. Более того, если имя объекта на странице оригинально, мы можем обратиться к нему напрямую, минуя упоминание массива: document.aircraft.src='new_image.jpg'
3.
Попробуем заменить изображение динамически, используя JavaScript. Модифицируйте свою страницу. Исходный текст должен выглядеть так:

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

7.

8.
Попробуйте просмотреть страницу в браузере — картинка aircraft1.jpg заменяется на
aircraft2.jpg при наведении указателя мыши на изображение.
Добавьте обработчик события onMouseOut — удаление указателя мыши с поверхности изображения. Пусть по этому событию активным становится рисунок aircraft1.jpg.
9.
Скачайте и сохраните на своей машине файл aircraft3.jpg.
10.
Добавьте обработчик события onMouseDown — нажатие мыши. Пусть при клике на изображении активным рисунком становится aircraft3.jpg
11.
Сохраните файл.
Управление объектами формы.
Форма (form) — это контейнер html-страницы, в котором могут быть размещены элементы, позволяющие пользователю вводить данные для отправки на сервер. К таким элементам можно отнести тектстовые поля, списки, кнопки выбора и т.п.
С помощью текстового редактора "Блокнот" (Notepad) создайте страницу testform.html и поместите на странице следующий код:

Университет машиностроения

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

4.

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

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