We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

JavaScript — це мова програмування, яка приносить інтерактивність до вашого веб-сайту (наприклад: ігри, реакція на натиски кнопок, введеня даних через форми, динамічна зміна стилів, анімація). Ця стаття допоможе розпочати вивчення цієї захоплюючої мови і дасть вам уяву про її можливості.

Що ж являє собою JavaScript насправді?

JavaScript ("JS" скорочено) це повноцінна динамічна мова програмування, яка, у застосуванні до HTML документу, може надати динамічну інтерактивність на веб-сайтах. Вона була винайдена Бренданом Eйхом, співзасновником проекту Mozilla, the Mozilla Foundation, та Mozilla Corporation.

JavaScript має надзвичайно багато застосувань. Ви можете розпочати з малого: створити "каруселі", галереї зображень, динамічні макети сторінок, відповіді на натиски кнопок, тощо. Із досвідом, ви зможете створювати ігри, 2D та 3D графіку, складні застосунки з використанням баз даних та багато іншого!

JavaScript доволі компактна та гнучка мова. Розробники забезпечили велике розмаїття інструментів, що доповнюють основу мови JavaScript, які відкривають величезну кількість додаткового функціоналу з мінімальними зусиллями. Серед них:

  • Програмні інтерфейси (APIs) для браузерів — API, які вбудовані у браузери, що надають функціонал на зразок динамічного створення HTML та застосування CSS-стилів, збір та обробка відео-потоків з вебкамери користувача, генерація 3D-графіки та аудіо-семплів.
  • API третіх осіб, що дозволяють розробникам інтегрувати у власні сайти функціонал інших провайдерів, таких як Twitter або Facebook.
  • Фреймворки та бібліотеки третіх осіб, які ви можете застосувати до вашого HTML, щоб прискорити створення сайтів та застосунків.

Тому що ця стаття повинна бути легким введенням до JavaScript, на цьому етапі ми не будемо займати вашу увагу детальними розмовами про різницю основної мови JavaScript та різними інструментами, що наведені вище. Ви можете вивчити це у деталях пізніше, у нашій JavaScript learning area, та решті MDN.

Нижче ми представимо вам деякі аспекти основної мови, а також ви ознайомитесь з деякими можливостями API браузера. Розважайтесь!

Приклад "hello world"

Попередній розділ звучить неймовірно, і це дійсно так — JavaScript є одним із найперспекнивніших Веб-технологій, і коли ви проникнитесь та почнете використовувати його, ваші веб-сайти перейдуть у нові виміри продуктивності та креативності.

Тим не менш,  відчувати себе комфортно з  JavaScript складніше ніж з HTML та CSS. Вам потрібно починати з малого та продовжувати працювати малими послідовними кроками. Для початку, ми розглянемо як додати деякі прості JS-елементи на вашу сторінку,  створюючи "hello world!" зразок (стандартний приклад з програмування).

Важливо: Якщо ви не проходили пепередні частини курсу, завантажте цей зразок коду(архів) і використовуйте його як точку початку.

  1. Перш за все, перейдіть до вашого тестового сайту та створіть нову папку з іменем "scripts"(без лапок). Тоді, всередині нової папки для скриптів, що ви щойно створили, створіть новий файл з назвою main.js. Збережіть його в папці scripts .
  2. Далі, у вашому файлі index.html введіть наступний елемент в новому рядку просто перед закриваючим тегом </body> :
    <script src="scripts/main.js"></script>
  3. Загалом,  це те ж саме, що і <link> елемент для CSS — він додає JavaScript до сторінки, тож це може впливати на HTML (також на CSS, та будь що інше на сторінці).
  4. Тепер додайте цей код до файлу main.js :
    var myHeading = document.querySelector('h1');
    myHeading.textContent = 'Hello world!';
  5. Наприкінці,  переконайтесь, що файли HTML та JavaScript збережені та приєднані до  index.html в браузері. Ви маєте побачити щось на кшталт цього:

