O'Reilly logo

Programming Social Applications by Jonathan LeBlanc

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required