Learn Basic JavaScript in Just 20 Minutes — Become a JavaScript Master

13 min readJul 14, 2023

Today in this article, we have brought a basic tutorial of Javascript for you, so that you can learn the basic fundamentals of Javascript.

JavaScript is one of the most popular programming languages in the world.

In such a situation, it is obvious that the demand for Javascript developers is very high, so by learning it, you can make a better career. Its most important thing is that it is very easy to learn, if you give only 20 minutes to this tutorial, then you will definitely learn the basic programming of Javascript.

If you are ready to learn Javascript then you can start coding in Javascript now by reading this basic tutorial. Next, we will also provide you advanced tutorial, so if you want, you can also subscribe to our newsletter for free, so that you will get further updates on your email.

Must check my recent Chrome Extention : Install Now

JavaScript Tutorial in Hindi — Basic Fundamentals

HTML Script Tag

You can insert JavaScript program anywhere in the head or body section of your HTML document, for this you will need <script> tag.

Example:

<script> 
// JavaScript code 
</script>

The browser automatically interprets the code written inside the <script> tag as a script. There are also some attributes of Script tag, which are given below, although they are used very rarely nowadays, still you should know about them:

Type Attribute:

According to the old HTML4 standard, the type attribute was written inside the script tag like this:

<script type="text/javascript"> 
//JavaScript code 
</script>

There is no need to write this attribute in Modern HTML.

Language Attribute:

It was told from the language attribute that which language we are using. It used to be written something like this:

<script language="javascript">
//JavaScript code 
</script>

There is no need to write it in the new version of HTML because the code written inside the <script> tag is considered as JavaScript by default according to the new standard.

JavaScript Syntax

By now you have understood that the code of JavaScript is written inside the <script> tag. Now try to understand how the code is written in JavaScript syntax i.e. JavaScript through the example code given below.

Example

<!DOCTYPE HTML> 
 <html> 
 <body> 
 <script> 
 alert( 'Hello, world!' );
 </script>
 </body>
 </html>

In this code, we have written a code of JavaScript in the script tag inside the body, so that a dialog box will popup on the user’s screen, in which Hello, world! Must have written

The thing to note here is that we have put semicolon (;) after the code but if you are writing only one code in a line then it is not necessary.

alert('Hello');
alert('World');

If multiple codes are being written in one line, then a semicolon has to be put at the end of each statement to separate them separately.

alert('Hello'); alert('World');

External Script

You can create a separate file of JavaScript and write code in it and import that file into HTML document.

To attach a script file in HTML, the location of that file has to be specified through the src attribute in the <script> tag.

Example:

<script src="/scriptfolder/myscript.js"></script>

We are importing a JavaScript file named myscript.js in the above code. In the code /scriptfoljs-/myscript.js tells the location of that js-file.

If the myscript.js file is at the same location as the HTML file then we can write src=”myscript.js”.

One advantage of using a separate file is that after downloading this file, the browser stores it in the cache and whenever a page needs that file, instead of downloading it again, it is taken directly from the cache. Is.

It means to say that this external script will not be downloaded again and again, which will increase the speed of opening the page.

Javascript Comments

Many times our program becomes very logical or we write some complex code and after a few months when we see it, we are very confused to understand it.

In such a situation the comment proves to be very helpful. If we describe what is happening in that code by writing comments next to the code, then you or anyone can understand it very easily by reading it later.

We can write comment anywhere in the script, it does not affect the execution of the program because the interpreter ignores it.

Like other programming languages, two types of comments can be used in Javascript:

1. Single line comment:

If you want to write a comment in a line, then you can simply write a comment in front of it by putting two forward slash //.

// This is a single line comment
alert('Hello');

2. Multiple lines comment:

If you want to write a comment in more than one line, then you will use /* and */ for this.

/* This code will not work
alert('Hello'); 
 */
alert('World');

In the example, the text and code written between /* and */ will not appear on the screen.
If you want to temporarily disable any code, you can do this by simply making it a comment.

Variables

