Java Script

JavaScript уроци
ЗАПОЗНАВАНЕ С JAVASCRIPT
ПРОМЕНЛИВИ
МАТЕМАТИЧЕСКИ ОПЕРАЦИИ
БУЛЕВИ ИЗРАЗИ. УСЛОВИЯ.
ОПЕРАТОРИ ЗА ЦИКЪЛ
ФУНКЦИИ
МАСИВИ
ОБЕКТИ
СЪБИТИЯ

ЗАПОЗНАВАНЕ С JAVASCRIPT

Javascript е най-широко разпространеният скриптов
език за писане на приложения в интернет, след HTML.
Той не е"език за програмиране", тъй като с негова
помощ не се пишат програми, а скриптове които се
вмъкват в HTML документа.
Има и други езици за писане на скриптове, например
VBScript.

РАЗЛИКИ
Javascript JAVA
скриптов език език за програмиране
разработен от разработен от
корпорацията Netscape корпорацията SUN
език за писане на мощен език за
скриптовелима само програмиране не само на
интернет приложение интернет приложения и
самостоятелни програми
за различни платформи.

С JavaScript…
М • Ефекти с изображения. Rollover ефекти,
О слайд шоу, и много други.
Ж
Е • Уравление на прозорци и рамки. Отваряне
Т и затваряне на прозорци, задаване на размера на
Е прозорец, управление на един прозорец от друг и
т.н.

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

НЕ МОЖЕТЕ
Н Не можете да записвате информация на
Е сървъра (не можете да организирате форуми,
да обработвате бази данни)
М
О
Ж
Е
Т
Е

• JavaScript кода се вмъква в HTML документа между
двойката елементи <SCRIPT> и </SCRIPT>.

• Когато срещне тага <SCRIPT>, браузърът спира
интерпретирането на HTML кода и започва да
обработва скрипта, намиращ се между
<SCRIPT> и </SCRIPT>.

• Задължително трябва да укажете на браузъра на какъв
език ще бъде скрипта. Тъй като работим с JavaScript,
трябва да напишете
<SCRIPT LANGUAGE="JavaScript">.

Пример1 (Задача):
Да се направи уеб страница, в която да се вмъкне
JavaScript код, който да изписва на екрана "Здравей!"

Пример1 (решение): Резултат:

<HTML> Здравей!
<HEAD>
<TITLE>javascript</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write("Здравей!")
</SCRIPT>
</BODY>
</HTML>

! Някои по-стари версии на Netscape Navigator и
Internet Explorer не разбират JavaScript.
Затова трябва да скривате скрипта в HTML коментари
<-- и //-->.
Така по старите версии на браузърите ще тълкуват
JavaScript кода, за коментар и няма да съобщят за
грешка.

Да се направи уеб страница, в която да се
вмъкне JavaScript код, който да изписва на
екрана "Здравей!“ с удебелен шрифт.

