This page serves as a brief introduction to the concepts necessary for the first project and should help you navigate the resources on HTML, DOM, and JavaScript. At the bottom of this page are links to pages that present much more detail, which will hopefully be helpful as references for the project.
HTML
HTML, or Hypertext Markup Language, is the core language used to make webpages. It is a structured format that describes the layout of the page.
HTML documents are written as a nested hierarchy of tags, which are written using angle brackets (< and >). For instance, all the code for a webpage is put inside <html> tags. Text inside a <b> tag is bold, so <b>Hello</b> looks like Hello (the <b> opens the tag and the </b> closes it).
I'll walk through an example below. You can edit the HTML and click the button to try modifying it. A real HTML file with this source is stored here.
The <a> tag is a hyperlink, and its href attribute sets the target. There are many different tags that can be used to create more advanced features, but this should be about all you need to understand the first project. For more information, see the References section below.
DOM
The DOM, which stands for Document Object Model, is a way to interact with HTML documents. You can think of it as a tree representation of an HTML document where each node is a tag or an element in the HTML of the page.
The simplest way to understand the DOM is to view it. Most web browsers should have tools available that can allow you to do so. For Firefox, there is DOM Inspector or Firebug. Try downloading one of them and viewing and editing the DOM of this page.
Demo: view the DOM of this website.
JavaScript
JavaScript is a programming language that is used primarily for building advanced webpages because it can be used to access and modify the DOM. It is a scripting language, like Python or Perl, but its syntax should be familiar to those who know Java or C++.
I will now give a few examples. As before, you can modify them to try things out.
This example shows some simple differences between JavaScript and C++ or Java.
Variables of any type are declared with the var keyword. Variables themselves do not have types: only the values they store do.
Adding two integers returns their sum, while adding an integer and a string converts the integer to a astring and returns the concatenation of the two.
This example shows how you can declare anomymous functions and pass them as arguments to or return them from functions. In javaScript, functions are values, similar to Scheme.
A div tag simply defines a section and can be used to group elements together. Here, we define some code that runs whenever the div is clicked.
There is of course a lot more to the JavaScript language; this is only a very short introduction. For some more material, see the References section below.
Greasemonkey
Greasemonkey is a Firefox extension (most other browsers have similar functionality) that lets users run their own Javascript code on web pages. This allows users to extend the functionality of web pages. These scripts run just as a page is loaded, and they can be used to rewrite the DOM or issue events as if they came from the user. For example, there are scripts that let you highlight words to look them up in a dictionary or Wikipedia or that modify imdb movie pages so that there is a link to add the movie to your Netflix queue. You could use Greasemonkey to autocomplete your Calnet ID password. This is meta-programming: you are writing a program that manipulates an existing program.
The first project for this class will require using Greasemonkey. First, download Greasemonkey. You will then have a monkey icon in the bottom-right of your browser (and an entry in the Tools menu). Right-click the icon (or choose it from the Tools menu) and select "New User Script...". Give it whatever name and description you want. The namespace is used to distinguish between different scripts with the same name: you can use your own website (or for the purposes of this class, anything). Include and exclude select on which pages the script should run (note that * stands for all pages). Once you click Ok, you can edit your script. You can save changes and reload a page to try it out. Later, you can select "Manage User Scripts..." and then "Edit" to edit existing scripts. We link to a good Greasemonkey tutorial in the References section below.
Simple demo
Regular Expressions
Regular expressions (or regexes) provide a powerful method for searching through text. Support for regular expressions is present in most languages, and it is used extensively. Interestingly, there are many different types of regular expressions: we will focus here on those present in JavaScript.
Regular expressions are denoted by /.../ pairs. For example, /abc/ matches "abc", "abcd", and "zabc". Here is an interactive example.
However, regular expressions support far more than just matching individual characters like this. Here are some of the more important operators, which will hopefully be useful for the first project.
You can modify something with how many times you want it to match. * matches zero or more instances, + one or more, ? zero or one, {n} exactly n instances, and {m,n} between m and n instances. For example, /a*/ matches "", "a", "aa", and so forth.
Parentheses can be used to group multiple things together as in arithmetic. So /(ab)+/ matches "ab", "abab", "ababab", etc.
A bar (the | character) matches one of two alternatives. For instance, /ab|cd/ will match either "ab" or "cd".
Character classes let you match any of a set of characters. So /[ab]/ matches either "a" or "b". You can also use a dash to include series of characters, so /[A-Za-z]/ matches any single letter, uppercase or lowercase. Starting a character class with a caret (^) means it matches whatever is not inside. So /[^A-Za-z]/ matches anything not a letter.
There are a number of special characters you can use in regexes. For example, /\s/ matches a whitespace character (e.g. space, newline, tab) and /\d/ matches a single digit (e.g. [0-9]). The period (.) matches any character. You also escape special characters with a \, so /\./ will match "." and /\// will match "/" (although it's not very readable).
Parentheses actually do more than just group terms together. They also remember what exactly is matched. For example, the regex /([A-Za-z]*)-(\d*)/ both matches strings like "abC-42" and parses and separates the letter parts from the number. This is useful for extracting information from strings.
Want to experiment with regular expressions? Try it out here:
Regexes have many more features, but these should be enough for our purposes. Unfortunately, if you're not used to them, writing regexes can be tricky, as the regexes begin to look long and confusing. With practice, they become more readable, however, but before that you must look at them carefully to understand them.
Example
Let's try writing a simple Greasemonkey script that will manipulate webpages to do something (somewhat) useful. This will hopefully serve to combine the techniques we have studied so far. It should also serve as a good introduction to the project, which will involve tasks very much like this.
Let us consider a script that will rewrite URLs written in plain text into links. Don't you just hate it when you find a link like http://xkcd.com (perhaps from an email), and to follow it you have to select it, copy and paste it into your address bar, and hit enter? I certainly do.
Here are a few extra pieces of information that you will need for this example:
document is a DOM node that represents the HTML document. It has a body property that represents the body of the page (i.e. all the content in it).
Most DOM objects have an innerHTML property that stores whatever is inside them. So the innerHTML property for the node representing <div>Hello</div> is "Hello". You can write to this property to change it live on the page. We gave an example of this earlier.
Strings in JavaScript have a replace method that takes as its first parameter a regex and its second a replacement string. This is where the global flag we mentioned above becomes useful: it lets us replace all instances of something, not just the first. The string in the second parameter has a few special characters it can use: $& is replaced by the entire part of the string matched by the regex, and $n is replaced by the nth capture group. As an example, see the following.
In the first section, someone asked whether it was possible to add event handlers to existing DOM objects. I said it was, but it turned out (after about ten minutes) that I didn't know how to do it, and neither did anyone in the class. Luckily, as usual Google solved our problems.
The key is that rather than modifying an element's onclick property you call a method to add a listener to an element. Here's an example:
The addEventHandler method takes three arguments. The first is the type of handler: "click", "mouseup", and so forth (note that when you put it in the HTML as we did above you use "onclick" but here you drop the "on"). The second argument is the function that is the event handler, which in my example is an anonymous closure. The third argument isn't important.
To try this out, browse over to a sample file I made, make a Greasemonkey script, copy the above code into it, and view that page. And hey, look, the text will expand forever. Anyway, this demonstrates how you add event handlers with JavaScript.
For the record, I learned how to do this from Quirksmode, which is a nice but detailed site for cross-browser compatibility information. Mozilla's developer's guide has details as well.
