1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Function Demonstrations</title>
6 <!--
7 File: cssdweb.edu/Student Resources/Website Development I/CodeSamples/FunctionDemonstrations.html
8 Copyright (c) 2022 by Jesse Heines. All rights reserved. May be freely
9 copied or excerpted for educational purposes with credit to the author.
10 updated by JMH on June 4, 2022 at 10:38 AM
11 -->
12 <script type="text/javascript">
13
14 // return the area of a circle given its radius
15 var CircleArea = function( radius ) {
16 var area = Math.PI * radius * radius ;
17 return area.toFixed( 5 ) ;
18 }
19
20 // return the area of a circle given its radius in one of three formats
21 var CircleArea2 = function( radius, format ) {
22 if ( typeof format == "undefined" ) {
23 format = 3 ;
24 }
25 var area = Math.PI * radius * radius ;
26 switch ( format ) {
27 case 1 : return Math.round( area ) ; break ;
28 case 2 : return area.toFixed( 5 ) ; break ;
29 case 3 :
30 return area.toLocaleString( "en-US", { minimumFractionDigits: 5 } ) ;
31 break ;
32 }
33 }
34
35 // return today's date in ISO8601 format (YYYY-MM-DD with leading 0s if necessary)
36 GetTodayISO8601_v1 = function() {
37 var now = new Date() ; // today's date as an object
38 var strNowISO8601 = "" ; // initialize this variable as a string
39
40 // set year
41 if ( now.getFullYear() < 1900 ) {
42 strNowISO8601 += ( now.getFullYear()+1900 ) ;
43 } else {
44 strNowISO8601 += now.getFullYear() ;
45 }
46
47 // set month
48 if ( now.getMonth()+1 < 10 ) {
49 strNowISO8601 += "-0" + ( now.getMonth()+1 ) ;
50 } else {
51 strNowISO8601 += "-" + ( now.getMonth()+1 );
52 }
53
54 // set day
55 if ( now.getDate()+1 < 10 ) {
56 strNowISO8601 += "-0" + ( now.getDate() ) ;
57 } else {
58 strNowISO8601 += "-" + ( now.getDate() ) ;
59 }
60
61 // return fully constructed string
62 return strNowISO8601 ;
63 }
64
65 // return today's date in ISO8601 format
66 GetTodayISO8601_v2 = function() {
67 var now = new Date() ; // today's date as an object
68
69 // modified per suggestion by student Nathan Gilbert on January 16, 2009 at 9:52 PM
70 var strNowISO8601 = "" +
71 ( now.getFullYear() < 1900 ? now.getFullYear()+1900 : now.getFullYear() ) ;
72 strNowISO8601 += "-" +
73 ( now.getMonth()+1 < 10 ? "0" + (now.getMonth()+1) : now.getMonth()+1 ) ;
74 strNowISO8601 += "-" +
75 ( now.getDate() < 10 ? "0" + now.getDate() : now.getDate() ) ;
76
77 return strNowISO8601 ;
78 }
79
80 </script>
81
82 <style>
83 table.CircleAreas tr td:nth-child(1) {
84 text-align : center ;
85 }
86 table.CircleAreas tr td:nth-child(2) {
87 text-align : right ;
88 }
89 </style>
90 </head>
91
92 <body>
93 <h3>Calling Function CircleArea( n )</h3>
94 <table class="CircleAreas" cellspacing="0" cellpadding="5" border="1">
95 <tr>
96 <th colspan="2">Circle Areas</th>
97 </tr>
98 <tr>
99 <th>Radius</th>
100 <th>Area</th>
101 </tr>
102 <tr>
103 <td>1</td>
104 <td>
105 <script>
106 document.writeln( CircleArea( 1 ) ) ;
107 </script>
108 </td>
109 </tr>
110 <tr>
111 <td>2</td>
112 <td>
113 <script>
114 document.writeln( CircleArea( 2 ) ) ;
115 </script>
116 </td>
117 </tr>
118 <tr>
119 <td>4</td>
120 <td>
121 <script>
122 document.writeln( CircleArea( 4 ) ) ;
123 </script>
124 </td>
125 </tr>
126 <tr>
127 <td>8</td>
128 <td>
129 <script>
130 document.writeln( CircleArea( 8 ) ) ;
131 </script>
132 </td>
133 </tr>
134 <tr>
135 <td>16</td>
136 <td>
137 <script>
138 document.writeln( CircleArea( 16 ) ) ;
139 </script>
140 </td>
141 </tr>
142 <tr>
143 <td>34</td>
144 <td>
145 <script>
146 document.writeln( CircleArea( 32 ) ) ;
147 </script>
148 </td>
149 </tr>
150 <tr>
151 <td>64</td>
152 <td>
153 <script>
154 document.writeln( CircleArea( 64 ) ) ;
155 </script>
156 </td>
157 </tr>
158 </table>
159
160 <br><hr>
161
162 <h3>Using a Loop Within the Table</h3>
163 <table class="CircleAreas" cellspacing="0" cellpadding="5" border="1">
164 <tr>
165 <th colspan="2">Circle Areas</th>
166 </tr>
167 <tr>
168 <th>Radius</th>
169 <th>Area</th>
170 </tr>
171 <script>
172 var radius = 1 ;
173 for ( var k = 1 ; k <= 7 ; k++ ) {
174 document.writeln( "<tr>" ) ;
175 document.writeln( "<td>" + radius + "</td>" ) ;
176 document.writeln( "<td>" + CircleArea2( radius, 2 ) + "</td>" ) ;
177 document.writeln( "</tr>" ) ;
178 radius = radius * 2 ;
179 }
180 </script>
181 </table>
182
183 <br><hr>
184
185 <h3>Functions to Return the Date in ISO8601 Format</h3>
186 <p>Call to function <code><strong>GetTodayISO8601_v1()</strong></code> returns:</p>
187 <blockquote>
188 <script>
189 document.writeln( GetTodayISO8601_v1() ) ;
190 </script>
191 </blockquote>
192 <p>Call to function <code><strong>GetTodayISO8601_v2()</strong></code> returns:</p>
193 <blockquote>
194 <script>
195 document.writeln( GetTodayISO8601_v2() ) ;
196 </script>
197 </blockquote>
198 </body>
199 </html>