In CS110 so far we've learned two languages: HTML and CSS. We now move on to learning the third of the three languages taught in CS110: JavaScript. We will just begin talking about it today, so don't worry if you don't understand everything.
JavaScript is a simple programming language for making dynamic web pages, i.e., pages that can interact with the user and vary each time they are loaded. Although the names are similar, JavaScript is not the same language as Java, which is the programming language used in CS111.
As part of your project you are required to include four distinct JavaScript applications — each student must do two of the four. The four applications must all be different from each other and you will be rewarded for the complexity of these applications. We will also look at how well the applications are integrated into the site — do they fit naturally or are they “tacked” on?
During the upcoming design phase of the project you must clearly indicate how you and your partner plan to fulfill this JavaScript requirement. Let's look at a number of examples to help you understand what types of web site features count as JavaScript applications. Note that as you haven't yet learned to write JavaScript, we won't be looking at the code that created these examples. Rather, we will just explore what they are and how they work. These examples should be used as a guide and inspiration as you think about those JavaScript features that you would like in your final site.
Basic JavaScript applications that we will be teaching you how to do during the semester include: rollovers, dynamically generated page content, form validation and user-defined functions.
A rollover (sometimes called a mouseover) is a technique that lets you change an element of your page (typically an image) when the user rolls her mouse over something on the page (like a line of text or an image). There are a number of ways that rollovers can be incorporated into a site but perhaps the most common one is to implement a navigation bar, as done in the following CS110 projects from the Project Hall of Fame:
The site for the Wellesley College Friends of Horticulture shows a different, clever way of using rollovers to give a virtual tour of the greenhouses at Wellesley. And, the Blue Notes Member Page demonstrates how one team added a little humor to their site by rolling over club members' photos to give a silly pose.
When we say that a page has content that has been dynamically generated, we mean that the page's content depends on a condition determined by the page. For instance, the page could display the current date or time:
Or, the page could use the current date or time to change the page content. For instance, Wellesley College Amnesty International uses the current date to tell the user how many days old the site is. Similarly, the site for Wellesley for Equality reports the number of days that Massachusetts has had marriage equality. You could also count down from the current date to calculate the number of days until some future event (i.e., "There are x days left until the formal!"). Another idea is to report important events on a certain date. The page for Slater International Association's World Calendar attempts to tell the viewer any important international events for the day on which she is visiting the site. Unfortunately, although this is a clever idea, their JavaScript calculation does not work.
A different idea for dynamically generating page content that does not have to do with the date is displaying random images on the site. The home pages for the following sites all use this idea:
Some teams prompt the user for information about herself and then incorporate the user's response in their page. As an example, the home page of the Slater International Association asks the user for her name and then greets her personally.
We will learn about forms in an upcoming lecture. Forms themselves are written using HTML. However, using the form's data in some way requires JavaScript. A common and practical example is form validation. Form validation is the process of checking that the information provided by the user is correct (or not obviously incorrect) before processing it. For instance, it might be important to check that certain fields are not left blank or that data has the correct form. The contact pages for the following sites all demonstrate this idea.
It is also possible to process the form data in some other way, besides just validating it. For instance, you could tally up results of a quiz or survey (see this ecology survey). The Tea Group shows a different way of responding to user input — they inject a little humor into their site by making fun of the user's favorite tea. (Note that this page does not work in Safari or IE due to a bug.)
This type of JavaScript application is different from the others already mentioned because user-defined functions are transparent to the user. That is, it is not possible from looking at a page to know if it includes a user-defined function. Rather, user-defined functions are motivated by coding advantages, as we will see.
A function is simply a shorthand name for a chunk of JavaScript code. In upcoming lectures we will learn to use functions that are pre-defined. That is, they exist as part of the JavaScript language. We will also learn to write our own functions. Such functions are called user-defined functions. There are several reasons why writing your own function might be important. We will learn that functions give us the ability to write something once and then use it over and over. This is called modularity, a central principle in software engineering. Building programs out of reusable, mix and match units makes code easier to write, because you can write and debug a function once and then use it over and over again, and also easier to understand, because you can read and understand the function once and then know what's happening whenever it's used. We will also see that if we provide a function with a parameter we have the ability to use the function over and over with a different piece of information each time. For instance, here is an example that uses a function with two parameters to multiply two numbers. Because the function has two parameters we are able to multiply two different numbers each time we use the function.
On the Wellesley Taiwan Cultural Organization's pictures page the students wrote a function to pop-up a window to display a larger version of a thumbnail photo. Because of the large number of thumbnail photos on this page, using a function is wise and avoids repetitive code.
A common use of user-defined functions is for form validation. In this case the instructions that perform the detailed checking of the different form elements are put inside a function. The form that we looked at earlier for Stoneridge/Sedgefield uses this approach.
If you have something on your site that will (or may) be done more than one time, or if you have a chunk of code that is complex or lengthy and your code would be improved by giving this set of instructions a shorthand name, consider a user-defined function as one of your JavaScript applications. If you aren't sure, ask your project advisor.
This section describes advanced JavaScript applications that we will not be explicitly teaching you how to do. However, former CS110 students have used our reference materials to successfully integrate some of these advanced techniques into their site and this is something that you may, too, want to consider. In this case, please consult with your advisor closely if you want to try to include one of these advanced applications.
Slide shows involve the rotating or stepping through of a set of images. This can be done manually, where the user has to click to advance to the next image, or automatically, where the images are advanced independent of user input.
Our project examples page has examples of both types of slide shows:
In some cases, you might want to "password" protect some subdirectory of your web site. For instance, The Tea Group did just this for the part of their site that contained contact information for the group's members.
If you are interested in including this feature in your web site please take a look at our password protection example.
Dynamic HTML (DHTML) combines JavaScript, HTML, and CSS to give web page designers an incredible amount of freedom to animate and add interactivity to their pages. DHTML can be used for images that dance all over the screen:
and for hierarchical or drop-down menus (a menu where clicking on an option reveals a submenu of further selections):
Javascript can also be used in other innovative ways, such as these two games.
Students sometimes ask about projects that involve a database (stored information that can be searched and updated), projects that accept online credit card payments, and projects involving flash animations. All of these involve material that is outside the scope of CS110 and you should not plan on your project including any of these features.
What cool things do you see on web pages that you would like to learn how to do?
© Computer Science 110 Staff
This work is licensed under a Creative Commons License
Date Modified:
Thursday, 28-Feb-2008 09:03:03 EST