JS

Javascript – Кратка история

JavaScript е интерпретиран език за програмиране (в днешно време още известен като Front-end language) – слабо типизиран, поддържа обектно-ориентирани и функционални програмни стилове. Създаден е от Netscape. Може да бъде вграден в изходния код (HTML) на интернет страница с цел да се добави функционалност, да се ползва за писане на сървърни скриптове, както и за редица други приложения. JavaScript не трябва да се бърка с Java. Скриптовите езици като JavaScript са по-лесни за кодиране в сравнение с по-структурираните езици като Java и C++.

JavaScript е разработен първоначално от Брендан Ейч под името Mocha, като по-късно е преименуван на LiveScript и накрая на JavaScript. LiveScript е официалното  на езика когато за първи път бива пуснат в бета версиите на Netscape Navigator 2.0 през септември 1995 г., но е преименуван на JavaScript на 4 декември 1995 г.

Изходният код на популярната програма „Hello, world“ изглежда така:

document.writeln(„Hello, World“);

<script language=“JavaScript“>
document.write(„Hello, World!“)
</script>

Какво е DHTML?

dhtml

DHTML е абревиатура на Dynamic Hypertext Markup Language (динамичен хипертекстов маркиращ език), с която се означава съвкупността от технологии за създаването на интерактивни и анимирани уебсайтове, използващи комбинация от статичен маркиращ език (какъвто е HTML), клиентски скриптов език (какъвто е JavaScript), език за описание на стилове (като CSS), и стандартизирания документен обектен модел (Document Object Model, DOM).

DHTML позволява на скриптовите езици да сменят променливите на езика, описващ уебстраницата, което на свой ред повлиява на изгледа и функционалността на иначе „статичното“ HTML съдържание след като страницата се зареди напълно, както и в процеса на преглеждането ѝ. Така динамичната характеристика на езика DHTML се изразява в начина, по който той функционира по време на прегледа на страницата, а не в способност да се създава уникално съдържание при всяко зареждане на страницата.

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

DHTML често се използва за интерактивни уебстраници или динамични елементи като rollover бутони (променящи се при преминаване с мишката над тях) и падащи менюта. По-рядко езикът се използва за създаване на браузърно базирани игри.

Javascript и предимства

Javascript е език за програмиране, който има изцяло „front-end“ приложение, т.е. неговото предназначение се отнася до създаване на интерактивно съдържание в уеб страниците – това включва ефекти, касаещи манипулация с мишката, имплементиране на валидираща форма, управляване на обекти, посредством клавиатурата, скрито съдържание, което става явно, осъществяване на комплексни изчисления, контрол на всички елементи в DOM, имплементиране на AJAX функционалност и много други.

Какво може да прави Javascript?

  • Да управлява събития (events) – напр. задаване на позиция на нашата мишка, принтиране на нейните координати, задаване на клик-бутони и т.н.
  • Да достъпва / модифицира HTTP cookies
  • Да засича използвания браузър и операционната система на потребителя
  • Може да бъде използван като обектно-ориентиран език за програмиране
  • Може да обслужва изключения (exceptions)
  • Може да създава „asynchronous server calls (AJAX)“

 

Импортиране на Javascript в HTML

Вграждането на Java Script може да стане по два начина: чрез връзка към външен файл (в <head> тага) подобно на CSS, и чрез вграждане в тялото на документа  (не е препоръчително) с тага <script>… <script>. Ето и пример:

js_code

В този пример изрично посочваме: „type=text/javascript“, ако пишем на по-ниска версия на HTML. В по-новата версия – HTML5, ние не сме задължени да упоменаваме изрично този код, тъй като браузърите автоматично ще разпознаят командата чрез таг <script>

Пояснение относно импортиране на .js файл: Ако имаме импортиран .js файл в <head> тага посредством командата: <script type=“text/javascript“ src=“example.js“ /> и вътре в него имаме записан javascript код, то той няма да се изпълни, докато не премахнем частта: src=“example.js“.

Javascript Синтаксис

Синтаксисът в Javascript прилича много на този на C#. Ако някои от вас вече са писали на този език, знаят какви са приликите, а по отношение на синтаксиса, те са много сходни.

В Javascript всеки ред завършва с точка и запетая. Докато не срещне точка и запетая всичко се приема за един ред. Друга особеност е , че Java Script прави разлика между малки и големи букви (Pascal case). В този смисъл променливите с имена Name, name и NAME са три различни променливи. Коментарите в Javascript спазват конвенцията на езика C#. Едноредовият коментар започва с // , а многоредовия  с /* … */. Правилата за образуване на променливите са:

  • Името на променливата трябва да започва с буква от латинската азбука (a-z или A-Z) или знак за подчертаване.
  • Останалата част от името може да съдържа всяка буква, цифра или знак за подчертаване.
  • Името на променливата не може да съдържа интервали.
  • Избягвайте употребата на запазени думи като име на променлива.

Дефинирането на променливите в Javascript не е задължително, но се препоръчва от гледна точка на прегледност на програмата. Това става със запазената дума var. За да се намали размера на програмата е възможно декларирането на няколко променливи едновременно:

var text = „Hello world“;
var x,y,z;

