Programming World: javascript

In HTML image addition we discussed already. Now we will make a image slideshow in HTML page. This is really very important article for those who wanna make a dynamic web page.
Let's start making a slideshow.

1) First we will write our HTML page as usual.
<html>
<head><title>slideshow</title>
</head>
<body><?body>
</html>

2) For image slideshow first we introduce our images. This will do by introducing script inside head tag.

<script type="text/javascript">
var a1 = new Image()
a1.src ="a.jpg"
var a2 = new Image()
a2.src = "b.jpg"
var a3 = new Image()
a3.src = "c.jpg"
var a4 = new Image()
a4.src = "d.jpg"
</script>

3) Now images are added. Let's start implements them into body of web page. For this we will add a first display image on web page using HTML image addition tag.

<img src = "a.jpg" name ="slide" height="400" width ="400">

4) Now we again introduce a script inside body of web page. This script will make slideshow operations.

<script type="text/javascript">
var number = 1
function slideit() {

document.images.slide.src = eval("a"+number+".src")
if(number<4)
number++
else
number=1
setTimeout("slideit()",1500)
}
slideit()
</script>

In above script we make a variable "number" (you can make any word you wants). This variable initialize as 1. After that we made a function "slideit", In this function we used a javascript command which evaluate images one by one. A loop introduced after that with will run till last image. The variable number will change in every count of the loop as 1,2,3,4. This will change image source as a1,a2,a3,a4. After that a timeout command introduced for slideit function with time difference 1500 ms.

Now run the program, I am sure it will work fine.

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">

</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.

Pages

Saturday 11 April 2015

Image Slide Show in HTML

Thursday 9 April 2015

Javascript with HTML

Blog Archive