Start
Computing the Nernst Equation with JavaScriptJavaScript is used for the next part of the web page.
JavaScript is a scripting language most popularly used in
web browsers. If all you want to do is to learn something basic
for
simple dynamic web pages skip over this discussion of standards and
guides straight to the example below. If you want to learn
JavaScript in a systematic way, I
suggest the Mozilla Core JavaScript 1.5 Guide and Core
JavaScript 1.5 Reference7 for
Firefox and Microsoft Web
Development Home Page for Internet Explorer (IE)8.
These days there is much more standardization than in the early days of
the web but if you do serious web development you will need to become
familiar with both platforms. I find the Mozilla reference
easier to start with although many developers begin with IE because it
dominates in the market (at least in the mass market, which may differ
from the market you plan to code for). In fact, the code
developed here works in both browsers (Firefox 1.5 and IE 6 XP SP2)
without any special checks or if statements. The other important standard is the document object model. This defines the structure of HTML documents. The references for these are World Wide Web Consortium (W3C) Document Object Model (DOM) Level 2 HTML Specification9, which describes the structures and interfaces for HTML documents in particular, and Document Object Model (DOM) Level 2 Core Specification10, which describes the structure and interface a wider range of Standard Generalized Markup Language (SGML) types. For a description of HTML in general see the W3C
HTML 4.01 Specification11 or the
XHTML™ 1.0 Specification12.
XHTML
is a reformulation of HTML 4 in XML 1.0, which is now being
encouraged. Of course many casual web developers just use a HTML
WYSISYG editor. You will find that these editors generate a lot of junk
that you can do without and do not give you the control you need.
If you get serious you will need to dive into the markup directly. I have defined the JavaScript code needed in the file action_potentials.js. The first
step is to add a reference to the JavaScript file in the HTML
file. This is done with the script tag: <link rel="stylesheet" type="text/css" href="action_potentials.css"> |
|
To compute the Nernst equation based on user input I used text input fields with an update button, which triggers recalculation and display of the electric equilibrium potential. These HTML elements are all enclosed in a form tag:
...
<form name="nernst_form">...
<span id="answer_display">-86</span>...
<span id="temp_display">298.15</span>...
<span id="con_out_display">5</span>...
<span id="con_in_display">140</span>...
<input name="temp_input" id="temp_input" value="298.15" size="5" type="text">...
<input name="con_out_input" id="con_out_input" value="5" size="5" type="text">...
<input name="con_in_input" id="con_in_input" value="140" size="5" type="text">...
<input name="update" id="update_input" value="Update" onclick="javascript:nernst()" type="button">...
</form>
The script tag specifies the location of the external JavaScript
file. The span tags display the numbers that will be updated
based on the user input or calculation done in JavaScript. The id
attributes are used to look them up in the JavaScript code. The
text input tags have id attributes to look them up from. Value
attributes to set the default vales of the parameters. The name
attribute of the input tag is not used in this example. The
button input (type="button") triggers the JavaScript onclick event (onclick="javascript:nernst()")
which calls the JavaScript method we need to evaluate the Nernst
equation. Here is the declaration of the JavaScript function.
This JavaScript is used to read the values from the form textfields.
The var keyword here indicates that what comes after is a
variable. It is optional but good practice
to use. In the script temp_val, con_in_val, con_out_val are
JavaScript variables used to hold the values collected. The document
variable is predefined by the browser as the entire HTML
document. It is a starting point for most functions provided by
the browser script environment. The getElementById function
is
defined in the DOM
Core Specification10. The
argument to it matches the id tag in the HTML form. The value
attribute is defined in the DOM HTML Specification for node type HTMLInputElement.
The next step is to set the values read from the input fields into the
formula displayed on the page. To a user these appear as read
only parts of the HTML form but we are able to set them using the
JavaScript code:
using temperature for example. The other fields are similar. The first line gets the span node containing the text for the value of temperature. The second line creates a new text node for the new value of temperature. The third line replaces the old text with the new text.
Finally, we are ready to compute the electric potential. This is done with the code
The first line defines a function to compute the Nernst equation.
The second through fourth lines convert the text values read from the
input fields to floating point numbers needed in the
calculations. The fifth line does the calculation and rounds it
to an integer value (milliVolts).
Alex Amies is a senior software engineer at IBM. He can be contacted at alexamies@gmail.com.