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

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

  • разберете какво е Javascript и обяснете употребата му в уеб разработката.
  • обясняват и използват примитивни типове данни и променливи на JavaScript.
  • обясняват и използват функциите на JavaScript като свойства и методи на примитивни типове данни.
  • обясняват глобалните обекти в JavaScript и могат да използват обекта Math.
  • обяснете основния контролен поток и операторите if/else.

Уча

Научете да разбирате какво е Javascript и обяснете употребата му в уеб разработката.

Преглед

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

Какво е JavaScript и защо го използваме?

JavaScript е език за програмиране, създаден за първи път през 1994 г. като начин за добавяне на функционалност и взаимодействие с потребителя към уебсайт. Ако се върнем към нашата аналогия на уеб страница като къща, ще си спомним, че казахме, че JavaScript е електричество, водопровод и газ. Това е, което кара уеб страницата да работи. Първоначално JavaScript е проектиран да се използва само в предния край като начин за уеб разработчиците да добавят функционалност към своите уеб страници и в ранните си дни той правеше точно това. Наскоро въвеждането на „V8 двигателя“ от Google подобри скоростта и функционалността на JS. Това доведе до разработването и пускането на вълнуващи нови предни JavaScript рамки и в крайна сметка Node.js, начин за стартиране на JavaScript на сървър (back end). Това ново развитие доведе до възраждане на JavaScript. Сега JavaScript е един от най-широко използваните езици за програмиране в света. Можем да намерим JavaScript, използван в предния край, задния край, мобилни устройства, Интернет на нещата (IoT), разработка на игри и наистина навсякъде, където би се използвал традиционен език за програмиране. Наскоро беше пусната най-новата версия на езика JavaScript, ES6*.

*излязоха дори по-нови версии (ES7, ES8 и т.н.), но това издание е мястото, където се случи голяма промяна в парадигмата. Ще говорим за всички концепции, пуснати след ES6, просто за ES6.

JavaScript срещу Java (и други езици)

Имайте предвид, JavaScript != Java. Въпреки че споделят подобни имена (това, за съжаление, се смяташе за функция от ранните пионери на JavaScript), това е мястото, където приликите свършват.

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

JavaScript се счита за „свободно“ въведен език, в който съществуват типове, но не се прилагат. Не е необходимо да декларирате тип, когато създавате променлива или масив, например.

Как да „пуснете“ JavaScript

JavaScript, който е де факто езикът на Интернет, обикновено се стартира от интернет браузър. Всъщност можете да напишете целия JavaScript, който искате, и да го гледате как работи в реално време направо във вашия браузър, като натиснете F12 (за Windows) или Cmd+option+J (за Mac) (за Google Chrome). Това ще отвори вашия console (ще научим повече за конзолата по-късно).

Въпреки че това е един от начините да стартирате своя JavaScript, повечето JavaScript се изпълняват от файл с разширение .js (напр. fileName.js) и се зареждат във вашия браузър чрез маркера script във вашия HTML.

Споменахме Node.js по-рано и въпреки че няма да отидем по-далеч от тази малка част за него, JavaScript може да се изпълнява и на сървър (back end). Той се зарежда в компютър с помощта на специален команден ред и програмата Node.js ще изпълни JavaScript.

Уча

Научете се да обяснявате и използвате примитивни типове данни и променливи на JavaScript.

Преглед

За да разберете езика на JavaScript, първата стъпка е да разберете и да можете да използвате променливи и примитивни типове данни.

Променливи

В основата на JavaScript са променливите. Променливата е начин за съхраняване на стойността на нещо, което да се използва по-късно. (Бележка за тези с предишни познания по програмиране: JavaScript е свободно типизиран език, което означава, че една променлива може да бъде зададена (и нулирана) на всеки тип. Не е необходимо да декларираме нейния тип, когато инициираме променливата.)

Анатомията на една променлива е първо ключовата дума, интервал, името, което даваме на променливата, знак за равенство, стойността, която присвояваме на променливата, и след това точка и запетая.

Има три начина за деклариране на променлива.

вар

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

позволявам

let е нова ключова дума с променлива ES6. Това ще присвои променлива, подобна на var, но с малко по-различно поведение. Най-вече се различава чрез създаване на „обхват на ниво блок“.

конст

const също е нов в ES6. Променлива const е променлива, която не може да се променя. Това е съкращение от „константа“.

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

Терминът „примитивен тип данни“ се отнася до факта, че това са най-основните типове данни в езика. Всички други типове данни (за които ще научим в следващите уроци) използват тези типове.

струни

Низовете са блокове от текст. Те винаги ще бъдат определени с кавички около тях, единични или двойни. Всеки текст с кавички около него е низ.

Числа

Числата са точно това, числа. Числата НЕ имат кавички около тях. Те могат да бъдат и отрицателни. JavaScript наистина има ограничение за размера на числото (+/- 9007199254740991), но това ограничение ще се появи много рядко.

Булеви стойности

Булевите стойности идват от компютърните науки на ниско ниво. Това е концепция, която захранва двоичния код и самото ядро ​​на компютрите. Може да сте виждали двоичен код в миналото (напр. 0001 0110…). Това е булева логика. По същество това означава, че имате два избора, включено или изключено, 0 или 1, вярно или невярно. В JavaScript използваме булеви стойности, за да означават вярно или невярно. Това може да изглежда просто в началото, но може да се усложни по-късно.

