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.

22 Comments

  • Hello, i feel that i noticed you visited my site thus i got here to go back the choose?.I am attempting to to find issues to enhance my
    website!I suppose its ok to use a few of your ideas!!

    • Go for it. Nothing really amazing happening with my site, but if you want to, feel free to copy whatever you want. You might find yourself having some issues copying some of the more advanced stuff, but if you want to give it a try, the source code is available on my github.

  • You’re so awesome! I do not believe I’ve truly read something like that before. So nice to find another person with some unique thoughts on this topic. Seriously.. thanks for starting this up. This site is one thing that’s needed on the web, someone with a little originality!

  • you are in point of fact a excellent webmaster.
    The site loading pace is amazing. It kind of feels that
    you are doing any distinctive trick. Moreover, The contents are masterpiece.

    you’ve done a excellent job on this topic!

  • Thank you for the good writeup. It if truth be told
    used to be a leisure account it. Glance advanced to
    far delivered agreeable from you! However, how can we be in contact?

  • Excellent beat ! I would like to apprentice while you amend
    your website, how can i subscribe for a blog site?
    The account aided me a acceptable deal. I had been tiny bit
    acquainted of this your broadcast provided bright clear idea

  • “I delight in, lead to I found exactly what I used to be having a look for. You’ve ended my 4 day long hunt! God Bless you man. Have a great day. Bye”

  • “Having read this I believed it was really informative. I appreciate you finding the time and effort to put this information together. I once again find myself personally spending a significant amount of time both reading and posting comments. But so what, it was still worthwhile!”

  • You could certainly see your skills within the article you
    write. The world hopes for even more passionate writers such
    as you who are not afraid to mention how they believe.

    At all times go after your heart.

  • Hey there! I could have sworn I’ve been to this website before
    but after checking through some of the post I realized it’s new to me.

    Anyhow, I’m definitely glad I found it and I’ll be book-marking and checking back often!

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

  • 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 constantly spent my half an hour to read this website’s articles or reviews daily along with a cup of
    coffee.

Leave a Reply

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