Web–технологии, языки и средства создания Web–приложений

     До  создания CSS оформление стиля Web страницы производилось непосредственно внутри самого содержимого документа. Однако с использованием CSS появилась возможность принципиально разделить содержания и описание стиля документа. Благодаря этому стало возможным лёгкое применение единого стиля при создании похожих документов, а также это оформления можно изменить легко и быстро. Появилась возможность создать несколько вариантов дизайна страницы для разных устройств, на котором ее можно просмотреть. Например, на мониторе дизайн страницы будет иметь большую ширину, при отправке документа на печать буду отбрасываться такие элементы как меню, а на КПК или сотовом будет масштабирование уменьшающее искажение текста страницы. За счет того, что таблицы стилей хранятся в отдельном файле CSS, уменьшается время загрузки страницы. В этом случае браузер получает только описание структуры документа и данные, находящиеся на Web странице, а стиль оформления этих данных загружается браузером при первом обращении и потом берется из КЭШа. Последующее изменения дизайна сайта так же значительно упрощается. Нет необходимости изменять каждую страницу,  лишь нужно внести изменения в CSS–файл. Но у CSS есть также и недостатки. Различное отображение вёрстки в различных браузерах, которые по–разному отображают одни и те же данные CSS.

     Для работы с CSS есть большое количество различных программных продуктов, но они не получили большого распространения. Как правило, объем CSS, кода по соотношению с HTML, не такой большой. И почти все HTML редакторы имеют поддержку синтаксиса CSS. Из отдельных решений можно выделить TopStyle, данный программный продукт предназначен для создания стилей CSS. Очень полезным в нем является модуль Style checker, с помощью него можно не только проверить правильность синтаксиса таблицы стилей, но и проверить формат представления данных в зависимости от браузера. Таким образом, при его помощи можно создавать стили, которые будут одинаково отображаться в разных браузерах. Также существуют визуальные CSS редакторы, но из них сложно выделить какой–то наиболее достойный.

2. JavaScript

       Несмотря  на то, что JavaScript не является стандартом W3C, мы рассмотрим его в данном контексте, и как часть DHTML.

       JavaScript – это объектно-ориентированный скриптовый язык программирования. JavaScript встраиваемый язык, используемый для доступа к объектам в приложениях. Он нашел очень широкое применение при создании Web–страниц. JavaScript очень похож на язык Си, но все же имеет кардинальные отличия: Структуру объектов и тип объектов (например переменных, функций) можно определить в процессе выполнения кода. В JavaScript действует автоматическое приведение типов данных. Также автоматической является контроль памяти и защита от утечек. Функции в языке программирования JavaScript могут быть без имени. Все описания переменных, функции и других элементов регистрозависимы, названия переменных могут содержать буквы, символ подчёркивания, символ доллара и арабские цифры. При этом названия переменных не должны начинаться с цифры. Стоит отметить, что JavaScript не поддерживает области видимости, не умеет работать с файловой системой и потоками ввода/вывода, не имеет сетевых интерфейсов. Это сделано для обеспечения безопасности, так как скрипт на языке JavaScript легко запустить на любом компьютере, для этого будет достаточным открыть на нем Web–страницу, содержащую скрипт. Также для повышения безопасности скрипт не может получить доступ к свойствам другой страницы.

       Использовать JavaScript на странице, можно при помощи тегов <script> </script>. Например: 

       <script type="text/javascript">

       alert('Hello, World!');

       </script> 

       Также скрипт может быть сохранен в отдельном  файле. 

       <scripttype="text/javascript"src=http://Путь_к_файлу_со_скриптом > </script> 

Язык  JavaScript дает создателю страницы очень широкие возможности для выполнения скриптов и как следствие качественно новые горизонты для создания динамических элементов на Web–страницах. JavaScript позволяет автоматически заполнять данные в формах, изменять форматирование и стиль страницы. Скрывать ненужное содержимое и отображать нужное содержимое, менять поведение клиентской части Web–приложений, изменять элементы управления на странице и так далее.  При этом язык довольно простой для понимания, и большая часть функции выполняется автоматически.

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

