CSC317 – INTERNET PROGRAMMINGCSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT

BY: SITI NURBAYA ISMAILFACULTY of COMPUTER and MATHEMATICAL SCIENCES

Syntax (recap)

Variable (recap)

JavaScript Functions (recap)

Parsing User Input (recap)

Logical structures

How to Process Inputs

Form Validation

OutlineBasic JavaScript

Page 2

Basic JavaScriptComparison Operators

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

Page 3

Basic JavaScriptLogical Operators

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

Page 4

Basic JavaScriptLogical 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

Page 5

Basic JavaScriptConditional 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 statementexecute some code if the condition is true and another code if the condition is false

if..else if...else statementselect one of many blocks of code to be executed

switch statement select one of many blocks of code to be executed

Page 6

Page 7

Basic JavaScriptLogical 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”);

break; default : alert(“Please select gender!”);}

Basic JavaScriptLogical 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”);

}

Page 8

Basic JavaScriptLogical 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!”);

}

Page 9

Basic JavaScriptLogical 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}

Page 10

Basic JavaScriptLogical 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”);}

Page 11

Page 12

Basic JavaScriptLogical 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}

Page 13

Basic JavaScriptLogical 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”);}

Page 14

Basic JavaScriptLogical 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

}

Page 15

Basic JavaScriptLogical Structures

switch() statement example:

switch(month){ case 1: document.write(“January”); break;

case 2: document.write(“February”); break;

case 3: document.write(“March”); break;

default: document.write(“None of the above”);}

Basic JavaScriptHow 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

Page 16

Page 17

Basic JavaScriptHow to Process Inputs

Create a complete HTML form with several input fields

[ Your previous coding in Question 5 ]

Basic JavaScriptHow 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>

Page 18

Basic JavaScriptHow 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;

Page 19

Basic JavaScriptHow to Process Inputs

Now, add onclick event on the Submit button to call kira()

<input type="submit" name="submit" value="Submit" onclick=“kira()">

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

Page 20

Page 21

Basic JavaScriptHow 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.

Page 22

Page 2323

Page 24

Basic JavaScriptHow 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.

24

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

Page 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

Form EnhancementEror 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:- Email address verification

- Name verification

- Phone number verification

Page 26

Form EnhancementEror 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>

Page 27

Form EnhancementEror 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>

Page 28

Page 29

Form EnhancementEror 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 alert("Please enter a name!"); } 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>

Form EnhancementEror 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)

Page 30

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)

http://www.w3schools.com/js/default.asp

Page 31