Математически оператори

Една от първите задачи на компютъра беше да изчислява числа. В JavaScript имаме вградени математически оператори, които работят точно както на вашия калкулатор.

+ — * / =

%

Нещо, което може би не сте виждали преди, е Modulo (%). Този математически оператор ще раздели двете числа и ще върне остатъка.

Уча

Научете се да обяснявате и използвате функциите на JavaScript като свойства и методи на примитивни типове данни.

Преглед

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

Свойства и методи

Примитивните типове данни (и други типове данни) имат вградена функционалност, известна като properties и methods. Те разширяват функционалността на примитивните типове данни и ни позволяват да събираме информация за тях или да ги манипулираме по някакъв начин. И свойствата, и методите ще бъдат достъпни с помощта на dot notation, където даваме името на променливата, точка, след това името на свойството или метода.

Имоти

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

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

Методи

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

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

Функции

Функциите ни позволяват да извършваме много изчисления и да връщаме краен продукт. Когато изпълняваме компютърна програма, изпълняваме поредица от функции и четем или манипулираме това, което връщат. Може да не сте разбрали това, но ние вече сме работили с тип функция: a method.

Анатомия на функцията

Функция ще започне с ключовата дума function. Това казва на всичко, което изпълнява вашата програма, че това, което следва, е функция и да се третира като такава. След това идва името на функцията. Обичаме да даваме имена на функции, които описват какво правят. След това идва отваряне и затваряне на скоби. И накрая, отворени и затворени скоби. Между тези скоби е мястото, където ще отиде целият ни функционален код.

В този пример ние декларираме функция logsHello и я настройваме на console.log ‘hello’. След това можем да видим, че за да стартираме тази функция, трябва да напишем нейното име, последвано от скоби. Това е синтаксисът за изпълнение на функция. Една функция винаги се нуждае от скоби, за да се изпълни.

Аргументи

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

Ако добавим променлива към скобите, когато декларираме функцията, можем да използваме тази променлива в нашата функция. Ние инициираме стойността на тази променлива, като я предаваме на функцията, когато я извикваме. Така че в този случай име = „Дан“. Можем да предадем и други променливи в това:

Можем да добавим множество аргументи, като поставим запетая между тях:

Изявление за връщане и обхват

В последния пример въведохме оператора return. Няма да console.log всичко, което излиза от дадена функция. Най-вероятно ще искаме да върнем нещо. В този случай това е сумата от двете числа. Мислете за оператора return като за единствения начин данните да избягат от функция. Нищо друго освен това, което се връща, не може да бъде достъпно извън функцията. Също така имайте предвид, че когато функция попадне на израз за връщане, функцията незабавно спира това, което прави, и се връща.

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

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

Можем да видим, че „разликата“ е зададена вътре във функцията. Променливата във функцията принадлежи само на функцията.

Уча

Научете се да обяснявате глобалния обект в JavaScript и можете да използвате обекта Math.

Преглед

Глобалните обекти са предварително написан код, достъпен за нас в JavaScript. Те разширяват функционалността на езика. Важно е да научите какви са тези обекти и как да ги използвате.

Глобални обекти и методи

JavaScript има редица вградени обекти, които да използваме. Тези global обекта разширяват функционалността на езика за нас безплатно. Вече видяхме и използвахме конзолния обект и неговия метод log. Друг от тези обекти е Math. Math има няколко метода, точно както console има log. За да добавим към това, някои от нашите типове данни също имат вградени методи.

математика пау

Можем да използваме метода pow на Math, за да върнем число, увеличено до експонента. Ще са необходими две числа.

Math.round, Math.floor, Math.ceil

Math също има методи, които ще закръглят числата вместо нас. .round ще закръгли число до най-близкото цяло число. .floor винаги ще закръгли число надолу до най-близкото цяло число. .ceil винаги ще закръгля до най-близкото цяло число.

Уча

Научете се да обяснявате основния контролен поток и изразите if/else.

Преглед

Контролният поток ни позволява да пишем код въз основа на условни изрази. Разбирането на този поток е важна част от обучението за програмиране.

Контролен поток

Често, докато компютърът чете и изпълнява нашия код, ние искаме кодът да се изпълнява само ако нещо е вярно или не. Това е известно като контролен поток. Не целият код на екрана се изпълнява по ред или изобщо. Днес ще се научим да използваме основен контролен поток и ще се потопим по-дълбоко в него в следващия ни урок.

В този пример ще използваме контролен поток и оператори за сравнение. Контролният поток е начин нашата функция да провери дали нещо е true и или да изпълни предоставения код, ако е, или да продължи, ако не е. За това ще използваме ключовата дума if:

Тук вземаме число (age) и проверяваме дали твърдението е true. Твърдението 16 > 15 е вярно, така че ще върнем true и функцията ще спре. Ако не е, той ще пропусне този код и функцията ще върне false.

Символът „По-голямо от“ ( > ), който виждате в последния пример, се нарича оператор за сравнение. Операторите за сравнение оценяват два елемента и връщат true или false. Тези оператори са: < , <=, >, >=, ===, !== . Ще научим повече за тези оператори в следващия урок.