Разработка информационного WEB-сайта

• Динамическое создание документа с помощью сценария
• Оперативная проверка достоверности заполняемых пользователем полей форм HTML до передачи их на сервер
• Создание динамических HTML-страниц совместно с каскадными таблицами стилей и объектной моделью документа.
• Взаимодействие с пользователем при решении “локальных” задач, решаемых приложением JavaScript, встроенном в HTML-страницу

Что необходимо сделать, чтобы запускать скрипты, написанные на языке JavaScript? Вам понадобится браузер, способный работать с JavaScript – например,00ь ь                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Netscape Navigator (начиная с версии 2.0) или Microsoft Internet Explorer (MSIE - начиная с версии 3.0). С тех пор, как оба этих браузера стали широко распространенными, множество людей получили возможность работать со скриптами, написанными на языке JavaScript. Несомненно, это важный аргумент в пользу выбора языка JavaScript, как средства улучшения ваших Web-страниц.

Как и любой другой язык программирования, JavaScript использует переменные для хранения данных определенного типа. Реализация JavaScript является примером языка свободного использования типов. В нем не обязательно задавать тип переменной. Ее тип зависит от типа хранимых в ней данных, причем при изменении типа данных меняется и тип переменной.

JavaScript поддерживает четыре простых типа данных:

• Целый
• Вещественный
• Строковый
• Булевый, или логический

Для присваивания переменным значений основных типов применяются литералы – буквенные значения данных соответствующих типов.

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

123 // целое положительное  число

-123 // целое отрицательное  число

+123 // целое положительное  число

Для задания вещественных литералов используется синтаксис  чисел с десятичной точкой, отделяющей дробную часть числа от целой, или запись вещественных чисел в научной нотации с указанием после символа “e” или “E” порядка числа. Пример правильных вещественных чисел:

1.25 0.125e01 12.5E-1 0.0125E+2

Строковый литерал – последовательность алфавитно-цифровых символов, заключенная в одинарные (‘) или двойные кавычки (“), например: “Ира”, ‘ИРА’. При задании строковых переменных нельзя смешивать одинарные и двойные кавычки. Недопустимо задавать строку, например, в виде “Ира’. Двойные кавычки – это один самостоятельный символ, а не последовательность двух символов одинарных кавычек. Если в строке нужно использовать символ кавычек, то строковый литерал необходимо заключать в кавычки противоположного вида:

“It’s a string” // Значение строки равно It’s a string

Булевы литералы имеют два значения: true и false, и используются для обработки ситуаций да/нет в операторах сравнения.

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

Temp1

MyFunction

_my_Method

Язык JavaScript чувствителен к регистру. Это означает, что строчные и прописные буквы алфавита считаются разными символами.

Определить переменную можно двумя способами:

• Оператором var
• Оператором присваивания (=)

Оператор var используется как для задания, так и для инициализации переменной и имеет синтаксис:

var имя_переменной [= начальное_значение];

Необязательный оператор присваивания задает данные, которые  содержит переменная. Их тип определяет и тип переменной. Например, следующий  оператор

var weekDay = “Пятница”;

задает переменную weekDay, присваивает ей строковое значение “Пятница”, и тем самым определяет ее тип как строковый.

Если при определении  переменной ей не присвоено никакого значения, то ее тип не определен. Ее тип будет определен только после  того, как ей будет присвоено некоторое  значение оператором присваивания =.

2.2 Объектная модель JavaScript.

Скриптовые языки в  некотором роде перевернули мир, и именно благодаря им появился DHTML, который позволяет делать со страничкой практически что угодно. Как известно, всего два языка претендуют на лавры победителя в броузере. Это VBScript – подмножество Visual Basic-а и JavaScript.

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

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

• Страничка скачивается с сайта и размещается в памяти компьютера;
• Производится анализ странички, в результате которого она препарируется на составляющие;
• Блоки, из которых состоит страничка (<body></body>, <head></head>, <p></p> и т.д.) размещаются во временной базе данных соответственно структуре объектной модели;
• База данных становится доступной другим программам и, в частности, рендеру, который выводит страничку на экран. Для доступа и управления содержимым этой базы данных броузер предоставляет нам механизм объектов и скриптовый язык, посредством которого и выполняется доступ.

Разумеется, содержимое базы может быть изменено до вывода на экран, что и позволяет работать DHTML. Но объектная модель остается работать даже после того, как страничка показана на экране дисплея. Это дает нам возможность в небольших пределах (а в последних версиях HTML 4.0 практически полностью) менять содержимое странички после загрузки.

Рассмотрим общую структуру  объектной модели. Ниже приведена объектная модель Internet Explorer-а версии 4 и выше.

• window - объект, дающий доступ к окну броузера
• frames - объект, дающий доступ к фреймам
• window...
• window...
• ...
• document - объект, содержащий в себе всю страничку
• all - полная коллекция всех тегов документа
• forms - коллекция форм
• anchors - коллекция якорей
• appleеs - коллекция апплетов
• embeds - коллекция внедренных объектов
• filters - коллекция фильтров
• images - коллекция изображений
• links - коллекция ссылок
• plugins - коллекция подключаемых модулей
• scripts - коллекция блоков <script></script>
• selection - коллекция выделений
• stylesheets - коллекция объектов с индивидуально заданными стилями
• history - объект, дающий доступ к истории посещенных ссылок
• navigator - объект, дающий доступ к характеристикам броузера
• location - объект, содержащий текущий URL
• event - объект, дающий доступ к событиям
• screen - объект, дающий доступ к характеристикам экрана

