I took a quick look at javascript.com and I found that the scripts I found interesting for my website were severely outdated and wouldn’t and didn’t provide any real added value to my website. I found useful samples for what I wanted to do under Stack Overflow.  

Mapping Activities, Code Changes, and Code Critique 

Detect Mobile Device 

This script is required for Jessica using an iPhone, Jimmy using a Samsung Galaxy 7, and Robert using an iPad. Detecting their device lets me customize their experience for mobile. I opted out of doing a version alone for tablets. Providing 2 separate viewing experiences is proving time consuming for one course, a 3rd would put a strain on my other classes. 

$.browser.device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase())); 

Code is from the following Stack Overflow Post edited by multiple users: https://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device/3540295#3540295 

This script is straight forward. The JavaScript requests from the browser Document Object Model (DOM), the navigator user agent, which returns a long string about the system the browser is running on. The code i.test searches within the userAgent DOM string for the following keywords: android, webos, iphone, ipad, ipod, blackberry, iemobile, and opera mini. The i of i.test tells test to ignore the case of the string. The test will assign a value of true to the variable $.browser.device if a keyword is found in the DOM string. The value of false will be assigned to $.browser.device if no keyword is found.  

I find this script simple and easy to maintain, we can easily add and remove devices and use the results in other functions. This script is flawed in the sense that it is not a one size fits all solution. I agree with many of the comments under the post that detecting devices is a complex problem which requires multiple solutions. Since my goal for this course is to learn JavaScript. This solution worked for me, and I am attempting to ensure that undetected mobile devices still see the desktop version of the website. 

My Modifications: 

var isMobile = false; //initiate as false 

// device detection 

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { 

isMobile = true; 

setStyleSheet('css/mobile.css'); 

// Render Mobile Navbar 

document.getElementById('navbar').innerHTML = "Works"; 

} 

I created a variable called isMobile to be used throughout the website to modify items as needed on mobile devices. The if statement sets isMobile to true if applicable and switches the stylesheet to the mobile version. 

Substitute Stylesheet 

This script is used along with the one above for Jessica, Jimmy, and Robert. The script switches their browser to a different stylesheet optimised for mobile devices. 

The scripts is from the following Stack Overflow Post by multiple users: https://stackoverflow.com/questions/19844545/replacing-css-file-on-the-fly-and-apply-the-new-style-to-the-page 

This script changes the stylesheet of the webpage when the Style 1 or Style 2 links are clicked. When clicked, onclick calls the thesetStyleSheet() function and requests the functions to set either stylesheet1.css or stylesheet2.css. Code document.getElementById locates and selects the correct HTML and CSS to be modified. Stylesheet.setAttribute provides the link stylesheet tag the url to the new stylesheet. 

This code works well and is easy to modify as required. Source seems solid as it has been reviewed by many peers on Stack Overflow. 

My changes: 

I didn’t make any changes to the function itself. I only made a change to how the function is called. I call the function to change the stylesheet if the value of the variable isMobile is true.  

Image Slideshow with Links 

This script was added for Jessica and Jimmy who are looking for Snowboarding tips and tricks. The slideshow was added on the main page so they can quickly see if any new videos have been posted. 

var slideIndex = 0; 

Code source can be found on W3Schools (including automation) https://www.w3schools.com/howto/howto_js_slideshow.asp 

I chose this code as it seemed to be the simplest and cleanest code I could find to make a slideshow. W3Schools provide well written and highly scrutinized code. The only code I had to change was the HTML for my own slides and the CSS to integrate the slides into the page’s look and feel. 

The script initially sets the variable slideIndex which is used to select the next slide and restart the show when it reaches the end. Then, the scripts selects the HTML elements by class name mySlides and dot. The following for loop assigns an ID to each slide (slide[1], Slide[2], slide[3]) and hides all slides from view. After this, slideIndex increments to one to show the first slide. The If statement tests to see if slideIndex exceeds the total number of slides, if so, it is reset to 1 to start over with the first slide. The next for loop sets dot IDs (dot[1], dot[2], dot[3]) and replace active dots with inactive dot. Finally, the script shows the current slide and activates the current dot as per the slideIndex. The setTimeout set the time to restart the function to transition to the next slide. 

Unit Conclusion 

Although this solution is not perfect for mobile devices. Using existing frameworks such as Bootstrap may help to make a more uniform experience for all devices. However, this coding experience has served well as I have learned much from this experience. 

I learned that some scripts should be placed after the HTML tags and not in the header. The slideshow would not work if the script was placed in the header. The slide show works if the script is placed after the shows HTML tags. It also seems like scripts don’t get access to the DOM until the whole page is loaded. 

I also figured out looking at different sources how to create a function to scale images according to browser width and I have included this in the script of the page header and call this function with onload. Image width and height is adjusted according to page width. I did not substitute the image with smaller size images since my website is not graphic intensive. 

I debated placing the main script shared by all pages into a folder name scripts. However, I opted against this since the Athabasca server is slow and unpredictable sometimes. I did not want to risk having the whole page load without the script providing and incomplete user experience. 

Unit 4 Website: http://student.athabascau.ca/~michelde10/unit4/