JavaScript е интерпретируем език за програмиране, разпространяван с повечето уеб браузъри. Поддържа обектно ориентиран и функционален стил на програмиране. Създаден е в Netscape през 1995 г. Най-често се прилага към HTML кода на интернет страница с цел добавяне на функционалност и зареждане на данни. Може да се ползва също за писане на сървърни скриптове JSON, както и за много други приложения. JavaScript не трябва да се бърка с Java, съвпадението на имената е резултат от маркетингово решение на Netscape. Javascript е стандартизиран под името EcmaScript.

Quick Facts Парадигма, Реализиране през ...
JavaScript
Неофициално лого JSConf EU 2011
Парадигмаобектно ориентиран
Реализиране през1995
АвторБрендан Айк
Типизация на даннитединамична
Повлиян отSelf, C, Scheme, Perl, Python, Java
ПовлияваObjective-J
JavaScript в Общомедия
Close

История

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

Описание

JavaScript е програмен език, който позволява динамична промяна на поведението на браузъра в рамките на дадена HTML страницата. JavaScript се зарежда, интерпретира и изпълнява от уеб браузъра, който му осигурява достъп до Обектния модел на браузъра. JavaScript функции могат да се свържат със събития на страницата (например: движение/натискане на мишката, клавиатурата или елемент от страницата, и други потребителски действия). JavaScript е най-широко разпространеният език за програмиране в интернет. Прието е JavaScript програмите да се наричат скриптове.

Възможности

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

Основни задачи в повечето JavaScript приложения са:

  • Зареждане на данни чрез AJAX.
  • Ефекти с изображения и HTML елементи: скриване/показване, пренареждане, влачене, слайд шоу, анимация и много други.
  • Управление на прозорци и рамки.
  • Разпознаване на възможностите на браузъра.
  • Използване на камерата и микрофона.
  • Създаване на 3D графики WebGL.
  • По-добър и гъвкав потребителски интерфейс

Какво не може да се прави с помощта на JavaScript:

  • Не може да се записва информация на потребителския компютър или отдалечения сървър.
  • Не може да се запазва информация директно в отдалечена база данни.
  • Не може да се стартират локални приложения.

Разлики с Java

Освен съвпадението в част от името, двата езика нямат кой знае какви прилики, дори са разработени от различни корпорации (Java е дело на Sun, a JavaScript е разработка на Netscape). Java е популярен език за програмиране не само на интернет приложения, но и на самостоятелни програми за различни платформи. Интернет приложенията на Java се наричат аплети. Те са файлове с разширение .class и се вмъкват в HTML документа между таговете <applet> и </applet>.

Основи на езика

Зареждане

JavaScript кодът може да се вмъква в HTML документа между двойката елементи <script> и</script>. Когато срещне тага <script>, браузърът разбира, че трябва да спре интерпретирането на HTML кода и да започне да обработва скрипта, намиращ се между <script> и </script>. Този скрипт не е задължително да бъде написан на JavaScript. Има и други езици за писане на скриптове, например VBScript. Но езикът по подразбиране е JavaScript. В следния пример създаваме уеб страница в която е вмъкнат JavaScript код, който да изписва на екрана „Здравей!“

<!Doctype HTML>
<html>
<head>
<title>javascript</title>
</head>
<body>
<script>
document.write("Здравей!");
</script>
</body>
</html>

Препишете горния код в някой текстов редактор и запазете файла като hi.html. След това го отворете с някой браузър.

Другият начин да заредите JavaScript е да го поставите в отделен файл. В следващия пример отново ще напишем „Здравей“ на екрана, но ще заредим скрипта си от отделен файл.

Първо създаваме файла Hello.js:

document.write("Здравей!");

След което трябва да променим Hello.html от предходния пример по следния начин:

<!--
<script>
 document.write("Здравей!");
</script>
-->

<script src="Hello.js"></script>

Това разделение на javascript логиката от HTML структурата е един от основните принципи на Софтуерното инженерство.

Променливи

