Thursday, December 28, 2017

Javascript (Html)

Hello guys, welcome to this section of my tutorial on HTML, for those of your following up on my tutorials, you all know we have realy come a long way on HTML and soon i will be rounding up on my tutorial on HTML and will be going into another part of this tutorial which is Cascading Style Sheets (CSS). Now in this tutorail am going to be talking a little bit about Javascript.
Note: that Javascript will be treated properly on a seperate tutorial. This is just to give you an idea of what Javascript is all about.

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

You can write various small functions, called event handlers using any of the scripting language and then you can trigger those functions using HTML attributes.

Now-a-days, only JavaScript and associated frameworks are being used by most of the web developers, VBScript is not even supported by various major browsers.

You can keep JavaScript code in a seperate file and then include it whenever it's needed, or you can define functionality inside the HTML document itself. Lets look at both cases with very short examples.

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

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

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

Now let's make use of the above external Javascript 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 script code directly into your HTML document. Usually we keep script code in the header of the document using <script> tag, otherwise there is no restriction and you can put your source code any where in the document but inside <script> tag.

Example
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Internal Script</title>
<base href="https://www.webdesigntutorialz.blogspot.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 
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.

Following example explains how to write an event handler. Lets write one simple functionEventHandler() in the header of the document. We will call this function when any user brings mouse over a paragraph.

<!DOCTYPE html>
<html>
<head>
<title>Event Handler Example</title>
<base href="https://www.webdesigntutorialz.blogspot.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
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.

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 will include multiple script files and utimately using multiple <script> tags. You can 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 that you can still override the default by specifying a language within the script tag.

Alright guys that's it all for this section of my tutorial, will see you all in my next tutorial, don't forget to subscribe with us, bye for now.


Links to previous tutorials on HTML : Html IntroductionHtml TagsHtml Document StructureThe Doctype Declaration, Html Basic Tags, Html Basic Tags2 , Html Elements , Html Attributes , Html Attribute 2 , Html Formating , Html Formatting[CONTINUATION] , Grouping Content , HTML-Phrase TagsHtml-Phrase Tags[CONCLUSION] , Html-Meta Tags , Html-Comments , Html Images , Html Tables , Html Tables(Conclusion) , Html List , Html Text Links , Html Image LinksHtml Frames , Html Iframes , Html Blocks , Html Backgrounds , Html Fonts , How to create Html Forms (Web Design Tutorial)How to Embed Multimedia into a Html web page(web design) , Html Marquees (Web design) , Html Header (Html tutorail) , Html Stylesheet (Html)
 
Share:

0 comments:

Post a Comment