Lab 14 Reflection

     In Lab 14 we were introduced to inserting JavaScript into our website. The premise of this lab was creating a button that changed a line of text when clicked. The first thing we needed to do after setting up the HTML file was code a button in HTML. A button is created in HTML by using the <button></button> tags. The button tag has 2 attributes, type and onclick. The type was set to button since it needed to function as such. The onclick attribute was set to the name of the function we would create later on in JS. By setting the attribute this way when the button is clicked it will call on the JS function of the same name to execute. In between the button tags we put text we wanted to display inside the button. Next came creating the line of text we wanted to change when the button was pressed. The line of text before the button was pressed was created by using <p> tags with the text going between the tags. This time, however, the <p> tags need an id attribute. This id will be referred to by the function we create in JS so the function knows which line of text to change. After this came creating our actual JS function. The <script></script> tags needed to be set up as in between these tags we would code in JS.  Once these tags were set up I started by coding a new function, function buttonClick() {}. I made sure the name of the function matched the onclick attribute I set for the button a few lines back. In between the curly brackets went lines of code that gave the function the ability to change my line of text. I coded document.getElementById("demo").innerHTML = "Mitochondria is the powerhouse of the cell"; making sure the entry inside the parenthesis matched the id of the line of text I wanted changed. This line of code utilizes DOM as it is a method of modifying elements inside a web page using JS. Finally, I tested my button to see it it worked as intended.
     These skills are important for a web designer since it adds a level of intuitive interactivity to a website. Buttons make user interaction more intuitive as the buttons guide the user to what they are supposed to click. It is more obvious what to click as people are used to pressing buttons. When the user sees a button on the web page they will find out what it will do (through text inside the button) and will know to click them for the desired result. Thus, a possibility of confusion is eliminated. Buttons also add variety to interactivity. A website could just have only hyperlinks that change elements or link to other pages but the use of buttons and hyperlinks make interactivity less boring. A web designer could be clever and give each method a specific instance for when it should be used. For example, hyperlinks to go to other web pages/websites but buttons are used to change things on the web page.