Overview:

This unit was all about learning JavaScript. In this part we had to get a JavaScript code from the Web and add it to our website.

Learning Outcome:

By doing this unit, I learned how to use JavaScript and what the code does to the site. I learned how to get the elements of HTML to JavaScript through different methods. As stated in the unit requirements I have used JavaScript that I obtained from another website.

CRITIQUE OF JAVASCRIPT CODE : Automatic Slideshow

The code that I have used in my page is taken from w3school website.  
I added a short code so that it is easy to explain.
https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_rr

I have added an automatic slideshow to my website which I mentioned in my Unit 2 web pages.

To reduce the redundancy of code, I made a separate script file and I linked this file to each of my webpages.  I will explain this code line by line.

Line 1: A variable of myIndex is assigned a value of zero. This variable indicates the index of the slideshow. It is set to zero which means it will start from the beginning.

Line 2:  The function named carousel is called.

Line 4:  Function starts and it doesn’t take any parameter.

Line 6: An arbitrary variable “index” is declared for the loop statement.

Line 7: “getElementsByClassName()” method is used to get the collection of all elements in the document with the specified class name.  The value of this method is stored in a variable “slide”. This variable indicates the number of images I have in the slideshow.

Line 9: “For” loop is executed. This loop has 3 statements. 1^st Statement is initialized with the variable “i” which is equal to zero. 2^nd Statement checks if the loop is under the total number of slides.  The 3^rd statement defines that variable “index” will be incremented after each iteration.

Line 11:  Display property is used inside the loop which hides every div element. And it doesn’t take any space of the webpage.

Line 13:  Variable “myindex” is incremented.

Line 15-18: “If” condition is placed to check if the variable “myindex” exceeds the number of total div element. If yes, then it sets the variable of “myindex” to 1.

Line 20:  Display property is used to display the first index of the div element.

Line 22: For recursion, timeout function is called after every eight second and the function is called back again.

Short Summary of the code:   In this automatic slideshow. The script function collects the number of the specified element from the html page. All of the div elements are hidden by using display property.  The slide index determines which div element index to show. At the end the function times out and calls itself back.

Changes made in the Code: I didn’t make much changes to the code as it was working properly.  I did change the variable names to some meaningful names so that code is easy to read. I also indented the code.  I changed the timing of the timeout function so that It doesn’t irritate the users.

JavaScript Effect on the Personas:

The code that I have chosen will have effect on those who are more attracted to images and the presentation of the website rather than the content. So personas like Carlos and Carol  who are more attracted towards the presentation of the website, will find this website more attractive.
This slideshow is also responsive, so it will work for all of my personas who uses different devices to browse the internet. I have also made the layout of my website as simple as possible so personas who are not familiar with technology, like Jateen can easily perform actions with the website.

Additional Changes:

I have changed the pictures of the website. It’s because the cleaning company is more geared towards the commercial clients. To attract the clients who own commercial businesses. I have added these pictures, which best reflect these company’s line of business. I also added some effects to my slideshow in the css file, so that it is attractive to the personas I created.

The images are taken from:

https://www.pexels.com/de/foto/arbeit-arbeiten-arbeitsplatz-buro-380769/

http://www.modafinilsale.com/view/koala-pictures-12603.html

https://pxhere.com/no/photo/1390061

https://pixabay.com/en/chair-dentist-dental-clinic-teeth-2584260/

https://www.pexels.com/photo/brown-wooden-floor-48889/

What went well:

 It was easy to find and understand the working of the code.

What was difficult:

It was really difficult for me to create another java script file and link this to each html. It was very difficult to run the code as I wasn’t using the keyword “Defer” in the linkage. Then I got to know the difference between inside html scripts and external script.

My Website : http://student.athabascau.ca/~mohamedye/index.html

Below is the attached file of the unit 4