Разработка 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

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

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

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

Все эти окна созданы  на языке JavaScript:

a Alert (Предупреждение) - служит для вывода информации;

a Confirm (Подтверждение) - предназначено для вывода информации и позволяет пользователю сделать выбор в форме ответа Да/Нет на вопрос;

a Prompt (Запрос) - служит для вывода информации и позволяет пользователю ввести ответ с клавиатуры.

Объекты, методы и свойства

Вы, вероятно, слышали о том, что  JavaScript - объектно-ориентированный язык. Но что это означает? Чтобы это понять, вам следует ознакомиться с тремя терминами:

Q объекты;

а методы;

а свойства.

Сначала рассмотрим их в общих чертах. Чем дальше вы продвинетесь в изучении JavaScript, тем чаще вам придется ими пользоваться, так что более близкое знакомство оставим на будущее.

Объекты

Говоря простым языком, объект (object) - это какой-либо предмет. Подобно тому, как в реальном мире все одушевленные и неодушевленные предметы являются объектами (машины, собаки и пр.), объектами считаются и составляющие компьютерного мира.

Что касается JavaScript, его объекты находятся внутри браузера. Это, в частности, окно браузера, формы и их части, например кнопки и текстовые окна. В JavaScript также имеется собственная группа встроенных объектов, к которым относятся массивы, данные и т.д. Сейчас вам не обязательно фиксировать на этом внимание, поскольку все эти объекты будут рассмотрены позже. Пока вы должны усвоить лишь необходимые определения.

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

Методы

Метод (method) - это действия, которые может выполнять объект. В реальном мире у объектов тоже имеются какие-либо методы. Машины ездят, собаки лают, доллар покупается и т.д. В нашем случае alert () является методом объекта Window, то есть объект Window может выдавать пользователю какое-либо предупреждение в окне сообщений. Примерами других методов являются открытие и закрытие окон, нажатие кнопок. Здесь речь идет о трех методах: open (), close () и click (). Обратите внимание на круглые скобки. Они означают, что методы, в отличие от свойств, используются.

Свойства

У всех объектов имеются свойства (properties). Если вы и далее будете следовать аналогии с объектами реального мира, то обнаружите, что все предметы обладают какими-то свойствами: у машин есть колеса, а у собаки - шерсть. Что касается JavaScript, то у такого объекта, как браузер, имеется название и номер версии.

Управление  данными с помощью переменных

 

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

Значения в языке JavaScript

Самое ценное в нашем мире —  это информация. Каждый фрагмент информации в JavaScript рассматривается как значение (value). Так как информация может быть очень разнообразной, имеются различные категории значений. Простейшие типы данных в JavaScript принято называть основными типами (primitive types).

Три основных типа данных:

а строка (string); а число (number); а булево выражение (boolean).

Строки

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

Здравствуйте и добро пожаловать!

Кто вы?

Мой рост - шесть футов.

Строки, вставляемые в сценарий JavaScript, заключаются в двойные или одинарные кавычки, например:

"Здравствуйте и добро пожаловать!"

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

"J'm 6 feet tall"

'"Кто вы?" - спросил он.'

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

Числа

JavaScript воспринимает два типа чисел. Это целые числа (integer) и числа с плавающей точкой (floating-point number).

Целые числа

Включают в себя положительные  целые числа, например 1,2,3, отрицательные целые числа, например -1, -2, -3 и нуль - 0.

Хотя большинство чисел, используемых в JavaScript, записываются в десятеричной системе счисления, могут применяться также восьмеричная и шестнадца-теричная системы.

Примечание     В книге используется только десятеричная система счисления.

Числа с плавающей  точкой

Числа с плавающей точкой представляют собой числа с дробной десятичной частью:

3.1415926535897932384626433832795

Либо это числа, выраженные в  экспоненциальном виде:

3.76е2

Примечание     При экспоненциальной записи числа символ <se» в верхнем или нижнем регистре означает «10 в степени»-.

Число, начинающееся с нуля и содержащее десятичную точку, считается числом с плавающей точкой.

Предупреждение     Число, начинающееся с нескольких нулей и содержащее десятичную точку (например, 005.5) воспринимается как ошибка.

