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

One Comment

  • 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

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *