Що таке JavaСкрипт? Вступ із прикладом Hello World

Що таке JavaСценарій?

JavaСкрипти — це мова програмування високого рівня, яка додає певну поведінку веб-сторінкам. Це одна з трьох основних технологій Інтернету: HTML забезпечує структуру, CSS забезпечує зовнішній вигляд, а JavaСкрипт забезпечує взаємодію. Щоразу, коли поле пошуку показує пропозиції під час введення тексту, з’являється карусель фотографій або форма реєстрації попереджає вас про пропущене поле, JavaСкрипт виконує цю роботу у фоновому режимі.

На діаграмі нижче показано, як скрипт розташовується поруч із розміткою звичайної веб-сторінки.

Протягом більшої частини свого життя JavaСкрипти описували як мову сценаріїв на стороні клієнта, оскільки вони працювали лише всередині браузера. Цей опис зараз неповний. З моменту появи Node.js у 2009 році та сама мова також працювала на веб-серверах, утилітах командного рядка, настільних та мобільних додатках. Більш точний опис сьогодні такий: JavaСкрипт — це мова загального призначення з надзвичайно сильною присутністю в браузері.

Характеристики, що визначають мову:

• Динамічно типізовано: Змінна може містити число зараз і рядок через мить, тому типи перевіряються під час виконання програми.
• Інтерпретовано та складено вчасно: Такі рушії, як V8 у Chrome та Node.js, компілюють часто виконуваний код у машинний код для пришвидшення.
• Мультипарадигма: Підтримуються імперативний, функціональний та об'єктно-орієнтований стилі.
• Керований подіями: код реагує на кліки, натискання клавіш, таймери та відповіді мережі, а не працює зверху вниз і зупиняєтьсяping.
• Однопотоковий з циклом подій: Повільна робота, така як мережевий виклик, ставиться в чергу замість того, щоб заморожувати сторінку.

історія JavaScript

Брендан Айх створив JavaСценарій у Netscape Communications у 1995 році, створивши перший робочий прототип приблизно за десять днів. Внутрішньо проєкт мав назву кава моккоВін постачався в бета-версії Netscape Navigator 2.0 як LiveScript у вересні 1995 року та був перейменований JavaScript у грудні 1995 року в рамках маркетингової угоди між Netscape та Sun Microsystems, компанією, яка володіла Java в той час.

Саме перейменування є єдиною причиною, чому так багато новачків досі вважають JavaScript — це полегшена версія JavaЦі дві мови не пов'язані між собою за дизайном, способом володіння та часом виконання. Netscape представив мову Ecma International у 1996 році, а перше видання стандарту ECMA-262 було опубліковано в червні 1997 року. У таблиці нижче наведено найважливіші етапи під час читання старішого коду.

Через щорічний цикл випусків, код, написаний до 2015 року, помітно відрізняється від сучасного коду. У старіших навчальних посібниках використовується var скрізь, тоді як поточний код надає перевагу let та const коли оголошення змінних у JavaScript.

Що таке JavaДля чого використовується скрипт?

JavaСкрипт більше не обмежується дрібними трюками зі сторінками. Той самий синтаксис тепер з'являється в чотирьох дуже різних місцях, тому він постійно входить до числа найбільш широко використовуваних мов в опитуваннях розробників.

Ігри, візуалізація даних, розширення браузера та невеликі апаратні проекти також залежать від нього. Для початківця практичний наслідок простий: зусилля, які ви витрачаєте на синтаксис, тепер безпосередньо переносяться на роботу на сервері, мобільну роботу та автоматизацію тестування пізніше. Якщо ви хочете побачити, як мова застосовується до реальних проблем, попрацюйте над набором... практичний JavaПриклади коду скриптів як тільки основні речі стануть зручними.

Як бігти JavaСценарій?

JavaСкрипт не виконується сам по собі. Йому потрібне середовище хоста, яке містить JavaScript двигунChrome та Edge використовують V8. Firefox використовує SpiderMonkey, а Safari використовує JavaScriptCore. Коли браузер завантажує HTML-сторінку та знаходить скрипт, він передає цей скрипт своєму движку, який аналізує, компілює та запускає його.

Друге хост-середовище — це Node.js, яке вбудовує той самий рушій V8 поза браузером. Саме так ідентична мова працює на сервері або в терміналі. Практична перевага JavaСценарій такий кожен сучасний браузер підтримує його on Windows, Linux і macOS, тому вам рідко потрібно турбуватися про те, який браузер використовує відвідувач. Це справжнє покращення порівняно з VBScript, який працював лише в Internet Explorer на Windows і тепер застарів разом із самим Internet Explorer.

Вам потрібні інструменти

Вам потрібен текстовий редактор для написання коду та браузер для перегляду результату. Notepad++, Visual Studio Code, Sublime Text, і будь-який інший редактор, з яким ви впевнено працюєте, виконає цю роботу, хоча редактор із підсвічуванням синтаксису та зіставленням дужок значно заощадить вам час на налагодження. Працює будь-який сучасний браузер: Google Chrome, Firefox, Microsoft Edgeабо Safari. Окрім цих двох елементів, нічого не потрібно купувати чи встановлювати.

Простий JavaПрограма-скрипт

