Проектирование инт-прил / лекции / Проектирование инет приложений

JavaScript

Есть несколько способов доступа к DOM-объектам. Наиболее распространенные из них на сегодняшний день базируются на языке JavaScript и его расширениях. Причины такого распространения в том, что JavaScript работает практически во всех существующих браузерах и прекрасно интегрирован с HTML/CSS.

JavaScript- это интерпретируемый язык, так называемый "скрипт". Между текстовым представлением программы и ее выполнением нет промежуточных стадий, нет компиляции и компоновки. Написанный Вами текст будет выполняться построчно при помощи специальной встроенной в браузер программы-интерптератора.

JavaScript- это объектно-ориентированный язык. Иногда его называют "прототипно-ориентированный": особенность языка заключается в том, что в нем нет классов. Классов нет, а объекты - есть. Более того, любая "сущность" в языке есть объект, который может быть перекрыт и изменен. Вы можете изменить, например, поведение целого числа (int), добавив ему какие-то специфические нужные Вам методы. Достигается это за счет использования прототипов. JavaScript - слаботипизованный язык, контроль типов существует, но не является строгим. Поскольку "все в языке есть объект" и контроль типов слабый, то одной и той же переменной можно присваивать все что угодно: целые числа, вещественные числа, функции, другие объекты и так далее.

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

Существует три способа вставить JavaScript в HTML-страницу.

внутри страницы:

alert('Hello, World!');

</script>

внутри тэга. Данный пример уже приводился при обсуждении событий DOM:

<td id="firstCell"

onclick="alert('Вы нажали на первый столбец');"

>Первый столбец</td>

вынесение скрипта в отдельный файл. Файл со скриптом подключается при помощи следующей конструкции:

JavaScript применяется не только в клиентской части вэб-приложений. На его основе построен ряд серверных средств, например NodeJS. Кроме того, JavaScript широко используется в браузерных операционных системах (IndraDesktop WebOS, IntOS).

JQuery

JQueryпредставляет собой популярную библиотекуJavaScript, которая позволяет писать более высокоуровневые, более управляемые программы на языкеJavaScript. Использование JQuery на начальном этапе может вызывать некоторые трудности из-за несколько необычного, "нечеловеческого" синтаксиса. А между тем суть довольно проста. Вся работа с JQuery ведется с помощью функции $. Условно можно разделить два способа применения функции $:

$("селектор")- возвращает объектJQuery. При этом "селектор" - выражение, согласно которому отбираются DOM - объекты. Это выражение по своему синтаксису полностью соответствует принятым в CSS соглашениям. Например:

$("#mydiv")- возвращает объект сid="mydiv"

$(".greenPanel")- возвращает все объекты данного HTML-документа, для которых установленclass="greenPanel".

$("a")- возвращает все ссылки, существующие в данном документе.

$.some_func()- вызывает функцию JQuery. Можно привести следующие примеры вызова функций:

$.each([1,2,3], function() {

document.write(this + 1);

});

выведет на экран значения 234. Ниже приведены примеры применения функции $.ajax().

Каждый из операторов JQueryвозвращает объект, отобранный или измененный в результате проведенных манипуляции. Эта особенность позволяет проводить каскадирование операций. Например, объединение двух вышеперечисленных вариантов применения функции $:

$(".clickable").click(function() {

alert("Hello world!");

});

Эта конструкция добавит обработчик события click на все элементы документа, имеющие установленный class="clickable"

$("div.test").add("p.quote").addClass("blue").slideDown("slow");

В результате одной строки сначала находим на странице все элементы <div>, которые имеют установленный класс test. В полученное множество добавляем элементы <p>, имеющие классquote. Далее, всему полученному набору элементов устанавливаемclass="blue" и визуально плавно спускаем их вниз по экрану. Приведенные примеры демонстрирует емкость JQuery, возможность выполнения значительного числа операций небольшим количеством строк кода.

Библиотека JQuery состоит из ядра и набора подключаемых (при необходимости) частей - плагинов, выполняющих специализированные функции. Например, в виде отдельного плагина оформлены процедуры работы с пользовательским интерфейсом (JQuery UI).

AJAX

AJAX-AsynchronousJavascriptandXML- набор технологий, предназначенных для динамического обмена данными с сервером.AJAXпозволяет обмениваться данными в фоновом режиме: пользователь не замечает, когда его браузер запрашивает данные. Это ассинхронная технология, то есть ждать ответа сервера (и "зависать" при этом) клиентскому приложению не нужно. Вместо этого в запросе указываются две функции, одна из которых будет отработана в случае успешного завершения запроса, а другая - в случае возникновения ошибки. Сама программа на клиентской части продолжает свое выполнение, не ожидая результата запроса. Совместно с DOM-моделью, AJAX позволяет сделать странички Web-приложений динамичными, интерактивными, "оживить" их поведение. Как это следует из названия,AJAXбазируется наJavaScript, является его расширением. Технологии AJAX поддерживаются практически всеми современными браузерами. В основе работыAJAXлежит объектXMLHttpRequest.JQueryсодержит набор функций ("обертки") для работы сAJAX, что позволяет писать ассинхронные запросы максимально простым способом. Следующий пример загружает с сервера JavaScript код и выполняет его:

$.ajax({

type: "GET",

url: "test.js",

dataType: "script"

});

Ниже приведен пример более сложного ассинхронного вызова метода на сервере с использованием JQuery:

$.ajax({

// URL вызваемого метода на сервере.

url: "http://myhost.com/some_method.php",

// Тип запроса, POST или GET.

type: 'POST',

// Будет запрос выполняться синхронно или ассинхронно.

// Как правило, параметр опускается, потому что по

// умолчанию async имеет значение true.

async: true,

// В каком виде передаются параметры запроса.

// JSON - JavaScript Object Notation, форма

// представления в текстовом виде значений

// и имен полей JavaScript-объектов.

dataType: "json",

// Параметры запроса, которые будут переданы

// вызываемому методу.

data: {

param1: value1,

param2: value2

// call-back функция, которая выполнится в случае

// успешного завершения вызова метода. Аргументом

// функции являются полученные с сервера данные.

success: function(data) {

// этот код выполнится не немедленно,

// а только после того, как с сервера

// придет "правильный" ответ.

some_function(data);

// Тоже не будет выполняться немедленно. Вместо этого выполнится

// в том случае, если вызов метода окончился ошибкой. Принимает

// три параметра: объект XMLHttpRequest, строка, описывающая тип

// случившейся ошибки и необязательный объект

// возникшего "исключения".

error: function(xhr, ajaxOptions, thrownError) {

execute_func(JSON.parse(xhr.responseText)['error_code']);

// Есть возможность установить функцию, которая будет

// выполняться после возвращения результата с сервера.

// Независимо от того, было ли выполнение удачным

// или вызвало ошибку.

complete: function( XMLHttpRequest, textStatus() {

});

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

Содержание