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

7 Умови у JavaScript

В цьому уроці ми розглянемо умови у Javascript. Це дуже важлива конструкція, яка використовується всюди. Ми створимо проєкт для покупки квитка на потяг, при генерації квитка перевірятимемо кілька умов.

Умови

Умови використовуються тоді, коли треба перевірити значення якоїсь змінної або чи виконується якесь правило. Умови можуть бути як довгими, так і дуже короткими.

В даному прикладі умова перевірить станцію, до якої ми їдемо і видасть повідомлення лише у тому випадку, якщо ця станція “Київ”. Це найпростіший і найкоротший вид умови.

let dest=”Київ”
if (dest== “Київ”) {
console.log(“Ми їдемо в столицю!”)
}

Що ж, тепер час визначити: ми їдемо на верхній чи нижній полиці. У цій умові іде перевірка на парність, але є додатковий блок else, який описує, що робити, якщо умова не вірна.

let seatNumber = 24
if (seatNumber % 2 == 0) {
console.log(“У вас верхня полиця”)
} else {
console.log(“У вас нижня полиця”)
}

Проте, це ще не останній варіант умови. Можна перевіряти одразу кілька варіантів. В наступному прикладі ми перевіряємо назви станцій і пишемо о котрій поїзд прибуває на станцію. Станцій може бути багато, тому додаткові перевірки записуються через else if. Також в кінці може бути необов’язковий блок else, якщо жодна умова не підійшла.

  let station = "П'ятихатки"
  if (station == "Дніпро-Головний") {
    console.log(`Прибуття на ст. ${station} о 06:40`)
  } else if (station == "Кам’янське-Пасажирське")  {
    console.log(`Прибуття на ст. ${station} о 06:40`)
  }else if (station == "П'ятихатки")  {
    console.log(`Прибуття на ст. ${station} о 08:02`)
  }else if (station == "Ім. Т. Шевченка")  {
    console.log(`Прибуття на ст. ${station} о 10:22`)
  }else if (station == "Київ-Пасажирський")  {
    console.log(`Прибуття на ст. ${station} о 12:46`)
  } else {
    console.log(`Станцію ${station} не проїжджаємо`)
  }

Практика

Тепер створимо проєкт, який генеруватиме квиток на поїзд. Пасажир матиме змогу обирати тип вагона і ще кілька параметрів для подорожі. Поїхали!

1: Створіть проєкт. Не забудьте залишити рядок з підключенням файлу скриптів в кінці body:

  <script src="script.js"></script>

Спершу створимо заголовок для сторінки. Напишіть напрямок для потяга в заголовку, нехай наша сторінка продає квитки тільки на один потяг. Але обернемо його у div, далі побачите навіщо.

    <div class="site-header">
      <h1>Купуйте квитки на поїзд Дніпро-Київ</h1>
    </div>

Додамо стилі, щоб закріпити заголовок вгорі. Тобто, коли ми будемо прокручувати сторінку, заголовок лишатиметься вгорі.

.site-header {
  position: sticky;
  z-index: 999;
  top: -10px;
  color: #2d57b9;
  text-shadow: 2px 2px #c5d1ed;
  background-color: #86fcfe;
  text-align: center;
}

sticky – приліплює заголовок вгорі.

z-index: 999; – відображати елемент перед всіма іншими.

2: Додайте поле для вводу дати відправлення і обрання типу вагона (можна обрати Плацкарт, Купе і Люкс).

    <p>Оберіть дату відправлення:
      <input type="date" id="travelDate" required>
    </p>
    <p> Оберіть тип вагону:
     <div id="carType">
      <input type="radio" id="economy" value="economy" name="carType" checked />Плацкарт
      <input type="radio" id="standard" value="standard" name="carType" />Купе
      <input type="radio" id="suit" value="suit" name="carType" /> Люкс
      </div>
    </p>
  <p>Дані пасажира:
    <input type="text" id="name" placeholder="Введіть ім'я та прізвище" >
  </p>
<!-- Тут буде решта полів форми -->
<input type="submit" id="res_button" value="Згенерувати квиток">
<div id="ticket"> </div>

input type=”date” – створює поле типу Датою
input type=”radio” – створює поле типу radiobutton. Як правило таких перемикачів створюється кілька (У нас три) в одній групі. Для групи таких перемикачів можна обрати тільки один варіант з зазначених. Наша група має спільний name=”carType”.
input type=”text” – текстове поле
input type=”submit” – кнопка

checked – варіант за промовчанням (Можна не ставити)
placeholder – Підказка, що треба ввести
<div id=”ticket”> </div> – поле, в якому з’явиться текст квитка

Для того, щоб легше було тестувати і не вводити в форму купу разів одні й ті ж дані, можна додати значення за промовчанням value. Для дати додайте, наприклад, value=”2023-12-22″, для імені value=”Дарця-Мандрівниця”

Додайте js код :

let tic = document.getElementById("res_button");

