- •Государственная морская академия имени адмирала с. О. Макарова
- •Д. Н. Фомин основы разработки веб-страниц
- •Введение
- •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.
- •Приложение 2. Часто используемые символьные подстановки
- •Приложение 3. Часто используемые свойства стилевых таблиц
4.3.2. Переменные-массивы
Массив (англ. array) – удобное средство структурирования данных в любом языке программирования, в том числе в JavaScript. Он позволяет сохранить несколько значений под одним именем переменной. Как правило, в массивы заносятся данные одного типа, как-либо связанные между собой (например, названия дней недели).
Пример. Объявим массив с именем days_of_week, в котором будут храниться названия дней недели.
var days_of_week = new Array(7);
В этой строке сценария объявляется переменная days_of_week. Затем с помощью оператора new создаётся новый объект типа Array (массив) и указывается его размер (7). Обратите внимание, что размер массива указан в круглых скобках. Распространённой ошибкой у начинающих программистов на JavaScript, ранее работавших с языками Паскаль и Си, является использование для этой цели квадратных скобок.
Нумерация элементов массива в JavaScript всегда начинается с нуля, поэтому номер последнего элемента массива всегда будет на единицу меньше числа элементов. Так, созданный нами массив содержит элементы с номерами от 0 до 6 (а не от 1 до 7).
Чтобы присвоить значение элементу массива, в левой части оператора присваивания записывается имя массива, затем номер элемента в квадратных скобках. В качестве примера заполним созданный нами массив строками – названиями дней недели:
days_of_week[0] = "воскресенье"; days_of_week[1] = "понедельник";
days_of_week[2] = "вторник"; days_of_week[3] = "среда";
days_of_week[4] = "четверг"; days_of_week[5] = "пятница";
days_of_week[6] = "суббота";
Для извлечения элемента из массива используется та же запись, что и для присваивания значения ему. Например, вызов функции
alert (days_of_week[3]);
выведет в окне сообщения строку «среда».
Массив можно также создать, перечислив его элементы:
var days_of_week = new Array("воскресенье", "понедельник", "вторник",
"среда", "четверг", "пятница", "суббота");
Длину массива можно узнать с помощью свойства length. Вызов функции alert(days_of_week.length) выведет число 7.
Можно вывести все элементы массива:
alert (days_of_week);
В этом случае в окне сообщения будут перечислены элементы массива через запятую.
4.4. Выражения, условия и операции
4.4.1. Арифметические операции
Обозначение четырёх основных арифметических операций в JavaScript – традиционное для языков программирования: «+» – сложение; «‑» – вычитание; «*» – умножение; «/» – деление. Имеется также операция «остаток от деления», обозначаемая символом «%» (процент). Они выполняются в порядке приоритета: сначала – умножение, деление и остаток от деления слева направо, затем – сложение и вычитание слева направо. Например, значение выражения 2 + 2 * 2 равно 6, так как сначала выполняется умножение, затем сложение.
Для изменения порядка действий можно использовать круглые скобки. Например, значение выражения (2 + 2) * 2 равно 8.
4.4.2. Операции сравнения
Операции сравнения выполняются между двумя числовыми операндами. Их результатом является логическое (булево) значение, т.е. true (истина) или false (ложь).
В языке JavaScript имеются следующие операции сравнения: «равно» (==), «больше» (>), «меньше» (<), «больше или равно» (>=), «меньше или равно» (<=) и «не равно» (!=).
