• Create a fresh HTML document (this part is going to be used to learn and experiment with JavaScript rather than be a final product)
• Lets create our first statement that writes to the page.
  • 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
  • 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.
  • 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.
  • 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
  • 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.
  • 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
  • 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 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
  • Now click the button and your function should run and print out what you asked it to.
  • 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 ().
  • 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, lets put a paragraph tag and have it read this will change

    • this will change

  • 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
  • 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).

  • 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
  • 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 that by saying document.getElementById(change).innerHTML
  • Now that we have identified what we want to change, lets change it. We do that by setting what we want to change to be equal to the new value, so for me it is: document.getElementById(change).innerHTML = x+x+x+x+x;
• If we wanted to, we could copy everything between the script tags to a new notepad document, and save it as an external JavaScript file. This is a good idea to always do, as the validator does not like much JavaScript.

• QUESTION 1: Lets sabotage some of our code. Remove the opening curly bracket, {, from the function. Refresh the page. Is the error message that is now produced useful? Why or why not?
• QUESTION 2: Put back in the curly bracket. Change the name of the function that you call to have a different name then the actual function that we made. Click refresh. Is there a new error message? Click the button to run the function. Is there a new error message now? Is the message helpful?
• QUESTION 3: Fix the problem and this time change the name of your variable. What error message is produced now? Is it helpful?
• Fix the name of the variable
• Code and answer to questions.