Hey All! Here is my Learning Diary for Unit 4.

Work I Have Done For The Unit:

Throughout Unit 4, I spent time modifying Javascript code from 'w3schools.com' to create a dynamic menu that enables users to navigate around 'index.html' quickly and easily. The menu contains buttons that when clicked, scroll the user to specific sections of 'index.html' including: 'About Me', 'Works', 'Experience', 'Blog' and 'Contact'. This new menu provides the same functionality as the pages static menu (located at the top of the page). The primary difference is that this javascript-based menu appears as the user scrolls down the page, when the static menu is no longer visible. 

The original code from 'w3schools.com' is intended to create a "Scroll to Top" button. I modified and expanded this code to include 5 more buttons with similar functionality. Whereas the 'w3schools.com' button takes the user to the top of the page, my modified buttons take the users to specific sections within the page. 

The original Javascript code from 'w3schools.com' can be found at this link https://www.w3schools.com/howto/howto_js_scroll_to_top.asp , and is as follows: 

1. // When the user scrolls down 20px from the top of the document, show the button
2. window.onscroll = function() {scrollFunction()};
3.  
4. function scrollFunction() {
5.     if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
6.         document.getElementById("myBtn").style.display = "block";
7.     } else {
8.         document.getElementById("myBtn").style.display = "none";
9.     }
10. }
11.  
12. // When the user clicks on the button, scroll to the top of the document
13. function topFunction() {
14.     document.body.scrollTop = 0; // For Safari
15.     document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
16. }

In addition to this Javascript code, I used their provided CSS, and additionally modified their provided HTML to my purposes. The CSS styling has been cited in my .CSS files. 

The above code allowed me to develop my own code for a dynamic menu. The modified code is quite a bit longer, and can be found in the .zip file, as well as on the SCIS server. In the modified code, I developed an extra 5 functions to add the new menu behaviour. 

This code explicitly meets the needs of the users and scenarios I outlined in unit 1. For example, when Matthew (a persona from Unit 1) lands on the main page, he uses the static menu to navigate around the main page and website. Since he is using a mobile device, scrolling can become tedious. This code meets his needs and provides expanded functionality, as it enables him to scroll to the top and access the static menu very quickly while using his mobile device.

Alternatively, Sanjay who is accessing the website from his computer will find the javascript menu helpful, because he can quickly access any part of the main page without needing to scroll back to the top. 

Explanation and Critique of Code:

The original code works as follows:  

If a user scrolls down the page, a button appears in the bottom right-hand corner. When clicked, this button scrolls the user to the top of the page. 

On a more technical level, when a user scrolls down the page, the "window.onscroll" event in line 2 is set to call the function, scrollFunction(). When scrollFunction() is called (i.e. when a user is scrolling), it checks to see how far a user has scrolled using the if-statement in line 5. The if-statement uses the return value of the HTML DOM scrollTop Property on the body and document element as it's conditions. The HTML DOM scrollTop property returns the number of pixels an element's content is scrolled vertically. Thus the if-statement is saying "if the user scrolls down the body more than 20 pixels, OR scrolls down the documentElement more than 20 pixels", set the display style of the button to "block". When the button display style is set to block, it appears on the screen.

In the case that the user has scrolled less than 20 pixels from the top of the page, the if-statement will return false, and the button is set to display "none" in the else block. When the button display style is set to none, it disappears from the screen. 

When the user clicks the button, the Javascript will trigger the topFunction() from the html. The top function uses the HTML DOM scrollTop Property to set the number of pixels the user has scrolled to zero, automatically scrolling them to the top of the page. 

Critique of original code: 

Overall, the code is well written. The functions have good structure, and are indented well, making it easy to read and understand. Specifically, all three functions are written in the order they must be called, making it easy to visualize the flow of code. The event listeners and properties used to call functions were appropriately chosen, and keep the code short, efficient and simple.  The code would be greatly improved if more comments were made to explain the scrollFunction(). The developers could have been explicit in describing how both conditions used within the if-statement are required to ensure cross-browser compatibility. 

The modified code works as follows: 

