only use subscription learning - oracleoukc.oracle.com/static14/opn/wdp5/x95177gc10_ag.pdf · learn...

Learn more from Oracle University at oracle.com/education/

Node.JS Fundamentals

Activity Guide

X95177GC10

Edit ion 1.0 | July 2016

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y

Copyright © 2016, Oracle and/or its affiliates. All rights reserved.

Disclaimer

This document contains proprietary information and is protected by copyright and other intellectual property laws. You may

copy and print this document solely for your own use in an Oracle training course. The document may not be modified or

altered in any way. Except where your use constitutes "fair use" under copyright law, you may not use, share, download,

upload, copy, print, display, perform, reproduce, publish, license, post, transmit, or distribute this document in whole or in

part without the express authorization of Oracle.

The information contained in this document is subject to change without notice. If you find any problems in the document,

please report them in writing to: Oracle University, 500 Oracle Parkway, Redwood Shores, California 94065 USA. This

document is not warranted to be error-free.

Restricted Rights Notice

If this documentation is delivered to the United States Government or anyone using the documentation on behalf of the

United States Government, the following notice is applicable:

U.S. GOVERNMENT RIGHTS

The U.S. Government’s rights to use, modify, reproduce, release, perform, display, or disclose these training materials are

restricted by the terms of the applicable Oracle license agreement and/or the applicable U.S. Government contract.

Trademark Notice

Oracle and Java are registered trademarks of Oracle and/or its affiliates. Other names may be trademarks of their

respective owners.

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y

Table of ContentsPractice 1: Setup

Practice 1: Setting Up Your Local Development EnvironmentPractice 2: Code Repositories

Practice 2: Creating and Working with Code RepositoriesPractice 3: Test-Driven DevelopmentPractice 4: Oracle Developer Cloud Service - DCS and ACC

Practice 4: Signing in to Developer CloudPractice 5: Installing and Running NodePractice 6: JavaScript HistoryPractice 7: Primitives and Operators

Practice 7: Declaring and Using VariablesPractice 8: Functions and Control Flow

Practice 8: Writing Functions, Global Variables, and LoopsPractice 9: Objects and Arrays

Practice 9: Generating ArraysPractice 10: Closures, IIFEs and Arrow Functions

Practice 10: Using Closures, IIFEs, and Arrow FunctionsPractice 11: Node Core

Practice 11-1: Using ModulesPractice 12: NPM

Practice 12-1: Using NPM packagesPractice 13: HTTP and RESTPractice 14: Node HTTP

Practice 14-1: Using ModulesPractice 15: Express

Practice 15: Using Generator ApplicationPractice 16: Express Middleware

Practice 16: Using Express MiddlewarePractice 17: JS in the Cloud

Practice 17: Modifying and Deploying a Web ServerPractice 18: The DOM

Practice 18: Using the DOM in an HTML PagePractice 19: CSS Fundamentals

Practice 19: Using CSS to Format an HTML PagePractice 20: Events

Practice 20: Adding Event Listeners to an HTML PagePractice 21: Debugging and ConsolePractice 22: Ajax and Connecting Node Services

Practice 22: Creating a REST API ClientPractice 23: Callbacks and Promises

Practice 23: Adding Callbacks and Promise Objects to the Client

5577899

11121313151516161717181820202223232525292930303131323233333435353737

of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y

Practice 24: JQuery FundamentalsPractice 24: Writing a JQuery Selection

Practice 25: JQuery DOM InteractionPractice 25: Replacing the DOM with Pure jQuery

Practice 26: JQuery Event ListeningPractice 26: Adding User Controls and Event Listening

Practice 27: Effects and Extending JQueryPractice 27: Extending JQuery by Adding Effects

Practice 28: JQuery and AjaxPractice 28: Using JQuery to Load Data into a Table

Practice 29: Mocking RESTful ServicesPractice 29: Mocking RESTful Services

Practice 30: Object-Oriented JSPractice 30: Using JavaScript and Test-Driven Development to Create Objects

Practice 31: ModulesPractice 32: Objects

Practice 32: Creating Functions to Work with JavaScript ObjectsPractice 33: Arrays

Practice 33: Using Arrays to Create MatricesPractice 34: Functional ProgrammingPractice 35: Utility Libraries

Practice 35: Utility LibrariesPractice 36: MVC

Practice 36: Using JavaScript to Create an MVC ApplicationPractice 37: Handlebar

Practice 37: Adding Handlebars to the View Layer of an ApplicationPractice 38: Backbone Models

Practice 38: Creating an Application by Using Backbone and REST ConnectionsPractice 39: Backbone Views

Practice 39: Adding a View to an Application by Using Backbone ViewPractice 40: Backbone Routing

Practice 40: Managing the Routes and History of an Application

3838393940404141424243434444454646474748505051515252535355555757

of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Practice 1: Setting Up Your Local Development Environment

Overview

To prepare for your future course assignments you have to setup your local development environment.

Tasks

• Download and install GIT from: http://git-scm.com/downloads • (Optional) Install a GUI Client for GIT.

The course uses the command line to work with GIT. • Download and install Node from: https://nodejs.org/

You can install the latest version but the course focuses on Node V. 0.12. You can install this version from: https://nodejs.org/en/download/releases/

• Download and install the Chrome web browser from: https://www.google.com/chrome/.

Environment Check

To check that your environment is correctly set up open a terminal or command prompt and run the following commands:

• node --version The output should be the version of the Node.js you installed.

• git --version The output should be the version of the GIT version you installed. If you are using Windows try using the “git bash” program instead.

Notes

• Windows: GIT usually installs a separate program called “git bash” that is a command prompt to run GIT commands, node programs might be run using “git bash” as well.

• Windows: Node usually modifies your PATH environment variable to add the path to the Node installation.

• Linux: You can install Node and GIT using the included tools on your operating system (yum, apt-get) • Node: You can download the node binary only, if you do, you have to modify your PATH environment

