10X Sale
kh logo
All Courses
  2. Tutorials
  3. Web Development

What is JavaScript

Updated on Sep 3, 2025
 
7,972 Views
Table of Content

JavaScript, often known as JS, is a high-level, both interpreted and compiled programming language. It is characterized by weakly-typed language in which functions are first-class citizens. It is different then traditional programming languages like C++ and Java which are strongly typed and where classes are the main thing.

In Java and C++, we declare a variable with their type in front of it. It is declared as a string, Boolean, integer as below.

string str = “This is a string”;
int i = 10;
boolean bool = true

On the other hand in JavaScript, everything is a var(although two new types – let and const were introduced in ES6).

var str = “This is a string”;
var I = 10;
var bool = true;

These can also be reassigned later without any errors in JavaScript.

Next JavaScript is mainly a function based language where a lot of emphases is given on functional programming comparison to languages like C++ and Java where everything is a Class.

Also, we can implement the concept of classes in JavaScript using constructor function and even ES6 has a class keyword, but they are different then Classes in Java or C++.

As earlier said JavaScript is both interpreted and compiled programming language.
Let’s first understand what is a compiled language and interpreted language.

Compiled Languages are languages in which we turn a program first from human-readable format to machine format, generally through a compiler. After that, we execute that code. So, it is generally a two-step process. Languages like C, C++ and Java are examples of Compiled languages. For example, if we have a “C” program(hello.c), we will first convert it into machine code by using a gcc(Gnu C compiler) like below:

gcc hello.c -o hello

If no error it will generate an executable “hello” and we will run it by:

./hello

Interpreted Languages are languages in which code doesn’t need to be compiled first. Language like Perl, Python are interpreted languages. To run a python code we just need to run it directly by a command like below:

python hello.py

The above code does not need to be compiled first but it does require that python is installed on any machine that needs to run the script.

JavaScript is a special case where you directly execute your source code. A web page will directly execute your JavaScript. So, for that reason, many people think JavaScript as an interpreted language.

However, there is a compilation step just before the interpretation step in JavaScript. So, JS is both compiled and interpreted language.

Compilation Step – During this step, the compiler mainly registers the variable declarations.

Let consider the below example. The compilation steps mainly look at the var keyword. It is not bothered by what is assigned in these variables.

var a = 10;
var b = 20;

console.log(a+b);

JavaScript

When the compiler goes to line 1, it encounters var and registers it in the global scope and then goes to line 3 and registers the var b. Line 5 is only a console and it doesn’t find any var, so don’t do anything.

Interpretation Step – During this the actual execution takes place.

For the above example, the interpreter starts at line 1 and see a variable a and ask the compiler, if it has a variable “a” in Global scope and the compiler has it. So, it assigns the value 10 to it.
Next, the same step is repeated for line 3 and interpreter assigns 20 to variable “b”.
Now once the interpreter goes to line 5, it finds the console. It first looks for the console at global scope from the compiler but doesn’t find it. So, it checks in the JavaScript global and finds it. Inside the console, there are variable a and b, which it finds at global scope. It then adds them using the addition operator and displays the result.

JS Where To / Placement

In HTML document to run JavaScript code we need to place it inside <script>…</script> tags. We can insert the <script> tag inside <head> or <body>, but it affects the way HTML is parsed. It is because the moment the browser parser encounters <script> tag, it stops HTML parsing till all the code inside <script> tag is executed. Let’s us check the different ways to load JavaScript.

JavaScript in <head>..</head> section

It is useful to put the script in the head if you want to capture something like a click event. You should keep in mind that the page HTML will not show until the script is fully executed. So, putting a code which is doing a lot of operations, like doing some network request will be a bad practise because the user visiting your website will see a blank page until all JavaScript code is executed.

<html>
  <head>      
     <script>         
           function sayHello() {
              console.log("Hello JavaScript")
           }
     </script>     
  </head>
  <body>
     <input type = "button" onclick = "sayHello()" value = "Hello JS" />
  </body>  
</html>

It will show a button on the page and on clicking it will show the text “Hello JavaScript” on console log.

Hello_JavaScript

JavaScript in <body>..</body> section

You can put the script tag anywhere inside the body section. But again we should keep in mind that the browser will not parse further until all JavaScript code is executed. Below is the case which needs the script to generate content for the page.

<html>
  <head>
  </head>   
  <body>
     <script>
            document.write("Hello JavaScript")
     </script>      
     <p>This is web page body </p>
  </body>
</html>

The code will show the following result on the webpage.

Hello JavaScript

This is web page body

The best practice, however, is to put the script tag just before the </body> tag ends. This way the user, especially on slower networks will not see a blank page and the HTML will be rendered. After that, the script can be loaded, which generally adds interactivity to buttons and other elements.

JavaScript in an external file

As the JavaScript code grows, we separate it from the HTML file and keep it in a separate file with .js extension. Notice that it can be put anywhere in <head> or <body> and will block the execution of HTML code accordingly.

<html>
  <head>
     <script src = "filename.js" ></script>
  </head>
  <body>
     .......
  </body>
</html>

Script tag attributes

We can have two attributes also in script tag – async and defer. As told earlier that when the browser encounters a script tag, it blocks any other parsing till the JavaScript is executed.

We will look at all three types of execution here – Normal, async and defer.

Normal ExecutionTake the example of <script> been located somewhere in the middle of the body.

<html>
<head> ... </head>
<body>
   ...
   <script src="script.js">
   ....
</body>
</html>

As mentioned earlier, the HTML parsing will stop to fetch and then execute the script.

