1. BY: SITI NURBAYA ISMAIL FACULTY of COMPUTER and MATHEMATICAL SCIENCES
CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT
BY:
SITI NURBAYA ISMAIL
FACULTY of COMPUTER and MATHEMATICAL SCIENCES

2. Outline Basic JavaScript
Syntax (recap)
Variable (recap)
JavaScript Functions (recap)
Parsing User Input (recap)
Logical structures
How to Process Inputs
Form Validation

3. Basic JavaScript Comparison Operators
(the following examples will used x = 5)
Operator
Description
Example ==
is equal to
x == 8 is false
===
is exactly equal to (value and type)
x === 5 is true
x === “5” is false !=
is not equal to
x != 8 is true
>
is greater than
x > 8 is false
<
is less than
x < 8 is true
<=
is less than or equal to
x <= 8 is true
>=
is greater than or equal to
x >= 8 is false

4. Basic JavaScript Logical Operators
determine logic between values
(the following examples will used x = 6 and y = 3)
Operator
Description
Example
&&
and
(x < 10 && y > 1) is true || or
(x == 5 || y == 5) is false !
not
!(x == y) is true

5. Basic JavaScript Logical Structures
Your application may involves conditions
Example
If male, he wears “baju melayu”
If female, she wears “baju kurung”
JavaScript has logical structures (conditional statements), where you need to use operators on the previous two slides

6. Basic JavaScript Conditional Statements
Used to perform different actions based on different conditions/decisions
if statement
execute some code only if a specified condition is true
if..else statement
execute some code if the condition is true and another code if the condition is false
if..else if...else statement
select one of many blocks of code to be executed
switch statement

