Table of Contents

onclick

When a user clicks on an element, this event does occur.
This event allows the programmer to execute a JavaScript’s function when an element gets clicked.
It is used to get warnings, messages, validating forms etc.
It is used in almost every HTML element.

Syntax

<element onclick="JavaScript function">

Example : An alert box pops up when user clicks a button

<head>
	<script language="javascript">
		function demo()
		{
			alert("Welcome to Jamnagar");		
		}
	</script>
</head>
<body>
	<form>
		Click a button:
		<input type="button" value="Click Here" onclick="demo()">
	</form>
</body>

ondblclick

When a user double clicks on an element, this event does occur.
This event allows the programmer to execute a JavaScript’s function when an element gets clicked.
It is used to get warnings, messages, validating forms etc.
It is used in almost every HTML element.

Syntax

<element ondblclick="JavaScript function">

Example : An alert box pops up when user double clicks this paragraph

<head>
	<script language="javascript">
		function demo()
		{
			alert("Welcome to Jamnagar");		
		}
	</script>
</head>
<body>
	<p style="background-color:cyan;"ondblclick="demo();">
              Double Click this paragraph
        </p>
</body>

onmouseover

When a mouse pointer is moved over any element, this event does occur.

Syntax

<element onmouseover="JavaScript Function">

Example: When you move your mouse on paragraph, it will show you an alert box

<head>
	<script language="javascript">
		function demo()
		{
			alert("You have moved a mouse over a paragraph");		
		}
	</script>
</head>
<body>
	<p style="background-color:cyan;padding:50px;" onmouseover="demo();">
               Move a mouse here..    
        </p>
</body>

onmouseout

When a mouse pointer moves out of an element, this event does occur.
Syntax

<element onmouseout="JavaScript Function">

Example: When you move out of paragraph, it will show an alert box.

<head>
	<script language="javascript">
		function demo()
		{
			alert("You have moved out of paragraph");		
		}
	</script>
</head>
<body>
	<p style="background-color:cyan;padding:50px;" onmouseout="demo();">
             Come here and leave the paragraph.    
        </p>
</body>

onkeypress

When a key from keyboard gets pressed, this event does occur
Syntax

<input type="text" onkeypress="JavaScript Function">

Example: When you press any key in text box, it will show an alert box.

<head>
	<script language="javascript">
		function demo()
		{
			alert("You have pressed a key");		
		}
	</script>
</head>
<body>
	<form>
		Enter anything:
		<input type="text" onkeypress="demo();">
	</form>
</body>

onkeyup

When user releases a key from a keyboard, this event does occur.
Syntax

<input type="text" onkeyup="JavaScript Function">

Example: When you release a key from keyboard, it will show you an alert box

<head>
	<script language="javascript">
		function demo()
		{
			alert("You have released a key");		
		}
	</script>
</head>
<body>
	<form>
		Enter anything:
		<input type="text" onkeyup="demo();">
	</form>
</body>

onfocus

When an elements get focus, this event does execute. This event is most often used with <input>, <select>, and <a>.
Syntax

<element onfocus="JavaScript Function">

Example: After entering two values in text boxes, when you tab on third text box, the total will be displayed in it.

<head>
	<script language="javascript">
		function demo()
		{
			val1=parseInt(document.getElementById("t1").value);
			val2=parseInt(document.getElementById("t2").value);
			document.getElementById("t3").value=val1+val2;		
		}
	</script>
</head>
<body>
	<form>
		Enter Value 1:
		<input type="text" id="t1"><br>
		Enter Value 2:
		<input type="text" id="t2"><br>
		Total:
		<input type="text" id="t3" onfocus="demo();"><br>
	</form>
</body>

onblur

When an object loses focus, this event gets execute.
Syntax

<element onblur="JavaScript Function">

Example: When second text box loses it focus, total will be set in third text box.

<head>
	<script language="javascript">
		function demo()
		{
			val1=parseInt(document.getElementById("t1").value);
			val2=parseInt(document.getElementById("t2").value);
			document.getElementById("t3").value=val1+val2;		
		}
	</script>
</head>
<body>
	<form>
		Enter Value 1:
		<input type="text" id="t1"><br>
		Enter Value 2:
		<input type="text" id="t2" onblur="demo();"><br>
		Total:
		<input type="text" id="t3"><br>
	</form>
</body>

onload

The onload event occurs when an object has been loaded.
onload is often used within the <body> element to execute a script once a web page has completely loaded all content including images, script files, CSS files, etc.
The onload event can be used to check the visitor’s browser type and browser version, and load the proper version of the web page based on the information.

Syntax

<element onload="JavaScript Function">

Example:

<html>
<head>
	<script>
	function demo() 
	{
	  alert("Image is loaded");
	}
	</script>
</head>
<body>
<img src="im1.jpg" onload="demo()" width="100" height="132">
</body>
</html>

onchange

When the value of an element has been changed, this event gets execute. For radio buttons and check boxes, the onchange event occurs when the checked state has been changed.

Syntax

<element onchange="JavaScript Function">

Example: When you change the value from select option, it will show an alert box

<html>
<head>
	<script>
	function demo() 
	{
	  alert("You have changed the value");
	}
	</script>
</head>
<body>
	<form>
		Select Subject:
		<select onchange="demo();">
			<option>HTML</option>
			<option>JavaScript</option>
			<option>CSS</option>
			<option>Networking</option>
		</select>
	</form>
</body>
</html>

onsubmit

When a form is submitted, this event gets occur

Syntax

<form onsubmit="JavaScript Function">

