辅导案例-DIT341

Written Examination
DIT341 – Web and Mobile Development
Tuesday, January 7th, 2020, 14:00 - 18:00
Examiner: Philipp Leitner
Contact Persons During Exam:
Philipp Leitner (+46 733 05 69 14)
Joel Scheuner (+46 733 42 41 26)
Allowed Aides:
None except English dictionary (non-electronic), pen/pencil, ruler, and eraser.
Results:
Exam results will be made available no later than 15 working days after the exam date
through Ladok.
Total Points: 100
Grade Limits: 0 – 49 points: U, 50 – 84 points: G, >=85 points: VG
Review:
The exam review will take place latest three weeks after the exam results have been
published in Ladok. It will be announced on Canvas at least one week in advance.
1
1 Conceptual Questions (30P)
Q1.1: Compare the three ways to declare variables in JavaScript (var, let, const). (3P)
Q1.2: Outline the structure of an HTTP request. What mandatory/optional elements
can be present in a request? (3P)
Q1.3: Contrast the usage of the

,

, and tags in HTML. (3P)
Q1.4: What elements does the following combinator in CSS match: p ~ span? (1P)
Q1.5: What is AJAX? What is the key difference between an AJAX request and other
HTTP requests? (3P)
Q1.6: Explain the HATEOAS idea of RESTful services. (2P)
Q1.7: Explain the idea of two-way data binding in Vue.js. (2P)
Q1.8: What is the difference between processes and threads (in Android)? Explain and
contrast both. (2P)
Q1.9: Explain how name resolution in DNS works. Use an example domain name.
(3P)
Q1.10: Define and explain load and stress testing for Web applications. (2P)
Q1.11: Define and explain the three cloud computing service models. Provide an
example service for each model. Hint: X-as-a-Service. (6P)
2
2 HTML, CSS, and JavaScript (8P)
Complete the HTML code snippet on the next page of the exam paper, so that a
browser will display the following view (the border is not part of the HTML document
that you need to create). Make use of the styles already defined:
Assume that the default text color of the browser is black. Further, assume that the
JavaScript function looked at shall be invoked whenever a user moves the mouse
pointer over the table. Write down the missing code on an extra paper and refer to the
lines in the template via line numbers. Available space is not necessarily indicative of
how much code is required.
3
1
2
3
4
11
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
Figure 1: Complete the Blanks (HTML / CSS / JS)
4
3 Understanding CSS Formatting (14P)
Complete the simple HTML snippet below. Fill out empty spaces so that each line is
colored according to the instructions in text (e.g., a line that reads “This line should be
entirely in red.” should be rendered in red). Use the predefined CSS styles (you are not
allowed to define your own styles, not even inline). Write down the missing code on an
extra paper and refer to the lines in the template via line numbers. Available space is
not necessarily indicative of how much code is required, and some empty space will
not require code. Assume that the default browser color is black.
5
1
2
3
4
11
12
13
This line should be entirely blue.
14

This line should be entirely red.


15

16

This line should be entirely black (even
within
17 the span).
18


19
This line should be mostly yellow.
20 (but the text within the span
21 should be green).
22

23 < >
24

This line should be entirely pink.


25
26
27
Figure 2: Understanding CSS
6
4 Frontend Development (14P)
Complete the code snippet of a Vue.js app on the next page of the exam paper. Write
an app that initially renders the contents of the array “items” in an unordered list below
the header. Further, the app should render a button which, when pressed, appends the
content of “to add” to the displayed list. Pressing the button multiple times will lead to
the same content being appended multiple times.
Write down the missing code on an extra paper and refer to the lines in the template via
line numbers. You will need to add code in lines 9 – 14 and 26 – 28. Available space is
not necessarily indicative of how much code is required. There is no need to interact
with a backend in this task.
7
1
2
3
4
5
6
7

8

List of items:


9
10
11
12
13
14
15

16
17
33
34
35
Figure 3: Complete the Blanks (Express)
8
5 Android Development (9P)
Discuss the following Android code snippet that is using the Volley library to send
HTTP requests to a Web backend. Specifically answer the following questions:
• What does the code do (in general)?
• What happens in case of a successful HTTP request (and in case of an
unsuccessful) one? Specifically, what happens if only one of the two HTTP
requests is successful?
• In what order are the two text views filled with text?
9
1 final TextView txtViewChalmers =
2 (TextView) findViewById(R.id.chalmers);
3 final TextView txtViewGU =
4 (TextView) findViewById(R.id.GU);
5 // ...
6
7 RequestQueue queue = Volley.newRequestQueue(this);
8 String url1 ="http://www.chalmers.se";
9 String url2 ="https://www.gu.se";
10
11 StringRequest request1 = new StringRequest(
12 Request.Method.GET, url1,
13 new Response.Listener() {
14 @Override
15 public void onResponse(String response) {
16 txtViewChalmers.setText(response);
17 }
18 }, null);
19 StringRequest request2 = new StringRequest(
20 Request.Method.GET, url2,
21 new Response.Listener() {
22 @Override
23 public void onResponse(String response) {
24 txtViewGU.setText(response);
25 }
26 }, null);
27 queue.add(request1);
28 queue.add(request2);
Figure 4: Android Volley Requests
10
6 REST API Case Study (25P)
Google Docs is a service that allows users to create, edit, and share documents online.
Below you see an excerpt from a possible REST-based API for such a service.
GET /:user/documents
POST /:user/documents
PATCH /:user/documents/:doc
POST /:user/documents/:doc?delete=true
Figure 5: Excerpt of an Imaginary Google Docs API
Answer the following questions about this API, assuming that it has been designed
following the REST principles introduced in the lecture.
Q6.1: Describe what functionality and behavior you would expect from the following
two API methods. What response would you expect from the service in case of a
successful requests? (4P)
• GET /:user/documents
• POST /:user/documents
Q6.2: Sketch a legal HTTP request to the API method below, which you would assume
to be successful. (4P)
• GET /:user/documents
Q6.3: Assume that you use the following API operation in your program. Name two
status codes not indicating success that your application should be prepared for, and
discuss briefly which erroneous situations they would represent. (4P)
• PATCH /:user/documents/:doc
11
Q6.4: Inspect the API method below. Do you consider it good RESTful design? How
could it be improved? (2P)
• POST /:user/documents/:doc?delete=true
Q6.5: What is the purpose of the following API operation? What would you expect it
to do? What parameters would you expect to have to pass to this method? (4P)
• PATCH /:user/documents/:doc
Q6.6: Define the concepts of safety and idempotency (for HTTP methods in general).
Which of the 4 operations in the above API excerpt would you expect to be safe, and
which would you expect to be idempotent? Provide an example of an additional
method (following the same patterns as the existing methods) that would be
idempotent (but not safe). (7P)
12

欢迎咨询51作业君
51作业君 51作业君

Email:51zuoyejun

@gmail.com

添加客服微信: ITCSdaixie