WEB-WEB-ПРОГРАМИРАНЕПРОГРАМИРАНЕСтефан Дражев, каб. 510, ИУ-ВарнаСтефан Дражев, каб. 510, ИУ-Варна

1

2

JavaScript. AJAXJavaScript. AJAX Въведение вВъведение в JavaScriptJavaScript ОсновниОсновни JS елементиелементи Методи за интеграция на Методи за интеграция на JS с с HTMLHTML Примери на Примери на JS-функции-функции Въведение в Въведение в AJAX ОсновниОсновни AJAX елементиелементи Примери наПримери на AJAX- -приложения -приложения

3

Въведение вВъведение в JavaScriptJavaScript

В началото е … NetscapeВ началото е … Netscape Java Script Java Script е скриптов език, създаден от екипа е скриптов език, създаден от екипа

на на Netscape Netscape и първоначално носещ името и първоначално носещ името LiveScript. LiveScript. След това (във версия 2 на След това (във версия 2 на Netscape Netscape Navigator) Navigator) той е преименуван на той е преименуван на Java Script.Java Script.

Microsoft Microsoft има собствена реализация наима собствена реализация на JScript JScript ( ( с възможности, подобни на с възможности, подобни на Java Script) Java Script) в своя в своя Internet Explorer.Internet Explorer.

JAVA JAVA И И JAVASCRIPTJAVASCRIPT??Основни разлики между Основни разлики между

4

5

Синтаксис наСинтаксис на JavaScriptJavaScript В Java Script всеки ред завършва с точка и запетая. В Java Script всеки ред завършва с точка и запетая.

Докато не срещне точка и запетая всичко се приема за Докато не срещне точка и запетая всичко се приема за един ред. Друга особенност е , че Java Script прави един ред. Друга особенност е , че Java Script прави разлика между малки и големи букви.разлика между малки и големи букви.

Правилата за образуване на променливите са :Правилата за образуване на променливите са : Името на променливата трябва да започва с буква от латинската Името на променливата трябва да започва с буква от латинската

азбука (a-z или A-Z) или знак за подчертаване. азбука (a-z или A-Z) или знак за подчертаване. Останалата част от името може да съдържа всяка буква, цифра Останалата част от името може да съдържа всяка буква, цифра

или знак за подчертаване. или знак за подчертаване. Името на променливата не може да съдържа интервали. Името на променливата не може да съдържа интервали. Избягвайте употребата на запазени думи като име на променлива. Избягвайте употребата на запазени думи като име на променлива.

6

Дефиниране на Дефиниране на променливите в Java променливите в Java

ScriptScript Дефинирането на променливите в Java Script не е Дефинирането на променливите в Java Script не е

задължително, но се препоръчва, от гледна точка задължително, но се препоръчва, от гледна точка на прегледност на програмата. Това става със на прегледност на програмата. Това става със запазената дума запазената дума varvar. За да се намали размера на . За да се намали размера на програмата е възможно декларирането на програмата е възможно декларирането на няколко променливи едновременно :няколко променливи едновременно :

var text = "Hello world";var text = "Hello world";var x,y,z;var x,y,z;

7

Дефиниране на числови Дефиниране на числови променливите в Java променливите в Java

ScriptScript Ето пример за числови променливи :Ето пример за числови променливи : var x = 56; //десетично представянеvar x = 56; //десетично представяне

var y = 34e-5; // дес.представяне – числа var y = 34e-5; // дес.представяне – числа с плаваща запетаяс плаваща запетаяvar z = 034; // осмично представянеvar z = 034; // осмично представянеvar s = 0x23F; // шестнайсетично var s = 0x23F; // шестнайсетично представянепредставяне

8

Дефиниране на низове в Дефиниране на низове в Java ScriptJava Script

Низовите променливи се представят като текст Низовите променливи се представят като текст заграден в кавички (ако са заградени в кавички заграден в кавички (ако са заградени в кавички цифрите също се интерптретират като текст). цифрите също се интерптретират като текст).

Примери:Примери:

var text = "Hello wolrd!“var text = "Hello wolrd!“

var text1 = "40";var text1 = "40";

vat text2 = "\" vat text2 = "\" Низ в кавички. \"";Низ в кавички. \"";

9

Управляващи символи Управляващи символи ((escape charesters) escape charesters) в Java в Java

ScriptScript Символ Символ Значение Значение \\ \\ Ляво наклонена черта Ляво наклонена черта \‘ \‘ Апостроф Апостроф \" \" Кавички Кавички \b \b Изтрива знака пред символа(backspace) Изтрива знака пред символа(backspace) \f \f Нова страница на принтера (form feed) Нова страница на принтера (form feed) \n \n Нов ред Нов ред \r \r Връщане в началото на реда (carrige return) Връщане в началото на реда (carrige return) \t \t ТабулаторТабулатор

10

ОбектиОбектиJava ScriptJava Script Обекти/състояния/променливиОбекти/състояния/променливи Методи/функцииМетоди/функции ОнаследяванеОнаследяване

