javascript examples

Javascript Examples
Discuss regular expressions in Java course, show
their use in Javascript

J M Githeko

1

Agenda

 Dynamic Effects: Button roll-overs
 Form Validation

2

Button Rollovers

 Image access using DOM
 Image properties
 Image stored on object variables
(preloading)
 Changing image properties using
event handlers

3

Step 1: Creating the Basic Page
<html>
<head>
<title>Image Rollover</title>
</head>
<body bgcolor="white">
<img src="screw.jpg">
</body>
</html>

4

Step 2: Naming the Image

<img src="screw.jpg" name="pic1">

5

Step 3: Create Event
<a href="" onMouseOver="roll_this() "
onMouseOut=“roll_off()”>
<img src="screw.jpg" name="pic1"
border=0>
</a>

 Note: We use an anchor <a> because
onMouseOver on an image is not
recognized by some browsers.
 Note “border=‘0’” to prevent border
being shown around the image
6

Step 4: Changing the Image “src”
property
 The image's src property can be
referenced in JavaScript with
"document.images.pic1.src"
 The term "images" refers to all of the
images in a document
 pic1 is the name of image we shall
manipulate
 src property is the URL of the image
file 7

 We can change the src property

Step 5: Creating the Functions

<script style = “text/javascript">

function roll_this()
{
document.images.pic1.src="capnut.jpg";
}

</script>

8

Step 5 (cont’d)
function roll_off()
{
document.images.pic1.src=“images/screw.jpg";
}

Note: Ensure that the image files are accessible
in the same directory as the source file or
change image url to point elsewhere

9

Rollover for a Single Button
<a href=""
onMouseOver="document.images.pic1.src='capnut.jpg'"
onMouseOut="document.images.pic1.src='screw.jpg'">
</a>

10

Preloading Images
 Improves speed of rollover
 Images stored in image objects
 Giving pixel dimensions optimises
memory usage
 Image objects created as follows:

some_name = new image(100, 20);
some_name.src = “images/rhino.jpg”;

11

Preloading Images (cont’d)
<head>
<script type="text/javascript">

</script>
</head>

12

Preloading Images (cont’d)
More Complex Example
<SCRIPT type = “text/javascript”>

</SCRIPT>

 Defines a new image object, width of 100,
height of 25 [Replace these with the width
and height of your image]
 The second defines the url or web address
of the image [Replace this with the url of
your image] 13

Preloaded Images Complete Example
(cont’d)
<html>
<head>

</script> 14
</head>

Preloaded Images Complete Example
(cont’d)
<body>
<a href="“
onmouseover=
"document.images.example.src=image02.src"

onmouseout=
"document.images.example.src=image01.src"
>

<img src=" images/ordown.jpg "
name="example“ border=“0”>
15
</a>

Rollover Example
<html>
<head>

</script>
</head>

<body>
<h1>Figure Out Why Only The First Button Words</h1>
<a href=""
onmouseover="roll_out()" onmouseout= "roll_in()" >
<img src=" images/ordown.jpg " name="example" border="0">
</a>
<hr>
<a href=""
</a>
<hr>
<a href=""
</a>
</body>

</html>

16

What is Form Validation?

 Form validation is the process of
checking that a form has been filled
in correctly before it is processed.
 For example, to check that user has
filled in a valid email address.

18

Form Validation
 Using form elements in Javascript

 Capturing form entries in variables

 Testing string attributes such as length
and character sets

 See:
http://java
scriptkit.com/script/cutindex13.shtml
19

Form Elements

<form onSubmit = “ …”>
<input type = … name = … />
<select>
<option name=… value = ….> Text 2 </option>
<option name = .. value = ….>Text 2 </option>
</select>
</form>

20

String Length Check
function checkUsername (strng)
{
var error = "";
if ((strng.length < 4) || (strng.length > 10))
{
error = "The username is the wrong
length.n";
}

} 21

Using Regular Expressions for
Checking Existence of Character

22

javascript examples

More Related Content

What's hot (20)

Viewers also liked (10)

Similar to javascript examples (20)

More from Egerton University (7)

Recently uploaded (20)

javascript examples