Javascript Tutorial for web developers

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 tutorial
Javascript Tutorial for Web Developers

HTML can only create structure, css can style html, but to add functionality, we need to use javascript. Unlike HTML and CSS, Javascript is Dynamic.

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


Javascript Fast Facts

  • Javascript is the only client side scripting( i.e. browser interpreted) language.
  • JavaScript was designed to add interactivity to HTML pages.
  • Javascript is Object Based.
  • Javascript is Case Sensitive.
  • Javascript can put dynamic content into a HTML page.
  • Javascript can react to events like Click, mouse over, mouse out, form submit etc.
  • Javascript can validate form data.
  • Javascript can detect user browser.
  • Javascript can be used to create cookies.
  • Javascript can add cool animation to a webpage.
  • Javascript can detect user physical location using geolocation.
  • 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.
  • One of the popular Code Editor Brackets is 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.


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. Here is a list a JavaScript 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.


Internal, External and Inline Javascript

Based on where javascript code is written, javascript is categorised 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>   

Difference between Javascript Code in head and body

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>


Console.log in Javascript

To print output data in console window of browser. Use console.log(). Any syntax error in javascript is shown in console window.

To View console window, here are some 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
Safari Ctrl + Alt + c Cmd + Alt + c
<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 alert, promt and confirm.

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>

Prompt, prompt()

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



<script>
    var x=prompt("Enter Name");
    alert(x);
</script>

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("Do you want to exit?");
    alert(x);
</script>

JavaScript Comments

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

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>

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.


Javascript Training in Noida

For Javascript classroom training in Noida Delhi NCR, click below

Javascript Training in Noida