addressalign-toparrow-leftarrow-rightbackbellblockcalendarcameraccwcheckchevron-downchevron-leftchevron-rightchevron-small-downchevron-small-leftchevron-small-rightchevron-small-upchevron-upcircle-with-checkcircle-with-crosscircle-with-pluscontroller-playcrossdots-three-verticaleditemptyheartexporteye-with-lineeyefacebookfolderfullheartglobe--smallglobegmailgooglegroupshelp-with-circleimageimagesinstagramFill 1launch-new-window--smalllight-bulblinklocation-pinm-swarmSearchmailmessagesminusmoremuplabelShape 3 + Rectangle 1ShapeoutlookpersonJoin Group on CardStartprice-ribbonprintShapeShapeShapeShapeImported LayersImported LayersImported Layersshieldstartickettrashtriangle-downtriangle-uptwitteruserwarningyahoo

NYC Codecademy Group Message Board › JavaScript/HTML Demo

JavaScript/HTML Demo

Ron
user 2536529
Toronto, ON
Post #: 3
Hi Group,

At our meetup last week I presented a demo of how one could integrate a function from our Codecademy lesson into a web page. Please find below an HTML snippet as well as the 'notes' version with my explanation of the HTML tag. If you copy and paste the first version into a notepad file and save with an .html extension, you can load the page with any browser.

enjoy!

--------------------------------------­----------------------------------------­-----------------------------

<HTML>
<HEAD>
<TITLE>Startup Calculator</TITLE>


<SCRIPT LANGUAGE="JavaScript">
function testResults (form) {

var salary = form.salary.value;
var numWorkers = form.numWorkers.value;
var fixedCosts = form.fixedCosts.value;
var variableCosts = salary*numWorkers;
var totalCost= fixedCosts*1+variableCosts*1;
alert('Total Cost is $' + totalCost);

}

</SCRIPT>
</HEAD>
<BODY>

<h3>Please enter the data below</h3>
<FORM NAME="myform">

Enter Salary: <BR>
<INPUT TYPE="text" NAME="salary" VALUE=><P>
Enter Number of Workers: <BR>
<INPUT TYPE="text" NAME="numWorkers" VALUE=><P>
Enter Fixed Costs: <BR>
<INPUT TYPE="text" NAME="fixedCosts" VALUE=><P>

<INPUT TYPE="submit" Value="Calculate Total Costs" onClick="testResults(this.form)"­>
</FORM>
</BODY>
</HTML>

--------------------------------------­----------------------------------------­---------------------------------

<HTML> (HTML tag tells browser this is an HTML document)
<HEAD> (HEAD tag is a container for all header elements, including title, scripts, etc)
<TITLE>Startup Calculator</TITLE> (TITLE tag defines the title of the document)


<SCRIPT LANGUAGE="JavaScript"> (SCRIPT tag is used to define a client-side script, such as JavaScript. LANGUAGE is an attribute of the SCRIPT tag)
var totalCost = function (form) { (declaration of function “totalCost” where arguments are called from the form)

var salary = form.salary.value; (this declaration tells function to define variable according to value input from form)
var numWorkers = form.numWorkers.value;
var fixedCosts = form.fixedCosts.value;
var variableCosts = salary*numWorkers;
var totalCost= fixedCosts*1+variableCosts*1;
alert('Total Cost is $' + totalCost);

}

</SCRIPT>
</HEAD>
<BODY>

<h3>Please enter the data below</h3> (H# tags, h1-h6, define a sub-heading in decreasing order of font size)
<FORM NAME="myform"> (FORM tag is used to create an HTML for user input. NAME is an attribute of the FORM tag)

Enter Salary: <BR> (“Enter Salary” is text followd by <BR> which means line break)
<INPUT TYPE="text" NAME="salary" VALUE=” “><P> (INPUT tag used within a FORM element to declare user input controls. TYPE attribute with “text” value tells browser that this is a text box. <P> is a paragraph tag.)
Enter Number of Workers: <BR>
<INPUT TYPE="text" NAME="numWorkers" VALUE=” “><P>
Enter Fixed Costs: <BR>
<INPUT TYPE="text" NAME="fixedCosts" VALUE=” “><P>

<INPUT TYPE="submit" Value="Calculate Total Costs" onClick="totalCost(this.form)"­> (“submit” type indicates a submit button user input. “onClick” is called an event handler; it says that when the user clicks it will run the ‘testResults’ function using the arguments passed from this form)
</FORM>
</BODY>
</HTML>
Powered by mvnForum

People in this
Meetup are also in:

Sign up

Meetup members, Log in

By clicking "Sign up" or "Sign up using Facebook", you confirm that you accept our Terms of Service & Privacy Policy