Object Choices

Simple Objects

Our goal is to learn about JavaScript objects. Use the ListButton and Function Basics assignments to help you with portions of this assignment. Use the links below to go to Elvenware and read at least the openning sections of JavaScript Objects and review the section on JavaScript function types.

object choices ui

Get Started

Inside the javascripts-tests directory create object-choices.html and object-choices.js. Add a script statement to the head element of the HTML file that links in the JavaScript file. Create a link from your home page to object-choices.html.

In what follows, when I ask you to print something out, use console.log to print it. When I ask you to call a method, put the calls beneath all the object or class declarations. In other words, the bottom of the file should consist only of method calls, and the top portions of the file should contain your object and class declarations or implementations. When declaring methods, use ES6 (fat arrow) syntax throughout.

The Key Steps

Create three objects, each with at least one method. Call the methods. Where necessary, first instantiate the object with new.

  1. Create an object literal called simpleObject. In it create a method called sayName that prints out the phrase: "Simple Object." Call the method.
    • Outside the object declaration, use dot notation to add another method called dynamicMethod. It should print out its own name: "Dynamic Method". At the bottom of the file, call the method.
    • Here's a hint. The declaration for the method declared outside the object declaration will look something like ObjectName.methodName = <Implement an anonymous function here.>.)
  2. Do the best you can with this one. I will grade it lightly. Create a constructor function called FunctionObject that contains a method called sayName that is declared on the prototype of the FunctionObject. At the bottom of the file, instantiate the object with new and call the method. (When I say constructor function, this does not mean we use the key word constructor. It just means the funciton begins with a capital letter to signal to the user to instantiate the function object with new.)
    • Add a private function called privateFunction and call it from sayName. The private function should print out the string "Private Function"
    • Optionally print out the constructor. For instance, if your instance of FunctionObject is called functionObject then write console.log(functionObject.constructor.toString()). The point of this exercise is to show that a constructor is being created, and in fact your method is that constructor. But we don't explicitly use the word constructor when we create it.
    • Optionally create a dynamic method outside the object declaration. You will need to use prototype to make this work.
  3. For extra credit, create a class called Custom Class with a method called sayName that returns the string Custom Class. At the bottom of the file instantiate the method and call the method. On Elvenware there are with some very broad hints on how to work with JavaScript classes. Also there is an example on JavaScript.info

As explained above, at the bottom of object-choices.js I want you to call the methods of all three objects.

Show Results in Html

In object-choices.html create an H1 element with the content Object Choices.

Add three empty paragraph elements. Give them the following IDs:

Add three buttons. Give them the labels Simple Object Function Object and Custom Class. Set the IDs of the buttons to:

In object-choices.js, inside an window.onload method, respond to clicks on the button by calling all three objects and their methods and displaying the output in the appropriate paragraph element.

onload method with three onclick handlers

In this image I have used code folding to hide the implementation of my three onclick handlers. Nevertheless, you can see the basic structure of the onload event handler.

Recall that the Function Basics assignment contains hints on how to perform these tasks.

In particular, remember that we will need to modify the existing methods so that, in addition to the console.log statements, they also set the textContent of each paragraph in object-choices.html. Beneath the H1 element add a paragraph that explains, in your own words, what is happening on the page. In particular, explain what the buttons do. This need not be a detailed explanation, but cover the key points. You might start like this: "When you click the button an event is fired that..."

The implmentation of the objects

Again note that I have used the VS Code tools to fold my implementation of the two objects and one class. My goal was to show you the structure of the code without showing you exactly how I implemented it. That part is up to you.

Styles

Style your buttons as you did in the List Button assignment. Also style your paragraph elements to use a 20 point or larger font, and perhaps use a cursive font. Add any other custom styling to the page that you want, but be sure all the styles you use are custom written by hand. Do not block copy CSS from some other project you find on the web, and do not use CSS properties that we have not discussed in class. (Okay, I might take a maximum one or two other properties, but only if you explain how they work in the paragraph you added at top of the HTML page.) In other words, I don't want you pasting in CSS that you don't completely understand, and I want you to stick exclusively, or almost exclusively, to the CSS properties we have discussed in class.

Turn it in

Push your repository. When you submit your assignment, tell the me the folder and file names you have used. (The folder and file names should, of course, be as specified above. If you have, however, gone off the res, then let me know.) You must provide a link to your page running on GitHub Pages. It's okay to include a link to your repository, in fact, I want you to do that. But also be sure to include a clickable link to your running pages. Use the Canvas Text page to provide these links.