Sunday, December 25, 2011

Exploring JavaScript

Happy holidays! For all of you beginning web designers, I'm giving you a little gift: the gift of JavaScript. This, along with Exploring CSS and Exploring HTML, is a tutorial so you can learn about JavaScript and how it relates to HTML.

What is JavaScript, anyway? As you have learned, HTML is the structural part of the site, and CSS is the styling part of it. JavaScript, which is used basically everywhere, adds functionality to your website. It's like programming, on the internet. (I'm learning JavaScript with you; that's how I understood CSS!)

One of the most basic elements of JavaScript is the var attribute. It stands for "variable" just like the variables in math. Do you get tired of typing the same thing, if it's a URL or some text, on a website? Well, var is your solution. Here's an example:

<script type="text/JavaScript">
var TheEClub
TheEClub = "The E Club."
document.write("I want to go on " + TheEClub)

In HTML, you have to include the <script> and </script> tags and put the JavaScript in between. The line below the JavaScript declaration, or the first line of the example, declares that the variable is named TheEClub. The next line defines what text (or it could be images, videos, etc.) is displayed when put into the document.write area. The next line is the real text printed on the computer screen. The + TheEClub "strings" along the variable TheEClub into the text, actually displaying the "definition" of the variable, "The E Club."

In basic HTML (since blog posts do not support JavaScript very well), here's what it should look like. (There's also the text, "WebAspire is a division of The E Club" in the sidebar, also written using JavaScript variables.)

I want to go on The E Club.

There's also another way in which JavaScript can be incorporated into HTML. Click on the buttons below.

This button uses the JavaScript onclick="alert()" function to create a pop-up window, with an "alert" about how awesome The E Club Family Websites are.

This button uses the JavaScript onclick="prompt()" function to do the same thing as onclick="alert()", but the pop-up now has an input area where you can type in. The answer is already there thanks to putting a ",'14'" after the real question in the JavaScript code.