The JavaScript Diaries: Part 3 - Page 5

[previous] [next]

The JavaScript Diaries: Part 3

Let's take what we've learned and apply it to a few scripts.

First let's take a look at a script using the assignment operator ( = ) and the addition operator ( + ). This short script will hide your e-mail address from spammers but still allow your visitors to see it and click on it as a mailto link (compliments of The JavaScript Source). Here's what the script will look like on the page: (Be sure to try this yourself):

<script type="text/javascript">
<!--
  var user = "lunderwood";
  var site = "jupitermedia.com";
  document.write('<a href=\"mailto:' + user + '@' + site + '\">');
  document.write(user + '@' + site + '</a>');
//-->
</script>

Let's look at the script, starting from the top. First, we initialize and declare two variables, user and site. We use the assignment operator ( = ) to assign the values, lunderwood and jupitermedia.com, to the two variables. These values are the user name ("user") and domain name ("site") of the e-mail address, without the "@" symbol.

Next, we use the built-in JavaScript function document.write to create a mailto link using our variables. First, we'll build the actual link. ( Note that each string is enclosed in single quotes.) The document.write function is declared and then we give the value to be used by the function. We begin by creating a string with the HTML element used for e-mail links, '<a href=\"mailto:'. We have used the backslash ( " \ " ) to tell the JavaScript interpreter that the next character (in this case a double quote), is to be interpreted literally. e.g. We have "escaped" the double quote. In other words, "print the double quote on the page." We then use the addition operator to join together ("concatenate") the rest of the link: the variable user, the "@" symbol, the variable site, the end of the HTML link element, \">, and a semi-colon. Notice that, again, we have used the escape sequence for the double quote.

On the next line we will display the text used for the link and input the end tag for the link element. Once again the document.write function is declared. From there it is just a matter of joining the pieces together. The variable user, the "@" symbol, the variable site, the closing HTML tag, and a semi-colon.

Let's look at another one. (This one is taken from JavaScript: A Beginner's Guide):

<script type="text/javascript">
<!--
  var paycheck=2000;
  document.write(paycheck+"<br>");
  paycheck+=2000;
  document.write(paycheck+"<br>");
  paycheck=paycheck-500;
  document.write(paycheck+"<br>");
  paycheck=paycheck*0;
  document.write(paycheck+"<br>");
  paycheck=paycheck+500;
  document.write(paycheck+"<br>");
  paycheck-=80;
  document.write(paycheck+"<br>");
//-->
</script>

Each line here will be displayed on the page using the built-in JavaScript function document.write.

From the top of the script, we declare the variable paycheck and initialize it using the ( =) operator with a value of 2000. We then print out the value of the variable paycheck. (Each line ends with the HTML element <br> to give a line return.) Next, we apply the add and assign operator ( += ), which will add the number 2000 to the variable paycheck and assign the new value to the variable, making the value of the variable 4000. Next, the variable is assigned a new value of itself minus 500, giving the variable a value of 3500. Next, the variable is assigned the new value of itself multiplied by 0, resulting in a value of 0. Next we assign the variable the value of itself plus 500, giving the variable a new value of 500. Finally, we use the subtract and assign operator to subtract 80 from the value of the variable and then assign it to the variable, making the value of the variable now 420.

[previous] [next]

Created: May 13, 2005

URL: