The \'\'with\'\' Statement

Like the ternary conditional operator, the with statement is a shortcut. Instead of having to list all of the properties of an object by repeating the basic object, you can state the bulk of the object in a with statement and then the properties within the context of the with statement. For example, take a typical form object. First you must state the object as follows:

document.formName...

Then you follow with the element names and values:

…elementName.value

Thus, your statement would be

document.formName,elementName.value

A typical form could include several different elements, such a first name, last name, address, city, state, ZIP code, Social Security number, and all other kinds of property details. Using the with statement, you can specify the object name once and then follow it with all of the properties and their values in this format:

with (object) {
statements with properties only 
}

The statements are typically property values. In the following simple example, the script uses a single with statement and then places the property values of the object in the statements within the with context:

<html> 
<head> 
<title>with</title> 
<script language="JavaScript"> 
function showEm(){
      with (document.customer) {
      var alpha=fname.value; 
      var beta=lname.value; 
      var gamma=address.value; 
      var delta=city.value; 
      var epsilon=state.value; 
} 
var fullName=alpha + " " + beta + "\n"; 
var livesHere=gamma + "\n" + delta + ", " + epsilon; 
alert(fullName + livesHere); 
} 
</script> 
</head> 
<body bgColor="cornsilk"> 
<form name="customer"> 
<input type=text name="fname"> First Name: 
<input type=text name="lname"> Last Name: 
<br> 
<input type=text name="address"> Address: 
<br> 
<input type=text name="city"> City: 
<input type=text name="state" size=2> State: 
<p> 
<input type=button value="Click Here" onClick="showEm()"> 
</body> 
</html>

When and where to best use the with statement depends on the application, but, as can be seen from the example, it helps to clean up and simplify references to multiple properties in an object.

1. Types of operators in JavaScript
Assignment Operators The key assignment operator is the equals sign (=). The left operand is a variable, an array element, or an objec...

2. JavaScript Lives in a Web Page
All the code that you write for JavaScript goes into an HTML page. If you don't know HTML yet, you should run out and get a good book on HTML. Lynda and William Weinman's...

3. JavaScript Literals
The raw data that make up the root of data types are called "literals." These are, in effect, literally what they represent themselves to be. Numbers, strings, and Boolea...

4. JavaScript Variables
I like to think of variables as containers on a container ship. You can put all different types of content into the containers, move them to another port, empty them, and...

5. JavaScript Operators
Operators can be placed into three categories-binary, unary, and ternary. Binary operators, most commonly associated with the concept of operator, take two (binary) expres...

6. JavaScript Arrays
Because objects are collections of properties with each property having its own name and value, arrays are actually JavaScript objects. Each property in an array is an el...

7. Loops in JavaScript
Loops in JavaScript are similar to loops in C++ and Java and most other languages using loop structures. In this section, you will find explanations of the different type...

8. 5 Benefits Obtained through Ruby on Rails Web Development
Although developing the business specific website is not an easy job but at times, technology that is being used for the development of the website makes it developing easy...

9. AJAX Fundementals: The historical past the definition and how it can be utilized
The time period "AJAX" was created by Jesse James Garrett, who coined the time period in 2005 when he decided that he required a shorthand term for your suite of technol...

The \'\'with\'\' Statement

Legal Disclaimer

Related Articles