JavaScript

JavaScript is used to create client-side dynamic pages. JavaScript is an

object-based scripting language which is lightweight and cross-platform.

JavaScript is the interpreted language which means the JavaScript

translator (embedded in the browser) is responsible for translating the JavaScript
code for the web browser.

What is JavaScript
JavaScript (js) is a light-weight object-oriented programming language
which is used by several websites for scripting the webpages. It is an interpreted,
not full-fledged programming language that enables dynamic interactivity on
websites when applied to an HTML document. It was introduced by Brenden Eich
in the year 1995 for adding programs to the webpages in the Netscape Navigator
browser. Since then, it has been adopted by all other graphical web browsers.
With JavaScript, users can build modern web applications to interact directly
without reloading the page every time. The traditional website uses js to provide
several forms of interactivity and simplicity.

Features of JavaScript

There are following features of JavaScript:

1. All popular web browsers support JavaScript as they provide built-in

execution environments.
2. JavaScript follows the syntax and structure of the C programming language.
Thus, it is a structured programming language.
3. JavaScript is a weakly typed language, where certain types are implicitly
cast (depending on the operation).
4. JavaScript is an object-oriented programming language that uses
prototypes rather than using classes for inheritance.
 5. It is a light-weighted and interpreted language.
6. It is a case-sensitive language.
7. JavaScript is supportable in several operating systems including, Windows,
macOS, etc.
8. It provides good control to the users over the web browsers.

Application of JavaScript

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

o Client-side validation,
o Dynamic drop-down menus,
o Displaying date and time,
o Displaying pop-up windows and dialog boxes (like an alert dialog box,
confirm dialog box and prompt dialog box),
o Displaying clocks etc.

Advantages:

• Fast speed: JavaScript is executed on the client side that’s why it is very
fast.
• Easy to learn: JavaScript is easy to learn. Any one which has basic
knowledge of programming can easily lean JavaScript.
• Versatility: It refers to lots of skills. It can be used in a wide range of
applications.
• Browser Compatible: JavaScript supports all modern browsers. It can
execute on any browser and produce same result.
• Server Load: JavaScript reduce the server load as it executes on the client
side.
• Rich interfaces: JavaScript provides the drag and drop functionalities which
can provide the rich look to the web pages.
 • Popularity: JavaScript is a very popular web language because it is used
everywhere on the web.

Disadvantages:

• Code Visibility: JavaScript code is visible to everyone and this is the biggest
disadvantage of JavaScript.
• Stop Render: One error in JavaScript code can stop whole website to
render.

JavaScript Events:

By using JavaScript, we have the ability to create dynamic web pages. Events are
actions that can be detected by JavaScript.

When the page loads, it is called an event. When the user clicks a button, that
click too is an event. Other examples include events like pressing any key, closing
a window, resizing a window, etc. We define the events in the HTML tags.

Some of the HTML events and their event handlers are:

Mouse events:

Event Performed Event Handler Description

click onclick When mouse click on an element

mouseover onmouseover When the cursor of the mouse comes over the element

mouseout onmouseout When the cursor of the mouse leaves an element

mousedown onmousedown When the mouse button is pressed over the element

mouseup onmouseup When the mouse button is released over the element
mousemove onmousemove When the mouse movement takes place.

Keyboard events:

Event Performed Event Handler Description

Keydown & Keyup onkeydown & onkeyup When the user press and then release the key

Form events:

Event Event Description

Performed Handler

focus onfocus When the user focuses on an element

submit onsubmit When the user submits the form

blur onblur When the focus is away from a form element

change onchange When the user modifies or changes the value of a form
element

Window/Document events

Event Event Description

Performed Handler

load onload When the browser finishes the loading of the page

unload onunload When the visitor leaves the current webpage, the browser
unloads it

resize onresize When the visitor resizes the window of the browser
Click Event
<html>
<head> Javascript Events </head>
<body>
<script language="Javascript" type="text/Javascript">

function clickevent()
{
document.write("This is JavaTpoint");
}

</script>
<form>
<input type="button" onclick="clickevent()" value="Who's this?"/>
</form>
</body>
</html>

Output:

MouseOver Event
<html>
<head>
<h1> Javascript Events </h1>
</head>
<body>
<script language="Javascript" type="text/Javascript">
function mouseoverevent()
 {
alert("This is JavaTpoint");
}
</script>
<p onmouseover="mouseoverevent()"> Keep cursor over me</p>
</body>
</html>

Output:

Focus Event
<html>
<head> Javascript Events</head>
<body>
<h2> Enter something here</h2>
<input type="text" id="input1" onfocus="focusevent()"/>
<script>
function focusevent()
{
document.getElementById("input1").style.background=" red";
}
</script>
</body>
</html>

Output:
Keydown Event
<html>
<head> Javascript Events</head>
<body>
<h2> Enter something here</h2>
<input type="text" id="input1" onkeydown="keydownevent()"/>
<script>
function keydownevent()
{
document.getElementById("input1");
alert("Pressed a key");
}
</script>
</body>
</html>

Output:
Load event
<html>
<head>Javascript Events</head>
</br>
<body onload="window.alert('Page successfully loaded');">
<script>
document.write("The page is loaded successfully");
</script>
</body>
</html>

Load resize
<html>
<head>
<script>
function hello()
{
alert("Hello world")
}
</script>
</head>
<body onresize="hello()">
<p>This is a pharagraph</button>
</body>
</html>

Note: To better understanding watch this video

https://www.youtube.com/watch?v=R7mu7nKFc7w
JavaScript For loop
The JavaScript for loop iterates the elements for the fixed number of times. It
should be used if number of iteration is known. The syntax of for loop is given
below.

for (initialization; condition; increment)

{
code to be executed
}

Example:

<html>
<head>
</head>
<body>
<script>
var j;

for(j=1;j<6;j++)
{
document.write(j,"&emsp;","Hi for loop!<br>") //for tab space in html use
&emsp;(4spaces)

}
</script>
</body>
</html>