Test 1

TU_Wien-Web_Engineering_VU_(Cito)_-_A1-Online-Test-Questions_2020-03-30.pdf

You send an HTTP POST request with a JSON payload to a web server and receive a response. What can you tell from the headers of the response, which are given below?
```
HTTP/1.1 200 OK
Date: Mon, 30 Mar 2020 13:00:42 GMT
Server: nginx
Set-Cookie: sessionId=e8bb43229de9
Content-Type: application/json;
Content-Length: 232 
```
Protocol Version: HTTP 1.1
Status Code: Success, OK
Date: Mon, 30 Mar 2020 13:00:42 GMT
Server: nginx
Server Sets cookie: with a specific ID that we will attach to each request from now on
Content-Type: Body contains data in JavaScript Object Notation JSON
Content-Length: The length in decimal number of octets / bytes.

You are given the vague description to design a URL for a secure HTTP resource available on port 5000: it should serve a path to users, query a username, and target the profile fragment within the resource. Which of the following URLs is the most compatible with this description?
Probably something like:
<scheme>://[<user>[:<password>]@]<server>[:<port>]/[<path>][?<query>][#<fragment>]
https://coolSite.com:5000/userPath?username=coolName#profile

You want to send an idempotent HTTP request with a message body. Which method can you use?
Same effect even with multiple executions (idempoptent): PUT, DELETE
But DELETE does not have a message body.

You are navigating to a large HTML document which includes three CSS files and ten images. How does your browser react?
The browser fetches the content on the website through HTTP requests to the servers that the resource URLs lead to.
One process will not wait for the previous one to finish completely - will try to display contents as soon as possible.
Continuous Resource Fetching.
Process
1. Construct Document Object Model (DOM) from parsing the HTML document
1. Construct Render Tree from CSS and HTML
1. Layout process (recursive): attaches coordinates to each node
1. Painting each node from the render tree using the UI backend

What is wrong with the following HTML structure?

<section class="important label">
<strong style="border-bottom: 1px solid black;">
<h2>Important Announcement</h2>
</strong>
<section>
<em>Beware:</em> of all the wrong things in this HTML.
</section>
</section>

</section> tags are nested

h2 can not get <strong> this way

You want to display an image on your website. The image on your server has a resolution of a 12000x12000 pixels, but you only need 200x200 pixels. Initially, you write the following code
```
<img src="img_12000_12000.jpg width="200">.
```
Which of the following statements best describes what the browser is doing?
Causing a syntax error because the source is defined as: src="img_12000_12000.jpg width="
To scale an image one needs css or js:
```
<img src="img_12000_12000.jpg" width="200" alt="Description">
<img src="img_12000_12000.jpg" style="width: 200px;" alt="Description">
```
Alternatively we could fetch the enitre picture and scale it in the frontend with:
Responsive and adaptive images
Fetch respective image, size or version (additional download!)
Use JavaScript, CSS media queries, and/or HTML5 markup
```
<picture>
<source	src="pic-mobile.jpg"	media="(max-width: 200px)"	/>
<source	src="pic-desktop.jpg"	/>
<img src="default.png"	/>	
</picture>
```
```
<img src="img_12000_12000.jpg" style="
@media	(max-width:	200px) { width: 200px; }
">
```
```
<img srcset="img-200w.jpg 200w,
img-12000w.jpg 12000w"
sizes="(max-width: 200px) 200x, 12000px"
src="img-12000w.jpg"
alt="Description">
```

You are reviewing code for an HTML form. While the markup looks the way it should in the browser, you can see how it could create accessibility issues. Which of the following changes are best suited to improve accessibility?

<form action="/login">
<b>Login</b>
<br><table>
<tr>
<td>
Username<br>
Password
</td>
<td>
<input name="field_1"><br>
<input name="field_2"><br>
<input type="submit" value="Login">
</td>
</tr>
</table></form>

No semantics of "Login" → Only increased size

Screen Reader Linearization → (no logical) binding of label and field - Where do I fill in what?

<head>
<h1>Login</h1>
</head>
<body>
<form action="/login">
<p>
<label for="userName">Username:</label>
<input type="text" id="userName" name="userName"/>
</p><p>
<label for="password">Password</label>
<input type="text" id="password" name="password"/>
</p><p>
<input type="submit" value="Submit the form" name="action"/>
</p>
</form>
</body>

Which of the following selectors would you use to target the HTML element (and only that element) highlighted in bold below?

<section id="siblingSec" class="sibling">
<h2>Style my sibling</h2><p class="sibling">
<div class="listContainer" id="firstContainer">
<ul class="bigList">
<li>First</li>
<li>Second</li>
</ul>
<div>
<ul class="bigList">
<li>Third</li>
<li>Forth</li>
</ul>
</div>
</div>
</p><div>
<p class="sibling">
<ul class="bigList">
<li>First</li>
<li>Second</li>
</ul>
<div class="listContainer">
<ul class="bigList">
<li>Last</li>
<li>Actually Last</li>
</ul>
</div>
</p>
</div></section>

https://jsfiddle.net/r26y3et1/4/

The selector to choose that Item:

choose a div with id="firstContainer"

then choose the second child that is a div

and then its only child, which is a ul

div#firstContainer div ul{
...
}

Which of the following CSS declarations is most likely to result in the following rendering in the browser given this markup/style declaration:
```
<div style="border: 4px solid black;">
<div id="outer">
<span id="inner" style="font-size: 2em;">Some text</span>
</div>
</div>
```

