  НОУ ВПО ИНСТИТУТ УПРАВЛЕНИЯ,
БИЗНЕСА И ПРАВА
Ткачук Е.О.
Учебно-методический комплекс
по дисциплине
«Языки и среды реализации WEB-приложений»
для студентов заочной формы обучения
Ростов-на-Дону
2014
Учебно-методический комплекс по дисциплине «Языки и среды реализации WEB-приложений» разработан в соответствии с требованиями Федерального Государственного образовательного стандарта высшего профессионального образования для студентов очной формы обучения, обучающихся по направлению подготовки 230700.62 «Прикладная информатика».
Учебно-методический комплекс рекомендован кафедрой «Информационные технологии» (протокол №1 от 31.08.13) и утверждён Учебно-методическим советом Академии Управления (протокол №1 от 31.08.13) НОУ ВПО Института управления, бизнеса и права.
Учебно-методический комплекс предназначен для студентов заочной формы обучения, содержит план лекционных и практических занятий, рекомендации по выполнению контрольных(курсовых) работ и самостоятельной работы, требования к уровню освоения программы и аттестации по дисциплине, учебно-методическое и учебно-информационное обеспечение дисциплины.
Составитель: к.т.н.с.н.с. Ткачук Е.О. (НОУ ВПО ИУБиП)
Рецензенты: к.т.н., доц.Филин Н.Н. (НОУ ВПО ИУБиП)
к.т.н. доц. Храмов В.В.. (ФГБОУ ВПО РГУПС)
содержание
2. Практические занятия 9
3. КОНТРОЛЬ ОВЛАДЕНИЯ КОМПЕТЕНЦИЯМИ 23
4. МЕТОДИЧЕСКИЕ УКАЗАНИЯ ПО ВЫПОЛНЕНИЮ контрольных (КУРСОВЫХ) РАБОТ 24
Общая структура курсового проекта Работа над курсовым проектом выполняется в 4 этапа: 26
5. самостоятельная работа студентов 29
7.УЧЕБНО-МЕТОДИЧЕСКОЕ ОБЕСПЕЧЕНИЕ ДИСЦИПЛИНЫ 32
1 ЛЕКЦИОННЫЕ ЗАНЯТИЯ
Тема 1. Понятие WEB приложения
Определение WEB приложения. Классификация WEB приложений. Основные понятия, используемые при реализации WEB приложений. Архитектурные шаблоны Web-приложений.
Веб-приложение - совокупность программ, реализующих обработку данных в
определенной области применения в среде ВебОбобщенная архитектура веб-приложения – это модель клиент-сервер, в которой компоненты приложения разделяются на клиентские и серверные, и взаимодействуют компоненты путем передачи и получения пакетов по протоколу HTTP. В качестве клиента выступает веб-браузер, а в качестве сервера – веб-сервер.
Основными шаблонами являются:
1. Thin Web Client используется в большинстве приложений Intenet и предоставляет ограниченные возможности по управлению конфигурацией клиента. В распоряжении клиента должен быть только стандартный браузер, поддерживающий формы. Все операции, связанные с бизнес-логикой, выполняются на сервере.
2. Thich Web Client предполагает, что значительная часть бизнес-логики выполняется на клиентской машине. Обычно для выполнения бизнес-логики используется динамический HTML, аплеты Java или управляющие элементы ActiveX. Взаимодействие с сервером по-прежнему происходит через протокол HTTP.
3. Web Delivery. При взаимодействии клиента и сервера, кроме протокола HTTP, используются и другие протоколы, такие как IIОР, DCOM, которые могут применяться для поддержки системы распределенных объектов. В данном случае браузер функционирует как контейнерный модуль системы распределенных объектов.
Тема 2. Языки реализации клиентских сценариев
Обзор современных средств реализации клиентских сценариев WEB приложений. Насыщенные WEB страницы. Динамический HTML. Сравнение JavaScipt и VBScript. Java-апплет, ActionScript - общая характеристика. Microsoft Silverlight и XAML.
Одним из типов программ, предназначенных для выполнения на клиент-машине, являются сценарии, например, JavaScript (VBScript). Исходный текст сценария представляет собой часть веб-страницы, поэтому сценарий JavaScript передается клиенту вместе с документом, в состав которого он входит. Обрабатывая HTML-документ, браузер обнаруживает исходный текст сценария и запускает его на выполнение.
Ко всем программам, которые передаются с сервера на клиент-машины и запускаются на выполнение, предъявляется одно общее требование: эти программы должны быть лишены возможности обращаться к ресурсам компьютера, на котором они выполняются. Такое требование вполне обосновано. Ведь передача по сети и запуск Java-апплетов и JavaScript-сценариев происходит автоматически без участия пользователя, поэтому работа этих программ должна быть абсолютно безопасной для компьютера. Другими словами, языки, предназначенные для создания программ, выполняющихся на клиент-машине, должны быть абсолютно непригодны для написания вирусов и подобных программ.
Тема 3. JavaScript - язык разработки клиентских веб-приложений
Стандарт ECMA-262. Синтаксис JScript. Структура языка. Объектная модель браузера. Объектная модель документа. Обработка событий в JavaScript. Регулярные выражения в JavaScript.
JavaScript - интерпретируемый язык программирования, стандартизированный международной организацией ECMA в спецификации ECMA-262. Языки JavaScript, JScript и ActionScript являются расширением стандарта ECMA-262.
Название "ECMAScript" явилось фактически компромиссом между организациями, вовлеченными в процесс стандартизации, в частности Netscape и Microsoft. Хотя JavaScript и JScript стремились к совместимости с ECMAScript, они имеют ряд дополнительных возможностей не предусмотренных спецификацией ECMA.
Тема 4. Программный интерфейс для доступа и манипулирования содержимым веб-страниц DOM API
DOM (Document Object Model) - стандарт консорциума W3C для программного доступа к документам HTML или XML. Узлы дерева HTML документа. Программный интерфейс HTML DOM. Свойства узлов. Изменение HTML элементов.Библитека jQuery.
DOM (Document Object Model) - представляет собой стандарт консорциума W3C для программного доступа к документам HTML или XML. Фактически это платформо- и языково-нейтральный интерфейс, позволяющий программам и сценариям динамически обращаться и обновлять содержимое, структуру и стиль документа.
Тема 5. Технологии разработки серверных WEB приложений
Цель лекции: показать основные принципы работы веб-приложений на стороне веб-сервера; Дать общее описание стандартов, платформ и технологий, применяемых для разработки серверных веб-приложений; Рассмотреть подходы к интеграции приложений в сети Веб.
Основные принципы работы WEB приложений на стороне веб-сервера. Общее описание стандартов, платформ и технологий, применяемых для разработки серверных WEB приложений. Подходы к интеграции приложений в сети Интернет. Стандарт CGI
Сценарии. ASP,ISAPI, Интеграция и взаимодействие в сети Веб. Интеграция на основе XML. Веб-сервисы. Спецификация WSDL. Протокол SOAP. Стандарт DISCO. Спецификация UDDI.
Главными недостатками веб-сервисов являются меньшая производительность и больший размер сетевого трафика по сравнению с такими технологиями как RMI, CORBA, DCOM за счет использования текстовых XML-сообщений.
Тема 6. PHP – язык разработки серверных приложений
Синтаксис PHP. Основные конструкции PHP.. Переменные, массивы, строки PHP.. Объектно-ориентированное программирование в PHP. Библиотеки классов PHP. Технология AJAX в PHP. Примеры реализации серверных сценариев на PHP.
PHP означает Препроцессор гипертекста PHP. Это серверный язык программирования, созданный специально для динамических страниц Web. Язык был первоначально разработан в 1994 г. Расмусом Лердорфом и был с тех пор расширен, чтобы стать одним из наиболее популярных языков сценариев WWW.
Специфика ООП заметно повышает эффективность труда программистов и позволяет им создавать более мощные, масштабируемые и эффективные приложения.
Объектно-ориентированное программирование основано на:
• Инкапсуляции;
• Полиморфизме;
• Наследовании.
Класс - это базовое понятие в объектно-ориентированном программировании (ООП). Если сказать проще, то класс - это своеобразный тип переменной.
Экземпляр класса - это объект. Объект - это совокупность данных (свойств) и функций (методов) для их обработки. Данные и методы называются членами класса. Вообще, объектом является все то, что поддерживает инкапсуляцию.
Тема 7. Интегрированные среды разработки WEB приложений (IDE).
Классификация, состав IDE. Редактор Notepad++ . NetBeans IDE — свободная интегрированная среда разработки приложений (IDE) на языках программирования Java, JavaFX, Python, PHP, JavaScript, C++, Ада и ряда других. Eclipse PDT, Денвер - локальный сервер, MS WebMatrix.
Интегри́рованная среда́ разрабо́тки, ИСР (англ. IDE, Integrated development environment или integrated debugging environment) — система программных средств, используемая программистами для разработки программного обеспечения (ПО).
Обычно среда разработки включает в себя:
• текстовый редактор
• компилятор и/или интерпретатор
• средства автоматизации сборки
• отладчик.
2. Практические занятия
Тема 1. Программирование клиентских приложений на языке JavaScript.
Язык программирования JavaScript был разработан Бренданом Эйком (Brendan Eich) в Netscape Communications как язык сценариев для обозревателей Netscape Navigator, начиная с версии 2.0. В дальнейшем к развитию этого языка подключилась корпорация Microsoft, чьи обозреватели Internet Explorer поддерживают JavaScript, начиная с версии 3.0. Версия Microsoft получила название JScipt, поскольку JavaScript является зарегистрированной маркой фирмы Netscape.
JavaScript - это язык программирования, язык сценариев (скриптов), предназначенный прежде всего для создания интерактивных HTML-страниц. Программу на языке JavaScript либо встраивают прямо в HTML-файл (как в секции <head>, так и в секции <body>) с помощью тега
и располагают код JavaScript внутри этих тегов,
или помещают весь код JavaScript в отдельный файл с расширением js и связываются с ним с помощью тега Script:
Чтобы программа была выполнена, HTML-файл должен быть открыт в браузере пользователя. Так как JavaScript является в настоящее время единственным языком сценариев, который поддерживают все основные браузеры Web (Internet Explorer, Firefox, Netscape, Safari, Opera, Camino и т.д.), то он используется очень широко. Однако следует помнить, что некоторые скрипты действуют по-разному в разных браузерах (то что работает в Internet Explorer может не работать в Firefox)
JavaScript - интерпретируемый язык. Это означает, что для исполнения программы не требуется предварительная компиляция (преобразование исходного текста программы в машинный код). Текст программы интерпретируется, то есть анализируется и сразу же исполняется.
JavaScript - это объектно-ориентированный язык программирования (ООП), основан не на обработке команд кода, а на присвоении отдельным элементам программы конкретных событий и выполнении их, если данное событие имело место. Например, событие нажатие на кнопку приводит к изменению содержимого текстового поля:
Пример №1
Введите свое имя и нажмите кнопку
|
Основными понятиями любого объектно-ориентированного языка являются объекты, классы, методы и свойства. Разберем основные понятия на конкретных примерах:
В результате при просмотре данной страницы в браузере появится текст: "Введите свое имя и нажмите кнопку".
Основные понятия:
OBJECT (объект) - это то, с чем производится действие, событие. Это может быть документ, открываемый в окне браузера или само окно браузера, или какая-то часть документа, теги. Объект должен иметь уникальное имя (ID), чтобы к нему можно было обратиться.
В нашем случае объектом является документ HTML и к нему можно просто обратиться по имени: document.
Каждый объект обладает своими методами.
METHOD (метод объекта) - это действия, которые можно выполнять над объектом такого типа, или которые сам объект может выполнять.
Синтаксис кода: между именем объект и методом обязательно ставят разделительный оператор точка, после метода в скобках параметры метода.
Объект
|
.
|
Метод
|
("параметры метода")
|
Параметры метода относятся к типу данных - строки символов. Строки символов нужно обязательно взять в кавычки либо в одинарные, либо в двойные.
Каждый объект обладает своими свойствами.
PROPERTY (свойство) - каждый объект имеет свои свойства. Один и тот же объект может обладать многими свойствами. Часто эти свойства необходимо изменить, при возникновении некоторого события.
Для изменения свойства объекта необходимо соблюдать следующий синтаксис:
Объект
|
.
|
свойство объекта
|
= "новое значение свойства "
|
Например, для изменения фонового цвета документа HTML (имя данного свойства bgColor) следует написать следующее:
И при просмотре в окне браузера фоновый цвет HTML документа будет красным.
Обратите внимание на то, что значение свойства red пишется в кавычках (одинарных или двойных), т.к. значение свойства относится к типу данных строки символов.
Задание №1
1) Создайте файл, соответствующий стандарту XHTML 1.1 или XHTML 1.0 Strict
2) Напишите скрипт, задающий свойство документа фон
|
Разумеется, нас будет интересовать возможность изменения свойства при возникновении какого-либо события.
EVENT (событие) - это все, что случилось: открытие окна, загрузка в него документа, клик клавишей мышки или просто перемещение курсора по экрану, нажатие клавиши на клавиатуре - это все события, и они могут инициировать запуск больших и маленьких программ.
Стандартные события в HTML
имя события
|
происходит
|
onclick
|
при щелчке кнопки мыши на элементе
|
ondblclick
|
при двойном щелчке кнопки мыши на элементе
|
onmousedown
|
при нажатии кнопки мыши на элементе
|
onmouseup
|
при отпускании кнопки мыши на элементе
|
onmouseover
|
при попадании курсора мыши на элемент
|
onmousemove
|
при движении курсора мыши по элементу
|
onmouseout
|
при попадании курсора мыши за пределы элемента
|
onkeypress
|
при нажатии и отпускании клавиши на элементе
|
onkeydown
|
при нажатии клавиши на элементе
|
onkeyup
|
при отпускании клавиши на элементе
|
Здесь следует пояснить, что события (event) и обработчики событий (event handler) относятся к JavaScript, но они скорее «встроены» в HTML-код. Они входят в структуру документа НТМL и не требуют тегов
. Среди разнообразных обработчиков событий для начала мы выберем один, самый популярный, — onmouseover (навести мышь).
Код выглядит следующим образом:
Наведи мышь на этот текст ....
Как уже говорилось для написания этого кода не требуются теги
. Событие встраивается в HTML код, т.е является описанием, атрибутом тега (в данном случае тега
) при выполнении данного события - наведении мышкой на текст данного абзаца - изменяется свойство объекта - фон документа HTML.
И здесь есть еще одна важная особенность: document.bgColor ='red' нужно также записать в кавычках - одинарных или двойных. Вы можете использовать любой тип кавычек. Однако если Вы вынуждены как в данном случае ставить кавычки дважды, то можно использовать только вложенные кавычки. Не имеет значения, в каком порядке Вы использовали кавычки - сначала двойные, а затем одинарные или наоборот.
МОЖНО:
onmouseover="document.bgColor ='red' " или
onmouseover='document.bgColor ="red" '
Но НЕЛЬЗЯ:
onmouseover="document.bgColor ="red" "
onmouseover='document.bgColor ='red' '
onmouseover="document.bgColor ='red" '
Задание №2
1) Создайте файл, соответствующий стандарту XHTML 1.1 или XHTML 1.0 Strict
2) Напишите скрипт, изменяющий свойство документа - фон при наведении курсором на какой-то текст
|
А если мы хотим изменить не свойство всего документа, а только свойство какого-то абзаца? Как в данном случае мы можем изменить свойство данного объекта? Есть несколько способов.
Пример №3
Этот абзац меняет цвет текста при наведении на него мышкой с синего на красный!
|
Код данного примера (ВАЖНО! Код должен быть записан в одну строчку)
Этот абзац меняет цвет при наведении на него мышкой с синего на красный!
Разберем код.
определяется стиль текста в данном абзаце
onmouseover= событие которое может произойти с этим абзацем, в кавычках надо указать что при этом делать
-
this.style.color='red' изменить стиль абзаца: цвет текста на красный:
слово this используется для доступа к элементу (объекту), вызвавшему событие (к данному абзацу),
через точку указывается его свойство style, дающее доступ к стилям,
еще через точку указывается конкретное свойство, значение которого мы хотим изменить (color - цвет текста)
затем идет знак присвоить =,
и затем значение свойства "цвет текста" - красный ('red').
Рассмотрим еще один пример. Изменение цвета фона текста:
Пример №4
Цвет фона текста меняется на красный при наведении мышкой на него!
|
Цвет фона текста меняется на красный при наведении мышкой на него!
Разберем код.
определяется стиль текста в данном абзаце (цвет фона)
onmouseover= (навести мышь) и onmouseout= (увести мышь) события которые могут произойти с этим абзацем, в кавычках надо указать что при этом делать
this.style.backgroundColor='red'' изменить стиль абзаца: цвет фона на красный.
Задание №3
1) Создайте файл, соответствующий стандарту XHTML 1.1 или XHTML 1.0 Strict
2) Создайте три абзаца
3) Напишите скрипт, изменяющий цвет текста первого абзаца при наведении мышкой
4) Напишите скрипт, изменяющий цвет фона текста второго абзаца при наведении мышкой
5) Напишите скрипт, изменяющий цвет фона текста третьего абзаца только при наведении мышкой
|
Тема 2. Программирование серверных приложений на языке PHP.
PHP - это язык для написания скриптов для WEB-сервера. Скрипты PHP выполняются на сервере, т. е. посетителю WEB-страницы PHP-код не доступен. Вместо вставок с кодом на PHP посетитель увидит обычный код HTML. В этом заключается одно из отличий PHP от других скриптовых языков - например, код JavaScript может передаваться прямо с HTML-кодом браузеру посетителя WEB-странички, и при желании этот код можно увидеть.
Любой скрипт PHP состоит из последовательности операторов. Оператор может быть присваиванием, вызовом функции, циклом, условным выражением или пустым выражением (ничего не делающим). Операторы обычно заканчиваются точкой с запятой. Также операторы могут быть объединены в группу заключением группы операторов в фигурные скобки. Группа операторов также является оператором. В этой части описаны различные типы операторов.
Код php располагается на WEB-странице среди html-тегов. Есть три способа выхода из HTML и перехода в "режим PHP кода":
Способы перехода из HTML
1.
2.
3.
;
Упражнение. Создайте html-страницу. Вставьте между тегами и команду вывода строки "режим PHP кода".
Инструкции (утверждения) разделяются также как в C или Perl - точкой с запятой.
Пример.
Типы переменных
PHP поддерживает переменные следующих типов: integer – целое, double - число с дробной частью, string - строковая переменная, array - массив, object - объектная переменная.
Тип переменной обычно не устанавливается программистом; вместо этого, он определяется PHP во время выполнения программы, в зависимости от контекста в котором данная переменная используется.
Пример.
Константы
PHP определяет несколько констант и предоставляет механизм для определения пользовательских констант.
Предопределенные константы - это __FILE__ and __LINE__, которые соответствуют имени файла и номеру строки, которая выполняется в настоящий момент.
Пример.
Вы можете определить дополнительные константы с помощью функции define().
Пример. Описание констант
echo CONSTANT;
?>
Синтаксические конструкции PHP
Синтаксические конструкции PHP аналогичны конструкциям С++.
1. IF
if ($a > $b) print "a is bigger than b";
if ($a > $b) { print "a is bigger than b";} else {print "a is NOT bigger than b"; }?>
2. WHILE
while ($i <= 10) {print $i++; }?>
3. DO..WHILE
do { print $i;}
while ($i>0); ?>
4. FOR
5. SWITCH
switch ($i) {
case 0: print "i = 0"; break;
case 1: print "i = 1"; break;
case 2: print "i = 2"; break; }?>
Передача данных из формы
Программа – калькулятор. На форме в своем браузере пользователь введет два числа, выберет с помощью группы радиокнопок одно из арифметических действий - сложение, вычитание и т. д. После нажатия на кнопку "Подсчитать" (Submit), WEB-сервер вернет HTML-страницу с результатом вычислений.
1. Сначала создадим форму. Для этого создайте HTML-файл calc.html следующего содержания:
|
