Introduction to JavaScript

What is JavaScript?

JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions.

JavaScript is a dynamically typed, cross-platform, and object-oriented programming language.

JavaScript is used to make webpages dynamic and interactive. (for example, if the user clicks a button then the theme of the website changes, or after loading a website a pop-up message may be displayed).

JavaScript in a web browser consists of 3 parts:

• ECMAScript provides core functionality.
• The "Document Object Model"(DOM) provides an interface for interacting with the elements on the webpage.
• The "Browser Object Model"(BOM) provides the browser API for interacting with the browser.

JavaScript was originally designed to make web pages dynamic, but it has evolved beyond that and can now be used on the server side as well.

History of JavaScript:

In September 1995, a Netscape programmer named Brendan Eich developed a new scripting language in just 10 days.

It was originally called Mocha, then LiveScript, and later renamed to JavaScript because Java was the most popular language at that time.

In November 1996, Netscape submitted JavaScript to ECMA International as the starting point for a standard specification that all browser vendors could conform to. This led to the official release of the first ECMAScript language specification in June 1997.

What is ECMA Script?

According to Wikipedia:

ECMAScript is a JavaScript standard intended to ensure the interoperability of web pages across different browsers. It is standardized by Ecma International

ECMAScript is commonly used for client-side scripting on the World Wide Web, and it is increasingly being used for writing server-side applications and services using Node.js and other runtime environments.

Client-side vs Server-side scripting:

Client-side scripting:

Processing takes place on the user's computer browser. It does not involve any processing on the server. The source code will be transferred from the server to the client's web browser via the internet and directly executed on the browser.

It is used for validations and functionality for user events. It can be used to modify the browser interface and make the page interactive.

It deals with client-side processing like cookies, and sessions. It deals with the storage of the web browser i.e local and session storage.

Server-side scripting:

Processing takes place on the server. It does not involve a web browser. It is used to create dynamic web pages. It will reduce the load of the web browser. It provides more security for data.

It allows user to request and responds accordingly. It can be used for database queries, handling data, handling read/write, interacting with other servers, etc.

What is JavaScript Engine?

JavaScript engine is software that executes JavaScript code not only on the browser but also on the server. The first engines were simple interpreters but all modern engines use just-in-time compilation for improved performance. JavaScript engines are typically developed by web browser development companies. Different browsers use different JavaScript engines.

• V8 – Open-source JavaScript Engine developed by Google for Chrome.
• SpiderMonkey – The JavaScript Engine Powering Mozilla Firefox.
• JavaScriptCore – Open-source JavaScript Engine developed by Apple for Safari.
• Rhino – Open-source JavaScript Engine managed by Mozilla Foundation for Firefox.
• Chakra – A JavaScript Engine for Microsoft Edge.

How do JavaScript engines work?

• Parsing: The engine reads the script and generates an AST(Abstract Syntax tree), this is the parsing phase.
• Interpretation: Then the interpreter converts the AST to byte code.
• JIT(Just-in-time) compilation: The interpreter is creating the byte the JIT compiler tries to optimize this code as much as possible.
• Execution: Then finally the optimized code is executed.

How to run JavaScript?

• Using the console tab of web browsers
• Using Node.js

Using the console tab of web browsers:

All the popular web browsers have built-in JavaScript engines. Hence, you can run JavaScript on a browser.

• Open your favorite browser(In this series we are gonna use Google Chrome).
• Right-click on the browser and select inspect option.

• On the developer tools, go to the console tab. Then, write JavaScript code and press enter to run the code.

Using Node.js:

Node is a back-end run-time environment for executing JavaScript code.

• Install the latest version of Node.js.
• Install an IDE/Text Editor like Visual Studio Code. (In this series we are gonna use Visual Studio Code).
• In VS code, create a file > write JavaScript code > save it with .js extension.
• Open the terminal in the Visual Studio Code and type node helloworld.js and hit enter.

How to Use JavaScript in HTML

• Inline JavaScript.
• Internal JavaScript.
• External JavaScript.

Inline JavaScript:

You have the JavaScript code in HTML tags in some special JS-based attributes.

<button onclick="alert('You just clicked a button')">Click me!</button>        

Internal JavaScript:

JavaScript code is written in the HTML file itself. Writing the JavaScript code inside the <script> tag and placing this in either the<head> or <body> tag as per the requirement.

<!DOCTYPE html
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
  </head>
  <body>
  <script>
     console.log("Hello World!")
  </script>
  </body>
</html>        

External JavaScript:

The JavaScript code is written in a separate file with the .js extension. The link to the external JavaScript file is added to the HTML file.

We can use the <script> tag to link the external JavaScript file to the HTML file.

<!DOCTYPE html
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
  </head>
  <body>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>        

Hello World Program

<!DOCTYPE htm
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
  </head>
  <body>
  <script>
     console.log("Hello World!")
  </script>
  </body>
</html>        

In this article, we have gone through the,

• What is JavaScript?
• History of JavaScript
• What is ECMAScript?
• Client-side vs Server-side scripting.
• What is a JavaScript engine and how do they work?
• Running a JavaScript code
• Using JavaScript inside the HTML page
• and wrote our first Hello World program

In the coming days, we will explore all the parts of JavaScript and try to learn together.

Thank you for taking the time to read this article 😊. I hope you found it useful and gained some knowledge. I would highly appreciate it if you take moment to like 👍, comment ✍️, and share 🔁 it.

Happy Learning...! ✌️✌️✌️

If you liked my content, Connect with me on,

• LinkedIn
• GitHub
• Twitter
• Instagram