Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
A brief history
3.
Features
4.
JavaScript with HTML/CSS
5.
Development Console
6.
Internal and External JavaScript
6.1.
Internal JS
6.2.
External JS
7.
Frequently Asked Questions
8.
Key Takeaways
Last Updated: Mar 27, 2024

Introduction to JavaScript

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.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Features

  1. It is a lightweight cross-platform scripting language. 
  2. It is straightforward to learn compared to other programming languages and has a great developer community worldwide.
  3. It has full integration with HTML and CSS.
  4. 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). 
  5. It is used to manipulate DOM( Document Object Model), which makes websites dynamic from static.
  6. Almost all the major browsers support it. 
  7. Scripts are executed as plain text and do not need to be compiled.
  8. 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 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!");

 

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

  1. for loop
  2. while loop 
  3. do-while loop
  4. for-in loop

Loops are also categorized as 

  1. Entry controlled loops
  2. 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

  1. String
  2. Number
  3. Boolean
  4. Undefined
  5. 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