spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / programming / javascript / diaries / 4

[previous] [next]

Data Center Architect
The Computer Merchant, Ltd
US-MA-chelsea

Justtechjobs.com Post A Job | Post A Resume
Developer News
News Flash: Adobe Has iPhone Workaround
Adobe's Flash 10.1 Goes Mobile (Minus iPhone)
A Salute to Visionary CEOs


The JavaScript Diaries: Part 4

Let's create a function and see how it works. First, we'll declare the function so we can load it into memory:

<script type="text/javascript">
<!--
  function music() {
    var place="Delta";
    var type="blues";
    document.write("I like " + place + " " + type + ".");
  }
//-->
</script>

Next, we call the function:

<script type="text/javascript">
<!--
  music();
//-->
</script>

Once the call is made, the JavaScript interpreter checks to see if the function has been loaded into memory. In our example above, it's already loaded because it came before the function call. Once the JavaScript interpreter finds the function, it proceeds to execute the code contained within the curly brackets. In this case, the code is executed as follows:

  • Two variables, place and type, are declared and initialized with the values "Delta" and "blues," respectively.
  • Next, we have the document.write command. (We'll go into more detail about it in a later installment. Basically, the document.write command tells the script to write the contents of the argument [the data contained in the parenthesis] onto the Web page.) In this case, it will write the string "I like ", then append (concatenate) to it the value of the variable place, followed by a space, " ", then append the value of the variable type, finally it will append a period, ".".
  • The result will be printed out on the Web page: I like Delta blues. It's printed on the page where the function call is made.

This time we'll try doing the same thing with a few changes. We'll change the document.write command to an alert command and we'll call it from within the function itself. (Be sure to try this out yourself.)

<script type="text/javascript">
<!--
  function music() {
    var place="Delta";
    var type="blues";
    alert("I like " + place + " " + type + ".");
  }
  music();
//-->
</script>

You can even call it from within a link (thanks to Andrew and Jonathan Watt). Put this code in the <head> portion:

<script type="text/javascript">
<!--
  function greetVisitor() {
    var myName = prompt("Please enter your name.", "");
    alert("Welcome " + myName + "!");
  }
//-->
</script>

Then, add this link somewhere in the body of the page and click on it:

<form>
<input type="button" value="Click for Greeting" onClick="greetVisitor();">
</form>

Here's one that provides a solution if a name is not entered. It uses a conditional statement and some of the operators were studied in the previous release of the JavaScript Diaries:

Place this in the <head> portion:

<script type="text/javascript">
<!--
  function greetVisitor() {
    var myName = prompt("Please enter your name.", "");
    if ( (myName == "") || (myName == null) ) {
      alert("Don't you even know your own name?");
      }
    else {
      alert("Welcome " + myName + "!");
      }
  }
//-->
</script>

Then, put this in the <body> portion:

<form>
<input type="button" value="Click for Greeting" onClick="greetVisitor();"
</form>

Be sure to try it out all three ways: putting in your name; pressing "OK" without putting in your name and pressing cancel.

This one is fairly simple:

  • The function call is triggered by clicking on the link.
  • The function greetVisitor is declared.
  • The variable myName is declared and initialized with a value. In this case it happens to be a command to display a prompt window, which we have seen before.
  • Next, a conditional statement is begun.
    • If the answer to the prompt is either blank (myName == "") or ( || ) null (myName == null), then an alert window is displayed that says Don't you even know your own name?.
    • If the answer to the prompt is not blank or null, then an alert window is displayed that says, Welcome and displays the value of the variable myName.

For those of you who have forgotten, null is a "built-in" variable that does not have a value. It does not return a zero or a space. It's usefulness is seen above, for testing purposes.

home / programming / javascript / diaries / 4

[previous] [next]

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Building a Banking Application Home Page with OOP · Mixing Scripting Languages · Review: phpFox, a Social Networking CMS with all the Bells and Whistles
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Enterprise 2.0: Social Networking in the Cloud · BroadSoft Marketplace Hastens Pace of Telephony Innovation · Review: HTC Hero for Sprint

Created: May 27, 2005

URL: