Create a fresh HTML document $($this part is going to be used to learn and experiment with JavaScript rather than be a final product$)$ Let$$s create our first statement that writes to the page. o Within the body of the HTML$,$ put an opening script tag and a closing script tag. Place the type attribute in the opening script tag and assign it the proper value as discussed in the readings. All code that goes in between these script tags will be JavaScript and only JavaScript. In between the script tags, we will write something to the document. In this case, document is the object and write$()$ is the method. We put the method onto the object by using the format: object.method$()$ What we want to write we will put in between the $().$ Since we will be writing text, or a string, to the document, make sure to put the text in quotes. Have the document write $$JavaScript is fun.$$ Do not forget a ; at the end of each line o Preview your page Alternatively, we could store the text in a variable so that we could reuse it many times without needing to retype it$.$ o Type the keyword var, to establish that we are creating a new variable. Give the variable a name, any name is fine as long as it is not a reserved word and meets the criteria from the reading. I am going to name my variable x$,$ therefore I will write var x$.$ o Now that we have this variable, that will hold information, we need to assign it some information. We will do this just like we did in algebra in high school by saying var x$=$JavaScript is fun$$; Notice that the left hand side of the equation is what we are assigning the value to and the right hand side of the equation is that value that is being assigned.

Replace the words to be printed in the document.write statement with your variable o Place the variable within the write method so it will be printed out. $$ Note that although the value of the variable is a string, and the variable therefore is a string type, the variable is still a variable and not a string. Because of this, we do not need quotes around the variable name. o Place the variable $5$ times within the write method so it is printed out $5$ times in a row $$ To do this you need to add, or concatenate, the strings together with the $+$ operator. For me to do this, I would type x$+$x$+$x$+$x$+$x$.$ The $+$ sign will add numbers together as well, but our data would need to be specified to be a number first or changed from a string to a number. Therefore even if our variable x $=5,$ because $5$ is in quotes it is being read as a string so adding it to another string $($i$.$e$.3)$ would return $53,$ not $8$ So what if we wanted this JavaScript to happen after a user does something and not right when the page loads? We would place the JavaScript code inside of a function and then ask that function to occur after we detect that a user does something.

Our code to be executed is not only the document.write$()$ statement, but also the line where we establish the variable and give it a value o Now our code will not run when the page loads, so we will need an event to happen to run it$.$ To keep things simple, we can add a button tag $($https:$//$www$.$w$3$schools.com$/$tags$/$tag$\_$button.asp$)$ except this time add the event attribute onclick. This onclick attribute will do something when the user clicks the button. What we want it to do is run our function, so we will set the onlcick value equal to the name of our function $($i$.$e$.$ if my function was named fun I would write $)$ o Now click the button and your function should run and print out what you asked it to$.$ o But wait, where did our button go$?$ It$,$ along with any other HTML we had on the page will disappear if document.write$()$ is run after the page initially loads. It is essentially replacing all of the document with just what is in between the $().$ o So if we wanted to print out that JavaScript is fun below the button, we could instead of having it write to the document itself, we could have it replace some text within a certain element $($html tag$)$ within the document.

So underneath the button, let$$s put a paragraph tag and have it read $$this will change$$

this will change

o We are going to change the innerHTML property of this tag. The innerHTML of a tag is the stuff that is in between the opening and closing tags, which in this case is the text $$this will change$$ o First we need to$,$ within JavaScript, identify the tag that we want to change. We can do this by using the getElementById$()$ method. This method simply locates an element with a specified id $($similar to intrapage links$).$ So place an id attribute in the opening paragraph tag $($i$.$e$.$

$)$ and then place the same id in the $()$ of the method $($i$.$e$.$ getElementById$($change$).$ o Once again I said we will change the innerHTML property of this element, so we will attach the innerHTML property to it by saying getElementById$($change$).$innerHTML o Now all we need to do is say which object this element is associated with. It is within the document, so we can use the document object and specify thanswer in html css and js