Repository files navigation

JavaScript for Everyone

_{Author:Asabeneh Yetayeh
January, 2018}

• Introduction
• Setup
• Requirements
• Setup
  • Install Node.js
  • Browser
    • Installing Google Chrome
    • Opening Google Chrome Console
    • Writing Code on browser Console
      • Console.log
      • Console.log with multiple arguments
      • Comment
      • Syntax
    • Arithmetics
  • Code Editor
    • Installing Visual Studio Code
    • How to use visual studio code
  • Adding JavaScript to a web page
    • Inline Script
    • Internal script
    • External script
  • Exercises:Setting Up your machine
• Variables
  • Exercise - 1 : Variables
• Comments
  • Exercise: Comments
• Data types
  • Primitive Data Types
  • Non-Primitive Data Types
• Numbers
  • Declaring number data types
  • Math Object
    • Random number generator
• Strings
  • String Concatenation
    • Concatenating using addition operator
    • Long Literal Strings
    • Escape Sequences in string
    • Template Literals(Template Strings)
  • String Methods
• Checking Data types and Casting
  • Checking data types
  • Changing data type(Casting)
    • String to Int
    • String to Float
    • Float to Int
  • Exercises: Data Types
    • Exercise: String
  • Booleans
    • Exercise: Booleans
  • Undefined
  • Null
  • Exercise - 6 : Data types
• Operators
  • Arithmetic Operators
  • Exercises : Arithmetic Operators
  • Logical Operators
  • Exercises: Logical Operators
  • Comparison Operators
  • Exercise: Comparison Operators
• Conditionals
  • if
  • if else
  • if else if else
  • switch
  • Ternary Operators
  • Exercise: Conditionals
  • While loop
  • Do while loop
  • Exercises:Loops
• Arrays
  • Exercise : 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: Date Object
  • Exercises:Objects
• JSON
  • Converting JSON to JavaScript Object
    • JSON.parse()
  • Using a reviver function with JSON.parse()
  • Converting Object to JSON
  • Using a Filter Array with JSON.stringify
  • Exercises
  • Exercises Level 1
  • Exercises Level 2
• Higher Order Function
  • Callback
  • Returning function
  • setting time
    • setInterval
    • setTimeout
  • Exercises Level 3
• Functional Programming
  • Exercises
• Destructuring and Spread
  • Destructing Arrays
    • Destructuring Object
    • Renaming during structuring
  • Spread or Rest Operator
    • Exercise: Destructuring
• Map and Set
• Set
  • Creating a set
  • Adding an element to a set
  • Deleting an element a set
  • Checking an element in the set
  • Clearing the set
• Set
  • Creating an empty set
  • Creating set from array
  • Adding an element to a set
  • Deleting an element a set
  • Checking an element in the set
  • Clearing the set
  • Union of sets
  • Intersection of sets
  • Difference of sets
• Map
  • Creating an empty Map
  • Creating an Map from array
  • Adding values to the Map
  • Getting a value from Map
  • Checking key in Map
  • Exercises: Set and Map
  • Exercises:Level 1
  • Exercises:Level 2
  • Exercises:Level 3
• Document Object Model (DOM)
  • Getting Element
    • Getting elements by tag name
    • Getting elements by class name
    • Getting an element by id
    • Getting elements by using querySelector using tag, class and id:
  • Adding attribute
    • Adding attribute using setAttribute
    • Adding attribute without setAttribute
    • Adding class using classList
  • Adding Text content
  • Adding style
  • Creating an Element
  • Creating elements
  • Appending to a parent element
  • Event Listeners
  • Getting value from an input element
    • Exercises:Document Object Model
    • DOM: Mini Projects
• Classes
  • Defining a classes
  • Class Instantiation
  • Class Constructor
  • Default values with constructor
  • Class methods
  • Properties with initial value
  • getter
  • setter
  • Static method
• Inheritance
  • Overriding methods
• Exercises
  • Exercises Level 1
  • Exercises Level 2
  • Exercises Level 3
• Regular Expressions
  • RegEx parameters
    • Pattern
    • Flags
  • Creating a pattern with RegEx Constructor
  • Creating a pattern without RegEx Constructor
  • RegExp Object Methods
    • Testing for a match
    • Array containing all of the match
    • Replacing a substring
  • Square Bracket
  • Escape character(\) in RegEx
  • One or more times(+)
  • Period(.)
  • Zero or more times(*)
  • Zero or one times(?)
  • Quantifier in RegEx
  • Cart ^
  • Exact match