Which one of the following HTML elements have we heard about in the lecture that is used to link to an external CSS stylesheet for integration into HTML?
Integration into HTML
External (prefered)
linking to an external CSS file in <head>
local link: <link rel="stylesheet" href="style.css">
If semantics used correctly in HTML: <link> to external website
Internal
<style> in <head>
overwrites any external CSS
Inline
In HTML elements <tagname style="property:value;">content</tagname>

Which one of the following CSS properties for the selector section#content do you think is mostlikely to have produced this output in the browser? The HTML for the relevant part of the page is given as follows:

<section id="content">
<div>Cats</div>
<div>Dogs</div>
<div>Tigers</div>
<div>Tortoises</div>
<div>Ducks</div>
<div>Pumas</div>
<div>Hyenas</div>
<div>Pigs</div>
<div>Cows</div>
<div>Foxes</div>
<div>Wolfs</div>
<div>Bison</div>
</section>

section#content div {
padding: 10px;
margin: 4px;
border: 1px solid black;
width: 100px;
height: 40px;
}

https://jsfiddle.net/ertk8L0y/1/

chooses section with id = "content" and div as is child

therefore all children of this section

You are given this CSS code and have to figure out which of the following resulting CSS rules are true for the element <h1 class="alarm">...</h1> on a device with 300px width.
```
h1 {
--alarm-color: darkred;
}h1.alarm {
font-size: 2em;
color: var(--alarm-color, red);
}@media only screen and (max-width: 400px) {
h1.alarm {
font-size: 1em;
}
}
```
because the screen has < 400 pixel h1 and h1.alarm apply.

You are given the following HTML and JavaScript code. What is the browser output if you enter 100 into the input?

<label for="speed">Speed (km/h)</label>
<input type="text" id="speed">
<div>
Speed <span id="output"></span>
</div>

var el = document.getElementById('speed')// Beware that event.toElement.value returns a string
el.addEventListener('change', event =>
addSpeedClassification(document.getElementById('speed').value)); <-- only 1 argumentfunction addSpeedClassification(speed, classification) { <-- classification = undefined
const output = document.getElementById('output');
// reset markup
output.innerHTML = '';
output.border = 'none';
if(isSpeedLimit(speed, [30, 50, 100, 130])) { //if speed == one of limits
output.style.border = '4px dashed red';
}
if(!classification) { //!undefined is equal to true (implicit type conversion)
classification = {
text: {'slow' : 50, 'normal' : 90, 'fast' : 130},
overText: 'too fast'
}
}
let classificationOutputText; //determines in which range speed is
for(let key in classification.text) {
if(speed <= classification.text[key]) {
classificationOutputText = key;
}
}
if(!classificationOutputText) { //if speed > 130
classificationOutputText = classification.overText;
}
const strongText = document.createElement('strong');
strongText.innerText = `${speed} (${classificationOutputText})`;
output.appendChild(strongText);
}function isSpeedLimit(speed, limits=[15, 40, 90]) {
for(let limit of limits) {
if(speed == limit) {
return true;
}
}
return false;
}

https://jsfiddle.net/q5y60knb/1/

What are promises in JavaScript?
Analogy:
Fans have subscribed the mailing subscription list of a singer so that they get instantly notified once the next album becomes becomes available or if something goes wrong.
Components:
1. A “producing code” that does something and takes time. For instance, some code that loads the data over a network. That’s a “singer”.
1. A “consuming code” that wants the result of the “producing code” once it’s ready. Many functions may need that result. These are the “fans”.
1. A promise is a special JavaScript object that links the “producing code” and the “consuming code” together. The “producing code” takes whatever time it needs to produce the promised result, and the “promise” makes that result available to all of the subscribed code when it’s ready. This is the “subscription list”.
The constructor syntax for a promise object is:
```
let promise = new Promise(/*executor(resolve, reject)*/); 
```
```
let promise = new Promise(function(resolve, reject) {
// executor (the producing code)
}); 
```
The executor runs automatically and attempts to perform a job. When it is finished with the attempt it calls
resolve if it was successful
reject if there was an error.
The promise object returned by the new Promise has 2 internal properties:
1. state
  - initially "pending"
  - "fulfilled" when resolve is called by the executor
  - "rejected" when reject is called by the executor
1. result
  - initially undefined
  - value when resolve(value) is called by the executor
  - error when reject(error) is called by the executor
Example: Successful
```
let promise = new Promise(function(resolve, reject) {
setTimeout(() => resolve("done"), 1000); //"done" is the result
}); 
```
After one second of “processing” the executor calls resolve("done") to produce the result. This changes the state of the promise object:
Example: Unsuccessful
```
let promise = new Promise(function(resolve, reject) {
setTimeout(() => reject(new Error("Whoops!")), 1000); //"whoops" is the error statement
}); 
```
But it is recommended to use Error objects (or objects that inherit from Error).
The call to reject(...) moves the promise object to "rejected" state:

Why are promises a solution to "callback hell" in JavaScript?
In a “callback-based” style of asynchronous programming. A function that does something asynchronously (at a later point in time) should provide a callback argument (usually an anonymous function) where we put the function to run after it’s complete.
As calls become more nested, the code becomes deeper and increasingly more difficult to manage. That’s sometimes called “callback hell” or “pyramid of doom”:
(Here the loadScript function executes the anonymous function that is its second parameter if script was loaded successfully → the goal is to load a series of scripts sequentially)
With promises one can use Consumers: then, catch, finally