Зауважте: Причиною, чому ми ставимо <script> елемент ближче до низу HTML файлу, є те, що HTML завантажується браузером в порядку того, як він прописаний в файлі. Якщо JavaScript завантажено першим, а очікується, що він має впливати на HTML під ним, він може не працювати, якщо JavaScript завантажується раніше, ніж HTML, над яким він має здійснювати якісь маніпуляції. Тож, писати підключення JavaScript наприкінці коду HTML це, зачасту, найкраща стратегія.

Що сталось?

Текст вашого заголовка було замінено на "Hello world!", використовуючи JavaScript.  Ви зробили це за допомогою першої функції яку використали, яка має назву querySelector() щоб отримати посилання на ваш заголовок та зберегти його у змінній myHeading. Дуже схоже до того, що ми робили, використовуючи CSS селектори. Коли є потреба щось зробити з елементом, ви маєте спочатку його вибрати.

Після цього, ви присвоюєте значення змінної myHeading властивості textContent (яка містить контекст заголовка), а саме "Hello world!".

Зауважте: Обидві можливості, що ви використовували перед цим, є частиною Document Object Model (DOM) API, що дозволяє вам маніпулювати документами.

Прискорений курс основ

Розгляньмо кілька основних можливостей мови JavaScript, щоб дати вам краще розуміння того, як це все працює. Варто зазначити, що ці речі притаманні всім мовам програмування, тож якщо ви засвоїте цей базис, ви на шляху до того, щоб могти програмувати будь-що!

Важливо:  У цій статті, намагайтесь перевіряти приклади коду на своєму ПК у JavaScript консолі. Детальніша інформація про JS-консоль та інші засоби розробника у браузері.

Змінні

Змінні - контейнери, у яких ви можете зберігати значення. Ви можете розпочати з оголошення змінної за допомогою ключового слова var , після якого вказавши ім'я, яким ви хочете назвати змінну:

var myVariable;

Зауважте: Крапка з комою(англ. semicolon) в кінці рядка вказує на кінець виразу; ставити крапку з комою обов'язково, коли вам потрібно розділити вирази в одному рядку. Однак, деякі люди вважають гарною практикою ставити в кінці кожного виразу. Є інші правила, коли ви маєте чи не маєте ставити крапку з комою - дивіться Your Guide to Semicolons in JavaScript, щоб дізнатись більше.

Зауважте: Ви можете називати змінні майже будь-як, проте є певні обмеження (читайте статтю про правила іменування змінних.) Якщо вагаєтесь, можна перевірити ім'я вашої змінної, щоб дізнатись, чи є воно коректним.

Зауважте: JavaScript це мова чутлива до регістру — myVariable , це не те саме, що myvariable чи MYvariable. Якщо ви маєте проблеми з кодом, можливо, варто перевірити регістр.

Після оголошення змінної, ви можете просвоїти їй значення:

myVariable = 'Bob';

Ви можете виконувати обидві операції в одному рядку:

var myVariable = 'Bob';

Ви можете звертатись до змінної, просто вказавши її ім'я:

myVariable;

Після надання змінній значення, ви можете пізніше змінити його:

var myVariable = 'Bob';
myVariable = 'Steve';

Зауважте, що змінні можуть містити значення різних типів:

Тип Пояснення Приклад
String Послідовність символів, відома як рядок. Щоб визначити, що значенням є рядок, ви мусите занести його в лапки. var myVariable = 'Bob';
Number Число. Без лапок. var myVariable = 10;
Boolean Значення True/False. Слова true та false є спеціальними словами в JS, та не потребують лапок. var myVariable = true;
Array Масив. Дозволяє зберігати багато значень за одним посиланням. var myVariable = [1,'Bob','Steve',10];
Виклик значень елементів здійснюється так:
myVariable[0], myVariable[1], і т. д.
Object Загалом, будь-що. Все у JS є об'єктом і може міститись у змінній. Пам'ятайте це. var myVariable = document.querySelector('h1');
Всі попередні приклади теж.