• 💻 Exercises
  • Exercises: Level 1
  • Exercises: Level 2
  • Exercises: Level 3
• Async and Await
• localStorage
  • Setting item to the localStorage
  • Getting item from localStorage
  • Clearing the localStorage
  • Exercises:Local Storage
• Cookies
  • Exercises:Cookies
• JavaScript Interview Questions
  • JavaScript Tests
  • JavaScript Test 1
  • JavaScript Test 2
  • JavaScript Test 3

JavaScript for Everyone is a guide for both beginners and advanced JavaScript developers. Welcome to JavaScript.Congratulations for deciding to learn JavaScript, the language of the browser.

In this step by step tutorial, you will learn JavaScript, the most popular programming language in the history of mankind.You use JavaScriptto add interactivity to websites, to develop mobile apps, desktop applications, games and nowadays JavaScript can be used formachine learning andAI.JavaScript (JS) has increased in popularity in recent years and has been the leadingprogramming language for four consecutive years and is the most used programming language onGithub.

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

If you want help, you may join thetelegram channel.

No prior knowledge of programming is required to follow this guide. You need only:

1. Motivation
2. Computer
3. Internet
4. Browser
5. Code Editor

I believe you have the motivation and a strong desire to be a developer, computer and Internet. If you have those, then you have everything.

You may not need it right now but you may need it for later. Installnode.js.

After downloading double click and install

We can check if node is installed in our local machine by opening our device terminal or command prompt.

asabeneh $ node -vv12.14.0

I am using node version 12.14.0, which is the recommended version of node.

There are many browsers out there. However, I strongly recommend Google Chrome.

Installgoogle chrome if you do not have one yet. We can write small JavaScript code on the browser console, but we do not use the browser console to develop applications.

You can open Google Chrome either by clicking three dots at the top right corner of the Chrome browser or using a shortcut. I prefer using shortcuts.

To open the Chrome console using a short cut.

MacCommand+Option+IWindows:Ctl+Shift+I

After you open the Google Chrome console, try to explore the marked buttons. We will spend most of the time on the Console part. The Console is the place where your JavaScript code goes. The Google Console V8 engine changes your JavaScript code to machine code.Let us write a JavaScript code on the Google Chrome console:

We can write any JavaScript code on the Google console or any browser console. However, for this challenge, we only focus on Google Chrome console. Open the console using:

MacCommand+Option+IWindows:Ctl+Shift+I

To write our first JavaScript code, we used a builtin functionconsole.log(). We passed an argument as input data, and the function displays the output. We passed 'Hello, World' as input data or argument in the console.log() function.

console.log('Hello, World!')

The console.log(param1, param2, param3), can take multiple arguments.

console.log('Hello','World','!')console.log('HAPPY','NEW','YEAR',2020)console.log('Welcome','to',30,'Days','Of','JavaScript')

As you can see from the above snippet code,console.log() can take multiple arguments.

Congratulations! You wrote your first JavaScript code usingconsole.log().

We add comments to our code. Comments are very important to make code more readable and to leave remarks in our code. JavaScript does not execute the comment part of our code. Any text starts with // in JavaScript is a comment or anything enclose like this /* */ is a comment.

Example: Single Line Comment

// This is the first comment
// This is the second comment
// I am a single line comment

Example: Multiline Comment

/*This is a multiline comment
Multiline comments can take multiple lines
JavaScript is the language of the web
*/

JavaScript is a programming language. As a result, it has its syntax like other programming languages. If we do not write a syntax that JavaScript understands, it will raise different types of errors. We will explore different kinds of JavaScript errors later. For now, let us see syntax errors.

I made a deliberate mistake. As a result, the console raises a syntax error. Actually, the syntax is very informative. It informs what type of mistake we made. By reading the error feedback guideline, we can correct the syntax and fix the problem. The process of identifying and removing errors from a program is called debugging. Let us fix the errors:

console.log("Hello, World!")console.log('Hello, World!')

So far, we saw how to display text using aconsole.log(). If we are printing text or string usingconsole.log(), the text has to be under the single, double, or backtick.Example:

