Цей загадковий Javascript!
Сьогодні ми знайомимося з JavaScript! Сьогодні ми пишемо перші команди! Сьогодні розбираємося чому той JavaScript такий популярний!
І, якщо повезе, надихаємося на його подальше вивчення. Звучить як план? Тоді погнали !
JavaScript (JS) — динамічна, об’єктноорієнтована прототипна мова програмування. Найчастіше використовується для створення вебсторінок, що надає можливість обмінюватися даними з сервером, змінювати структуру та зовнішній вигляд вебсторінки та додавати сайту функціональності.
Де можна побачити роботу JS? А в будь-якому інтернет-магазині: клікаємо на “Купити” і товар опиняється у корзині, а якщо він там вже не один, то ще й відображається ціна всіх товарів з корзини. Також оплата, реєстрація на сайті, показ оцінки за домашню роботу з усім цим впорається JavaScript.
Відкрий для себе консоль
У Google Chrome
Keyboard shortcuts to open the console
- Windows/Linux: Press Control + Shift + J
- Mac: Press Command + Option + J
У Firefox
Keyboard shortcuts to open the console
- Windows/Linux: Press Control + Shift + K
- Mac: Press Command + Option + K
У Microsoft Edge
Keyboard shortcuts to open the console
- Windows/Linux: Press Control + Shift + J
- Mac: Press Command + Option + J
У Safari
Keyboard shortcuts to open the console
- Mac: Press Command + Option + J
Ще два варіанти, як відкрити консоль
Можна відкрити інструменти розробника, які допомагають побачити код сторінок:
Або просто зайти на сайт: https://jsconsole.com/. Для нашого уроку його також буде достатньо
Чудеса JavaScript
1: Спробуйте запустити кілька математичних прикладів в консолі. А потім приклади з цього списку.
Тут, як і в інших мовах програмування в лапках записується тип даних Рядок (String), а цифри записуються без лапок.
(2 + 2*2)/2
'моє' + 'повідомлення'
'111' + 222
33 + '44'
2 + 2 + '1'
6 - '2'
'6' / '2'
7 / 0
a = 1, b = 1;
c = ++a;
d = b++; Чому дорівнює с? d? Які ще дивні результати ми отримали?
Куди ж без мемів ?
Як ви, мабуть, переконалися, часом на Javascript можна написати дивні команди і отримати не менш дивні результати. І, коли ми більше знайомитимемося з ним, такі випадки будуть траплятися. Тож на цю тему створили купу мемів і приколів. Так, JS інколи дивує, шокує і творить чудеса.
2: А тепер давайте по серйозному. Просто напишемо програму. Створіть новий проєкт у replit. На цей раз залишимо в файлі index.html рядок для підключення javascript файлу. Писати код будемо перед підключенням.
<body>
.... тут будемо писати
<script src="script.js"></script>
</body>Супер. Тепер створимо кнопку, яка буде всіх вітати:
<body>
<button id="btn">Поговори зі мною!</button>
<script src="script.js"></script>
</body>Запустіть і переконайтеся, що кнопка з’явилася. Але поки вона у нас не чемна і не вітається. Все тому, що ми не додали javascript. Для цього відкрийте script.js і додайте туди:
var btn = document.getElementById('btn')
btn.addEventListener('click', function(){
alert('Привітики!');
});Ой, як багато всього! Давайте розбиратися. btn – це така змінна, яка буде працювати з кнопкою. document.getElementById каже, “Хей, а хто в нас там має id =btn, ти зараз будеш працювати!” і запускає функцію : якщо кнопку натиснуть ‘click’, то виконати function(). А в середині вже команда, яка створює вікно і вітається.
Запустіть і перевірте чи ваша кнопочка вітається.
3: Додамо трохи загадковості в нашу програму. Вам треба буде придумати загадку для пісні, міста, людини, та будь-чого! В програмі будуть три (а для домашки цілих п’ять) підказок. Коли натискаєш на відповідну кнопку, з’являється підказка. Остання кнопка виводить відповідь.
Ось так приблизно має виглядати ваша програма після натискання кожної кнопки:
Поїхали створювати. Спочатку html:
<h1>Відгадай пісню!</h1>
<button id="btn1">Підказка 1</button>
<p id="text1"></p> Можна відразу додати всі кнопки або зробити це пізніше. Всі кнопки ідуть одна за одною, а потім вже текст.
Наступним редагуємо js. Додаємо першу підказку:
var btn1 = document.getElementById('btn1')
btn1.addEventListener('click', function(){
document.getElementById("text1").innerHTML = "Ця пісня звучала в серіалах «Південний парк», «Сімпсони», «Менталіст» і точно запам’яталася вам за фільмом «Один удома». ";
});
Зверніть увагу на виділені жирним частини: ці частини будуть трохи змінюватися для інших кнопок.
Тепер додайте кнопки з іншими підказками і кнопку з відповіддю.
Додаткове завдання на урок
1: https://silentteacher.toxicode.fr/ Цей чудовий сайт “Беззвучний вчитель” демонструє якраз можливості консолі javascript і деякі особливості його роботи. Можете пройти кілька рівнів, щоб дізнатися більше.
2: Додайте стилів на свою сторінку.
Домашня робота
1: Закінчіть завдання з загадкою з класної роботи. Додайте 5 підказок.
2: Вкажіть клас для всіх кнопок і додайте стилі для цього класу. Стилі на ваш вибір (може бути колір, відступ, шрифт..)
3: Вкажіть клас для тексту. Додайте стилі для цього класу на ваш вибір.
Level Up
1: Створіть свій комікс! Для цього перейдіть за посиланням: https://replit.com/@AnikaKnishienko/Comics#index.html
і зробіть свій клон через Fork. Змініть назву коміксу, додайте картинки, змініть підписи, щоб вони підходили до вашої історії.
Далі підказки де і що змінювати (але їх можна пропустити, якщо ви розібралися в коді):
а) Змініть назву коміксу на власну. Для цього відшукайте наступне:
<h1>Create your own Comic!</h1>б) Репліки знаходяться в тегах <p>, їх теж варто змінити на власні
в) Малюнки можна замінити, поставивши картинку з інтернету у тег <img>
<img src=“http://farm1.staticflickr.com/13/17778109_cc9d631ba7.jpg”; alt=“” />г) якщо слайдів не вистачає, скопіюйте блок, що слідує за написом “Сцена 6”
