HTML JavaScript

javascript in html

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 HTML JavaScript used for websites.

Example:

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Date and Time example</h1>
<button type=”button”
onclick=”document.getElementById(‘demo’).innerHTML = Date()”>
Click me to display Date and Time.</button>
<p id=”demo”></p>
</body>
</html>

External JavaScript:

If you are going to define a functionality which will be used in various HTML documents then it’s better to keep that functionality in a separate JavaScript file and then include that file in your HTML documents. A JavaScript file will have extension as .js and it will be included in HTML files using <script> tag

Example:

<!DOCTYPE html>
<html>
   <head>
      <title>Javascript External Script</title>
      <script src = “/html/script.js” type = “text/javascript”/></script>
   </head>
   <body>
      <input type = “button” onclick = “Hello();” name = “ok” value = “Click Me” />
   </body>
</html>

Internal Script:

You can write your script code directly into your HTML document. Usually we keep script code in header of the document using <script> tag, otherwise there is no restriction and you can put your source code anywhere in the document but inside <script> tag.

Example:

<!DOCTYPE html>
<html>
   <head>
      <title>JavaScript Internal Script</title>
      <base href = “https://www.—-.com/” />
      <script type = “text/JavaScript”>
         function Hello() {
            alert(“Hello, World”);
         }
      </script>
   </head>
   <body>
      <input type = “button” onclick = “Hello();” name = “ok” value = “Click Me” />
   </body>
</html>

Event Handlers:

Event handlers are nothing but simply defined functions which can be called against any mouse or keyboard event. You can define your business logic inside your event handler which can vary from a single to 1000s of line code.

Example:

<!DOCTYPE html>
<html>
   <head>
      <title>Event Handlers Example</title>
      <base href = “https://www.——-.com/” />
      <script type = “text/JavaScript”>
         function EventHandler() {
            alert(“I’m event handler!!”);
         }
      </script>
   </head>
   <body>
      <p onmouseover = “EventHandler();”>Bring your mouse here to see an alert</p>
   </body>
</html>

Hide Scripts from Older Browsers:

Although most (if not all) browsers these days support JavaScript, but still some older browsers don’t. If a browser doesn’t support JavaScript, instead of running your script, it would display the code to the user. To prevent this, you can simply place HTML comments around the script as shown below.

JavaScript Example:

<script type = “text/JavaScript”>
   <!–
      document.write(“Hello JavaScript!”);
   //–>
</script>
<b>VBScript Example:</b>
<script type = “text/vbscript”>
   <!–
      document.write(“Hello VBScript!”)
   ‘–>
</script>

The <noscript> Element:

You can also provide alternative info to the users whose browsers don’t support scripts and for those users who have disabled script option their browsers. You can do this using the <noscript> tag.

JavaScript Example:

<script type = “text/JavaScript”>
   <!–
      document.write(“Hello JavaScript!”);
   //–>
</script>
<noscript>Your browser does not support JavaScript!</noscript>

VBScript Example:

<script type = “text/vbscript”>
   <!–
      document.write(“Hello VBScript!”)
   ‘–>
</script>
<noscript>Your browser does not support VBScript!</noscript>

Following are the list for Window event attributes:

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.

Recommended Posts:

Spread the love

Leave a Comment

Your email address will not be published. Required fields are marked *