Зміст теми
Вступ до JavaScript:
Що таке JavaScript?
Вступ до JavaScript:
Суть JavaScript (1/3)
Суть JavaScript (2/3)
Суть JavaScript (3/3)
Обмеження JavaScript
Довідники та специфікації
Вступ в JavaScript:
Визначальний документ по JavaScript
ECMA (European Computer Manufacturers Association) — некомерційна асоціація європейських виробників комп'ютерів, створена в 1961 році і розташована в Женеві. Займається розробкою стандартів для інформаційних і комунікаційних систем.
Три основних довідника по JavaScript
Корисна інформація для програмістів на JavaScript
Редактори для коду
Вступ до JavaScript:
Редактор
IDE, в тому числі для роботи з JavaScript
Мінус IDE
Легкі редактори JavaScript
Консоль розробника - практика
Вступ до JavaScript:
Інструменти розробника JavaScript
Браузер
«Спробуйте знайти на цій сторінці скрипт з помилкою»
Це означає, що в JavaScript коді сторінки є помилка. Безумовно, звичайному відвідувачу її не видно.
Для цього використовуйте клавішу F12 під windows, а якщо у вас mac, то cmd + opt + j.
П.С. Зверніть увагу - помилка в JavaScript - коді сторінки ніяк не позначилася на функціоналі самої сторінки - текст ви бачите, а ось JavaScript код не працює.
Інструменти розробника
Нас цікавить вкладка Console
Коли ми натиснемо на неї, ми побачимо рядок в якому буде помилка
Рядок з помилкою
Перейдіть у вкладку "Sources" з кодом до місця помилки
Тут же буде і короткий опис помилки.
В даному випадку помилка викликана рядком «невідомо скрипт», яка інтерпретатору незрозуміла!
Зручність Console
Питання для самоконтролю?�(Консоль розробника)
З чого починається JavaScript
Вступ в JavaScript:
Початок програми на мові JavaScript
Практика:
Створіть файл base.html і заповніть його кодом нижче:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p> Початок документу</p>
<script>
// тут можна написати будь який скрипт!!!
</script>
<p> Кінець документу</p>
</body>
</html>
Поміркуйте
Чому не варто ставитися недбало до розташування тега <script>?
Важливо!
Основи розмітки коду
Вступ до JavaScript:
Розмітка коду
Актуальність специфікації
Приклад сучасного коду
<script> ... </ script>
Значення «за замовчуванням»
Спрощення коду досягається заданими «за замовчуванням» значеннями
Наприклад:
атрибут <script language = ...> за замовчуванням, варто в значенні «JavaScript», тому його ставити не обов'язково!
Питання для самоконтролю?�(Основи розмітки коду)
Класика "Привіт, Світ" (практика)
Вступ до JavaScript:
Задача. Перша програма (1/2)
Задача. Перша програма (2/2)
<!DOCTYPE HTML>
<html>
<head>
<!-- Тег meta для указання кодування -->
<meta charset="utf-8">
</head>
<body>
<p>Тут початок документа...</p>
<script>
alert('Це мій перший скрипт на
JavaScript. Привіт, Світ!' );
</script>
<p>...а тут кінець документа :)</p>
</body>
</html>
Зберігаємо файл і запускаємо його
Опис, що ви бачите на екрані
Задача 1/2
Задача:
Задача 1/2
Рішення:
Поміняти код сторінки, за прикладом, нижче:
<!DOCTYPE HTML>
<html>
<head>
<!-- Тег meta для указання кодування -->
<meta charset="utf-8">
</head>
<body>
<p>Тут початок документа...</p>
<p>... а тут кінець документа :)</p>
<script>
alert('Це мій перший скрипт на JavaScript. Привіт, Світ!' );
</script>
</body>
</html>
Задача 2/2
Завдання:
Задача 2/2
Рішення:
трохи змінити скрипт
<script>
alert('Привіт, JavaScript');
</script>
Питання для самоконтролю? �(Класика "Привіт, Світ")
Правила розмітки коду для великих скриптів
Вступ до JavaScript:
Правила для великих скриптів
Причини
Синтаксис
<script src="/шлях/до/скриптфайл.js"></script>.
<script src="http://site.com/libs/скриптфайл.js "></script>.
<script src="скриптфайл.js"></script>
Задача. Робота з зовнішніми файлами (1/2)
Завдання:
Задача. Робота з зовнішніми файлами (2/2)
Рішення:
Так, швидше за все, буде виглядати ваш hello2.html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>Тут початок документа...</p>
<script src="mainscript.js"></script>
<p>...а тут кінець документа :)</p>
</body>
</html>
�Так, швидше за все, буде виглядати ваш mainscript.js:
alert ('Це мій перший скрипт на JavaScript. Привіт, світ!');
Виконання практичного завдання
Атрибут async
Задача. Робота з зовнішніми файлами, атрибут async (1/2)
Завдання:
Задача. Робота з зовнішніми файлами, атрибут async (2/2)
Рішення:
Так буде виглядати ваша рядок виклику скрипта в hello2.html
<script async src="mainscript.js"></script>
Запустіть відредагований hello2.html з простежте за змінами:
Правильно! Тепер hello2.html завантажився повністю!
Особливість async
Атрибут defer
Особливості defer
<script src="1.js" defer></script>
<script src="2.js" defer></script>
Задача. Робота з зовнішніми файлами, �атрибут defer (1/2)
Завдання:
Задача. Робота з зовнішніми файлами, �атрибут defer (1/2)
Рішення:
<p>Продовження документу...</p>
<script async src="mainscript.js" ></script>
<script src="mainscript2.js" defer></script>
<p>Продовження документу...</p>
Задача. Робота з зовнішніми файлами, атрибут defer(1/2)
Вірно!
Скрипт з async в «mainscript.js» виконається, як тільки завантажиться - до того, як весь документ готовий.
Скрипт з defer в «mainscript2.js» почекає готовності всього документа!
Опишіть, що ви бачите на экрані?
Задача. Завдання на виконання скриптів (1/2)
Завдання:
У нас є два скрипта:
1.
<script src="big.js"></script>
<script src="small.js"></script>
2. А якщо напишем так?
<script async src="big.js"></script>
<script async src="small.js"></script>
3. А тепер так?
<script defer src="big.js"></script>
<script defer src="small.js"></script>
Задача. Завдання на виконання скриптів (1/2)
Рішення:
Першим виконається big.js! Будьте уважні, ми не використали атрибутів defer / async і в даному коді це звичайна послідовність виконання скриптів, що йдуть один за одним.
А ось тепер першим виконається small.js, так як скрипти через async поводяться абсолютно незалежно один від одного, сторінка теж від них не залежить.
Першим виконається big.js, Скрипти, підключені через defer!
Питання для самоконтролю?�(Правила розмітки коду для великих скриптів)