P h i l
advertisement
Philadelphia University
Faculty of Information Technology
Department of Software Engineering
Examination Paper
Lecturer: Dr. Samer Hanna
Internal Examiner: Dr. Moayad Al-Adami
Coordinator: Dr. Samer Hanna
Web Engineering
(0721422 ) Section 1
First Exam’s Key
Second Semester of 2014/2015
Date: Tuesday, April 14 , 2015-------- Time: 50 min.
th
Q1) (6 marks)
Discuss the following terms in details:
1. Web Engineering. (2 marks)
Web engineering actively promotes systematic approaches towards successful development of high-quality,
ubiquitously usable Web-based systems and applications.
2. Extensible Markup Language (XML) with example. (2 marks)
XML is a markup language that defines a set of rules for encoding documents in a format which is both
human-readable and machine-readable.
Example:
<students>
<student>
<name>Ahmad</name>
<first>18</first>
</student>
<student>
<name>Samer</name>
<first>15</first>
</student>
…
</students>
3. Web services with example. (2 marks)
A software system designed to support interoperable machine-to-machine interaction over a network. It is
based on XML-based technologies: SOAP, WSDL, and UDDI.
Example: A Web service to provide the weather in a certain city. Or a service to reserve a hotel in a city based
on certain criteria we supply. etc.
Q2) (7 marks)
Write the complete code (HTML and CSS) of a Web site that represents your CV, with the following specifications:
1. The website width should be 800px. (0.5 mark)
#wrapper
{
width: 800px;
..
}
2. It should be in the middle of the page. (0.5 mark)
#wrapper
{
1
…
margin: auto;
}
3. It should contain a header that includes a centered image of Philadelphia University logo. (1 mark)
header
{
background: url('images/philad-logo.jpg') no-repeat center;
}
4. The main content of the Web site is description about you such as your name, age, email, number of passed
hours etc. (2 marks)
<div id="main">
<br />
<strong>
Name</strong>: Rami Bidoar<br />
<br />
<strong>Age</strong>: 22<br />
<br />
<strong>email</strong>: rbidoar@hotmail.com<br />
<br />
<strong>Passed hours</strong>: 90 hours<br />
</div>
5. There should be a column to the right that includes a link to your certifications. The width of the column is
150px. (2 marks)
<aside>
<ul>
<li><a href="#">High School Certificate</a></li>
<li><a href="#">ASP.NET Certificate</a></li>
</ul>
</aside>
aside{
width:150px;
float: right;
height: 640px;
background-color: green;
color: blue;
}
6. The main content of the page and the side column should be of different background colors and also font
color. (1 mark)
aside{
….
background-color: green;
color: blue;
}
2
The complete HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>First Exam</title>
<link href="Style1.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div id="wrapper">
<header>
</header>
<div id="main">
<br />
<strong>
Name</strong>: Rami Bidoar<br />
<br />
<strong>Age</strong>: 22<br />
<br />
<strong>email</strong>: rbidoar@hotmail.com<br />
<br />
<strong>Passed hours</strong>: 90 hours<br />
</div>
<aside>
<ul>
<li><a href="#">High School Certificate</a></li>
<li><a href="#">ASP.NET Certificate</a></li>
</ul>
</aside>
</div>
</form>
</body>
</html>
The complete CSS
#wrapper
{
width: 800px;
height: 800px;
margin: auto;
background-color: gray;
}
header
{
height: 160px;
background: url('images/philad-logo.jpg') no-repeat
background-color: orange;
}
#main{
margin-left:15px;
width: 630px;
float: left;
}
aside{
width:150px;
float: right;
height: 640px;
background-color: green;
color: blue;
}
3
center;
Q3) (7 marks)
Apply the JavaScript code to accomplish the following:
1. Define an array of 4 elements that contains the car brands: Mercedes,
Mitsubishi, BMW and Nissan. (1 mark)
var cars = new Array();
cars[0] = "Mercedes";
cars[1] = "Mitsubishi";
cars[2] = "BMW";
cars[3] = "Nissan";
2. Print the elements of the array one in each line, the font size should be 12px.
(1 mark)
for (var i=0 ; i<cars.length; i++)
{
document.write("<p style='font-size: 12px;'>" + cars[i] + "</p>");
}
3. Define an object about one of the cars in 1.
The objects should include:
a. Car type property. (0.5 mark)
var mitsu = {
type: "Mitsubishi",
….
b. Car manufacturing year property. (0.5 mark)
var mitsu = {
…
year: 2008,
c. A function that prints description about a car using the properties in a. and b. (1 mark)
describe : function()
{
document.write("Car type is : " + this.type + "
this.year + "<br />");
}
d. Get function to get the car type property. (1 mark)
getType: function()
{
return this.type;
}
e. Set function to set the value of the car type property. (1 mark)
setType: function (myType)
{
this.type = myType;
}
4. Test the object’s functions (1 mark)
mitsu.describe();
mitsu.setType("Lancer");
document.write(mitsu.type + "<br />");
mitsu.describe();
4
Manufacuring year is " +
