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/
8 FunctionDemonstrations_v2.html
9 Copyright (c) 2022-2023 by Jesse Heines. All rights reserved. May be freely
10 copied or excerpted for educational purposes with credit to the author.
11 updated by JMH on May 26, 2023 at 3:27 PM
12 -->
13 <style>
14 input[type="radio"] {
15 margin-left: 1em ;
16 }
17 </style>
18
19 <script type="text/javascript">
20
21 // get the format number for second table if supplied
22 var strQuery = window.location.search ;
23 var urlParams = new URLSearchParams( strQuery ) ;
24 // Note that URLSearchParams is a special type of function called a constructor.
25 // It takes the query string as its argument and constructs an object from which
26 // we can extract the values by their names.
27 var strFormatNumber = urlParams.get( "format" ) ;
28 // Note that the .get function always returns a string, not a number.
29 // console.log( strFormatNumber ) ;
30 // console.log( typeof strFormatNumber == "undefined" ) ;
31 // console.log( strFormatNumber == null ) ;
32 // console.log( strFormatNumber === null ) ;
33
34 // set the default format number if one is not specified as a parameter
35 if ( strFormatNumber == null ) {
36 strFormatNumber = 0 ;
37 }
38
39 // reload the current page with the selected format number as a parameter
40 var ReloadWithFormat = function( nFormat ) {
41 window.location = window.location.pathname + "?format=" + nFormat ;
42 } ;
43
44 // indicate which radio button was selected
45 var SelectFormatRadioButton = function( nFormat ) {
46 // console.log( typeof nFormat ) ;
47 switch ( nFormat ) {
48 case 0 :
49 document.getElementById( "zero" ).checked = true ; break ;
50 case 1 :
51 document.getElementById( "one" ).checked = true ; break ;
52 case 2 :
53 document.getElementById( "two" ).checked = true ; break ;
54 case 3 :
55 document.getElementById( "three" ).checked = true ; break ;
56 }
57 }
58
59 // return the area of a circle given its radius
60 var CircleArea = function( radius ) {
61 var area = Math.PI * radius * radius ;
62 return area.toFixed( 5 ) ;
63 }
64
65 // return the area of a circle given its radius in one of three formats
66 var CircleArea2 = function( radius, nFormat ) {
67 if ( typeof nFormat == "undefined" ) {
68 nFormat = 2 ;
69 }
70 var area = Math.PI * radius * radius ;
71 switch ( nFormat ) {
72 case 0 : return area ; break ;
73 case 1 : return Math.round( area ) ; break ;
74 case 2 : return area.toFixed( 5 ) ; break ;
75 case 3 :
76 return area.toLocaleString( "en-US", { minimumFractionDigits: 5 } ) ;
77 break ;
78 }
79 }
80
81 // return today's date in ISO8601 format (YYYY-MM-DD with leading 0s if necessary)
82 GetTodayISO8601_v1 = function() {
83 var now = new Date() ; // today's date as an object
84 var strNowISO8601 = "" ; // initialize this variable as a string
85
86 // set year
87 if ( now.getFullYear() < 1900 ) {
88 strNowISO8601 += ( now.getFullYear()+1900 ) ;
89 } else {
90 strNowISO8601 += now.getFullYear() ;
91 }
92
93 // set month
94 if ( now.getMonth()+1 < 10 ) {
95 strNowISO8601 += "-0" + ( now.getMonth()+1 ) ;
96 } else {
97 strNowISO8601 += "-" + ( now.getMonth()+1 );
98 }
99
100 // set day
101 if ( now.getDate()+1 < 10 ) {
102 strNowISO8601 += "-0" + ( now.getDate() ) ;
103 } else {
104 strNowISO8601 += "-" + ( now.getDate() ) ;
105 }
106
107 // return fully constructed string
108 return strNowISO8601 ;
109 }
110
111 // return today's date in ISO8601 format
112 GetTodayISO8601_v2 = function() {
113 var now = new Date() ; // today's date as an object
114
115 // modified per suggestion by student Nathan Gilbert on January 16, 2009 at 9:52 PM
116 var strNowISO8601 = "" +
117 ( now.getFullYear() < 1900 ? now.getFullYear()+1900 : now.getFullYear() ) ;
118 strNowISO8601 += "-" +
119 ( now.getMonth()+1 < 10 ? "0" + (now.getMonth()+1) : now.getMonth()+1 ) ;
120 strNowISO8601 += "-" +
121 ( now.getDate() < 10 ? "0" + now.getDate() : now.getDate() ) ;
122
123 return strNowISO8601 ;
124 }
125
126 // return today's date in ISO8601 format
127 GetTodayISO8601_v3 = function() {
128 var now = new Date() ; // today's date as an object
129
130 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/
131 // Global_Objects/Date/toISOString
132 var strNowISO8601 = now.toISOString() ;
133
134 return strNowISO8601 ;
135 }
136
137 // return today's date in ISO8601 format
138 GetTodayISO8601_v4 = function() {
139 var now = new Date() ; // today's date as an object
140
141 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/
142 // Global_Objects/Date/toISOString
143 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/
144 // Global_Objects/String/substring
145 var strNowISO8601 = now.toISOString().substring( 0, 10 ) ;
146
147 return strNowISO8601 ;
148 }
149 </script>
150
151 <style>
152 table.CircleAreas tr td:nth-child(1) {
153 text-align : center ;
154 }
155 table.CircleAreas tr td:nth-child(2) {
156 text-align : right ;
157 }
158 </style>
159 </head>
160
161 <body onload="SelectFormatRadioButton( nFormat ) ;">
162 <h3>Calling Function CircleArea( n )</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 <tr>
172 <td>1</td>
173 <td>
174 <script>
175 document.writeln( CircleArea( 1 ) ) ;
176 </script>
177 </td>
178 </tr>
179 <tr>
180 <td>2</td>
181 <td>
182 <script>
183 document.writeln( CircleArea( 2 ) ) ;
184 </script>
185 </td>
186 </tr>
187 <tr>
188 <td>4</td>
189 <td>
190 <script>
191 document.writeln( CircleArea( 4 ) ) ;
192 </script>
193 </td>
194 </tr>
195 <tr>
196 <td>8</td>
197 <td>
198 <script>
199 document.writeln( CircleArea( 8 ) ) ;
200 </script>
201 </td>
202 </tr>
203 <tr>
204 <td>16</td>
205 <td>
206 <script>
207 document.writeln( CircleArea( 16 ) ) ;
208 </script>
209 </td>
210 </tr>
211 <tr>
212 <td>34</td>
213 <td>
214 <script>
215 document.writeln( CircleArea( 32 ) ) ;
216 </script>
217 </td>
218 </tr>
219 <tr>
220 <td>64</td>
221 <td>
222 <script>
223 document.writeln( CircleArea( 64 ) ) ;
224 </script>
225 </td>
226 </tr>
227 </table>
228
229 <br><hr>
230
231 <h3>Using a Loop Within the Table</h3>
232 <!-- format selection table -->
233 <table cellspacing="0" cellpadding="0" border="0" style="margin-bottom: 1em">
234 <tr>
235 <td><em>Format:</em></td>
236 <td><input type="radio" id="zero" onclick="ReloadWithFormat( 0 );">
237 <label for="zerp">no format</label></td>
238 </tr>
239 <tr>
240 <td></td>
241 <td><input type="radio" id="one" onclick="ReloadWithFormat( 1 );">
242 <label for="one">rounded to an integer</label></td>
243 </tr>
244 <tr>
245 <td></td>
246 <td><input type="radio" id="two" onclick="ReloadWithFormat( 2 );">
247 <label for="two">to 5 decimal places</label></td>
248 </tr>
249 <tr>
250 <td></td>
251 <td><input type="radio" id="three" onclick="ReloadWithFormat( 3 );">
252 <label for="three">to 5 decimal places with commas in integer part</label></td>
253 </tr>
254 </table>
255
256 <!-- results output table -->
257 <table class="CircleAreas" cellspacing="0" cellpadding="5" border="1">
258 <tr>
259 <th colspan="2">Circle Areas</th>
260 </tr>
261 <tr>
262 <th>Radius</th>
263 <th>Area</th>
264 </tr>
265 <script>
266 var radius = 1 ; // initial circle radius
267 var nFormat ; // variable declaration without an initial value
268 // console.log( strFormatNumber ) ;
269 if ( strFormatNumber == null ) {
270 nFormat = 0 ; // default format number
271 } else {
272 nFormat = parseInt( strFormatNumber ) ; // format option read from URL
273 }
274 for ( var k = 1 ; k <= 7 ; k++ ) {
275 document.writeln( "<tr>" ) ;
276 document.writeln( "<td>" + radius + "</td>" ) ;
277 document.writeln( "<td>" + CircleArea2( radius, nFormat ) + "</td>" ) ;
278 document.writeln( "</tr>" ) ;
279 radius = radius * 2 ;
280 }
281 </script>
282 </table>
283
284 <br><hr>
285
286 <h3>Functions to Return Today’s Date in ISO8601 Format</h3>
287 <p>Call to function <code><strong>GetTodayISO8601_v1()</strong></code> returns:</p>
288 <blockquote>
289 <script>
290 document.writeln( GetTodayISO8601_v1() ) ;
291 </script>
292 </blockquote>
293 <p>Call to function <code><strong>GetTodayISO8601_v2()</strong></code> returns:</p>
294 <blockquote>
295 <script>
296 document.writeln( GetTodayISO8601_v2() ) ;
297 </script>
298 </blockquote>
299 <p>Call to function <code><strong>GetTodayISO8601_v3()</strong></code> returns:</p>
300 <blockquote>
301 <script>
302 document.writeln( GetTodayISO8601_v3() ) ;
303 </script>
304 </blockquote>
305 <p>Call to function <code><strong>GetTodayISO8601_v4()</strong></code> returns:</p>
306 <blockquote>
307 <script>
308 document.writeln( GetTodayISO8601_v4() ) ;
309 </script>
310 </blockquote>
311 </body>
312 </html>