Table of contents

Introduction

A brief history

Features

JavaScript with HTML/CSS

Development Console

Internal and External JavaScript

6.1.

Internal JS

6.2.

External JS

Frequently Asked Questions

Key Takeaways

Last Updated: Mar 27, 2024

Introduction to JavaScript

Q: Q1. What is JavaScript?

Ans: JavaScript is a cross-platform, lightweight scripting language used by developers for making awesome websites.

Q: Q2. Is JavaScript-only used in Client-Side Development?

Ans: JavaScript can be used in both Client-Side and Server-Side applications, making it super flexible and one of the most used languages for development.

Q: Q3. Are Java and JavaScript the same?

Ans: No, they are two fundamentally different programming languages. Java is an Object-Oriented Programming Language, whereas JavaScript is a scripting language.

Q: Q4. How many types of looping structures are present in JavaScript?

Ans: There are four types of looping structures in JavaScript. They are used for iterating through the same piece of code multiple times. Additionally, a test condition is also added with the loops.

Q: The looping structures in JavaScript are

for loopwhile loop do-while loopfor-in loop

Q: Loops are also categorized as

Entry controlled loopsExit controlled loops

Q: Q5. What are the different types of data types in JavaScript?

Ans: There are two types of data types in JavaScript - primitive and non-primitive.

Q: The five primitive data types are

StringNumberBooleanUndefinedNull

Author Debarati Ghatak

Do you think IIT Guwahati certified course can help you in your career?

Yes

Introduction

JavaScript is a very popular lightweight and cross-platform scripting language which can be used for both Client-side and Server-side development. It can magically make web pages 'alive.' However, as we get to know JavaScript better, we will understand the fantastic features of this scripting language that does the actual job.

A brief history

Brendan Eich, a Netscape programmer, developed JavaScript in September of 1995, which later became ECMA-262 standard in 1997. It was initially called 'Mocha' then renamed 'LiveScript', and now it's known as 'JavaScript'.

In JavaScript, we refer to 'programs' as 'scripts'. Often there is some confusion between the two languages Java and JavaScript, but it is to be kept in mind that Java and JavaScript are fundamentally very different.

Features

It is a lightweight cross-platform scripting language.
It is straightforward to learn compared to other programming languages and has a great developer community worldwide.
It has full integration with HTML and CSS.
It can execute not only on the browser, i.e. Client-Side, but also on servers, i.e., Server Side( with the help of Node.js).
It is used to manipulate DOM( Document Object Model), which makes websites dynamic from static.
Almost all the major browsers support it.
Scripts are executed as plain text and do not need to be compiled.
Besides being used in Web Development, JavaScript also finds its use in Game Development, Machine Learning, etc.

JavaScript with HTML/CSS

JavaScript is mainly used to develop websites. Its best feature is that it has full integration with HTML and CSS. HTML gives your website a structure, CSS provides the styling, and JS adds logic and functionality to the webpage.

Let us see a fun example to understand how this scripting language adds behaviour to a website.

Code:

envelope.html

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Introduction to JavaScript</title>
 </head>
 <body>
   <h1>Introduction to JavaScript</h1>
   <p>Click on the buttons below to open or close the envelope.</p>
   <script>
     function message(state) {
       if (state == 0) {
         document.getElementById("envelope").src = "close.png";
       } else {
         document.getElementById("envelope").src = "open.png";
       }
     }
   </script>
   <img id="envelope" src="close.png" />
   <p>
     <button type="button" onclick="message(1)">Open</button>
     <button type="button" onclick="message(0)">Close</button>
   </p>
 </body>
</html>

Output:

Note: If you are new to JavaScript, the HTML code might seem a little overwhelming, but it is very simple.

All we are doing here is opening and closing the envelope with the help of a JavaScript function message(). This function has an input parameter called ‘state’. If the state is 0, the envelope is closed, and when it’s 1, the envelope is opened.

Development Console

Let's write a simple line of code to print a ‘Hello World!’ alert message.

You must be wondering that you need to open your code editor to run the code, but just using your browser’s development console, you can run JavaScript.