В табл. 4.1 приводятся примеры чисел, использующихся в JavaScript, чтобы вам проще было освоиться с ними.

Большие и маленькие  числа

Таблица 4.1. Примеры чисел, использующихся в JavaScript

 

Число

Описание

Десятичный эквивалент

91

Целое число

91

4.56е2

Число с плавающей точкой

456

0.001

Число с плавающей точкой

0.001

00.001

Ошибка

 

0.001

Четыре равных числа

0.001

.001

с плавающей точкой

 

1е-3

   

1.0е-3

   

Числа, используемые в JavaScript, могут быть как очень большими, так и очень маленькими. Под очень большими подразумеваются величины до 10308 (единица с тремястами восемью нулями), а под очень маленькими - Ю~308 (нуль целых с тремястами семью нулями и единицей после запятой).

Булевы выражения

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

Булевыми эти выражения  названы в честь английского  математика Джорджа Буля (1815-1864).

Ниже помещены примеры булевых  выражений:

Собака лает = true

У собаки пять ног = false

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

Особые типы данных: числа, неопределенные и неопределяемые выражения

Помимо рассмотренных типов  данных, встречаются еще несколько  основных, менее очевидных типов. Далее приводятся четыре числовых значения:

а положительная бесконечность;

О отрицательная бесконечность;

а положительный и отрицательный  нуль;

а несуществующее число (not a number - NaN) .

Имеются еще два специальных  типа данных:

а неопределенный (null);

а неопределяемый (undefined).

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

Неопределенный тип может иметь  только одно значение - null. В данном случае это свидетельствует о полном отсутствии полезной информации или каких-либо данных.

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

Переменные в языке JavaScript

 

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

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

Переменная - это имя, присваиваемое  ячейке памяти компьютера, которая  хранит определенные данные во время исполнения сценария JavaScript. Возможно, это определение кажется несколько сложным, но на самом деле пользоваться переменными очень просто.

Создание переменных

В языке JavaScript переменные создаются довольно легко. Давайте вернемся к стандартному шаблону HTML, чтобы сразу ввести вас в курс дела:

<html>

<head>

<11Ь1е>Простая страница</(:И:1е>

<script language="JavaScript">

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

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

</script>

</head>

<body>

</body> </html>

Прежде всего нужно создать  переменную. Это можно сделать  двумя путями: объявив ее заранее или создав «на лету». Сначала будут рассматриваться переменные, объявляемые заранее. Позже в этой главе рассказывается, каким образом они создаются «на лету».

Пример. Чтобы объявить (создать) переменную, в языке JavaScript используется оператор var, вслед за которым указывается имя, которое вы хотите присвоить переменной. В данном примере объявляется переменная под названием msg:

<html>

<head>

<Ь1(:1е>Простая страница</{:1(;1е>

<script language="JavaScript">

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

var msg;

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

</script>

</head>

<body>

</body> </html>

Оператор равноценен законченному предложению в английском языке. Более подробно речь об этом пойдет в седьмой главе.

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

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

а до объявления переменной ее значением  считается undefined;

Q имя переменной не может начинаться с цифры;

а в именах переменных недопустимы  пробелы; если необходим разделитель, используется символ подчеркивания (_);

а в именах переменных следует избегать символа доллара ($) поскольку он не воспринимается, браузерами Internet Explorer 3.02 (поддерживающим JScript 1.0) и Netscape Navigator 2.02;

а следует избегать использования  имен переменных, отличающихся только символами верхнего и нижнего регистра (например, msg и MsG), поскольку JScript 1.0 не сумеет их различить.

Рассмотрим следующие примеры  корректных имен переменных:

msg

Hello_all Msgl Msg_l

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

a Imsg - начинается с цифры;

Qhelloall- содержит пробел;

a var- зарезервированное слово JavaScript;

Q dollar$ - в имени содержится символ $;

а msg и Msg - не используйте такие имена в одном сценарии, поскольку различаются они только регистром.

Пример. Если вы хотите присвоить значение только что объявленной переменной, это можно сделать в той же строке:

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