javascript advanced homework - temple...

1

JavaScript Advanced Homework

Overview

In your previous homework you wrote a JavaScript “Make” function that returned a very simple visual JS object that

had several properties and methods (some public, some private). This week, you will write a “Make” function that

creates a more sophisticated visual JS object, a slide show with a visual component that includes left/right clickable

buttons and an array of objects (each with an image and a caption). Like last week, you’ll have an HTML page that

references the external JS file (that holds your “Make” function) and then instantiates two or more objects. The

example shown below contains three slide show objects on the page.

Your code shall practice good software design principles and follow this important rule:

Code in the JS file shall not reference anything on the HTML page – other than elements passed to the

JS file from the HTML page.

This rule is an example of a more broad strategy called “dependency injection”.

Note:

This is a lab about learning JavaScript, so you MAY NOT use jQuery.

As always, you cannot submit code that is overly similar to any (1) examples presented in class, (2) examples

provided on my web site or (3) classmate’s code.

2

Requirements:

1. Project Organization. All the code for this week’s homework shall be stored under “Web Pages”, inside a folder

named “04_js_adv”.

You’ll put your MakeSlideShow function inside of a JavaScript file named MakeSlideShow.js (and that

function shall be the only globally declared object in the file). Remember our naming convention: “Every js

file is named the same as the single object (could be function) declared inside of it”. This helps organize our code

and find functions when our projects get more complex.

This page can have it’s own style sheet, allowing for more simplicity and flexibility of your layout and

design for this week.

2. Navigation/Blog.

From previous homeworks, your blog icon should be a menu header with submenu items: “Blog Page”

(internal link using routing), followed by links for “JS Intro” and “JS Advanced (both of these links being

“regular” links that get full pages).

<div class="dropdown">

<img class="dropHeader" title="Blogs" onclick="myDropdown.toggle(this)" src="icons/blog.png" alt="Account" >

<div class="dropContent" >



<a href="#/blog">Blog Page</a><br/> 



<a target="_blank" href="03/js_intro/index.html">JS Intro</a><br/>



<a target="_blank" href="04/js_adv/index.html">JS Advanced</a><br/>

</div>

</div>

3

3. As for style sheet, you may create a new one for this week’s homework or just reference your main style sheet (

../ means go up one folder):

<link href="myStyle.css" rel="stylesheet" type="text/css" />

<link href="../style/myStyle.css" rel="stylesheet" type="text/css" />

Either way, the styling of your index page for this week should look somewhat professional.

4. As for pictures, I recommend that you start out just using my sample cat pictures and replace them, at the end,

with your own pictures. Allocate a little time to select the pictures and then edit them so that they are all the

same size (for help with this, click on my web site then “Tutorials – Front End – Web Design” and read the

section entitled “Working With Images”). The deduction for just using the sample code cat pictures will be small

like -0.5.

4

5. 04_js_adv /index.html shall reference the external JS file (“js/MakeSlideShow.js”) and then instantiate two or

more slide show objects by calling the MakeSlideShow function for each object.

6. The MakeSlideShow function shall:

Take, as input, a parameter object with the following required properties:

the id of DOM element on the page (e.g., a div) that will hold the slide show component

name of the folder where the images (to be shown in the slide show) are stored

Array of objects where each object describes a picture by providing an image file name and a

caption name. (The image files are to be physically stored in the folder just mentioned above.)

Example of using a parameter object as input parameter to a “make” function.

var ss = MakeSlideShow( {

ssId: "slide1Id", // must be supplied by HTML coder

folder: "../images/", // must be supplied by HTML coder

picObjList: [ // must be supplied by HTML coder

{fileName: "pic1.png", caption: "Carla"},

{fileName: "pic2.png", caption: "Lucilla"},

{fileName: "pic3.png", caption: "The A Team"}

];

border: "2px solid blue", // example of optional property

borderRadius: "50%" // example of optional property

} );

The parameter object shall have one or more optional properties (optional in that if the HTML coder

provides them, they have some impact on the created slide show, but if they do not provide them,

MakeSlideShow will provide default values and work properly without them). Come up with your own

idea of what to pass in, but in the example below, I selected border and borderRadius as optional

properties. If used, the HTML coder has more control over the look of the images. Try to come up with

something that makes sense to have as an optional input parameter. You could even do something like

pass in the name of a CSS style that would kick in whenever the user hovers over an image. In the image

below, imagine caption names under the pictures.

MakeSlideShow shall create a visual component that has an image with a caption and a left and right

button (such as what was shown on page 1 of this document). When the left or right button is clicked,

the image and caption shall change to display another picture and caption from the picObjectList.

5

The slideShow object returned by MakeSlideShow shall have at least one public method that the HTML

coder can take advantage of. In the sample code, I provided public method “setPicNum”. You have to

come up with something else.

7. Your HTML page:

shall have at least two divs (each with their own unique id) and JS code (that runs at page load time)

that invokes your “Make” function once for each of these divs.

shall demonstrate invoking the public method on at least one of the slideShow objects. This can be

“hard coded” or invoked via user event possibly using an input element.

shall have user instructions (showing on the HTML Page) that tell us (wherever not obvious) how we are

to test your code.

shall have (as its first line of JavaScript code) the "use strict" directive as its first line of code (see below).

