Your First Steps in Learning JavaScript

Introduction

Consider an organization that provides a website that allows its customers to view its products. The company has received frequent customer feedback to give a shopping facility online. Therefore, the company has decided to add a shopping facility to their Website by creating dynamic Web pages. These Web pages will allow the user to shop for products online. Here, the developer's main task is to validate the customers' inputs while they shop online. For example, details such as credit card number, email, and phone number entered by the customer must be properly formatted. Further, the developer is also required to retrieve the chosen products and their quantity to calculate the total cost.

The developer can handle all these critical tasks by using a scripting language. A scripting language refers to a set of instructions that provide some functionality when the user interacts with a Web page.

Scripting

Scripting refers to a series of commands that are interpreted and executed sequentially and immediately on the occurrence of an event. This event is an action generated by a user while interacting with a Web page. Examples of events include button clicks, selecting a product from a menu, and so on. Scripting languages are often embedded in HTML pages to change the behavior of Web pages according to the user's requirements.

There are two types of scripting languages, described as follows:

Client-side scripting

Refers to a script being executed on the client's machine by the browser.

Server-side scripting

Refers to a script being executed on a Web server to generate dynamic HTML pages.

JavaScript

JavaScript is a scripting language that allows you to build dynamic Web pages by ensuring maximum user interactivity. JavaScript language is an object-based language, which means that it provides objects for specifying functionalities. In real life, an object is a visible entity such as a car or a table. Every object has some characteristics and is capable of performing certain actions. Similarly, in a scripting language, an object has a unique identity, state, and behavior.

The identity of the object distinguishes it from other objects of the same type. The state of the object refers to its characteristics, whereas the behavior of the object consists of its possible actions. The object stores its identity and state in fields (also called variables) and exposes its behavior through functions (actions).

Versions of JavaScript

The first version of Javascript was developed by Brendan Eich at Netscape in 1995 and was named JavaScript 1.0. Netscape Navigator 2.0 and Internet Explorer 3.0 supported JavaScript 1.0. Over the period, it gradually evolved with newer versions where each version provided better features and functionalities as compared to their previous versions.

Lists various versions of the JavaScript language, also called ECMAScript.

1. ECMAScript 1 (1997): First edition.
   
   
2. ECMAScript 2 (1998): Supported by Internet Explorer from version 4.0.
   
   
3. ECMAScript 3 (1999): Added regular expressions and try/catch; supported by Internet Explorer 5.0, Netscape Navigator 4.0, and Opera 5.0 onwards.
   
   
4. ECMAScript 5 (2009): Added 'strict mode', JSON support, `String.trim()`, `Array.isArray()`, and Array iteration methods; supported by Internet Explorer 6.0 and Mozilla Firefox 1.0 onwards.
   
   
5. ECMAScript 2015: Published in 2015; added `let` and `const`, default parameter values, `Array.find()`, and `Array.findIndex()`.
   
   
6. ECMAScript 2016: Published in 2016; added an exponential operator and `Array.prototype.includes`.
   
   
7. ECMAScript 2017: Published in 2017; added string padding, `Object.entries`, `Object.values`, async functions, and shared memory.
   
   
8. ECMAScript 2018: Published in 2018; added rest/spread properties, asynchronous iteration, and `Promise.finally()`.
   
   
9. ECMAScript 2019: Published in 2019; added `Array.prototype.flat`, `Array.prototype.flatMap`, and `Object.fromEntries`.
   
   
10. ECMAScript 2020: Published in June 2020; introduces a Bigint primitive type for arbitrary-sized integers, a null coalescing operator, and a 'globalThis' object.
    
    
11. ECMAScript 2021: Published in June 2021; introduces the 'replaceAll' method for Strings, `Promise.any`, `AggregateError`, `WeakRef`, and other features.
    
    
12. ECMAScript 2022: Published in June 2022; introduces new features like `Array.prototype.at()`, top-level await, and new Class Field declarations.
    
    
13. ECMAScript 2023: Published in June 2023; introduces the `RegExp` match indices, change array by copy methods (`Array.prototype.toReversed()`, `Array.prototype.toSorted()`, etc.), and a new `Hashbang` grammar.
    
    

Client-side JavaScript

JavaScript is a scripting language that can be executed on the client and server sides. The browser executes Client-side JavaScript (CSJS) on the user's workstation. A client-side script might contain instructions for the browser to handle user interactivity. These instructions might be to change the look or content of the Web page based on user inputs. Examples include displaying a welcome page with the username, displaying the date and time, validating that the required user details are filled in, and so on.

JavaScript is either embedded in an HTML page or is separately defined in a file, which is saved with a .js extension. In client-side scripting, when HTML is requested, the Web server sends all the required files to the user's computer. The Web browser executes the script and displays the HTML page to the user along with any tangible output of the script.

Server-side JavaScript

Server-side JavaScript (SSJS) is executed by the Web server when an HTML page is requested by a user. The output of server-side JavaScript is sent to the user and is displayed by the browser. In this case, a user might not be aware that a script was executed on the server to produce the desired output.

Server-side JavaScript can interact with the database, fetch the required information specific to the user, and display it to the user. This means that server-side scripting fulfills the goal of providing dynamic content on Web pages. Unlike client-side JavaScript, HTML pages using server-side Javašcript are compiled into bytecode files on the server. Compilation is a process of converting the code into machine-independent code. This machine-independent code is known as bytecode, which is an executable file. The Web server runs this executable to generate the desired output.

<Script> Tag

The <script> tag defines a script for an HTML page to make them interactive. The browser that supports scripts interprets and executes the script specified under the <script> tag when the page loads in the browser. You can directly insert JavaScript code under the <script> tag. You can define multiple <script> tags either in the <head> or in the <body> elements of an HTML page. In HTML5, the type attribute specifying the scripting language is no longer required as it is optional.

The use of the <script> tag.

<!DOCTYPE html>

<html>

<head>

<script>

document.write ("Welcome to the Digital World") ;

</script>

</head>

<body>

...

</body>

</html>

There are two main purposes for the <script> tag, which are as follows:

• Identifies a given segment of the script on the HTML page
• Loads an external script file