Okay, so, if you are reading the this article, that means that you have mastered all of the concepts in part 01 and part 02 of this multi-part series.
This means that you know how to create a basic javascript onClick event and attach it as an attribute to an HTML tag, and then create a function which modifes the StyleSheet of an object matching a specific ID.
In other words, you should not have any confusion about the code block below, and everything should make perfect sense.
<center>
<p>
Welcome to my web site, this page is a basic example of how HTML works.
<a href="https://www.datafault.net"> Click Here </a>
</p>
</center>
<div id="grayBox" style="background-color: gray">
<p>
<form id="sendMessageForm" method="POST" action="mailto:spam@google.com">
<p>
Your Name: <input id="inputName" name="Name" type="text" />
</p>
<p>
Your Email: <input id="inputEmail" name="Email" type="text" />
</p>
<p>
Your Message: <textarea id="inputMessage" name="Message"></textarea>
</p>
<p>
<input onClick="javascript: makeFormBlue()" id="submit" name="submit"
type="submit" value="Send Message" />
</p>
</form>
</p>
</div>
<script>
function makeFormBlue() {
document.getElementById('grayBox').style = "background-color: blue";
}
</script>
If you understand how the background of the form turns blue when you click on the submit button, then you are ready for this section.
If you do not understand how or what the above code works, I suggest revisiting part 01 and part 02 prior to reading this, as this particular section will make no sense otherwise.
Now, lets begin with part 03: Functions and Objects
Lets start with variables, and then move up to arrays. We already learned that a variable is basically a placeholder which can store information in it.
Variables are specified like this:
var myVariable = "my special data";
Once you create the variable called myVariable, and set it to a specific value such as the string “my special data”, then you can access the variable later on by simply typing myVariable instead of re-typing the entire string. This will come in handy later on when we start really programming.
But for now, here’s a quick example of a variable in all its glory. Go ahead and copy/paste the code below into a blank html file and then open it in your browser to see a demonstration.
Source file
<HTML>
<BODY>
<script type="text/javascript">
var myVariable;
myVariable = "This string is stored in the variable for quick reference";
alert(myVariable);
</script>
</BODY>
</HTML>
Opening up a page with the above code will result in an alert message on the screen containing the message:
This string is stored in the variable for quick reference
This is fairly simple to understand, so lets take it one step further. Now what we’re going to do is make the variable called ‘myVariable’ automatically change based on the text in a separate element. This particular script will take advantage of everything covered in the previous articles, both part 01 and part 02 of HTML5/Javascript basics.
So, in order to tackle this problem we’re going to break down the whole thing into easy to follow pieces.
Here’s the original idea:
make the variable called ‘myVariable’ automatically change based on the text in a form input text element
So, lets start by making a variable called myVariable inside of a <script> tag.
<script>
var myVariable;
</script>
Okay, that was easy enough. Next it says that myVariable will automatically changed to whatever text is current in a form text input element.
Well, we know from part 01 and part 02 that we can create text input elements by placing the following code in between the <body> and the </body> HTML tags.
<form>
<input Id="myTextInput" Type="text"></input>
</form>
So, now we basically have an HTML file that looks like this:
<html>
<body>
<script>
var myVariable;
</script>
<form>
<input Id="myTextInput" Type="text"></input>
</form>
</body>
</html>
Now, what about that pesky automatically changing variable part? For this part there are actually many different ways to accomplish this particular task.
First, lets make a quick button so that we can verify that our code is working after we write it.
Here’s how:
Remember how we added the onClick attribute to the input button in part 02? Well, we’re going to use this attribute to add in a quick way to verify if the variable has really changed automatically. For this we’re going to do a simple onClick attribute for a new button that simply pops up an alert message with the variable as the message. Here’s the code for our test button:
<button onClick="javascript: alert(myVariable)">Test</button>
Just put this code below the </form> tag to add in a test button. Clicking on this button will pop up a message box that shows the value of myVariable.
Okay, back to the part about automatically setting the variable myVariable to whatever you type into text input box with the ID myTextInput
One way to accomplish this is to use a very similar method to the onClick method that we used for the test button. However, instead of onClick, we can use onChange.
So, what we’re going to do is simply add in an onChange attribute to the Input element with the ID myTextInput like this:
<input Id="myTextInput" Type="text" Onchange=""></input>
Next, we’re going to simply set the variable myVariable to the text input’s value with the following code in between the quotation marks after the onChange attribute;
Onchange="javascript: myVariable = this.value;"
We use the term this to refer to the input HTML element which the code is running in. For any onClick or onChange or on<anything> event attributes, you can always use this to refer to the object which the event is happening on.
Subsequently, this.value returns whatever text is currently entered into the Text Input.
Now our entire HTML file looks like this:
<html>
<body>
<script>
var myVariable;
</script>
<form>
<input id="myTextInput" type="text" onchange="javascript: myVariable = this.value;"></input>
</form>
<button onclick="javascript: alert(myVariable)">Test</button>
</body>
</html>
Go ahead and save the file, then open it up in your web browser. You should be able to type anything into the blank input box and click on ‘Test’ to see that very same value appear in a message box.
If everything so far makes sense, then you’re ready for this next section. If you aren’t quite sure what’s happening up to this point, please carefully re-read javascript basics part 02, and then carefully re-read this article from the beginning.
The reason I keep stressing going back and re-reading stuff that you have already read is because many of the previously mentioned concepts will make more sense once you have seen them in action as compared to when they are first introduced. So, go ahead, and re-read part 02 if you have any uncertainty.
If you understand everything in the last example completely, you should be able to create some basic Javascript on your own.
The next part is a challenge for you to solve:
Create a HTML file that has a FORM with two Text Input boxes. Add in the Javascript code to make it so that whenever you enter text into one of the Text Input boxes, the second Text Input Box changes its text to match what you typed into the first one automatically.
This challenge is very similar to the last example, with some subtle differences.
After completing the challenge, you can continue reading.
Solution to Challenge:
This challenge appeared to be quite similar to the example code provded before the challenge. However, after attempting to write the code, I’m sure you ran into a roadblock when it came to setting the value of another input text element. The reason is becaue we havn’t covered that directly. However, by using all of the tools covered in previous articles in this series, you should have no problem creating this solution.
There are many different ways to solve this problem. Here’s one way it can be done by using the techniques discussed so far:
<html>
<body>
<form>
<input id="myTextInput_1" type="text" onkeyup="javascript:
changeInputBox('myTextInput_2', this.value);" />
<input id="myTextInput_2" type="text" onkeyup="javascript:
changeInputBox('myTextInput_1', this.value);" />
</form>
<script>
function changeInputBox(inputBox, newValue) {
var boxToChange = document.getElementById(inputBox);
boxToChange.value = newValue;
}
</script>
</body>
</html>
You could have solved the challenge a completely different way. The way I chose to solve it was by creating a function with two input parameters, one for the box to change, and the other for the new value.
That way, all I had to do was add in a call to that function with the desired box and value in order to change its value.
This should all make perfect sense.
If you are not having an ah-ha moment, then re-read parts 01-03 completely again.
If you still are not quite following me, I suggest doing an Internet search for ‘javascript tutorials.’ There are more tutorials than you can shake a stick at. In fact, I would suggest reading a few different tutorials in order to gain a broader knowledge of the different tools, techniques, and methodologies that exist for Javascript.
If you are ready for more action, continue on to the next section of this article.
Starting now, I will be making the assumption that you fully understand all of the fundamentals of Javascript that have been covered so far. No more hints, no more repeating information.
Object and Arrays
Every time you create a variable, that variable is really an Object that Javascript will recognize later. There are exceptions:
If a variable is created within curley braces, it will only exist within those curley braces. So, if I create a variable called myVar like this:
{
var myVar = "my text";
}
Then, I can only access myVar within the braces. The curley braces are commonly referred to as a scope. Objects created within a scope only exist within that scope. This doesn’t apply to setting the value of a variable, only defining it.
Here’s a few Examples:
Correct:
function my_function()
{
var myVar = "my message";
alert(myVar);
}
Incorrect:
function my_function()
{
var myVar = "my message";
}
alert(myVar);
Correct:
var myVar;
function my_function() {
myVar = "new message";
}
alert(myVar);
The last one appears to be incorrect at first, as myVar is being called from outside of the scope of my_function(), however it is not because the variable myVar is actually created outside of the scope of my_function(), therefore, it can be accessed from outside of the scope of my_function().
Additionally, my_function() is defined as a function, but in reality in Javascript it is treated as an Object just like myVar. What this means is that the function my_function() exists in the scope that contains myVar (global), and because of that is able to inherit members into its scope, but not out from.
Essentially scope propogation is a one-way battle — child objects inherit objects from the parents scope, but parent objects cannot inherit things created within the child scope.
Objects can also contain objects within them. These can be functions, values, arrays, or objects. The way to define a new object within an object is by using the dot operator like this:
var myVar.text1 = "first message";
var myVar.text2 = "second message";
alert(myVar.text1);
alert(myVar.text2);
alert(myVar.text1 + myVar.text2);
This lets you store many different values inside of an object. You can also define a value to be a function like this:
myVar.showMessage = function() {
alert("Message 1: " + myVar.text1 + ", Messsage 2: " + myVar.text2);
}
then calling
myVar.showMessage();
Will result in the following message being displayed:
Message 1: first message, Message 2: second message
Coming Soon: Arrays and iteration
It took me a couple of days to get used to it. What I did is that I got a small piece of paper and wrote the sytnax and posted it on the side of my monitor. Some sort of cheatsheet