10 days of javascript series for beginner

In this post 10 days of javascript series youโ€™ll learn javascript from beginning this series will be helpful for those who are confuse how to learn javascript and where to start

After completing this 10 days of javascript series you will be going to become a noob to intermediate in javascript after that you can also explore more in javascript by your own


Basics of html & css

๐Ÿ”—Get started โœŒ

Tools you need for this series

  • Any operating system
  • Code editor
  • Browser
Make sure to try and run every code example by your own donโ€™t just read
Day 0

๐Ÿ”—What is javascript

Javascript is the language of the web

  • HTML for structure
  • CSS for styling
  • JS For nteractive behavior
What is javascript

Javascript is everywhere

Write once , run everywhere

  • Web Browser
  • Desktop (browser, command line)
  • Mobile Phone & Apps
  • Server (node.js)
JavaScript has no relation to Java. Beginners often get confused between the two languages, both language made for a different purpose


Alert using alert() method

<script>alert("this is alert");</script>


Alert date using date() method on onClick() event

<button onclick="alert(Date())">The time is?</button>

We can also write javascript in browser console

Right click โžค Inspect โžค Console / Press F12 key

Write javascript in browser console
Day 1

๐Ÿ”—Basics of javascript

Writing Javascript

Similarly CSS, we have to create a new file with the .js extension called index.js or script.js for writing JavaScript in the directory. Now open the index.html file, and just before the closing body tag </body> , insert this line.

/* index.html */
<script src="script.js"></script>
// script.js alert("Hello world");

Javascript : case senstivity โš ๏ธ

JavaScript is case sensitive therefore a variable name userid is not the same as Userid or a function name Myfun() is not the same as myfun()

var userid = "E1001";
Case senstivity


In general JavaScript does not require a semi-colon at the end of a statement. If you write two statements in a single line then a semi-colon is required at the end of the first statement.

// ๐Ÿ‘Ž
var userid = "E1001";
// ๐Ÿ‘
var userid = "E1001";

Javascript comments ๐Ÿ’ฌ

Code written within comments are not processed by the interpreter. Comments are good way to write notations to explain what a script does.

two slashes "/ /" for single line comment

// single line comment
// alert("Hello world")

/* code here */ for Multi line comment

/* Multi line
comment */
/* var userid = "E1001";
console.log(Userid); */

Open developer devtool ๐Ÿ› ๏ธ

To open the developer console in Google Chrome, open the Chrome Menu in the upper-right-hand corner of the browser window and select More Tools > Developer Tools.

In console you can find all errors, warnings, and messages explicitly logged by JavaScript

Open developer devtool
Day 2

๐Ÿ”—Values in javascript

String data type

Such as an integer, floating point unit, but is used to represent text rather than numbers. For example, the word "sumit" and the phrase "I am 20 year old" are both strings. Even "20" could be considered a string,

var Fname = "sumit";
๐Ÿ˜Ž Pro tip: in a single quotation marks ' ' or double quotation marks " " every value consider as string value

Number data type

The number data type is used to represent integer number , floating point , positive or negative numbers with or without decimal place, or numbers written using exponential notation

var age = 20; // integer number
var total = 2021.01; // floating number
var sumtotal = 4.25e6; // exponential notation

Boolean data type

It is typically used to store values like yes (true) and (false), on (true) or off (false), etc

var Fname = "sumit";
console.log(Fname == "sumit"); // true
console.log(Fname == "coding"); // false

Undefined data type

The undefined data type can only have one value-the special value undefined. If a variable has been declared, but has not been assigned a value, has the value undefined.

var a;
var b = "Hello World!";
console.log(a); // Output: undefined
console.log(b); // Output: Hello World!

Null data type

A null value means that there is no value. It is not equivalent to an empty string ("") or 0, it is simply nothing.

var c = "";
var d = null;
console.log(c); //
console.log(d); // null

You can determine the type of value using typeof() operator

determine the type of value using `typeof()` operator
Note : null is an object Its type is object. null is a special value meaning no value undefined is not an object, it's type is undefined.
Day 3

๐Ÿ”—Variables in javascript

What is variable

Variable means anything that can vary JavaScript includes variables which hold the data value and it can be changed anytime. JavaScript uses reserved keyword var to declare a variable. A variable must have a unique name.

A JavaScript variable must start with a letter (A-Z, a-z), underscore (_), or dollar sign ($), subsequent characters can also be digits (0-9)

Using the keyword var. For example, var x = 100. Can be used to declare both local and global variables.

Assigning it a value. For example, x = 100. It declares a global variable and cannot be changed at the local level.

Variable with โ€œlocalโ€ scope

Variables declared within a JavaScript function, become LOCAL to the function. Local variables have Function scope: They can only be accessed from within the function.

function Multiply(x, y) {
var result = x * y;
console.log("Total is: " + result); // output 20
Multiply(4, 5); // call function
console.log(result); // error โš ๏ธ
Variable with โ€œlocalโ€ scope

Variable with โ€œglobalโ€ scope

A variable declared outside a function, becomes GLOBAL. A global variable has global scope: All scripts and functions on a web page can access it.

var total = 15;
function sumof() {
console.log("Total is: " + total); // output 15
sumof(); // call function
console.log(total); // output 15
Variable with global scope
Day 4

๐Ÿ”—Literals in javascript

Use literals to represent values in JavaScript which are fixed values, not variables.

  • Array literals
  • String literals
  • Object literals
  • Boolean literals

Array literals

In Javascript an array literal is a list of expressions, each of which represents an array element, enclosed in a pair of square brackets '[ ]'

//Creating an empty array
var frontend = [];
//Creating an array with four elements.
var frontend = ["HTML", "CSS", "JAVASCRIPT", "REACT"];
//Display an array element
console.log(frontend[1]); // CSS
//No need to specify all elements in an array literal
var frontend = ["HTML", , "CSS", "JAVASCRIPT"];
console.log(frontend[1]); // undefined
Array literals
Note:- JavaScript starts counting from zero so that โ€œ0โ€ is 1 , โ€œ1โ€ is 2 and so on

String literals

A string literal is zero or more characters, either enclosed in single quotation (') marks or double quotation (") marks. You can also use + operator to join strings.

string1 = "coding";
string2 = "sumit";
string3 = "First line \n Second line";
string4 = "instagram" + ".com";
String literals

Object literals

An object literal is zero or more pairs of comma separated list of property names and associated values, enclosed by a pair of curly braces.

var pages = {
username: "codingsumit",
name: "Sumit Harijan",
Followers: 500,
codingbatch: { followers: 55000, post: 230 },
console.log(pages.name); // Sumit Harijan
console.log("Username: " + pages.username + " Followers : " + pages.Followers);
// Username: codingsumit Followers : 500
console.log("Followers of codingbatch :" + pages.codingbatch.followers);
// Followers of codingbatch :55000
Object literals

Boolean literals

Boolean literals represent only two values true or false. And in Javascrip the value of 1 is assumed as true and the value of 0 is assumed as false

/*If comparison or logical operator is not used JS
tries to figure out if the value is "truth".*/
var isArray = true;
if (isArray) {
console.log("Yes it is an array!");
//Empty string (""), number(0), undefined, null are false value.
var username = "";
if (username) console.log("My name is : " + username);
var followers = 0;
if (followers) console.log("Your roll no. is " + followers);
var address;
if (address) console.log("Your name is " + username);
Boolean literals
Day 5

๐Ÿ”—Operators in javascript

JavaScript has the following types of operators.

  • Arithmetic operators
  • Assignment operators
  • Comparison operators
  • Logical operators
  • Conditional operators
  • Special operators

Arithmetic operators

Arithmetic operators
console.log(18 % 5); // output 3
var num = 6;
console.log(--num); // output 5
console.log(++num); // output 7
console.log(-num); // output -6

Assignment operators

Assignment operators
var a = 3;
var b = 4;
console.log((a += b)); // output 7
console.log((a *= b)); // output 12
console.log((a /= b)); // output 3
console.log((a -= b)); // output 3
console.log((a %= b)); // output 3

Comparison operators

Comparison operators
console.log(4 == "4");
// true :- value equal
console.log(4 === "4");
// false :- value equal but type not same
console.log(4 != 3);
// true :- 4 is not equal to 3
console.log(4 !== "3");
// true :- value 4 & type both are not same

Logical operators

Logical operators
console.log(6 < 10 && 3 > 1); // true
console.log(15 == 10 || 3 < 1); // true
console.log(!(4 == 5)); // true

Conditional operators

The conditional operator is used as a shortcut for standard if statement. It takes three operands. Syntax : Condition ? expr1 : expr2

score = 75;
var result = score >= 40 ? "Win" : "Lose";
console.log(result); // output :- Win
score = 39;
var result = score >= 40 ? "Win" : "Lose";
console.log(result); // output :- Lose
Day 6

Special operators

Comma operator

The comma operator is used to evaluate multiple expressions in one line.

for (var i = 0, j = 10; i <= 3; i++, j++) {
console.log("Floor no : " + i + " Flat No : " + j);
Comma operators

New operator

Lets developers create an instance of a user-defined object type or of one of the built-in object types that has a constructor function.

function User(name, age, nationality) {
this.name = name;
this.age = age;
this.nationality = nationality;
var admin = new User("sumit", 20, "Indian");
console.log(admin.nationality); // output : Indian
console.log(admin.name); // output : sumit
console.log(admin.age); // output : 20
New operators

Delete operator

The JavaScript delete operator removes a property from an object; if no more references to the same property are held, it is eventually released automatically.

var admin = {
codingbatch: "sumit",
codingsumit: "smthari",
console.log(admin.codingbatch); // output:- sumit
delete admin.codingbatch;
console.log(admin.codingbatch); // output:- undefined
Delete operators

In operator

The in operator returns true if the specified property is in the specified object or its prototype chain.

const user = {
name: "sumit",
profession: "web developer",
age: "20",
nationality: "indian",
console.log("name" in user); // true
delete user.name;
console.log("name" in user); // false
In operators

Instaceof operator

The instanceof operator is used to check the type of an object at run time. The instanceof operator returns a boolean value that indicates if an object is an instance of a particular class

var newstring = new String("sumit"); // string object
console.log(newstring instanceof String); // returns true
var newdate = new Date(); // date object
console.log(newdate instanceof Object); // returns true
console.log(newdate instanceof Date); // returns true
console.log(newdate instanceof String); // returns false
var newNumber = new Number(); // number object
console.log(newNumber instanceof Number); // returns true
Instaceof operators

This operator

The this operator is used to refer the current object. In general, this refers to the calling object in a method.

var person = {
firstName: "Sumit",
lastName: "Harijan",
fullName: function () {
return this.firstName + " " + this.lastName;
// Display data from the object:
console.log(person.fullName()); // sumit Harijan
This operators

Typeof operator

The typeof operator is used to get the data type of its operand

var name = "sumit";
var age = 20;
var user = {
firstName: "sumit",
lastName: "harijan",
console.log(typeof name); // string
console.log(typeof age); // number
console.log(typeof user); // object
Typeof operators
Day 7

๐Ÿ”—Statements in javascript

The instructions written in a program in a programming language are known as statements.

There is a difference types of statements in javascript but for now we gonna learn only basic

  • Block statement
  • If else statement
  • Switch statement

Block statement

A block statement groups zero or more statements. In languages other than JavaScript, it is known as a compound statement.

var a = 40;
var a = 200;
console.log(a); // 200

If else statement

Executes a group of statements if a logical condition is true. Use the optional else clause to execute another group of statements.

function grade(marks) {
if (marks > 90) console.log("Grade A+");
else if (marks > 80) {
console.log("Grade A");
} else if (marks > 70) {
console.log("Grade B");
} else {
console.log("Grade C");
If else statement

Switch statement

The switch statement allows to make a decision from the number of choices.

function marksgrade(marks) {
grade = marks;
switch (grade) {
case "A+":
console.log("marks > 90");
case "A":
console.log("marks > 80");
case "B":
console.log("marks > 70");
case "C":
console.log("Marks < 60");
console.log("Wrong grade");
marksgrade("A+"); //"Marks >= 90"
marksgrade("L"); //"Wrong grade"
Switch statement

Break statement

The break statement is used to terminate a loop, switch or label statement.

for (var i = 1; i < 19; i++) {
if (i == 4) {
Break statement

Continue statement

The continue statement terminates execution of the statements in the current iteration of the current or labeled loop, and continues execution of the loop with the next iteration.

for (var i = 1; i < 8; i++) {
if (i < 4) {
Continue statement

Try and catch statement

  • The try statement allows you to define a block of code to be tested for errors while it is being executed.
  • The catch statement allows you to define a block of code to be executed, if an error occurs in the try block.
try {
alertmsg("Wrong call");
} catch (e) {
console.log("Error Message: " + e.message);
console.log("Error Name: " + e.name);
Try and catch statement

Return statement

The return statement returns a value and exits from the current function.

function mul(a, b) {
return a * b;
console.log(mul(4, 5)); // 20
Return statement
Day 8

๐Ÿ”—Function in javascript

  • Like other programming and scripting languages, functions are one of the fundamental building blocks in JavaScript.
  • Functions are used repetitively in a program and it saves time while developing a web page.
  • To use a function, you must define it somewhere in the scope from which you wish to call it. Defining your own function in JavaScript is a simple task.
// Syntax
function name(parameter1, parameter2, parameter3) {
// code to be executed

Declare a function

For example, to declare a function that calculate the sum of argument passed to it,

You can do it in one of two ways

// Example -1
function cube(n) {
return n * n * n;
// Example - 2
var cube = function (n) {
return n * n * n;

Calling javascript function

Calling the function actually executes the instructions written within the function with the indicated parameters.

console.log(cube(2)); // output : 8

Function scope

In JavaScript there are two types of scope:

  1. Local scope
  2. Global scope
//Global scope
var name = "sumit";
function namefun() {
console.log("I can display name" + " " + name);
// Function scope
function userfun() {
var user = "smthari";
console.log("I can display user" + " " + user);
console.log(typeof user); // undefined
Function scope
Day 9

๐Ÿ”—Objects in javascript

In JavaScript all values except the primitive types of JavaScript (true, false, numbers, strings, null and undefined) are objects.

Create an object

You can create an object in two ways :-

  1. Literal way
  2. Object oriented way
/* 1) The syntax of creating object
using object literal */
var object = {};
/* 2) The syntax of creating object directly
using instance Object oriented way */
var objectname = new Object();

Object property

You can specify properties when creating an object or later. Property name can be only a string. Properties are separated by commas.

var user = {
fname: "Sumit",
lname: "Harijan",
age: 20,
fullname: function () {
return this.fname + " " + this.lname;

Access property value

The following code demonstates how to access a property's value.

var name = user.fullname();
console.log(name); // Sumit Harijan
var age = user.age;
console.log(user.age); // 20
Access property value

Add / modify a property

The following codes show how to add a new property or modify an existing one.

var name = user.fullname();
var age = user.age;
user.fname = "smthari";
console.log(user.fname); // smthari
user.age = 21;
console.log(user.age); // 21
Add / modify property