Практическое введение в программирование на JavaScript




Практическое введение в программирование на JavaScript


    Введение
    Введение Язык гипертекстовой разметки HTML (HyperText Markup Language) был предложен Тимом Бернерсом-Ли в 1989 году в качестве одного из компонентов технологии разработки распределенной гипертекст...
    1. Принципы гипертекстовой разметки. Структура документов
    1. Принципы гипертекстовой разметки. Структура документов За основу модели разметки документов в HTML принята таговая модель. Таговая модель описывает документ как совокупность контейнеров, каждый...
    1.1. Группы тагов НТМL
    1.1. Группы тагов НТМL Все таги НТМL по их назначению и области действия можно разделить на следующие основные группы определяющие структуру документа; оформление блоков гипертекста (параграфы, сп...
    Пример 1.1
    Пример 1.1 HTML> HEAD> TITLE>Simple Document/TITLE> /HEAD> BODY text=#0000ff BACKGROUND=#f0f0f0 > H1>Пример простого документа/H1> HR> Формы HTML-документов UL> LI>Классическая LI>Фреймовая /UL> H...
    Рис. 1.1. Пример простого документа
    Рис. 1.1. Пример простого документа Компания Netscape Communication расширила классическую форму документа возможностью организации фреймов (кадров), позволяющих разделить рабочее окно программы п...
    Пример 1.2
    Пример 1.2 HTML> HEAD> TITLE>Frame Sample/TITLE> /HEAD> FRAMESET COLS="30%,*"> FRAME SRC=HTML-lecture.html NAME=LEFT> FRAME SRC=HTML-lec-1.html NAME=RIGHT> /FRAMESET> /HTML>...
    Рис. 1.2. Пример документа с фреймами
    Рис. 1.2. Пример документа с фреймами...
    1.2. Контейнеры HTML-документа
    1.2. Контейнеры HTML-документа Каждая из составных частей документа имеет свой набор контейнеров, которые можно внутри нее использовать. Контейнеры тела документа не используются в заголовке или в...
    Контейнеры заголовка документа НТМL - HEAD
    Контейнеры заголовка документа НТМL - HEAD Заголовок документа не имеет атрибутов. Основное назначение тагов заголовка - это описание общих для всего документа параметров отображения. К таким пара...
    ТIТLЕ
    ТIТLЕ Наиболее часто используемым тагом заголовка является имя документа. ТIТLЕ имеет следующий синтаксис ТIТLЕ> Название документа /ТIТLЕ> Содержание тага ТIТLЕ отображается в поле названия докум...
    ВАSE
    ВАSE Таг ВАSЕ связан с формой представления гипертекстовой ссылки в форме URL. Дело в том, что спецификация URL определяет две формы адресации документов: полную и неполную. НТМL разрешает использ...
    ISINDEX
    ISINDEX Возможность поиска НТМL-документа по ключевым словам определяется тагом ISINDEX заголовка документа. В первоначальной версии языка данный таг не имел дополнительных атрибутов. Если сервер...
    МЕТА
    МЕТА Таг МЕТА предназначен для определения в заголовке документа конструкций, отсутствующих в спецификации НТМL. Имеет три атрибута: NAME, CONTENT, HTTP-EQUIV. Применение данного тага затруднено т...
    Контейнеры тела документа НТМL - BODY
    Контейнеры тела документа НТМL - BODY Таги тела документа Таги тела документа предназначены для управления отображением информации в программе интерфейса пользователя. Они описывают гипертекстовую...
    Активные изображения
    Активные изображения Активные изображения (image maps), или изображения, чувствующие щелчки мыши, позволят вам создать на своем узле графические меню произвольной формы. Пользуясь таким меню, чита...
    Где помещать активное изображение: на сервере или у клиента?
    Где помещать активное изображение: на сервере или у клиента? Есть два типа активных изображений: на сервере и, новая разновидность, у клиента. Изображения первого типа используют сервер для того,...
    Как сделать активное изображение
    Как сделать активное изображение Процесс создания активного изображения состоит из двух этапов. Сначала вы должны определить области на картинке, которые вы хотите сделать активными, а потом соотн...
    Как поместить активное изображение на НТМL-страницу
    Как поместить активное изображение на НТМL-страницу Когда изображение стало активным и для каждой активной области определен URL, его нужно поместить на HTML-страницу. Это можно сделать нескольким...
    Активные изображения на сервере
    Активные изображения на сервере Старый испытанный способ создания активных изображений (для HTML 2.0) требует использования атрибута ISМАР в таге IMG. Таг IMG относится к изображению, и его надо п...
    Активные изображения у клиента
    Активные изображения у клиента В отличие от изображений, описанных в предыдущем разделе, активные изображения у клиента работают независимо от программного обеспечения сервера и не перестанут функ...
    Пример 1.9
    Пример 1.9 HTML> HEAD> TITLE> Товары/TITLE> /HEAD> BODY> H1 ALIGN="CENTER">Компания./H1> HR> p ALIGN="CENTER">font color="#400040" size="4">[ a href="news.html">Новости/a> | a href="products.html"...
    Рис. 1.10. Пример активного изображения
    Рис. 1.10. Пример активного изображения Имейте в виду, что если опустить атрибут SНАРЕ=, будет задано SНАРЕ="RЕСТ". Атрибут СООRDS= описывает координаты формы, используя пиксели в качестве единиц...
    Активные изображения, работающие и на сервере, и у клиента
    Активные изображения, работающие и на сервере, и у клиента Возможно, вы захотите проявить осторожность и сделать изображения, работающими и на сервере, и на машине-клиенте. После того, как вы созд...
    Изображения в миниатюре
    Изображения в миниатюре Трудно противостоять искушению, использовать эффектную графику с высоким разрешением. Часто для иллюстрации какой-то темы требуются изображения прямо-таки огромные. Однако,...
    Таги управления разметкой
    Таги управления разметкой Заголовки Заголовки обозначают начала разделов документа. В стандарте определено 6 уровней заголовков: от Н1 до Н6. Текст, окруженный тагами Н1/Н1, получается большим - э...
    Пример 1.3
    Пример 1.3 HTML> HEAD> TITLE> Главная страница/TITLE> /HEAD> BODY> Компания. Открытое акционерное общество Компания основанная в 1996 году, является одним из ведущих продавцов бытовой электроники...
    Рис. 1.3. Пример текста без разметки
    Рис. 1.3. Пример текста без разметки Броузер покажет нам этот HTML-документ в виде непрерывного текста....
    Атрибут АLIGN. Атрибут АLIGN позволяет...
    Атрибут АLIGN. Атрибут АLIGN позволяет выровнять текст по левому или правому краю, по центру или ширине. По умолчанию текст выравнивается по левому краю. Данный атрибут применим также к графике и...
    Пример 1.4
    Пример 1.4 HTML> HEAD> TITLE> Главная страница/TITLE> /HEAD> BODY> H1 ALIGN=CENTER>Компания./H1> H3 ALIGN=LEFT>Открытое акционерное общество Компания основан-ная в 1996 году, является одним из вед...
    Рис. 1.4. Текст с использованием тагов заголовков
    Рис. 1.4. Текст с использованием тагов заголовков Результат мы можем видеть на экране....
    Таг <ВR>
    Таг ВR Принудительный перевод строки используется для того, чтобы нарушить стандартный порядок отображения текста. При обычном режиме интерпретации программа интерфейса пользователя отображает тек...
    Таг <NOВR>
    Таг NOВR Таг NОВR (Nо Вrеаk, без обрыва) дает команду броузеру отображать весь текст в одной строке, не обрывая ее. Если текст, заключенный в таги NОВR, не поместится на экране, броузер добавит в...
    Таги управления отображением символов
    Таги управления отображением символов Все эти таги можно разбить на два класса: таги, управляющие формой отображения (font style), и таги, характеризующие тип информации (information type). Часто...
    Таги, характеризующие тип информации
    Таги, характеризующие тип информации ТагЗначение ЕМ... /ЕМ Типографское усиление СIТЕ.../СIТЕ Цитирование STRONG ./ STRONG Усиление СODE... /СОDE Отображает примеры кода (например, коды программ)...
    Пример 1.5. Использование тагов...
    Пример 1.5. Использование тагов, управляющих формой отображения. HTML> HEAD> TITLE> Главная страница/TITLE> /HEAD> BODY> H1 ALIGN=CENTER>Компания./H1> H3 ALIGN=LEFT>I>Открытое акционерное общество...
    Рис. 1.5. Таги отображения стилей текста
    Рис. 1.5. Таги отображения стилей текста...
    Таг <DL>
    Таг DL Использование тага списка (Definition List: DL) напоминает применение отступов в обычных текстовых редакторах. Таг DL был создан для форматирования текста, определяющего какой-то термин. Оп...
    Таг <ВLОСKQUOTE>
    Таг ВLОСKQUOTE Таг добавляет поля слева и справа от текста. Это полезный таг, поскольку он позволяет расположить текст компактно в центре страницы. При использовании ВLОСKQUOTE несколько раз текст...
    Табуляция
    Табуляция Потребность в этом средстве существовала уже очень давно, но лишь недавно оно было, наконец, предложено разработчикам.. Табуляцию можно задать несколькими способами. Самый простой - запи...
    Списки
    Списки Списки являются важным средством структурирования текста и применяются во всех языках разметки. В НТМL имеются следующие виды списков: ненумерованный список (неупорядоченный), нумерованный...
    Таг <UL>
    Таг UL Ненумерованный список. Ненумерованный список предназначен для создания текста типа: первый элемент списка второй элемент списка третий элемент списка Записывается данный список в виде следу...
    Атрибуты маркеров в ненумерованном...
    Атрибуты маркеров в ненумерованном списке Если вы не желаете применять одни и те же маркеры на разных уровнях вложенности, то используйте атрибут ТYРЕ=. Вы можете задать любой тип маркера в произв...
    Таг <OL>
    Таг OL Нумерованные списки. Таг OL вместе с атрибутом ТYРЕ= в HTML 3.0 позволяет создать нумерованные списки, используя в качестве номеров не только обычные числа, но и строчные и прописные буквы,...
    Пример 1.6. Использования тагов различных списков.
    Пример 1.6. Использования тагов различных списков. HTML> HEAD> TITLE> Главная страница/TITLE> /HEAD> BODY> H1 ALIGN=CENTER>Компания./H1> HR> H3 ALIGN=LEFT>I>Открытое акционерное общество Компания...
    Рис. 1.6.
    Рис. 1.6....
    Таг <НR>
    Таг НR Горизонтальное отчеркивание (horizontal rule) применяется для разделения документа на части. С помощью одного лишь тага НR можно придать странице совершенно необычный вид. Попробуйте поэксп...
    Таг <РRЕ>
    Таг РRЕ Отображение текста без форматирования....
    Таг <BLINK>
    Таг BLINK Таг BLINK вызывает мерцание текста заключенного в него....
    Гипертекстовые ссылки
    Гипертекстовые ссылки Все рассмотренные выше средства управления отображением текста являются безусловно важными, но только дополнительными к основному тагу документа - гипертекстовой ссылке. Для...
    Пример 1.7
    Пример 1.7 HTML> HEAD> TITLE> Главная страница/TITLE> /HEAD> BODY> H1 ALIGN=CENTER>Компания./H1> HR> H3 ALIGN=LEFT>I>Открытое акционерное общество Компания основанная в 1996 году, является одним и...
    Рис. 1.7. Гипертекстовые ссылки
    Рис. 1.7. Гипертекстовые ссылки...
    Рис. 1.8. Новый документ
    Рис. 1.8. Новый документ Другой формой использования тага А является определение точек внутри текста, на которые можно сослаться: Такой метод используется в случае когда документ нельзя поделить н...
    Графика
    Графика Cамыми распространенными графическими форматами в Web являются GIFи JPEG форматы. Для того, чтобы вставить изображение в Web-страницу необходимо либо нарисовать его, либо взять уже готовое...
    Рис. 1.9. Вставленное в текст изображение
    Рис. 1.9. Вставленное в текст изображение Замыкающего тага не требуется. Здесь SRC означает источник (SouRCe), а имя файла представляет собой имя выводимого графического файла. Изображения на стра...
    Ограничивающие прямоугольники и атрибуты АLТ=
    Ограничивающие прямоугольники и атрибуты АLТ= Для уменьшения времени загрузки страницы с графикой полезно определять в HTML-коде размер изображений. Если он известен еще до загрузки страницы, то б...
    Как задать размеры графики
    Как задать размеры графики Если у вас есть какая-нибудь программа для работы с графикой, то определить размер изображения нетрудно. Для начала откройте файл в графическом редакторе и определите ра...
    Атрибут АLТ=
    Атрибут АLТ= Атрибут АLТ= тага IMG позволяет пользователям, броузеры которых смотрят только текст (или если в броузере отключен режим графики), получить представление о том, что за графика располо...
    1.3. Средства описания таблиц в HTML
    1.3. Средства описания таблиц в HTML По мере роста системы WWW стало ясно, что средств, которые заложены в НТМL, не достаточно для качественного отображения различного типа документов. Недостатком...
    Таг <ТАВLЕ>.
    Таг ТАВLЕ. Для описания таблиц служит таг ТАВLЕ. Таг ТАВLЕ, как и многие другие, автоматически переводит строку до и после таблицы....
    Таг <ТR>
    Таг ТR Таг ТR (сокращение от Таble Row - строка таблицы) создает строку таблицы. Если в таблице содержится два набора тагов ТR/ТR, в ней будут две строки. Весь текст, другие таги и атрибуты, котор...
    Пример 1.10
    Пример 1.10 HTML> BODY> H1 ALIGN=CENTER>Таблица/H1> CENTER> TABLE BORDER> TR> TD COLSPAN=3>Если в таблице два тага TR> то в ней две строки./TD> /TR> TR> TD>Если в стоке три тага TD> /TD> TD>то в н...
    Таг <ТD> Внутри строки таблицы...
    Пример 1.11 HTML> BODY> TABLE BORDER> TR> TD>В/TD> TD>этой/TD> TD>строке/TD> TD>пять/TD> TD>столбцов/TD> /TR> TR> TD>а в этой/TD> TD>только/TD> TD>три./TD> /TR> /TABLE> /BODY> /HTML>...
    Таг <ТН> При задании заголовков...
    Пример 1.12 HTML> BODY> TABLE BORDER> TR> TH>Заголовок центрирован по умолчанию/TH> TH COLSPAN=2>Заголовок может объединять столбцы/TH> /TR> TR> TH>Заголовок может быть расположен перед столбцами/...
    Таг <САРТIОN> <CAPTION>...
    Пример 1.13 HTML> BODY> TABLE BORDER> CAPTION ALIGN=TOP>Заголовок над таблицей/CAPTION> TR> TD>Текст или данные/TD> TD>Текст или данные/TD> TD>Текст или данные/TD> TD>Текст или данные/TD> /TR> /TA...
    Атрибут NOWRAP Обычно любой текст...
    Атрибут СОLSPAN= Таги ТD и ТН модифицируются с помощью атрибута СОLSPAN= (Column Span, соединение столбцов). Если вы хотите сделать какую-нибудь ячейку шире, чем верхняя или нижняя, можно воспольз...
    Пример 1.14
    Пример 1.14 HTML> BODY> CENTER> TABLE BORDER=3> TR> TD> Если вы хотите сделать какую-нибудь ячейку шире, чем верхняя или нижняя, /TD> TD> можно воспользоваться атрибутом СОLSPAN=, /TD> /TR> TR> TD...
    Атрибут ROWSPAN= Атрибут ROWSPAN=...
    Атрибут WIDТН= Атрибут WIDТН= применяется в двух случаях. Можно поместить его в таг ТАВLЕ для задания ширины всей таблицы, а можно использовать в тагах ТR или ТН для задания ширины ячейки или груп...
    Пример 1.15
    Пример 1.15 HTML> BODY> TABLE BORDER WIDTH=100%> TR> TD ALIGN=CENTER>Текст или данные - ширина 100% /TR> /TABLE> или TABLE BORDER WIDTH=50%> TR> TD ALIGN=CENTER>Текст или данные - ширина 50%/TD> /...
    Атрибут UNIТ= Атрибут UNIT= тага...
    Атрибут СОLSРЕС= Атрибут СОLSРЕС=, используемый с атрибутом UNIТ=, определяет, сколько места занимает каждый столбец таблицы и как в нем выравниваются данные. Применяется только в тагеТАВLЕ. СОLSР...
    Атрибут DР=
    Атрибут DР= Атрибут DР= (Decimal Point, десятичный знак) определяет символ, используемый для отделения целой части десятичной дроби. DР="." (по умолчанию) указывает на точку в качестве десятичного...
    Пустые ячейки
    Пустые ячейки Если ячейка не содержит данных, она не будет иметь границ. Если вы хотите, чтобы у ячейки были границы, но не было содержимого, вы должны поместить в нее что-то, что не будет видно п...
    Атрибут СЕLLРАDDING=
    Атрибут СЕLLРАDDING= Атрибут СЕLLPADDING= определяет ширину пустого пространства между содержимым ячейки и ее границами, то есть задает поля внутри ячейки....
    Пример 1.16
    Пример 1.16 HTML> BODY> CENTER> TABLE BORDER CELLPADDING=20> TR> TD>Текст или данные/TD> TD>Текст или данные/TD> TD>Текст или данные/TD> /TR> TR> TD>Текст или данные/TD> TD>Текст или данные/TD> TD...
    Атрибуты АLIGN= и VALIGN= Таги...
    Пример 1.17 HTML> BODY> TABLE BORDER WIDTH=100%> TR> TD ALIGN=LEFT>Текст или данные/TD> TD ALlGN=CENTER>Текст или данные/TD> TD ALIGN=RIGHT>Текст или данные/TD> /TR> TR> TD ALIGN=RIGHT>Текст или д...
    Атрибут VALIGN= осуществляет выравнивание...
    Рис. 1.19. Атрибут VALIGN= осуществляет выравнивание текста и графики внутри ячейки по вертикали....
    Атрибут ВОRDER= В таге <ТАВLЕ>...
    Атрибут СЕLLSPACING= Атрибут СЕLLSPACING= определяет в пикселях ширину промежутков между ячейками. Если этот атрибут не задан, по умолчанию задается величина, равная двум пикселям. Атрибут СЕLLSPA...
    Пример 1.19
    h2>...
    1.4. Использование таблиц в дизайне страницы
    1.4. Использование таблиц в дизайне страницы Приятное свойство таблиц состоит в том, что если вы захотите, то можете сделать их границы невидимыми. Это позволяет с помощью тага ТАВLЕ красиво разме...
    Пример 1.20
    Пример 1.20 HTML> BODY> CENTER> TABLE CELLPADDING=10 CELLSPACING=0 BORDER=16> TR> TD ALIGN=CENTER> H1>ПЕРФОРАТОР/H1> H3>Только сегодня!/H3> TABLE BORDER WIDTH=100%> TR>TD ALIGN=CENTER>I>Почти бесп...
    Создание разноцветных таблиц Ведущие...
    Цветные границы в Netscape Navigator Вы не только можете окружить таблицу красивой рамкой, но еще и задать для нее цвет, отличный от цветов текста и фона. Создайте простой серый GIF (или любой GIF...
    Пример 1.21
    Пример 1.21 HTML> BODY BACKGROUND="bgr.gif" BGCOLOR="YELLOW" > CENTER> TABLE BORDER=3 CELLPADDING=20> CAPTION ALIGN=TOP>H2>Как просверлить бетонную стену/H2>/CAPTION> TR> TD BGCOLOR=GRAY> TABLE CE...
    Рис. 1.22. Пример разноцветной таблицы
    Рис. 1.22. Пример разноцветной таблицы...
    1.5. Фреймы Что такое фрейм?
    1.5. Фреймы Что такое фрейм? В каком-то смысле фрейм - это именно то, что означает данное слово: рамка вокруг картинки, окошко или страница. Вводя таг FRAME, дизайнер НТМL-страницы разделяет экран...
    Для чего можно использовать фреймы
    Для чего можно использовать фреймы Хотя фиксация фирменного знака или средств навигации - наиболее очевидные способы использования фреймов, это не значит, что их возможности тем и исчерпываются. П...
    Как работают фреймы
    Как работают фреймы На первый взгляд, фреймы - это нечто сложное, но их легче понять, если провести аналогию с ячейками таблицы. Расположение фреймов на экране задается почти так же, как ячеек в т...
    Создание простой страницы с фреймами
    Создание простой страницы с фреймами Создадим, для лучшего понимания, пару простых страничек с фреймами, чтобы стало понятно, каково строение НТМL страницы с фреймами и для чего нужны основные таг...
    Задание фреймовой структуры
    Задание фреймовой структуры Для начала мы должны представить себе общий вид страницы - где и какого размера будут фреймы. Затем можно подумать об их содержании. Ниже приводится код простой фреймов...
    Пример 1.22
    Пример 1.22 HTML> HEAD> TITLE>Пример фреймов/TITLE> /HEAD> FRAMESET COLS="25%, 75%" FRAME SRC="a.html"> FRAME SRC="b.html" NAME="main"> /FRAMESET> NOFRAMES> Вы видите эту страницу броузером не под...
    Вот и весь код, необходимый для...
    Пример 1.23 HTML> HEAD> TITLE> Меню/TITLE> /HEAD> BODY> H3 ALIGN=CENTER>Компания./H3> HR> UL>font color="#400040" size="4"> LI>a href="html-pr2-4.html" ТАRGЕТ="main">Главная/a> LI>a href="news.htm...
    Заметим, что здесь ничего не говорится...
    Пример 1.24 HTML> HEAD> TITLE> Главная страница/TITLE> /HEAD> BODY> H1 ALIGN=CENTER>Компания./H1> HR> H3 ALIGN=LEFT>I>Открытое акционерное общество Компания основанная в 1996 году, является одним...
    Обратите внимание: на приведенных...
    Пример 1.25 HTML> HEAD> TITLE> Пример фрейма/TITLE> /HEAD> FRAMESET COLS="25%, 75%" FRAME SRC="html-pr5-2.html"> FRAME SRC="html-pr2-3.html" NAME="main"> /FRAMESET> NOFRAMES> Вы видите эту страниц...
    Имейте в виду, что поддерживающий...
    Таг FRAMESET Таги FRAMESET обрамляют текст, описывающий компоновку фреймов. Здесь размещается информация о числе фреймов, их размерах и ориентации (горизонтальной или вертикальной). У тага FRAMESE...
    "Волшебные" целевые фреймы
    "Волшебные" целевые фреймы Волшебные целевые фреймы предназначены исключительно для особых случаев. Прежде чем вы решитесь их применить, дважды подумайте: они способны усложнить жизнь некоторым по...
    Фрейм "blank"
    Фрейм "blank" Если атрибут ТАRGЕТ= ссылается на " blank", то документ всегда будет появляться в новом пустом окне....
    Фрейм "self"
    Фрейм "self" Имя "self" указывает на то, что выбранная страница загружается в тот же фрейм, где была активирована ссылка. Если вы щелкнете мышкой на ссылке в фрейме оглавления, выбранная страница...
    Фрейм "раrent"
    Фрейм "раrent" Пользоваться этим именем небезопасно. Документы, вызываемые по ссылке на "раrent", появляются в родительской фреймовой структуре. Это хороший способ окончательно сбить с толку читат...
    Фрейм "top"
    Фрейм "top" При указании ссылки "tор" документы появляются в отдельном окне вне фрейма. Независимо от вашего желания броузер откроет новое окно просмотра....
    Вложенные и множественные кадровые структуры
    Вложенные и множественные кадровые структуры Вложенные фреймы не очень способствуют навигации. И все же бывают случаи, когда возникает потребность сделать фреймы внутри других фреймов. По мнению а...
    1.6. Формы
    1.6. Формы Интерактивные формы позволяют читателям Web-страниц легко общаться с их владельцами. Благодаря простоте использования тага mailto: и форм стал возможен двусторонний диалог между владель...
    Как сделать так, чтобы ваша форма хорошо смотрелась
    Как сделать так, чтобы ваша форма хорошо смотрелась Один из способов свести все трудности к минимуму состоит в том, чтобы разместить области ввода и выпадающие меню в левой части страницы, а весь...
    Пример 1.26
    Пример 1.26 HTML> HEAD> TITLE>Коментарии/TITLE> /HEAD> BODY> H1>Коментарии/H1> BR>Пожалуйста сообщите нам, что вы думаете о нашем web сайте, компании, продукции, или услугах. Если вы сообщите нам...
    Как заставить формы работать
    Как заставить формы работать Возможно, это именно тот раздел, которого вы ждете - как сделать так, чтобы формы отсылали на сервер введенные данные. На самом деле заставить форму пересылать данные...
    1.7. Апплеты
    1.7. Апплеты Собственно и не стоило бы говорить о Java, если бы не возможность использования небольших мобильных программ, которые можно передавать по сети и исполнять на компьютере пользователя....
    Пример 1.27
    Пример 1.27 HTML> HEAD> TITLE>Документ со встроенной ссылкой на applet./TITLE> /HEAD> BODY bgcolor=#FFFFFF> CENTER> H1>Документ со встроенным апплетом hello Java/H1> HR> APPLET CODE=hello width=20...
    1.8. Каскадные таблицы стилей (Cascad Style Sheets)
    1.8. Каскадные таблицы стилей (Cascad Style Sheets) Каскадные таблицы стилей были предложены w3c(WWW Consorcium) в рамках разработки спецификации HTML 3.0. Однако, реализованы в реально действующи...
    Пример 1.28
    Пример 1.28 html> head> style type="text/css"> p {color:blue; font-family: times; font-size:10pt;} h1 {color:black; font-size:12pt; font-style:Arial; text-align: center;} /style> /head> body> h1>T...
    Пример 1.29
    Пример 1.29 html> head> style type="text/javascript"> tags.p.color="blue"; tags.p.fontFamily="times"; tags.p.fontSize="10pt"; tags.h1.color="black"; tags.h1.fontSize="12pt"; tags.h1.fontStyle="Ari...
    Разберем теперь описатели стилей...
    Контейнер STYLE (style type="..."....../style) служит для определения таблицы описания стилей. Хотя в спецификации CSS прямо не говорится, в каком контейнере документа следует применять STYLE, тем...
    Пример 1.30
    Пример 1.30 html> head> link REL=STYLESHEET TYPE="text/css" HREF=http://localhost/css.htm> /head> body> The body of the document should be here. /body> /html> Из данного примера видно, что писание...
    Контейнер SPAN применяется для...
    Контейнер SPAN применяется для переопределения стиля отображения текущего фрагмента текста и в некотором смысле аналогичен контейнеру FONT. Часто SPAN применяют для достижения типографских эффекто...
    Кроме новых контейнеров таблицы...
    Свойства контейнеров, управляемые описателями стилей Первую группу свойств составляют свойства шрифтов: font-size, font-family, font-weight, font-style. Вторую группу свойств составляют свойства т...
    2. Управление просмотром страниц Web-узла. JavaScript
    2. Управление просмотром страниц Web-узла. JavaScript Современные гипертекстовые информационные системы условно можно представить в виде совокупности нескольких компонентов: системы хранения гипер...
    2.1. Модель объектов JavaScript - объекты Navigator'а
    2.1. Модель объектов JavaScript - объекты Navigator'а Идея JavaScript очень проста. Все операции, которые можно исполнять в программе на JavaScript, описывают действия над хорошо известными и поня...
    Описание иерархии классов
    Описание иерархии классов Все встроенные объекты JavaScript берут свое начало от рабочей области Netscape, и их можно представить в виде следующей иерархии: Кроме этих классов объектов пользовател...
    2.10. Встраивание в HTML-документ
    2.10. Встраивание в HTML-документ Для встраивания скриптов в тело HTML-документа используется контейнер SCRIPT. Не все программы просмотра способны распознавать и исполнять скрипты, поэтому само т...
    Пример 2.2
    Пример 2.2 HTML !-- Author:Pavel Khramtsov Date:March 5, 1996 -- HEAD TITLERegistration/TITLE SCRIPT LANGUAGE="JavaScript" !-- The JavaScript Functions Definition function help_win() { Help = wind...
    2.11. Примеры скриптов
    2.11. Примеры скриптов Теоретизировать на предмет написания скриптов на JavaScrip можно долго. Но самый продуктивный способ получения представления о языке - это разбор примеров. Если посмотреть н...
    Пример 2.3
    Пример 2.3 HTML !-- Author:Pavel Khramtsov Date:February 23, 1996 URL:http://144.206.192.100/radleg/mo_input.htm -- HEAD TITLEПроверка устного счета./TITLE SCRIPT LANGUGE="JavaScript" !-- var max_...
    Пример 2.4. Бегущая строка
    Пример 2.4. Бегущая строка HTML !-- ady@demos.su, Saturday, January 20, 1996 7:23:31 PM-- !-- Demos WWW cover page -- HEAD TITLEWelcome to Demos Company - Moscow, Russia/TITLE !-- yet another scro...
    Пример 2.5
    Пример 2.5 HTML !-- Author:Pavel Khramtsov Date:February 25, 1996 -- HEAD TITLEText Block Scrolling/TITLE SCRIPT LANGUAGE="JavaScript" var line_beak = "\n" var screen = "" // 123456789012345678901...
    Пример 2.6
    Пример 2.6 HTML HEAD TITLE type_Document_Title_here /TITLE SCRIPT LANGUAGE="JavaScript" !-- var i=0 adv_message = " " advert = "Russian Research Center \"Kurchatov Institute\"" adv_message += adve...
    Пример 2.7. Минимизация, максимизация окна и его удаление.
    Пример 2.7. Минимизация, максимизация окна и его удаление. HTML !-- Author:HTMLed User Date:May 16, 1996 -- HEAD titleIconize/title script language="JavaScript" function make_icon() { window.open(...
    Пример 2.8. Максимизация окна:
    Пример 2.8. Максимизация окна: HTML !-- Author: Pavel Khramtsov Date:May 16, 1996 -- HEAD script function max_window() { window.open("iconize.htm","new","toolbar=yes,scrollbars=yes,directories=yes...
    2.12. Единство в многообразии
    2.12. Единство в многообразии В заключении следует отметить, что JavaScript - это не единственный язык управления сценариями просмотра документов. Microsoft подготовила свою версию аналогичного яз...
    2.13. Приемы программирования на JavaScript
    2.13. Приемы программирования на JavaScript Проще всего начать изучение программирования на каком-либо языке с простых примеров, которые читатель может немедленно проверить. С подачи авторов языка...
    Пример 2.9. Программа выдачи простого...
    Пример 2.9. Программа выдачи простого предупреждения при выборе гипертекстовой ссылки. Схема URL - JavaScript HTML HEAD titleСамый первый пример JavaScript/title /HEAD BODY center h1Мой первый при...
    Рис. 2.1. Выполнение скрипта при...
    Рис. 2.1. Выполнение скрипта при выборе гипертекстовой ссылки Добиться такого же эффекта можно и другим способом, не прибегая к новой схеме URL. Для этой цели можно использовать событие, которое г...
    Пример 2.10. Программа выдачи...
    Пример 2.10. Программа выдачи простого предупреждения по событию Click при выборе гипертекстовой ссылки HTML HEAD titleСамый первый пример JavaScript/title /HEAD BODY center h1Мой первый пример Ja...
    Пример 2.11. Применение контейнера...
    Пример 2.11. Применение контейнера SCRIPT для размещение JavaScript-кода HTML HEAD titleСамый первый пример JavaScript/title script language="JavaScript" !-- Start the text of programme function q...
    Пример 2.12. Получение типа программы просмотра HTML-страниц
    Пример 2.12. Получение типа программы просмотра HTML-страниц HTML HEAD titleTest of Browser name/title /HEAD BODY h1 align=centerПроверка имени типа браузера;/h1 hr Для того, чтобы получить имя ва...
    Пример 2.13. Условная генерация...
    Пример 2.13. Условная генерация текста страницы по типу программы просмотра HTML HEAD titleTest of Browser name/title /HEAD BODY h1 align=centerПроверка имени типа браузера/h1 hr script language=J...
    Рис.2.2. При загрузке был определен...
    Рис.2.2. При загрузке был определен Netscape Navigator в качестве программы-браузера HTML-страниц Вообще говоря, проверить тип программы просмотра можно на сервере протокола HTTP и передать програ...
    Пример 2.14. Размещение скрипта...
    Пример 2.14. Размещение скрипта в отдельном файле (netscape.jsc) HTML HEAD titleTest of Browser name/title /HEAD BODY h1 align=centerПроверка имени типа браузера/h1 hr script language=JavaScript s...
    Пример 2.15. Содержание файла...
    Пример 2.15. Содержание файла netscape.jsc, ссылка на который установлена в атрибуте SCR тага SCRIPT из примера 6 if(window.navigator.appName == "Netscape") { document.write("brcenterfont color=st...
    2.14. Примеры манипулирования окнами
    2.14. Примеры манипулирования окнами Как это не покажется странным, но в наших простых примерах мы уже начали манипулировать окнами. Открытие окна-пердупреждения - это операция над объектом "окно"...
    Методы
    Методы Методы позволяют нам создать на экране видимое окно, закрыть окно и проделать с ним другие операции. С методом window.alert мы уже знакомы. Методы window.confirm и window.prompt используютс...
    Пример 2.16. Использование методов Alert, Prompt, Confirm
    Пример 2.16. Использование методов Alert, Prompt, Confirm HTML HEAD titleWindow simple example/title /HEAD BODY center h1Simple window methods/h1 hr /center ul lia href="javascript:window.alert('A...
    Пример 2.17. Метод window.open
    Пример 2.17. Метод window.open HTML HEAD titleWindow simple example/title /HEAD BODY center h1Open window methods/h1 hr /center Если выбрать гипертекстовую ссылку a href="javascript:window.open('s...
    Пример 2.18. Закрыть текущее окно
    Пример 2.18. Закрыть текущее окно HTML HEAD titleWindow simple example/title /HEAD BODY center h1Close window methods/h1 hr /center Если выбрать гипертекстовую ссылку a href="javascript:window.clo...
    Пример 2.19. Прокрутка текста в окне навигатора
    Пример 2.19. Прокрутка текста в окне навигатора HTML HEAD titleScroll text/title /HEAD BODY center h1Прокрутка текста в окне навигатора/h1 hr [a href="javascript:for(i=0;i80;i++) {window.scroll(0,...
    Пример 2.20. Прокрутка текста по таймеру
    Пример 2.20. Прокрутка текста по таймеру HTML HEAD titleScroll text/title script language=JavaScript !-- i=0;flag=0;start_stop=0; function my_scroll() { if(start_stop==1) { window.scroll(0,i*10);...
    2.15. Гипертекстовые ссылки и картинки
    2.15. Гипертекстовые ссылки и картинки Гипертекстовые ссылки и картинки - это свойства объекта "документ", который в свою очередь является частью объекта "окно". И гипертекстовые ссылки, и картинк...
    Просмотр фотографий образцов через...
    Просмотр фотографий образцов через список гипертекстовых ссылок Вся страница размечается как таблица, состоящая из одной строки в две ячейки. В первой ячейке размещается список выбора альтернатив,...
    Пример 2.21. Изменение картинки через гипертекстовую ссылку
    Пример 2.21. Изменение картинки через гипертекстовую ссылку HTML HEAD TITLEHTTPD\HTDOCS\JAVASCR\EXAMPLE1/TITLE SCRIPT !-- Защитили текст скрипта от старых браузеров function l_image(a) { document....
    Изменение картинки путем выбора предмета из списка.
    Изменение картинки путем выбора предмета из списка. Вся страница размечается как таблица, состоящая из одного столбца в две ячейки. В первой ячейке размещается выпадающее меню выбора альтернатив,...
    Пример 2.22. Выбор картинки из списка
    Пример 2.22. Выбор картинки из списка !-- элементы заголовка -- ... SCRIPT !-- Защитили текст скрипта от старых браузеров pictures = new Array() for(i=0;i8;i++) { pictures[i] = new Image() if(i==0...
    Листание картинок и их автоматический просмотр
    Листание картинок и их автоматический просмотр Вся страница размечается как таблица, состоящая из одного столбца в две ячейки. В первой ячейке размещаются три кнопки управления просмотром картинок...
    Пример 2.23. Листание и прокрутка картинок
    Пример 2.23. Листание и прокрутка картинок SCRIPT !-- Защитили текст скрипта от старых браузеров pictures = new Array() for(i=0;i8;i++) { pictures[i] = new Image() if(i==0) pictures[i].src = "free...
    Пример использования client-site imagemap
    Пример использования client-site imagemap В данном примере мы хотим показать возможность изменения картинки imagemap с одновременным изменением гипертекстовых ссылок, связанных с этой картинкой. Т...
    Пример 2.24. Динамический imagemap
    Пример 2.24. Динамический imagemap SCRIPT !-- Защитили текст скрипта от старых браузеров function print_form(a) { document.form1.kuku.value = a } function set_image(a) { if(a == "bosh") { document...








Начало