variable and download and extract NPM in the same location as Node.

education.oracle.com education.oracle.com

of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Editors / Development Tools

In addition to Git and Node, you will need an editor to create your JavaScript code. Here are some free open source editors/IDEs you might consider.

• Atom - https://atom.io. A free and open source programming editor. Created by GitHub (MIT License). • Brackets - http://brackets.io. A free and open source programming editor focused on HTML, CSS and

JavaScript. Created by Adobe (MIT License). • Eclipse - http://eclipse.org. A free and open source IDE very popular in the Java community. Created

by IBM (EPL). • Emacs - https://www.gnu.org/software/emacs/. The original free and open source programming editor.

Created by the Free Software Foundation (GPL). • NetBeans - https://netbeans.org. A free and open source IDE popular in the Java community. Includes

tight debugging integration with Google Chrome browser. Created by Sun Microsystems (CDDL and GPL2).

of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Practice 2: Creating and Working with Code Repositories

Overview

Practice the basic GIT operations.

Tasks

Creating a new local repository: • Create a new GIT repository using: git init in a new empty folder.

Working with local repositories: • Add a new text file with some content. • Add the file to commit using git add ________ with your file name. • Commit your changes using git commit.

Creating a new “cloneable” repository (for collaboration)

• In a separate new folder initialize a new bare repository using git init –bare Cloning a repository:

• Clone the repository in another folder using git clone file://__<Full path to the bare repository>___ <RepositoryName> This creates a folder containing the cloned repository. Windows: git clone file://c:/development/temp/bare myRepo Linux: git clone file:///home/myUser/development/temp/bare myRepo

Note: The example uses the file protocol but depending on how you host your repositories other protocols may be used. Creating the initial commit and master branch,

• Create an empty readme file and execute these commands: git add and git commit • Push your changes to the original repository: git push origin master

Working with repositories:

• Add, copy, or modify files in the repository. • Add the files to the commit: git add • Commit the files: git commit • Pull changes from the original repository: git pull origin master • Push your changes to the original repository: git push origin master

At any point, you can run git status to check the status of your repository.


of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Practice 3: Test-Driven Development There is no practice for this lesson.


of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Practice 4: Signing in to Developer Cloud

Overview

You need an Oracle Cloud account to deploy your applications. Your instructor will provide you with your credentials to log into your Oracle Cloud account. Once logged in, you should have access to the following services on your Oracle Cloud dashboard.

• Use Oracle Application Container Cloud to run your applications in the cloud. • Use Oracle Developer Cloud Service to store your source code. In the Oracle Developer Cloud

Service, you can create Git repositories to store your code. • Oracle Storage Cloud Service stores things like log files and development artifacts generated during

the development process. Use your Oracle Cloud account for the practices found in this course.

Tasks

Ask your instructor for your credentials and the URL for your Oracle Cloud account, copy it here for future reference: Username: _________________________________________________________________ Password: _________________________________________________________________ _________________________________________________________________ Identity Domain: _________________________________________________________________ URL: _________________________________________________________________ Enter the Oracle Cloud and change your password, verify that you have access to the Oracle Application Container Cloud and to the Oracle Developer Cloud Service. Enter the Oracle Developer Cloud Service and open the project your instructor created, copy the URL of the GIT repository.

• Open a Terminal, Command Prompt, or “git bash” where you can run Git commands. • Go to a folder where you want to store your projects.

education.oracle.com

of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


• Clone the cloud repository by running “git clone” with the copied url: git clone <CopiedUrl> Note: you may be asked for your Oracle Cloud password.

of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Practice 5: Installing and Running Node There is no practice for this lesson.


of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Practice 6: Javascript History There is no practice for this lesson.


of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Practice 7: Declaring and Using Variables

Overview

In this practice, you create variables and print the typeof value. The purpose of this assignment is to check your understanding of the materials covered in the lesson 3 (Primitives and Operators). It is also an opportunity for you to gain additional practice in using variables and operators in Javascript.

Tasks

1. Create a js file named PracticePrimOper.js. Use the following command from a terminal or command prompt window to run your code after each step in this practice: node PraticePrimeOper

2. Store the current year in a variable year. Print the value and the output from the typeof operator to the console.

3. Declare in one sentence three variables that represent three different types of numbers: 12, 12.5, -14.1.

4. Store your name in a name variable. Print the value and the output from the typeof operator to the console.

5. Declare a boolean variable named c. Print the value and the output from the typeof operator to the console.

6. Declare a variable named d and assign the value null. Print the value and the output from the typeof operator to the console.

7. Declare a variable message, that stores the following string Hello “little” world! Print the string to the console.

8. Declare a variable e without giving it a value. Print the value and the output from the typeof operator to the console.

9. Store the PI value (3.14) in a variable pi. Print the value and the output from the typeof operator to the console.

10. Modify the expression: var result = (8*8) >= (8*8); to return false and print the result. 11. Store a binary number in a variable g. Print the value and the output from the typeof operator to the

console. 12. Declare the x variable. 13. Add the year and name variables declared earlier and assign the result to x declared in step 12. Print

the value of x and the output from the typeof operator to the console. 14. Add the year and c variables and assign the result to x. Print the value of x and the output from the

typeof operator to the console. 15. Add the c and d, variables and assign the result to x. Print the value of x and the output from the

typeof operator to the console. 16. Add the pi and e variables and assign the result to x. Print the value of x and the output from the

typeof operator to the console. 17. Subtract year from name and assign the result to x. Print the value of x and the output from the

typeof operator to the console.


of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


18. Subtract year from c and assign the result to x. Print the value of x and the output from the typeof operator to the console.

19. Declare a variable age with a value of your age. Using the ternary operator, log to the console whether you are legally of drinking age (assume a value of 21).

20. Using the numbers 2, 3, and 4 use arithmetic operators to return 6 as result and store the value in a variable operation. Print the value of operation to the console.

21. Write a sentence that returns the reminder of dividing 11 by 3.

of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Practice 8: Writing Functions, Global Variables, and Loops

Overview

In this practice, you develop a couple of functions to demonstrate your understanding of the materials covered in Lesson 4 (Functions and Control Flow). It is also an opportunity for you to gain additional practice in use structures to control the flow of execution in your programs. Note: You can run the solution using node from the command line to see the desired output.

Tasks

1. Create a js file named PracticeFuncControlFlow.js. 2. Write a function that converts a measurement from Fahrenheit to Celsius. Test the function using the

values 50 and 80. The equation to convert the temperature is: celsius = (5/9) * (fahrenheitTemperature-32);

3. Write a function that will sum the values of all arguments passed to it and returns the result. Sum the numbers 2, 3 and 5. Hint: Include a for loop that will loop through the arguments passed to the function: for (var i = 0; i < arguments.length; i++) {

total += arguments[i]; }

4. Write a function that when passed a number will return the same number with three exceptions: • For numbers divisible by 3, print “Fizz” instead of the number. • For numbers divisible by 5 (and not 3), print “Buzz” instead. • For numbers that are divisible by both 3 and 5 print "FizzBuzz". • Pass 12 and 15 to the function.

5. Write two functions that both access a globally scoped variable x, each logging it to the console. Set the value of x to 42. Calling the function should log the function name, and the value of the shared variable.

6. Create a global variable y with a value of 6. Write a function named outer that defines a new variable y using the var keyword. Set the value of y in outer to 42. Write two inner functions that access variable y, each function should log the function name and the value of y. Log the value of y outside the outer function.

7. Create a looping structure that logs the numbers 0 through 20 to the console. Use the following function to print the result on the same line. process.stdout.write(i + " ");

Call console.log with no parameters. This will add a new line before the next function. 8. Create a copy of the previous loop and modify it to only log even numbers to the console. 9. Create a copy of the previous loop and modify it to terminate when it reaches the number 42.


of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Practice 9: Generating Arrays

Overview

The purpose of this assignment is to check your understanding of the materials covered in lesson 5 (Objects and Arrays). It is also an opportunity for you to gain additional practice in using objects and arrays in JavaScript.

Tasks

1. Create a js file named PracticeObjArrays.js. 2. Given arr1 = [1,2,3,4,5,6,7,8,9,0], generate a filtered array arr2 containing only even values. 3. Given arr1 = [1,2,3,4,5,6,7,8,9,0], generate a new array arr2 containing the values of arr1 in reverse

order. 4. Given arr3 = ['aa','b','cccc','dddddd','eeee','fffff'], generate a new array arr4 containing the values of

arr3, sorted by value length, in descending order.


of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Practice 10: Using Closures, IIFEs, and Arrow Functions

Overview

The purpose of this assignment is to check your understanding of the materials covered in the lesson 6 (Closures, IIFEs and Arrow Functions). It is also an opportunity for you to gain additional practice in using closures, IIFEs, and arrow functions in JavaScript.

Tasks

1. Create a js file named PracticeClosures.js. 2. Create a closure that returns a function that accepts a message string and limit integer. The returned

function will log the message to the console, but only up to the limit number of times. Hint: Here is some sample code showing how the function would be called. var warn = new createWarnFn('Warning ', 3); warn(); // Logs "Warning 1" warn(); // Logs "Warning 2" warn(); // logs "Warning 3" warn(); // logs nothing

3. Use an IIFE make the provided function output the numbers in the order expected:

for (var i = 1; i <= 5; i++) { setTimeout(function() { console.log(i); }, i * 100); }

4. Using the solution to our FizzBuzz practice in Lesson 8, modify our solution to use an arrow function,

rather than a named function. Also, call the function using an array map method. Have the function process the following array of numbers: var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 15];

5. Using the solutions to the practice in Lesson 9 Tasks 2 and 4, convert your solutions to the array exercises to use arrow functions, rather than anonymous functions.


of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Practice 11-1: Using Modules

Overview In this practice, you create node modules to be used in your applications.

Task

• Create a new triangle.js file with a module that exports the function to calculate the area of a triangle. Name the export function area. The area of a triangle is equal to its base multiplied by its height all divided by 2: area = (base - height) / 2

• In a separate file require the triangle module and calculate the area of the following triangles: b=2 h=2, b=5 h=3, b=13 h=11 and print the results, the output should look like this:

triangle: b:2 h:2 area:2 triangle: b:5 h:3 area:7.5 triangle: b:13 h:11 area:71.5


of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Practice 11-2: Node Core – The Node API

Overview In this practice, you use the node API to create a simple command-line tool to compress a file using the GZip format.

Tasks

• Name the script zip.js. • It should accept two command line arguments: source and destination.

o Command line arguments for scripts can be found in the global variable process.argv as an array where process.argv[2] is the source file and first parameter and process.argv[3] is the destination file and second parameter.

o A sample command would be: node --harmony zip.js file.txt file.txt.gz • It should create a gzip transform stream • It should create a readable stream of the file specified by source • It should create a writable stream of the file specified by destination • It should pipe the output of the readable source stream to the gzip transform stream, and then pipe the

output of that to the writable destination stream • (Optional) Add error event handlers

Reference

https://nodejs.org/api/stream.html#stream_readable_pipe_destination_options https://nodejs.org/api/process.html#process_process_argv https://nodejs.org/api/fs.html#fs_fs_createreadstream_path_options https://nodejs.org/api/fs.html#fs_fs_createwritestream_path_options https://nodejs.org/api/zlib.html#zlib_class_zlib_gzip


of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Practice 12-1: Using NPM packages

Overview In this practice, you create a file downloader application using multiple packages.

Task

