Javascript

A Script is a small program which is used with HTML to make web pages more attractive, dynamic and interactive, such as an alert popup window on mouse click.

Currently, the most popular scripting language is JavaScript used for websites.

JavaScript Example:

<!DOCTYPE html>  
<html>  
 <body>  

  <h1>
   Update User Name on Click through JavaScript Example
  </h1>  
  <button type="button"  
    onclick="document.getElementById('username').innerHTML = Alice Collin">  
    Click me to display User Name
  </button>

  <p id="username"></p>  

 </body>  
</html>

HTML <script> Tag

The HTML

It is mainly used to manipulate images, form validation and change content dynamically. JavaScript uses "document.getElementById()" method to select an HTML element.

Script Tag Example:

<!DOCTYPE html>  
<html>  
 <body>  
 
  <h2>Use JavaScript to Change Text</h2>  
  <p id="example-id"></p>  
  <script>  
   document.getElementById("example-id").innerHTML = "Hello, Alice";  
  </script>  
 </body>  
</html>

HTML events with JavaScript

An event is something which user does, or browser does such as mouse click or page loading are examples of events, and JavaScript comes in the role if we want something to happen on these events.

HTML provides event handler attributes which work with JavaScript code and can perform some action on an event.

Example:

<button type="button" onclick="prompt('Prompt Triggered')">
  Click on Me! 
</Button>

HTML can have following events such as:

Mouse events: select, mouseup, mousemove, mousedown, click, dblclick, etc.
Select events: text field, text area, etc.
Form events: reset, submit, etc.
Focus event: focus, blur, etc.

Change content in html through Javascript:

Example:

<!DOCTYPE html>  
<html>

<body>

<p>JavaScript can change the content of an HTML element:</p>  

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

<p id="demo"></p>

  <script>

   function myFunction() {   
     document.getElementById("demo").innerHTML = "Hello, Alice!";  
   }  

  </script>

 </body>  
</html>

<-- File Path

HTML Form -->