Файловый архив студентов. Файловый архив студентов.
1264 вуза, 4629 предмета.
/ Регистрация
FAQ Обратная связь Вопросы и предложения
Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Московский государственный университет приборостроения и информатики
Предмет:
[НЕСОРТИРОВАННОЕ]
Файл:
Язык программирования javascript 16.02.12.doc
Скачиваний:
7
Добавлен:
31.08.2019
Размер:
2.86 Mб
Скачать
☆
►Содержание►

Динамическое изменение страницы

В качестве простого примера динамически изменяющейся страницы приведем следующий код, который информирует о времени загрузки документа в браузер и в зависимости от этого времени отображает либо подбадривающее сообщение "Еще не вечер!", либо если уже поздно, то сообщение о том, что пора идти на покой— "Пора гасить свечи!". В последнем случае экран постепенно темнеет, пока не станет черным. После чего на экране появится сообщение: «Спокойной ночи»

<HTML>

<HEAD>

<Title>Динамическое изменение содержимого</Title>

<SCRIPT language=javascript>

function fade(beginRed, beginGreen, beginBlue, endRed, endGreen, endBlue, delay){

for(var i = 1; i<= delay-1; i++){

var endPercent = i/delay;

var beginPercent = 1 - endPercent;

document.bgColor = Math.floor(beginRed * beginPercent

+ endRed * endPercent) * 256

+ Math.floor(beginGreen * beginPercent

+ endGreen * endPercent) * 256 +

Math.floor(beginBlue * beginPercent

+ endBlue * endPercent );

}

}

now= new Date();

var time = now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();

document.write("<BODY bgcolor=yellow>");

document.write("<H2> Время загрузки документа: " + time + "</Н1>")

if ((now.getHours() <= 24)&&(now.getHours()>5))

document.write("<Н1>Еще не вечер!</Н1>");

else

{

document.write(" <Н1>Пора гасить свечи!</Н1>");

fade(0,255, 255, 0, 0, 0,1000) ;

document.close();

document.write("<BODY bgcolor=black>");

document.write("<FONT color=white>");

document.write("<Н1>Спокойной ночи!</Н1>");

}

</SCRIPT>

</Head>

</Html>

Прокручивание документа

Приводимый ниже код демонстрирует, как можно автоматически прокручивать документ. При загрузке документа в браузер включается таймер, которыи каждую 0,1 секунды прокручивает документ вниз на 10 пикселов. Процесс прокрутки и работа таймера продолжаются, пока не будет достигнут конец документа. Для проверки, что весь документ был прокручен, используются свойства объекта body, приведенные в таблице

Свойство

Описание

scrollTop, scrollLeft

Текущая координата верхнего левого угла той части документа, которая отображается в окне браузера

clientHeight, clientwidth

Высота и ширина окна браузера, в котором выводится документ

scrollHeight, scroliwidth

Высота и ширина документа

Списки и таблицы

Списки и таблицы являются наиболее удобными средствами форматирования Web-страницы. Рассмотрим эти средства .

Списки

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

<LI>..Как правило парный тег. Определяет элемент в маркированном и упорядоченном списке. Используется совместно с парными тегами <ul> и <ol>.

Синтаксис:

<L1

class=classname

id=value

1апд=1алдиаде

language=javascript I jscript I vbscript I vbs

style=cssl-properties

title=text

type=l j a I a | i | i

value=value

event = script >

Приведем описание наиболее часто используемых атрибутов.

  • type — задает тип нумерации упорядоченного списка и тип маркера маркированного списка. Допустимые значения: А (прописные буквы), а (строчные буквы), I (прописные римские числа), i (строчные римские числа), 1 (числа);

  • value — начальный номер

<UL>, <OL> Текст, помещенный в пару тегов <UL> ... </UL>, образует мар­кированный список, а в пару тегов <0L> . . . </0L>, — нумеро­ванный список. Элементы списка размещаются между парами тегов <ы> . . . </ы>.

Синтаксис этих тегов в основном один и тот же, поэтому приведем синтаксис только для упорядоченного списка:

