Создание динамических WEB страниц с использованием JavaScript и PHP

ЛЕКЦИЯ № 4 WEB-технологии и компью терное моделирование Краткий учебны й курс 1 Структура учебного курса  Лекция 1. Введение в интернет технологии и компью терное моделирование.  Лекция 2. Создание WEB страниц с использованием HTML.  Лекция 3. Работа с графикой в Adobe Photoshop и Flash CS.  Лекция 4. Создание динамических WEB страниц с использованием JavaScript и PHP.  Лекция 5. Базы данны х и PHP.  Лекция 6. Пример реализации «Эконометрической модели экономики России» под WEB.  Лекция 7. Основы компьютерного моделирования для WEB с использованием Powersim и AnyLogic. 2 Введение в JavaScript Код скрипта JavaScript размещается непосредственно на HTMLстранице. Простой пример: Результат.
Это обычный HTML документ.
6 Введение в JavaScript Функции могут также использоваться в совместно с процедурами обработки событий. Рассмотрим следующий пример:

7 Введение в JavaScript В языке JavaScript все элементы на web-странице выстраиваются в иерархическую структуру. Каждый элемент предстает в виде объекта. И каждый такой объект может иметь определенные свойства и методы. В свою очередь, язык JavaScript позволит Вам легко управлять объектами web-страницы, хотя для этого очень важно понимать иерархию объектов, на которые опирается разметка HTML. name= document.forms[0].elements[0].value; // Код доступа к первому элементу формы размещенной на HTML странице 8 Введение в JavaScript Объ ект location Кроме объектов window и document в JavaScript имеется еще один важный объект - location. В этом объекте представлен адрес загруженного HTMLдокумента. Например, если Вы загрузили страницу http://www.xyz.com/page.html, то значение location.href как раз и будет соответствовать этому адресу. Вы имеете возможность записывать в location.href свои новые значения. Например, в данном примере кнопка загружает в текущее окно новую страницу:

9 Введение в JavaScript. Объ ектная модель документа (DOM0) 10 JavaScript и использование стилей DIV (Использование стилей).

