Сценарии на Стороне Клиента

CS380

Зачем использовать клиентское Программирование?

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

Зачем использовать клиентское Программирование?

преимущества программирования на стороне сервера (PHP):
безопасность: имеет

Javascript?

облегченный язык программирования ("язык сценариев")
используется для того, чтобы сделать

Javascript?

веб- стандарт (но не поддерживается одинаково всеми браузерами)
Не связано с

Javascript vs Java

интерпретируется, а не компилируется
более расслабленный синтаксис и
правила
меньшее количество

Javascript vs Java

CS380

+

=

JavaScript vs. PHP

сходство:
оба интерпретируются, а не компилируются
оба расслаблены в отношении

JavaScript vs. PHP

различия:
JS более объектно-ориентирован: существительное.глагол (), менее процедурный: глагол(существительное)

Основные типы данных

1 целые численные:
в десятичной системе единиц: 0, 29,

Размещение кода JavaScript на HTML странице

Гипертекстовая ссылка (схема URL)
Обработчик события (handler)
Подстановка

Переменные. Приведение типов

var myVariable=0.1
var B=false
myVariable="Теперь это текстовая переменная"

Операторы: арифметических действий,

Операторы сравнения

"= =" -"равно";
">" -"больше";
"<" -"меньше";
">=" -"больше или равно";
"<=" -"меньше

Функции

function myFunction(arg1, arg2, ...)
{
...
последовательность операторов
...
}

Условный оператор if

if(условие)
{
утверждение1
}
else
{
утверждение2
}

Цикл for

for(секция

Цикл while

while(условие)
{
выражение
}

Оператор with для работы с объектами
with(объект)
{
утверждение
}

Правила работы с

Классы и объекты языка JavaScript

Класс Global (задан неявно)
Класс Math
Класс Window

The DOM tree

CS380

Типы DOM

узлы элементов (HTML- тег)
может иметь детей и / или

Типы DOM

CS380

This is a paragraph of text with a
link in

Обход дерева DOM

CS380

DOM tree traversal example

This is a paragraph of text with

Выбор групп объектов DOM

методы в документе и других объектах DOM для

Изменение дерева DOM

var p = document.createElement("p");
p.innerHTML = "A paragraph!";
$("main").appendChild(p); JS

CS380

Удаление узла со страницы

function slideClick() {
var bullets = document.getElementsByTagName("li");
for (var i

Проблемы с JavaScript

JavaScript- это мощный язык, но он имеет много недостатков:

Фреймворк
JQuery

Функция $()

$(html)
$(elems)
$(fn)
$(expr, context)
$(html)
Позволяет создать html-элементы «на лету» из «чистого» HTML.

$(expr[, context])
- наиболее часто используемая функция. Первый, обязательный, параметр – это

$(fn)
- выполняет код в тот момент, когда доступна объектная модель

Функции JQuery
append(content)/prepend(content) - Добавить переданный элемент или выражение в конец/в начало

Пример:
Код

Пример:
HTML

Hello, how are you?

I'm fine

");
Код Текущая коллекция элементов
$("p") [

..

Пример:
Цвет всех ссылок на странице станет зеленым:
$("a").css("color", "green");
Индексы и get([index])
Возвращаемая

Animate
Ключевой функцией, на которой базируются все остальные, является функция animate:
animate(params, speed,

Эффекты
Метод animate является основой большинства, если не всех, эффектов jQuery и

Синхронная веб-связь

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

Веб-приложения и Ajax

веб- приложение: динамический веб- сайт, который имитирует ощущение настольного

Веб- приложения и Ajax

Ajax: асинхронный JavaScript и XML
не язык программирования, а

Асинхронная веб- связь

асинхронный: пользователь может продолжать взаимодействовать со страницей во время

XMLHttpRequest

JavaScript включает объект XMLHttpRequest, который может извлекать данные с веб- сервера
поддерживается

Типичный AJAX- запрос

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

Методы и свойства прототипа Ajax

CS380

options that can be passed to the

Методы и свойства прототипа Ajax

CS380

events in the Ajax.Request object that you

Базовый прототип Ajax шаблона

function handleRequest(ajax) {
alert(ajax.responseText);
} JS

Создание запроса POST

new Ajax.Request("url",
{
method: "post", // optional
parameters: { name: value, name:

Отладка Ajax- кода

Net tab shows each request, its parameters, response, any

AJAX JQuery
Базовыми функциями для работы с AJAX являются post() и get()

Объекты элементов DOM

CS380

Свойства объекта DOM