We will start with this code. Either click fork to use the online example in the video or copy and paste the code to a new page of your text editor
Getting started
To get started, you will need to create and link a JavaScript page to your HTML page. Like stylesheets, the JavaScript code will all go on a different page that will
have various effects on the HTML page based on what you tell it to do.
You can simply name the new JavaScript page "testing.js" and then link it to your html page using the tag <script src="testing.js"></script>
Of course, this by itself won't do anything because we have not written any JavaScript function yet
Changing text on a page
The first example we will go over is how to change the text on the page.
First, we need to set up an event trigger to call the javascript function. An event trigger can be a number of things, but for this
example we will use a button. You can set up a button like this:
<input type="button" value="click me" onclick="example1()">
the type sets it to be a button, the value is what the button will say on the HTML page, and the onclick is the event trigger that will call
the example1 function when you click on the button. Right now this will do nothing because there is no JavaScript function yet.
Next we need to specify what part of the page we are going to manipulate with our JavaScript. We can simply add a new paragraph and try it out there
<p id="id1"> This is were the text will change </p>
Your result should look like this:
This of course will do nothing because we do not have any JavaScript functions written yet, so we will need to switch to our js file.
When you create a function, there are two steps. You need to write the word "function" to declare you are creating a js function. You then need to give the function a name. The name
can be almost anything you like except a few reserved words. However, since we already wrote the name "example1" on our HTML page, that
is the name we need to match in order for it to work.
Following this, we use a set of curly braces like when we did stylesheets. In the curly braces, we'll write our actual js code. For this example, we will write:
There are several parts to what this does that I will break down for you:
document tells the function where to start looking at the highest level. In this case, the document is our HTML page
getElementById tells the function what part of the HTML document specifically to change. In this case, we gave a paragraph the id name of "id1", so
we need to match it exactly here in order to change the text of that paragraph.
innerHTML is how you specify that you are changing the text of your html tag.
"Hello World"; is what the text will be changed to. You'll notice it needs to be in quotation marks to work, and needs a semi colon at the end
You should also notice the weird capitalization I used, where after the first word the first letter of every word is capitalized. This is called camelcase, and if you
do not use it the function will not work.
Altogether, your javascript page should look like this:
Changing Style
Once you've learned the basics of changing a page, not a whole lot changes in your method.
In this example, we'll try a different trigger event called "onmouseover." This trigger will call a function when you place your mouse over that part of the HTML page. If we put it into a paragraph tag and add an id, we could
change the paragraph by placing our mouse on the writing. That would look like this:
The JavaScript code will be nearly identical to what we wrote for the first example, except:
We need the function name to be different, or else the triggers wouldn't know which function to use. We've already named it on the HTML page as example2(), so we need to match that
We need the id to be different, or else the JavaScript wouldn't know which part of the page it should be changing. We've already named it id2, so we need to match that
When changing style, instead of .innerHTML, we write
Where .style will tell the code were changing a style, .color is the name of the property we are changing, and ="pink"; is the colour we are changing it to. Altogether that looks like this:
Using Variables
For our last example we will try using variables. A variable is simply a placeholder that can store different types of data. In this example, we will use it to store the text that is entered into a textbox. That means our first
order of business is to create that textbox, which will be very similar to how we created a button:
<input type="text" id="textbox">
You'll notice there is no value - this is because I don't want my box to say anything ahead of time. There is also no onclick trigger because I don't want to click the box to activate the function. There is an id, which I've just named "textbox", which is
important because this id is how the JavaScript will retrieve the text from the box.
Next, we will need a trigger to send the value of the box to the js page. We can just use a button like we did above, we would just need to change which function the button calls:
Lastly, we need a place we are going to put the value from the box when we are done with it. We could just use an empty paragraph for this:
<p id="id3"> </p>
Altogether, the finished HTML page will look like this:
The JavaScript code will change a little bit here, as there is an extra step we will need to do to access the textbox information. First, we will need to store the textbox data in a variable:
var inbox = document.getElementById("textbox").value;
As you can see, we write the word "var" in front to declare we are making a variable, the name can be whatever we want, I just chose to use "inbox", and instead of .innerHTML or .style I used .value to indicate that I'm taking what is written in the box
Next, we can use this variable to create a sentence using something called string concatenation, which is a fancy term for adding words together to create a sentence. It would look something like this:
document.getElementById("id3").innerHTML = inbox + " Is the best lab instructor in the world";
You can see that it is just like the first example, except we are adding the inbox variable to the rest of a sentence. You'll notice the variable name is not in quotation marks - this is important, because if you placed it in quotation marks it would just write
the word "inbox", not use the value stored in it.