11 JavaScript и массивы Массивы Массив JavaScript представляет собой объект, доступ к значениям которого осуществляется с помощью индексов - целых чисел, начиная с нуля. Объявляется с помощью конструктора new, создающего новый экземпляр объекта Array : teachers = new Array(); // объявление без инициализации teachers[0] = 'Pankratov'; teachers[1] = 'Zakharkina‘; ... days = new Array( 'Monday' , 'Tuesday' , Wednesday' ); // объявление с инициализацией Многомерны е массивы var numbers = New Array( new Array (“1”, “2”, “3”), new Array (“покупатель 1”, “покупатель 2”, “Покупатель 3”)); JavaScript предоставляет ряд функций (sort(), join(), reverse()) для работы с массивами. Кроме того, массивы обладают свойством длины, length. 12 JavaScript и массивы Обратите внимание. Если Ваш массив большой, его можно создать в отдельном файле с расширением *.js, а затем вставить ссы лку в HTML страницу на этот файл, например Где файл пример.js имеет вид teachers = new Array(); teachers[0] = 'Pankratov'; teachers[1] = 'Zakharkina‘; 13 Фрагмент кода JavaScript для вы полнения математических расчетов Фрагмент кода JavaScript из «Эконометрической модели России» function button4_onclick() { // Код вы полняется при нажатии на кнопку «вы числить». // Здесь Переменны е модели инициализирую тся как массивы Y[t]=C[1][0]+C[1][1]*I[t-4]+C[1][2]*DE[t]+C[1][3]*Y[t-1]+C[1][5]*DUMMY[t]+C[1][6]*(Y[t-1](C[1][0]+C[1][1]*I[t-5]+C[1][2]*DE[t-1]+C[1][3]*Y[t-2+C[1][5]*DUMMY[t-1])); X[t]=C[2][0]+C[2][1]*E[t]+C[2][2]*TR[t]+C[2][3]*O[t-1]+C[2][4]*Y[t-1] +C[2][5]*X[t-1] +C[2][6]*DUMMY[t]+C[2][7]*(X[t-1]-(C[2][0]+C[2][1]*E[t-1] +C[2][2]*TR[t-1]+C[2][3]*O[t-2] +C[2][4]*Y[t-2] +C[2][5]*X[t-2]+C[2][6]*DUMMY[t-1])); P[t]=C[3][0]+C[3][1]*E[t-1]+C[3][2]*O[t-1]+C[3][3]*DUMMY[t] +C[3][4]*(P[t-1]-(C[3][0]+C[3][1]*E[t-2] +C[3][2]*O[t-2] +C[3][3]*DUMMY[t-1])); ………………………………………………………………………………………………… // Сохранение результатов расчетов в Базе данны х, посредством PHP сценария } 14 PHP - Hypertext Preprocessor Мощны й язы к разработки сценариев, вы полняемы х (в отличие от JavaScript) на стороне WEB-сервера В отличие от JavaScript и VBScript PHP (ASP.NET, JSP и др.) позволяет работать с различны ми Базами Данны х, например MS SQL Server, Oracle, серверной файловой системой, почтовы ми сервисами и др. Обратите внимание. PHP работает как под Windows, так и под UNIX (Linux). 15 Введение в PHP Обратите внимание. Для работы с PHP (ASP, JSP и др. ) (в отличие от JavaScript) нужен установленны й WEB-сервер. Если у Вас есть ПК с установленной ОС Windows XP (и т.п.), то Вы можете установить Internet Information Server См. «Панель управления» Windows. Далее «установка и удаление программ», затем «установка компонентов Windows» Для установки IIS Вам потребуется установочны й диск Windows 16 Введение в PHP Обратите внимание. Для установки PHP под IIS Вам потребуется дистрибутив с PHP. Его можно скачать с сайта: http://www.php.net/ Установка PHP Шаг1. Распакуйте дистрибутив в папку C:\PHP Шаг2. Скопируйте php.ini из дистрибутива в папку C:\Windows Шаг3. Скопируйте php5ts.dll из дистрибутива в папку C:\Windows\ system32 Шаг4. Отредактируйте файл pws-php5isapi.reg, после чего сохраните и вы полнете его. REGEDIT4 [HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\w3svc\parameters\Script Map] " .php" =" C:\php\php5isapi.dll" 17 Введение в PHP Установка PHP Шаг5. Сконфигурируйте Ваш IIS следую щим образом: Администрирование IIS запускается через общую панель «Администрирование» панели управления Windows Обратите внимание. Значок Означает, что модуль PHP под IIS загружен корректно. 18 Введение в PHP Установка PHP 19 Введение в PHP Шаг6. Убедитесь, что PHP работает под управлением Вашего IIS. Для этого создайте файл test.php в папке IIS (C:\Inetpub\wwwroot) c таким кодом: Наберите в браузере Internet Explorer адрес http://127.0.0.1/test.php Должен бы ть получен вот такой результат 20 Введение в PHP Шаг7. Сконфигурируйте файл php.ini под Ваши задачи. Например, если Вы планируете работать с графической библиотекой PHP нужно вклю чить extensions (php_gd2.dll) Как конфигурировать php.ini см. руководства по PHP 21 Введение в PHP Следующий код Дает Hello, World! Имена переменных обозначаются знаком $. То же самое "Hello, World!" можно получить следующим образом: 22 Введение в PHP Конкатенация (присоединение) строк осуществляется с помощью . (точки); обычные арифметические операции определяются так, как Вы того и ожидаете: даст Hello 6 people! Обратите внимание. Синтаксис PHP очень похож на C 23 Введение в PHP Cтрока, заключенная в двойные кавычки, означает, что встречающиеся в этой строке переменные будут заменены их значениями, в то время как если строка заключена в одинарные кавычки, такая замена не производится. Так даст Hello, Susannah! Hello, $name! Обратите внимание на то, что \n в строке означает переход к новой строке, совсем как в Perl или в C. Однако это работает только в тех строках, которые взяты в двойные кавычки. 24 Введение в PHP PHP обеспечивает доступ к переменным окружения как к регулярным переменным. Например, при нажатии на кнопку формы инициируется передача данных формы методом GET или POST Такой скрипт Даст результат: Вход после нажатия на кнопку «Вход»

