- •Государственная морская академия имени адмирала с. О. Макарова
- •Д. Н. Фомин основы разработки веб-страниц
- •Введение
- •1. Общие вопросы разработки веб-страниц
- •1.1. Цели и задачи создания веб-страниц
- •1.2. Основные понятия и пояснения к ним
- •1.3. Основные элементы веб-страницы и файловая структура веб-сайта
- •1.4. Программное обеспечение рабочего места веб-мастера
- •1.4.1. Редактор html-страниц
- •1.4.2. Редакторы графики
- •1.4.3. Браузеры
- •1.4.4. Вспомогательные программы
- •2. Непосредственная работа с html-кодом
- •2.1. Структура html-документа
- •2.2. Основные тэги
- •2.2.1. Заголовки
- •2.2.2. Абзацы и переводы строки
- •2.2.4. Вставка изображений на веб-страницу
- •2.2.5. Маркированные и нумерованные списки
- •2.2.6. Изменение шрифта
- •2.2.7. Горизонтальная линия
- •2.2.8. Комментарии
- •2.3. Вставка специальных символов в html-документ
- •2.4. Таблицы в html
- •2.4.1. Тэги для таблиц, строк и ячеек
- •2.4.2. Таблицы с объединёнными ячейками
- •2.5. Каскадные таблицы стилей (css)
- •2.5.1. Вводные замечания о таблицах стилей
- •2.5.2. Синтаксис таблиц стилей
- •2.5.3. Наследование
- •2.5.4. Контекстные селекторы
- •2.5.5. Способы включения стилевых таблиц в html-документ
- •2.5.6. Приоритет применения таблиц стилей
- •2.5.7. Классы в стилевых таблицах
- •2.5.8. Комментарии в стилевых таблицах
- •2.5.9. Оформление гипертекстовых ссылок
- •2.6. Свободно позиционируемые элементы
- •3. Визуальный редактор веб-страниц Microsoft FrontPage
- •3.1. Интерфейс Microsoft FrontPage
- •3.2. Ввод и редактирование текста в Microsoft FrontPage
- •3.2.1. Базовые средства редактирования
- •3.2.2. Средства отмены и возврата действий
- •3.2.3. Ввод символа, отсутствующего на клавиатуре
- •3.3. Форматирование текста
- •3.3.1. Базовые средства форматирования
- •3.3.2. Списки
- •3.3.3. Вставка изображений
- •3.4. Создание таблиц в Microsoft FrontPage
- •3.4.1. Создание таблицы при помощи панели инструментов.
- •3.5. Каскадные таблицы стилей в Microsoft FrontPage
- •3.5.1. Создание внешней стилевой таблицы
- •3.5.2. Создание внутренней стилевой таблицы
- •3.5.3. Определение стиля внутри тэга
- •3.5.4. Создание пользовательских классов
- •4. Язык сценариев JavaScript
- •4.1. Простейшие сценарии JavaScript
- •4.2. Типы данных в JavaScript
- •4.2.1. Строки
- •4.2.2. Числа
- •4.2.3. Булевы значения
- •4.2.4. Особые типы данных
- •4.3. Переменные в JavaScript
- •4.3.1. Простые переменные
- •4.3.2. Переменные-массивы
- •4.4. Выражения, условия и операции
- •4.4.1. Арифметические операции
- •4.4.2. Операции сравнения
- •4.4.3. Логические операции
- •4.4.4. Операция присваивания
- •4.4.5. Прочие операции
- •4.5. Основные операторы JavaScript
- •4.5.1. Оператор ветвления if…else
- •4.5.2. Операторы цикла
- •4.5.3. Прочие операторы
- •4.6. Функции в JavaScript
- •4.6.1. Объявление и вызов функций
- •4.6.2. Вызов функций JavaScript по событию
- •4.6.3. Передача параметров в функцию и возврат значений из функции
- •4.7. Использование объектов в JavaScript
- •4.7.1. Общие понятия об объектах в JavaScript
- •4.7.2. Использование объекта Math
- •4.7.3. Использование объекта Date
- •4.7.4. Использование объекта String
- •4.8. Использование объектной модели документа
- •4.8.1. Использование объекта document
- •4.8.2. Строки ввода и кнопки
- •4.9. Способы подключения сценария к веб-странице
- •4.9.1. Размещение сценария в отдельном файле
- •4.9.2. Размещение сценария внутри тэга
- •4.10. Примеры анимации на веб-страницах
- •4.10.1. Часы на веб-странице
- •4.10.2. Обратный счётчик
- •4.10.3. Движущийся текст
- •4.10.4. Изменение цвета текста под указателем мыши
- •4.10.5. Смена изображения под указателем мыши
- •4.10.6. Переливающийся текст
- •Литература
- •Приложение 1.
- •Приложение 3. Часто используемые свойства стилевых таблиц
- •Приложение 2. Часто используемые символьные подстановки
4.5. Основные операторы JavaScript
4.5.1. Оператор ветвления if…else
Оператор ветвления (условный оператор) if позволяет запустить на исполнение одну из двух альтернативных последовательностей операторов. Выбор осуществляется с помощью булевых выражений, принимающих значение true или false.
Пример.
var yourchoice = confirm ("Вы сейчас сидите за компьютером?");
if (yourchoice)
{
alert ("Видите, я угадал!");
}
else
{
alert ("Да ну? А как же вы это делаете?");
}
Если в каком-либо из двух блоков if или else присутствует только один оператор (как в примере выше), то соответствующую пару фигурных скобок можно опустить. Блок else может отсутствовать вообще.
4.5.2. Операторы цикла
Операторы цикла позволяют выполнить некоторую группу операторов произвольное число раз. В языке JavaScript имеется четыре оператора цикла: do…while; while; for; for…in.
Цикл do…while – цикл с постусловием (т.е. условием, проверяемым после выполнения тела цикла). Синтаксис оператора:
do
{
операторы;
}
while (условие);
Этот оператор цикла работает следующим образом. Выполняется тело цикла – операторы внутри фигурных скобок. Затем проверяется условие. Если оно ложно, выполнение оператора прекращается, если истинно – выполнение тела цикла повторяется до тех пор, пока условие не станет ложным. Следует обратить внимание, что тело цикла do…while всегда выполняется хотя бы один раз, даже если условие ложно с самого начала.
Пример. Следующий цикл выведет в окнах сообщений все числа от 1 до 5:
i = 1;
do
{
alert (i);
i++;
}
while (i <= 5);
Следует внимательно следить за тем, чтобы из цикла был выход, в противном случае сценарий зациклится. Так, если в вышеприведённом примере пропустить оператор i++, то переменная i будет всегда иметь значение 1 и цикл будет выполняться бесконечно. К зацикливанию может также привести ошибка в условии: если в том же примере написать по ошибке i >= 0 вместо i <= 5, цикл также никогда не завершится. Это же относится и к другим операторам цикла – while и for.
Цикл while – цикл с предусловием. В отличие от цикла do…while, условие проверяется до первого выполнения тела цикла. Если условие с самого начала ложно, тело цикла не будет выполнено ни разу. Если условие истинно, выполнение тела цикла повторяется до тех пор, пока оно не станет ложным. Синтаксис оператора:
while (условие)
{
операторы;
}
Пример. Следующий пример аналогичен примеру для оператора do…while – выводит в окнах сообщений все числа от 1 до 5:
i = 1;
while (i <= 5)
{
alert (i);
i++;
}
Цикл for – цикл со счётчиком. Синтаксис оператора:
for (начальное_выражение; условие; оператор_приращения)
{
операторы;
}
Он эквивалентен следующей конструкции с оператором while:
начальное_выражение;
while (условие)
{
операторы;
оператор_приращения;
}
Тело цикла for может не выполняться ни разу. Это происходит в том случае, когда условие с самого начала ложно.
Пример. Следующий пример делает то же, что пример для оператора do…while – выводит в окнах сообщений все числа от 1 до 5:
for (i = 1; i <= 5; i++)
{
alert (i);
}
Цикл for…in несколько отличается от трёх предыдущих и не имеет аналогов в языках Паскаль и Си. Он позволяет выполнить какие-либо действия над каждым из элементов массива. Синтаксис оператора:
for (имя_переменной in имя_массива)
{
операторы;
}
Пример. Следующий пример последовательно выводит в окнах сообщений названия дней недели, предварительно занесённые в массив:
var weekdays = new Array ("Sunday", "Monday", "Tuesday", "Wednesday",
"Thursday", "Friday", "Saturday");
for (day in weekdays)
{
alert (day);
}
Заметьте, что оператору for…in не нужно передавать размер массива: он сам «узнаёт» у массива, сколько в нём элементов.