console.log("Hello, World!")console.log('Hello, World!')console.log(`Hello, World!`)

Now, let us practice more writing JavaScript codes usingconsole.log() on google chrome console for number data types.In addition to the text, we can also do mathematical calculations using JavaScript. Let us do the following simple calculations.

console.log(2+3)// Additionconsole.log(3-2)// Subtractionconsole.log(2*3)// Multiplicationconsole.log(3/2)// Divisionconsole.log(3%2)// Modulus - finding remainderconsole.log(3**2)// Exponential

We can write our codes on the browser console, but it won't be for bigger projects. In a real working environment, developers use different code editors to write their codes. In this 30 days python JavaScript challenge, we will use visual studio code.

Visual studio code is a very popular open-source text editor. I would recommend todownload visual studio code, but if you are in favor of other editors, feel free to follow with what you have.

If you installed visual studio code, let us start using it.

Open the visual studio code by double-clicking the visual studio icon. When you open it, you will get this kind of interface. Try to interact with the labeled icons.

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

• Inline script
• Internal script
• External script

The following sections show different ways of adding JavaScript code to your web page.

Create a folder on your desktop or in any location and create anindex.html file in your folder. Then paste the following code and open it in a browser, either inChrome orFirefox.

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

Internal script can be written in thehead or thebody but it is preferred to put it on the body of the html document.

• Internal script at the head

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

• Internal script at the body

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

The external script link can be on the head or body but it is preferred to put it in the body.

• External script at the head

<!DOCTYPE html><html><head><title>JavaScript for Everyone</title><scriptsrc="introduction.js"></script></head><body></body></html

• External script at the body

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

Variables arecontainers of data. Variablesstore 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 orconst key words. For a variable which changes at different time we uselet but if the data doesn't change at all we useconst. For example PI, country name, gravity.

• A JavaScript variable name shouldn't begin with a number
• A JavaScript variable name does not allow special characters except dollar sign and underscore.
• A JavaScript variable name follow a camelCase convention.
• A JavaScript variable name shouldn't have space between words. The following are valid examples of JavaScript variables.

Valid variables in #"auto" data-snippet-clipboard-copy-content=" firstName lastName country city capitalCity age isMarried first_name last_name is_married capital_city num1 num_1 _num_1 $num1 year2019 year_2019">

firstNamelastNamecountrycitycapitalCityageisMarriedfirst_namelast_nameis_marriedcapital_citynum1num_1_num_1$num1year2019year_2019

  first-name  1_num  num_#_1

// Declaring different variables of different data typesletfirstName='Asabeneh';// first name of a personletlastName='Yetayeh';// last name of a personletcountry='Finland';// countryletcity='Helsinki';// capital cityletage=100;// age in yearsletisMarried=true;console.log(firstName,lastName,country,city,age,isMarried);// Asabeneh, Yetayeh, Finland, Helsinki, 100, True// Declaring variables with number valuesconstgravity=9.81;// earth gravity  in m/s2constboilingPoint=100;// water boiling point, temperature in oCconstPI=3.14;// geometrical constantconsole.log(gravity,boilingPoint,PI);// 9.81, 100, 3.14// Variables can also be declaring in one line separated by commaletname='Asabeneh',//name of a personjob='teacher',live='Finland';console.log(name,job,live);

Exercise - 1 : Variables

Comments

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

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

Exercise: Comments

Data types

Primitive Data Types

letword='JavaScript'

word[0]='Y'

letnumOne=3letnumTwo=3console.log(numOne==numTwo)// trueletjs='JavaScript'letpy='Python'console.log(js==py)//falseletlightOn=trueletlightOff=falseconsole.log(lightOn==lightOff)// false

Non-Primitive Data Types

letnums=[1,2,3]nums[0]=10console.log(nums)// [10, 2, 3]

letnums=[1,2,3]letnumbers=[1,2,3]console.log(nums==numbers)// falseletuserOne={name:'Asabeneh',role:'teaching',country:'Finland'}letuserTwo={name:'Asabeneh',role:'teaching',country:'Finland'}console.log(userOne==userTwo)// false

letnums=[1,2,3]letnumbers=numsconsole.log(nums==numbers)// trueletuserOne={name:'Asabeneh',role:'teaching',country:'Finland'}letuserTwo=userOneconsole.log(userOne==userTwo)// true

Numbers

