Inside the Code
Get ready to dive into the JavaScript / HTML code! Most of it is surprisingly simple and intuitive even if you've had minimal coding experience.
Simple Example
How many Levels are defined given N Bits of resolution?
HTML Form
<form name="myForm" style="font-size:small">
N Bits
<input type="text" name="N" value="8" size="10">
<input type="button" value="Calc Levels" onclick="getLevels_NBits()">
Levels = 2^N =
<input type="text" name="Levels" value="" size="10">
</form>
As you can see, the code for the form is fairly straight forward with three inputs - two text input boxes and a button. You'll notice there's no formatting of the inputs and text, so they all appear on a single line. In another topic, we'll use the table capability of HTML to organize the form.
The first text box is defined with a name of "N", size of 10 characters and displaying an initial value of 8.
Next, the code defines a button labeled with the value "Calc Levels". What action does this input take? When you click it (onclick), the JavaScript routine named "getLevels_Nbits() gets called.
Finally, the input text box named "Levels" actually serves as our output. Instead of the user typing in a value, the JavaScript code writes the calculated Levels value to it (stay tuned below.)
A key piece of the form is its name: "myForm". This creates a pathway essential for the JavaScript code to transfer values to and from the form. Another handy feature of HTML is the ability control the style (font, color, spacing, etc.) .
JavaScript
//////////////////////////////////////////////
// calc Levels vs N Nit Resolution
//////////////////////////////////////////////
function getLevels_NBits() {
// get values directly from form
var N=document.myForm.N.value
var Levels;
// calc
Levels=Math.pow(2,N);
// place in text box
document.myForm.Levels.value = Levels;
}
///////////////////////////////////////////////
Although only a couple of lines long, this code demonstrates some powerful features of JavaScript. The first lime simply defines the name of your function.
function getLevels_NBits()
Notice the parenthesis(). Its between these characters that you can pass values to your routine. However, JavaScript provides an alternate path to access your form's values!
var N=document.myForm.N.value
This single line accomplishes a few cool things. First, it defines a variable N to be used inside the routine only. Second, it accesses the value of N from the form named "myForm" and places it into your freshly declared variable N. Please note, the variable N doesn't have to be named the same as the form's text box name. However, using the same name sure helps your brain keep track of variables as your calculations and code become more complex.
Levels=Math.pow(2,N);
JavaScript carries a medium size math stick to swing at many engineering calculations. .To raise 2 to the power of N, simply call the Math library by passing 2 and N to the .pow function.
The last leg of the race lies in getting your calculated Levels back into the form. You can use the same gateway that brought the values into the routine.
document.myForm.Levels.value = Levels;
Only this time, we set the form's value to Levels. From here, the JavaScript / HTML team transfers the value back into the form and display it in the Levels text box.
Okay, you've just learned the basic DNA to build some handy EE calculators. As the series grows, you'll learn more tools and tips as the need arises.