javascript examples

1

Javascript ExamplesDiscuss regular expressions in Java course, show

their use in Javascript

J M Githeko

2

Agenda

Dynamic Effects: Button roll-overs Form Validation

3

Button Rollovers

Image access using DOM Image properties Image stored on object variables

(preloading) Changing image properties using

event handlers

4

Step 1: Creating the Basic Page

<html><head><title>Image Rollover</title></head>

<body bgcolor="white">

<img src="screw.jpg">

</body></html>

5

Step 2: Naming the Image

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

6

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

7

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

We can change the src property

8

Step 5: Creating the Functions

<script style = “text/javascript">

function roll_this()

{document.images.pic1.src="capnut.jpg";}

</script>

9

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

10

Rollover for a Single Button

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

11

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”;

12

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

13

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]

14

Preloaded Images Complete Example (cont’d)

<html><head><script type="text/javascript"></script></head>

15

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

</a></body>

</html>

16

Rollover Example<html><head><script type="text/javascript"></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="" onmouseover="roll_out()" onmouseout= "roll_in()" ><img src=" images/ordown.jpg " name="example" border="0"></a><hr><a href="" onmouseover="roll_out()" onmouseout= "roll_in()" ><img src=" images/ordown.jpg " name="example" border="0"></a></body>

</html>

17

Form Validation

18

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.

19

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

http://javascriptkit.com/script/cutindex13.shtml

http://javascriptkit.com/script/cutindex13.shtml

20

Form Elements

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

</select></form>

21

String Length Check

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

length.\n"; }

}

22

Using Regular Expressions for Checking Existence of Character

Education

javascript examples