Lab 4 Reflection

     Lab 4 was about using JS objects to create a customizable ninja that can perform certain actions. The webpage we were making was to contain an image of our ninja, a text area to view the traits of the ninja, an area with buttons which make the ninja do a certain action, and a text area to see the outcome of the actions. My first step in making the lab was positioning the required elements in the html page, using CSS to put the buttons underneath the image and positioning the trait and action areas so that they were next to each other and underneath the image and controls. Next came programming the customization process and the onClick functions for the buttons, things that took a fair amount of JS.
     Part of setting up customization features required storing an object in a variable for the ninja, var ninja. A JS object is a collection of unordered data, called properties, relating to a variable, the data that can be stored being a wide range of types such as strings, Booleans, numbers, etc. Since the ninja needed a name, hair and eye color, and favorite weapon, I needed to define those properties and store a placeholder string, looking something like var ninja = { name: "Sample", eyeColor: "sample", hair: "sample"}. Other things I needed my ninja to have were a list of favorite foods, a birthday, and 3 action: punch, kick, and dodge. The data I would need to store for these things would have to be an array, another object, and 3 functions, respectively. To store an array, I would first declare my property, open up hard brackets, and write the items in my array like I would do for a normal array, var ninja = { favFoods: ["item1", "item2", "item3"]}. Storing an object within a variable was just like making an object except the properties of the child object within the parent object had to be in quotations, var ninja = { bDay: {"day": 0, "month": 0, year: 0}}. The only exception in this particular case is year since it already exists as part of a predefined function in JS. Lastly, storing a function in a property is just like coding a normal function except no name is given to it, var ninja = { punch: function(){//sample}}.  The way to refer back to these properties follows the format of varName.property()or varName["property"], this being important for customization and text display (note: parentheses are only used to refer to properties that are functions, otherwise they are excluded). The way the user gets to name their ninja is via prompt, the name they type in being stored in the ninja's name property, var ninName = (ninja["name"] = prompt("Name your ninja:", ""));. In the HTML, the text can be changed via DOM using the reference to the property, document.getElementById("nin-name").innerHTML = ninja.name;. Finally, the functions of the ninja can be called in the onclick of the buttons just by referring to them in the HTML, <button onClick="ninja.kick();"></button>.
     These skills are important for a web designer since it can make coding easier and concise. If there are multiple elements on a webpage relating to one thing, let's say the bios of people, while you can add in the text individually in HTML, it's a lot of work. If something about a particular person were to change, it would mean having to go through multiple lines of HTML to locate the one element to change. However, making an object and using DOM to change the HTML makes things easier since all you have to do is create the object in the HTML and let the DOM fill in the rest for you. You can create multiple bios without breaking a sweat since the base object is the same, all you have to do is create an object for each person and let the DOM fill it in. Using objects can even allow the people you're creating bios for to fill in their information themselves, saving you even more work and not making things too complicated on the user side.