Introduction

Hello everyone, Let’s talk about making our application more user friendly and fun. Ever wondered how web applications get so interactive ?

In this article I will give you a high level of how it came to be through the help of one of the standard web technologies called JavaScript. What is JavaScript ?

A simple, interpreted programming language is JavaScript. It belongs to the third level of web technology (HTML, CSS ,JS). In contrast to static HTML and CSS, JavaScript enables you to add and write interactivity to your website. If you've played games on your mobile device before, consider how interactive they are: are there interactivities like clicking a button or submitting a form, etc.? Most of it was created using JavaScript.

JavaScript is a light weight, interpreted programming language.

Interpreted → it means that as soon as you write a line of code it gets interpreted and you see the result at an instance.

Light weight → means that it can run in the browser either on small screens (mobile phone) or large devices.

Programs written in JavaScript are called scripts. Hence when you hear JavaScript being called a scripting language .

Dynamic vs Static Webpage

Static Webpage → Websites with a static design have content that never changes. A webpage's static content is rendered by HTML. For applications in the current world, this is uninteresting. In this situation, JavaScript is useful. It enables us to add some interaction to our static HTML page and turns it into a dynamic one.

Dynamic Webpage → Dynamic websites change their content as a result of the page's functionality. Having JavaScript makes this possible. such as dropdown menus to how graphics slide over a webpage when you click a button or don't.

Where does JavaScript run ?

A "JavaScript Virtual Machines (JVM)" is included with JavaScript. This Machine is the Brain behind running JavaScript applications. Without it, your JavaScript programs won’t run. You can write and run JavaScript using the JVM (also called JavaScript engine) that is present on a platform.

The following platform executes JavaScript using the many JVMs that are already present in them.

Browser

Different web browsers come with their different JVM that allows them to run JavaScript programs. example V8 machine for Chrome, Edge , Opera SpiderMonkey for Firefox Chakra” for IE Nitro” and “SquirrelFish” for Safari, etc.

These different JVM had underlying features specific to them but all allows you to run JavaScript programs on their browsers.

Server

With the aid of the JVM, JavaScript can also be run on the server side (remember, with this machine, JavaScript programs run). This JVM is deployed in a framework called Node.js, which enables you to run JavaScript programs on the server. Because of them, JavaScript is strong and not just for web browsers.

NodeJS is a cross-platform server environment built on the Google Chrome JavaScript V8 engine.

Brief JavaScript vs ECMAScript.

Mocha was the initial name of JavaScript, which then changed to Livescript before becoming JavaScript. The history will explain why JavaScript predates ECMAScript, which is a significant distinction. Beginning at the beginning, JavaScript takes its name from Java, and Brendan Eich, the man behind JS, was first tasked with creating a web-based version of Java. But Eich believed that Java was too complex with all of its rules, so he set out to develop a more user-friendly language that even a newbie could program in. This is demonstrated by actions like relaxing the requirement for a semicolon.

After the language was finished, Netscape's marketing department asked Sun for permission to call it JavaScript as a publicity gimmick, which is why the majority of people who have never used JavaScript believe it is connected to Java. A year or so after JavaScript was made available in the browser, Microsoft's Internet Explorer (IE) started creating its own versions of the language, such as JScript. IE was the market leader at the same time, and soon after, Netscape was forced to abandon their project. Prior to Netscape's demise, they made the decision to launch ECMAScript, a standard that would direct JavaScript's development. After a few versions, ECMAScript made its final one (ECMAScript 3) in 1999 before going into slumber for the following ten years.

Microsoft dominated the market over these ten years, but they also failed to improve their product, which led to the creation of Firefox (headed by Eich) and a plethora of other browsers like Chrome and Opera. 2009 saw the publication of ECMAScript's 5th Edition (the 4th edition was dropped), which included features like strict mode. Since then, ECMAScript has grown significantly, and its sixth edition, which contains the most significant revisions to date, is due out in a few months. There is no compiler that would run ECMAScript, and JavaScript is thought of as the language that implements the ECMAScript standard. ECMAScript is also implemented in other notable languages, such as ActionScript (used for Flash)

ECMAScript

