Основи JavaScript

В цьому уроці ми розглянемо базові поняття про деякі основи JavaScript. Сьогодні ми приділимо увагу різним типам даних JavaScript, визначенню функцій, побачимо, що таке масиви і об’єкти, познайомимося з операторами в JavaScript, умовою if/else, а також з циклами for і while.

 

 

В JavaScript ви можете мати різні типи значень. Існують такі типи даних: числа, рядки, логічні значення (boolean), об’єкти, невизначені та нульові (NULL):

Однорядкові коментарі пишуться з використанням двох косих рисок (//), весь текст в цьому рядку вважається коментарем і не проходить синтаксичний аналіз. Багаторядкові коментарі позначаються за допомогою /* (на початку) і */ (в кінці коментаря).

 

 

Числа

В JavaScript всі числа представлені у вигляді значень з плаваючою крапкою. При визначенні числової змінної не розміщуйте її в лапках.

// Примітка: ЗАВЖДИ використовуйте 'var' для оголошення змінної:  var boxWidth = 50;  var boxHeight = 250;  var areaOfBox = boxWidth * boxHeight; // = 12500  

 

 

Рядки

Будь-який заданий вами рядок сприймається буквально, JavaScript не буде його обробляти. Рядок являє собою послідовність символів Unicode і має бути розміщений в відповідній парі одинарних або подвійних лапок.

var firstPart = 'Привіт';  var secondPart = 'Світ!';  var greetingText = firstPart + ', ' + secondPart; // Привіт, Світ!  // Знак + використовується як оператор об'єднання рядків  // (також використовується для додавання чисел)  

 

 

Булевий тип (логічні значення)

Булеві типи корисні, коли ви хочете перевірити умову – подивитися, чи відповідає вона заданим критеріям. Є тільки два можливих логічних значення: true (істина) і false (хиба). Будь-яке порівняння, яке використовує логічні оператори, призведе до Булевого типу.

10 === (7 + 3); // = true (істина)  // Ви можете призначити логічні значення змінним:  var yourAge = true;  // Ви можете перевірити це наступним чином:  if (yourAge) {    // виконується код, коли умова істинна  }  

 



Оператор ‘===‘, який вказаний вище, є оператором порівняння, про нього ми поговоримо трохи пізніше.

 

 

Функції

Функція – це спеціалізований об’єкт (Object):

// Використання оператора function для створення нової функції:  function firstFunction(arg1, arg2) {    // Тут код функції  }  // Якщо ви опустите ім'я функції, тоді створюється «анонімна функція»:  function(arg1, arg2) {    // Тут код функції  }  // Запуск функції – це просто звернення до неї, а в дужках її аргументи:  firstFunction(); // функція без аргументів  firstFunction('foo', 'bar'); // функція з аргументами  // Ви також можете запустити функцію без привласнення її змінній:  (function(){    // Це приклад анонімної функції, яка викликає сама себе  })();  

 

 

Масиви

Масив також є спеціалізованим об’єктом і може містити будь-яку кількість значень даних. Щоб отримати доступ до значень даних в масиві, ви повинні використовувати число, що зветься «індексом» елемента, який ви намагаєтеся отримати:

// 2 різних способи оголошення нового масиву:  // 1. буквальний (використовуючи квадратні дужки):  var fruit = ['яблоко', 'лимон', 'банан'];  // 2. використовуючи конструктор Array:  var fruit = new Array('яблоко', 'лимон', 'банан');  // отримуємо дані масиву  fruit[0]; // доступ до 1-го елементу масива (яблоко)  fruit[1]; // доступ до 2-го елементу масива (лимон)  fruit[2]; // доступ до 3-го елементу масива (банан)  

 

 

 

Об’єкти

Об’єкт – це колекція іменованих значень (пари ключ – значення (key – value)). Об’єкти схожі на масив, з тією лише різницею, що ви можете вказати ім’я для кожного значення даних.

// 2 різних способи оголошення нового Об'єкта:  // 1. буквально (використовуючи фігурні дужки):  var profile = {    name: 'Іван',    age: 35,    job: 'фрілансер'  };  // 2. використовуючи конструктор Object:  var profile = new Object();  profile.name = 'Іван';  profile.age = 35;  profile.job = 'фрілансер';  

 

 

Умова If/Else

Одна з найбільш поширених конструкцій в JavaScript – це оператор IF/ELSE. Це виглядає приблизно так:

var legalAge = 18;  var yourAge = 25;  if ( yourAge >= legalAge ) {    // Ми можемо використовувати «оповіщення» (alert), щоб повідомити користувача:    alert('Ви вже повнолітній');  } else {    alert('Ви ще неповнолітній');  }  

 

 

Оператори JavaScript

Ми не будемо перераховувати всі оператори JavaScript, а розглянемо тільки найпопулярніші у використанні. Нижче наведено кілька прикладів, які дадуть вам уявлення про їх використання:

// додавання / віднімання / множення / ділення  var matematika = 3 + 5 + 7 - 10 * 100 / 2;  // рівність  if ( 10 == (15 - 5 ) { /* щось робити */ } // == перевірка рівності  // нерівність  if ( 10 != (15 - 5 ) { /* щось робити */ } // != перевірка нерівності  // оператори суворої рівності (рекомендується використовувати ці):  2 === 2 // замість 2 == 2  2 !== 3 // замість 2 != 3  // присвоювання:  var kilkistFruktiv = 15;  kilkistFruktiv -= 2; // Те ж, що і "kilkistFruktiv = kilkistFruktiv - 2"  kilkistFruktiv += 2; // Те ж, що і "kilkistFruktiv = kilkistFruktiv + 2"  

 

 

Цикл

Цикли корисні, коли вам потрібно переглянути всі елементи в масиві або всі елементи об’єкта. Найбільш поширений спосіб виконання циклу в JavaScript – використання оператора FOR або WHILE.

var markiAvto = ['Alfa Romeo','Bentley','BMW','Bugatti','Mercedes-Benz'];  // Цикл WHILE  var counter = 0;  var lengthOfArray = markiAvto.length;  while (counter < lengthOfArray) {    alert(markiAvto[counter]);    counter++; // Те ж, що і += 1;  }  // Цикл FOR  // (змінна i позначає "iterator" (ітератор) – ви можете назвати її як завгодно)  for (var i = 0, length = markiAvto.length; i < length; i++) {    alert(markiAvto[i]);  }  

 

Цикли FOR більш популярні для циклічного переміщення по масивах.