То навіщо нам потрібні змінні? Щож, змінні потрібні для всіх цікавих у програмуванні речей. Якби змінні не могли змінюватись, то ви не могли б робити ніяких динамічних речей, як то персоналізовані вітальні повідомлення чи зміна відображуваних в галереї зображень.

Коментарі

Ви можете залишати коментарі у JavaScript коді, так само як у CSS:

/*
Все, що всередині, є коментарем.
*/

Якщо коментар однорядковий, то простіше виділити його двома слешами:

// Це коментар. Малозмістовний, та все ж.

Оператори

Оператор , це математичний символ, що видає результат,  оснований на двох значення(чи змінних). В таблиці нижче ви можете побачити деякі з напростіших операторів з деякими прикладами, які можете перевірити у JavaScript консолі.

Оператор Пояснення Символ Приклад
Додавання/конкатинація Вживається для додавання двох чисел чи злиття двох рядків разом. + 6 + 9;
"Hello " + "world!";
Віднімання, множення, ділення Те ж, що і в простій математиці. -, *, /

9 - 3;
8 * 2;  //Множення у JS позначається зірочкою
9 / 3;

Присвоєння Ви вже це бачили; присвоєння змінній значення. = var myVariable = 'Bob';
Порівняння Перевіряє чи дві змінні рівні та повертає true/false (Boolean) . === var myVariable = 3;
myVariable === 4;//false
Заперечення (обернений до порівняння) Повертає логічний вираз, протилежний значенню операнда; true стає false і т.п. Повертає true, якщо значення не рівні. !, !==

Початковий вираз true, але повертається false , оскільки це заперечене порівняння :

var myVariable = 3;
!(myVariable === 3);

Ми перевіряємо "чи myVariable НЕ рівне 3". Повертає false, оскільки myVariable РІВНЕ 3.

var myVariable = 3;
myVariable !== 3;

Існує ще багато операторів, які ви можете використовувати, та цих поки достатньо. Відвідайте Expressions and operators, щоб побачити повний список.

Зауважте: Змішування типів даних може привести до дивних результатів при виконанні обрахунків, тож будьте обережні. Наприклад, введіть "35" + "25" в своїй консолі. Чому ви отримали не той результат, на який ви очікували? Тому, що лапки перетворили числа в рядки, тож виконалось не додавання, а злиття рядків. Якщо ввести 35 + 25 , то результат буде таким, який ви, можливо, очікували у попередньому випадку.

Умови

Умовами називають структури коду, що дозволяють вам перевіряти, повертає вираз true, чи ні, виконуючи певні частини коду, залежно від результату. Поширеною формою умовної конструкції є if ... else.  Наприклад:

var iceCream = 'chocolate';
if (iceCream === 'chocolate') {
  alert('Yay, I love chocolate ice cream!');    
} else {
  alert('Awwww, but chocolate is my favorite...');    
}

Вираз всередині if ( ... ), це порівняння — використовує оператор порівняння щоб співставити значення змінної iceCream з рядком 'chocolate',щоб визначити, чи рівні вони. Якщо true, то запускається перший блок коду. Якщо порівняння не повертає true, то перший блок пропускається, а  другий блок, після виразу else, запускається замість нього.

Функції

Функції, це шлях до збереження функціоналу, який ви плануєте використовувати знову. В такому разі, коли вам потрібна певна процедура, ви можете просто викликати відповідну функцію. Ви вже бачили деякі використання функцій, наприклад:

  1. var myVariable = document.querySelector('h1');
  2. alert('hello!');

Ці функції, document.querySelector та alert, є вбудованими у браузер, тож ви можете викликати їх коли вам заманеться.

