NEW

6/recent/ticker-posts

Header Ads Widget

HTML JavaScript

Sunday, June 11, 2023

HTML 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.

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4. <h1>JavaScript Date and Time example</h1>  
  5. <button type="button"  
  6. onclick="document.getElementById('demo').innerHTML = Date()">  
  7. Click me to display Date and Time.</button>  
  8. <p id="demo"></p>  
  9. </body>  
  10. </html>  

HTML <script> Tag

The HTML <script> tag is used to specify a client-side script. It may be an internal or external JavaScript which contains scripting statements, hence we can place <script> tag within <body> or <head> section.

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

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4. <h2>Use JavaScript to Change Text</h2>  
  5. <p id="demo"></p>  
  6. <script>  
  7. document.getElementById("demo").innerHTML = "Hello JavaTpoint";  
  8. </script>  
  9. </body>  
  10. </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.

Syntax:

  1. <element event = "JS code">   

Example:

  1. <input type="button" value="Click" onclick="alert('Hi, how are you')">  

Output:

Click Event Example


Click on the button and you csn see a pop-up window with a message

HTML can have following events such as:

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

Following are the list for Window event attributes:

Event Event NameHandler NameOccurs when
onBlurblurWhen form input loses focus
onClickclickWhen the user clicks on a form element or a link
onSubmitsubmitWhen user submits a form to the server.
onLoadloadWhen page loads in a browser.
onFocusfocusWhen user focuses on an input field.
onSelectselectWhen user selects the form input filed.

Note: You will learn more about JavaScript Events in our JavaScript tutorial.

Let's see what JavaScript can do:

1) JavaScript can change HTML content.

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4. <p>JavaScript can change the content of an HTML element:</p>  
  5. <button type="button" onclick="myFunction()">Click Me!</button>  
  6. <p id="demo"></p>  
  7. <script>  
  8. function myFunction() {   
  9.     document.getElementById("demo").innerHTML = "Hello JavaTpoint!";  
  10. }  
  11. </script>  
  12. </body>  
  13. </html>  

2) JavaScript can change HTML style

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4. <p id="demo">JavaScript can change the style of an HTML element.</p>  
  5. <script>  
  6. function myFunction() {  
  7.     document.getElementById("demo").style.fontSize = "25px";   
  8.     document.getElementById("demo").style.color = "brown";  
  9.     document.getElementById("demo").style.backgroundColor = "lightgreen";         
  10. }  
  11. </script>  
  12. <button type="button" onclick="myFunction()">Click Me!</button>  
  13. </body>  
  14. </html>  

3) JavaScript can change HTML attributes.

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4. <script>  
  5. function light(sw) {  
  6.     var pic;  
  7.     if (sw == 0) {  
  8.         pic = "pic_lightoff.png"  
  9.     } else {  
  10.         pic = "pic_lighton.png"  
  11.     }  
  12.     document.getElementById('myImage').src = pic;  
  13. }  
  14. </script>  
  15. <img id="myImage" src="pic_lightoff.png" width="100" height="180">  
  16. <p>  
  17. <button type="button" onclick="light(1)">Light On</button>  
  18. <button type="button" onclick="light(0)">Light Off</button>  
  19. </p>  
  20. </body>  
  21. </html>  

Use External Script

Suppose, you have various HTML files which should have same script, then we can put our JavaScript code in separate file and can call in HTML file. Save JavaScript external files using .js extension.

Note: Do not add <script> tag in the external file, and provide the complete path where you have put the JS file.

Syntax:

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

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3.    <head>  
  4.     <script type="text/javascript" src="external.js"></script>  
  5.     </head>  
  6.      <body>  
  7.       <h2>External JavaScript Example</h2>  
  8.        <form onsubmit="fun()">  
  9.          <label>Enter your name:</label><br>  
  10.       <input type="text" name="uname" id="frm1"><br>  
  11.        <label>Enter your Email-address:</label><br>    
  12.       <input type="email" name="email"><br>  
  13.       <input type="submit">  
  14.   </form>  
  15.  </body>  
  16.  </html>  

JavaScript code:

  1. function fun() {  
  2.        var x = document.getElementById("frm1").value;  
  3.         alert("Hi"+" "+x+ "you have successfully submitted the details");  
  4.     }  

Output:

HTML JavaScript

HTML <noscript> Tag

HTML <noscript> tag is used to write disabled script in the browser. The text written within <noscript></noscript> tag is not displayed on the browser.

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4. <p id="demo"></p>  
  5. <script>  
  6. document.getElementById("demo").innerHTML = "Hello JavaScript!";  
  7. </script>  
  8. <noscript>This text is not visible in the browser.</noscript>  
  9. </body>  
  10. </html>  


Tags:

Post a Comment

0 Comments

Post a Comment

Recents Post

Exploring Paidwork - Your Gateway to Earning Online

Exploring Paidwork - Your Gateway to Earning Online

Slogan Technologies Monday, May 13, 2024

In today's digital age, the possibilities for earning money online are vast and …