<HEAD>
</HEAD>
<BODY>
document.write(“<B>Здравей!
</B>")
</SCRIPT>
</BODY>
</HTML>

ПРОМЕНЛИВИ
променливите Могат да променят "Здравей!“ в
стойността си пример1
константите Никога не променят
стойността си!

Да се направи уеб страница, в която да се вмъкне
JavaScript код, който да изписва на екрана
"Здравей!“. Използвайте променлива.

Характеристики на променливата
име Пример: greeting
Името големи и малки Пример:
съдържа латински букви, greeting_card,
цифри, както и ”_”. greet2,
_my_greeting
Името Символ различен от Пример (грешни):
започва със цифра 123school
var.2
greeting 3

<HTML> Здравей!5
<HEAD> 12
</HEAD>
<BODY>
<SCRIPT
LANGUAGE="JavaScript">
    
</SCRIPT>

МАТЕМАТИЧЕСКИ ОПЕРАЦИИ
п
р
събиране +
и
изваждане - о
умножение * р
и
деление /
т
целочислено деление % е
т
Напишете скрипт, в който въвеждате своята годината на
раждане, а след това скриптът да изчислява на колко
години ще бъдете през 2010 година. Съобщаването на
резултата да става в нов прозорец:

<HTML> През 2010 година
<HEAD>
    <TITLE>javascript</TITLE> Вие ще бъдете на
<HEAD> 30 години
<BODY>
<SCRIPT LANGUAGE="javascript">

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

Коментари
Друг начин за работа с променливи:
Деклариране: Var имеНаПроменлива=стойност

Аритметични операции с променливи :

Израз Еквивалентен израз I II
p=x++ p=x+1 + =
q=x-- q=x-1 - =
y=++x p=x+1 = +
z=--x q=x-1 = -

Разлика между
x++ ++x
y= x++ y=++x
Ред на действията
I + I =
II = II +
..така x и y ще бъдат с .. y ще приеме стойноста
еднаква стойност. на x и чак след това x ще
се увеличи с 1.
x=10
x=11 y=11 y=10 x=11

• С prompt се отваря прозорец с поле, в което можете да
въвеждате информация.
Структура на prompt:
prompt("message","value"),
където message е съобщението, което ще се появи заедно с
прозореца, а value е някаква начална стойност.

• С alert прозорец се, извежда информация в прозорец.
Структура на alert :
alert(“съобщение"),
където съобщение е съобщението, което ще се появи.

БУЛЕВИ ИЗРАЗИ. УСЛОВИЯ.
• Булевите изрази са операции за сравнение
между две променливи.
• Резултатът от такова сравнение има само две
стойност - true или false.
• Пример: при сравнение дали
а>b
се връща резултат
TRUE, ако е вярно, иначе FALSE.

Изразът връща стойност TRUE, ако
x==y x е равно на y
x!=y x не е равно на y

x<y x е по-малко от y

x<=y x е по-малко или равно на y

x>y x е по-голямо от y

x>=y x е по-голямо или равно на y
!x x е FALSE

x&&y x и y са едновременно TRUE

x||y x и y са едновременно FALSE

УСЛОВЕН ОПЕРАТОР
Синтаксис Смисъл:
(пълна форма): Ако(if) е изпълнено
if (условие) «условие»-то, се изпълнява
    оператор1 оператор1, иначе (else) се
        else изпълнява оператор 2.
            оператор 2

Синтаксис
(кратка форма):
if (условие)
    оператор1

Пример 6 (Задача):
Напишете скрипт, в който въвеждате своята
годината на раждане, така, че да се проверява
дали рожденната дата не е преди 1900 година и
след 2000 година.
А след това скриптът да изчислява на колко
години ще бъдете през 2010 година.
Съобщаването на резултата да става в нов
прозорец.

Пример 6 (решение, I вариант):
...

</SCRIPT>
...

Вход:
II. година между 1900 и 2000
т.е. 1900<year<2000
Резултат:
През 2010 година Вие ще бъдете на 30 години

• година преди 1900 или след 2000 -та
т.е. year<1900 или year>2000
Резултат:
Не се изпълнява нищо!

Пример 6 (решение, II вариант):
…

</SCRIPT>
…

Вход:
т.е. 1900<year<2000
Резултат:

VII. година преди 1900 или след 2000
т.е. 1900>year или year>2000

Резултат:
Грешно въведена година!

Пример 6 (решение, III вариант):
...

</SCRIPT>
...

Вход:
т.е. 1900<year<2000
Резултат:

VII. година преди 1900
т.е. 1900>year
Резултат:
На Вашата възраст не бих седял пред компютъра

XII.година след 2000
т.е. year>2000
Резултат:
Още нероден, а вече гений!!!

ЦИКЪЛ FOR
(цикъл с известен брой стъпки)
• Използва се, когато се налага да се повтаря
една и съща операция известен брой пъти.
• Синтаксис:
for (брояч=нач.стойност., условие, промяна на брояча)
{
оператор1
оператор2
…
}

Напишете скрипт, който да извежда на
екрана числата от 0 до 9 .
Резултат:
Пример 7 (решение): 0
1
2
for (i=0;i<10; i++) { 3
4
document.write(i) 5
document.write("<BR>") 6
} 7
8
9
10

ЦИКЪЛ WHILE
(цикъл с предусловие)
• Използва се, когато се налага да се повтаря
една и съща операция няколко пъти.
Условието се проверява предварително.
• Синтаксис:

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

Напишете скрипт, който да извежда на
екрана числата от 0 до 9 с помощта на while .
Резултат:
Пример 8 (решение): 0
1
i=0 2
while (i<10) { 3
4
document.write(i) 5
document.write("<BR>") 6
} 7
8
9
10

ФУНКЦИИ
• Функциите в javascript са блокове от код,
които първо се дефинират, а след това се
изпълняват.

• Структура:

function name( аргументи ) {
оператори
}

name е името на функцията,

(аргументи) аргументи не са задължителни

аргументи Ако ги има се отделят със запетаи.
Например:
arg1, arg2, arg3
Или
function name(arg1, arg2, arg3)

{ тялото на функцията заградено с
...
} фигурни скоби.

• Място на дефиниране на функцията:
в главата (HEAD) на HTML документа.
• Място на извикване на функцията:
в тялото (BODY) на HTML документа
• Как се извиква:
чрез изписване на името ú и аргументите, ако има
такива.

Напишете скрипт, който да извежда съобщението
“Как се казвате ?”,
да приема името на потребителя и да поздравява
“Здравейте име !”

Пример 9 (решение):
<HTML
<HEAD>

function firstName() {
        name=prompt("Как се казвате ?")
        alert("Здравейте"+name+” !”)
}
</SCRIPT>

<BODY>
<SCRIPT LANGUAGE="Javascript">
Резултат:
    firstName()
Как се казвате?
</SCRIPT>
</BODY> Надя
</HTML>
Здравейте Надя !

Напишете скрипт, който да извежда всички размери
на шрифта, като изведеното число да е със същата
големина.

Ето така:

1
2
3
4
5
6
7

<HTML
<HEAD>

    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>

ВНИМАНИЕ!
Когато пишете HTML тагове с document.write
те се изпълняват като истински HTML тагове.

Резултатът от

document.write("<font size="+num+">")
document.write(num)
document.write("</font>")

е изпълнението на HTML таг

<font size = num> num </font>,
където num е някякво конкретно зададено число
между 1 и 7

МАСИВИ
• Масивите са тип променливи, които
съдържат множество елементи.
• Структурата на масив:

masiv=new Array(брой елементи),

където masiv е името на масива, а
new Array() е начина на създаването му.
Ако липсва брой елементи, се създава празен
масив с неопределен брой елементи.

В този случай можем да зададем броя на
елементите в масива по-късно, когато задаваме
стойност на всеки елемент поотделно
(наречено индексиране на елемент).

Индексиране на елементите става с квадратни
скоби [ ], като броенето започва от нула. Така
първия елемент в масив с десет елемента е
masiv[0] а последния masiv[9].

Пример:
masiv[0]="понеделник"

Пример А1:
masiv=new Array(10)
Създадохме масив с име masiv и 10 елемента със
стойност NULL, т.е. празни.
Пример А2:
masiv=new Array(7)
masiv[0]="понеделник"
masiv[1]="вторник"
masiv[2]="сряда"
masiv[3]="четвъртък"
masiv[4]="петък"
masiv[5]="събота"
masiv[6]="неделя"

Пример А3 (по-лесно от пример А2):
masiv=new Array
( "понеделник","вторник","сряда",
"червъртък","петък","събота","неделя"
)
Всеки елемент от масива си има някаква
стойност, която може да бъде променяна
свободно по всяко време, както и типа на
променливата.
Например, ако напишем masiv[5]=122
шестия елемент ще бъде от целочислен тип,
докато останалите ще са от стрингов тип.

Достъп до елементите на масив:
чрез използване на цикъл

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

for (i=0; i<7; i++) {
document.write(masiv[i] + "<br>")
}
Резултат:
Този скрипт ще покаже на екрана всеки един
елемент от масива, като след всеки ще минава на
нов ред.

ОБЕКТИ
JavaScript е обектно-ориентиран език
- всеки елемент в него е обект,
- който има различни методи за изпълнение на
някакви действия.

Пример за обект
window document
прозорецът на браузъра HTML страницата (HTML
документа, който е зареден в
момента. )

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

Обектът document
и неговите методи
Обекта document e един вид “контейнер” -
чрез него може да се управляват всички
елементи, които са в текущия документ.

Елементи на обект document
•фона на страницата,
•цвета на текста,
•хипервръзките,
•формите
•други.

Така, ако искаме да се обърнем към първата
картинка, просто следваме йерархията:
document.images[0].

За достъп до бутона във формата:
document.forms[0].elements[2].

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

Пример:

<html>
<head>
<title>
Objects
</title>

<script language="JavaScript">
<!--hide
function first() {
alert("The value of the textelement is:"+
document.myForm.myText.value);
}

function second() {
var myString= "The checkbox is";
if (document.myForm.myCheckbox.checked)
myString+="checked"
else myString+="not checked";
alert(myString);
}
// -->

</script>
</head>

</script>
</body>
</html>

Други често използвани методи
document.bgColor - Определя цвета на фона.
document.fgColor - Определя цвета на текста.
document.vlinkColor - Определя цвета на избрана
вече хипервръзка.
document.title - Изписва заглавието на
страницата, което е
предварително зададено.
document.URL - Изписва Интернет адреса на
страницата.
document.referrer - Изписва Интернет адреса на
страницата, от която е била
извикана текущата страница.

Обектът window
и неговите методи
Обектът window управлява прозорците в
браузъра.

Метод за отваряне на прозорец
window.open(име_на_прозореца).

Пример:
<HTML>
<HEAD>
<TITLE>Отвори прозорец</TITLE>
<SCRIPT LANGUAGE=JavaScript>
function openWin() {
window.open(‘a11example3.html’, "newWindow",
"width=’400’, heigh=’300’, status=’no’,toolbar=’no’,
menubar=’no’");
}
</script>
</HEAD>

<BODY>
<FORM>
<input type="button" value="Отвори нов
прозорец" onClick="openWin()">
</FORM>
</BODY>
</HTML>
В този пример се отваря нов, празен прозорец
като се посочват и редица параметри, касаещи
изгледа му. Използвайки "newWindow" на
новия прозорец се дава име, което после би
могло да се използва вътре в HTML документа.

Метод за затваряне на прозорец
window.close(име_на_прозореца).

Пример:
(с отварянето на нов прозорец се създава и
нов HTML документ)

<html>
<head>
<title>с отварянето на нов прозорец се създава
и нов HTML документ</title>
<!-- hide

function openWin() {
myWin= open("","newWindow", "width=500,
height=400, status=yes, toolbar=yes, menubar=yes");

myWin.document.open();
myWin.document.write("<html><head><title>On-
the-fly");
myWin.document.write("</title></head><body>");
myWin.document.write("<center><font size=+3>");
myWin.document.write("Този html документ е
написан");
myWin.document.write("с помоща на JavaScript!");

myWin.document.write("</font></center>");
myWin.document.write("</body></html>");
myWin.document.close();
}
// -->
</script>
</head>
<body>
<form>
<input type=button value="On-the-fly"
onClick="openWin()">
</form>
</body>
</html>

Вижда се, че във функцията openWin се отваря
нов прозорец, но първият аргумент е празен
низ. Това е така понеже няма готов HTML
документ и естествено няма и URL адрес.
Променливата myWin осигурява достъп до
новия прозорец.

Чрез myWin.document.open() се извиква
метода open() на обекта document. Той
подготвя документа за приемане на входни
данни. След това с помощта на метода
myWin.document.write() се създава новият
HTML документ.

Методи на обекта window.

• alert(низ)
• confirm(низ)
• prompt(низ)
• defaulStatus - определя текста, който
ще се появява в Status Bar-а на документa.
• window.status - същото действие като
defaulStatus

Пример:
(с натискане на бутоните се пише и съответно
изтрива status bar-a! Тук триенето пак е
изписване, но на празен низ!)
<html>
<head>
<title>
Промяна в status bar!-а
</title>

</script>
</head>
<body>
<form>
<input type="button" name="look"
value="Изпиши!" onClick="statbar('Виж
stаtusbar-a!');">
<input type="button" name="erase"
value="Изтрии!" onClick="statbar('');">
</form>
</body>
</html>

СЪБИТИЯ В JavaScript
В JavaScript това са действия, които се извършват
върху Web страницата. С тяхна помощ можете да
следите какво става на страницата ви.

Пример за събитие:
• посочването с мишката върху някаква
картинка;
• кликването върху картинката ...

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

Javascript обработва събитията с така
наречените манипулатори на събития. Така
при кликване ще се извика манипулатора
onClick, при посочване onMouseover и т.н.

Структура на манипулаторите на събития:
onСъбитие=(оператори)

Самия манипулатор на събитието може да
бъде извън таговете
<SCRIPT></SCRIPT>.

Можете да го сложите например в тага <А> .

Пример
(създаване на хипервръзка, при чието посочване се
показва alert прозорец с обяснение):

<A href="http://www4u.search.bg" onMouseOver="alert
('HTML и JavaScript уроци!');return true;">WWW4U</A>

Ако смените манипулатора OnMouseover с OnClick, alert
прозореца ще се показва при кликване вместо при
преминаване с мишката върху хипервръзката.

Събитията допустими в JavaScript са:

• ONLOAD=”SCRIPT”
Възниква, когато браузъра завърши зареждането на
прозорец или фреймове във <FRAMESET>.
• ONUNLOAD=”SCRIPT”
Възниква, когато браузъра затвори прозорец или
фрейм.
• ONCLICK=”SCRIPT”
Възниква при натискане с мишката върху елемент.
• ONBLCLICK=”SCRIPT”
Възниква при натискане на два пъти с мишката върху
елемент.

• ONMOUSEDOWN=”SCRIPT”
Възниква, когато бутона на мишката е натиснат върху
елемент.
• ONMOUSEUP=”SCRIPT”
Възниква, когато бутона на мишката се отпусне върху
елемент.
• ONMOUSEOVER=”SCRIPT”
Възниква, когато мишката премине върху елемент.

• ONMOUSEMOVE=”SCRIPT”
Възниква, когато мишката се движи докато е върху
елемент.

• ONMOUSEOUT=”SCRIPT”
Възниква, когато мишката излезе извън елемент.

• ONFOCUS=”SCRIPT”
Възниква, когато елемента придобие фокус.
• ONBLUR=”SCRIPT”
Възниква, когато елемента загуби фокус.
• ONKEYPRESS=”SCRIPT”
Възниква, когато е натиснат и отпуснат клавиш
върху елемента.
• ONKEYDOWN=”SCRIPT”
Възниква, когато е натиснат клавиш върху елемента.

• ONKEYUP=”SCRIPT”
Възниква, когато е отпуснат клавиш върху елемента.

• ONSUBMIT=”SCRIPT”
Възниква, когато се подават данни от форма. Прилага
се само към <FORM> елемент.
• ONRESET=”SCRIPT”
Възниква, когато се изчиства форма. Прилага се само
към <FORM> елемент.
• ONSELECT=”SCRIPT”
Възниква, когато потребителят избере текст или
текстово поле.
• ONCHANGE=”SCRIPT”
Възниква, когато стойността на елемент се промени.

Пример: Да се напише скрипт, реализиращ три от най-
използваните събития
- щракване върху обект (onClick),
- зареждане на страница (onLoad)
- излизане от нея (onUnload)

Решение:
<HTML>
<HEAD>
<TITLE>Пример за прихващане на събитие</TITLE>
<SCRIPT language="JavaScript">function
changeColor(color) {
document.bgColor=color
}
</SCRIPT>
</HEAD>

<BODY onLoad=alert("Здравейте")
onUnload=alert("Довиждане")>
<h1><center>Натискайки бутоните променяш цвета
на фона!</center>
</h1>

<form>

<input type=button value="Син"
onClick="changeColor('blue')"><br>
<input type=button value="Червен"
onClick="changeColor('red')"><br>
<input type=button value="Жълт“
onClick="changeColor('yellow')"><br>
<input type=button value="Зелен"
onClick="changeColor('green')"><br>
<input type=button value="Неви"

onClick="changeColor('#000080')"><br>
<input type=button value="Акуа"
onClick="changeColor('#00FFFFF')">

</form>
</BODY>
</HTML>

Упражнения
Задача 1:
Декларирайте променлива от тип number (string,
boolean), присвоете й стойност и я изведете в
текущия документ.
Задача 2:
Създайте собствен обект (например Animal), който
има 3 атрибута (например name, kind и age) и
изведете всеки от тях на отделен ред в текущия
документ.
Задача 3:
Създайте масив от 3 елемента и го запълнете
съответно с името, презимето и фамилията си.
После използвайки цикъла for го изведете в
текущия документ..

Упражнения
Задача 4:
Създайте функция, която да изписва n на брой пъти
(n=1,2,3...) даден текст, след който да преминава на
нов ред. Във функцията използвайте цикъл while.
Задача 5:
Да се напише JavaScript, с помощта на който когато
мишката е върху хипервръзка в status bar-a се
изписва не хипервързката, а някакъв потребителски
текст.
Задача 6:
Как ще достигнете до:
а) първата и втората снимка
б) имената answer1, r1, r3
имайки следната част от програмен код:

<p><center>
<img src="WFall.jpg" name="picture1"
width=”500” height=”250” border=”0”>
<p>
<form name="Form1"> Харесва ли Ви
снимката?
<input type="text" name="answer1"
value=""><br>
</form><br>
<center>
<img src="WFall.jpg" name="picture1"
width=”250” height=”125” border=”0”>

<p>
<form name="Form2">Губи ли се от
въздействието на природната картина при
този размер?<br>
<input type="radio" name="r1"
value="v1">да<br>
value="v2">не<br>
value="v3">незнам<br>
</form>
</center></center>

Източник
http://iea.fmi.uni-sofia.bg/rip/

Java Script

Recommended

More Related Content

What's hot (20)

Similar to Java Script (9)

Java Script