Якщо ви бачите щось, що виглядає, як ім'я змінної, проте має дужки до — () — та після, це функція. Функції зазвичай приймають аргументи — дані, що необхідні їм для роботи. Їх записують між дужками, розділяючи комами, якщо є більше одного.

Наприклад, функція alert() створює випадаюче вікно в вікні браузера, але ми маємо задати аргументом рядок, щоб повідомити функції, що саме потрібно написати у випадаючому вікні.

Звісно ж, ви можете описувати власні функції — у цьому прикладі ми напишемо просту функцію, що приймає два числа аргументами та множить їх:

function multiply(num1,num2) {
  var result = num1 * num2;
  return result;
}

Спробуйте запустити функцію в консолі та протестувати з різними аргументами. Наприклад:

multiply(4,7);
multiply(20,20);
multiply(0.5,3);

Зауважте: Вираз return вказує браузеру, що потрібно повернути змінну result наприкінці роботи функції, щоб вона була доступна до використання. Це необхідно, тому що змінні, що визначені всередині функції, видимі лише в цій же функції. Це називається зоною видимості змінної. (more on variable scoping.)

Події

Справжня інтерактивність на сайті вимагає подій. Це структури коду, що стежать за тим, що стається у браузері та запускають певні блоки коду у відповідь. Найпоширеніша подія, це click, що виконується браузером, коли ви клікаєте на щось своєю мишкою. Щоб побачити це, пропишіть наступний код у консолі а потім клацніть на цій сторінці:

document.querySelector('html').onclick = function() {
    alert('Ouch! Stop poking me!');
}

Є багато шляхів прив'язати подію до елемента. Тут ми обираємо <html> елемент, виставляючи для події onclick на виконання безіменну функцію, яку ми хочемо запустити при натисканні.

Зауважте, що це:

document.querySelector('html').onclick = function() {};

еквівалентне цьому:

var myHTML = document.querySelector('html');
myHTML.onclick = function() {};

Просто коротше.

Прокачаємо наш зразок сайту

Тепер, коли ми розглянули кілька принципів JavaScript, давайте додамо трохи нових крутих фішок до нашого сайту, щоб подивитись, що ми можемо з ним робити.

Додамо зміну картинок

У цій частині, ми додамо ще зображень засобами DOM API, викорстовуючи JavaScript, щоб переключатись між ними, коли хтось клікне на зображення.

  1. Перш за все, знайдіть ще одне зображення, яке б ви хотіли бачити на своєму сайті. Переконайтесь, що воно має такий же розмір, як і попереднє, або максимально близько до нього за розміром.
  2. Збережіть його у папку images .
  3. Перейменуйте його на 'firefox2.png' (без лапок, звичайно).
  4. Перейдіть до файлу main.js, та введіть цей шматок коду JavaScript. (Якщо ваш  зразок "hello world" досі там, видаліть його.)
    var myImage = document.querySelector('img');
    
    myImage.onclick = function() {
        var mySrc = myImage.getAttribute('src');
        if(mySrc === 'images/firefox-icon.png') {
          myImage.setAttribute ('src','images/firefox2.png');
        } else {
          myImage.setAttribute ('src','images/firefox-icon.png');
        }
    }
  5. Збережіть всі файли та відкрийте index.html у браузері. Тепер, коли ви клікатимете на зображення, воно буде замінюватись іншим.

Ви зберігаєте посилання на ваше зображення у змінній myImage. Далі, ви прив'язуєте подію onclick для цієї змінної до функції, що не має імені(анонімної). Зараз, щоразу, коли ви клікнете на цей елемент:

  1. Ви поновлюєте значення атрубуту зображення src .
  2. Використовуєте умову для перевірки, чи значення src рівне шляху до першого зображення:
    1. Якщо так, ви змінюєте значення src на шлях до другого зображення, змушуючи вже друге зображення завантажитись до елемента <image>.
    2. Якщо ні (значить зміни вже відбувались), значення src замінюється назад до оригінального зображення, в первинний стан.

