Lab 2 Reflection

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 and alert and prompt them to enter their name. Then based on what they entered as their name, they would be taken to the web page that greeted them using their name and had a button to reveal my bio and photo. Clicking the button would also reveal a button to play a game, first giving the user a confirmation prompt if they wanted to play before having to play the game.

    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 executing 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 parenthesis 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 an <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.
Now that the user was greeted, I made a button in the HTML using the <button> tag but this gave it no function. To make it do something, I created a function in the script to be called by the button when it was clicked. In this function, bigReveal(), there were lines of code which set the display of the div containing my bio and image to block, but for this to work I had to make sure this div was initially set to display: none in my CSS. All that was left to do was make sure the onClick attribute in my HTML was set to this function. In much the same fashion, I created another button that would start a game when it was clicked, but first I wanted to give the user a confirmation prompt before they started, just in case they didn't mean to click the button or changed their mind. The way this was done was using the confirm() function within the overall function this game button would call, with a message in quotations going in between the parenthesis. Since there are different outcomes based on if the user confirms or not, we need to store the prompt in a variable just like the name prompt from before, var c = confirm("Are you sure you want to play?");. Now the variable c is treated as a Boolean and different outcomes can be coded for based on user response.
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.