Command Line JavaScript.
1. Suppose a web service returns JSON data in the following format: person.json.
(A) Write a function named getAddress that accepts an argument of type person and returns the person's address as a string.
getAddress(p) => "21 2nd Street, Portland, OR 90021"
(B) Write a function named getTelNums that accepts an argument of type person and returns a string of telephone numbers for that person. getTelNums(p) => "212.555.1234 646.555.4567 541.502.1212 541.406.8765"
Note that some people may not have a telephone number, some may have just one, and some may have multiple telephone numbers. Your function should handle all cases.
2. 111/p5/triangle-ops-app.html, 111/p5/triangle-opsinfo.html, 111/p5/triangle-ops-app.js, 111/p5/triangleops.css.
Download the four files contained in the Mobile Web App Demo to your 111/p5/ folder, and open them in Sublime.
A) Save logic-ops-app.html as triangle-ops-app.html. Modify this web page as follows:
i) modify the range of the sliders to 1 .. 20.
ii) modify the buttons to read, Legal Triangle?, Area?, Triangle Type?, and 3:4:5 Triangle?
iii) replace Truth Value: with Function Result:
iv) replace all references to logic or binary ops with references to triangle ops.
B) Save logic-ops-app.js as triangle-ops-app.js. Replace the logic operator functions with your function definitions from Project 4. You will need a fourth function named, is345Triangle, that accepts three sides (floating point numbers are OK) and returns true if they are in the ratio of 3:4:5. Read the definition of 3:4:5 triangles.
Each of the buttons when clicked, should display the appropriate value at the bottom of the mobile app.
C) Save logic-ops-info.html as triangle-ops-info.html. Replace the content with a description of your four triangle operators.
D) Persistent NavBars in jQuery Mobile. The navbar at the top of the .html pages is a jQuery Mobile persistent navbar. It will only function correctly when your app is hosted on a server. If you open the app using the file:// protocol, you will get an XHR (ajax) page load error. Your navbar will work correctly when served from uoregon.edu, if you have the landing pages defined correctly.
E) Save logic-ops.css as triangle-ops.css. No changes to the CSS code are required, but no penalty for being creative.
3. 111/p5/ntheory-ops-app.html, 111/p5/ntheory-opsinfo.html, 111/p5/ntheory-ops-app.js, 111/p5/ntheoryops.css.
A) Save logic-ops-app.html as ntheory-ops-app.html. Modify this web page as follows:
i) replace the sliders with a single input widget of type number. Set the max value to 1000.
ii) modify the buttons to read, Deficient?, Perfect?, Abundant?, and Prime?
iii) replace Truth Value: with Function Result:
iv) replace all references to logic or binary ops with references to number theory ops.
B) Save logic-ops-app.js as ntheory-ops-app.js. Replace the logic operator functions with four function definitions, isDeficient, isPerfect, isAbundant and isPrime. Each of these functions can be written using only a single return statement, as described in class Tuesday of week 8 (get the notes from a someone who was there if you were not).
Each of the buttons when clicked, should display the appropriate value at the bottom of the mobile app.
C) Save logic-ops-info.html as ntheory-ops-info.html. Replace the content with a description of your four number theory operators.
D) Persistent NavBars in jQuery Mobile. The navbar at the top of the .html pages is a jQuery Mobile persistent navbar. It will only function correctly when your app is hosted on a server. If you open the app using the file:// protocol, you will get an XHR (ajax) page load error. Your navbar must work correctly when served from uoregon.edu.
E) Save logic-ops.css as ntheory-ops.css. No changes to the CSS code are required, but no penalty for being creative, either.
4. 111/p5/Dice-namic.html, 111/p5/Dice-namic.js. This is an exercise in Client-Side JavaScript. It uses jQuery but not jQuery Mobile. Save your Dice.js file from Project three as Dice-namic.js.
A) Create a web page with the following elements: An h2 header, two img elements, an input box, and a button element.
When the page loads, Dice.getURL is called twice to get the URL for the 1-dot die, and the jQuery.attr() function is used to display the images when the page loads:
When the user enters a target number and clicks Roll 'em!, the images are updated die-namically and the results displayed in a div on the page:
5. Optional, Not Required: 111/p5/Dice-namic-XC.js.
When the user gets lucky and hits her/his number in one roll, use the singular form when displaying the number of rolls. Hint: use the conditional operator (?:).