Персоналізоване привітання

Далі ми допишемо шматок коду, що змінить заголовок сторінки на особисте привітання, коли користувач вперше відвідує сторінку. Це повідомлення залишиться, якщо користувач покине сайт та повернеться знову - ми збережемо його засобами Web Storage API. Ми також додамо можливість змінити користувача і, відповідно, привітання, як тільки буде потрібно.

  1. До index.html додамо наступний код, прямо перед елементом <script>:
    <button>Change user</button>
  2. У файлі main.js, в  кінці вставте наступний код . Він отримує посилання на нову кнопку та заголовок і зберігає їх до нових відповідних змінних:
    var myButton = document.querySelector('button');
    var myHeading = document.querySelector('h1');
  3. Тепер додамо наступні функції, щоб налаштувати персоналізоване привітання - воно в такому стані не працюватиме, та скоро ми це виправимо:
    function setUserName() {
      var myName = prompt('Please enter your name.');
      localStorage.setItem('name', myName);
      myHeading.textContent = 'Mozilla is cool, ' + myName;
    }
    Ця функція містить функцію prompt(), яка викликає діалогове вікно, подібно до alert(). Функція prompt(), однак, запитує в користувача дані, зберігаючи їх у відповідній змінній одразу після того як буде натиснута кнопка OK. В цьому випадку, ми питаємо в користувача його ім'я. Далі, ми звертаємось до API, що має назву localStorage, що дозволяє нам зберігати дані у браузері, а потім звертатись до них. Ми використовуємо з localStorage функцію setItem(), щоб створити та зберегти дані в 'name', та присвоїти це значення змінній myName, що міститиме дані, введені користувачем. Наприкінці, присвоюємо textContent заголовка рядок, додаючи щойно збережене користувачем ім'я.
  4. Після цього, допишемо цей блок if ... else — ми можемо назвати його ініціалізацією, оскільки він структуруватиме логіку сторінки при запуску:
    if(!localStorage.getItem('name')) {
      setUserName();
    } else {
      var storedName = localStorage.getItem('name');
      myHeading.textContent = 'Mozilla is cool, ' + storedName;
    }
    Блок спочатку використовує оператор заперечення (логічне NOT, представлене "!") щоб перевірити, чи існують дані name. Якщо ні, функція setUserName() запуститься, щоб створити їх. Якщо існують (означає, що вони були створені, коли користувач минулого разу відвідував сайт), ми поновлюємо збережене ім'я за допомогою getItem() та присвоюємо заголовку textContent рядок, додаючи ім'я користувача, так само, як і у setUserName().
  5. Для завершення, прив'яжемо подію onclick до кнопки. Коли відбудеться клік, функція setUserName() запуститься. Це дозволить змінювати ім'я користувача, коли виникне в цьому потреба, натиснувши на кнопку:
    myButton.onclick = function() {
      setUserName();
    }
    

Тепер при, першому відвідуванні сайту, він запитає ваше ім'я, а потім відобразить персоналізоване привітання. Ви в будь-який момент можете змінити ім'я, натиснувши на кнопку. Як бонус, через те, що ім'я зберігається у localStorage, воно залишиться навіть, якщо закрити сторінку, зберігаючи персоналізоване привітання з вашим іменем!

Висновок

Якщо ви слідували всім інструкціям, під кінець у вас мало б вийти щось накшталт цього (якщо ні, то можете подивитись нашу версію тут):

Якщо ви десь застрягли, можете порівняти свою роботу з нашим завершеним зразком коду на Github.

Тут ми ледь пошкрябали велику глибу можливостей JavaScript. Якщо вам сподобалось і ви бажаєте продовжити, перейдіть на наш план вивчення JavaScript.

Мітки документа й учасники

Зробили внесок у цю сторінку: OlexandrIlchenko, bdvorianov, AlexandraIM, ivovchak, mirkinoid
Востаннє оновлена: OlexandrIlchenko,