Запознаване с JavaScript - част 2-ра6

Добавен от legolas

06 Feb 2010

(0 от 0 гласували)

Математически операции

Както вече разбрахте, можете да извършвате различни математически операции с променливите от целочислен тип, както и с променливите с плаваща запетая. Операторите са следните :

+	събиране
-	изваждане
*	умножение
/	деление
%	целочислено деление

Когато изпълнявате математическа операция с повече числа, можете да използвате скоби за да разграничите приоритетите на изчисленията. Например ако искате да съберете 2 със 5, а после да разделите резултата на три трябва да напишете (2+5)/3 .Ако изпуснете скобите ще се получи 2+5/3. Тогава първо 5 ще се раздели на 3, а после към резултата ще се прибави 2. Запомнете, че умножението и делениято са по голям приоритет от събирането и изваждането.
Нека да направим един скрипт в който въвеждате годината в която сте родени, след това да изчислява на колко години ще бъдете през 2010 година и най-накрая да се отваря прозорец който да съобщава резултата :

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

</SCRIPT>
</BODY>
</HTML>

var е друг начин да се обявяват променливите (var name="Ivan" , var number=14). Със prompt се отваря прозорец с поле, в което можете да въвеждате информация. Структурата на prompt е следната - prompt("message","value") където message е съобщението което ще се появи заедно с прозореца, а value е някаква начална стойност. Можете да пропуснете value, тогава полето ще бъде празно. В примера чрез prompt присвояваме на променливата year стойноста която ще напишете в полето. В следващия ред създаваме променлива old на която присвояваме стойност 2010 минус стойноста на year. Ако оставите в полето по подразбиране числото 1980, то тогава year ще бъде равно на 1980, а old на 30 (2010-1980). И най-накрая извеждаме съобщение, че през 2010 г. вие ще бъдете на old години, като променливата old се заменя от стойноста и. Вижте как работи този скрипт ТУК! Самото съобщение се извежда с alert прозорец (alert("През 2010 година Вие ще бъдете на "+old+" години")).
Този примерен скрипт не прави проверка за верноста на въведените от потребителя данни, така че ако въведете някакъв стринг вместо число скрипта ще даде грешка.

    Други аритметични операции с променливи са събиране с едно (x++) и изваждена с едно (x--). x++ е същото като x=x+1, а x-- като x=x-1. Ако например променливата x има стойност 5, след x++   x ще е равно на 6.
    Ако присвоявате стойноста на x на друга променлива, например y и в същото време увеличите x с едно, стойноста на двете променливи ще бъде една и съща.
    y=x++
..така x и y ще бъдат с еднаква стойност. Ако напишете обаче :
    y=++x
.. y ще приеме стойноста на x и чак след това x ще се увеличи с 1. Значи да приемем че x=10. Тогава при y=x++ x ще стане 11 и y ще стане 11. Ако напишем y=++x тогава y ще стане 10, а x 11.

Булеви изрази. Условия.

Булевите изрази са операции за сравнение между две променливи. Резултата от такова сравнение има само две стойност - true или false. Например при сравнение дали променливата а е по-голяма от променливата b се връща резултат true, ако е истина или false ако не е истина.
Ето списък на булевите изрази :

x==y	ако x е равно на y стойноста е true
x!=y	ако x не е равно на y стойноста е true
x<y	ако x е по-малко от y стойноста е true
x<=y	ако x е по-малко или равно на y стойноста е true
x>y	ако x е по-голямо от y стойноста е true
x>=y	ако x е по-голямо или равно на y стойноста е true
!x	ако x е false, връща стойност true
x&&y	ако x и y са едновременно true, връща стойност true
x\|\|y	ако x и y са едновременно false, връща стойност true

Булевите изрази обикновено са част от операторите за условно изпълнение if...else... Синтаксиса на условните оператори е следния :

if (условие)
    оператор1
        else
            оператор 2

