csc318 – web application development by: muhd eizan shafiq bin abd aziz faculty of computer and...
TRANSCRIPT
CSC318 – WEB APPLICATION DEVELOPMENT
BY: MUHD EIZAN SHAFIQ BIN ABD AZIZFACULTY of COMPUTER and MATHEMATICAL SCIENCES
FSKM UiTM Pahang Page 2
Outline
Syntax (recap)
Variable (recap)
JavaScript Functions: alert(), prompt(), confirm(), window.print()
Math. Functions (refer Week 11 note)
Parsing User Input
Logical Structures
Formatting Numbers (new)
How to Process Inputs
String Handling & String Methods (new)
Basic JavaScript
FSKM UiTM Pahang Page 3
Basic JavaScript
Recall back…JavaScript Syntax
- How to write JavaScript code?
Basic JavaScript
<script type="text/javascript"><!--Your script code//--></script>
<html><head><script type="text/javascript">alert("Hello IE");</script></head><body>Hi</body></html>
FSKM UiTM Pahang Page 4
Basic JavaScript
Recall back…JavaScript Variables
- How to declare variables in JavaScript?
Basic JavaScript
<script type="text/javascript">// variables declaration in JavaScriptvar x, y, z;var name, age, address;
// set value to variablesX = 5;y = 12;z = 1.5;
name = "Ali"; // this variable has string type valueage = 25; // this variable has numeric type valueaddress = "Klang, Selangor"; </script>
FSKM UiTM Pahang Page 5
Basic JavaScript
alert() function
- (Throw|Display) a warning message to user
JavaScript Functions
<html><head><script type="text/javascript">alert("Hello IE");</script></head><body>
</body></html>
<!-- javascript1.html -->
FSKM UiTM Pahang Page 6
Basic JavaScript
prompt() function
- It can be used to capture user input
JavaScript Functions
<html><head><script type="text/javascript">var name = prompt("What is your name?", "");alert("Hi " + name);</script></head><body></body></html>
<!-- js-prompt.html, javascript7.html -->
FSKM UiTM Pahang Page 7
Basic JavaScript
confirm() function
- (Throw|Display) a message with two choices (OK & Cancel) to user
- Often used to confirm an important action
JavaScript Functions
Next slide please…;-)
FSKM UiTM Pahang Page 8FSKM UiTM Pahang Page 8
<html><head><script type="text/javascript">function confirmation() {
var answer = confirm("Are you sure want to delete the file?");if (answer){
alert("Data has been deleted.");}else{
alert("Delete is canceled");}
}</script></head><body><form><input type="button" name="button" value="Delete" onclick="confirmation()"></form></body></html>
<!-- js-confirm.html, javascript8.html -->
FSKM UiTM Pahang Page 9
OK Cancel
FSKM UiTM Pahang Page 10
Basic JavaScript
window.print() function
- Will print current web page (print window will appear)
JavaScript Functions
<html><head></head><body><form><input type="button" name="print"value="Print This Page" onclick="window.print()"></form></body></html>
FSKM UiTM Pahang Page 11
Basic JavaScript
What is parse?
- Parsing is a process of reading the code in order to determine what the code is supposed to do (in other word, convert the input to numeric)
- Bear in mind, computer pass around the information in the form of strings
- We have:
- parseInt(): parsing the input into integer (e.g. 1, 2, 3, 100, 9000, etc)
- parseFloat(): parsing the into float (e.g. 1.2, 15.6, 104.9, etc)
Parsing User Input
var num0 = 1; // this is numericvar num1 = 5; // this is numericvar num2 = "5"; // this is stringvar total1 = num0 + num1; // total1 = 6var total2 = num0 + num2; // total2 = 15
FSKM UiTM Pahang Page 12
Basic JavaScript
Parsing
- Parsing the input after you captured it before proceed with calculation
Parsing User Input
var num0 = 1; // this is numeric
var num1 = prompt("Enter one number", ""); // num1 = 5num1 = parseInt(num1);var total0 = num0 + num1; // what is the output?
var num2 = prompt("Enter one number", ""); // num2 = 5.5num2 = parseFloat(num2);var total1 = num0 + num2; // what is the output?
var num3 = prompt("Enter one number", ""); // num3 = 10var total2 = num0 + num3; // what is the output?
FSKM UiTM Pahang Page 13
Basic JavaScript
Useful function to check numeric input using isNaN()
determines whether a value is an illegal number (Not-a-Number).
This function returns true if the value is NaN, and false if not.
Parsing User Input
var num = prompt("Enter one number", "");var num0 = parseInt(num);
if(isNaN(num0)){alert("num0: " + num0 + " is NOT a number");
}else{
alert("num0: " + num0 + " is a number");}
FSKM UiTM Pahang Page 14
Basic JavaScript
Remember this? Comparison operators
Logical Structures
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
FSKM UiTM Pahang Page 15
Basic JavaScript
Remember this? Logical operators
Logical Structures
Operator Description Example
&& and (x < 10 && y > 1) is true
|| or (x == 5 || y == 5) is false
! not !(x == y) is true
FSKM UiTM Pahang Page 16
Basic JavaScript
Your application may involves conditions
Example
- If gender=="male", he wears "baju melayu"
- If gender=="female", she wears "baju kurung"
JavaScript has logical structures (conditional statements), where you need to use operators on the previous two slides
- if…else statement
- switch() statement
Logical Structures
FSKM UiTM Pahang Page 17
Basic JavaScript
Simple examples
Logical Structures
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!");
}
FSKM UiTM Pahang Page 18
Basic JavaScript
if statement: execute some code if a specified condition is true
Logical Structures
if(condition){// execute the code if condition is true
}
if(place == "Jengka"){document.write("It is situated in Pahang");
}
if(university == "UiTM" && place == "Jengka"){document.write("It is situated in Pahang");
}
FSKM UiTM Pahang Page 19
Basic JavaScript
if statement: execute some code if a specified condition is true
Logical Structures
if(program == "AS110" || program == "CS110"){document.write("These are UiTM programs");
}
if(time >= 1 && time < 12){document.write("Good Morning!");
}
FSKM UiTM Pahang Page 20
Basic JavaScript
if…else statement: execute some code if a specified condition is true, and another code if the condition is false
Logical Structures
if(condition){// execute the code if condition is true
}else{
// execute the code if condition is false}
FSKM UiTM Pahang Page 21
Basic JavaScript
if…else statement: execute some code if a specified condition is true, and another code if the condition is false
Logical Structures
if(gender == "Male"){document.write("Go to Hall A");
}else{
document.write("Go to Hall B");}
FSKM UiTM Pahang Page 22
Basic JavaScript
if…else if…else statement: use this statement if you want to select one of many blocks of code to be executed
Logical Structures
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}
FSKM UiTM Pahang Page 23
Basic JavaScript
if…else if…else statement: use this statement if you want to select one of many blocks of code to be executed
Logical Structures
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");}
FSKM UiTM Pahang Page 24
Basic JavaScript
switch() statement: use this statement if you want to select one of many blocks of code to be executed
Logical Structures
switch(var){case 1: // execute code block 1break;
case 2: // execute code block 2break;
case 3: // execute code block 3break;
default: //execute code if var is different// from case 1, 2, 3
}
FSKM UiTM Pahang Page 25
Basic JavaScript
Logical Structures
switch(month){case 1: document.write("January");break;
case 2: document.write("February");break;
case 3: document.write("March");break;
case 4: document.write("April");break;
default: document.write("None of the above");}
FSKM UiTM Pahang Page 26
Basic JavaScript
Things you have to know:
-toFixed()
-toPrecision()
Formatting Number (new)
FSKM UiTM Pahang Page 27
Basic JavaScript
toFixed(x) - Formats any number for "x" number of trailing decimals. The number is rounded up, and "0"s are used after the decimal point if needed to create the desired decimal length.
provides x length AFTER the decimal point
Formatting Number (new)
<script type="text/javascript">var profits=2489.8237;profits.toFixed(3); //returns 2489.824 (round up)profits.toFixed(2); //returns 2489.82profits.toFixed(7); //returns 2489.8237000 (padding)</script>
FSKM UiTM Pahang Page 28
Basic JavaScript
toPrecision(x) - Formats any number so it is of "x" length. Also called significant digits. A decimal point and "0"s are used if needed to create the desired length.
provides x TOTAL LENGTH, under certain circumstances will return exponential notation
Formatting Number (new)
<script type="text/javascript">var anumber=123.45;anumber.toPrecision(6); //returns 123.450 (padding)anumber.toPrecision(4); //returns 123.5 (round up)anumber.toPrecision(2); /*returns 1.2e+2 you figure it out!)*/</script>
FSKM UiTM Pahang Page 29
Basic JavaScript
Create a complete HTML form with several input fields
Let say, the form looks like below
How to Process Inputs
<html><head></head><body><form name="form1">Name: <input type="text" name="fname"><input type="submit" name="submit" value="Submit"></form></body></html>
FSKM UiTM Pahang Page 30
Basic JavaScript
Okay, we 1 input field, which a text field, name fname, and a Submit button
Supposedly, if user click the Submit button, the value from fname will be processed
Before that, you have to create an event that will call a JavaScript function first
That event can be placed at the Submit button
How to Process Inputs
FSKM UiTM Pahang Page 31
Basic JavaScript
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 myFunction()
How to Process Inputs
<script type="text/javascript">function function_name(){
// your JavaScript code is here}</script>
FSKM UiTM Pahang Page 32
Basic JavaScript
Now, we create the JavaScript user-defined function first, which will be placed at <head>…</head> tag
To capture value or data from input field, we have to write this code
Now, place the code above in the myFunction(), where it would be like this
How to Process Inputs
var fname = document.{form_name}.{field_name}.value
var fname = document.form1.fname.value
FSKM UiTM Pahang Page 33
Basic JavaScript
Now, add onclick event on the Submit button to call myFunction()
How to Process Inputs
<script type="text/javascript">function myFunction(){
var fname = document.form1.fname.value;alert("Name: " + fname); // just to show the value
}</script>
<input type="submit" name="submit" value="Submit" onclick="myFunction()">
FSKM UiTM Pahang Page 34
Basic JavaScript
How to Process Inputs
<html><head><script type="text/javascript">function myFunction(){
var fname = document.form1.fname.value;alert("Name: " + fname);
}</script></head><body><form name="form1" method="post" action="">Name: <input type="text" name="fname"><input type="submit" name="submit" value="Submit" onclick="myFunction()"></form></body></html>
FSKM UiTM Pahang Page 35
Basic JavaScript
Things you have to know:
-chartAt()
-indexOf()
-split()
-substring()
String Handling & String Methods (new)
FSKM UiTM Pahang Page 36
Basic JavaScript
chartAt() - returns the character at the specified position
String Handling & String Methods (new)
<script type="text/javascript">var message = "CSC317 Internet Programming";alert(message.chartAt(4));</script>
FSKM UiTM Pahang Page 37
Basic JavaScript
indexOf() search whether a particular character or substring exists within a string
If no match is found, "-1" is returned
String Handling & String Methods (new)
<script type="text/javascript">var email = "[email protected]";if(email.indexOf("@") == -1)
alert("Invalid Email");
var sentence="Hi, my name is George!";if (sentence.indexOf("George") != -1)
alert("George is in there!");</script>
FSKM UiTM Pahang Page 38
Basic JavaScript
split() cuts up a string into pieces, using the delimiter as the point to cut off,
and stores the results into an array
String Handling & String Methods (new)
<script type="text/javascript">var message="Welcome to JavaScript";var word=message.split(" ");alert(word[0]);alert(word[1]);alert(word[2]);</script>
FSKM UiTM Pahang Page 39
Basic JavaScript
substring(from, to) returns the substring beginning with the "from" parameter (included as
part of the substring), and ending with "to" (NOT included as part of substring)
String Handling & String Methods (new)
<script type="text/javascript">var text="excellent";document.write(text.substring(0,4));document.write(text.substring(2,4));</script>
FSKM UiTM Pahang Page 40FSKM UiTM Pahang Page 40
Question?
FSKM UiTM Pahang Page 41FSKM UiTM Pahang Page 41
Knuckles (2001). Introduction to Interactive Programming on the Internet using HTML & Javascript. John Wiley & Sons, Inc.
http://www.w3schools.com/js/default.asp
Bibliography (Book)
Bibliography (Website)