1 / 31

Въведение в JavaScript

Мултимедия и основи на уеб дизайна. а с.Елена Първанова. Въведение в JavaScript. 201 1. ТЕМА 3. История.

dionne
Download Presentation

Въведение в JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Мултимедия и основи на уеб дизайна ас.Елена Първанова Въведение в JavaScript 2011 ТЕМА 3

  2. История • JavaScript е езикзапрограмиране, създаденпрез 1994 годинаотфирматаNetscapeзануждитенатехниябраузър. В началототой е носелдругоназвание, носледвключванетонаSun Microsystems – създател и собственикнаезиказапрограмиранеJava – сеоформя и окончателнотоимеJavaScript. • JavaScrip е програмен език, който трябва да бъде “превеждан” или интерпретиран. Интерпретатора му е вграден в софтуера на web браузърите.

  3. JavaScriptиDHTML • Комбинирането на JavaScript и Документния обектен модел (Document Object Model – DOM) позволява създаването на мощни DHTML ефекти. • DOM представя как всички web страници съдържат обекти със свойства, които могат да бъдат манипулирани с JavaScript.

  4. JavaScriptиajax • Ajax комбинира: • XHTML (или HTML) и CSS • DOMреализиран чрез програмиране от страна на клиента с помощта на JavaScript(или JScript)за динамична визуализация и интерактивност на предоставената информация. • XMLHttpRequest (XHR) обекта за обмяна на данни асинхронно с web сървъра. • XMLв някои случаи е използвания формат за трансфер на данни между сървър и клиент. • Ajax (Asynchronous JavaScript and XML) е технология в web разработките за създаване на интерактивни web приложения. • Ajax позволява web страниците да се зареждат по-бързо. Посредство асинхронен обмен на малки порции данни „зад кадър“ , могат да се променят само частично информации на уеб страницата. Така се намалява количеството информация, която се обменя между сървъра и клиента.

  5. възможности на JavaScript • JavaScript предоставя: • ефекти с изображения. Rollover ефекти, слайд шоу, и много други; • уравление на прозорци и рамки. Отваряне и затваряне на прозорци, задаване на размера на прозорец, управление на един прозорец от друг и т.н; • разпознаване на типа на браузъра, операционната система, разделителната способност на екрана и дълбочината на цветовете; • и много други интерактивни дейности. • Не може да записва информация на сървъра (не можете да организирате форуми, да обработвате бази данни).

  6. включване на JavaScript в HTML • Необходимо е да бъде дефиниран скриптов блок в HTML кода. • Начини за включване: • В секцията Head на домумента: <SCRIPT LANGUAGE="JavaScript" TYPE="text/JavaScript"> </SCRIPT> • Добавяне между HTML таговете: <SCRIPT></SCRIPT> • В секцията секцията Head с добавен атрибут src, посочващ URL адреса на JavaScript файла: <SCRIPT TYPE="text/JavaScript“ SRC=“JavascriptKod.js> </SCRIPT> Някои по-стари версии на Netscape Navigator и Internet Explorer не разбират JavaScript. Затова трябва да скривате скрипта в HTML коментари <-- ! //-->.

  7. Hello World • Извеждането на екрана на предупреждаващ диалогов прозорец става с извикването на вътрешната JavaScript функция alert(): alert ( “Hello World” ); Включване в HTML документа: <HEAD> <TITLE> Hello World </TITLE> <SCRIPT TYPE="text/JavaScript“ SRC=“hello.js> </SCRIPT> </HEAD>

  8. Hello World <HTML><HEAD><TITLE>javascript</TITLE></HEAD><BODY><SCRIPT LANGUAGE="JavaScript">   <!--document.write("Здравей свят!“ )//--></SCRIPT></BODY></HTML>

  9. Правила на синтаксиса • Поставяне на ; в края на всяка конструкция. • JavaScript е език чувствителен на главни и малки букви ( за ключовите думи се използват малки букви). • Интервалите табулациите и новите редове се игнорират от JavaScript. • Полезно е добавянето на коментари към кода: • Знаци // за едноредов коментар в края на реда; // това е едноредов коментар • Знаци /* */ за многоредов коментар. /* Това е многоредов коментар. Това е многоредов коментар. */

  10. Ключови думи • Не могат да се използват като индентифициращи имена на променливи, функции или етикети:

  11. променливи • Правилата за образуване на променливите са : • Името на променливата трябва да започва с буква от латинската азбука (a-z или A-Z) или знак за подчертаване. • Останалата част от името може да съдържа всяка буква, цифра или знак за подчертаване. • Името на променливата не може да съдържа интервали. • Не се употребяват на запазени думи като име на променлива. • Променливе в JavaScript се инициализират с ключовата дума var. Пример: var pi = 3.14; varmytext = “Променливи в JavaScript”; vard = true; var a, b, c;

  12. Escape последователност • “ \ “ позволява определен знак да бъде пропуснат при разпознаването на символите като знаци. Пример: alert ( “\”Здравейте! \”от JavaScript” ); \aAlert (звуков сигнал) \b Backspace (връща курсора с един символ) \f Form-feed (преминава на нова страница) \n New line (преминава на нов ред) \r Carriage return (премества курсора в началото на реда) \t Tab (символ за табулация) \” Кавички \\ Една обратно наклонена черта

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

  14. функции • Функцията е част от JavaScript кода, която може да бъде изпълнена един или повече пъти от JavaScript приложението. Пример: //функция, която извежада съобщение в диалогов прозорец function f1 () { alert (“Това е моята първа JavaScript функция”); } Атрибутът onloadможе да бъде използван, за да извика функцията в момента, когато се зарежда в браузъра. <BODY onload = "f1()"></BODY>

  15. Оператори за присвояване • Операторa за присвояване в JavaScript e “=“. • Операторите ++, -- и -са унарни оператори оператори (действат върху един операнд). Тези операции могат да се запишат по два начина : x++ и ++x. Разликата е, че в първия случай (прилагане на операцията след операнда) и първо се връща стойноста и след това се прилага операцията. Обратно, във втория запис (прилагане на операцията след операнда) - първо се изпълнява операцията и след това се връща, вече новата стойност на операнда. Другите разгледани оператори са бинарни, защото действат върху два операнда (това са величините върху, които действа операцията). Оператора за присвояване = може да се комбинира с аритметичните и логическите оператори.

  16. Оператори за сравнение

  17. Аритметични оператори

  18. Логически оператори

  19. изпълнение на операциите • Реда за изпълнение на операциите в Java Script е следния: • скоби () • умножение и деление • събиране и изваждане • ако участват операции с еднакъв приоритет израза са изпълнява отляво надясно.

  20. Условни оператори в JavaScript • В условен операторJava Script те са два : по - важният if и по - рядко използвания switch. • Оператора if има следната конструкция: if (условен израз) {конструкция 1;конструкция 2;...} Разширена конструкция на if: if (условен израз) {конструкция 1;конструкция 2;} else {конструкция 3;конструкция 4;} • Конструкция на switch. • switch(тестов израз){case "baseball":конструкция 1;     конструкция 2;break;   case "football":конструкция 3;     конструкция 4;break;   case "basketball":конструкция 5;     конструкция 6;break;    default:конструкция 7;     конструкция 8;break;

  21. Оператори за цикъл • Конструкция на оператора for for (израз1; израз2; израз3){конструкция 1;конструкция 1; } израз1 - израз, който задава началните стийности на променливитеизраз2 - логически израз, условие на цикълаизраз3 - израз, който променя стийноста на управляващата променлива на цикъла • Конструкция на цикълwhile while (условен израз) {конструкция 1;конструкция 2;} • Конструкция на цикъл do –while do {конструкция 1;конструкция 2;} while (условен израз)

  22. Обектно програмиране в Java Script • Всеки обект се състои от: • Набор от свойства -съдържат данните. • Методи, които извършват определени действия. • Достъпа до свойставата на обектите става чрез комбиниране на името на обекта с името на свойството разделени с точка: // Функция, задаваща цвета на фона на документа function set_bg() { document.bgColor = “blue"; } • Методите на обектите се използват подобно на свойствата с тази разлика, че задължително поставянето на скоби след името на метода: array1.sort();array1.reverse();array1.join(","); • Конструктор в JavaScript - new обектенТип(параметри) var array1 = new Array(10);

  23. обекти на браузъра в Java Script • Java Script притежва множество вградени обекти.Те се създават при зареждането на страница от браузъра и включват обекти като прозорци, форми, фреймове и др.

  24. обекти на браузъра в Java Script

  25. обекти на браузъра в Java Script

  26. Обекти на страниците Индентифициране на браузъра • Обект navigator – притежава свойства, които дават информация за браузъра, използван за преглед на даден документ. • Името на браузъра може да бъде открито с помощта на свойството navigator.appName, а информацията за конкретната версия е достъпна чрез navigator.userAgent. Проверка на платформата navigator.platformправи проверка на потребителската платформа Информация за plugin – модулите Свойството на масив navigator.plunginоткрива информация за всички plugin – модулите, които са инсталирани към браузъра.

  27. Свойства на обекта window • Метод window.confirm()– при извикването си отваря диалогови прозорци • Метод window.prompt() – служи за изискване на данни, които потребителят въвежда от клавиатурата в текстовото поле на диалоговия прозорец, който се отваря. • Обектът window.locationсъдържа пълния URL адрес на документа, който в момента е зареден. • Свойството window.historyсъдържа масив от предходно посетени URL адреси по време на сесията на браузъра. Методи на обекта са back(), forward() и go().

  28. Свойства на обекта window • Обектът window.onload() служи за задаване на името на на функция, която да бъде извикана веднага след като приключи зареждането на съответния документ в браузъра. • Обектът window.statusслужи за извеждане на съобщение в лентата за състояние на на браузъра, докато друг елемент в текущия документ не зададе нов текст за тази лента или докато тя не бъде върната в обичайното си състояние. • Обектътwindow.open() притежава три аргумента: за задаване съответно на URL адреса, който да се зареди в изскачащия (pop-up)прозорец, името на прозореца и желаните му размери. • Обектът window.screenдава информация за разделителната способност на екрана на потребителя от свойствата width и height.

  29. Хендлъри на събития Събитие Click • Най-използваното събитие, което възниква, когато потребителят щракне с левия бутон на мишката, докато курсорът е позициониран над бутон на формуляр в даден web домумент. • Обикновено onclick се присвоява към тага <input>на съответния бутон в HTML. <input type="button" value=“Щракнете тук" onclick=“zdr(‘Здравейте!’) " /> //функция, която обработва събитието Click function zdr(str) { //Извежда на екрана подадения низов аргумент alert(str) ; }

  30. Хендлъри на събития Събитие MouseOver • Събитието MouseOver се осъществява, когато потребителят постави курсора на мишката над даден обект в web страница. • Тагът <a>може да се използва за задаване на хендлъра на събитие за MouseOverкъм HTML атрибута onmouseover. <a href = “target.html”onmouseover = “f_mouseover()”/> СъбитиеMouseMove • При всяко преместване на курсора на мишката се осъществява събитие MouseMove. То може да бъде регистрирано от JavaScript, за да бъде използвано с хендлъра на събития onmousemove.

  31. Хендлъри на събития Събитие MouseOut • Събитието се осъществява, когато потребителят премести курсора на мишката извън HTML хипервръзка в дадена web страница. • Тагът <a> може да се използва за задаване на хендлъра на събитие за MouseOutчрез присвояване на функция, която да бъде извикана към HTML атрибута onmouseout. <a href = “target.html”onmouseout = “f_mouseout()”/>

More Related