Рядок (string)

let userName = 'Ivan'; // string

Використовують одинарні, подвійні та похилі лапки. Перші два види лапок звичайні, між ними немає відмінностей, а от похилі мають особливість у використанні. Дозволяють вбудовувати вираз в рядок, укладаючи їх в $ {…}. Приклад:

let name = 'Ivan';

// Вставляємо змінну
alert( `Hello, ${name}` ); // Результат - Hello, Ivan

Число (number)

let userAge = 26; // number (число)

Не може містити числа більше, ніж 2⁵³ (як додатні, так і від’ємні)

Boolean (логічний тип)

let isUser = true; // boolean (логічний тип)

Може мати два значення, true або false (можна перекласти як, так чи ні, або правда чи брехня).

Null (пустота)

let userLastName = null; // пустота

Тобто, відсутність будь-якого значення.

Undefined

let userHeight; // undefined

Змінна була оголошена, але значення їй не задано.

BigInt

Дає можливість працювати з цілими числами довільної довжини, на відміну від number, де ді’ обженння у 16 цифр.

const bigInt = 123456789987654320123456789987654321n; // символ 'n' в кінці показує, що це BigInt

Щоб створити значення BigInt, необхідно додати n в кінець числа:

Symbol (символ)

const someSymbol = Symbol('foo'); // cимвол

Створює символьне значення, яке може використовуватись в якості ідентифікатора властивостей об’єкта.

Оbject (об’єкт)

let car = {
   type:'Skoda',
   model:'Fabia',
   color:'red'
};

Використовуються для зберігання колекцій даних або більш складних об’єктів, що містять властивості. Властивість, це пара, що складається із “ключа” та “значення”. Ключ, це назва властивості, рядок, а значення може бути будь-яким типом.

Створюється за допомогою:

Фігурних дужок {...} або за допомогою конструктора new Object()

Оператор typeof

Повертає тип аргументу, і ми можемо вивести результат в консоль бразузера, за допомогою console.log.

typeof undefined // 'undefined'

typeof 26 // 'number'

typeof 9n // 'bigint'

typeof false // 'boolean'

typeof 'Some paragraph' // 'string'

typeof Symbol('foo') // 'symbol'

typeof null // 'object'// (*)

* Це офіційно визнана помилка в typeof. null не є об’єктом.

В наступній статті, ознайомимось зі функціями в JavaScript.

Запис JavaScript. Типи даних. спершу з'явиться на Дикий Іван.

Створення змінних.

В JavaScript, змінні створюються за допомогою ключового слова var, (скорочено від variable, англійською – змінна). Після чого, задаємо назву самій змінній, н-д: userName, та присвоюємо їй значення, за допомогою оператора присвоєння “=”. В результаті, ми отримаємо:

var userName = 'Ivan';

(змінна userName зі значенням Ivan). 

Є два обмеження, щодо імені змінної, а саме:

• Ім’я змінної має містити тільки букви, цифри або символи $ і _.
• Перший символ не повинен бути цифрою.

Важливо. var user  і var USER – це дві різні змінні, тому що в JavaScript, регістр має значення.

У JavaScript є список зарезервованих імен, якими не можна користуватись при створенні змінних. Декілька з них:

• break
• case
• class
• catch
• const
• function

Повний перелік можна знайти в довідниках по  JS.

Коли назва змінної складається із декількох слів, її назву пишуть в стилі, так званого CamelCase – стиль написання складних слів, при якому кілька слів пишуться разом без пробілів, при цьому кожне слово всередині фрази пишеться з великих літер.

Для того, щоб описати, як і чому працює код, використовують коментарі. В JS вони є двох видів: однорядковими, що починаються з //, та багаторядковими: / * … * /.

// Однорядковий коментар

/*
 * Багаторядковий коментар 
 */

У новій версії JavaScript (ES6), змінні можна створювати за допомогою ключових слів const (скорочення від constant – константа) та ключового слова let.

В чому ж різниця.

Якщо використовувати оголошення змінних за допомогою var, ми зможемо її перезаписати, н-д:

var userName = 'Ivan', // створюємо змінну із значенням Ivan
    userName = 'Oleg'; // перезаписуємо значення на Oleg

console.log(userName); // виводимо в консоль браузера

Можемо це перевірити, за допомогою console.log(), яка виводить повідомлення у веб консоль браузера.

Відриваємо наш index.html в браузері, натискаємо клавішу F12 або CTRL+ ShiFT+I, та переходимо у вкладку console, і тут console.log виводить нам значення змінної userName.

А от коли, ми створюємо змінну за допомогою const, цього зробити нам не вдасться, буде помилка – Uncaught SyntaxError: Identifier ‘userName’ has already been declared. Тому що це, константа, стала величина, яку не можна змінювати.

Що стосується, створення змінної через ключове слово let, ми теж можемо змінити, перезаписати значення змінної, аналогічно змінній, створеній через var.

Що використовувати

Тому, в залежності від ситуацій, можна використовувати let, якщо значення змінної може змінюватись в майбутньому, або const – якщо її значення не буде зазнавати змін. Оголошення змінних через var, вважається застарілим та не рекомендується до використання.

В наступній статті, ознайомився із типами даних в JavaScript.

Запис JavaScript. Створення змінної. спершу з'явиться на Дикий Іван.

Для взаємодії з JavaScript, не потрібно спеціального програмного забезпечення, нам достатньо звичайного текстового редактора та браузера. Але для зручності, рекомендую встановити один з популярних (безкоштовних або умовно безкоштовних) редакторів коду:

• Atom
• Brackets
• Sublime Text
• Visual Studio Code (використовую саме його)

та браузер Google Chrome із зручним Developer Tools (інструментом розробника), хоча  ви можете використовувати, цей браузер який вам більше до вподоби. Також, припускаю, що ви володієте базовими знаннями з HTML та СSS.

Для запуску JS є і інші методи запуску, але  цей найпростіший.

Створюємо проект

Створюємо папку з назвою проекту, наприклад “basicJS” та відкриваємо у редакторі коду. Створюємо файл index.html з базовою структурою (для цього використовую плагін Emmet), ввожу “!”  та натискаю “tab”, додаємо заголовок першого рівня із класичним “Hello, world”, та відкриваємо файл в браузері.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>basicJS</title>
</head>
<body>
  <h1>Hello, world</h1>
</body>
</html>

Результат:

Тепер потрібно створити файл із розширенням .js, де будемо писати  скрипти. 

Хоча, можна вставляти javascript код, одразу на сторінку, розмістивши його наприклад в секції head документа, використавши тег <script> , проте ми одразу будемо писати javascript в окремому файлі, наприклад main.js та підключимо його за допомогою відомого нам тегу <script> із атрибутом src, де вкажемо розташування нашого js файлу. Атрибут type="text/javascript", писати вже не обов’язково. Підключаємо скрипт перед закриваючим тегом <body> (для оптимізація швидкості завантаження сторінки).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>basicJS</title>
</head>
<body>
  <h1>Hello, world</h1>

  <script src="main.js"></script>
</body>
</html>

Для тесту, розмістимо функцію alert() у файлі main.js, яка застосовується для виводу у вікні браузера, невеликого модального вікна з повідомлення. Для прикладу виведемо вікно із привітанням “Hello”.

alert('Hello');

Результат:

Дана функція відобразить вікно в браузері і призупинить подальше виконання скриптів до тих пір, поки користувач не натисне кнопку «OK».

На сьогодні все. Далі поговоримо про створення змінних (varibles) в JavaScript.

Запис JavaScript. Підключаємо перший скрипт. спершу з'явиться на Дикий Іван.

JavaScript – ( об’єктно-орієнтована мова програмування) мета створення якої,  додати інтерактивність, динаміку на сторінки. На етапі створення, носила назву LiveScript, згодом була перейменована на JavaScript (на той час, була дуже популярна мова програмування як Java, це зовсім різні мови програмування, але таким чином через схожу назву, була спроба збільшити ажіотаж, навколо JavaScript).

Комісія EcmaScript (ES), яка слідкувала щодо підтримки різних версій мови, у різних версіях браузерах, так з’явився стандарт (специфікація) – що слідкує за розвитком самого JavaScript. Якщо коротко, не заглиблюючись в історичні деталі створення.

До певного часу, JavaScript не користувалась великою популярність, на відміну своєї бібліотеки  jQuery, яка була спробою запровадити однакову підтримку в браузерах та полегшити роботу з елементами DOM, додаванням анімації, обробкою подій на сторінці. Проте, на сьогоднішній час, із  стрімким розвитком і популярністю JS та нових фреймворків (React, Angular, Vue), jQuery і надалі використовується на великій кількості сайтів та застосовується  у створенні нових сайтів під певні завдання.

2009 рік – розроблений Node.js. Cерверна мова програмування на базі JS, що дозволяє створювати серверну частину додатку. Автор Раян Далом.

У 2015 році, відбувся прорив, версія EcmaScript 2015, він же ES6. Нова версія додала багато нових оновлень, можливостей, що зробило з JavaScript потужний інструмент, повноцінну мову програмування.

У 2020 році, займає одне з лідируючих позицій, серед мов програмування у вебі (front-end та back-end). Крім, цього за допомогою JavaScript, можна створювати мобільні додатки та десктопні застосунки.

Короткий підсумок.

Разом з HTML та СSS, JavaScript став невід’ємною частиною вебу, який і досі розвивається.

У наступній статті, ми підключимо свій перший скрипт.

Запис Основи JavaScript (ES6). Вступ. спершу з'явиться на Дикий Іван.