2/8/10 Notes

IT 130 -- 2/8/10

Review Questions

Where do you put JavaScript statements in an HTML file?

Ans: Put the name of the event handler in the onclick attribute. Put the definition of the event handler within script tags in the head section.
Give four places where JavaScript can display output.

Ans: (1) In an alert box, (2) in the status bar, (3) in a text box or (4) in a button caption.
Write a JavaScript statement to display an alert box that contains File not found.

Ans: Put the JavaScript code alert('File not found.'); in an onclick attribute.
Name six attributes that can be used on an input tag.

Ans: type, name, size, value, onclick, style.
Write an HTML input tag for a textbox with name txtA, size 10 and initial text 0.

Ans: <input type=text name=txtA size=10 value=0 />
Write an HTML input tag for a button with name btnB and caption Push Me.

Look at this Temperature1 Example, right click on the document and select View Source. Then answer these questions:
1. How do you create a source code comment in HTML?
  
  Ans: Place it between .
2. What is the name of the form containing the textboxes and button?
  
  Ans: frmTemperature
3. What does this statement mean?
  Ans: It declares the variables f and c.
4. Which JavaScript function converts a character string into a number?
  
  Ans: parseFloat
5. What does this JavaScript statement do?
  Ans: It computes the Fahrenheit value that corresponds to the Celsius value c and assigns it to f?
6. What is an event handler?
  
  Ans: It is a function that is executed when an event occurs like a button click.

The following code is supposed to create a button that is 6 inches by 2 inches with caption Push Me. When the button is clicked, the caption on the button is supposed to change to to I've been clicked. Correct the mistakes using PSPad and FireFox.

<html>

<head>
<title>Big Button
<style type=text/css>
body, input  { color:maroon;
               background-color:beige;
               font:Comic Sans MS; 
               fontsize:300%; }
input        { width:6.0in; height:2.0in; }
<script type=txt/javascript>
function changeCaption
{
    document.frmBigButton.btnClickMe.value = I've been clicked;

</script>
</head>

<body>

<form name=frmClickMe>
</form> 
<p><input type=button 
          name=btn Click Me 
          value=Click Me
          onclick=changecaption( ); /></p>

</body>
</html>

Ans: Here is a webpage that does this.

Literals, Variables, and Operators

See the document Javascript Literals, Variables, and Operators.
Literals in Javascript are of type integer, floating point, string, and boolean.
Variables have these aspects: name, address, value.
Use a JavaScript var statement to declare variables:
var x, y, z;
Special numeric values are Infinity and NaN (not a number).
Use parseFloat to convert a string representing a number to an actual number. Example:
x = parseFloat(s);
Here are some basic Javascript operators:
+ - * / + =

Practice Problems

Design a form with an input textbox, an output textbox and a submit button. In the onClick attribute for the button, write code that will

Input amount in dollars, output amount in Euro.

Ans: Here is the solution.
Input radius, output area of circle. A = pi times r squared.
Input length of pendulum, output period. P = 2 pi times sqrt(L / g), g = 9.81 m / sec squared.
Input x and y distance in blocks from city center. Output distance to city center as the crow flies.
Hint: Use the Pythagorean Theorem and Math.sqrt.

Ans: See the distance.htm Example.

Project 4

Look at the Project 4 Description.
Finish Project 4, using the temperature1.htm Example as a model.