В цьому уроці ми розглянемо базові поняття про деякі основи 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 = 'фрілансер';
Одна з найбільш поширених конструкцій в JavaScript – це оператор IF/ELSE
. Це виглядає приблизно так:
var legalAge = 18; var yourAge = 25; if ( yourAge >= legalAge ) { // Ми можемо використовувати «оповіщення» (alert), щоб повідомити користувача: alert('Ви вже повнолітній'); } else { alert('Ви ще неповнолітній'); }
Ми не будемо перераховувати всі оператори 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
більш популярні для циклічного переміщення по масивах.
Якщо хочеш пізнати людину, не слухай, що про неї говорять інші, послухай, що вона говорить…
Вибачення — не означає, що ти не правий, а інша людина має рацію. Це всього…
Атмосферу паперової книги, запах свіжого чорнила і паперу, що трохи залежався, складно замінити гаджетами. Але…