As in the original code, if a user scrolls down the page, a button appears in the bottom right-hand corner with the text 'Top". When hovered upon, this button opens a menu in the bottom right-hand corner of the webpage with 6 buttons side-by-side. When clicked, the buttons take the user to specific sections of the page. When a user stops hovering over the menu, the 5 buttons disappear, leaving just the "Top" button remaining. On a mobile screen, only the "Top" button is ever displayed. 

On a more technical level, when a user scrolls down the page, the "window.onscroll" event is set to call the function, scrollFunction(). When scrollFunction() is called (i.e. when a user is scrolling), it checks to see how far a user has scrolled using an if-statement. The if-statement uses the return value of the HTML DOM scrollTop Property on the body and document element as it's conditions. The HTML DOM scrollTop property returns the number of pixels an element's content is scrolled vertically. Thus the if-statement is saying "if the user scrolls down the body more than 200 pixels, OR scrolls down the documentElement more than 200 pixels", set the display style of the button to "block". When the button display style is set to block, it appears on the screen.

In the case that the user has scrolled less than 200 pixels from the top of the page, the if-statement will return false, and every button (i.e. myBtn, myBtn2, myBtn3 ... myBtn6) are set to display "none" in the else block. When a buttons display style is set to none, it disappears from the screen. 

When the user hovers over myBtn aka. "the Top button", the Javascript will trigger the oepnMenu() function using the mouseover event listener. openMenu() sets the keepMenuOpenBoole to true. openMenu() will also check if the screen.width is greater than 790 pixels. If the screen is greater than 790 pixels, myBtn2, myBtn3, myBtn4, myBtn5 and myBtn6 appear on the screen with their style.display properties set to block. 

When the user stops hovering over a button in the menu, the mouseout event listener will call the triggerClose() function. The purpose of triggerClose is to trigger the menu to disappear (close) from the screen. The keepMenuOpenBoole is set to false, and a timer is set that will result in closeMenu() being called 10ms later.

closeMenu() checks to see if keepMenuOpenBoole is equal to true. At a high-level, if keepMenuOpenBoole is set to true, it means that the user is still hovering over buttons in the menu, and the style.display of the buttons are set to "block". Otherwise, if the keepMenuOpenBoole is  false, closeMenu() enters the else-block, and buttons 2 to 6 disappear from the screen with their style.display set to none. 

When the user clicks a button, the Javascript will trigger either topFunction() or goToBookmark() from the html. The top function uses the HTML DOM scrollTop Property to set the number of pixels the user as scrolled to zero, automatically scrolling them to the top of the page. The goToBookmark(bookmark) function determines the offset of the html bookmark passed into the function using getElementById(bookmark).offsetTop, and scrolls to this pixel location using window.scrollTo. 

Learning Outcomes & Requirements:

Critique JavaScript code written by others, identifying examples of both good and bad practice: 

• Critique that identifies the good and bad aspects of the code. 

Use JavaScript to add dynamic content to pages: Your code should be clear, maintainable, and well structured, suitably integrated into the web page so that it can be easily modified and maintained.

• Code is well-structured in 8 functions, each with clearly defined purpose. My use of comments in the code make it easy to modify and maintain. 

The code will be carefully chosen and its use thoroughly justified in the context of the personas and scenarios developed in Unit 1.

• I have met this learning outcome. The code makes navigating and finding content on the website easier, resulting in a website that does a better job of meeting the needs of the personas and scenarios outlined in Unit 1. 

Modify existing JavaScript code to extend and alter its functionality and, where appropriate, to correct errors and cases of poor practice: hand-in-hand with the critique, you will have taken examples of rich coding and modified them in a manner that explicitly fits the needs of your site.

• I did an excellent job of extending the Javascript code, providing new functionality. 

Submission: 

SCIS Web Space (working-copy): http://student.athabascau.ca/~jamalha2/

Permanent Location for Unit 4 HTML Files on SCIS: http://student.athabascau.ca/~jamalha2/unit4/

.Zip File:  

Github Pages: http://jamalhabash.ca/comp266/