Спочатку розглянемо “будівельні блоки” коду.
Інструкції
Інструкції – це синтаксичні конструкції та команди, які виконують якісь дії.
Ми вже бачили інструкцію alert('Привіт, світ!'), яка показує повідомлення ‘Привіт, світ!’.
Можна писати стільки інструкцій, скільки завгодно. Інструкції можна розділяти крапкою з комою.
Наприклад, тут ми розділили “Привіт, світ” на два виклики alert:
alert('Привіт'); alert('Світ');Зазвичай кожну інструкцію пишуть з нового рядка, щоби код було легше читати:
alert('Привіт');
alert('Світ');Крапка з комою
Здебільшого крапку з комою можна пропустити, якщо є перенесення на новий рядок.
Такий код буде працювати:
alert('Привіт')
alert('Світ')У цьому разі JavaScript інтерпретує перенесення рядка як “неявну” крапку з комою. Це називається автоматичне вставлення крапки з комою.
Переважно новий рядок означає крапку з комою. Але “переважно” не означає “завжди”!
У деяких випадках новий рядок не означає крапку з комою. Наприклад:
alert(3 +
1
+ 2);Код виведе 6, тому що JavaScript не вставить тут крапку з комою. Інтуїтивно зрозуміло, що, якщо рядок закінчується плюсом "+", то це “незакінчений вираз”, тому крапка з комою не потрібна. І в цьому випадку все працює як задумано.
Але є ситуації, коли JavaScript “забуває” вставити крапку з комою там, де це дійсно потрібно.
Помилки, які виникають у таких ситуаціях, досить важко виявити й виправити.
Якщо хочете побачити конкретний приклад такої помилки, зверніть увагу на цей код:
alert("Привіт");
[1, 2].forEach(alert);Поки що не задумуйтеся, що означають квадратні дужки [] і forEach. Ми вивчимо їх пізніше. Зараз просто запам’ятайте результат виконання коду: спочатку виведеться Привіт, далі 1, а потім 2.
А тепер видалимо крапку з комою після першого alert:
alert("Привіт")
[1, 2].forEach(alert);Різниця з кодом вище лише в одному символі: крапка з комою, яку ми видалили в кінці першого рядка.
Якщо ми запустимо цей код, виведеться лише Привіт (а потім виникне помилка, яку можна побачити в консолі). Числа більше не виводяться.
Це тому, що JavaScript не вставляє крапку з комою перед квадратними дужками [...]. Оскільки крапка з комою автоматично не вставиться, код у цьому прикладі виконається як одна інструкція.
Ось як рушій побачить її:
alert("Привіт")[1, 2].forEach(alert);Виглядає дивно, чи не так? У цьому випадку таке об’єднання неправильне. Щоби код правильно працював, нам потрібно поставити крапку з комою після alert.
Це може статися в інших випадках.
Ми рекомендуємо ставити крапку з комою між інструкціями, навіть якщо вони розділені новими рядками. Це правило широко використовується в спільноті розробників. Варто повторити ще раз – здебільшого можна пропускати крапки з комою. Але безпечніше – особливо для новачка – використовувати їх.
Коментарі
З часом програми стають все складнішими та складнішими. Виникає потреба додавати коментарі, які будуть описувати що робить код і чому.
Коментарі можна писати в будь-якому місці скрипту. Вони не впливають на його виконання, тому що рушій просто ігнорує коментарі.
Однорядкові коментарі починаються з подвійної косої риски //.
Частина рядка після // вважається коментарем. Такий коментар може займати весь рядок, або міститися після інструкції.
Ось так:
// Цей коментар займає весь рядок
alert('Привіт');
alert('Світ'); // Цей коментар міститься після інструкціїБагаторядкові коментарі починаються з косої риски з зірочкою /* і закінчується зірочкою з косою рискою */.
Ось так:
/* Приклад із двома повідомленнями.
Це багаторядковий коментар.
*/
alert('Привіт');
alert('Світ');Вміст коментаря ігнорується, тому, якщо ми напишемо всередині /* … */ код, він не виконається.
Деколи виникає необхідність тимчасово вимкнути частину коду:
/* Закоментований код
alert('Привіт');
*/
alert('Світ');У більшості редакторів рядок коду можна закоментувати, натиснувши комбінацію клавіш Ctrl+/, а щоби закоментувати декілька рядків – виділіть потрібні рядки та натисніть комбінацію клавіш Ctrl+Shift+/. У macOS потрібно натискати клавішу Cmd замість Ctrl і клавішу Option замість Shift.
Не може бути /*...*/ всередині /*...*/.
Такий код “помре” з помилкою:
/*
/* вкладений коментар ?!? */
*/
alert( 'Світ' );Будь ласка, не вагайтесь коментувати ваш код.
Коментарі збільшують розмір коду, але це не проблема. Є багато інструментів, які мінімізують код перед публікацією на робочий сервер. Вони видалять коментарі, тому їх не буде в робочих скриптах. Отже, коментарі жодним чином не впливають на робочий код.
Пізніше в посібнику буде розділ Якість коду, який пояснить, як краще писати коментарі.