Lab 2 Reflection Journal

  Lab 2 was about using JavaScript to manipulate and change elements on a web page based on user interaction. We were to create a web page that contained our bio and a picture of ourselves but also implemented alerts, prompts, confirmation prompts, buttons, and DOM manipulation by id. With these things in mind, the way I wanted my lab to function was to first greet the user using an alert and prompt them to enter their name.   To get my web page to function how I wanted it, I needed to make sure I used the proper functions in the correct order. To alert the user, the first function that would be executed in my script would be the alert() function, with my message inside the parenthesis in quotations. To prompt the user for their name, I had to use a new function, prompt("",""). Within the first set of parentheses would be my question but the second set would remain blank. This allows the user to enter a value when they are prompted with the message. Since I wanted to change my web page to say the user's name once they typed it in the prompt, I needed to create a variable that would store the name of the user and insert that variable into the HTML of the web page. Assigning the variable this value was easy, var name = prompt("What is your name?", "");, but then inserting this name took a bit more work. First I needed to make sure that the element I wanted to insert the name in had an appropriate id, in my case, it was a <h1> tag with id = "greeting". Then in the script, I used document.getElementById("greeting").innerHTML = "Welcome" + name; to change the HTML of the element to say the user's name.
These skills are important for a web designer because they allow a web site to respond and change based on how the user interacts with it. Having certain elements change or pop out when the user interacts adds to the experience because it makes the user feel what they're doing isn't trying to turn on a broken light. In online businesses, having elements change when the user makes a transaction adds to the user experience by providing feedback. The cause and effect sequence gives confirmation to the user that what they wanted to do has happened. The JS/DOM skills practiced in this lab help us replicate this effect by programming the page to listen for user interaction and changing the page based on how the user interacts.