Въведение в JavaScript

Въведение в JavaScript

МУЛТИМЕДИЯ И ОСНОВИ НА УЕБ ДИЗАЙНА

ас.Елена Първанова

2011

ТЕМА 3

ИСТОРИЯ

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

• JavaScrip е програмен език, който трябва да бъде “превеждан” или интерпретиран. Интерпретатора му е вграден в софтуера на web браузърите.

JAVASCRIPT И DHTML

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

• DOM представя как всички web страници съдържат обекти със свойства, които могат да бъдат манипулирани с JavaScript.

• Ajax (Asynchronous JavaScript and XML) е технология в web разработките за създаване на интерактивни web приложения.

• Ajax позволява web страниците да се зареждат по-бързо. Посредство асинхронен обмен на малки порции данни „зад кадър“ , могат да се променят само частично информации на уеб страницата. Така се намалява количеството информация, която се обменя между сървъра и клиента.

• Ajax комбинира:o XHTML (или HTML) и CSSo DOM реализиран чрез програмиране

от страна на клиента с помощта на JavaScript (или JScript )за динамична визуализация и интерактивност на предоставената информация.

o XMLHttpRequest (XHR) обекта за обмяна на данни асинхронно с web сървъра.

o XML в някои случаи е използвания формат за трансфер на данни между сървър и клиент.

JAVASCRIPT И AJAX

ВЪЗМОЖНОСТИ НА JAVASCRIPT• JavaScript предоставя:

o ефекти с изображения. Rollover ефекти, слайд шоу, и много други;

o уравление на прозорци и рамки. Отваряне и затваряне на прозорци, задаване на размера на прозорец, управление на един прозорец от друг и т.н;

o разпознаване на типа на браузъра, операционната система, разделителната способност на екрана и дълбочината на цветовете;

o и много други интерактивни дейности.

• Не може да записва информация на сървъра (не можете да организирате форуми, да обработвате бази данни).

ВКЛЮЧВАНЕ НА JAVASCRIPT В HTML

• Необходимо е да бъде дефиниран скриптов блок в HTML кода.• Начини за включване:

o В секцията Head на домумента:<SCRIPT LANGUAGE="JavaScript" TYPE="text/JavaScript"></SCRIPT> o Добавяне между HTML таговете:<SCRIPT></SCRIPT> o В секцията секцията Head с добавен атрибут src, посочващ URL адреса

на JavaScript файла:<SCRIPT TYPE="text/JavaScript“ SRC=“JavascriptKod.js></SCRIPT>

Някои по-стари версии на Netscape Navigator и Internet Explorer не разбират JavaScript. Затова трябва да скривате скрипта в HTML коментари <-- ! //-->.

HELLO WORLD

• Извеждането на екрана на предупреждаващ диалогов прозорец става с извикването на вътрешната JavaScript функция alert():

alert ( “Hello World” );

Включване в HTML документа:<HEAD><TITLE> Hello World </TITLE><SCRIPT TYPE="text/JavaScript“ SRC=“hello.js></SCRIPT> </HEAD>

<HTML><HEAD><TITLE>javascript</TITLE></HEAD><BODY><SCRIPT LANGUAGE="JavaScript"> </SCRIPT></BODY></HTML>

HELLO WORLD

ПРАВИЛА НА СИНТАКСИСА• Поставяне на ; в края на

всяка конструкция.• JavaScript е език

чувствителен на главни и малки букви ( за ключовите думи се използват малки букви).

• Интервалите табулациите и новите редове се игнорират от JavaScript.

• Полезно е добавянето на коментари към кода:o Знаци // за едноредов

коментар в края на реда;// това е едноредов коментар

o Знаци /* */ за многоредов коментар.

/* Това е многоредов коментар. Това е многоредов коментар. */

КЛЮЧОВИ ДУМИ

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

ПРОМЕНЛИВИ• Правилата за образуване на

променливите са :• Името на променливата

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

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

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