Execute Script

Async Execution

The async attribute in the script tag indicates to the browser that script file can be executed asynchronously.

<html>
<head> ... </head>
<body>
   ...
   <script async src="script.js">
   ....
</body>
</html>

The script is fetched on parallel with the HTML parsing. But once the script is fetched, the HTML parsing is paused to execute the script.

JS_Script_Pause

Defer Execution

The defer attribute in the script tag indicates to the browser that script file to be executed only once the HTML parsing is completed.

<html>
<head> ... </head>
<body>
   ...
   <script defer src="script.js">
   ....
</body>
</html>

Like async the script can be fetched in parallel to HTML parsing. But even if the script is fetched before the HTML parsing is completed, it will wait for the parsing to be completed before executing the script.

JS_Script_Complete

JS Output

JavaScript doesn’t have any built-in capabilities like C, C++, Java to print and display. Below is the function in these three traditional languages to print something.

printf(“C programming”);
cout << “C++ programming”;
System.out.println(“Java programming”);

JavaScript doesn’t have any, so it uses the browser’s window and document object for display and print. Mostly there are four ways to display data in JavaScript.

innerHTML:- For writing into HTML element.
document.write():- For Writing into HTML for Output.
window.alert():- Writing into an alert box
console.log():- For writing into browser console.

innerHTML

To access an HTML element, JavaScript uses various methods of document like getElementById(), getElementsByClassName(), querySelector(), querySelectorAll() and others. The most popular nowadays in querySelector() because we can use it with both ids and classes.

<!DOCTYPE html>
<html>
<body>
<h1 class="first"></h1>
<p id="demo"></p>
<script>
document.querySelector(``.first").innerHTML = "My First Web Page";
document.querySelector("#demo").innerHTML = 5 + 6;
</script>
</body>
</html>

First_Page

document.write()
The write() method writes string of text to a document stream. The document.write() should be embedded inside an document.open() and document.close().
If not mentioned, it is automatically added by the JS engine.

<html>
<head>
 <title>write example</title>
 <script>
   function latestContent () {
     document.open();
     document.write("<h1>Out with the old - in with the new!</h1>");
     document.close();
   }
 </script>
</head>
<body onload="latestContent();">
 <p>The original document.</p>
</body>
</html>

In the above example, the text The original document is replaced by Out with the old - in with the new!. It is because if write() is called after the HTML document is loaded, will delete all existing HTML.

window.alert()
The window.alert() method displays an alert dialog with the optional specified content and an OK button.

The alert dialog should be used for messages which do not require any response on the part of the user, other than the acknowledgement of the message.

Dialog boxes are actually modal windows which prevent the user from accessing the rest of the webpage until the dialog box is closed.

<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
alert();
</script>
</body>
</html>

First_Page_Output

console.log()
The console.log() method writes a message to the web console. It is used extensively by developers to check the output of some variable at some point.

<!DOCTYPE html>
<html>
<body>
<h1>Open the Web console</h1>
<script>
console.log("The sum of 5 + 6 is ", 5 + 6);
</script>
</body>
</html>

Open Web Console

Javascript Statements

A program is a list of instructions to be executed by the computer. In JavaScript, these programming instructions are called statements.
Below is a simple JavaScript program, which consists of many JS Statements.

var x, y, z;    // Statement 1
x = 5;          // Statement 2
y = 6;          // Statement 3
z = x * y;      // Statement 4
console.log("z is", z); // Statement 5

Semicolons(;)-

Semicolons are used to separate lines of the statement as in the above example. We can also put multiple statements on a single line until they are separated by semicolons. We will refactor the above code a bit.

var x, y, z;    // Statement 1
x = 5; y = 6;   // Statement 2
z = x * y;      // Statement 3
console.log("z is", z); // Statement 4

One more thing to keep in mind is that we can omit the semicolon at the end of the line. The JavaScript compiler will automatically insert it.

var x, y, z    // Statement 1
x = 5; y = 6   // Statement 2
z = x * y      // Statement 3
console.log("z is", z) // Statement 4

White Space

JavaScript ignores multiple white spaces. You can use these white spaces to make your code more readable and presentable. Consider the below example.

var coder="Harry";   // Less readable
var coder= "Harry";   // More readable
z=x*y;      // Less readable
z = x * y;      // More readable
for(var i=0;i<=10;i++) // Less readable
for(var i=0; i<=10 ; i++) // More readable

Code Blocks

JavaScript statements can be grouped together inside curly brackets. This patter is mostly seen in functions, loops and conditional statements.

//JavaScript function
function addNumbers(num1, num2) {
return num1 + num2;
}
//for loop
for( var i=0; i<10 ; i++){
console.log(i);
}
//if-else statement
if(age > 18) {
return “Adult”;
} else {
Return “Not adult”;
}

JavaScript Keywords

JavaScript has a set of keywords which have special meaning to JS compiler. We cannot use them for the variable name as they have special meanings.

Keyword

Description

break

Terminates any loop

continue

Jumps out of that iteration of the loop

debugger

Stops the execution of JavaScript

do…while

Type of a loop, which is guaranteed to execute at least once

for

Type of a loop, which is used most frequently

function

Used to declare a function

if…else

Conditional statement

return

Exists from function

switch

Type of conditional statement.

try…catch

Used to implement error handling in a block of code

var

Declares a variable. It can be of any type.

+91

By Signing up, you agree to ourTerms & Conditionsand ourPrivacy and Policy

Get your free handbook for CSM!!
Recommended Courses