Lab 20 Reflection
Lab 20 incorporated many of the things we learned from Lab 18, with the functionality holding many similarities. In Lab 20 we were to create a webpage that compares 2 numbers, x and y. The user is supposed to be able to see if x is greater than y, y is greater than x, x and y are equal, etc. The interface is similar to Lab 18; there is an area to input two values, there is an area with many buttons that lead to a specific outcome, and there is an area to view what the outcome is. Unlike Lab 18, the buttons don't perform an arithmetic operation on the 2 values but check if a certain comparison between the 2 values is true or false. The result area, instead of displaying the result of an arithmetic operation done on 2 numbers, displays if a certain comparison between 2 values is true or false, essentially displaying the result of clicking the now comparison buttons.
I started Lab 20 just like I started Lab 19, by duplicating the code for Lab 18. There was not much to change in the HTML at first, just a few headings needed to be changed to reflect this webpage compared 2 numbers instead of performing arithmetics. I also added a few more buttons, for a total of 6 buttons, to account for all possible comparisons possible. The value attribute was also changed to reflect what comparison it was meant to do. In the JS of the page I deleted all the functions that were already there, since they performed arithmetics, and coded for new comparison functions. As for the variables I kept var x and var y but deleted var result since it was wasn't necessary for this lab. A function I coded for checked whether x was greater than y, which I defined as greaterThan(). Inside this function I gave x the value of what the user typed inside the x input box using DOM, x = document.getElementById("x_val").value. The y variable was assigned what the user typed inside the y box in much a similar way. I then displayed if x being greater than y was true of false with one line of DOM, document.getElementById("result").innerHTML = x>y. What this line does is first see if x is indeed greater than y. Based on its findings the result section will display, in words, true or false. I created other comparison functions using the same structure but with the last line of DOM changed to perform a different comparison. With new functions I went back into the HTML of the webpage and changed the onClick for each buton to use the new function I coded for it.
I started Lab 20 just like I started Lab 19, by duplicating the code for Lab 18. There was not much to change in the HTML at first, just a few headings needed to be changed to reflect this webpage compared 2 numbers instead of performing arithmetics. I also added a few more buttons, for a total of 6 buttons, to account for all possible comparisons possible. The value attribute was also changed to reflect what comparison it was meant to do. In the JS of the page I deleted all the functions that were already there, since they performed arithmetics, and coded for new comparison functions. As for the variables I kept var x and var y but deleted var result since it was wasn't necessary for this lab. A function I coded for checked whether x was greater than y, which I defined as greaterThan(). Inside this function I gave x the value of what the user typed inside the x input box using DOM, x = document.getElementById("x_val").value. The y variable was assigned what the user typed inside the y box in much a similar way. I then displayed if x being greater than y was true of false with one line of DOM, document.getElementById("result").innerHTML = x>y. What this line does is first see if x is indeed greater than y. Based on its findings the result section will display, in words, true or false. I created other comparison functions using the same structure but with the last line of DOM changed to perform a different comparison. With new functions I went back into the HTML of the webpage and changed the onClick for each buton to use the new function I coded for it.
These skills are important for a web designer because they are a part of using booleans in a website's code. In a website certain events can be set to happen when a certain condition is true. If the user needs to login to an account booleans are implemented to allow access to the acount only if the user enters both the username and password correctly. In the lab we did the comparison operator that would be used in this type of function would be strictly equal, ===. What we did in this lab helps us program these types of events by using boolean comparisons. These comparisons can be used to take user input and see if what the user input matches a trigger to an event and set off the event if it does. It adds depth to user interactivity.
Comments
Post a Comment