Введення в JavaScript

Задачники по JavaScript:
- https://learn.freecodecamp.org/ (HTML, CSS, JS)
- https://www.educative.io/
- https://csx.codesmith.io/
- https://github.com/StevanCakic/js-hard-parts (6 частин, дивися внизу)

Пару слів про VBS, JS, Java (Visual Basic Script, JavaScript, Java) (Microsoft, Apache Software Foundation, Sun Microsystems).

Пару слів про CoffeScript, Babel, Dart, TypeScript (хабра).

Пару слів про консоль розробника.
Багато пар слів з НАГОЛОШЕННЯМ ВАЖЛИВОСТІ ВИКОРИСТАННЯ консолі.

http://javascript.ru

http://learn.javascript.ru

Включення JS у веб-сторінку

Код JS може включатися безпосередньо у веб-сторінку подібно стилям:
- інлайново в тег;
- за допомогою тега <script>;
- імпортуватися із зовнішнього файла.

Інлайново скрипт можна вставити, вказавши подію, при якій даний скрипт має спрацювати (jsFiddle):


				<button onclick="alert('Привіт!');">Клацни сюди!</button>


				<span

				  id="hoverspan"

				  onmouseenter="this.style.background='yellow';"

				  onmouseleave="this.style.background='';">

				  наведи на мене мишку

				</span>


				<input onkeyup="hoverspan.innerText=this.value;">


				<a

				  href="javascript:void(document.body.style.backgroundColor='pink');">

				  зробити фон рожевим

				</a>


				<div onclick="someFunction();">при кліку спрацює стороння функція</div>

Тег <script> можна вставляти в будь-яке місце сторінки:


				<html>

				<head>

				  <script type="text/javascript">

				    let blahblah = 34;

				  </script>

				</head>

				<body>

				  <script>

				    document.write('<p>Hello!</p>');

				  </script>

				</body>

				</html>

Тип скрипта type="text/javascript" вказувати не обов'язково, за часів панування IE 5-6 конкуренцію JS складав Visual Basic Script, але він підтримувався тільки браузерами від Microsoft.

Також JS може підключатися з файла:


				<html>

				<head>

				  <script type="text/javascript" src="js/jQuery.min.js"></script>

				</head>

				<body>

				  <script type="text/javascript" src="js/my.js?update_05_01_2016_1"></script>

				</body>

				</html>

Часто скрипти підключають в кінці веб-сторінки для того, щоб вони починали грузитися в самому кінці і не тормозили завантаження контенту сторінки.

Змінні

let x; - об’явлення (створення) змінної.

let y = 6; - об’явлення змінної та її ініціалізація - присвоєння їй певного значення.

y = 7; - присвоювання нового значення змінній.

Якщо потрібно створити декілька змінних - їх можна перерахувати через кому, використавши один let:


				let a = 5;

				let b = 17;

				let c;

				let d;

				let e = 'hello';


				let a = 5,

				    b = 17,

				    c, d,

				    e = 'hello';


				let a = 5, b = 17, c, d, e = 'hello';

JavaScript - слаботипізована мова програмування, при створенні змінної її тип вказувати не потрібно, інтерпретатор сам визначить тип даних.

let k = 5; - створення локальної змінної, така змінна доступна лише в межах фігурних скобок в конструкціях умов та циклів.

const LOGIN = 'Admin'; - створення константи, константу не можна змінювати в процесі роботи скрипта.

Зазвичай імена константам дають великими літерами - це не є обов'язковим, проте, так історично склалося.

Пробіли, переноси строк не є обов'язковими, але без них читати код дуже важко:


				let a=5,b=17,c,d,e='hello';

				const x=10,y=x+4;for(let i=0;i<s.length;)alert(i++);if(x<5){text='big'+x;b++;}

Кожна дія, кожен оператор повинен закінчуватися крапкою з комою (хоча в багатьох випадках пропущений символ ; не призведе до помилки).

Крапка з комою після фігурної дужки ставиться лише в кінці оператора присвоювання:


				car = { color: 'red', brand: 'bmw' };

				let fun = function(x){ return -x * x; };

В інших випадках після фігурних дужок не потрібно ставити крапки з комою:


				if (умова) { блок true; }	else { блок false; }

				for (параметри) { тіло циклу; }

				do (умова) { тіло циклу; }

				switch (змінна) { розгалуження; }

				function назва (аргументи) { тіло функції; }

Іменування змінних, функцій

