JavaScript for Everyone

Introduction

Welcome to JavaScript. Congratulations for deciding to learn JavaScript. JavaScript for Everone is a guide for both beginner and advanced JavaScript developers.

In this step by step tutorial, I will teach you JavaScript, the most popular programming language in the history of mankind. You use JavaScript to add interactivity to websites, to develop mobile apps, desktop applications, games and nowadays JavaScript can be used for machine learning and AI. JavaScript (JS) has increased in popularity in recent years and has been the leading programming language for four consecutive years and is the most used programming language on Github.

Setup

First thing first, lets install text or code editor. Install code editor, it could be vscode, atom, bracket, notepad++ or others. I recommend vscode. Install either Chrome or Firefox if you didn't have yet.

Adding JavaScript to a web page

JavaScript can be added to a web pages in three ways:

Inline script
Internal script
External script The following sections shows different ways of adding JavaScript code to your web page.

Inline Script

Create a folder on your desktop or in any location and create an index.html file. Then paste the following code and open it in a browser, either in Chrome or Firefox.

<DOCTYPE html>
  <html>
    <head>
      <title>JavaScript for Everyone</title>
    </head>
    <body>
      <button onclick="alert('Welcome to JavaScript!');">Click Me</button>
    </body>
  </html>

Internal script

Internal script can be written in the head or the body but it is preferrable to put it on the body of the html document.

<DOCTYPE html>
  <html>
    <head>
      <title>JavaScript for Everyone</title>
    </head>
    <body>
      <script>
        console.log("Welcome to JavaScript for Everyone");
      </script>
    </body>
  </html>

External script

<DOCTYPE html>
  <html>
    <head>
      <title>JavaScript for Everyone</title>
    </head>
    <body>
      //it could be in header or in the body // Here is the recommended place to
      put the script
      <script src="introduction.js"></script>
    </body></html

Exercises:Setting Up your machine

Variables

Variables are containers of data. Variables store data in a memory location. When a variable is declared a memory location is reserved and when it is assigned to a value, the memory space will be filled. To declare a variable we use, var, let or const key word. For a variable which changes at different time we use let but if the data doesn't change at all we use const. For example PI, country name, gravity.

// Declaring different variables of different data types
let firstName = "Asabeneh"; // first name of a person
let lastName = "Yetayeh"; // last name of a person
let location = "Helsinki"; // capital city
const country = "Finland"; // country
let age = 100; // age in years
let isMarried = true;
console.log(firstName, lastName, location, country, age); //Asabeneh, Yetayeh, Helsinki, Finland, 100

// Declaring variables with number values
const gravity = 9.81; // earth gravity  in m/s2
const boilingPoint = 100; // water boiling point, temperature in oC
const PI = 3.14; // geometrical constant
console.log(gravity, boilingPoint, PI); // 9.81, 100, 3.14
// Variables can also be declaring in one line separated by comma
let name = "Asabeneh", //name of a person
  job = "teacher",
  live = "Finland";
console.log(name, job, live);

Exercise - 1 : Variables

Declare four variables without assigning values
Declare four variables with assigning values
Declare variables to store your first name, last name, marital status, country and age in multiple lines
Declare variables to store your first name, last name, marital status, country and age in a single line
Declare two variables myAge and yourAge and assign them initial values and log to browser console. Output:
```
I am 25 years old.
You are 30 years old.
```

Comments

Commenting in JavaScript is similar to other programming languages. Comments can help to make code more readable. There are two ways of commenting:

Single line commenting
Multiline commenting

// let firstName = 'Asabeneh'; single line comment
// let lastName = 'Yetayeh'; single line comment

Multiline commenting:

/*
    let location = 'Helsinki';
    let age = 100;
    let isMarried = true;
    This is a Multiple line comment
    */

Exercise - 2 : Comments

Write a single line comment which says, comments can make code readable
Write a multiline comment which says, comments can make code readable, easy to use and informative

Data Types

In JavaScript and also other programming languages there are different kinds of data types. The following are JavaScript primitive data types:String, Number, Boolean, undefined, Null and Symbol.

Exercises - 3 : Data Types

Declare variables and assign string, boolean, undefined and null data types
The JavaScript typeof operator uses to check different data types. Check the data type of each variables from question number 1.

Strings

Strings are text which are under single or double quote. Lets' see some examples of string:

let firstName = "Asabeneh";
let lastName = "Yetayeh";
let country = "Finland";
let city = "Helsinki";
let language = "JavaScript";
let job = "teacher";

String Concatination

// Declaring different variables of different data types
let firstName = "Asabeneh";
let lastName = "Yetayeh";
let country = "Finland";
let city = "Helsinki";
let language = "JavaScript";
let job = "teacher";

let fullName = firstName + " " + lastName; // concatination, merging two string together.
console.log(fullName);

let personInfoOne = fullName + ".I am " + age + ". I live in " + country; // ES5
let personInfoTwo = `I am ${fullName}.I am ${age}. I live in ${country}`; //ES6 - String interpolation method
let personInfoThree = `I am ${fullName}. I live in ${city}, ${country}. I am a ${job}. I teach ${language}.`;
console.log(personInfoOne);
console.log(personInfoTwo);

Exercise - 4 : String

Declare a variable name company and assign it to an initial value "Coding Academy".
Print the string on the browser console using console.log()
Print the length of the string on the browser console using console.log()
Change all the string to capital letters using toUpperCase() method
Change all the string to lowercase letters using toLowerCase() method
Cut(slice) out the first word of the string using slice, substr() or substring() method
Use substr to slice out the phase because because because in the following sentence:'You cannot end a sentence with because because because is a conjunction'
Check if the string contains a word Academy using includes() method
Split the string into array using split() method
Split the string Coding Academy at the space using split() method
"Facebook, Google, Microsoft, Apple, IBM, Oracle, Amazon" split the string at the comma and change it to an array.
Change Coding Academy to Microsoft Academy using replace() method.
What is character at index 10 in "Coding Academy" string use charAt() method.
What is the character code of A in 'Coding Academy' string using charCodeAt()
Use indexOf to determine the position of the first occurrence of c in Coding Academy
Use lastIndexOf to determine the position of the last occurrence of c in Coding Academy.
Use indexOf to find the position of the first occurrence of the word because in the following sentence:'You cannot end a sentence with because because because is a conjunction'
Use lastIndexOf to find the position of the first occurrence of the word because in the following sentence:'You cannot end a sentence with because because because is a conjunction'
Use search to find the position of the first occurrence of the word because in the following sentence:'You cannot end a sentence with because because because is a conjunction'
Use trim() to remove if there is trailing whitespace at the beginning and the end of a string.E.g " Coding Academy ".
Use startsWith() method with the string Coding Academy make the result true
Use endsWith() method with the string Coding Academy make the result true
Use match() method to find all the c’s in Coding Academy
Use match() to count the number all because's in the following sentence:'You cannot end a sentence with because because because is a conjunction'
Use concat() and merge 'Coding' and 'Academy' to a single string, 'Coding Academy'
Use repeat() method to print Coding Academy 5 times
Calculate the total annual income of the person by extract the numbers from the following text. 'He earns 5000 euro from salary per month, 10000 euro annual bonus, 15000 euro online courses per month.'

Numbers

Numbers are integers and decimal values which can do all the arithemtic operations Lets' see some examples of Numbers

let age = 35;
const gravity = 9.81; //graviational constant in  m/s2
let mass = 72; // mass in Killogram
const PI = 3.14; // pi a geometrical constant

//More Examples
const boilingPoint = 100; // temperature in oC, boiling point of water which is a constant
const bodyTemp = 37; // oc aveage human body temperature, which is a constant
console.log(age, gravity, mass, PI, boilingPoint, bodyTemp);

Math Object

In JavaScript the Math Object provides a lots of methods to work with numbers.

const PI = Math.PI
console.log(PI) // 3.141592653589793
console.log(Math.round(PI)) // 3;
console.log(Math.floor(PI)) // 3;
console.log(Math.ceil(PI)) // 4;

const randNum = Math.random() // creates random number between 0 to 0.999999
console.log(randNum)
// Let create random number between 0 to 10
const num = Math.floor(Math.random () * 11) // creates random number between 0 and 10
console.log(num)