Variable is used to store information. Variable is like a container in which we can store value and use it when needed.

To create a variable in other programming languages, it is necessary to tell its datatype i.e. what type of data (like numbers, character, string etc.) we are going to store in that variable.

But to create a variable in Javascript, there is no need to specify the datatype of the variable. We can store any type of data in a variable, JavaScript automatically understands the datatype of that data.

How to create variable?

You can use the “var” keyword to create a variable in Javascript, which is the oldest method. However apart from “var” you can also use “let” or “const” keyword which you will read further.

For now, we will learn to create variables using “var”. Some examples are given below for this.

Example:

var username;
var age;
var address;

If you want, you can also declare multiple variables in a single line. As:

var username, age, salary;

How to store value in variable?

Now we will learn to initialize the variables created above i.e. to store the value. For this see the examples given below.

Example:

var username='Amit';
var age= 25;
var address='Raipur';

Or we can assign value to all variables in a single line.

var username='Amit', age=25, address='Raipur';

Rules for creating variables:

To create a variable in Javascript, it is necessary to follow some of the rules given below.

I. The first character in the variable name should not be a digit or number.

II. Name should contain only letter (a to z or A to Z), digit (0–9), symbol ($ or _).

III. JavaScript already has some predefined keywords (reserved words) like class, return, function etc. which cannot be used as variable names. You can see the list of reserved keywords from here.

Operators

After storing values in variables, we can also perform some operations like addition, multiplication etc. between them. To perform such operations, we have to use some symbols (like +, -, *, /, % etc.) which are called operators.

There are some important terms related to operators in JavaScript, which are given below, about which you must know.

Operand:
The elements with which the operation is performed are called operands. For example: 5 * 7 in which we are multiplying 5 and 7 where we will call 5 as left operand and 7 as right operand.

Unary:
Such operators which have only one operand are called unary operators. For example -5 in which 5 is an operand and minus (-) is a unary operator as it is with only one operand.

Binary:
Such operators which require two operands to perform the operation are called binary operators. Like + is a binary operator because it requires two values or variables.

Types of Operators

There are many types of operators in Javascript, which are given in detail below.

Arithmetic Operators

Arithmetic operators are used to perform arithmetic operations between two variables or values. About these are given below.

JavaScript Comparison Operators

+ Addition 10+20=30
– Subtraction 15-10=5
* Multiplication 5*2=10
/ Division 8/2=4
% Modulus (Remainder) 5%2=1

JavaScript Comparison Operators

Two operands are compared with comparison operators. Comparison operators are of some types:


== Is equal to 20==30 = false
!= Not equal to 20!=30 = true
=== Identical (both values are equal and of same type) 5===2=false because both have same type but values are not equal
5===”5″=false because the types of both are not same. Here 5 is a digit while "5" is a character (single alphabet).
!== Not Identical 5 === 2 = true
5===”5″=true
< Less than 10<20 td=”” true=””>
> Greater than 10 > 20 = false
<= Less than equal to 10<=20=true
10>=10=true
=> Greater than equal to 10>=20=false
10>=10=true

Logical Operator

Some of the logical operators given below are used to perform logical operations.

&& Logical AND (If the values of the expressions on both sides of the operator are true then the output will be true otherwise it will be false) (20<30 && 30>20)=true
, Logical OR (If the value of either of the two expressions is true, the output will be true and if both are false, the output will be false) (10>30 || 30<40)=true
, Logical Not (It applies to single operand and reverses the value i.e. false to true and true to false)

Assignment Operators

The assignment operator (=) is used to assign a value to a variable. The assignment operators used in JS are given below.

= assign var a = 10;
var b = 20;
var c;
a+b=c
c = 30
+= Add and Assign - (Adds the values of both sides and stores them in the left side variable) var a=10; a+=20; a = 30
-= Subtract and Assign (subtracts the value of the right side variable from the value of the left side variable and stores it in the left side variable) var a=20; a = 5; a = 15
*= Multiply and Assign (multiplies the values of both sides and stores them in the left side variable) var a=10; a*=5; a = 50
/= Divide and Assign var a = 10; a/=5; a = 2
%= Modulus and Assign (after dividing the left value by the right value, assigns the remainder to the left variable) var a=10; a%=3; a = 1

