Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to Work with HTML Scripts

This article will cover scripting in HTML pages. I will demonstrate the functionality by examples of JavaScript, VBScript and NoScript.

Introduction:

This tutorial will cover the script tag description used in HTML programming. After reading this tutorial you will be able to understand what is the meaning of tagging any section in script.

A script (clients script) is a program that may bunch up an HTML document. The script runs when it loads on client machine like emulator or browsers. HTML's support for scripts is independent of the scripting language.

The script element either contains scripting statements (JavaScript/VBscript/CSSscript) or it links to another script by src attribute. The purpose for adding JavaScript in HTML is image manipulation, form validation, and dynamic changes of content.

Scripts provide us to extend HTML documents in dynamic and interactive ways. For example:

  • Scripts may include a form to process input as it is entered.
  • Script may pack a page which defines different functionality of client and server side.
  • Scripts may be evaluated as a document loads to modify the contents of the document dynamically.
  • Script may be bunch a package for another script that defines the property for another HTML element.
  • Scripts may be triggered by events that affect the document, such as element focus, mouse hovering, loading, unloading etc.
  • Scripts may be linked to form controls to produce graphical user interface elements. Such as a button, text box, checkbox, radio buttons.

There are two most used scripting languages that are commonly used in HTML to make web pages dynamic and interactive. JavaScript/CSS Script and VBScript are very useful scripting languages to produce dynamic and interactive effects. Tutorial will explain each section individually.

HTML JavaScript Code:

Listing 1: HTML JavaScript Code

<HTML>
<HEAD>
<TITLE>Script example in HTML </TITLE>
<SCRIPT language="javascript">
function add(type) {
var element = document.createElement("input");
    element.setAttribute("type", type);
    element.setAttribute("value", type);
    element.setAttribute("name", type);
   var add = document.getElementById("addBar");
    add.appendChild(element); 
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<H5>This demo example contains script of dynamic addition of check box, button, text box and radio buttons through drop down menu  in a form</H5>
Select the options in drop down menu.
<br/>
<SELECT name="element">
    <OPTION value="button">Button</OPTION>
    <OPTION value="text">Textbox</OPTION>
    <OPTION value="radio">Radio</OPTION>
    <OPTION value="checkbox">checkbox</OPTION>
    </SELECT>
 <INPUT type="button" value="Add" onclick="add(document.forms[0].element.value)"/>
 <span id="addBar"> </span>
 </FORM>
</BODY>
</HTML>
Above figure is output of a JavaScript program which add dynamically text boxes, buttons, check boxes and radio buttons

Figure 1: Above figure is output of a JavaScript program which add dynamically text boxes, buttons, check boxes and radio buttons.

HTML Vbscript:

To insert VBScript code onto your page, you must once again add the tag. Below is the code to insert VBScript code onto your site. Following script will clear the concept of adding vbscript in HTML.

Listing 2: VBScript Example

<html>
<head>
</head>
<body><h2><p align="center">Each element is showing in array and this script is supporting only in internet explorer.<p></h2>
<center><h3>
<script type="text/vbscript">
dim name(4)
name(0)="INDIA"
name(1)="America"
name(2)="Pakistan"
name(3)="Shree lanka"
name(4)="Bangaldesh"
for each eatables in name
document.write(eatables)
document.write("<br/>")
next
</script>
</body>
</html>
Above figure is output of a VB script in HTML which will run only on Microsoft internet explorer only

Figure 2: Above figure is output of a VB script in HTML which will run only on Microsoft internet explorer only.

we have learned recently about scripts added to HTML, now it’s time to know some non scripting element. The NOSCRIPT tag defines the content that is displayed when a browser arise an issue to project preceding script. The NOSCRIPT tag makes JavaScript and other browser-side scripting languages accessible to user-agents that cannot load scripts, or have scripting turned off.

If you Google chrome are not supporting script to run. Then it will show you output to your screen.

Listing 3: Example of NoScript Tag

<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
document.write("B")
document.write("C")
document.write("D")
document.write("E")
document.write("F")
document.write("G")
</script>
<noscript>
  JavaScript is required to access this part of the page. Please enable JavaScript.
</noscript>
</body>
</html>
Above figure is output of a NoScript example. In which if browser do not have support  for JavaScript will show the text in the no-script element

Figure 3: Above figure is output of a NoScript example. In which if browser do not have support for JavaScript will show the text in the no-script element.

Conclusion:

This tutorial covered the all basic concepts related to scripting in HTML. Hope it will help you to understand the concept. if you have any queries please comment.



I am Software Developer from India. I hold B.Tech. in Computer Science & Engineering. I am having 2+ years experience of developing Web applications and Websites using HTML, JavaScript, CSS, C#.NET etc..

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login