JS Introduction

JavaScript is a client-side scripting language of web developed by Netscape in 1995 with the name LiveScript. JavaScript is used to build interactive websites with dynamic features and to validate form data. JavaScript is high-level, dynamic and browser interpreted programming language, supported by all modern web browsers. Apart from web browser, JavaScript is also used to build scalable web applications using Node JS. JavaScript is also being used widely in game development and Mobile application development.

JavaScript is also known as the Programming Language of web as it is the only programming language for Web browsers. JavaScript is an object-based scripting language which is lightweight and cross-platform. The programs in this language are called scripts. They can be written right in a web page’s HTML and run automatically as the page loads. Scripts are provided and executed as plain text. They don’t need special preparation or compilation to run. The browser has an embedded engine sometimes called a “JavaScript virtual machine”.

 

JavaScript Applications

JavaScript is the widely used programming language, all over the world. It has the largest open-source package repository in the world (npm). Every type of software uses JavaScript, including the server code (Node.js), productivity apps, 3D games, robots, IoT devices. JavaScript has achieved the goal, set by Java a long time ago: write once, run anywhere. There are various JavaScript uses in different segments.

 

JavaScript Facts

Some popular facts about JavaScript.

• JavaScript is the only client-side scripting (i.e. browser interpreted) language.
• JavaScript can build interactivity Websites.
• JavaScript is Object-Based.
• JavaScript is Case Sensitive.
• JavaScript can put dynamic content into a webpage.
• JavaScript can react to events like Click, mouse over, mouse out, form submit etc known as JavaScript Events.
• JavaScript can validate form data.
• JavaScript can detect user browser using navigator Object.
• JavaScript can be used to create cookies.
• JavaScript can add cool animation to a webpage JS timing functions.
• JavaScript can detect user physical location using HTML5 Geolocation API.
• JavaScript can also be used to draw shapes, graphs, create animations and games development using HTML5 Canvas.
• At present, JavaScript has lot of libraries and framework, exp JQuery, Angular JS, React JS, Backbone JS etc, thus making JavaScript more popular.
• JavaScript can also be used in developing server-side application using Node JS.
• Popular Editors like, Brackets and VS Code are written in JavaScript. 

JavaScript History

WWW was formed in 1990. Initially, it was a bunch of web-pages linked together. But soon people want more interactive websites. So on-demand of Netscape, Brenden Eich, (inventor of JavaScript) in 1995 invented a prototype based (Classless) language for their Navigator Browser. Initially, it was called "LiveScript", but later on renamed as " JavaScript ".

In today's world, JavaScript is the Topmost demanding technology as it can handle both front end and Back-end.

 

JavaScript Engines

JavaScript Engines are the computer programs used to interpret JavaScript into machine code. JavaScript was primarily developed for browser environment only, but non-browser environments are also using JavaScript now, like Node JS, and Deno.

There are so many JavaScript engines available, but the most popular JavaScript Engine is Chrome V8 is open source and the most popular JavaScript Engine. Being the fastest JavaScript Engine, a non-browser environment like Node JS is also using Chrome V8 Engine. SpiderMonkey is the First JavaScript Engine developed by Brendan Eich at Netscape. It is currently maintained by Mozilla Foundation.

 

How to write JavaScript in Webpage

Based on where JavaScript coding is written, JavaScript is categorized in three parts, Internal JavaScript, External JavaScript, and Inline JavaScript. 

Internal JavaScript : In Internal JavaScript, JavaScript coding is written inside head or body within <script> tag.

<script>

  document.write('Hello Javascript');

</script>                                  

External JavaScript : In External JavaScript, javascript code is written in external file with .js extension and then linked with script tag. Here is an example of external js. 

<script src="custom.js"></script>                   

Inline JavaScript : In Inline JavaScript, javascript code is written directly inside html tags. All though this is not recommended. Script should be written in separate file( external) or in <script> tag. See example 

<button onclick="alert('Hello JS')">Check</button>

