Hello, dear friend, you can consult us at any time if you have any questions, add WeChat: daixieit

INST0007: Web Technologies

Tutorial Sheet

Week 09

Disclaimer:

The aim of this Tutorial Sheet is to provide you with a set of exercises aimed to develop technical skills related to the concepts covered as part of this module. Writing HTML, CSS, JavaScript and XML will help you better understand the fundamental technologies and better understand the workload required for developing more complex application.

Each Tutorial Sheet contains a list of exercises that will need to be completed in your own time. However, timetabled, live practical/support sessions are set to help you make progress in your learning.

These tutorial exercises will not contribute to your final marks for the module. While the tasks are not assessed, you are sill required to engage with the set tasks and submit the results on Moodle on a weekly basis. Additionally, you are required to take part in weekly formative assessments based on Tutorial Sheet completions. Your submission will be viva-ed by a member of a teaching team and will be flagged on Moodle as Complete or Incomplete. Names of students who fail to submit an attempt on two consecutive occasions will be passed on to the home department of the student for a follow up by a Personal Tutor or the Programme Director. Choosing not to submit practical work or engage with the formative assessment during the practical sessions will not have a direct negative effect on your final mark. However, these tasks are developed to help you improve your knowledge and understanding of the covered subject, and therefore, completing Tutorial Sheets will help you with your assessment.

For each of the Tutorial Sheets, there is a corresponding Moodle submission area with a deadline of no longer than 7 calendar days after the corresponding timetabled practical session. Students are encouraged to submit their work after Tutorial Sheet completion on a weekly basis. Submissions will be used to evaluate general learning progress of individual students, as well as the group as a whole.

Students are advised to submit a single compressed (*.zip) file that contains all the files created/used for the exercises.

Students are expected to attend timetabled sessions, even if all the tasks have been completed prior the session, as timetabled sessions may be used for making important announcements and require group work.

Task Descriptions

Some questions in this document are marked with an asterisk [*] symbol. The asterisk indicates a more challenging question intended for those who are willing to challenge themselves beyond the required curriculum of this module.

Exercise 1

Learning Objectives: [A] Using XML;

For an imaginary Order, write an XML to capture the following information for a set of addresses:

– House Number

– Street Name

– Flat Number

– City

– County

– Postcode

– Additional Information (must be empty)

Ensure that you have two fictional address data in your XML file. Save your file as wk09-exercise01.xml

Exercise 2

Learning Objectives: [A] XML; [B] XML Syntax;.

Correct the XML code given below (see Listing 1). Ensure that you use recommended approaches to formatting your document. Save your file as wk09-exercise02.xml

<?xml version="1”?>

<document>

< -- There are a few problems in this code. -->

<Information>

This document contains some <bold>information</bold>. Once it is correct, it can be read by a parser.

</Information>

</Document>

Listing 1: XML code to be improved.

Exercise 3

Learning Objectives: [A] Using JavaScript; [B] JSON.

Create a simple HTML document with an external JavaScript file.

In the JavaScript file, create a JSON representation of a Person object as a String value that can be described using the following properties:

· First Name,

· Surname,

· Age,

· Height and

· List of Friends

Use fictitious data to assign values to the above properties.

Once the JSON String is defined, parse it and assign to an object. Use JavaScript to print all property values, including the ones in the array.

You should use console.log() function as well as add the data into the HTML.

Exercise 4

Learning Objectives: [A] JSON API ; [B] JavaScript;

The main aim of this exercise is to use the Giphy API to get a random image and display in a website.

Create a simple HTML using the following code (Listing 2). Div with the id holder is added to hold the random gif.

<!DOCTYPE html>

<html>

<head>

<title>Giphy API: Exercise 4</title>

<script type="text/javascript" src="api-script.js"></script>

</head>

<body>

<h1>Simple page to play with an API request.</h1>

<div id="holder">

</div>

</body>

</html>

Listing 2: HTML code to start the exercise.

Create a JavaScript file called api-script.js and add the following code to start the exercise (Listing 3).

As you noticed the request URL already contains an API key. You can use this for the exercise, or create your own account with Giphy and and use your own key. You can also change the parameters of the request, for example, rather than having a tag puppy, you can have another keyword of your choice.

Complete the exercise by adding the necessary code for processing the response from the server. You should acquire the URL of the image, build an <img> tag, add the URL as a src attribute to the <img> tag and assign it to the <div> tag with the id holder.

Please note: that once you parsed the data you should use the following URL for your <img> tag: var imageUrl = parsedData.data.images.original.url;

var request = new XMLHttpRequest();

request.open("GET", "https://api.giphy.com/v1/gifs/random?api_key=sTdF2n7y8wUcMa7x5uOo9uSdySawdPn3&tag=puppy&rating=g");

var imageTag = "";

request.onload = function () {

//Add your code here.

document.getElementById("holder").innerHTML = imageTag;

};

request.send();

Listing 3: JavaScript Listing to modify.

se the provided code for an empty HTML page and save it as wk7-ex04.html. See the listing below:

<!DOCTYPE html>

<html>

<head>

<title>Prettify</title>

</head>

<body>

<p id="text">Click the button below and beautify the font.</p>

<div><button id="prettify">Prettify</button></div>

</body>

</html>

Listing 1: Code for an empty HTML page.

Your final result should be similar to the following screenshot:

Figure 2: Sample Output of the programme for Exercise 4.

Live Practical Session Format

Main Objectives: Getting to know group colleagues, and familiarising yourself with the technology used for Practical Sessions. Checking the code you wrote. Asking for support when struggling with exercises.

Prior to the Practical Session, all exercises from the Tutorial Sheet that require creating a file need to be submitted on Moodle.

The Practical Session will host a subgroup of students and will last 1 hour. Zoom will be the main platform adopted.

The session is led my module leader and will be supported by PGTAs.

You will be required to take a Revision Quiz to help you identify areas you might need some additional time studying. This will also help you identify areas you would like to discuss in smaller group with peers or the Teaching Assistant.

After the Revision Quiz, you will be asked to work in a smaller group. This will be organised using Zoom’s Breakout Rooms. Each breakout room will be led by a Teaching Assistant. Your Teaching Assistant will ask you to share your screen and show the code you have completed. The aim of this session is to identify any errors that might have been unnoticed by you and learn as a group.

Every student in the sub-group must demonstrate their work to the Teaching Assistant. The Teaching Assistant will need to inspect the code and mark your submission on Moodle as Complete/Incomplete.