Category Archives: JavaScript

javascript категория

Работа с javascript конзолата-console.log()

За всеки един програмист който се занимава с интернет програмиране е изключително важно да се научи да работи с javascript конзолата. Ако някога сте писали код на javascript и Ви се е налагало да проверите стойност на променлива в даден момент от кода, знаете че използването на досадната функция alert()  не е много удобно. За това повечето водещи браузъри (Mozilla, Opera, Safari,Chrome) отдавна въведоха console.log(). Единствени Microsoft и техния Internet Explorer отново забавиха нещата с console.log(), но това е променено във версията им IE9.

Та console.log() ни помага да правим така нареченото дебъгване (проследяване на програмния ни код по време на изпълнението му) без да  е необходимо да натискаме някакви бутони на допълнително изкачащи прозорци.

Ето и бързите начини за показване на конзолите при различните браузъри.

  • Mozilla firefox с натискането на F12 ще отворите конзолата.
  • Chrome клавишна комбинация CTRL+Shift+i
  • Opera клавишна комбинация CTRL+Shift+i

Ако напишете някъде във Вашия код console.log(“Hello JS”); то при изпълнението на кода и стигането до този ред в конзолата ще се изпише текста огреден в кавички. Функцията console.log() приема всякакви аргументи. Ако използвате като аргумент стринг или число ще получите изписването му в конзолата така както сте го подали на функцията. Ако използвате като аргумент javascript обект ще получите в конзолата думата “object”, а ако използвате масив ще получите думата “array”. Ето няколко примера за правилното използване на console.log():

  • var name = “Viki”; console.log(“name = “+name);//–>name=Viki
  • var num = 5; console.log(typeof(num));//–>number
  • var colors = new Array(“red”,”yellow”); console.log(colors);//–>array
  • console.log(colors[1]);//–>yellow

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

JavaScript създаване на собствени обекти

Обектите в javascript са много важно и полезно нещо. Както във всички езици за програмиране така и тук е най-добре и разбираемо когато работим с обекти.

В javascript може да се създаде нов обект ето така:

var dog = new Object();

Сега променливата dog представлява обект. На този обект може много лесно да се присвоят свойства (променливи) и методи (действия, функции) като след неговото име се използва знак точка. Например нека добави към новия обект свойствата color и name ето така:

dog.color = “red”;

dog.name = “Шаро”;

По този начин ние зададохме текстови (стрингови) стойности на двете свойства. Ако някъде в нашия код след това извикаме тези свойства на нашия обект ние ще получим техните стойности. Например:

console.log(dog.color);//Ще ни изпише в конзолата : red

Ако не разбирате функцията console.log() посетете поста Работа с конзолата 

Също така на нашия обект dog може да добавим и някакъв метод (действие) например changeName() който да променя името на обекта ни .

Нека метода (функцията) change() бъде написана по следния начин:

function change(new_name){

this.name = new_name;//задаваме нова стойност на свойството name

}

Добавянето на метода става по същия начин както и свойствата със знака точка.

dog.changeName = change;//не е задължително да се пишат скобите за да укажем че присвояваме функция javascript ще разбере кода

Сега ако напишем кода:

dog.changeName(“Боби”);

console.log(dog.name);//Ще ни изпише в конзолата новото име : “Боби”

Ето и кода на нашата програма до тук:

var dog = new Object();//създаваме нов обект с име dog

dog.color = “червено”;//присвояваме ме му стойност за цвят

dog.name = “Шаро”;//присвояваме ме му стойност за име

dog.changeName = change;//присвояваме ме му функция за неговия нов метод

dog.changeName(“Боби”);//викаме функцията на нашия обект за да променим името му

console.log(dog.color+”-“+dog.name);//Ще изпише: червено-Боби

function change(new_name){

this.name = new_name;

}

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

var dog ={color:”red”,name:”Шаро”,changeName:change};

Това е т.н. javascript object синтаксис или JSON синтаксис. Може да намерите повече инфромация за създаването на javascript обекти по този начин в интернет.

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

function Dog(color,name){

this.color=color;

this.name=name;

this.changeName = change;//трябва да имате създадена функцията change() за да я присвойте

}

След като сте написали този код може да създадете вече инстанции на Вашия обект:

var dog = new Dog(“red”,”Шаро”);

var mydog = new Dog(“yellow”,”Боби”);

Използването на Ваши (собствени) обекти в javascript става по преценка на разработчика, но най-препоръчително е това да става чрез използването на конструктори и създаването на отделни инстанции на обекта.