3. Объектная модель документа

     Document Object Model (DOM) это интерфейс, предоставляющий возможность программам или скриптам обратиться к содержимому HTML – страниц, XHTML и XML–документов, а также позволяет менять содержимое страницы, структуру страницы и оформление документа в целом.

     Объектная модель может быть применена к любому документы. Абсолютно любой документ, у которого известна структура может быть представлен в виде дерева в модели DOM, каждый узел такого дерева представляет собой элемент документа, его атрибут, текстовый, графический или объект любого другого типа. Одни узлы являются родительскими по отношению к другим и наоборот, другие узлы являются дочерними.

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

     Уровень 0

     Состоит  из неупорядоченных моделей DOM, которые были до появления Уровня 1, например document.images, document.forms, document.layers и document.all. Стоит отметить, что уровень 0 является лишь описанием того что было, не стоит использовать его описание и руководствоваться им.

     Уровень 1

     Описывает основные возможности DOM для разбора HTML и XML документов, такие как построение дерева узлов отражающих структуру документа, возможность изменять и добавлять узлы и как следствие сам документ.

     Уровень 2

     Поддержка так называемого пространства имён XML <––filtered views––> и событий.

     Уровень 3

     Состоит из шести различных спецификаций DOM:

     Level 3 Core;

     Level 3 Load and Save;

     Level 3 XPath;

     Level 3 Views and Formatting;

     Level 3 Requirements;

     Level 3 Validation.

     Описание  всех этих уровней является дополнительными  расширениями DOM. 
 

     Для примера рассмотрим HTML документ: 

     <html>

     <head>

     <title>Заголовок</title>

     </head>

     <body>

     документ

     </body>

     </html> 

     Ему будет соответствовать дерево 

       

     Рис. 1 Пример дерева для простой HTML страницы 

     Теги  образуют узлы – элементы. Текст представлен текстовыми узлами. И те и другие – являются равнозначными узлами дерева DOM. Каждый узел содержит свойства, отражающие структуру документа, и дающие возможность передвигаться по дереву.

Не беря в  учет, рассмотренный ранее пример, в настоящем документе основанием дерева будет объект document. У него есть дочерние узлы, но отсутствуют родительский узел  и узлы равнозначного уровня, начальный узел должен быть единственным. У узла document есть функции для перехода к другим узлам, создания или изменения узлов в дереве документа. 

getElementById()

getElementsByTagName()

createElement()

createAttribute()

createTextNode() 

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

document.documentElement – возвратит тэг <html>.

document.lastChild – возвращает последний дочерний элемент

document.firstChild – возвращает первый дочерний элемент

Помимо перемещения  по дереву мы можем обратиться напрямую к элементу с помощью document.getElementById(). Например:

для кода 

<p id="myID">Здесь какой–то текст.</p> 

Мы можем обратиться к нему следующим образом 

alert(document.getElementById("myID").tagName);

 

Таблица 1. Типы узлов в модели DOM 

     Мы  можем создавать, удалять и изменять узлы тем самым изменяя структуру  документа, представленного с помощью DOM. Для создания узла, используется метод document.createElement(), ему передается название тэга, передаваемый параметр регистронезависимый. Например: 

var element = document.createElement("div");

alert(element.tagName); 

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

     Рассмотренный подход к представлению документа  довольно интересный, так как структура документа и все его содержимое представляется в виде дерева. При этом изменяя узлы дерева, можно менять сам документ, и таким образом мы имеем доступ ко всем элементам Web–страницы.

4. Средства  разработки HTML страниц

       Для создания Web–страниц будет достаточно любого текстового редактора. Процесс создания Web страницы это процесс написания ее кода на языке HTML, PHP или каком–то другом. Но простой текстовый редактор не обладает никаким функционалом конкретно для работы с Web–технологиями. Существует огромная масса различных специализированных редакторов для создания Web–приложений. Причем для каждой технологии, как правило, существует отдельный редактор в виде отдельного приложения.

       Редакторы HTML кода можно разделить на 2 большие группы. Первая группа это редакторы, которые работают непосредственно с исходным кодом, предоставляют широкие возможности подсветки синтаксиса, проверки правильности документа, функции автодописывания конструкции языка. Преимуществами использования такого редактора будет то, что весь код находиться перед глазами, и тем самым обеспечивается полный контроль над содержимым Web–страницы. Вторая группа это WYSIWYG – редакторы. Особенностью таких редакторов является то, что они позволяют создавать и изменять Web–страницу непосредственно видя ее на экране. То есть, свойства страницы, такие как заголовок, типы шрифтов, текст задаются перестакиванием элементов с панели элементов и изменением их атрибутов. Все элементы языка в таком редакторе расположены на панели инструментов и добавляются на странице простым перетаскиванием их туда.

       К первой группе редакторов можно отнести  следующие программные продукты:

1. Aptana Studio – среда разработки для создания Web – приложений, поддерживает подсветку и автодописывание текста HTML, JavaScript, CSS. А также множества других языков при помощи подключения дополнительных модулей.
2. Notepad++ – текстовый редактор, который позиционируется как замена обычному блокноту, в нем реализована подсветка синтаксиса различных языков программирования.
3. SciTE – довольно распространенный редактор, с поддержкой большого количества языков программирования, языков разметки. Обладает различными дополнительными функциями для удобства программистов.