Coding for Future in Lutsk. JavaScript. Part 2

Зовнішні скрипти, порядок
виконання
<script src="script.js"></script>
<script src="/path/to/script.js"></script>
<script
src="https://www.facebook.com/rsrc.php/v3/y7/r
/XWlsagvmeBU.js"></script>
Домашнє завдання
Прочитати про абсолютні і відносні шляхи у HTML

Асинхронні скрипти: defer/async
• атрибути async і defer використовуються для того,
щоб поки вантажиться зовнішній скрипт – браузер
показав подальшу частину сторінки (за скриптом).
• defer зберігає відносну послідовність скриптів, defer
чекає завантаження всієї сторінки.

Задача 2
Виведіть alert зовнішнім скриптом
Файл alert.js розмістити в тій самій
директорії

Розв’язок
Код для HTML-файлу:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Задача 2</title>
</head>
<body>
<script src="alert.js"></script>
</body>
</html>
Для файла alert.js:
alert( 'Я вивчаю JavaScript!' );

Задача 3
Яка послідовність виконання скриптів?
<script src="big.js"></script>
<script src="small.js"></script>
<script async src="big.js"></script>
<script async src="small.js"></script>
<script defer src="big.js"></script>
<script defer src="small.js"></script>

Розв’язки
• big.js, small.js.
• small.js, big.js (якщо big.js
довше завантажується).
• big.js, small.js.

Дещо про структуру коду
alert('Один'); alert('Два');
alert('Один')
alert('Два') // поганий стиль
alert('Один');
alert('Два'); // гарний стиль

Коментарі
alert( 'Один' );
// коментар
alert( 'Два' ); // коментар
/* багаторядковий
коментар.
alert( 'Три' ); // не виконується
*/
/*
/* Так не можна!!! (вкладений коментар) */
*/
alert( 'Чотири' );
Гарячі клавіші Ctrl+/ і Ctrl+Shift+/

Сучасний стандарт, "use strict"
Вмикається на початку коду директивою
"use strict";
або
’use strict’;
Скасувати не можна!

Змінні
var book;
book = 'Кобзар';
Або так:
var book = 'Кобзар';
Кілька змінних:
var user = 'John', age = 25, message = 'Hi!';
В іменах змінних допускаються букви, цифри і символи _, $.
Перший символ не може бути цифрою.
Кирилиця не вітається!
var, class, return, export… – зарезервовані імена!

Приклади використання
var message;
message = 'Hello!';
message = 'World!'; // поміняли значення
alert( message );
var hello = 'Hello world!';
var message; // скопіювали значення
message = hello;
alert( hello ); // Hello world!
alert( message ); // Hello world!

Константи
var PHONE = '+38 050 123 45 67';
var EARTH_RADIUS = 6371;

Задача 4
1. Оголосіть змінні admin і name.
2. Запишіть в name значення "Вася".
3. Скопіюйте значення з name в admin.
4. Виведіть admin і name.

Правильний вибір імені змінної
• Ніякого трансліту, тільки англійська
• Не боятись довгих імен
• “Верблюжий стиль” (“camelCase”)
• Ім’я повинно відповідати даним

Задача 5
• Створіть ім’я для назви першої страви
в ресторані, назва страви - “Борщ".
Правильне ім’я оберіть самі.
• Створіть змінну для імені користувача
зі значенням “Вася". Ім’я теж на ваш
смак.

Розв’язок
• var firstDishName = “Борщ";
• var userName = “Вася";

Загальна інформація про типи
даних. typeof
• Число «number»
– Всі числа + Infinity + NaN
• Рядок «string»
– var str = "Дядя Вася";
– str = 'племінник Коля';
• Булевий (логічний) тип «boolean»
– true, false
• Спеціальне значення «null»
• Спеціальне значення «undefined»
• Об’єкти «object»
– var user = { name: "Вася" };

Оператор typeof повертає тип об’єкта:
typeof x
або
typeof (x)

Coding for Future in Lutsk. JavaScript. Part 2

Recommended

Recommended

More Related Content

More from Олег Вілігурський

More from Олег Вілігурський (20)

Recently uploaded

Recently uploaded (13)

Coding for Future in Lutsk. JavaScript. Part 2