spacer

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

home / programming / javascript / diaries / 4

[previous] [next]

Web Project Manager
Aquent
US-PA-Collegeville

Justtechjobs.com Post A Job | Post A Resume
Developer News
Mandrake Linux Founder Back, Virtually
Amazon: We're a Technology Company
Sun Expands MySQL With Closed Source

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.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

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

Whitepapers and eBooks

Symantec Whitepaper: Converging System and Data Protection for Complete Disaster Recovery
Intel Whitepaper: Comparing Two- and Four-Socket Platforms for Server Virtualization
IBM Solutions Brief: Go Green With IBM System xTM And Intel
HP eBook: Simplifying SQL Server Management
IBM Contest: Are You the Next Superstar? Join the "Search for the XML Superstar" Contest to Find Out
Intel PDF: Quad-Core Impacts More Than the Data Center
Intel PDF: Virtualization Delivers Data Center Efficiency
Go Parallel Article: PDC 2008 in Review
Avaya Article: Communication-Enabled Mashups: Empowering Both Business Owners and IT
Intel Whitepaper: Building a Real-World Model to Assess Virtualization Platforms
PDF: Intel Centrino Duo Processor Technology with Intel Core2 Duo Processor
Microsoft Article: Build and Run Virtual Machines with Hyper-V Server 2008
  Go Parallel Article: Q&A with a TBB Junkie
IBM Whitepaper: Innovative Collaboration to Advance Your Business
Internet.com eBook: Real Life Rails
IBM eBook: The Pros and Cons of Outsourcing
Internet.com eBook: Best Practices for Developing a Web Site
IBM CXO Whitepaper: The 2008 Global CEO Study "The Enterprise of the Future"
Avaya Article: Call Control XML in Action - A CCXML Auto Attendant
IBM CXO Whitepaper: Unlocking the DNA of the Adaptable Workforce--The Global Human Capital Study 2008
Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers
Symantec Whitepaper: Comprehensive Backup and Recovery of VMware Virtual Infrastructure
MORE WHITEPAPERS, EBOOKS, AND ARTICLES
webref The latest from WebReference.com Browse >
Popular JavaScript Framework Libraries: An Overview - Part 3 · Accessing Your MySQL Database from the Web with PHP · Working with the DOM Stylesheets Collection
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Fixing MySQL Replication · Firewall Guide: First Steps to Securing the Enterprise · VoxOx Tames the Tumultuous Communications Tangle

Created: May 27, 2005

URL: