You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

377 lines
9.9 KiB

5 years ago
<div align="center">
4 years ago
<h1> 30 Days Of JavaScript: Conditionals</h1>
5 years ago
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
</a>
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
</a>
5 years ago
<sub>Author:
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
5 years ago
<small> January, 2020</small>
</sub>
</div>
5 years ago
4 years ago
[<< Day 3](../03_Day_Booleans_operators_date/03_booleans_operators_date.md) | [Day 5 >>](../05_Day_Arrays/05_day_arrays.md)
5 years ago
5 years ago
![Thirty Days Of JavaScript](../images/banners/day_1_4.png)
5 years ago
- [📔 Day 4](#-day-4)
5 years ago
- [Conditionals](#conditionals)
4 years ago
- [If](#if)
- [If Else](#if-else)
- [If Else if Else](#if-else-if-else)
5 years ago
- [Switch](#switch)
- [Ternary Operators](#ternary-operators)
- [💻 Exercises](#-exercises)
5 years ago
- [Exercises: Level 1](#exercises-level-1)
- [Exercises: Level 2](#exercises-level-2)
- [Exercises: Level 3](#exercises-level-3)
5 years ago
# 📔 Day 4
## Conditionals
4 years ago
Conditional statements are used for make decisions based on different conditions.
5 years ago
By default , statements in JavaScript script executed sequentially from top to bottom. If the processing logic require so, the sequential flow of execution can be altered in two ways:
- Conditional execution: a block of one or more statements will be executed if a certain expression is true
4 years ago
- Repetitive execution: a block of one or more statements will be repetitively executed as long as a certain expression is true. In this section, we will cover _if_, _else_ , _else if_ statements. The comparison and logical operators we learned in the previous sections will be useful in here.
5 years ago
Conditions can be implementing using the following ways:
- if
- if else
- if else if else
- switch
- ternary operator
4 years ago
### If
5 years ago
4 years ago
In JavaScript and other programming languages the key word _if_ is to used check if a condition is true and to execute the block code. To create an if condition, we need _if_ keyword, condition inside a parenthesis and block of code inside a curly bracket({}).
5 years ago
```js
// syntax
if (condition) {
4 years ago
//this part of code runs for truthy condition
5 years ago
}
```
**Example:**
```js
let num = 3
if (num > 0) {
console.log(`${num} is a positive number`)
}
// 3 is a positive number
```
4 years ago
As you can see in the condition example above, 3 is greater than 0, so it is a positive number. The condition was true and the block of code was executed. However, if the condition is false, we won't see any results.
5 years ago
```js
let isRaining = true
if (isRaining) {
console.log('Remember to take your rain coat.')
}
```
4 years ago
The same goes for the second condition, if isRaining is false the if block will not be executed and we do not see any output. In order to see the result of a falsy condition, we should have another block, which is going to be _else_.
5 years ago
4 years ago
### If Else
5 years ago
If condition is true the first block will be executed, if not the else condition will be executed.
```js
// syntax
if (condition) {
4 years ago
// this part of code runs for truthy condition
5 years ago
} else {
4 years ago
// this part of code runs for false condition
5 years ago
}
```
```js
let num = 3
if (num > 0) {
console.log(`${num} is a positive number`)
} else {
console.log(`${num} is a negative number`)
}
// 3 is a positive number
num = -3
if (num > 0) {
console.log(`${num} is a positive number`)
} else {
console.log(`${num} is a negative number`)
}
// -3 is a negative number
```
```js
let isRaining = true
if (isRaining) {
console.log('You need a rain coat.')
} else {
console.log('No need for a rain coat.')
}
// You need a rain coat.
isRaining = false
if (isRaining) {
console.log('You need a rain coat.')
} else {
console.log('No need for a rain coat.')
}
// No need for a rain coat.
```
4 years ago
The last condition is false, therefore the else block was executed. What if we have more than two conditions? In that case, we would use *else if* conditions.
5 years ago
4 years ago
### If Else if Else
5 years ago
4 years ago
On our daily life, we make decisions on daily basis. We make decisions not by checking one or two conditions instead we make decisions based on multiple conditions. As similar to our daily life, programming is also full of conditions. We use *else if* when we have multiple conditions.
5 years ago
```js
// syntax
if (condition) {
// code
} else if (condition) {
// code
} else {
// code
}
```
**Example:**
```js
let a = 0
if (a > 0) {
console.log(`${a} is a positive number`)
5 years ago
} else if (a < 0) {
console.log(`${a} is a negative number`)
} else if (a == 0) {
console.log(`${a} is zero`)
5 years ago
} else {
console.log(`${a} is not a number`)
5 years ago
}
```
```js
// if else if else
let weather = 'sunny'
if (weather === 'rainy') {
console.log('You need a rain coat.')
} else if (weather === 'cloudy') {
console.log('It might be cold, you need a jacket.')
} else if (weather === 'sunny') {
console.log('Go out freely.')
} else {
console.log('No need for rain coat.')
}
```
### Switch
5 years ago
Switch is an alternative for **if else if else else**.
4 years ago
The switch statement starts with a *switch* keyword followed by a parenthesis and code block. Inside the code block we will have different cases. Case block runs if the value in the switch statement parenthesis matches with the case value. The break statement is to terminate execution so the code execution does not go down after the condition is satisfied. The default block runs if all the cases don't satisfy the condition.
5 years ago
```js
switch(caseValue){
case 1:
// code
break
case 2:
// code
break
case 3:
// code
default:
// code
}
```
5 years ago
```js
let weather = 'cloudy'
switch (weather) {
case 'rainy':
console.log('You need a rain coat.')
break
case 'cloudy':
console.log('It might be cold, you need a jacket.')
break
case 'sunny':
console.log('Go out freely.')
break
default:
console.log(' No need for rain coat.')
}
5 years ago
5 years ago
// Switch More Examples
5 years ago
let dayUserInput = prompt('What day is today ?')
let day = dayUserInput.toLowerCase()
5 years ago
switch (day) {
case 'monday':
console.log('Today is Monday')
break
case 'tuesday':
console.log('Today is Tuesday')
break
case 'wednesday':
console.log('Today is Wednesday')
break
case 'thursday':
console.log('Today is Thursday')
break
case 'friday':
console.log('Today is Friday')
break
case 'saturday':
console.log('Today is Saturday')
break
case 'sunday':
console.log('Today is Sunday')
break
default:
console.log('It is not a week day.')
}
5 years ago
5 years ago
```
// Examples to use conditions in the cases
```js
let num = prompt('Enter number');
switch (true) {
case num > 0:
console.log('Number is positive');
break;
case num == 0:
console.log('Numbers is zero');
break;
case num < 0:
console.log('Number is negative');
break;
default:
console.log('Entered value was not a number');
}
```
5 years ago
### Ternary Operators
4 years ago
Another way to write conditionals is using ternary operators. We have covered this in other sections, but we should also mention it here.
5 years ago
```js
let isRaining = true
isRaining
? console.log('You need a rain coat.')
: console.log('No need for a rain coat.')
```
4 years ago
🌕 You are extraordinary and you have a remarkable potential. You have just completed day 4 challenges and you are four steps ahead to your way to greatness. Now do some exercises for your brain and muscle.
5 years ago
5 years ago
## 💻 Exercises
### Exercises: Level 1
5 years ago
4 years ago
1. Get user input using prompt(“Enter your age:”). If user is 18 or older , give feedback:'You are old enough to drive' but if not 18 give another feedback stating to wait for the number of years he neds to turn 18.
5 years ago
```sh
Enter your age: 30
You are old enough to drive.
Enter your age:15
You are left with 3 years to drive.
```
4 years ago
1. Compare the values of myAge and yourAge using if … else. Based on the comparison and log the result to console stating who is older (me or you). Use prompt(“Enter your age:”) to get the age as input.
5 years ago
```sh
Enter your age: 30
You are 5 years older than me.
```
5 years ago
4 years ago
1. If a is greater than b return 'a is greater than b' else 'a is less than b'. Try to implement it in to ways
5 years ago
- using if else
- ternary operator.
5 years ago
```js
let a = 4
let b = 3
```
```sh
4 is greater than 3
```
4 years ago
1. Even numbers are divisible by 2 and the remainder is zero. How do you check, if a number is even or not using JavaScript?
5 years ago
```sh
Enter a number: 2
2 is an even number
5 years ago
Enter a number: 9
5 years ago
9 is is an odd number.
```
5 years ago
### Exercises: Level 2
4 years ago
1. Write a code which can give grades to students according to theirs scores:
5 years ago
- 80-100, A
- 70-89, B
- 60-69, C
- 50-59, D
- 0-49, F
1. Check if the season is Autumn, Winter, Spring or Summer.
4 years ago
If the user input is :
5 years ago
- September, October or November, the season is Autumn.
- December, January or February, the season is Winter.
- March, April or May, the season is Spring
- June, July or August, the season is Summer
5 years ago
1. Check if a day is weekend day or a working day. Your script will take day as an input.
5 years ago
```sh
What is the day today? Saturday
Saturday is a weekend.
5 years ago
What is the day today? saturDaY
Saturday is a weekend.
5 years ago
What is the day today? Friday
Friday is a working day.
5 years ago
What is the day today? FrIDAy
Friday is a working day.
5 years ago
```
5 years ago
### Exercises: Level 3
1. Write a program which tells the number of days in a month.
5 years ago
```sh
Enter a month: January
5 years ago
January has 31 days.
Enter a month: JANUARY
5 years ago
January has 31 day
Enter a month: February
5 years ago
February has 28 days.
Enter a month: FEbruary
5 years ago
February has 28 days.
```
4 years ago
1. Write a program which tells the number of days in a month, now consider leap year.
5 years ago
🎉 CONGRATULATIONS ! 🎉
4 years ago
[<< Day 3](../03_Day_Booleans_operators_date/03_booleans_operators_date.md) | [Day 5 >>](../05_Day_Arrays/05_day_arrays.md)