Declaring number data types

letage=35constgravity=9.81//we use const for non-changing values, gravitational constant in  m/s2letmass=72// mass in KilogramconstPI=3.14// pi a geometrical constant//More ExamplesconstboilingPoint=100// temperature in oC, boiling point of water which is a constantconstbodyTemp=37// oC average human body temperature, which is a constantconsole.log(age,gravity,mass,PI,boilingPoint,bodyTemp)

Math Object

constPI=Math.PIconsole.log(PI)// 3.141592653589793// Rounding to the closest number// if above .5 up if less 0.5 down roundingconsole.log(Math.round(PI))// 3 to round values to the nearest numberconsole.log(Math.round(9.81))// 10console.log(Math.floor(PI))// 3 rounding downconsole.log(Math.ceil(PI))// 4 rounding upconsole.log(Math.min(-5,3,20,4,5,10))// -5, returns the minimum valueconsole.log(Math.max(-5,3,20,4,5,10))// 20, returns the maximum valueconstrandNum=Math.random()// creates random number between 0 to 0.999999console.log(randNum)// Let us  create random number between 0 to 10constnum=Math.floor(Math.random()*11)// creates random number between 0 and 10console.log(num)//Absolute valueconsole.log(Math.abs(-10))//10//Square rootconsole.log(Math.sqrt(100))// 10console.log(Math.sqrt(2))//1.4142135623730951// Powerconsole.log(Math.pow(3,2))// 9console.log(Math.E)// 2.718// Logarithm//Returns the natural logarithm of base E of x, Math.log(x)console.log(Math.log(2))// 0.6931471805599453console.log(Math.log(10))// 2.302585092994046// TrigonometryMath.sin(0)Math.sin(60)Math.cos(0)Math.cos(60)

Random number generator

letrandomNum=Math.random()// generates 0 to 0.999

letrandomNum=Math.random()// generates 0 to 0.999letnumBtnZeroAndTen=randomNum*11console.log(numBtnZeroAndTen)// this gives: min 0 and max 10.99letrandomNumRoundToFloor=Math.floor(numBtnZeroAndTen)console.log(randomNumRoundToFloor)// this gives between 0 and 10

Strings

letspace=' '// an empty space stringletfirstName='Asabeneh'letlastName='Yetayeh'letcountry='Finland'letcity='Helsinki'letlanguage='JavaScript'letjob='teacher'

String Concatenation

// Declaring different variables of different data typesletspace=' 'letfirstName='Asabeneh'letlastName='Yetayeh'letcountry='Finland'letcity='Helsinki'letlanguage='JavaScript'letjob='teacher'

letfullName=firstName+space+lastName;// concatenation, merging two string together.console.log(fullName);

Asabeneh Yetayeh

Concatenating using addition operator

// Declaring different variables of different data typesletspace=' 'letfirstName='Asabeneh'letlastName='Yetayeh'letcountry='Finland'letcity='Helsinki'letlanguage='JavaScript'letjob='teacher'letage=250letfullName=firstName+space+lastNameletpersonInfoOne=fullName+'. I am '+age+'. I live in '+country;// ES5console.log(personInfoOne)

Asabeneh Yetayeh. I am 250. I livein Finland

Long Literal Strings

constparagraph="My name is Asabeneh Yetayeh. I live in Finland, Helsinki.\I am a teacher and I love teaching. I teach HTML, CSS, JavaScript, React, Redux, \Node.js, Python, Data Analysis and D3.js for anyone who is interested to learn. \In the end of 2019, I was thinking to expand my teaching and to reach \to global audience and I started a Python challenge from November 20 - December 19.\It was one of the most rewarding and inspiring experience.\Now, we are in 2020. I am enjoying preparing the 30DaysOfJavaScript challenge and \I hope you are enjoying too."console.log(paragraph)

Escape Sequences in string

console.log('I hope every one is enjoying the 30 Days Of JavaScript challenge.\nDo you ?')// line breakconsole.log('Days\tTopics\tExercises')console.log('Day 1\t3\t5')console.log('Day 2\t3\t5')console.log('Day 3\t3\t5')console.log('Day 4\t3\t5')console.log('This is a back slash  symbol (\\)')// To write a back slashconsole.log('In every programming language it starts with \"Hello, World!\"')console.log("In every programming language it starts with \'Hello, World!\'")console.log('The saying \'Seeing is Believing\' is\'t correct in 2020')