Bitwise Operators

Bitwise operator works on the basis of bit i.e. binary number (0, 1). It calculates by converting the given input into binary and returns the output by converting it again into decimal number.

& Bitwise AND (If the value of both bits is 1 then the output will be 1 otherwise it will be 0)
, Bitwise OR (if either of the two bits is 1 then the output will be 1)
^ Bitwise XOR (If the value of only one of the two bits is 1 then the output will be 1)
~ Bitwise NOT (inverts each bit ie turns 0 into 1 and 1 into 0)
<< Bitwise Left Shift (all bits are shifted to the left, how much will be shifted is determined by the value of the right side)
>> Bitwise Right Shift (All bits are shifted to the right, how much will be shifted is determined by the value of the right side)

Conditional (Ternary) Operator

Sometimes we have to assign a value to a variable based on a condition. Conditional operator which is also called Ternary operator through which we can do this work easily.

Its syntax is something like this:

variablename = (condition) ? value1:value2;

where we question mark ? And use colon :. We put a condition inside the brackets () when this condition is true then the value before the colon is returned and when the condition is false then the value after the colon is returned.

Example

largestvalue = (20>10) ? 20:10;
alert(largestvalue);

If-else Statement

In Javascript, a condition is evaluated through the If-else statement and it is decided which code will be executed if the condition is true or false. Below are given three different types of If-else statement which we can use in our program as per the requirement.

If statement
If else statement
If else if statement

If statement

In this statement, if the given condition becomes true, then the code written inside the bracket is executed and if the condition is false, the code inside the bracket is skipped.

Syntax:

if (condition){
// code to be executed 
}

Example:

if(a>b){
alert("a is greater than b!");
}

If else statement

In this statement, if the condition is true, then the code of the bracket is executed, but if it is false, then the else part is executed. That is, in this statement we can write code for both true and false conditions.

Syntax:

if (condition){
// code to be executed 
}

Example:

if(a>b){
alert("a is greater than b!");
}
else{
alert("a is less than b!");
}

If else if statement

If we want to check more than one condition then we can use if else if statement.

Syntax:

if (condition){
// code to be executed 
}
else if (condition){
// code to be executed 
}
else if (condition){
// code to be executed 
}
else{
// code to be executed 
}

Example:

if(marks>89){
alert("Great");
}
else if(marks>80){
alert("Uff You are average");
}
else{
alert("You failed Unh!!");
}

Switch Statement

We can use Switch statement instead of multiple if statements. In this, an expression is evaluated and its value is compared with different cases, the code block associated with the case match is executed.

If there is no case match, then in such a situation the code with default case gets executed.

You can better understand it in the below example.

Syntax:

switch(expression){
case value1:
// code to be executed
break;
case value2:
// code to be executed
break;
default:
// code to be executed
}

Example:

var grade='B';
switch(grade){
case 'A':
alert("Good Job");
break;
case 'B':
alert("Pretty Good");
break;
case 'C':
alert("Passed");
break;
case 'F':
alert("Failed");
break;
default:
alert("No Grade");
}

Let us now understand this example:

First of all, we created a variable named grade whose value we kept B.
Now we will compare it with different cases.
In the first case checked whether the value of grade is ‘A’ or not… condition false because the value of grade is ‘B’.
In second case we checked for value ‘B’…condition true…code after colon will execute and “Pretty Good” will be printed in a popup through alert function.
After this the break statement will be executed and the rest of the switch statement cases will be skipped.

Grouping of Case

Sometimes there are some cases whose code blocks are common, in such a situation we can make a group of those cases. You can see its example below.

var value=5;
switch(value){
case 1: 
case 2: 
alert("The number is less than 3");
break;
case 3: 
case 4: 
alert("The number is less than 5");
break; 
default: 
alert("Error!!");
}

