Javascript

Javascript is prototype based, client-side scripting language of web developed by Netscape in 1995. Javascript is used to build interactive websites with dynamic features and to validate form data. Javascript is high-level, dynamic and browser interpreted, supported by all modern web browsers.

JavaScript is also known as the Programming Language of web.

JavaScript is the only programming language for Web browsers.

javascript tutorial
Javascript Tutorial for Web Developers

HTML can only create webpage structure, css can style html, but to add functionality, we need javascript. Unlike HTML and CSS, Javascript is Dynamic. Earlier JavaScript was meant for browser enviorment only, but now a days, JavaScript is also used on server ( Node JS) and Software Development (React Native).

As per a recent survey in 2015 on Stackoverflow, Javascript is the Second Most Popular programming language in world. First is Java. But another survey in 2017 shows that Javascript is the most popular programming language.


Javascript Facts

Some popular facts about JavaScript, the programming language of web.

  • 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/htmlpage.
  • 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 Code 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".

The same time, Microsoft also invented JScript, the Microsoft's client side scripting language for their Internet Explorer 3. But JScript was meant for Internet Explorer only.

In 1998, ECMA standardised Javascript, not JScript. Thus Microsoft start using Javascript in Internet Explorer 4 and Javascript become popular.

In today's world, Javascript is the second most demanding technology as it can handle both front end and backend.

JavaScript was written in 10 days only. That time, JavaScript was developed to validate form data on client side.


Timeline of Web Technologies

Here is a Timeline of Web Technologies, i.e. HTML, CSS and JavaScript, with Year of launch and Description.

Year Achievement
1991 HTML, WWW Formed
1995 CSS
1995 JAVASCRIPT
1998 JAVASCRIPT was standardised by ECMA
1998 DHTML( Html + Javascript)
2005 AJAX
2009 HTML5 ( Html + Css + Javascript)

JavaScript Versions

JavaScript was initially developed for Netscape Navigator Browser Only. After ECMA standardize Javascript, ECMA start development of JavaScript Under developer.mozilla.com . Here is a list a JavaScript Versions or ECMA Versions.

Year  Version    Description
1997 ECMA 1 First Edition
1997 ECMA 2 Some Editorial Changes
1999 ECMA 3 Add Regular Expressions, Try Cache, new string handlers.
---- ECMA 4 Abandonded
2009 ECMA 5 Add Strict Mode, getter and setters, JSON and More features in Objects.
2011 ECMA 5.1 ECMA Standards are fully aligned with 3rd Edition of ISO/IEC.
2015 ECMA 6 Also known as ES2015, adds Classes and Modules, Array functions and Promises.
2016 ECMA 7 Also known as ES2016, includes two new features: the exponentiation operator (**) and Array.prototype.includes.
2017 ECMA 8 Also known as ES2017 includes await/async, which works using generators and promises.


JavaScript Engines

JavaScript Engines are the programs used to interpretate JavaScript Code into machine code. JavaScript was primarily developed for browser environment only, but others environments are also using javascript now.

There are so many JavaScript engines available, but the most popular JavaScript Engines are

JavaScript Engines
JavaScript Engine Browser
Chrome V8 Google Chrome, Edge Chromium
Spider Monkey Firefox, Netscape Navigator
Chakra Internet Explorer, Edge
JavaScriptCore Safari

Javascript Code

Based on where javascript code is written, javascript is categorized in three parts. Internal Javascript, External Javascript, and Inline Javascript.

Here are the examples with code.

Internal Javascript

In Internal Javascript, javascript code 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 extension .js 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>   

Javascript Code in html

Javascript can be placed on both Head and Body tag of our HTML Page. When DOM loads, script code executes and can slow down page speed. We can write JavaScript code in head tag only when we want script to be load first, like to disable text selection, redirection etc, notifications etc. Rest all script like Jquery, Angular or custom js code should be written just before body closing tag. This can load DOM content first, then scripts will execute, and hence optimise webpage performance.

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>

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>


Javascript Console.log()

To print output in console window of web browser, use console.log() function. console is a JavaScript Object. 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 output in JavaScript Console

<script>    
    var x="hello string";
    console.log(x);
</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 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.



<script>
    var x="hello js";
    alert(x);
</script>

JS Prompt, prompt()

prompt() or window.prompt() dialog box is used to receive input from user.



<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.



<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 Multiline comment.

Single Line Comment in JavaScript

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

JavaScript Single Line Comment


<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.

JavaScript Multiline Line Comment


<script>
    /* Multiline Comment */
</script>

Always prefer Multiline comments in javascript. Single line comments in javascript are good for development purpose. By 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.

Noscript Tag use


<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.


Javascript Training in Noida

For Javascript classroom training in Noida Delhi NCR, click below

Javascript Training in Noida