Смисълът на този оператор е следния : Ако(if) е изпълнено условието, тогава се изпълнява оператор1, иначе(else) се изпълнява оператор 2.
Нека сега да направим примера от предишната страница така, че да се проверява дали рожденната дата не е преди 1900 година и след 2000 година:

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

</SCRIPT>
</BODY>
</HTML>

От примера виждате, че условните оператори могат да се влагат един в друг. Първо проверяваме дали въведената година не е по-малка от 1900 и ако е така, изписваме съответното съобщение. Ако условието не отговаря правим втора проверка дали годината е по-голяма от 2000. Ако това условие отговаря на истината се изкарва друго съобщение. Ако не отговаря на истината се счита че годината е между 1900 и 2000 и се изкарва трето съобшение. Можете да видите ТУК как работи скрипта.
Обърнете внимание, че ако операторите които се изпълняват след условието са повече от един се заграждат с фигурни скоби { }. Когато оператора е само един може и без скоби :

if (year<1900)
document.write("На Вашата възраст не бих седял пред компютъра")

.....

if (year<1900)   {
            document.write("На Вашата възраст не бих седял пред компютъра")
            a=10
            document.write(a)
}

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

var x=prompt("въведете положително или отрицателно число")
if (x<0) {
x=-x
}
document.write(x)

Този скрипт ви подканва да въведете положително или отрицателно число, след което прави проверка дали числото е отрицателно (x<0) и ако е така го преобразува в положително (x=-x обръща знака на променливата x) и накрая го показва на екрана. Вижте ТУК как работи скрипта.

Оператори за цикъл

В езика javascript често се налага да се повтаря една и съща операция няколко пъти. За тази цел се използва оператор за цикъл. Първия оператор за цикъл който ще разгледаме е for. Синтаксиса му е следния :

for (i=0; условие; i++) {

}

...където i е променлива, която се използва за брояч, а условие е булев израз. Нека да направиме скрипт, който да извежда на екрана числата от 0 до 9 :

for (i=0;i<10; i++) {
document.write(i)
document.write("<BR>")
}

    За удобство от сега нататък вече няма да пиша HTML частта от документа.
    Оператора for е оператор за цикъл, който се управлява от една променлива, наречена брояч. В случая това е променливата i, но можете да и дадете каквото искате име. Можем да разделим мислено оператора for на две части. Първата част следва веднага след for и е заградена с кръгли скоби. Втората част е тялото, т.е. там са разположени операторите които ще се изпълняват по време на цикъла.
    В първата част (да я нарячем "условна" защото там се поставя условието) се извърша броенето и проверката дали дадено условие е изпълнено. Нека да я разгледаме по-подробно.

for (i=0;i<10; i++)

Първо създаваме една променлива i като и даваме начална стойност 0 (i=0). След това правим проверка дали стойноста на променливата i е по-малка от 10 (i<10). Ако това условие е вярно, продължаваме нататък, ако не е, цикълът спира. Третата стъпка в условната част е увеличаването на i с 1 (i++). Ако цикълът не е спрян поради изпълняване на условието, той се повтаря отново докато не се изпълни, но без да се нулира променливата отначало. Така при първото завъртане на цикъла i ще бъде равно на 0, при второто на 1 и т.н. докато не стане 9. Когато стане 9 цикълът ще се прекъсне.
Тялото на цикъла се изпълнява толкова пъти, колкото се завърта самия цикъл. В този случай в тялото имаме оператор за отпечатването на променливата i на екрана и преминаването на нов ред :

{
document.write(i)
document.write("<BR>")
}

Така изпълнявайки този цикъл ще видите на екрана изписани цифрите от 0 до 9 . Вижте ТУК как се изпълнява скрипта. Ако искате да се изписва и числото 10, трябва да промените условието, например вместо i<10 да напишете i<=10. Трябва да знаете че всички оператори вътре в условната част трябва да се отделят един от друг с точка и запетая (;).
С помощта на цикъла for можете да правите доста сложни скриптове, но това ще го разгледаме по-подробно в готовите скриптове.