7. Basic JavaScript Logical Structures
Simple examples
if(male){
document.write(“He wears baju melayu”); }
else{
document.write(“She wears baju kurung”);
switch(gender){
case “male” : alert(“He wears baju melayu”);
break;
case “female”: alert(“She wears baju kurung”);
default : alert(“Please select gender!”); }

8. Basic JavaScript Logical Structures
if statement: execute some code if a specified condition is true
if(condition){
// execute the code if condition is true }
if(place == “Merbok”){
document.write(“It is situated in Kedah”); }
if(university == “UiTM” && place == “Merbok”){
document.write(“It is situated in Kedah”); }

9. Basic JavaScript Logical Structures
if statement: execute some code if a specified condition is true
if(program == “AS110” || program == “CS110”){
document.write(“These are UiTM programs”); }
if(time >= 1 && time < 12){
document.write(“Good Morning!”); }

10. Basic JavaScript Logical Structures
if…else statement: execute some code if a specified condition is true, and another code if the condition is false
if(condition){
// execute the code if condition is true }
else{
// execute the code if condition is false

11. Basic JavaScript Logical Structures
if…else statement: execute some code if a specified condition is true, and another code if the condition is false
if(gender == “Male”){
document.write(“Go to Hall A”); }
else{
document.write(“Go to Hall B”);

12. Basic JavaScript Logical Structures
if…else if…else statement: use this statement if you want to select one of many blocks of code to be executed
if(condition1){
// execute code if condition1 is true }
else if(condition2){
// execute code if condition2 is true
else if(condition3){
// execute code if condition3 is true
else{
// execute code if all conditions are false

13. Basic JavaScript Logical Structures
if…else if…else statement: use this statement if you want to select one of many blocks of code to be executed
if(program == “AS120”){
document.write(“Diploma in Science”); }
else if(program == “CS110”){
document.write(“Diploma in Computer Science”);
else if(program == “AC110”){
document.write(“Diploma in Accountancy”);
else{
document.write(“Please select program code”);

14. Basic JavaScript Logical Structures
switch() statement: use this statement if you want to select one of many blocks of code to be executed
switch(var){
case 1: // execute code block 1
break;
case 2: // execute code block 2
break; // break the loop and continue
executing the code that follows
after the loop (if any).
default: //execute code if var is different
// from case 1, 2, 3 }

15. Basic JavaScript Logical Structures
switch() statement example:
switch(month){
case 1: document.write(“January”);
break;
case 2: document.write(“February”);
case 3: document.write(“March”);
default: document.write(“None of the above”); }

16. Basic JavaScript How to Process Inputs
1 input field, which a text field, name num1
1 input field, which a text field, name num2
1 drop down list, name operator
1 Submit button
Supposedly, if user input value within the input fields and select a value in the dropdown list, then click the Submit button, the value from num1 & num2 will be processed
create an event that will call a JavaScript function first
that event can be placed at the Submit button

17. Basic JavaScript How to Process Inputs
Create a complete HTML form with several input fields [ Your previous coding in Question 5 ]
<form name="f1">
<b>......::Simple Arithmetic Process::......</b><br>
<input type="text" name="num1" size="4">
<select name="operator">
<option value="add">Add
<option value="minus">Minus
<option value="multiple">Multiply
<option value="division">Division
</select>
<input type="text" name="num2" size="4">
<input type="button" onclick="kira()" value="Submit">
<input type="text" name="result" size="8">
</form>

18. Basic JavaScript How to Process Inputs
Now, we create the JavaScript user-defined function first, which will be placed at <head>…</head> tag
Every time you create user-defined function, it must starts with function followed by function_name, brackets (()), and braces ({})
For this example, create a function name kira()
<script type=“text/javascript”>
function kira(){
// your JavaScript code is here }
</script>

19. Basic JavaScript How to Process Inputs
To capture value or data from input field, we have to write this code
Now, place the code above in the kira(), where it would be like this
var fname = document.{form_name}.{field_name}.value;
var num1 = document.f1.num1.value;
var num2 = document.f1.num2.value;
var operator = document.f1.operator.value;

20. Basic JavaScript How to Process Inputs
<script type="text/javascript">
function kira(){
var num1 = document.f1.num1.value;
var num2 = document.f1.num2.value;
var operator = document.f1.operator.value; }
</script>
Now, add onclick event on the Submit button to call kira()
<input type="submit" name="submit"
value="Submit" onclick=“kira()">

21. <script language="javascript“>
function kira(){
num1=parseFloat(document.f1.num1.value);
num2=parseFloat(document.f1.num2.value);
operator=document.f1.operator.value;
if(operator=="add"){
sum=num1+num2; }
else if(operator=="minus"){
sum=num1-num2;
else if(operator=="multiple"){
sum=num1*num2;
else if(operator=="division"){
sum=num1/num2;
else{
alert("select an operator");
document.f1.result.value=sum;
</script>

22. Basic JavaScript How to Process Inputs
We can also validate/check numeric input using isNaN()
Now, add this code in function kira() before after calling the input from form f1.

23. num1=parseFloat(document.f1.num1.value);
operator=document.f1.operator.value;
if(num1 == ""){
alert("Please enter value for number 1");
return false; }
else if(isNaN(num1)){
alert("Your number 1 value is not a number");
else{}
if(num2 == ""){
alert("Please enter value for number 2");
else if(isNaN(num2)){
alert("Your number 2 value is not a number");

24. Basic JavaScript How to Process Inputs
Create a complete HTML form with several input fields [ Your previous coding in Question 3 ] Using JavaScript codes, retrieve height and weight values from HTML form. Next, proceed with BMI calculation and determine the category of BMI according to BMI value.
Category
BMI range – kg/m²
Starvation
Less than 14.9
Underweight
From 15 to 18.4
Normal
From 18.5 to 22.9
Overweight
From 23 to 27.5
Obese
From 27.6 to 40
Morbidly obese
Greater than 40

25. Based on figure below, create a JavaScript function that able to check your grade according to your mark. Your JavaScript function must be able to accept an input from HTML form, which enters by user. Next, user will click on Check Grade button to check his/her grade. Display the grade in the text field in HTML form. Please follow conditions in the Table 1, in order to check the grade.
Table 1
Marks
Grade & Status
90 – 100 A+
80 – 89 A
75 – 79 B+
70 – 74 B
65 – 69 B-
60 – 64 C+
55 – 59 C
0 – 54
Please work harder

26. Form Enhancement Eror Checking
Why we have to perform error checking / input verification?
To avoid any (unnecesary|invalid) (character|input) from being accepted according to defined (pattern|format)
Sometimes, each input has its own pattern or format that will determine that input is valid or invalid
Examples:
address verification
Name verification
Phone number verification

27. Form Enhancement Eror Checking
<html>
<head>
<script type="text/javascript">
function cap(){
var fname = document.f1.fname.value;
alert("Name: " + fname); }
</script>
</head>
<body>
<form name="f1">
Name: <input type="text" name="fname">
<input type=“button“ value="Submit" onclick=“cap()">
</form>
</body>
</html>

28. Form Enhancement Eror Checking
cap() will capture a value from fname text field. This field is specifically for people´s name, which is string value
What will happen if user enter numeric value?
Should cap() accept the value without need to do error checking?
What will happen if user does not enter any value? The field leave blank
<script type="text/javascript">
function cap(){
var fname = document.f1.fname.value;
alert("Name: " + fname); }
</script>

29. Form Enhancement Eror Checking
<script type="text/javascript">
function cap(){
var fname = document.f1.fname.value;
if(fname == ""){ // check if no value being entered
alert("Please enter a name!"); }
else if(fname == null){ // check if there is undefined value
else if(!isNaN(fname)){ // check if value is numeric
alert("Invalid character. Name must be alphabet.");
else{ // all conditions above false
document.write("Name: " + fname);
</script>

30. Form Enhancement Eror Checking
fname = ″″ and fname = null are two different statements
fname = ″″
fname = null
check if the value is empty
check if the value is null (undefined or unknown)

31. Introduction to Client-Side Scripting
Bibliography (Book)
Knuckles (2001). Introduction to Interactive Programming on the Internet using HTML & Javascript. John Wiley & Sons, Inc.
Bibliography (Websites) 31