CSC318 – WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY 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 <!-- Your script code //--> alert("Hello IE"); Hi

FSKM UiTM Pahang  Page 4 Basic JavaScript  Recall back…JavaScript Variables -How to declare variables in JavaScript? Basic JavaScript // variables declaration in JavaScript var x, y, z; var name, age, address; // set value to variables X = 5; y = 12; z = 1.5; name = "Ali"; // this variable has string type value age = 25; // this variable has numeric type value address = "Klang, Selangor";

FSKM UiTM Pahang  Page 5 Basic JavaScript  alert() function -(Throw|Display) a warning message to user JavaScript Functions alert("Hello IE");

FSKM UiTM Pahang  Page 6 Basic JavaScript  prompt() function -It can be used to capture user input JavaScript Functions var name = prompt("What is your name?", ""); alert("Hi " + name);

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 8 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"); }

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 <input type="button" name="print" value="Print This Page" onclick="window.print()">

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

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

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 OperatorDescriptionExample == is equal tox == 8 is false === is exactly equal to (value and type)x === 5 is true x === "5" is false != is not equal tox != 8 is true > is greater thanx > 8 is false < is less thanx < 8 is true <= is less than or equal tox <= 8 is true >= is greater than or equal tox >= 8 is false

FSKM UiTM Pahang  Page 15 Basic JavaScript  Remember this? Logical operators Logical Structures OperatorDescriptionExample && and (x 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 1 break; case 2: // execute code block 2 break; case 3: // execute code block 3 break; 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) var profits= ; profits.toFixed(3); //returns (round up) profits.toFixed(2); //returns profits.toFixed(7); //returns (padding)

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) var anumber=123.45; anumber.toPrecision(6); //returns (padding) anumber.toPrecision(4); //returns (round up) anumber.toPrecision(2); /*returns 1.2e+2 you figure it out!)*/

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

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 … 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 function function_name(){ // your JavaScript code is here }

FSKM UiTM Pahang  Page 32 Basic JavaScript  Now, we create the JavaScript user-defined function first, which will be placed at … 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 function myFunction(){ var fname = document.form1.fname.value; alert("Name: " + fname); // just to show the value } <input type="submit" name="submit" value="Submit" onclick="myFunction()">

FSKM UiTM Pahang  Page 34 Basic JavaScript How to Process Inputs function myFunction(){ var fname = document.form1.fname.value; alert("Name: " + fname); } Name:

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) var message = "CSC317 Internet Programming"; alert(message.chartAt(4));

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) var = == -1) alert("Invalid "); var sentence="Hi, my name is George!"; if (sentence.indexOf("George") != -1) alert("George is in there!");

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) var message="Welcome to JavaScript"; var word=message.split(" "); alert(word[0]); alert(word[1]); alert(word[2]);

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) var text="excellent"; document.write(text.substring(0,4)); document.write(text.substring(2,4));

FSKM UiTM Pahang  Page 40 Question?

FSKM UiTM Pahang  Page 41  Knuckles (2001). Introduction to Interactive Programming on the Internet using HTML & Javascript. John Wiley & Sons, Inc.  Bibliography (Book) Bibliography (Website)