Video Tutorial:

What is JavaScript?

     Javascript is a light weight scripting language which can be used to develop dynamic and interactive webpages. Its easy to learn.
     Example: animations, simple interactive games, validations which can be done in client side (or browser) etc., can be done using javascript.

     It was developed by Brendan Eich at Netscape sometime in 1995–1996. Previously, it was called as ‘livescript’.

     The name 'Javascript' is misleading because javascript and java are not the same thing.

Tools needed to learn / write javascript code:

      A simple text editor such as notepad++ would be enough to develop javascript . I would be using Visual Studio most probably to show demo because i am comfortable with that IDE.

How to write javascript code?

     Open up notepad++, copy below lines of code, save it as Demo.html

<!DOCTYPE html>
<html>
    <head>
        <script>
            function myFunction()
            {
                alert("hello world");
            }
        </script>
    </head>
    
    <body>

        <button type="button" onclick="myFunction()"> Click Here </button>

    </body>
</html> 

     Now open up the file using any browser. Click on the ‘click here’ button and watch whether the Javascript code works.

     The written javascript code will just give a pop up alert box with “hello world message” after clicking the button . In google chrome, it should look like this..

alert box JS

Where to write Javascript code?

     Javascript code can be embedded in

     1. The header of the page in between 'head' tags.

     2.Body of the page in between 'body' tags.

     3.In an external file with .js extension.

   1. The header of the page in between 'head' tags.

Example:

<!DOCTYPE html>
<html>
    <head>
        <script>
            function myFunction()
            {
                alert("hello world");
            }
        </script>
    </head>
    
    <body>

        <button type="button" onclick="myFunction()"> Click Here </button>

    </body>
</html> 

2.Body of the page in between 'body' tags.

Example:

<!DOCTYPE html>
<html>
    <head>
        
    </head>
    <body>
        <script>
            function myFunction()
            {
                alert("hello world");
            }
        </script>
        
        <button type="button" onclick="myFunction()"> Click Here </button>

    </body>
</html> 

   3.In an external file with .js extension.

Copy the following code in a notepad and  save it as JSdemo.html

<!DOCTYPE html>
<html>
    <head>
    <script src="JSFileDemo.js"></script>
        
    </head>
    <body>

        <button type="button"
        onclick="ExternalFunction()"> Click Here </button>

    </body>
</html> 

 

Copy the following code in notepad and save it as JSFileDemo.js

function ExternalFunction(){  
 alert("Hello World!! - From external js file");  
}  

once you are done with creating two files, just open the JSDemo.html page in a browser to check if the javascript from external file 'JSFileDemo.js' works.

You can practice the concepts here. Just change the script in green box and check the output in blue box.