25 Введение в PHP Вся прелесть PHP в том, что Вам не надо заботиться о получении, раскодировании и любой другой обработке данны х из формы , как например при написании CGI программы на язы ке C/C++. За нас все делает PHP. Очень легко и красиво он автоматически заполняет несколько встроенны х массивов: $_SERVER ($HTTP_SERVER_VARS) - для серверны х переменны х; $_ENV ($HTTP_ENV_VARS) - для переменны х среды , в которой работает PHP; $_COOKIE ($HTTP_COOKIE_VARS) - для переменны х передаю щихся посредством cookies; $_GET ($HTTP_GET_VARS) - для параметров формы , переданны х посредством метода GET; $_POST ($HTTP_POST_VARS) - для параметров формы , переданны х методом POST; $_FILES ($HTTP_POST_FILES) - для закачиваемы х посредством метода POST файлов; $_REQUEST - массив содержащий внутри себя массивы $_GET, $_POST и $_COOKIE; $_SESSION ($HTTP_SESSION_VARS) - для хранения параметров сессии; Используя $_REQUEST, Вы получаете доступ к данны м формы . Можете сохранить эти данны е в Базе Данны х и т.д. 26 Введение в PHP Полезны е конструкции на PHP include("login.php"); //Вставка файла login.php в текущий файл Здесь произвольный HTML код …………………………………… if(!isset($action)) $action=" " ; //Данны й блок кода будет вы полнятся, только если переменная $action примет значение «Вход», т.е. если Пользователь нажмет на кнопку «Вход //Функция isset позволяет проверить установлено ли значение переменной $action 27 Введение в PHP Простейший способ установить cookie таков: setcookie('name', 'bret'); Затем, для каждой последующей страницы на Вашем сайте, просматриваемой в течение данной сессии (пока пользователь не покинет сайт) переменная $name будет иметь значение 'bret' и его можно легко прочитать средствами PHP. Этот тип cookie известен как cookie-сессия, поскольку значение сохраняется в течение пользовательской сессии. С помощью cookie можно создать, в частности, «Корзину покупок» для Интернет-магазина или запомнить «профиль» пользователя. Если Вы хотите, чтобы значение cookie запоминалось браузером после того, как пользователь закончит сессию, Вы должны передать функции setcookie() третий параметр - дату истечения срока действия cookie. Поскольку PHP сформировался в основном в среде Unix, Вы должны представить время истечения срока действия cookie как число секунд, прошедших с 1 января 1970 г. 28 Введение в PHP Например, если Вы хотите, чтобы срок действия cookie истек 1 января 2000 г., Вы записываете: Удаление cookie Обратите внимание. В силу того, как организована обработка cookies в протоколе HTTP, необходимо установить значения всех cookie до вывода какого-либо текста. Если сделать наоборот, PHP выдаст Вам предупреждение и значение cookie не будет послано. Вот так правильно: 29 Введение в PHP Создать массив можно также путем вызова функции array(): $fruit = array(); $favorites = array(); или так $fruit = array('banana','papaya'); //Создается массив из 2-х элементов 'banana‘ и 'papaya' Индексы массивов (как обычных, так и ассоциативных) задаются в квадратных скобках ([ и ]): $fruit[0] = 'banana'; $fruit[1] = 'papaya'; $favorites['animal'] = 'turtle'; $favorites['monster'] = 'cookie'; 30 Введение в PHP Управляю щие конструкции Вы можете использовать операторы цикла, такие как for и while. В результате выполнения оператора for ($i = 4; $i < 8; $i++) { print "I have eaten $i bagels today.\n"; } Получим I have eaten I have eaten I have eaten I have eaten 4 bagels 5 bagels 6 bagels 7 bagels today. today. today. today. Тот же самы й результат даст $i = 4; while ($i < 8) { print "I have eaten $i bagels today.\n"; $i++; } 31 Введение в PHP Управляю щие конструкции Вы можете также использовать конструкции с if и elseif: if ($user_count > 200) { print "Сайт сейчас перегружен!"; } elseif ($user_count > 100) { print "Сайт активно используется!"; else { print "Сайт свободен - подключились только $user_count пользователей."; } Вы можете использовать конструкции с switch, do...while switch($kv1) // Оцениваем значение переменной $kv1 { // Если $kv1 = 1 case 1: { $ms1=" 01" ; break;} // Если $kv1 = 2 case 2: { $ms1=" 04" ; break;} } 32 Введение в PHP Работа с файлами $fp = file(" baza/data.txt" ); $pat =" ;" ; //Откры ваем файл data.txt // Определяем разделитель данны х в файле “ ;” for($i = 0; $i < count($fp); $i++){ $arr = split($pat, $fp[$i]); // Формируем массив значений $arr } Различны е функции по работе с файлами fread($f, $numberbytes); - Читает из файла $f $numberbytes символов и возвращает строку этих символов. fwrite($f, $st); - Записывает в файл $f содержимое строки $st. . fgets($f, $dlina); - Считывает из файла одну строку, заканчивающеюся символом новой строки \n. Аналогична функции fwrite(). fputs($f, $st); Конструкция or die(). ($f=fopen("/homa/user/file.txt","r")) or die ("error"); 33