• Не се употребяват на запазени думи като име на променлива.

• Променливе в JavaScript се инициализират с ключовата дума var.

Пример:var pi = 3.14;var mytext = “Променливи в JavaScript”;var d = true;var a, b, c;

ESCAPE ПОСЛЕДОВАТЕЛНОСТ

• “ \ “ позволява определен знак да бъде пропуснат при разпознаването на символите като знаци.

Пример:

alert ( “\” Здравейте! \” от JavaScript” );

\a Alert (звуков сигнал) \b Backspace (връща курсора с

един символ) \f Form-feed (преминава на нова

страница) \n New line (преминава на нов

ред) \r Carriage return (премества

курсора в началото на реда) \t Tab (символ за табулация) \” Кавички\\ Една обратно наклонена черта

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

Примери за низови променливи са :var text = "Hello wolrd!“;var text1 = "40“ ;vat text2 = "\" Низ в кавички. \"“ ;

ФУНКЦИИ• Функцията е част от JavaScript кода, която може да бъде

изпълнена един или повече пъти от JavaScript приложението.

Пример://функция, която извежада съобщение в диалогов прозорецfunction f1 (){

alert (“Това е моята първа JavaScript функция”);}

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

<BODY onload = "f1()"></BODY>

• Операторa за присвояване в JavaScript e “=“ .• Операторите ++, -- и - са унарни оператори оператори (действат върху един

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

ОПЕРАТОРИ ЗА ПРИСВОЯВАНЕ

ОПЕРАТОРИ ЗА СРАВНЕНИЕ

АРИТМЕТИЧНИ ОПЕРАТОРИ

ЛОГИЧЕСКИ ОПЕРАТОРИ

ИЗПЪЛНЕНИЕ НА ОПЕРАЦИИТЕ

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

изпълнява отляво надясно.

УСЛОВНИ ОПЕРАТОРИ В 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;

ОПЕРАТОРИ ЗА ЦИКЪЛ• Конструкция на оператора for

for (израз1; израз2; израз3){конструкция 1;конструкция 1; }

израз1 - израз, който задава началните стийности на променливитеизраз2 - логически израз, условие на цикълаизраз3 - израз, който променя стийноста на управляващата променлива на цикъла

• Конструкция на цикъл while

while (условен израз) {конструкция 1;конструкция 2;}

• Конструкция на цикълdo –while

do {конструкция 1;конструкция 2;} while (условен израз)

ОБЕКТНО ПРОГРАМИРАНЕ В JAVA SCRIPT

• Всеки обект се състои от: Набор от свойства -

съдържат данните. Методи, които извършват

определени действия.• Достъпа до свойставата на

обектите става чрез комбиниране на името на обекта с името на свойството разделени с точка:

// Функция, задаваща цвета на фона на документа

function set_bg(){document.bgColor = “blue";}

• Методите на обектите се използват подобно на свойствата с тази разлика, че задължително поставянето на скоби след името на метода:

array1.sort();array1.reverse();array1.join(",");

• Конструктор в JavaScript - new обектенТип(параметри)

var array1 = new Array(10);

ОБЕКТИ НА БРАУЗЪРА В JAVA SCRIPT

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

обекти описание

window Предоставя методи за достъп до прозореца на браузъра. При достъп до методите се допуска префиксът window да се пропуска.

document Предоставя методи за достъп до елементите на страницата.

location Достъп до URL адрес.

history Достъп до историята на браузъра.

frame Достъп до фреймове. Чрез масива е възможен достъп до всики фреймове.

link Достъп до хипертекстова връзка. Чрез помоща на масива може да осъществи достъп до всички връзки в документа.

image Достъп до изображения.

area Достъп до карта - изображение от клиентската страна.

Applet Достъп до Java аплет.

обекти описание

event Достъп до информация за случило се събитие.

form Достъп до формуляри.

elements Достъп до всичките елементи на даден формуляр.

text Достъп до текстово поле във формуляр.

textarea Достъп до текстова област във формуляр.

radio Достъп до радио бутони във формуляр.

checkbox Достъп до oтметки във формуляр.

button Достъп до бутони във формуляр.

submit Достъп до Submit бутон във формуляр.

reset Достъп до Reset бутон във формуляр.

select Достъп до елементите на списъка.

password Достъп до поле за парола във формуляр.


обект описание

hidden Достъп до скрито поле във формуляр.

FileUpload Достъп до поле за качване на файл във формуляр.

navigator Предоставя информация за типа на браузъра с който се разглежда страницата.

screen Достъп до информация за размера и дълбочината на цветовете на екрана на потребителя.

embed Позволява достъп до вградени обекти.

mimeType Достъп до поддържаните от браузъра MIME типове.

plugin Достъп до информация за даден plugin.


ОБЕКТИ НА СТРАНИЦИТЕ

Индентифициране на браузъра• Обект navigator – притежава

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

• Името на браузъра може да бъде открито с помощта на свойството navigator.appName, а информацията за конкретната версия е достъпна чрез navigator.userAgent.

Проверка на платформатаnavigator.platform прави проверка на потребителската платформа

Информация за plugin – модулитеСвойството на масив navigator.plungin открива информация за всички plugin – модулите, които са инсталирани към браузъра.

СВОЙСТВА НА ОБЕКТА WINDOW

• Метод window.confirm() – при извикването си отваря диалогови прозорци

• Метод window.prompt() – служи за изискване на данни, които потребителят въвежда от клавиатурата в текстовото поле на диалоговия прозорец, който се отваря.

• Обектът window.location съдържа пълния URL адрес на документа, който в момента е зареден.

• Свойството window.history съдържа масив от предходно посетени URL адреси по време на сесията на браузъра. Методи на обекта са back(), forward() и go().

СВОЙСТВА НА ОБЕКТА WINDOW

• Обектът window.onload() служи за задаване на името на на функция, която да бъде извикана веднага след като приключи зареждането на съответния документ в браузъра.

• Обектът window.status служи за извеждане на съобщение в лентата за състояние на на браузъра, докато друг елемент в текущия документ не зададе нов текст за тази лента или докато тя не бъде върната в обичайното си състояние.

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

• Обектът window.screen дава информация за разделителната способност на екрана на потребителя от свойствата width и height.

ХЕНДЛЪРИ НА СЪБИТИЯ

Събитие Click• Най-използваното събитие,

което възниква, когато потребителят щракне с левия бутон на мишката, докато курсорът е позициониран над бутон на формуляр в даден web домумент.

• Обикновено onclick се присвоява към тага <input> на съответния бутон в HTML.

<input type="button" value=“Щракнете тук" onclick=“zdr(‘Здравейте!’) " />

//функция, която обработва събитието Clickfunction zdr (str) {//Извежда на екрана подадения низов аргумент alert (str) ;}

Събитие MouseMove• При всяко преместване

на курсора на мишката се осъществява събитие MouseMove. То може да бъде регистрирано от JavaScript, за да бъде използвано с хендлъра на събития onmousemove.

Събитие MouseOver• Събитието MouseOver се

осъществява, когато потребителят постави курсора на мишката над даден обект в web страница.

• Тагът <a> може да се използва за задаване на хендлъра на събитие за MouseOver към HTML атрибута onmouseover.

<a href = “target.html” onmouseover = “f_mouseover()”/>


Събитие MouseOut• Събитието се осъществява, когато

потребителят премести курсора на мишката извън HTML хипервръзка в дадена web страница.

• Тагът <a> може да се използва за задаване на хендлъра на събитие за MouseOut чрез присвояване на функция, която да бъде извикана към HTML атрибута onmouseout.

<a href = “target.html” onmouseout = “f_mouseout()”/>


Въведение в JavaScript

Documents

Transcript of Въведение в JavaScript