курси програмування для дітей безкоштовно

4 Примітивні типи даних у Javascript

Крізь типи даних у 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.

  • типи даних у javascript
  • типи даних у javascript

Залишити коментар

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *