CIS 111 WEB PROGRAMMING. 111 Project 5. CIS 111 Cross-Platform Web Development w/javascript

Transcription

1 CIS 111 WEB PROGRAMMING 111 Project 5 CIS 111 Cross-Platform Web Development w/javascript

2 CIS 111 Cross-Platform Web Development Project 5 Due 2100 Fri 3/4 PROJECT LEARNING OUTCOMES After completing this project, you will know how to use jquery Mobile to develop a cross-platform mobile web app that works on all devices

3 CIS 111 Cross-Platform Mobile Web Apps Project Requirements DUE DATE: 2100 FRI 3/4 IMPORTANT 1. Your JavaScript code must conform to the 111 Style Guide. 2. Bookmark Learn jquery Basics at jqfundamentals.com, and JSHint.com. 3. If you have not yet done so, Install Sublime packages HTML- CSS-JS Prettify and JSHint. 4. Read about Linting Tools, p. 267 in JSNN. 5. Read Beware the Browser Cache, and About Default Web Pages. WHERE TO GET HELP ON PROJECTS 1) In class. 2) In office hours. 3) Piazza Q&A. HERE ARE THE PROJECT REQUIREMENTS "First Things First (but not necessarily in that order)." -Dr. Who. For best results, solve the following problems in order. 1. [10 pts] 111/p5/ch5/quiz-ninja.html, 111/p5/ch5/js/ scripts.js, 111/p5/ch5/css/styles.css. These are the files you created for the Ch. 5 Quiz Ninja Exercises in your week 8 lab. Upload these files to the 111/p5/ ch5/ folder on the uoregon.edu server, and test this Quiz Ninja app. (Do not upload a file named index.html.) 2. [10 pts] 111/p5/ch6/quiz-ninja.html, 111/p5/ch6/js/ scripts.js, 111/p5/ch6/css/styles.css. These are the files you created for the Ch. 6 Quiz Ninja Exercises in your week 8 lab. Upload these files to the 111/p5/ ch6/ folder on the uoregon.edu server, and test this Quiz Ninja app. (Do not upload a file named index.html.) 3. [20 pts] 111/p5/functions.js Command Line JavaScript. Suppose a web service returns JSON data in the following format: person.json. 2

4 (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) => " " 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. 4. [20 pts] 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 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 3

5 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. 5. [20 pts] 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 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. 6. [20 pts] 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 4

6 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

7 7. [+5 XC]: 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 (?:). TO MAXIMIZE YOUR PROJECT POINTS Be sure you understand the four steps of the WebDev Cycle (explained in the last page of this document), and do not omit Step 4. Test your Web Page on the Server. It is the file on the server that gets graded, so make sure it works on the server. YOUR 111 FOLDER ON THE SERVER MUST BE.HTACCESS PASSWORD-PROTECTED. In your week 1 lab, you ran a program on the uoregon.edu server that set up password-protection on your 111 website. If your 111 folder on the server is not password protected, all your project scores will be zero (0). Your projects will be graded after this situation is corrected. See your instructor or a GTF asap. Do this without delay. ABOUT EXTRA CREDIT Do not spend any time on extra credit options until you have completed all project requirements. Extra credit points will not be awarded for incomplete projects. Read About Extra Credit. 6

8 CIS 111 Projects How to Turn In your Project How to Turn In your Project All you Have to Do is Make Sure your web pages are uploaded to the server and tested on the server by the Due-Date. When your web pages are on the server, they can be graded. You do not have to submit this project in Canvas, nor do you have to notify your instructor in any way (not even by Owl post). Just make sure you complete the project by the Due-Date, and do not upload or edit the files after the due-date. If you change the web page files in any way after the duedate, this will change the time-stamp of the files on the server, and your project will be late (zero points). QUESTIONS ABOUT THIS PROJECT? Post your questions on Piazza, so all students in class can see the answer. 111 HELP: OFFICE HOURS See the online schedule of Office and Help Hours in B008 Sci Libr. See your Instructor and GTF profile pages in Canvas for Office Hours. 7

9 CIS 111 Projects Project Grading Checkpoints HOW YOUR PROJECTS WILL BE GRADED These checkpoints will help you get full credit on your projects. The files you upload to the server by the due-date are what will be graded, so be sure to test your web pages on the server to make sure they are correct. Your job: make sure the files are on the server on time, and that you have tested them to make sure they are correct. Do not use Sublime's Sync button, as this can change the time-stamp on all your files on the server. Your 111 folder on the server must be.htaccess passwordprotected. If it is not, your project score will be zero (0). See your instructor or GTF for assistance if necessary. Know the 111 Late Policy as stated on the syllabus. There are no second chances. We do not have the time or the resources to grade your work twice. Therefore make sure that what you upload to the server is correct. Test your web pages on the server after uploading them. Time-Stamps are Crucial. When you upload a file to the server, it is stamped with the exact time of the upload. This time-stamp must be no later than the project due-date. Your project is on-time only if the time-stamps show that it was uploaded to the server on time. Do not re-upload any of your project files after the duedate. If you do, this will change the time-stamp and your project will be late (0 pts). 8

10 The 111 WebDev Workflow Here is the CIS 111 Web Development Workflow. Memorize these 4 steps. 1. Edit. Use the Sublime Text editor to create a web page (.html and.js files) on your computer. 2. Preview. Open the web page on your computer using Chrome. When it is perfect, and not before, go to the next step. 3. Upload. Move all project files (.html,.js,.png, and so on) to the server using an SFTP client (CyberDuck, Sublime, Aptana,...). This is also known as Publishing the web page. 4. Test. Use Chrome to open your web page that is on the server. Do not use CyberDuck-- use Chrome. Type into Chrome to open the web page that is on the server. Make sure that this web page is correct, because that is what will be graded. IMPORTANT: Read Beware the Browser Cache ( Related Glossary Terms Drag related terms here Index Find Term