<OL

class=classname

id=value

lang=language

language=javascript | jscript | vbscript | vbs

start=n

style=cssl-properties

title=text

type=l | a | A | i | I

event = script >

Допустимо вложение как однотипных, так и разнотипных списков. Например,

<HEAD>

<TITLE>Пример списков</TITLE>

</HEAD>

<BODY>

<UL>

<L1>Зима

<OL>

<LI type=i>Декабрь</LI>

<LI type=i>Январь</LI>

<LI type=i>Февраль</LI>

</OL>

</LI>

<L1>Весна

<OL>

<LI value=4 type=i>MapT</LI>

<LI type=i>Aпpeль</LI>

<LI type=i>Maii</LI>

</OL>

</LI>

<LI></LI>

<LI>Лето

<OL>

<LI value=7 type=i>Июнь</LI>

<LI type=i>Июль</LI>

<LI type=i>ABrycт</LI>

</OL>

</LI>

</UL>

</BODY>

</HTML>

Список определений

<HTML>

<HEAD>

<TITLE>Список определений</TITLE>

</HEAD>

<BODY>

<DL>

<DT>A

<DL>

<DT><A>

<DD>Задает закладки и гиперссылки в документе

<DT><ADDRESS>

<DD>Служит для идентификации автора документа </DL>

<DT>B

<DL>

<DT><B>

<DD>Полужирныи шрифт

<DT><BASE>

<DD>Задание базового URL для относительных URL в документе

</DL>

</DL>

</BODY>

</HTML>

Таблицы

Данные в документе можно форматировать не только с помощью списков, но и таблиц. Таблицы создаются посредством двойного тега <table>. Внутри этого тега располагаются парные теги, приведенные в табл.

Тег

Описание

<TR>

Строка таблицы. Таблица в HTML вводится по строкам, а каждая строка состоит из ячеек

<TH>

Ячейка заголовка. В ней текст выделен полужирным шрифтом и выровнен по центру

<TD>

Ячейка таблицы. В качестве содержимого ячейки может быть что угодно, от пустой ячейки до целой таблицы

<caption>

Заголовок таблицы

Синтаксис тега <table>:

<TABLE

align=center | left | right background= url bgcolor=color borders

bordercolor=color bordercolordark=color bordercolorlight=color cellpadding=n cellspacings class-сlassname cols=n

datapagesize=4n

datasrc=#id

frame = above | below | border | box | insides | lhs | rhs

void |vsides

id=value

lang=language

language=javascript | jscript I vbscript I vbs

rules=all | cols I groups | none | rows

style=cssl-properties

title=text

width=n

event = script

Приведем описание наиболее часто используемых атрибутов:

align — задает выравнивание таблицы; по умолчанию — по левому краю;

background — URL фонового изображения;

bgcolor, bordercolor, bordercolordark и bordercolorlight — цвет фона, рамки, тени рамки и ее подсветки (последние два атрибута используются совместно с атрибутом border);

border — толщина рамки в пикселах;

cellpadding — расстояние в пикселах между данными в ячейке и ее границами;

cellspacing — расстояние в пикселах по вертикали и горизонтали между ячейками;

cols — число столбцов в таблице;

frame — задает те части рамки таблицы, которые будут отображаться на экране. Допустимые значения: border (отображается вся рамка, используется по умолчанию), void (рамка без внешних границ), above (нет рамки в основании таблицы), below (нет рамки в верхней части таблицы), hsides (нет рамки по краям), ins (нет рамки с правого края), rhs (нет рамки с левого края), vsides (нет рамки в основании и в верхней части таблицы), box (отображается вся рамка);

height и width — высота и. ширина таблицы либо в пикселах, либо в процентах;

rules — задает внутренние разделительные линии, которые будут отображаться. Допустимые значения: попе (линии не отображаются), groups (отображаются горизонтальные линии между группами элементов в таблице), rows (отображаются горизонтальные линии), cols (отображаются вертикальные линии), all (отображаются все линии).

Синтаксис тега <caption>:

<Сaption

align=bottom | center I left ! right I top

