Quiz 7

We used some CSS styling to good effect on our home page when preparing our menus. Indicate what value was given to each of the following CSS properties and, in each case, why we chose that value: list-style, float, display, position, and text-decoration.
First of all, list-style was given the value none to remove the bullet markers from an unordered list of menu items. Then float was given the value left so that these list items in a normally vertically-oriented list would “float up” to the left and lie next to each other in a horizontal line to form a menu “strip”. Next, display was given the value block to turn normally-inline links into block elements so they could be given a width, padding and margins (not permitted for inline elements). The position property of the div holding the dropdown menu options was given a value of absolute to remove those options from the normal flow of the page. This, in turn, allowed the following blocks to “rise up” under the horizontal menu and “close up” the space that would otherwise be there. Finally, the text-decoration property of the menu option links (a elements) were given a value of none to remove the default underline used for links.

The critical CSS property: value pair that needs to be set so that we can give the links in our dropdown menu a width is _________________: _________________.
display: block  

The JavaScript statement to create a new array of size 10 called x is ___________________________.
x = new Array(10);

Our “dropdown menus” don't actually “drop down”. What happens is that their ________________ property changes from ________________ to ________________.
visibility, hidden, visible

If, in a JavaScript switch-statement, the same function call DoIt() is to be made if the case label is any one of the values 2, 3 or 4, then the proper syntax for this part of the switch-statement could be case 2: case 3: case 4: DoIt(); break;

Which one of the following is not a valid method of the JavaScript Date object?

getHour()

If we want to “deactivate” one of the links on a web page, so that clicking on it does not actually take the user anywhere, we can make the value of its href attribute

#

If we have a JavaScript variable that we will be using to hold a reference to a JavaScript object, but that currently has no value, we should assign the variable a temporary value of

null

The picture rotation on our website's home page is started by making our startRotation() function the value of the onload attribute of the body element of that page.

True

If we want a link (that is, the text in an a element) to change color when the mouse “hovers” over it, we use a pseudo-class to style the link accordingly, for which the correct syntax is

a:hover

Convert the following JavaScript code by replacing the switch statement with an equivalent (nested) if-statement :
Month = today.getMonth();
switch (Month)
{
case 0: 
case 1:
case 11:
   season = "winter";
   break;
case 2:
case 3:
case 4:
   season = "spring";
   break;
case 5:
case 6:
case 7:
   season = "summer";
   break;
default:
   season = "fall";
}

Month = today.getMonth();
if(Month == 0 || Month == 1 || Month == 11)
{
season = "winter";
}
else if(Month == 2 || Month == 3 || Month == 4)
{
season = "spring";
}
else if(Month == 5 || Month == 6 || Month == 7)
{
season = "summer";
}
else
{
season = "fall";
}

Our “dropdown menus” don't actually “drop down”. What happens is that their ________________ property changes from ________________ to ________________.

visibility, hidden, visible 

JavaScript, unlike languages like traditional C, C++ and Java, can use _____________ as values for the case labels in a switch-statement.

strings

What will be the output of the following JavaScript code embedded in an XHTML document body:
for (i = 100; i > 0; i -= 20)
{
document.write(i + " bottles of soda on the wall <br />\   n");
document.write("Take a few down and pass it around<br />\   n");
}

100 bottles of soda on the wall 
Take a few down and pass it around
80 bottles of soda on the wall 
Take a few down and pass it around
60 bottles of soda on the wall 
Take a few down and pass it around
40 bottles of soda on the wall 
Take a few down and pass it around
20 bottles of soda on the wall 
Take a few down and pass it around

If we want the picture in our picture rotation to change every five seconds, the second parameter of the setInterval() function should be 5.

false

The two event attributes whose values we use to control the hiding and showing of our dropdown menus are onmousein and onmouseout.

false

If, in a JavaScript switch-statement, we want the function DoIt() to be called if any of the values 1, 2 or 3 is matched, the appropriate syntax is this: case 1,2,3: DoIt(); break;

False

The built-in JavaScript function used to control the rotation timing of the images on the home page of our website is

setInterval()

If we want to “deactivate” one of the links on a web page, so that clicking on it does not actually take the user anywhere, we can make the value of its href attribute

#

The structure in which we store our images to prepare for their rotation is called a/an _______
array

The getDay() method of the JavaScript Date object returns the string form of the day of the week, such as “Monday”, or “Saturday”.
False

If x is a JavaScript array with 17 elements, the last element is denoted by x[17].
False

Which of the following corresponds to the general structure of a JavaScript for-loop?

for (initialization; condition; update)