//Absolute value
console.log(Math.abs(-10)) //10
//Square root
console.log(Math.sqrt(100)) // 10
console.log(Math.sqrt(2)); //1.4142135623730951
//
console.log(Math.E) // 2.718

Booleans

Boolean value is either true or false. Any comparisons return a boolean value which is either true or false.

let isLightOn = true;
let isRaining = false;
let hungery = false;
let isMarried = true;

Exercise - 5 : Booleans

Boolean value is either true or false.

Write three JavaScript statement which provide truthy value.
Write three JavaScript statement which provide falsy value.
Use all the following comparison operators to compare the following values: >, < >=, <=, !=, !==,===. Which are true or which are false ?
1. 4 > 3
2. 4 >= 3
3. 4 < 3
4. 4 <= 3
5. 4 == 4
6. 4 === 4
7. 4 != 4
8. 4 !== 4
9. 4 != '4'
10. 4 == '4'
11. 4 === '4'

Undefined

let firstName;
console.log(firstName); //not defined, because it is not assigned to a value yet

Null

let empty = null;
console.log(empty); // -> null , means no value

Exercise - 6 : Data types

String, number, boolean, null, undefined and symbol(ES6) are JavaScript primitive data types.

The JavaScript typeof operator uses to check different data types. Check the data type of each variables from question number 1.

Operators

Arthimetic Operators

Arthimetic operators are mathematical operators:+, -, _, /, _

let numOne = 4;
let numTwo = 3;
let sum = numOne + numTwo;
let diff = numOne - numTwo;
let mult = numOne * numTwo;
let div = numOne / numTwo;
let remainder = numOne % numTwo;
console.log(sum, diff, mult, div, remainder); // ->7,1,12,1.33,1

let PI = 3.14;
let radius = 100; // length in meter

const gravity = 9.81; // in m/s2
let mass = 72; // in Killogram
const boilingPoint = 100; // temperature in oC, boiling point of water
const bodyTemp = 37; // body temperature in oC

//Lets calculate area of a circle
const areaOfCircle = PI * radius * radius;
console.log(areaOfCircle); // -> 314 m
// Lets calculate weight of a substance
const weight = mass * gravity;
console.log(weigth); // -> 706.32 N(Newton)

//Concatinating string with numbers using string interpolation
/*
 The boiling point of water is 100 oC.
 Human body temperatue is 37 oC.
 The gravity of earth is 9.81 m/s2.
 */
console.log(
  `The boiling point of water is ${boilingPoint} oC.\nHuman body temperatue is ${body} oC.\nThe gravity of earth is ${gravity} m / s2.`
);

Exercises : Arthimetic Operators:

JavaScript arithmetic operators are addition(+), subtraction(-), multiplication(*), division(/), modulus(%), increment(++) and decrement(--).

let operandOne = 4;
let operandTwo = 3;

Using the above operands apply different JavaScript arithmetic operators

Logical Operators

The following symbols are the common logical operators: &&(ampersand) , ||(pipe) and !(negation). && gets true only if the two operands are true. || gets true either of the operand is true. ! negates true to false, false to true.

//&& ampersand example
const check = 4 > 3 && 10 > 5; // true and true -> true
const check = 4 > 3 && 10 < 5; // true and false -> false
const check = 4 < 3 && 10 < 5; // false and false -> false
//|| pipe or, example
const check = 4 > 3 || 10 > 5; // true and true -> true
const check = 4 > 3 || 10 < 5; // true and false -> true
const check = 4 < 3 || 10 < 5; // false and false -> false
//! Negation examples
let check = 4 > 3; // -> true
let check = !(4 > 3); // -> false
let isLightOn = true;
let isLightOff = !isLightOn; // -> false
let isMarried = !false; // -> true

Exercises: Logical Operators

Which are true or which are false ?

4 > 3 && 10 < 12
4 > 3 && 10 > 12
4 > 3 || 10 < 12
4 > 3 || 10 > 12
!(4 > 3)
!(4 < 3)
!(false)
!(4 > 3 && 10 < 12)
!(4 > 3 && 10 > 12)
!(4 === '4')

Comparison Operators

4 > 3;
4 >= 4;
4 < 3;
4 <= 3;
4 != 3;
4 !== "4";
4 == "4";
4 === "4";
4 === 4;

Exercise - 7 : Comparison Operators

Boolean value is either true or false. Any comparison return a boolean either true or false. Use all the following comparison operators to compare the following values: >, < >=, <=, !=, !==,===. Which are true or which are false ?

4 > 3
4 >= 3
4 < 3
4 <= 3
4 == 4
4 === 4
4 != 4
4 !== 4
4 != '4'
4 == '4'
4 === '4'

Conditionals

If

if (condition) {
  //code goes here
}

let isRaining = true;
if (isRaining) {
  console.log("Remember to take your rain coat.");
}

If Else

if (condition) {
  // if the condition meets
} else {
  // if condition doesn't meet
}
let isRaining = true;
if (isRaining) {
  console.log("You need a rain coat.");
} else {
  console.log("No need for a rain coat.");
}

If else if else

// if else if else
let weather = "sunny";
if (weather === "rainy") {
  console.log("You need a rain coat.");
} else if (weather === "cloudy") {
  console.log("It might be cold, you need a jacket.");
} else if (weather === "sunny") {
  console.log("Go out freely.");
} else {
  console.log("No need for rain coat.");
}

Switch

Switch an alternative for if else if else

var weather = "cloudy";
switch (weather) {
  case "rainy":
    console.log("You need a rain coat.");
    break;
  case "cloudy":
    console.log("It might be cold, you need a jacket.");
    break;
  case "sunny":
    console.log("Go out freely.");
    break;
  default:
    console.log(" No need for rain coat.");
    break;
}
// Switch More Examples
var dayUserInput = prompt("What day is it ?");
var day = dayUserInput.toLowerCase();
switch (day) {
  case "monday":
    console.log("Today is Monday");
    break;
  case "tuesday":
    console.log("Today is Tuesday");
    break;
  case "wednesday":
    console.log("Today is Wednesday");
    break;
  case "thursday":
    console.log("Today is Thursday");
    break;
  case "friday":
    console.log("Today is Friday");
    break;
  case "saturday":
    console.log("Today is Saturday");
    break;
  case "sunday":
    console.log("Today is Sunday");
    break;

  default:
    console.log("It is not a week day.");
    break;
}

Ternary Operators

Another way to write conditionals is using ternary operators.

let isRaining = true;
isRaining
  ? console.log("You need a rain coat.")
  : console.log("No need for a rain coat.");

Exercise - 8 : Conditionals

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 feedback to wait for the years he supposed to wait for. Output:
```
Enter your age: 30
You are old enough to drive.
```
Output:
```
Enter your age:15
You are left with 3 years to drive.
```
Compare the values of myAge and yourAge using if … else. Based on the comparison log to console who is older (me or you). Use prompt(“Enter your age:”) to get the age as input. Output:
```
Enter your age: 30
You are 5 years older than me.
```
If a is greater than b return a is greater than b else a is less than b. Output: sh let a = 4; let b = 3; 4 is greater than 3
Write a code which give grade students according to theirs scores:
- 80-100, A
- 70-89, B
- 60-69, C
- 50-59, D
- 0 -49, F
Check if the season is Autumn, Winter, Spring or Summer. If the user input is:
- September, October or November, the season is Autumn.
- December, January or February, the season is Winter.
- March, April or May, the season is Spring
- June, July or August, the season is Summer

Loops

In programming languages to carry out repetitive task we use different kinds of loop. The following examples are the commonly used loops.

For Loop

//For loop structure
for(initialization, condition, increment/decrement){
  // code goes here
}
for(let i = 0; i <= 5; i++){
  console.log(i)
}

While loop

let i = 0;
while (i <= 5) {
  console.log(i);
  i++;
}

Do while loop

let i = 0;
do {
  console.log(i);
  i++;
} while (i <= 5);

Exercises:Loops

Iterate 0 to 10 using for loop, do the same using while and do while loop.
Iterate 10 to 0 using for loop, do the same using while and do while loop.
Write a loop that makes seven calls to console.log to output the following triangle:
```
    #
    ##
    ###
    ####
    #####
    ######
    #######
```
Iterate the array, ['HTML', 'CSS', 'JavaScript'] using a for loop and print out the items.
Use for loop to iterate from 0 to 100 and print only even numbers
Use for loop to iterate from 0 to 100 and print only odd numbers
Use for loop to iterate from 0 to 100 and print and print the sum of all numbers.
```
The sum all numbers is 5050.
```
Use for loop to iterate from 0 to 100 and print the sum of all evens and the sum of all odds.
```
The sum of all evens is 2550. And the sum of all odds is 2500.
```

