web programming with javascript and ajax
TRANSCRIPT
![Page 1: Web Programming with JavaScript and Ajax](https://reader036.vdocuments.us/reader036/viewer/2022062304/55c7ae0ebb61eb8e7f8b4745/html5/thumbnails/1.jpg)
WEB-WEB-ПРОГРАМИРАНЕПРОГРАМИРАНЕСтефан Дражев, каб. 510, ИУ-ВарнаСтефан Дражев, каб. 510, ИУ-Варна
1
![Page 2: Web Programming with JavaScript and Ajax](https://reader036.vdocuments.us/reader036/viewer/2022062304/55c7ae0ebb61eb8e7f8b4745/html5/thumbnails/2.jpg)
2
JavaScript. AJAXJavaScript. AJAX Въведение вВъведение в JavaScriptJavaScript ОсновниОсновни JS елементиелементи Методи за интеграция на Методи за интеграция на JS с с HTMLHTML Примери на Примери на JS-функции-функции Въведение в Въведение в AJAX ОсновниОсновни AJAX елементиелементи Примери наПримери на AJAX- -приложения -приложения
![Page 3: Web Programming with JavaScript and Ajax](https://reader036.vdocuments.us/reader036/viewer/2022062304/55c7ae0ebb61eb8e7f8b4745/html5/thumbnails/3.jpg)
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.
![Page 4: Web Programming with JavaScript and Ajax](https://reader036.vdocuments.us/reader036/viewer/2022062304/55c7ae0ebb61eb8e7f8b4745/html5/thumbnails/4.jpg)
JAVA JAVA И И JAVASCRIPTJAVASCRIPT??Основни разлики между Основни разлики между
4
![Page 5: Web Programming with JavaScript and Ajax](https://reader036.vdocuments.us/reader036/viewer/2022062304/55c7ae0ebb61eb8e7f8b4745/html5/thumbnails/5.jpg)
5
Синтаксис наСинтаксис на JavaScriptJavaScript В Java Script всеки ред завършва с точка и запетая. В Java Script всеки ред завършва с точка и запетая.
Докато не срещне точка и запетая всичко се приема за Докато не срещне точка и запетая всичко се приема за един ред. Друга особенност е , че Java Script прави един ред. Друга особенност е , че Java Script прави разлика между малки и големи букви.разлика между малки и големи букви.
Правилата за образуване на променливите са :Правилата за образуване на променливите са : Името на променливата трябва да започва с буква от латинската Името на променливата трябва да започва с буква от латинската
азбука (a-z или A-Z) или знак за подчертаване. азбука (a-z или A-Z) или знак за подчертаване. Останалата част от името може да съдържа всяка буква, цифра Останалата част от името може да съдържа всяка буква, цифра
или знак за подчертаване. или знак за подчертаване. Името на променливата не може да съдържа интервали. Името на променливата не може да съдържа интервали. Избягвайте употребата на запазени думи като име на променлива. Избягвайте употребата на запазени думи като име на променлива.
![Page 6: Web Programming with JavaScript and Ajax](https://reader036.vdocuments.us/reader036/viewer/2022062304/55c7ae0ebb61eb8e7f8b4745/html5/thumbnails/6.jpg)
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;
![Page 7: Web Programming with JavaScript and Ajax](https://reader036.vdocuments.us/reader036/viewer/2022062304/55c7ae0ebb61eb8e7f8b4745/html5/thumbnails/7.jpg)
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; // шестнайсетично представянепредставяне
![Page 8: Web Programming with JavaScript and Ajax](https://reader036.vdocuments.us/reader036/viewer/2022062304/55c7ae0ebb61eb8e7f8b4745/html5/thumbnails/8.jpg)
8
Дефиниране на низове в Дефиниране на низове в Java ScriptJava Script
Низовите променливи се представят като текст Низовите променливи се представят като текст заграден в кавички (ако са заградени в кавички заграден в кавички (ако са заградени в кавички цифрите също се интерптретират като текст). цифрите също се интерптретират като текст).
Примери:Примери:
var text = "Hello wolrd!“var text = "Hello wolrd!“
var text1 = "40";var text1 = "40";
vat text2 = "\" vat text2 = "\" Низ в кавички. \"";Низ в кавички. \"";
![Page 9: Web Programming with JavaScript and Ajax](https://reader036.vdocuments.us/reader036/viewer/2022062304/55c7ae0ebb61eb8e7f8b4745/html5/thumbnails/9.jpg)
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 ТабулаторТабулатор
![Page 10: Web Programming with JavaScript and Ajax](https://reader036.vdocuments.us/reader036/viewer/2022062304/55c7ae0ebb61eb8e7f8b4745/html5/thumbnails/10.jpg)
10
ОбектиОбектиJava ScriptJava Script Обекти/състояния/променливиОбекти/състояния/променливи Методи/функцииМетоди/функции ОнаследяванеОнаследяване
ПРИМЕРПРИМЕР: : такъв обект е такъв обект е windowindow, който представя w, който представя софтуерно текущия прозорец на браузъра. Един от софтуерно текущия прозорец на браузъра. Един от неговите методи е функцията неговите методи е функцията open(open(), която отваря нов ), която отваря нов прозорец. open() сама по себе си е функция, тя се прозорец. open() сама по себе си е функция, тя се превръща в метод на обекта едва, когато бъде включена превръща в метод на обекта едва, когато бъде включена в него, което ще се запише така - в него, което ще се запише така - window.open(). window.open().
![Page 11: Web Programming with JavaScript and Ajax](https://reader036.vdocuments.us/reader036/viewer/2022062304/55c7ae0ebb61eb8e7f8b4745/html5/thumbnails/11.jpg)
11
Методи за интеграция Методи за интеграция на на JS с с HTMLHTML
чрез връзка към външен файл (подобно на CSS)<HEAD><LINK HREF="script.js" TYPE="text/javascript"></HEAD> чрез вграждане в тялото на документа<SCRIPT LANGUAGE="JavaScript" TYPE="text/JavaScript">....</SCRIPT>
![Page 12: Web Programming with JavaScript and Ajax](https://reader036.vdocuments.us/reader036/viewer/2022062304/55c7ae0ebb61eb8e7f8b4745/html5/thumbnails/12.jpg)
12
Вграждане на кода в Вграждане на кода в заглавана секциязаглавана секция
код, код, сложен в включен в заглавната секция не се изпълнява докато не бъде извикан
Вграждане на кода в Вграждане на кода в тялото на тялото на HTML-HTML-
код, код, сложен в тялото на HTML-страницата се изпълнява в реда в който е поставен
![Page 13: Web Programming with JavaScript and Ajax](https://reader036.vdocuments.us/reader036/viewer/2022062304/55c7ae0ebb61eb8e7f8b4745/html5/thumbnails/13.jpg)
Примери на Примери на JS-функции-функции COOLjsMenuCOOLjsMenu
13
COOLjsMenu – менюта, вграждани във вашия сайт"menuitems.js"
![Page 14: Web Programming with JavaScript and Ajax](https://reader036.vdocuments.us/reader036/viewer/2022062304/55c7ae0ebb61eb8e7f8b4745/html5/thumbnails/14.jpg)
Примери на Примери на 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><
![Page 15: Web Programming with JavaScript and Ajax](https://reader036.vdocuments.us/reader036/viewer/2022062304/55c7ae0ebb61eb8e7f8b4745/html5/thumbnails/15.jpg)
15
Въведение вВъведение в AJAX
AJAXAJAX (Asynchronous (Asynchronous JavaScript and and XML))
Комбинация от XHTML/DHTML (/DHTML (или или HTML) ) ии CSS, , за представяне на за представяне на информацията във информацията във Web-Web-страницитестраниците
DOM & AJAX = Document Object Document Object ModelModel
![Page 16: Web Programming with JavaScript and Ajax](https://reader036.vdocuments.us/reader036/viewer/2022062304/55c7ae0ebb61eb8e7f8b4745/html5/thumbnails/16.jpg)
16
AJAX Компоненти (Web Web applications)applications)
![Page 17: Web Programming with JavaScript and Ajax](https://reader036.vdocuments.us/reader036/viewer/2022062304/55c7ae0ebb61eb8e7f8b4745/html5/thumbnails/17.jpg)
17
AJAX Компоненти -DOMThe Document Object Model (DOM) is a platform- and language-independent standard object model for representing HTML or XML and related formats.
![Page 18: Web Programming with JavaScript and Ajax](https://reader036.vdocuments.us/reader036/viewer/2022062304/55c7ae0ebb61eb8e7f8b4745/html5/thumbnails/18.jpg)
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
![Page 19: Web Programming with JavaScript and Ajax](https://reader036.vdocuments.us/reader036/viewer/2022062304/55c7ae0ebb61eb8e7f8b4745/html5/thumbnails/19.jpg)
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);
}}
![Page 20: Web Programming with JavaScript and Ajax](https://reader036.vdocuments.us/reader036/viewer/2022062304/55c7ae0ebb61eb8e7f8b4745/html5/thumbnails/20.jpg)
FUTURE OF AJAX.NET FUTURE OF AJAX.NET PROFESSIONAL - PROFESSIONAL - URL
Едон блог за истински професионалистиЕдон блог за истински професионалисти
- Вземи най-доброто: - Вземи най-доброто: Ajax and .NetAjax and .Net
20
![Page 21: Web Programming with JavaScript and Ajax](https://reader036.vdocuments.us/reader036/viewer/2022062304/55c7ae0ebb61eb8e7f8b4745/html5/thumbnails/21.jpg)
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.
![Page 22: Web Programming with JavaScript and Ajax](https://reader036.vdocuments.us/reader036/viewer/2022062304/55c7ae0ebb61eb8e7f8b4745/html5/thumbnails/22.jpg)
22