Programming Social Applications

The Head: Script Includes and Styles

We start with the head of our document. This is where we will load in all of the script includes and styles that we’ll use in the example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
<title>Web sanitization with Caja</title>
<script src="jquery.min.js" type="text/javascript"></script>

<!-- caja cajoler script and whitelist definitions -->
<script src="../../src/com/google/caja/plugin/html-sanitizer.js"></script>
<script src="html4-defs.js"></script>

<style>
.contentBox{ width:400px;
             padding:5px;
             float:left;
             border:1px solid #868686;
             margin-right:10px; }
.contentRendered{ height:400px;
                  overflow:hidden; }
.contentRaw{ height:200px;
             overflow:auto; }
.contentBox *, form *{ font:12px arial,helvetica,sans-serif; }
.header{ background-color:#868686;
         color:#fff;
         font-size:16px;
         font-weight:bold;
         text-align:center;
         padding:5px; }
.clear{ clear:both;
        height:10px; }

#file{ width:300px; }
#errorMsg{ color:#d32424;
           font-weight:bold;
           display:none;  }
</style>
</head>

First, let’s look at the script includes that we are adding:

jquery.min.js

This is the minified JQuery base file we’re loading in. We will use the JQuery JavaScript library for DOM selection, for AJAX requests, and for inserting the text/HTML into their appropriate boxes in the example. We’re using a local file, but you could instead link to the CDN hosted file from http://docs.jquery.com/Downloading_jQuery ...