CodesJava

Easy learning with example program codes

HTML Javascript

Javascript is the most popular scripting language which is used to make more dynamic and interactive HTML pages.

Example:

<!DOCTYPE html>
<html>
<body>
<p>Click the button to get Current Timestamp.</p>
<button type="button"
onclick="document.getElementById('click').innerHTML = Date()">
Click Me</button>
<p id="click"></p>
</body>
</html>

Output 1:

Output 2:

Explanation:
In the above example, we are using Javascript with HTML to display the current date and time.

HTML <script> Tag:

To specify a client-side script or JavaScript, the <script> tag is used in HTML. It contains internal script statements. It can also be used to point to an external script file. Image manipulation, form validation, and dynamic changes of content are the main purpose served by the HTML <script> tag for JavaScript. The document.getElementById() method is used by Javascript to select HTML elements.

Example:

<!DOCTYPE html>
<html>
<body>
<p id="hello"></p>
<script>
document.getElementById("hello").innerHTML = "Hello World!!";
</script> 
</body>
</html>

Output:

Explanation:
In the above example, we are writing “Hello World!!” to an HTML element using Javascript.

HTML events with JavaScript:

The event handler attributes of HTML are used with JavaScript codes to perform actions on an event.

Example:

<!DOCTYPE html>
<html>
<body>
<p>Click the button below to see a pop-up message.</p>
<input type="button" value="Click Me" onclick="alert('Hello World!!')">
</body>
</html>

Output 1:

Output 2:

Explanation:
In the above example, a pop-up message is displayed on button click.

Types of HTML events:

There are mainly four types of events in HTML. These are:

Form:

Example: reset, submit.

Select:

Example: text field, text area.

Focus:

Example: focus, blur.

Mouse:

Example: select, mouseup, mousemove, mousedown, click, dblclick.

Window event attributes:

EventHandlerDescription
onBlurblurOccurs when a form input loses focus.
onClickclickOccurs when a form element or a link is clicked.
onSubmitsubmitOccurs when a form is submitted to the server.
onLoadloadOccurs when a page loads in a browser.
onFocusfocusOccurs when an input field is focused.
onSelectselectOccurs when a form input field is selected.

 

 

Uses of Javascript:

To change HTML content.

Example:

<!DOCTYPE html>
<html>
<body>
<p id="hello">Bye Bye!!</p>
<script>
function Function() {
document.getElementById("hello").innerHTML = "Hello HTML!!";        
}
</script>
<button type="button" onclick="Function()">Click Me</button>
</body>
</html>

Output 1:

Output 2:

To change HTML styles.

Example:

<!DOCTYPE html>
<html>
<body>
<p id="hello">Change the style of the HTML element on Click.</p>
<script>
function Function() {
  document.getElementById("hello").style.fontSize = "10px"; 
   document.getElementById("hello").style.fontSize = "30px"; 
    document.getElementById("hello").style.color = "white";
  document.getElementById("hello").style.backgroundColor = "crimson";        
}
</script>
<button type="button" onclick="Function()">Click Me</button>
</body>
</html>

Output 1:

Output 2:

To change HTML attributes.

Example:

<!DOCTYPE html>
<html>
<body>
<script>
function glow(sw) {
  var light;
  if (sw == 0) {
    light = "pic_bulboff.gif"
  } else {
    light = "pic_bulbon.gif"
  }
  document.getElementById('bulb').src = light;
}
</script>
<img id="bulb" src="pic_bulboff.gif" width="100" height="150">
<p>
<button type="button" onclick="glow(1)">On</button>
<button type="button" onclick="glow(0)">Off</button>
</p>
</body>
</html>

Output 1:

Output 2:

Using External Script:

JavaScript codes can also be written in a separate file but the file must be saved using .js extension. This file can be called in an HTML file.

Syntax:

<script type="text/javascript" src="URL ></script>

Example:

<!DOCTYPE html>  
<html>  
   <head>  
    <script type="text/javascript" src="jsexample.js"></script>  
    </head>  
     <body>  
       <form onsubmit="fun()">  
         <label>Name:</label><br>  
      <input type="text" name="name" id="111"><br><br> 
       <label>City:</label><br>    
      <input type="text" name="city"><br><br>
      <input type="submit">  
  </form>  
 </body>  
 </html>

jsexample.js:

function fun() {  
       var x = document.getElementById("111").value;  
        alert("Welcome"+" "+x+ "!!");  
    }

Output 1:

Output 2:

Explanation:
In the above example, we used an external javascript to display a pop-up message on form submission.

HTML <noscript> Tag:

The text written in between the <noscript> opening and closing tag is not displayed on the browser. This tag is mainly used to provide alternate content. It is thus of great use for users that have disabled scripts in their browser or have a browser that doesn’t support client-side scripts.

Example:

<!DOCTYPE html>
<html>
<body>
<p id="hello"></p>
<script>
document.getElementById("hello").innerHTML = "Hello World!!";
</script>
<noscript>Sorry, JavaScript is not supported!</noscript>
<p>How are you today?</p>
</body>
</html>

Output:

Explanation:

In the above example, we used the <noscript> tag  to provide disabled script. The text written in between the <noscript> opening and closing tag is not displayed as the output.

Please follow and like us:
error
Posted in HTML   









Copyright © 2019 CodesJava DMCA.com Protection Status