Розгляньте наступні приклади кода, зробіть припущення що відбувається у кожній строчці:


				s += ' >> ' + bx + 'px';

				box.cx(s);


				sl.next();

				newact(sl.active(), 'n');


				htmlCode = spanCodeStart + totalPrice + ' грн.' + spanCodeEnd;

				$totalBox.html(htmlCode);


				slider.switchToPrevSlide();

				slider.setSlidesClasses(slider.activeSlide(), 'prev');

Як видно - в перших двох випадках навіть складно уявити - про що йде мова, якісь пікселі, щось з ними відбувається, якісь next, active...

У третьому випадку можна легко зрозуміти, що формується строка з кодом HTML і заноситься у деякий блок $totalBox. У четвертому - переключення слайдера на попередній слайд.

Таким чином, короткі назви змінних можете використовувати лише у коротких шматочках коду: створили змінну, використали і одразу забули про неї.

Якщо ж змінна багато разів зустрічається по коду, то у неї повинне бути зрозуміле ім'я.

Заерзервовані слова

Наступні слова не можна використовувати у якості імен змінних, вони зарезервовані мовою, є службовими:


				var, let, const, new, this, function, arguments, return, public, private, protected, static, default, extends, implements

				void, class, eval, enum, delete, yield, import, export, super, package, debugger, interface

				if, else, try, catch, finally, with, throw, for, do, while, in, of, switch, case, break, continue

				typeof, instanceof, null, true, false

Типи даних

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

Числа

До числового типу даних входять цілі та дробні числа, спеціальні значення NaN та Infinity.


				let a = 0,

				    b = 42,

				    c = -60,

				    d = 5.237,

				    e = .0004,    // e = 0.0004,

				    f = 9.0,

				    g = 3e17,

				    h = -7.415e29,

				    i = 2.97e-13;

Цілі числа можна використовувати з діапазона -2.14 млрд. .. +2.14 млрд. (4 байта). З більшими значеннями JS працює як з дробними числами.

Дробні числа можуть бути представлені як у звичному для нас форматі, так і у форматі з вказанням мантіси.

Якщо дробне число починається з нуля, то ведучий нуль можна не вказувати і починати писати з крапки.

Мантіса позначається літерою e і вказує кількість розрядів, на які потрібно зсунути крапку. Число вказується як дробне з однією цифрою перед крапкою:


				3.17e5 = 3.17 * 10^5 = 31 700


				1.5439e12 = 1.5439 * 10^12 = 1 543 900 000 000


				7.4e-8 = 7.4 * 10^-8 = 0.000 000 074

Діапазон допустимих значень: плюс-мінус від 2.225e-308 до 1.797e308.
1e-330 = 0;
1e330 = Infinity.

Але у дробному вираженні не можна зберігати точні значення, точність обмежена ~16-17 цифрами.
Так, число 1234567890123456789 буде округлене до 1234567890123456800.

Спеціальне значення Infinity також можна отримати при діленні на 0. В більшості інших мов програмування ділення на нуль призводить до помилки.


				x = 5 / 0;    // x = Infinity;

				y = Math.pow(10, 309);    // y = Infinity; Math.pow - піднесення до степеня

Спеціальне значення NaN можна отримати при спробі виконати математичні дії з нечисловими значеннями:


				let x = 5 - 'hello';

				let y = 'a' * 'b';

				let z = parseInt('_42');

Строки

Строки потрібно брати у лапки (одинарні чи подвійні):


				let a = 'hello';

				let b = "world";


				// в JS краще використовувати одинарні лапки для строк без апострофів

				alert('It\'s my cat!');

				alert("It's my cat!");


				// це пов'язано з тим, що в строках часто зустрічається HTML-код,

				// в якому використовуються подвійні лапки:

				console.log('<p class="big">');

				console.log("<p class=\"big\">");

Не плутайте змінні та строки:


				let hey = 'bugaga';

				alert('hey');

				alert(hey);

				alert(bugaga); // помилка

Визначення типу даних

typeof - повертає тип змінної.


				/* оператор */

				let s;

				console.log(typeof s); // "undefined"

				console.log(typeof 0); // "number"

				console.log(typeof 3.5); // "number"

				console.log(typeof true); // "boolean"

				console.log(typeof 'foo'); // "string"


				/* функція */

				console.log(typeof(0)); // "number"

				console.log(typeof(true)); // "boolean"

				console.log(typeof('foo')); // "string"

