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.