Describe, in pseudocode form, the steps taken by our script that produces the rotating images on our home page.
To produce the rotating images on our home page we proceed as follows:
Determine what day of the week it is
If it is a week day
Build an array of indoor images
else
Build an array of outdoor images (it's a weekend)
Initialize an image counter to zero
Get a reference to the img element on the home page
Set the src attribute of this img element to any one of the images in the array (except
the last one)
Now, every two seconds perform the following steps
Increment the image counter (this is why we shouldn't start with the last image)
Set src attribute of img element to array image given by the image counter
If the image counter has passed the end of the array, reset it to the beginning

If x is a JavaScript array, the length of that array is given by
x.length

JavaScript, unlike languages like traditional C, C++ and Java, can use _____________ as values for the case labels in a switch-statement.
strings

Which one of the following JavaScript keywords is not usually used in iteration?

Switch The JavaScript statement Date(); is used to display current date and time. False If today's date is Tuesday, April 17, 2012 and the JavaScript variable today holds a JavaScript Date object representing today's date, then the value returned by the method call today.getDay() is 2

If we want the picture in our rotation to change every two seconds, then in the function call that sets up the rotation, the value of the time parameter must be

2000

Quiz 6

In a JavaScript regular expression \d and \D are alternate forms of the same thing.
-False

JavaScript can be used for

A. computations based on user input

B. 

validation of data entered by a user

C. 

changing the look and feel of a web page

D. 

any or all of the above

In JavaScript strings may be enclosed in either double quotes or single quotes.

-True

In JavaScript the functions Math.ceil() and Math.round() return the same value for an input of 3.6.

-True

A DOM Link object will be found within which XHTML element?

head

JavaScript programs are compiled.

-False

In a JavaScript regular expression, a single non-digit would be represented by _____.

-\D

Write a small JavaScript function called area that takes one parameter for the radius of a circle and returns the area rounded off to the nearest integer and computed as  .

function area(radius)
{
return Math.round(3.1415*Math.pow(radius,2));
}

The recommended place to put your JavaScript code is __________.

-in an external file

Fill in the truth values in the following truth table:

JavaScript is used for both client-side and server-side computing.

-True

JavaScript originated from the Java programming language.

-False

In JavaScript myArray[1] would refer to the first element of the array myArray.

-False

Give a high-level description of what regular expressions are, and how JavaScript uses them.

Regular expressions form a kind of “pattern language” that provide us with a concise and very powerful technique for “matching” one string against another to see if a given string “matches” a required “pattern”. Since essentially all of the input to our websites through our forms arrives initially as string data, even if it will eventually be interpreted as numerical data, we can therefore use regular expressions to examine this data for potential problems. The idea is, of course, to “validate” the data, in the sense that if the data is what we think it should be, we let it go through; otherwise we reject it. This is useful both for keeping out input that might actually be harmful in some way, as well as for preventing bad data caused by user data-entry error from being sent to the server. In the latter case, recognizing errors on the client side saves on “bandwidth” consumption, since otherwise we would be sending bad data to the server, and the server would have to send back an error message.

The JavaScript symbol for a “logical and” is && .

The DOM object Area is related to which XHTML element?

img

Which of the following is not among our list of JavaScript “escape characters” (also called “special characters”)?

\c

Compare the relative advantages of compiled versus interpreted languages.

Both compiled and interpreted languages make it possible for programmers to write programs in higher-level, English-like languages. Both types of programs need to be translated to machine language instructions before they can be executed by a computer. The compilation process translates the entire program once, and then that “translation” can be executed many times without another translation. Interpreted programs are translated one instruction at a time, at the time of execution, and this translation is repeated for each execution. While there is translation overhead for every execution of an interpreted program, they are easier to modify, and are more easily portable to a wide variety of computing environments.

Which DOM object refers to the entire XHTML document of the web page shown in the user's browser when that user arrives at the home page of your website and displays your index.html file?

Document

If you simply want to output “Hello, world!” to a web page, the JavaScript statement you would use is ________.
document.write("Hello, world!");

In JavaScript myArray[1] would refer to the first element of the array myArray.

-False

In JavaScript strings may be enclosed in either double quotes or single quotes.
-True

JavaScript is mostly concerned with
the behavior of a web page

The acronym DOM stands for
Document Object Model

The acronym API stands for
Application Programming Interface

Which JavaScript method would you use to notify the user of something with a message in a popup window? 
-alert()

To give a visitor to your website a message via a “popup” dialog box, you would use the JavaScript _________ method.

alert()

Write a small JavaScript function called volume that takes two parameters, one for the height, another for the radius, and then displays the volume of the corresponding cylinder, as computed by  and rounded off to the nearest integer. For example, a call to the function such as volume(2,5); should produce the following output:

function volume(height, radius)
{
alert("Radius = " + radius + " Height = "
+ height + " Volume of cylinder = "
+ Math.round(3.1415*height*Math.pow(radius,2)));
} 

JavaScript placed in an external file must not be enclosed in a script element.
-True

In a regular expression, \d{3,7} means
a single digit exactly 3, 4, 5, 6 or 7 times

The JavaScript symbol for a “logical or” is ___________. ||

If, in a regular expression, we wish to match any capital letter in the range from C to F, we should use

B or C above

Describe briefly the purpose and structure of a programmer-defined JavaScript function.
 Programmer-defined functions in any programming language, including JavaScript, are a good way to keep your code “modularized”. Each function should be short, and have a clear purpose. This makes your scripts easier to understand, and to modify if required. In JavaScript, a function definition begins with the keyword function, followed by the programmer-chosen name of the function and a pair of parentheses. It is, of course, important to choose a good name for every function. The parentheses may be empty, or may contain a comma-separated list of values to be passed into the function when it is called. This much of the function is called the “function header” and it is followed by a set of braces containing the “body” of the function, consisting of the coded that performs the action, or computes the value, for which the function was defined. If the function does compute a value to be returned to its caller, there must be a return statement (usually, but not always, the last statement) that returns the computed value.

Interpreted programs tend to run faster than compiled programs.
false

Explain briefly the statement, “JavaScript can help us to keep our websites secure.”
First of all, note that neither JavaScript nor any other technology can guarantee that our websites will be secure. Hackers are always finding new ways to penetrate even the best of our defences, so we must be constantly vigilant. JavaScript can, however, at least “help” us to thwart potential problems, by helping us to ensure that the kind of data we ask our users to enter into our forms is, in fact, the data that gets entered. If we use regular expressions to “sanitize” data entries and reject those that do not conform to the formats we have requested, this can go some distance toward preventing such things as malicious code being submitted to our websites through our forms.

Write a small JavaScript function called areYouTall that takes one parameter for the height and displays the “popup” message “You are tall!” if the height is greater than or equal to 72.
function areYouTall(height)
{
if (height >= 72)
{
alert("You are tall!");
}
}

The JavaScript method to use for obtaining access to an object via the id value of that object is _______.

getElementById() (or document.getElementById())

Explain briefly the relationship between JavaScript and the DOM, and indicate why this relationship is so useful.

The DOM (Document Object Model) is a hierarchical model of all the elements, attributes and styles on your web page, and it provides a language-independent API (Application Programming Interface) for access to those “objects”. JavaScript is one of many programming languages that takes advantage of this API to gain access to the various parts of a web page to manipulate and modify the “look and feel”, and even the content, of the page, often in response to user interaction with the page (clicking a button, for example). This interaction between JavaScript and the DOM is how we are able to provide a “behavioral” aspect to our web pages, and move them beyond the “static” pages that were the only option in the early days of the web.

In JavaScript, whatever follows the if keyword and comes before the else keyword must be enclosed in braces (also called “curly brackets”).

True

The original name for what we now call JavaScript was_____________.
LiveScript

Quiz 5

Although we are not actually submitting any form data to the server in this chapter, we did see the form tag attribute, to which we will have to give a value (the script to perform the actions we want to take place on our form data) when we eventually do submit the form data, and the name of that attribute is action.

Explain the similarities and differences between input elements of type radio and input elements of type checkbox, indicating as well where you would be most likely to use each.
First of all, the display of a “radio button” is a small empty circle that changes to contain a black disc when “selected” (clicked on by the user). This kind of input element (of type radio) appears in a group of similar buttons, and only one of them can be selected at any given time. Thus such a grouping is very useful when offering a number of options to the user, but only one of them may be chosen (that is, “mutually-exclusive” options). The “checkbox”, on the other hand, displays as a small box which is empty when not selected and contains (usually) a small check mark when selected. These input elements also appear, quite often, in a group of similar elements, but unlike a group of radio buttons, a group of checkboxes permits any number of the boxes to be checked. Such a grouping is therefore used when offering a number of options and any or all of them can be chosen. A single checkbox is also useful to ask a simple question to which there is a yes/no or true/false type of answer.

Why is the input element so important to the design and construction of web forms?
The input element for forms is so important because it alone accounts for the vast majority of the “widgets” or “form controls” one sees on a typical web page form. For example, just by changing the value of the type attribute of the input element, one gets either a text box, a checkbox, a radio button, a submit button, or a reset button. And these are just some of the possibilities. In fact, many forms can be constructed using only the form element itself, various kinds of input element, and perhaps a textarea element or two. The input element is thus the most versatile and useful of all the form controls available.

What is the purpose of using the fieldset/legend element combination?
We should always try to have the best possible user interface for our web pages, especially when we are using a form to gather information from our users. On a typical form there will be groups of “widgets” (“form controls”) that are collecting essentially the same kind of data (personal information, for example). Thus it makes sense to group those controls together on the form and provide a label that indicates their purpose. This is what the fieldset/legend element combo does for us. The fieldset element groups elements and places a box around those elements, and the content of the legend element appears in the upper left corner of that box as a label for the box and its contents.

If you want a one-line textbox to accept some information on a form you should use a/an _________________ element of type _________________.
input, submit

To get a dropdown list-box you would use a combination of
a select element, plus several option elements

When you use a fieldset element on a form, the text that appears in the top left corner to provide a descriptive name or phrase for the form controls that have been grouped, the text for that name or phrase is the content of a legend element

Placing an empty form element on a web page has no visible effect on the display of that page.
-True

If we want an input element of type checkbox to appear already checked when the form containing this checkbox is displayed, then that input element should have an attribute of the form checked="yes".
-False

To set the maximum number of characters (visible or not) that can be entered into the an input element of type text we use the attribute called
maxlength

If we give an input element of type text a size attribute with the value 15, the user will not be able to enter more than 15 characters into that text box.
-False

If we put an empty form element on one of our web pages and display that page in a browser, then where the form element is located we see
no visible effect

You can choose multiple options by clicking several buttons in a group of radio buttons.
-False

To set the number of characters that can be seen in the visible area of an input element of type text we use the attribute called
size

Although we are not actually submitting any form data to the server in this chapter, we did see the form tag attribute, to which we will have to give a value (the script to perform the actions we want to take place on our form data) when we eventually do submit the form data, and the name of that attribute is action

The for attribute of a label element will have the same value as the __________ attribute of an input element. ID

The adjective that applies to something in a markup (or other) language that should no longer be used (like the XHTML center tag) is ____________________.
deprecated

Explain the similarities and differences between an input element of type text and a textarea element, indicating as well where you would be most likely to use each.
Both the input element of type text and the textarea element are designed to accept text typed in by the user. The major difference is in the amount of text each is designed to accept, and therefore also in the typical uses for each. Typically, the input element of type text is used for a single line of text, and is therefore ideal for entering names, addresses, telephone numbers and the like. The number of characters that show in the text box display, as well as the maximum number of characters that may be entered, can be specified by the size and maxlength attributes, respectively. In the case of the textarea element, the rows and cols attributes specify the initial size of the display (in number of characters vertically and horizontally), but the element will also scroll to accommodate additional text entry if necessary. This element is used for multiline text entry, whatever the purpose.

Why is the input element so important to the design and construction of web forms?
The input element for forms is so important because it alone accounts for the vast majority of the “widgets” or “form controls” one sees on a typical web page form. For example, just by changing the value of the type attribute of the input element, one gets either a text box, a checkbox, a radio button, a submit button, or a reset button. And these are just some of the possibilities. In fact, many forms can be constructed using only the form element itself, various kinds of input element, and perhaps a textarea element or two. The input element is thus the most versatile and useful of all the form controls available.

You use the legend element to accompany the ______________ element.
fieldset

Which of the following types of input elements are generally used in a group?
radio and checkbox

Although we are not actually submitting any form data to the server in this chapter, we did see the form tag attribute, to which we will have to give a value (the script to perform the actions we want to take place on our form data) when we eventually do submit the form data, and the name of that attribute is action

If we give an input element of type text a size attribute with the value 15, the user will not be able to enter more than 15 characters into that text box.
-True

To set the maximum number of characters (visible or not) that can be entered into the an input element of type text we use the attribute called maxlength

If we want an input element of type checkbox to appear already checked when the form containing this checkbox is displayed, then that input element should have an attribute of the form checked="yes".
-False

If we put an empty form element on one of our web pages and display that page in a browser, then where the form element is located we see no visible effect.

A “behind-the-scenes” logical grouping of a form control and the text that describes it (to help with accessibility) can be achieved using
a label element to contain the descriptive text, and the id attribute value of the form control to be the value of the for attribute of the label element

If you do not want any value to appear as a default option in a dropdown list-box, you should place an option element with no content (or a blank space) as the first option in the list of options within your select element. 
-True

Placing an empty form element on a web page has no visible effect on the display of that page.
-True

If you want an input element of type checkbox on your form to appear already checked when that form is displayed, you should give that input element a/an __________________ attribute with the value __________________.
checked, "checked" 

The text that you want to appear on the “submit button” on your form must be the _______________ of the _______________ attribute of a/an _______________ element of type _________________on your form. value, value, input, submit

When a user “submits” a form (that is, the data entered into the form) it is the value of the form's _________________ attribute that determines what is to be done with that data.

action

The adjective that applies to something in a markup (or other) language that should no longer be used (like the XHTML center tag) is ____________________.

deprecated

You use the legend element to accompany the ______________ element.

Fieldset

An input element of type text will scroll to allow a user to enter multiple lines of text.

False

If you want to get an opinion on something from your website visitors in the form of a paragraph to be typed into one of your forms, you should use

a textarea element