Arrays

In contrast to variables array can store multiple values. Each value in an array has an index and each index has a reference in a memory address. Each value can be accessed by using their indexes. The index of an array starts from zero and the last element is less by one from the lenght of the array.

const numbers = [0, 3.14, 9.81, 37, 98.6, 100]; // set of numbers
console.log(numbers.length) // => to know the size of the array, which is 6
console.log(numbers) // -> [0, 3.14, 9.81, 37, 98.6, 100]
console.log(numbers[0]) //  -> 0
console.log(numbers[5]) //  -> 100
let lastIdex = numbers.length - 1;
console.log(numbers[lastIndex]) -> 100
const webTechs = [
  "HTML",
  "CSS",
  "JavaScript",
  "React",
  "Redux",
  "Node",
  "MongoDB"
]; // List of web technologies
console.log(webTechs) // all the array items
console.log(webTechs.length) // => to know the size of the array, which is 7
console.log(webTechs[0]) //  -> HTML
console.log(webTechs[6]) //  -> MongoDB
let lastIdex = webTechs.length - 1;
console.log(webTechs[lastIndex]) -> MongoDB
const countries = [
  "Albania",
  "Bolivia",
  "Canada",
  "Denmark",
  "Ethiopia",
  "Finland",
  "Germany",
  "Hungary",
  "Ireland",
  "Japan",
  "Kenya"
]; // List of countries;
console.log(countries) // -> all countries in array
console.log(countries[0]) //  -> Albania
console.log(countries[10]) //  -> Kenya
let lastIdex = countries.length - 1;
console.log(countries[lastIndex]) -> // Kenya

const shoppingCart = [
  "Milk",
  "Mango",
  "Tomato",
  "Potato",
  "Avocado",
  "Meat",
  "Eggs",
  "Sugar"
]; // List of food products
console.log(shoppingCart) // -> all shoppingCart in array
console.log(shoppingCart[0]) //  -> Milk
console.log(shoppingCart[7]) //  -> Sugar
let lastIdex = shoppingCart.length - 1;
console.log(shoppingCart[lastIndex]) -> // Sugar

Exercise - 9 : Arrays

Declare an empty array;
Declare an array with more than 5 number of items
Find the length of your array
Get the first item, the middle item and the last item of the array
Declare an array called mixedDataTypes,put different data types and in your array and the array size should be greater than 5
Declare an array variable name itCompanies and assign initial values Facebook, Google, Microsoft, Apple, IBM, Oracle and Amazon.
Print the array using console.log()
Print the number of companies in the array
Print the first company, middle and last company
Print out each company
Change companies to uppercase and print them out
Print the array like as a sentence: Facebook, Google, Microsoft, Apple, IBM,Oracle and Amazon are big IT companies.
Check if a certain company exists in the itCompanies array. If it exist return the company else return a company is not found.
Filter out companies which have more than one 'o' without the filter method
Sort the array using sort() method
Reverse the array without reverse method
Reverse the array using reverse() method
Slice out the first 3 companies from the array
Slice out the last 3 companies from the array
Slice out the middle IT company or companies from the array
Remove the first IT company from the array
Remove the middle IT company or companies from the array
Remove the last IT company from the array
Remove all IT companies

More on Arrays

There are different methods to manipulate an array. These are some of the available methods to deal with arrays:Array,length, concat, indexOf, slice, splice, join, toString, includes, lastIndexOf, isArray, fill, push, pop, shift, unshift Array:To create an array.

const arr = Array(); // creates an an empty array
console.log(arr);
const eightEmptyValues = Array(8); // it creates eight empty values
console.log(eightEmptyValues); // [empty x 8]

fill:Fill all the array elements with a static value

const arr = Array(); // creates an an empty array
console.log(arr);
const eightXvalues = Array(8).fill("X"); // it creates eight element values
console.log(eightXvalue); // ['X', 'X','X','X','X','X','X','X']

  concat:To concatinate two arrays.

const firstList = [1, 2, 3];
const secondList = [4, 5, 6];
const thirdList = firstList.concat(secondList);
console.log(thirdList); // [1,2,3,4,5,6]

Length:To know the size of the array

const numbers = [1, 2, 3, 4, 5];
console.log(numbers.length); // -> 5

indexOf:To check if an item exist in an array. If it exist it returns the index else it returns -1.

const numbers = [1, 2, 3, 4, 5];
console.log(numbers.indexOf(5)); // -> 4
console.log(numbers.indexOf(0)); // -> -1
console.log(numbers.indexOf(1)); // -> 0
console.log(numbers.indexOf(6)); // -> -1

lastIndexOf:Give the position of the last item in the array. If it exist it returns the index else it returns -1.

const numbers = [1, 2, 3, 4, 5, 3, 1, 2];
console.log(numbers.lastIndexOf(2)); // -> 7
console.log(numbers.lastIndexOf(0)); // -> -1
console.log(numbers.lastIndexOf(1)); // -> 6
console.log(numbers.lastIndexOf(4)); // -> 3
console.log(numbers.lastIndexOf(6)); // -> -1

includes:To check if an item exist in an array. If it exist it returns the true else it returns false.

const numbers = [1, 2, 3, 4, 5];
console.log(numbers.includes(5)); // -> true
console.log(numbers.includes(0)); // -> false
console.log(numbers.includes(1)); // -> true
console.log(numbers.includes(6)); // -> false

Array.isArray:To check if the data type is an array

const numbers = [1, 2, 3, 4, 5];
console.log(Array.isArray(numbers)); // -> true
const number = 100;
console.log(Array.isArray(number)); // -> false

toString:Converts array to string

const numbers = [1, 2, 3, 4, 5];
console.log(numbers.toString()); // 1,2,3,4,5
const names = ["Asabeneh", "Matias", "Elias", "Brook"];
console.log(names.toString()); // Asabeneh,Matias,Elias,Brook

join:To join the elements of the array, the argument passed in the join method will be joined in the array and return as a string.

const numbers = [1, 2, 3, 4, 5];
console.log(numbers.join()); // 1,2,3,4,5
const names = ["Asabeneh", "Matias", "Elias", "Brook"];
console.log(names.join()); // Asabeneh,Matias,Elias,Brook
console.log(names.join("")); //AsabenehMatiasEliasBrook
console.log(names.join(" ")); //Asabeneh Matias Elias Brook
console.log(names.join(", ")); //Asabeneh, Matias, Elias, Brook
console.log(names.join(" # ")); //Asabeneh # Matias # Elias # Brook

