2. Objectives
Students should able to:
1. Using Javascript
2. Identify and use the various JavaScript
features:
• Custom and Build-in Functions
• Event Handler
• Input and Output of document text
• document.write()
4. Javascript Declarations
var ite_Class_Size = 43; All javascript
statement must
var ite Class Size = 43; end with ;
var iteClassCA = “Mr Sua”;
var htmlTeacher = new String(“Mr Sua”);
5. Syntax of Javascript
var result; Declare a variable called result.
result = 12 * 20; Perform arithmetic operation
and store it in variable result
alert(“The result is “ + result);
Does a string concatenation.
Display the output in a pop-up box.
6. Functions
A function is a collection of codes.
This set of codes will be executed by a
call to the function or an event.
Functions can be placed in either the
<head> or <body>
8. Date object
<SCRIPT LANGUAGE=”JavaScript”>
var todayDate = new Date();
document.write("Today's Date is ")
document.write(todayDate.getDate());
document.write(todayDate.getMonth());
document.write(todayDate.getYear());
</SCRIPT>
9. Date object
<SCRIPT LANGUAGE=”JavaScript”>
var todayDate = new Date();
document.write(todayDate.getHours());
document.write(todayDate.getMinutes());
document.write(todayDate.getSeconds());
</SCRIPT>
10. Form Validation
What is form validation?
Form validation is the process of checking that a
form has been filled in correctly before it is
processed.
11. Form Validation
There are two main methods for validating forms:
- server-side (using CGI scripts, ASP, etc), and
- client-side (usually done using JavaScript).
Server-side validation is more secure but often
more tricky to code, whereas client-side
(JavaScript) validation is easier to do and
quicker too (the browser doesn't have to
connect to the server to validate the form).
12. Form Validation
There are two main methods for validating forms:
Client-side form validation (usually with JavaScript embedded in the Web page)
13. Form Validation
There are two main methods for validating forms:
Server-side form validation (usually performed by a CGI or ASP script)
14. Validate_Form
Example on validating forms:
Open this page
The first part of the form is the form tag:
<code />
<form name="contact_form"
method="post"action="/cgi-
bin/articles/development/javascript/for
m-validation-with-
javascript/contact_simple.cgi"onsubmit=
"return validate_form ( );">
15. Validate_Form
Example on validating forms:
Open this page
The first part of the form is the form tag:
<code />
<form name="contact_form"
method="post"action="/cgi-
bin/articles/development/javascript/for
m-validation-with-
javascript/contact_simple.cgi"onsubmit=
"return validate_form ( );">
16. Validate_Form
Example on validating forms:
Open this page
The rest of the form prompts the user to enter their name
into a form field called contact_name, and adds a "Send
Details" submit button:
<code /><h1>Please Enter Your Name</h1><p>Your
Name: <input type="text"
name="contact_name"></p><p><input type="submit"
name="send" value="Send Details"></p></form>
17. Validate_Form
Example on validating forms:
Open this page
<script type="text/javascript">
<!--
function validate_form ( )
{ valid = true;
if ( document.contact_form.contact_name.value = = "" )
{ alert ( "Please fill in the 'Your Name' box." );
valid = false; }
return valid;
}
//-->
</script>
