WEB 150

Quiz 3 – Final exam

Name:______

Close books, close notes, close computers. Questions with (*) are potentially challenging. It is advisable that if you don’t get them on the first read through, skip and come back to them later.

2 points each.

  1. True or false:

The window.open() function must have arguments to open a new window

TF

  1. (*) Given this JavaScript code:

for(var i = 0; i <= 10; i++){

if(i % 2 == 0){

var myWin = window.open('',i, 'width=200, height=100');

}

}

This code will:

  1. Open a pop-up window and display a picture
  2. Open 10 empty pop-up windows size 200x100
  3. Open 5 empty pop-up windows size 200x100
  4. Open 6 empty pop-up windows size 200x100
  5. Open 6 windows and display the value of i being 0, 2, 4, etc. in the window
  6. Open nothing. There is an error due to the first argument being empty
  1. The new browser window with variable named “myWin” can be configured so that it appears behind the main window by calling
  2. myWin.focus()
  3. myWin.blur()
  4. myWin.behind()
  5. myWin.hide()
  6. myWin.below()
  1. Which call below will open a browser window with standard browser buttons?
  2. window.open('', 'name', 'scrollbars=1')
  3. window.open('', 'name', 'directories=1')(OK too. Book has an example on this with incorrect answer)
  4. window.open('', 'name', 'resizable=1')
  5. window.open('', 'name', 'toolbar=1')
  6. window.open('', 'name', 'location=1')
  1. Given this JavaScript function:

function popUp(){

var myWin = window.open('', 'name', '');

myWin.document.write("<html<body>");

myWin.document.write("<input type='button' value='Close' ");

myWin.document.write("onclick='window.close()'>");

myWin.document.write("</body</html>");

}

What happens when the function popUp() is called?

  1. An empty window is opened
  2. A window is opened with a functional “Close” button
  3. A window is opened with a non-functional “Close” button because of a JavaScript syntax error
  4. Nothing
  1. In JavaScript, the main “rollover” event happens when
  2. When the mouse is entering / hovering over the element
  3. When the mouse is clicking on the element
  4. When the mouse is leaving the element
  5. When you didn’t use up your monthly minutes of your Cingular phone plan
  1. What is the event that associates with the rollback action?
  2. onMouseOver
  3. onMouseOut
  4. onMouseDown
  5. onMouseUp
  6. onClick
  1. (*) Given this piece of code, assuming that all the needed pictures are available to be displayed:

<head>

<script language="JavaScript">

var img1 = new Image();

img1.src="pic1.jpg";

var img2 = new Image();

img2.src="pics2.jpg";

function action(element){

if(element.src == img1.src) {

element.src = img2.src;

} else {

element.src = img1.src;

}

}

</script>

</head>

<body>

<img src="pic2.jpg" name='myImg' onMouseOver="action(this)"

onMouseOut="action(this)" />

</body>

8.1 What will happen if you hover the mouse over the image named “myImg”?

  1. The image will change to display pic2.jpg
  2. The image will change to display pic1.jpg
  3. The image will stay the same
  4. Nothing change; there is an error message in the browser’s status bar

8.2 Regarding the JavaScript code above, the code that instantiates the images in the header is called image-preloading. In a sentence or two, describe what is image-preloading and why we should use it?

It’s a way to load the images into the browser’s memory to help fast switching between images in the rollover action.

  1. The predefined function in JavaScript setTimeout such as the in call setTimeout("doSomething()", n) would:
  2. Call the function doSomething() every nseconds
  3. Call the function doSomething() every n milliseconds
  4. Call itself every n seconds
  5. Call itself every n milliseconds
  6. There’s no such predefined function in JavaScript
  1. (*) Given the code to run the Play button for playing the slideshow of the image named display, assuming that all pictures are available to be displayed:

<script language="JavaScript">

var pics = new Array('0.jpg','1.jpg','2.jpg','3.jpg','4.jpg','5.jpg');

var timerID = 0;

var index = 0;

var how_long = 5000;

// this function is called by the “Play” button

function runSlide(){

document.display.src = pics[index];

index +=2;

if(index >= pics.length) index = 0;

if(index < 0) index = pics.length-1;

timerID = setTimeout("runSlide()", how_long);

}

// this function is called by the “Pause” button

function stopSlide(){

}

</script>

10.1 The code above will display these images in turn, one by one:

a. 1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg, 1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg and so on.

b. 1.jpg, 3.jpg, 5.jpg, 1.jpg, 3.jpg, 5.jpg, and so on

c. 0.jpg, 2.jpg, 4.jpg, 0.jpg, 2.jpg, 4.jpg and so on.

d. Does not display anything; there’s an error in the code

10.2Use the space below here to complete the code for stopSlide(). Hint: this function will call clearTimeout, which is another predefined function of JavaScript language.

function stopSlide(){

if(timerID){

timerID = 0;

clearTimeout(timerID);

}

}

  1. True or False: You cannot have both of the rotating banner and auto-play slideshow on the same page, as that will confuse the setTimeout function.

TF

  1. Circle all options that apply: DHTML uses a combination of …
  2. Java
  3. JavaScript
  4. HTML
  5. XML
  6. HTML DOM
  7. AJAX
  8. CSS
  9. RSS
  10. PHP
  11. Flash
  1. CSS classes are defined within
  2. <div>
  3. <style>
  4. <script>
  5. <body>
  6. None of above
  1. True or False: Users are permitted to use Internet example codes any way they wish, including modify the code to omit the original credit

TF

  1. True or False:

15.1AJAX is a completely new programming language of the web.

TF

17.2AJAX does not need the convention POST or GET to connect to the server

TF

  1. (*) Given this block of code (it may contain a bug), assuming the menu class, and any JavaScript functions work as they should. It contains two <td> tags, which will produce two dropdown menus:

<!-- first td -->

<td onmouseover="showmenu('table1')" onmouseout="hidemenu('table1')">

<a href='menu1.html'>Menu 1</a<br>

<table id='table1' class='menu'>

<tr<td class='menu'>item1</td</tr>

<tr<td class='menu'>item2</td</tr>

</table>

</td>

<!—second td -->

<td onmouseover="showmenu('table1')" onmouseout="hidemenu('table1')">

<a href='menu2.html'>Menu 2</a<br>

<table id='table2' class='menu'>

<tr<td class='menu'>item3</td</tr>

<tr<td class='menu'>item4</td</tr>

</table>

</td>

See next page 

Which option correctly describes what happens on the mouseover and mouseout event of the second <td> ?

Selection / OnMouseOver / OnMouseOut
a / /
b / /
c / /
d / /
e / Display nothing due to an error / Display nothing due to an error
  1. Given this code:

<html>

<head>

<title>Welcome title</title>

</head>

<body>

<h1>Welcome user!</h1>

<p> Hello there</p>

<p> Hello again</p>

</body>

</html>

17.1. In the terminology of HTML DOM, the <head> tag is a ______of the <body> tags, regarding the code above. (Fill in the blank)

  1. Parent
  2. Children
  3. Sibling
  4. Sister
  5. Grand Parent

17.2. If there is a JavaScript code in the document above such as:

var x = document.getElementsByTagName("p");

var y = x.length;

What is the value of y after the code executed?

a. 0b. 1c. 2d. 3e. 4f. An error

18. In programming terminology, AJAX stands for:

  1. Astronomical Joint Audit Experiment
  2. Asynchronous JavaScript and XML
  3. Asynchronous JavA eXtraction
  4. The name of a soccer club in Amsterdam, Netherlands

1