Другия тип цикъл в javascript е :

while (условие) {
оператори
}

Този цикъл е малко по-опростен. При него стойностите на всички променливи се задават предварително, а самия цикъл се изпълнява докато условието в кръглите скоби отговаря на истината. Нека направим примера с отпечатването на числата от 0 до 9 с помощта на while :

i=0
while (i<10) {
    document.write(i)
    document.write("<br>")
    i++
}

Този скрипт работи по същия начин като предишния, само че с друг оператор за цъкъл. Първо приавояваме начална стойност 0 на променливата i . След това поставяме условие докато i<10 да се изпълнява частта от скрипта във фигурните скоби. Там се увеличава и стойноста на i с единица.

Функции

Функциите в javascript са блокове от код, които първо се дефинират, а след това се изпълняват. Структурата на функциите е следната :

function name() {
оператори
}

..където name е името на функцията, последвано от отваряща и затваряща кръгли скоби, които може да съдържат някакви аргументи, но може и да са празни, и най-накрая тялото на функцията заградено с фигурни скоби.
Това е начина да се дефинира функцията и това става обикновено в главата (HEAD) на HTML документа. Самото извикване на функцията става в тялото (BODY) на HTML документа чрез изписване на името и, както и аргументите, ако има такива. Вижте един пример за функция без аргументи :

<HTML
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
    function firstName() {
        name=prompt("Как се казвате ?")
        alert("Здравейте"+name)
}
</SCRIPT>
<BODY>
<SCRIPT LANGUAGE="Javascript">
    firstName()
</SCRIPT>
</BODY>
</HTML>

В главата на документа се дефинира функция с име firstName без аргументи. Самата функция изпълнява следното: на променливата name се присвоява стойноста, която ще напишете в подканващия прозорец "Как се казвате ?". След това в alert прозорец ще се изпише съобщението "Здравейте " + името което сте въвели. Веднъж дефинирана функцията може да се извиква навсякъде в тялото на HTML документа само чрез името и. Ето ТУК можете да видите как работи функцията.

Сега нека направим една функция с аргументи.

<HTML
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
    function fontSize(num) {
        document.write("<font size="+num+">")
        document.write(num)
        document.write("</font>")
}
</SCRIPT>
<BODY>
<SCRIPT LANGUAGE="Javascript">
    for(num=1;num<=7;num++) {
        fontSize(num)
    }
</SCRIPT>
</BODY>
</HTML>

Тук имаме функция fontSize с един аргумент с име num. Действието на функцията е следното. Изписва HTML тага <FONT SIZE=..... след това слага стойноста на променливата num, и накрая затваря тага >. На следващия ред се изписва самата променлива num. И най-накрая се изкарва затварящия таг </FONT>. Не забравяйте че когато пишете HTML тагове с document.write те не се изписват на екрана, а се изпълняват като истински HTML тагове. Самата функция сама по себе си е безполезна, ако не дадем някакви стойности на променливата num. Това го правим с друг скрипт в тялото на документа. В него използваме цикъл с който задаваме стойноста на num на единица. След това се проверява дали num не е по малко или равно на 7, и ако е така стойноста се увеличава с едно. В тялото на цикъла се извиква функцията fontSize. Нека проследим стъпка по стъпка изпълнението на функцията :

    Първо на num се задава стойност 1. След това се извиква функцията с параметър 1 (fontSize(num)). Самата функция изпълнява HTML тага : <font size=1> 1 </font>. Така на екрана се изписва цифрата 1 (стойноста на num в момента на изпълнението на функцията) с големина на шрифта 1 (font size=1).
    При следващото завъртане на цикъла стойноста на num ще бъде вече 2 (num++) и функцията ще изпише цифрата 2 с големина на шрифта 2.
    ........и така до num=7 където цифрата седем ще се изпише с най-големия размер на шрифта - 7. Вижте ТУК как работи този скрипт.

Можете да създавате функции с повече от един аргумент. В такъв случай аргументите се разделят със запетаи :

