Крізь типи даних у JS і до зірок!
Сьогодні ми розберемо типи даних у Javascript, трохи попрацюємо з числами, та створимо свою космічну програму.
У JS є 7 простих типів даних і об’єкти:
- String – рядки
- Number – числа (цілі та дробові)
- Bigint – для великих чисел
- Boolean – має два значення: true(правда) і false(брехня)
- Undefined.
- Null.
- Symbol.
- Object.
Ми розберемо сьогодні перші чотири.
Анкета іншопланетянина
Зробимо проєкт про іншопланетянина, який заповнює анкету, щоб полетіти на якусь планету. Обирає між Землею та іншою планетою. Програма має Зчитувати дані прибульця і виводити інформацію про планету, на яку він зібрався.
1: Створіть новий проєкт. І додайте в нього два поля вводу, дві кнопки і div, в який ми пізніше запишемо текст. Поля вводу будуть для імені та ваги іншопланетянина. Перше поле – текстове, а друге для числа. Одна кнопка буде виводити інформацію про Землю, а друга про іншу планету. div знадобиться для відображення цієї інформації
<h1>Анкета іншопланетянина</h1>
<p>Введи ім'я :
<input type="text" id="name">
</p>
<p>Введи вагу :
<input type="number" id="weight">
</p>
<p>
<button id="earth">Полетіли на Землю</button>
<button id="planet">Полетіли на ...</button>
</p>
<div id="text"></div>
Не забувайте, що рядок не можна видаляти та він має бути в кінці перед закриваючим body:
<script src="script.js"></script>2: Тепер додамо JS код. Створимо функцію реагування на кнопку “Полетіли на Землю”. Вона має зчитати ім’я, яке ввів іншопланетянин і привітати його
let earthInfo=document.getElementById("earth");
earthInfo.onclick=function(){
let name=document.getElementById("name").value;
document.getElementById('text').innerHTML=`
<h1>Вітаю, ${name}. Ви обрали космічну подорож на Землю</h1>
`;
}Спробуйте ввести ім’я і натиснути кнопку. Ви маєте побачити привітання.
3: Тепер додамо трохи інформації про Землю. Ми будемо використовувати змінні, щоб передавати інформацію.
Змінні, які вперше зустрічаються в коді декларуються словом let. Далі, коли будемо працювати зі змінною це слово вже не треба буде писати.
Змінна рядок пишеться в лапках.
Для чисел лапки не потрібні, можна писати дробові числа, але через крапку, а не кому
Bool тип даних може приймати лише значення true(правда) або false(брехня).
Далі приклад оновленої функції з цими змінними і виводом їх значень на екран.
earthInfo.onclick=function(){
let name=document.getElementById("name").value;
let a="Земля не зовсім кругла, вона має форму геоїду"
let b= 70 // відсотків це вода
let c = 23.44 // кут, під яким обертається Земля
let d= 149597870700 // відстань від Землі до сонця (метри)
let e=299792458 // швидкість світла (м\с)
let f=true // Рік на Землі проходить за 365 діб 5 годин 48 хвилин 46 секунд
document.getElementById('text').innerHTML=`
<h1>Вітаю, ${name}. Ви обрали космічну подорож на Землю </h1>
<p>Факти про планету Земля: ${a} </p>
<p>Води на Землі: ${b} %</p>
<p>Земля обертається під кутом: ${c} </p>
<p>Відстань до сонця: ${d} метрів</p>
<p>Рік на Землі проходить за 365 діб 5 годин 48 хвилин 46 секунд: ${f} </p>
`;
}4: Додайте визначення ваги на супутнику (На місяці вага в 6 разів менша, ніж на Землі.). Ось ці рядки вам знадобляться, але їх треба буде правильно розставити
let weight=document.getElementById("weight").value;
let moonW=weight/6
<p>Вага на супутнику: ${moonW} </p>Додаткові завдання на урок
5: Розгляньте малюнок. Допишіть до інформації про Землю, сповіщення про те, скільки летіти від Землі до двох інших планет (дані на картинці)
Приклад: “До Урану тобі летіти цілих 120 місяців!”
Використайте змінні, щоб записати значення.
6: Додайте ще інформацію про Землю за допомогою змінних різних типів.
7: Створіть код для кнопки, яка відповідає за іншу планету Сонячної системи. Додайте інформацію про таку планету. (Картинки внизу можуть допомогти)
Домашня робота
1: В програму з класної роботи додайте інформацію про те, скільки ХВИЛИН світло летить від Сонця до Землі. Ось корисні змінні, які допоможуть нижче, а формулу придумайте самі:
let d= 149597870700 // відстань від Землі до сонця (метри)
let с1=299792458 // швидкість світла (м\с)
time.toFixed(2) – це корисна функція, яка допомагає округлити значення змінної time до двох знаків після коми. Її можна використати за бажанням
2: Створіть функцію для кнопки, яка відповідає за іншу планету. Якщо натиснути на кнопку, має виводитися інформація про цю планету (планета може бути реальна або вигадана). Якщо планета вигадана, то і дані про неї теж можна придумати.
3: Додайте картинку Землі в блок інформації про Землю і картинку планети в блок інформації про планету
Level Up
1: Зробіть Fork з проєкту: https://replit.com/@AnikaKnishienko/4-CJ-LevelUP. Допишіть проєкт так, щоб він виводив вагу людини на різних планетах. Користувач вводить свою вагу і обирає планету, на якій він хоче опинитися. Програма має порахувати його вагу на даній планеті.
Наприклад :
Вага: 10 кг.
Планета : Меркурій.
Щоб розрахувати, треба :
вага * гравітація_Меркурія / гравітація_Землі =
= 10* 3.7 /9.81 = 3.771661569826707
Ось так можна отримати гравітацію Землі зі змінної: gravityConst[“Земля”]
2: Створіть змінну imageConst, в яку запишіть картинки для кожної планети (картинки в папці images, але можете взяти з Google). Зробіть так, щоб разом з вагою на планеті програма вивела і зображення планети. Використайте змінну imageConst.
