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");
}
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>
<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>
<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>
<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>
<!--
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>
<!--
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.