Javascript Loops

Many times in programming we have to perform the same action again and again, in such a situation we use loop.

Through Loop we can execute the same code again and again. It makes repetitive tasks easy.

For example, if we want to print all the even numbers between 1 to 100 one after the other, then this work can be done very easily with a few lines of code through loop.

Javascript mainly consists of teen types of loops:

while loop
do…while loop
for loop

while loop:

In this loop, we execute any code repeatedly until the given condition becomes false.

Syntax:

while(condition){
//code
}

Example:

var i = 0;
while (i < 10){
alert(i);
i++;
}

In this example, we took a variable i which was initialized to 0, now put condition in while i<10 i.e. this loop will run till the value of i is less than 10.

We keep increasing the value through i++ and print the value from 0 to 9 through alert.

do…while loop:

This is also similar to while loop, the only difference is that whether the condition is true or false, the code given must be executed at least once.

Syntax:

do{
//code
}while(condition);

Example:

var i = 0;
do{
alert(i);
i++;
}while (i < 10);

for loop:

The for loop is the most commonly used loop. It has three important parts:

Initialization: Giving the starting value of the variable.
Condition: Defining the condition for the loop.
Iteration: To increment or decrement the value of the variable.

Syntax:

for (initialization; condition; increment/decrement){
//code
}

Example:

for(var i=0; i<10; i++){
alert(i);
}

Function

Many times we have to perform the same task repeatedly at different places in our program.

In such a situation, if we use the function, then we will be saved from writing the same code again and again, this will save both time and space, as well as the structure of your program will be clean, readable and manageable.

If we make a function of a particular task (code), then whenever we need to perform that task in the program, we can call that function.

Earlier we have used alert() function which is a built-in function but here we will learn to create function by ourselves.

Function Definition:

Before using any function, it is necessary to define it, it is necessary to tell how that function will work.

Syntax:

function functionname(){
//code to be executed
}

Example:

function msg(){ 
alert("hello everyone!");  
}

Calling a function:

After defining the function, whenever it has to be run, it is called, it is also called invoking the function.

To call a function simply its name is written. You can see an example of this below.

Example:

<script>
//function definition 
function msg(){
alert("hello everyone!");
}
//function call
msg();
</script>

In the above example, we have called the function immediately after defining it. When the page is loaded, this function will automatically be called, the user does not need to do anything.

But sometimes there is such a requirement that we need to call the function only on a particular event or when the user performs an action (like clicking, mouse hovering), in such a situation we can call the function outside the <script> tag. You can call.

You can see an example of this below.

<script>
function msg(){ 
alert("hello everyone!");  
}
</script>
<input type="button" onclick="msg()" value="click here!">

In the above example, we have created a button, when the user clicks on that button, then the msg() function will be called.

Function with parameters:

We can also pass some data to the function through parameter (also called function argument) with which it can perform some operation and give us the result.

Till now we were seeing the function example without parameter but now we will also see the example of function with parameter i.e. argument.

<script>
function msg(from, text){
alert( from + ':' + text);
}
msg("Vivek","Hello everyone!"); 
</script>

Friends, with this tutorial, you can start coding in JavaScript and can also practice by making small programs.

Learn Basic JavaScript in Just 20 Minutes — Become a JavaScript Master

JavaScript Tutorial in Hindi — Basic Fundamentals

HTML Script Tag

Type Attribute:

Language Attribute:

JavaScript Syntax

External Script

Javascript Comments

1. Single line comment:

2. Multiple lines comment:

Variables

Operators

Types of Operators

Arithmetic Operators

JavaScript Comparison Operators

JavaScript Comparison Operators

Logical Operator

Assignment Operators

Bitwise Operators

Conditional (Ternary) Operator

If-else Statement

If statement

If else statement

If else if statement

Switch Statement

Grouping of Case

Javascript Loops

while loop:

do…while loop:

for loop:

Function

Function Definition:

Calling a function:

Function with parameters:

Written by Emma Delaney

Responses (1)