HIMA 4160 Concepts in Health Information Technology

JavaScript Lab

Fall 2009

We have learned about basic features and terminologies of JavaScript . In this lab, you will have hands-on experiences of dynamic programming using the JavaScript language. To complete the lab, you need to have the TextPad editor (other text editors like the notepad within the Windows operating system should be OK for the lab as well) to edit the source code and a Web browsers (e.g., Internet Explorer or Mozilla Firefox) in order to preview the outcome of the program.

Each step is followed by several questions to help you understand the important features of the code. Try your best to answer these questions. Feel free to check references or search the Web to find the answers to these questions.

1. Run Textpad or another simple text editor. Create a basic HTML file containing the following code:

<html>

<head>

<title>HIMA 4160 Javascript Lab</title>

</head>

<body>

<h1>HIMA 4160 JavaScript lab</h1>

</body>

</html>

You can give the file any name you want. However, don’t forget to save the file as the filetype HTML. Preview the page in Internet Explorer or any other web browser.

Questions:

  1. Is there any JavaScript code here?
  2. Where are the possible locations for adding JavaScript code to the HTML code above?

2. Insert the following JavaScript block just before the closing tag</body>:

<script type="text/javascript">

document.writeln("This part is generated by JavaScript.");

</script>

Questions:

  1. What does the command writeln do here?
  2. What does document in the JavaScript code refer to?
  3. How does the browser know the code is a JavaScript program?

3. Insert the following in the JavaScript block to show the date and time that the page was last modified:

document.writeln("<br>Last modified: ", document.lastModified);

Preview the result in your web browswer. If you also have another browser installed, preview in it also and note any difference in how the date is displayed.

Questions:

  1. What does this JavaScript code do?
  2. What is the value of document.lastModified?
  3. Is lastModified a property or method of the document object?

4. Insert the following code below the above code to get and display today's date:

var today = new Date();

document.writeln("<br>Viewed: ", today);

Preview in Internet Explorer and any other browser that you have installed. Note the different formats used for the date and time, even by the same browser.

Questions:

  1. Does the output of this snippet of code return the same value as the one in step 3? Why or why not?
  2. What is Date()? Is it a method or a property?

5. To randomize the color of the first line displayed by JavaScript, first insert the following array definition at the beginning of the script:

colors = new Array("red", "orange", "yellow", "green", "blue", "indigo", "violet");

document.writeln("<br<font color='", colors[Math.floor(Math.random()*7)], "'>ThispartisgeneratedbyJavaScript.</font>");

Preview the results. Try refreshing the page several times to see the different colors.

Questions.

  1. In this step we called two JavaScript system Math functions. What are they?
  2. Does the color of the font change after refresh?
  3. Why we alternate single quotation mark ‘’ and double quotation mark “”?
  4. Why we need to times 7 in this step?

6. Use mouse to flip an image.

We will now learn how to flip an image using JavaScript code directly embedded within the HTML tag. Download the image files from the following link The image’s names are “ECU_logo.jpg” and “ecupirates.jpg” respectively. Save both files to the same folder of your HTML file containing JavaScript code.

In your HTML code, outside your script tags, insert the following code. Please pay attention to the position of the single and double quotation marks.

<a href=” onMouseover="document.logo.src='ecupirates.jpg'" onMouseout="document.logo.src='ECU_logo.jpg'">

<img src="ECU_logo.jpg" height=150 width=100 name="logo">

</a>

Preview the results. Move your mouse over and out of the image and see the image flips.

Questions:

  1. Which parts are the JavaScript code?
  2. What are the event handlers in the code?
  3. How does JavaScript know where the image is?

7. Use JavaScript to give alert and change background color of a webpage.

Start a new HTML file and type the following code.

<html>

<head>

<title>Simple JavaScript Button</title>

<script type="text/javascript">

<!--

function dontClick(){

document.bgColor="black";

alert("I told you not to click!");

}

</script>

</head>

<body bgcolor="white">

<h1>Simple JavaScript Button</h1>

<form>

<input type=button value="Don't click me" onClick="dontClick()"/>

</form>

</body>

</html>

Save the file as HTML file and preview the results.

Questions:

  1. What is the type of input in the form?
  2. Where is the event handler?
  3. What does the function dontClick do?

8. A browser display your name and favorite color.

Start a new file in TextPad. Type the following code

<html>

<head>

<title>A browswer display your name and favorite color</title>

<script type="text/javascript">

<!--

function greeting(name, color){

var welcomeWords = "welcome, " + name + "!";

document.bgColor = color;

alert(welcomeWords);

}

//-->

</script>

</head>

<body>

<h1>Hi, tell me your name and favorite color</h1>

<form>

Name

<input type="text" name="yourName"/>

<br>

Favorite Color:

<input type="text" name="color"/>

<br>

<input type="button" value="Greeting" onClick="greeting(yourName.value, color.value)"/>

</form>

</body>

</html>

Save the file as an HTML file and preview it.

Questions:

  1. What is the purpose of having .value after yourName or color,
  2. What is the difference between the greeting function and the dontClick function in last step other than they have different functionality.

9. Now we need to program a JavaScript program that can read numbers from a web form and perform calculation.

Start a new file, type the following HTML codes

<html>

<head>

<title>JavaScript Calculator</title>

</head>

<body>

<h1>JavaScript Calculator</h1>

<form name = "calculator">

Number 1 <input size=5 name="number1" type="text"/<br/>

<select name="operator">

<option value="+">+</option>

<option value="-">-</option>

<option value="*">*</option>

<option value="/">/</option>

</select<br/>

Number 2<input size=5 name="number2" type="text" /<br/>

= <input size=5 name="result" type="text"/<br/>

<input type="submit" value="calculate"/>

<input type="reset" />

</form>

</body>

</html>

Preview the results in a web browser

Questions:

  1. When you put numbers in the textboxes, select mathematic operators, and press the calculate button, what happen? Why?
  2. What happen when you press the reset button?
  3. What is the name of the form?
  4. How many values within in the drop down list?

10. So, the previous HTML webpage only has the necessary elements for a web-based calculator but not actual calculation. You need to have the function for calculation implemented here. Type the following code between <head> and </head>

<script type="text/javascript">

function calc(){

var a = parseInt(calculator.number1.value);

var b = parseInt(calculator.number2.value);

var o = calculator.operator.value;

var result = 0;

if (o == "+"){result = a + b}

else if (o=="-"){result = a-b}

else if (o=="*"){result = a*b}

else if (o=="/"){result = a/b}

else {alert("not a valid value")}

calculator.result.value = result

return false;

}

</script>

and add the following code to the attribute of submit button.

onClick=return calc()

So, now your submit button code should look like this

<input type="submit" value="calculate" onClick="return calc()"/>

Previous the results in the browser. Try to understand the code.

Questions

  1. What do you see on the webpage? What does it do now?
  2. What do the function calc() do?
  3. There is a line of code is not necessary, can you tell which one?
  4. What does the function parseInt do?

1