Создание динамических WEB-страниц c помощью языка JavaScript
Создание динамически изменяющиеся HTML-документов с использованием языка сценариев JavaScript. Генерация HTML-документа при загрузке WEB-страницы, обработка событий, настройка WEB-страниц, включение динамических компонентов на WEB-страницу, проверка форм.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | реферат |
| Язык | русский |
| Дата добавления | 16.07.2017 |
| Размер файла | 3,6 M |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
2.16 Слайд-шоу
В следующем примере 2.17 пользователь щелкает по ссылке и переходит к следующей картинке (рис.2.17). Для этого используются команда If и переменная num.
Разобьем скрипт на две части:
<SCRIPT LANGUAGE="javascript"> var num=1 img1 = new Image () img1.src = "leo.gif" img2 = new Image () img2.src = "dino.gif" img3 = new Image () img3.src = "rhino.gif"
o Вот кое-что новое: num=1 не находится внутри функции. Да и вообще ни одна команда не находится внутри функции. num - это переменная. Указывая ее в начале скрипта вне функции, мы делаем ее глобальной переменной, то есть доступной для любой функции.
o img1 = new Image() объявляет новый объект image (рисунок). img1.src= источник объекта, файл, в котором хранится картинка. Это стандартная схема. img1 хранится в leo.gif ; img2 хранится в dino.gif.
o (В скобках) содержится информация о ширине и высоте рисунка. Это не обязательно, но желательно.
o Рисунки тоже доступны для любой функции. Таким образом, программа загружает рисунки в память компьютера. Пользователь не хочет ждать, пока каждая картинка будет загружаться с сервера.
Теперь вторая часть:
function slideshow() { num=num+1 if (num==4) {num=1} document.animal.src=eval("img"+num+".src") } </script> </head> <body>
o Первоначальное значение num равно 1. Это было еще в первом фрагменте. Когда пользователь щелкает по строчке текста, запускается функция slideshow.
o slideshow() прибавляет к num единицу. Когда num доходит до 4, то возвращается к 1. document.animal.src меняется на img плюс значение num и плюс .src. Например, если num = 1, то document.animal.src становится img1.src.
o Обратите внимание, что команда eval() преобразует img1.src в указание на источник изображения. Без нее это был бы простой набор букв.
И наконец:
<a href="JavaScript:slideshow()">Щелкните, чтобы увидеть следующую картинку</a>
o Тут кое-что новенькое - вызывается не функция, а JavaScript. Так используются все части скрипта, а не только те, что стоят внутри функции. Если вы напишете функцию по обычной схеме, то у вас не будет рисунков, потому что они останутся за скобками.
2.17 Проверка данных, введенных в форму
В следующем примере 2.18 JavaScript проверит данные, которые ввел пользователь. Нужно будет ввести в форму свое имя и номер телефона из 7 или 9 знаков (ххххххх или ххх-хх-хх) (рис.2.18). Подтверждение данных часто имеет большое значение.
Этот пример возвращает нас к свойству length (длина) и показывает в действии два новых метода: indexOf(), charAt().
В скрипте две функции, validfn() и validphone(). Одна проверяет, введено ли имя, другая проверяет телефонный номер. Займемся первой:
function validfn(fnm) { fnlen=fnm.length if (fnlen == 0) {alert("Вы должны ввести свое имя") document.dataentry.fn.focus()} } ..... <body> ..... <INPUT TYPE="text" NAME="fn" onBlur="validfn(fn.value)">
o Функция validfn(fnm) вызывается обработчиком события onBlur. onBlur запускается, когда курсор переходит на следующий элемент, в данном случае, когда мы выходим из текстового поля fn. Этот обработчик мы уже ранее разбирали.
o Заметьте, что параметр fn.value передается из формы в функцию, где получает новое имя fnm. fn.value можно было бы обозначить как document.dataentry.fn.value, но раз мы находимся в документе и внутри формы, это не обязательно.
o Помните, содержимое поля формы передает команда имя_формы.value. Одного имени мало.
o Длине имени пользователя присвоена переменная fnlen. Таким образом, если пользователь введет имя Коля, значение fnlen будет равно 4.
o Если пользователь не вписал свое имя, значит, длина равна 0. Тогда программа вызывает окно с сообщением об ошибке, и ставит курсор или focus на прежнее место. Форма не столько проверяет, правильно ли вписано имя, сколько было ли что-нибудь вписано вообще.
Теперь посмотрим, как программа проверяет телефонный номер:
function validphone(phone) { len=phone.length digits="0123456789" if(len != 7 && len != 9) {alert("Неверное количество знаков в номере") document.dataentry.phone.focus()} for(i=0; i<3; i++) {if (digits.indexOf(phone.charAt(i))<0) {alert("Это должны быть цифры") document.dataentry.phone.focus() break} }
o Эта функция подлиннее, разберем ее шаг за шагом. Во-первых, длине телефонного номера присваивается переменная len. Переменная digits содержит все цифры.
o Потом команда If проверяет, равна ли длина номера 7 или 9 знакам, хотя и звучит это несколько неуклюже. Двойной знак && в Javascript означает «проверить оба свойства».
o Если условие не выполнено, программа говорит пользователю о том, что он ввел неверное количество цифр, и снова устанавливает курсор или focus в поле для ввода.
o for(i=0; i<3; i++) проверяет первые 3 цифры номера одну за другой.
o if (digits.indexOf(phone.charAt(i))<0) знакомит нас с двумя новыми методами: indexOf() и charAt().
o Посмотрим на phone.charAt(i). Предположим, телефонный номер 123, и i = 2. Знак на второй позиции - цифра 3. Помните, порядковые номера начинаем считать с нуля. Таким образом, phone.charAt(0) = 1, phone.charAt(1) = 2, a phone.charAt(2) = 3.
o indexOf -- это метод, дающий порядковый номер для заданного значения. При if (digits.indexOf(phone.charAt(i))<0), JavaScript ищет значение phone.charAt(i) в переменной digits.
Если телефонный номер 1234567 и i = 1, то программа ищет вторую цифру в переменной digits и находит ее, возвращая значение 1, так как digits = «0123456789».
Если номер телефона 12д и i = 2, программа ищет «д»; в переменной digits. Не найдя ее, она возвращает -1. Если значение = -1 (<0), тогда появляется окно с сообщением об ошибке и курсор или focus устанавливается на прежнее место. Для телефонного номера ххххххх так можно проверить все 7 цифр.
И последнее -- код HTML для формы:
Введите свое имя:<br> <INPUT TYPE="text" NAME="fn" onBlur="validfn(fn.value)"> <SCRIPT LANGUAGE="JavaScript"> document.dataentry.fn.focus() </SCRIPT> Введите номер телефона (ххх-хх-хх):<br> <INPUT TYPE="text" NAME="phone" SIZE=10> <INPUT TYPE="button" VALUE="Отправить" onClick="validphone(phone.value)">
Используя JavaScript с формами, давайте каждому элементу уникальное имя, которое потом будет обозначено в скрипте.
Задание:
Выполнить в контрольной работе те примеры из приведенных выше, которые соответствуют номеру варианта (Табл.3.1). Вариант равен порядковому номеру фамилии студента в журнале группы.
Таблица 3.1 - Варианты заданий
|
Вариант |
Примеры |
Вариант |
Примеры |
Вариант |
Примеры |
Вариант |
Примеры |
Вариант |
Примеры |
|
|
1 |
1.1, 2.1 |
6 |
1.2, 2.6 |
11 |
1.3, 2.11 |
16 |
1.1, 2.16 |
21 |
1.2, 2.11 |
|
|
2 |
1.1, 2.2 |
7 |
1.2, 2.7 |
12 |
1.3, 2.12 |
17 |
1.1, 2.17 |
22 |
1.2, 2.12 |
|
|
3 |
1.1, 2.3 |
8 |
1.2, 2.8 |
13 |
1.3, 2.13 |
18 |
1.1, 2.18 |
23 |
1.2, 2.13 |
|
|
4 |
1.1, 2.4 |
9 |
1.2, 2.9 |
14 |
1.3, 2.14 |
19 |
1.1, 2.6 |
24 |
1.2, 2.14 |
|
|
5 |
1.1, 2.5 |
10 |
1.2, 2.10 |
15 |
1.3, 2.15 |
20 |
1.1, 2.7 |
25 |
1.2, 2.15 |
Содержание отчета:
задание;
исходные тексты;
результаты работы.
Размещено на Allbest.ru
Подобные документы
Базовый синтаксис языка сценариев JavaScript. Создание страниц, включающих в себя программы, которые взаимодействуют с пользователем, управляют браузером и динамически создают HTML-содержимое. Работа с объектами, которые инкапсулируют данные и поведение.
лабораторная работа [58,6 K], добавлен 25.05.2016Создание web-страниц с использованием языка HTML. Работа с графикой в Adobe Photoshop и Flash CS. Создание динамических web-страниц с использованием JavaScript и PHP. Базы данных и PHP. Пример реализации "Эконометрической модели экономики России" под WEB.
презентация [432,3 K], добавлен 25.09.2013Создание web-страниц с использованием HTML. Работа с графикой в Adobe Photoshop и Flash. Создание динамических web-страниц с использованием JavaScript. Пример реализации "Эконометрической модели экономики России". Моделирование с использованием Powersim.
презентация [478,4 K], добавлен 25.09.2013Основы компьютерного моделирования с использованием Powersim и AnyLogic. Создание WEB страниц с использованием HTML. Работа с графикой в Adobe Photoshop и Flash CS. Создание динамических WEB страниц с использованием JavaScript и PHP. Базы данных и PHP.
лекция [1,1 M], добавлен 25.09.2013Введение в интернет-технологии и компьютерное моделирование. Создание WEB страниц с использованием HTML. Создание динамических WEB страниц с использованием JavaScript. Работа с графикой в Adobe Photoshop и Flash CS. Основы компьютерного моделирования.
презентация [223,4 K], добавлен 25.09.2013История html. Гипертекст. Структура web-страницы. Переход внутри одного документа. Переход к другому документу. Правила синтаксиса. Кодирование символов. Использование символов. Управление цветом. Конструктор документов. Способы определения таблиц стилей.
дипломная работа [911,3 K], добавлен 25.02.2005Характеристика принципов создания html-страниц и связывания их ссылками так, чтобы можно было произвольным образом переходить от одной страницы к другой. Применение тегов форматирования текста и заголовка окна. Этапы создания html-страницы с таблицей.
контрольная работа [16,0 K], добавлен 19.06.2014Знакомство с особенностями создания WEB-страниц с использованием HTML. Общая характеристика основ компьютерного моделирования с применением Powersim и AnyLogic. Анализ способов создания динамических WEB-страниц с использованием JavaScript и PHP.
презентация [801,7 K], добавлен 25.09.2013Язык маркировки гипертекстов HTML, основа создания web-страниц. История спецификаций, каскадные таблицы стилей CSS. Способы определения таблиц стилей (стилевого шаблона). Язык подготовки сценариев JavaScript, его использование. Программный код web сайта.
курсовая работа [26,9 K], добавлен 05.07.2009Преимущества использования Word при создании веб-страниц. Его публикация Word в библиотеке документов. Преобразование документа Word в веб-страницу. Функции HTML-конвертора Word97. Пересмотр документа Word и веб-страницы. Отображение закладок в документе.
реферат [23,6 K], добавлен 06.04.2010
