Home » 2014 » Октомври » 9 » Урок №6 Функции в JavaScript
1:56 AM
Урок №6 Функции в JavaScript

Съдържание на урока :

  • Функции в JavaScript.
  • Създаване на функции. Видимост на променливите.
  • Извикване на JavaScript функции от HTML.
  • Масиви. Действия с масиви.

  Функциите са основна градивна единица във всеки един

език за програмиране. Те ни позволяват да дефинираме

име за дадена секция код и след това да я извикваме с

помоща на това име. Използването на функции ни позволява

да преизползваме кода, като по този начин се намалява

вероятноста за грешки. Освен това благодарение на тях

може програмата да се раздели на ясно дефинирани секции.

Консрукцията на една функция представлява следното:

function име (аргумент 1,аргумент 2...){
 конструкция1;
 конструкция2;
}

Всяка функция започва с запазената дума function.

Следва името на функцията. То трябва да спазва общите

правила за наименования на идентификатори. Аргумент 1 и 2

са списък от идентификатори на променливи, които се

наричат формални параметри на функцията. Конкретните

променливи, които ги заместват се наричат фактически

параметри на функцията. Възможно е записването на

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

скобите. Следва тялото на функцията, като конструкциите

които го образуват се заграждат във фигурни скоби.

Това трябва да се прави независимо дали тялото е изградено

само от една или повече конструкции. Ето пример за

функция, която центрира текста:

<HTML>
<HEAD>
<TITLE>PC-Tools Guides - Java Script</TITLE>
<META HTTP-EQUIV="Content-Type" 
content="text/html; charset=windows-1251">
<SCRIPT LANGUAGE="JavaScript" TYPE="text/JavaScript">
<!-- скриване от стари браузъри

function makeCenter(text) {
document.write("<CENTER>"+text+"<CENTER>");
}

// край на скриването-->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/JavaScript">
<!-- скриване от стари браузъри

