ENOTES

How to add JavaScript in web pages?

access_time Feb 16, 2022 remove_red_eye 15070

JavaScript is a client-side scripting language used for web development along with other front-end development tool such as HTML and CSS. JavaScript helps to give dynamic behavior to our web pages such as adding animation, drop down menus, client-side validation etc. More over JS can be used for mobile apps development and game development. JavaScript is known as scripting language because it does not need to be compiled before execution, it executes in run-time environment through web browser. Several libraries of JavaScript such as React JS, Vue JS, Angular JS etc can be found and used to make more interactive, intuitive and advance web pages. JS is not only used for front-end rather it can be used in server side also. Node JS is an example of server-side JavaScript generally known as SSJS.

Feature of JavaScript

  1. It is light weighted and interpreted language which execute in run-time environment directly through web browser.
  2. It is supported by all the web browser since 97% of all web sites use JS.
  3. It is also a structural programming language since it support control structure such as branching and looping.
  4. It is prototype based programming language which means we can create object without creating classes, so it is also a Object Oriented programming
  5. JavaScript is a case-sensitive language, small and upper case differs.
  6. Every operating system such as Windows, MacOS supports JS.

Uses of JavaScript

  1. JS is used for client-side validation.
  2. JS can be used to make dynamic drop-down menus.
  3. JS can be used to display date, time and even clock.
  4. JS can be used to generate pop-up windows, alert message, dialog box etc
  5. JS can also be used for Server application.
  6. JS can be used for cross platform mobile apps development.
  7. JS can be used for game development.

Adding JavaScript to HTML document

As we know, JS is often used as client-side scripting language along with HTML and CSS. Like we add CSS to our HTML document, similarly we can add our JavaScript code to HTML document in three several ways. The several ways of adding JavaScript to HTML document are:

  1. Inline JavaScript code

This is the method of adding JS code directly inside the HTML tag. We don’t have to create separate JS file or even we don’t have to place JS code with in script tag. Simple events like onclick, mouseover, keypress can easily be added through this method. But, its very much inconvenient to add large JS code inline. JavaScript code can be added in HTML document inline as follows:

<HTML>
<HEAD><TITLE>Sample</TITLE></HEAD>
<BODY>
<BUTTON onclick = “alert(‘Your message’)”>Click me</BUTTON>

</BODY>
</HTML>

Here, we have added alert message through onclick event. When user press the Click me button then alert message will be shown in the web browser.

2. Internal (Embedding) JavaScript code

This is the method of adding JS code within the HTML document. JS code is added internally with in the script tag inside body of the HTML document. JavaScript code can be embedded within HTML document as follows:

<HTML>
<HEAD><TITLE>Sample</TITLE></HEAD>
<BODY>
<BUTTON onclick = “disp( )”>Click me</BUTTON>

<SCRIPT>
function disp( )
{
alert(“Your message”);
}
</SCRIPT>
</BODY>
</HTML>

Here, we have created a JS function named disp( ), this function is called when user press the Click me button. Once button is pressed alert message is displayed which is defined inside function within Script tag.

3. External JavaScript file

This is the most popular methods of adding JS in our web pages. To add external JavaScript we have to create separate JS file which is linked with our HTML document as:

<SCRIPT src = “name.js”></Script>

Where, name.js is the JavaScript file that we create to write all our JS code. It should be in same location with our HTML document. It is most convenient way of adding JS in our web page as JS code don’t get messed with other HTML and CSS code. JavaScript code can be externally added with HTML document as follows:

Create a HTML document with any name

<HTML>
<HEAD><TITLE>Sample</TITLE></HEAD>
<SCRIPT src = “name.js”></Script>
<BODY>
<BUTTON onclick = “disp( )”>Click me</BUTTON>

</BODY>
</HTML>

Also create a JS file with .js extension and add following code

function disp( )
{
alert(“Your message”);
}

Here, we have created separate HTML and JS file in same location. Since, we have linked our JS file with our HTML document, every code which is written in JS file will be implemented on HTML document.

Click here to known about client-side and server-side.