PIC20A Midterm 2005 Spring

Instructions

  1. The exam consists of 7 pages(including this page). You are responsible for checking the number of pages
  2. Please read and answer all the questions carefully. The point value for each question is indicated. The total number of points available is 45. If you have trouble with a question, leave it and try another.
  3. Unless otherwise stated, you may assume when code is given that the code compiles and is correct. When you are asked to write code, you are expected to write code in good style and with proper indentation.
  4. Good luck!



Pleaes use blue pen or black pen to write down your name and student ID. You can use pencil to answer the questions of the midterm.


Last Name:_________________ First Name:________________
Student ID:_________________








Question
 Q1(8pts)
 Q2(12pts)
 Q3(12pts)
 Q4(13pts)
 Total(45pts)
Scores




















Q1(8pts)
In the following html file, there are 5 places that are not W3C-standard. Circle 4 of them and write corrections next to them. 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Question 1</title>
</head>
<body>
<p>PIC40A is the <b><i>best class</b></i> in UCLA.
PIC20A is the hardest class <br>
Other classes that I like:
<UL>
<li>PIC10A</li>
<li>PIC10B
</ul>
</p>
</body>
</html>
Q2(12pts)
What are the outputs of the following html or javascript codes?
(a) 
<table border="1">
<tr>
<td colspan="2">1</td>
<td rowspan="2">2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
Answer









(b)
<ol style="list-style-type: upper-alpha">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<dl>
<dt>one</dt>
<dd>Two minus one</dd>
<dt>two</dt>
<dd>One plus One </dd>
</dl>
Answer









(c) 
<script type="text/javascript">
<!-- 
var array = [1,2,3,4,5,6];
array[8] = 200;
document.writeln("<p>");
for(var i=0; i < array.length; i++) {
   document.writeln(array[i] + "  ");
}
document.writeln("</p>");

var array2 = [9,8,1,3,4,5];
array2.sort();
var array_string = array2.join("#");
document.writeln("<p>" + array_string + "</p>");
// -->
</script>
Answer









(d) 
<script type="text/javascript">
<!-- 
var instructor = new Object();
instructor.firstName = "Charles";
instructor.lastName = "Li";
instructor.email = "ccli";
instructor.gender = 'M';
delete instructor.email;
// I don't care about the order of your output
document.writeln("<ul>");
for(var name in instructor) {
   document.writeln("<li>" + name + ": " + instructor[name] + "</li>");
}
document.writeln("</ul>");
// -->
</script>
Answer









Q3(12pts).
a)
Create a style class called highlight (for paragraphs i.e. <p> tag)) that has the following characteristics: the font color is blue the text appears in italics, with a yellow background.










b) Show how one would use the above class to put the following paragraph in highlight style: 
One plue one is bigger than zero. 1 + 1 > 0
Answer









c) fill in the codes below, so that when you click on the link(Click me), the style of the paragraph will be changed to highlight style given above. You can assume that the highlight style is defined (as in (a)). 
<p id="changeme">
Click on the link to change me.
</p>
<p>
<a href="#" onclick="________________________________________________________

                     _______________________________________________________">
Click me.</a>
</p>
Output

Click on the link to change me.

Click me.

Q4(13pts)
Write a program with 2 textfields and one button. When a user types in text in the first text field and clicks the button. Text from the first text field will be changed to uppercase and appears in the second text field.

 

 

 

Example, when you type in "abcd123ABC" and press the button.


 

 

  

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>upper case</title>
<script type="text/javascript">
<!-- 
// your codes

















}
// -->
</script>
</head>
<body>
<form action="">
<p>
<!-- your code -->
















</p>
</form>

</body>
</html>