Разработка web сайта на основе HTML с использованием JavaScript

Автор работы: Пользователь скрыл имя, 23 Апреля 2013 в 08:20, курсовая работа

Краткое описание

Термин HTML (Hyper Text Markup Language) означает "язык маркировки гипертекстов". Это понятие более широкое, включает в себя Интернет и локальные сети, редакторы, браузеры, разнообразные програмные продукты, компакт-диски, обучающие курсы, дизайн и многое другое. HTML – своеобразная противоположность сложным языкам программирования, известным только специалистам.

Содержание

ВВЕДЕНИЕ 4
ИСТОРИЯ HTML 5
ВЕРСИИ HTML 5
ГИПЕРТЕКСТ 6
СТРУКТУРА WEB-СТРАНИЦЫ 8
<HTML></html> 8
<HEAD></head> 9
<TITLE></title> 9
<STYLE></style> 9
<META> 9
<BODY></body> 9
<!-- Комментарий --!> 10
<H1><h1> 10
<HR> 10
<A></a> 11
Переход внутри одного документа 11
Переход к другому документу 12
<BASE> 14
ПРАВИЛА СИНТАКСИСА 15
КОДИРОВАНИЕ СИМВОЛОВ 16
ИСПОЛЬЗОВАНИЕ СИМВОЛОВ 16
УПРАВЛЕНИЕ ЦВЕТОМ 18
КОНСТРУКТОР ДОКУМЕНТОВ 20
ПРИЛОЖЕНИЕ. СТРУКТУРА ПРИЛОЖЕНИЯ 20
ЦЕПОЧКА 20
Применение цепочек 21
ИЕРАРХИЯ 22
УЛОЖИМ КАРТИНКУ В ФОНОВЫЙ ПАРКЕТ 23
ГРАФИКА 27
ФОРМАТ GIF 27
ФОРМАТ JPG 27
КАК ПРОГРАММИРОВАТЬ КАРТИНКИ 28
Картинка в тексте 28
Картинка как ссылка 29
ПОСТРОЕНИЕ ТАБЛИЦ. 30
ЧТО ТАКОЕ ТАБЛИЦА 30
КАК ЗАДАТЬ ТАБЛИЦУ 30
Атрибуты команды TABLE 31
Атрибуты команды TR 31
Атрибуты команды TD (TH) 32
МНОГОЛИКИЕ ТАБЛИЦЫ 33
Страничные отступы 33
Замечание 34
Многоколонная верстка 34
Наложение картинок 34
Замечание 35
ТАБЛИЦЫ СТИЛЕЙ 36
УРОВНИ CSS 36
СПОСОБЫ ОПРЕДЕЛЕНИЯ ТАБЛИЦ СТИЛЕЙ 36
ЗАПИСЬ ШАБЛОНА CSS 38
Группировка и наследование 38
Селекторы 39
Псевдоклассы 40
Применение таблиц стилей CSS 40
CSS в форматировании текста 40
Единицы измерения в таблицах стилей 41
Структурное форматирование 42
ВВЕДЕНИЕ В JAVASCRIPT 44
ИСПОЛЬЗОВАНИЕ JAVASCRIPT 44
ВАЖНОСТЬ ИЗУЧЕНИЯ JAVASCRIPT 44
JAVASCRIPT В ДЕЙСТВИИ 44
Ввод/вывод информации с помощью JavaScript 45
Объекты, методы и свойства 45
УПРАВЛЕНИЕ ДАННЫМИ С ПОМОЩЬЮ ПЕРЕМЕННЫХ 46
Значения в языке JavaScript 46
Переменные в языке JavaScript 48
МАССИВЫ JAVASCRIPT И ESCAPE-ПОСЛЕДОВАТЕЛЬНОСТИ 49
Как пользоваться массивами 50
ВЫРАЖЕНИЯ, УСЛОВИЯ, ОПЕРАЦИИ, СТРОКИ И ЧИСЛА 52
Что такое выражения и условия 52
Знакомство с операциями 53
СОЗДАНИЕ СЦЕНАРИЕВ С ПОМОЩЬЮ ФУНКЦИЙ И СОБЫТИЙ 56
ОПИСАНИЕ БРАУЗЕРОВ 59
ПРОСМОТР WEB-СТРАНИЦ 59
MICROSOFT INTERNET EXPLORER 59
NETSCAPE COMMUNICATOR 61
ТЕРМИНОЛОГИЯ 64
ПРАКТИЧЕСКАЯ ЧАСТЬ 67
СПИСОК ЛИТЕРАТУРЫ 68

Скачать полностью (446.44 Кб) Сколько стоит заказать работу?

Прикрепленные файлы: 1 файл

А Руденко Курсовая.docx

— 474.76 Кб (Скачать документ)

<html>

<head>

<title>npocTaH cTparoma</title>

<!-- Маскируемся!

var msg = "Добро пожаловать в мир переменных JavaScript!";

// Снимаем маскировку. -->

</script>

</head>

<body>

</body> </html>

Массивы JavaScript и Escape-последовательности

В предыдущей главе вы научились пользоваться переменными. В этой главе вы узнаете о новой разновидности переменных, которые способны хранить в себе несколько значений, - о массивах. Здесь рассказывается:

а как пользоваться массивами;

а как создаются массивы;

а как создаются элементы массива;

а как пользоваться знаками переключения кода.

Как пользоваться массивами

Массив (array) - мощное средство программирования для любого языка, в том числе в JavaScript. Массив позволяет сохранять несколько независимых значений в одной переменной. Обычно эти значения как-то связаны (например, названия дней недели). Преимущество массивов заключается в том, что правильное их использование значительно упрощает код и помогает избежать создания множества переменных с похожими именами.

Итак, посмотрим, как следует создавать массивы и пользоваться ими.

Пример. В первую очередь вам нужно создать массив:

<html>

<head>

<title>npocTan страница</Ь1(;1е>

<!-- Маскируемся!

var days_of_week = new Array(7);

// Снимаем маскировку. -->

</script>

</head>

<body>

</body> </html>

Эта простая строка сценария приводит к нескольким различным последствиям:

а создается переменная days_pf_week;

а с помощью new Array () указывает, что новая переменная является массивом; а определяется размер массива (в данном случае - 7).

Таким образом, созданы семь пустых ячеек, или элементов, которым нужно присвоить некоторые значения.

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

days_of_week[x] = значение;

В данном случае х означает номер элемента.

Прежде всего обратите внимание, как JavaScript нумерует элементы. Он рассматривает первый элемент массива не как первый (с номером 1), а как нулевой (с номером 0). То есть в данном примере дням недели будут соответствовать порядковые номера от 0 до 6, а не от 1 до 7.

Пример. Итак, чтобы присвоить соответствующее значение первому элементу массива (в данном случае это понедельник), выполняются следующие действия:

<html>

<head>

<title>ripocTaH страница</(;1<:1е>

< ! - - Маскируемся !

var days_of_week = new Array (7), •

days_of_week[0] = "Понедельник";

// Снимаем маскировку. -->

</script>

</head>

<body>

</body> </html>

Пример. Следуя этому образцу, вы можете заполнить массив соответствующими значениями:

<html>

<head>

<title>npocTafl CTpaHHt[a</title>

<!-- Маскируемся!

var days_of_week = new Array(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]

// Снимаем маскировку. -->

</script>

</head>

<body>

</body> </html>

Теперь вы можете извлекать из массива значения элементов. Как ранее элементам присваивались значения посредством имени переменной (в данном случае days_of _week) и указанного в квадратных скобках номера элемента (например, days_of_week[2]), так теперь этот формат используется для извлечения значений из массива.

Пример. Таким образом, чтобы вывести на экран значение третьего элемента в окне предупредительных сообщений, выполняются следующие действия:

<html>

<head>

<±1(;1е>Простая cTpamma</title>

<!-- Маскируемся!

var days_of_week = new Array(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[2]);

// Снимаем маскировку. -->

</script>

</head>

<body>

</body>

</html>

Примечание Не забывайте, что счет элементов массива начинается с нуля.

Пример. Здесь представлен еще один способ, которым достигается тот же результат:

<html>

<head>

<title>npocT3H cTparama</title>

<!-- Маскируемся!

var days_of_week = new Array(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] = "Воскресенье";

var x = 2;

alert(days_of_week[x]);

// Снимаем маскировку. -->

</script>

</head>

<body>

</body>

</html>

В данном случае создается переменная х и ей присваивается значение 2. Затем имя переменной х указывается в квадратных скобках, в результате чего из массива извлекается элемент с номером 2.

Выражения, условия, операции, строки и числа

Из предыдущей главы вы узнали, как в JavaScript пользоваться переменными и массивами для сохранения информации. В этой главе вы закрепите усвоенный материал и научитесь работать с этой информацией. Здесь рассматриваются следующие понятия:

а выражения;

а условия;

а различные операции и способы их использования;

G преобразование строки в число и наоборот.

Что такое выражения и условия

При изучении любого языка программирования (и JavaScript в том числе) время от времени приходится отвлекаться на попутные замечания. Давайте на минуту оторвемся от упражнений и рассмотрим новые термины.

Выражения и условия

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

Выражения (expressions) используются для комбинации двух или более значений, в результате чего получается третье, новое значение. Примером может служить сумма в следующем выражении:

1 + 2 = 3

Вы скомбинировали два значения (1 и 2), чтобы получить третье (3). Вот еще один пример:

3 + 3-1 = 5

Здесь комбинация трех значений (3,3 и 1) приводит к появлению нового значения (5).

Условия (conditions) позволяют сравнивать величины и определять логическое значение - true или false. Ниже приводится пример условия:

Лимоны желтые? Да.

Или другой пример:

3 + 3 = 6? Да.

Заметьте, что на оба этих вопроса можно дать только два ответа - да или нет (хотя на вопрос о лимонах можно ответить «наверное»). В языке JavaScript (и в других компьютерных языках) использование условий подразумевает только два результата - да или нет.

Изучение JavaScript полезно еще и тем, что в процессе учебы вы получаете представление о других языках программирования. К тому же после освоения одного языка легче овладевать остальными.

Знакомство с операциями

В выражениях и условиях данные комбинируются с помощью операций (operator). Если манипуляции осуществляются с какой-либо одной величиной, то такая операция именуется операцией с одним операндом (unary operator). Если таких величин две, то операция называется операцией с двумя операндами (binary operator), а если три - операцией с тремя операндами (ternary operator).

Давайте рассмотрим наиболее часто используемые операции.

Арифметические операции

Арифметические операции - это всем известные математические действия:

а сложение (+);

1 + 3 = 4 а вычитание (-);

2-1 = 4 Q деление (/);

4/2 = 2 а умножение (*);

2*2 = 4 а остаток от деления (%).

9 % 5 = 4

Это были операции с двумя операндами.

Единственная арифметическая операция, нуждающаяся в пояснении, - остаток от деления. То есть 9 делится на 5 с остатком 4. Иногда эту операцию также называют взятием по модулю. При использовании целых чисел результат также будет представлять собой целое число. Но если речь идет о действительных числах (с плавающей точкой, не целых), в результате получится действительное число. Например:

5.5 % 2.2 = 1.1

Будьте внимательны при использовании этих операций, поскольку при некорректном их выполнении они могут привести к результатам NaN (несуществующее число) или Infinity (бесконечность). Примером такой проблемной операции является деление на нуль.

Примеры сценариев JavaScript

Далее описывается несколько примеров использования арифметических операций. Здесь приводится только содержимое блока SCRIPT. Все примеры созданы на основе шаблона.

Пример. Операция сложения (+) -.

<!-- Маскируемся!

var а = 6, b = 4;

alert(a + b);

// Снимаем маскировку. -->

</script>

Пример. Операция вычитания (-) -.

<!-- Маскируемся!

var а = 6, b = 4;

alert(a - b);

// Снимаем маскировку. -->

</script>

Рис. 6.2. Использование операции вычитания

Пример. Операция деления (/) -.

Операции сравнения

Операции сравнения используются для сопоставления выражений. К ним относятся следующие операции:

а меньше (<);

5 < 6

а меньше или равно (<=);

<= 6 или 6 <= 7
а больше (>);
> 4

а больше или равно (>=);

5 >= 5 или 5 >= 4

а равно (==);

5 == 5

а не равно (!=).

5 != 3

Это были операции с двумя операндами.

В этих примерах сравниваются числовые данные, но те же самые операции могут выполняться и со строками (об этом речь пойдет позже). Единственное условие состоит в том, что нужно сопоставить величины, относящиеся к одному и тому же типу. В противном случае JavaScript попытается перевести данные из одного типа в другой, что не всегда удается. Чтобы избежать ошибок, сравнивайте данные только одного типа.

Логические операции

Принцип действия логических операций не так очевиден. Их функции станут понятнее, когда вы начнете использовать их с операторами, например с оператором if.

Далее перечислены три логические операции:

а логическое И (and);

&& а логическое ИЛИ (ог);

I I а логическое НЕ (not).

Логическое И и логическое ИЛИ - операции с двумя операндами, а логическое НЕ - операция с одним операндом. Они позволяют свести воедино результаты сравнений нескольких переменных.

Логическое И (&&) означает, что обе части выражения должны быть истинны. В качестве примера из жизни можно взять мысли водителя перед нажатием на педаль тормоза: машина едет слишком быстро && нужно затормозить.

Логическое ИЛИ (II) означает, что, по крайней мере, одна часть выражения должна быть истинной. Снова представим себе мысли водителя перед тем, как он включает фары: темнеет I I плохая видимость.

Информация о работе Разработка web сайта на основе HTML с использованием JavaScript