31. Приложение на условни конструкции (If/Else) - упражнение

 

Теоретични материали

Презентация 1

Условни конструкции. Булев тип данни

Булев тип данни в JavaScript

Булевите данни (Boolean) са тип данни, който може да има само две възможни стойности: true (истина) или false (невярно). Те се използват за представяне на логически условия в JavaScript.

Създаване на булеви променливи:

Булевите променливи се декларират, както и другите типове данни, с ключовата дума let или const. При деклариране не е задължително да се задава стойност.

Пример:

let isLoggedIn = true;

const isFinished = false;

Оператори за сравнение:

За сравняване на булеви стойности се използват следните оператори:

==: Равенство (сравнява стойностите)

===: Строго равенство (сравнява стойностите и типовете)

!=: Неравно

!==: Строго неравенство

Пример:

console.log(true == "true"); // true

console.log(true === "true"); // false

console.log(false != false); // false

console.log(false !== 0); // true

Логически оператори:

За комбиниране на булеви стойности се използват следните оператори:

&&: Логическо "и" (и двете стойности да са true)

||: Логическо "или" (поне една от стойностите да е true)

!: Логическо отрицание (обръща стойността на true/false)

Пример:

console.log(true && true); // true

console.log(true || false); // true

console.log(!false); // true

 

 

Условни конструкции в JavaScript

Условните конструкции са основен градивен елемент в JavaScript, използван за изпълнение на код в зависимост от различни условия. Те позволяват на програмните ни решения да реагират на различни сценарии и да вземат решения въз основа на зададени параметри.

Основни условни конструкции:

  • if: Използва се за изпълнение на код, когато дадено условие е изпълнено.

if (условие) {

// код, който се изпълнява, когато условието е вярно

}

 

  • if-else: Използва се за изпълнение на различен код в зависимост от това дали дадено условие е изпълнено или не.

if (условие) {

// код, който се изпълнява, когато условието е вярно

}

else {

// код, който се изпълнява, когато условието е невярно

}

 

  • else if: Използва се за проверка на множество условия в последователност.

if (условие1) {

// код, който се изпълнява, когато условие1 е вярно

}

else if (условие2) {

// код, който се изпълнява, когато условие2 е вярно

}

else {

// код, който се изпълнява, когато нито едно от условията не е вярно

}

Ternary operator:

Кратка форма за запис на условни конструкции. Използва се за проверка на едно условие.

Пример:

const isAdult = age >= 18 ? "Пълнолетен" : "Непълнолетен";

console.log(isAdult);

 

Функции с числа с плаваща запетая в JavaScript:

Math.floor(): закръгля числото надолу до най-близкото цяло число

Math.ceil(): закръгля числото нагоре до най-близкото цяло число

Math.round(): закръгля числото до най-близкото цяло число

Math.abs(): връща абсолютната стойност на числото

Math.sqrt(): връща квадратния корен на числото

 

 

Задачи за упражнение

Отворете дадената среда за програмиране като кликнете на бутона и изпълнете задачите:
Задача 1:  Проверка за изпълнение на 2 условия 

Създайте програма за 'фейс контрол' в JavaScript, която проверява дали посетителя е над 18 г. и дали има билет, преди да го допусне да влезе в клуба.

Ще трябва да създадете 2 променливи - една за възрастта, една за билета.

Можете да използвате prompt() или confirm(), за да попитате за възраст или за билет.

confirm() връща true (ако натиснат OK) или false (ако натиснат Cancel)

Примерна структура:

if (условие1){
  if (условие2){
    alert("Добре дошъл в клуба! 🎵");
}else{
  alert("Годините са добре, но нямаш билет. Купи си от касата!");
  }
}else{
    alert("Съжалявам, малък си. Не мога да те пусна в клуба!");
}

 

Задача 2:  Интерактивна графика

Създайте програма, която чертае фигура с определен цвят, а при кликане с мишката - цвета да се променя.

За квадрат можете да ползвате square(100, 100, 200);

За кръг можете да ползвате circle(200, 200, 100);

За реакция на кликането mouseIsPressed === true

Примерна структура:

 

if (mouseIsPressed === true) {
    fill(единия цвят);
  } else {
    fill(другия цвят);
  }

  //тук пишете кода за фигурата, която ще ползвате;