You are on page 1of 5

CS 3892 - Web-System Architectures

Worksheet #2 Front-end Web Development: HTML / CSS / JavaScript (jQuery)


1. HTML, DOM (Document Object Model), and CSS Selectors
The basic syntax for HTML has the following structure:
<element attribute="property"></element>
For instance, the following tag:
<a href="http://www.vanderbilt.edu"></a>
is an anchor (a) element with href attribute equal to the URI of Vanderbilt
Universitys website.
a. What is the difference between a class attribute and an ID attribute of
an element?

An element elem of class foo has its selector of elem.foo. An element


elem of ID bar has its selector of elem#bar.
Further inner-nested elements are delimited by spaces. For instance,
a #bar will grab (or select) the first element of any tag with its id
attribute set to bar AND nested inside an anchor <a> tag.
b. Describe the differences among a.foo, a#foo, a .foo, and a
#foo.

c. Consider the following snippet from HTML document.


<div class="article article-main" id="cs3892">
<h1 class="title">Syllabus</h1>
<h2 class="author">Graham Hemingway</h2>
<p></p>
<button id="share">Share</button>
</div>
<div class="article article-old" id="cs292">
<h1 class="title">Syllabus</h1>
<h2 class="author">Andy Gockhale</h2>
<p></p>
<button id="share">Share</button>
</div>
Suppose we want to grab the share button inside Prof. Gockhales article.
Write the selector for that button, without any ambiguity.
d. List at least four (4) different ways of writing selectors for just
selecting the first div element (Prof. Hemingways article)?
2. jQuery DOM Manipulation
jQuery gives us faster and easier way of manipulating DOM elements.
The basic syntax for using $(selector).method(params).
a. What is the difference between jQuerys $(document).ready
and native JavaScripts window.onload?

b. In the HTML document in 1(c), suppose we want to disable all the


buttons by adding disabled attribute to all of the button elements.
How can we achieve this? (Hint: Use jQuerys .attr() function
Link)

c. Suppose, on clicking all .title elements, we want to alert the users


with the message "This is a Title!". How can we achieve this without
using onclick attribute? (Hint: Use jQuerys .click() function
Link)

3. AJAX using jQuery


We can AJAX easily using jQuery. To do this, you perform the following in
accordance to jQuerys AJAX syntax:
$.method(URI, [body]).success(callback).fail(callback);

For instance, to POST to the URI "http://foo.bar/login", with its


body { username: "jdoe", password: "1234"}, you would do
$.post("http://foo.bar/login",
{ username: "jdoe", password: "1234" });
Also, you can chain in jQuery; meaning, followed by the primary AJAX
method call, you can call another method chained together, as jQuery call
will return the jQuery object itself again. Calling .success by passing in a
callback function will be invoked when the AJAX call is successful. You
can also chain .fail method, which will accept a callback that will be
invoked when the AJAX call is not successful (such as 404, 500, etc).
Each callback function that will be passed into success and fail methods
is a single parameter function, where the parameter of that function is the

data sent by the server.


The data sent by the server could be anything. It may be a plain text
("text/plain"), an HTML ("text/html"), or JSON
("application/json"), or anything! An error (the parameter of which
is passed in to the callback of fail) is a JavaScript object. This object will
contain the status code, servers response (if any), etc
$.post("http://foo.bar/login",
{ username: "jdoe", password: "1234" })
.success(function(data) {
// do something with the data
}).fail(function(err) {
// do something with the error
});
Consider the following example
<span>Name:</span>
<input id="name" type="text" />
<span>Major:</span>
<input id="major" type="text" />
<button id="send">Submit!</button>
a. Declare two variables for name and major fields, respectively. You
can retrieve the values inside the text fields by calling .val()
method of the jQuery DOM element.

var n = $(input#name).val();
b. On clicking button#submit, do a POST to "/send". The server
expects a JSON object in format of

{ name : , major : }. In response, the server can


either give you 200 (success), on which the server will send you a
registration code, 400, or 503. On success, you want to alert the user
of the registration code sent by the server. On 400 and 503, you want
to alert the user that the request was bad, and the service is not
available, respectively. This will require nested callbacks.