function argument(arg1, arg2, arg3)

Когато създавате такава функция, трябва винаги когато я извиквате да задавате същия брой аргументи, както когато сте я дефинирали.
Правилата за създаване на имена на функциите са същите като при променливите. Хубаво е ако името на функцията съдържа повече от една дума, първата дума да се изписва с малки букви, а всички останали да започват с главна буква, например fontSize.

Масиви

Масивите са тип променливи, които съдържат множество елементи. Ето структурата на един масив :

masiv=new Array()

..където masiv и името на масива, а new Array() е начина на създаването му. По този начин създадохме празен масив с неопределен брой елементи. Вместо празни скоби, можем да зададем броя на елементите в масива :

masiv=new Array(10)

Броя на елементите винаги трябва да бъде цяло неотрицателно число. В горния случай създадохме масив с име masiv и 10 елемента със стойност NULL, т.е. празни. Ако не зададем предварително броя на елементите в масива, то това можем да направим по-късно, като задаваме стойност на всеки елемент поотделно. Самото индексиране на елементите става с квадратни скоби [ ] , като броенето започва от нула. Така първия елемент в масив с десет елемента е masiv[0] а последния masiv[9]. Нека да създадем масив със седем елемента и да им дадем стойности дните от седмицата :

masiv=new Array(7)
masiv[0]="понеделник"
masiv[1]="вторник"
masiv[2]="сряда"
masiv[3]="четвъртък"
masiv[4]="петък"
masiv[5]="събота"
masiv[6]="неделя"

...същото нещо можем да направим по по-лесен начин:

masiv=new Array("понеделник","вторник","сряда","червъртък","петък","събота","неделя")

така вече всеки елемент от масива си има някаква стойност. Тези стойности могат да бъдат променяни свободно по всяко време, както и типа на променливата. Например ако напишем masiv[5]=122 шестия елемент ще бъде от целочислен тип, докато останалите ще са от стрингов тип.

Много лесен начин да си осигурите достъп до елементите на масива е, чрез използване на цикъл :

masiv=new Array("понеделник","вторник","сряда","червъртък","петък","събота","неделя")
for(i=0;i<7;i++) {
document.write(masiv[i] + "<br>")
}

Този скрипт ще покаже на екрана всеки един елемент от масива, като след всеки ще минава на нов ред. Вижте ТУК как работи примера.

Обекти

Javascript е обектноориентиран език. Обектите в javascript се описват заедно със свойствата и методите им. Методите на обектите се отнасят до начина на изпълнението на самия обект. Нека да вземем за пример обект от реалния свят, какъвто е прозореца. Методите на обекта прозорец ще бъдат отваряне и затваряне, а свойствата му например ширина и височина. В javascript нещата не са по-различни. Ето например ние досега използвахме един обект заедно със метода му в почти всички примери дотук. Това е обекта document заедно със метода му write. И докато в разговорния език можем да обясним обекта със свойствата и методите му като кажем "широкия прозорец се отваря", в javascript за тази цел се използва разделител точка "." (document.write , image.border и т.н.)

Сега ще разгледаме по-подробно някои обекти в javascript за да разберем за какво става дума. Може би най-често срещания обект в javascript и прозореца на браузъра. Той носи името window. С помощта на javascript можете да го отваряте, затваряте, както и да правите други работи с него. Вижте например най-долната лента в прозореца на браузъра. Тя се нарича статус-бар (status bar). В нея се описва моментното състояние на браузъра, като скорост на връзката (при Netscape) URL на който се намирате в момента и т.н. Вие можете да променяте информацията в статус-бара с помощта на свойството status на обекта window. Вижте как става това :

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
window.status="statusbar"
</SCRIPT>
<BODY>
</BODY
</HTML>

