HW3 Part 3

1. We want to have selectors that can simply find all the tags we are looking for. $(“p”) should return all p tags and allow us to work with them without having to do a for loop. We can be more specific in our search for tags by specifying things like attributes: $(“p[title=’hi’]”) matches all p tags with title “hi”. These selectors return JObjects, and we can manipulate these nodes by calling JObject methods. For example, $(“p”).empty() removes all child nodes of all p tags. We would like to have methods that can change the content of the nodes, insert or remove things in or around them, replace them with something else, and do other such manipulations. We’d also like to do CSS modifications, such as changing the position or height and width of the matched elements. We’d like to have a simple way to add in events, like .hover(), which would do something when the mouse hovers over the selected elements. Other methods would add effects, such as making some elements fade and animating others. We’ll support chaining, where we can call multiple methods on the selected elements. We’d like to add in extensions like if—else to allow control-flow in our JQuery calls. We'll basically be finding and modifying nodes in a more simple way.

2. The Object-Oriented programming model is suitable for our domain. The $(target) function returns an object, the JObject, which has many built in methods that can be used to modify the target tag(s). For example, we can use $(target).addClass(class) to add a class to the matched elements. “target” can be things like ‘p.first’ (selects p tags with class “first”) and ‘p[title=”hi”]’ (selects p takes with the title “hi”). We can add as many methods for the JObject as we want, so the program will be larger but be abstracted so the code stays clean. The users don’t see how the methods are implemented; they just know that they work. They also don’t see how the $(target) function is implemented; from the programmer’s perspective, $ looks like a special keyword and target looks like an object that we are working worth, but really the $ is a function and target is the argument to that function, which returns an object. Users just need to know that $(target) retrieves all of the specified tags and returns JObjects that they can manipulate. $(target) is an abstraction for the for loop going through all the target tags.

We can combine smaller programs into larger ones by supporting chaining. For example, we can do

$(“p”).text(“woot”).wrap(“<div class = ‘line’></div>”)

$(“p”) returns JObjects that correspond to the node in the DOM. For each of these, .text(“woot”) modifies the text contents of the matched “p” elements and returns the resulting JObject. The .wrap() wraps the “p” tag with the div tag, and returns the resulting JObject. We can do as many chains as we want, and, thanks to abstraction, we don’t need to know how this is being implemented as long as we know that each method returns a JObject that we can use another method on. If we know that a chain works, we can add a method on to it without having to know what all the previous methods are doing, so all these previous methods are hidden by abstraction in this sense. Another abstraction example is that functions can be defined elsewhere and passed as arguments into some of the JObject methods, so smaller programs can be combined to become bigger ones.