Добавил:
ivanov666
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Предмет:
Файл:Задачи и упражнения по JavaScript. Учебное пособие
.pdf
Target указывается место, куда будет загружаться до-
кумент. Имеет несколько зарезервированных значений:
blank – документ будет загружен в новом окне
браузера;
self – документ будет загружен в тот фрейм, где
находится гиперссылка;
top – документ будет загружен поверх всех фреймов. Если нужно загрузить документ во фрейм с
именем;
chapter, значением атрибута будет имя этого
фрейма.
Лабораторная работа
Задание 1. Записать код на языке HTML, создающий доку-
мент со следующей фреймовой структурой.
Пример 1
21
Пример 2
Пример 3
Пример 4
22
Задание 2. Записать код на языке HTML, создающий доку-
мент со следующей фреймовой структурой с возможностью
загрузки в нижнее правое окно других Web-страниц.
Окно разделено на три прямоугольные области. В верхней части окна находится заголовок. В нижней части окна расположены панель навигации (слева) и основная часть документа (справа). При переходе по ссылкам содержимое основной части меняется, а остальные остаются неизменными.
Задание 3.
щий документ.
Записать код на языке HTML, создающий следую-
23
1.8. Создание и обработка форм
Формы предназначены для пересылки данных от пользователя к Web-серверу.
Парный тег Form добавляет форму в HTML-документ.
Внутри этой пары тегов могут располагаться теги Input,
Textarea и Select.
Тэг Input имеет следующие атрибуты:
Type – указывает тип органа управления, его значени-
ями являются:
text – однострочное поле для ввода текстовой информации;
textarea – многострочное поле для ввода текстовой
информации;
password – поле для ввода пароля, который не
отображается на экране;
checkbox – независимый переключатель;
radio – переключатель используется для выбора
одного значения из нескольких;
file – для выбора и передачи файла;
button – кнопка с заданной подписью;
submit – кнопка, предназначенная для посылки
данных из заполненной формы Web-серверу;
image – имеет такое же назначение, что и параметр
submit, но в виде изображения;
hidden – скрытое поле, не отображается на экране,
но может быть передано серверу.
Для ввода многострочного текста лучше воспользоваться парным тэгом Textarea. Он имеет следующие атрибуты:
Name – указывает имя многострочного поля, посыла-
ется программе обработки формы;
Rows – указывает размер поля по вертикали (в стро-
ках);
Cols – указывает размер поля по горизонтали (в сим-
волах).
24
С помощью парного тэга Select можно указать в форме на
Web-странице заранее проинициализированный список произвольных текстовых строк. Он имеет следующие атрибуты:
Name – указывает имя списка, которое вместе с вы-
бранной строкой передается серверу;
Size – указывает число строк списка, отображаемых
на экране, остальные свернуты и для появления на
экране требуют прокрутки списка;
Multiple – указывает на то, что могут быть отмечены
и переданы на сервер не одна строка, а все отмечен-
ные.
Каждая строка списка внутри тега Select задается с помощью
тэга Option, который содержит следующие параметры:
Selected – отмечает первоначально выбранную строку;
Value – задает значение выбранной строки.
Лабораторная работа
Задание 1. Обработка формы
Поле ввода однострочного текста
(text)
Поле ввода пароля (password)
Строка текста
***
Поле ввода многострочного текста (textarea)
Независимые переключатели
(checkbox)
Зависимые переключатели (radio)
Выбор из списка (select)
25
1
2
3
Первый
Второй
Третий
Пример ¹1
Задание 2
Пример 1
Первая позиция
Вторая позиция
Третья позиция
Пример 2
Самолет
Поезд
Автомобиль
Автобус
OK Reset
Пример 3
Пол:
М Ж
Пример 4
Коротко о себе:
Молодой человек
Девушка
Отправ ить
Семейное положение
Социальный статус
26
Пример 5
Ваше имя:
Мужчина
Женщина
Детей
Страна
Украина
Россия
Другая
Электронный адрес:
Для подтверждения ввода нажмите на кнопку SUBMIT.
Для сброса введенных данных нажмите на кнопку RESET.
Submit Reset
27
Пример 6
Данные о пользователе
Имя:
Фамилия:
Отчество:
Укажите ваш пол:
Мужской
Женский
Анкета:
Как вы относитесь к тому, чтобы стать химиком:
Положительно, всегда хотел им стать
Безразлично, никогда не думал об этом серьезно
Отрицательно, меня с детства отталкивают мысли об этом
28
ГЛАВА 2
ОСНОВЫ JAVASCRIPT
2.1. Подключение JavaScript-кода
в HTML-документ
JavaScript – это язык программирования, позволяющий
сделать Web-страницу интерактивной, то есть реагирующей
на действия пользователя.
Программа на языке JavaScript, называемая скриптом
или сценарием, представляет последовательность инструкций
и выполняется интерпретатором, встроенным в обычный
Web-браузер.
Кстати, JavaScript никак не связан с языком JAVA, если
только названием и написанием нескольких конструкций, поэтому JavaScript – это один язык программирования, а Java –
это совсем другой. Почему его назвали именно JavaScript? Потому что в то время, когда разрабатывали JavaScript, был
сильно популярен язык Java, и поэтому разработчики
JavaScript решили переименовать свой язык LiveScript, так он
изначально назывался, в JavaScript.
JavaScript-код обычно встраивается напрямую в htmlфайл, хотя его можно сохранять в отдельном файле.
Расположение JavaScript внутри страницы
Напрямую в HTML-документ программа внедряется с
помощью парного тега
<script>
// здесь располагается JavaScript –код
</script>
Тегов <script> в одном HTML-документе может быть
сколько угодно.
29
Порядок выполнения Web-страницы, содержащей тег
script, следующий:
1. Интерпретатор отображает часть документа до script;
2. Встретив тег script, переключается в JavaScript-режим
и исполняет его содержимое;
3. Закончив выполнение скрипта, возвращается обратно
в HTML-режим и только тогда отображает оставшуюся часть
документа.
Пример 1 Отображает окно с сообщением
"I'm JavaScript!"
<html>
<body>
<script>
alert( "I'm JavaScript!" );
</script>
</body>
</html>
Расположение JavaScript в отдельном файле
Если JavaScript-кода много – его выносят в отдельный
файл, который подключается к HTML-файлу. Из внешнего
файла программа внедряется с помощью заданного атрибута
src тега <script>. Тег <script> поддерживает атрибут src, который определяет URL-адрес файла, содержащего JavaScriptкод. Используется он следующим образом:
<script src="../../scripts/myscript.js"></script>
Файл JavaScript-кода обычно имеет расширение .js и содержит
JavaScript-код в «чистом виде» без тегов <script> или любого
другого HTML-кода.
30
Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]