Thursday, December 28, 2017

Html Javascript


Hello dear readers! welcome back to another section of my tutorial on Html. For those following up on my tutorials, you all know we have really come a long way on Html and soon i will be rounding up on my tutorial on Html and going into another course on web design called the Cascading Style Sheets (CSS). In this tutorial post, am going to be discussing a little bit about Javascript.

Note: that Javascript is going to be treated properly on a separate tutorial. This tutorial is just to give you an idea of what Javascript is all about.

A script can be defined is a small piece of program that can be used to add interactivity to your site. For example, a script could be used to generate a pop-up alert box info, or even provide a dropdown menu. This script could be written using JavaScript or VBScript.

RECOMMENDED POST: Html Introduction

Various functions known as event handlers can be written in your code, using any of the scripting language and then trigger those functions using Html attributes.

In recent times, only JavaScript and the associated frameworks are being used by most of the web developers, VBScript is not even supported by various major web browsers.

You can keep the JavaScript code in a separate file and then it can be included whenever its needed, or you can define functionality inside the Html document itself. Lets look at both cases with very short examples.

RECOMMENDED: Html Elements

External JavaScript

If you are to define a functionality which will be used in various Html documents then its preferrable to keep that functionality in another JavaScript file and then include that file into your Html documents. A JavaScript file is going to have an extension as .js and included in the Html documents using the <script> tag.

Example

Let us consider a short example where we defined a small function using JavaScript in script.js which has the following code:

function Hello()    {          
     alert("Hello, world");  
}

Now let us make use of the above external Js file in our following Html document:

<!DOCTYPE html>
<html>

     <head>
            <title>JavaScript External Script</title>
            <script src="/html/script.js"  type="text/javascript" />
     </head>

     <body>
            <input   type="button"  onclick="Hello();"   name="ok"  value="Click"  />    
     </body> 
</html>

Internal Script

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

RECOMMENDED: Html Attributes

Example


<!DOCTYPE html>
<html>

     <head>
            <title>JavaScript Internal Script</title>
            <base href="https://webdesigntutorialz.com/"  /> 

            <script  type="text/javascript" >
                  function Hello()    {           
                       alert("Hello, world");
                  }
            </script> 
     </head>

     <body>
            <input   type="button"  onclick="Hello();"   name="ok"  value="Click"  />    
     </body>
</html>

You can try the above codes out for better understanding and feel free to drop your questions in the comment box.

Event Handlers

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

Following example below explains how to write an event handler. Let us now write one simple function EventHandler() in the header of the document. We are going to call this function when a user brings a mouse over a paragraph

<!DOCTYPE html>
<html>

     <head>
            <title>Event Handler Example</title>
            <base href="https://webdesigntutorialz.com/"  /> 

            <script  type="text/javascript" >
                  function EventHandler()   {
                       alert("This is an event handler");
                  }
            </script> 
     </head>

     <body>
            <p  onmouseover="EventHandler();">Hover your mouse here to see the alert</p>   
     </body>
</html>

Hide Scripts from Older Browsers

Though most browsers these days support Javascript, but still some older browsers do not. If a browser does not support Javascript, then instead of running your script, it would display the script code to the user. To prevent this, you can simply place Html comments all around the script as shown below.

RECOMMENDED: Html Attribute 2

Example


<script type="text/javascript">
     <!--
            document.write("Hello, world");
     //-->
</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 on their browsers. You can do this using the <noscript> tag.

Example


<script  type="text/javascript" >
     <!--

            document.write("Hello, world");
     //-->
</script>

<noscript>your browser does not support javascript!</noscript>   

Default Scripting Language

There may be a situation when you would include multiple script files and utimately using multiple <script> tags. You can then specify a default scripting language for all your script tags.

This saves you from specifying the language every time you use a script tag within the page.

Example


<meta  http-equiv = "Content-Script-Type"  content = "text/javascript" />     

Note - You can still override the default language by specifying a language within the script tag.

Alright guy, we have come to the end of this tutorial post, see you all in my next tutorial, don't forget to subscribe with us, bye for now.
Share:

0 comments:

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.