Якщо ви будете тримати JavaСкрипт усередині самого HTML-документа, весь код має знаходитися між початковим тегом <script> тег і закриваючий тег </script> тег. Ось як браузер відрізняє ваш код від навколишньої розмітки. Старіші сторінки також встановлюють type атрибут, записаний як <script type="text/javascript">, що було потрібно, коли існували конкуруючі клієнтські мови, такі як VBScript. Сучасні сторінки його не використовують, оскільки HTML5 не розглядає text/javascript за замовчуванням. Дві версії, наведені нижче, функціонально ідентичні, і обидві досі дійсні.

Привіт, світ, приклад

Традиційна перша програма відображає повідомлення. Помістіть наступну розмітку у файл з назвою hello.html та відкрийте його у браузері.

<html>
<head>
	<title>My First JavaScript code!!!</title>
	<script type="text/javascript">
		alert("Hello World!");
	</script>
</head>
<body>
</body>
</html>

вихід:

A browser dialog box opens containing the text:

Hello World!

Примітка: type="text/javascript" не є обов'язковим у HTML5. Наступний код працює точно так само.

<html>
<head>
	<title>My First JavaScript code!!!</title>
	<script>
		alert("Hello World!");
	</script>
</head>
<body>
</body>
</html>

вихід:

A browser dialog box opens containing the text:

Hello World!

Як тільки сторінка перевищує кілька рядків, переміщення скрипта у власний .js Файл зберігає розмітку читабельною та дозволяє браузеру кешувати код. Відмінності детально розглядаються в цьому порівнянні внутрішні та зовнішні JavaScript.

Як написати та запустити свій перший скрипт

Існує три практичні способи виконання JavaСкрипт, і новачкові варто спробувати всі три, оскільки кожен з них підходить для різних ситуацій.

1. Консоль браузера. Це найшвидший варіант, який взагалі не потребує файлів. Відкрийте будь-яку веб-сторінку, натисніть F12 (або Ctrl+Shift+Я увімкнено Windows і Linux, Cmd+Option+I увімкнено macOS) та виберіть Консоль Табуляція. Введіть рядок, натисніть Enter, і результат з'явиться одразу. Це ідеальне місце для перевірки окремого виразу або для перевірки того, що повертає функція.

// Type each line into the browser console and press Enter
console.log(2 + 2);
console.log("Guru" + 99);
console.log(Math.max(4, 12, 7));
console.log(typeof "hello");

вихід:

4
Guru99
12
string

Зверніть увагу на другий рядок. Додавання числа 99 до рядка «Guru" створює рядок "Guru99”, а не помилка, тому що JavaСкрипт автоматично перетворює число на текст. Така поведінка зручна і водночас є класичним джерелом помилок для початківців.

2. HTML-файл. Це приклад Hello World, наведений вище. Використовуйте його щоразу, коли код має торкатися самої сторінки, наприклад, для зчитування значення форми або зміни елемента.

3. Node.js з терміналу. Встановіть Node.js, збережіть код у файлі з розширенням .js розширення, а потім запустіть node first-script.jsНічого не рендериться, тому console.log стає вашим вихідним каналом. Це шлях, який слід обрати, коли ви хочете практикувати функції чистої мови без будь-якого HTML навколо них.

// first-script.js
const language = "JavaScript";
const createdBy = "Brendan Eich";
const releaseYear = 1995;

console.log(language + " was created by " + createdBy + " in " + releaseYear + ".");

const usedFor = ["Interactive web pages", "Server apps with Node.js", "Mobile apps"];

usedFor.forEach(function (item, index) {
  console.log(index + 1 + ". " + item);
});

вихід:

JavaScript was created by Brendan Eich in 1995.
1. Interactive web pages
2. Server apps with Node.js
3. Mobile apps

Цей короткий скрипт вже використовує три ідеї, з якими ви будете постійно зустрічатися: константи, оголошені за допомогою const, масив містить список значень та функцію зворотного виклику, що передається до forEachПереписування того ж циклу за допомогою for твердження – це корисна вправа після того, як ви вивчили петлі в JavaScript.

JavaСценарій проти Java

Ці імена — найбільша випадковість в історії програмування, і плутанину, яку вони спричиняють, варто розвіяти заздалегідь. JavaScript було перейменовано з LiveScript виключно з маркетингових міркувань у 1995 році, коли Java була найбільш обговорюваною технологією в Інтернеті. Ці дві мови були розроблені різними людьми, в різних компаніях, для різних проблем.

Єдина справжня схожість полягає в тому, що обидві мови запозичують синтаксис фігурних дужок з C. Вивчення одного не навчить вас іншого, хоча спільний синтаксис трохи полегшує читання другої мови. Якщо дотримуватися суворого typing звертається до вас, TypeScript додає статичний шар тексту поверх JavaСкрипт під час компіляції до простого вигляду JavaСценарій, а відмінності викладено в цьому TypeScript та JavaПорівняння скриптів.

Після того, як основи закріплені, природні наступні кроки такі: інтерактивний JavaВправи зі сценаріями, То змінні та типи даних, А потім масиви та петлі. Після того, об'єктно-орієнтована JavaScript пояснює, як об'єкти, прототипи та класи поєднуються між собою, та форматування рядка охоплює обробку тексту, яку ви використовуватимете майже в кожному скрипті.

Поширені запитання