Let’s learn Java Script 🤠

Nipuna Hettiwatta
5 min readFeb 23, 2021

--

Hello everyone !!!
This is my first article. Here I’m going to write basic concepts about Java Script.

Java Script is one of the most popular scripting languages. Scripting language means, it’s one of the lightweight programming languages. It’s supported by all major browsers like google chrome, internet explorer. Remember it’s a case sensitive programming language.

How To Run Java Script? 🤔

On the web , javascript code lives inside the HTML document and needs to be enclosed by <script> and </script>. We can put the script tag anywhere (Head section or body section) in the HTML document.

output

we use the document.write() function to write text into our Html file.

But when we have to write the same script on several pages, it is difficult. So there is another way to write our script. We can write a script in another external file and link to our HTML page. We should save that file as (file name).js

Ex: first_javascript.js

Link javascript file to the HTML file

Java Script with Console

The console is a part of a web page. Not only see errors and warnings but also we can run javascript code from there. We have to use the console.log() function to write in the console. When press ctrl+shift+i on the web page you can see the console.

Let’s see a little example;

console.log("Hello  console");
Output

Variables

Variables are containers for storing data values. Before using variables we must declare them.

We can use let and var keywords to declare the variables.

Ex :
var x ; ….….….….…(declare the variable)
x =10; ….….….…...(assigned a value)
var y = 200;….….….(declare and assigned a value same line)
var name = ‘Nimal’;
var text ="My name is Smith";
let number = 3;

const is an another keyword we use to declare variable that can not be reassigned.
Ex: const name = “Nipuna”;

<html>
<head>
<title>welcome to js</title>
</head>
<body>
<script>
var x = 56;
var name= "Saman";
document.write("Hello ", name, ". Welcome !");
document.write("<br>");
document.write("The value of the x is :", x);
</script>
</body>
</html>
Output of the above code

Operators

Arithmetic Operators

Arithmetic operators perform an arithmetic function on numbers.

Comparison Operators

We can compare all types of data values with comparison operators.

Logical and Boolean Operators

We use these operators to evaluate an expression and return to true or false.

Conditionals and Loops

if, else, else if statement

We use if to specify a block of code that we want to be executed if a specified condition is true.
We use else to specify a block of code that will execute if the condition is false.
We use else if to specify a new condition if the first condition is false.

if(condition){   
//statement , only execute condition is true
}
--------------------------------------------------------------------


if(condition){
//statement , if condition is true execute

}
else{
//statement , if condition is false execute
}--------------------------------------------------------------------if(condition){
//statement , if condition is true execute.

}
else if(condition){
//statement , if 1st condition is false but 2nd condition is true then execute.

}
else if(condition){
//statement , if 1st and 2nd conditions are false but 3rd is true then execute.

}
else{
//statement , if all conditions are false execute.
}
Output of the code

Loops

If we want to run the same code repeatedly, we have to call the statement again and again. But when we use loops we can execute a block of code several times easily.
There are three loops,
1) for loop
2) while loop
3) do-while loop
Let’s discuss one by one;

1. for loop

for(initialization;  condition;  iteration){
//statement
}

Let’s look at a little example to understand;
I want to display numbers 1 to 5

var i;for(i=1; i<=5;i++){
document.write(i +"<br/>");
}
Output of the code

So let’s see what happens: 🤓
First, declare a variable called i. Then we assigned a value i=1 and then we check the condition (i≤5). If the condition is true then go inside the loop and execute the statements. After that come to the iteration part (i++). Now i =2. Then again check the condition and do the same thing. When the condition becomes false then exist from the loop part.

2. while loop

while(condition){
//statement
}

Let’s try the same example which we write in for loop with using while loop ;

var i=1;while(i<=5){
document.write(i +"<br/>");
i++;
}

We can see the same output which we get in the previous loop.

3. do-while loop

do{
//statement
}while(condition);

Let’s see the same example;

var i=1;do{
document.write(i +"<br/>");
i++;
}while(i<=5);

We can get the same output;

Output of the code

So;
What is the difference between a while loop and a do-while loop? 🤔

The while loop executes the code after checking the condition. If the condition is true then execute the code. But do-while loop will execute the code before checking if the condition is true. Therefore do--while loop executes the code at least one time.

I think you can get knowledge of basic concepts in javascript.

Thank You!

--

--