Чи траплялося вам бачити вебсторінку, де все виглядає красиво, але нічого не реагує на ваші дії?
JavaScript – це мова програмування, яка дозволяє робити вебсайти інтерактивними та динамічними.
У цій статті ми знайомимося з головною мовою фронтенд-розробки, порівнюємо її з Java і запускаємо першу програму.
Ви дізнаєтеся, як ця мова допомагає додавати анімації, обробляти події, перевіряти форми та створювати справжні вебзастосунки.
JavaScript
JavaScript написаний практично весь фронтенд – усе, що ми можемо побачити в інтернеті. А відносно недавно вона влаштувалася в бекенді, на смартфонах і навіть у прошивках розумних чайників. Мова затребувана і регулярно посідає перше місце в рейтингу Stack Overflow.
Що ще за скрипт такий
JavaScript – це мова управління елементами на сайті. Вона вміє фарбувати кнопки, запускати анімації, завантажувати ефекти, і все це – без перезавантаження сторінки.
Наприклад, ви натиснули кнопку «Подобається» – спалахнуло червоне сердечко. Або навели курсор на три крапки, і випало меню. В обох випадках на сторінці спрацював скрипт. А JavaScript якраз головний за ними в інтернеті – звідси і його назва.
JavaScript з’явився в далекі дев’яності, коли інтернет був зовсім юним і складався переважно з тексту та гіперпосилань. Тоді компанія Netscape захотіла собі нову мову для вебу на додаток до HTML і CSS.
На те було дві причини:
Шляхетна – щоб люди в браузері могли не тільки читати текст, а й запускати різні меню, віконця, миготливі кнопки тощо.
Комерційна – щоб утерти носа Microsoft. У той час між Netscape Navigator та Internet Explorer йшла «браузерна війна», і Netscape вирішила залучити розробників до роботи у своєму браузері за допомогою нової мови.
Після цього сайти стали виглядати приблизно так:
А ще Netscape домовилася з Sun Microsystems, щоб мова вважалася «молодшим братом» Java для браузерів. Так з’явилася назва JavaScript – не тому, що мови дуже схожі, а тому, що Java тоді була на хайпі. Загалом, у всьому звинувачуйте маркетологів 🙂
Пишемо першу програму
Для початку невеликий лікнеп. Усі мови програмування діляться на компільовані та інтерпретовані. Щоб запустити програму, написану компільованою мовою, код попередньо проганяють через компілятор. А ось код інтерпретованою мовою проганяти не треба – передав інтерпретатору, і той його одразу ж виконує.
JavaScript належить до другого типу мов. З одного боку, це зручно – менше мороки і рутини, більше творчості. З іншого – без інтерпретатора він просто не запуститься. На щастя, всі сучасні веб-браузери дружать із JavaScript.
Ось як запустити скрипт у браузері:
- Беремо код.
- Вставляємо в браузер.
- Запускаємо.
Здається, звучить нескладно. Давайте що-небудь напишемо. Відкриємо консоль браузера (Ctrl + Shift + J або Cmd + Opt + J) і вставимо туди ось цей код:
var userName=prompt(“Як вас звати?”, “Введіть ім’я”);
confirm(“Привіт, ” + userName + “!”);
Візьмемо складніше завдання. Припустимо, у вашого вчителя музики ювілей, і ви готуєте йому в подарунок невеликий сайт-листівку. Додали туди гарний напис, фотографії, вірші.
Начебто все є, але чогось не вистачає – ну, точно, повітряних кульок! Непорядок. Беремо цей код і вставляємо в консоль:
var js = document.createElement(‘script’);
js.src = “https://safronovmax.github.io/LoveCursor/birthday.js”;
document.body.appendChild(js);
Вжух – і ви гроза інтернету, шалений веб-імператор нульових. А кульки зникнуть самі, через десять секунд – можна продовжувати читати статті.
Де ще потрібен JavaScript
Веселощі веселощами, але JavaScript – це серйозна і потужна мова, якою можна не тільки красиві анімації малювати, а й писати складні програми для бізнесу.
Веб-додатки
Візьмемо, наприклад, «Google Документи». Згадайте, як багато там функцій: можна змінювати шрифт, вирівнювати абзаци, вставляти картинки.
Без JavaScript нам би довелося перезавантажувати сторінку після кожної дії – простіше плюнути і піти в Word. А так у нас є зручна хмарна альтернатива.
Бекенд
JavaScript вміє запускатися на сервері і може бути повноцінною бекенд-мовою – як Python, С# і Java.
Підключаємо до нього спеціальний движок Node.js, і можна писати взагалі що завгодно: чати, соцмережі, комп’ютерні програми тощо. У Netflix, наприклад, пишуть на ньому і серверну логіку, і інтерфейс.
Розширення для браузера
Розширення – це прості скрипти, які додають у браузер нові функції.
Вони вміють блокувати рекламу, робити скріншоти, обходити блокування сайтів (ми цього не говорили). Усі розширення пишуть на JavaScript – достатньо вивчити його, і розширюйте скільки заманеться.
Мобільні застосунки
Припустимо, ви працюєте тімлідом у невеликій IT-компанії, створюєте хмарне сховище. Одного разу до вас приходить продакт-менеджер і вимагає застосунок для Android – щоб клієнти могли заходити в сховище з телефону. А у вас взагалі-то стартап, і грошей на Android-розробника немає.
Можна піти складним шляхом і навчити команду програмувати на Kotlin. А можна схитрувати та попросити фронтендера написати програму на JavaScript. Потім просто компілюєте її під Android за допомогою React Native і отримуєте нативний застосунок.
Ігри
Пам’ятаєте динозаврика з Google Chrome? Який стрибає через кактуси, якщо пропав інтернет. Ви теж можете написати такого на JavaScript, і ще багато інших простих іграшок: перегонів, головоломок, стратегій тощо.
Відмінність JavaScript від Java
Багато розробників-початківців думають, що Java і JavaScript – родичі. Мовляв, спочатку потрібно вивчити Джаву, а на додачу до неї ще Скрипт, і все. Насправді це зовсім різні мови – вони по-різному влаштовані та використовуються для різних завдань.
Типізація
У будь-якій комп’ютерній мові є типи даних: рядки, числа, символи тощо. Але кожна мова по-різному поводиться з ними – це називається типізацією. У мовах на кшталт Java вона статична – якщо ми вводимо числову змінну, потрібно спочатку задати її тип. Комп’ютер дивиться на тип і розуміє: зараз буде математика.
А в JavaScript типізація динамічна, тому типи задавати не потрібно. З одного боку, свобода і рок-н-рол, а з іншого – можливі різні аномалії. Наприклад, у JavaScript можна запитати, що більше – банан чи 150, і отримати відповідь:
var x = ‘banana’;
var y = ‘150’;
if (x > y)
console.log(‘Привіт’);
JavaScript видасть «Привіт», очевидно, зробивши вибір на користь банана.
Java на такі фокуси почне лаятися.
Зате так безпечніше – мова захищає програміста від його власних помилок. Не порівнюйте банани з числами!
Компіляція
На відміну від JavaScript, Java – це мова, що компілюється. Перед тим як запустити Java-код, його потрібно скомпілювати – тобто перекласти машинною мовою. Зате потім, коли ми клацнемо на іконку програми, код одразу почне виконуватися. Під час повторного запуску нічого компілювати не потрібно.
Скрипти ж спочатку перехоплює інтерпретатор, який робить приблизно те ж саме, але в режимі реального часу. Тобто під час кожного запуску скрипта код JavaScript переводиться в машинний.
Застосування
Магія мови Java – у її віртуальній машині (JVM). Віртуальна машина дає змогу запускати код на будь-якому пристрої, де її встановлено. Вдалося запустити машину – запуститься і програма. Тому Java зручно писати софт для найрізноманітніших пристроїв: серверів, комп’ютерів, смартфонів, банкоматів і навіть роботів.
У JavaScript зовсім інше завдання – керувати елементами сторінки. Можна написати корисний скрипт і додати функцій на сайт. А якщо ще освоїти Node.js, то взагалі ніяка інша мова не потрібна – можна хоч розетку запрограмувати.
Що легше вчити
Коротка відповідь – JavaScript. Щоб написати перший скрипт, не потрібно витрачати час на встановлення віртуальної машини і розбиратися в типах даних. А з інструментів знадобляться лише блокнот і браузер. Вибирайте його, якщо ви зовсім новачок і хочете швидко вкотитися в розробку.
З Java на перших порах доведеться попітніти, зате потім ви зможете запускати складні системи. А ще з Java легко перейти на інші мови – Kotlin або C#.
Дохід JavaScript програмістів
Програмісти на JavaScript завжди затребувані – вони потрібні банкам, IT-компаніям, рекламним агентствам і всім, хто веде бізнес в інтернеті. Та й платити їм готові непогано – у середньому 75 000 грн на місяць. А джун без досвіду може отримувати близько 30 000 грн.
Якщо порівнювати різні грейди, то зарплати JavaScript-розробників виглядають так:
- від 20 до 50 тисяч – джуни;
- від 40 до 120 тисяч – мідли;
- від 100 до 250 тисяч – сеньйори.
Роботи у «джаваскриптерів» вдосталь. В Україні для них відкрито 5000 вакансій – це більше, ніж для програмістів на Java, PHP або C#.
З чого почати?
Почитайте книжку «Виразний JavaScript» Марейна Хавербеке – це чудовий посібник з мови з прикладами, завданнями та без води. Хороший онлайн-підручник у програміста Іллі Кантора – за ним можна дійти від азів до просунутих концепцій на кшталт ООП і прототипів.
Подальший шлях залежить від вашого стека. Якщо мітите у фронтенд, почніть з HTML і CSS. На сайті Code Basics є безкоштовні курси з них – зі зрозумілою теорією і тренажерами. Потім розберіться в роботі браузера, мережевій безпеці та визначтеся з фреймворком: React.js, Vue.js або Angular.JS.
Якщо більше подобається бекенд, насамперед вивчіть Node.js – він дає змогу розгортати JavaScript на сервері. По-друге, освойте SQL-запити, бази даних і мережеві протоколи. З останньої теми порадимо безсмертну класику Ендрю Таненбаума «Комп’ютерні мережі», яка оновлюється кожні 3-5 років.
Резюмуємо
JavaScript чудово підходить для старту в IT. Спочатку з ним не потрібно занурюватися в технічні деталі та складні концепції, а писати код можна в блокноті або простому редакторі.
JavaScript написаний фронтенд більшості сайтів, а в деяких – навіть серверна частина. Тому програмісти, які опанували цю мову, будуть затребувані, доки живий інтернет 🙂