var text1 = prompt("Моля въведете 
текст","Примерен текст");
makeCenter(text1);

// край на скриването-->
</SCRIPT>
</BODY>
</HTML>

Какво се вижда от този пример. За да се използва дадена

функция първо тя трябва да се декларира. Това става в

заглавната част, ако искате функцията да се вижда в целия

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

в тялото (BODY) на HTML документа, то тя ще се може да се използва

само в този скрипт. Тук в ролята на формален параметър е

променливата text, а в ролята на фактически параметър - п

роменливата text1. След като се декларира, вече може да правим

обръщения към нея. В горния пример функцията

не връща резултат от изпълнението си. Използвана по този

начин тя е аналогична на процедурите в Pascal например.

Друг тип функции са тези, които връщат резултат от

своето изпълнение.

Ето как става това :

<HTML>
<HEAD>
<TITLE>PC-Tools Guides - Java Script</TITLE>
<META HTTP-EQUIV="Content-Type" 
content="text/html; charset=windows-1251">
<SCRIPT LANGUAGE="JavaScript" TYPE="text/JavaScript">
<!-- скриване от стари браузъри

function makeCenter(text) {
document.write
("<CENTER>"+text+"<CENTER>");
}

function Suma(x,y) {
var result;
result = x + y;
return result ; // може да се 
използва и return (x + y)
}

// край на скриването-->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript" 
TYPE="text/JavaScript">
<!-- скриване от стари браузъри

var x = 10;
var y = 12;
var z = Suma(x,y)
makeCenter("Резултатa е : "+z);

// край на скриването-->
</SCRIPT>
</BODY>
</HTML>


   В този пример функцията Suma() е използвана като операнд,

а функцията makeCenter() - като оператор. За да може една

функция да се използва като операнд е необходимо поставянето

на оператора return преди израза, чийто резултат искаме

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

Освен това тук формалните и фактическите параметри имат

едно и също име. Това обаче не пречи на изпълнението на

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

Това понятие има огромно значение във всеки един език за

програмиране и неразбирането му най-често довежда до

непредвидими резултати (освен това и се обяснява и разбира трудно).

Всяка една променлива притежва определена област на

видимост, т.е. област в която може да се използва.

В повечето езици използването на една променлива извън

областа й на видимост ще прекъсне изпълнението на

програмата с грешка. Но не и Java Script. Тъй като тук

декларирането на променливи не е задължително, интерпретатора

просто ще й присвои стойност по подразбиране, което

най-вероятно не е това което сте желали. Ето примерен код с

променливи с различна област на видимост (ненужните

елементи от кода са пропуснати):

<HEAD>
<SCRIPT LANGUAGE="JavaScript" 
TYPE="text/JavaScript">
<!-- скриване от стари браузъри

var max = 100; //глобална променлива

function Suma(x,y) {
var result; //локална променлива
max = 50; //локална променлива
result = x + y;
return result ;
}

// край на скриването-->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript" 
TYPE="text/JavaScript"><!-- скриване от стари 
браузъри

var x = 10; //от тук х вече е дефинирана
document.write(max+1); // резултат 101

// край на скриването-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/JavaScript">
<!-- скриване от стари браузъри

document.write(x); // тук х не е дефинирана
document.write(max); // резултат 100

// край на скриването-->
</SCRIPT>
</BODY>

   Ето и областите на видимост по променливи:

var max = 100 - тази променлива е т.нар. глобална променлива.

Тя има област на видимост във всяка една част от документa.

Може да се използва също и като фактически параметър във функции.

result - локална променлива за функцията. Областа й на

видимост е единствено в тялото на функцията. Ако се използва

извън функцията, то тя ще е с недефинирана стойност.

Името на тази променлива може да се използва за други

променливи без да става какъвто и да било конфликт.

max = 50 - това отново е локална променлива. Тя има същото

име като глобалната променлива max , няма нищо общо с нея

(освен името разбира се). Това са просто две различни променливи.

Промяната на стийноста на тази променлива няма да повлияе

по никакъв начин върху стойноста на глобалната променлива max.

x,y - отново локални променливи. По нищо не се различават

от променливата result .

var x = 10 - това са малко по-особенна променлива.

Тя са локална за документа като цяло, но има поведението

на глобална за секцията, в която е дефинирана. Т.е. в тази

секция тя може да се използва навсякъде и ще има стойност

10 (разбира се ако не се предефинира подобно на max ).

От друга страна тя ще има недефинирана стойност ако се

използва в следващата секция.

Както виждате определянето на областа на видимост не е лесно,

затова и едни от често срещаните грешки в програмирането са

именно грешки произтичащи от лошо определяне на областа на

видимост на променливите.
Като последно нещо, което трябва да знаете за функциите е, че

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

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

само едно парче информация. Представете си обаче, че имате

много парчета еднотипна информация. Използването на отделни

променливи за всяко едно от тях е възможно, но не е особенно

удачно решение. Много по - добре в този случай е да се използва масив.

Масивът е структура от данни, които имат едно и също име.

Ето пример за масив:

var colors = new Array("червен","зелен","жълт");

Тъй като масива е обект (за обектите по подробно в следващия урок),

той се създава с запазената дума new последвано от Array

(което е класа на обекта, но и за това по - късно).

Конкретния масив има три елемента и достъпа до тях става така :

var red = colors[0];
var green = colors[1];
var yellow= colors[2];

Особеното тук е, че първия елемент на масива има

индекс 0, а не 1. Разгледания масив се нарича едномерен.

Освен едномерни масивите могат да бъдат и многомерни.

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

var red = new Array("червен","ябълка");
var green = new Array("зелен","грозде");
var yellow = new Array("жълт","круша");
var colors = new Array (red, green, yellow);

Създадения масив е двумерен. Достъпа до елементите му става по следния начин :

var apple = colors[0][1];
var red = colors[0][0];
var grapes = colors[1][1];
var yellow = colors[2][0];

Както бе казано, масивът в обект. Като такъв той предоставя

няколко метода за работа с него.

По - важните са:

  • join(разделител) - връща всички елементи на масива разделени с разделител.
  • reverse() - обръща реда на елементите на масива
  • sort() - сортира елементите на масива.
  • lenght() - дължината на масива
  • concat() - събира два низа в един

   Ето пример за използването на масиви :

<HTML>
<HEAD>
<TITLE>PC-Tools Guides - Java Script</TITLE>
<META HTTP-EQUIV="Content-Type" 
content="text/html; charset=windows-1251">
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/JavaScript">
<!-- скриване от стари браузъри

var array1 = new Array(2,4,6,1,8);
document.write("Първоначално масива 
е:"+array1.join(",")+"<BR>");
document.write("Mасива има:"+array1.length+" 
елемента.<BR>");

array1.sort();
document.write("Подредения масива 
е:"+array1.join(",")+"<BR>");

array1.reverse();
document.write("Обърнатия масива 
е:"+array1.join(",")+"<BR>");

var array2 = new Array(9,10,11,34);
document.write("Втория масив 
е:"+array2.join(",")+"<BR>");

var array3 = array1.concat(array2);
document.write("Обединения масив 
е:"+array3.join(",")+"<BR>");

// край на скриването-->
</SCRIPT>
</BODY>
</HTML>

В следващата част ще научим повече за обектите и работата с тях.

Категория: Javascript | Преглеждания: 690 | Довавено от: knif3r | Оценка: 5.0 | Гласували :2 | Tags: Извикване на функции, functions, Създаване на функции, Функции, масиви, js, JavaScript, Начинаещ

Ако урокът ви е харесал можете да го споделите с вашите приятели във фейсбук :
Всички коментари: 0
Log in:
avatar
За нас
Полезно
Помощни секции
Социални Мрежи

PC-Tools.inc | Copyright © 2014-2015
DMCA.com Protection Status Mozilla Firefox+4.0 Chrome+13.2 Opera+5.6 IE+7.9 Safari+2.0