For Google,

Right-click on the page and click on 'Inspect'.

Now click on 'Console' and type.

alert('Hello World!')

You can also try this code with Online Javascript Compiler

Run Code

You will see a ‘Hello World!’ alert appears on the browser tab.

You can also run JavaScript in an IDE. Some of the best IDEs for coding in JavaScript are:

Visual Studio Code
Atom
Eclipse
NetBeans
Sublime Text

Internal and External JavaScript

Let’s create the same ‘Hello World!’ alert using VScode. But before that, we need to know that JavaScript can be added to HTML either as Internal JS or External JS.

Internal JS

We can directly add JavaScript in our HTML page within <script> tag either inside the head or body.

Code:

index.html

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Introduction to JavaScript</title>
 </head>
 <body>
   Hi!
   <script>
     alert("Hello World!");
   </script>
 </body>
</html>

External JS

We can add the location of an external JavaScript file in our HTML page within the <script> tag inside the head.

The ‘src’ attribute of the <script> tag is used to indicate the location of the JavaScript source file.
The ‘type’ attribute of the <script> tag is used to specify the MIME type of script. It’s default value is ‘text/javascript’.

Code:

index. HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Introduction to JavaScript</title>
    <script type="text/javascript" src="index.js"></script>
  </head>
  <body>
    Hi!
  </body>
</html>

index.js

alert("Hello World!");

You can also try this code with Online Javascript Compiler

Run Code

Output:

Open index.html with Live Server

You will be able to see this page with both codes.

Frequently Asked Questions

Q1. What is JavaScript?

Ans: JavaScript is a cross-platform, lightweight scripting language used by developers for making awesome websites.

Q2. Is JavaScript-only used in Client-Side Development?

Ans: JavaScript can be used in both Client-Side and Server-Side applications, making it super flexible and one of the most used languages for development.

Q3. Are Java and JavaScript the same?

Ans: No, they are two fundamentally different programming languages. Java is an Object-Oriented Programming Language, whereas JavaScript is a scripting language.

Q4. How many types of looping structures are present in JavaScript?

Ans: There are four types of looping structures in JavaScript. They are used for iterating through the same piece of code multiple times. Additionally, a test condition is also added with the loops.

The looping structures in JavaScript are

for loop
while loop
do-while loop
for-in loop

Loops are also categorized as

Entry controlled loops
Exit controlled loops

In the case of Entry controlled loops, the test condition is checked before entering the loop. Example of this type of loop includes for loop and while loop.

In the case of Exit controlled loops, the test condition is checked at the end of the loop. The loop body is executed at least once, irrespective of whether the test condition is satisfied or not. The do-while loop is an example of Exit controlled loop.

Q5. What are the different types of data types in JavaScript?

Ans: There are two types of data types in JavaScript - primitive and non-primitive.

The five primitive data types are

String
Number
Boolean
Undefined
Null

The non-primitive includes Objects.

Key Takeaways

In this article, we were introduced to JavaScript. We learned about its different features and how easily it can be integrated with HTML/CSS.

We suggest you get your fundamentals crystal clear with our Full Stack Development course if you are new to Web Development.

Happy Learning Ninja!

Live masterclass

Google SDE interview process: Strategies to succeed

by Ravi Raj Singh

24 Mar, 2025

01:30 PM

569+ registered

Transition to an Amazon SDE role: Get insider tips

by Anubhav Sinha

26 Mar, 2025

01:30 PM

41+ registered

Microsoft Data Analytics interview: Dos and Don’ts to get shortlisted

by Prerita Agarwal

25 Mar, 2025

01:30 PM

579+ registered

Become MAANG Data Analyst: PowerBI & AI for Data Visualization

by Alka Pandey

27 Mar, 2025

01:30 PM

131+ registered

Google SDE interview process: Strategies to succeed

by Ravi Raj Singh

24 Mar, 2025

01:30 PM

569+ registered

Transition to an Amazon SDE role: Get insider tips

by Anubhav Sinha

26 Mar, 2025

01:30 PM

41+ registered

View more events