CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: SITI NURBAYA ISMAIL FACULTY of COMPUTER and MATHEMATICAL SCIENCES
Outline Introduction to Client-Side Scripting JavaScript Function Output Operations Operators, Expressions, and Evaluation (example) Page 2
Basic JavaScript JavaScript Functions: alert() alert() function (Throw|Display) a warning message to user <html> <head> <script language=“javascript"> alert("Hello IE"); </script> </head> <body> </body> </html> Page 3
Basic JavaScript JavaScript Functions: prompt() prompt() function It can be used to capture user input <html> <head> <script type="text/javascript"> var name = prompt(″What is your name?″, ″″); alert(″Hi dear ″ + name); </script> </head> <body> </body> </html> Page 4
Basic JavaScript JavaScript Functions: confirm() confirm() function (Throw|Display) a message with two choices (OK & Cancel) to user Often used to confirm an important action Page 5
Basic JavaScript JavaScript Functions: confirm() <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" value="Delete" onclick="confirmation()"> </form> </body> Page 6 6
Basic JavaScript JavaScript Functions: confirm() OK Cancel Page 7
Basic JavaScript JavaScript Functions: window.print() window.print() function Will print current web page (print window will appear) <input type=″button″ name=″print″ value=″Print This Page″ onclick=″window.print()″> Page 8
Basic JavaScript JavaScript Functions To keep the browser from executing a script when the page loads, you can put your script into a function. A function contains code that will be executed by an event or by a call to the function. You may call a function from anywhere within a page (or even from other pages if the function is embedded in an external .js file). Functions can be defined both in the <head> and in the <body> section of a document. However, to assure that a function is read/loaded by the browser before it is called, it could be wise to put functions in the <head> section. Page 9
Basic JavaScript JavaScript Functions Defining Function Example function functionname(){ code to be execute } <html> <head> <script type="text/javascript"> function myFunction(){ alert(“Hello World!”); } </script> </head> <body> <form> <input type="button" name="button" value="Click Me!" onclick="myFunction()"> </form> </body> </html> Example function helloWorld(){ alert("Hello World!"); } Page 10
Basic JavaScript JavaScript Functions 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 11
Basic JavaScript Parsing User Input 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) var num0 = 1; // this is numeric var num1 = 5; // this is numeric var num2 = “5”; // this is string var total1 = num0 + num1; // total1 = 6 var total2 = num0 + num2; // total2 = 15 Page 12
Basic JavaScript Parsing User Input Parsing the input after you captured it before proceed with calculation var num0 = 1; // this is numeric var num1 = prompt(“Enter one number”, “”); // num1 = 5 num1 = parseInt(num1); var total0 = num0 + num1; // what is the output? var num2 = prompt(“Enter one number”, “”); // num2 = 5.5 num2 = parseFloat(num2); var total1 = num0 + num2; // what is the output? var num3 = prompt(“Enter one number”, “”); // num3 = 10 var total2 = num0 + num3; // what is the output? Page 13
Basic JavaScript Parsing User Input Useful function to check numeric input using isNaN() var num0 = prompt(“Enter one number”, “”); if(isNaN(num0)){ alert(“num0: “ + num0 + “ is a number”); } else{ alert(“num0: “ + num0 + “ is NOT a number”); Page 14
Introduction to Client-Side Scripting Question 1 Given three variables: a=5, b=7, c=9, write a JavaScript coding to calculate the following value: c minus a b modulus 2 sum of a, b & c average of a, b & c Output each of the value in different line within your browser. Your output may look like Figure 1. Figure 1 Page 15
Introduction to Client-Side Scripting Question 2 Write a program to calculate area of cylinder with the given formula. Declare variables s, p, r & h. Output the area of cylinder in bold text within your browser. Your output may look like Figure 2. Example Calculation Area of cylinder: Surface = 2p radius x height S = 2prh + 2pr2 p=3.14 r =5 h=7 Figure 2 Page 16
Introduction to Client-Side Scripting Question 3 You are required to create sample program that able to perform Add and Division operation using JavaScript. Your program should have the following form elements: One text field named num1 One text field named num2 Two buttons that contains value + and * One button reset to reset the form One textarea for the results of the operation Next, write JavaScript code that will perform required operations. Your output may look like Figure 3. Figure 3 Page 17
Introduction to Client-Side Scripting Question 4 You are required to write a program that able to calculate BMI value. Read and follow the instruction carefully. Please write HTML codes below that contains: 1 text field for height 1 text field for weight 1 text area to display BMI value 1 button to trigger JavaScript event using onclick Using JavaScript codes, retrieve height and weight values from HTML form. Next, proceed with BMI calculation and determine the BMI value. Display the BMI value with 2 points and sentences as display in Figure 4. Page 18
Introduction to Client-Side Scripting Question 4 BMI formula: BMI = ____weight_____ (height x height) Your program may look like Figure 4. Figure 4 Page 19
Introduction to Client-Side Scripting Question 5 You are required to create sample program that able to perform Add, Minus, Multiply and Division operation using JavaScript. Your program should have following form elements: One text field named num1 One text field named num2 One drop down list named operator that contains Add, Minus, Multiply and Division options One text field named result to display the result One button Next, write JavaScript code that will perform required operations. Your output may look like Figure 5 Figure 5 Page 20
Question? Page 21 21
Bibliography (Website) Bibliography (Book) Knuckles (2001). Introduction to Interactive Programming on the Internet using HTML & Javascript. John Wiley & Sons, Inc. http://www.w3schools.com/js/default.asp http://www.sitinur151.wordpress.com Bibliography (Website) Page 22 Page 22 22