dougv.com | The Web home of Doug Vanderweide

Recently asked on Yahoo! Answers:

Java Question?

I was wondering, is it possible to see the source code from an applet that is on a website? Or is it once it is on the internet so well protected nobody can get it? It goes about this applet:
http://chemistry.about.com/library/weekly/bltempconvert.htm
I am trying to make such a converter myself but am a bit stuck so would want to see if the code from that applet can help me a bit further.. if someone could give a raw version of the code for such an applet it would be even better

Actually, the script this questioner referenced is not a Java applet, it’s a simple JavaScript converter program, like hundreds of others out there. But copying it would be somewhat difficult to do, and his request, sent in a follow-up e-mail to me, was pretty specific:

I really hope you can help me. I need an applet that looks like something as in the link I put in my Question. Is there any way to see the source code from that applet? If not if it’s not too much work could you show me what the code for an applet with 3 text fields with 3 buttons and behind them is? Then the text fields must represent Celcius Fahrenheit and Kelvin and when you click the button it gives you the temperature in the other 2 measurements and clear your input to 0.

Again, it’s not an applet. And it would be infinitely problematic, not to mention counterproductive, to set as 0 the input the person entered, while trying to compute the new values.

So, I modified this request: Our JavaScript will compute the other two temperatures from any temperature we enter. But we’re not going to use a button to submit the request; we’re going to use the onchange event for the textboxes to trigger our function. And we’re going to set the background color for the computed values to be pink, so we know what we entered and what was computed by the script.

Step 1: The HTML Form

Our form couldn’t be simpler: A table to sort everything out and three textboxes to accept and display input. We give each textbox a distinct ID, and we set the onchange event for the boxes to call our JavaScript.

In the HTML DOM, the onchange event is fired if you change the value in a textbox and then either change the focus to another form element — for example, tab to a different text box — or hit the enter key after making your changes.

<form id="form1" method="get">
	<table lang="bordered">
		<tr>
			<th>Fahrenheit</th>
			<th>Celsius</th>
			<th>Kelvin</th>
		</tr>
		<tr>
			<td><input type="text" id="degF" onchange="convertTemp('F')" size="10" maxlength="10" /></td>
			<td><input type="text" id="degC" onchange="convertTemp('C')" size="10" maxlength="10" /></td>
			<td><input type="text" id="degK" onchange="convertTemp('K')" size="10" maxlength="10" /></td>
		</tr>
	</table>
	<p>
		To compute temperatures, enter a numeric value into one of the boxes and then hit Enter / Return or move to another text box.<br />
		The value you entered will have a white background. The computed fields will have a pink background.
	</p>
</form>

Step 2: The convertTemp Function

Our function takes a single argument, passed by each of the textboxes: The type of conversion we want to use.

The function first gets each of the three textboxes via getElementById, and declares the three output variables we need.

function convertTemp(type) {
	var docF = document.getElementById("degF");
	var docC = document.getElementById("degC");
	var docK = document.getElementById("degK");
	var tempF;
	var tempC;
	var tempK;

And we also set the background color of all three text boxes to be pink. More on that in a moment.

docF.style.backgroundColor = '#fee';
docC.style.backgroundColor = '#fee';
docK.style.backgroundColor = '#fee';

We next use a simple switch to find out what type of conversion we are using. Notice that the switch only has declared cases for Fahrenheit and Celsius; because it is called by the onchange event, we know only one of three parameters can be passed; if we explicitly name two, and the parameter is not one of those, then clearly it’s the one we didn’t explicitly name.

Our switch statements do the following:

• Sets the value of the appropriate output variable to be the value of the corresponding text box. For example, if we entered a new value for Fahrenheit, then we change the value of tempF to be the value of the docF text box. Note that we have to explicitly cast the values as numbers; if we don’t, the script may treat our variables as strings, and the math we need to do to convert the temperatures will produce funky results.
• Set the background color of the appropriate text box back to white. For example, if we change the value of Fahrenheit, then that text box’s background color is set to be white.
• Use the appropriate formulas to compute new values for the other two text boxes.

switch(type) {
	case 'F':
		tempF = Number(docF.value);
		docF.style.backgroundColor = '#fff';
		tempC = (tempF - 32) * (5 / 9);
		tempK = (tempF + 459.67) * (5 / 9);
		break;
	case 'C':
		tempC = Number(docC.value);
		docC.style.backgroundColor = '#fff';
		tempF = (tempC * (9 / 5)) + 32;
		tempK = tempC + 273.15;
		break;
	default:
		tempK = Number(docK.value);
		docK.style.backgroundColor = '#fff';
		tempF = (tempK * (9 / 5)) - 459.67;
		tempC = tempK - 273.15;
}

To finish, we simply assign the new values of all three temperatures to the appropriate text boxes.

docF.value = tempF;
docC.value = tempC;
docK.value = tempK;

And that’s it. You can see the results in action here:

http://www.dougv.com/demo/js_temp_converter/

To use this yourself, choose File –> Save from your Web browser and save the file someplace easy to remember. Then, open the Web page with Notepad or a similar text editor, copy the HTML for the form, the JavaScript function and my copyright notice, and add them to your own page.

I distribute code under the GNU GPL version 3.