Okay, so if you started on part 01, and followed all of the steps outlined you will have a web page that has the following content in it named myWebPage.html  somewhere on your computer:

 

 

Source file

<center>

<p>

Welcome to my web site, this page is a basic example of how HTML works.

<a href="http://www.datafault.net"> Click Here </a>

  </p>

</center>

 

<div id="grayBox" style="background-color: gray">
<p>
<form id="sendMessageForm" method="POST" action="mailto:mike@datafault.net">

<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 id="submit" name="submit" type="submit" value="Send Message" />

</p>

</form>

</p>
</div>

which looks something like this when opened from a web browser:

 

 


 

Welcome to my web site, this page is a basic example of how HTML works.

Click Here

 

Your Name: Your Email:

Your Message:

 

 


So, now its time to get into the Javascript part of all this.

Javascript is very complex, and has a huge amount of things that it is capable of doing.  I’m only going to cover some basics — enough to give a new learner a rough understanding of how it works, and some tools they can use to create things using javascript on their own.

There are many ways to incorporate javascript on to a web page, but for this article we’re going to use the basic method of simply creating a <script>   tag with javascript enclosed in it and ending with a </script>  tag.

So, lets start with an extremely basic javascript command:  calling a message box with a message in it.

All you do is type within the <script> tag  and the </script> tag the command:

 

<script>
alert('whatever message you want to send');
</script>

You can add the above code anywhere in the document, but lets just add it to the end.  If you save the file and then load it in your web browser you will see a small message box appear with your message in it.

Most people can understand this concept fairly easily, so I’m going to assume that you can figure out how the alert command works.   The purpose of that was really to pave the way for the next topic:  executing multiple commands at once.

But first, lets dive into Javascript with regards to interaction with the web page itself.  Javascript allows the creator of the web page to access and change parts of the page without having to re-write the HTML code.

For example, lets say that we want our gray box around the <form>  that we created earlier to change colors — instead of gray we want it to be blue.  Well, its quite simple to do with Javascript actually. Javascript has a built-in command called getElementById(‘someId’)  which will basically return a reference to whatever object has a particular ID.  So, if we glance back at our web page code, specifically the <div>  html tag with ID grayBox that we used CSS to make it appear gray,  we can access that particular <div> element by typing:

Source file

document.getElementById('grayBox')

Lets say we want to change the color of that <div> to blue, all we have to do is access the ‘style’ property through javascript, and then set the background-color to blue.  Here’s how:
Source file

<script>
document.getElementById('grayBox').style = "background-color: blue";
</script>

All we basically did was set the style property of the HTML tag with the id property matching grayBox, which was our div that we created in part 01.  If you aren’t following me, go back and read part 01 completely.

 

You can use the same method to change any property value of any HTML tag as long as the HTML tag has an ID property set.  There are other, more advanced ways to access elements, but those you’ll have to find out about on your own.

So, now that we have explained how javascript can be used to interact with web pages, now we can go into creation of  javascript functions to execute multiple commands at once.  For this example, we’re going to create a function called “makeFormBlue()”  which will transform the <div>  with the ID ‘grayBox’  from  its current color to blue.

To do this, we simply surround the code above with the function command like this:

 

<script>

function makeFormBlue() {
     document.getElementById('grayBox').style = "background-color: blue";
}

</script>

 

What this does is creates a shortcut that can be used on the web page which will perform the CSS style sheet modification by simply calling the command makeFormBlue().  To demonstrate this, we’re going to   add a simple event handler on to our “Send Message”  button at the bottom of the form, which will cause the form to turn blue when clicked.

This is done by using the onClick property like this:

 

<input onClick="javascript: makeFormBlue()" id="submit" name="submit" type="submit" value="Send Message"  />

So, the entire document should look like this if you are following:

Source file

<center>

<p>

Welcome to my web site, this page is a basic example of how HTML works.

<a href="http://www.datafault.net"> Click Here </a>

  </p>

</center>

 

<div id="grayBox" style="background-color: gray">
<p>
<form id="sendMessageForm" method="POST" action="mailto:mike@datafault.net">

<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>

Go ahead and save it and then open up the page in your web browser.  You will notice that the grayBox is gray — then try clicking on the ‘Send Message’ button at the bottom — you will notice that the box becomes blue.

You should now have more than enough information about HTML, CSS, and Javascript to be able to play around with it and change different styles and properties of a web page.  I suggest visiting the Javascript tutorial on http://www.w3schools.com/js/default.asp which has an in-depth tutorial that will give you more of a detailed explanation of many of the other things Javascript can do.   In fact, you may also want to brush up on your HTML first by visiting:

http://www.w3schools.com/html/default.asp  [HTML Tutorials from www.w3schools.com] before jumping into Javascript.

Once you have gone through both of these tutorials on www.w3schools.com from start to finish, then proceed to part 03 of my HTML/Javascript basics tutorial. Part 03 will not make any sense without knowing the fundamentals of both Javascript and HTML.

6 Comments

  • I constantly spent my half an hour to read this website’s articles or reviews daily along with a cup of
    coffee.

  • My brother recommended I might like this blog. He was totally right.
    This post actually made my day. You can not imagine just how much time I had spent for this info!
    Thanks!

  • I am sure this piece of writing has touched all the internet users, its really
    really pleasant piece of writing on building up new
    blog.

Leave a Reply

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