ПРИМЕРПРИМЕР: : такъв обект е такъв обект е windowindow, който представя w, който представя софтуерно текущия прозорец на браузъра. Един от софтуерно текущия прозорец на браузъра. Един от неговите методи е функцията неговите методи е функцията open(open(), която отваря нов ), която отваря нов прозорец. open() сама по себе си е функция, тя се прозорец. open() сама по себе си е функция, тя се превръща в метод на обекта едва, когато бъде включена превръща в метод на обекта едва, когато бъде включена в него, което ще се запише така - в него, което ще се запише така - window.open(). window.open().

11

Методи за интеграция Методи за интеграция на на JS с с HTMLHTML

чрез връзка към външен файл (подобно на CSS)<HEAD><LINK HREF="script.js" TYPE="text/javascript"></HEAD> чрез вграждане в тялото на документа<SCRIPT LANGUAGE="JavaScript" TYPE="text/JavaScript">....</SCRIPT>

12

Вграждане на кода в Вграждане на кода в заглавана секциязаглавана секция

код, код, сложен в включен в заглавната секция не се изпълнява докато не бъде извикан

Вграждане на кода в Вграждане на кода в тялото на тялото на HTML-HTML-

код, код, сложен в тялото на HTML-страницата се изпълнява в реда в който е поставен

Примери на Примери на JS-функции-функции COOLjsMenuCOOLjsMenu

13

COOLjsMenu – менюта, вграждани във вашия сайт"menuitems.js"

Примери на Примери на JS-функции-функции Tree ContentsTree Contents

14

Tree Contents – йерархическо (дървовидно) представяне на съдържание

<script language="JavaScript"> new tree (TREE01_ITEMS, tree_tpl); new tree (TREE02_ITEMS, tree_tpl); new tree (TREE03_ITEMS, tree_tpl); new tree (TREE04_ITEMS, tree_tpl); new tree (TREE05_ITEMS, tree_tpl); new tree (TREE06_ITEMS, tree_tpl); </script><

15

Въведение вВъведение в AJAX

AJAXAJAX (Asynchronous (Asynchronous JavaScript and and XML))

Комбинация от XHTML/DHTML (/DHTML (или или HTML) ) ии CSS, , за представяне на за представяне на информацията във информацията във Web-Web-страницитестраниците

DOM & AJAX = Document Object Document Object ModelModel

16

AJAX Компоненти (Web Web applications)applications)

17

AJAX Компоненти -DOMThe Document Object Model (DOM) is a platform- and language-independent standard object model for representing HTML or XML and related formats.

18

The XMLHttpRequest The XMLHttpRequest objectobject

<script language="javascript" <script language="javascript" type="text/javascript"> var xmlHttp = type="text/javascript"> var xmlHttp =

new XMLHttpRequest(); new XMLHttpRequest(); </script></script>

Web form Web form и и serverserver асинхронна асинхронна комуникациякомуникация

http://www-128.ibm.com/developerworks/web/library/wa-ajaxintro1.html

19

AJAX AJAX ПримерПример 1 1Make a request with AjaxMake a request with Ajax

function callServer() { function callServer() {

// Get the city and state from the web form // Get the city and state from the web form

var city = document.getElementById("city").value; var city = document.getElementById("city").value;

var state = document.getElementById("state").value; var state = document.getElementById("state").value;

// Only go on if there are values for both fields // Only go on if there are values for both fields

if ((city == null) || (city == "")) return; if ((city == null) || (city == "")) return;

if ((state == null) || (state == "")) return; if ((state == null) || (state == "")) return;

// Build the URL to connect to // Build the URL to connect to

var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state); escape(state);

// Open a connection to the server // Open a connection to the server

xmlHttp.open("GET", url, true); xmlHttp.open("GET", url, true);

// Setup a function for the server to run when it's done // Setup a function for the server to run when it's done

xmlHttp.onreadystatechange = updatePage; xmlHttp.onreadystatechange = updatePage;

// Send the request // Send the request

xmlHttp.send(null); xmlHttp.send(null);

}}

FUTURE OF AJAX.NET FUTURE OF AJAX.NET PROFESSIONAL - PROFESSIONAL - URL

Едон блог за истински професионалистиЕдон блог за истински професионалисти

- Вземи най-доброто: - Вземи най-доброто: Ajax and .NetAjax and .Net

20

21

УЧИ НА БАЗАТА НА УЧИ НА БАЗАТА НА ПРИМЕРИПРИМЕРИ WWW.GOOGLE.COM

Йерархично представяне на съдържание http://www.scriptsearch.com/JavaScript/Scripts/ 80+ AJAX-Solutions For Professional Coding80+ AJAX-Solutions For Professional Coding AJAX Wiki http://www-128.ibm.com/developerworks/web/library/wa-

ajaxintro1.html AJAX at the Open Directory Project.AJAX at the Open Directory Project. Jesse James Garrett. “Ajax: A New Approach to Web Applications”, Jesse James Garrett. “Ajax: A New Approach to Web Applications”,

Adaptive PathAdaptive Path AJAX:Getting Started by Mozilla Developer Center.AJAX:Getting Started by Mozilla Developer Center. Ajax Tutorial with get, post, text and XML examples.Ajax Tutorial with get, post, text and XML examples. Attacking AJAX Applications Presentation on Ajax Security issues Attacking AJAX Applications Presentation on Ajax Security issues

given at the Black Hat security conference.given at the Black Hat security conference.

22