By having this directive, if you inadvertently declare a new variable by misspelling a variable name, you’ll

throw a JavaScript exception (easier to debug).

"use strict";

Originality and Other Requirements:

1. Originality. A lot of this homework is prescribed but there are a few areas where you are asked to come up with

your own ideas (optional properties of input parameter to MakeSlideShow and public method of the slideshow

object). Points will be deducted if you submit work that is overly similar to sample code provided from my web

site – or to any classmate’s.

2. Look and Feel. Your page may have the same look and feel as your home page or it may have a different layout,

but to get full credit, you have to create a page that is professional and visually appealing. You have had two

design labs so you should be in a position to come up with something that looks good.

3. Blog. For each lab, you will add a blog entry to your blog content and this lab is no exception. In your blog, link

to the work you did ("04_js_adv/index.html") and describe your experience doing this lab. What aspects were

easy? Which were hard? What were the most important things you learned in this lab?

4. Good Programming Style. At the top of the 3344 labs page, there is an entry entitled "Requirements For All

Labs". Make sure you adhere to the "good programming and design practices" listed in there.

Grading and Submission:

1. After completing all the requirements, test locally (and syntax check). Don’t forget to add the blog entry to your

labs page and provide a link to the page you created this week. Then publish, then test what you published.

2. Then submit a zip file of your whole project into Canvas. This project file should include the work you have done

so far (homework #1 Home Page, #2 Advanced Layout, #3 JS Intro, this homework).

6

Suggested Approach

1. Carefully study the links that were provided (on the 3344 labs page under this lab).

2. Always use the NetBeans menu option: Source – Format to keep your code properly indented. Otherwise, it will

be very hard to understand your own code. When you click on a starting brace, NetBeans should highlight

(yellow) that brace and its matching ending brace so this also helps you to understand nesting. Same is true for

HTML tags – if you click on a starting tag, NetBeans will highlight the corresponding ending tag.

3. Pay attention to the red bubbles that NetBeans places to the left of any line of code that has a syntax error.

Hover over the red bubble to get an explanation of the error.

4. As you work on this lab (or any lab that involves JavaScript), test your pages in Chrome, press F12, and watch the

console tab - this is the only place that you'll see JavaScript runtime error messages. To debug, add

console.log() statements to your code so that you can see them printed out in the console. If you

console.log(someObject), the console will show you a tree view of the object where you can explore all the

properties of the object.

5. As with ANY programming (and especially if you are new to JavaScript), code just a few lines of code between

testing. That way, if something goes wrong, you’ll know which lines of code to fix.

Here is How We Will Evaluate Your Homework:

1. We will visit your published web site, link to your blog page then read the blog for this lab and link from there to

your page for this homework: 04_js_adv/index.html.

2. We will test your page, clicking on the left/right buttons of two slide show objects to make sure they each work

independently. 3. We will view source on your HTML page and check that the HTML page invoked the public method on at least

one of the slide show objects.

4. From View Source (on the HTML page and JS code), we will check that at least one slideShow object was created

without providing the optional properties in the parameter object and at least one was created by providing the

optional properties.

5. From View Source (on the HTML page and JS code), we will check for the program style requirements (listed in

the "Requirements For All Labs" section at the top of the 3344 labs page).

6. We will make a subjective evaluation regarding your topic selection (relevance to your web site topic),

originality, professionalism, look / feel, quality of blog post with instructions.

7. Even though there may be some students with web design experience, you are not expected to measure up to

their work, just show your mastery of the topics presented in class so far.

7

Example Deductions:

-2: if zip file submitted into Canvas and published after the due date but within one week late.

-9 if no zip file submitted into Canvas.

-9 if page not published.

-9 If we cannot find your work (you didn’t link to it from blog and you didn’t name it exactly as requested).

Up to -2 for no blog on labs page (to explain what you learned, what was hard/easy).

-0.5 if you used the sample cat images instead of finding and editing your own images.

-7 if the page only shows only one slide show object or if the left/right buttons of a slide show object do not

control the correct slide show object.

-4 if there is no image as part of the slide show object (e.g., only the caption changes)

-3 if there is no caption as part of the slide show (e.g., only the image changes)

-3 if no optional properties were added to the parameter object (passed as input to MakeSlideShow) and/or

optional properties were not handled by MakeSlideShow (it should test to see if they exist and if not, provide

default values).

Up to -2 if the optional properties selected for the parameter object “don’t really make sense” within

the context of this homework.

-2 if a public method was added to the slide show object but never invoked by the HTML page.

-3 if no public method was added to the slide show object.

Up to -3 for poor layout/professionalism.

Up to -2 if your page loads too slowly – try to keep each image around 500K or less.

Up to -3 for lack of originality, if your code is too similar to sample code. If it is too similar to a classmate, the

deductions can be much more.

Up to -2 for HTML/CSS syntax errors which show in red font from Firefox View Source.

Up to -4 for violation of dependency injection. This means that your MakeSlideShow function made an

assumption about something (e.g., in the HTML page or in the CSS) that was NOT PASSED to it.

Up to -2 for poor coding style. Your code should be neat, with some comments, properly indented, well named,

and with no unused code.

javascript advanced homework - temple...

Documents