Merge pull request #1 from Asabeneh/master

New pull request
pull/911/head
Hammad Ul Hassan 2 years ago committed by GitHub
commit 838efcb870
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -1,18 +1,18 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>30DaysOfJavaScript</title>
<title>30DaysOfJavaScript</title>
</head>
<body>
<h1>30DaysOfJavaScript:03 Day</h1>
<h2>Introduction</h2>
<button onclick="alert('Welcome to 30DaysOfJavaScript!');">Click Me</button>
<script src="./helloworld.js"></script>
<script src="./introduction.js"></script>
<script src="./varaible.js"></script>
<script src="./main.js"></script>
<h1>30DaysOfJavaScript:03 Day</h1>
<h2>Introduction</h2>
<button onclick="alert('Welcome to 30DaysOfJavaScript!');">Click Me</button>
<script src="./helloworld.js"></script>
<script src="./introduction.js"></script>
<script src="./variable.js"></script>
<script src="./main.js"></script>
</body>

@ -19,30 +19,30 @@
![Thirty Days Of JavaScript](../images/banners/day_1_2.png)
- [📔 Day 2](#-day-2)
- [Data Types](#data-types)
- [Primitive Data Types](#primitive-data-types)
- [Non-Primitive Data Types](#non-primitive-data-types)
- [Numbers](#numbers)
- [Declaring Number Data Types](#declaring-number-data-types)
- [Math Object](#math-object)
- [Random Number Generator](#random-number-generator)
- [Strings](#strings)
- [String Concatenation](#string-concatenation)
- [Concatenating Using Addition Operator](#concatenating-using-addition-operator)
- [Long Literal Strings](#long-literal-strings)
- [Escape Sequences in Strings](#escape-sequences-in-strings)
- [Template Literals (Template Strings)](#template-literals-template-strings)
- [String Methods](#string-methods)
- [Checking Data Types and Casting](#checking-data-types-and-casting)
- [Checking Data Types](#checking-data-types)
- [Changing Data Type (Casting)](#changing-data-type-casting)
- [String to Int](#string-to-int)
- [String to Float](#string-to-float)
- [Float to Int](#float-to-int)
- [💻 Day 2: Exercises](#-day-2-exercises)
- [Exercise: Level 1](#exercise-level-1)
- [Exercise: Level 2](#exercise-level-2)
- [Exercises: Level 3](#exercises-level-3)
- [Data Types](#data-types)
- [Primitive Data Types](#primitive-data-types)
- [Non-Primitive Data Types](#non-primitive-data-types)
- [Numbers](#numbers)
- [Declaring Number Data Types](#declaring-number-data-types)
- [Math Object](#math-object)
- [Random Number Generator](#random-number-generator)
- [Strings](#strings)
- [String Concatenation](#string-concatenation)
- [Concatenating Using Addition Operator](#concatenating-using-addition-operator)
- [Long Literal Strings](#long-literal-strings)
- [Escape Sequences in Strings](#escape-sequences-in-strings)
- [Template Literals (Template Strings)](#template-literals-template-strings)
- [String Methods](#string-methods)
- [Checking Data Types and Casting](#checking-data-types-and-casting)
- [Checking Data Types](#checking-data-types)
- [Changing Data Type (Casting)](#changing-data-type-casting)
- [String to Int](#string-to-int)
- [String to Float](#string-to-float)
- [Float to Int](#float-to-int)
- [💻 Day 2: Exercises](#-day-2-exercises)
- [Exercise: Level 1](#exercise-level-1)
- [Exercise: Level 2](#exercise-level-2)
- [Exercises: Level 3](#exercises-level-3)
# 📔 Day 2
@ -62,12 +62,12 @@ Primitive data types in JavaScript include:
3. Booleans - true or false value
4. Null - empty value or no value
5. Undefined - a declared variable without a value
6. Symbol - A unique value that can be generated by Symbol constructor
Non-primitive data types in JavaScript includes:
1. Objects
2. Functions
3. Arrays
2. Arrays
Now, let us see what exactly primitive and non-primitive data types mean.
*Primitive* data types are immutable(non-modifiable) data types. Once a primitive data type is created we cannot modify it.
@ -231,6 +231,10 @@ console.log(Math.E) // 2.718
console.log(Math.log(2)) // 0.6931471805599453
console.log(Math.log(10)) // 2.302585092994046
// Returns the natural logarithm of 2 and 10 respectively
console.log(Math.LN2) // 0.6931471805599453
console.log(Math.LN10) // 2.302585092994046
// Trigonometry
Math.sin(0)
Math.sin(60)
@ -876,7 +880,7 @@ console.log(numFloat) // 9.81
let num = '9.81'
let numFloat = +num
console.log(numInt) // 9.81
console.log(numFloat) // 9.81
```
#### Float to Int

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>30DaysOfJavaScript</title>

@ -14,7 +14,7 @@ let pattern = /love/gi
console.log(string.match(pattern)) // ["love", "love", "love"]
// Let us extract numbers from text using regular expression. This is not regular expression section, no panic.
let txt = 'In 2019, I run 30 Days of Pyhton. Now, in 2020 I super exited to start this challenge'
let txt = 'In 2019, I run 30 Days of Python. Now, in 2020 I super exited to start this challenge'
let regEx = /\d/g // d with escape character means d not a normal d instead acts a digit
// + means one or more digit numbers,
// if there is g after that it means global, search everywhere.

@ -1,5 +1,5 @@
// split(): The split method splits a string at a specified place.
let string = '30 Days Of JavaScipt'
let string = '30 Days Of JavaScript'
console.log(string.split()) // ["30 Days Of JavaScript"]
console.log(string.split(' ')) // ["30", "Days", "Of", "JavaScript"]
let firstName = 'Asabeneh'

@ -18,38 +18,38 @@
![Thirty Days Of JavaScript](../images/banners/day_1_3.png)
- [📔 Day 3](#-day-3)
- [Booleans](#booleans)
- [Truthy values](#truthy-values)
- [Falsy values](#falsy-values)
- [Undefined](#undefined)
- [Null](#null)
- [Operators](#operators)
- [Assignment operators](#assignment-operators)
- [Arithmetic Operators](#arithmetic-operators)
- [Comparison Operators](#comparison-operators)
- [Logical Operators](#logical-operators)
- [Increment Operator](#increment-operator)
- [Decrement Operator](#decrement-operator)
- [Ternary Operators](#ternary-operators)
- [Operator Precendence](#operator-precendence)
- [Window Methods](#window-methods)
- [Window alert() method](#window-alert-method)
- [Window prompt() method](#window-prompt-method)
- [Window confirm() method](#window-confirm-method)
- [Date Object](#date-object)
- [Creating a time object](#creating-a-time-object)
- [Getting full year](#getting-full-year)
- [Getting month](#getting-month)
- [Getting date](#getting-date)
- [Getting day](#getting-day)
- [Getting hours](#getting-hours)
- [Getting minutes](#getting-minutes)
- [Getting seconds](#getting-seconds)
- [Getting time](#getting-time)
- [💻 Day 3: Exercises](#-day-3-exercises)
- [Exercises: Level 1](#exercises-level-1)
- [Exercises: Level 2](#exercises-level-2)
- [Exercises: Level 3](#exercises-level-3)
- [Booleans](#booleans)
- [Truthy values](#truthy-values)
- [Falsy values](#falsy-values)
- [Undefined](#undefined)
- [Null](#null)
- [Operators](#operators)
- [Assignment operators](#assignment-operators)
- [Arithmetic Operators](#arithmetic-operators)
- [Comparison Operators](#comparison-operators)
- [Logical Operators](#logical-operators)
- [Increment Operator](#increment-operator)
- [Decrement Operator](#decrement-operator)
- [Ternary Operators](#ternary-operators)
- [Operator Precedence](#operator-precedence)
- [Window Methods](#window-methods)
- [Window alert() method](#window-alert-method)
- [Window prompt() method](#window-prompt-method)
- [Window confirm() method](#window-confirm-method)
- [Date Object](#date-object)
- [Creating a time object](#creating-a-time-object)
- [Getting full year](#getting-full-year)
- [Getting month](#getting-month)
- [Getting date](#getting-date)
- [Getting day](#getting-day)
- [Getting hours](#getting-hours)
- [Getting minutes](#getting-minutes)
- [Getting seconds](#getting-seconds)
- [Getting time](#getting-time)
- [💻 Day 3: Exercises](#-day-3-exercises)
- [Exercises: Level 1](#exercises-level-1)
- [Exercises: Level 2](#exercises-level-2)
- [Exercises: Level 3](#exercises-level-3)
# 📔 Day 3
@ -73,7 +73,7 @@ We agreed that boolean values are either true or false.
### Truthy values
- All numbers(positive and negative) are truthy except zero
- All strings are truthy
- All strings are truthy except an empty string ('')
- The boolean true
### Falsy values
@ -218,7 +218,7 @@ console.log('python'.length > 'dragon'.length) // false
```
Try to understand the above comparisons with some logic. Remembering without any logic might be difficult.
JavaScript is some how a wired kind of programming language. JavaScript code run and give you a result but unless you are good at it may not be the desired result.
JavaScript is somehow a wired kind of programming language. JavaScript code run and give you a result but unless you are good at it may not be the desired result.
As rule of thumb, if a value is not true with == it will not be equal with ===. Using === is safer than using ==. The following [link](https://dorey.github.io/JavaScript-Equality-Table/) has an exhaustive list of comparison of data types.
@ -254,7 +254,7 @@ let isMarried = !false // true
### Increment Operator
In JavaScrip we use the increment operator to increase a value stored in a variable. The increment could be pre or post increment. Let us see each of them:
In JavaScript we use the increment operator to increase a value stored in a variable. The increment could be pre or post increment. Let us see each of them:
1. Pre-increment
@ -276,7 +276,7 @@ We use most of the time post-increment. At least you should remember how to use
### Decrement Operator
In JavaScrip we use the decrement operator to decrease a value stored in a variable. The decrement could be pre or post decrement. Let us see each of them:
In JavaScript we use the decrement operator to decrease a value stored in a variable. The decrement could be pre or post decrement. Let us see each of them:
1. Pre-decrement
@ -333,9 +333,9 @@ number > 0
-5 is a negative number
```
### Operator Precendence
### Operator Precedence
I would like to recommend you to read about operator precendence from this [link](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence)
I would like to recommend you to read about operator precedence from this [link](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence)
## Window Methods
@ -382,7 +382,7 @@ These are not all the window methods we will have a separate section to go deep
## Date Object
Time is an important thing. We like to know the time a certain activity or event. In JavaScript current time and date is created using JavaScript Date Object. The object we create using Date object provides many methods to work with date and time.The methods we use to get date and time information from a date object values are started with a word _get_ because it provide the information.
_getFullYear(), getMonths(), getDate(), getDay(), getHours(), getMinutes, getSeconds(), getMilliseconds(), getTime(), getDay()_
_getFullYear(), getMonth(), getDate(), getDay(), getHours(), getMinutes, getSeconds(), getMilliseconds(), getTime(), getDay()_
![Date time Object](../images/date_time_object.png)
@ -553,7 +553,7 @@ console.log(`${date}/${month}/${year} ${hours}:${minutes}`) // 4/1/2020 0:56
```sh
Enter base: 20
Enter height: 10
The area of the triangle is 50
The area of the triangle is 100
```
1. Write a script that prompt the user to enter side a, side b, and side c of the triangle and and calculate the perimeter of triangle (perimeter = a + b + c)
@ -568,9 +568,9 @@ console.log(`${date}/${month}/${year} ${hours}:${minutes}`) // 4/1/2020 0:56
1. Get length and width using prompt and calculate an area of rectangle (area = length x width and the perimeter of rectangle (perimeter = 2 x (length + width))
1. Get radius using prompt and calculate the area of a circle (area = pi x r x r) and circumference of a circle(c = 2 x pi x r) where pi = 3.14.
1. Calculate the slope, x-intercept and y-intercept of y = 2x -2
1. Slope is (m = y2-y1/x2-x1). Find the slope between point (2, 2) and point(6,10)
1. Slope is m = (y<sub>2</sub>-y<sub>1</sub>)/(x<sub>2</sub>-x<sub>1</sub>). Find the slope between point (2, 2) and point(6,10)
1. Compare the slope of above two questions.
1. Calculate the value of y (y = x^2 + 6x + 9). Try to use different x values and figure out at what x value y is 0.
1. Calculate the value of y (y = x<sup>2</sup> + 6x + 9). Try to use different x values and figure out at what x value y is 0.
1. Writ a script that prompt a user to enter hours and rate per hour. Calculate pay of the person?
```sh
@ -616,7 +616,7 @@ console.log(`${date}/${month}/${year} ${hours}:${minutes}`) // 4/1/2020 0:56
1. Write a script that prompt the user to enter number of years. Calculate the number of seconds a person can live. Assume some one lives just hundred years
```sh
Enter number of yours you live: 100
Enter number of years you live: 100
You lived 3153600000 seconds.
```

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>30DaysOfJavaScript: 03 Day</title>

@ -18,16 +18,16 @@
![Thirty Days Of JavaScript](../images/banners/day_1_4.png)
- [📔 Day 4](#-day-4)
- [Conditionals](#conditionals)
- [If](#if)
- [If Else](#if-else)
- [If Else if Else](#if-else-if-else)
- [Switch](#switch)
- [Ternary Operators](#ternary-operators)
- [💻 Exercises](#-exercises)
- [Exercises: Level 1](#exercises-level-1)
- [Exercises: Level 2](#exercises-level-2)
- [Exercises: Level 3](#exercises-level-3)
- [Conditionals](#conditionals)
- [If](#if)
- [If Else](#if-else)
- [If Else if Else](#if--else-if-else)
- [Switch](#switch)
- [Ternary Operators](#ternary-operators)
- [💻 Exercises](#-exercises)
- [Exercises: Level 1](#exercises-level-1)
- [Exercises: Level 2](#exercises-level-2)
- [Exercises: Level 3](#exercises-level-3)
# 📔 Day 4
@ -189,7 +189,8 @@ switch(caseValue){
// code
break
case 3:
// code
// code
break
default:
// code
}
@ -279,7 +280,7 @@ isRaining
### Exercises: Level 1
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.
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 needs to turn 18.
```sh
Enter your age: 30

@ -1,14 +1,14 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>30DaysOfJavaScript</title>
<title>30DaysOfJavaScript</title>
</head>
<body>
<!-- import your scripts here -->
<script src="./scripts/main.js"></script>
<!-- import your scripts here -->
<script src="./scripts/main.js"></script>
</body>

@ -13,40 +13,40 @@
</sub>
</div>
[<< Day 4](../04_Day_Conditionals/04_day_Conditionals.md) | [Day 6 >>](../06_Day_Loops/06_day_loops.md)
[<< Day 4](../04_Day_Conditionals/04_day_conditionals.md) | [Day 6 >>](../06_Day_Loops/06_day_loops.md)
![Day 5](../images/banners/day_1_5.png)
- [📔 Day 5](#-day-5)
- [Arrays](#arrays)
- [How to create an empty array](#how-to-create-an-empty-array)
- [How to create an array with values](#how-to-create-an-array-with-values)
- [Creating an array using split](#creating-an-array-using-split)
- [Accessing array items using index](#accessing-array-items-using-index)
- [Modifying array element](#modifying-array-element)
- [Methods to manipulate array](#methods-to-manipulate-array)
- [Array Constructor](#array-constructor)
- [Creating static values with fill](#creating-static-values-with-fill)
- [Concatenating array using concat](#concatenating-array-using-concat)
- [Getting array length](#getting-array-length)
- [Getting index an element in arr array](#getting-index-an-element-in-arr-array)
- [Getting last index of an element in array](#getting-last-index-of-an-element-in-array)
- [Checking array](#checking-array)
- [Converting array to string](#converting-array-to-string)
- [Joining array elements](#joining-array-elements)
- [Slice array elements](#slice-array-elements)
- [Splice method in array](#splice-method-in-array)
- [Adding item to an array using push](#adding-item-to-an-array-using-push)
- [Removing the end element using pop](#removing-the-end-element-using-pop)
- [Removing an element from the beginning](#removing-an-element-from-the-beginning)
- [Add an element from the beginning](#add-an-element-from-the-beginning)
- [Reversing array order](#reversing-array-order)
- [Sorting elements in array](#sorting-elements-in-array)
- [Array of arrays](#array-of-arrays)
- [💻 Exercise](#-exercise)
- [Exercise: Level 1](#exercise-level-1)
- [Exercise: Level 2](#exercise-level-2)
- [Exercise: Level 3](#exercise-level-3)
- [Arrays](#arrays)
- [How to create an empty array](#how-to-create-an-empty-array)
- [How to create an array with values](#how-to-create-an-array-with-values)
- [Creating an array using split](#creating-an-array-using-split)
- [Accessing array items using index](#accessing-array-items-using-index)
- [Modifying array element](#modifying-array-element)
- [Methods to manipulate array](#methods-to-manipulate-array)
- [Array Constructor](#array-constructor)
- [Creating static values with fill](#creating-static-values-with-fill)
- [Concatenating array using concat](#concatenating-array-using-concat)
- [Getting array length](#getting-array-length)
- [Getting index an element in arr array](#getting-index-an-element-in-arr-array)
- [Getting last index of an element in array](#getting-last-index-of-an-element-in-array)
- [Checking array](#checking-array)
- [Converting array to string](#converting-array-to-string)
- [Joining array elements](#joining-array-elements)
- [Slice array elements](#slice-array-elements)
- [Splice method in array](#splice-method-in-array)
- [Adding item to an array using push](#adding-item-to-an-array-using-push)
- [Removing the end element using pop](#removing-the-end-element-using-pop)
- [Removing an element from the beginning](#removing-an-element-from-the-beginning)
- [Add an element from the beginning](#add-an-element-from-the-beginning)
- [Reversing array order](#reversing-array-order)
- [Sorting elements in array](#sorting-elements-in-array)
- [Array of arrays](#array-of-arrays)
- [💻 Exercise](#-exercise)
- [Exercise: Level 1](#exercise-level-1)
- [Exercise: Level 2](#exercise-level-2)
- [Exercise: Level 3](#exercise-level-3)
# 📔 Day 5
@ -59,7 +59,7 @@ An array is a collection of different data types which are ordered and changeabl
### How to create an empty array
In JavaScript, we can create an array in different ways. Let us see different ways to create an array.
It is very common to use *const* instead of *let* to declare an array variable. If you ar using const it means you do not use that variable name again.
It is very common to use _const_ instead of _let_ to declare an array variable. If you ar using const it means you do not use that variable name again.
- Using Array constructor
@ -390,22 +390,22 @@ Check an element if it exist in an array.
const fruits = ['banana', 'orange', 'mango', 'lemon']
let index = fruits.indexOf('banana') // 0
if(index != -1){
console.log('This fruit does exist in the array')
if(index === -1){
console.log('This fruit does not exist in the array')
} else {
console.log('This fruit does not exist in the array')
console.log('This fruit does exist in the array')
}
// This fruit does exist in the array
// we can use also ternary here
index != -1 ? console.log('This fruit does exist in the array'): console.log('This fruit does not exist in the array')
index === -1 ? console.log('This fruit does not exist in the array'): console.log('This fruit does exist in the array')
// let us check if a avocado exist in the array
// let us check if an avocado exist in the array
let indexOfAvocado = fruits.indexOf('avocado') // -1, if the element not found index is -1
if(indexOfAvocado!= -1){
console.log('This fruit does exist in the array')
if(indexOfAvocado === -1){
console.log('This fruit does not exist in the array')
} else {
console.log('This fruit does not exist in the array')
console.log('This fruit does exist in the array')
}
// This fruit does not exist in the array
```
@ -521,18 +521,20 @@ Splice: It takes three parameters:Starting position, number of times to be remov
```js
const numbers = [1, 2, 3, 4, 5]
console.log(numbers.splice()) // -> remove all items
numbers.splice()
console.log(numbers) // -> remove all items
```
```js
const numbers = [1, 2, 3, 4, 5]
console.log(numbers.splice(0,1)) // remove the first item
numbers.splice(0,1)
console.log(numbers) // remove the first item
```
```js
const numbers = [1, 2, 3, 4, 5, 6];
const numbers = [1, 2, 3, 4, 5, 6]
numbers.splice(3, 3, 7, 8, 9)
console.log(numbers.splice(3, 3, 7, 8, 9)) // -> [1, 2, 3, 7, 8, 9] //it removes three item and replace three items
```
@ -544,7 +546,6 @@ Push: adding item in the end. To add item to the end of an existing array we use
// syntax
const arr = ['item1', 'item2','item3']
arr.push('new item')
console.log(arr)
// ['item1', 'item2','item3','new item']
```
@ -552,7 +553,6 @@ console.log(arr)
```js
const numbers = [1, 2, 3, 4, 5]
numbers.push(6)
console.log(numbers) // -> [1,2,3,4,5,6]
numbers.pop() // -> remove one item from the end
@ -562,7 +562,6 @@ console.log(numbers) // -> [1,2,3,4,5]
```js
let fruits = ['banana', 'orange', 'mango', 'lemon']
fruits.push('apple')
console.log(fruits) // ['banana', 'orange', 'mango', 'lemon', 'apple']
fruits.push('lime')
@ -576,7 +575,6 @@ pop: Removing item in the end.
```js
const numbers = [1, 2, 3, 4, 5]
numbers.pop() // -> remove one item from the end
console.log(numbers) // -> [1,2,3,4]
```
@ -587,7 +585,6 @@ shift: Removing one array element in the beginning of the array.
```js
const numbers = [1, 2, 3, 4, 5]
numbers.shift() // -> remove one item from the beginning
console.log(numbers) // -> [2,3,4,5]
```
@ -598,7 +595,6 @@ unshift: Adding array element in the beginning of the array.
```js
const numbers = [1, 2, 3, 4, 5]
numbers.unshift(0) // -> add one item from the beginning
console.log(numbers) // -> [0,1,2,3,4,5]
```
@ -609,7 +605,6 @@ reverse: reverse the order of an array.
```js
const numbers = [1, 2, 3, 4, 5]
numbers.reverse() // -> reverse array order
console.log(numbers) // [5, 4, 3, 2, 1]
numbers.reverse()
@ -769,7 +764,7 @@ const webTechs = [
- Find the median age(one middle item or two middle items divided by two)
- Find the average age(all items divided by number of items)
- Find the range of the ages(max minus min)
- Compare the value of (min - average) and (max - average), use *abs()* method
- Compare the value of (min - average) and (max - average), use _abs()_ method
1.Slice the first ten countries from the [countries array](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js)
1. Find the middle country(ies) in the [countries array](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js)
2. Divide the countries array into two equal arrays if it is even. If countries array is not even , one more country for the first half.

@ -1,16 +1,16 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:05 Day </title>
<title>30DaysOfJavaScript:05 Day </title>
</head>
<body>
<h1>30DaysOfJavaScript:05 Day</h1>
<h2>Arrays</h2>
<script src="./data/countries.js"></script>
<script src="./scripts/main.js"></script>
<h1>30DaysOfJavaScript:05 Day</h1>
<h2>Arrays</h2>
<script src="./data/countries.js"></script>
<script src="./scripts/main.js"></script>
</body>

@ -18,17 +18,17 @@
![Day 5](../images/banners/day_1_6.png)
- [📔 Day 6](#-day-6)
- [Loops](#loops)
- [for Loop](#for-loop)
- [while loop](#while-loop)
- [do while loop](#do-while-loop)
- [for of loop](#for-of-loop)
- [break](#break)
- [continue](#continue)
- [💻 Exercises:Day 6](#-exercisesday-6)
- [Exercises: Level 1](#exercises-level-1)
- [Exercises: Level 2](#exercises-level-2)
- [Exercises: Level 3](#exercises-level-3)
- [Loops](#loops)
- [for Loop](#for-loop)
- [while loop](#while-loop)
- [do while loop](#do-while-loop)
- [for of loop](#for-of-loop)
- [break](#break)
- [continue](#continue)
- [💻 Exercises:Day 6](#-exercisesday-6)
- [Exercises: Level 1](#exercises-level-1)
- [Exercises: Level 2](#exercises-level-2)
- [Exercises: Level 3](#exercises-level-3)
# 📔 Day 6
@ -108,7 +108,7 @@ const numbers = [1, 2, 3, 4, 5]
const newArr = []
let sum = 0
for(let i = 0; i < numbers.length; i++){
newArr.push(i * i)
newArr.push( numbers[i] ** 2)
}
@ -178,7 +178,9 @@ for (const num of numbers) {
// adding all the numbers in the array
let sum = 0
for (const num of numbers) {
sum += sum + num // can be also shorten like this, sum += num
sum = sum + num
// can be also shorten like this, sum += num
// after this we will use the shorter synthax(+=, -=, *=, /= etc)
}
console.log(sum) // 15
@ -406,6 +408,7 @@ for(let i = 0; i <= 5; i++){
['Germany', 'GER', 7],
['Hungary', 'HUN', 7],
['Ireland', 'IRE', 7],
['Iceland', 'ICE', 7],
['Japan', 'JAP', 5],
['Kenya', 'KEN', 5]
]
@ -414,7 +417,7 @@ for(let i = 0; i <= 5; i++){
2. In above countries array, check if there is a country or countries containing the word 'land'. If there are countries containing 'land', print it as array. If there is no country containing the word 'land', print 'All these countries are without land'.
```sh
['Finland', 'Iceland']
['Finland','Ireland', 'Iceland']
```
3. In above countries array, check if there is a country or countries end with a substring 'ia'. If there are countries end with, print it as array. If there is no country containing the word 'ai', print 'These are countries ends without ia'.

@ -1,16 +1,16 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:06 Day </title>
<title>30DaysOfJavaScript:06 Day </title>
</head>
<body>
<h1>30DaysOfJavaScript:06 Day</h1>
<h2>Loops</h2>
<script src="./data/countries.js"></script>
<script src="./scripts/main.js"></script>
<h1>30DaysOfJavaScript:06 Day</h1>
<h2>Loops</h2>
<script src="./data/countries.js"></script>
<script src="./scripts/main.js"></script>
</body>

@ -18,26 +18,26 @@
![Thirty Days Of JavaScript](../images/banners/day_1_7.png)
- [📔 Day 7](#-day-7)
- [Functions](#functions)
- [Function Declaration](#function-declaration)
- [Function without a parameter and return](#function-without-a-parameter-and-return)
- [Function returning value](#function-returning-value)
- [Function with a parameter](#function-with-a-parameter)
- [Function with two parameters](#function-with-two-parameters)
- [Function with many parameters](#function-with-many-parameters)
- [Function with unlimited number of parameters](#function-with-unlimited-number-of-parameters)
- [Unlimited number of parameters in regular function](#unlimited-number-of-parameters-in-regular-function)
- [Unlimited number of parameters in arrow function](#unlimited-number-of-parameters-in-arrow-function)
- [Anonymous Function](#anonymous-function)
- [Expression Function](#expression-function)
- [Self Invoking Functions](#self-invoking-functions)
- [Arrow Function](#arrow-function)
- [Function with default parameters](#function-with-default-parameters)
- [Function declaration versus Arrow function](#function-declaration-versus-arrow-function)
- [💻 Exercises](#-exercises)
- [Exercises: Level 1](#exercises-level-1)
- [Exercises: Level 2](#exercises-level-2)
- [Exercises: Level 3](#exercises-level-3)
- [Functions](#functions)
- [Function Declaration](#function-declaration)
- [Function without a parameter and return](#function-without-a-parameter-and-return)
- [Function returning value](#function-returning-value)
- [Function with a parameter](#function-with-a-parameter)
- [Function with two parameters](#function-with-two-parameters)
- [Function with many parameters](#function-with-many-parameters)
- [Function with unlimited number of parameters](#function-with-unlimited-number-of-parameters)
- [Unlimited number of parameters in regular function](#unlimited-number-of-parameters-in-regular-function)
- [Unlimited number of parameters in arrow function](#unlimited-number-of-parameters-in-arrow-function)
- [Anonymous Function](#anonymous-function)
- [Expression Function](#expression-function)
- [Self Invoking Functions](#self-invoking-functions)
- [Arrow Function](#arrow-function)
- [Function with default parameters](#function-with-default-parameters)
- [Function declaration versus Arrow function](#function-declaration-versus-arrow-function)
- [💻 Exercises](#-exercises)
- [Exercises: Level 1](#exercises-level-1)
- [Exercises: Level 2](#exercises-level-2)
- [Exercises: Level 3](#exercises-level-3)
# 📔 Day 7
@ -239,7 +239,7 @@ function sumAllNums() {
console.log(arguments)
}
sumAllNums(1, 2, 3, 4))
sumAllNums(1, 2, 3, 4)
// Arguments(4) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]
```
@ -269,11 +269,11 @@ console.log(sumAllNums(15, 20, 30, 25, 10, 33, 40)) // 173
const sumAllNums = (...args) => {
// console.log(arguments), arguments object not found in arrow function
// instead we use an a parameter followed by spread operator
// instead we use a parameter followed by spread operator (...)
console.log(args)
}
sumAllNums(1, 2, 3, 4))
sumAllNums(1, 2, 3, 4)
// [1, 2, 3, 4]
```
@ -502,10 +502,12 @@ console.log('Weight of an object in Newton: ', weightOfObject(100, 1.62)) // gra
### Function declaration versus Arrow function
It ill be covered in other time
It Will be covered in other section.
🌕 You are a rising star, now you knew function . Now, you are super charged with the power of functions. You have just completed day 7 challenges and you are 7 steps a head in to your way to greatness. Now do some exercises for your brain and for your muscle.
## 💻 Exercises
### Exercises: Level 1
@ -521,7 +523,7 @@ It ill be covered in other time
9. Density of a substance is calculated as follows:_density= mass/volume_. Write a function which calculates _density_.
10. Speed is calculated by dividing the total distance covered by a moving object divided by the total amount of time taken. Write a function which calculates a speed of a moving object, _speed_.
11. Weight of a substance is calculated as follows: _weight = mass x gravity_. Write a function which calculates _weight_.
12. Temperature in oC can be converted to oF using this formula: _oF = (oC x 9/5) + 32_. Write a function which convert oC to oF _convertCelciusToFahrenheit_.
12. Temperature in oC can be converted to oF using this formula: _oF = (oC x 9/5) + 32_. Write a function which convert oC to oF _convertCelsiusToFahrenheit_.
13. Body mass index(BMI) is calculated as follows: _bmi = weight in Kg / (height x height) in m2_. Write a function which calculates _bmi_. BMI is used to broadly define different weight groups in adults 20 years old or older.Check if a person is _underweight, normal, overweight_ or _obese_ based the information given below.
- The same groups apply to both men and women.
@ -617,7 +619,7 @@ It ill be covered in other time
### Exercises: Level 3
1. Modify question number n . Declare a function name _userIdGeneratedByUser_. It doesnt take any parameter but it takes two inputs using prompt(). One of the input is the number of characters and the second input is the number of ids which are supposed to be generated.
1. Modify the _userIdGenerator_ function. Declare a function name _userIdGeneratedByUser_. It doesnt take any parameter but it takes two inputs using prompt(). One of the input is the number of characters and the second input is the number of ids which are supposed to be generated.
```sh
userIdGeneratedByUser()

@ -1,16 +1,16 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:07 Day </title>
<title>30DaysOfJavaScript:07 Day </title>
</head>
<body>
<h1>30DaysOfJavaScript:07 Day</h1>
<h2>Functions</h2>
<script src="./data/countries.js"></script>
<script src="./scripts/main.js"></script>
<h1>30DaysOfJavaScript:07 Day</h1>
<h2>Functions</h2>
<script src="./data/countries.js"></script>
<script src="./scripts/main.js"></script>
</body>

@ -18,50 +18,49 @@
![Thirty Days Of JavaScript](../images/banners/day_1_8.png)
- [📔 Day 8](#-day-8)
- [Scope](#scope)
- [Window Scope](#window-scope)
- [Global scope](#global-scope)
- [Local scope](#local-scope)
- [📔 Object](#-object)
- [Creating an empty object](#creating-an-empty-object)
- [Creating an objecting with values](#creating-an-objecting-with-values)
- [Getting values from an object](#getting-values-from-an-object)
- [Creating object methods](#creating-object-methods)
- [Setting new key for an object](#setting-new-key-for-an-object)
- [Object Methods](#object-methods)
- [Getting object keys using Object.keys()](#getting-object-keys-using-objectkeys)
- [Getting object values using Object.values()](#getting-object-values-using-objectvalues)
- [Getting object keys and values using Object.entries()](#getting-object-keys-and-values-using-objectentries)
- [Checking properties using hasOwnProperty()](#checking-properties-using-hasownproperty)
- [💻 Exercises](#-exercises)
- [Exercises: Level 1](#exercises-level-1)
- [Exercises: Level 2](#exercises-level-2)
- [Exercises: Level 3](#exercises-level-3)
- [Scope](#scope)
- [Window Global Object](#window-global-object)
- [Global scope](#global-scope)
- [Local scope](#local-scope)
- [📔 Object](#-object)
- [Creating an empty object](#creating-an-empty-object)
- [Creating an objecting with values](#creating-an-objecting-with-values)
- [Getting values from an object](#getting-values-from-an-object)
- [Creating object methods](#creating-object-methods)
- [Setting new key for an object](#setting-new-key-for-an-object)
- [Object Methods](#object-methods)
- [Getting object keys using Object.keys()](#getting-object-keys-using-objectkeys)
- [Getting object values using Object.values()](#getting-object-values-using-objectvalues)
- [Getting object keys and values using Object.entries()](#getting-object-keys-and-values-using-objectentries)
- [Checking properties using hasOwnProperty()](#checking-properties-using-hasownproperty)
- [💻 Exercises](#-exercises)
- [Exercises: Level 1](#exercises-level-1)
- [Exercises: Level 2](#exercises-level-2)
- [Exercises: Level 3](#exercises-level-3)
# 📔 Day 8
## Scope
Variable is the fundamental part in programming. We declare variable to store different data types. To declare a variable we use the key word _var_, _let_ and _const_. A variable can declared at different scope. In this section we will see the scope, scope of variables when we use var or let.
Variable is the fundamental part in programming. We declare variable to store different data types. To declare a variable we use the key word _var_, _let_ and _const_. A variable can be declared at different scope. In this section, we will see the scope variables, scope of variables when we use var or let.
Variables scopes can be:
- Window
- Global
- Local
Variable can be declared globally or locally or window scope. We will see both global and local scope.
Anything declared without let, var or const is scoped at window level.
Variable can be declared globally or locally scope. We will see both global and local scope.
Anything declared without let, var or const is scoped at global level.
Let us image we have a scope.js file.
Let us imagine that we have a scope.js file.
### Window Scope
### Window Global Object
Without using console.log() open your browser and check, you will see the value of a and b if you write a or b on the browser. That means a and b are already available in the window.
```js
//scope.js
a = 'JavaScript' // is a window scope this found anywhere
b = 10 // this is a window scope variable
a = 'JavaScript' // declaring a variable without let or const make it available in window object and this found anywhere
b = 10 // this is a global scope variable and found in the window object
function letsLearnScope() {
console.log(a, b)
if (true) {
@ -96,29 +95,36 @@ console.log(a, b) // JavaScript 10, accessible
A variable declared as local can be accessed only in certain block code.
- Block Scope
- Function Scope
```js
//scope.js
let a = 'JavaScript' // is a global scope it will be found anywhere in this file
let b = 10 // is a global scope it will be found anywhere in this file
// Function scope
function letsLearnScope() {
console.log(a, b) // JavaScript 10, accessible
let c = 30
let value = false
// block scope
if (true) {
// we can access from the function and outside the function but
// variables declared inside the if will not be accessed outside the if block
let a = 'Python'
let b = 20
let c = 30
let d = 40
console.log(a, b, c) // Python 20 30
value = !value
console.log(a, b, c, value) // Python 20 30 true
}
// we can not access c because c's scope is only the if block
console.log(a, b) // JavaScript 10
console.log(a, b, value) // JavaScript 10 true
}
letsLearnScope()
console.log(a, b) // JavaScript 10, accessible
```
Now, you have an understanding of scope. A variable declared with *var* only scoped to function but variable declared with *let* or *const* is block scope(function block, if block, loop etc). Block in JavaScript is a code in between two curly brackets ({}).
Now, you have an understanding of scope. A variable declared with *var* only scoped to function but variable declared with *let* or *const* is block scope(function block, if block, loop block, etc). Block in JavaScript is a code in between two curly brackets ({}).
```js
//scope.js
@ -136,9 +142,9 @@ if (true){
console.log(gravity) // 9.81
for(var i = 0; i < 3; i++){
console.log(i) // 1, 2, 3
console.log(i) // 0, 1, 2
}
console.log(i)
console.log(i) // 3
```
@ -161,13 +167,13 @@ if (true){
// console.log(gravity), Uncaught ReferenceError: gravity is not defined
for(let i = 0; i < 3; i++){
console.log(i) // 1, 2, 3
console.log(i) // 0, 1, 2
}
// console.log(i), Uncaught ReferenceError: gravity is not defined
// console.log(i), Uncaught ReferenceError: i is not defined
```
The scope *let* and *const* is the same. The difference is only reassigning. We can not change or reassign the value of const variable. I would strongly suggest you to use *let* and *const*, by using *let* and *const* you will writ clean code and avoid hard to debug mistakes. As a rule of thumb, you can use *let* for any value which change, *const* for any constant value, and for array, object, arrow function and function expression.
The scope *let* and *const* are the same. The difference is only reassigning. We can not change or reassign the value of the `const` variable. I would strongly suggest you to use *let* and *const*, by using *let* and *const* you will write clean code and avoid hard to debug mistakes. As a rule of thumb, you can use *let* for any value which change, *const* for any constant value, and for an array, object, arrow function and function expression.
## 📔 Object
@ -250,14 +256,14 @@ const person = {
console.log(person.firstName)
console.log(person.lastName)
console.log(person.age)
console.log(person.location)
console.log(person.location) // undefined
// value can be accessed using square bracket and key name
console.log(person['firstName'])
console.log(person['lastName'])
console.log(person['age'])
console.log(person['age'])
console.log(person['location'])
console.log(person['location']) // undefined
// for instance to access the phone number we only use the square bracket method
console.log(person['phone number'])
@ -385,7 +391,7 @@ _Object.keys_: To get the keys or properties of an object as an array
```js
const keys = Object.keys(copyPerson)
console.log(keys) //['name', 'age', 'country', 'skills', 'address', 'getPersonInfo']
console.log(keys) //['firstName', 'age', 'country','city', 'skills','title', 'address', 'getPersonInfo']
const address = Object.keys(copyPerson.address)
console.log(address) //['street', 'pobox', 'city']
```
@ -432,7 +438,7 @@ console.log(copyPerson.hasOwnProperty('score'))
### Exercises: Level 2
1. Find the person who has many skills in the users object.
1. Count logged in users,count users having greater than equal to 50 points from the following object.
1. Count logged in users, count users having greater than equal to 50 points from the following object.
````js
const users = {

@ -1,16 +1,16 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:08 Day </title>
<title>30DaysOfJavaScript:08 Day </title>
</head>
<body>
<h1>30DaysOfJavaScript:08 Day</h1>
<h2>Objects</h2>
<h1>30DaysOfJavaScript:08 Day</h1>
<h2>Objects</h2>
<script src="./data/countries_data.js"></script>
<script src="./scripts/main.js"></script>
<script src="./data/countries_data.js"></script>
<script src="./scripts/main.js"></script>
</body>

@ -19,29 +19,29 @@
![Day 5](../images/banners/day_1_9.png)
- [Day 9](#day-9)
- [Higher Order Function](#higher-order-function)
- [Callback](#callback)
- [Returning function](#returning-function)
- [setting time](#setting-time)
- [setInterval](#setinterval)
- [setTimeout](#settimeout)
- [Functional Programming](#functional-programming)
- [forEach](#foreach)
- [map](#map)
- [filter](#filter)
- [reduce](#reduce)
- [every](#every)
- [find](#find)
- [findIndex](#findindex)
- [some](#some)
- [sort](#sort)
- [Sorting string values](#sorting-string-values)
- [Sorting Numeric values](#sorting-numeric-values)
- [Sorting Object Arrays](#sorting-object-arrays)
- [💻 Exercises](#-exercises)
- [Exercises: Level 1](#exercises-level-1)
- [Exercises: Level 2](#exercises-level-2)
- [Exercises: Level 3](#exercises-level-3)
- [Higher Order Function](#higher-order-function)
- [Callback](#callback)
- [Returning function](#returning-function)
- [Setting time](#setting-time)
- [Setting Interval using a setInterval function](#setting-interval-using-a-setinterval-function)
- [Setting a time using a setTimeout](#setting-a-time-using-a-settimeout)
- [Functional Programming](#functional-programming)
- [forEach](#foreach)
- [map](#map)
- [filter](#filter)
- [reduce](#reduce)
- [every](#every)
- [find](#find)
- [findIndex](#findindex)
- [some](#some)
- [sort](#sort)
- [Sorting string values](#sorting-string-values)
- [Sorting Numeric values](#sorting-numeric-values)
- [Sorting Object Arrays](#sorting-object-arrays)
- [💻 Exercises](#-exercises)
- [Exercises: Level 1](#exercises-level-1)
- [Exercises: Level 2](#exercises-level-2)
- [Exercises: Level 3](#exercises-level-3)
# Day 9
@ -54,12 +54,12 @@ Higher order functions are functions which take other function as a parameter or
A callback is a function which can be passed as parameter to other function. See the example below.
```js
// a callback function, the function could be any name
// a callback function, the name of the function could be any name
const callback = (n) => {
return n ** 2
}
// function take other function as a callback
// function that takes other function as a callback
function cube(callback, n) {
return callback(n) * n
}
@ -71,7 +71,6 @@ console.log(cube(callback, 3))
Higher order functions return function as a value
```js
// Higher order function returning an other function
const higherOrder = n => {
@ -81,23 +80,21 @@ const higherOrder = n => {
}
return doWhatEver
}
return doSomething
}
console.log(higherOrder(2)(3)(10))
```
Let us see were we use call back functions.For instance the _forEach_ method uses call back.
Let us see were we use call back functions. For instance the _forEach_ method uses call back.
```js
const numbers = [1, 2, 3, 4]
const numbers = [1, 2, 3, 4, 5]
const sumArray = arr => {
let sum = 0
const callBack = function(element) {
const callback = function(element) {
sum += element
}
numbers.forEach(callback)
arr.forEach(callback)
return sum
}
@ -115,7 +112,7 @@ const numbers = [1, 2, 3, 4]
const sumArray = arr => {
let sum = 0
numbers.forEach(function(element) {
arr.forEach(function(element) {
sum += element
})
return sum
@ -128,20 +125,20 @@ console.log(sumArray(numbers))
15
```
### setting time
### Setting time
In JavaScript we can execute some activity on certain interval of time or we can schedule(wait) for sometime to execute some activities.
In JavaScript we can execute some activities in a certain interval of time or we can schedule(wait) for some time to execute some activities.
- setInterval
- setTimeout
#### setInterval
#### Setting Interval using a setInterval function
In JavaScript, we use setInterval higher order function to do some activity continuously with in some interval of time. The setInterval global method take a callback function and a duration as a parameter. The duration is in milliseconds and the callback will be always called in that interval of time.
```js
// syntax
function callBack() {
function callback() {
// code goes here
}
setInterval(callback, duration)
@ -151,10 +148,10 @@ setInterval(callback, duration)
function sayHello() {
console.log('Hello')
}
setInterval(sayHello, 2000) // it prints hello in every 2 seconds
setInterval(sayHello, 1000) // it prints hello in every second, 1000ms is 1s
```
#### setTimeout
#### Setting a time using a setTimeout
In JavaScript, we use setTimeout higher order function to execute some action at some time in the future. The setTimeout global method take a callback function and a duration as a parameter. The duration is in milliseconds and the callback wait for that amount of time.
@ -195,9 +192,8 @@ arr.forEach((element, index, arr) => console.log(index, element, arr))
```js
let sum = 0;
const numbers = [1,2,3,4,5];
numbers.forEach(num => console.log(num)))
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(num => console.log(num))
console.log(sum)
```
@ -211,8 +207,8 @@ console.log(sum)
```js
let sum = 0;
const numbers = [1,2,3,4,5];
numbers.forEach(num => sum += num))
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(num => sum += num)
console.log(sum)
```
@ -349,18 +345,19 @@ console.log(countriesHaveFiveLetters)
```js
const scores = [
{ name: 'Asabeneh', score: 95 },
{ name: 'Lidiya', score: 98 },
{ name: 'Mathias', score: 80 },
{ name: 'Elias', score: 50 },
{ name: 'Martha', score: 85 },
{ name: 'John', score: 100 },
]
const scoresGreaterEight = scores.filter((score) => score.score > 80)
console.log(scoresGreaterEight)
const scoresGreaterEighty = scores.filter((score) => score.score > 80)
console.log(scoresGreaterEighty)
```
```sh
[{name: 'Asabeneh', score: 95}, {name: 'Martha', score: 85},{name: 'John', score: 100}]
[{name: 'Asabeneh', score: 95}, { name: 'Lidiya', score: 98 },{name: 'Martha', score: 85},{name: 'John', score: 100}]
```
### reduce
@ -391,9 +388,9 @@ _every_: Check if all the elements are similar in one aspect. It returns boolean
```js
const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']
const areAllStr = names.every((name) => typeof name === 'string')
const areAllStr = names.every((name) => typeof name === 'string') // Are all strings?
console.log(arrAllStr)
console.log(areAllStr)
```
```sh
@ -402,11 +399,9 @@ true
```js
const bools = [true, true, true, true]
const areAllTrue = bools.every((b) => {
return b === true
})
const areAllTrue = bools.every((b) => b === true) // Are all true?
console.log(areAllTrue) //true
console.log(areAllTrue) // true
```
```sh
@ -448,9 +443,7 @@ const scores = [
{ name: 'John', score: 100 },
]
const score = scores.find((user) => {
return user.score > 80
})
const score = scores.find((user) => user.score > 80)
console.log(score)
```
@ -481,15 +474,13 @@ _some_: Check if some of the elements are similar in one aspect. It returns bool
const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']
const bools = [true, true, true, true]
const areSomeTrue = bools.some((b) => {
return b === true
})
const areSomeTrue = bools.some((b) => b === true)
console.log(areSomeTrue) //true
```
```js
const areAllStr = names.some((name) => typeof name === 'number')
const areAllStr = names.some((name) => typeof name === 'number') // Are all strings ?
console.log(areAllStr) // false
```
@ -527,7 +518,7 @@ console.log(numbers) //[100, 37, 9.81, 3.14]
#### Sorting Object Arrays
When ever we sort objects in an array. We use the object key to compare. Lets see the example below.
Whenever we sort objects in an array, we use the object key to compare. Let us see the example below.
```js
objArr.sort(function (a, b) {
@ -547,7 +538,7 @@ objArr.sort(function (a, b) {
const users = [
{ name: 'Asabeneh', age: 150 },
{ name: 'Brook', age: 50 },
{ name: 'Eyo', age: 100 },
{ name: 'Eyob', age: 100 },
{ name: 'Elias', age: 22 },
]
users.sort((a, b) => {
@ -556,7 +547,7 @@ users.sort((a, b) => {
return 0
})
console.log(users) // sorted ascending
//[{…}, {…}, {…}, {…}]
// [{…}, {…}, {…}, {…}]
```
🌕 You are doing great.Never give up because great things take time. You have just completed day 9 challenges and you are 9 steps a head in to your way to greatness. Now do some exercises for your brain and for your muscle.
@ -580,7 +571,7 @@ const products = [
```
1. Explain the difference between **_forEach, map, filter, and reduce_**.
2. Define a call function before you them in forEach, map, filter or reduce.
2. Define a callback function before you use it in forEach, map, filter or reduce.
3. Use **_forEach_** to console.log each country in the countries array.
4. Use **_forEach_** to console.log each name in the names array.
5. Use **_forEach_** to console.log each number in the numbers array.

@ -1,16 +1,16 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:09 Day </title>
<title>30DaysOfJavaScript:09 Day </title>
</head>
<body>
<h1>30DaysOfJavaScript:09 Day</h1>
<h2>Functional Programming</h2>
<h1>30DaysOfJavaScript:09 Day</h1>
<h2>Functional Programming</h2>
<script src="./data/countries_data.js"></script>
<script src="./scripts/main.js"></script>
<script src="./data/countries_data.js"></script>
<script src="./scripts/main.js"></script>
</body>

@ -19,33 +19,33 @@
![Day 10](../images/banners/day_1_10.png)
- [Day 10](#day-10)
- [Set](#set)
- [Creating an empty set](#creating-an-empty-set)
- [Creating set from array](#creating-set-from-array)
- [Adding an element to a set](#adding-an-element-to-a-set)
- [Deleting an element a set](#deleting-an-element-a-set)
- [Checking an element in the set](#checking-an-element-in-the-set)
- [Clearing the set](#clearing-the-set)
- [Union of sets](#union-of-sets)
- [Intersection of sets](#intersection-of-sets)
- [Difference of sets](#difference-of-sets)
- [Map](#map)
- [Creating an empty Map](#creating-an-empty-map)
- [Creating an Map from array](#creating-an-map-from-array)
- [Adding values to the Map](#adding-values-to-the-map)
- [Getting a value from Map](#getting-a-value-from-map)
- [Checking key in Map](#checking-key-in-map)
- [Exercises](#exercises)
- [Exercises:Level 1](#exerciseslevel-1)
- [Exercises:Level 2](#exerciseslevel-2)
- [Exercises:Level 3](#exerciseslevel-3)
- [Set](#set)
- [Creating an empty set](#creating-an-empty-set)
- [Creating set from array](#creating-set-from-array)
- [Adding an element to a set](#adding-an-element-to-a-set)
- [Deleting an element a set](#deleting-an-element-a-set)
- [Checking an element in the set](#checking-an-element-in-the-set)
- [Clearing the set](#clearing-the-set)
- [Union of sets](#union-of-sets)
- [Intersection of sets](#intersection-of-sets)
- [Difference of sets](#difference-of-sets)
- [Map](#map)
- [Creating an empty Map](#creating-an-empty-map)
- [Creating an Map from array](#creating-an-map-from-array)
- [Adding values to the Map](#adding-values-to-the-map)
- [Getting a value from Map](#getting-a-value-from-map)
- [Checking key in Map](#checking-key-in-map)
- [Exercises](#exercises)
- [Exercises:Level 1](#exerciseslevel-1)
- [Exercises:Level 2](#exerciseslevel-2)
- [Exercises:Level 3](#exerciseslevel-3)
# Day 10
## Set
Set is a collection of elements. Set can only contains unique elements.
Lets see how to create a set
Let us see how to create a set in the section below.
### Creating an empty set
@ -55,7 +55,7 @@ console.log(companies)
```
```sh
{}
Set(0) {}
```
### Creating set from array
@ -71,8 +71,8 @@ const languages = [
'French',
]
const setOfLangauges = new Set(languages)
console.log(setOfLangauges)
const setOfLanguages = new Set(languages)
console.log(setOfLanguages)
```
```sh
@ -92,9 +92,9 @@ const languages = [
'French',
]
const setOfLangauges = new Set(languages)
const setOfLanguages = new Set(languages)
for (const language of setOfLangauges) {
for (const language of setOfLanguages) {
console.log(language)
}
```
@ -117,7 +117,6 @@ companies.add('Facebook')
companies.add('Amazon')
companies.add('Oracle')
companies.add('Microsoft')
console.log(companies.size) // 5 elements in the set
console.log(companies)
```
@ -165,13 +164,11 @@ It removes all the elements from a set.
```js
companies.clear()
console.log(companies)
```
```sh
{}
Set(0) {}
```
See the example below to learn how to use set.
@ -202,7 +199,7 @@ console.log(counts)
```
```js
;[
[
{ lang: 'English', count: 3 },
{ lang: 'Finnish', count: 1 },
{ lang: 'French', count: 2 },
@ -241,12 +238,11 @@ console.log(C)
```sh
Set(6) {1, 2, 3, 4, 5,6}
```
### Intersection of sets
To find an intersection of two sets can be achieved using filter. Lets find the union of set A and set B (A ∩ B)
To find an intersection of two sets can be achieved using filter. Lets find the intersection of set A and set B (A ∩ B)
```js
let a = [1, 2, 3, 4, 5]
@ -263,7 +259,6 @@ console.log(C)
```sh
Set(3) {3, 4, 5}
```
### Difference of sets
@ -285,7 +280,6 @@ console.log(C)
```sh
Set(2) {1, 2}
```
## Map
@ -348,7 +342,7 @@ Helsinki
### Checking key in Map
Check if a key exist in a map using _has_ method. It returns _true_ or _false_.
Check if a key exists in a map using _has_ method. It returns _true_ or _false_.
```js
console.log(countriesMap.has('Finland'))
@ -372,9 +366,9 @@ for (const country of countriesMap) {
(2) ["Norway", "Oslo"]
```
```sh
```js
for (const [country, city] of countriesMap){
console.log(country, city)
console.log(country, city)
}
```
@ -391,8 +385,8 @@ Norway Oslo
### Exercises:Level 1
```js
const a = {4, 5, 8, 9}
const b = {3, 4, 5, 7}
const a = [4, 5, 8, 9]
const b = [3, 4, 5, 7]
const countries = ['Finland', 'Sweden', 'Norway']
```
@ -415,10 +409,11 @@ const countries = ['Finland', 'Sweden', 'Norway']
1. \*\*\* Use the countries data to find the 10 most spoken languages:
```js
```js
// Your output should look like this
console.log(mostSpokenLanguages(countries, 10))[
({ English: 91 },
console.log(mostSpokenLanguages(countries, 10))
[
{ English: 91 },
{ French: 45 },
{ Arabic: 25 },
{ Spanish: 24 },
@ -428,24 +423,18 @@ const countries = ['Finland', 'Sweden', 'Norway']
{ German: 7 },
{ Chinese: 5 },
{ Swahili: 4 },
{ Serbian: 4 })
{ Serbian: 4 }
]
// Your output should look like this
console.log(mostSpokenLanguages(countries, 3))
```
[
{'English':91},
{'French':45},
{'Arabic':25}
]
// Your output should look like this
console.log(mostSpokenLanguages(countries, 3))
[
{English:91},
{French:45},
{Arabic:25}
]
```
🎉 CONGRATULATIONS ! 🎉
[<< Day 9](../09_Day_Higher_order_functions/09_day_higher_order_functions.md) | [Day 11>>](../11_Day_Destructuring_and_spreading/11_day_destructuring_and_spreading.md)
```
[<< Day 9](../09_Day_Higher_order_functions/09_day_higher_order_functions.md) | [Day 11 >>](../11_Day_Destructuring_and_spreading/11_day_destructuring_and_spreading.md)

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:10 Day </title>

@ -18,23 +18,23 @@
![Day 11](../images/banners/day_1_11.png)
- [Day 11](#day-11)
- [Destructuring and Spread](#destructuring-and-spread)
- [Destructing Arrays](#destructing-arrays)
- [Destructuring during iteration](#destructuring-during-iteration)
- [Destructuring Object](#destructuring-object)
- [Renaming during structuring](#renaming-during-structuring)
- [Object parameter without destructuring](#object-parameter-without-destructuring)
- [Object parameter with destructuring](#object-parameter-with-destructuring)
- [Destructuring object during iteration](#destructuring-object-during-iteration)
- [Spread or Rest Operator](#spread-or-rest-operator)
- [Spread operator to get the rest of array elements](#spread-operator-to-get-the-rest-of-array-elements)
- [Spread operator to copy array](#spread-operator-to-copy-array)
- [Spread operator to copy object](#spread-operator-to-copy-object)
- [Spread operator with arrow function](#spread-operator-with-arrow-function)
- [Exercises](#exercises)
- [Exercises: Level 1](#exercises-level-1)
- [Exercises: Level 2](#exercises-level-2)
- [Exercises: Level 3](#exercises-level-3)
- [Destructuring and Spread](#destructuring-and-spread)
- [Destructing Arrays](#destructing-arrays)
- [Destructuring during iteration](#destructuring-during-iteration)
- [Destructuring Object](#destructuring-object)
- [Renaming during structuring](#renaming-during-structuring)
- [Object parameter without destructuring](#object-parameter-without-destructuring)
- [Object parameter with destructuring](#object-parameter-with-destructuring)
- [Destructuring object during iteration](#destructuring-object-during-iteration)
- [Spread or Rest Operator](#spread-or-rest-operator)
- [Spread operator to get the rest of array elements](#spread-operator-to-get-the-rest-of-array-elements)
- [Spread operator to copy array](#spread-operator-to-copy-array)
- [Spread operator to copy object](#spread-operator-to-copy-object)
- [Spread operator with arrow function](#spread-operator-with-arrow-function)
- [Exercises](#exercises)
- [Exercises: Level 1](#exercises-level-1)
- [Exercises: Level 2](#exercises-level-2)
- [Exercises: Level 3](#exercises-level-3)
# Day 11
@ -57,9 +57,9 @@ Destructuring is a way to unpack arrays, and objects and assigning to a distinct
```js
const names = ['Asabeneh', 'Brook', 'David', 'John']
let [firstPerson, secondPerson, thirdPerson, fourth Person] = names
let [firstPerson, secondPerson, thirdPerson, fourthPerson] = names
console.log(firstName, secondPerson,thirdPerson, fourthPerson)
console.log(firstPerson, secondPerson,thirdPerson, fourthPerson)
```
```sh
@ -108,7 +108,7 @@ If we like to skip on of the values in the array we use additional comma. The co
```js
const names = ['Asabeneh', 'Brook', 'David', 'John']
let [, secondPerson, , fourthPerson] = name // first and third person is omitted
let [, secondPerson, , fourthPerson] = names // first and third person is omitted
console.log(secondPerson, fourthPerson)
```
@ -209,7 +209,7 @@ const rectangle = {
height: 10,
area: 200
}
let { width: w, heigh: h, area: a, perimeter: p } = rectangle
let { width: w, height: h, area: a, perimeter: p } = rectangle
console.log(w, h, a, p)
```
@ -218,7 +218,7 @@ console.log(w, h, a, p)
20 10 200 undefined
```
If the key is not found in the object the variable will be assigned to undefined. In case, the key is not in the object we can give a default value during declaration. See the example.
If the key is not found in the object the variable will be assigned to undefined. Sometimes the key might not be in the object, in that case we can give a default value during declaration. See the example.
```js
const rectangle = {
@ -226,10 +226,10 @@ const rectangle = {
height: 10,
area: 200
}
let { width, heigh, area, perimeter = 60 } = rectangle
let { width, height, area, perimeter = 60 } = rectangle
console.log(width, height, area, perimeter) //20 10 200 60
//Lets modify the object:width to 30 and perimeter to 80
//Let us modify the object:width to 30 and perimeter to 80
```
```js
@ -239,11 +239,11 @@ const rectangle = {
area: 200,
perimeter: 80
}
let { width, heigh, area, perimeter = 60 } = rectangle
console.log(width, height, area, perimeter) //20 10 200 80
let { width, height, area, perimeter = 60 } = rectangle
console.log(width, height, area, perimeter) //30 10 200 80
```
Destructuring keys as a function parameters. Lets create a function which take a rectangle object and it return a perimeter of a rectangle.
Destructuring keys as a function parameters. Let us create a function which takes a rectangle object and it returns a perimeter of a rectangle.
### Object parameter without destructuring
@ -282,7 +282,7 @@ const person = {
],
languages: ['Amharic', 'English', 'Suomi(Finnish)']
}
// Lets create a function which give information about the person object without destructuring
// Let us create a function which give information about the person object without destructuring
const getPersonInfo = obj => {
const skills = obj.skills
@ -314,7 +314,7 @@ console.log(calculatePerimeter(rect)) // 60
```
```js
// Lets create a function which give information about the person object with destructuring
// Let us create a function which give information about the person object with destructuring
const getPersonInfo = ({
firstName,
lastName,
@ -335,7 +335,7 @@ const getPersonInfo = ({
}
console.log(getPersonInfo(person))
/*
Asabeneh Yetayeh lives in Finland. He is 200 years old. He is an Instructor and Developer. He teaches HTML, CSS, JavaScript, React, Redux, Node, MongoDB, Python and D3.js. He speaks Amharic, English and a little bit of Suomi(Finnish)
Asabeneh Yetayeh lives in Finland. He is 250 years old. He is an Instructor and Developer. He teaches HTML, CSS, JavaScript, React, Redux, Node, MongoDB, Python and D3.js. He speaks Amharic, English and a little bit of Suomi(Finnish)
*/
```
@ -373,7 +373,7 @@ Assess Test Result 4/1/2020 1:00 false
### Spread or Rest Operator
When we destructure an array we use the spread operator(...) to get the rest elements as array. In addition to that we use spread operator to spread arr elements to another array.
When we destructure an array we use the spread operator(...) to get the rest elements as array. In addition to that we use spread operator to spread array elements to another array.
### Spread operator to get the rest of array elements
@ -499,7 +499,7 @@ const sumAllNums = (...args) => {
console.log(args)
}
sumAllNums(1, 2, 3,4,5)
sumAllNums(1, 2, 3, 4, 5)
```
@ -519,7 +519,7 @@ const sumAllNums = (...args) => {
}
console.log(sumAllNums(1, 2, 3,4,5))
console.log(sumAllNums(1, 2, 3, 4, 5))
```
```sh
@ -597,7 +597,6 @@ const users = [
1. Iterate through the users array and get all the keys of the object using destructuring
2. Find the persons who have less than two skills
### Exercises: Level 3
1. Destructure the countries object print name, capital, population and languages of all countries
@ -613,7 +612,7 @@ const users = [
```
3. Write a function called *convertArrayToObject* which can convert the array to a structure object.
```js
const students = [
['David', ['HTM', 'CSS', 'JS', 'React'], [98, 85, 90, 95]],
@ -693,6 +692,7 @@ const users = [
}
```
🎉 CONGRATULATIONS ! 🎉
[<< Day 10](../10_Day_Sets_and_Maps/10_day_Sets_and_Maps.md) | [Day 12>>](../12_Day_Regular_expressions/12_day_regular_expressions.md)
[<< Day 10](../10_Day_Sets_and_Maps/10_day_Sets_and_Maps.md) | [Day 12 >>](../12_Day_Regular_expressions/12_day_regular_expressions.md)

@ -1,16 +1,16 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:11 Day </title>
<title>30DaysOfJavaScript:11 Day </title>
</head>
<body>
<h1>30DaysOfJavaScript:11 Day</h1>
<h2>Destructuring and Spread</h2>
<h1>30DaysOfJavaScript:11 Day</h1>
<h2>Destructuring and Spread</h2>
<script src="./data/countries_data.js"></script>
<script src="./scripts/main.js"></script>
<script src="./data/countries_data.js"></script>
<script src="./scripts/main.js"></script>
</body>

@ -18,29 +18,29 @@
![Thirty Days Of JavaScript](../images/banners/day_1_12.png)
- [📘 Day 12](#-day-12)
- [Regular Expressions](#regular-expressions)
- [RegExp parameters](#regexp-parameters)
- [Pattern](#pattern)
- [Flags](#flags)
- [Creating a pattern with RegExp Constructor](#creating-a-pattern-with-regexp-constructor)
- [Creating a pattern without RegExp Constructor](#creating-a-pattern-without-regexp-constructor)
- [RegExpp Object Methods](#regexpp-object-methods)
- [Testing for a match](#testing-for-a-match)
- [Array containing all of the match](#array-containing-all-of-the-match)
- [Replacing a substring](#replacing-a-substring)
- [Square Bracket](#square-bracket)
- [Escape character(\\) in RegExp](#escape-character-in-regexp)
- [One or more times(+)](#one-or-more-times)
- [Period(.)](#period)
- [Zero or more times(*)](#zero-or-more-times)
- [Zero or one times(?)](#zero-or-one-times)
- [Quantifier in RegExp](#quantifier-in-regexp)
- [Cart ^](#cart-)
- [Exact match](#exact-match)
- [💻 Exercises](#-exercises)
- [Exercises: Level 1](#exercises-level-1)
- [Exercises: Level 2](#exercises-level-2)
- [Exercises: Level 3](#exercises-level-3)
- [Regular Expressions](#regular-expressions)
- [RegExp parameters](#regexp-parameters)
- [Pattern](#pattern)
- [Flags](#flags)
- [Creating a pattern with RegExp Constructor](#creating-a-pattern-with-regexp-constructor)
- [Creating a pattern without RegExp Constructor](#creating-a-pattern-without-regexp-constructor)
- [RegExpp Object Methods](#regexpp-object-methods)
- [Testing for a match](#testing-for--a-match)
- [Array containing all of the match](#array-containing-all-of-the-match)
- [Replacing a substring](#replacing-a-substring)
- [Square Bracket](#square-bracket)
- [Escape character(\\) in RegExp](#escape-character-in-regexp)
- [One or more times(+)](#one-or-more-times)
- [Period(.)](#period)
- [Zero or more times(*)](#zero-or-more-times)
- [Zero or one times(?)](#zero-or-one-times)
- [Quantifier in RegExp](#quantifier-in-regexp)
- [Cart ^](#cart-)
- [Exact match](#exact-match)
- [💻 Exercises](#-exercises)
- [Exercises: Level 1](#exercises-level-1)
- [Exercises: Level 2](#exercises-level-2)
- [Exercises: Level 3](#exercises-level-3)
# 📘 Day 12
@ -60,9 +60,9 @@ A pattern could be a text or any form of pattern which some sort of similarity.
#### Flags
Flags are optional parameters in a regular expression which determine the type of searching. Let see some of the flags:
Flags are optional parameters in a regular expression which determine the type of searching. Let us see some of the flags:
- g:is a global flag which means looking for a pattern in whole text
- g: a global flag which means looking for a pattern in whole text
- i: case insensitive flag(it searches for both lowercase and uppercase)
- m: multiline
@ -106,7 +106,7 @@ let regEx= new RegExp('love','gi')
### RegExpp Object Methods
Let see some of RegExp methods
Let us see some of RegExp methods
#### Testing for a match
@ -227,7 +227,7 @@ I am teacher and I love teaching.There is nothing as more rewarding as educatin
* [0-9] means any number 0 to 9
* [A-Za-z0-9] any character which is a to z, A to Z, 0 to 9
* \\: uses to escape special characters
* \d mean:match where the string contains digits (numbers from 0-9)
* \d mean: match where the string contains digits (numbers from 0-9)
* \D mean: match where the string does not contain digits
* . : any character except new line character(\n)
* ^: starts with
@ -236,13 +236,14 @@ I am teacher and I love teaching.There is nothing as more rewarding as educatin
* $: ends with
* r'substring$' eg r'love$', sentence ends with a word love
* *: zero or more times
* r'[a]*' means a optional or it can be occur many times.
* r'[a]*' means a optional or it can occur many times.
* +: one or more times
* r'[a]+' mean at least once or more times
* r'[a]+' means at least once or more times
* ?: zero or one times
* r'[a]?' mean zero times or once
* r'[a]?' means zero times or once
* \b: word bounder, matches with the beginning or ending of a word
* {3}: Exactly 3 characters
* {3,}: At least 3 character
* {3,}: At least 3 characters
* {3,8}: 3 to 8 characters
* |: Either or
* r'apple|banana' mean either of an apple or a banana
@ -257,20 +258,20 @@ Let's use example to clarify the above meta characters
Let's use square bracket to include lower and upper case
```js
const pattern = '[Aa]pple' // this square bracket mean either A or a
const txt = 'Apple and banana are fruits. An old cliche says an apple a day a doctor way has been replaced by a banana a day keeps the doctor far far away. '
const pattern = '[Aa]pple' // this square bracket means either A or a
const txt = 'Apple and banana are fruits. An old cliche says an apple a day keeps the doctor way has been replaced by a banana a day keeps the doctor far far away. '
const matches = txt.match(pattern)
console.log(matches)
```
```sh
["Apple", index: 0, input: "Apple and banana are fruits. An old cliche says an…by a banana a day keeps the doctor far far away. ", groups: undefined]
["Apple", index: 0, input: "Apple and banana are fruits. An old cliche says an apple a day keeps the doctor way has been replaced by a banana a day keeps the doctor far far away.", groups: undefined]
```
```js
const pattern = /[Aa]pple/g // this square bracket mean either A or a
const pattern = /[Aa]pple/g // this square bracket means either A or a
const txt = 'Apple and banana are fruits. An old cliche says an apple a day a doctor way has been replaced by a banana a day keeps the doctor far far away. '
const matches = txt.match(pattern)
@ -344,7 +345,7 @@ console.log(matches) // ['and banana are fruits']
### Zero or more times(*)
Zero or many times. The pattern could may not occur or it can occur many times.
Zero or many times. The pattern may not occur or it can occur many times.
```js
@ -358,7 +359,7 @@ console.log(matches) // ['and banana are fruits']
### Zero or one times(?)
Zero or one times. The pattern could may not occur or it may occur once.
Zero or one times. The pattern may not occur or it may occur once.
```js
const txt = 'I am not sure if there is a convention how to write the word e-mail.\
@ -372,11 +373,25 @@ console.log(matches) // ["e-mail", "email", "Email", "E-mail"]
### Quantifier in RegExp
We can specify the length of the substring we look for in a text, using a curly bracket. Lets imagine, we are interested in substring that their length are 4 characters
We can specify the length of the substring we look for in a text, using a curly bracket. Let us see, how ot use RegExp quantifiers. Imagine, we are interested in substring that their length are 4 characters
```js
const txt = 'This regular expression example was made in December 6, 2019.'
const pattern = /\\b\w{4}\b/g // exactly four character words
const matches = txt.match(pattern)
console.log(matches) //['This', 'made', '2019']
```
```js
const txt = 'This regular expression example was made in December 6, 2019.'
const pattern = /\b[a-zA-Z]{4}\b/g // exactly four character words without numbers
const matches = txt.match(pattern)
console.log(matches) //['This', 'made']
```
```js
const txt = 'This regular expression example was made in December 6, 2019.'
const pattern = /\d{4}/g // exactly four times
const pattern = /\d{4}/g // a number and exactly four digits
const matches = txt.match(pattern)
console.log(matches) // ['2019']
```
@ -403,7 +418,7 @@ console.log(matches) // ['This']
```js
const txt = 'This regular expression example was made in December 6, 2019.'
const pattern = /[^A-Za-z,. ]+/g // ^ in set character means negation, not A to Z, not a to z, no space, no coma no period
const pattern = /[^A-Za-z,. ]+/g // ^ in set character means negation, not A to Z, not a to z, no space, no comma no period
const matches = txt.match(pattern)
console.log(matches) // ["6", "2019"]
```
@ -503,22 +518,19 @@ distance = 12
```js
sentence = `%I $am@% a %tea@cher%, &and& I lo%#ve %tea@ching%;. There $is nothing; &as& mo@re rewarding as educa@ting &and& @emp%o@wering peo@ple. ;I found tea@ching m%o@re interesting tha@n any other %jo@bs. %Do@es thi%s mo@tivate yo@u to be a tea@cher!?`
console.log(cleanText(sentence))
console.log(cleanText(sentence))
```
```sh
I am a teacher and I love teaching There is nothing as more rewarding as educating and empowering people I found teaching more interesting than any other jobs Does this motivate you to be a teacher
```
1. Write a function which find the most frequent words. After cleaning, count three most frequent words in the string.
2. Write a function which find the most frequent words. After cleaning, count three most frequent words in the string.
```js
```js
console.log(mostFrequentWords(cleanedText))
[{word:'I', count:3}, {word:'teaching', count:2}, {word:'teacher', count:2}]
```
```
🎉 CONGRATULATIONS ! 🎉
[<< Day 11](../11_Day_Destructuring_and_spreading/11_day_destructuring_and_spreading.md) | [Day 13>>](../13_Day_Console_object_methods/13_day_console_object_methods.md)
[<< Day 11](../11_Day_Destructuring_and_spreading/11_day_destructuring_and_spreading.md) | [Day 13 >>](../13_Day_Console_object_methods/13_day_console_object_methods.md)

@ -1,16 +1,16 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:11 Day </title>
<title>30DaysOfJavaScript:11 Day </title>
</head>
<body>
<h1>30DaysOfJavaScript:11 Day</h1>
<h2>Destructuring and Spread</h2>
<h1>30DaysOfJavaScript:11 Day</h1>
<h2>Destructuring and Spread</h2>
<script src="./data/countries_data.js"></script>
<script src="./scripts/main.js"></script>
<script src="./data/countries_data.js"></script>
<script src="./scripts/main.js"></script>
</body>

@ -19,21 +19,21 @@
![Thirty Days Of JavaScript](../images/banners/day_1_13.png)
- [Day 13](#day-13)
- [Console Object Methods](#console-object-methods)
- [console.log()](#consolelog)
- [console.warn()](#consolewarn)
- [console.error()](#consoleerror)
- [console.table()](#consoletable)
- [console.time()](#consoletime)
- [console.info()](#consoleinfo)
- [console.assert()](#consoleassert)
- [console.group()](#consolegroup)
- [console.count()](#consolecount)
- [console.clear()](#consoleclear)
- [Exercises](#exercises)
- [Exercises:Level 1](#exerciseslevel-1)
- [Exercises:Level 2](#exerciseslevel-2)
- [Exercises:Level 3](#exerciseslevel-3)
- [Console Object Methods](#console-object-methods)
- [console.log()](#consolelog)
- [console.warn()](#consolewarn)
- [console.error()](#consoleerror)
- [console.table()](#consoletable)
- [console.time()](#consoletime)
- [console.info()](#consoleinfo)
- [console.assert()](#consoleassert)
- [console.group()](#consolegroup)
- [console.count()](#consolecount)
- [console.clear()](#consoleclear)
- [Exercises](#exercises)
- [Exercises:Level 1](#exerciseslevel-1)
- [Exercises:Level 2](#exerciseslevel-2)
- [Exercises:Level 3](#exerciseslevel-3)
# Day 13
@ -43,7 +43,7 @@ In this section, we will cover about console and console object methods. Absolut
We use console object methods to show output on the browser console and we use document.write to show output on the browser document(view port). Both methods used only for testing and debugging purposes. The console method is the most popular testing and debugging tool on the browser. We use document.getElementById() when we like to interact with DOM try using JavaScript. We will cover DOM in another section.
In addition to the famous, console.log() method, the console provides other more methods methods.
In addition to the famous, console.log() method, the console provides other more methods.
### console.log()
@ -99,7 +99,7 @@ console.warn('Warning is different from error')
### console.error()
The console.error() methods shows an error messages.
The console.error() method shows an error messages.
```js
console.error('This is an error message')
@ -224,7 +224,7 @@ According the above output the regular for loop is slower than for of or forEach
### console.info()
It display information message on browser console.
It displays information message on browser console.
```js
console.info('30 Days Of JavaScript challenge is trending on Github')
@ -312,7 +312,7 @@ console.groupEnd()
### console.count()
It prints the number of time this console.count() is called. It takes a string label parameter. It is very helpful to count the number of times a function is called. In the following example, the console.count() method will run three times
It prints the number of times the console.count() is called. It takes a string label parameter. It is very helpful to count the number of times a function is called. In the following example, the console.count() method will run three times
```js
const func = () => {

@ -1,16 +1,16 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:13 Day </title>
<title>30DaysOfJavaScript:13 Day </title>
</head>
<body>
<h1>30DaysOfJavaScript:13 Day</h1>
<h2>Console Object Methods</h2>
<h1>30DaysOfJavaScript:13 Day</h1>
<h2>Console Object Methods</h2>
<script src="./data/countries_data.js"></script>
<script src="./scripts/main.js"></script>
<script src="./data/countries_data.js"></script>
<script src="./scripts/main.js"></script>
</body>

@ -19,12 +19,12 @@
![Thirty Days Of JavaScript](../images/banners/day_1_14.png)
- [Day 14](#day-14)
- [Error Handling](#error-handling)
- [Error Types](#error-types)
- [Exercises](#exercises)
- [Exercises:Level 1](#exerciseslevel-1)
- [Exercises: Level 2](#exercises-level-2)
- [Exercises:Level](#exerciseslevel)
- [Error Handling](#error-handling)
- [Error Types](#error-types)
- [Exercises](#exercises)
- [Exercises:Level 1](#exerciseslevel-1)
- [Exercises: Level 2](#exercises-level-2)
- [Exercises:Level](#exerciseslevel)
# Day 14
@ -82,9 +82,7 @@ ReferenceError: fistName is not defined
at <anonymous>:4:20
In any case it will be executed
```
The catch block take a parameter. It is common to pass e, err or error as a parameter to the catch block. This parameter is an object and it has name and message keys. Lets use the name and message.
```js
try {
let lastName = 'Yetayeh'
@ -96,24 +94,20 @@ try {
console.log('In any case I will be executed')
}
```
```sh
Name of the error ReferenceError
Error message fistName is not defined
In any case I will be executed
```
throw: the throw statement allows us to create a custom error. We can through a string, number, boolean or an object. Use the throw statement to throw an exception. When you throw an exception, expression specifies the value of the exception. Each of the following throws an exception:
```js
throw 'Error2' // generates an exception with a string value
throw 42 // generates an exception with the value 42
throw true // generates an exception with the value true
throw new Error('Required') // generates an error object with the message of Required
```
```js
const throwErroExampleFun = () => {
const throwErrorExampleFun = () => {
let message
let x = prompt('Enter a number: ')
try {
@ -126,68 +120,45 @@ const throwErroExampleFun = () => {
console.log(err)
}
}
throwErroExampleFun()
throwErrorExampleFun()
```
### Error Types
- ReferenceError: An illegal reference has occurred. A ReferenceError is thrown if we use a variable that has not been declared.
```js
let firstName = 'Asabeneh'
let fullName = firstName + ' ' + lastName
console.log(fullName)
```
```sh
Uncaught ReferenceError: lastName is not defined
at <anonymous>:2:35
```
- SyntaxError: A syntax error has occurred
```js
let square = 2 x 2
console.log(square)
console.log('Hello, world")
```
```sh
Uncaught SyntaxError: Unexpected identifier
```
- TypeError: A type error has occurred
```js
let num = 10
console.log(num.toLowerCase())
```
```sh
Uncaught TypeError: num.toLowerCase is not a function
at <anonymous>:2:17
```
These are some of the common error you may face when you write a code. Understanding errors can help you to know what mistakes you made and it will help you to debug your code fast.
🌕 You are flawless. Now, you knew how to handle errors and you can write robust application which handle unexpected user inputs. You have just completed day 14 challenges and you are 14 steps a head in to your way to greatness. Now do some exercises for your brain and for your muscle.
## Exercises
### Exercises:Level 1
Practice
### Exercises: Level 2
Practice
### Exercises:Level
Practice
🎉 CONGRATULATIONS ! 🎉
[<< Day 13](../13_Day_Console_object_methods/13_day_console_object_methods.md) | [Day 15>>](../15_Day_Classes/15_day_classes.md)
[<< Day 13](../13_Day_Console_object_methods/13_day_console_object_methods.md) | [Day 15>>](../15_Day_Classes/15_day_classes.md)

@ -1,16 +1,16 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:12 Day </title>
<title>30DaysOfJavaScript:12 Day </title>
</head>
<body>
<h1>30DaysOfJavaScript:14 Day</h1>
<h2>DOM</h2>
<h1>30DaysOfJavaScript:14 Day</h1>
<h2>DOM</h2>
<script src="./data/countries_data.js"></script>
<script src="./scripts/main.js"></script>
<script src="./data/countries_data.js"></script>
<script src="./scripts/main.js"></script>
</body>

@ -19,22 +19,22 @@
![Thirty Days Of JavaScript](../images/banners/day_1_15.png)
- [Day 15](#day-15)
- [Classes](#classes)
- [Defining a classes](#defining-a-classes)
- [Class Instantiation](#class-instantiation)
- [Class Constructor](#class-constructor)
- [Default values with constructor](#default-values-with-constructor)
- [Class methods](#class-methods)
- [Properties with initial value](#properties-with-initial-value)
- [getter](#getter)
- [setter](#setter)
- [Static method](#static-method)
- [Inheritance](#inheritance)
- [Overriding methods](#overriding-methods)
- [Exercises](#exercises)
- [Exercises Level 1](#exercises-level-1)
- [Exercises Level 2](#exercises-level-2)
- [Exercises Level 3](#exercises-level-3)
- [Classes](#classes)
- [Defining a classes](#defining-a-classes)
- [Class Instantiation](#class-instantiation)
- [Class Constructor](#class-constructor)
- [Default values with constructor](#default-values-with-constructor)
- [Class methods](#class-methods)
- [Properties with initial value](#properties-with-initial-value)
- [getter](#getter)
- [setter](#setter)
- [Static method](#static-method)
- [Inheritance](#inheritance)
- [Overriding methods](#overriding-methods)
- [Exercises](#exercises)
- [Exercises Level 1](#exercises-level-1)
- [Exercises Level 2](#exercises-level-2)
- [Exercises Level 3](#exercises-level-3)
# Day 15
@ -111,7 +111,7 @@ console.log(person)
```
```sh
Person {firstName: undefined, lastName}
Person {firstName: undefined, lastName:undefined}
```
All the keys of the object are undefined. When ever we instantiate we should pass the value of the properties. Let us pass value at this time when we instantiate the class.
@ -305,7 +305,7 @@ class Person {
const fullName = this.firstName + ' ' + this.lastName
return fullName
}
get getscore() {
get getScore() {
return this.score
}
get getSkills() {
@ -586,7 +586,7 @@ Asabeneh Yetayeh is Finland. He lives Helsinki, 250.
### Overriding methods
As you can see, we manage to access all the methods in the Person Class and we used it in the Student child class. We can customize the parent methods, we can add additional properties to a child class. If we want to customize, the methods and if we want to add extra properties, we need to use the constructor function the child class too. In side the constructor function we call the super() function to access all the properties from the parent class. The Person class didn't have gender but now let us give gender property for the child class, Student. If the same method name used in the child class, the parent method will be overridden.
As you can see, we manage to access all the methods in the Person Class and we used it in the Student child class. We can customize the parent methods, we can add additional properties to a child class. If we want to customize, the methods and if we want to add extra properties, we need to use the constructor function the child class too. Inside the constructor function we call the super() function to access all the properties from the parent class. The Person class didn't have gender but now let us give gender property for the child class, Student. If the same method name used in the child class, the parent method will be overridden.
```js
class Student extends Person {

@ -1,16 +1,16 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:15 Day </title>
<title>30DaysOfJavaScript:15 Day </title>
</head>
<body>
<h1>30DaysOfJavaScript:15 Day</h1>
<h2>Classes</h2>
<h1>30DaysOfJavaScript:15 Day</h1>
<h2>Classes</h2>
<script src="./data/countries_data.js"></script>
<script src="./scripts/main.js"></script>
<script src="./data/countries_data.js"></script>
<script src="./scripts/main.js"></script>
</body>

@ -19,16 +19,16 @@
![Thirty Days Of JavaScript](../images/banners/day_1_16.png)
- [Day 16](#day-16)
- [JSON](#json)
- [Converting JSON to JavaScript Object](#converting-json-to-javascript-object)
- [JSON.parse()](#jsonparse)
- [Using a reviver function with JSON.parse()](#using-a-reviver-function-with-jsonparse)
- [Converting Object to JSON](#converting-object-to-json)
- [Using a Filter Array with JSON.stringify](#using-a-filter-array-with-jsonstringify)
- [Exercises](#exercises)
- [Exercises Level 1](#exercises-level-1)
- [Exercises Level 2](#exercises-level-2)
- [Exercises Level 3](#exercises-level-3)
- [JSON](#json)
- [Converting JSON to JavaScript Object](#converting-json-to-javascript-object)
- [JSON.parse()](#jsonparse)
- [Using a reviver function with JSON.parse()](#using-a-reviver-function-with-jsonparse)
- [Converting Object to JSON](#converting-object-to-json)
- [Using a Filter Array with JSON.stringify](#using-a-filter-array-with-jsonstringify)
- [Exercises](#exercises)
- [Exercises Level 1](#exercises-level-1)
- [Exercises Level 2](#exercises-level-2)
- [Exercises Level 3](#exercises-level-3)
# Day 16
@ -63,7 +63,7 @@ JSON stands for JavaScript Object Notation. The JSON syntax is derived from Java
}
```
The above JSON example is not much different for a normal object. Then, what is the difference ? The difference is the key of a JSON object should be with double quotes or it should be a string. JavaScript Object and JSON are very similar that we can change JSON to Object and Object to JSON.
The above JSON example is not much different from a normal object. Then, what is the difference ? The difference is the key of a JSON object should be with double quotes or it should be a string. JavaScript Object and JSON are very similar that we can change JSON to Object and Object to JSON.
Let us see the above example in more detail, it starts with a curly bracket. Inside the curly bracket, there is "users" key which has a value array. Inside the array we have different objects and each objects has keys, each keys has to have double quotes. For instance, we use "firstNaMe" instead of just firstName, however in object we use keys without double quotes. This is the major difference between an object and a JSON. Let's see more examples about JSON.
@ -177,6 +177,10 @@ Mostly we fetch JSON data from HTTP response or from a file, but we can store th
JSON.parse(json[, reviver])
// json or text , the data
// reviver is an optional callback function
/* JSON.parse(json, (key, value) => {
})
*/
```
```js
@ -440,7 +444,7 @@ const user = {
country: 'Finland',
city: 'Helsinki',
email: 'alex@alex.com',
skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Pyhton'],
skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Python'],
age: 250,
isLoggedIn: false,
points: 30
@ -576,11 +580,8 @@ const txt = `{
### Exercises Level 1
1. Change skills array to JSON using JSON.stringify()
1. Stringify the age variable
1. Stringify the isMarried variable
1. Stringify the student object
### Exercises Level 2
@ -590,7 +591,7 @@ const txt = `{
### Exercises Level 3
1. Parse the *txt* JSON to object.
2. Find the the user who has many skills from the variable stored in *txt*.
2. Find the user who has many skills from the variable stored in *txt*.
🎉 CONGRATULATIONS ! 🎉

@ -1,16 +1,16 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:16 Day </title>
<title>30DaysOfJavaScript:16 Day </title>
</head>
<body>
<h1>30DaysOfJavaScript:16 Day</h1>
<h2>JSON</h2>
<h1>30DaysOfJavaScript:16 Day</h1>
<h2>JSON</h2>
<script src="./data/countries_data.js"></script>
<script src="./scripts/main.js"></script>
<script src="./data/countries_data.js"></script>
<script src="./scripts/main.js"></script>
</body>

@ -1,15 +1,15 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:17 Day </title>
<title>30DaysOfJavaScript:17 Day </title>
</head>
<body>
<h1>30DaysOfJavaScript:17 Day</h1>
<h2>Web Storage</h2>
<h1>30DaysOfJavaScript:17 Day</h1>
<h2>Web Storage</h2>
<script src="./scripts/main.js"></script>
<script src="./scripts/main.js"></script>
</body>

@ -19,18 +19,18 @@
![Thirty Days Of JavaScript](../images/banners/day_1_17.png)
- [Day 17](#day-17)
- [HTML5 Web Storage](#html5-web-storage)
- [sessionStorage](#sessionstorage)
- [localStorage](#localstorage)
- [Use case of Web Storages](#use-case-of-web-storages)
- [HTML5 Web Storage Objects](#html5-web-storage-objects)
- [Setting item to the localStorage](#setting-item-to-the-localstorage)
- [Getting item from localStorage](#getting-item-from-localstorage)
- [Clearing the localStorage](#clearing-the-localstorage)
- [Exercises](#exercises)
- [Exercises: Level 1](#exercises-level-1)
- [Exercises: Level 2](#exercises-level-2)
- [Exercises: Level 3](#exercises-level-3)
- [HTML5 Web Storage](#html5-web-storage)
- [sessionStorage](#sessionstorage)
- [localStorage](#localstorage)
- [Use case of Web Storages](#use-case-of-web-storages)
- [HTML5 Web Storage Objects](#html5-web-storage-objects)
- [Setting item to the localStorage](#setting-item-to-the-localstorage)
- [Getting item from localStorage](#getting-item-from-localstorage)
- [Clearing the localStorage](#clearing-the-localstorage)
- [Exercises](#exercises)
- [Exercises: Level 1](#exercises-level-1)
- [Exercises: Level 2](#exercises-level-2)
- [Exercises: Level 3](#exercises-level-3)
# Day 17
@ -38,7 +38,7 @@
Web Storage(sessionStorage and localStorage) is a new HTML5 API offering important benefits over traditional cookies. Before HTML5, application data had to be stored in cookies, included in every server request. Web storage is more secure, and large amounts of data can be stored locally, without affecting website performance. The data storage limit of cookies in many web browsers is about 4 KB per cookie. We Storages can store far larger data (at least 5MB) and never transferred to the server. All sites from the same or one origin can store and access the same data.
The data being stored can be accessed using JavaScript, which gives you the ability to leverage client-side scripting to do many things that have traditionally involved server-side programming and relational databases. The are are two Web Storage objects:
The data being stored can be accessed using JavaScript, which gives you the ability to leverage client-side scripting to do many things that have traditionally involved server-side programming and relational databases. There are two Web Storage objects:
- sessionStorage
- localStorage
@ -77,7 +77,7 @@ For the examples mentioned above, it makes sense to use localStorage. You may be
In cases, we want to to get rid of the data as soon as the window is closed. Or, perhaps, if we do not want the application to interfere with the same application thats open in another window. These scenarios are served best with sessionStorage.
Now, let use how use make use of these Web Storage APIs.
Now, let us see how make use of these Web Storage APIs.
## HTML5 Web Storage Objects
@ -90,7 +90,7 @@ Web Storage objects:
- _localStorage_ - to display the localStorage object
- _localStorage.clear()_ - to remove everything in the local storage
- _localStorage.setItem()_ - to storage data in the localStorage. It takes a key and a value parameters.
- _localStorage.setItem()_ - to store data in the localStorage. It takes a key and a value parameters.
- _localStorage.getItem()_ - to display data stored in the localStorage. It takes a key as a parameter.
- _localStorage.removeItem()_ - to remove stored item form a localStorage. It takes key as a parameter.
- _localStorage.key()_ - to display a data stored in a localStorage. It takes index as a parameter.

@ -19,21 +19,21 @@
![Thirty Days Of JavaScript](../images/banners/day_1_18.png)
- [Day 18](#day-18)
- [Promise](#promise)
- [Callbacks](#callbacks)
- [Promise constructor](#promise-constructor)
- [Fetch API](#fetch-api)
- [Async and Await](#async-and-await)
- [Exercises](#exercises)
- [Exercises: Level 1](#exercises-level-1)
- [Exercises: Level 2](#exercises-level-2)
- [Exercises: Level 3](#exercises-level-3)
- [Promise](#promise)
- [Callbacks](#callbacks)
- [Promise constructor](#promise-constructor)
- [Fetch API](#fetch-api)
- [Async and Await](#async-and-await)
- [Exercises](#exercises)
- [Exercises: Level 1](#exercises-level-1)
- [Exercises: Level 2](#exercises-level-2)
- [Exercises: Level 3](#exercises-level-3)
# Day 18
## Promise
We human give or receive a promise to do some activity at some point in time. If we keep the promise we make others happy but if we do not keep the promise, it may lead discontentment. Promise in JavaScript has something in common with the above examples.
We human give or receive a promise to do some activity at some point in time. If we keep the promise we make others happy but if we do not keep the promise, it may lead discontentment. Promise in JavaScript has something in common with the above examples.
A Promise is a way to handle asynchronous operations in JavaScript. It allows handlers with an asynchronous action's eventual success value or failure reason. This lets asynchronous methods return values like synchronous methods: instead of immediately returning the final value, the asynchronous method returns a promise to supply the value at some point in the future.
@ -52,10 +52,10 @@ As the Promise.prototype.then() and Promise.prototype.catch() methods return pro
To understand promise very well let us understand callback first. Let's see the following callbacks. From the following code blocks you will notice, the difference between callback and promises.
- call back
Let us see a callback function which can take two parameters. The first parameter is err and the second is result. If the err parameter is false, there will not be error other wise it will return an error.
Let us see a callback function which can take two parameters. The first parameter is err and the second is result. If the err parameter is false, there will not be error other wise it will return an error.
In this case the err has a value and it will return the err block.
```js
//Callback
const doSomething = callback => {
@ -73,7 +73,6 @@ const callback = (err, result) => {
}
doSomething(callback)
```
```sh
@ -81,7 +80,7 @@ doSomething(callback)
It did not go well
```
In this case the err is false and it will return the else block which is the result.
In this case the err is false and it will return the else block which is the result.
```js
const doSomething = callback => {
@ -106,7 +105,7 @@ doSomething((err, result) => {
### Promise constructor
We can create a promise using the Promise constructor. We can create a new promise using the key word new followed by the word Promise and followed by a parenthesis. Inside the parenthesis it it takes a callback function. The promise callback function has two parameters which are the *resolve* and *reject* functions.
We can create a promise using the Promise constructor. We can create a new promise using the key word `new` followed by the word `Promise` and followed by a parenthesis. Inside the parenthesis, it takes a `callback` function. The promise callback function has two parameters which are the _`resolve`_ and _`reject`_ functions.
```js
// syntax
@ -134,21 +133,21 @@ doPromise
console.log(result)
})
.catch(error => console.log(error))
```
```
```sh
["HTML", "CSS", "JS"]
```
```sh
["HTML", "CSS", "JS"]
```
The above promise has been settled with resolve.
Let us another example when the promise is settled with reject.
The above promise has been settled with resolve.
Let us another example when the promise is settled with reject.
```js
// Promise
const doPromise = new Promise((resolve, reject) => {
setTimeout(() => {
const skills = ['HTML', 'CSS', 'JS']
if (skills.indexOf('Node') !== -1) {
if (skills.includes('Node')) {
resolve('fullstack developer')
} else {
reject('Something wrong has happened')
@ -160,25 +159,26 @@ doPromise
.then(result => {
console.log(result)
})
.catch(error => console.log(error))
```
.catch(error => console.error(error))
```
```sh
Something wrong has happened
```
```sh
Something wrong has happened
```
## Fetch API
The Fetch API provides an interface for fetching resources (including across the network). It will seem familiar to anyone who has used XMLHttpRequest, but the new API provides a more powerful and flexible feature set. In this challenge we will use fetch to request url and APIS. In addition to that let us see demonstrate use case of promises in accessing network resources using the fetch API.
```js
const url = 'https://restcountries.eu/rest/v2/all' // countries api
const url = 'https://restcountries.com/v2/all' // countries api
fetch(url)
.then(response => response.json()) // accessing the API data as JSON
.then(data => { // getting the data
.then(data => {
// getting the data
console.log(data)
})
.catch(error => console.log(error)) // handling error if something wrong happens
.catch(error => console.error(error)) // handling error if something wrong happens
```
## Async and Await
@ -197,15 +197,16 @@ square(2)
Promise {<resolved>: 4}
```
The word *async* in front of a function means that function will return a promise. The above square function instead of a value it returned a promise.
The word _async_ in front of a function means that function will return a promise. The above square function instead of a value it returns a promise.
How do we access the value from the promise? To access the value from the promise, we will use the keyword *await*.
How do we access the value from the promise? To access the value from the promise, we will use the keyword _await_.
```js
const square = async function (n) {
return n * n
}
const value = await square(2)
console.log(value)
```
```sh
@ -217,15 +218,15 @@ Now, as you can see from the above example writing async in front of a function
Let us fetch API data using both promise method and async and await method.
- promise
```js
const url = 'https://restcountries.eu/rest/v2/all'
const url = 'https://restcountries.com/v2/all'
fetch(url)
.then(response => response.json())
.then(data => {
console.log(data)
})
.catch(error => console.log(error))
.catch(error => console.error(error))
```
- async and await
@ -237,19 +238,19 @@ const fetchData = async () => {
const countries = await response.json()
console.log(countries)
} catch (err) {
console.log(err)
console.error(err)
}
}
console.log('===== async and await')
fetchData()
```
🌕 You are real and you kept your promise and your reached to day 18. Keep your promise and settle the challenge with resolve. You are 18 steps a head to your way to greatness. Now do some exercises for your brain and for your muscle.
🌕 You are real and you kept your promise and you reached to day 18. Keep your promise and settle the challenge with resolve. You are 18 steps ahead to your way to greatness. Now do some exercises for your brain and muscles.
## Exercises
```js
const countriesAPI = 'https://restcountries.eu/rest/v2/all'
const countriesAPI = 'https://restcountries.com/v2/all'
const catsAPI = 'https://api.thecatapi.com/v1/breeds'
```

@ -1,16 +1,16 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:18 Day </title>
<title>30DaysOfJavaScript:18 Day </title>
</head>
<body>
<h1>30DaysOfJavaScript:18 Day</h1>
<h2>Promises</h2>
<h1>30DaysOfJavaScript:18 Day</h1>
<h2>Promises</h2>
<script src="./data/countries_data.js"></script>
<script src="./scripts/main.js"></script>
<script src="./data/countries_data.js"></script>
<script src="./scripts/main.js"></script>
</body>

@ -14,15 +14,15 @@
</div>
[<< Day 18](../18_Day_Promises/18_day_promise.md) | [Day 20 >>](../20_Day_Writing_clean_codes/20_day_writing_clean_codes.md)
[<< Day 18](../18_Day_Promises/18_day_promises.md) | [Day 20 >>](../20_Day_Writing_clean_codes/20_day_writing_clean_codes.md)
![Thirty Days Of JavaScript](../images/banners/day_1_19.png)
- [Day 19](#day-19)
- [Closure](#closure)
- [Exercises](#exercises)
- [Exercises: Level 1](#exercises-level-1)
- [Exercises: Level 2](#exercises-level-2)
- [Exercises: Level 3](#exercises-level-3)
- [Closure](#closure)
- [Exercises](#exercises)
- [Exercises: Level 1](#exercises-level-1)
- [Exercises: Level 2](#exercises-level-2)
- [Exercises: Level 3](#exercises-level-3)
# Day 19
@ -80,7 +80,7 @@ console.log(innerFuncs.minusOne)
```sh
1
1
0
```
🌕 You are making progress. Maintain your momentum, keep the good work. Now do some exercises for your brain and for your muscle.
@ -101,4 +101,4 @@ console.log(innerFuncs.minusOne)
🎉 CONGRATULATIONS ! 🎉
[<< Day 18](../18_Day_Promises/18_day_promise.md) | [Day 20 >>](../20_Day_Writing_clean_codes/20_day_writing_clean_codes.md)
[<< Day 18](../18_Day_Promises/18_day_promises.md) | [Day 20 >>](../20_Day_Writing_clean_codes/20_day_writing_clean_codes.md)

@ -1,16 +1,16 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:19 Day </title>
<title>30DaysOfJavaScript:19 Day </title>
</head>
<body>
<h1>30DaysOfJavaScript:19 Day</h1>
<h2>Writing Clean Code</h2>
<h1>30DaysOfJavaScript:19 Day</h1>
<h2>Writing Clean Code</h2>
<script src="./scripts/main.js"></script>
<script src="./scripts/main.js"></script>
</body>

@ -1,16 +1,16 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:20 Day </title>
<title>30DaysOfJavaScript:20 Day </title>
</head>
<body>
<h1>30DaysOfJavaScript:20 Day</h1>
<h2>Writing clean code</h2>
<h1>30DaysOfJavaScript:20 Day</h1>
<h2>Writing clean code</h2>
<script src="./scripts/main.js"></script>
<script src="./scripts/main.js"></script>
</body>

@ -18,21 +18,21 @@
![Thirty Days Of JavaScript](../images/banners/day_1_20.png)
- [Day 20](#day-20)
- [Writing clean code](#writing-clean-code)
- [JavaScript Style Guide](#javascript-style-guide)
- [Why we need style guide](#why-we-need-style-guide)
- [Airbnb JavaScript Style Guide](#airbnb-javascript-style-guide)
- [Standard JavaScript Style Guide](#standard-javascript-style-guide)
- [Google JavaScript Style Guide](#google-javascript-style-guide)
- [JavaScript Coding Conventions](#javascript-coding-conventions)
- [Conventions use in 30DaysOfJavaScript](#conventions-use-in-30daysofjavascript)
- [Variables](#variables)
- [Arrays](#arrays)
- [Functions](#functions)
- [Loops](#loops)
- [Objects](#objects)
- [Conditional](#conditional)
- [Classes](#classes)
- [Writing clean code](#writing-clean-code)
- [JavaScript Style Guide](#javascript-style-guide)
- [Why we need style guide](#why-we-need-style-guide)
- [Airbnb JavaScript Style Guide](#airbnb-javascript-style-guide)
- [Standard JavaScript Style Guide](#standard-javascript-style-guide)
- [Google JavaScript Style Guide](#google-javascript-style-guide)
- [JavaScript Coding Conventions](#javascript-coding-conventions)
- [Conventions use in 30DaysOfJavaScript](#conventions-use-in-30daysofjavascript)
- [Variables](#variables)
- [Arrays](#arrays)
- [Functions](#functions)
- [Loops](#loops)
- [Objects](#objects)
- [Conditional](#conditional)
- [Classes](#classes)
# Day 20
@ -140,10 +140,10 @@ const vegetables = ['Tomato', 'Potato', 'Cabbage', 'Onion', 'Carrot']
By now you are very familiar function declaration, expression function, arrow function and anonymous function. In this challenge we tend to use arrow function instead of other functions. Arrow function is not a replacement for other functions. In addition, arrow functions and function declarations are not exactly the same. So you should know when to use and when not. I will cover the difference in detail in other sections. We will use explicit return instead of implicit return if the function is one liner
```js
// function which prints full name of a person
// function which return full name of a person
const printFullName = (firstName, lastName) => firstName + ' ' + lastName
// function which calculate a square of a number
// function which calculates a square of a number
const square = (n) => n * n
// a function which generate random hexa colors
@ -180,6 +180,8 @@ const showDateTime = () => {
}
```
The `new Dat().toLocaleString()` can also be used to display current date time. The `toLocaleString()` methods takes different arguments. You may learn more about date and time from this [link](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString).
#### Loops
We coverer many types of loops in this challenges. The regular for loop, while loop, do while loop, for of loop, forEach loop and for in loop.
@ -196,7 +198,7 @@ const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']
// iterating an array using regular for loop
let len = names.length;
for(let i = 0; i < len; i++){
console.log(names[i].toUpperCas())
console.log(names[i].toUpperCase())
}
@ -218,7 +220,7 @@ const person = {
skills: ['HTML','CSS','JavaScript','React','Node','MongoDB','Python','D3.js'],
isMarried: true
}
for(const key in user) {
for(const key in person) {
console.log(key)
}
@ -236,7 +238,7 @@ const person = {
age: 250,
country: 'Finland',
city: 'Helsinki',
skills: ['HTML','CSS','JavaScript','React','Node','MongoDB','Python','D3.js'],
skills: ['HTML','CSS','JavaScript','TypeScript', 'React','Node','MongoDB','Python','D3.js'],
isMarried: true
}
// iterating through object keys
@ -244,7 +246,6 @@ for(const key in person) {
console.log(key, person[key])
}
```
#### Conditional

@ -19,31 +19,31 @@
![Thirty Days Of JavaScript](../images/banners/day_1_21.png)
- [Day 21](#day-21)
- [Document Object Model (DOM) - Day 1](#document-object-model-dom---day-1)
- [Getting Element](#getting-element)
- [Getting elements by tag name](#getting-elements-by-tag-name)
- [Getting elements by class name](#getting-elements-by-class-name)
- [Getting an element by id](#getting-an-element-by-id)
- [Getting elements by using querySelector methods](#getting-elements-by-using-queryselector-methods)
- [Adding attribute](#adding-attribute)
- [Adding attribute using setAttribute](#adding-attribute-using-setattribute)
- [Adding attribute without setAttribute](#adding-attribute-without-setattribute)
- [Adding class using classList](#adding-class-using-classlist)
- [Removing class using remove](#removing-class-using-remove)
- [Adding Text to HTML element](#adding-text-to-html-element)
- [Adding Text content using textContent](#adding-text-content-using-textcontent)
- [Adding Text Content using innHTML](#adding-text-content-using-innhtml)
- [Text Content](#text-content)
- [Inner HTML](#inner-html)
- [Adding style](#adding-style)
- [Adding Style Color](#adding-style-color)
- [Adding Style Background Color](#adding-style-background-color)
- [Adding Style Font Size](#adding-style-font-size)
- [Exercises](#exercises)
- [Exercise: Level 1](#exercise-level-1)
- [Exercise: Level 2](#exercise-level-2)
- [Exercise: Level 3](#exercise-level-3)
- [DOM: Mini project 1](#dom-mini-project-1)
- [Document Object Model (DOM) - Day 1](#document-object-model-dom---day-1)
- [Getting Element](#getting-element)
- [Getting elements by tag name](#getting-elements-by-tag-name)
- [Getting elements by class name](#getting-elements-by-class-name)
- [Getting an element by id](#getting-an-element-by-id)
- [Getting elements by using querySelector methods](#getting-elements-by-using-queryselector-methods)
- [Adding attribute](#adding-attribute)
- [Adding attribute using setAttribute](#adding-attribute-using-setattribute)
- [Adding attribute without setAttribute](#adding-attribute-without-setattribute)
- [Adding class using classList](#adding-class-using-classlist)
- [Removing class using remove](#removing-class-using-remove)
- [Adding Text to HTML element](#adding-text-to-html-element)
- [Adding Text content using textContent](#adding-text-content-using-textcontent)
- [Adding Text Content using innerHTML](#adding-text-content-using-innerhtml)
- [Text Content](#text-content)
- [Inner HTML](#inner-html)
- [Adding style](#adding-style)
- [Adding Style Color](#adding-style-color)
- [Adding Style Background Color](#adding-style-background-color)
- [Adding Style Font Size](#adding-style-font-size)
- [Exercises](#exercises)
- [Exercise: Level 1](#exercise-level-1)
- [Exercise: Level 2](#exercise-level-2)
- [Exercise: Level 3](#exercise-level-3)
- [DOM: Mini project 1](#dom-mini-project-1)
# Day 21
@ -57,7 +57,7 @@ We can access already created element or elements using JavaScript. To access or
```html
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>Document Object Model</title>
</head>
@ -74,7 +74,7 @@ We can access already created element or elements using JavaScript. To access or
#### Getting elements by tag name
**_getElementsByTagName()_**:takes a take name as a string parameter and this method returns an HTMLCollection object. An HTMLCollection is an array like object of HTML elements. The length property provides the size of the collection. Whenever we use this method we access the individual elements using index or after loop through each individual items. An HTMLCollection does not support all array methods therefore we should use regular for loop instead of forEach.
**_getElementsByTagName()_**:takes a tag name as a string parameter and this method returns an HTMLCollection object. An HTMLCollection is an array like object of HTML elements. The length property provides the size of the collection. Whenever we use this method we access the individual elements using index or after loop through each individual items. An HTMLCollection does not support all array methods therefore we should use regular for loop instead of forEach.
```js
// syntax
@ -84,7 +84,7 @@ document.getElementsByTagName('tagname')
```js
const allTitles = document.getElementsByTagName('h1')
console.log(allTitles) //HTMCollections
console.log(allTitles) //HTMLCollections
console.log(allTitles.length) // 4
for (let i = 0; i < allTitles.length; i++) {
@ -104,7 +104,7 @@ document.getElementsByClassName('classname')
```js
const allTitles = document.getElementsByClassName('title')
console.log(allTitles) //HTMCollections
console.log(allTitles) //HTMLCollections
console.log(allTitles.length) // 4
for (let i = 0; i < allTitles.length; i++) {
@ -133,15 +133,15 @@ The _document.querySelector_ method can select an HTML or HTML elements by tag n
**_querySelector_**: can be used to select HTML element by its tag name, id or class. If the tag name is used it selects only the first element.
```js
let firstTitle = document.querySelector('h1') // select the first available h2 element
let firstTitle = document.querySelector('h1') // select the first available h1 element
let firstTitle = document.querySelector('#first-title') // select id with first-title
let firstTitle = document.querySelector('.title') // select the first available h2 element with class title
let firstTitle = document.querySelector('.title') // select the first available element with class title
```
**_querySelectorAll_**: can be used to select html element by its tag name or class. It return a nodeList which is an array like object which support array methods. We can use **_for loop_** or **_forEach_** to loop through each nodeList elements.
**_querySelectorAll_**: can be used to select html elements by its tag name or class. It returns a nodeList which is an array like object which supports array methods. We can use **_for loop_** or **_forEach_** to loop through each nodeList elements.
```js
const allTitles = document.querySelectorAll('h1')
const allTitles = document.querySelectorAll('h1') # selects all the available h1 elements in the page
console.log(allTitles.length) // 4
for (let i = 0; i < allTitles.length; i++) {
@ -158,7 +158,7 @@ An attribute is added in the opening tag of HTML which gives additional informat
```js
const titles = document.querySelectorAll('h1')
titles[3].class = 'title'
titles[3].className = 'title'
titles[3].id = 'fourth-title'
```
@ -214,7 +214,7 @@ const titles = document.querySelectorAll('h1')
titles[3].textContent = 'Fourth Title'
```
#### Adding Text Content using innHTML
#### Adding Text Content using innerHTML
Most people get confused between _textContent_ and _innerHTML_. _textContent_ is meant to add text to an HTML element, however innerHTML can add a text or HTML element or elements as a child.
@ -234,7 +234,7 @@ It value we assign is going to be a string of HTML elements.
```html
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>JavaScript for Everyone:DOM</title>
</head>
@ -264,7 +264,7 @@ The innerHTML property can allow us also to remove all the children of a parent
```html
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>JavaScript for Everyone:DOM</title>
</head>
@ -351,7 +351,7 @@ As you have notice, the properties of css when we use it in JavaScript is going
### Exercise: Level 1
1. Create an index.html file and put four p elements as above: Get the first paragraph by using **_document.querySelector(tagname)_** and tag name
2. Get get each of the the paragraph using **_document.querySelector('#id')_** and by their id
2. Get each of the the paragraph using **_document.querySelector('#id')_** and by their id
3. Get all the p as nodeList using **_document.querySelectorAll(tagname)_** and by their tag name
4. Loop through the nodeList and get the text content of each paragraph
5. Set a text content to paragraph the fourth paragraph,**_Fourth Paragraph_**
@ -378,7 +378,7 @@ As you have notice, the properties of css when we use it in JavaScript is going
```html
<!-- index.html -->
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>JavaScript for Everyone:DOM</title>
</head>

@ -1,25 +1,25 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:21 Day </title>
<title>30DaysOfJavaScript:21 Day </title>
</head>
<body>
<div class="wrapper">
<h1>Asabeneh Yetayeh challenges in 2020</h1>
<h2>30DaysOfJavaScript Challenge</h2>
<ul>
<li>30DaysOfPython Challenge Done</li>
<li>30DaysOfJavaScript Challenge Ongoing</li>
<li>30DaysOfReact Challenge Coming</li>
<li>30DaysOfFullStack Challenge Coming</li>
<li>30DaysOfDataAnalysis Challenge Coming</li>
<li>30DaysOfReactNative Challenge Coming</li>
<li>30DaysOfMachineLearning Challenge Coming</li>
</ul>
</div>
<script src="./scripts/main.js"></script>
<div class="wrapper">
<h1>Asabeneh Yetayeh challenges in 2020</h1>
<h2>30DaysOfJavaScript Challenge</h2>
<ul>
<li>30DaysOfPython Challenge Done</li>
<li>30DaysOfJavaScript Challenge Ongoing</li>
<li>30DaysOfReact Challenge Coming</li>
<li>30DaysOfFullStack Challenge Coming</li>
<li>30DaysOfDataAnalysis Challenge Coming</li>
<li>30DaysOfReactNative Challenge Coming</li>
<li>30DaysOfMachineLearning Challenge Coming</li>
</ul>
</div>
<script src="./scripts/main.js"></script>
</body>

@ -1,21 +1,21 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:22 Day: Number Generator </title>
<title>30DaysOfJavaScript:22 Day: Number Generator </title>
</head>
<body>
<h1>Number Generator</h1>
<h2>30DaysOfJavaScript:DOM Day 2</h2>
<h3>Author: Asabeneh Yetayeh</h3>
<div class="wrapper">
<h1>Number Generator</h1>
<h2>30DaysOfJavaScript:DOM Day 2</h2>
<h3>Author: Asabeneh Yetayeh</h3>
<div class="wrapper">
</div>
</div>
<script src="./scripts/main.js"></script>
<script src="./scripts/main.js"></script>
</body>

@ -1,28 +1,28 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:22 Day: World Countries List</title>
<title>30DaysOfJavaScript:22 Day: World Countries List</title>
</head>
<body>
<header>
<h2>World Countries List</h2>
<header>
<h2>World Countries List</h2>
<h4 id="total-countries"></h4>
<h3>30DaysOfJavaScript:DOM-Day-2</h3>
<h3>Author: Asabeneh Yetayeh</h3>
<h4 id="total-countries"></h4>
<h3>30DaysOfJavaScript:DOM-Day-2</h3>
<h3>Author: Asabeneh Yetayeh</h3>
</header>
</header>
<div class="countries-container">
<div class="countries-wrapper">
<div class="countries-container">
<div class="countries-wrapper">
</div>
</div>
</div>
</div>
<script src="./data/countries.js"></script>
<script src="./js/script.js"></script>
<script src="./data/countries.js"></script>
<script src="./js/script.js"></script>
</body>

@ -1,16 +1,16 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:22 Day: Challenge Info</title>
<title>30DaysOfJavaScript:22 Day: Challenge Info</title>
</head>
<body>
<div class="wrapper">
</div>
<div class="wrapper">
</div>
<script src="./data/challenges_info.js"></script>
<script src="./js/script.js"></script>
<script src="./data/challenges_info.js"></script>
<script src="./js/script.js"></script>
</body>

@ -19,18 +19,18 @@
![Thirty Days Of JavaScript](../images/banners/day_1_23.png)
- [Day 22](#day-22)
- [DOM(Document Object Model)-Day 3](#domdocument-object-model-day-3)
- [Event Listeners](#event-listeners)
- [Click](#click)
- [Double Click](#double-click)
- [Mouse enter](#mouse-enter)
- [Getting value from an input element](#getting-value-from-an-input-element)
- [input value](#input-value)
- [input event and change](#input-event-and-change)
- [blur event](#blur-event)
- [keypress, keydow and keyup](#keypress-keydow-and-keyup)
- [Exercises](#exercises)
- [Exercise: Level 1](#exercise-level-1)
- [DOM(Document Object Model)-Day 3](#domdocument-object-model-day-3)
- [Event Listeners](#event-listeners)
- [Click](#click)
- [Double Click](#double-click)
- [Mouse enter](#mouse-enter)
- [Getting value from an input element](#getting-value-from-an-input-element)
- [input value](#input-value)
- [input event and change](#input-event-and-change)
- [blur event](#blur-event)
- [keypress, keydow and keyup](#keypress-keydow-and-keyup)
- [Exercises](#exercises)
- [Exercise: Level 1](#exercise-level-1)
# Day 22
@ -174,7 +174,7 @@ By now you are familiar with addEventListen method and how to attach event liste
List of events:
- click - when the element clicked
- dbclick - when the element double clicked
- dblclick - when the element double clicked
- mouseenter - when the mouse point enter to the element
- mouseleave - when the mouse pointer leave the element
- mousemove - when the mouse pointer move on the element

@ -1,21 +1,21 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:23 Day: Number Generator </title>
<title>30DaysOfJavaScript:23 Day: Number Generator </title>
</head>
<body>
<h1>Number Generator</h1>
<h2>30DaysOfJavaScript:DOM Day 2</h2>
<h3>Author: Asabeneh Yetayeh</h3>
<div class="wrapper">
<h1>Number Generator</h1>
<h2>30DaysOfJavaScript:DOM Day 2</h2>
<h3>Author: Asabeneh Yetayeh</h3>
<div class="wrapper">
</div>
</div>
<script src="./scripts/main.js"></script>
<script src="./scripts/main.js"></script>
</body>

@ -1,14 +1,14 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:23 Day: Keyboard Key </title>
<title>30DaysOfJavaScript:23 Day: Keyboard Key </title>
</head>
<body>
<script src="./scripts/main.js"></script>
<script src="./scripts/main.js"></script>
</body>

@ -1,39 +1,39 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>Solar System: Document Object Model:30 Days Of JavaScript</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700&display=swap" rel="stylesheet">
<title>Solar System: Document Object Model:30 Days Of JavaScript</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1>Calculate a weight of an object on a planet</h1>
<header>
<h1>Calculate a weight of an object on a planet</h1>
<input type="text" id="mass" placeholder="Mass in Kilogram" />
<select>
<option value='none'>--select planet-- </option>
</select>
<button>Calculate weight</button>
<input type="text" id="mass" placeholder="Mass in Kilogram" />
<select>
<option value='none'>--select planet-- </option>
</select>
<button>Calculate weight</button>
</header>
<main>
<div class="flex-container">
<div class="flex-item image">
<img src='./images/earth.png' class="planet-image" />
</div>
<div class="flex-item description"></div>
</header>
<main>
<div class="flex-container">
<div class="flex-item image">
<img src='./images/earth.png' class="planet-image" />
</div>
<div class="flex-item description"></div>
</div>
</div>
</main>
</main>
<script src="./scripts/main.js"></script>
<script src="./scripts/main.js"></script>
</body>
</html>

@ -2,36 +2,36 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>World Countries Data</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" />
<link rel="stylesheet" href="./css/style.css" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>World Countries Data</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" />
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<header id="countries">
<h2>World Countries Data</h2>
<p class="subtitle"></p>
<p class="feedback"></p>
</header>
<main>
<header id="countries">
<h2>World Countries Data</h2>
<p class="subtitle"></p>
<p class="feedback"></p>
</header>
<main>
<div class="wrapper">
<div class="graph-buttons">
<button class="population">Population</button>
<button class="languages">Languages</button>
</div>
<h4 class="graph-title"></h4>
<div class="graphs">
<div class="graph-wrapper" id="stat"></div>
</div>
</div>
</main>
<div class="wrapper">
<div class="graph-buttons">
<button class="population">Population</button>
<button class="languages">Languages</button>
</div>
<h4 class="graph-title"></h4>
<div class="graphs">
<div class="graph-wrapper" id="stat"></div>
</div>
</div>
</main>
<script src="./data/countries_data.js"></script>
<script src="./js/main.js"></script>
<script src="./data/countries_data.js"></script>
<script src="./js/main.js"></script>
</body>

@ -1,5 +1,5 @@
<div align="center">
<h1> 30 Days Of JavaScript: World Countrires Data Visualization</h1>
<h1> 30 Days Of JavaScript: World Countries Data Visualization</h1>
<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>
@ -14,13 +14,13 @@
</div>
[<< Day 24](../24_Day_Project_soloar_system/24_day_project_soloar_system.md) | [Day 26 >>](../26_Day_World_countries_data_visualization_2/26_day_world_countries_data_visualization_2.md)
[<< Day 24](../24_Day_Project_solar_system/24_day_project_solar_system.md) | [Day 26 >>](../26_Day_World_countries_data_visualization_2/26_day_world_countries_data_visualization_2.md)
![Thirty Days Of JavaScript](../images/banners/day_1_25.png)
- [Day 25](#day-25)
- [Exercises](#exercises)
- [Exercise: Level 1](#exercise-level-1)
- [Exercises](#exercises)
- [Exercise: Level 1](#exercise-level-1)
# Day 25

@ -1,16 +1,16 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:11 Day </title>
<title>30DaysOfJavaScript:11 Day </title>
</head>
<body>
<h1>30DaysOfJavaScript:11 Day</h1>
<h2>Destructuring and Spread</h2>
<h1>30DaysOfJavaScript:11 Day</h1>
<h2>Destructuring and Spread</h2>
<script src="./data/countries.js"></script>
<script src="./scripts/main.js"></script>
<script src="./data/countries.js"></script>
<script src="./scripts/main.js"></script>
</body>

@ -1,16 +1,16 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:11 Day </title>
<title>30DaysOfJavaScript:11 Day </title>
</head>
<body>
<h1>30DaysOfJavaScript:11 Day</h1>
<h2>Destructuring and Spread</h2>
<h1>30DaysOfJavaScript:11 Day</h1>
<h2>Destructuring and Spread</h2>
<script src="./data/countries_data.js"></script>
<script src="./scripts/main.js"></script>
<script src="./data/countries_data.js"></script>
<script src="./scripts/main.js"></script>
</body>

@ -1,16 +1,16 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:11 Day </title>
<title>30DaysOfJavaScript:11 Day </title>
</head>
<body>
<h1>30DaysOfJavaScript:11 Day</h1>
<h2>Destructuring and Spread</h2>
<h1>30DaysOfJavaScript:11 Day</h1>
<h2>Destructuring and Spread</h2>
<script src="./data/countries_data.js"></script>
<script src="./scripts/main.js"></script>
<script src="./data/countries_data.js"></script>
<script src="./scripts/main.js"></script>
</body>

@ -14,15 +14,15 @@
</div>
[<< Day 28](../28_Day_Mini_project_animating_characters/28_day_mini_project_animating_characters.md) | [Day 30>>](../30_Day_Mini_project_final/30_day_mini_project_final.md)
[<< Day 28](../28_Day_Mini_project_leaderboard/28_day_mini_project_leaderboard.md) | [Day 30>>](../30_Day_Mini_project_final/30_day_mini_project_final.md)
![Thirty Days Of JavaScript](../images/banners/day_1_29.png)
- [Day 29](#day-29)
- [Exercises](#exercises)
- [Exercise: Level 1](#exercise-level-1)
- [Exercise: Level 2](#exercise-level-2)
- [Exercise: Level 3](#exercise-level-3)
- [Exercises](#exercises)
- [Exercise: Level 1](#exercise-level-1)
- [Exercise: Level 2](#exercise-level-2)
- [Exercise: Level 3](#exercise-level-3)
# Day 29
@ -41,4 +41,4 @@
🎉 CONGRATULATIONS ! 🎉
[<< Day 28](../28_Day_Mini_project_animating_characters/28_day_mini_project_animating_characters.md) | [Day 30>>](../30_Day_Mini_project_final/30_day_mini_project_final.md)
[<< Day 28](../28_Day_Mini_project_leaderboard/28_day_mini_project_leaderboard.md) | [Day 30>>](../30_Day_Mini_project_final/30_day_mini_project_final.md)

@ -2,24 +2,24 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link
href="https://fonts.googleapis.com/css?family=Aldrich|Lato:300,400,700|Montserrat:300,400,500|Nunito:300,400,600|Oswald|Raleway+Dots|Raleway:300,400|Roboto:300,400,500&display=swap"
rel="stylesheet">
<script src="https://kit.fontawesome.com/ce3e7ed90f.js" crossorigin="anonymous"></script>
<title>30Days Of JavaScript: 29 Project 1</title>
<link
href="https://fonts.googleapis.com/css?family=Aldrich|Lato:300,400,700|Montserrat:300,400,500|Nunito:300,400,600|Oswald|Raleway+Dots|Raleway:300,400|Roboto:300,400,500&display=swap"
rel="stylesheet">
<script src="https://kit.fontawesome.com/ce3e7ed90f.js" crossorigin="anonymous"></script>
<title>30Days Of JavaScript: 29 Project 1</title>
</head>
<body>
<div>
<div>
</div>
</div>
<script src="./scripts/main.js"></script>
<script src="./scripts/main.js"></script>
</body>

@ -1,16 +1,16 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>30DaysOfJavaScript: Day 29 - Project 2 </title>
<title>30DaysOfJavaScript: Day 29 - Project 2 </title>
</head>
<body>
<script src="./data/countries_data.js"></script>
<script src="./scripts/main.js"></script>
<script src="./data/countries_data.js"></script>
<script src="./scripts/main.js"></script>
</body>

@ -16,20 +16,24 @@
<div>
<small>Support [**Asabeneh**](https://www.patreon.com/asabeneh?fan_landing=true) to create more educational materials</small>
[<img src = '../images/become_patreon.png' alt='become-asabeneh-patreon' title='click' />](https://www.patreon.com/asabeneh?fan_landing=true)
</div>
[<< Day 29](../29_Day_Mini_project_animating_characters/29_day_mini_project_animating_characters.md)
<div>
<small>Support the <strong>author</strong> to create more educational materials</small> <br />
<a href = "https://www.paypal.me/asabeneh"><img src='./../images/paypal_lg.png' alt='Paypal Logo' style="width:10%"/></a>
</div>
[<< Day 29](../29_Day_Mini_project_animating_characters/29_day_mini_project_animating_characters.md)
![Thirty Days Of JavaScript](../images/banners/day_1_30.png)
- [Day 30](#day-30)
- [Exercises](#exercises)
- [Exercise: Level 1](#exercise-level-1)
- [Exercise: Level 2](#exercise-level-2)
- [Exercise: Level 3](#exercise-level-3)
- [Exercises](#exercises)
- [Exercise: Level 1](#exercise-level-1)
- [Exercise: Level 2](#exercise-level-2)
- [Exercise: Level 3](#exercise-level-3)
- [Testimony](#testimony)
- [Support](#support)
# Day 30
@ -39,14 +43,13 @@
1. Create the following animation using (HTML, CSS, JS)
![Countries daata](./../images/projects/dom_mini_project_countries_object_day_10.1.gif)
![Countries data](./../images/projects/dom_mini_project_countries_object_day_10.1.gif)
2. Validate the following form using regex.
![form validation](./../images/projects/dom_mini_project_form_validation_day_10.2.1.png)
![form validation](./../images/projects/dom_mini_project_form_validation_day_10.2.png)
![form validation](./../images/projects/dom_mini_project_form_validation_day_10.2.png)
### Exercise: Level 2
@ -54,6 +57,16 @@
🌕 Your journey to greatness completed successfully. You reached high level of greatness. Now, you are much greater than ever before. I knew what it takes to reach to this level and you made to this point. You are a real hero. Now, it is time to celebrate your success with a friend or with a family. I am looking forward to seeing you in an other challenge.
~![Congratulations](./../images/projects/congratulations.gif)
## Testimony
Now it is time to support the author by expressing your thoughts about the Author and 30DaysOfJavaScript challenge. You can leave your testimonial on this [link](https://testimonial-vdzd.onrender.com//)
## Support
You can support the author to produce more educational materials
[![paypal](../images/paypal_lg.png)](https://www.paypal.me/asabeneh)
![Congratulations](./../images/projects/congratulations.gif)
[<< Day 29](../29_Day_Mini_project_animating_characters/29_day_mini_project_animating_characters.md)

@ -0,0 +1 @@
console.log('Salam, dünya!')

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<title>30 Günlük JavaScript dərsləri</title>
</head>
<body>
<h1>30 Günlük JavaScript:01 Gün</h1>
<h2>Giriş</h2>
<button onclick="alert('30 Günlük JavaScript dərslərinə xoş gəlmişsiniz');">Kliklə</button>
<script src="helloworld.js"></script>
<script src="introduction.js"></script>
<script src="variables.js"></script>
<script src="main.js"></script>
</body>
</html>

@ -0,0 +1 @@
console.log('30 Günlük JS dərsləri')

@ -0,0 +1,4 @@
// bir faylda müəyyən olunmuş dəyişənlər digərindən əlçatandır
console.log(firstName, lastName, country, city, age, isMarried)
console.log(gravity, boilingPoint, PI) // 9.81, 100, 3.14
console.log(name, job, live)

@ -0,0 +1,20 @@
// Müxtəlif verilənlər tipindən istifadə edərək dəyişənlərin yaradılmasə
let firstName = 'Asabeneh' // ad
let lastName = 'Yetayeh' // soyad
let country = 'Finland' // ölkə
let city = 'Helsinki' // paytaxt
let age = 100 // yaş
let isMarried = true
// ədəd tipli dəyişənlərin sabit açar sözü ilə yaradılması
const gravity = 9.81 // Fizikada istifadə olunan qravitasiya sabiti
const boilingPoint = 100 // Normal atmosfer təzyiqində suyun qaynama tempraturu
const PI = 3.14 // Geometrik sabit
// Yalnız bir açar sözü istifadə etməklə müxtəlif dəyişənlər vergüllə ayrılmış şəkildə yaradıla bilər
let name = 'Asabeneh', //ad
job = 'teacher', // vəzifə
live = 'Finland' // ölkə

@ -0,0 +1,662 @@
# 30 Günlük JavaScript dərsləri
| # Gün | Mövzular |
| ----- | :-------------------------------------------------------------------------------------------------------------------------------------------------: |
| 01 | [Giriş](./readMe.md) |
| 02 | [Data Types](./02_Day_Data_types/02_day_data_types.md) |
| 03 | [Booleans, Operators, Date](./03_Day_Booleans_operators_date/03_booleans_operators_date.md) |
| 04 | [Conditionals](./04_Day_Conditionals/04_day_conditionals.md) |
| 05 | [Arrays](./05_Day_Arrays/05_day_arrays.md) |
| 06 | [Loops](./06_Day_Loops/06_day_loops.md) |
| 07 | [Functions](./07_Day_Functions/07_day_functions.md) |
| 08 | [Objects](./08_Day_Objects/08_day_objects.md) |
| 09 | [Higher Order Functions](./09_Day_Higher_order_functions/09_day_higher_order_functions.md) |
| 10 | [Sets and Maps](./10_Day_Sets_and_Maps/10_day_Sets_and_Maps.md) |
| 11 | [Destructuring and Spreading](./11_Day_Destructuring_and_spreading/11_day_destructuring_and_spreading.md) |
| 12 | [Regular Expressions](./12_Day_Regular_expressions/12_day_regular_expressions.md) |
| 13 | [Console Object Methods](./13_Day_Console_object_methods/13_day_console_object_methods.md) |
| 14 | [Error Handling](./14_Day_Error_handling/14_day_error_handling.md) |
| 15 | [Classes](./15_Day_Classes/15_day_classes.md) |
| 16 | [JSON](./16_Day_JSON/16_day_json.md) |
| 17 | [Web Storages](./17_Day_Web_storages/17_day_web_storages.md) |
| 18 | [Promises](./18_Day_Promises/18_day_promises.md) |
| 19 | [Closure](./19_Day_Closures/19_day_closures.md) |
| 20 | [Writing Clean Code](./20_Day_Writing_clean_codes/20_day_writing_clean_codes.md) |
| 21 | [DOM](./21_Day_DOM/21_day_dom.md) |
| 22 | [Manipulating DOM Object](./22_Day_Manipulating_DOM_object/22_day_manipulating_DOM_object.md) |
| 23 | [Event Listeners](./23_Day_Event_listeners/23_day_event_listeners.md) |
| 24 | [Mini Project: Solar System](./24_Day_Project_solar_system/24_day_project_solar_system.md) |
| 25 | [Mini Project: World Countries Data Visulalization 1](./25_Day_World_countries_data_visualization_1/25_day_world_countries_data_visualization_1.md) |
| 26 | [Mini Project: World Countries Data Visulalization 2](./26_Day_World_countries_data_visualization_2/26_day_world_countries_data_visualization_2.md) |
| 27 | [Mini Project: Portfolio](./27_Day_Mini_project_portfolio/27_day_mini_project_portfolio.md) |
| 28 | [Mini Project: Leaderboard](./28_Day_Mini_project_leaderboard/28_day_mini_project_leaderboard.md) |
| 29 | [Mini Project:Animating characters](./29_Day_Mini_project_animating_characters/29_day_mini_project_animating_characters.md) |
| 30 | [Final Projects](./30_Day_Mini_project_final/30_day_mini_project_final.md) |
🧡🧡🧡 Xoş kodlamalar 🧡🧡🧡
<div>
<small><strong>Müəllifi</strong> dəstəkləməklə daha çox təhsil materialı yaratmasına kömək ola bilərsiniz</small> <br />
<a href = "https://www.paypal.me/asabeneh"><img src='../images/paypal_lg.png' alt='Paypal Logo' style="width:10%"/></a>
</div>
<div align="center">
<h1> 30 Günlük JavaScript: Giriş</h1>
<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>
<sub>Author:
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
<small> Yanvar, 2020</small>
</sub>
<div>
🇬🇧 [English](./readMe.md)
🇪🇸 [Spanish](./Spanish/readme.md)
🇷🇺 [Russian](./RU/README.md)
Az [Azerbaijan](./Azerbaijani/readMe.md)
</div>
</div>
</div>
[Gün 2 >>](./02_Day_Data_types/02_day_data_types.md)
![30 Günlük JavaScript dərsləri](../images/day_1_1.png)
- [30 Günlük JavaScript dərsləri](#30-days-of-javascript)
- [📔 Gün 1](#-day-1)
- [Giriş](#introduction)
- [İlkin tələblər](#requirements)
- [Hazırlıq](#setup)
- [Node.js yüklə](#install-nodejs)
- [Brauzer](#browser)
- [Google Chrome yüklənməsi](#installing-google-chrome)
- [Google Chrome brauzer konsolu açmaq](#opening-google-chrome-console)
- [Brauzer konsolunda kod yazılması](#writing-code-on-browser-console)
- [Console.log](#consolelog)
- [Console.log - birneçə arqument ilə](#consolelog-with-multiple-arguments)
- [Şərhlər](#comments)
- [Sintaksis](#syntax)
- [Riyazi əməliyyatlar](#arithmetics)
- [Kod editoru](#code-editor)
- [Visual Studio Code'un yüklənməsi](#installing-visual-studio-code)
- [Visual Studio Code istifadəsi](#how-to-use-visual-studio-code)
- [Veb səhifəyə JavaScript əlavə edilməsi](#adding-javascript-to-a-web-page)
- [Sətirdaxili (inline) skript](#inline-script)
- [Daxili (internal) skript](#internal-script)
- [Xarici skript](#external-script)
- [Birneçə xarici skript](#multiple-external-scripts)
- [Verilənlərin tiplərinə giriş](#introduction-to-data-types)
- [Ədəd tipləri](#numbers)
- [Sətir tipləri](#strings)
- [Məntiqi tiplər](#booleans)
- [Undefined](#undefined)
- [Null](#null)
- [Verilənlərin tiplərinin yoxlanılması](#checking-data-types)
- [Şərhlər (daha artıq)](#comments-again)
- [Dəyişənlər](#variables)
- [💻 Gün 1: Tapşırıqlar](#-day-1-exercises)
# 📔 Gün 1
## Giriş
30 günlük JavaScript proqramlaşdırma müsabiqəsində iştirak etmək qərarına gəldiyiniz üçün sizi **təbrik edirik**. Bu çağırışda siz JavaScript proqramçısı olmaq üçün lazım olan hər şeyi və ümumiyyətlə, proqramlaşdırmanın bütün konsepsiyasını öyrənəcəksiniz. Müsabiqənin sonunda siz 30DaysOfJavaScript proqramlaşdırma testini tamamlama sertifikatı alacaqsınız. Yardıma ehtiyacınız olarsa və ya başqalarına kömək etmək istəyirsinizsə, rəsmi [telegram qrupuna](https://t.me/ThirtyDaysOfJavaScript) qoşula bilərsiniz
**30GünlükJavaScript** çağırışı həm yeni başlayanlar, həm də təcrübəli JavaScript proqramçıları üçün bələdçidir. JavaScript-ə xoş gəlmisiniz. JavaScript internetin dilidir. Mən JavaScript istifadə etməkdən və öyrətməkdən həzz alıram və ümid edirəm ki, siz də bunu edəcəksiniz.
Bu addım-addım JavaScript dərslərində siz bəşəriyyət tarixində ən populyar proqramlaşdırma dili olan JavaScript-i öyrənəcəksiniz.JavaScript **_veb-saytlara interaktivlik əlavə etmək, mobil proqramlar, masaüstü proqramlar, oyunlar hazırlamaq_** üçün istifadə olunur və bu gün JavaScript hətta **_maşın öyrənməsi_****_AI (süni intellekt)_** üçün istifadə edilə bilər.
**_JavaScript (JS)_** son illərdə populyarlığı artıb və son altı ildir ki, ardıcıl olaraq ən məhşur və ən çox istifadə olunan proqramlaşdırma dilidir
Mənbə: Github.
## Tələblər
İlkin olaraq heç bir proqramlaşdırma biliyi tələb olunmur. Yalnız ehtiyacınız var:
1. Motivasiya
2. Kompüter
3. Internet
4. Brauzer
5. Kod yazmaq üçün editor
## Hazırlıq
İnanıram ki, sizdə proqramçı olmaq üçün kompüter, internet, motivasiya və güclü istək var. Bunlara sahibsinizsə, başlamaq üçün hər şeyiniz var.
### Node.js-in yüklənilməsi
İndi olmasa belə daha sonrakı addımlar üçün Node-a ehtiyaciniz var. Yükləmək üçün [buraya](https://nodejs.org/en/) istinad edin.
![Node Yüklənməsi](../images/download_node.png)
Yükləndikdən sonra quraşdırılma üçün
![Node quraşdırılması](../images/install_node.png)
Əməliyyat sistemi terminalımızı açaraq maşınımızda node quraşdırılıb-quraşdırılmadığını yoxlaya bilərik.
```sh
asabeneh $ node -v
v12.14.0
```
Bu dərsliyi hazırlayarkən mən Node versiyası 12.14.0-dan istifadə edirdim, lakin indi yükləmək üçün Node.js-in tövsiyə olunan versiyası v14.17.6-dır.
### Brauzer
Hazırda bir çox brauzer mövcud olsa da müəllif Google Chrome istifadəsini tövsiyə edir.
#### Google Chrome yükləmək
Google Chrome sizdə mövcud deyilsə bu [linkə](https://www.google.com/chrome/) istinad edin. Biz brauzer konsolunda kiçik JavaScript kodu yaza bilərik, lakin ciddi proqramların hazırlanması üçün brauzer konsolundan istifadə etmirik.
![Google Chrome](../images/google_chrome.png)
#### Google Chrome konsola giriş
Siz Google Chrome konsolunu brauzerin yuxarı sağ küncündə üç nöqtəyə klikləməklə, _Əlavə alətlər -> Tərtibatçı alətləri_ seçməklə və ya klaviatura qısa yolundan istifadə etməklə aça bilərsiniz. Mən qısayollardan istifadə etməyi üstün tuturam.
![Brauzerə giriş](../images/opening_developer_tool.png)
Klaviatura qısayolu ilə brauzer açmaq üçün
```sh
Mac
Command+Option+J
Windows/Linux:
Ctl+Shift+J
```
![Konsolu açmaq](../images/opening_chrome_console_shortcut.png)
Google Chrome konsolunu açdıqdan sonra işarələnmiş düymələri araşdırmağa çalışın. Biz vaxtımızın çox hissəsini Konsolda keçirəcəyik. Konsol JavaScript kodunuzun mövcud olduğu yerdir. Google Console V8 mühərriki JavaScript kodunuzu maşın koduna tərcümə edir.
Gəlin Google Chrome konsolunda JavaScript kodu yazaq:
![Konsolda kodun yazılması](../images/js_code_on_chrome_console.png)
#### Brauzer konsolunda kodun yazılması
Biz istənilən JavaScript kodunu Google konsolunda və ya istənilən brauzer konsolunda yaza bilərik. Bununla belə, bu problem üçün biz yalnız Google Chrome konsoluna diqqət yetiririk. Konsolu aşağıdakılardan istifadə edərək açın:
```sh
Mac
Command+Option+I
Windows:
Ctl+Shift+I
```
##### Console.log
İlk JavaScript kodumuzu yazmaq üçün biz daxili funksiyadan istifadə etdik **console.log()**. Biz arqumenti giriş məlumatları kimi ötürdük və funksiya çıxışı göstərir. Biz console.log() funksiyasında giriş məlumatı və ya arqument kimi "Salam, Dünya"nı ötürdük.
```js
console.log('Salam, Dünya!')
```
##### Console.log - birneçə arqument ilə
**console.log()** funksiyasi vergüllə ayrılmış istənilən sayda parametri qəbul edə bilər.
Sintaksis: **console.log(param1, param2, param3)**
![console log - birneçə arqument ilə](../images/console_log_multipl_arguments.png)
```js
console.log('Hello', 'World', '!')
console.log('HAPPY', 'NEW', 'YEAR', 2020)
console.log('Welcome', 'to', 30, 'Days', 'Of', 'JavaScript')
```
Yuxarıdakı kod parçasından göründüyü kimi, _console.log()_ çoxlu arqument qəbul edə bilər.
Təbrik edirik! Siz ilk JavaScript kodunuzu _console.log()_ istifadə edərək yazdınız.
##### Şərhlər
Kodumuza şərhlər əlavə edirik. Kodu daha oxunaqlı etmək və kodumuzda qeydlər daxil etmək üçün şərhlər çox vacibdir. JavaScript kodumuzun şərh hissəsini qeydə almır və maşın dilinə tərcümə etmir. JavaScript-də // ilə başlayan hər hansı mətn sətiri şərhdir və həmçinin buna /\* \*/ kimi əlavə edilən hər şey də şərhdir.
**Nümunə: Tək sətirli şərhlər**
// Bu bir şərhdir
// Bu da bir şərhdir
// Bu da həmçinin
**Nümunə: Çoxsətirli şərhlər**
/*
Çoxsətirli şərhlər
Çoxsətirli şərhlər bir neçə sətiri ehtiva edə bilir
JavaScript web-in dilidir
*/
##### Sintaksis
Proqramlaşdırma dilləri insan dillərinə bənzəyir. İngilis və ya bir çox başqa dil mənalı mesajı çatdırmaq üçün sözlər, ifadələr, cümlələr, mürəkkəb cümlələr və sair istifadə edir. Sintaksisin ingiliscə mənası _dildə yaxşı formalaşmış cümlələr yaratmaq üçün söz və ifadələrin düzülüşüdür_. Sintaksisin texniki tərifi kompüter dilində ifadələrin strukturudur. Proqramlaşdırma dillərində sintaksis var. JavaScript proqramlaşdırma dilidir və digər proqramlaşdırma dilləri kimi onun da öz sintaksisi var. JavaScript-in başa düşdüyü sintaksisi yazmasaq, o, müxtəlif növ xətaları bizə qaytaracaq. Müxtəlif növ JavaScript xətalarını daha sonra araşdıracağıq. Hələlik gəlin sintaksis səhvlərinə baxaq.
![Errorlar](../images/raising_syntax_error.png)
Mən qəsdən səhv etdim. Nəticədə, konsol sintaksis səhvlərini qaytarır. Əslində, sintaksis çox informativdir. Hansı növ səhvə yol verildiyini bildirir. Səhv rəyi təlimatını oxumaqla biz sintaksisi düzəldə və problemi həll edə bilərik. Proqramdakı xətaların müəyyən edilməsi və aradan qaldırılması prosesi "debugging" adlanır. Gəlin səhvləri düzəldək:
```js
console.log('Hello, World!')
console.log('Hello, World!')
```
İndiyə qədər biz _console.log()_ istifadə edərək mətnin necə göstərildiyini gördük. Əgər biz _console.log()_ istifadə edərək mətni və ya sətri çap ediriksə, mətn tək dırnaqlar, qoşa dırnaqlar və ya əks dırnaqlar (backtick) içərisində olmalıdır.
**Nümunə:**
```js
console.log('Hello, World!')
console.log("Hello, World!")
console.log(`Hello, World!`)
```
#### Riyazi əməliyyatlar
İndi gəlin ədəd tipli dəyişənlər üzərində Google Chrome konsolunda _console.log()_ istifadə edərək JavaScript kodlarının yazılmasına aid nümunələri məşq edək.
Mətnə əlavə olaraq JavaScript-dən istifadə edərək riyazi hesablamalar da edə bilərik. Aşağıdakı sadə hesablamaları aparaq.
Konsol **_console.log()_** funksiyası olmadan birbaşa arqumentlər qəbul edə bilər. Bununla belə, o, dərslikdə daha əvvəldə daxil edilmişdir, çünki bu nümunələrin əksəriyyəti funksiyadan istifadənin məcburi olduğu mətn redaktorunda baş verəcəkdir. Konsoldakı təlimatlarlı birbaşa nəzərdən keçirə bilərsiniz.
![Riyazi hesablamalar](../images/arithmetic.png)
```js
console.log(2 + 3) // Toplama
console.log(3 - 2) // Çıxma
console.log(2 * 3) // Vurma
console.log(3 / 2) // Bölmə
console.log(3 % 2) // Qalığın tapılması
console.log(3 ** 2) // Qüvvət üstü. Yəni, 3 ** 2 == 3 * 3
```
### Mətn redaktoru
Kodlarımızı brauzer konsoluna yaza bilərik, lakin bu, daha böyük layihələr üçün əlverişli deyil və ya bəzi hallarda mümkünsüzdür. Real iş mühitində proqramçılar kodlarını yazmaq üçün müxtəlif kod/mətn redaktorlarından istifadə edirlər. Bu 30 günlük JavaScript dərsliyində biz Visual Studio Code-dan istifadə edəcəyik.
#### Visual Studio Code-un yüklənməsi
Visual Studio Code çox məşhur açıq mənbəli mətn redaktorudur. [Visual Studio Code-u yükləmə](https://code.visualstudio.com/) tövsiyə edərdim, lakin başqa redaktorların tərəfdarısınızsa, əlinizdə olanları istifadə etməkdən çəkinməyin.
![Vscode](../images/vscode.png)
Yüklədikdən sonra mətn redaktoru artıq istifadəyə hazırdır.
#### Visual Studio Code-u necə istifadə etməli
Yüklənmə uğurla başa çatdıqdan sonra Visual Studio Code ikonuna 2 ardıcıl klik edərək onu başlada bilərsiniz
![Vscode istifadəçi interfeysi](../images/vscode_ui.png)
![Vscode-da proyekt əlavə etmək](../images/adding_project_to_vscode.png)
![Vscode-da mövcud proyekti açmaq](../images/opening_project_on_vscode.png)
![Skript faylı](../images/scripts_on_vscode.png)
![Live Server əlavəsinin yüklənilməsi](../images/vsc_live_server.png)
![Skriptin icrası](./images/running_script.png)
![Kodun icrası](../images/launched_on_new_tab.png)
## Veb səhifəyə JavaScript əlavə olunması
JavaScript kodu veb səhifəyə 3 üsulla əlavə edilə bilər:
- **_Sətirdaxili skript_**
- **_Daxili skript_**
- **_Xarici fayl ilə skript_**
- **_Birneçə xarici faylla skript_**
Aşağıdakı bölmələr veb səhifənizə JavaScript kodu əlavə etməyin müxtəlif yollarını göstərir.
### Sətirdaxili skript
İş masanızda və ya istənilən yerdə layihə qovluğu yaradın, onu 30DaysOfJS adlandırın və layihə qovluğunda **_index.html_** faylı yaradın. Sonra aşağıdakı kodu fayla əlavə edib onu brauzerdə açın, məsələn [Chrome](https://www.google.com/chrome/) ilə.
```html
<!DOCTYPE html>
<html>
<head>
<title>30DaysOfScript: Sətirdaxili skript</title>
</head>
<body>
<button onclick="alert('30DaysOfJavaScript dərsliyinə xoş gəlmişsiniz')">Kliklə</button>
</body>
</html>
```
İndi siz ilk daxili skriptinizi yazdınız. Biz _alert()_ daxili funksiyasından istifadə edərək pop-up xəbərdarlıq mesajı yarada bilərik.
### Daxili skript
Daxili skript _head_ və ya _body_ ilə yazıla bilər, lakin onu HTML sənədinin gövdəsinə yerləşdirməyə üstünlük verilir.
Əvvəlcə səhifənin baş hissəsinə yazaq.
```html
<!DOCTYPE html>
<html>
<head>
<title>30DaysOfScript: Daxili skript</title>
<script>
console.log('30DaysOfJavaScript-ə xoş gəlmişsiniz')
</script>
</head>
<body></body>
</html>
```
Çox vaxt daxili skripti belə yazırıq. JavaScript kodunun faylın gövdəsinə (body) bölməsinə yazılması ən çox üstünlük verilən seçimdir. console.log() saytından çıxışı görmək üçün brauzer konsolunu açın
```html
<!DOCTYPE html>
<html>
<head>
<title>30DaysOfScript: Daxili skript</title>
</head>
<body>
<button onclick="alert('30DaysOfJavaScript-ə xoş gəlmişsiniz');">Kliklə</button>
<script>
console.log('30DaysOfJavaScript-ə xoş gəlmişsiniz')
</script>
</body>
</html>
```
console.log() saytından çıxışı görmək üçün brauzer konsolunu açın
![JS kodu redaktorda](../images/js_code_vscode.png)
### Xarici kod skripti
Daxili skriptə bənzər şəkildə, xarici skript bağlantısı başlıqda (head) və ya gövdədə (body) ola bilər, lakin onun gövdəyə yerləşdirilməsinə üstünlük verilir.
Əvvəlcə .js uzantılı xarici JavaScript faylı yaratmalıyıq. .js uzantısı ilə bitən bütün fayllar JavaScript fayllarıdır. Layihə qovluğunda introduction.js adlı fayl yaradın və aşağıdakı kodu yazın və bu .js faylını gövdənin aşağı hissəsində əlaqələndirin.
```js
console.log('30 Günlük JS dərsləri')
```
_head_ hissəsində JavaScript faylına istinad:
```html
<!DOCTYPE html>
<html>
<head>
<title>30DaysOfJavaScript: Xarici skript faylı</title>
<script src="introduction.js"></script>
</head>
<body></body>
</html>
```
_body_ hissəsində JavaScript faylına istinad:
```html
<!DOCTYPE html>
<html>
<head>
<title>30DaysOfJavaScript: Xarici skript faylı</title>
</head>
<body>
<!-- Əvvəldə vurğuladığımız kimi həm head həm body hissəsində ola bilər -->
<!-- Lakin aşağıda göstərilən kimi (body hissəsində) olması arzuolunandır -->
<script src="introduction.js"></script>
</body>
</html>
```
console.log() nəticəsini görmək üçün brauzer konsolunu açın.
### Birneçə xarici skript faylına istinad
Biz həmçinin bir neçə xarici JavaScript faylına veb səhifədə istinad edə bilərik.
30DaysOfJS qovluğunda helloworld.js faylı yaradın və aşağıdakı kodu yazın.
```js
console.log('Salam, dünya!')
```
```html
<!DOCTYPE html>
<html>
<head>
<title>Birneçə xarici skript faylına istinad</title>
</head>
<body>
<script src="helloworld.js"></script>
<script src="introduction.js"></script>
</body>
</html>
```
_Main.js_ faylınız bütün digər skriptlərdən sonra daxil edilməlidir. Bunu xatırlamaq çox vacibdir.
![Birneçə fayl](../images/multiple_script.png)
## Verilənlər tiplərinə giriş
JavaScript-də və digər proqramlaşdırma dillərində müxtəlif növ məlumat növləri mövcuddur. Aşağıdakılar JavaScript primitiv verilən tipləridir:_String, Number, Boolean, undefined, Null_ və _Symbol_.
### Ədədlər (Numbers)
- İnteger: Integer (mənfi, sıfır və müsbət) ədədlər
Nümunə:
... -3, -2, -1, 0, 1, 2, 3 ...
- Tam hissəli ədədlər: Onluq (Decimal) ədədlər
Nümunə:
... -3.5, -2.25, -1.0, 0.0, 1.1, 2.2, 3.5 ...
### Sətir (String) tipli verilənlər
İki tək dırnaq, qoşa dırnaq və ya əks istiqamətli dırnaqlar arasında bir və ya daha çox simvol çoxluğudur.
**Nümunə:**
```js
'Asabeneh'
'Finland'
'JavaScript is a beautiful programming language'
'I love teaching'
'I hope you are enjoying the first day'
`We can also create a string using a backtick`
'A string could be just as small as one character as big as many pages'
```
### Məntiqi ifadələr
Məntiqi tiplər yalnız iki mümkün qiymətdən birini ala bilən ifadələrdir. İstənilən müqayisə əməliyyatı _true_ və ya _false_ qiymətlərinin birindən ibarət nəticə qaytarır.
**Nümunə:**
```js
true
false
```
### Undefined
JavaScript-də dəyişənə ilkin qiymət təyin etməsək, _undefined_ tipi verilir. Bundan əlavə, funksiya heç nə qaytarmırsa, susmaya görə _undefined_ qaytarır.
```js
let firstName
console.log(firstName) // undefined, çünki dəyişənə ilkin qiymət təyin edilməyib
```
### Null
JavaScript-də null boş dəyər deməkdir.
```js
let emptyValue = null
```
## Verilənlər tiplərinin yoxlanılması
Hər hansi müəyyən olunmuş dəyişənin tipini tapmaq üçün **typeof** operatoru istifadə oluna bilər. Nümunəyə nəzər yetirin.
```js
console.log(typeof 'Asabeneh') // string
console.log(typeof 5) // number
console.log(typeof true) // boolean
console.log(typeof null) // object type
console.log(typeof undefined) // undefined
```
## Şərhlər (daha artıq)
Bildiyimiz kimi JavaScript-də şərh yazmaq digər proqramlaşdırma dillərinə olduğu kimidir. Kodunuzu daha oxunaqlı etmək üçün şərhlər vacibdir.
Şərh əlavə etməyin iki yolu var:
- _Təksətirli şərhlər_
- _Çoxsətirli şərhlər_
```js
// let firstName = 'Asabeneh'; tək sətirli şərh
// let lastName = 'Yetayeh'; tək sətirli şərh
```
Çoxsətirli şərhlər:
```js
/*
let location = 'Helsinki';
let age = 100;
let isMarried = true;
This is a Multiple line comment
*/
```
## Dəyişıənlər
Dəyişənlər məlumatların yaddaşda saxlanması üçün istifadə olunur. Dəyişən elan edildikdə, yaddaş yeri rezerv olunur. Dəyişən təyin edildikdə, yaddaş sahəsində həmin verilənlər saxlanılır. Dəyişən elan etmək üçün biz _var_, _let_ və ya _const_ açar sözlərindən istifadə edirik.
Qİyməti proqram daxilində dəyişən dəyişənlər üçün biz _let_ istifadə edirik. Məlumatlar ümumiyyətlə dəyişməzsə, yəni sabitlər üçün biz _const_ istifadə edirik. Məsələn, PI sabiti üçün biz _const_ istifadə edə bilərik. Bu dərslikdə _var_ istifadə etməyəcəyik və mən sizə ondan istifadə etməyi tövsiyə etmirəm. Bu, tövsiyə edilən yol deyil və təhlükəli məqamlara yol aça bilər. Var, let və const haqqında digər bölmələrdə ətraflı danışacağıq. Hələlik yuxarıdakı izahat kifayətdir.
Düzgün JavaScript dəyişən adı aşağıdakı qaydalara əməl etməlidir:
- Rəqəmlə başlaya bilməz.
- $ və _ istisna olmaqla xüsusi simvolların istifadəsinə icazə verilmir.
- Adətən camelCase konvensiyasına əsaslanaraq adlandırılır.
- Sözlər və ya dəyişən adının hissələri arasında boşluq olmaz.
Düzgün dəyişən adları nümunələri:
```js
firstName
lastName
country
city
capitalCity
age
isMarried
first_name
last_name
is_married
capital_city
num1
num_1
_num_1
$num1
year2020
year_2020
```
Siyahıdakı birinci və ikinci dəyişənlər JavaScript-də elan etmək üçün camelCase konvensiyasına uyğundur. Bu dərslikdə biz camelCase dəyişənlərindən istifadə edəcəyik.
Yalnış elan olunmuş dəyişənlər:
```sh
first-name
1_num
num_#_1
```
Müxtəlif verilən tipləri ilə dəyişənləri elan edək. Dəyişən elan etmək üçün dəyişən adından əvvəl _let_ və ya _const_ açar sözündən istifadə etməliyik. Dəyişən adından sonra bərabər işarəsi (təyinat operatoru) və dəyəri (təyin edilmiş verilənlər) yazırıq.
```js
// Sintaksis
let nameOfVariable = value
```
**Nümunələr**
```js
// Müxtəlif verilənlər tipindən istifadə edərək dəyişənlərin yaradılmasə
let firstName = 'Asabeneh' // ad
let lastName = 'Yetayeh' // soyad
let country = 'Finland' // ölkə
let city = 'Helsinki' // paytaxt
let age = 100 // yaş
let isMarried = true
console.log(firstName, lastName, country, city, age, isMarried)
```
```sh
Asabeneh Yetayeh Finland Helsinki 100 true
```
```js
// ədəd tipli dəyişənlərin sabit açar sözü ilə yaradılması
let age = 100 // yaş
const gravity = 9.81 // Fizikada istifadə olunan qravitasiya sabiti
const boilingPoint = 100 // Normal atmosfer təzyiqində suyun qaynama tempraturu
const PI = 3.14 // Geometrik sabit
console.log(gravity, boilingPoint, PI)
```
```sh
9.81 100 3.14
```
```js
// Yalnız bir açar sözü istifadə etməklə müxtəlif dəyişənlər vergüllə ayrılmış şəkildə yaradıla bilər
let name = 'Asabeneh', //ad
job = 'teacher', // vəzifə
live = 'Finland' // ölkə
console.log(name, job, live)
```
```sh
Asabeneh teacher Finland
```
01_Giriş qovluqda _index.html_ faylını işə saldığınız zaman bunu əldə etməlisiniz:
![Gün 1](../images/day_1.png)
🌕 Təbrik edirik! Siz 1-ci günü yenicə tamamladınız. İndi beyniniz və əzələniz üçün bəzi fiziki hərəkətlər edin.
# 💻 Gün 1: Tapşırıqlar
1. _şərhlər kodu oxunaqlı edə bilər_ mətnini özündə ehtiva edən tək sətirli şərh yazın.
2. _30DaysOfJavaScript-ə xoş gəlmisiniz_ deyən başqa bir şərh yazın.
3. Şərhlərin kodu oxunaqlı, təkrar istifadəsi asan və məlumatlandırıcı edə biləcəyini deyən çoxsətirli şərh yazın
4. Variables.js faylı yaradın və dəyişənləri elan edin və sətir, boolean, undefined və null dəyişən tiplərini təyin edin
5. datatypes.js faylı yaradın və müxtəlif dəyişən tiplərini yoxlamaq üçün JavaScript **_typeof_** operatorundan istifadə edin.
6. İlkin qiymət təyin etmədən dörd dəyişəni elan edin
7. Təyin edilmiş ilkin qiymət olan dörd dəyişəni elan edin
8. Adınızı, soyadınızı, ailə vəziyyətinizi, ölkənizi və yaşınızı bir neçə sətirdə saxlamaq üçün dəyişənləri elan edin
9. Adınızı, soyadınızı, ailə vəziyyətinizi, ölkənizi və yaşınızı bir sətirdə saxlamaq üçün dəyişənləri elan edin
10. İki _myAge__yourAge_ dəyişənini elan edin və onlara ilkin qiymətlər təyin edin və brauzer konsoluna daxil olun.
```sh
I am 25 years old.
You are 30 years old.
```
🎉 TƏBRİK EDİRİK ! 🎉
[Gün 2 >>](./02_Day_Data_types/02_day_data_types.md)

Binary file not shown.

After

Width:  |  Height:  |  Size: 85 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 338 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 74 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 74 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 73 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 74 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 74 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 74 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 74 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 74 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 76 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 76 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

Some files were not shown because too many files have changed in this diff Show More

Loading…
Cancel
Save