• European Computer Manufacturer's Association is the organization's full name. A standard for scripting languages is called ECMAScript.
• The ECMAScript standard is the foundation for languages like JavaScript.
• The most well-known ECMA Standard originating technologies are JavaScript (Netscape) and JScript (Microsoft)

JavaScript

• The most widely used ECMAScript implementation is JavaScript. Although JavaScript contains additional features not found in the ECMA specs or standard, its main characteristics are based on the ECMAScript standard.
• Other programming languages that implement ECMAScript include ActionScript and JScript.
• When JavaScript was submitted to ECMA for standardisation, the name of the standard was changed to ECMAScript due to trademark difficulties with the name JavaScript.

JavaScript vs Java

No comparison HERE, it's simple “JavaScript is not Java”. Beginners get confused about these two. They are two different programming languages.

Why JavaScript ?

• It aids in incorporating interactivity into your website.
• Executes programs in reaction to specific events, such as when a form is submitted,
• JavaScript has a strong application programming interface (API), allowing access to many complicated features like 3D games and others. People can use JavaScript to execute your application in their browser.
• JavaScript is used everywhere.

What can you do with JavaScript ?

JavaScript have many use case and to mention a few :

• Creation Mobile and Web application
• Building Web Servers and Server Applications
• Game Development
• Desktop App Development
• Interactive Behavior on Websites

JavaScript and the web

JavaScript allows you to implement complex interaction on the web pages. if HTML is the structure (skeleton of a web page), CSS the skins, JavaScript gives the webpage functionality.

JavaScript is either linked through a different.js file or is directly incorporated into a web page (inline scripting). The script, together with the HTML and CSS code, are run by the user's browser when they access that website, producing a usable page that is displayed in the browser tab.

The visitors' computers download the script, which is then processed there. When using a server-side language, the script is processed by the server before being sent to the browser.

A web browser will go through a block of JavaScript code from top to bottom when it encounters it. Make sure to reference the objects or variables in the block before changing them because it is order-sensitive. How to use JavaScript on the web.

There are three ways of adding JavaScript code to an HTML web page ‒ inline, internally and externally.

Internal JavaScript in the Web

Internal JavaScript uses the

<html>
  <head>
    <title>Inline JavaScript in Web</title>
  </head>
  <body>
    <h1>Welcome to My web page successfully linked with Javascript script</h1>
    <button> Click me</button
  </body>

  <!-- External JavaScript in the web -->
  <script src="./script.js"></script>
</html>

Fundamentals of JavaScript.

Some building blocks for JavaScript involves : Variables Data types Comments DOM Manipulations and Events etc.

Variables

Values of any data type can be stored in variables. When the variables are utilized in JavaScript, the values they hold are used to perform the operation.

Variables can be declared and can be assigned a value. When you declare and assign a variable, you're doing this:

const name = "JavaScript"

Data Types

Because JavaScript is dynamically typed, it by default understands the operation data type. The basic data types that JavaScript provides are as follows:

• Strings
• Numbers
• Array
• Object
• Booleans
• Null
• Undefined
• Function

Comments

Similar to HTML, there are situations when we might wish to add a remark to our code that will not be performed.

JavaScript offers two options for accomplishing this:

single-line remarks such as this:

// with a single line comment

or multiple lines of comments, such as this:

/*
  a multi
  line comment
*/

DOM Manipulations and Events

DOM stands for Document Object Model in web development. A website document's elements can be added, changed, or removed using this programming interface. DOM manipulation is the process of adding, deleting, and changing web page elements using JavaScript. In web development, it occurs frequently.

The way that JavaScript interacts with HTML is through events that happen whenever a user or browser modifies a page. A page load is referred to as an event. An event also occurs when a user hits a button. The actions of pushing any key, closing a window, resizing a window, etc. are other instances.

SUMMARY

To make websites more interactive, JavaScript is frequently used in conjunction with HTML and CSS. JavaScript can sometimes use external libraries to provide sophisticated functionality so that the developer doesn't have to create it from scratch every time.

You have learned the concept behind web dynamic state with JavaScript, and why JavaScript is an important ingredient in the web technology space.

As always, I hope you enjoyed the article and learned something new. If you want, you can also follow me on LinkedIn or Twitter.

Cheers and see you in the next one! ✌️

Happy Learning!