CSCE 102 ─ Final Exam ─ Sections 04/05/06
Total: 100 points
Name
Section Number
Email (required)
1. Look at the partial code below and fill in the blank with a single-line JavaScript comment that
contains your name, section number, and email address. (2pts)
<script>
// bla bla bla
</script>
2. When implementing a calculator, we use a function called
parseFloat()
to convert
a string to a number. (2pts)
3. Write a local CSS style to double space all lines in a paragraph. (2pts)
<p style=”line-height: 200%;”>xxxx </p>
4. Declare a variable and assign it a Boolean value, you decide what the value is.
var flag = true;
(2pts)
5. List the three types of CSS styles. (3pts)
External, internal, local
6. List 2 attributes which are mandatory for image element. Give only the attribute names. (2pts)
src, alt
7. Circle all of the elements that can only go to the head section: (5pts)
a. h1 b. title c. meta d. style e. script
8. Write the code to use the thumbnail image, “googletNail.jpg”, to create an image link and
link it to the original image “google.jpg”. (Assume all files are in the same folder). (4pts)
<a href=”google.jpg”><img src=”googletNail.jpg” alt=”google”></a>
9. Fill in the blank below such that when you click on the thumbnail image “googletNail.jpg”, it
will be replaced with another image “google.jpg”. (Assume all files are in the same folder).
(2pts)
<img src=googletNail.jpg alt=google onclick=
>
“this.src=’google.jpg’;”
10. Write the code in the empty space below to create this list. No CSS styles needed. (6pts)



Labs
Test
1. Test 1
2. Test 2
 Median Score
 Average Score
Projects
<ul>
<li>Labs</li>
<li>Test
<ol>
<li>Test 1</li>
<li>Test 2
<ul>
<li>Median Score</li>
<li>Average Score</li>
</ul>
</li>
</ol>
</li>
<li>Projects</li>
</ul>
11. Write a local CSS style to set the background color of the paragraph to purple. (2pts)
<p
style=”background-color: purple;”
background color is purple! </p>
>My
12. Fill in the blank below so that when you double click the paragraph, the text content of this
paragraph will change to "Wow it is magic!" (2pt)
<p
ondblclick=”this.innerHTML=’Wow it’s magic!’;”
>Click me to see what happens! </p>
13. Given a variable i with the initial value 1, use this variable to write a for loop to call an alert box
five times. The message the alert box shows is "Hello World." (4pts)
<script>
for(var i = 1; i<6; i++){
alert(“Hello World.”);
}
</script>
14. Use anchor element to create a link to google.com, give this link some text “Go to Google” to click
on. (2 pts)
<a href=”http://www.google.com”>Go to google</a>
15. Fill in the blank below to change the font color of the paragraph to green when you click it.(2pts)
<p
onclick=”this.style.color=’green’;”
>Content of this paragraph</p>
16. A) Fill in the blanks below and use a class to make the font size of both h2 element and h3 element
to 16pt. (3pts)
<style>
.same{font-size: 16pt;}
</style>
…
<h2
class=”same”
CSS. </h2>
<h3
class=”same”
CSS. </h3>
> How to use class in
> How to use class in
B) Explain when to use an id and when to use a class when you apply CSS styles to a webpage.
(2pts)
Use id when styles are only applied to a specific elements; use class when same styles are applied to a
group of elements
17. Write a function named setColor() which does the following things: (6pts)
1) it prompts the user for a color
2) it then calls an alert box says "So you choose " and the color that user entered, for instance, the
message would look like "So you choose green" if green is the color you entered.
3) finally, the background color of the whole page will be changed to the color that user entered.
<script>
function setColor(){
var color = prompt(“Enter a color”,”green”);
alert(“So you choose ” + color);
document.body.style.backgroundColor = color;
}
</script>
18. Read the following code carefully, the final value for x is
value for y is
(3pts)
avacado
pomegranate
the final
; and the final value for fruit is
avacado
var x = "avocado";
var y = "pomegranate"
var fruit = "pineapple";
fruit = x;
x= y;
y = fruit;
19. Write an image element to display an image "paris.jpg", when you mouse over it, it will change to
another image "berlin.jpg". (4pts)
<img src=”paris.jpg” alt=”paris” onmouseover=”this.src=’berlin.jpg’;”>
20. Fill in the blanks below to create a button that looks like the one given below; when you click this
button, an alert box will pop up showing the message “Hi there!” (6pts)
<form name=f1>
<
input type=”button” value=”click to call an alertbox”
onclick=”alert(‘Hi there!’);”
>
.
</form>
21. Read the following code carefully, write down the output of this loop. (4pts)
<script>
var i=2;
var myCars=["Saab","Volvo","BMW"];
do{
document.write(myCars[i] + "<br>");
i = i-1;
}while(i>=0);
</script>
BMW
Volva
Saab
22. The following statements are executed in order, one after the next. Read them carefully, in the end
the value of y will be
Final2013
(2pts)
var x= 20;
var y = "13"
x = x+y;
y= "Final";
y= y+x;
23. Write a function named Squared that takes one value in the parenthesis and displays the
squares of this value in an alert box. Put your code in appropriate script tags.(4pts)
<script>
function Squared(num){
alert(num*num);
}
</script>
24. Given the code below,
A. Fill in the blank below to use JavaScript to make paragraph invisible when you click it. (2pts)
B. Fill in the blank below to use JavaScript to make paragraph visible again when you double click
it. (2pts)
<head>
<style>
body{background-color: purple; color: white;}
</style>
</head>
<body>
<p
onclick = “this.style.color = ‘purple’”
ondblclick=”this.style.color =’white’ ”
>
See what I can do! </p>
</body>
25. Correct the code below to make the code correct and fully HTML5 compliant. Please fill in or cross
out, draw arrows or re-write small pieces of code. DO NOT rewrite the entire code or any text, only
the code corrections. (5pts)
<!DOCTYPE html>
<html>
<head>
<title>Code correction missing </title>
<meta charset = “utf-8”>
<img src = “me.jpg”> missing alt
</head>
<style>
Missing selector {color: green;}
</style>
<body>
<h1> Hello! </h2>
<p> How to make text <b>bold?</p></b> wrong order
<input type=”textbox” value=”please enter some text”></input>
</body>
<html>
26. Explain when creating a table, what do rowspan and colspan do respectively? (3pts)
Check your textbook correct answer
27. We have learned Object.innerHTML, Object.value, and Object.src in JavaScript, explain when and
how to use them respectively. (6pts)
.innerHTML: change text content of element
.value: get information entered in a textbox
.src: change image source of image element
28. List the four data types we have learned in JavaScript. (4pts)
String; number; Boolean; array
29. For the following code, if x has the value H2O and y has the value CO2, circle the alert box or
boxes that will be called (2pts)
<script>
if( x != CO2 && y == H2O){
alert(Hey!); // this alert will NOT be called since y is
NOT H2O
}
alert("Can't wait for Christmas?");
</script>