Example: When you submit a form, the alert box will be displayed

<html>
<head>
	<script>
	function demo() 
	{
	  alert("Your form has been submitted");
	}
	</script>
</head>
<body>
	<form method=get onsubmit="demo();">
		Enter your name:
		<input type="text" name="t1">
		<br>
		<input type="submit" value="Submit Form">
	</form>
</body>
</html>

onreset

When a form is reset, this event gets occur

Syntax

<form onreset="JavaScript Function">

Example: When you click a reset button, form will be reset and an alert box will display

<html>
<head>
	<script>
	function demo() 
	{
	  alert("Your form has been reset");
	}
	</script>
</head>
<body>
	<form method=get onreset="demo();">
		Enter your name:
		<input type="text" name="t1">
		<br>
		<input type="Reset" value="Reset Form">
	</form>
</body>
</html>

DOM – Document Object Model

DOM stands for Document Object Model, and it represents the structure of a web page as an object-oriented tree structure.
In simpler terms, the DOM is the interface that allows JavaScript to interact with the content, structure, and styling of a web page.
There are mainly three points :
- Document: Refers to the web page.
- Object: Each part of the web page (like elements, attributes, and text) is represented as an object.
- Model: The hierarchical structure that organizes the objects and their relationships in a tree-like format.

DOM Structure

The DOM represents the entire HTML document as a tree of nodes. Each node corresponds to a part of the document, such as:
- Document Node: The root of the DOM tree, representing the entire document.
- Element Nodes: Represent HTML elements (e.g., <div>, <p>, <a>).
- Text Nodes: Represent the text inside an element (e.g., the text inside a <p> tag).
- Attribute Nodes: Represent the attributes of HTML elements (e.g., id, class).

DOM Tree Example

<!DOCTYPE html>
<html>
  <head>
    <title>Example Page</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>This is Swati Lathia from H J Doshi Jamnagar.</p>
  </body>
</html>

Document
 └── html
      ├── head
      │    └── title
      │         └── "Example Page"
      └── body
           ├── h1
           │    └── "Welcome to my page"
           └── p
                └── "This is a paragraph."

DOM and JavaScript

JavaScript uses the DOM to interact with the web page dynamically. You can use JavaScript to:
- Access HTML elements: JavaScript can select and modify HTML elements using methods like document.getElementById(), or document.getElementsByClassName().
- Manipulate HTML content: You can change the content of an element, add new elements, or remove elements.
- Modify styles: JavaScript allows you to change the CSS of elements dynamically using the .style property or by adding/removing CSS classes.

DOM Methods and Properties

Here are some commonly used DOM methods and properties:

Selecting Elements:
- document.getElementById("id"): Selects an element by its id.
- document.getElementsByClassName("className"): Selects all elements with the given class name.
Manipulating Elements:
- .innerHTML: Gets or sets the HTML content inside an element.
- .textContent: Gets or sets the text content inside an element.
- .setAttribute(attribute, value): Sets an attribute value (e.g., class, id).
- .appendChild(node): Adds a new child node to an element.
- .removeChild(node): Removes a child node from an element.
Events:
- .addEventListener(event, function): Adds an event listener to an element (e.g., click, mouseover).
- .removeEventListener(event, function): Removes an event listener.

History Object

In JavaScript, the History object is part of the window object and allows you to interact with the browser’s session history.
Session history refers to the history of pages that the user has visited in the current window or tab.
The History object provides methods to navigate back and forth through the pages in the session history stack, as well as manage and manipulate the browser’s history state.

Key Features of the `History` Object

Access to the Browser’s History:
- The History object allows you to manipulate the browser’s history and navigate through the pages the user has visited.
- You cannot access the URLs or content of pages in the history, but you can control navigation through those pages.
Methods:
- history.back(): This method behaves like the “Back” button in a browser. It moves the user to the previous page in the history list.
- history.forward(): This method behaves like the “Forward” button in a browser. It moves the user to the next page in the history list.
- history.go(delta): This method allows you to go forward or backward by a specified number of pages. For example, history.go(-1) moves one page back, and history.go(1) moves one page forward. The delta argument can be positive or negative, representing the number of steps forward or backward.

Properties:

history.length : This property returns the number of entries in the session history.
history.state : This property returns the state object associated with the current history entry, which is set using pushState or replaceState.

Example : page1.html

<h1>This is Page 1 Heading</h1>
<p>Click below button to go to next page</p>
<button onclick="f1();">Go to Page 2</button>
<script>
    function f1()
    {
        window.location.href="page2.html";
    }
</script>

page2.html

<h1>This is Page 2 Heading</h1>
<p>Click below button to go to previous page</p>
<button onclick="f2();">Go Back</button>
<script>
    function f2()
    {
        history.back();
    }
</script>

Example : Length property

page1.html

<h1>This is Page 1</h1>
<a href="page2.html">Click to Page 2</a>

page2.html

<h1>This is Page 2</h1>
<a href="page3.html">Click to Page 3</a>
<script>
document.write(window.history.length, "Pages are opened in browser history");
</script>

page3.html

<h1>This is Page 3</h1>
<a href="page1.html">Click to Page 1</a>

JavaScript Events, DOM, History Object

onclick

ondblclick

onmouseover

onmouseout

onkeypress

onkeyup

onfocus

onblur

onload

onchange

onsubmit

onreset

DOM – Document Object Model

DOM Structure

DOM Tree Example

DOM and JavaScript

DOM Methods and Properties

History Object

Key Features of the History Object

Key Features of the `History` Object