There are numerous open-source JavaScript libraries floating around the web that can be of particular use to historians. Google hosts quite a few of these, including the very popular jQuery and jQueryUI. For data visualization, some good options for historians include: Stanford University’s D3, or MIT’s SIMILE Widgets such as Timeline, Exhibit andTimePlot. TimeMap combines the functionality of Timeline with popular mapping APIs to provide an easy way to plot geographic and chronological events in context.
Once you find a library and decide you want to use it, you need to make a decision, do you download and install the library on your own server or do you just link to the hosted library? Your answer will depend on a variety of issues.
Linking
Libraries that are hosted elsewhere are handy, there are no files to install and a simple line of script can bring you all the functionality you’d want without you having to architect the file structure on your own servers. To load a hosted library, copy and paste the code snippet for that library (shown below) in your web page. For instance, to load jQuery, embed the <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> snippet in the <head> tag of your HTML page.
However, it’s important to note that any JavaScript that gets included in your webpage runs within the context of your entire domain and can access any data contained therein. Using a library from a known and frequently-validated entity, such as Google, isn’t likely to cause problems, but it you’re looking to grab functionality from a third-party that isn’t as well-known, these files might cause issues on your own site. Always use code (whether you opt to link to it or download it) from sources you trust.
Additionally, the hosts of the library you’d like to use might not appreciate the additional server load that is created when you link to their libraries. Always read the documentation for instructions how best to use their library. In these cases, you should consider downloading the library to run from your own server. But where do you put it once you have it on your local machine?
Downloading
If you opt to download a JavaScript library, you’ll need (eventually) to upload the entire library to your web server. For ease of organization, you can create a separate “javascript” or “js” folder at the root level of your site to house all of your libraries.
“js” is the folder and contains only JavaScript files and other libraries. You’ll notice here that I’ve installed the “timemap” library. I’ve organized all of my libraries into distinct folders, so that I can keep track of my files. Some of these libraries come with dozens of separate files, so keeping them organized becomes critical as you use more and more of them.
Most library documentation is helpful and includes instructions on how to download, but if you happen upon one that does not, these basic instructions apply:
1. Download the entire library to your local machine.
2. Unzip it and FTP it to the “javascript” or “js” folder on your web server.
That’s it. The library is now available for you to use on any page on your site.
To call your library, you’ll need to include all the appropriate <script> tags in the <head> tag of your HTML page. For example, to load TimeMap, one would need to call five different JavaScript files. In the example below the Google Maps API v3 is being called by a URL, while the rest are pulling from the local server by using the relative path “../js/timemap/lib/” code as seen below.
|
1 |
<!-- Begin Map Scripts --><script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><script type="text/javascript" src="../js/timemap/lib/jquery-1.6.2.min.js"></script><script type="text/javascript" src="../js/timemap/lib/mxn/mxn.js?(googlev3)"></script><script type="text/javascript" src="../js/timemap/lib/timeline-1.2.js"></script><script type="text/javascript" src="../js/timemap/src/timemap.js"></script> |
Troubleshooting
You can use multiple JavaScript libraries, but you should be aware of any possible conflicts. Always check the library documentation for issues of library incompatibilities. You can check for known JavaScript Library conflicts by searching Google for your library name and “conflict,” (e.g., jquery conflict)
To ensure your library is loading correctly, you can use any of the popular in-browser debugging tools like Firebug or Chrome Developer Tools. For example, if one incorrectly types the file name for the Timeline JavaScript file in the <script> tags, the page will fail to load. By using Chrome Developer Tools, it’s easy to see the Internal Server Error is due to a non-existent file on the server; the tool even gives the number of the problematic line of code causing the issue.
JavaScript libraries are a convenient way to harness the power of JavaScript functionality without having to write all the code yourself. Happy coding!