Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

Extra 15-1: Use namespaces and module pattern with the Clock Open the HTML and JavaScript files in this folder: exercises_extrach15clock_namespaces Notice that there are two

Extra 15-1: Use namespaces and module pattern with the Clock

Open the HTML and JavaScript files in this folder:

exercises_extra\ch15\clock_namespaces\

Notice that there are two more library files, a namespace library and a utility library. In the HTML file, note that the script tags for these libraries come before the script tags for the clock and stopwatch libraries.

In the namespace library, review the code that creates the namespace and adds a namespace creator method. Then, use that method to add the following namespaces:

time utility time.clock time.stopwatch

Move the padSingleDigit function and the $ function from the clock.js file to the library_utility.js file, and add them to the utility namespace.

Change the library_clock.js file so it uses the module pattern and adds the object it creates to the clock namespace.

NOTE: In this step and in step 5, youll need to adjust the objects so the callback function is passed to the start method and then stored so the function called by the timer can use it.

Change the library_stopwatch.js file so it uses the module pattern and adds the object it creates to the stopwatch namespace.

Change the code in the clock.js file to use the new namespaces and module objects. Since you no longer create the clock and stopwatch objects, remove that code and pass the callbacks to the start methods. Use aliases for the namespaces, and make sure you dont add anything to the global namespace.

Files:

clock.css:

body { font-family: Arial, Helvetica, sans-serif; background-color: white; margin: 0 auto; width: 450px; border: 3px solid blue; padding: 0 2em 1em; } h1 { color: blue; } label { float: left; width: 11em; text-align: right; padding-bottom: .5em; } input { margin-right: 1em; margin-bottom: .5em; } fieldset { margin-bottom: 1em; } #date { margin-left: 2em; }

clock.js:

"use strict"; var $ = function(id) { return document.getElementById(id); };

var padSingleDigit = function(num) { return (num < 10) ? "0" + num : num; };

// callback function for displaying clock time var displayTime = function(now) { $("hours").firstChild.nodeValue = now.hours; $("minutes").firstChild.nodeValue = padSingleDigit(now.minutes); $("seconds").firstChild.nodeValue = padSingleDigit(now.seconds); $("ampm").firstChild.nodeValue = now.ampm;

// display date in "m/d/yyyy" format - correct for zero-based month var date = (now.getMonth() + 1) + "/" + now.getDate() + "/" + now.getFullYear(); $("date").firstChild.nodeValue = date; }; // callback function for displaying stopwatch elapsed time var displayTick = function(elapsed) { $("s_minutes").firstChild.nodeValue = padSingleDigit(elapsed.minutes); $("s_seconds").firstChild.nodeValue = padSingleDigit(elapsed.seconds); $("s_ms").firstChild.nodeValue = elapsed.milliseconds; }; // callback function for clearing stopwatch elapsed time display var resetStopwatch = function() { $("s_minutes").firstChild.nodeValue = "00"; $("s_seconds").firstChild.nodeValue = "00"; $("s_ms").firstChild.nodeValue = "000"; };

// onload event handler window.onload = function() { var clock = createClock(displayTime); var stopwatch = createStopwatch(displayTick); // start clock clock.start();

// set up stopwatch event handlers $("start").onclick = function() { stopwatch.start(); }; $("stop").onclick = function() { stopwatch.stop(); }; $("reset").onclick = function() { stopwatch.reset(resetStopwatch); }; };

index.html:

Clock

Digital clock with stopwatch

Clock

:

:

Stop Watch

00:

00:

000

library_clock.js:

"use strict";

var createClock = function(displayTimeCallbackFunction) { // private state var displayCurrentTime = function() { var now = new Date(); // add own properties to instance of Date object now.hours = now.getHours(); now.minutes = now.getMinutes(); now.seconds = now.getSeconds(); now.ampm = "AM"; // set default value

// correct hours and AM/PM value for display if (now.hours > 12) { // convert from military time now.hours = now.hours - 12; now.ampm = "PM"; } else { // adjust 12 noon and 12 midnight switch (now.hours) { case 12: // noon now.ampm = "PM"; break; case 0: // midnight now.hours = 12; now.ampm = "AM"; } } // use callback function to display time - pass it the now variable if (displayTimeCallbackFunction && typeof displayTimeCallbackFunction === 'function') { displayTimeCallbackFunction(now); } }; // public methods return { start: function() { displayCurrentTime(); setInterval(displayCurrentTime, 1000); return this; } }; };

library_namespace.js:

"use strict";

// create the namespace and nested namespace creator method var myapp = myapp || {};

myapp.addNamespace = function (namespace) { var currentName; var parent = this; var names = namespace.split("."); for (var i in names) { currentName = names[i]; parent[currentName] = parent[currentName] || {}; parent = parent[currentName]; } return this; }.bind(myapp);

// add the namespaces the application will use

library_stopwatch.js:

"use strict";

var createStopwatch = function(displayTickCallbackFunction) { // private state var timer; var elapsed = { minutes:0, seconds:0, milliseconds:0 }; var tickStopwatch = function() { // increment milliseconds by amount of interval elapsed.milliseconds = elapsed.milliseconds + 10;

// roll over milliseconds to seconds, seconds to minutes if (elapsed.milliseconds === 1000) { elapsed.seconds++; elapsed.milliseconds = 0; } if (elapsed.seconds === 60) { elapsed.minutes++; elapsed.seconds = 0; }

// use callback to display new stopwatch time - pass it the elapsed time object if (displayTickCallbackFunction && typeof displayTickCallbackFunction === 'function') { displayTickCallbackFunction(elapsed); } }; // public methods return { start: function() { tickStopwatch(); timer = setInterval(tickStopwatch, 10); return this; }, stop: function() { clearInterval(timer); return this; }, reset: function(resetStopwatchCallbackFunction) { clearInterval(timer); elapsed = { minutes:0, seconds:0, milliseconds:0 }; // use callback to reset stopwatch display if (resetStopwatchCallbackFunction && typeof resetStopwatchCallbackFunction === 'function') { resetStopwatchCallbackFunction(); } return this; } }; };

library_utility.js:

"use strict";

thanks

Step by Step Solution

There are 3 Steps involved in it

Step: 1

blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image_2

Step: 3

blur-text-image_3

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

More Books

Students also viewed these Databases questions