OSU CS 290 - WebDev
Consider the following directory structures: The directory public contains a directory db and 2 files index.html and details.html The directory db contains a directory movies and a file topten.html The directory movies contains 2 files actors.html and directors.html Which of the following URLs in the file directors.html links to the file topten.html?
../topten.html
Consider an Express server is running the following code: 'use strict'; const express = require('express'); const app = express(); const PORT = 3000; app.use(express.static('public')); app.listen(PORT, () => { console.log(`Server listening on port ${PORT}...`); }); There is a public directory at the root level and it includes one file named index. The server receives a GET request for the resource / What will the server return as the response?
404 status code, i.e., resource not found By default, the file for the homepage must be named index.html, and not just index, for Express static to recognize it as the homepage and return it when processing a request for the homepage. Note that it is possible to override this default by passing in some additional optionsLinks to an external site. in the call to express.static(). But typically that's not done, and it certainly hasn't been done in the example code we show above.
Match the HTML code to the type of list that the HTML code will create. Options: definition, ordered, & unordered lists <ul> <li>first item</li> <li>second item</li> <li>third item</li> </ul> <ol> <li>first item</li> <li>second item</li> <li>third item</li> </ol> <dl> <dt>first</dt> <dd>item</dd> <dt>second</dt> <dd>item</dd> <dt>third</dt> <dd>item</dd> </dl>
<ul> unordered list <ol> ordered list <dl> definition list
The Accept header is used in HTTP responses to specify the MIME type of the response body.
False
Which of the following are examples of a breach of confidentiality? A user is able to delete a file they are not authorized to delete A user is able to view a file they are not authorized to view A user is unable to log into a website because of a denial of service attack
A user is able to view a file they are not authorized to view
Which of the following are examples of scaling-up the infrastructure of a web app (select one or more) 1. Adding more servers of the same size 2. Reducing the size of messages sent by the web app 3. Adding more memory to a server 4. Adding more CPUs to a server
Adding more memory to a server Adding more CPUs to a server
What elements are matched by the following selector: tr th
All <th> elements that are descendants of a <tr> element
Can an HTTP response and an HTTP request have headers as a part?
Both HTTP response and HTTP request can have headers as a part
In Mongoose, a schema is the JavaScript class that models the documents in a collection.
False A schema represents the properties of a collection in MongoDB, whereas a model is a JavaScript class which represents documents of a particular collection.
A node in a tree can have more than one parents
False Each node in a tree has exactly one parent, except the root node which doesn't have a parent.
Which of the following statements about HTTP cookies are correct?
Cookies are stored in the browser A user can temper with the value of a cookie and signed cookies are a way to prevent this from happening.
An HTTP request with the method GET typically has a non-empty body. (True / False)
False
Because HTTP is stateless, there is no way for a web server to link multiple requests from the same user.
False
Consider a particular operation on a web app has a response time of less than 0.1 second. Should the web app provide information to the user about this delay?
False
What is a common technique to share state between different components that are not in an ancestor-descendant relationship?
Define the state to be shared in a common ancestor of the components and pass it down to the components that need to share it.
Consider the following function function getData(url) { return fetch(url) // line 1 .then(response => response.text()) // line 2 .then(data => addData(data)) // line 3 .catch(error => console.error(error)); // line 4 } If an exception occurs at line 3, it will be caught at line 4. However, an exception that occurs at line 2 will not be caught by line 4.
False
Mongoose provides us the ability to query MongoDB using SQL.
False Mongoose is an Object-Data Mapper. It maps from JavaScript objects to MongoDB documents, and from MongoDB documents to JavaScript objects. It also provides functions to perform various CRUD operations. However, it does not provide querying using SQL.
We can run multiple Express servers, e.g., the one hosting a REST API and another hosting a development React app, on the same port on the same machine.
False No, we can't do that because only one Express server can listen on a particular port. This is why in our examples we specify port 3000 for the Express server hosting the REST API, and port 8000 for the Express server hosting the React app.
When implementing a REST API for a collection of books, is the endpoint POST /books/create for creating a new book a good example of following the guidelines for RESTful services?
False REST APIs convey the operation type via the HTTP method. For creating a resource the method should be POST, which is being used in the example, so that part of the endpoint is fine. However, the information that this endpoint is for creating a resource is already conveyed by the use of the POST method. So having create in the URL doesn't follow REST API principles. The endpoint POST /books/follows REST API principles.
Consider a React app with 2 components, App and its child component Movie. Here is the code in App that adds the element Movie: <Movie title="Sorry to Bother You" year="2018" language="English"/> Here is the definition of the component Movie: import React from 'react'; function Movie(title, year, language) { return ( <p> {title}. Released in {year}. Language {language} </p> ); } export default Movie; Assuming that the rest of the code is correct, will the component Movie be rendered correctly?
False React will call this function with one argument, an object with 3 properties title, year, language. However, the function Movie lists 3 parameters title, year, language. This will cause an error when an attempt to render the element Movie. The fix is to use a destructuring expression in the declaration of the function Movie, i.e., function Movie({title, year, language})
Consider the following code is executed: const y = (a, b) => { return a > b; }; function x(l, m, f){ return f(l, m) } let val1 = 10; let val2 = 12; let result = x(val1, val2, y); What is the value of "result"?
False the value of result is false
We can prevent the default action of an event from being executed by calling stopPropagation()
False (We use preventDefault();)
We can prevent the default action of an event from being executed by calling the method stopPropagation() on the event
False Stopping the default action of an event from being executed requires calling the method preventDefault() on the event.
Is the following code valid? const x = {name: 'Ignatius Reilly'} x = {name: 'Reilly, Ignatius'}
False. The variable x is declared using const. But in the second line of this code, we are changing the value of the variable x. That's why the code is invalid.
Match the MIME type with the type of data: HTML: JSON:
HTML: text/html JSON: application/json
Consider an Express server is running the following code: 'use strict'; const express = require('express'); const app = express(); const PORT = 3000; // Route handler app.get("/", (req, res) => { res.send("Hi from the route handler!"); }); app.use(express.static('public')); app.listen(PORT, () => { console.log(`Server listening on port ${PORT}...`); }); There is a public directory at the root level and it includes a file named index.htmlwith the content "Hi from index.html page." The server receives a GET request for the resource / What will the server return as the response?
Hi from the route handler Express goes from the top of the code towards the bottom and invokes the first "function" (whether a route handler or express.static) that matches the request. In this example, the route handler appears before the call to use express.static. Therefore, the response is sent by the route handler and the static index.html is not sent as the response. We will study more details about this matching in a later module.
Consider an Express server is running the following code: 'use strict'; const express = require('express'); const app = express(); const PORT = 3000; app.use(express.static('public')); app.use(express.urlencoded({ extended: true })); app.post("/review", (req, res) => { res.send("Review from the post handler"); }); app.listen(PORT, () => { console.log(`Server listening on port ${PORT}...`); }); The server receives a POST request for the resource /review.html. What response will be sent by the server?
It will return a 404 status code, i.e., resource not found Because of the .html at the end, the requested resource /review.html doesn't match the URL /review and the app.postroute handler is not invoked.
Consider the following code. Match each loop number with what is printed by that loop (we have removed any new lines or undefined printed by the loop) const orcl = { company: 'Oracle', symbol: 'ORCL', price: 67.08 }; // Loop 1 for( const x in orcl){ console.log(x); } // Loop 2 for( const x of orcl){ console.log(x); } let keys = Object.keys(orcl); // Loop 3 for( const x in keys){ console.log(x); } // Loop 4 for( const x of keys){ console.log(x); }
Loop 1: company symbol price Loop 2: An error message Loop 3: 0 1 2 Loop 4: company symbol price
Match the MVC layer with functionality the layer is expected to provide. Options: 1. Connects the 2 other layers 2. Display the data to the user 3. Manage's the application's data Model: View: Controller:
Model: Manage's the application's data View: Display the data to the user Controller: Connects the 2 other layers
If a URL uses a default port, does the URL need to include its number in its path?
No
Consider that in an Express app the following route handler gets invoked by an HTTP request: app.get('/', async (req, res) => { try { // Note: the following line will throw an exception because the invalid value of the protocol, i.e., httpps const response = await fetch('httpps://api.github.com/users/github'); const data = await response.json(); res.send(data); } catch (error) { console.log(error.message); } }); What response will be sent to the HTTP request?
No response will be sent for this request.
Modify the following module to export the function cube function cube(x) { return x * x * x; } function square(x) { return x * x; }
One way to do this is add the export keyword before the declaration of the function cube as shown below: export function cube(x) { return x * x * x; } function square(x) { return x * x; } Another is to use the export statement as shown below: function cube(x) { return x * x * x; } function square(x) { return x * x; } export { cube };
Identify parts of the following URL http://www.js.com:5000/a/b/c.html?year=2021 Protocol: Server name: Port: Path to resource: Query parameter:
Protocol: http Server name: www.js.com Port: 5000 Path to resource: /a/b/c.html Query parameter: year=2021
Consider an Express server is running the following code: 'use strict'; const express = require('express'); const app = express(); const PORT = 3000; app.use(express.static('public')); app.use(express.urlencoded({ extended: true })); app.get("/review", (req, res) => { res.send("Review from the get handler"); }); app.post("/review", (req, res) => { res.send("Review from the post handler"); }); app.listen(PORT, () => { console.log(`Server listening on port ${PORT}...`); }); The server receives a POST request for the resource /review. What response will be sent by the server?
Review from the post handler The order of the route handler specified using app.get and app.post doesn't matter because regardless of the resource requested, a route defined using app.get will not match a POST request.
Consider the following module: export default function getStockPrice(){ return 10;} function getPrice(){ return 5; } export const PCT_FEE = 2; const COUNTRY = 'USA'; Which of the following statements are true? (choose one or more)
The function getStockPrice() is the default export from this module. (This module exports the function getStockPrice() as the default export and the variable PCT_FEE as a named export.) The variable COUNTRY is not exported from the module.
What will be the values of the variable price after running the following code? const book = {title: 'Modern JavaScript', price: 21.99} let {price} = book;
The value of price will be 21.99 (There is no requirement that we must have variables on the left-hand side for every property in the object. There is just one variable on the left-hand side, price. The name of this variable matches a property of the object on the right-hand side of the expression, so the variable price is assigned the value of book.price)
What will be the values of the variables x and title after running the following code? const book = {title: 'Modern JavaScript', price: 21.99} let {title, x} = book;
The value of title will be 'Modern JavaScript' and the value of x will be undefined
Consider the following module function createEntity(){ return 10;} export default function readEntity(){ return 5; } const STATE = 'TX'; export const COUNTRY = 'USA'; Which of the following statement are true? (choose one or more) 1. Nothing is exported from the module because a module can either have default exports or named exports, whereas this module tries to have both named and default exports. 2. The variable COUNTRY is a named export from this module. 3. The function readEntity() is the default export from this module. 4. The variable COUNTRY is not exported from the module because the module already has a default export.
The variable COUNTRY is a named export from this module. The function readEntity() is the default export from this module.
Relational database systems support querying using a language called SQL.
True
The HTTP protocol includes some methods that are not related to CRUD operations
True An example of a method that is not used for CRUD is the HEAD method.
Consider an Express server is running with the following server.mjs file const PORT = 3000; const express = require('express'); const app = express(); app.post("/hello", (req, res) => { const email = req.body.email; res.send(`Hi. Your email is ${email}`); }); app.listen(PORT, () => { console.log(`Server listening on port ${PORT}...`); }); A POST request is received by this server for the url /hello via submission of a form. The form data received in the HTTP request includes a value for email. Will the response send back the email value from the request?
True For Express to process the form data from a POST request and make it available as properties of request.body, the Express urlencoded middleware must be used. So we must add the following statement before the route handler for the POST request app.use(express.urlencoded({ extended: true }));
An HTTP request with the method POST typically has a non-empty body. (True / False)
True. A POST request sends data to the server in the request body.
Is the following code valid? const x = {name: 'Ignatius Reilly'} x.name = 'Reilly, Ignatius'
True. The variable x is declared using const. In the second line of this code, we are changing the value of the object the variable x refers to, but we are not changing the value of the variable x. That's why the code is valid.
Consider the following declaration of an object const x = {name: 'Peter Gibbons'} Which of the following conditions will evaluate to true? (one or more) x.age === undefined x.age === 'undefined' typeof(x.age) === 'undefined' typeof(x.age) === undefined
Two are correct: x.age === undefined typeof(x.age) === 'undefined' If we access a non-existent property of an object, JavaScript returns the value undefined. The typeof operator always returns a string based on the type of the value passed to it. The value undefined is not the same as the string 'undefined'
Consider the following statements: const vals = [87, 42, 53]; vals.map((v, i) => `${i} ${v}`);); What does vals.map return when these statements are executed?
[ '0 87', '1 42', '2 53' ] The function array.map returns a new array with the same number of elements as the array on which it is called. The function supplied to map is executed for each element in the array on which the function is called and the return value of the function is added to the new array. So in this example, the new array will contain 3 elements. The value of i in (v, i)corresponds to the index of the current element passed to the function. Thus, the value of i will be 0 when v is 87, 1 when v is 42 and 2 when v is 53.
What does the following code return? [1, 2, 3, 4].map(x => x*x)
[1, 4, 9, 16]
What is the value of arr2 after running the following code? let arr1 = [12, 8, 4, 24, 50]; let arr2 = arr1.filter( x => x % 4 !== 0);
[50]
When data is sent by a form using a POST request, which of the following MIME types is used in the Content-type header?
application/x-www-form-urlencoded
Rewrite the following function as an arrow function: function toggledBookmark(){ console.log('the bookmark's toggled value is being returned'); return !isBookmarked; }
const toggleBookmark = () => { console.log('the bookmark's toggled value is being returned'); return !isBookmarked; }; // Note that an arrow function with multiple statements requires enclosing those statements inside curly braces, and must use return statement to return a value
Rewrite the following function as an arrow function: function toggledBookmark(){ return !isBookmarked; }
const toggledBookmark = () => !isBookmarked; // Note that an arrow function with a single expression doesn't require curly braces doesn't need to use the return keyword to return the value of that expression
Consider we declare p1, p2 and p3 as follows: const p1 = { name: 'Ron Burgundy'}; let p2 = { name: 'Ron Burgundy'}; const p3 = p2; What will be printed by the following three console.log statements (we have omitted the newlines in the answer choices) console.log(p1 === p2); console.log(p2 === p3); console.log(p1 === p3);
false true false
Modify the factorial(n) function you wrote in the previous question so that if its argument is less than 0, then the function throws a RangeError. Otherwise, it returns the factorial as before. For a discussion of RangeError see the MDN page.
function factorial(n){ if(n < 0) { throw new RangeError("The argument must be greater than or equal to 0") } else if(n === 0 || n === 1){ return 1; } else{ return n * factorial(n-1); } }
Write a function factorial(n) that uses recursion to compute the factorial Links to an external site.of its argument. You can assume that the value of n is non-negative. Note: If you are familiar with Python, you can see a recursive implementation of this function in Python here Links to an external site.. Compare your implementation with this one to get a better understanding of some of the differences in syntax between JavaScript and Python.
function factorial(n){ if(n === 0 || n === 1){ return 1; } else{ return n * factorial(n-1); } }
Match the CSS rule with the type of selector: Options: Class, ID, & Type selector h1 {color: red} .container {color: red} #container {color: red}
h1 {color: red} Type selector .container {color: red} Class selector #container {color: red} ID selector
Suppose we download an HTML page from the URL: https://oregonstate.edu/eecs The body element of the page is shown below: <body> <form method="POST"> <label>Name: <input type="text" name="name"> </label> <button type="submit">Submit</button> </form> </body> When a user clicks the submit button, what is the URL to which the HTTP request would be sent?
https://oregonstate.edu/eecs
Consider the following module import-test.mjs function cube(x) { return x * x * x; } export default function square(x) { return x * x; } export { cube }; We want to import the functions cube and square into another module which is in the same directory. Which of the following import statements will achieve this goal? Select one or more.
import square, { cube } from './import-test.mjs';
What will be the values of the variables price and title after running the following code? const book = {title: 'Modern JavaScript', price: 21.99} let {price, title} = book;
price will be 21.99 and title will be 'Modern JavaScript' (In object destructuring the order of variables on the left-hand side doesn't matter. The values are assigned based on matching the name of the variable with the property in the object on the right-hand side.)
An HTML document includes the following element: <p id="vip" class="vvip">This is very important!</p> The stylesheet being used for this document has only the following 2 rules: #vip { color: red } .vvip{ color: blue } What color will this paragraph be rendered with?
red Because rules associated with id override rules associated with class.
In the following URL, match the route parameter and the query parameter with the corresponding value https://myapp.appspot.com/books/123?foo=789 route parameter: query parameter:
route parameter: 123 query parameter: 789
If we want to execute some functionality when a React component is first mounted, which hook should we use?
useEffect
