Beginner’s Guide to Web Development – Writing Your First JSP

Now it is time to write your first JSP. One of the easiest ways for many people to learn is by example. Hence, instead of delving into the semantics behind JSP, we are going to start writing JSP. First we are going to create a directory in which to save our work. We are going to call this directory "work" and we are going to create it under the following directory:

c:\tomcat\webapps\examples\jsp\work\

Inside your text editor, type or copy and paste the following:

<%

out.print(“hello”);

%>

Be sure to include the quotes and the semi-colon in the line beginning with “out”. Save the file you just created as hello.jsp in the work directory, i.e.:

c:\tomcat\webapps\examples\jsp\work\

Now that you have saved your file, it's time to test your work. The first step we need to take is to start up Tomcat. Open up an MS-DOS prompt. Now, startup tomcat if you haven't already done so.

After starting Tomcat we ready to test the page you have just written. This can be accomplished by opening up a web browser and navigating to the following URL:

http://localhost:8080/examples/jsp/work/hello.jsp

If a page with “hello” shows up in your browser, congratulations, you have written your first JSP.

Before we move on, let's discuss some of the syntax we have encountered so far. You may have noticed the following before the piece of JSP code:

<%

and the following after the piece of JSP code:

%>

These are the special tags that tell the server running your JSP page to process the text located between the two tags as JSP code. Anything located outside these tags will not be processed by your JSP server. Instead it will be processed by your web browser as HTML. Thus, it is very important to enclose all of your JSP code within the special tags shown above.

Also, take note of the following line:

out.print ("Hello");

The text out is something that is automatically available to you in every JSP page your write. You can use out to print output to the screen. The way you can do this is by calling out's print method, as shown below:

out.print

followed by a parenthesis followed by what you want to print. In this case you want to print the text "Hello". You must put quotation marks around "Hello" for your page to work properly. After you close the quotation marks around the "Hello" and close the parentheses, you need a semi-colon. The semi-colon tells the JSP server that this is a line of code that should be executed. The quotation marks around "Hello" tell the JSP server that "Hello" is not a variable. We are simply passing a string, "hello", directly into out's print method without first declaring it.

Now we are going to write a more complex JSP page that utilizes a programming construct we covered in the previous section of this tutorial: the "for" loop. Here is an example JSP page using a loop. Type the following into your text editor:

<%

for ( int x = 1; x <= 10; x++)
{
   out.print (x);
   out.print ("<br>");
}

%>

Save this file in your C:\tomcat\webapps\examples\jsp\work\ directory as loop.jsp and point your browser to the following URL:

http://localhost:8080/examples/jsp/work/loop.jsp

This should display a page that shows the numbers 1 through 10 each on a separate line. If so, you have just written a JSP that uses one of the most important programming constructs: the "for" loop.

The language being used inside the <% and %> tags is Java. It is a very powerful language, but requires us to follow strict rules. One of these rules is that for every variable we declare, we have to give that variable a specific type. These types where covered in the "Java Basics" section. In the loop above, we have declared a variable "x" that holds a number. Since x holds a number, we declared x as an "int", which is short for integer.

What does this loop do? It continues looping until the following happens: x is greater than 10 or is equal to 10. Since x has started out at one, and x gets incremented by one every time the loop runs, it will take the loop 10 iterations until is greater than or equal to 10, in this case, equal to 10. Thus, the loop performs whatever code happens to be between its brackets - {} - ten times. This is why your screen displayed ten rows of numbers when you ran you JSP page.

One thing to note is the following line:

out.print (x);

Notice that there are no quotes around "x". This is because "x" is a variable. To alert the JSP server to this, no quotes should be placed around the "x". Also, note the line:

out.print ("<br>");

The text <br> is simply an HTML tag to generate a new line. Thus, if you omit this line, all of your numbers would print on the same line. We went over this in the "Understanding HTML" section.

We will go into more detail on JSP syntax in later sections. Now we are going to use what you've learned about HTML and JSP and create web pages that include both of these languages.