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 variables without assigning values
Declare 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)

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:
```
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:length, indexOf, slice, splice, push, pop, shift, unshift 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

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

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)
```
Use the new Date() object to get month, date, year, hour and minute.
Write a function name displayDateTime which display time in this format: 28/08/2018 04:08
```
displayDateTime()
28/08/2018 04:08
```
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.
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.

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';

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

Exercises:Objects

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: '[email protected]',
        skills: ['HTML', 'CSS', 'JavaScript'],
        age: 20,
        isLoggedIn: false,
        points: 30,
      },
      Asab: {
        email: '[email protected]',
        skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Redux', 'Node.js'],
        age: 25,
        isLoggedIn: false,
        points: 50,
      },
      Brook: {
        email: '[email protected]',
        skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Redux'],
        age: 30,
        isLoggedIn: true,
        points: 50,
      },
      Daniel: {
        email: '[email protected]',
        skills: ['HTML', 'CSS', 'JavaScript', 'Python'],
        age: 20,
        isLoggedIn: false,
        points: 40,
      },
      John: {
        email: '[email protected]',
        skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Redux', 'Node.js'],
        age: 20,
        isLoggedIn: true,
        point:50
      },
      Thomas: {
        email: '[email protected]',
        skills: ['HTML', 'CSS', 'JavaScript', 'React'],
        age: 20,
        isLoggedIn: false,
        points: 40,
      },
    };

Develop a small JavaScript library.

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 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

let allTitles = document.getElementsByTagName('h1');
let allTitles = document.getElementsByClassName('title');
let firstTitle = document.getElementById('first-title');

let firstTitle = document.querySelect('h1');
let allDivs = document.querySelectorAll('div');
let span = document.querySelector('span');
let firstPara = document.querySelector('#first-para');
let allParas = document.querySelectorAll('.para');

Creating Element

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

Adding attribute

let title = document.createElement('h1');
let firstTitle = document.getElementById('first-title');
title.setAttribut('class', 'title');
title.setAttribut('id', 'first-title')

Adding Text conent

let title = document.createElement('h1');
let firstTitle = document.getElementById('first-title');
title.textContent = 'JavaScript for Everyone';

Adding style

let title = document.createElement('h1');
let firstTitle = document.getElementById('first-title');
title.textContent = 'JavaScript for Everyone';
title.style.color = 'green';

Appending to parent

let title = document.createElement('h1');
let firstTitle = document.getElementById('first-title');
title.textContent = 'JavaScript for Everyone';
title.style.color = 'green';

document.body.appendChild(title)

Event Listeners

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

Exercises:Document Object Model

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

localStorage

Local storage is used to store data on the browser.

let skills = [
  {teck:'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);
let skillsObj = JSON.parse(localStorage.getItem('skills'),undefined, 4)
console.log(skillsObj)
localStorage.clear()

Exercises:Local Storage

Cookies

Exercises:Cookies

Regular Expressions

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

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.’

Functional Programming

any, every, find, filter, map, reduce ,some

Declare a function called getStringLists which takes an array as a parameter and then returns an array only with string items.
Declare a function called categorizeCountries which returns an array of countries which have some common pattern(you find the countries array from slack).
Declare a getFirstTenCountries function and return an array of ten countries
Declare a getLastTenCountries function and return an array of ten countries
Find out with which letter are there many countries

Name		Name	Last commit message	Last commit date
Latest commit History 33 Commits
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
countries.js		countries.js
index.html		index.html
readMe.md		readMe.md

StevePhuc/JavaScript-for-Everyone

Folders and files

Latest commit

History

Repository files navigation