1 / 26

Introduction to JavaScript Arrays and Mathematical Functions in Web Development

This document outlines the fundamentals of JavaScript arrays and mathematical functions essential for dynamic web application development. It introduces the concept of arrays for temporary data storage, detailing how to declare and manipulate them effectively. Additionally, it covers the JavaScript Math object and its functions for performing various mathematical tasks, including generating random numbers and calculating maximum and minimum values. This serves as a foundational guide for students of CSC317 and CSC318 courses at the Faculty of Computer and Mathematical Sciences.

curt
Télécharger la présentation

Introduction to JavaScript Arrays and Mathematical Functions in Web 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