Template Literals(Template Strings)

//Syntax`String literal text``String literal text${expression}`

console.log(`The sum of 2 and 3 is 5`)// statically writing the dataleta=2letb=3console.log(`The sum of${a} and${b} is${a+b}`)// injecting the data dynamically

letfirstName='Asabeneh'letlastName='Yetayeh'letcountry='Finland'letcity='Helsinki'letlanguage='JavaScript'letjob='teacher'letage=250letfullName=firstName+' '+lastNameletpersonInfoTwo=`I am${fullName}. I am${age}. I live in${country}.`//ES6 - String interpolation methodletpersonInfoThree=`I am${fullName}. I live in${city},${country}. I am a${job}. I teach${language}.`console.log(personInfoTwo)console.log(personInfoThree)

I am Asabeneh Yetayeh. I am 250. I livein Finland.I am Asabeneh Yetayeh. I livein Helsinki, Finland. I am a teacher. I teach JavaScript.

leta=2letb=3console.log(`${a} is greater than${b}:${a>b}`)

2 is greater than 3:false

String Methods

letstring='JavaScript'letfirstLetter=string[0]console.log(firstLetter)// JletsecondLetter=string[1]// aletthirdLetter=string[2]letlastLetter=string[9]console.log(lastLetter)// tletlastIndex=string.length-1console.log(lastIndex)// 9console.log(string[lastIndex])// t

letstring='JavaScript'console.log(string.toUpperCase())// JAVASCRIPTletfirstName='Asabeneh'console.log(firstName.toUpperCase())// ASABENEHletcountry='Finland'console.log(country.toUpperCase())// FINLAND

letstring='JavasCript'console.log(string.toLowerCase())// javascriptletfirstName='Asabeneh'console.log(firstName.toLowerCase())// asabenehletcountry='Finland'console.log(country.toLowerCase())// finland

letstring='JavaScript'console.log(string.substr(4,6))// Scriptletcountry='Finland'console.log(country.substr(3,4))// land

letstring='JavaScript'console.log(string.substring(0,4))// Javaconsole.log(string.substring(4,10))// Scriptconsole.log(string.substring(4))// Scriptletcountry='Finland'console.log(country.substring(0,3))// Finconsole.log(country.substring(3,7))// landconsole.log(country.substring(3))// land

letstring='30 Days Of JavaScript'console.log(string.split())// ["30 Days Of JavaScript"]console.log(string.split(' '))// ["30", "Days", "Of", "JavaScript"]letfirstName='Asabeneh'console.log(firstName.split())// ["Asabeneh"]console.log(firstName.split(''))// ["A", "s", "a", "b", "e", "n", "e", "h"]letcountries='Finland, Sweden, Norway, Denmark, and Iceland'console.log(countries.split(','))// ["Finland", " Sweden", " Norway", " Denmark", " and Iceland"]console.log(countries.split(', '))//  ["Finland", "Sweden", "Norway", "Denmark", "and Iceland"]

letstring='   30 Days Of JavaScript   'console.log(string)console.log(string.trim(' '))letfirstName=' Asabeneh 'console.log(firstName)console.log(firstName.trim())

   30 Days Of JavasCript   30 Days Of JavasCript  Asabeneh Asabeneh

letstring='30 Days Of JavaScript'console.log(string.includes('Days'))// trueconsole.log(string.includes('days'))// falseconsole.log(string.includes('Script'))// trueconsole.log(string.includes('script'))// falseconsole.log(string.includes('java'))// falseconsole.log(string.includes('Java'))// trueletcountry='Finland'console.log(country.includes('fin'))// falseconsole.log(country.includes('Fin'))// trueconsole.log(country.includes('land'))// trueconsole.log(country.includes('Land'))// false

string.replace(oldsubstring,newsubstring)

letstring='30 Days Of JavaScript'console.log(string.replace('JavaScript','Python'))// 30 Days Of Pythonletcountry='Finland'console.log(country.replace('Fin','Noman'))// Nomanland

string.charAt(index)

letstring='30 Days Of JavaScript'console.log(string.charAt(0))// 3letlastIndex=string.length-1console.log(string.charAt(lastIndex))// t

string.charCodeAt(index)

