Landing : Athabascau University

QUICK COURSE LINKS:  Add blog post - Read latest group posts - Course Moodle site

FAQs: Course process : Site design : HTML : CSS : JavaScript : JQuery : AJAX : Misc : Accessing your web space at AU

Updated resource pages:  Unit 1 - Unit 2  - Unit 3Units 4 & 5 - Unit 6 - Unit 7

Important notice following the death of our web server administrator: new student accounts are not currently being created on the student web server, and no one is maintaining existing accounts. We are working as fast as possible on a solution but, until this is fixed, we do not require you to upload your site to the student server (though, if you do still have access, we highly recommend doing so). See Running a web server on your local machine for details of how to meet the requirements for the final unit, and my posts on the subject in the discussion forum for further information about the problem.

Unit 4 and 5 Submission

Unit 4 and 5 Submission
  • Public

Unit 4 and 5 Submission

By Justin Jaunzemis 26 October 2017 @ 2:23pm

Due to how similar both units are in terms of the learning material, I chose to submit both units at once. I have used two pieces of javascript from my last attempt borrowed from and, which are the content hider, and the site's hit counter. The remaining four scripts are scripts that I wrote as per unit 5. 

For Unit 4, I reused two scripts from my previous attempt, but I didn't critique the code for each script in the last attempt. For the first script, the script that allows me to show and hide content, The script uses a toggle if statement to hide or show content under a title, where if the display attribute is set to block for the answer div, then it is set to none. Otherwise, it sets the display attribute to block. I have used this concept in the design for my nested menu's as per Unit 5, but with the help of W3's tutorials on interface design, I used buttons instead of the function for making the text clickable in the hide and show script. 

As for the counter script, to any adept javascript programmer, the code looks fairly straightforward, but lacks the proper comments to anyone who might have trouble learning javascript. 

For my Unit 5 scripts, I have used W3 School's tutorials as a starting point to look for how to figure out what to use and implement in terms of CSS, and a bit of HTML with the Javascript. I have learned a lot more through the modular structure of the website, talking about each component of javascript at a time with interactive stomping grounds to test the code. For my sidebar overhaul, I feel that I have accomplished my goal of simplifying the impementation of a sidebar in the website. Rather than being heavilly reliant on CSS and HTML, the use of Javascript allows the sidebar to be augmented so that the site works more efficiently, and helps to cut down on information overload. On the top left of each page apart from the Index, there is a hamburger button, which activates the openMenu() function in sidebar.js, and in the sidebar is a link with an X for the closeMenu() function. Using some additional CSS, I have learned to implement smoother transitions for opening and closing the menu rather than having it pop up and away. While these are simple functions for changing the width attribute, they are simple enough to work as I expect. As for the nested menu's, or accordion boxes in the sidebar, they reveal hidden menu's that push the below contents of the menu out of the way, rather than an obstructive drop-down menu. I have used some dedicated styles for these menu's, where the buttons blend seamlessly with the rest of the links, but the nested menu's are a darker shade of gray, which makes the nested menu's unique, rather than blending in with the rest of the sidebar. As I have already stated, I used a similar piece of logic to the content hide and show script from Unit 4, but I used buttons to eschew the need of the function that the Unit 4 script used. With my goal of overhaulling my sidebar, I have eliminated the needs for three intermediary pages for Facts and History, Aircraft Info Types, and FSX section's subsections, and only keeping the branches these pages acted as roots. 

For my form validation, it is a simple script that uses a function upon clicking the send button to verify the name and email form. For the name, if the name is blank, or has not been bothered to be entered, then it alerts the user that their name is invalid. The email validation method uses a Regular expression or Regex for it's verification. This means that the entered string must match the format of an email address. If there are any invalid symbols, or any parts of it missing, like the @ or . symbols, then the email is invalid. While the symbology of a regex can be complicated, it is still a useful tool in any javascript programmer's toolkit. 

Lastly, I created an automated slideshow for my aviation pictures, which creates an array of photos entered, iterates through each photo, then loops back. What makes this script unique in comparison to the other scripts I have used, is that this one make uses of recursion, as it calls the function to show each photo, and wait seven seconds before switching to the nest. 

Overall, I have learned a lot about using Javascript. I have learned that while not being based on Java, it is fairly similar in some areas, and it is a very powerful tool for creating websites. Another thing I have learned, is that it is a good practice to make your Javascripts as complicated as they have to be per specific requirements. For example, the simplest of my scripts just sets the width attribute to an open and closed value for my sidebar, whereas the photo function to recursively call itself to show each photo in the slideshow. Coupling Javascript with CSS and HTML, the possibilities are limitless. 



These comments are moderated. Your comment will not be visible unless accepted by the content owner.

Only simple HTML formatting is allowed and any hyperlinks will be stripped away. If you need to include a URL then please simply type it so that users can copy and paste it if needed.