BY: SITI NURBAYA ISMAIL FACULTY of COMPUTER and MATHEMATICAL SCIENCES CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: SITI NURBAYA ISMAIL FACULTY of COMPUTER and MATHEMATICAL SCIENCES
Outline Form Enhancement Javascript Array Mathematical Functions Page 2
Javascript Array Array What is an array? Temporary (storage|memory) of similar data Has 1 variable Store a group of data Text Numbers images Page 3
Javascript Array Array How to declare an array? var fav = new Array(); fav[0] = "cake"; fav[1] = "choco"; fav[2] = "mudpie"; var fav = new Array("cake","choco","mudpie"); var fav = ["cake","choco","mudpie"]; Page 4
Javascript Array Array Example 1 <script type="text/javascript"> // declare an array var biscuit = new Array(); // assign values on biscuit_name array biscuit[0] = "Almond Landon"; biscuit[1] = "Butter Finger"; biscuit[2] = "Snow Cornflakes"; biscuit[3] = "Tart Nenas"; // output value of biscuit_name array document.write(biscuit[2]); </script> Page 5
Javascript Array Array Example 2 <script type="text/javascript"> // declare an array var biscuit = new Array(); // assign values on biscuit array biscuit[0] = "Almond Landon"; biscuit[1] = "Butter Finger"; biscuit[2] = "Snow Cornflakes"; biscuit[3] = "Tart Nenas"; // output values of biscuit array for (x in biscuit){ document.write(biscuit[x] + "<br>"); } </script> Page 6
Javascript Array Array Example 3 <script type="text/javascript"> // declare an array var biscuit = new Array(); // assign values on biscuit array biscuit[0] = "Almond Landon"; biscuit[1] = "Butter Finger"; biscuit[2] = "Snow Cornflakes"; biscuit[3] = "Tart Nenas"; // output values of biscuit array for (i=0;i<=4;i++){ document.write(biscuit[i] + "<br>"); } </script> Page 7
Form Enhancement Performing Calculations Javascript Math Object The Math object allows you to perform mathematical tasks. JavaScript provides mathematical functions. Some of them are: random() : return a random number between 0 and 1 round() : round a number to the nearest integer max(x, y) : return larger number between x and y min(y, y) : return smaller number between x and y pow(x, y) : return xy To use all the functions, it must starts with Math.mathematical_functions Example: Math.pow(2,2) http://www.javascriptkit.com/jsref/math.shtml Page 8
Form Enhancement Performing Calculations <html> <body> <script type="text/javascript"> document.write(Math.random()); document.write("<br><br>"); document.write(Math.round(45.2)); document.write("Max is: " + Math.max(14, 7)); document.write("Min is: " + Math.min(14, 7)); document.write("10<sup>10</sup>: " + Math.pow(10, 2)); </script> </body> </html> Page 9
Form Enhancement Javascript Date Object Date objects are created with the new Date() Once a Date object is created, a number of methods allow you to operate on it. Most methods simply allow you to get and set the year, month, day, hour, minute, second, and millisecond fields of the object, using either local time or UTC (universal, or GMT) time.
Form Enhancement Javascript Date Object new Date() With no arguments, the Date( ) constructor creates a Date object set to the current date and time. new Date(milliseconds) When one numeric argument is passed, it is taken as the internal numeric representation of the date in milliseconds, as returned by the getTime( ) method. For example, passing the argument 5000 creates a date that represents five seconds past midnight on 1/1/70. new Date(datestring) When one string argument is passed, it is a string representation of a date, in the format accepted by the Date.parse( ) method.
Form Enhancement Javascript Date Object new Date(year,month,date[,hour,minute,second,millisecond ]): year : Integer value representing the year. For compatibility (in order to avoid the Y2K problem), you should always specify the year in full; use 1998, rather than 98. month : Integer value representing the month, beginning with 0 for January to 11 for December. date : Integer value representing the day of the month. hour : Integer value representing the hour of the day (24-hour scale). minute : Integer value representing the minute segment of a time reading. second : Integer value representing the second segment of a time reading. millisecond : Integer value representing the millisecond segment of a time reading.
Form Enhancement Getter Methods All access to date/time components is carried out through methods. getFullYear() Get 4-digit year getMonth() Get month, from 0 to 11 getDay() Get the number of day in a week, from 0(Sunday) to 6(Saturday) getDate() Get day, from 1 to 31 getDay() getHours() getMinutes() getSeconds() getMilliseconds()
Form Enhancement Javascript Date Object Example 1 Use getDay() and an array to write a weekday, and not just a number as shown in the following example: Today is Tuesday Example 2 Display the current date using the date object in the format of DD/MM/YYYY as shown in the following example: Today date is 28/01/2014 Example 3 Display the current time using the date object in the format of HH:MM AM/PM (H = Hour, M = Minute as shown in the following example: It is now 15.30 PM
Form Enhancement Javascript String Object The String object is used to manipulate a stored piece of text. Some of them are: charAt() : returns the character at the spesific index concat() : joins two or more string, and return a copy of the joined string split() : splits a string into an array of substrings substring(): extracts the characters from a string, between two specified indices join() : join the elements of an array into a string Example: var str = "HELLO WORLD"; var n = str.charAt(2); document.write(n); output L Page 15
Exercise 1 Page 16
Exercise 2 Page 17
Exercise 3 Page 18
Exercise 4 Page 19
Exercise 5 Page 20
Exercise 6 Page 21
Exercise 7 Page 22
Exercise 8 Page 23
Exercise 9 Page 24
Exercise 10 Page 25
Exercise 11 Page 26
Exercise 12 Page 27
Exercise 12 (continue) Page 28
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.javascriptkit.com/jsref/math.shtml http://www.w3schools.com/jsref/jsref_obj_string.asp Bibliography (Website) Page 29 29