Prerequisites
What is JavaScript?
JavaScript is a scripting language most commonly used for client-side Web development. While sharing many of the attributes and design structures of Java, JavaScript (Content type: text/javascript) is a completely separate language. Because JavaScript executes on the client rather than a Web server, it is typically used to add interactivity to an HTML page such as:
- Manipulating the structure and style of the page
- Responding to actions taken by the user
- Form validation
- Site navigation schemes
As the Lotus Notes client has evolved, its support of JavaScript has increased, making it easier to create hybrid applications that are accessible by both Notes clients and Web browsers. As an example, you can code field validation for a Lotus Notes form using JavaScript, and it executes in both the Lotus Notes client and a Web browser. This enables you to write a single validation routine rather than having to code it twice, once in LotusScript or @formula language for Notes and a second time in JavaScript for Web browsers.
JavaScript basics
The support of JavaScript in the Lotus Notes client along with its power on the Web makes it a key component of every Lotus Notes developer's skill set. In this primer, we help you learn about key features of the JavaScript language as they relate to Domino Web programming that will hopefully motivate you to learn more.
Core JavaScript
If you are familiar with LotusScript but have never used JavaScript, there are a few key things to keep in mind. First, unlike LotusScript, JavaScript is case-sensitive. If you define a function with the name validateForm() but attempt to call ValidateForm() or validateform(), you receive an error that the function is not defined. One inadvertent error can lead to a long and frustrating debugging session.
Second, JavaScript is interpreted line-by-line as an HTML document is loaded in a browser. Consequently, it is best to put variable declarations and functions inside the <head> tag of the page or in the JS Header of a Notes form.
Third, JavaScript uses the semicolon to terminate statements. This allows you to put more than one statement on a single line as shown in the following example.
<script type="text/javascript">
var userName; userName = 'Jim'; alert('My name is ' + userName);
</script>
If the elements on a single line can logically comprise a complete JavaScript statement, but the line ends with a line break rather than a semicolon, a semicolon is implicitly inserted by the JavaScript interpreter. However, you must explicitly end each JavaScript statement with a semicolon to make your code easier to read and avoid confusion.
 | Note: JavaScript uses operators that are familiar to just about everyone with any programming experience. However, keep in mind that JavaScript uses a single equal sign (=) for assignment and a double equal sign (==) to test for equality. |
Blocks and flow control
JavaScript uses curly braces to group statements together. For example, if more than one statement should be executed in a function, conditional statement, or loop, the statements are grouped together using curly braces as shown in the following example.
if (x < 10)) {
x = x + 1;
alert('x has been incremented by one');
} else {
x = 0;
alert('x has been reset to zero');
}
In addition to if/else statements, JavaScript also supports the following loops:
- while
- do/while
- for
- for/in
JavaScript functions
Like LotusScript, JavaScript allows you to create functions, which are reusable blocks of code that return some form of result. You define a function in JavaScript by using the function keyword, followed by a unique name for the function, a list of parameters contained in parenthesis (the parameter list can be empty), and finally a statement block surrounded by curly braces. The following example shows a simple function.
function riverbendGreetings() {
alert("Welcome to River Bend Coffee!");
}
To call this function later in the script or from somewhere lower in the page, you simply use the function name as shown in the following example.
Typically, you want to pass data to the function so that the data can be modified or the function can determine a course of action to take. The data passed to the function is called a parameter or argument. We can expand the previous example to accept a single argument called userName as shown in the following example.
function riverbendGreetings(userName) {
if (userName == null || userName == "") {
alert("Welcome to River Bend Coffee!");
} else {
alert("Welcome to River Bend Coffee, " + userName + "!");
}
}
If the modified riverbendGreetings() function is called without passing it an argument, the function generates the same alert as the previous example. However, if the function is passed to the parameter "Joe," then the alert changes to incorporate the parameter value as shown in the following figures.
| riverbendGreetings(); |
riverbendGreetings('Joe'); |
 |
 |
