Introduction
The purpose of this lab is to introduce simple examples of the main client-side parts of a web application, namely:
- HTML
- CSS
- JavaScript
During the lab you will create an Intellij project to manage and edit your files, link HTML with CSS and JavaScript files, and write JavaScript code to dynamically add new HTML elements to a document. You should aim to finish the lab before the start of next week's lab session if you don't complete it within the allotted lab time.
The lab is best done with the aid of Intellij Idea, which offers good support for all of the above.
The lab has Intelli 6 installed, and we are in the process of installing Intellij 7, which has some additional features. Many of the core features are similar.
Some of the terms used in the lab will inevitably precede their lecture coverage; don't worry about this; learning them in the lab as you go along will make them more familiar when covered in lectures later in the course.
We'll begin with a walkthrough of the project structure, and a simple example of a dynamically created Celsius / Fahrenheit conversion table.
Intellij
This is a very advanced IDE, and during this course you need only use a small fraction of its features. Here are some things I find very useful:
| ShortCut | Description |
|---|---|
| <CTRL> F4 | Close the Current Pane |
| <CTRL> B | Go to definition of item under cursor (useful for navigation) |
| <CTRL><ALT><LeftArrow> | Go back to the previous place (e.g. before you hit <CTRL>B) |
| <CTRL><ALT>L | Perform automatic layout of content in current pane |
What if I'm happier using TextPad?
In the long run, you're better off with a good IDE. An IDE understands the structure of your application, and will warn you about any broken cross references.
The main disadvantage of Intellij is that it is not freely available. You are also free to use other IDEs on this course. Net Beans and Eclipse are free, and both good. Eclipse is probably the better IDE overall, but NetBeans makes it especially easy to start web applications. In my opinion, however, Intellij is the Ferrari of IDEs.
The campus licence file is in the restricted (campus-only) area here: IntellijLicence.txt, and is applicable for any campus machine.
Intellij gives code completions for HTML, Java, JavaScript and CSS, plus some others. This is very helpful when exploring a new language e.g. see picture below:
Directory Structure
When building web applications it helps to layout the code in an organised way. The structure shown here is sufficient for simple applications (of the type covered in this course).
The src directory would normally contain the Java source tree used for a project; this is currently empty.
Sample Application
We'll now look at a simple example of JavaScript code. The chosen example is the construction of a temperature conversion table, showing conversions of Celsius to Fahrenheit. This will create output in a table a bit like the following:
This will be a simple application with no interactivity, but it at least creates some content programmatically.
The steps are as follows:
- Start Intellij Idea 6
- Create a project (of type web)
- Accept most of the defaults; make educated guesses as you go; consult if stuck (or even try the help...)
- Within the resources directory, create directories called css, html, img, js, and jsp. Do this from within Intellij by right-clicking the resources directory icon.
- Create the files (you can type them in from the snippets below). Feel free to play with the CSS to adjust the style.
Refactoring
Intellij allows refactoring of code. Right-click the icon in the project menu, and click refactor. For Java code the options are extensive. For HTML files, more limited. A simple refactor (scarcely worthy of the name!), but one that is nonetheless very useful is to move a file. The clever thing about doing this by refactoring (as opposed to dragging between Windows folders) is that it will adjust any links to external files as necessary. For example, the Converter.html file specifies the source of the c2f.js file. Move the file to the top level of the resources directory, and note how the link is adjusted. Then move it back.
Note: with Intellij 7 you can move files between folders, or Java classes between packages with a simple drag and drop operation (no need to go through the refactor menu).
We'll begin with the HTML, CSS, and JavaScript files. A zip file is available that contains all these, but it is a good idea to type them in for yourself from the images below, and following the natural directory structure.
HTML file
When creating a new HTML file, Intellij puts the <! DOCTYPE > declaration in for you. Note that in this example we link to an external style sheet, and external JavaScript.
A common idiom for adding dynamic content to a web page is to catch the onload event event which is triggered when the browser has finished loading and parsing the web page. This calls the function conversionTable() which is defined in c2f.js. A division element (<div id="conversion">) is used as a placeholder for where the dynamically created HTML will be placed.
The HTML is provided here for you to cut and paste into Intellij; note how Intellij highlights the as yet undefined JavaScript and CSS files. If you hover over these areas, it will prompt you to auto-create them.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/converter.css"/>
<title>Celcius to Fahrenheit Converter</title>
<script language="JavaScript" src="../js/c2fTable.js" type="text/javascript">
</script>
</head>
<body onload="conversionTable('conversion', 0, 10);">
<h2>Celcius to Fahrenheit Converter</h2>
<div id="conversion"></div>
</body>
</html>
In the above HTML, note the following:
- The links to the external CSS and JavaScript files
- The onload attribute of the <body> tag used to invoke the conversionTable function
- The single quotes to wrap the string ('conversion') passed as an argument
- The fact that 'conversion' matches the id attribute of the div tag
CSS file
Note how Intellij knows the CSS syntax: which values are allowed for which attributes, and the allowable units (e.g. width: 200px)
Type some of these CSS declarations into the file converter.css. Note again how Intellij will check the legality of your CSS.
JavaScript
Before looking at how to dynamically create the HTML for the conversion data, let's first consider the nature of the data that we're aiming to create. We can check the HTML by previewing it.
This first solution puts everything in a <pre> tag, with lines separated by BR elements.
Therefore, we need to create HTML similar to the following and place it as a child of the <div> tag - this is what it should look like:
<div id="conversion"> <pre> 0 : 32 1 : 33.8 2 : 35.6 3 : 37.4 4 : 39.2 </pre> </div>
The JavaScript to create this and perform the addition to the document structure for this is shown below.
Observe the use of:
- document.getElementById(tagId) - used to retrieve a uniquely identified node from the current document (which is the document that loaded this external JavaScript file)
- document.createElement(tagName) - creates a new element to add to a document
- node.appendChild - where node is a reference to an HTML element, adds the child node to the end of its list of children
Spend some time studying each of these files. Note how Intellij handles completions as you type.
When all this is in place, you can select the Converter.html file, and the click the Preview tab at the bottom. The following should then appear in the Preview Pane (Click to install the Mozilla Plugin, if the lab permissions allow this; otherwise you can view the file in a web browser).
JavaScript Exercise
The above application produces rather poor looking output. Rewrite the JavaScript in order to produce a table, rather than the current lazy method of putting all the output data in a <pre> element.
The aim is to produce a table that looks something like this:
Hint: define CSS for even and odd table rows to get the alternative background effect (.odd and .even).
For example, possible CSS for even rows could be:
tr.even {background: #EEFFEE}
The HTML that you're trying to create could look like this:
<table>
<thead>
<tr>
<th>Celsius</th><th>Fahrenheit</th>
</tr>
</thead>
<tbody>
<tr class="even"><td>0</td><td>32</td></tr>
<tr class="odd"><td>1</td><td>33.8</td></tr>
<tr class="even"><td>2</td><td>35.6</td></tr>
<tr class="odd"><td>3</td><td>37.4</td></tr>
<tr class="even"><td>4</td><td>39.2</td></tr>
</tbody>
</table>
To set an HTML attribute from JavaScript, use setAttribute e.g.:
var r = document.createElement("tr");
r.setAttribute("class", odd(i));
Previewing
Again, you can use the Mozilla Preview button to quickly see what the page will look like in a web browser:
TOC Exercise
TOC = Table Of Contents. Study the CSS for this web page, and also see this CSS tutorial on lists. Design an improved CSS style for the sidebar index of this page that looks better than the current version (e.g. like the one on the course homepage http://courses.essex.ac.uk/cc/cc292/ ).
In particular, a stylistic fault with the current one is that index items are not very clearly separated. This is particularly true of the entry for 'Directory Structure'.
Test your solution by copying and editing this page (i.e. the page that contains this text!). Note that you may also need to modify the toc.js file in order to create list items.
The code for current TOC is given below:
1: function toc()
2: {
3: var toc = document.getElementById("toc");
4: var entries = document.getElementsByTagName("a");
5: var n = entries.length;
6:
7: var anks = new Array(n);
8: for (i=0; i<n; i++) {
9: anks[i] = entries[i].getAttribute("name");
10: }
11:
12: var h3 = document.createElement("h3");
13: h3.appendChild(document.createTextNode("Table of Contents"));
14: toc.appendChild(h3);
15:
16: for(i=0; i<n; i++) {
17: if (anks[i] != null && anks[i].length > 0) {
18: var a = document.createElement("a");
19: a.appendChild(document.createTextNode(anks[i]));
20: a.setAttribute("href", "#" + anks[i]);
21: toc.appendChild(a);
22: toc.appendChild(document.createElement("br"));
23: }
24: }
25: }
The function toc() takes no arguments, because it's processing depends only on the document structure (however, an alternative would have been to pass the id of the tag to place the TOC as an argument). Line 3 gets the toc element. Line 4 uses a powerful feature of JavaScript: it retrieves all the HTML elements in a document of a certain type - in this case anchor (<a>) tags. Line 5 sets up a convenience variable n for the number of these elements. Lines 7 - 10 then create an array of all the name attributes of the <a> tags. These are all the bookmarks in the document. Lines 12 - 14 set up the heading for the table of contents as an <h3> element.
Lines 16 - 24 comprise a for loop to create the table of contents. The first line is a conditional statement to check that the value is not null, and also not the empty string. If this condition holds, then the link is created as a new <a> tag. The text for the <a> tag is simply name of the bookmark, and this is also the value of the href attribute (though preceded by a '#'). Each entry is separated by a line break (<br>) tag.
Summary
In this lab we covered setting up an Intellij project and adding files to it. Intellij has a good understanding of the syntax plus cross references used within your web application. This makes it much easier to write legal code, and should enhance your learning experience.
During the exercise we studied how to add dynamically created content to a web page, using a uniquely identified <div> tag, catching the 'onload' event of <body>, and using JavaScript to manipulate the content of the tag. We also linked to an external CSS file to style the HTML.
end of page