Class 3 – Dom Scripting
Exercise overview
In part 2 of our work this week we will explore JavaScript coding in a document object model
environment. DOM Scripting is an approach to JavaScript coding that leverages the capabilities of
the document object model to implement new services and interactivity in web based resources.
Instructions
Working in groups of 3-4, complete the worksheet. Because this worksheet involves technical
exercises, each person should complete the technical portions. As your group works through the
technical elements of the worksheet keep talking and helping each other. Wait for your group
members to catch up or help them over rough spots so that you can discuss the key questions
together. As always, appoint one person to read the text and questions on the worksheet, one
person to record the group answers on the worksheet and one person who is responsible for
reporting back. All three members of the group should participate in exploration, discussion and
reading.
System need
This exercise is centered around a specific need. As you are aware, libraries purchase licensed
resources so that students, faculty and staff can use them to do research. When libraries purchase
access to these resources they have to provide a method of authentication to limit access to them.
Often the publishers of these resources make the indexed content, but not the full text, available on
the web. For example if you search Google scholar you will find citations to millions of articles but will
often have trouble getting access to them.
Libraries provide access to these resources using something known as a proxy server. Proxy servers
sit in between your user client and the destination server and handle (i.e. proxy) all of your requests.
The impact of this is that the destination server thinks that you are on campus when in fact you are
not!
Organization of Information – Class 2 – Understanding organization structures
Page 1
Proxy servers accomplish this by modifying every URL that you click on in your web-browser. There
are two types of proxies – client based proxies, which you setup on your own machine) and serverbased proxies, which redirect all traffic that you send it.
Most libraries use a server configured proxy to avoid having users configure their own clients. This
means that when you visit http://researchport.umd.edu from off campus you will have to login. You
will notice after you do that that your URL contains the domain root “proxy-um.researchport.umd.edu.”
When the proxy server is between you and the destination server it actually re-writes every URL on
the page you see so that you stay proxied!
Step 1:
Lets look at an example by exploring URLS when we are proxied
a. From off campus, login to research port (http://researchport.umd.edu)
b. Connect to a database (for example find the ACM digital library and go to it)
c. Copy the URL from the bar as you navigate pages – notice how the domain always
includes the root url in addition to other information?
The reason proxies work is because they can leverage the Document Object Model (DOM) and
scripting languages to re-write all of your URLS. As you can imagine this can be both very useful and
very nefarious. Proxies have been used as something called “man in the middle” attacks which redirect all of your web traffic to another location.
Explore – what is the DOM?
As we recall, the Document Object Model (DOM) is a model for representing documents in webbrowsers. The DOM applies to a suite of web-based technologies including HTML, XML, JavaScript
and CSS. Figure 1 shows the DOM model. Notice that the parent element is the “Window” object.
That window has the children history and document. The document object in turn has multiple
children.
Step 2:
Review the DOM model below and answer the associated questions
Organization of Information – Class 2 – Understanding organization structures
Page 2
Questions
1. What is the top element of the DOM?
2. The document object in this model has what siblings?
3. Think for a moment about having the programmatic ability to manipulate all of the elements of
the DOM. One feature of this is the ability to tell the window object to load a new document?
Can you think of an example of this in your everyday use of the web?
Pause here for class discussion
Exploring JavaScript
In this exercise we are going to look at a very simple JavaScript example. Our task is going to focus
on developing a bookmarklet (e.g. a browser bookmark that runs a small piece of JavaScript on a
loaded web-page). Lets begin by exploring bookmarklets
Organization of Information – Class 2 – Understanding organization structures
Page 3
Step 3:
Look on the web for a definition and example of a bookmarklet. Identify how and where the
bookmarklet is used and figure out how to ‘install’ it in your web-browser. Be prepared to
report back to the class on the bookmarklet you found.
Pause here for class discussion
As we found, bookmarklets tend to be limited in scope and often implement a web-service.
Sometimes this points to a web-service at another site but bookmarklets can also be used for very
simple purposes.
Anatomy of a JavaScript statement
JavaScript is a scripting language that runs within the context of a web-browser. All web-browsers
contain a javascript interpreting engine to go along with the HTML renderer. You can include
JavaScript in a webpage by using the <script type=”javascript”/> element or by including it from
another file. You can invoke JavaScript in a webpage by either running it on page load or on specific
events.
For example, if you want to have javascript run at the end of a page load, simply call your javascript
functions in the footer of your HTML document.
1. <div id=”footer”><script type=”javascript”>….</script></div>
You can also run javascript when a user clicks links by including a javascript function as part of an <a
href> element
2. <a href=”javascript:….”></a>
JavaScript uses a number of common programming elements including control structures, variables,
functions, methods, and objects. In order to stay focused on our goal, we are just going to explore
the elements of the language that we need to create our bookmarklet.
3. window.location.replace(
4. window.location.protocol + "//" + window.location.host + ".proxy-um.researchport.umd.edu" +
window.location.pathname + "?" + window.location.search
Organization of Information – Class 2 – Understanding organization structures
Page 4
5. );
On line3 we call the method replace on the object window.location. Note that location is a child of the
window object and that the method replace tells the window.location object to replace the document
is currently has with the one you are going to provide. The method is called using the syntax
6. window.location.replace(REPLACEMENTURL);
Note that the line begins with a method call, encloses the REPLACEMENTURL in parentheses and
ends in a semicolon. This is standard syntax for all method calls in JavaScript
Step 4:
Lets try this out by entering javascript commands in a browser window.
a. Open Chrome
b. Type javascript:window.location.replace("http://google.com"); into the location bar
c. Hit enter
d. What happens?
You notice that we can hard-code a URL to send the document to. As I said before we can include
that JavaScript code as the href value in an <a> element as well so that when a user clicks on the link
it loads a specific page using javscript. Normally this would not make much sense as the href
element pretty much tells the browser to load whatever link you follow but as we will see below, using
JavaScript allows us to make that link dynamic!
Lets return to our code example above. Look at line 4. You will see a mix of objects (e.g.
window.location.protocol) and hard coded values (e.g. “//”). You will also see that we concatenate or
combine each of these values using an addition (+) sign. This is standard javascript syntax for
combining several values to create a new string. Lets look at that line of code again:
7. window.location.protocol + "//" + window.location.host + ".proxy-um.researchport.umd.edu" +
window.location.pathname + "?" + window.location.search
Step 5:
Using the javascript reference at http://www.w3schools.com/jsref/obj_location.asp. Look up
each of the objects defined in the code line above
a. window.location.protocol
b. window.location.host
Organization of Information – Class 2 – Understanding organization structures
Page 5
c. window.location.pathname
d. window.location.search
Step 6:
While we are here, lets also look at the meaning of window.location.replace
Step 7:
Now lets understand how a real URL maps to each of these objects. Take the URL
http://dl.acm.org/citation.cfm?id=1734388 and it onto each of the window.location. objects
a. window.location.protocol =
b. window.location.host =
c. window.location.pathname =
d. window.location.search =
Step 8:
Remembering that anything in “” is a non-changing value and that anything in the format
window.location. is either a method (i.e. it performs some task) or a value (i.e. it stores
some information) take the above URL and write apply the code in line 4 against it. Write
down the new URL that would be generated if we were to call the window.location.replace
method on it.
a. New URL:
Step 9:
Now, lets copy our new URL and paste it in a web-browser. Were you prompted to login to
researchport? Did you pull up a webpage from which you could get the full text?
Step 10: Lets try it again by taking the code on lines 3-5 and assembling them into a single line of
code.
Step 11: Load the ACM Url again and then copy and paste your singl line of code from step 10 into
the URL. Hit enter. What happens? Did you get re-directed through the proxy?
A quick note on query strings.
Query strings are all of the text in a URL that come after the “?”. Query strings are used to pass
variables to web applications so that they know what to do next. In the above URL, the query string is
id=1734388.
Create our bookmarklet
We can see that applying this JavaScript operation to the above url redirects it through the university
proxy server. This means that we can be off campus when we find a resource on the web and use
this code to access the resource using the campus proxy server. Now that we have explored the
Organization of Information – Class 2 – Understanding organization structures
Page 6
components of our JavaScript function and understand what it does lets turn it into a bookmarklet so
that we can have simple access to this function anytime we need it.
Step 12: Create an HTML page that has a link (e.g. <a href=””>link text</a>) on it. The page does
not need to contain anything else.
Step 13: Load the page in your webbrowser.
Step 14: Try the link – what did it do?
Step 15: Reload your page and drag your link to the bookmark toolbar (you may need to tell your
web-browser to show your bookmark toolbar first).
Step 16: Visit the ACM page again. Click you bookmarklet. Did it work?
Review
In this exercise we explored how JavaScript can be used to access and change the behavior of our
web-browser documents. The approach we used was DOM Scripting. DOM Scripting refers to
writing JavaScript that interacts with the document object model to control our interaction with the
browser. We also explored the concept of bookmarklets – small pieces of JavaScript code installed
in our bookmark toolbar. Bookmarklets are often used to harvest text for another use, create
representation records in a cataloging system (e.g. instapaper, del.icio.us and mendeley) or enable
interoperability between systems. These are important functions for the web and also important
aspects of information organization practice. Throughout this semester we will see examples of how
other technologies handle these core processes.
Organization of Information – Class 2 – Understanding organization structures
Page 7