- •Яковлев б.С., доцент, канд. Техн. Наук конспект лекций
- •Специальные языки программирования
- •090900 «Информационная безопасность»
- •18.1. Общие сведения 151
- •20.1. Общие сведения 180
- •24.1. Общие сведения 237
- •25.1. Общие сведения 253
- •27.1. Понятие регулярного выражения 278
- •29.1. Общая информация 305
- •1. Основы языка JavaScript
- •1.1. Основные особенности JavaScript
- •2. Операторы языка
- •2.1. Операторы сравнения
- •2.2. Комментарии в языке JavaScript
- •2.3. Пример проверки операции сравнения
- •3. Формы на веб страницах и их обработка
- •3.1. Обработка интернет формы
- •3.2. Применение регулярных выражений при проверке интернет форм
- •4. Функции
- •4.1. Запуск функции при обработке данных на web-странице
- •4.2. Передача данных функции
- •4.3. Вложенные функции. Ихч свойства и применение
- •5. Объекты: строк, чисел и массивов
- •5.1. Строки
- •5.2. Числа
- •5.3. Массивы
- •5.4. Операции, выполняемые над массивами
- •5.5. Ассоциативные массивы
- •6. Объектная модель документа
- •6.1. Технология xml
- •Изображение: Блок-схема документа
- •Создание эффекта изменения изображения
- •6.2. Добавление и удаление элементов при помощи dom технологии
- •6.3. Понятие об элементах и потомках
- •6.4. Обработка текста средствами dom
- •7. Объект документа (document ) и объект окна ( window )
- •7.1. Объект документа (document )
- •7.2. Объект Window
- •7.3. Функции setTimeout и setInterval
- •7.4. Объект Document (window.Document)
- •8. Основы JavaScript
- •8.1. New Object и объектные литералы
- •8.2. Прототипирование
- •8.3. Переменные Private, Public и Static
- •9. Методы наследования, свойства замыкания
- •9.1. Наследование
- •9.2. Замыкание
- •10. Ajax технология
- •10.1. Общие сведения
- •10.2. Создание объекта xmlHttp
- •10.3. Xml, json и текстовые данные
- •10.4. Пример со списком контактов
- •11. Обработка ошибок при отработке сценариев
- •11.1. Синтаксические ошибки
- •11.2. Ошибки времени выполнения
- •11.3. Объект window.Onerror
- •11.4. Обработка ошибок Try/Catch/Finally и Throw
- •11.5. Обработка ошибок в ajax
- •12. Понятие о рекурсии
- •12.1. Основные понятия
- •12.2. Стек
- •Создание собственного стека
- •Применение рекурсии
- •13. Технология ajax
- •13.1. Общие сведения ajax
- •Ajax является технологией браузера
- •Ajax основан на открытых стандартах
- •Технология ajax улучшает приложения Интернет
- •Ajax можно использовать прямо сейчас
- •Ajax использует xml и запросы http
- •Функция showHint()
- •Функция stateChanged()
- •13.2. Браузеры ajax
- •Поддержка ajax браузерами
- •Исходный код приложения ajax
- •Страница html для примера ajax
- •Код JavaScript приложения ajax
- •Серверные страницы ajax для asp и php
- •Серверная страница ajax - asp и php
- •Пример ajax на asp
- •Пример ajax на php
- •Пример php
- •13.3. Пример ajax c базой данных
- •Описание примера:
- •Разбор примера ajax с базой данных
- •Код JavaScript приложения ajax
- •Серверная страница приложения ajax
- •Код JavaScript приложения ajax
- •Серверная страница приложения ajax
- •13.4. Объект ajax xmlHttpRequest
- •Объект xmlHttpRequest
- •Создание объекта xmlHttpRequest
- •Разбор приведенного примера
- •Еще пример?
- •Разбор приведенного примера
- •Методы объекта xmlHttpRequest
- •Свойство readyState объекта xmlHttpRequest
- •Атрибут id заменяет атрибут name
- •Важное замечание о совместимости
- •Атрибут lang
- •Обязательные элементы xhtml
- •Пример xhtml
- •Определения трех типов документов
- •Как использовать xhtml Преобразование сайта на xhtml
- •Добавить определение doctype
- •Замечание о doctype
- •Имена тегов и атрибутов записать в нижнем регистре
- •Все атрибуты заключают в кавычки
- •Проверка (валидация) Web-сайта
- •14.5. Проверка xhtml
- •Проверка xhtml в соответствии с dtd
- •Модуляризация xhtml
- •Зачем нужна модуляризация xhtml?
- •Модули xhtml
- •14.6. Стандартные атрибуты xhtml
- •Базовые атрибуты
- •События клавиатуры
- •События мыши
- •Мы закончили изучение xhtml, что дальше? Заключительные замечания по xhtml
- •Что делать дальше?
- •15. История php
- •15.1. Общая информация о php
- •15.2. Возможности php
- •15.3. Установка и настройка по
- •15.4. Установка php 4.X.X под Windows
- •Заключение
- •16. Основной синтаксис языка php
- •16.1. Основной синтаксис
- •Разделение инструкций
- •16.2. Переменные, константы и операторы
- •Переменные
- •16.3. Константы
- •16.4. Операторы
- •16.5. Типы данных
- •Тип boolean (булев или логический тип)
- •Тип integer (целые)
- •Тип float (числа с плавающей точкой)
- •16.6. Тип array (массив)
- •Определение при помощи array()
- •Определение с помощью синтаксиса квадратных скобок
- •16.7. Тип object (объекты)
- •Тип resource (ресурсы)
- •Решение задачи
- •Заключение
- •17. Условные операторы
- •17.1. Оператор if
- •17.2. Оператор else
- •17.3. Оператор elseif
- •17.4. Альтернативный синтаксис
- •17.5. Оператор switch
- •17.6. Циклы
- •17.7. Операторы передачи управления
- •17.8. Операторы включения
- •18. Основы клиент-серверных технологий
- •18.1. Общие сведения
- •18.2. Протокол http и способы передачи данных на сервер
- •Форма запроса клиента
- •18.3. Использование html-форм для передачи данных на сервер
- •Для метода get
- •Для метода post
- •18.4. Обработка запросов с помощью php
- •Пример обработки запроса с помощью php
- •Заключение
- •19. Функции в php
- •19.1. Общие понятия
- •19.2. Функции, определяемые пользователем
- •19.3. Аргументы функций
- •19.4. Списки аргументов переменной длины
- •19.5. Использование переменных внутри функции Глобальные переменные
- •Статические переменные
- •19.6. Возвращаемые значения
- •Возвращение ссылки
- •19.7. Переменные функции
- •20. Объектная модель
- •20.1. Общие сведения
- •Классы и объекты
- •20.2. Инициализация переменных
- •Объекты
- •20.3. Наследование
- •20.4. Различие между конструкторами php4 и php3
- •20.5. Оператор ::
- •Оператор parent
- •20.6. Объектная модель php5
- •21. Массивы в php
- •21.1. Общие требования
- •Массивы
- •Операции с массивами
- •Функция count
- •21.2. Функция in_array
- •Функция array_search
- •Функция array_keys
- •Функция array_unique
- •21.3. Сортировка массивов
- •Функция sort
- •Функции asort, rsort, arsort
- •21.4. Сортировка массива по ключам
- •21.5. Применение функции ко всем элементам массива
- •21.6. Выделение подмассива Функция array_slice
- •Функция array_chunk
- •Сумма элементов массива
- •Заключение
- •22. Строковые переменные
- •22.1. Общая информация
- •Поиск элемента в строке
- •22.2. Выделение подстроки Функция strstr
- •Функция substr
- •22.3. Замена вхождения подстроки Функция str_replace
- •Функция substr_replace
- •22.4. Разделение и соединение строки
- •22.5. Строки, содержащие html-код
- •Заключение
- •23. Работа с файлами
- •23.1. Создание файла Функция fopen
- •23.2. Закрытие соединения с файлом
- •Запись данных в файл Функция fwrite
- •23.3. Чтение данных из файла
- •Функция fread
- •Функция fgets
- •Функция fgetss
- •Функция readfile
- •Функция file
- •Функция file_get_contents
- •23.4. Проверка существования файла
- •Функция file_exists
- •Функция is_writable
- •Функция is_readable
- •23.5. Удаление файла
- •Загрузка файла на сервер
- •Заключение
- •24. База данных
- •24.1. Общие сведения
- •Базы данных: основные понятия
- •Индексирование
- •24.2. Субд MySql
- •24.3. Язык sql
- •Немного истории
- •Основные операторы языка sql
- •Оператор create table
- •24.4. Оператор drop table
- •Оператор alter table
- •24.5. Оператор select
- •Оператор insert
- •24.6. Оператор update
- •Оператор delete
- •Заключение
- •25. Функции для работы с базой данных MySql
- •25.1. Общие сведения
- •Построение интерфейса для добавления информации
- •Установка соединения
- •25.2. Выбор базы данных
- •Получение списка полей таблицы
- •25.3. Отображение списка полей в html-форму
- •Запись данных в базу данных
- •25.4. Отображение данных, хранящихся в MySql
- •Заключение
- •26. Сессии и их специфика в php
- •26.1. Авторизация доступа
- •26.2. Механизм сессий
- •Настройка сессий
- •26.3. Работа с сессиями Создание сессии
- •Регистрация переменных сессии
- •26.4. Удаление переменных сессии
- •26.5. Безопасность
- •Заключение
- •27. Понятие регулярного выражения
- •27.1. Понятие регулярного выражения
- •Регулярные выражения в php
- •27.2. Синтаксис регулярных выражений
- •27.3. Подвыражения (подшаблоны)
- •Повторения (квантификаторы)
- •Модификаторы pcre
- •27.4. Регулярные выражения углубленно
- •Обратная ссылка
- •Утверждения
- •Условные подвыражения
- •Заключение
- •28. Взаимодействие php с xml
- •28.1. Введение
- •Основные понятия
- •28.2. Структура xml-документа
- •28.3. Взаимодействие php и xml Расширения sax и dom xml
- •Установка расширения dom xml
- •28.4. Взаимодействие php и xml посредством dom xml
- •Перевод данных xml-файла в объекты и классы php
- •28.5. Обход дерева объектов
- •Добавление новых элементов в xml-документ
- •Заключение
- •29. Шаблон в языке программирования
- •29.1. Общая информация
- •Шаблоны подстановки
- •29.2. Шаблоны FastTemplate
- •Методы FastTemplate
- •Метод define
- •Метод assign
- •29.3. Метод parse
- •Метод FastPrint
- •Решение задачи с помощью шаблонов FastTemplate
- •29.4. Шаблоны Smarty
- •Установка
- •29.5. Основной синтаксис
- •Конфигурационные файлы
- •29.6. Методы
- •Метод assign
- •Метод append
- •Функция capture
- •Функция section
- •Функция foreach
- •Оператор if, elseif, else
- •29.8. Решение задачи с помощью шаблонов Smarty
- •Заключение
- •Библиографический список
7.3. Функции setTimeout и setInterval
Можно видеть, что в этом примере используется еще одна новая функция setTimeout. Функции setTimeout и setInterval применяются для выполнения кода после указанного интервала времени и обе получают два аргумента: функцию или строку кода и период ожидания в мс. 1 мс = 1/1000 секунды, поэтому для задания выполнения кода через 5 секунд необходимо определить в этом случае для второго аргумента значение 5000.
setTimeout выполнит код один раз после завершения заданного интервала времени. setInterval будет продолжать выполнять код после завершения каждого интервала. При заданном интервале 5000 setInterval будет выполнять код каждые 5 секунд.
Существуют еще две другие функции: clearTimeout и clearInterval, которые отменяют выполнение, через заданные интервалы. Однако для этого необходимо иметь ссылку на вызов setTimeout или setInterval, например:
var myTimeout = setTimeout("alert('Hi!');", 500);
clearTimeout(myTimeout);
Если не сохранить ссылку в переменной myTimeout, то не существует способа отменить заданное выполнение. Давайте посмотрим на пример этого в действии:
function createTimeout(text, time){
setTimeout("alert('"+text+"');", time);
}
var intervals = [];
function createInterval(text, time){
// сохраняет интервал в массиве intervals
intervals.push(setInterval("alert('"+text+"');", time));
}
function tut5(){
if(intervals.length==0) return;
// удаляет последний интервал выполнения в массиве intervals
clearInterval(intervals.pop());
}
Демонстрация в действии
Текст для вывода:
Время ожидания(в мс):
setTimeout setInterval clearInterval
Существует также функция clearTimeout, которая идентична по синтаксису clearInterval.
Важно отметить, что во время ожидания выполнения заданного кода функциями setTimeout или setInterval весь остальной код JavaScript продолжает выполняться. Когда функция setTimeoutили setInterval будет готова, она выполнит заданный код, но только после того, как другой код закончит выполнение. Другими словами, setTimeout и setInterval никогда не прерывают для выполнения другой код.
window.opener
Как говорилось ранее, свойство окна 'opener' можно использовать для доступа к окну, которое открыло текущее окно, а также к любым свойствам, функциям и т.д. этого окна. Например:
<!--page1.html-->
<HTML>
<HEAD>
<script type="text/javascript">
window.open('page2.html', 'TestWindow', 'width=500,height=200,resizable=yes');
</script>
</HEAD>
</HTML>
<!--page2.html-->
<HTML>
<HEAD>
<script type="text/javascript">
document.write('URL окна предка будет : '+window.opener.location);
</script>
</HEAD>
</HTML>
Отметим, что это работает, только если URL открываемого окна находится на том же сервере, что и текущая страница. Если необходимо открыть, например, окно на http://www.webreference.com, то мы не получим доступ к свойствам этого окна. Это поддерживается всеми основными браузерами по соображениям безопасности.
7.4. Объект Document (window.Document)
Одной из наиболее часто используемых функций в JavaScript является document.write. Можно сказать, что document.write получает строку и выводит ее на странице. Здесь необходимо только следить за одной вещью. Если страница полностью загрузилась и вызывается document.write, то вся страница будет очищена и на экране будет только результат работы document.write.
Мы уже видели различные свойства объекта document в действии. Например, document.forms возвращает массив всех форм на странице. Здесь также существует несколько свойств, подобных этому.
document.forms - массив, содержащий все формы на текущей странице;
document.images - массив, содержащий все изображения на текущей странице;
document.links - массив, содержащий все ссылки на текущей странице;
document.anchors - массив, содержащий все анкеры на текущей странице;
document.applets - массив, содержащий все апплеты на текущей странице;
document.styleSheets - массив, содержащий все таблицы стилей на текущей странице;
window.frames - массив, содержащий все фреймы на текущей странице.
Как мы видели в предыдущей лекции, почти все эти свойства можно продублировать с помощью document.getElementsByTagName. Чтобы получить все изображения на странице, можно воспользоваться, например, document.getElementsByTagName('IMG');. Существует три подобные функции:
document.getElementById - возвращает один элемент на основе его ID ;
document.getElementsByName - возвращает массив элементов, определенных по имени. В отличие от ID многие элементы могут иметь на странице одинаковые имена;
document.getElementsByTagName - возвращает массив элементов, определенных по имени тега. Имя тега является просто именем тега HTML, т.е. 'DIV','IMG', 'TABLE', 'A ' и т.д.
Существует еще одно свойство, document.all, которое выдает массив всех элементов на странице. Однако document.all поддерживается не всеми браузерами, поэтому предполагается, что вместо этого используется функция document.getElementsByTagName('*'), которая также вернет все элементы на странице.
document.body и document.documentElement
document.body ссылается на тег <BODY>, где должен предположительно находится весь контент. Весь DOM сайта вложен в document.body. Кроме этого, необходимо использовать document.bodyдля определения, что документ был прокручен, и для получения размера окна. К сожалению, это является одной из наиболее сложных вещей, применяемых сегодня в Web-браузерах.
Существует концепция, называемая "Тип документа", которая задает для Web-браузера определенный набор правил. Изменение типа документа заставляет некоторые свойства переместиться изdocument.body в document.documentElement, но только некоторые свойства и только для некоторых браузеров.
Проще говоря, это является полным беспорядком, поэтому две следующие функции (будем надеятся) выдадут позицию прокручивания и размеры окна независимо от браузера.
function getScrollPos(){
if (window.pageYOffset){
return {y:window.pageYOffset, x:window.pageXOffset};
}
if(document.documentElement && document.documentElement.scrollTop){
return {y:document.documentElement.scrollTop, x:document.documentElement.scrollLeft};
}
if(document.body){
return {y:document.body.scrollTop, x:document.body.scrollLeft};
}
return {x:0, y:0};
}
function getWindowDims(){
if (window.innerWidth){
return {w:window.innerWidth, h:window.innerHeight};
}
if (document.documentElement && document.documentElement.clientWidth){
return {w:document.documentElement.clientWidth, h:document.documentElement.clientHeight};
}
if (document.body){
return {w:document.body.clientWidth, h:document.body.clientHeight};
}
return {w:0, h:0}
}
title, referer
Тремя последними свойствами документа являются title, referer и cookies. document.title и document.referer достаточно понятны. document.title содержит заголовок страницы. Его можно прочитать и изменить после полной загрузки документа. document.referer содержит просто URL страницы, которая привела пользователя на текущую страницу.
Поэтому, если вы щелкнули на ссылке, чтобы попасть на эту страницу, то document.referer будет содержать URL страницы, на которой находится ссылка. Если вы пришли на эту страницу сразу, задавая ее в поле адреса браузера, то document.referer будет неопределен.
7.5. Сookie
Последняя тема этой лекции, переменная cookie, отличается от всего остального в JavaScript. cookie является строкой текста, которую можно сохранить с одной страницы на другой, если вы находитесь на одном и том же сервере. В отличие от других переменных в JavaScript, cookie не стирается при перезагрузке страницы. cookie стираются только через определенный период времени или когда все cookie удаляются в браузере.
cookie читают и записывают через document.cookie. В отличие от других свойств изменение document.cookie в действительности не перезаписывает, а добавляет к cookie. Поэтому, если требуется задать 5 cookie, то каждое из них задается с помощью document.cookie= "...";. Формат cookie имеет свои особенности, поэтому мы рассмотрим несколько функций для выполнения этой задачи:
function writeCookie(name, value, days){
if(days){
(time = new Date()).setTime(new Date().getTime()+days*24*60*60*1000);
var exp = '; expires='+time.toGMTString();
}else{
var exp='';
}
document.cookie=name+"="+value+exp+"; path=/";
}
function readCookie(name){
var cookies = document.cookie.split(';');
for(var i=0; i<cookies.length; i++){
var cookie=cookies[i].replace(/^\s+/, '');
if (cookie.indexOf(name+'=')==0) return cookie.substring(name.length+1);
}
return null;
}
function eraseCookie(name){
writeCookie(name, "", -1);
}
Три эти функции выполняют запись, чтение и стирание cookie на текущей странице. Их можно протестировать с помощью следующего кода:
function addToCounter(){
var counter = readCookie('myCounter');
if(counter){
counter = parseInt(counter);
} else {
counter = 0;
}
writeCookie('myCounter', counter+1, 1);
}
function showCounter(){
alert(readCookie('myCounter'));
}
Если увеличить счетчик cookie несколько раз, обновить страницу, а затем проверить счетчик, то можно увидеть, что он остался таким же, как был до обновления страницы. Эти cookie будут сохранятся до тех пор, пока они не будут удалены из браузера или пока не пройдет 24 часа - cookie заданы на период одни сутки.