Основи JavaScript

17/12/2018

В цьому уроці ми розглянемо базові поняття про деякі основи 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 більш популярні для циклічного переміщення по масивах.

Теги: JavaScript