Introduction of JavaScript

JavaScript is one of the 3 languages all web developers must learn:

HTML to define the content of web pages

CSS to specify the layout of web pages

JavaScript to program the behavior of web pages

Web pages are not the only place where JavaScript is used. Many desktop and server programs use JavaScript.

Application of JavaScript

JavaScript is used to create interactive websites. It is mainly used for:

Client-side validation,

Dynamic drop-down menus,

Displaying date and time,

Displaying pop-up windows and dialog boxes

Displaying clocks etc.

JavaScript Example

Javascript example is easy to code. JavaScript provides 3 places to put the JavaScript code: within body tag, within head tag and external JavaScript file.
Let’s create the first JavaScript example.

<script type="text/javascript">  
        document.write("JavaScript is a simple language for javatpoint learners");  
      </script>

Output:JavaScript is a simple language for javatpoint learners

The script tag specifies that we are using JavaScript.
The text/javascript is the content type that provides information to the browser about the data.
The document.write() function is used to display dynamic content through JavaScript. We will learn about document object in detail later.

Three Places to put JavaScript code

Between the body tag of html
Between the head tag of html
In .js file (external javaScript)

1) JavaScript Example : code between the body tag

In the above example, we have displayed the dynamic content using JavaScript. Let’s see the simple example of JavaScript that displays alert dialog box.

<script type="text/javascript">  
 alert("Hello Code Jupiter");  
</script>

Output:Hello Code Jupiter

2) Code between the head tag

Let’s see the same example of displaying alert dialog box of JavaScript that is contained inside the head tag.
In this example, we are creating a function msg(). To create function in JavaScript, you need to write function with function_name as given below.
To call function, you need to work on event. Here we are using onclick event to call msg() function.

<html>  
<head>  
<script type="text/javascript">  
function msg(){  
 alert("Hello Code Jupiter");  
}  
</script>  
</head>  
<body>  
<p>Welcome to JavaScript</p>  
<form>  
<input type="button" value="click" onclick="msg()"/>  
</form>  
</body>  
</html>

External JavaScript file

We can create external JavaScript file and embed it in many html page.
It provides code re usability because single JavaScript file can be used in several html pages.
An external JavaScript file must be saved by .js extension. It is recommended to embed all JavaScript files into a single file. It increases the speed of the webpage.
Let’s create an external JavaScript file that prints Hello Javatpoint in a alert dialog box.
message.js

function msg(){  
 alert("Hello Code Jupiter");  
}

Let’s include the JavaScript file into html page. It calls the JavaScript function on button click.

<html>
<head>
        <script type="text/javascript" src="message.js"></script>
</head>
<body>
        <p>Welcome to JavaScript</p>
        <form>
                <input type="button" value="click" onclick="msg()" />
        </form>
</body>
</html>

JavaScript Comment

The JavaScript comments are meaningful way to deliver message. It is used to add information about the code, warnings or suggestions so that end user can easily interpret the code.
The JavaScript comment is ignored by the JavaScript engine i.e. embedded in the browser.
Advantages of JavaScript comments
There are mainly two advantages of JavaScript comments.

To make code easy to understand It can be used to elaborate the code so that end user can easily understand the code.
To avoid the unnecessary code It can also be used to avoid the code being executed. Sometimes, we add the code to perform some action. But after sometime, there may be need to disable the code. In such case, it is better to use comments.

Types of JavaScript Comments

There are two types of comments in JavaScript.

Single-line Comment
Multi-line Comment

JavaScript Single line Comment

It is represented by double forward slashes (//). It can be used before and after the statement.
Let’s see the example of single-line comment i.e. added before the statement.

<script>  
 // It is single line comment  
 document.write("hello code jupiter");  
</script>

Output:hello code jupiter

Let’s see the example of single-line comment i.e. added after the statement.

<script>  
 var a=10;  
 var b=20;  
 var c=a+b;//It adds values of a and b variable  
 document.write(c);//prints sum of 10 and 20  
</script>

Output:30

JavaScript Multi line Comment

It can be used to add single as well as multi line comments. So, it is more convenient.
It is represented by forward slash with asterisk then asterisk with forward slash. For example:

/* your code here  */

It can be used before, after and middle of the statement.

<script>  
/* It is multi line comment.  
It will not be displayed */  
document.write("example of javascript multiline comment");  
</script>

Output:example of javascript multiline comment

Learning Place For Developers

Search This Blog