In lecture on 11/17, we will learn about selector-based programming and how many JavaScript libraries take advantage of CSS selectors to select elements in the DOM and operate over them. While libraries like jQuery and D3 exist to simplify adding properties to elements, they can be done in straight JavaScript as well. For example, JavaScript’s Document.querySelector() function (see MDN article, esp. querySelectorAll() for a list) is the analog for jQuery’s $("") selector syntax.
The purpose of this assignment is to get you comfortable with selecting sets of entities from the DOM and reading/changing their properties. The elements of the DOM can hold state (e.g. is this checkbox checked or not?), which can affect how functions operate over given data.
Look over this assignment before lecture on 11/17 to form questions to ask. The actual programming assignment itself is due on Monday, 11/23.
The Template
We’re using an HTML form to use as our base for our JavaScript exploration in this assignment. These elements have unique IDs, some are contained within named divs, and a subset have a class associated with them. Your goal is to use these identifiers to appropriately select relevant elements and operate over them (change or read their properties, based on user input).
It doesn’t do anything too fancy, here it is: http://jsbin.com/qevoka/edit?html,css,js,output
For your assignment, add the following functionality (some template code has been started in the JavaScript file):
- When the user clicks on the ‘Are you a student’ checkbox, enable all the student questions and disable all the non-student questions.
- If the user selects any odd option (1st, 3rd, 5th, etc.) option, fill in the ‘Does that make you tired’ text box with ‘Yes’.
- When the user clicks on the ‘Does your job have you interact with dust?’ question, fill in the below text box (‘Do you like your job?’) with ‘It’s too dusty!’ When the checkbox is cleared, clear the same text box, iff (if and only if) the text is the same as the checkbox entered.
- Similarly, when the user clicks on the ‘Do you use a desktop computer […]’, fill in the below text box with ‘No, I wish I were outside!’. When the checkbox is cleared, clear the same text box iff the text is what was filled in by this checkbox (like above).
Turn-in mechanism
By Monday, 11/16 you need to have at least looked over the assignment – it’s a good way to bring questions to class.
By Monday, 11/23 you need to turn in your final program. You can turn in a link: either to a JSBin, or you can put it into your handin directory. For this assignment, there is a handin link – we won’t do it by discussion.
There will also be a discussion board. Post here if you have a question, or if you find a resource for learning how to do it, or can answer someone else’s question. To get credit for this assignment, you must both make a meaningful post in the discussion (a reasonable question counts) and hand in a working program.
Notes
Selector-based programming can be very powerful, and data visualization libraries like D3 use it to bind data to elements on the page. Though D3 binds data to SVG elements (which look like HTML elements!), the selection concepts stay the same: one can give SVG elements IDs, classes, and select based on the type of tag and its position in the object hierarchy.
Here’s a nice demo that shows how object selection works in D3: http://prcweb.co.uk/lab/selection/. You can see that it is similar to jQuery and vanilla JavaScript, but the semantics are different. If you want a peek ahead, running through the Object Pattern D3 tutorial shows how selector-based programming can make drawing data-driven objects easier.
