СПб. ГПУ Кафедра «Прикладная математика» Java. Script+ PHP Доклад на семинаре по специальности Студент гр. 4057/2 Дмитрий Науменко 23. 09. 14
Содержание Введение § Java. Script § § § 23. 09. 14 Назначение и область применения История создания, версии Основные архитектурные черты Особенности синтаксиса Основные объекты, конструкции и операции Встраивание в веб-страницы Структура языка Безопасность Библиотеки Java. Script Отладка Среда исполнения Документированность, сопровождение 2 / 63
Содержание § PHP § § § Назначение и область применения История создания, версии Особенности cинтаксиса Среды исполнения Фреймворки PHP Документированность, сопровождение § Взаимодействие Java. Script и PHP § AJAX § Перспективы развития Java. Script & PHP Заключение 23. 09. 14 3 / 63
Введение • Что такое Java. Script? o Java. Script — прототипно-ориентированный сценарный язык программирования, наиболее популярен в Браузерах o Выполняется на стороне клиента • Что такое PHP? o PHP (Hypertext Preprocessor) — сценарный язык программирования общего назначения, интенсивно применяемый для разработки веб-приложений o Выполняется на стороне сервера 23. 09. 14 4 / 63
Введение 23. 09. 14 5 / 63
Java. Script 6 / 63
Назначение и область применения • Для чего нужен Java. Script? o Создание и редактирование HTML-тегов o Описание реакции на действия пользователя o Посылка запросов на сервер и загрузка данных без перезагрузки страницы (технология AJAX) o Получение и установление cookie, запрос данных, вывод сообщений и т. д. • Где используется? o o o o Веб-приложения Серверные приложения Мобильные приложения (Palm web. OS) Прикладное программное обеспечение (16% Mozilla Firefox) AJAX Браузерные операционные системы (Indra. Desktop Web. OS, Int. OS ) Пользовательские скрипты в браузере 23. 09. 14 7 / 63
История создания • Автор - Брендан Айк • 1995 г: Netscape поставила задачу внедрить язык программирования Scheme или что-то похожее в браузер Netscape(*) • Первоначальное название – Live. Script (кодовое имя – Mocha) • 4 декабря 1995 года переименован в Java. Script поскольку Java в то время было модным словом • 1996 г: JScript (аналог языка Java. Script от Microsoft) • ECMAScript (стандарт ECMA-262) • Первой версии спецификации соответствовал Java. Script версии 1. 1, а также языки JScript и Script. Easy * Netscape Navigator 2 – браузер для Windows, Apple Macintosh и др. 23. 09. 14 8 / 63
Версии • 1. 0 (Netscape 2. 0 1996) o Оригинальная версия языка Java. Script • 1. 1 -1. 3 (1996 -1998) o o Array Switch Регулярные выражения Совместим с первой редакцией ECMA-262. • 1. 5 - 1. 8. 1(+ Gecko, +Firefox, 2000 -2006) o Совместим с третьей редакцией спецификации ECMA-262. o Лямбда-выражения o Встроенная поддержка JSON (англ. Java. Script Object Notation) — текстовый формат обмена данными, основанный на Java. Script o Генераторы o Списочные выражения • 2. 0 23. 09. 14 9 / 63
Основные архитектурные черты • Динамическая типизация • Автоматическое управление памятью • Прототипное программирование o Стиль ООП, при котором отсутствует понятие класса, наследование производится путём клонирования существующего экземпляра объекта — прототипа • Функции как объекты первого класса o Объекты первого класса - сущности, которые могут быть переданы как параметр, возвращены из функции, присвоены переменной • Наличие анонимных функций 23. 09. 14 10 / 63
Особенности cинтаксиса • Напоминает синтаксис Си и Java o Все идентификаторы регистрозависимы, o В названиях переменных можно использовать буквы, подчёркивание, символ доллара, арабские цифры o Названия переменных не могут начинаться с цифры, o Однострочные комментарии // o Многострочные и внутристрочные комментарии /* */ o и др. • Особенности o Символы доллар ’$’ и подчёркивание ’_’ допускаются наравне с буквами o Как правило, перевод строки тоже подразумевает точку с запятой. Корректный код: alert('Привет') alert('Мир') 23. 09. 14 11 / 63
Основные конструкции и операции 23. 09. 14 12 / 63
Переменные и типы • Переменные объявляются директивой var, могут хранить любое значение: var x = 5 x = "Привет" • 5 “примитивных” типов: o x = 1; // число (int, double) o x = "Тест"; // строка, кавычки - одинарные или // двойные o x = true; // булево значение true/false o x = null; // спец. значение (само себе тип) o x = undefined; // спец. значение (само себе тип) • null присваивается, если мы хотим указать, что значение переменной неизвестно. var age = null; • undefined означает “переменная не присвоена” var x; alert( x ); // undefined 23. 09. 14 13 / 63
Переменные и типы (2) • Для сложения строк используется оператор + alert( 1 + 2 ); // 3, число alert( '1' + 2 ); // '12', строка • === проверяет точное равенство, включая одинаковый тип alert(0 === false); // false, т. к. типы различны • Infinity - бесконечность alert( 1 / 0 ); // Infinity • NAN – ошибка вычислений alert( "нечисло" * 2 ); // Na. N, ошибка 23. 09. 14 14 / 63
Функции, методы и свойства • Функции o Ключевое слово function sum(a, b) { var result = a + b; return result; } • Методы и свойства o Все значения в Java. Script, за исключением null и undefined, содержат набор вспомогательных методов и свойств, доступных “через точку” alert( "Привет, мир!". length ); // 12 var hello = "Привет, мир!"; alert( hello. to. Upper. Case() ); // "ПРИВЕТ, МИР!“ var n = 12. 345; alert( n. to. Fixed(2) ); // "12. 35" 23. 09. 14 15 / 63
Объекты как ассоциативные массивы • Пример создания объекта o var person = { name: "Эдик", … }; o var object = {}; //пустой объект (= new Object(); ) • Структура объекта динамически модифицируема o person. age = 20; o delete person. name; • Доступ через квадратные скобки • • • 23. 09. 14 person['name'] = 'Эдуард'; var key = 'age'; alert(person[key]); // выведет person['age'] person['день рождения!'] = '18. 04. 1982'; person. день рождения! =. . . 16 / 63
Полезные функциидля работы с объектами • Проверка существования свойства с определенным ключом o if("age" in person){ … } o if(person. age === undefined){ … } • Перебор свойств и значений o for (key in obj) { /*. . . делать что-то с obj[key]. . . */ } 23. 09. 14 17 / 63
Встраивание в веб-страницы • Теги <script></script> <script type="text/javascript"> alert('Hello, Edik!'); </script> • Вынесение в отдельный файл <script type = "text/javascript“ src = "Путь к скрипту/hello. js"> </script> 23. 09. 14 18 / 63
Встраивание в веб-страницы (2) • Внутри тега o Пример 1 (плохая практика) <a href = "delete. php" onclick = "return confirm('Вы уверены? '); "> Удалить </a> o Пример 2 (предпочтительней) <a href="delete. php" id="alert. Link">Удалить</a> window. onload = function() { var link. With. Alert = document. get. Element. By. Id("alert. Link"); link. With. Alert. onclick = function() { return confirm('Вы уверены? '); }; 23. 09. 14 19 / 63
Структура языка • Три чётко различимых друг от друга части: o Ядро (ECMAScript), o Объектная модель браузера (Browser Object Model или BOM ), o Объектная модель документа (Document Object Model или DOM) 23. 09. 14 20 / 63
Ядро (ECMAScript) • ECMAScript o Основа для построения скриптовых языков o Не является браузерным языком o Не определяются методы ввода и вывода информации • Спецификация ECMAScript описывает o o o o Типы данных Инструкции Ключевые и зарезервированные слова Операторы Объекты Регулярные выражения Позволяет авторам производных добавлять новые составляющие 23. 09. 14 21 / 63
Browser Object Model (BOM) • Браузер-специфичная часть языка • Прослойкой между ядром и DOM • Предназначение – управление окнами браузера и обеспечение их взаимодействия • Центральный объект BOM – объект window o Каждое из окон браузера представляется объектом window o Ключевое слово window можно опускать • BOM не стандартизирована, спецификация находится в разработке 23. 09. 14 22 / 63
Возможности BOM • Помимо управления окнами: o Управление фреймами o Поддержка задержки в исполнении кода и зацикливания с задержкой o Системные диалоги o Управление адресом открытой страницы o Управление информацией о браузере o Управление информацией о параметрах монитора o Ограниченное управление историей просмотра страниц o Поддержка работы с HTTP cookie 23. 09. 14 23 / 63
Document Object Model (DOM) • Интерфейс программирования приложений для HTML и XML-документов • Представление документа в виде дерева объектов (поддержка генерации, добавления, удаления (и т. д. ) узлов) o Удобство внутрипрограммной навигации по странице • Ключевой объект - document 23. 09. 14 24 / 63
Иерархия DOM & BOM 25 / 63
Примеры //Создание переменной a (то же самое что a = 10) window. a = 10; //Вывод значения переменной a на экран document. write(a + '<br/>'); document. write(window. a); //Вывод окна оповещения alert('Это окно оповещения'); //Открытие нового пустого окна nw = open(); //Вывод сообщения в новое окно nw. document. write('Эдик, не спи'); // Заугрузить страницу http: //d-inter. ru window. location. href = "http: //d-inter. ru"; 23. 09. 14 26 / 63
Безопасность • Java. Script-программы выполняются в "песочнице” o Ограниченный круг действий o Не могут выполнять задачи программирования общего назначения (создание файлов, работа с сокетами) • Политика общего происхождения o скрипт, встроенный в страницу, не может получить доступ к ряду свойств объектов другой страницы(*) • Неправильное наделение привилегиями Java. Script из “веба” служило причиной уязвимостей как Internet Explorer, так и Mozilla Firefox * при отличии в протоколе, хосте и номере порта этих страниц 23. 09. 14 27 / 63
Библиотеки Java. Script • Библиотека Java. Script - сборник “классов” и/или функций на языке Java. Script. • Наиболее популярные o j. Query o Underscore o Prototype • На Java. Script реализованы интерпретаторы ряда языков программирования o o o PHP Python 3 Ruby Haskell Forth Basic 23. 09. 14 <script type="text/ruby"> … </script> 28 / 63
Java. Script и Java • РАЗНЫЕ ВЕЩИ! • Java реализует ООП подход, основанный на классах, Java. Script — на прототипах • Java имеет статическую типизацию, Java. Script — динамическую типизацию • Java загружается из скомпилированного байткода, Java. Script интерпретируется напрямую из файла (но часто с незаметной JIT-компиляцией). 23. 09. 14 29 / 63
Отладка Java. Script • Internet Explorer, Opera, Firefox, Safari, и Google Chrome имеют отладчики сценариев • В Opera собственный отладчик — Opera Dragonfly • Отладчик Java. Script Web. Kit Web Inspector o o Safari Google Chrome Arora … • Internet Explorer o Microsoft Visual Studio o Microsoft Script Editor o Microsoft Script Debugger 23. 09. 14 30 / 63
Среда исполнения • Web. Kit o Самый популярный движок o Написан на C++ o Разработан Apple Inc. , Google Inc. , KDE, Opera Software, Yandex и др. o Chromium, Google Chrome, Opera, Safary, Яндекс. Браузер o i. OS, Android o Steam • Spider. Monkey o Первый в истории движок Java. Script • Rhino o Предназначен для использования в server-side приложениях, нет встроенной поддержки для объектов браузера o Поддерживается Mozilla Foundation 23. 09. 14 31 / 63
Документированность, сопровождение • ECMAScript Language Specification – основной докумет • Standard ECMA-327: ECMAScript 3 rd Edition Compact Profile (June 2001) • Standard ECMA-262: ECMAScript Language Specification 5 th edition (December 2009) - самая свежая редакция 23. 09. 14 32 / 63
PHP 33 / 63
Назначение и область применения • Для чего нужен PHP? o Автоматическое извлечение POST и GET - параметров, переменных окружения веб-сервера o Взаимодействие с СУБД (My. SQL, SQLite, Oracle, MS SQL Server…) o Работа с HTTP-авторизацией o Работа с cookies и сессиями o Работа с локальными и удалёнными файлами, сокетами o Обработка файлов, загружаемых на сервер • Где используется? o Серверы 23. 09. 14 34 / 63
История создания, версии • 1994, Расмус Лердорф, набор скриптов на Perl (Personal Home Page) • PHP/FI (Personal Home Page / Forms Interpreter) (написан на Си) • PHP/FI 2. 0 (1997) o 1 % (~50 тысяч) всех интернет-доменов мира • PHP 3. 0 – (1998 ) переписан “с нуля” на Си o Стремительный рост популярности o Возможность расширения ядра дополнительными модулями o Работа с СУБД o PHP: hypertext Preprocessor 23. 09. 14 35 / 63
История создания, версии (2) • PHP 4. 0 -5. 0 – (1999 -2004) o o Поддержка сессий Буферизация вывода Введена поддержка языка разметки XML Переработаны функции ООП, стали схожи с моделью, используемой в Java § Деструктор § Открытые, закрытые и защищённые члены и методы, § Окончательные члены и методы § Интерфейсы § Клонирование объектов • PHP 5. 6 – текущая версия 23. 09. 14 36 / 63
Особенности синтаксиса • Похож на синтаксис языка Си • Имена переменных начинаются с символа $ o $a = 'I am a'; // echo $a; // o $b = 'a'; echo $$b; // o echo ${'a'}; // Запись значения в переменную Вывод переменной $а Вывод переменной $a • #, // - однострочные комментарии • /* */ - многострочные комметарии 23. 09. 14 37 / 63
Основные конструкции и операции 23. 09. 14 38 / 63
Переменные и типы • Динамическая типизация • Скалярные типы данных: o o $n = 1; // целый (integer) $pi = 3. 14; // вещественный (float, double) $is = TRUE; // логический (boolean) $name = "Вася"; // строковый (string) • Нескалярные типы: o Массив • $names[5] = "Яблоко"; // простой (список) • $names["Иванов"] = "Иван"; //ассоциативный o Объект • class Thing { function foo() { echo "Doing foo…"; } } $bar = new Thing; $bar->foo(); 23. 09. 14 39 / 63
Суперглобальные массивы • $GLOBALS - массив всех глобальных переменных • $_SERVER - переменные окружения, которые ОС передаёт серверу • $_GET - параметры GET-запроса, переданные в URI после “? ” • $_POST - ассоциативный массив значений полей HTML-формы при отправке методом POST • $_COOKIE ассоциативный массив с переданными агентом пользователя значениями куки • $_SESSION - данные сессии 23. 09. 14 40 / 63
Поддержка ООП • Ключевое слово class • Экземпляры класса создаются с помощью ключевого слова new • Обращение к полям и методам через -> • • • __construct() __destruct() __clone() __get() __set() 23. 09. 14 41 / 63
Пример класса на PHP class A extends B implements I 1, I 2 { private $a; protected $b; function __construct($a, $b){ parent: : __construct($a, $b); $this->a = $a; $this->b = $b; } public function plus() { return $this->a + $this->b; } } $d = new A(1, 2); echo $d->plus(); // 3 23. 09. 14 42 / 63
Среды исполнения • Zend Engine – первый движок • Apache HTTP-сервер • PHP-Hip. Hop (HPHP, Hyper-PHP) – 2010 Facebook o PHP C++ (gcc) Bytecode • KPHP – 2013 Вконтакте o Аналог HPHP 23. 09. 14 43 / 63
Фреймворки PHP • • • Yii Zend Framework Cake. PHP Symfony Code. Igniter Kohana • Поддержка шаблона MVC 23. 09. 14 44 / 63
Документированность, сопровождение • Проект с открытым кодом • Собственная лицензия PHP License • http: //php. net/manual/en/index. php 23. 09. 14 45 / 63
Взаимодействие Java. Script и PHP • В браузер клиента отправляется не сам PHP скрипт, а только результаты его работы • Для сервера скрипты Java. Script – обычные текстовые данные, ничем не отличающиеся от прочего содержимого страницы • Cкрипты PHP завершаются ещё ДО того, как начнутся выполняться скрипты Java. Script Проблема: Прямое взаимодействие скриптов на PHP и Java. Script невозможно 23. 09. 14 46 / 63
Варианты решений • Внесение изменений в текст страницы (в скрипт) • Использование метода GET • Использование cookies o небольшой фрагмент данных, отправленный веб-сервером и хранимый на компьютере пользователя • Использование AJAX 23. 09. 14 47 / 63
Внесение изменений в текст страницы • Пригоден только для передачи данных и параметров с сервера на клиент <html> … <script type= "text/javascript"> <? php if ( $login == "admin" ) echo "var is. Admin = true" else echo "var is. Admin = false" ? > if(is. Admin) document. write("Im Administrator"); else document. write("Im user"); </script> … 23. 09. 14 48 / 63
Использование метода GET <script language="javascript"> var message = encode. URIComponent('Hello, server!'); /* переход по ссылке */ window. location. href = 'http: //dayte 2. com/index. php? message='+message; </script> index. php: <? php print $_GET["message"]; ? > 23. 09. 14 49 / 63
Использование cookies • Java. Script и PHP позволяют читать и сохранять cookies <html> <? php // при выполнении скрипта на сервере сохраняем // данные в cookie setcookie("name", "Pavel", …); ? > <script> // этот фрагмент будет выполнен после // загрузки страницы // надо лишь считать cookie var name = get. Cookie("name"); //(*) </script> * get. Cookie() - не встроеная функци 23. 09. 14 50 / 63
Использование cookies (2) • Недостатки o Максимальный размер одного cookie не может превышать 4 Кб o Возможность работы с cookies должны быть включены в браузере пользователя o Дополнительный трафик (т. к. все cookies автоматически отправляются на сервер при каждом обновлении страницы) o Все обновления и изменения происходят только при загрузке/обновлении страницы 23. 09. 14 51 / 63
AJAX • Появился в 2005 • 2 основных принципа o Использование технологии динамического обращения к серверу “на лету”, без перезагрузки всей страницы полностью (Основной объект - XMLHttp. Request) o Использование DHTML (Dynamic HTML) для динамического изменения содержания страницы • DHTML = HTML + CSS + DOM + Java. Script 23. 09. 14 52 / 63
Frontend, Backend скрипты • Backend – PHP-скрипты, выполняющиеся на сервере. o Обычно возвращают структурированные блоки данных (массивы), не содержащие никакого оформления • Frontend – скрипты Java. Script, выполняющиеся в браузере пользователя. o Основное назначение – вызвать требуемый скрипт backend`a получить данные и правильно их вывести на странице, добавив при необходимости обрамление из тегов и стилей 23. 09. 14 53 / 63
Схема AJAX Синхронные вызовы 23. 09. 14 Асинхронные вызовы 54 / 63
Пример исспользования AJAX <script language="javascript"> xmlhttp = new XMLHttp. Request(); xmlhttp. onreadystatechange = function(){ response = xmlhttp. response. Text; alert('Сервер ответил: ' + response ); } xmlhttp. open("GET", "readme. txt", true); xmlhttp. send(); //выведется содержимое файла readme. txt </script> 23. 09. 14 55 / 63
Пример взаимодействия Java. Script и PHP с использованиеи AJAX 23. 09. 14 56 / 63
ajax_page. html 23. 09. 14 57 / 63
ajax_page. html (2) 23. 09. 14 58 / 63
get_ajax. php 23. 09. 14 59 / 63
Результат 23. 09. 14 60 / 63
Преймущества и недостатки AJAX • Преимущества o o Экономия трафика Уменьшение нагрузки на сервер Ускорение реакции интерфейса Почти безграничные возможности для интерактивной обработки • Недостатки o Отсутствие интеграции со стандартными инструментами браузера o Динамически загружаемое содержимое недоступно поисковикам 1 o Старые методы учёта статистики сайтов становятся неактуальными o Усложнение проекта o Требуется включенный Java. Script в браузере o Низкая скорость при грубом программировании 23. 09. 14 61 / 63
Перспективы развития • Лидирующую позицию Java. Script занял в связи с развитием AJAX • Браузер стал превалирующей системой доставки приложений • Dart (Google 2011) – возможный конкурент “Вытеснитель” • PHP остаётся самым популярным языком программирования серверной части webприложений 23. 09. 14 62 / 63
Заключение • Java. Script и PHP– два наиболее популярных языка программирования для разработки приложений на стороне клиента и сервера • Java. Script удобен для веб-дизайнеров и программистов, не обладающих высокой квалификацией • PHP • AJAX – мощная технология, позволяющая работать в браузере практически в интерактивном режиме • Существует множество фреймворков, облегчающих разработку PHP приложений 23. 09. 14 63 / 63
![Источники 1. [1] Дэвид Флэнаган. Java. Script. Подробное руководство 2. http: //javascript. ru/ 3.](https://present5.com/presentation/17688669_361140805/image-64.jpg "Источники 1. [1] Дэвид Флэнаган. Java. Script. Подробное руководство 2. http: //javascript. ru/ 3.")
Источники 1. [1] Дэвид Флэнаган. Java. Script. Подробное руководство 2. http: //javascript. ru/ 3. http: //php. net/ 23. 09. 14 64 / 63
Скачать презентацию СПб ГПУ Кафедра Прикладная математика Java Script PHP
Презентация - JavaScript&PHP.pptx