letstring='30 Days Of JavaScript'console.log(string.charCodeAt(3))// D ASCII number is 51letlastIndex=string.length-1console.log(string.charCodeAt(lastIndex))// t ASCII is 116

string.indexOf(substring)

letstring='30 Days Of JavaScript'console.log(string.indexOf('D'))// 3console.log(string.indexOf('Days'))// 3console.log(string.indexOf('days'))// -1console.log(string.indexOf('a'))// 4console.log(string.indexOf('JavaScript'))// 11console.log(string.indexOf('Script'))//15console.log(string.indexOf('script'))// -1

//syntaxstring.lastIndexOf(substring)

letstring='I love JavaScript. If you do not love JavaScript what else can you love.'console.log(string.lastIndexOf('love'))// 67console.log(string.lastIndexOf('you'))// 63console.log(string.lastIndexOf('JavaScript'))// 38

string.concat(substring,substring,substring)

letstring='30'console.log(string.concat("Days","Of","JavaScript"))// 30DaysOfJavaScriptletcountry='Fin'console.log(country.concat("land"))// Finland

//syntaxstring.startsWith(substring)

letstring='Love is the best to in this world'console.log(string.startsWith('Love'))// trueconsole.log(string.startsWith('love'))// falseconsole.log(string.startsWith('world'))// falseletcountry='Finland'console.log(country.startsWith('Fin'))// trueconsole.log(country.startsWith('fin'))// falseconsole.log(country.startsWith('land'))//  false

string.endsWith(substring)

letstring='Love is the best to in this world'console.log(string.endsWith('world'))// trueconsole.log(string.endsWith('love'))// falseconsole.log(string.endsWith('in this world'))// trueletcountry='Finland'console.log(country.endsWith('land'))// trueconsole.log(country.endsWith('fin'))// falseconsole.log(country.endsWith('Fin'))//  false

string.search(substring)

letstring='I love JavaScript. If you do not love JavaScript what else can you love.'console.log(string.search('love'))// 2

letstring='love'letpatternOne=/love/// with out any flagletpatternTwo=/love/gi// g-means to search in the whole text, i - case insensitive

// syntaxstring.match(substring)

letstring='I love JavaScript. If you do not love JavaScript what else can you love.'console.log(string.match('love'))

["love", index: 2, input:"I love JavaScript. If you do not love JavaScript what else can you love.", groups: undefined]

letpattern=/love/giconsole.log(string.match(pattern))// ["love", "love", "love"]

lettxt='In 2019, I run 30 Days of Python. Now, in 2020 I super exited to start this challenge'letregEx=/\d+/// d with escape character means d not a normal d instead acts a digit// + means one or more digit numbers,// if there is g after that it means global, search everywhere.console.log(txt.match(regEx))// ["2", "0", "1", "9", "3", "0", "2", "0", "2", "0"]console.log(txt.match(/\d+/g))// ["2019", "30", "2020"]

string.repeat(n)

letstring='love'console.log(string.repeat(10))// lovelovelovelovelovelovelovelovelovelove

Checking Data types and Casting

Checking data types

// Different javascript data types// Let's declare different data typesletfirstName='Asabeneh'// stringletlastName='Yetayeh'// stringletcountry='Finland'// stringletcity='Helsinki'// stringletage=250// number, it is not my real age, do not worry about itletjob// undefined, because a value was not assignedconsole.log(typeof'Asabeneh')// stringconsole.log(typeoffirstName)// stringconsole.log(typeof10)// numberconsole.log(typeof3.14)// numberconsole.log(typeoftrue)// booleanconsole.log(typeoffalse)// booleanconsole.log(typeofNaN)// numberconsole.log(typeofjob)// undefinedconsole.log(typeofundefined)// undefinedconsole.log(typeofnull)// object

Changing data type(Casting)

String to Int

letnum='10'letnumInt=parseInt(num)console.log(numInt)// 10

letnum='10'letnumInt=Number(num)console.log(numInt)// 10

letnum='10'letnumInt=+numconsole.log(numInt)// 10

String to Float

letnum='9.81'letnumFloat=parseFloat(num)console.log(numFloat)// 9.81

letnum='9.81'letnumFloat=Number(num)console.log(numFloat)// 9.81

letnum='9.81'letnumFloat=+numconsole.log(numInt)// 9.81

Float to Int