Just as you frequently want to pass an argument to a function, you also want to get a value back from the function. In JavaScript, the return statement indicates the function should exit and return a value if one has been specified. Technically, a function always returns a value, even if you don't explicitly specify one. However, if you don't specify the value to return, the function returns a value of undefined.
Rather than generate an alert inside of the riverBendGreetings() function as we did in the previous example, the following code returns just the text used in the alert.
function getGreeting(userName) {
if (userName == null || userName == "") {
return "Welcome to River Bend Coffee!";
} else {
return "Welcome to River Bend Coffee, " + userName + "!";
}
}
In this instance, we're interested in the return value of the getGreeting() function. Therefore, we assign it to the variable welcomeGreeting and pass welcomeGreeting as a parameter to the alert function as shown in the following example.
var welcomeGreeting;
welcomeGreeting = getGreeting('Joe');
alert(welcomeGreeting);
This results in the same "Welcome to River Bend Coffee, Joe!" alert message box pictured above. However we've gained some flexibility by using the return value of the getGreeting() function. Rather than use the return value in an alert, we could choose to include it as text on a Web page as shown in the following example.
var welcomeGreeting;
welcomeGreeting = getGreeting('Joe');
document.write(welcomeGreeting);
Including JavaScript on a Web page
There are a several different ways to include JavaScript on a Web page:
The <script> tag
The first method of including JavaScript on a Web page is through the use of the <script> tag. You can place the <script> tag anywhere in the body of an HTML page and the JavaScript inside is executed as the page loads. Consider the following code for example.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript Primer</title>
</head>
<body bgcolor="#ffffff" text="#000000">
<img src="images/riverbend_logo.gif" height="120" width="120">
<br />
<br />
<script type="text/javascript">
document.write('Drink more coffee!');
</script>
<br />
</body>
</html>
This code yields the following results when viewed in a browser.
Using the <script> tag to add JavaScript to a page
Event handlers
The next method of including JavaScript in a Web page is in an event handler. An event is something that occurs in the life of a Web page such as when the page loads or a user clicks a button or hovers over a link. Each event has a handler that allows you to determine what, if anything, happens when these events occur.
Incorporating the getGreeting() function from the JavaScript functions section, the onClick event of a button can be used to display the "Welcome to River Bend Coffee" alert as shown in the following example.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript Primer</title>
<script type="text/javascript">
<!--
function getGreeting(userName) {
if (userName == null || userName == "") {
return "Welcome to River Bend Coffee!";
} else {
return "Welcome to River Bend Coffee, " + userName + "!";
}
}
//-->
</script>
</head>
<body bgcolor="#ffffff" text="#000000">
<form action="#" method="get">
<img src="images/riverbend_logo.gif" height="120" width="120">
<br />
<br />
<input type="button" value="Greetings!" onclick="alert(getGreeting('Joe'));" />
<br />
</form>
</body>
</html>
Clicking the Greetings! button triggers the onClick event of the button, which in turn, causes the associated JavaScript to execute the following output.
Using the onClick event of a button to execute JavaScript
Linked scripts
A third method of incorporating JavaScript in a Web page is through the use of linked scripts. In the preceding code example, the getGreeting() function is defined inside the <head> tag of the HTML page. Instead, it is possible to define the function in an external file and link to the file by specifying its location via the src attribute of the <script> tag as shown in the following example.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript Primer</title>
<script type="text/javascript" src="scripts/riverbend.js"></script>
</script>
</head>
<body bgcolor="#ffffff" text="#000000">
...
</body>
</html>
There are several benefits of linking to external script files:
- External script files can be used across multiple Web pages.
- The script file can be updated without editing the HTML documents that link to them.
- Browsers can cache external script files.
Consequently, you should use external script files whenever possible to improve the performance and ease of maintenance of your Web sites.
Advanced features
Now that you understand the basics of JavaScript, the following sections describe advanced features of the language:
This is a community wiki. Be sure you are logged in to edit, comment, and add pages. Not a member yet? It's free and simple. Click Login in the upper right corner and Register.