Steps:

1. Open the link-click-die-roll.html file in your web browser.

   

   Use the Element Inspector window to identify the best way to select the outer element for the "Roll Again" text and the "Dice roll: Nothing here but us chickens." text.

   The #roll-link selector can be used for the "Roll Again" text.

   The #roll-value selector can be used for the "Dice roll: Nothing here but us chickens." text.

   

2. DIY: Open the link-click-die-roll.js file in your code editor and replace the following line …

   		console.log(getDiceRoll());

   … with JQuery to update the roll-value element with the dice roll value. Save and test.

   	function updateView(){
   		console.log(getDiceRoll());
   		$('#roll-value').html(getDiceRoll());
   	}

3. In the link-click-die-roll.js add after the following line …

   	console.log("DOM is ready!");

   … the following …

   	$("#roll-link").click (function(){
   		updateView();
   	});

   … and save and test.

   The dice roll link is active and updates the web page when clicked.

4. Does the hyperlink change the web browser history? How can you verify?

   The anchor element …

   	<a id="roll-link" href="#">Roll Again</a>

   …  generates URL and initiates an HTTP request to the web browser. That URL added to the web browser history.

   To verify you can view the history detail and see a hyperlink ending with the # hash symbol. You might start by first reloading the page without the trailing hash symbol. Then click on the hyperlink. At this point you may even see a URL loading on your web page, but if you look in the history you should see two entries, one with and one without the hash symbol.

   This is a small web page in height. The visual effects may not be noticable. Generally the hash symbol for the href attribute would scroll the document to the top of the page. Some authors use #! where the ! is a bogus named anchor element to avoid the scrolling. However an entry into the web browser history may still occur.

5. DIY: In the link-click-die-roll.js file change the click method to prevent the default behavior of the hyperlink. Test your solution.

   For events that have a default behavior you want to override, you use the preventDefault method int the event object that JQuery passes to its event methods.

   	$("#roll-link").click(function(){
   		updateView();
   		event.preventDefault();
   	});

6. DIY: In the link-click-die-roll.js file convert the anonymous function used in the click method to a function named rollClickHandler and test.

   	$("#roll-link").click(rollClickHandler);
   	function rollClickHandler(event){
   		updateView();
   		event.preventDefault();
   	}

7. DIY: In the link-click-die-roll.js file replace the JQuery click method with the JQuery on and test.

   	$("#roll-link").click(rollClickHandler);
   	$("#roll-link").on("click", rollClickHandler);
   

8. DIY: In the link-click-die-roll.html file replace the a element with the button element. Make necessary changes to the link-click-die-roll.js code.

   FYI: The link-click-die-roll.css file has styling for all button elements.

   

   Changes to the link-click-die-roll.html file.

   <a id="roll-link" href="#">Roll Again</a>
   <button id="roll-link">Roll Again</button>

   Changes to the link-click-die-roll.js file.

   	function rollClickHandler(event){
   		updateView();
   		event.preventDefault();
   	}

   The button element does not have default behavior effecting the web browser so the preventDefault method is not required.

   Optionally the event parameter tot he rollClickHandler is no longer used and could be removed.

Steps:

1. Open the class-stopwatch.html file in your web browser. Use the web browser tools to examine how the elapsed time is being updated by JQuery.

   Line 6 of the class-stopwatch.js file creates a JQuery object for the #counter-value element and uses the html method to replace its contents with the simpleStopWatch.toHHMMSS method return value.

   Screen shots taken at 10 seconds of elapsed time to illustrate.

   

   

2. Before the updateView() function create a click handler for the stopwatch controls using a JQuery object variable named $stopwatchControls and the JQuery on method. Name the handler function stopwatchHandler. Then test in the web browser tools.

   

   

   	var $stopwatchControls = $(".stopwatch-control");
   	$stopwatchControls.on("click", stopwatchControlHandler);
   	function stopwatchControlHandler(e){
   		console.log('stopwatchControlHandler');
   		e.preventDefault();
   	}

   

   Line 5 creates a variable representing the JQuery instance object $stopwatchControls for the class .stopwatch-control.

   Line 6 registers the stopwatchControlHandler function the click event for the $stopwatchControls JQuery object.

   Lines 7-10 are the stopwatchControlHandler function. The JQuery event object is added the function signature as the argument variable named e.

   Because all the controls are the a element, the preventDefault method for the JQuery event object is included on line 9.

3. In the class-stopwatch.js file add the following lines in the stopwatchControlHandler function …

   		console.log(this);
   		console.log(e.currentTarget);
   		console.log(this === e.currentTarget);

   … then save and test for all controls.

   Describe the results.

   The this and e.currentTarget objects reference the same .stopwatch-control HTMLElement that was clicked. The following illustrates the results:

   

4. In the class-stopwatch.js file add the following lines in the stopwatchControlHandler function …

   		console.log($stopwatchControls);
   		console.log($stopwatchControls[0]);
   		console.log($stopwatchControls[0] === this);
   		console.log($stopwatchControls[1]);
   		console.log($stopwatchControls[1] === this);
   		console.log($stopwatchControls[2]);
   		console.log($stopwatchControls[2] === this);

   … then save and test for all controls.

   Describe the results.

   $stopwatchControls[0], $stopwatchControls[1] and $stopwatchControls[2] are HTML elements selected for the $stopwatchControls JQuery instance object.

   The $stopwatchControls[0] HTML element is equal to the this object when the start link is clicked.

   

   The $stopwatchControls[1] HTML element is equal to the this object when the stop link is clicked.

   

   The $stopwatchControls[2] HTML element is equal to the this object when the reset link is clicked.

   

5. Change the class-stopwatch.js code so the stopwatch object is not automatically started.

   Then in stopwatchControlHandler function add a switch statement that tests for the this object and uses the simpleStopwatch object's continue, pause and reset methods respectively for the start, stop and reset links. Save, test.

   Remove all console.log statements once your are done.

   Remove the following line.

   	simpleStopwatch.addUpdateListener(updateView);
   	simpleStopwatch.continue();
   	var $stopwatchControls = $(".stopwatch-control");

   A possible switch statement.

   	function stopwatchControlHandler(e){
   		console.log('stopwatchControlHandler');
   		console.log(this);
   		console.log(e.currentTarget);
   		console.log(this === e.currentTarget);
   		console.log($stopwatchControls);
   		console.log($stopwatchControls[0]);
   		console.log($stopwatchControls[0] === this);
   		console.log($stopwatchControls[1]);
   		console.log($stopwatchControls[1] === this);
   		console.log($stopwatchControls[2]);
   		console.log($stopwatchControls[2] === this);
   		switch(this){
   			case $stopwatchControls[0]:
   				simpleStopwatch.continue();
   			break;
   			case $stopwatchControls[1]:
   				simpleStopwatch.pause();
   			break;
   			default:
   				simpleStopwatch.reset();
   		}
   

   The this object is one of the thre HTML elements that can trigger the JQuery $stopWatchControls object's click event. Each of the HTML elements are represented in the $stopWatchControls object as the 0, 1, and 2 properties.