Étude 2-1: Direct Use of JavaScript

This is the most direct method to interact with a page, and is the least ClojureScript-like in its approach.

(.methodname JavaScript object arguments)

;; call the sqrt function from JavaScript's Math object with an argument 3
(.sqrt js/Math 3)

;; equivalent of window.parseFloat("3.5")
(.parseFloat js/window "3.5")

;; equivalent of "shouting".toUpperCase()
(.toUpperCase "shouting")

;; equivalent of "ClojureScript".substr(2,3)
(.substr "ClojureScript" 2 3)

;; equivalent of document.getElementById("latitude")
(.getElementById js/document "latitude")

;; call the sqrt function from JavaScript's Math object with an argument 3
(js/Math.sqrt 3)

;; equivalent of window.parseFloat("3.5")
(js/Window.parseFloat "3.5")

;; equivalent of document.getElementById("latitude")
(js/document.getElementById "latitude")

;; equivalent of Math.PI
(.-PI js/Math)

;; equivalent of "ClojureScript".length
(.-length "ClojureScript")

;; equivalent of document.getElementById("latitude").value
(.-value (.getElementById js/document "latitude"))

;; setting properties: equivalent of
;; document.getElementById("latitude").value = 23.5;
(set! (.-value (.getElementById js/document "latitude")) 23.5)

;; equivalent of d = new Date
(def d (js/Date.))

;; now you can use it
(.getHours d)

;; if you need a true JavaScript Array object
(def arr (js/Array. 10 20 30))
(get arr 2)

