1 / 26

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?

curt
Download Presentation

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. Javascript Array Array • Example 4 <script type="text/javascript"> <!-- function pic01(){ document.images[0].src="pic1.jpg"; } function pic02(){ document.images[0].src="pic2.png"; } function pic03(){ document.images[0].src="pic3.jpg"; } function pic04(){ document.images[0].src="pic4.jpg"; } //--> </script> Page 8

  9. Javascript Array Array • Example 4 (continue) <body> <img src="pic1.jpg" alt="image"> <form name=“form1"> <input type="button" onClick="pic01()" value="Ultraman 1" > <input type="button" onClick="pic02()" value="Ultraman 2" > <input type="button" onClick="pic03()" value="Ultraman 3" > <input type="button" onClick="pic04()" value="Ultraman 4" > </form> </body> Page 9

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

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

  12. 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) L Page 12

  13. Exercise 1 Page 13

  14. Exercise 2 Page 14

  15. Exercise 3 Page 15

  16. Exercise 4 Page 16

  17. Exercise 5 Page 17

  18. Exercise 6 Page 18

  19. Exercise 7 Page 19

  20. Exercise 8 Page 20

  21. Exercise 9 Page 21

  22. Exercise 10 Page 22

  23. Exercise 11 Page 23

  24. Exercise 12 Page 24

  25. Exercise 12 (continue) Page 25

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

More Related