class=classname

id=value

lanq=language

language=javascript | jscript | vbscript | vbs

style=cssl-properties

title=text

valign=bottom | top

event = script

Пример

<HTML>

<HEAD>

<TITLE>Телефоны и адреса электронной почты</TITLE>

<STYLE>

CAPTION {color: yellow; font-family: 'Comic Sans MS1;

font-weight: bold; font-size:200%;}

TH{color: fuchsia; font-family: 'Comic Sans MS';

font-style: italic; font-size:110%;}

TD{color: black; font-family: Verdana; font-weight: bold;

font-size:100%;}

</STYLE>

</HEAD>

<BODY bgcolor =MediumSlateBlue background="images/shuna.jpg ">

<TABLE border=1 width="75%" background="images=Арбуз-100х100.jpg" bordercolor=brown>

<CAPTION valign=top> Телефоны и адреса электронной почты</CAPTION>

<TR>

<TH>Фамилия</TH>

<TH>Телефон</TH>

<TH>e-mail </TH>

</TR>

<TR>

<TD>Петров</TD>

<TD>345-45-56</TD>

<TD><A href="mailto: petrov@factor.ru">petrov@factor.ru</A></TD>

</TR>

<TR>

<TD>Сидоров</TD>

<TD>789-45-67</TD>

<TD><A href="mailto: Sidorov@mgupi.edu">Sidorov@mgupi.edu</A>

</TD>

</TR>

<TR>

<TD>Фeдоров</TD>

<TD>890-56-45</TD>

<TD><A href="mailto: AF@rambler.ru.">AF@rambler.ru</A></TD>

</TR>

</TABLE>

</BODY>

</HTML>

Текст

В документе допустимо изменение фрагментов текста в зависимости от действий пользователя. Для этих целей служат свойства соответствующего эле­мента документа, приведенные в табл.

Таблица Свойства элемента документа

Свойство

Описание

innerText

Изменяет текст, расположенный между парными тегами

outerText

Изменяет как текст, расположенный между парными тегами, так и сами теги

innerHTML

Изменяет HTML код, расположенный между парными тегами

outerHTML

Изменяет как HTML код, расположенный между парными тегами, так и сами теги

Продемонстрируем технику использования данных свойств на примере. В окне браузера отображается надпись: "Вы когда-нибудь бывали в Санкт Петербурге? Да".

В этой фразе слово "Да" имеет зеленый шрифт и желтый фон. При размещении курсора над словом "Да" он принимает вид руки. Щелчок же на данном слове приводит к тому, что оно изменяется на слово "Нет", но улже красного цвета. Щелчок по слову "Нет" восстановит status quo, т. е. на экрне не опять отобразится слово "Да" зеленого цвета

<HTML>

<HEAD>

<SCRIPT language=javascript>

function doClick() {

if (spaQuiry.innerText=="Heт")

{

spaQuiry.innerText="Дa";

spaQuiry.style.color="Green";

}

else

{

spaQuiry.innerText="Нет";

spaQuiry.style.color="Red";

}

}

</SCRIPT>

</HEAD>

<BODY size=5 onselectstart="javascript:return false;">

<H1> Вы когда-нибудь бывали в Санкт-Петербурге?

<SPAN style="cursor:hand; background:yellow; color:Green" id="spaQuiry" onclick="doClick()">

Да

</SPAN>

</H1>

</BODY>

</HTML>

Тег <INPUT>

Тег <INPUT> является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом <INPUT> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков.

Основной параметр тега <INPUT>, определяющий вид элемента — type. Он позволяет задавать следующие элементы формы:

текстовое поле (text),

поле с паролем (password),

переключатель (checkbox),

флажок (radiobutton),

скрытое поле (hidden),

кнопка (button),

кнопка для отправки формы (submit),

кнопка для очистки формы (reset),

поле для отправки файла (file) и кнопка с изображением (image).

Для каждого элемента существует свой список параметров, которые определяют его вид и характеристики.

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]
Помощь Обратная связь Вопросы и предложения Пользовательское соглашение Политика конфиденциальности