cljs.user=> (in-ns 'daylight-js.core)
nil
daylight-js.core=> (defn testing [evt] (.alert js/window "You clicked me!!!"))
#'daylight-js/testing
daylight-js.core=> (let [btn (.getElementById js/document "calculate")]
(.addEventListener btn "click" testing))
nil

Étude 2-2: Using Google Closure

Using JavaScript directly is all well and good; one advantage is that if you’re a JavaScript programmer, you already know this stuff. The bad news is that you have all the problems of getting JavaScript to work on multiple browsers and platforms. Enter Google Closure, a library of JavaScript utilities that has all of those nasty compatibility parts all figured out for you. In this étude, you’ll use Closure for the interaction.

(ns daylight-gc.core
  (:require [clojure.browser.repl :as repl]
            [goog.dom :as dom]
            [goog.events :as events]))

cljs.user=> (require 'daylight-gc.core)
nil
cljs.user=> (in-ns 'daylight-gc.core)
nil
daylight-gc.core=> (require '[goog.dom :as dom])
nil
daylight-gc.core=> (dom/getElement "latitude")
#<[object HTMLInputElement]>
daylight-gc.core=> (.-value (dom/getElement "latitude"))
"55"
daylight-gc.core=> (set! (.-value (dom/getElement "latitude")) -20)
-20
daylight-gc.core=> ;; Closure has its own way to set an element's text
daylight-gc.core=> (dom/setTextContent (dom/getElement "result") 
"Here is some text")
nil

daylight-gc.core=> (defn testing [evt] (.alert js/window "Clickety-click"))
#'daylight-gc.core/testing
daylight-gc.core=> (events/listen (dom/getElement "calculate") "click" testing)
#<[object Object]>

daylight-gc.core=> (events/unlisten (dom/getElement "calculate") "click" testing)
true

Étude 2-3: Using dommy

While Google Closure gives you a lot of great code, it’s still JavaScript, and it “feels” like JavaScript. What you would like is a library that gives you the capabilities, but in a more functional way. One of those libraries is dommy. In this étude, you will use dommy to interact with the web page.

(ns daylight-dommy.core
  (:require [clojure.browser.repl :as repl]
            [dommy.core :as dommy :refer-macros [sel sel1]]))

  :dependencies [[org.clojure/clojure "1.7.0-beta2"]
                 [org.clojure/clojurescript "0.0-3211"]
                 [prismatic/dommy "1.1.0"]]

cljs.user=> ;; set up namespaces
cljs.user=> (require 'daylight-dommy.core)
nil
cljs.user=> (in-ns 'daylight-dommy.core)
nil
daylight-dommy.core=> (require '[dommy.core :as dommy :refer-macros [sel sel1]])
nil
daylight-dommy.core=> ;; access the first <input> element
daylight-dommy.core=> (sel1 "input")
#<[object HTMLInputElement]>
daylight-dommy.core=> ;; access all the <input> elements
daylight-dommy.core=> (sel "input")
#js [#<[object HTMLInputElement]> 
#<[object HTMLInputElement]> #<[object HTMLInputElement]>]
daylight-dommy.core=> ;; since IDs are unique, you use sel1 for them.
daylight-dommy.core=> (sel1 "#latitude")
#<[object HTMLInputElement]>

daylight-dommy.core=> ;; retrieve and set form field
daylight-dommy.core=> (dommy/value (sel1 "#latitude"))
"55"
daylight-dommy.core=> (dommy/set-value! (sel1 "#latitude") 10.24)
#<[object HTMLInputElement]>
daylight-dommy.core=> ;; set and retrieve text content
daylight-dommy.core=> (dommy/set-text! (sel1 :#result) "some text")
#<[object HTMLSpanElement]>
daylight-dommy.core=> (dommy/text (sel1 :#result))
"some text"
daylight-dommy.core-> (dommy/set-html! (sel1 :#result) "<i>Yes!</i>")

daylight-dommy.core=> (defn testing [event] (.alert js/window "Clicked."))
#'daylight-dommy.core/testing
daylight-dommy.core=> (dommy/listen! (sel1 :#calculate) :click testing)
#<[object HTMLInputElement]>
daylight-dommy.core=> ;; the web page should now respond to clicks. Try it.
daylight-dommy.core=> ;; now remove the listener.
daylight-dommy.core=> (dommy/unlisten! (sel1 "#calculate") :click testing)
#<[object HTMLInputElement]>
daylight-dommy.core=> 

Étude 2-4: Using Domina

The Domina library is very similar in approach to dommy. In this étude, you will use Domina to interact with the web page.

(ns daylight-domina.core
  (:require [clojure.browser.repl :as repl]
            [domina]
            [domina.events :as events]))

  :dependencies [[org.clojure/clojure "1.7.0"]
                 [org.clojure/clojurescript "1.7.48"]
                 [domina "1.0.3"]]

cljs.user=> ;; set up namespaces
cljs.user=> (require 'daylight-domina.core)
nil
cljs.user=> (in-ns 'daylight-domina.core)
nil
daylight-domina.core=> (require 'domina)
nil
daylight-domina.core=> (require '[domina.events :as events])
nil
daylight-domina.core=> (domina/by-id "latitude")
#<[object HTMLInputElement]>

daylight-domina.core=> ;; retrieve and set form field
daylight-domina.core=> (domina/value (domina/by-id "latitude"))
"55"
daylight-domina.core=> (domina/set-value! (domina/by-id "latitude") 10.24)
#<[object HTMLInputElement]>
daylight-domina.core=> ;; set and retrieve text content
daylight-domina.core=> (domina/set-text! (domina/by-id :result) "Testing 1 2 3")
#<[object HTMLSpanElement]>
daylight-domina.core=> (def resultspan (domina/by-id :result)) ;; to save typing
#<[object HTMLSpanElement]>
daylight-domina.core=> (domina/text resultspan)
"Testing 1 2 3"
daylight-domina.core-> (domina/set-html! resultspan "<i>Yes!</i>")#
<[object HTMLSpanElement]>
daylight-domina.core=> ;; look at web page to see result

daylight-domina.core=> (defn testing [event] 
(.alert js/window "You clicked me."))
#'daylight-domina.core/testing
daylight-domina.core=> (events/listen! (domina/by-id "calculate") :click testing)
#<[object HTMLInputElement]>
daylight-domina.core=> ;; the web page should now respond to clicks. Try it.
daylight-domina.core=> ;; now remove the listener.
daylight-domina.core=> (events/unlisten! (domina/by-id "calculate") "click")
#<[object HTMLInputElement]>
daylight-domina.core=> 

Étude 2-5: Using Enfocus

The Enfocus library is very different from dommy and Domina.

(ns daylight-dommy.core
  (:require [clojure.browser.repl :as repl]
            [enfocus.core :as ef]
            [enfocus.events :as ev]))

  :dependencies [[org.clojure/clojure "1.7.0-beta2"]
                 [org.clojure/clojurescript "0.0-3211"]
                 [enfocus "2.1.0"]]

cljs.user=> (require 'daylight-enfocus.core)
nil
cljs.user=> (in-ns 'daylight-enfocus.core)
nil
daylight-enfocus.core=> (require '[enfocus.core :as ef])
nil
daylight-enfocus.core=> (require '[enfocus.events :as ev])
nil

daylight-enfocus.core=> (ef/from "#latitude" (ef/get-prop :value))
"55"
daylight-enfocus.core=> (ef/at "#latitude" (ef/set-prop :value 10.24))
nil
daylight-enfocus.core=> (ef/at "#result" (ef/content "New text"))
nil
daylight-enfocus.core=> (ef/at "#result" (ef/html-content 
"<i>Improved text</i>"))
nil
daylight-enfocus.core=> ;; look at web page to see result

daylight-enfocus.core=> (ef/at "#result" (ef/content (.toString 3.14159)))
nil

daylight-enfocus.core=> (defn testing [evt] (.alert js/window "Click-o-rama"))
#'daylight-enfocus.core/testing
daylight-enfocus.core=> (ef/at "#calculate" (ev/listen :click testing))
nil
daylight-enfocus.core=> ;; the web page should now respond to clicks. Try it.
daylight-enfocus.core=> ;; now remove the listener.
daylight-enfocus.core=> (ef/at "#calculate" (ev/remove-listeners :click))
nil

Étude 3-1: Move the Zeros

This is a quick warm-up étude. Given a list of integers that have zeros interspersed throughout, move all the zeros to the end. Name the function move-zeros; it accepts a list as an argument and returns a new list with the zeros at the end. I saw the problem at this page, solved in Java, and wondered if I could do it in ClojureScript. Answer: yes, I could. And so can you. Hint: filter is useful. After I solved it, I realized just how much my thinking about functional programming had changed the way I look at imperative code. You may have the same experience:

move-zeros.core=> (move-zeros [1 0 0 2 0 3 0 4 5 0 6])
(1 2 3 4 5 6 0 0 0 0 0)

See a suggested solution: “Solution 3-1”.

Étude 3-2: More List Manipulation

Write a function named ordinal-day that takes a day, month, and year as its three arguments and returns the ordinal (Julian) day of the year. Bonus points if you return zero for invalid dates such as 29-02-2015 or 40-40-2015. Don’t worry about handling dates before the year 1584 correctly.

You will need to know if a year is a leap year or not. I’ll give you that one for free:

(defn leap-year?
  "Return true if given year is a leap year; false otherwise"
  [year]
  (or (and (= 0 (rem year 4)) (not= 0 (rem year 100)))
    (= 0 (rem year 400))))

Some sample output from the REPL:

formulas.core=> (ordinal-day 1 3 2015)
60
formulas.core=> (ordinal-day 1 3 2016)
61
formulas.core=> (ordinal-day 1 13 2015)
0
formulas.core=> (ordinal-day 29 2 2015)
0
formulas.core=> (ordinal-day 29 2 2016)
60
formulas.core=> (ordinal-day 31 9 2015)
0

Then, modify the daylight calculator from Chapter 2 to allow entry of a date in the form yyyy-mm-dd. You will need to split the input data into individual numbers. You can use either the split method for JavaScript strings or the split method from the clojure.string library. If you want to use the latter method, you will need to add that library to your require:

(ns stats.core
  (:require [clojure.browser.repl :as repl]
            [clojure.string :as str]))

To specify a regular expression for split, prefix a string with #. Here is some sample output from the REPL. Using JavaScript’s split returns a JavaScript array. Notice that you do not need to escape backslashes in patterns (see the last example):

formulas.core=> (require '[clojure.string :as str])
nil
formulas.core=> (.split "a:b:c:d" #":")
#js ["a" "b" "c" "d"]
formulas.core=> (str/split "a:b:c:d" #":")
["a" "b" "c" "d"]
formulas.core=> (str/split "abc123def456ghi789jkl" #"\d+")
["abc" "def" "ghi" "jkl"]
formulas.core=>

Bonus points: display the daylight as hours and minutes. Here is the relevant HTML to put in your index.html file:

<h1>Amount of Daylight</h1>
<p>
Latitude: <input type="text" size="8" id="latitude" />°<br />
Enter date in format <em>yyyy-mm-dd</em>: 
<input type="text" size="15" id="gregorian" /><br />
<input type="button" value="Calculate" id="calculate"/>
</p>

<p>
Amount of daylight: <span id="result"></span>
</p>

See a suggested solution: “Solution 3-2”.

Étude 3-3: Basic Statistics

Create a project named stats and write these functions, each of which takes a list of numbers as its argument:

mean

Calculates the arithmetic average of the list by summing the numbers (hint: use reduce or apply +) and dividing by the number of items in the list.

median

Calculates the median of the numbers. The algorithm is as follows:

1. Sort the list (hint: use sort).
2. If n, the number of items in the list, is odd, take the item at position (n − 1) / 2.
3. Otherwise, take the average of the items at positions n / 2 and (n − 1) / 2.

I used drop in my solution rather than nth.

stdev

Calculates the standard deviation of the numbers. Use the computational formula: , which works out to this algorithm:

1. Get the sum of the squares of all the numbers in the list.
2. Get the sum of all the numbers of the list, and square that result.
3. Divide the result of step 2 by n.
4. Subtract the result of step 3 from the result of step 1.
5. Divide the result of step 4 by n—1.
6. Take the square root of the result of step 5.

You could write two functions that use reduce: one to get the sum of the list and another to get the sum of squares, but, as a challenge, try to write a single function to get both numbers. Hint: there is no law that says the “accumulator” of the function that you give to reduce has to be a single number. It could just as well be a vector of two items. If you take this approach, you might want to make the reducing function a separate function rather than an anonymous function.

See a suggested solution: “Solution 3-3”.

Étude 3-4: Basic Statistics in a Web Page

Now that you have the functions working, connect them to a web page where people can enter a list of numbers and the program will display the resulting statistics when the input field changes. Here’s the HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Basic Statistics</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
        <h1>Basic Statistics</h1>
        <p>
        Enter numbers, separated by blanks or commas:
        <input type="text" size="50" id="numbers"/>
        </p>

        <p>
        Mean: <span id="mean"></span><br />
        Median: <span id="median"></span><br />
        Standard deviation: <span id="stdev"></span>
        </p>

        <script src="out/stats.js" type="text/javascript"></script>
    </body>
</html>

Once you have the individual items, you have to use js/window.parseFloat to convert them to numbers. You must do this because ClojureScript’s (and JavaScript’s) + operator works differently on strings than on numbers: (+ "12" "30") works out to "1230", not 42. Hint: use map.

Use whichever method of interacting with JavaScript (see Chapter 2) that you prefer. In this étude, you will listen for a change event, and you may want to use the JavaScript event.target property. Given a function like (defn handler [evt] ...), here is how you access the value of a form field via the target property:

See a suggested solution: “Solution 3-4”.

Étude 3-5: Dental Hygiene

OK, I’ll admit this is a fairly strange étude, but I couldn’t resist. Dentists check the health of your gums by checking the depth of the “pockets” at six different locations around each of your 32 teeth. The depth is measured in millimeters. If any of the depths is greater than or equal to four millimeters, that tooth needs attention. (Thanks to Dr. Patricia Lee, DDS, for explaining this to me.)

Your task is to write a function named alert that takes a vector of 32 vectors of six numbers as its input. If a tooth isn’t present, it is represented by the empty vector [] instead of the six numbers. The function produces a list of the tooth numbers that require attention. The numbers must be in ascending order.

Here’s a definition of a set of pocket depths for a person who has had her upper wisdom teeth, numbers 1 and 16, removed. Just copy and paste it into your project. Note that list entries may be separated by either a comma or by spaces:

(def pocket-depths
  [[], [2 2 1 2 2 1], [3 1 2 3 2 3],
  [3 1 3 2 1 2], [3 2 3 2 2 1], [2 3 1 2 1 1],
  [3 1 3 2 3 2], [3 3 2 1 3 1], [4 3 3 2 3 3],
  [3 1 1 3 2 2], [4 3 4 3 2 3], [2 3 1 3 2 2],
  [1 2 1 1 3 2], [1 2 2 3 2 3], [1 3 2 1 3 3], [],
  [3 2 3 1 1 2], [2 2 1 1 3 2], [2 1 1 1 1 2],
  [3 3 2 1 1 3], [3 1 3 2 3 2], [3 3 1 2 3 3],
  [1 2 2 3 3 3], [2 2 3 2 3 3], [2 2 2 4 3 4],
  [3 4 3 3 3 4], [1 1 2 3 1 2], [2 2 3 2 1 3],
  [3 4 2 4 4 3], [3 3 2 1 2 3], [2 2 2 2 3 3],
  [3 2 3 2 3 2]])

And here’s the output:

cljs.user=> (in-ns 'teeth.core)
nil
teeth.core=> (alert pocket-depths)
[9 11 25 26 29]
teeth.core=>

See a suggested solution: “Solution 3-5”.

Étude 3-6: Random Numbers—Generating a Vector of Vectors

How do you think I got the numbers for the teeth in the preceding étude? Do you really think I made up and typed all 180 of them? No, of course not. Instead, I wrote a ClojureScript program to create the vector of vectors for me, and that’s what you’ll do in this étude.

ClojureScript is luckily provided with the rand function. It generates a random floating-point number from 0 up to but not including 1 (if given no argument); or, if given a single argument n, returns a random floating value from 0 up to n. More useful for this étude is the rand-int function, which takes one argument n and returns a random integer from 0 up to but not including n.

Create a project named make_teeth and write a function generate-pockets that takes two arguments. The first argument is a string consisting of the letters T and F. A T indicates that the tooth is present, and an F indicates a missing tooth. The second argument is a floating-point number between 0 and 1.0 (inclusive) that indicates the probability that a tooth will be a good tooth.

The result is a vector of vectors, one subvector per tooth. If a tooth is present, the subvector has six entries; if a tooth is absent, the sublist is empty: []. Here is some sample output from the REPL:

make_teeth.core=> (generate-pockets "TFTT" 0.75)
[[1 2 2 3 1 1] [] [2 3 1 1 3 2] [4 2 2 3 2 3]]

These are the helper functions I needed:

(generate-list teeth-present probability result)

The first two arguments are the same as for generate_pockets; the third argument is the accumulated list. If a tooth isn’t present, add [] to the result; otherwise, add the return value of generate_tooth with the probability of a good tooth as its argument.

(one-tooth present probability)

This function takes as its arguments a single-character string ("T" or "F") to signiify the presence or absence of a tooth and the probability of a good tooth. If there’s no tooth, it returns []. Otherwise, it sets a “base depth” for all the pockets by generating a random number between 0 and 1. If that number is less than the probability of a good tooth, base depth is 2; otherwise, it’s 3. It then generates a vector of six numbers, each time randomly adding an integer from -1 to 1 to the base depth.

I imagine that, with a great deal of effort, I could have found a way to use map and reduce to give me the results I wanted, but I was too lazy. Instead, I used recur in generate-list and loop/recur in one-tooth.

See a suggested solution: “Solution 3-6”.

Étude 3-7: Monthly Daylight

This étude puts together a lot of the things you have been doing in this chapter into one rather large-ish project. The project name is daylight_summary, and it gives a table of average minutes of daylight per month for a given latitude or city (selected from a drop-down menu). Here is the HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Amount of Daylight</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
          th, td {
            border: 1px solid gray;
            padding: 0.5em;
          }
        </style>
    </head>
    <body>
        <h1>Amount of Daylight</h1>
        <p>
        <input type="radio" name="locationType" id="menu" checked="checked">
          <select id="cityMenu">
            <option value="39.9075">Beijing</option>
            <option value="52.52437">Berlin</option>
            <option value="-15.77972">Brasília</option>
            <option value="30.06263">Cairo</option>
            <option value="-35.28346">Canberra</option>
            <option value="-17.82772">Harare</option>
            <option value="-12.04318">Lima</option>
            <option value="51.50853">London</option>
            <option value="55.75222">Moscow</option>
            <option value="-1.28333">Nairobi</option>
            <option value="28.63576">New Delhi</option>
            <option value="12.36566">Ouagadougou</option>
            <option value="59.91273">Oslo</option>
            <option value="48.85341">Paris</option>
            <option value="35.6895">Tokyo</option>
            <option value="38.89511">Washington, D. C.</option>
          </select>
          <input type="radio" id="userSpecified" name="locationType">
          Other latitude: <input type="text" size="8" id="latitude"/>
          <input type="button" value="Calculate" id="calculate"/>
        </p>
        
        <h2>Monthly Average Daylight</h2>
        <table>
          <thead><tr><th>Month</th><th>Average</th></tr></thead>
          <tbody>
            <tr><td>January</td><td id="m1"></td></tr>
            <tr><td>February</td><td id="m2"></td></tr>
            <tr><td>March</td><td id="m3"></td></tr>
            <tr><td>April</td><td id="m4"></td></tr>
            <tr><td>May</td><td id="m5"></td></tr>
            <tr><td>June</td><td id="m6"></td></tr>
            <tr><td>July</td><td id="m7"></td></tr>
            <tr><td>August</td><td id="m8"></td></tr>
            <tr><td>September</td><td id="m9"></td></tr>
            <tr><td>October</td><td id="m10"></td></tr>
            <tr><td>November</td><td id="m11"></td></tr>
            <tr><td>December</td><td id="m12"></td></tr>
           
          </tbody>
        </table>
        <script src="out/daylight_summary.js" type="text/javascript"></script>
    </body>
</html>

In this program, don’t worry about leap years; do the calculation based on a 365-day year. To determine which of the radio buttons is selected, you use code like this in Enfocus, where ef is the abbreviation for the enfocus.core namespace:

(ef/from "input[name='locationType']" (ef/get-prop :checked)))

The selector is a CSS style selector, and the expression returns a list of the status of the two radio buttons, with true if selected and false if not.

If you are using Domina, use code like this, again using a CSS selector:

(def radio (domina/nodes (domina.css/sel "input[name='locationType']")))
(domina/value (first radio))

The result of the second expression is the string "on" if the radio button is selected, nil if not.

See a suggested solution: “Solution 3-7”.

Étude 4-1: Condiments

If you spend some time going through open datasets such as those from data.gov, you will find some fairly, shall we say, esoteric data. Among them is MyPyramid Food Raw Data from the Food and Nutrition Service of the United States Department of Agriculture.

One of the files is Foods_Needing_Condiments_Table.xml, which gives a list of foods and condiments that go with them. Here is what part of the file looks like, indented and edited to eliminate unnecessary elements, and placed in a file named test.xml:

<Foods_Needing_Condiments_Table>
  <Foods_Needing_Condiments_Row>
    <Survey_Food_Code>51208000</Survey_Food_Code>
    <display_name>100% Whole Wheat Bagel</display_name>
    <cond_1_name>Butter</cond_1_name>
    <cond_2_name>Tub margarine</cond_2_name>
    <cond_3_name>Reduced calorie spread (margarine type)</cond_3_name>
    <cond_4_name>Cream cheese (regular)</cond_4_name>
    <cond_5_name>Low fat cream cheese</cond_5_name>
  </Foods_Needing_Condiments_Row>
  <Foods_Needing_Condiments_Row>
    <Survey_Food_Code>58100100</Survey_Food_Code>
    <display_name>"Beef burrito (no beans):"</display_name>
    <cond_1_name>Sour cream</cond_1_name>
    <cond_2_name>Guacamole</cond_2_name>
    <cond_3_name>Salsa</cond_3_name>
  </Foods_Needing_Condiments_Row>
  <Foods_Needing_Condiments_Row>
    <Survey_Food_Code>58104740</Survey_Food_Code>
    <display_name>Chicken & cheese quesadilla:</display_name>
    <cond_1_name>Sour cream</cond_1_name>
    <cond_2_name>Guacamole</cond_2_name>
    <cond_3_name>Salsa</cond_3_name>
  </Foods_Needing_Condiments_Row>
</Foods_Needing_Condiments_Table>

Your task, in this étude, is to take this XML file and build a ClojureScript map whose keys are the condiments and whose values are vectors of foods that go with those condiments. Thus, for the sample file, if you run the program from the command line, the output would be this map (formatted and quotemarked for ease of reading):

[etudes@localhost nodetest]$ node condiments.js test.xml
{"Butter" ["100% Whole Wheat Bagel"],
"Tub margarine" ["100% Whole Wheat Bagel"],
"Reduced calorie spread (margarine type)" ["100% Whole Wheat Bagel"],
"Cream cheese (regular)" ["100% Whole Wheat Bagel"],
"Low fat cream cheese" ["100% Whole Wheat Bagel"],
"Sour cream" ["Beef burrito (no beans):" "Chicken & cheese quesadilla:"],
"Guacamole" ["Beef burrito (no beans):" "Chicken & cheese quesadilla:"],
"Salsa" ["Beef burrito (no beans):" "Chicken & cheese quesadilla:"]}

[etudes@localhost ~]$ npm install node-xml-lite
npm http GET https://registry.npmjs.org/node-xml-lite
npm http 304 https://registry.npmjs.org/node-xml-lite
npm http GET https://registry.npmjs.org/iconv-lite
npm http 304 https://registry.npmjs.org/iconv-lite
node-xml-lite@0.0.3 node_modules/node-xml-lite
└── iconv-lite@0.4.8

(def xml (js/require "node-xml-lite"))

(.parseFileSync xml "test.xml")

  {:name "Foods_Needing_Condiments_Table", :childs [
    {:name "Foods_Needing_Condiments_Row", :childs [
      {:name "Survey_Food_Code", :childs ["51208000"]}
      {:name "display_name", :childs ["100% Whole Wheat Bagel"]}
      {:name "cond_1_name", :childs ["Butter"]}
      {:name "cond_2_name", :childs ["Tub margarine"]}
      {:name "cond_3_name", :childs ["Reduced calorie spread (margarine type)"]}
      {:name "cond_4_name", :childs ["Cream cheese (regular)"]}
      {:name "cond_5_name", :childs ["Low fat cream cheese"]}
    ]}
    {:name "Foods_Needing_Condiments_Row", :childs [
      {:name "Survey_Food_Code", :childs ["58100100"]}
      {:name "display_name", :childs ["Beef burrito (no beans):"]}
      {:name "cond_1_name", :childs ["Sour cream"]}
      {:name "cond_2_name", :childs ["Guacamole"]}
      {:name "cond_3_name", :childs ["Salsa"]}
    ]}
    {:name "Foods_Needing_Condiments_Row", :childs [
      {:name "Survey_Food_Code", :childs ["58104740"]}
      {:name "display_name", :childs ["Chicken & cheese quesadilla:"]}
      {:name "cond_1_name", :childs ["Sour cream"]}
      {:name "cond_2_name", :childs ["Guacamole"]}
      {:name "cond_3_name", :childs ["Salsa"]}
    ]}
  ]}

(nth (.-argv js/process) 2)

(declare process-child)
  
(defn process-children [...]
   (process-child ...))

(defn process-child [...]
   (process-children ...))

Étude 4-2: Condiment Server

Now that you have the map from the previous étude, what can you do with it? Well, how many times have you been staring at that jar of mustard and asking yourself “What food would go well with this?” This étude will cure that indecision once and for all. You will write a server using Express, which, as the website says, is a “minimalist web framework for Node.js.” This article about using ClojureScript and Express was very helpful when I was first learning about the subject; I strongly suggest you read it.

Let’s set up a simple server that you can use as a basis for this étude. The server presents a form with an input field for the user’s name. When the user clicks the submit button, the data is submitted back to the server and it echoes back the form and a message: “Pleased to meet you, username.”

(ns servertest.core
  (:require-macros [hiccups.core :as hiccups])
  (:require [cljs.nodejs :as nodejs]
            [hiccups.runtime :as hiccupsrt]))

<input type="text" name="userName"/>

Étude 4-3: Maps—Frequency Table

This étude uses an excerpt of the Montgomery County, Maryland (USA) traffic violation database, which you may find at this URL. I have taken only the violations for July 2014, removed several of the columns of the data, and put the result into a tab-separated value file named traffic_july_2014_edited.csv, which you may find in the GitHub repository. (Yes, I know CSV should be comma-separated, but using the Tab key makes life much easier.)

Here are the column headings:

• Date of Stop, in format mm/dd/yyyy
• Time of Stop, in format hh:mm:ss
• Description
• Accident (Yes/No)
• Personal Injury (Yes/No)
• Property Damage (Yes/No)
• Fatal (Yes/No)
• State (two-letter abbreviation)
• Vehicle Type
• Year
• Make
• Model
• Color
• Violation Type (Warning/Citation/ESERO [Electronic Safety Equipment Repair Order])
• Charge (Maryland Government traffic code section)
• Race
• Gender
• Driver’s State (two-letter abbreviation)
• Driver’s License State (two-letter abbreviation)

As you can see, you have a treasure trove of data here. For example, one reason I chose July is that I was interested in seeing if the number of traffic violations was greater around the July 4 holiday (in the United States) than during the rest of the month.

If you look at the data, you will notice the “Make” (vehicle manufacturer) column would need some cleaning up to be truly useful. For example, there are entries such as TOYOTA, TOYT, TOYO, and TOUOTA. Various other creative spellings and abbreviations abound in that column. Also, the Scion is listed as both a make and a model. Go figure.

In this étude, you are going to write a Node.js project named frequency. It will contain a function that reads the CSV file and creates a data structure (I suggest a vector of maps) for each row. For example:

[{:date "07/31/2014", :time "22:08:00" ... :gender "F", :driver-state "MD"},
  {:date "07/31/2014", :time "21:27:00" ... :gender "F", :driver-state "MD"}, 
   ...]

Hints:

• For the map, define a vector of heading keywords, such as:

  (def headings [:date :time ... :gender :driver-state])

  If there are columns you don’t want or need in the map, enter nil in the vector.

• Use zipmap to make it easy to construct a map for each row. You will have to get rid of the nil entry; dissoc is your friend here.

You will then write a function named frequency-table with two parameters:

1. The data structure from the CSV file
2. A column specifier

You can take advantage of ClojureScript’s higher-order functions here. The specifier is a function that takes one entry (a “row”) in the data structure and returns a value. So, if you wanted a frequency table to figure out how many violations there are in each hour of the day, you would write code like this:

(defn hour [csv-row]
  (.substr (csv-row :time) 0 2))

(defn frequency-table [all-data col-spec]
  ;; your code here
)
  
;; now you do a call like this:
(frequency-table traffic-data hour)

Note that, because keyword access to maps works like a function, you could get the frequency of genders by doing this call:

(frequency-table traffic-data :gender)

The return value from frequency-table will be a vector that consists of:

• A vector of labels (the values from the specified column), sorted
• A vector giving the frequency counts for each label
• The total count

The return value from the call for gender looks like this: [["F" "M" "U"] [6732 12776 7] 19515]. Hint: build a map whose keys are labels and whose values are their frequency, then use seq.

Some frequency tables that might be interesting include the color of car (which colors are most likely to have a violation?) and the year of car manufacture (are older cars more likely to have a violation?). To be sure, there are other factors at work here. Car colors are not equally common, and there are fewer cars on the road that were manufactured in 1987 than were made last year. This étude is meant to teach you to use maps, not to make rigorous, research-ready hypotheses.

src
├── cljs_made_easy
│   ├── line_seq.clj
│   └── line_seq.cljs
└── traffic
    └── core.cljs

(ns traffic.core
  (:require [cljs.nodejs :as nodejs]
            [clojure.string :as str]
            [cljs-made-easy.line-seq :as cme]))
 
(def filesystem (js/require "fs")) ;;require nodejs lib

(defn example [filename]
  (cme/with-open [file-descriptor (.openSync filesystem filename "r")]
             (println (cme/line-seq file-descriptor))))

Étude 4-4: Complex Maps—Cross-Tabulation

Add to the previous étude by writing a function named cross-tab; it creates frequency cross-tabluations. It has these parameters:

• The data structure from the CSV file
• A row specifier
• A column specifier

Again, the row and column specifiers are functions. So, if you wanted a cross-tabulation with hour of day as the rows and gender as the columns, you might write code like this:

(defn hour [csv-row]
  (.substr (csv-row :time) 0 2))
  
(defn cross-tab [all-data row-spec col-spec]
  ;; your code here
  )
  
;; now you do a call like this:
(crosstab traffic-data hour :gender)

The return value from cross-tab will be a vector that consists of:

• A vector of row labels, sorted
• A vector of column labels, sorted
• A vector of vectors that gives the frequency counts for each row and column
• A vector of row totals
• A vector of column totals

The previous search on the full data set returns this result, reformatted to avoid excessively long lines:

(cross-tab traffic-data hour :gender)
[["00" "01" "02" "03" "04" "05" "06" "07" "08" "09" "10" "11" "12"
"13" "14" "15" "16" "17" "18" "19" "20" "21" "22" "23"] ["F" "M" "U"]
[[335 719 0] [165 590 0] [141 380 0] [96 249 0] [73 201 0] [63 119 0]
[129 214 2] [380 625 0] [564 743 1] [481 704 0] [439 713 1] [331 527 0]
[243 456 0] [280 525 0] [344 515 0] [276 407 0] [307 514 1] [317 553 0]
[237 434 1] [181 461 0] [204 553 1] [289 657 0] [424 961 0] [433 956 0]]
[1054 755 521 345 274 182 345 1005 1308 1185 1153 858 699 805 859 683
822 870 672 642 758 946 1385 1389] [6732 12776 7] 19515]

Here are some of the cross-tabulations that might be interesting:

• Day by hour: the marginal totals will tell you which days and hours have the most violations. Are the days around July 4, 2014 (a US holiday) more active than other days? Which hours are the most and least active?
• Gender by color of vehicle: (although the driver might not be the person who purchased the car).
• Driver’s state by property damage: are out-of-state drivers more likely to damage property than in-state drivers?

Bonus points: write the code such that if you give cross-tab a nil for the column specifier, it will still work, returning only the totals for the row specifier. Then, re-implement frequency-table by calling cross-tab with nil for the column specifier. Hint: you will have to take the vector of vectors for the “cross-tabulation” totals and make it a simple vector. Either map or flatten will be useful here.

See a suggested solution: “Solution 4-4”.

Étude 4-5: Cross-Tabulation Server

Well, as you can see, the output from the previous étude is ugly to the point of being nearly unreadable. This rather open-ended étude aims to fix that. Your mission, should you decide to accept it, is to set up the code in an Express server to deliver the results in a nice, readable HTML table. Here are some of the things I found out while coming up with a solution, a screenshot of which appears in Figure 4-1:

Figure 4-1. Screenshot of traffic cross-tabulation table

• I wanted to use as much of the code from “Étude 4-2: Condiment Server” as possible, so I decided on drop-down menus to choose the fields. However, a map was not a good choice for generating the menu. In the condiment server, it made sense to alphabetize the keys of the food map. In this étude, the field names are listed by conceptual groups; it doesn’t make sense to alphabetize them, and the keys of a map are inherently unordered. Thus, I ended up making a vector of vectors.

• I used map-indexed to create the option menu such that each option has a numeric value. However, when the server reads the value from the request, it gets a string, and 5 is not equal to "5". The fix was easy, but I lost a few minutes figuring out why my selected item wasn’t coming up when I came back from a request.

• The source file felt like it was getting too big, so I put the cross-tabulation code into a separate file named crosstab.cljs in the src/traffic directory.

• I wanted to include a CSS file, so I put the specification in the header of the hiccups code. However, to make it work, I had to tell Express how to serve static files, using "." for the root directory in:

  (.use app (.static express "path/to/root/directory"))

• Having the REPL is really great for testing.

• I finished the program late at night. Again, “the first way you think of doing it that works is the right way,” but I am unhappy with the solution. I would really like to unify the cases of one-dimensional and two-dimensional tables, and there seems to be a dreadful amount of unnecessary duplication. To paraphrase Don Marquis, my solution “isn’t moral, but it might be expedient.”

See a suggested solution (which I put in a project named traffic): “Solution 4-5”.

Étude 5-1: Reactive Programming with Quiescent

To use Quiescent, add [quiescent "0.2.0-alpha1"] to your project’s dependencies, and add requirements to your namespace:

(:require [quiescent.core :as q]
  [quiescent.dom :as d])

As an example, let’s define a simple component that displays an input area and some text that goes with the w field in the atom that was defined previously:

(q/defcomponent Example
  :name "Example"
  [status]
  (d/div {}
    "Your input here: "
    (d/input {:type "text"
              :value (:w status)
              :size "5"})
    (d/br)
    "Your input, squared: "
    (d/span {} (* (:w status) (:w status)))))

The general format for creating an HTML element inside a component is to give its element name, a map of its attributes (or the empty map {} if there are no attributes, as on the div), and the element content, which may contain other elements. The :name before the parameter list gives the component a name for React to use. The key/value pairs before the parameter list make up the component configuration; this is described in detail in the Quiescent Documentation. The value of the input field and span are provided by the current value of the :w key in the status atom.

The only thing remaining to do is to render the component. In Quiescent, the q/render function renders a component once. If you want continuous rendering, you can use JavaScript’s requestAnimationFrame to repeat the process. Remember, when using React, only the components that have changed get rerendered, so you don’t need to worry that using requestAnimationFrame will eat your CPU alive:

(defn render
  "Render the current state atom, and schedule a render on the next frame"
  []
  (q/render (Example @status) (aget (.getElementsByTagName js/document 
                                                           "body") 0))
  (.requestAnimationFrame js/window render))
  
  (render)

Quiescent’s render function takes two arguments: a call to the component with its argument—in this case, the dereferenced atom—and the DOM node where you want the component rooted. For this example, that’s the first (and, we hope, only) <body> element.

If you compile this code and then load the index.html file, you will see a zero in the input and output area—but you will also find that you cannot type into the field. That is because Quiescent and React always keep the DOM value and the atom value synchronized, and since the value in the atom never changes, neither can the field. To fix that, add this code to the input element (it is in bold):

(d/input {:type "text"
        :value (:w status)
        :onChange update-value
        :size "5"})

Next, write the update-value function, which takes the value from the event target and puts it into the atom that keeps the page’s state:

(defn update-value [evt]
  (swap! status assoc :w (.-value (.-target evt))))

Voilà—your page now updates properly.

Étude 5-2: Reactive Programming with Reagent

To use Reagent, add [reagent "0.5.0"] to your project’s dependencies and add this requirement to your namespace:

(:require [reagent.core :as reagent :refer [atom])

Note the :refer [atom] clause; Reagent has its own definition of atom that plays nicely with React; it is defined so that you can use it exactly the way you would use a normal ClojureScript atom.

As an example, let’s define a simple component that displays an input area and some text that goes with the w field in the atom that was defined previously:

(defn example []
 [:div
  "Your input here:"
  [:input {:type "text"
           :value (:w @status)
           :size "5"}]
  [:br]
  "Your input, squared: "
  [:span (* (:w @status) (:w @status))]])

The general format for creating an HTML element inside a component is to create a vector whose first element is a keyword giving the HTML element name, a map of its attributes (if any), and the element content, which may contain other elements. The value of the input field and span are provided by the current value of the :w key in the status atom. Unlike Quiescent, you must dereference the atom.

The only thing remaining to do is to render the component. You don’t have to request animation frames; Reagent handles that for you:

(defn run []
  (reagent/render [example]
                  (aget (.getElementsByTagName js/document "body") 0)))
          
(run)

Reagent’s render function takes two arguments: a call to the component and the DOM node where you want the component rooted, in this case, the first (and, we hope, only) <body> element.

If you compile this code and then load the index.html file, you will see a zero in the input and output area—but you will also find that you cannot type into the field. That is because Reagent and React always keep the DOM value and the atom value synchronized, and since the value in the atom never changes, neither can the field. To fix that, add this code to the input element (it is in bold):

(d/input {:type "text"
        :value (:w status)
        :on-change update-value
        :size "5"})

Next, write the update-value function, which takes the value from the event target and puts it into the atom that keeps the page’s state:

(defn update-value [evt]
  (swap! status assoc :w (.-value (.-target evt))))

Voilà—your page now updates properly.

Étude 6-1: Build the Data Structure

You have a lot of options in this étude. Phrasing them in the form of questions:

• Should you include the CSV text as a large string?
  • If so, do you include all the columns or just the ones you need for this project?
  • If you don’t want to have a large string, you may end up writing a Node.js program that takes the data file and creates a ClojureScript source file.
• How will you index the data?
  • Day of week → time of day → building
  • Time of day → building → day of week
  • Building → day of week → time of day
  • Some other combination
• Should the data for time of day be an array, map, or some other data structure?
• Should you index days of the week by number or as a map?
• What is the granularity of time of day? Hourly, every 30 minutes, every 15 minutes, or some other unit?

Unless you decide on a single level map or vector, you will want to look at the get-in and assoc-in functions for accessing and modifying data in a nested associative structure.

In order to calculate the percentage of utilization, you will also need to know the number of distinct rooms in each building. Note that the utilization could be more than 100%. For example, there may be classes that are concurrent in different disciplines; an “introduction to computer technology” might be listed under both BIS (business information systems) and CIT (computer and information technology). Or, an open writing lab may be shared by several English classes at the same time.

This is your implementation, so you get to make all these decisions. See what I came up with: “Solution 6-1”.

Étude 6-2: Visualizing the Data (Version 1)

Now that you have the data in a format that you like, choose a visualization. The one I decided on originally was to use a map of the campus, which is in a file named campus_map.svg in the datafiles folder in the github repository. The file has each building in a <g> element with an appropriate id; for example, the SVG for building B starts like this:

<g>
  <title id="group_B">0%</title>
  <rect
    transform="matrix(0,1,-1,0,0,0)"
    y="-123.85256" x="906.50964" height="74.705124" width="102.70512"
    id="bldg_B"
    style="fill:green;fill-opacity:0;stroke:#000000;stroke-opacity:1" />

The program lets you choose a day and time of day; when either of those fields changes, the program calculates the percentage of usage of each building and adjusts the fill-opacity and <title> contents. (I used green for the fill color, because the more the building is in use, the better it is.) Figure 6-1 shows what the resulting page looks like. The “play” button will start advancing time 15 minutes every 1.5 seconds and updating the map automatically.

Figure 6-1. Screenshot of building usage animation

See a suggested solution: “Solution 6-2”.

Étude 6-3: Visualizing the Data (Version 2)

I learned a lot of interesting things while writing the preceding étude, but, to be honest, it didn’t look anywhere near as exciting as I thought it would. A more traditional visualization—a bar chart—gives a lot more information in a very readable form, as you can see in Figure 6-2.

Figure 6-2. Screenshot of building usage bar chart

While it would be an interesting exercise to write a bar chart program, it is easier to use an existing library, so I downloaded Chart.js (version 1.0, not the alpha version 2.0 as of this writing) and installed the minimized JavaScript in the public directory. You may use any charting package you wish for your solution. If you feel tremendously ambitious, you may write your own.

See a suggested solution: “Solution 6-3”.

Étude 7-1: Rational Numbers

Clojure has rational numbers; if you enter (/ 6 8) in the REPL, you get back 3/4. ClojureScript doesn’t do that, so you will implement rational numbers by adding the minus, mul, and div methods to the SpecialNumbers protocol. You will then define a record named Rational for holding a rational number using its numerator and denominator. Implement all the methods of the protocol for rational numbers (including canonical and toString).

The canonical form of a rational number is the fraction reduced to lowest terms, with the denominator always positive; thus:

proto.core=> (canonical (Rational. 6 8))
#proto.core.Rational{:num 3, :denom 4}
proto.core=> (canonical (Rational. 6 -9))
#proto.core.Rational{:num -2, :denom 3}

To reduce a fraction, you divide its numerator and denominator by the greatest common divisor (GCD) of the two numbers. The GCD is defined only for positive numbers. Here is Dijkstra’s algorithm for the GCD of numbers m and n:

• If m equals n, return m.
• If m is greater than n, return the GCD of (m − n) and n.
• Otherwise, return the GCD of m and (n − m).

The cool thing about this algorithm for finding the greatest common divisor is that it doesn’t do any division at all! Notice that it is recursively defined, so this is a wonderful place for you to learn to use recur. (Hint: cond is also quite useful here.)

When converting to canonical form, if you have a zero in the numerator, just keep the rational number exactly as it is.

See a suggested solution: “Solution 7-1”.

Étude 7-2: Complex Numbers

Extend this project further by adding a record and protocol for complex numbers. A complex number has the form a + bi, where a is the real part and b is the imaginary part. The letter “i” stands for the square root of negative 1.

Here are formulas for doing arithmetic on complex numbers:

The canonical form of a complex number is just itself. Here is what conversion of complex numbers to strings should look like:

proto.core=> (str (Complex. 3 7))
"3+7i"
proto.core=> (str (Complex. 3 -7))
"3-7i"
proto.core=> (str (Complex. 3 0))
"3"
proto.core=> (str (Complex. 0 3))
"3i"
proto.core=> (str (Complex. 0 -3))
"-3i"
proto.core=> (str (Complex. 0 7))
"7i"
proto.core=> (str (Complex. 0 -7))
"-7i"

See a suggested solution: “Solution 7-2”.

Étude 7-3: Writing Tests

Through the book so far, I have been very lax in writing unit tests for my code. At least for this chapter, that changes.

Many projects put their tests in a separate test folder, so you should create one now, and, inside of it, make a file named test_cases.cljs. Then give it these contents (they presume that your project is named proto):

(ns ^:figwheel-always test.test-cases
  (:require-macros [cljs.test :refer [deftest is are]])
  (:require [cljs.test :as t]
            [proto.core :as p]))

Notice that the namespace is test-cases; the filename is translated to test_cases.

The ^:figwheel-always is metadata that tells Figwheel to reload the code on every change to the file.

The :require-macros is something new; macros are like functions, except that they generate ClojureScript code. The three macros that you will use are deftest, is, and are. First, let’s define a test that will check that the canonical form of 3 minutes and 84 seconds is 4 minutes and 24 seconds:

(deftest duration1
  (is (= (p/canonical (p/Duration. 3 84)) (p/Duration. 4 24))))

The deftest macro creates the test, and the is macro makes a testable assertion; the body of is should yield a Boolean value. You can run tests from the REPL:

cljs.user=> (in-ns 'proto.core)
nil
proto.core=> (require '[cljs.test :as t])
nil
proto.core=> (t/run-tests 'test.test-cases)

Testing test.test-cases

Ran 1 tests containing 1 assertions.
0 failures, 0 errors.
nil

If you want to test several additions, you could write several different deftests; but if they all follow the same model, you can use are, which is followed by a vector of parameter names, an expression to evaluate (which can contain let), and then a series of sets of arguments to be evaluated. In the following example, the parameter names vector is on the first line, the second and third line are the expression to evaluate, and the remaining lines are sets of arguments to assert. (Thus, the first set will plug in 1 for m1, 10 for s1, and "1:10" for expected and then test the expression with those values.)

(deftest duration-str
  (are [m1 s1 expected]
    (= (str (p/Duration. m1 s1) expected))
    1 10  "1:10"
    1 9 "1:09"
    1 60 "2:00"
    3 145 "5:25"
    0 0 "0:00")

In this étude, you will write a series of tests for the rational and complex numbers. As you will note, some of the tests I used for durations were designed to try “edge cases” in the hopes of making the algorithms fail. Here are some of the things you might consider testing:

See a suggested solution: “Solution 7-3”.

Étude 8-1: A Card Game

In this étude, you’re going to write a program that lets the computer play the card game “War” against itself.

Starting Player 1 with [2 0 16 13 14 18]
Starting Player 2 with [1 4 3 15 17 5]
** Starting round 1
Player 1 has [2 0 16 13 14 18] sending dealer (2)
Player 2 has [1 4 3 15 17 5] sending dealer (1)
3 of clubs vs. 2 of clubs
Player 2 receives [2 1] add to [4 3 15 17 5]
** Starting round 2
Player 1 has [0 16 13 14 18] sending dealer (0)
Player 2 has [4 3 15 17 5 2 1] sending dealer (4)
Ace of clubs vs. 5 of clubs
Player 2 receives [0 4] add to [3 15 17 5 2 1]
** Starting round 3
Player 1 has [16 13 14 18] sending dealer (16)
Player 2 has [3 15 17 5 2 1 0 4] sending dealer (3)
4 of diamonds vs. 4 of clubs
** Starting round 4
Player 2 has [15 17 5 2 1 0 4] sending dealer (15 17 5)
Player 1 has [13 14 18] sending dealer (13 14 18)
6 of diamonds vs. 6 of clubs
** Starting round 5
Player 1 has [] sending dealer ()
Player 2 has [2 1 0 4] sending dealer (2 1 0)
nil vs. Ace of clubs
Winner: Player 1