Your application must download a file from the internet and you specify the file to download using the command line: usage: node app -d url -f destinationName [-z] Example usage: node app -d http://www.w3.org/Protocols/rfc2616/rfc2616.txt -f rfc2616.txt downloading: http://www.w3.org/Protocols/rfc2616/rfc2616.txt destination: rfc2616.txt

• Create a directory named dload. • Change into that directory. • Create an app.js file. • Create a package.json file. • Use the following text as the contents of your package.json. { "name": "dload", "version": "1.0.0", "description": "", "main": "app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { } }


of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


• Use the yargs package to parse command-line arguments. o Install the yargs package: npm install --save yargs o If parameter d or f are not provided the application should print an error message:

node app provide download link! usage: node app -d url -f destinationName [-z]

• Use the http core node package to download the file. • Save the file using the fs core package. At the end of the process, the file is downloaded and saved.

• Use the progress package to display the download progress.

o Install the progress package: npm install --save progress • After the download is completed if the z parameter is sent zip the downloaded file and save it in the

same download location using the archiver package. o Install the archiver package : npm install --save archiver

• If you look at your package.json, you should see the three modules you added to the project listed in the dependencies section.

Tips:

Use the documentation at npmjs.org and nodejs.org to complete this practice. Reference

https://nodejs.org/api/http.html https://nodejs.org/dist/latest-v5.x/docs/api/http.html#http_http_request_options_callback https://www.npmjs.com/package/yargs https://www.npmjs.com/package/archiver https://www.npmjs.com/package/progress

of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Practice 13: HTTP and REST fundamentals There are no practices for this lesson.


of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Practice 14-1: Using Modules

Overview In this practice, you create a simple web server.

Task

• Create a web server that: o Listens in port 8080 for requests o Accepts GET requests for files in a subdirectory, serving them up with correct headers o Sets the correct Content-Type header using the mime NPM package and the requested file

name o Returns a status 404 if the file is not found o Files being served should be in a web subdirectory

To test the project add an index.html file to the web subdirectory with the following contents: <html> <head> <title>Hello!!</title> </head> <body> <h1>Hello world</h1> </body> </html>

Open a web browser window and go to http://localhost:8080/index.html to test the server. This exercise can be solved by combining many of the code demos into a single program. It is instructive to add console.log() calls throughout the code, to watch the requests as they happen. To stop the server, use CTRL+C in the console where the server is running.


of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Reference http://httpstat.us https://www.npmjs.com/package/mime https://nodejs.org/api/globals.html#globals_dirname https://nodejs.org/dist/latest-v5.x/docs/api/fs.html#fs_fs_stat_path_callback https://nodejs.org/dist/latest-v5.x/docs/api/http.html#http_response_writehead_statuscode_statusmessage_headers https://nodejs.org/dist/latest-v5.x/docs/api/fs.html#fs_fs_createreadstream_path_options

of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Practice 15: Using Generator Application

Overview In this practice, you will modify the various template files in /view to get a feel for how templates work in Express.

Tasks

• If you have not done so already, install Express in a command prompt or terminal window: o npm install express

• Install express-generator globally using: o npm install -global express-generator

• Express should now be installed on your system. To check type: o express -V

o This should print the current version for Express. • If the express command is not in the path, do one of the following:

o Add express to the path: Windows: C:\Users\user\AppData\Roaming\npm OS X: /usr/local/bin Linux: /usr/bin

o You may need to add the NPM global dependency path to your PATH environment variable to use the express-generator tool: Windows: C:\Users\user\AppData\Roaming\npm\node_modules\express-

generator\bin

OS X: /usr/local/lib/node_modules/express-generator/bin Linux: /usr/lib/node_modules/express-generator/bin

• Create a simple empty application using: express --hbs --git express-project • Change into the express-project directory. • Install any dependencies: npm install • Modify the index.hbs file in the views directory to add a link to an About page using:

o <a href=”about”>About</a>

o Create the new page named about.hbs. Use the index.hbs as a guide. Add a link back to the index.hbs page. Add footer to the bottom of the page by adding the following at the bottom of the page:

{{footer}}


of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


o Add a route to the page in the routes/index.js. router.get('/about', function(req, res, next) { res.render('about', { title: 'About', footer:"(C) 2016" }); });

o Add a footer variable to the default route. • Start node from a command prompt or terminal window:

o Windows: set DEBUG=myapp:* & npm start o OS X or Linux: DEBUG=myapp:* npm start

• Add additional markup to the index.hbs file, and refresh the page to see the changes reflected. The server does not need to be restarted if template files are changed, since templates are not cached by default. All that is required is reloading the changed page in the browser to get the modified output. Do not forget to stop and restart your server, if you change any .js files! Reference http://expressjs.com/en/guide/using-template-engines.html https://www.npmjs.com/package/handlebars

of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Practice 15: Creating a REST Application

Overview Using what we have learned, create a new express application that will be a simple REST API server

• It should respond to the typical REST method->action mappings • It should have two distinct endpoints, for instance /movies and /actors • It should respond with JSON • Use arrays to store your data. Here are example arrays you can use: movies.push({ id: movieId++, title: "cloud", length: 90, language: "English" }); movies.push({ id: movieId++, title: "oracle", length: 110, language: "English" }); actors.push({ id: actorId++, name: "John Doe", age: 30 }); actors.push({ id: actorId++, name: "Peter Sanders", age: 33 });

• Data is sent and received in JSON format.

Tasks

• Use the express.Router() object (router.get, router.post) to create a REST web service. • Require and use use the body-parser npm package to parse the body of the POST requests. • Create a REST GET /movies endpoint that returns a list of movies by title with a numeric id. • Create a REST GET /movies/ID endpoint that returns the details of a movie. • Create a REST GET /actors endpoint that returns a list of movies by title with a numeric id. • Create a REST GET /actors/ID endpoint that returns the details of a movie. • Create a REST POST /movies endpoint that receives the movie information and adds it to the movies

list. Data is received in the request body as JSON. • Create a REST POST /actors endpoint that receives the actor information and adds it to the actors

list. Data is received in the request body as JSON. • Enable cross domain headers for your server.


of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Use your browser and a REST client tool to test your service. Bonus: Serve up a static index.html page to display if http://localhost:3000 is entered into the browser. Create an html subdirectory. In the directory, create an index.html file that displays the name of the service and links to the GET endpoints. You can enable the html directory to serve static pages by adding the following line to your server: app.use(express.static('html')); Place the line after your initial variable and constant declarations. This assumes app is defined as: const app = express(); Reference:

• https://www.npmjs.com/package/body-parser • http://restclient.net/

of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Practice 16: Using Express Middleware

Overview In this practice, you create a new express application, which utilizes the following middleware:

- Body-parser - Errorhandler

Task

- Create a new express application that exposes a / POST endpoint receiving a JSON object. - Add the body-parser json middleware to the application. - Return the received JSON object in the response. - Test using a POST request to / with the following data:

Header: Content-Type: application/json Body: {"foo":{"bar":{"baz":"true"}}, "parsed":true}

- Tested the ErrorHandler middleware using a GET request to /error which results in an error. Use the following code in your method body to create your error: a=b+c; // No previous variable declaration

- Add the ErrorHandler middleware to the application - Test the ErrorHandler middleware using a GETrequest to /error which results in an error. Use the

following code in your method body to create your error: a=b+c; // No previous variable declaration


of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Practice 17: Modifying and Deploying a Web Server

Overview In this practice, you modify and deploy a web server for node deployment.

Task/Point Values

• Using a web server from any of the previous practice add the following to deploy it to the cloud: o Add the PORT environment variable configuration. o Add an application manifest.json file with the details on how to run the application. o Pack the application with the manifest and npm dependencies in a zip file.

Test the project locally, run it using node and open a web browser with: http://localhost:8080/ To test it in the cloud, deploy it to the Oracle Application Container Cloud and access it using the URL provided in the service home.


of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Practice 18: Using the DOM in an HTML Page

Overview

In this practice, you create a web page to keep track of which books you have read or which books you want to read. The purpose of this assignment is to check your understanding of the materials covered in the lesson 18 (The DOM). It is also an opportunity for you to gain additional practice in using the node properties and methods to manipulate the HTML elements with Javascript.

Tasks

1. Create an html named Books. 2. Add an HTML form that contains the fields: Title and Author and a button to add the new book to the

list. Hint: Add the id attribute to both fields to identify them.

3. Show the list of books in a table and add a column that contains a button to remove a book to the list.

Hint: Add the id attribute to the table, this will be useful to create new elements when you add a new book.

4. Create a script to add and remove books to the list.

Hint: Use this keyword to know which Remove button was clicked, and base on this you know which row you need to delete. For example:

5. Keep the numeration continuity every time you add or remove a book.

For example, when you remove Hamlet book which has the number 1, Wuthering Heights is reassigned the number 1.


of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Practice 19: Using CSS to Format an HTML Page

Overview

The purpose of this assignment is to check your understanding of the materials covered in the lesson 19 (CSS Fundamentals). It is also an opportunity for you to gain additional practice in using styles and create the different kind of selectors.

Tasks

1. Create a css file named book_theme.css. 2. Include in the Books.html file the link reference to the book_theme.css file. 3. Create an element selector base on the h2 element to show the titles New Book and Book List in

blue. 4. Create a class selector named center to center the text in the cell and apply it to the columns # and

Remove. 5. Create an ID selector based on the id of the books table. Set the width of the table to 65%. 6. Apply the zebra-striped style to the Books table. Create a selector to add the background color

(#E0E0E0) to all even rows and remove the border.

7. Create an element selector base on the th element to set the background color to #3366ff and the

color of the text white.

8. Create a selector to change the style of the Add button when you move the mouse over it. Change the

background color to #000066; and the color’s font to white.


of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Practice 20: Adding Event Listeners to an HTML Page

Overview

The purpose of this assignment is to check your understanding of the materials covered in lesson 20 (Events). It is also an opportunity for you to gain additional practice in adding and removing listener events using Javascript.

Tasks

For this practice, you will use the Event.html file.

1. Create an event to show the message: Welcome to my website! When the Event.html page is loaded. Hint: Use the alert() method to display the message.

2. Add an event listener to the link JQuery Event Methods to show the message: Under construction when you click.

3. Add an event listener to highlight all the paragraphs when the mouse is over them. 4. Add an event listener to remove the highlight when you click on the paragraph. 5. Remove the event listeners from the subtitles (Introduction and Events).


of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Practice 21: Debugging and Console There is no practice for this lesson.


of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Practice 22: Creating a REST API Client

Overview

In this practice, you create a client for the REST service (Movies and Actors) created in lesson 15.

Tasks

• Start the REST server you created in lesson 15 practice 2. • Create an html file named movies_and_actors. • Add an HTML form to insert a new movie. • Define a Javascript function to add a new movie that consumes the method POST from the

endpoint /movies. • Define a Javascript function to get all the movies that consumes the method GET from the endpoint

/movies. • Display the movies list in a table and refresh it every time you add a new movie.

Hint: Create an empty table set the attribute id and use the innerHTML property to rewrite the table.

• Add an HTML form to insert a new actor. • Define a Javascript function to add a new actor that consumes the method POST from the endpoint

/actors. • Define a Javascript function to get all the movies that consumes the method GET from the endpoint

/actors. • Display the actor list in a table and refresh it every time you add a new actor.

Bonus: Improve the appearance of your page by adding some CSS styles.


of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Practice 23: Adding Callbacks and Promise Objects to the Client

Overview

In this practice, you will add callbacks and promise objects to your movies and actors client.

Tasks

To complete this practice you should modify the client for Movies and Actors (movies_and_actors.html). You still need the Node REST server running from the previous exercise.

• Create a promise object to get all the movies and show the previous movies records the first time the page is loaded.

• Create a promise object to get all the actors and show the previous actors records the first time the page is loaded.

• Create two timer functions to refresh both tables (Movies and Actors) every 10 seconds. Hint: To test this task open two clients, add a new movie or actor in one page and you should see the new record in the other page after a few seconds.


of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Practice 24: Writing a JQuery Selection

Overview

In this practice, you will select with jQuery by writing the appropriate jQuery selection for the specified elements.

Tasks

To complete this practice, you should modify the file jquery-practice-01.html.

• Download the latest version of the JQuery library. • Include the script in the jquery-practice-01.html file. • Display the Welcome to my page message after the HTML is completely loaded.

Hint: Use an alert message. • Find all li elements and change the text to Testing.. • Use a Class Selector to change the A’s to A+. • Use an ID Selector to hide myForm. • Find all h1 elements that are children of a div element and change the text to Text – In. • Change the background color of the p elements that don’t have a class of super.

Hint: Use the method .css(“background", "#0686c9”); to change the background. • Change background color of the second '.nice' class

.


of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Practice 25: Replacing the DOM with Pure jQuery

Overview

In this practice, you will replace the DOM with pure jQuery.

Tasks


• Include the JQuery script in the jquery-practice-02.html file. • Modify the script included in the jquery-practice-02.html file to use JQuery instead of pure DOM.

Hint: Use the method val() to get the value of the input text.


of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Practice 26: Adding User Controls and Event Listening

Overview

In this practice, you will be building a basic tabbed user interface, utilizing event listeners to support interaction.

Tasks


• Add an event listener to the Search button to show the employeesList div when you click it. • Add an event listener to the Add new employee button to show the newEmployeeForm when

you click it. • Add an event listener to the body tag to hide the newEmployeeForm div and the

newEmployeeForm when you double click it. • Add an event listener to the employeesListTable to highlight the row on mouse over. Make sure

the header remains intact. Hint: Add two anonymous functions at the same time to the event one to change the background to gray (or the color you want to) and other to remove the color of the background when the mouse is over other row.

• Add an event listener to the Detail links to show the message: Under construction when you click on them.


of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Practice 27: Extending JQuery by Adding Effects

Overview

In this practice, you will use jQuery to perform a series of animations on given selections.

Tasks

To complete this practice, you should modify the file jquery-practice-03.html. • Animate the divs with the class .div1 to slide up and down. Use the btnUp and btnDown buttons. • Hide and show the paragraph myParagraph using the btnHideShow button. • Animate all .hidden class elements to show slowly. Use the btnShowHiddens button to create a click

event to execute the animation. • Animate the divGray element, by changing its height and width. Use the btnDivSize button to create a

click event to execute the animation. • Create other animation to reset the height and width to the original value. Use the btnReset button.


of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Practice 28: Using JQuery to Load Data into a Table

Overview

In this practice, you will use jQuery to load data from an API and represent it in the page using a table.

Tasks

To complete this practice, you should modify the client for the service Movies and Actors (movies_and_actors.html). • Include the JQuery script in the movies_and_actors.html file. • Modify the script created in the practice for the lesson 22 and 23. This time use JQuery and Ajax instead of

plain Javascript. o Get the values of the inputs text using JQuery. o Modify the functions to add and get actors and movies using Ajax and JQuery. o Modify the promises using Ajax and JQuery to get the actors and movies the first time the page is

loaded. o Draw the tables with the list of actors and movies using functions of JQuery.


of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Practice 29: Mocking RESTful Services

Overview

In this practice, you will use Sinon's fakeServer implementation to define an imaginary Books API that we'll be making requests to.

Tasks


• Create a promise using AJAX and JQuery to get all employees from the endpoint /employees (Method GET).

• Download the latest version of the sinon.js library and include the script into the jquery-

practice-03.html file. • Create a Fake Server using sinon.js that responds to the GET method /employees and returns

a list of employees. • Remove the content of the employeesListTable table and write a Javascript function using

JQuery to insert the records returned by the endpoint /employees.


of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Practice 30: Using JavaScript and Test-Driven Development to Create Objects

Overview In this practice, you create objects using JavaScript and Test Driven Development.

Tasks

• Open the homework.js file provided for this lesson. • Create a Collection and Item object that:

o Collection object Internal data should only be manipulated through methods. It should have an add method, which accepts an Item instance. It should have a remove method, which removes the provided Item. It should have a size method, which returns the size of internal data. It should have a contains method, which returns a Boolean indicating whether the Item

exists in internal data. o Item object

Internal data should only be manipulated through methods. It should have a get method that accepts a property name. It should have a set method that accepts a property name and value.

o General requirements We should be able to create multiple instances of Item and store them in one or more

instances of Collection. Every instance should be distinct and independent from other instances of the same

type. • Uncomment the bonus A tests and create a property on Item called "stores", that is an instance of

Collection. When an Item is added to or removed from a Collection, it will update this property with the Collection instance.

• Uncomment the bonus B tests and make all data accessible only through exposed methods. • Uncomment the bonus C tests and abstract any common logic to a parent object, and inherit from it.


of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Practice 31: Modules There is no practice for this lesson.


of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Practice 32: Creating Functions to Work with JavaScript Objects

Overview In this practice, you practice creating functions to work with JavaScript Objects.

Tasks

• Open the practice JavaScript file, it contains two objects: Person and Student o Student inherits from Person o They have a name property and some methods.

• Additionally, the file contains two functions you must implement along with tests that you must pass in order to complete the practice.

• Create a function that will clone an object passed to it. The clone must have all the same properties defined in the original object, and all properties must have the exact same descriptor. Demonstrate that the clone is identical to the original.

• Create a function that will "secure" an object, rendering it completely immutable. Ensure that all properties are non-configurable, non-writable. If a property's value is an object, that object should be secured as well. Demonstrate that the resulting object is completely secured from tampering.

Reference

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-

Oriented_JavaScript#Inheritance • https://en.wikipedia.org/wiki/Object-

oriented_programming#Composition.2C_inheritance.2C_and_delegation


of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Practice 33: Using Arrays to Create Matrices

Overview In this practice, you will use arrays to create 3x3 matrices.

Tasks

• Open the homework.js file. It contains array declarations, function stubs and tests. You have to implement the three functions in the file.

• Create a function that return a count for the number of times a given element exists in an array, e.g. count([1,1,2,3,5], 1); // 2 You should use the Array.prototype.indexOf method.

• Create a function that, when given two 3x3 matrices, returns a new matrix where each value is the product of the given matrices var matrix1 = [[2,2,2], [2,2,2], [2,2,2]]; var matrix2 = [[4,4,4], [4,4,4], [4,4,4]]; multiplyMatrices(matrix1, matrix2); // [[8,8,8], [8,8,8], [8,8,8]]

• Create a function that, given an array of two or more elements, reverses the elements in the array in-place * The array should be returned as a copy of the original.

• All created functions should detect if their given arguments are arrays, and throw an error if not. *Arrays have a method reverse, which changes the array by inverting the order in which its elements appear in-place, that is it modifies the array it is called on and does not create or use an intermediary array. You are not allowed to use the existing reverse method, instead swap the first and last elements, then the second and second-to-last, and so on. You can do this by looping over half the length of the array (use Math.floor to round down—you don’t need to touch the middle element in an array with an odd length) and swapping the element at position i with the one at position array.length - 1 - i. You can use a local variable to briefly hold on to one of the elements, overwrite that one with its mirror image, and then put the value from the local variable in the place where the mirror image used to be.


of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Practice 34: Functional Programming with Arrays

Overview In this practice, you work with arrays using functional JavaScript programming.

Tasks

• Open the homework.js file for this lesson, complete the functions defined to make the tests pass. • Implement the flattenArray function: use the Array.protoype.reduce method in combination

with the Array.protoype.concat method to flatten an array of arrays into a single array that has all the elements of the input arrays. E.g. [[1, 2, 3], [4, 5], [6]] becomes [1, 2, 3, 4, 5, 6]

• Implement the computeAverageDifferenceMotherChildren function: Using the people array: compute the average age difference between mothers and children (the age of the mother when the child is born)

• Implement the computeAverageAgePerCentury function: Compute and output the average age of the people in the ancestry data set per century. A person is assigned to a century by taking their year of death, dividing it by 100, and rounding it up, as in (Math.ceil(person.died / 100) * 100) === century

Reference Mother-child age difference • Note that not all the mothers mentioned in the data are themselves present in the array. • Create a function byName, which makes it easy to find a person’s object from their name function byName(people, name) { return people.filter(function(person) { return person.name === name; }).reduce(function(prev, curr) { return curr; }, null); } Because not all elements in the ancestry array produce useful data (you can’t compute the age difference unless you know the birth date of the mother), you have to apply filter in some manner before calling average. You could do it as a first pass, by defining a hasKnownMother function and filtering on that first. Alternatively, you could start by calling map and in your mapping function return either the age difference or null if no mother is known. Then, you can call filter to remove the null elements before passing the array to average.


of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Historical life expectancy • The essence of this example lies in grouping the elements of a collection by some aspect of theirs—

splitting the array of ancestors into smaller arrays with the ancestors for each century. During the grouping process, keep an object that associates century names (numbers) with arrays of either person objects or ages. Because we do not know in advance what categories we will find, we will have to create them without disturbing normal operations. For each person, after computing their century, we test whether that century was already known. If not, add an array for it. Then add the person (or age) to the array for the proper century.

• Finally, a for/in loop can be used to print the average ages for the individual centuries. • For bonus points, write a function groupBy that abstracts the grouping operation. It should accept as

arguments an array and a function that computes the group for an element in the array and returns an object that maps group names to arrays of group members.

References http://eloquentjavascript.net/05_higher_order.html#h_TcUD2vzyMe https://jsfiddle.net/jmcneese/ztexLey7/

of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Practice 35: Utility Libraries

Overview In this practice, you work with arrays using the lodash JavaScript utility library.

Tasks • Open the homework.js file for this lesson and using the data from the people array and using only

lodash functions: o Compute the average age difference between mothers and children (the age of the mother

when the child is born) o Compute and output the average age of the people in the ancestry data set per century, Store

the data in an object where the key is the century with an _, and the values is the average age. o Create a genealogical tree, composed of person objects. Each object must have a children

property, which is an array of references to that person's children objects. Children are defined by who the mother is. Top most person objects (Those without a mother) must be contained in an array. To prevent a circular reference (due to same names) compare the birthdates, a mother cannot have been born after her children. Each person object must appear only once in the tree!

Reference Mother-child age difference functions that may be helpful: _.keyBy, _.filter, _.sum, _.size Historical life expectancy functions that may be helpful: _.groupBy, _.sum, _.size Genealogical tree functions that may be helpful: _.defaults, _.keyBy, _.pickBy


of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Practice 36: Using JavaScript to Create an MVC Application

Overview In this practice, you create an MVC application with JavaScript

Task/Point Values

Using the code samples and reference from the lesson create a simple TO-DO application that can manage more than one item.

• Each item should be a distinct model instance. • New items should be able to be added. • Existing items should be able to be deleted.

Reference

While it can be done with a single controller, a more modular approach would be to have a full MVC structure for a TodoItem, and another full MVC structure for a TodoList, which manages TodoItems. If you feel ambitious, feel free to implement the application in this way. Either way you choose, try to determine if there is anything missing from this structure that might make things easier.

TodoItem – This is the implementation created during the lesson.

TodoList – This higher-level implementation is a collection of TodoItem instances, with its own view: a UL tag to hold the TodoItems, and a button to add new items, and its own events to handle the add button click. The application is built, either as a monolithic controller or nested, additional events will need to be triggered on models, such as an 'created' event fired when a new TODO item model is constructed, an 'added' event triggered when it is added to the collection, a 'deleted' event triggered when it is removed from a collection, and so on.

anything missing – What is missing is the concept of a collection of models. You can make a barebones collection with a simple array and using lodash collection methods, if you feel particularly confident implement a ModelCollection object, that handles these methods.


of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Practice 37: Adding Handlebars to the View Layer of an Application

Overview In this practice, you add Handlebars to the View layer of an application.

Task/Point Values

Using what you learned in the lesson, integrate Handlebars templating into the MVC TODO application from the previous lesson.

• Convert all Views to use Handlebars templates, leveraging built-in helpers

Reference

Where applicable, use partials to reuse as much of our templates as possible Consider creating custom helpers to build commonly used components, such as checkboxes or list elements Compare the size and speed of our application before converting to Handlebars, and after conversion. Precompile your templates and use the Handlebars runtime, and compare again. Which method uses the least bandwidth? Which method executes the fastest? http://handlebarsjs.com/


of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Practice 38: Creating an Application by Using Backbone and REST Connections

Overview In this practice, you create an application using Backbone and REST connections.

Task/Point Values

The application is provided with an existing Node REST server that will provide you with all the necessary data. The endpoints of the REST service are detailed in the reference section of this document.

• Create the necessary backbone models and collections necessary to represent the data in the REST API.

• Enable synchronization between your models and collections and the server. • To show and manipulate the data use the browser console. Provide methods to modify the model and

test the application. For example: o test.list() - Get the list of posts in the database. o test.get(ID) - Get the data from a post identified by ID. o test.add() - Add a sample post to the database.


of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Reference

To run the server, open a terminal in the server folder and run: npm install node server.js

The server path is: http://localhost:3000 the service represents a blog with posts, comments and users.

Endpoint Description Details

GET /posts Returns an array of posts objects

Response: [{id:#, title:String, body:String, userId:#}, {…}, {…}]

POST /posts Creates a new post on the server

Send the post on the request body: {title:String, body:String, userId:#}

PUT /posts/ID Modify a post with the given ID


DELETE /posts/ID Delete the post with the given ID

GET /posts/ID/comments

Returns an array of comments for a given post ID

Response: [{id:#, body:String, postId:#, userId:#}, {…}, {…}]

POST /comments Adds a comment Send the comment in the request body: {body:String, postId:# userId:#}

PUT /comments/ID Modify a comment with the given ID

Send the comment in the request body: {body:String, postId:# userId:#}

DELETE /comments/ID

Delete the comment with the given ID

GET /users/ID Return the user details Response: {id:#, name:String, email:String}

GET /users/ID/posts Gets the posts by the user Response: [{id:#, title:String, body:String, userId:#}, {…}, {…}]

POST /users Creates a new User Send the user in the request body: {name:String, email:String}

PUT /users/ID Update a user with the given ID

Send the user in the request body: {name:String, email:String}

DELETE /users/ID Delete a user with the given ID


of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Practice 39: Adding a View to an Application by Using Backbone View

Overview In this practice, you add a view to the application you created in the previous practice using Backbone.View.

Task/Point Values

While a single view could be created to represent a collection of posts, it would be best to break your application into several disparate views to represent concepts that are re-usable. For example: a PostsView that is aware of a PostsCollection, using a PostView that is aware of a PostModel and an AuthorModel

• Create a view that, when initialized, will render a listing of post records. The listing should look like a regular blog.

• Enhance your application to implement adding new posts and deleting existing posts, ensuring that the UI reflects any changes to the data. For example: Add a button that, when clicked reveals a form with a title, body and author field. The form, when submitted, creates a new record on the PostsCollection (which is then persisted to the REST API automatically). If events have been added to handle the 'update' event on the collection, to re-render the PostsView, any new record should automatically show up in the HTML. Also, each PostView can be modified to have a delete link/button that, when clicked, destroys the model associated with the view. This also triggers the 'update' event on the collection, which should re-render the view to remove the destroyed model's associated PostView.


of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Reference

















DELETE /comments/ID









of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Practice 40: Managing the Routes and History of an Application

Overview In this practice, you modify the application from the previous practice to use Backbone.Router to manage the routes and history of your application.

Task/Point Values

• Modify the application to have a “single-page application” that defaults to showing a list of posts, which

has a route for viewing a single post and its comments, and allows the user to navigate forward and backwards in history.

• All the operations must be done without reloading the page. You have to create a single-page application, meaning that once the initial page is loaded from the server, no subsequent page loads happen in the browser. All clicks on links within your application are handled by your application's router, as are any back/forward navigation actions.

• Enhance your application to implement additional routes, such as adding a new post, editing an existing post, viewing a user's profile, and so on. For example: If your application has a PostFormView, it can be used for both adding new posts and editing existing posts. Your application can respond to the route /posts/add, which causes the PostFormView to be rendered into the main content area of your app. Likewise, your application can also respond to the route /posts/:id/edit, which locates the matching model for the given :id parameter, and passes that model instance to PostFormView, to pre-fill its fields with the model's data. The same pattern can be used to handle routes such as /users/:id, or /posts/:id:/comments, and so on.

Reference http://jsfiddle.net/jmcneese/9fv9esjh/


of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y


Reference

















DELETE /comments/ID









of 58

Ora

cle

Uni

vers

ity S

tude

nt L

earn

ing

Sub

scrip

tion

Use

Onl

y

only use subscription learning - oracleoukc.oracle.com/static14/opn/wdp5/x95177gc10_ag.pdf · learn...

Documents