IT230 - Assignment 2

College of Computing and Informatics
Web Technologies
IT230
Assignmen
Instructions:
t2 


You must submit two separate copies (one Word file and one PDF file) using the Assignment Template on
Blackboard via the allocated folder. These files must not be in compressed format.
It is your responsibility to check and make sure that you have uploaded both the correct files.
Zero mark will be given if you try to bypass the SafeAssign (e.g. misspell words, remove spaces between
words, hide characters, use different character sets, convert text into image or languages other than English
or any kind of manipulation).
 Email submission will not be accepted.
 You are advised to make your work clear and well-presented. This includes filling your information on the
cover page.
 You must use this template, failing which will result in zero mark.
 You MUST show all your work, and text must not be converted into an image, unless specified otherwise by
the question.
 Late submission will result in ZERO mark.
 The work should be your own, copying from students or other resources will result in ZERO mark.
 Use Times New Roman font for all your answers.

Pg. 1 Question OneQuestion One
Learning 1.5 Marks

Outcome(s): Question One
Create web 1. In your own word, explain what are the differences between
pages using Alert box: is one type of popup box in JavaScript which is often used to
HTML5 and make sure that information has come through the user. So, the user should
CSS3. click “OK” to continue when an alert box appears.
Prompt windows: It is also one of the types of popup boxes in JavaScript
which often takes input a value from the user before entering a page. To
Develop dynamic continue after entering an input value in the prompt, the user must click
web pages using either “OK” or “Cancel”.
JavaScript. 2. Using HTML and JavaScipt, provide a script for the below screenshot.
Notes:
1. Copy and paste your script as your answer for this question. DON’T take
screen shot for your HTML and JS script. It must be editable script.
2. Provide a screenshot of your output. The alert box should display your
name and your ID.
<!DOCTYPE html>
<html>
<body>
<h1>Web technologies </h1>

<h2>Assignment 2</h2>
<p>Click the button to display an alert box.</p>
<button onclick="myFunction()">Click</button>
<script>
function myFunction() {
alert("Amal Alammari 190077037");
}
</script>
</body>
</html>
1 Mark
Learning
Outcome(s): Question Two
Develop dynamic Write a script that shows the exact day and time? You required to do the
web pages using followings:
JavaScript. 1. Copy and paste your script as your answer for this question. DON’T take
screen shot for your HTML script. It must be editable script.
2. Full screenshot of your output
<!DOCTYPE html>
<html>
<head>
<title> The Date is
</title>
</head>
<script>
var today =new
Date();
var Day= today.getDay();
var dayList =
["Sunday","Monday","Tuesday","Wednesday","Friday","Saturday"];
document.write("Today is: " + dayList[Day]);
document.write("<br/>");
var hour = today.getHours();

var sunMoon = hour >= 12 ? 'PM' : 'AM';
hour = hour % 12;

hour = hour ? hour : 12;
var min = today.getMinutes();

var sec=today.getSeconds();
min = min < 10 ? '0' + min : min;

hour = hour < 10 ? '0' + hour : hour;
sec = sec < 10 ? '0' + sec : sec;
document.write("\tThe time now is : " + hour + " " + sunMoon + "
: " + min + " : " + sec);
</script>
<body>
</body>
</html>
2.5 Marks
Learning
Outcome(s): Question Three
Develop dynamic
Using JavaScript DOM, access and modify following HTML elements
web pages using
according to the tasks listed below:
JavaScript.
<h1 id="h1id"> KSA </h1>
<img id="img" src="seu.jpg" width="400px" height="150px">
Tasks:
1. Change h1 element color to green.

2. Change h2 element content to SEU.
3. Change img element width attribute to 150px.
Notes:
screen shot for your HTML and JS script. It must be editable script.
4. Provide a screenshot of your output
Hint: this is how the webpage should look like before and after executing the
required tasks:
Before After
<!DOCTYPE html>
<html lang="en">
<head>
<title> JavaScript DOM </title>
</head>
<body>
<img id="img" src="logo-seu.jpg" width="400px"

height="150px">
<script>
document.getElementById("img").width = "150";
document.getElementById("h1id").style.color = "green";
document.getElementById("h2id").innerHTML = "SEU";
</script>
</body>
</html>
1 Mark
Learning
Outcome(s): Question Four
Design XML Provide an xml file that references the following Document Type Definition:
Schemas and (*You may use your own data).
documents. <?xml version=“1.0”?>
<!DOCTYPE student [
<!ELEMENT student (name, ID, branch)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT ID (#PCDATA)>
<!ELEMENT branch (#PCDATA)>
]
<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE student SYSTEM "Student.dtd">
<student>
<name>AmalAhmed</name>
<ID>190077037</ID>
<branch>Dammam</branch>
</student>
2 Marks
Learning
Outcome(s): Question Five
Develop dynamic Write the HTML and the JavaScript code that validates a numeric input. The
web pages using number entered by the user should be between 1 and 10.
JavaScript. When the user enters an invalid value, the background of the input will be red
and the sentence “The number should be between 1 and 10” will be displayed
in red just after the form.
Notes:
screen shot for your HTML script. It must be editable script.
2. Provide a screenshot of your output
<!DOCTYPE html>
<html>
<head>
<title>the answer of question 5</title>
</head>
<body>
<label>Number: </label>
<input type="number" id="number"></br>
<button type="button" onclick="validateNumber()">register</button>
<p id="output"></p>
<script type="text/javascript">
function validateNumber(){
var number=document.getElementById("number");
var x=number.value;
var output=document.getElementById("output");
if ( x < 1 || x > 10)
{
output.innerHTML = "The number should be between 1 and 10";
output.style.color = "red";
number.style.backgroundColor= "red";
}
else
{
output.innerHTML = "Valid Input";
output.style.color = "black";
number.style.backgroundColor=
"white";
}
}
</script>
</body>
</html>

IT230 - Assignment 2

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

IT230 - Assignment 2

Uploaded by

Copyright:

Available Formats

College of Computing and Informatics

 Use Times New Roman font for all your answers.

Learning 1.5 Marks

<h1>Web technologies </h1>

<p>Click the button to display an alert box.</p>

var hour = today.getHours();

hour = hour % 12;

var min = today.getMinutes();

min = min < 10 ? '0' + min : min;

1. Change h1 element color to green.

<title> JavaScript DOM </title>

<h1 id="h1id"> KSA </h1>

<h2 id="h2id"> KSA </h2>

<img id="img" src="logo-seu.jpg" width="400px"

<?xml version="1.0" encoding="UTF-8"?>

You might also like