JavaScript: Conditional structures

name: portada
layout: true
class: portada-slide, middle, right
---

# JavaScript: Conditional structures
## Markup languages

.footnote[Joan Puigcerver Ibáñez ([j.puigcerveribanez@edu.gva.es](mailto:j.puigcerveribanez@edu.gva.es))]

---
layout: true
class: regular-slide
.right[.logo[![logoMislata](/itb/images/logo_mislata.png)]]

---
# Introduction
- Make a website that:
    1. A user introduces two numbers and shows the maximum value.
    1. A user introduces his age and shows __You're an adult__ if your age is equal or higher than 18.

.center[## We need conditionals!]

---
# Conditional structures
Used to create different execution paths.

1. A user introduces two numbers and shows the maximum value.

<div class="mermaid fullwidth" style="width:100%;">
graph LR
    readA[Read A and B] --> if{A > B}
    if-->|true|resA[maximum = A]
    if-->|false|resB[maximum = B]
    resA-->print[Show maximum]
    resB-->print
</div>

---
# Conditional structures
```
let number1 = $("#input-number1").val();
let number2 = $("#input-number2").val();
let maximum = 0;
if(number1 > number2) {
    maximum = number1;
} else {
    maximum = number2;
}
$("#result").text(maximum);
```

---
# Conditional structures
Used to create different execution paths.

2. A user introduces his age and shows __You're an adult__ if your age is equal or higher than 18.

<div class="mermaid fullwidth" style="width:100%;">
graph LR
    readA[Read age] --> if{age >= 18}
    if-->|false|End
    if-->|true|resA[Show 'You're an adult']
    resA-->End
</div>

---
# Conditional structures
```
let age = $("input-age").val();
if(age >= 18) {
    $("#result").text("You're an adult");
}
```

---
# If
```
	if(condition){
		// Only executes
		// if condition is true
	}
	// Next instructions
```

---
# If Else
```
	if(condition){
		// Only executes
		// if condition is true
	} else {
        // Only executes if previous
        // conditions are false
	}
	// Next instructions
```

---
# If ElseIf Else
```
	if(condition1){
		// Only executes
		// if condition1 is true
	} else if(condition2) {
		// Only executes
        // if condition1 is false
        // and condition2 is true
	} else {
        // Only executes if previous
        // conditions are false
	}
	// Next instructions
```

---
# Nested If

```
	if(condition1){
		// Only executes
		// if condition1 is true
        if(condition2){
            // Only executes
            // if condition1 is true
            // and condition2 is true
        } else {
            // Only executes
            // if condition1 is true
            // and condition2 is false
        }
	} else {
        // Only executes
        // if condition1 is false
	}
	// Next instructions
```