<marquee onmouseover="stop()" onmouseout="start()">Hello Javascript</marquee>

<a href="javascript:void(0)" onclick="print()">Print</a>

 

How to run JavaScript code

JavaScript can be placed on both Head or Body tag of our HTML Page using <script> tag. When Webpage loads, script code executes and can slow down page speed.

Write JavaScript coding in head tag only when we want script to execute first, like to disable text selection, page redirection, notifications etc. Rest all script like JQuery, Angular JS or custom JS should be written just before body closing tag. This can load DOM content first, then scripts will execute, and hence optimize webpage performance.

 

Run JavaScript  Code in Head 

<!DOCTYPE html>

<html>

  <head>

    <title>Javascript</title>

    <meta charset="utf-8" />

    <script>

      // Write Script here

    </script>

  </head>

  <body>

    // body content

  </body>

  

</html> 

Run JavaScript Code in Body 

<!DOCTYPE html>

<html>

  <head>

    <title>Javascript</title>

    <meta charset="utf-8" />

  </head>

  <body>

    // content in body

    <script>

      // Write Script here

    </script>

  </body>

</html>

 

JS console.log()

To print JavaScript output in console window of web browser, use JavaScript and use console.log() function. console is a JavaScript Object and log() is a Function of console object. Any syntax error in JavaScript is shown in console window. Also global variables and functions are accessible in console.

To view console window, use these shortcuts.

Console Shortcuts
Browser	Console Shortcut for Windows / Linux	Console Shortcut for Mac
Chrome	Ctrl + Alt + j	Cmd + Alt + j.
Firefox	Ctrl + Shift + k	Cmd + Alt + k
Internet Explorer	Ctrl + 2 or F12	NA
Edge	Ctrl + 2 or F12	Cmd + Alt + j
Safari	Ctrl + Alt + c	Cmd + Alt + c

Print in JavaScript Console

hello string

<script>

  var x = 'hello string';

  console.log(x);

</script>

error found

<script>

  console.error('error found');

</script>

To clear console, use console.clear()

 

JavaScript Dialog Box

JavaScript supports three dialog box. These dialog boxes are build in functions of window object. Three dialog box in JavaScript are alert, prompt and confirm.

 

JavaScript Alert, alert(): Alert box, i.e alert() or window.alert() is used to show output in dialog box. For alerts, use alert(). Alert generally block the code, thus next code block will run only after alert is closed. 

Alert Box Example

<script>

  var x = 'hello js';

  alert(x);

</script>

JS Prompt, prompt(): prompt() or window.prompt() dialog box is used to receive input from user.

Prompt Box Example

<script>

  var x = prompt('Enter Name');

  alert(x);

</script>

JS Confirm, confirm(): confirm() or window.confirm() dialog box is used to get confirmation from user. This will show Ok or Cancel in dialog box.

Confirm Box Example

<script>

  var x = confirm('Press Ok or Cancel');

  alert(x);

</script>

 

JavaScript Comments

Comments are used to write explanations, hints, and to stop execution of code. JavaScript use two comments syntax. One is Single line comment, and second is Multi-line comment.

Single Line Comment in JavaScript: Single Line comments in JavaScript are used using //. This will comment only right hand side of code.

Example

<script>

  // single line comment

</script> 

Multiline Comment in JavaScript: JavaScript Multiline Comments are recommended comments as they have opening and closing. Multiline Comments are used using /* opening and */ closing, same like css comments. 

Example

<script>

  /* Multiline Comment */

</script>

Always prefer Multiline comments in JavaScript for production. Single line comments in JavaScript are good for development purpose. But in production, they can create errors after JS Minification.

 

Noscript Tag

<noscript> tag is an html element used when JavaScript is disabled in web browser. If JavaScript is enable, noscript tag is invisible.

Example

<noscript> 

    Please Enable Javascript 

</noscript> 

In HTML5, type and language attributes from script tag has been deprecated. So we can write JavaScript code directly in script tag without any attribute.