jQuery створений поверх JavaScript, багатої та виразної мови, і заснований на його правилах. У цьому розділі розглядаються основні поняття JavaScript, а також деякі його пастки, в які потрапляють люди, що не стикаються насамперед із JavaScript. Хоча розділ більше орієнтований на тих, хто не має досвіду програмування, навіть ті люди, які використовували інші мови програмування, можуть отримати користь, вивчаючи деякі особливості JavaScript.
Ось проста програма на JavaScript, яка додає повідомлення на сторінку :
<code data-language="javascript">//створення функції, яка вітає людину var greet=function( person, message) { var greeting='Привіт, ' + person + '!'; console.log( greeting + ' + message); }; //використовуємо функцію, щоб вітати Джорі, //передаючи ім'я та бажане повідомлення greet( 'Джорі', 'Ласкаво просимо до JavaScript'); //використовуємо функцію, щоб вітати Ребекку greet( 'Ребека', 'Дякую, що приєдналися до нас');Не переживайте, якщо вам не все зрозуміло, що відбувається в цій програмі. Далі ми поговоримо про змінні, функції та деякі інші будівельні блоки JavaScript.
Коментар про коментарі
Коментарі можуть виявитися корисним інструментом для пояснення того, що відбувається в шматку коду. Зміст коментаря не впливає на роботу коду. Деякі люди люблять інтенсивно коментувати свій код, інші воліють додавати коментарі тільки для не очевидних речей.
JavaScript допускає однорядкові та багаторядкові коментарі. Однорядковий коментар починається з //, багаторядковий коментар починається з /* і закінчується */.
<code data-language="javascript">//Це однорядковий коментар var foo; /* Це багаторядковий коментар. Він може зайняти кілька рядків, як тут. */
Також іноді ви можете зустріти багаторядковий коментар, який застосовується для коментування рядків:
<code data-language="javascript">function cornify( unicorns /* ціле */
, rainbows /* ціле */
) { } Будівельні блоки JavaScript
Змінні
Змінні застосовуються для зберігання значень, які ми можемо використовувати пізніше. Змінні можуть містити будь-яке значення — текст, числа, дані (такі як "масиви" і "об'єкти"), навіть код (у вигляді "функцій"). Ми оголошуємо змінну через вираз var:
<code data-language="javascript">var myName='Ребека';
Імена змінних можуть бути довільними, не повинні починатися з цифри і не повинні включати дефіс.
Ви можете визначити одну змінну на вираз:
<code data-language="javascript">var a=1; var b='два';
Ви також можете визначити кілька змінних в одному виразі, розділивши їх комами:
<code data-language="javascript">var a=1, b='two';
Після того, як змінній надано значення, ви можете використовувати цю змінну, коли хочете отримати доступ до її значення.
<code data-language="javascript">console.log( myName); //Виводить «Ребека»
Змінні є ключовим поняттям у філософії «не повторюйся». Якщо вам потрібно використовувати значення кілька разів, ви, ймовірно, захочете зберігати його в змінній.
Функції
Функції є основним будівельним блоком JavaScript. Вони пропонують спосіб, коли ми можемо покласти невеликі шматочки функціональності в акуратно загорнутий пакет. Розглянемо, наприклад, функцію, яка становить два числа: function(a, b) { return a + b; }
Ця функція приймає два аргументи: a та b, складає їх і повертає результат.
Це коректний шматок JavaScript, але написаний так, що у нас немає жодного способу викликати функцію, якщо ми дійсно хочемо складати два числа. Можемо вирішити цю проблему, привласнюючи нашу функцію змінної: var addTwoNumbers=function(a, b) { return a + b; };
Ми взяли вираз функції і привласнили її змінній. Тепер ми можемо викликати нашу функцію, використовуючи ім'я цієї змінної:
<code data-language="javascript">console.log( addTwoNumbers(1, 1)); //Виводить 2
Ми також могли б використовувати оголошення функції, щоб дати функції ім'я:
<code data-language="javascript">function addTwoNumbers(a, b) { return a + b; }Це дозволяє нам викликати функцію як і раніше, але цей підхід слід використовувати з обережністю, як описано в цьому пості.
Підсумок: іменування функції через її оголошення може мати несподівані результати, якщо ви не в повною мірою розумієте особливість JavaScript, відому як «підняття змінної». Тема виходить за рамки цього посібника, але зараз ми будемо дотримуватися присвоєння функцій змінним. var доступні лише всередині функції. Це звичайна рекомендація і всі змінні повинні бути оголошені з var, якщо вони не вважаються глобальними, іншими словами доступними в будь-якому місці коду. Зазвичай це не те, чого б вам хотілося, хіба що потрібно, щоб інший код змінив значення змінної.
Що це означає, коли змінна доступна лише всередині функції? Погляньмо на наступний код:
Увага! Некоректний код
<code data-language="javascript">var myFunction=function() { var foo='bar'; }; myFunction(); console.log(typeof foo); //Висновок не визначенийУ наведеному вище прикладі, як тільки ми намагаємося використовувати foo за межами функції, навіть просто для перевірки її типу, наш браузер повідомить про помилку і будь-який код після рядка з foo не буде працювати.
Наступний приклад показує, що у нас може бути дві змінні з однаковим ім'ям, у своїй кожна змінна перебуває у своїй області видимості. У прикладі ми оголошуємо змінну foo і надаємо їй значення qux. Потім всередині функції ми оголошуємо іншу змінну з ім'ям foo і надамо їй значення bar. Зверніть увагу, що за межами функції foo не змінюється, навіть при створенні змінної foo всередині функції.
<code data-language="javascript">var foo='qux'; var myFunction=function() { var foo='bar'; }; console.log(foo); //Виводить 'qux' myFunction(); console.log(foo); //Як і раніше виводить 'qux'Незважаючи на те, що обидві змінні названі однаково, JavaScript вважає їх абсолютно різними сутностями. Це одна з безлічі причин, чому важливо давати змінним осмислені імена.
Область видимості змінної є одним із фундаментальних понять JavaScript та одним із понять, з яким люди часто відчувають труднощі. Важливо пам'ятати, що:
- ви завжди повинні оголошувати змінні з var;
- змінні, оголошені всередині функції через var, які не доступні за межами цієї функції;
- змінні, оголошені без var, завжди глобальні.
Пам'ятайте, що змінні, які не оголошені з ключовим словом var є глобальними неявно! У наступному прикладі змінна a доступна за межами функції, тому що вона не була оголошена з ключовим словом var — а це зазвичай небажано.
Увага! Небезпечний код
<code data-language="javascript">function test() { a=1; }
test(); console.log(a); //Виводить 1