Java Script Tutorial

JavaScript

(ECMAScript)

Client-side dynamic documents

Netprog: JavaScript 1

Smart Browsers

• Most browsers support a

---

Netprog: JavaScript 18

JavaScript and

Netprog: JavaScript 19

JavaScript Functions

• The keyword function used to define

a function (subroutine):

function add(x,y) {

return(x+y);

}

Netprog: JavaScript 20

JavaScript Events

• JavaScript supports an event handling

system.

– You can tell the browser to execute javascript commands when some event occurs.

– Sometimes the resulting value of the command determines the browser action.

Netprog: JavaScript 21

Simple Event Example

Depending on your browser setting, this may not change the window size...

Hello - I am a very small page!

Netprog: JavaScript 22

Buttons

• You can associate buttons with JavaScript

events (buttons in HTML forms)

Netprog: JavaScript 26


Form Field Validation


• You can have JavaScript code that makes sure the user enters valid information.


• When the submit button is pressed the script checks the values of all necessary fields:


– You can prevent the request from happening.




Netprog: JavaScript 27


Checking Fields


function checkform() {


if
(document.getElementById("age").value
== "") {


alert("You need to specify an age");


return(false);


} else {


return(true);


}


Needs to return true or false!




Netprog: JavaScript 28


The Form




Age:

Netprog: JavaScript 29

Complete Form

Example

• Check the CGI example named

"JavaScript" for a complete example:

– Student grade database with form field validation in the form.

Netprog: JavaScript 30

Important Note about Form

Validation!!!

• It's a good idea to make sure the user fills out the form before submitting.

• Users can bypass your form – they can create requests manually (or their own forms).

• Your CGI programs cannot rely (soley) on

Client-Side JavaScript to validate form fields!

Netprog: JavaScript 31

Lots of JavaScript

• There are many javascript examples available via the course home page:

"Stupid JavaScript Tricks“

Got one of your own? Send it to Dave!

Netprog: JavaScript 32