letnum=9.81letnumInt=parseInt(num)console.log(numInt)// 9

Exercises: Data Types

Exercise: String

Booleans

letisLightOn=true;letisRaining=false;lethungry=false;letisMarried=true;

Exercise: Booleans

Undefined

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

Null

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

Exercise - 6 : Data types

Operators

Arithmetic Operators

letnumOne=4;letnumTwo=3;letsum=numOne+numTwo;letdiff=numOne-numTwo;letmult=numOne*numTwo;letdiv=numOne/numTwo;letremainder=numOne%numTwo;console.log(sum,diff,mult,div,remainder);// ->7,1,12,1.33,1letPI=3.14;letradius=100;// length in meterconstgravity=9.81;// in m/s2letmass=72;// in KilogramconstboilingPoint=100;// temperature in oC, boiling point of waterconstbodyTemp=37;// body temperature in oC// Lets calculate area of a circleconstareaOfCircle=PI*radius*radius;console.log(areaOfCircle);// -> 314 m// Lets calculate weight of a substanceconstweight=mass*gravity;console.log(weight);// -> 706.32 N(Newton)// ConcatEnating string with numbers using string interpolation/* The boiling point of water is 100 oC. Human body temperature is 37 oC. The gravity of earth is 9.81 m/s2. */console.log(`The boiling point of water is${boilingPoint} oC.\nHuman body temperature is${body} oC.\nThe gravity of earth is${gravity} m / s2.`);

Exercises : Arithmetic Operators

letoperandOne=4;letoperandTwo=3;

Logical Operators

// && ampersand exampleconstcheck=4>3&&10>5;// true and true -> trueconstcheck=4>3&&10<5;// true and false -> falseconstcheck=4<3&&10<5;// false and false -> false// || pipe or, exampleconstcheck=4>3||10>5;// true and true -> trueconstcheck=4>3||10<5;// true and false -> trueconstcheck=4<3||10<5;// false and false -> false// ! Negation examplesletcheck=4>3;// -> trueletcheck=!(4>3);// -> falseletisLightOn=true;// -> trueletisLightOff=!isLightOn;// -> falseletisMarried=!false;// -> true

Exercises: Logical Operators

Comparison Operators

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

Exercise: Comparison Operators

Conditionals

if

