1 / 29

CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT

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. Javascript Array. Array. What is an array?

zarita
Télécharger la présentation

CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSC317 – INTERNET PROGRAMMINGCSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: SITI NURBAYA ISMAIL FACULTY of COMPUTER and MATHEMATICAL SCIENCES

  2. Outline Form Enhancement • Javascript Array • Mathematical Functions Page 2

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

  4. Javascript Array Array • How to declare an array? varfav = new Array(); fav[0] = "cake"; fav[1] = "choco"; fav[2] = "mudpie"; varfav = new Array("cake","choco","mudpie"); varfav = ["cake","choco","mudpie"]; Page 4

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

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

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

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

  9. 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("<br><br>"); document.write("Max is: " + Math.max(14, 7)); document.write("<br><br>"); document.write("Min is: " + Math.min(14, 7)); document.write("<br><br>"); document.write("10<sup>10</sup>: " + Math.pow(10, 2)); </script> </body> </html> Page 9

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

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

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

  13. 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()

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

  15. 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: output var str = "HELLO WORLD";var n = str.charAt(2); document.write(n); L Page 15

  16. Exercise 1 Page 16

  17. Exercise 2 Page 17

  18. Exercise 3 Page 18

  19. Exercise 4 Page 19

  20. Exercise 5 Page 20

  21. Exercise 6 Page 21

  22. Exercise 7 Page 22

  23. Exercise 8 Page 23

  24. Exercise 9 Page 24

  25. Exercise 10 Page 25

  26. Exercise 11 Page 26

  27. Exercise 12 Page 27

  28. Exercise 12 (continue) Page 28

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

More Related