Thursday 9 April 2015

Javascript with HTML

Script is a small program that can add interactivity to your website. A script could generate a pop-up alert message or drop down menu. These scripts can write in javascript or VBScript.
In javascript we can write small functions called event handlers, then we can trigger those functions using HTML attributes. Now days Javascript is widely used web scripting language.
We can add javascript using external .js file or internally in HTML document. Let's start both cases one by one.

Externally use of javascript : If we wanna add functionality in various HTML documents then we should add external javascript file. In HTML document we will make a syntax inside <head> tag as - 
<html>
<head>
<title>javascript</title>
<script type = "text/javascript" src = "amar.js"></script>
</head>
<body>
<input type="button" value="click me" onclick="amar();">
</body>
</html>

and "amar.js"  is :
function amar() {
alert("hello amar");
}

when we will click the button then output will be-



Similarly we can add javascript inside the HTML document without using external .js file. Let's see the syntax for making it.
<html>
<head>
<title>Javascript</title>
<script type="text/javascript">
function amar(){
alert("hello amar");
}
</script>
</head>
<body>
<input type="button" onclick="amar();" name="ok" value="Click Me" />
</body>
</html>


Output will be the same as above. Now we should know about Event Handlers. Event handlers are small function which responds on mouse or keyboard actions. Let's see how.

<html>
<head>
<title>Javascript</title>
<script type="text/javascript">
function amar(){
alert("hello amar");
}
</script>
</head>
<body>
<p onmouseover="amar();">Bring your mouse here to see an alert</p>
</body>
</html>


When we will bring our mouse over text the we will see the same alert as above. Now we will focus on <noscript> tag. This tag is used when browser of user doesn't supports javascript or they disabled javascript. At that time this tag shows them a alert.
<script type="text/javascript">
<!--
document.write("Hello Javascript!");
//-->
</script>
<noscript>Your browser does not support Javascript!</noscript>


NOTE : When we will use multiple script files or multiple <script> tags  then we should make default scripting language for all tags by following syntax.
<meta http-equiv="Content-Script-Type" content="text/JavaScript" /> 

Thanx everyone, we will continue HTML in next article.

No comments:

Post a Comment