Коментарі


				/* Коментар на дві строки:

				document.write("hello!"); */

				let i=6; // коментар до кінця строки

Чи потрібно коментувати код, пояснюючи що робить той чи інший блок, та чи інша строка?

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

В коді варто залишати:

коментарі, які відповідають на питання "чому?", а не "що?", такі коментарі пояснюють незрозумілі ділянки, а не просто описують код: // у першому коментарі немає сенсу: // клік по кнопці: button.onclick = function(){ ... } // кнопка виконує ту ж дію, що і клік по товару в корзині: button.onclick.bind(cartBoxItem);
коментарі перед великими блоками коду, в яких в декількох словах пояснюється що робить даний шмат коду. Це полегшує читання і навігацію по коду; // при зміні ролі користувача міняємо йому тип доступу і пробігаємося по всій базі даних, // блокуючи чи надаючи доступ до відповідних функцій ... великий шмат JS
коментарі в складних структурах даних, які б пояснювали що містить кожне поле в неочевидних випадках; // з сервера погоди приходить JSON-файл такого формату: let weather = { t: '2017-08-29 16:00', // дата та час погоди c: 37, // код міста (37 - Хмельницький) l: 4, // код района (4 - Радіозавод) s: '' // строка з погодою }
коментарі, що описують закоментовані шматки коду: чому цей шматок коду закоментований і коли слід безповоротно видалити цей шматок коду. let $sliders = $('.slider'); /* використовували слайдер mkSlideShow, замовник попросив використати bxSlider видалити 2017-11-15 $sliders.append('<button class="prev">prev slide</button>'); $sliders.append('<button class="next">next slide</button>'); $sliders.mkSlideShow(); */ $sliders.bxSlider();

Математичні оператори

- a; - унарний мінус, "інвертує" значення змінної або числа.

a = b; - присвоювання.

a + b; - додавання.

a - b; - віднімання.

a * b; - множення.

a / b; - ділення (звичайне, дробове).

a % b; - залишок від ділення (19 % 4 = 3 тому що 16 / 4 = 4 і 3 у залишку).

i++, ++i - інкремент числа (i = i + 1).

i--, --i - декремент числа (i = i - 1).

Кожен оператор повертає результат обчислення.

Різниця в інкрементах/декрементах:
x++ - повертає значення x і після цього збільшує x на 1;
++x - збільшує x на 1 і після цього повертає значення x.

Протестуйте в консолі браузера наступний код (вводьте в консолі кожну строчку і натискайте Enter):


				let a = 5;

				a++

				a

				++a

				a

Оператори можна групувати:


				let a = 5, b = 11, c = 1;

				let x = y = z = a + 4 / 7 - b * c % 2;

				let k = - a -- - -- b;

Якщо потрібно збільшити чи зменшити змінну на певне значення, то можна використовувати скорочену форму:


				a += 5;    // a = a + 5;

				b -= a;    // b = b - a;

				c *= b;    // c = c * b;

				d /= 2;    // d = d / 2;

				e %= 7;    // e = e % 7;

За допомогою оператора + можна об'єднувати строки (конкатинація строк):


				let a = 'Hello' + " " + 'world!';

				let b = a + '!!';

				console.log(a, b, c);

Увага! При додаванні строк і чисел останні перетворюються в строку.


				console.log('hello' + 5);

				console.log('2+5=' + 2 + 5);

				// використовуйте дужки для визначення пріоритетів операцій:

				console.log('2+5=' + (2 + 5));

Перетворення типів даних:


				console.log(typeof (2 + ''));

				let k = 2 + '5';

				console.log(k, typeof k);

При інших математичних діях строки намагаються перетворитися на число:


				let m = 7 - '5';

				let n = '7' * 5;

				let p = '8' / '2';

				let r = '34a' - 2;

				console.log(k, m, n, p, r);

Перетворити строку в число можна функцією parseInt або плюсом:


				console.log(k, parseInt(k));

				console.log(k, +k);

Приорітети операторів

Повна таблиця приорітетів операторів в JavaScript:

. [ ] ( )	доступ до полів, індексація масивів, виклик функцій, групування операцій
+ - ! ~ ++ -- delete new typeof void	унарні оператори, робота з даними
* / %	множення, ділення, взяття остачі від ділення
+ -	додавання, віднімання, об'єднання строк
<< >> >>>	побітові зсуви
< <= > >= instanceof	порівняння, визначення типу об'єкта
== != === !==	порівняння
&	побітове AND
^	побітове XOR
\|	побітове OR
&&	логічне AND
\|\|	логічне OR
?:	умовний (тернарний) оператор
= += -= *= та ін.	присвоювання, присвоювання з операцією
,	розрахунок декількох виразів