Как видите, структура  объектной модели достаточно сложна, но строго определена, и существует однозначный способ доступа к любому свойству или методу. Синтаксис полностью соответствует тому, что используется в объектных языках. Т.е. нижележащие объекты отделяются от выше лежащих точкой, и для доступа к конкретному свойству нужно просто корректно построить строку доступа.

И, как Вы понимаете, вот  здесь-то на сцену и выходит скриптовый язык, который и позволяет нам  манипулировать объектами.

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

Код на JavaScript обычно состоит  из двух частей:

1. Функции, которые вызываются из кода странички в ответ на какое-то событие;
2. Код событий, которые вызывают функции.

Описание функций должно располагаться в теге <head></head> - это гарантирует нам, что к моменту вызова функции она уже будет находиться в памяти компьютера. Для вставки кода используется специальный тег <script>, в параметрах которого мы и определяем конкретный язык. Вот пример типичного описания JavaScript-вставки:

<script language="JavaScript">

<!--

function somefunction()

{

   // здесь располагается  код функции

}

//-->

</script>

Сам код заключен в тег комментария. Это сделано для того, чтобы более старые броузеры игнорировали непонятные им команды. Новые же программы знают о существовании закомментированных скриптов и им это не мешает.

Заметьте также, что  закрывающий тег комментария  несколько необычен и предваряется двумя косыми чертами. Две косые  черты - это комментарий языка JavaScript, т.е. скрипт игнорирует все, что идет после него. А сделана такая сложная конструкция ради совместимости с Netscape, который закрывающий HTML-комментарий воспринимает как непонятную ему команду и, соответственно, вызывает ошибку.

А как будет выглядеть наша страница, если браузер не воспринимает JavaScript? Браузеры, не имеющие поддержки JavaScript, "не знают" и тэга <script>. Они игнорируют его и печатают все стоящие вслед за ним коды как обычный текст. Иными словами, читатель увидит, как код JavaScript, приведенный в нашей программе, окажется вписан открытым текстом прямо посреди HTML-документа.

События и обработчики  событий являются очень важной частью для программирования на языке JavaScript. События, главным образом, инициируются теми или иными действиями пользователя. Если он щелкает по некоторой кнопке, происходит событие "Click". Если указатель мыши пересекает какую-либо ссылку гипертекста - происходит событие MouseOver. Существует несколько различных типов событий. Мы можем заставить нашу JavaScript-программу реагировать на некоторые из них. И это может быть выполнено с помощью специальных программ обработки событий. Так, в результате щелчка по кнопке может создаваться выпадающее окно. Это означает, что создание окна должно быть реакцией на событие щелка - Click. Программа - обработчик событий, которую мы должны использовать в данном случае, называется onClick. И она сообщает компьютеру, что нужно делать, если произойдет данное событие. Приведенный ниже код представляет простой пример программы обработки события onClick:

<form>

<input type="button" value="Click me" onClick="alert('Yo')">

</form>

Данный пример имеет  несколько новых особенностей - рассмотрим их по порядку. Вы можете здесь видеть, что мы создаем некую форму  с кнопкой (как это делать - проблема  языка HTML, так что рассматривать это здесь я не буду). Первая новая особенность - onClick="alert('Yo')" в тэге <input>. Как мы уже говорили, этот атрибут определяет, что происходит, когда нажимают на кнопку. Таким образом, если имеет место событие Click, компьютере должен выполнить вызов alert('Yo'). Это и есть пример кода на языке JavaScript (Обратите внимание, что в этом случае мы даже не пользуемся тэгом <script>). Функция alert() позволяет Вам создавать выпадающие окна. При ее вызове Вы должны в скобках задать некую строку. В нашем случае это 'Yo'. И это как раз будет тот текст, что появится в выпадающем окне. Таким образом, когда читатель когда щелкает на кнопке, наш скрипт создает окно, содержащее текст 'Yo'.

 

Глава III. Практическая часть.

           На основании описанного материала  мною был создан сайт языке  программирования HTML.

Структура сайта:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

    На главной  странице представлено меню. Оно  состоит из нескольких пунктов: О школе, родителям, фотогалерея и др.

 

 

1. Рассмотрим пункт меню родителям. На данной странице представлена информация интересная для родителей: правила приема в первый класс, права родителей и др.

Следующая страница: фотогалерея. Здесь представлены фото из жизни школы.

 

 

2. Страница Видео. Здесь представлены видеоматериалы по подготовке к ЕГЭ, которые могут помочь ученику при подготовке к Единому Государственному Экзамену.

 

 

 

3. Следующая страница новости в образовании. Статьи про ЕГЭ, расписание проведения ЕГЭ в 2013 году.

 

 

В свою очередь страница новости в образовании делиться на страницу  «К 2013 году в Росси планируется модернизировать ЕГЭ»