if(condition){// code goes here}letisRaining=true;if(isRaining){console.log('Remember to take your rain coat.');}

if else

if(condition){// if the condition meets, this block of code runs}else{// if condition doesn't meet, this block code runs}letisRaining=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 elseletweather='sunny';if(weather==='rainy'){console.log('You need a rain coat.');}elseif(weather==='cloudy'){console.log('It might be cold, you need a jacket.');}elseif(weather==='sunny'){console.log('Go out freely.');}else{console.log('No need for rain coat.');}

switch

varweather='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 ExamplesvardayUserInput=prompt('What day is it ?');varday=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

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

Exercise: Conditionals

Loops

For Loop

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

While loop

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

Do while loop

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

Exercises:Loops

Arrays

constnumbers=[0,3.14,9.81,37,98.6,100];// set of numbersconsole.log(numbers.length)// => to know the size of the array, which is 6console.log(numbers)// -> [0, 3.14, 9.81, 37, 98.6, 100]console.log(numbers[0])//  -> 0console.log(numbers[5])//  -> 100letlastIndex=numbers.length-1;console.log(numbers[lastIndex])->100constwebTechs=['HTML','CSS','JavaScript','React','Redux','Node','MongoDB'];// List of web technologiesconsole.log(webTechs)// all the array itemsconsole.log(webTechs.length)// => to know the size of the array, which is 7console.log(webTechs[0])//  -> HTMLconsole.log(webTechs[6])//  -> MongoDBletlastIndex=webTechs.length-1;console.log(webTechs[lastIndex])->MongoDBconstcountries=['Albania','Bolivia','Canada','Denmark','Ethiopia','Finland','Germany','Hungary','Ireland','Japan','Kenya'];// List of countries;console.log(countries)// -> all countries in arrayconsole.log(countries[0])//  -> Albaniaconsole.log(countries[10])//  -> KenyaletlastIndex=countries.length-1;console.log(countries[lastIndex])->// KenyaconstshoppingCart=['Milk','Mango','Tomato','Potato','Avocado','Meat','Eggs','Sugar'];// List of food productsconsole.log(shoppingCart)// -> all shoppingCart in arrayconsole.log(shoppingCart[0])//  -> Milkconsole.log(shoppingCart[7])//  -> SugarletlastIndex=shoppingCart.length-1;console.log(shoppingCart[lastIndex])->// Sugar

Exercise : Arrays

More on Arrays

constarr=Array();// creates an an empty arrayconsole.log(arr);consteightEmptyValues=Array(8);// it creates eight empty valuesconsole.log(eightEmptyValues);// [empty x 8]

constarr=Array();// creates an an empty arrayconsole.log(arr);consteightXvalues=Array(8).fill('X');// it creates eight element valuesconsole.log(eightXvalues);// ['X', 'X','X','X','X','X','X','X']

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

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

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

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

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

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

constnumbers=[1,2,3,4,5];console.log(numbers.toString());// 1,2,3,4,5constnames=['Asabeneh','Mathias','Elias','Brook'];console.log(names.toString());// Asabeneh,Mathias,Elias,Brook

constnumbers=[1,2,3,4,5];console.log(numbers.join());// 1,2,3,4,5constnames=['Asabeneh','Mathias','Elias','Brook'];console.log(names.join());// Asabeneh,Mathias,Elias,Brookconsole.log(names.join(''));//AsabenehMathiasEliasBrookconsole.log(names.join(' '));//Asabeneh Mathias Elias Brookconsole.log(names.join(', '));//Asabeneh, Mathias, Elias, Brookconsole.log(names.join(' # '));//Asabeneh # Mathias # Elias # Brook

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

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

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

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

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

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

Exercise -10 : Array Methods

constshoppingCart=['Milk','Coffee','Tea','Honey'];consttodoList=[{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

Function Declaration

//function without parameterfunctionfunctionName(){// code goes here}functionName()// calling function by its name and with parentheses//function without parameterfunctionaddTwoNumbers(){varnumOne=10;varnumTwo=20;varsum=numOne+numTwo;console.log(sum);}addTwoNumbers();// function has to be called to be executed by it name// function with one parameterfunctionfunctionName(parm1){//code goes her}functionName(parm1);// during calling or invoking one argument neededfunctionareaOfCircle(r){letarea=Math.PI*r*r;returnarea;}console.log(areaOfCircle(10))// should be called with one argumentfunctionsquare(number){returnnumber*number;}console.log(square(10));// function with two parametersfunctionfunctionName(parm1,parm2){//code goes her}functionName(parm1,parm2);// during calling or invoking two arguments needed// Function without parameter doesn't take input, so lets make a parameter with parameterfunctionsumTwoNumbers(numOne,numTwo){varsum=numOne+numTwo;console.log(sum);}sumTwoNumbers(10,20);// calling functions// If a function doesn't return it doesn't store data, so it should returnfunctionsumTwoNumbersAndReturn(numOne,numTwo){varsum=numOne+numTwo;returnsum;}console.log(sumTwoNumbersAndReturn(10,20));functionprintFullName(firstName,lastName){return`${firstName}${lastName}`;}console.log(printFullName('Asabeneh','Yetayeh'));console.log(printFullName('Dean','Phan'));// function with multiple parametersfunctionfunctionName(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 arrayfunctionsumArrayValues(arr){varsum=0;for(vari=0;i<arr.length;i++){sum=sum+numbers[i];}returnsum;}constnumbers=[1,2,3,4,5];console.log(sumArrayValues(numbers));constareaOfCircle=(radius)=>{letarea=Math.PI*radius*radius;returnarea;}console.log(areaOfCircle(10))

Function Expression

//Declaration functionfunctionsquare(n){returnn*n;}console.log(square(2));// -> 4// Function expressionconstsquare=function(n){returnn*n;};console.log(square(2));// -> 4

Anonymous Function

// Self invoking functions(function(n){returnn*n;})(2);constx=(function(n){returnn*n;})(2);console.log(x)// 4

Arrow Function

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

Arrow Function vs Declaration Function

Exercise - 10 : Functions

Object

constperson={};

constperson={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}`;}};constrectangle={length:20,width:20,getArea:function(){returnthis.length*this.width;},getPerimeter:function(){return2*(this.length+this.width);}};

constperson={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 accessedconsole.log(person['age');console.log(person['location']);