Class 16
Last Class!
For our last class we are going to explore JavaScript, which is a browser or client-side, interpretive, scripting language that has been around since 1995, when it was called LiveScript and it was maintained by the browser company Netscape as a way of adding interactivity to web pages. We're going to be exploring JavaScript via jQuery, a very popular JavaScript framework that is currently blowing up huge.
A framework, in this sense, is a comprehensive library of shortcut methods (a.k.a. functions) and objects that are all built with JavaScript. In other words, developers took many of the functions and classes they had already been using in JavaScript, stuck them all in a single library file, and made them accessible with shortcut syntax that we call jQuery.
In Class Project: Create a Simple jQuery Slideshow
For this project, we will need these [project files] and this [tutorial PDF]. I have also created a tutorial video of this exercise:
We probably won't have time, but regardless I have prepared some more jQuery exercises that you can explore to get a firmer grip on the principles of this framework:
Example #1
We'll start with a simple example. Create an HTML doc with the following code and call it index.html:
Then create the following CSS file and name it style.css:
and place the following JavaScript in a js/script.js file:
Example #1 in action
In the previous code, we created a simple HTML5 document with nothing special in the body:
But if we then load this into a browser, we will see the following:
This shouldn't be all that suprising, since that message appears in the HTML. But the jQuery code we place in script.js should have given us the following:
This example is a simple test to see if jQuery has loaded properly. Since we didn't download the jQuery library, it should be no surprise that it doesn't work. Downloading jQuery is easy: simply go to jQuery.com and click the 
button. Or just click the button image I have provided to open up the jQuery library file. However you retrieve it, you'll see that it is contained inside a single JavaScript file. This file will be saved into the js/libs folder:
Once you have installed (a.k.a. saved) jQuery, open up your index.html file in a browser again to test it.
Example #1 Explained
So here's what is going on the previous example. The HTML is pretty simple: just a simple <p> tag with a default message in it. In the CSS file we created, this simple style declaration:
which applies to all <p> tags in the HTML document, including the aforementioned <p> tag, and the message text within it. In the script.js file we have the following code:
This code uses the jQuery object selector ($) and, in this case, it is selecting all HTML <p> elements. It is then calling the jQuery addClass function on all <p> tags, which attaches whatever CSS class name the function is passed as a parameter, adding to (and, in this case, overiding) whatever styles the tag had prior. In this case the class is .tmpFrameworkLoaded , the definition of which is defined in our CSS file:
The next line of jQuery uses the jQuery text function to change the text within all <p> and </p> tags to whatever string of characters is passed as a parameter:
If jQuery has indeed be loaded successfully, the $s, the addClass and text functions, and all that other jQuery syntax in our script.js file should work and we will be presented with an HTML document, altered directly in the browser, to look like this:
How Is This Better Than Good Ole' JavaScript?
I'm so glad you asked! Well, this is a simple example – realy only a couple of choice lines – that changes a few things around in our DOM (Document Object Model). As simple as it is, however, if we wanted to do the same thing using standard JavaScript, with no APIs or frameworks, it would look like this:
Yikes! Variable declarations?! getElementsBy TagName?! If/else statements?! That code is a hot mess! However, before jQuery was invented in 2006, this was the only way to do it.
So What Makes jQuery Better?
One thing that makes jQuery far easier to implement than standard Javascript is its selectors API. We're already quite familar with the concept of a selector: we've been using them constantly in our CSS files. In the following code snippet, body, a, and .highlight and all selectors:
As you can see, selectors are what CSS uses to reference HTML elements in general, and class names and ID tag specifically, with the intent of making them look and feel a certain way. In jQuery the concept is the same, but rather than determine styling, jQuery determines behavior. Take the following HTML code...go on, literally take it, and save it as an HTML document.
Example #2: Controlling Links
The HTML above contains a simple un ordered list of common links. Nothing special... We're going to add a stylesheet containing the following code:
and finally we're going to place the following jQuery code in our script.js file
Example #2: Explained
The jQuery code above is fully commented, but here is a rundown of what it's doing: 1.) The tmpExample object is created, along with a member method entitled ready. Then it just sits there in memory. 2.) As soon as the DOM is fully loaded, jQuery calls the $(document).ready() function we placed inside our script.js file. But notice we also passed it a reference to the tmpExample.ready object method, declared above. 3.) Because we did this, the browser will also execute this code.
This example demonstrates the essence of the jQuery selector API: after the DOM is fully loaded into the browser's memory, this bit of code:
uses the main jQuery selector ($) and then more specifically selects all links with each list item of the unnumbered list with the #tmpFavorites ID. It looks a lot like CSS, and this is not a coincidence: the jQuery selector API was developed to be familiar to CSS developers…like us!
Example #3: Toggling a Popup Div
So let's try another example using selectors. Using the following HTML code:
and the following styles in a css/style.css file:
In our scripts.js file, place the following javascript:
Example 3: Explained
On the surface, the above example works similar to the previous example: the jQuery ready function is called after the document loads. Chained to this ready function is our custom tmpExample.ready function. This function does two things:
1.)It attaches a jQuery click() event function to the first submit button in the HTML, labeled with the #tmpDialogueOpen ID attribute. This click function takes as its parameter an anonymous function. The event object ($e) is passed to it so that we can prevent the default action of this event: . Finally, we add a class to the tmpDialogue div:
This new class, you may notice, simply unhides the div#tmpDialogue, set to
display:none; in the css.
2.)
tmpExample.ready also attaches a second click() event, as seen in the code just above. This event does something similar to the previous click() event, but in this case it is attached the submit button labelled #tmpDialogueClose, and it removes the .tmpDialogueOn class from the #tmpDialogue div. As #tmpDialogue's native style is to display none, this line of code essentially re-hides it.
The result is something like a kind of toggling popup window:
Example #4: Refining Selectors
One more example, this time a little more advanced. [Click here] to see it in action. You can find the code [here].
Example #4: Explained
The HMTL is fairly straightforward: Two unnumbered lists and a section of links below it. Upon closer inspection, you will notice that nearly every tag is classed and/or IDed. For example: <ul id='tmpPlants'> and <li class='tmpVegetables' id='tmpOnion'>Onion</li>. This is done to achieve granular selection in jQuery (described below).
The CSS is also straightforward, with the only interesting style being this one:
This is essentially a class that provides a light blue highlight to an element.
The jQuery code, inside the script.js file, uses the same surface logic as the previous examples: creating an object with a ready function, then calling that object.function when the document is fully loaded:
But it's the stuff after the tmpExample.ready function definition that is most interesting. tmpExample.ready is actually just a one line function:
It attaches a click() event to each link in the HTML, with the tmpExample.findElements function call passed as the click event parameter. This ensures that tmpExample.findElements function, defined below tmpExample.ready, is called whenever a link is clicked.
The Switch Statement
findElements() is actually pretty simply too, it just uses a code construct we haven't seen before: the switch statement. Switch statements are pretty universal throughout the programming world. They can be thought of as switchboards: the statement checks the given input value and, based on this value, fires off a specific set of instructions. In our example, the switch statement is looking for the ID of whatever link called the findElements() function:
Then the statement defines eventualities for every link ID case we're interested in with case statements. Every case statement ends with the break; command. This exits the case, thereby exiting the swtich statment as well. Some examples of the case statements in our code:
–and–
These cases simply add the .tmpExample class to specific list items, but notice how jQuery is going about selecting them: siblings(), prevAll(), children(), parents(), etc. These methods allow you to search and filter the selection results you obtain. More on this below.
A Rundown of the jQuery Filters
The previous example is really designed to show you all of the jQuery Selector API's filtering functions in a single script. Let's examine each on a case by case basis.
find(): The find() method lets you search for elements within a selection you’ve already made. Below, we select all ul tags, then find() all li tags within them so we can add the .tmpExample class to each one:
siblings(): The siblings() method lets you select all elements on the same hierarchical level as your main selection, in this case all other list items in the same list as <li id="tmpCarrot">:
next(): The next() method lets you select the next sibling element in the HTML document:
prev(): Like next(), the prev() method lets you select the preceding sibling element in the HTML document:
nextAll() and prevAll(): these two methods work similarly to next() and prev(), except they select all sibling elements after and before your main selection respectively:
This instance of the prevAll() method has been passed a parameter, which further narrows its searching power to only select those previous siblings of #tmpOrange that happened to have the .tmpVegetables class:
parents(): not surprisingly, parents() selects all parents of a selected element. In this example, however, parents() is being passed a selector for the tmpSelection div, further narrowing it to just that parent:
parent(): Note that parent() is different than parents() in that it only selects the most immediate parent of the select element:
children(): this method can be used to select specific children elements of a selected element, in this case all h4 tags in the tmpList div:
not(): The not() method allows to essentially deselect specific elements. In the case below, we want to select all list items, except those with the .tmpVegetables class:
slice(): this method takes a beginning index value and ending index value as its parameters, allowing you to select a range of elements within a selection.
add(): The add() method allows to make a selection and then add elements to it, useful for constructing complicated selections of elements. Below we make a standard jQuery selection of all list items in the tmpAnimals unnumbered list, then we add the tmpBroccoli and tmpPepper list items.
eq(): this method allows you to reduce a selection based on its index number. In the following example, we select all list items, which returns an array of all list items in the DOM. The then eq() method is chained to our selection and passed an index number of 10. Because indexes always start at 0, eq(10) selects the 11th list item in the DOM, i.e. "Buffalo":
Events in jQuery
Not surpisingly, event handlers in any programming language exist to deal with events: mouse clicks, mouse moves, drags, drops. In short, user interaction. Creating event handlers in oldschool JavaScript used to be really difficult, but jQuery makes it much easier. There are a few ways to deal with events in jQuery, but the bind() method is by far the easiest.
The bind() method accepts two parameters:
- the event name, such as ‘ready’, ‘mouseover’, ‘mouseout’, or ‘click’
- a function call or anonymous function declaration (i.e. the entire body of the function is passed in as one lone parameter)
Try the following example:
Example 5: the jQuery bind() method
[click here to see example 5 in action] [click here to download the Example 05 files]
The bind() method simply attaches some other function or method to a particular event. In the case below, we have a very basic HTML5 document:
And some simple CSS:
and the following jQuery code in our script.js file:
The resulting index.html file, rendered in a browser, should look something like this:
[click screenshot to see the actual page in a browser]
As you can see, the six divs change background color as you hover the mouse over them (mouseover events), change back to their original background color when the mouse moves out (mouseout events) and toggles a dark blue background color when you click on any of them(click event). Let’s see how it works, shall we?
Example 5: Explained
The HTML and CSS is fairly straightforward: six anonymous divs in the HTML, styled as six squares by the CSS. The CSS also has two additional classes: they add background colors for the mouseover state and the clicked state, respectively:
As per usual, the jQuery is where the interaction happens. The first thing that occurs is a use of the bind() method to attach further functions to the entire document when the ready event is detected:
The bind() method accepts two parameters: 1.)the event name, in this case ready and 2.) a function call or anonymous function declaration. We’ll be passing an entire anonymous function as one big parameter. The function we’re passing is really just three simple subroutines:
1.)To each div tag we’re binding a mouseover event function that adds the tmpExampleOver upon detecting any mouse over event:
2.)Then to each div we’ll bind an event that essentially undoes what we just did when the mouse leaves the div area:
And finally we’ll bind a click event to each div that adds tmpExampleOn class if it isn’t attached, and removes the class if it is attached:
Advanced Event Handling
As I said before, there a plenty of interesting ways to handle events in jQuery. The following example covers four of them:
Example 6: Advanced Event Handling Examples
[click here to play with this example in a browser] [click here to get the example code]
The HTML and CSS for this example is very similar to that of example 05 above, i.e. some anonymous divs styled to be 100px by 100px squares. The code found in the script.js file provides four different examples of the innovative and simple ways to deal with events. Each of these functions is declared when the document has loaded via this line of jQuery:
Let’s examine each example. The first uses the standard bind() method we used in the previous example, but notice that it combines, or chains, three bind() methods together like so: $('div.tmpBind').bind(...).bind(...).bind(...); You may also notice that we’re using the find() method to find all children div tags within the div.tmpBind.
Example 06.01:
Rather than bind(), Example 06.02 uses jQuery’s mouseover(), mouseout(), and click() methods directly to add event functions, chaining them together like so:
$('div.tmpIndividual').mouseover(...).mouseout(...).click();
Example 06.02:
Example 06.03 uses the very convenient jQuery hover() and toggle() methods.
The hover() methods takes two functions as parameters, following this pattern:
$(‘the_element’).hover(the function to be called when the mouse is moved over the_element, the function to be called when the mouse is moved away from the_element);
The toggle() method is similar, except it deals with clicks rather than mouseover events:
$(‘the_element’).toggle(the function to be called when the mouse is clicked on the_element, the function to be called when the mouse is clicked a again on the_element);
Example 06.03:
And finally Example 06.04, which uses JavaScript methods focus() and blur() to deal with what happens when a browser gives focus (or removes it) from different user interface elements. In this case, we have a simple <textarea> tag. Users can ‘focus’ on things like textareas or input boxes by using the tab key on their keyboard, or by clicking on them directly. ‘blur’ refers to what happens when the user tabs away or clicks somewhere else. Using the focus() and blur() methods, we can define event functions for precisely this type of user interaction:
Example 06.04:
Above we are essentially adding the class .tmpFocused when a user focuses on the textarea in div#tmpTrigger, then removing that class when focus is removed, or blurred, as it is called. Also notice the last line in the function:
This forces browser focus on our textarea. Just calling the focus() method on a focussable element like <textarea> will give it immediate focus in the browser. (Note that with HTML5, this can be done without any JavaScript at all, as it is a built-in property of the new HTML5 form elements. However, it’s always nice to have fallbacks.)
Week 15
The Farm at Richville
a fake website
1.) The Exercise Files
[Click Here] to download the wireframe .PSD file and the completed HTML and CSS website.
2.) Farm at Richville – Setting Up the Site
3.) The Farm at Richville – Configuring the HTML and assets
4.) The Farm at Richville – Configuring the CSS – Part I
5.) The Farm at Richville – Configuring the CSS – Part II
6.) The Farm at Richville – Configuring the CSS – Part III
1 Degree. 1 World. Make a Difference!
I recently completed this short animation for the 2013 Sustainable CUNY Video Short Contest. The film features the voices of Natalie Goldberg, Lindsey Goldberg, and Abby Schwittek.
Week 9
Happy Birthday (sigh)
it's my birthday, so today we're going to create a 3D cupcake in Cinema 4D! The original tutorial that I am referencing for this exercise can be found [here].
Word & Image Typographic Animation
After today's class, we will begin work on the next After Effects Project. [Click here for the project description]. Here is what I will be working on to help you understand the stages of the project: a short PSA (Public Service Announcement) for Earth Day that focusses on the real world value of a one degree difference on your thermostat. Here is the preliminary script:
Think one degree is 'no big deal'
one degree can:
Raise your heating costs by as much as 3 percent.
Or it could Increase the nation' energy usage by and estimated 7 and a half billion dollars...
1 degree globally would increase rain fall by as much as 10% in some areas, but cause severe draughts in other areas. Weird huh?
One degree is a bigger deal than you might think...
What can we do about it?
Lowering your thermostat by one degree could save you as much as five percent on your heating costs!
It will help lower fossil fuel consumption, save you money, it may even help save the world!
So please remember: one degree is a big Big BIG deal!
Here are some preliminary sketches:
Here are my thumbnails... something like a quickly sketched out storyboard:
Dream Big 2012 - Bobby Sanabria Biopic
I made this short doc for the Bronx Children's Museum's 3rd annual Dream Big Initiative, shown at Cardinal Hayes High School in the Bronx. Bobby was a ton of fun to work with! His response to the film: " You do good work!"
Redact This! Artists Against Torture
Redact This! Artists Against Torture is an artistic response to the torture programs that have intensified in the wake of September 11 and have been justified by the "War on Terror". This evocative volume includes the work of artists such as Fernando Botero, Jenny Holzer, Daniel Heyman, Sandow Birk, Richard Serra, Malaquias Montoya, Frances Jeter, Art Hazelwood, Lou Netter and many members of the War Criminals Watch community. The idea for this book came to me in a dream and, in collaboration with my friends at WorldCantWait.org and WarCriminalsWatch.org, I decided to go ahead and produce it. We are currently looking for a publisher and have recently decided to seek for funding to self-publish as an interactive e-book.
Out From Plato's Cave
This is a proof-of-concept demo for the documentary Out From Plato’s Cave by Anna Purves. It is an interweaving of Plato’s Allegory of the Cave with the real life experiences by college students on their path to enlightenment while at Lehman College/City University of New York. As her editor and collaborator, I worked closely with Anna on developing the edit from her original cuts. I also often sat in back of the camera on many occasions, asking the kind of questions that got the best answers out of our interviewees – including Anna herself!