Slice: To cut out a multiple items in range. It takes two paramters:starting and ending position. It doesn't include the ending position

  const numbers = [1,2,3,4,5];
  console.log(numbers.slice() // -> it copies all  item
  console.log(numbers.slice(0) // -> it copies all  item
  console.log(numbers.indexOf(0, numbers.length)) // it copies all  item
  console.log(numbers.slice(1,4)) // -> [2,3,4] // it doesn't include the ending position

Splice: It takes three parameters:Starting position, number of times to be removed and number items to be added.

  const numbers = [1, 2, 3, 4, 5];
  console.log(numbers.splice() // -> remove all items
  console.log(numbers.splice(0,1)) // remove the first item
  console.log(numbers.splice(3, 3, 6, 7, 8)) // -> [1,2,6,7,8] //it removes two item and replace three items

Push: adding item in the end

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
console.log(numbers); // -> [1,2,3,4,5]

Pop: Removing item in the end

const numbers = [1, 2, 3, 4, 5];
numbers.pop(); // -> remove one item from the end
console.log(numbers); // -> [1,2,3,4]

shift: Removing item in the beginning

const numbers = [1, 2, 3, 4, 5];
numbers.shift(); // -> remove one item from the beginning
console.log(numbers); // -> [2,3,4,5]

unshift: Adding item in the beginning

const numbers = [1, 2, 3, 4, 5];
numbers.unshift(0); // -> remove one item from the beginning
console.log(numbers); // -> [0,1,2,3,4,5]

Exercise -10 : Array Methods

const shoppingCart = ['Milk','Coffee','Tea', 'Honey'];
const todoList = [
{
	task:'Learn JavaScript',
	time:'4/3/2019 8:30',
	completed:true
	
},
{
	task:'Help some in need',
	time:'4/3/2019 4:00',
	completed:false
	
},
{
	task:'Do some physical exercises',
	time:'4/3/2019 6:00',
	completed:false
	
}]

Functions

A function is a block of code designed to perform a certain task. A function is declared by a function key word followed by a name, followed by parentheses (). A parentheses can take a parameter. If a function take a parameter it will be called with argument. A function can also take a default paramenter. A function can be declared or created in couple of ways:

Decleration function
Expression function
Anonymous function
Arrow function

Function Declaration

//function without parameter
function functionName(){
// code goes here
}
functionName() // calling function by its name and with parentheses

//function without parameter
function addTwoNumbers() {
  var numOne = 10;
  var numTwo = 20;
  var sum = numOne + numTwo;
  console.log(sum);
}
addTwoNumbers(); // function has to be called to be executed by it name

// function with one parameter
function functionName(parm1){
  //code goes ther
}
functionName(parm1); // during calling or invoking one argument needed
function areaOfCircle(r){
  let area = Math.PI * r * r;
  return area;
}
console.log(areaOfCircle(10)) // should be called with one argument
function square(number) {
  return number * number;
}
console.log(square(10));

// function with two parameters
function functionName(parm1, parm2){
  //code goes ther
}
functionName(parm1,parm2); // during calling or invoking two arguments needed
// Function without parater doesn' take input, so lets make a parameter with parameter
function sumTwoNumbers(numOne, numTwo) {
  var sum = numOne + numTwo;
  console.log(sum);
}
sumTwoNumbers(10, 20); // calling functions
// If a function doesn't return it doesn't store data, so it should return
function sumTwoNumbersAndReturn(numOne, numTwo) {
  var sum = numOne + numTwo;
  return sum;
}
console.log(sumTwoNumbersAndReturn(10, 20));
function printFullName(firstName, lastName) {
  return `${firstName} ${lastName}`;
}
console.log(printFullName("Asabeneh", "Yetayeh"));
console.log(printFullName("Dean", "Phan"));

// function with multiple parameters
function functionName(parm1, parm2, parm3,...){
  //code goes ther
}
functionName(parm1,parm2,parm3,...) // during calling or invoking three arguments needed


// this function takes array as a parameter and sum up the numbers in the array
function sumArrayValues(arr) {
  var sum = 0;
  for (var i = 0; i < arr.length; i++) {
    sum = sum + numbers[i];
  }
  return sum;
}
const numbers = [1, 2, 3, 4, 5];
console.log(sumArrayValues(numbers));
    //calling a function
    AddTwoNumbers(4,3)
    const areaOfCircle = (radius) => {
      let area = Math.PI * radius * radius;
      return area;
    }

Function Expression

//Declaration function
function square(n) {
  return n * n;
}
console.log(square(2)); // -> 4
// Function expression
const square = function(n) {
  return n * n;
};
console.log(square(2)); // -> 4

Anonymous Function

// Self invoking functions
(function(n) {
  return n * n;
})(10);

Arrow Function

const square = n => {
  return n * n;
};
console.log(square(2)); // -> 4
// if we have only one line, it can be written as follows
const square = n => n * n; // -> 4

Arrow Function vs Declaration Function

Exercise - 10 : Functions

Declare a function fullName and it print out your full name.
Declare a function fullName and now it takes firstName, lastName as a parameter and it returns your full - name.
Declare a function addNumbers and it takes two two parameters and it returns sum.
An area of a rectangle is calculated as follows: area = lenght x width. Write a function which calculates areaOfRectangle.
A perimeter of a rectangle is calculated as follows: perimeter= 2x(lenght + width). Write a function which calculates perimeterOfRectangle.
A volume of a rectangular prism is calculated as follows: volume = lenght x width x height. Write a function which calculates volumeOfRectPrism.
Area of a circle is calculated as follows: area = π x r x r. Write a function which calculates areaOfCircle
Circumference of a circle is calculated as follows: circumference = 2πr. Write a function which calculates circumOfCircle
Density of a substance is calculated as follows:density= mass/volume. Write a function which calculates density.
Speed is calculated by dividing the total distance covered by a moving object divided by the total amount of time taken. Write a fucntion which calculates a speed of a moving object, speed.
Weight of a substance is calculated as follows: weight = mass x gravity. Write a function which calculates weight.
Temperature in oC can be converted to oF using this formula: oF = (oC x 9/5) + 32. Write a function which converst oC to oF convertCelciusToFahrenheit.
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 obsese based the information given below.
- The same groups apply to both men and women.
- Underweight: BMI is less than 18.5
- Normal weight: BMI is 18.5 to 24.9
- Overweight: BMI is 25 to 29.9
- Obese: BMI is 30 or more
Write a function called checkSeason, it takes a month parameter and returns the season:Autumn, Winter, Spring or Summer.
Math.max returns its largest argument. Write a function findMax that takes three arguments and returns their maxiumum with out using Math.max method.
```
console.log(findMax(0, 10, 5));
10;
console.log(findMax(0, -10, -2));
0;
```
Linear equation is calculated as follows: ax + b = c. Write a function which calculates value of a linear equation, solveLinEquation.
Quadratic equation is calculated as follows: ax2 + bx + c = 0. Write a function which calculates value or values of a quadratic equation, solveQuadEquation.
Declare a function name printArray. It takes array as a parameter and it prints out each value of thearray.

Declare a functin name swapValues. This function swaps value of x to y.

swapValues(3, 4); // x => 4, y=>3
swapValues(4, 5); // x = 5, y = 4

Declare a function name reverseArray. It takes array as a parameter and it returns the reverse of the array (dont’ use method).

console.log(reverseArray([1, 2, 3, 4, 5]));
[5, 4, 3, 2, 1];
console.log(reverseArray(["A", "B", "C"]));
["C", "B", "A"];

Declare a function name capitalizeArray. It takes array as a parameter and it returns the - capitalizedarray.
Declare a function name addItem. It takes an item parameter and it returns an array after adding the item
Declare a function name removeItem. It takes an index parameter and it returns an array after removing an item
Declare a function name sumOfNumbers. It takes a number parameter and it adds all the numbers in that range.
Declare a function name sumOfOdds. It takes a number parameter and it adds all the odd numbers in that - range.
Declare a function name sumOfEven. It takes a number parameter and it adds all the even numbers in that - range.
Declare a function name evensAndOdds . It takes a positive integer as parameter and it counts number of evens and odds in the number.
```
evensAndOdds(100);
The number of odds are 50.
The number of evens are 51.
```
Write a funcition which takes any number of arguments and return the sum of the arguments
```
sum(1, 2, 3); // -> 6
sum(1, 2, 3, 4); // -> 10
```
Writ a function which generates a randomUserIp.
Write a function which generates a randomMacAddress
Declare a function name randomHexaNumberGenerator. When this function is called it generates a random hexadecimal number. The function return the hexadecimal number.
```
console.log(randomHexaNumberGenerator());
'#ee33df'
```
Declare a function name userIdGenerator. When this function is called it generates seven character id. The function return the id.
```
console.log(userIdGenerator());
41XTDbE
```
Modify question number n . Declare a function name userIdGeneratedByUser. It doesn’t 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.
```
userIdGeneratedByUser()
"kcsy2
SMFYb
bWmeq
ZXOYh
2Rgxf
"
userIdGeneratedByUser()
"1GCSgPLMaBAVQZ26
YD7eFwNQKNs7qXaT
ycArC5yrRupyG00S
UbGxOFI7UXSWAyKN
dIV0SSUTgAdKwStr
"
```
Write a function name rgbColorGenerator and it generates rgb colors.
```
rgbColorGenerator()
rgb(125,244,255)
```
Write a function arrayOfHexaColors which return any number of hexadecimal colors in an array.
Write a function arrayOfRgbColors which return any number of RGB colors in an array.
Write a function convertHexaToRgb which converts hexa color to rgb and it returns an rgb color.
Write a function convertRgbToHexa which converts rgb to hexa color and it returns an hexa color.

Write a function generateColors which can generate any number of hexa or rgb colors.

  generateColors('hexa', 3)
  ['#a3e12f','#03ed55','#eb3d2b']
  generateColors('hexa', 1)
  '#b334ef'

  generateColors('rgb', 3)
  ['rgb(5, 55, 175','rgb(50, 105, 100','rgb(15, 26, 80']
  generateColors('rgb', 1)
  'rgb(33,79, 176)'

Call your function shuffleArray, it takes an array as a parameter and it returns a shuffled array
Call your function factorial, it takes a whole number as a parameter and it return a factorial of the number
Call your function isEmpty, it takes a parameter and it checks if it is empty or not
Call your function sum, it takes any number of arguments and it returns the sum.
Write a function called sumOfArrayItems, it takes an array parameter and return the sum of all the items. Check if all the array items are number types. If not give return reasonable feedback.
Write a function called average, it takes an array parameter and returns the average of the items. Check if all the array items are number types. If not give return reasonable feedback.

Write a function called modifyArray takes array as parameter and modifies the fifth item of the array and return the array. If the array length is less than five it return 'item not found'.

console.log(modifyArray(["Avocado", "Tomato", "Potato","Mango", "Lemon","Carrot"]);
// →["Avocado", "Tomato", "Potato","Mango", "LEMON", "Carrot"]
console.log(modifyArray(["Google", "Facebook","Apple", "Amazon","Microsoft",  "IBM"]);
// →["Google", "Facebook","Apple", "Amazon","MICROSOFT",  "IBM"]
console.log(modifyArray(["Google", "Facebook","Apple", "Amazon"]);
// →"Not Found"

Write a function called isPrime, which checks if a number is prime number.
Write a functions which checks if all items are unique in the array.
Write a function which checks if all the itmes of the array are the same data type.
JavaScript variable name does not support special characters or symbols execpt $ or _. Write a function *isValidVariable which check if a variable is valid or invlaid variable.
Write a function which returns array of seven random numbers in a range of 0-9. All the numbers must be unique.

sevenRandomNumbers()[(1, 4, 5, 7, 9, 8, 0)];

Object

Everything can be an object and objects do have properties and properties have values.

Creating an object literal. To create an object literal, we use two curely brackets.

An empty object

const person = {};

Now, the person object has firstName, lastName, age, location, skills and getFullName properties. The getFullName is function inside the person object and we call it method. The this key word refers to the object itself.Example of object:

const person = {
  firstName: "Asabeneh",
  lastName: "Yetayeh",
  age: 100,
  location: "Helsinki",
  skills: [
    "HTML",
    "CSS",
    "JavaScript",
    "React",
    "Node",
    "MongoDB",
    "Python",
    "D3.js"
  ],
  getFullName: function() {
    return `${this.firstName}${this.lastName}`;
  }
};

const rectangle = {
  length: 20,
  width: 20,
  getArea: function() {
    return this.length * this.width;
  },
  getPerimeter: function() {
    return 2 * (this.length + this.width);
  }
};

Getting values from an object:

  const person = {
    firstName:'Asabeneh',
    lastName:'Yetayeh',
    age:100,
    location:'Helsinki',
    skills:['HTML', 'CSS', 'JavaScript', 'React','Node','MongoDB', 'Python', 'D3.js']
    getFullName:function() {
      return `${this.firstName}${this.lastName}`
    }
  }
  console.log(person.firstName);
  console.log(person.lastName);
  console.log(person.getFullName());
  // value can be accessed
  console.log(person['age');
  console.log(person['location']);

Setting a new keys in an object

  const person = {
    firstName:'Asabeneh',
    lastName:'Yetayeh',
    age:100,
    location:'Helsinki',
    skills:['HTML', 'CSS', 'JavaScript', 'React','Node','MongoDB', 'Python', 'D3.js']
    getFullName:function() {
      return `${this.firstName}${this.lastName}`
    }
  }
  person.nationality = 'Ethiopian'
  person.live = 'Finland';
  console.log(person)

Object Methods:

Object.assign: To copy an object without modifying the original object

const person = {
  name: "Asabeneh",
  age: 200,
  country: "Finland",
  skills: ["HTML", "CSS", "JS"],
  address: {
    street: "Heitamienkatu 16",
    pobox: 2002,
    city: "Helsinki"
  },
  getPersonInfo: function() {
    return `I am ${this.name} and I live in ${this.country}. I am ${this.age}.`;
  }
};

//Object methods: Object.assign, Object.keys, Object.values, Object.entreis
//hasOwnProperty

const copyPerson = Object.assign({}, person);
console.log(copyPerson);

Object.keys: To get keys of an objet as an array

const keys = Object.keys(copyPerson);
console.log(keys); //["name", "age", "country", "skills", "address", "getPersonInfo"]
const address = Object.keys(copyPerson.address);
console.log(address); //["street", "pobox", "city"]

Object.values:To get values of an object as an array

const values = Object.values(copyPerson);
console.log(values);

Object.entries:To get the keys and values in an array

const entries = Object.entries(copyPerson);
console.log(entries);

hasOwnProperty: To check if a specific key or property exist in an object

console.log(copyPerson.hasOwnProperty("name"));
console.log(copyPerson.hasOwnProperty("score"));

Date Object

In JavaScript current time and date is created using JavaScript Date Object. Some of the methods to extract date object values:getFullYear(), getMonths(), getDate(), getDay(), getHours(), getMinutes

const now = new Date ();
const year = now.getFullYear(); // return year
const month = now.getMonth() + 1; // return month(0 - 11)
const date = now.getDate(); // return date (1 - 31)
const hours = now.getHours(); // return number (0 - 23)
const minutes = now.getMinutes();// return number (0 -59)
console.log(`${date}/${month}/${year} ${hours}:${minutes}`)

Exercises:

Use the new Date() object to get month, date, year, hour and minute.
Write a function name displayDateTime which display time in this format: 10/03/2019 04:08
```
displayDateTime()
10/03/2019 04:08
```

Exercises:Objects

Create an empty object called dog
Print the the dog object on the console
Add name, legs, color, age and bark properties for the dog object. The bark property is a method which return woof woof
Get name, legs, color, age and bark value from the dog object
Set new properties the dog object: breed, getDogInfo
Create an object literal called personAccount. It has firstName, lastName, incomes, expenses properties and it has totalIncome, totalExpense, acountInfo,addIncome, addExpence and accountBalance methods. Incomes is a set of incomes and its description and the same for expenses.

Count logged in users,count users having greater than equal to 50 points from the following object.

const users = {
  Alex: {
    email: "alex@alex.com",
    skills: ["HTML", "CSS", "JavaScript"],
    age: 20,
    isLoggedIn: false,
    points: 30
  },
  Asab: {
    email: "asab@asab.com",
    skills: ["HTML", "CSS", "JavaScript", "React", "Redux", "Node.js"],
    age: 25,
    isLoggedIn: false,
    points: 50
  },
  Brook: {
    email: "daniel@daniel.com",
    skills: ["HTML", "CSS", "JavaScript", "React", "Redux"],
    age: 30,
    isLoggedIn: true,
    points: 50
  },
  Daniel: {
    email: "daniel@alex.com",
    skills: ["HTML", "CSS", "JavaScript", "Python"],
    age: 20,
    isLoggedIn: false,
    points: 40
  },
  John: {
    email: "john@john.com",
    skills: ["HTML", "CSS", "JavaScript", "React", "Redux", "Node.js"],
    age: 20,
    isLoggedIn: true,
    point: 50
  },
  Thomas: {
    email: "thomas@thomas.com",
    skills: ["HTML", "CSS", "JavaScript", "React"],
    age: 20,
    isLoggedIn: false,
    points: 40
  }
};

Set your name in the users object without modifying the original users object
Get all keys or properties of users object
Get all the values of users object
** Develop a small JavaScript library.

Functional Programming

forEach: Iterate an array elements and use for array. It takes a callback function with elements and index parameter.

arr.forEach(function(element, index){
  console.log(index, element)
})
// The above code can be written using arrow function
arr.forEach((element, index) => {
  console.log(index, element)
})
// The above code can be written using arrow function and explicit return
arr.forEach((element, index) => console.log(index, element));

map: Iterate an array elements and modify the array elements. It takes a callback function with elements and index parameter and return the modified array.

const modifiedArray = arr.map(function(element,index){
  return element
});
/*Arrow function and explicit return
const modifiedArray = arr.map((element,index) => element);
*/
//Example
const numbers = [1,2,3,4,5];
const numbersSquare = numbers.map((num) => num * num) 
console.log(numbersSquare) // [1,4,9,16,25]
const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook'];
const namesToUpperCase = names.map((name) => name.toUpperCase());
console.log(namesToUpperCase) //["ASABENEH", "MATHIAS", "ELIAS", "BROOK"]
const countries = [
  "Albania",
  "Bolivia",
  "Canada",
  "Denmark",
  "Ethiopia",
  "Finland",
  "Germany",
  "Hungary",
  "Ireland",
  "Japan",
  "Kenya"
];
const countriesToUpperCase = countries.map(function(country){
  return country.toUpperCase();
});
console.log(countriesToUpperCase)
// ["ALBANIA", "BOLIVIA", "CANADA", "DENMARK", "ETHIOPIA", "FINLAND", "GERMANY", "HUNGARY", "IRELAND", "JAPAN", "KENYA"]
/*
// Arrow function
const countriesToUpperCase = countries.map((country) => {
  return country.toUpperCase();
})
//Explicit return arrow function
const countriesToUpperCase = countries.map(country => country.toUpperCase());
*/

Filter: Filter out itmes which full fill filtering conditions

//Filter countries containing land
const countriesContainingLand = countries.filter(country => country.includes('land'));
console.log(countriesContainingLand )  //["Finland", "Ireland"]
const countriesEndByia = countries.filter(country => country.includes('ia'));
console.log(countriesEndByia) //["Albania", "Bolivia","Ethiopia"]
const countriesHaveFiveLetters = countries.filter(country => country.length === 5);
console.log(countriesHaveFiveLetters ) //  ["Japan", "Kenya"]
const scores = [{name:'Asabeneh', score:95},{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) //[{name: "Asabeneh", score: 95}, {name: "Martha", score: 85},{name: "John", score: 100}]

reduce: Reduce takes a callback function. The call back function takes accumulator and current value as a parameter and returns a single value:

  const numbers = [1,2,3,4,5];
  const sum = numbers.reduce((accum, curr)=> accum + curr);
  console.log(sum); //15

every: Check if all the elements are similar in one aspect. It returns boolean

const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook'];
const bools = [true, true, true, true];
const result = bools.every((b)=> {
  return b === true;
});
console.log(result) //true
const checkType = names.every((name) => typeof name ==='string');
console.log(checkDataTypes) // true;

some: Check if some of the elements are similar in one aspect. It returns boolean

const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook'];
const bools = [true, true, true, true];
const result = bools.some((b)=> {
  return b === true;
});
console.log(result) //true
const checkType = names.some((name) => typeof name ==='number');
console.log(checkDataTypes) // false

find: Return the first element which satisfies the condition

const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook'];
const ages = [24, 22,25,32,35,18];
const result = names.find(name =>  name.length > 7);
console.log(result) // Asabeneh
const age = ages.find((age) => age < 20);
console.log(age) // 18

findIndex: Return the position of the first element which satisfies the condition

const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook'];
const ages = [24, 22,25,32,35,18];
const result = names.findIndex(name =>  name.length > 7);
console.log(result) // 0
const age = ages.findIndex((age) => age < 20);
console.log(age) // 5

sort: The sort methods arranges the array elements either ascending or decending order. By default, the sort() method sorts values as strings.This works well for string array items but not for numbers. If number values are sorted as strings and it give us wrong result. Sort method modify the original array. It is recommended to copy the original document before you start sorting.

Sorting string values

const products = ['Milk', 'Coffee', 'Sugar', 'Honey', 'Apple', 'Carrot'];
console.log(products.sort()) // ["Apple", "Carrot", "Coffee", "Honey", "Milk", "Sugar"]

//Now the original products array  is also sorted

Sorting Numeric values

As you can see in the example below, 100 came first after sorted in ascending order. Sort converts items to string , since '100' and other numbers compared, 1 which the beginning of the string '100' became the smallest. To avoid this, we use a compare call back function inside the sort method, which return a negative, zero or positive.

const numbers = [9.81, 3.14, 100, 37]
// Using sort method to sort number items provde a wrong result. see below
console.log(numbers.sort()) //[100, 3.14, 37, 9.81]
numbers.sort(function(a, b) {
return a - b;
})


console.log(numbers) // [3.14, 9.81, 37, 100]
numbers.sort(function(a, b) {
return b - a;
});
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.

objArr.sort(function(a, b) {
  if (a.key < b.key) return -1;
  if (a.key > b.key) return 1;
  return 0;
});
// or 
objArr.sort(function(a, b) {
  if (a['key'] < b['key']) return -1;
  if (a['key'] > b['key']) return 1;
  return 0;
});
const users = [{name:"Asabeneh", age:150}, {name:"Brook", age:50}, {name:"Eyo", age:100},{name:"Elias", age:22}];
users.sort((a, b) => {
  if (a.age < b.age) return -1;
  if (a.age > b.age) return 1;
  return 0;
});
console.log(users); // sorted ascending
//[{…}, {…}, {…}, {…}]

Exercises:

  const countries = ['Estonia', 'Finland', 'Sweden', 'Denmark', 'Norway', 'IceLand'];
  const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook'];
  const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Explain the difference between forEach, map, filter, and reduce.
Define a call function before you them in forEach, map, filter or reduce.
Use forEach to console.log each country in the countries array.
Use forEach to console.log each name in the names array.
Use forEach to console.log each number in the numbers array.
Use map to create a new array by changing each country to uppercase in the countries array;
Use map to create a new array by changing each number to square in the numbers array
Use map to change to each name to uppercase in the names array
Use filter to filter out countries containing land.
Use filter to filter out countries having six character.
Use filter to filter out countries containing six letters and more in the counntry array.
Use filter to filter out country start with 'E';
Chain two or more array iterators(eg. arr.map(callback).filter(callback).reduce(callback))
Declare a function called getStringLists which takes an array as a parameter and then returns an array only with string items.
Use reduce to sum all the numbers in the numbers array.
Use reduce to concatinate all the countries and to produce this sentence: Estonia, Finland, Sweden, Denmark, Norway, and IceLand are north European countries
Explain the difference between some and every
Use some to check if some names' length greater than seven in names array
Use every to check if all the countries contain the word land
Explain the difference between find and findIndex.
Use find to find the first country containing only six letters in the countries array
Use findIndex to find the position of the first country containing only six letters in the countries array
Use findIndex to find the position of Norway if it doesn't exist in the array you will get -1.
Use findIndex to find the position of Russia if it doesn't exist in the array you will get -1.
Declare a function called categorizeCountries which returns an array of countries which have some common pattern(you find the countries array in this repository as countries.js(eg 'land', 'ia', 'island','stan')).
Create a function which return an array of objects, which is the letter and the number of times the letter use to start with a name of a country.
Declare a getFirstTenCountries function and return an array of ten countries. Use different functional programming to work on the countries.js array
Declare a getLastTenCountries function which which returns the last ten countries in the countries array.
Find out which letter is used many times as intial for a country name from the conuntries array (eg. Finland, Fiji, France etc)
Use the countries information, in the data folder. Sort countries by name, by capital, by population
Sort out the ten most spoken langauges by location.
Sort out the ten most populated countries.

Destructuring and Spread

Destructuring is a way to unpack arrays, and objects and assigning to a distinct variable.

Destructing Arrays

  const numbers = [1, 2,3];
  let [numOne, numTwo, numThree] = numbers;
  console.log(numOne, numTwo, numThree) // 1,2,3
  const names = ['Asabeneh', 'Brook', 'David', 'John']
  let [firstPerson, secondPerson, ThirdPerson, fourth Person] = names;
  console.log(firstName, secondPerson,thirdPerson, fourthPerson) //Asabeneh, Brook, David, John
  const scientificConstants = [2.72, 3.14, 9.81, 37, 100];
  let [e, pi, gravity, bodyTemp, boilingTemp] = scientificConstants
  console.log(e,pi,gravity, bodyTemp, boilingTemp) //2.72, 3.14, 9.81, 37, 100

If we like to skip on of the values in the array we use additional comma. The comma helps to omit the value at that index

  const numbers = [1, 2,3];
  let [numOne, , , numThree] = numbers; //2 is omitted
  console.log(numOne,, numThree) // 1,2,3
  const names = ['Asabeneh', 'Brook', 'David', 'John']
  let [, secondPerson, , fourth Person] = name; // first and third person is omitted
  console.log(secondPerson, fourthPerson) //Brook, John

We can use default value in case the value of array for that index is undefined:

const names = [undefined, 'Brook', 'David'];
let [firstPerson = 'Asabeneh', secondPerson, thirdPerson, fourthPerson = 'John' ] = names;
console.log(firstPerson, secondPerson, thirdPerson, fourthPerson) // Asabeneh Brook David John

Destructuring Object

When we destructure the name of the variable we use to destructure should be exactly the same us the key or property of the object. See example below.

const rectangle = {
  width: 20, 
  height:10,
  area: 200
}
let {width, height, area, perimeter} = rectangle;
console.log(width, height, area, perimeter) //20 10 200 undefined

Renaming during structuring

const rectangle = {
  width: 20, 
  height:10,
  area: 200
}
let {width:w, heigh:h, area:a, perimeter:p} = rectangle;
console.log(w, h, a, p) //20 10 200 undefined

If the key is not found in the object the variable will be assinged to undefined. In case, the key is not in the object we can give a default value during declaration. See the example.

const rectangle = {
  width: 20, 
  height:10,
  area: 200
}
let {width, heigh, 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
const rectangle = {
  width: 30, 
  height:10,
  area: 200,
  perimeter:80
}
let {width, heigh, area, perimeter = 60} = rectangle;
console.log(width, height, area, perimeter) //20 10 200 80

Destructuring keys as a function paramters. Lets create a function which take a rectangle object and it return a perimeter of a rectangle.

    // Without destructuring
    const rect = {
      width:20,
      height:10
    }
    const calculatePerimeter = (rectangle) => {
      return 2 * (rectangle.width + rectangle.height)
    }
    console.log(calculatePerimeter(rect)) // 60
    //with destructuring

     const calculatePerimeter = ({width, height}) => {
      return 2 * (width + height)
    }

    console.log(calculatePerimeter(rect)) // 60

    //Another Example
const person = {
  firstName: "Asabeneh",
  lastName: "Yetayeh",
  age: 200,
  country: "Finland",
  job: "Instructor and Developer",
  skills: [
    "HTML",
    "CSS",
    "JavaScript",
    "React",
    "Redux",
    "Node",
    "MongoDB",
    "Python",
    "D3.js"
  ],
  languages: ["Amharic", "English", "Suomi(Finnish)"]
};
// Lets create a function which give information about the person object without destructuring

const getPersonInfo = obj => {
  const skills = obj.skills;
  const formattedSkills = skills.slice(0, -1).join(", ");
  const languages = obj.languages;
  const formattedLanguages = languages.slice(0, -1).join(", ");

  return `${obj.firstName} ${obj.lastName} lives in ${obj.country}. He is  ${
    obj.age
  } years old. He is an ${obj.job}. He teaches ${formattedSkills} and ${
    skills[skills.length - 1]
  }. He speakes ${formattedLanguages} and a little bit of ${languages[2]}.`;
};
console.log(getPersonInfo(person));
// Lets create a function which give information about the person object with destructuring

const getPersonInfo = ({
  firstName,
  lastName,
  age,
  country,
  job,
  skills,
  languages
}) => {
  const formattedSkills = skills.slice(0, -1).join(", ");
  const formattedLanguages = languages.slice(0, -1).join(", ");

  return `${firstName} ${lastName} lives in ${country}. He is ${age} years old. He is an ${job}. He teaches ${formattedSkills} and ${skills[skills.length - 1]}. He speakes ${formattedLanguages} and a little bit of ${languages[2]}.`;
};
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 speakes Amharic, English and a little bit of Suomi(Finnish)
*/

Spread or Rest Operator

Exercise: Destructuring

const constants = [2.72, 3.14, 9.81,37, 100]
const countries = ['Finland', 'Estonia', 'Sweden', 'Denmark', 'Norway']

const rectangle = {
  width:20,
  height:10,
  area:200,
  perimeter:60
}

Assign the elements of constants array to e, pi, gravity, humanBodyTemp, waterBoilingTemp.
Assign the elements of countries array to fin, est, sw, den, nor
Destructure the rectangle object by its propertis or keys.

Document Object Model

HTML document is structured as a JavaScript Object. Every HTML element has a different properties which can help to manipulate it. It is possible to get, create, append or remove HTML elements using JavaScript. Check the examples below. Selecting HTML element using JavaScript is similar to select CSS. To select an HTML element, we use tag name, id, class name. To create an HTML element we use tag name.

Getting Element

<DOCTYPE html>
  <html>
    <head>
      <title>Document Object Model/title>
    </head>
    <body>
     <h1 class="title" id="first-title">First Title</h1>
     <h1 class="title" id="second-title">Second Title</h1>
     <h1 class="title" id="third-title">Third Title</h1>
     <h1></h1>
    </body>
  </html>

Getting elements by tag name

getElementsByTagName() method returns an HTMLCollection object. An HTMLCollection is an array like list of HTML elements. The length property provides the size of the collection.

const allTitles = document.getElementsByTagName("h1");
console.log(allTitles) //HTMCollections
console.log(allTitles.length) // 4
for(let i = 0; i < allTitles.length; i++){
  console.log(allTitles[i]) // prints each elements in the HTMLCollection
}

Getting elements by class name

getElementsByClassName() method returns an HTMLCollection object. An HTMLCollection is an array like list of HTML elements. The length property provides the size of the collection. It is possible to loop through all the HTMLCollection elements. See the example below

const allTitles = document.getElementsByClassName("title");
console.log(allTitles) //HTMCollections
console.log(allTitles.length) // 4
for(let i = 0; i < allTitles.length; i++){
  console.log(allTitles[i]) // prints each elements in the HTMLCollection
}

Getting an element by id

getElementsById() targets a single HTML element. We pass the id without # as an argument.

let firstTitle = document.getElementById("first-title");
console.log(firstTitle) // <h1>First Title</h1>

Getting elements by using querySelector using tag, class and id:

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.

let firstTitle = document.querySelect("h1");// select the first available h2 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

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.

const allTitles = document.querySelectAll("h1");
console.log(allTitles.length) // 4
for(let i = 0; i < allTitles.length; i++){
  console.log(allTitles[i]);
}
allTitles.forEach(title => console.log(title))
const allTitles = document.querySelectorAll(".title"); // the same goes for selecting using class

Adding attribute

An attribute is added in the opening tag of HTML which gives additional information about the element. Common HTML attributes: id, class, src, style, href,disabled, title, alt. Lets add id and class for the fourth title.

Adding attribute using setAttribute

The setAttribute() method set any html attribute. It takes two parameters the type of the attribute and the name of the attribute. Let's add class and id attribute for the fourth title.

const titles = document.querySelectorAll("h1");
titles[3].setAttribut("class", "title");
titles[3].setAttribut("id", "fourth-title");

Adding attribute without setAttribute

Some attributes are DOM object property and they can be set directly. For instance id and class

//another way to setting an attribute
titles[3].className = "title";
titles[3].id = "fourth-title";

Adding class using classList

The class list method is a good method to append additional class. It doens't override the original class if a class exists

//another way to setting an attribute: append the class, does't over ride
titles[3].classList.add("title", "header-title")

Adding Text conent

const titles = document.querySelectorAll("h1");
titles[3].textContent = "Fourth Title";

Adding style

Lets add some style to our titles. If the element has even index we give it green color else red.

const titles = document.querySelectorAll("h1");
titles.forEach((title,i) => {
  title.fontSize = '24px'; // all titles will have 24px font size
  if(i % 2 === 0){
    title.style.color = 'green';
  }
  else {
    title.style.color = 'red';
  }
})

Creating an Element

let title = document.createElement("h1");
let firstTitle = document.getElementById("first-title");

Creating elements

let firstTitle = document.getElementById("first-title");
let title
for(let i = 0; i < 3; i++){
  title = document.createElement("h1");
  title.className = "title";
  title.style.fontSize = "24px";
}

Appending to a parent element

// creating multiple elements and appending to parent element
let title;
for(let i = 0; i < 3; i++){
  title = document.createElement("h1");
  title.className = "title";
  title.style.fontSize = "24px";
  document.body.appendChild(title);
}

Event Listeners

Common HTML events:onclick, onchange, onmouseover, onmouseout, onkeydown, onkeyup, onload. We can add event listener method to any DOM object. Use use addEventListener() method to listen different event types on HTML elements. The following is an example of click type event.

const button = document.querySelector("button");
button.addEventListener("click", e => {
  console.log(e.target);
});

Getting value from an input element

We usaully fill forms and forms accept data. Form fields are created using input HTML element.

<input type ="text" placeholder = "Mass in Killogram" />
<input type = "text" placeholder = "Height in meters" />
<button>Calculate BMI</button>

const mass = document.querySelector('#mass');
const height = document.querySelector('#height');
const button = document.querySelector('button');
let bmi;
button.addEventListen('click', ()=>{
  bmi = mass.value * height.value;
});

console.log(bmi)

Exercises:Document Object Model

  <!-- index.html -->
<DOCTYPE html>
  <html>
    <head>
      <title>JavaScript for Everyone:DOM</title>
    </head>
    <body>
    <p>First Paragraph</p>
    <p>Second Paragradph</p>
    <p>Third Paragraph</p>
    <p></p>
    </body>
  </html>

Create an index.html file and put four p elementts as above: Get the first paragraph by using document.querySelector(tagname) and tag name
Get get each of the the paragraph using document.querySelector('#id') and by their id
Get all the p as nodeList using document.querySelectorAll(tagname) and by their tag name
Loop through the nodeList and get the text content of each paragraph
Set a text content to paragraph the fourth paragraph,Fourth Paragraph
Set id and class attribute for all the paragraphs using different attribute setting methods
Change stye of each paragraph using JavaScript(eg. color, background, border, font-size, font-famil)
Select all paragraphs and loop through each elements and give the first and third paragraph a color of color, and the second and the fourth paragraph a red color
Remove all the paragrapsh and create them using JavaScript
Set text content, id and class to each paragraph
Create a div container on HTML document and create 100 numbers dynamically and append to the container div. Put each number in 150px by 150px box. If the number is even the background will be lightgreen else lightblue.
Use the rgb color generator function or hexaColor generator to create 10 divs with random background colors
Use the countries.js to visualize all the countries on the HTML document. You need one wrapper div and box for each countries. In the box display, the letter the country starts with, the name of the country and the number of characters for the country name.

DOM: Mini Projects

BMI calculator
Hexadecimal or RGB color Generator
World Countries List

Class

class Person {
  constructor(firstName, lastName, age, location, skills) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
    this.location = location;
    this.skills = skills;
  }
  getFull() {
    return `${this.firstName} ${this.lastName}`;
  }
}

Exercises:Classes

Regular Expressions

Regular expression is a small program language which is used with many programming langagues. Regular expression match or search for a pattern. We use ' or '' to create a string data type. We can create a pattern in two ways.

Creating a pattern

let pattern = /love/; 
let pattern = new RegEx('love');

Creatign a pattern with flags: global flag (g), case insensitive flag(i)

let pattern = /love/gi; // declaring a regex pattern
let pattern = new RegEx('love','gi');  // declaring a regex pattern using RegEx object

let pattern = /[A-Z][a-z]{3,12}/;
let name = "Asabeneh";
pattern.test(name);
//output:true

RegExp Object Methods

const str = 'I love JavaScript';
const pattern = /love/;
const result = pattern.test(str);
console.log(result);

Exercises:Regular Expressions

Calculate the total annual income of the person from the following text. ‘He earns 4000 euro from salary per month, 10000 euro annual bonus, 5500 euro online courses per month.’

localStorage

Local storage is the para of the web storage API which is used to store data on the browser with no expiration data. The data will be availabe on the browser even after the browser is closed. There are five methods to work on local stroage: setItem(), getItem(), removeItem(), clear(), key()

Setting item to the localStorage

When we set data to be stored in a localStorage, it will be stored as a string. If we are storing an array or an object, we should stringify it first to keep the format unless otherwise we lose the array structure or the object structure of the original data

localStorage.setItem('name', 'Asabeneh');
console.log(localStorage) //Storage {name: "Asabeneh", length: 1}
localStorage.setItem('age', 200);
console.log(localStorage) //Storage {age: "200", name: "Asabeneh", length: 2}
const skills = ['HTML', 'CSS', 'JS', 'React'];
//Skills array has to be stringfied first to keep the format.
const skillsJSON = JSON.stringify(skills,undefined, 4)
localStorage.setItem('skills', skillsJSON);
console.log(localStorage) //Storage {age: "200", name: "Asabeneh", skills: "HTML,CSS,JS,React", length: 3}

If we are storing an array, an object or object array, we should stringify the object first. See the example below.

let skills = [
  { tech: "HTML", level: 10 },
  { tech: "CSS", level: 9 },
  { tech: "JS", level: 8 },
  { tech: "React", level: 9 },
  { tech: "Redux", level: 10 },
  { tech: "Node", level: 8 },
  { tech: "MongoDB", level: 8 }
];

let skillJSON = JSON.stringify(skills);
localStorage.setItem("skills", skillJSON);

Getting item from localStorage

let name = localStorage.getItem('name');
let age = localStorage.getItem('age');
let skills = localStorage.getItem('skills');
console.log(name, age, skills) // 'Asabeneh', '200', '["HTML","CSS","JS","React"]'


let skillsObj = JSON.parse(localStorage.getItem("skills"), undefined, 4);
console.log(skillsObj);

Clearing the localStorage

The clear method, will clear eveything stored in the local storage

localStorage.clear();

Exercises:Local Storage

Cookies

JavaScript Test 3: Solutions

JavaScript for Everyone

Name		Name	Last commit message	Last commit date
Latest commit History 54 Commits
data		data
solutions		solutions
00-introduction.js		00-introduction.js
01-variables.js		01-variables.js
02-comment.js		02-comment.js
03-concationation.js		03-concationation.js
04-string_interpolation.js		04-string_interpolation.js
05-numbers.js		05-numbers.js
05-string-method.js		05-string-method.js
06-arthimetic_operators.js		06-arthimetic_operators.js
07-boolean.js		07-boolean.js
08-template_literals.js		08-template_literals.js
09-typeof.js		09-typeof.js
10-if.js		10-if.js
11-ifelse.js		11-ifelse.js
12-if-else-if-else.js		12-if-else-if-else.js
14-switch.js		14-switch.js
15-ternary-operator.js		15-ternary-operator.js
16-1.0-array.js		16-1.0-array.js
16-1.1-array-slice-splice.js		16-1.1-array-slice-splice.js
17-forloop.js		17-forloop.js
18-whileloop.js		18-whileloop.js
19-dowhileloop.js		19-dowhileloop.js
20-functions.js		20-functions.js
index.html		index.html
readMe.md		readMe.md

Cherryboome/JavaScript-for-Everyone

Folders and files

Latest commit

History

Repository files navigation

JavaScript for Everyone

Table of Contents

Introduction

Setup

Adding JavaScript to a web page

Inline Script

Internal script

External script

Exercises:Setting Up your machine

Variables

Exercise - 1 : Variables

Comments

Exercise - 2 : Comments

Data Types

Exercises - 3 : Data Types

Strings

String Concatination

Exercise - 4 : String

Numbers

Math Object

Booleans

Exercise - 5 : Booleans

Undefined

Null

Exercise - 6 : Data types

Operators

Arthimetic Operators

Exercises : Arthimetic Operators:

Logical Operators

Exercises: Logical Operators

Comparison Operators

Exercise - 7 : Comparison Operators

Conditionals

If

If Else

If else if else

Switch

Ternary Operators

Exercise - 8 : Conditionals

Loops

For Loop

While loop

Do while loop

Exercises:Loops

Arrays

Exercise - 9 : Arrays

More on Arrays

Exercise -10 : Array Methods

Functions

Function Declaration

Function Expression

Anonymous Function

Arrow Function

Arrow Function vs Declaration Function

Exercise - 10 : Functions

Object

Object Methods:

Date Object

Exercises:

Exercises:Objects

Functional Programming

Sorting string values

Sorting Numeric values

Sorting Object Arrays

Exercises:

Destructuring and Spread

Destructing Arrays

Destructuring Object

Renaming during structuring

Spread or Rest Operator

Exercise: Destructuring

Document Object Model

Getting Element

Getting elements by tag name

Getting elements by class name