Your goal in this lab is to learn the basics about jquery, jquery UI, and Ajax. Specifically, you need to learn:

  1. how to select elements of the DOM tree derives from the HTML
  2. how to add, replace, and otherwise alter elements of the tree
  3. how to produce drag-and-drop elements and create a sorted list
  4. how to get/post data using Ajax

Getting started

  1. Download the latest jquery into a local directory
  2. Start up a local HTTP server using Python to make our lives easier when referencing other files (the root directory will be the directory in which you start up that server): 
    $ python -m SimpleHTTPServer
  3. Test your set up by using the skeleton page in the following section. If you call it t.html then using URL http://localhost:8000/t.html

HTML/JavaScript Skeleton

<html>
<head>
<script type="text/javascript" src="path-to-jquery.js"></script>
<script>
$(document).ready(function() {
// put your code here that executes after DOM loads
});
</script>
</head>
<body>
HTML or JavaScript goes here.
</body>
</html>

You can, of course, mix the scripts within the HTML itself.

jquery

Try to implement the following:

  1. Given HTML <p id=demo>foo</p>, write jquery code that selects that p tag and prints its height to the console.
  2. Selector that tag again and said its background color to red (the CSS property is "background-color")
  3. Replace the text of that same tag with the current date using Date().
  4. Using $.each(), set the background color for the text of each element in the faculty list below to red: 
    <ul id="faculty">
<li>Parr</li>
<li>Jung</li>
<li>Benson</li>
</ul>

    Recall that $(this) wraps the iterated value, this, in the jquery object so that you can access all of the methods like css().

  5. print the text of the last li tag to the console.
  6. add <li>Rollins</li> after the last element in the faculty list.
  7. add an <hr> tag to the end of the document.body using appendTo().
  8. adding a click event on paragraph <p id=demo>foo</p> so that it turns red when you click on it.

jquery UI

First, I suggest pulling apart the zip file that you download and rebuild the directories for easier access / directory names. My setup looks like this:

~/USF/CS680/code/jquery $ ls ui
i18n				jquery.effects.scale.js		jquery.ui.droppable.js
jquery.effects.blind.js		jquery.effects.shake.js		jquery.ui.mouse.js
jquery.effects.bounce.js	jquery.effects.slide.js		jquery.ui.position.js
jquery.effects.clip.js		jquery.effects.transfer.js	jquery.ui.progressbar.js
jquery.effects.core.js		jquery.ui.accordion.js		jquery.ui.resizable.js
jquery.effects.drop.js		jquery.ui.autocomplete.js	jquery.ui.selectable.js
jquery.effects.explode.js	jquery.ui.button.js		jquery.ui.slider.js
jquery.effects.fade.js		jquery.ui.core.js		jquery.ui.sortable.js
jquery.effects.fold.js		jquery.ui.datepicker.js		jquery.ui.tabs.js
jquery.effects.highlight.js	jquery.ui.dialog.js		jquery.ui.widget.js
jquery.effects.pulsate.js	jquery.ui.draggable.js
~/USF/CS680/code/jquery $ ls css
images				jquery.ui.button.css		jquery.ui.resizable.css
jquery.ui.accordion.css		jquery.ui.core.css		jquery.ui.selectable.css
jquery.ui.all.css		jquery.ui.datepicker.css	jquery.ui.slider.css
jquery.ui.autocomplete.css	jquery.ui.dialog.css		jquery.ui.tabs.css
jquery.ui.base.css		jquery.ui.progressbar.css	jquery.ui.theme.css

Then, you can access these elements like this:

<link rel="stylesheet" href="/css/jquery.ui.all.css" type="text/css"/>

<script src="/jquery.js"></script>
<script src="../ui/jquery.ui.core.js"></script>
<script src="../ui/jquery.ui.widget.js"></script>
<script src="../ui/jquery.ui.mouse.js"></script>
<script src="../ui/jquery.ui.draggable.js"></script>
<script src="../ui/jquery.ui.droppable.js"></script>
<script src="../ui/jquery.ui.sortable.js"></script>
  1. Add the following HTML to a test file and then make the list sortable() so that you can reorder the list: 
    <ul id="A">
<li class="ui-state-default">Brooks</li>
<li class="ui-state-default">Benson</li>
<li class="ui-state-default">Jung</li>
<li class="ui-state-default">Parr</li>
</ul>

    The ui-state-default CSS class gets defined by pulling in the /css/jquery.ui.all.css file.

  2. Upon update event for that list, print "updated" to the console.

Ajax

  1. Go to twitter and save the JSON data into a local file for the twitter user's tweet feed of your choice.
  2. Using $.getJSON(...) and $.each(...), load the JSON data for that file and print all of the fields for each incoming object using
for (o in item) {console.log(o+":"+item[o]);}. // print o fields