Променливите в JavaScript са динамични и могат да съдържат стойности от всеки тип. Декларират се чрез ключовата дума var следвана от името на променливата или списък от променливи. Възможно е също да присвоите стойност на променливата при декларация чрез оператора =. По подразбиране стойността на променливата ще бъде undefined.

var greeting = "Здравей!", x = 42;

document.write(greeting);

Тук имаме списък от променливи. Името на първата е greeting, а стойността ѝ е „Здравей!“. Когато отпечатваме променливата greeting ние всъщност отпечатваме стойността ѝ „Здравей!“.

Имена на променливи

Имената на променливите в JavaScript не трябва да започват с цифра, могат да започват с малка или голяма буква, _ или $ и да съдържат само тези знаци както и числа. Всички останали символи са забранени. Името на променливата не може да е ключова дума или оператор.

//Валидни имена на променливи:
var ninja, apples_and_oranges, var56, $, nutsAndBolts;

//Невалидни имена на променливи:
var 3, var, "test", if, while, 5wtx1;

Обхват на променливите

В JavaScript има два вида обхват за променливите: функционален и глобален.

  • Функционален обхват важи за всяка променлива обявена чрез var в рамките на дадена функция. Тази променлива е видима единствено в рамките на тази функция.
  • Глобален обхват важи за всяка променлива обявена извън функция или без var, дори и във функция. Тази променлива е видима от всеки друг код на страницата.

Константи

От версия ES6 на ECMAScript е възможно декларирането на константи с ключовата дума const. В миналите версии на езика даден обект може да се замрази object.freeze(myConstants); което спира промяната на стойностите на членовете му.

//Деклариране на константа с числото Пи:
const PI = 3.141592653589793;

//Използване на константата при инициализация на друга променлива
var a = PI * 2;

//Ще върне грешка "TypeError", защото константите не могат да бъдат променяни
PI = 3.14;

Прости типове данни

В JavaScript има няколко основни прости типа данни:

  • Числа – всички числа в JavaScript са представени по един и същи начин в паметта. Няма отделна категории за целочислени и дробни.
  • Низове – низовете се ограждат с единични или двойни кавички и могат да съдържат всеки друг знак.
  • Булеви – само две стойности: true и false.
//Инициализиране на числова променлива:
var a = 3;

//Инициализиране на променлива с низ
var b = "JavaScript iz kuwl";

//Инициализиране на булева променлива
var c = true;

//Извеждане на типа на данните в променливите
alert(typeof a);
alert(typeof b);
alert(typeof c);

Този пример създава променливи с начална стойност от три различни типа данни, поддържани от JavaScript. Първо използваме ключовата дума typeof, за да върне типовете данни и след това ги подаваме като параметри на функцията alert за да бъдат показани в диалогов прозорец.

Оператори

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

var sum = 5 + 7; //sum става 12
var negative = -9; //отрицателният знак може да е и едно- и двуаргументен
var subtraction = 12 – 7; //subtraction става 5
More information Сравнителен оператор, Действие ...
Сравнителен операторДействие
==Равенство, не се препоръчва
 !=Неравенство, не се препоръчва
===Стриктно равенство
 !==Стриктно неравенство
<По-малко
>По-голямо
<=По-малко или равно
>=По-голямо или равно
Close

Стриктното равенство/неравенство проверява стойността или типа на променливите.

Равенството/неравенството проверява само стойността и не се препоръчва защото ако се провери „1“ и 1 това е вярно, но „1“ е низ а 1 е число!!!

More information Аритметичен оператор, Действие ...
Аритметичен операторДействие
+Събиране
–Изваждане
*Умножение
/Деление (без остатък)
 %Деление (с остатък)
Close
var five = 5,
    seven = 7,
    greeting = "Здравей!";

document.write(five + seven); //изписва сбора на five и seven т.е. 12

document.write("<br />"); //добавя HTML тага за нов ред

document.write(greeting + five); //изписва "Здравей!5"

Забележете че резултата от събирането на greeting и five е „Здравей!5“. Когато стойността на едната или двете променливи не е число, резултатът е стойностите „слепени“ в нов низ.

More information Логически оператор, Действие ...
Логически операторДействие
 !(логическо отрицание)
&&И (логическо умножение)
||Или (логическо събиране)
Close
//при присвояване на стойност могат да се използват оператори
//например:
var x = 5;
x = x + 5; // x става 10
x += 5; // също добавя 5 към x

var y = 12;
y -= 1; // y става 11
y *= 2; // y става 24

Сложни типове данни

Абстрактните типове данни в JavaScript са полезни. Те включват масиви, функции и обекти.

Масиви

Масивите съдържат списък от елементи и се бележат с [].

// създаване на нов масив:
var empty = []; // празен масив
var my_data = [1, 2, 3, "Hi!", "Bye!", -2.11 ];
var array_of_arrays = [[1, 2, 3], [4, 5, 6], "Anything else?"]; // масив от масиви

Тъй като JavaScript е динамичен език, елементите от масива могат да са от различен тип. Един масив може да съдържа други масиви, обекти и функции.

Функции

Функциите съдържат код, който ще бъде изпълнен когато функцията бъде извикана. Функцията винаги връща стойност, а ако в края няма return функцията връща undefined. Функциите могат да приемат параметри (аргументи) и да връщат резултат от всякакъв вид: число, текст, обект, масив или друга функция.

// декларация на функция "Кажи "Здравей!" с параметър "име"; връща текста "Здравей, _име_ !"
function SayHello(name) {
 return "Здравей, " + name + "!";
}

// този запис е еквивалентен на горния запис:
var SayHello = function(name) {
 return "Здравей, " + name + "!";
};

// извикване на функцията "Кажи "Здравей!"
SayHello("Иван"); // Здравей, Иван!

Функциите са много гъвкави структури и са едно от най-добрите неща в JavaScript. Позволяват за логическо затваряне и обособен обхват на променливите.

// създаване на нова функция, която връща функция, която връща името на зададеното като параметър число:
// външната функция се изпълнява веднага след като е дефинирана
var numberName = (function() {
    var names = ["нула", "едно", "две", "три", "четири", "пет", "шест", "седем", "осем", "девет", "десет"];
    return function(n) {
        return names[n];
    };
}());

numberName(6); // връща "шест"

Обекти

Обектите съдържат свойства и методи. Те са съвкупност от данни и функции, които работят за изпълнението на свързана задача, бележат се с {}.

// създаване на нов обект "студент" със свойства име, оценка и функция за дрямка:
var student = {
    name : "Иван",
    grade : 4.50,
    nap : function() { this.grade -= 0.5; return "ZzZ"; }
};

// прилагане на метода на студента за дрямка и извеждане на оценката
student.nap();
alert(student.grade);

Чести грешки при програмиране с JavaScript

Много пъти ще видите JavaScript кода обвит в HTML коментар. Към 2013 г. тази практика е излишна. Някои по-стари браузъри, които вече не са в употреба, не разбират JavaScript. Затова трябва да скривате скрипта в HTML коментари. Така по-старите версии на браузърите ще помислят JavaScript кода за коментар и няма да съобщят за грешка.

Ето как ще изглежда скрипт заграден с коментари: Не го правете освен ако не искате да поддържате много стари браузъри!!!

<script>
 <!--
 document.write("Здравей!")
 //-->
</script>

Функцията document.write не се препоръчва, защото може да има неочаквани резултати (подмяна на съдържането). В следващия пример използваме един от чистите начини да вмъкнем HTML таг:

<script>
document.body.innerHTML += "<h1>Здравей!</h1>";
</script>

Източници

Вижте също

Wikiwand in your browser!

Seamless Wikipedia browsing. On steroids.

Every time you click a link to Wikipedia, Wiktionary or Wikiquote in your browser's search results, it will show the modern Wikiwand interface.

Wikiwand extension is a five stars, simple, with minimum permission required to keep your browsing private, safe and transparent.

Chrome
Wikiwand for Chrome
Edge
Wikiwand for Edge
Firefox
Wikiwand for Firefox