There are two major scripting languages to use with HTML, JavaScript and VBScript. JavaScript is by far the most important but it is convenient to introduce scripting through the simpler language, VBScript.
We will start with a simple model which calculates the equilibrium GDP and consumption from input data on such things as government purchases, net exports and the marginal propensity to consume. To see how the model works open Internet Explorer (the code does not work in Netscape) and click on this link: Macroeconomic Model.
Enter the following data into the blank spaces provided by the model:
The code for the model is:
<HTML> <HEAD><TITLE>Simplest Macroeconomic Model</TITLE> <SCRIPT LANGUAGE="VBScript"> <!-- SUB GetEquil_OnClick() Dim A1 Dim B1 Dim C Dim I Dim G Dim NX Dim K Dim Aut Dim Y Dim Con A1 = Cdbl(InputValue1.Value) B1 = Cdbl(InputValue2.Value) I = Cdbl(InputValue3.Value) G = Cdbl(InputValue4.Value) NX = Cdbl(InputValue5.Value) Aut = I + G + NX K = 1.0/(1.0-B1) Y = K*(A1 + Aut) Con = A1 + B1*Y OutputValue1.Value = Y OutputValue2.Value = Con END SUB --> </SCRIPT> </HEAD> <BODY> <CENTER><TABLE BORDER=10 BGCOLOR=#AA1111 BORDERCOLOR=#500000> <TH COLSPAN=2><FONT SIZE=5><B><I>THW</I>'s Simplest<BR> Macro Model Computer</B> </FONT></TH> <TR><TD ALIGN=CENTER BGCOLOR="pink"><B>Autonomous Consumption</B></TD> <TD><INPUT NAME=InputValue1 SIZE=10></TD></TR> <TR><TD ALIGN=CENTER BGCOLOR="pink"><B>Marginal Propensity to Consume</B></TD> <TD><INPUT NAME=InputValue2 SIZE=10></TD></TR> <TR><TD ALIGN=CENTER BGCOLOR="pink"><B>Private Investment</B></TD> <TD><INPUT NAME=InputValue3 SIZE=10></TD></TR> <TR><TD ALIGN=CENTER BGCOLOR="pink"><B>Government Purchases</B></TD> <TD><INPUT NAME=InputValue4 SIZE=10></TD></TR> <TR><TD ALIGN=CENTER BGCOLOR="pink"><B>Net Exports</B></TD> <TD><INPUT NAME=InputValue5 SIZE=10></TD></TR> <TR><TD><INPUT TYPE=BUTTON VALUE="Compute Macroeconomic Equilibrium" NAME="GetEquil"> </TD><TD ALIGN=CENTER BGCOLOR="pink"><B>=</B></TD></TR> <TR><TD ALIGN=CENTER BGCOLOR="pink"><B>GDP</B></TD> <TD ALIGN=CENTER BGCOLOR="pink"><INPUT NAME=OutputValue1 SIZE=10></TD></TR> <TR><TD ALIGN=CENTER BGCOLOR="pink"><B>Private Consumption</B></TD> <TD ALIGN=CENTER BGCOLOR="pink"><INPUT NAME=OutputValue2 SIZE=10></TD></TR> </BODY> </HTML>
The input and computation subroutine code starts with
SUB GetEquil_OnClick()
and ends with
END SUB
The first section of code in the subroutine defines the variables by
means of DIM (for dimension) statements.
The second section of code, which starts with
A1 = Cdbl(InputValue1.Value)
takes input from the blank spaces in the form of a string of characters
and converts it into a decimal (double precision) number. Until this
conversion has taken place the computer cannot work with the input.
The next section uses the input to carry out the computation for the model. For example, the Keynesian multiplier K is computed from the marginal propensity to consume, B1, by the formula K=1/(1-B1).
The final section of code in the subroutine creates output data from the values of Y and Con which were computed.
The input and output values are handled by the code in the BODY part
of the code. The code creates a table. Some of the cells of the table are
are just labels. Others are input or outvalues. For example, the cell
created by:
<TD><INPUT NAME=InputValue1 SIZE=10></TD>
creates a blank of 10 spaces which is referred to in the subroutine
as InputValue1. The number entered into that space is referenced as
InputValue1.Value.
The cell created by the code
<TR><TD><INPUT TYPE=BUTTON VALUE="Compute Macroeconomic
Equilibrium" NAME="GetEquil">
creates a button which when clicked upon runs the subroutine GetEquil as
defined in the HEAD section. The output values are then put into the table
cells defined by the code
<TD ALIGN=CENTER BGCOLOR="pink"><INPUT NAME=OutputValue1
SIZE=10></TD>
and
<TD ALIGN=CENTER BGCOLOR="pink"><B>Private
Consumption</B></TD>
If new values are typed into the input spaces and the "Compute Macroeconomic Equilibrium" button clicked new output values will appear.
As in the previous section the code for JavaScript comes in the HEAD section of the HTML document. It also consists of three sections of code, but the details of the code are different.
The <-- and --*gt; tags are to hide the code from browsers which do not recognize the <SCRIPT> tag and would be confused by it.
The code starts with a statement that tells the computer that it is dealing with a function called get_Equil().
Instead of declaring a variable C with a "Dim C" statements, as in VBScript, JavaScript uses the statement "var C;". The semicolons at the end of the JavaScript statement is required.
The complete code is:
<SCRIPT LANGUAGE="JavaScript"> <!-- function get_Equil() { var A1; var B1; var I; var G; var NX; var K; var Aut; var Y; var Con; A1 = document.forms[0].A1.value; A1 = parseFloat(A1); B1 = document.forms[0].B1.value; B1 = parseFloat(B1); I = document.forms[0].I.value; I = parseFloat(I); G = document.forms[0].G.value; G = parseFloat(G); NX = document.forms[0].NX.value; NX = parseFloat(NX); Aut = I + G + NX; K = 1.0/(1.0-B1); Y = K*(A1 + Aut); Con = A1+B1*Y; alert("Equilibrium GDP = "+Y); alert("Consumption = "+Con); return true; } --> </SCRIPT>
Consider the statements
It is only after the input information is converted to numbers that arithmetic operations such as addition and multiplication can be carried out.
The results of the computation are displayed to the user by means of "alert" messages. The format of the alert message function is that a message given between quotation marks. The statement alert("Equilibirium GDP = "+Y); means that the value of Y is appended to the message"Equilibrium GDP = " in an alert box. If the value of Y cannot be computed the alert message will read "Equilibrium GDP = NaN", where NaN stands for "Not a Number."