Реда window.status променя стойноста на статусбара. Така например можете да направите надписа в статус бара да бъде заглавието на страницата ви. Вижте ТУК как работи този скрипт.
За разлика от свойствата на обектите, методите описват действията които могат да се извършват с тях. Методи са open, write и т.н. Ако сравняваме javascript с разговорния език, обектите са съществителните, свойствата на обектите са прилагателни, а методите на обектите са глаголи (те в действителност са си глаголи, open, close, write, click, sort, concat и т.н.)
Да разгледаме метода open на обекта window. Този метод отваря нов прозорец. Синтаксиса му е window.open() , като в скобите се слага URL на адреса който трябва да се отвори с новия прозорец. В следващия пример ще сложиме на екрана картинка и при посочване с мишката върху нея ще се отваря нов прозорец с адрес www4u.search.bg :

В този случай при настъпването на събитието onMouseover се отваря нов прозорец (виж урок събития). Вижте ТУК как работи скрипта.

Ето и някои от най-често срещаните обекти заедно с методите и свойствата им :

обект	свойства	методи
document	bgColor image location title	write writeln open
image	border height width src
window	location history frames name	close open prompt scroll

Събития

С помоща на javascript можете да следите какво става на страницата ви. Например посочването с мишката върху някаква картинка е събитие. Кликването върху картинката е друго събитие и т.н. Javascript обработва събитията с така наречените манипулатори на събития. Така при кликване ще се извика манипулатора onClick, при посочване onMouseover и т.н. Структурата на манипулаторите на събития е следния :

onСъбитие=(оператори)

Където Събитие е името на събитието, а в скобите са операторите които ще се изпълнят при възникване на събитието. Самия манипулатор на събитието може да бъде извън таговете <SCRIPT></SCRIPT> .Можете да го сложите например в така <А> . Вижте един пример, при който създаваме хипервръзка и като посочите с мишката върху нея се показва alert прозорец с обяснение за връзката:

Посочете сега с мишката върху връзката по надолу и ще видите резултата.

WWW4U

Ако смените манипулатора OnMouseover със OnClick, alert прозореца ще се показва при кликване вместо при преминаване с мишката върху хипервръзката. Много добър пример със събитието onMouseover има в урока за rollover върху Image Map. Вижте го! Друго събитие е onMouseout. То настъпва когато курсорът на мишката вече не посочва върху обекта. С помоща на събитията onMouseover и onMouseout се правят така наречените rollover ефекти с картинки при които след посочване с мишката една картинка се заменя с друга. Но затова по нататък..

Освен събития свързани с движението на мишката, javascript обработва и събития свързани с отваряне и затваряне на прозорци, както и такива свързани с формуляри. Едно от събитията свързани с прозорците на браузъра е onLoad. То се извиква когато се зареди страницата. Ето например ако направите следната страница :

веднага след зареждането на страницата ще се появи alert прозорец с надпис "Здравейте!". Ако замените събитието onLoad със onUnload, което се извиква при напускане на страницата, "Здравейте!" ще се показва при затваряне на страницата. Нека променим горниа пример така, че при отваряне на страницата да се показва "Здравейте!" а при затваряне "Довиждане!" :

Ето ТУК можете да видите как работи примера. След това затворете прозореца на браузъра и ще видите съобщение "Довиждане!". Сигурно сте забелязали някои доста нагли сайтове, които отварят нов прозорец със друг сайт веднага щом се опитате да излезете от предишния. Те използват именно събитието onUnload. Друго събитие е onAbort. То настъпва когато прекъснете зареждането за страницата с бутона Stop на браузъра.

Ето и някои други събития и обяснението за действията им :

onError - възниква при грешка в скрипта

onSelect - възниква при избиране (селектиране) на текст

onSubmit - възникава когато изпратите фурмуляр за обработка

onBlur - възниква при напускане на обект

onFocus - възниква когато обекта е на фокус

onChange - възниква когато се промени съдържанието на обекта (например формуляр)

Категории

РЕКЛАМИРАЙТЕ ВАШИТЕ УСЛУГИ

Последвайте ни

Запознаване с JavaScript - част 2-ра6

Коментари