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

Стефан Дражев, каб. 510, ИУ-Варна

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

Въведение в JavaScript

Основни JS елементи

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

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

Въведение в AJAX

Основни AJAX елементи

Примери на AJAX- -приложения

Въведение в JavaScript В началото е … Netscape Java Script е скриптов език, създаден от екипа на Netscape и първоначално носещ името LiveScript. След това (във версия 2 на Netscape Navigator) той е преименуван на Java Script. Microsoft има собствена реализация на JScript ( с възможности, подобни на Java Script) в своя Internet Explorer.

В началото е … Netscape

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

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

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

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

Синтаксис на JavaScript В Java Script всеки ред завършва с точка и запетая. Докато не срещне точка и запетая всичко се приема за един ред. Друга особенност е , че Java Script прави разлика между малки и големи букви. Правилата за образуване на променливите са : Името на променливата трябва да започва с буква от латинската азбука (a-z или A-Z) или знак за подчертаване. Останалата част от името може да съдържа всяка буква, цифра или знак за подчертаване. Името на променливата не може да съдържа интервали. Избягвайте употребата на запазени думи като име на променлива.

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

Правилата за образуване на променливите са :

Името на променливата трябва да започва с буква от латинската азбука (a-z или A-Z) или знак за подчертаване.

Останалата част от името може да съдържа всяка буква, цифра или знак за подчертаване.

Името на променливата не може да съдържа интервали.

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

Дефиниране на променливите в Java Script Дефинирането на променливите в Java Script не е задължително, но се препоръчва, от гледна точка на прегледност на програмата. Това става със запазената дума var . За да се намали размера на програмата е възможно декларирането на няколко променливи едновременно : var text = "Hello world"; var x,y,z;

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

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

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

Ето пример за числови променливи :

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

Дефиниране на низове в Java Script Низовите променливи се представят като текст заграден в кавички (ако са заградени в кавички цифрите също се интерптретират като текст). Примери: var text = "Hello wolrd!“ var text1 = "40"; vat text2 = "" Низ в кавички. "";

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

Примери:

var text = "Hello wolrd!“

var text1 = "40";

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

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

Символ Значение

\ Ляво наклонена черта

‘ Апостроф

" Кавички

 Изтрива знака пред символа(backspace)

f Нова страница на принтера (form feed)

Нов ред

Връщане в началото на реда (carrige return)

Табулатор

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

Обекти/състояния/променливи

Методи/функции

Онаследяване

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

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

чрез връзка към външен файл (подобно на CSS)

<HEAD> <LINK HREF=&quot;script.js&quot; TYPE=&quot;text/javascript&quot;> </HEAD>

чрез вграждане в тялото на документа

<SCRIPT LANGUAGE=&quot;JavaScript&quot; TYPE=&quot;text/JavaScript&quot;> .... </SCRIPT>

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

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

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

Примери на JS -функции COOLjsMenu COOLjsMenu – менюта, вграждани във вашия сайт &quot; menuitems.js &quot;

Примери на JS -функции Tree Contents Tree Contents – йерархическо (дървовидно) представяне на съдържание <script language=&quot;JavaScript&quot;> 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><

Въведение в AJAX AJAX (Asynchronous JavaScript and XML ) Комбинация от XHTML /DHTML ( или HTML ) и CSS , за представяне на информацията във Web- страниците DOM & AJAX = Document Object Model

AJAX (Asynchronous JavaScript and XML )

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

DOM & AJAX = Document Object Model

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

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

The XMLHttpRequest object <script language=&quot;javascript&quot; type=&quot;text/javascript&quot;> var xmlHttp = new XMLHttpRequest(); </script> Web form и server асинхронна комуникация http://www-128.ibm.com/developerworks/web/library/wa-ajaxintro1.html

<script language=&quot;javascript&quot; type=&quot;text/javascript&quot;> var xmlHttp = new XMLHttpRequest();

</script>

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

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

AJAX Пример 1 Make a request with Ajax function callServer() { // Get the city and state from the web form var city = document.getElementById(&quot;city&quot;).value; var state = document.getElementById(&quot;state&quot;).value; // Only go on if there are values for both fields if ((city == null) || (city == &quot;&quot;)) return; if ((state == null) || (state == &quot;&quot;)) return; // Build the URL to connect to var url = &quot;/scripts/getZipCode.php?city=&quot; + escape(city) + &quot;&state=&quot; + escape(state); // Open a connection to the server xmlHttp.open(&quot;GET&quot;, url, true); // Setup a function for the server to run when it's done xmlHttp.onreadystatechange = updatePage; // Send the request xmlHttp.send(null); }

Make a request with Ajax function callServer() {

// Get the city and state from the web form

var city = document.getElementById(&quot;city&quot;).value;

var state = document.getElementById(&quot;state&quot;).value;

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

if ((city == null) || (city == &quot;&quot;)) return;

if ((state == null) || (state == &quot;&quot;)) return;

// Build the URL to connect to

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

// Open a connection to the server

xmlHttp.open(&quot;GET&quot;, url, true);

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

xmlHttp.onreadystatechange = updatePage;

// Send the request

xmlHttp.send(null);

}

FUTURE OF AJAX.NET PROFESSIONAL - URL Едон блог за истински професионалисти - Вземи най-доброто: Ajax and .Net

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

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

УЧИ НА БАЗАТА НА ПРИМЕРИ WWW.GOOGLE.COM Йерархично представяне на съдържание http://www.scriptsearch.com/JavaScript/Scripts/ 80+ AJAX-Solutions For Professional Coding AJAX Wiki http://www-128.ibm.com/developerworks/web/library/wa-ajaxintro1.html AJAX at the Open Directory Project . Jesse James Garrett. “Ajax: A New Approach to Web Applications”, Adaptive Path AJAX:Getting Started by Mozilla Developer Center. Ajax Tutorial with get, post, text and XML examples. Attacking AJAX Applications Presentation on Ajax Security issues given at the Black Hat security conference.

WWW.GOOGLE.COM

Йерархично представяне на съдържание

http://www.scriptsearch.com/JavaScript/Scripts/

80+ AJAX-Solutions For Professional Coding

AJAX Wiki

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

AJAX at the Open Directory Project .

Jesse James Garrett. “Ajax: A New Approach to Web Applications”, Adaptive Path

AJAX:Getting Started by Mozilla Developer Center.

Ajax Tutorial with get, post, text and XML examples.

Attacking AJAX Applications Presentation on Ajax Security issues given at the Black Hat security conference.

Q&A ???