1.05 Skill-builder: Hello Javascript!

Let's make things change

Adding javascript code to your HTML document

Javascript is special programming language that is used to change and manipulate HTML code.

You probably noticed that HTML does not change much by itself. You use javascript code to make things happen inside the HTML document.

Technically, you can put javascript code pretty much anywhere in your HTML pages, but keeping all of your code in the <head> of your document keeps your code legible and organized. You separate your javascript code from the HTML by enclosing your javascript inside <script></script> tags.

Some small bits of javascript are included inside the HTML tags themselves. In the example you are making today, the onclick="" event attribute calls a javascript function when something is clicked. Although you can technically put miles of code inside these event attributes, please don't. Instead, have them call a function that is defined in the code inside <head><script></script></head>.

Changing your HTML

Javascript can change the code inside a tag by changing the .innerhtml attribute of an HTML object.

When a web browser displays a page, it organises all the blocks of HTML code into objects nested inside each other. It can refer to these objects in a couple of ways:

Once you get a reference to a specific element, you can change the HTML inside it. For example,

	document.getElementById("elementID").innerhtml = "Here piggy, piggy!";
				

replaces everything inside the tag with elementID with Here piggy, piggy!

Saving your work

Open your editor and save the empty document as "1.05S-HelloJavascript-LastName.html"

The assignment

  1. Enter the example code below
  2. Customize it to match your style, but don't lose the click function
  3. You do not need to keep all of the comments, but add ones that explain the basics

Extend and expand

Add a whole bunch of writing and other HTML tags in your document that have id="" attributes. Then add more buttons.

Can you figure out how to make text clickable?
Can you figure out how to make an image disappear when you click on it?
How about making an image appear when you click a paragraph?