CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT
description
Transcript of CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT
CSC317 – INTERNET PROGRAMMINGCSC318 – DYNAMIC WEB APPLICATION DEVELOPMENTBY: SITI NURBAYA ISMAILFACULTY of COMPUTER and MATHEMATICAL SCIENCES
Page 2
Outline
For Loop While Loop Do While Loop User-defined Function Error Checking Working with Web Pages Properties
Basic JavaScript
Page 3
Basic JavaScript
Execute the same block of code according specified times
for Loop
for(var = startValue; var <= endValue; var = var + increment){// execute the block code until var = endValue
}
var x;for(x = 0; x <= 10; x++){
document.write(“Number: ” + x + “<br>”);}
Page 4
Basic JavaScript
Another example on for loop
for Loop
var x;var msg = “I promise I won’t be disturb people again.”;for(x = 1; x <= 1000; x++){
document.write(msg + “<br>”);}
Page 5
Basic JavaScript
Execute the same block of code while a specific condition is true
while Loop
while(var <= endValue){// execute the code
}
var x = 0;while(x <= 10){
document.write(“Number: ” + x + “<br>”);x++; // x = x + 1
}
Page 6
Basic JavaScript
Another example on while loop
while Loop
var month_name, month = 1;while(month <= 3){
if(month == 1){month_name = “January”;
}else if(month == 2){
month_name = “February”;}else if(month == 3){
month_name = “March”;}else{
alert(“Please select month!”);}month = month + 1;
}
Page 7
Basic JavaScript
Execute the block of code at least once even the condition is false, because the code will be executed first before condition is tested. It will repeat the loop as long as the specified condition is true.
do...while Loop
var x = 0;do{
document.write(“Number is: ” + x + “<br>”);x = x + 1;
}while(x < 0)
do{// execute the code
}while(var <= endValue)
Basic JavaScript
Write a JavaScript code that will generate similar output in Figure 1. Please use for loop.
Page 8
Question 1: for Loop
Figure 1
Basic JavaScript
Write a JavaScript code that will generate similar output in Figure 2. Please use for loop.
Page 9
Question 2: for Loop
Figure 2
*calculate the value within your loop
Page 10
Basic JavaScript
A function created by user to perform specific task
User-defined Function
<html><head><script type="text/javascript">function myFunction(){
var msg = "Hello World!";return (msg);
}</script></head><body><script type="text/javascript">document.write(myFunction());</script></body></html>
Page 11
Basic JavaScriptUser-defined Function
<script language="javascript“>function kira(){ var num1=parseFloat(document.f1.num1.value); var num2=parseFloat(document.f1.num2.value); var operator=document.f1.operator.value; var sum;
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>
function xx(){}
Page 12
Basic JavaScriptUser-defined Function
return Statement The return statement is
used to specify the value that is returned from the function.
So, functions that are going to return a value must use the return statement.
The example below returns the product of two numbers (a and b):
Example
<html><head><script type="text/javascript">function product(a,b){return a*b;}</script></head><body><script type="text/javascript">document.write(product(4,3));</script></body></html>
Page 13
Basic JavaScript
Remember this example?
Error Checking
<html><head><script type="text/javascript">function myFunction(){
var fname = document.form1.fname.value;alert("Name: " + fname);
}</script></head><body><form name="form1">Name: <input type="text" name="fname"><input type="submit" name="submit" value="Submit" onclick="myFunction()"></form></body></html>
Page 14
Basic JavaScript
myFunction() 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 myFunction() accept the value without need to do error checking?
What will happen if user does not enter any value? The field leave blank
Error Checking
<script type="text/javascript">function myFunction(){
var fname = document.form1.fname.value;alert("Name: " + fname);
}</script>
Page 15
Basic JavaScriptError Checking
<script type="text/javascript">function myFunction(){
var fname = document.form1.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>
Page 16
Basic JavaScript
fname = ″″ and fname = null are two different statements fname = ″″ : check if the value is empty fname = null : check if the value is null (undefined or unknown)
Error Checking
Basic JavaScript
Write a JavaScript code that will generate similar output in Figure 3. • Within your form
• A text field for user input• A button to trigger a function
• to check the input as numeric input• to generate times calculation based on the input• the calculation will start from 1 until 12.• output a list of the times calculation
(you can used two for loop in your coding)• A button to reset the value
Page 17
Question 3: for Loop
Page 18
Basic JavaScript
Write a JavaScript code that will generate similar output in Figure 43. • Within your form
• A text field for user input• set maximum length of user input as 2 value
• A button to trigger a function • to check the input as numeric input• to check the input either odd or even• output a list of different odd and even number .
(you can used two for loop in your coding)• A button to reset the value
Page 19
Question 4: for Loop
Basic JavaScript
Page 20
Question 3: for Loop
Figure 3
Page 21
Basic JavaScript
May be you are not realized that you have used Web Pages properties (or Document properties) a few times
Example:- document.write(): to display information on the web page
We have others like:- document.bgColor- document.fgColor- document.lastModified
Working with Web Pages Properties
Page 22
<html><head><title>document.bgcolor</title></head>
<body bgcolor="beige" text= "black" link="darkblue" vlink="honeydew">
<script language="javascript">
document.write("the background color is "+document.bgcolor+"<br>");
</script>
</body>
</html>
Basic JavaScriptWorking with Web Pages Propertiesdocument.bgColor
<html>
<head><script language="JavaScript"> function changeBG(color) { document.bgColor=color; //Change background color document.f1.color.value=color; //Display the color }</script></head>
<body>
<form name="f1"> <input type="button" value="OceanBlue" name="Yellow" onClick="changeBG('#94FFFF')"> <input type="button" value="LimeGreen" name="Green" onClick="changeBG('#B8FF94')"> <input type="text" name="color"></form>
</body></html>
Basic JavaScriptWorking with Web Pages Propertiesdocument.bgColor
<html><head><title>document.fgcolor</title></head>
<body bgcolor="beige" text="red" link="darkblue" vlink="honeydew">
<script language="javascript">
document.write("the text color is "+document.fgcolor+"<br>");
</script>
</body>
</html>
Basic JavaScriptWorking with Web Pages Propertiesdocument.fgColor
<html><head><title>document.lastModified</title></head>
<body>
This document was last modified on:
<script type="text/javascript">
document.write(document.lastModified);
</script>
</body>
</html>
Basic JavaScriptWorking with Web Pages Propertiesdocument.lastModified
Page 26
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)