07. Умови у JavaScript

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

Умови у JavaScript

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

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

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

Проте, це ще не останній варіант умови. Можна перевіряти одразу кілька варіантів. В наступному прикладі ми перевіряємо назви станцій і пишемо о котрій поїзд прибуває на станцію. Станцій може бути багато, тому додаткові перевірки записуються через 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>

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

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

Ставимо на умови у Javascript-у.

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

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

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

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: Додайте чекбокс “Маю промокод на знижку”. Якщо він вибраний, в білеті має бути написано “Знижка за промокодом”.

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

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

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

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

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

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

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