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