tic.onclick = function() {
  // зчитування полів
  let name = document.getElementById("name").value;
  let d = document.getElementById("travelDate").value;
  let date = new Date(d);
  let price=0;

  let result= `<h1>Квиток на потяг: Дніпро-Київ</h1>`;
  result+=`<h2>Пасажир:  ${name}</h2>`


  document.getElementById('ticket').innerHTML = result;

}

Тут в змінну tic записується кнопка “res_button”. Далі ми створюємо функцію, яка працюватиме, коли кнопку натиснули.

В змінні name та d записуються відповідно ім’я та дата з форми. Дату треба буде ще конвертувати в формат дати, щоб з нею можна було працювати let date = new Date(d);

result – змінна, де буде зберігатися html-код нашого квитка

Плюс дорівнює (result+=…) – чудова команда, яка допомагає додати нове значення до вже існуючого.

Останній рядок виводить увесь html-код зі змінної result у форму.

Додамо дуже скромні стилі для квитка, щоб обвести його в рамку:


#ticket {
  border: 5px solid  #2e6b99;
  border-radius: 5%;
}

3: Допишіть самостійно код, щоб вивести дату (date) в текст квитка

4: Додамо обробку типу вагона. Поки що у нас є тільки html-частина. Додамо скрипти:

let carType = document.querySelector('input[name="carType"]:checked').value;

Подумайте, в яку частину нашої функції цей код слушно додати і додайте його. Код зчитує значення обраного елемента з групи carType

Але це ще не все. Додамо ціни : для плацкарта найнижча ціна на квиток, купе трохи дорожче і люкс найдорожчий (значення можете придумати).

Для цього створіть змінну price зі значення 0. Потім додайте умову (замість смайлів допишіть те, чого не вистачає):

  if (carType == "economy") {
    price += 400
  } else if (🚅🚅🚅🚅🚅🚅) {
    🚂🚂🚂🚂🚂🚂
  } else {
    🚂🚂🚂🚂🚂
  }

Додайте показ ціни для квитка

5: Створіть checkbox “Постільна білизна”. Ось приклад для одного з них(другий самостійно):

<input type="checkbox" id="bedclothes" name="bedclothes">Постільна білизна

Зчитайте значення чекбоксу:

let bedclothes = document.getElementById("bedclothes").checked;

Додайте умову: якщо чекбокс вибраний (стоїть галочка), то в текст квитка додається фраза “З постільною білизною”, а ціна збільшується на 50 грн. Якщо не вибраний, то додаємо фразу “Без постільної білизни” і ціну не змінюємо.

6: Додайте чекбокс “Напій”. Додайте умову: якщо чекбокс вибраний (стоїть галочка), то в текст квитка додається фраза “У вартість включено напій”, а ціна збільшується на 20 грн. Якщо не вибраний, то додаємо фразу “Без напоїв” і ціну не змінюємо.

7: Давайте додамо іконку і назву нашої сторінки. Для цього в середину тега head додайте перший рядок і змініть текст в середині другого (смайл замінюємо на назву сайту):

<link rel="shortcut icon" type="image/x-icon" href="🚂🚂🚂🚂" />
 <title>🚂🚂🚂🚂</title>

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

домашка з програмування

Домашня робота

Після першого заняття зробіть тільки завдання 1,2. Level Up: зробіть після 2-го заняття (буде 10+10 балів за нього) .

1: Додайте змінні для номера вагона і місця. Запишіть в змінні якісь числа. Виведіть номер вагона і місця в тексті квитка.

2: Додайте рекламу в кінці квитка. Це може бути реклама будь-якої послуги чи продукту. Додайте текст і посилання на сайт рекламодавця (тег <a href>, а сайт знайдіть на просторах інтернету)

3: Додайте тип білета (Стандартний, Дитячий, Студент, Пенсіонер)

Додайте інформацію про тип в текст квитка

4: Зробіть різні значення ціни в залежності від типу білета :

Стандартний – не змінюємо ціну
Дитячий – ціна вдвічі дешевше
Студент – ціна дешевше на 100 грн
Пенсіонер – ціна множиться на 0.8

Допоможе такий приклад:

a=1000
a= a/4
//а буде 250

a=1000
a= a-50
//а буде 950

a=1000
a= a*0.2 
//а буде 200

5: Додайте чекбокс “Маю промокод на знижку”. Якщо він вибраний, в білеті має бути написано “Знижка за промокодом”.

домашка з програмування

Level Up

1: Додайте випадковий вибір місця для пасажира. Вам допоможе:

seat=Math.floor(Math.random() * maxSeats);

Де maxSeats – це змінна, яка означає кількість місць у вагоні.
Для плацкарту – 54 місця, для купе – 36 місць, для люксу -18 місць.

Виведіть на екран випадкове місце, яке згенерувала ваша програма.

2: Додайте напис “Дизайн квитка” і три радіобатони: “Звичайний”, “Новорічний”, “Дитячий”. В залежності від того, який з дизайнів обрано, змініть ТРИ css властивості для кожного виду дизайну (в прикладі колір фону):

 document.getElementById("ticket").style.backgroundColor = "blue";

Зауважте, що коли властивість змінюється за умовою, то цей код знаходиться в файлі скриптів, а не стилів. Приклад:

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

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