Вивід інформації для розробника

Часто буває розробнику потрібно отримувати різну інформацію під час виконання скрипта, вводити нові дані.

На допомогу приходять наступні функції.

alert(value); - виводить на екран модальне вікно. На комп'ютерах, ноутбуках при цьому зупиняється виконання всіх скриптів на сторінці.


				alert('Hello');

				let apples = 16;

				alert(apples);


				// ефект заморозки сторінки:

				let c = ['red', 'green', 'yellow', 'blue'], i = 0;

				setInterval(function(){

				  document.body.style.backgroundColor = c[i++ % 4];

				  if (i % 7 === 0) { alert('пауза'); }

				}, 2000);

prompt(title, value); - запит у користувача інформації.

В дужках потрібно вказати два значення: текст запиту і значення по-замовчуванню:


				let n = prompt("Введіть ваше ім'я:", '');

				let x = prompt('Введіть число:', 42);

				alert(x + ' в квадраті = ' + x * x);

				document.querySelector('h1').innerText = 'Привіт, ' + n + '!';

confirm(title); - запит на підтвердження.

В дужках потрібно прописати питання, на яке можна дати відповідь "так" або "ні":


				if (confirm('Ви дійсно бажаєте видалити свою сторінку?')) {

				  document.body.innerText = 'Сторінку видалено. Прощавайте.';

				} else {

				  alert('Сторінку не видалено.');

				}


				let adult = confirm('Вам вже виповнилося 18 років?');

				// adult = true OR false

Зазвичай ці три функції використовуються тільки на етапі відлагодження і видаляються на публічній гілці проекта.

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

Консоль викликається клавішою F12 (якщо у вас замість появи консолі пропав інтернет - спробуйте комбінацію fn + F12).

Модальні вікна зупиняють роботу скрипта, в них складно вивести значну кількість інформації, для перевірки декількох змінних потрібно багато разів клацнути кнопку "Ок".

Консоль надає можливість виводити інформацію потоково, в зручній формі.


				console.log('hello');

				console.dir('hello');


				let x = 6 * 3 - 12 / 4,

				    y = x * x;

				console.log(x);

				console.log('x = ' + x, y, 330);

Різниця між log та dir:


				console.log(document.body);

				console.dir(document.body);

log призначено для виводу текстової інформації, dir - інформації про структуру об'єкта.

Додаткова інформація про console.

Для покращення візуалізації можна використати наступні функції:


					console.warn('hello');

					console.error('hello');

При цьому строки в консолі підфарбуються жовтим і червоним кольором.

Консоль можна програмно очистити:


					console.clear();

Якщо в консоль потрібно вивести багато інформації - її можна згрупувати, при цьому ви побачите лише одну строку текста зі стрілочкою, яку можна розкрити.

Група починається з groupCollapsed (в дужках прописуємо довільний текст заголовка групи) і закінчується функцією groupEnd:


					console.groupCollapsed('Квадрати чисел від 2 до 10');


					for (let i = 2; i <= 10; i++) {

					  console.log(i + '^2 = ', i * i);

					}


					console.groupEnd();

Додаткові матеріали

Підводні камені JavaScript.

Використання console.

Домашнє завдання

Створіть новий проект, в ньому - index.html, папку js і в ній - script.js. Підключіть файл скрипта в html. js-first/ css/styles.css js/script.js index.html
При відкритті сторінки виведіть на екран повідомлення Hello!
Створіть span у вигляді кнопки "Відправити".
При кліку на нього в консоль повино видати повідомлення: "Користувач відправляє дані форми на сервер."
Задайте ідентифікатор (id) спану, виведіть його в консоль у вигляді html-коду та у вигляді об'єкта.
Виведіть в консоль повідомлення про реєстрацію нового користувача, оздобивши відповідним до змісту повідомлення кольором: Занадто простий пароль, бажано використати більше символів. Сервер не відповідає, дані неможливо отримати.
Виведіть в консоль групу строк з кольорами райдуги.
Створіть три змінних a, b та c, задайте їм довільні числові значення.
Виведіть в консоль результат обчислення a * b + c у вигляді повної формули, напкриклад: "5 * 8 + 4 = 44"