Типове променливи

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

  • Числови променливи – съдържат числа. Например timer=200.
  • Низови променливи – съдържат текстови низове. Например name=“George“.
  • Булеви променливи – могат да имат само две стойности истина (true) или лъжа (false). Например flag=true.

– Числовите променливи се представят като числа, които не са заградени в кавички. – Форматите на числата, които се разпознават от Java Script са десетични (128), шестнайсетични (0х23F), осмични (023). Десетичните числа може да са предстване и в научен формат (с експонента и мантиса – 56е-10). Ето пример за числови променливи :

var x = 56; //десетично представяне
var y = 34e-5; // дес.представяне – научен формат
var z = 034; // осмично представяне
var s = 0x23F; // шестнайсетично представяне

– Низовите променливи се представят като текст заграден в кавички (ако са заградени в кавички цифрите също се интерптретират като текст). Не всичко обаче се интрепретира като текст, съществуват т.нар. управляващи символи (escape characters), които имат специално значение за интерпретатора. Те винаги започват с наклонена черта ( \ ) и имат следното значение:

\\ Лява наклонена черта
\’ Апостроф
\“ Кавички
\b Изтрива знака пред символа(backspace)
\f Нова страница на принтера (form feed)
\n Нов ред
\r Връщане в началото на реда (carrige return)
\t Табулатор

Примери за низови променливи:

var text = „Hello wolrd!“
var text1 = „40“;
vat text2 = „\“ Низ в кавички. \““;

Характерно при Javascript е това, че едни и същи операции имат различно действие в зависимост от това върху какъв тип променливи са приложени. Например:

var x = 10;
var y = 5;
var result;
result = x + y //резултата е 15
//нека сега да променим x на низова променлива
x = „10“
result = x + y //резултата е 105

Както виждате, трябва да внимаваме със свободата, която ни дава Javascript. Хубавото в случая е, че има вградена функция, която ни връща като резултат низ с типа на променливата – typeof().

Оператори в Javascript

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

== Равенство
=== Пълно равенство
!= Неравенство
< По-малко
> По-голямо
<= По-малко или равно
>= По-голямо или равно

Както забелязвате оператора за равенство е == , а за присвояване се използва оператора =. Следват аритметичните и логическите оператори:

Оператор Действие
Аритметични оператори
+ Събиране
- Изваждане
* Умножение
/ Деление
% Делене по модул
++ Инкрементиране
Декрементиране
- Отрицание
Логически оператори
! НЕ (NOT – логическо отрицание)
&& И (AND – логическо умножение)
|| ИЛИ (OR – логическо събиране)

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

Комбинация Еквивалентен израз
x + = y x = x + y
x – = y x = x – y
x * = y x = x * y
x / = y x = x / y
x % = y x = x % y

Редът за изпълнение на операциите в Java Script е следния:

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

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

Операциите за сравнение в един език са едни от най -често използваните. Те често служат за определяне на хода на програмата или проверка за коректността на въведени от потребителя данни. Резултата от една операция за сравнение е истина (true) или лъжа (false). Следващият пример ще покаже резултатите от изпълнението на няколко операции за сравнение.

js_operators

Това ще даде следният резултат:

  • 15 == 20 е равно на false
  • 15 < 20 е равно на true
  • 15 > 20 е равно на false
  • 15 <= 20 е равно на true
  • 15 >= 20 е равно на false

Както виждате двата възможни резултата са true или false. Резултатите от тези операции, могат да участват в булеви операции. Резултатите от тези операции се базират на Булевата аритметика. Други операнди, които могат да участват в булеви операции са булевите променливи. Както бе споменато те могат да има само две стойност :истина или лъжа. Тук обаче има една особенност : всяка една променлива може да се използва като булева. Това произтича от факта, че интерпретатора на Java Script приема за лъжа всеки празен низ(за низовите променливи) и нула (за числовите променливи). За истина се приема всеки непразен низ и числата различни от нула.

js_operators2

Изходен код:

  • x = „“ e false
  • x = 0 e false
  • x = „Тест“ e true
  • x = 1 e true

Popup boxes

Това са най-общо казано диалогови прозорци, които показват на потребителя някакво съобщение. Съществуват три вида. Това са: „Alert box“, „Confirmation box“ и „Prompt box“.

  • Alert box

alert(„Some text here“); // обикновено съобщение, показано в диалогов прозорец;

  • Confirmation box

confirm(„Are you sure?“); // съдържа текст и бутони: OK и Cancel

  • Prompt box

prompt („enter amount“, 10); // съдържа текст, текстово поле и зададена стойност

prompt1

prompt_output

Вградени браузърни обекти (Build-in Browser Objects)

Javascript е създаден да може да манипулира всеки един обект от нашия браузър, т.е. от йерархията на DOM дървото в HTML. След малко ще видим и пример. Сега е важно да кажем, че съществуват 4 основни обекта, които можем да манипулираме чрез javascript. Това са: window, document, screen и browser.

Примерна йерархия на DOM (Document Object Model). DOM е съвкупност от всичките елементи в една HTML страница. Примерът показва примерна йерархия на обекта window, който всъщност е и най-главният елемент, без който една страница не би могла да съществува и затова се намира най-високо в йерархията. Чрез DOM ние можем да достъпваме абсолютно всеки един елемент от страницата и посредством javascript да го променяме.

dom

Вашият коментар