JavaScript

<form id="detailsform">
    <label for="cust_name">Name</label>
    <input id="cust_name" type="text"/> 
    <label for="cust_id">Customer-ID</label>
    <input id="cust_id" type="text" />
    <label for="cust_phone">Phone Number</label>
    <input id="cust_phone" type="number" />
    <label for="cust_add">Address</label>
    <input id="cust_add" type="text" />
    <label for="cust_issue">Issue</label>
    <input id="cust_issue" type="text" />
    <label for="complaint_date">Date of Complaint</label>
    <input id="complaint_date" type="text" />
    <!--<label for="appt_date">Date of Appointment</label>
    <input id="appt_date" type="text" />-->
        <table align="center" width="100%">
            <tr>
                 <td align="left" width="35%"><a href="#historypage" style="text-                decoration:none">
                 <input type="button" value="Show History" data-icon="back" data-iconpos="right" id="History" onClick()="getHistory()"/>
                  </a></td>
                  <td align="right" width="35%"><a href="#assessmentpage" style="text-decoration:none">
                  <input type="button" value="Start Assessment" data-icon="check" data-iconpos="right" id="Assessment"/>
                   </a></td>
             </tr>
      </table>
</form>

<div data-role="page" id="historypage" data-theme="f">

   <div data-role="content">
      <form id="historyForm">
          <label for="hist_cname">Customer Name</label>
          input id="hist_cname" type="text" />
          <label for="hist_cid">CustomerID</label>
          <input id="hist_cid" type="text" />
       </form>

   <div id="emp_tb1" align="center" data-theme="b">Here are the details </div>
</div>

function getHistory() {

    var cust_id = document.getElementById("cust_id");
    var myTable = '';
    myTable += '<table id="myTable" cellspacing=0 cellpadding=2 border=1>';
    myTable += "<tr><td>S.No.</td><td>Date</td><td>Time</td><td>Complaint(s)</td></tr>";
    var url = "http://localhost:8080/POS/rest/WebServices/getHistory/"+cust_id.value;


   $.getJSON(url, function(json) {

       $.each(json, function(i, v) {

           myTable += "<tr><td>" + v.date + "</td><td>"+ v.time + "</td><td>" + v.issue
           + "</td><td>" ;
      });

 });

 $('#myiframe').load(function () { //load iframe
  $(this).contents().find("body").on('click', function (event) {
    var a = event.target.tagName;
    var divContent = $("#myiframe").contents().find(a);

    $(divContent).click(function (e) {
        var ClickedElementID = e.target.id;   // Get id of target element
        if (ClickedElementID == "") {         // Check if an element has an id
           e.target.attr('id', 'tempID');     // If target element has no id add one
           var  myText = $('#tempID').text(); // Get text using tempID
           $('#tempID').removeAttr('id');     // Remove temporary id
        }
        else {

          var myText = $(ClickedElementID.text()) // Get text
        }
     });
   }
}

Hello,

This is my first post to CodeProject. Please excuse if I commit some CodeProject "nono's," but point them out if you wish.

Anyways, I need help. I have only ever used <script> </script> in an html document to add functionality to a web page. But, I was recently given the task of implementing all of my JavaScript work from an outside .js file.

Here is what I know. I know I'll have to create and external .js file, and link it from my html. But what should it look like? I've never worked with raw JavaScript files before.

Here is my code:

<form name="myForm"> <!--calling the form a name allows the capturing and manipulating of user-entered values -->
	<fieldset id="inputs"> <!-- fieldset used to the effect of a container for CSS -->
    <ul> <!-- an unordered list is a great way to create text fields. Note that the default CSS inserts bullet points before the text field, a telltale sign of a list -->
	<li> 
    	<label for="principal"> Principal(p): </label>
        <input type="number" id="principal" name="principal" min="1" max="1,000,000"> <!-- "text" input type has the browser know that the user will...input text. An id and name are assigned along with type -->
    </li>
    
    <li>
    	<label for="intRate">  Yearly Interest Rate(r) (Enter as a decimal): </label>
        <input type="text" id="intRate" name="intRate" placeholder="0.00" min="0" max="1"> <!-- the user must type in a number in between the min and max values -->
    </li>
    
    <li>
    	<label for="length"> Loan Length(years): </label>
        <input type="number" id="length" name="length" min="1" max="100">
    </li>
    
    <li> 
    	<input id="clickme" type="button" value="Your Monthly Fate" onclick="loanPayment()"> <!-- creates a submit button, called "Flip the script!" Once clicked, the button will act-out the function storyTime() from the JavaScript in the head -->
     </li>
     </fieldset>
     
     <fieldset id="output">
     <li>
        <input type="text" id="result" name="result">
     
     </li>
     </fieldset> 
    
</ul>

A pretty standard form with some amateur comments. This all would normally go in the body of my html doc. Next, here's the function and variables within the <script> tags of the head:

<script>

	function loanPayment() //function to be actioned-out in the body on a button
	{
		
		var principal = document.getElementById("principal").value;
		var intRate = document.getElementById("intRate").value;        //calls the ids of the list items and gets their values
		var length = document.getElementById("length").value;
		
		var R = intRate/12; //Takes the interest rate and separates it for each month. The intRate must be expressed as a decimal. i.e. 6% = 0.06 
		var Y = length*12; //expresses the years of loan length in months -->
		
		var W = Math.pow((1+R),Y); //Takes the new variables R and Y and brings the value of 1+R to the power of Y -->
		//var z = Math.pow(x,y) is saying Z = x^y
		
		var F = (R * principal * W)/(W - 1); 
		F = F.toFixed(2); //rounds and expresses answer to two decimal places. 
		
		
		document.getElementById("result").value = "Monthly Fate = $" + F; //prints a generic string of text followed by the answer in a text field
	
	}

</script>

How would this form be implemented into an html web page through the use of an external .js file? I'm very new to html/css/JS and I want to get it right. Thank you all and please try to be as detailed as possible; what's common sense to you might not be to me.

var tabs = require('sdk/tabs');

tabs.on('ready', function (tab) {
     tab.attach({
        contentScript: "alert('azaza');",
        onMessage: function(message) {
            console.log("message");
        }});
}

function start()
{
   var theArray = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
   var total1 = 0, total2 = 0;


   var length = theArray.length;

   for ( var i = 0; i < length; ++i )
   {
      total1 += theArray[ i ];
   }


   var results = "<p>Total using indices: " + total1 + "</p>";

   for ( var element in theArray )
   {
       total2 += theArray[ element ];
   }

   results += "<p> Product using indices: " + total2 + "</p>";
   document.getElementById( "output" ).innerHTML = results;
}

window.addEventListener( "load", start, false );