Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #31478 > unrolled thread

How to write object-oriented JS function?

Back to article view | Back to comp.lang.javascript

Contents

  How to write object-oriented JS function? justaguy <lichunshen84@gmail.com> - 2016-09-30 09:55 -0700
    Re: How to write object-oriented JS function? John Harris <niam@jghnorth.org.uk.invalid> - 2016-10-01 15:16 +0100
      Re: How to write object-oriented JS function? justaguy <lichunshen84@gmail.com> - 2016-10-01 09:23 -0700
        Re: How to write object-oriented JS function? John Harris <niam@jghnorth.org.uk.invalid> - 2016-10-02 11:27 +0100
          Re: How to write object-oriented JS function? justaguy <lichunshen84@gmail.com> - 2016-10-02 04:22 -0700
          Re: How to write object-oriented JS function? justaguy <lichunshen84@gmail.com> - 2016-10-02 11:27 -0700
            Re: How to write object-oriented JS function? John Harris <niam@jghnorth.org.uk.invalid> - 2016-10-03 10:26 +0100
              Re: How to write object-oriented JS function? John Harris <niam@jghnorth.org.uk.invalid> - 2016-10-03 10:38 +0100
                Re: How to write object-oriented JS function? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-10-03 12:01 +0200
                  Re: How to write object-oriented JS function? John Harris <niam@jghnorth.org.uk.invalid> - 2016-10-03 19:07 +0100
                    Re: How to write object-oriented JS function? justaguy <lichunshen84@gmail.com> - 2016-10-03 14:33 -0700
                      Re: How to write object-oriented JS function? John Harris <niam@jghnorth.org.uk.invalid> - 2016-10-04 17:59 +0100
                        Re: How to write object-oriented JS function? justaguy <lichunshen84@gmail.com> - 2016-10-04 20:10 -0700
                          Re: How to write object-oriented JS function? justaguy <lichunshen84@gmail.com> - 2016-10-05 04:47 -0700
                    Re: How to write object-oriented JS function? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-10-03 23:46 +0200
                      Re: How to write object-oriented JS function? $Bill <news@todbe.com> - 2016-10-03 15:22 -0700
                        Re: How to write object-oriented JS function? $Bill <news@todbe.com> - 2016-10-03 15:28 -0700
                          Re: How to write object-oriented JS function? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-10-04 09:16 +0200
                            Re: How to write object-oriented JS function? $Bill <news@todbe.com> - 2016-10-04 00:46 -0700
                              Re: How to write object-oriented JS function? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-10-04 14:56 +0200
                                Re: How to write object-oriented JS function? John Harris <niam@jghnorth.org.uk.invalid> - 2016-10-04 16:49 +0100
                                  Re: How to write object-oriented JS function? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-10-04 19:55 +0200

Page 1 of 2  [1] 2  Next page →

#31478 — How to write object-oriented JS function?

Hi,

The following two JS functions works perfectly fine, however, they are not object-oriented.  Fyi, each function inserts TR or TRs and their children of TDs with or without attributes into certain position in a defined TABLE.
 
I wonder if folks who are truly JavaScript experts can turn them into better JS code (object-oriented and code re-use, use closure etc. when appropriate).  Many thanks.


<table width="90%" align="center" border=0 cellspacing=0 cellpadding=0>
		<tr>
		<td colspan=8><strong>DEEDS</strong> </td>
		</tr>
		
		<tr>
		<td></td>
		<td align="left"> Document Type</td>  
		<td align="left"> INS #/Page</td> 	
		<td align="left"> Cons./Loan Amt.</td> 	
		<td align="left"> Dated</td> 	
		<td align="left"> Recorded</td> 		
		<td align="left" colSpan=2></td> 
		</tr>
			
		<tr id="row1">
			<td id="prop1">1</td>
			<td valign="top"><input type="text" name="documentType1" id="documentType1" size="60"></td>
			<td valign="top"><input type="text" id="insNumPage1" name="insNumPage1" size="15"></td> 
			<td valign="top"><input type="text" id="consLoanAmt1" name="consLoanAmt1" size="15"></td> 
			<td valign="top" nowrap=true> <input type="text" id="dated1" name="dated1" size="15"></td>		
			<td valign="top" nowrap=true><input type="text" name="recorded1" id="recorded1" size="15"></td>
			<td valign="top" width="25%" colSpan=2><input type="button" name="blank1" id="blank1" value="+" size="5" onclick="addRow4Prop();">
			</td>
		</tr>
		<tr>
		<td></td>
		<td colspan=7>
		<input type="text" name="grantor1" id="grantor1" value="" size="70">
		</td>
		</tr>
		<tr id="propFlag">
		<td colspan=8></td>
		</tr>

		<tr height=25>
		<td colspan=8><br/><br/></td>
		</tr>
	</table>

	
		<table width="90%" align="center" border=0 cellspacing=0 cellpadding=0>
		<tr>
		<td colspan=8><strong>LIENS</strong></td>
		</tr>
		<tr>
		<td></td>
		<td align="left"> Name Searched</td>  <td align="left"> All Clear</td> 	<td align="left"> Type</td> 	<td align="left">Case/Instr. #</td>
		<td align="left"> Dated</td> 	<td align="left"></td> 		  <td align="left"></td> 	
		</tr>
		<tr id="row2">
			<td id="name1">1</td>
			<td valign="top"><input type="text" name="nameSearched1" id="nameSearched1" size="70"></td>
			<td valign="top"><input type="checkbox" id="allClear1" name="allClear1" size="15" value="1"></td> 
			<td valign="top"><input type="text" id="nType1" name="nType1" size="15"></td> 
			<td valign="top" nowrap=true> <input type="text" id="caseInstrNum1" name="caseInstrNum1" size="15"></td>		
			<td valign="top" nowrap=true><input type="text" name="nDated1" id="nDated1" size="15"></td>
			<td valign="top" width="25%" colSpan=2><input type="button" name="Nblank1" id="Nblank1" value="+" size="5" onclick="addRow4Name();">
			</td>	
		</tr>
		<tr id="nameFlag">
		<td colspan=8></td>
		</tr>

		<tr height=5>
		<td colspan=8></td>
		</tr>
		<tr>
			<td colspan=2>Name Search Checklist:</td> 
			<td>Bankruptcy <input type="checkbox" id="bankruptcy" name="bankruptcy" size="15" value="1"> </td> 
			<td>Child Support <input type="checkbox" id="childsupport" name="childsupport" size="15" value="1"></td> 
			<td>Judgments <input type="checkbox" id="judgements" name="judgements" size="15" value="1"></td> 
			<td colspan=4>Tax Liens <input type="checkbox" id="taxliens" name="taxliens" size="15" value="1"> &nbsp;&nbsp; 
			UCC's<input type="checkbox" id="UCCs" name="UCCs" size="15" value="1"></td> 
		</tr>

		<tr height=15>
		<td colspan=8><br/><br/></td>
		</tr>
															
	</table>

	
	
<script>
	// populate part related fields //
	// counter
	cnt = 1;
	cn = 1;
	
	function addRow4Prop() {
		// validation
		//	alert('add row 4 property Rel called ');		
	  
		// add row count after row process success
		// implement business rule of max of 20 line items
		if (cnt == 20) { return }
		
		cnt += 1;
				
		// debug
		// document.getElementById('debug').innerHTML = cnt;
				
		/* CREATE Next Row */
		// find current row
			// alert(cnt);
		 t = document.getElementById('partTBL');
		 tb = document.getElementById('TB');
		 
		currentRow = document.getElementById('row'+cnt);
		if (currentRow === 'undefined') {currentRow='row1';}
		// console.log(currentRow);
		
		 // row 1
		 // creating row and creating all cells
            // creates a table row
            var newrow = document.createElement("tr");
			newrow.id = 'row'+cnt;
			// newrow.setAttribute('id','row'+cnt);
			
           // create 6 td
                // Create a <td> element and a text node, make the text
                // node the contents of the <td>, and put the <td> at
                // the end of the table row
				// cell 0
                var cell = document.createElement("td");
				// cell.setAttribute('id','del'+cnt);	
				// cell.id = 'del'+cnt;	
				var cellText = document.createElement('span');
				// cellText.type = 'checkbox';
				cellText.id = 'd'+cnt;
				cellText.name = 'd'+cnt;
				// cellText.size = "1";
				cellText.innerHTML = cnt;
				// cellText.hidden = true;
                cell.appendChild(cellText);
                newrow.appendChild(cell);	
				// remove a row in case of duplicate row; 2/16/2013
				// syntax of object click: object.click = function; // no bracket after, see below	
				// cellText.onclick = remRow;
				// document.getElementById('quoteContent').deleteRow('+cnt+')";
												
				// cell 1
                var cell = document.createElement("td");				
				var cellText = document.createElement('input');
				cellText.type = 'text';
				cellText.id = 'documentType'+cnt;
				cellText.name = 'documentType'+cnt;
				cellText.size = "60";
                cell.appendChild(cellText);
                newrow.appendChild(cell);
		
				// cell 2
				var cell = document.createElement("td");
                var cellText = document.createElement('input');
				cellText.type = 'text';
				cellText.id = 'insNumPage'+cnt;
				cellText.name = 'insNumPage'+cnt;
				cellText.size = "15";
                cell.appendChild(cellText);
                newrow.appendChild(cell);
				
				// cell 3
				var cell = document.createElement("td");
                var cellText = document.createElement('input');
				cellText.type = 'text';
				cellText.id = 'consLoanAmt'+cnt;
				cellText.name = 'consLoanAmt'+cnt;
				cellText.size = "15";
                cell.appendChild(cellText);
                newrow.appendChild(cell);
				
				// cell 4
				var cell = document.createElement("td");
                var cellText = document.createElement('input');
				cellText.type = 'text';
				cellText.id = 'dated'+cnt;
				cellText.name = 'dated'+cnt;
				cellText.size = "15";
                cell.appendChild(cellText);
                newrow.appendChild(cell);	
				
				// cell 5
				var cell = document.createElement("td");
                var cellText = document.createElement('input');
				cellText.type = 'text';
				cellText.id = 'recorded'+cnt;
				cellText.name = 'recorded'+cnt;
				cellText.size = "15";
                cell.appendChild(cellText);
                newrow.appendChild(cell);
				
				// cell 6
				var cell = document.createElement("td");
                var cellText = document.createElement('input');
				cellText.type = 'button';
				cellText.id = 'blank'+cnt;
				cellText.name = 'blank'+cnt;
				cellText.value = '+';
				cellText.size = "20";
				// cellText.hidden = true;
                cell.appendChild(cellText);
                newrow.appendChild(cell);					
				cellText.onclick = addRow4Prop;
												
           // end of 6 td creation
            			
			// add the NEW row before TR id of "propFlag"
			var p = document.getElementById('propFlag');
			// find parent node of dis
			var parentEl = p.parentNode;
			parentEl.insertBefore(newrow,p);
			
		// create row 2
		// creating row and creating all cells
            // creates a table row
            var newrow = document.createElement("tr");
			newrow.id = 'rowX'+cnt;
			
				// cell 0
                var cell = document.createElement("td");				
                newrow.appendChild(cell);
												
				// cell 1
                var cell = document.createElement("td");	
					cell.colSpan = "6";
				var cellText = document.createElement('input');
				cellText.type = 'text';
				cellText.id = 'grantor'+cnt;
				cellText.name = 'grantor'+cnt;
				cellText.size = "60";
                cell.appendChild(cellText);
                newrow.appendChild(cell);
		
			// add the NEW row before TR id of "propFlag"
			var p = document.getElementById('propFlag');
			// find parent node of dis
			var parentEl = p.parentNode;
			parentEl.insertBefore(newrow,p);
			
						
		}

	function addRow4Name() {
		// validation
		//	alert('add row 4 property Rel called ');		
	  
		// add row count after row process success
		// implement business rule of max of 20 line items
		if (cn == 20) { return }
		
		cn += 1;
				
		// debug
		// document.getElementById('debug').innerHTML = cn;
				
		/* CREATE Next Row */
		// find current row
			// alert(cn);
		 t = document.getElementById('partTBL');
		 tb = document.getElementById('TB');
		 
		currentRow = document.getElementById('row'+cn);
		if (currentRow === 'undefined') {currentRow='row1';}
		// console.log(currentRow);
		
		
		 // creating row and creating all cells
            // creates a table row
            var newrow = document.createElement("tr");
			newrow.id = 'row'+cn;
			// newrow.setAttribute('id','row'+cn);

           // create 9 td
                // Create a <td> element and a text node, make the text
                // node the contents of the <td>, and put the <td> at
                // the end of the table row
				// cell 0
                var cell = document.createElement("td");
				// cell.setAttribute('id','del'+cn);	
				// cell.id = 'del'+cn;	
				var cellText = document.createElement('span');
				// cellText.type = 'checkbox';
				cellText.id = 'd2'+cn;
				cellText.name = 'd2'+cn;
				// cellText.size = "1";
				// cellText.hidden = true;
				cellText.innerHTML = cn;
                cell.appendChild(cellText);
                newrow.appendChild(cell);	
				// remove a row in case of duplicate row; 2/16/2013
				// syntax of object click: object.click = function; // no bracket after, see below	
				// cellText.onclick = remRow;
				// document.getElementById('quoteContent').deleteRow('+cn+')";
												
				// cell 1
                var cell = document.createElement("td");				
				var cellText = document.createElement('input');
				cellText.type = 'text';
				cellText.id = 'nameSearched'+cn;
				cellText.name = 'nameSearched'+cn;
				cellText.size = "60";
                cell.appendChild(cellText);
                newrow.appendChild(cell);
		
				// cell 2
				var cell = document.createElement("td");
                var cellText = document.createElement('input');
				cellText.type = 'checkbox';
				cellText.id = 'allClear'+cn;
				cellText.name = 'allClear'+cn;
				cellText.value = '1';
				cellText.size = "1";
                cell.appendChild(cellText);
                newrow.appendChild(cell);
				
				// cell 3
				var cell = document.createElement("td");
                var cellText = document.createElement('input');
				cellText.type = 'text';
				cellText.id = 'nType'+cn;
				cellText.name = 'nType'+cn;
				cellText.size = "15";
                cell.appendChild(cellText);
                newrow.appendChild(cell);
				
				// cell 4
				var cell = document.createElement("td");
                var cellText = document.createElement('input');
				cellText.type = 'text';
				cellText.id = 'caseInstrNum'+cn;
				cellText.name = 'caseInstrNum'+cn;
				cellText.size = "15";
                cell.appendChild(cellText);
                newrow.appendChild(cell);	
				
				// cell 5
				var cell = document.createElement("td");
                var cellText = document.createElement('input');
				cellText.type = 'text';
				cellText.id = 'nDated'+cn;
				cellText.name = 'nDated'+cn;
				cellText.size = "15";
                cell.appendChild(cellText);
                newrow.appendChild(cell);
				
				// cell 6
				var cell = document.createElement("td");
                var cellText = document.createElement('input');
				cellText.type = 'button';
				cellText.id = 'Nblank'+cn;
				cellText.name = 'Nblank'+cn;
				cellText.size = "20";
				cellText.value = '+';
                cell.appendChild(cellText);
                newrow.appendChild(cell);
				cellText.onclick = addRow4Name;
												
           // end of 6 td creation
            			
			// add the NEW row before TR id of "nameFlag"
			var p = document.getElementById('nameFlag');
			// find parent node of dis
			var parentEl = p.parentNode;
			parentEl.insertBefore(newrow,p);
						
		}

		
</script>
	

[toc] | [next] | [standalone]

#31483

On Fri, 30 Sep 2016 09:55:22 -0700 (PDT), justaguy
<lichunshen84@gmail.com> wrote:

>Hi,
>
>The following two JS functions works perfectly fine, however, they are not object-oriented.  Fyi, each function inserts TR or TRs and their children of TDs with or without attributes into certain position in a defined TABLE.
> 
>I wonder if folks who are truly JavaScript experts can turn them into better JS code (object-oriented and code re-use, use closure etc. when appropriate).  Many thanks.

Warning : Beware creating a single DoTheJob object with just one
method, DoIt. That wouldn't be OO, it would be a confusing and messy
repackaging of a function. 

Creating a single object to hold all the functions is ok, but it would
be a namespace implementation, not OO.


  <snip>
>	function addRow4Prop() {
  <snip>	
>				// cell 1
>                var cell = document.createElement("td");				
>				var cellText = document.createElement('input');
>				cellText.type = 'text';
>				cellText.id = 'documentType'+cnt;
>				cellText.name = 'documentType'+cnt;
>				cellText.size = "60";
>                cell.appendChild(cellText);
>                newrow.appendChild(cell);
>		
>				// cell 2
>				var cell = document.createElement("td");
>                var cellText = document.createElement('input');
>				cellText.type = 'text';
>				cellText.id = 'insNumPage'+cnt;
>				cellText.name = 'insNumPage'+cnt;
>				cellText.size = "15";
>                cell.appendChild(cellText);
>                newrow.appendChild(cell);

The  // cell n  code looks like a candidate for another function that
is called several times.


  <snip>
>	function addRow4Name() {
  <snip>	
>				// cell 1
>                var cell = document.createElement("td");				
>				var cellText = document.createElement('input');
>				cellText.type = 'text';
>				cellText.id = 'nameSearched'+cn;
>				cellText.name = 'nameSearched'+cn;
>				cellText.size = "60";
>                cell.appendChild(cellText);
>                newrow.appendChild(cell);
>		
>				// cell 2
>				var cell = document.createElement("td");
>                var cellText = document.createElement('input');
>				cellText.type = 'checkbox';
>				cellText.id = 'allClear'+cn;
>				cellText.name = 'allClear'+cn;
>				cellText.value = '1';
>				cellText.size = "1";
>                cell.appendChild(cellText);
>                newrow.appendChild(cell);
  <snip>

Ditto.

In general, it's not clear where the values you put in the table come
from. If they're constants why not do it in HTML. If they're data it's
the data that might be Object Oriented, though I suspect it's just a
2-D array sent by the web server. Inside the web server there's much
more scope for using objects, but that's somewhat OT here.

  John

[toc] | [prev] | [next] | [standalone]

#31484

On Saturday, October 1, 2016 at 10:17:03 AM UTC-4, John Harris wrote:
> On Fri, 30 Sep 2016 09:55:22 -0700 (PDT), justaguy
> <lZ@skskail.com> wrote:
> 
> >Hi,
> >
> >The following two JS functions works perfectly fine, however, they are not object-oriented.  Fyi, each function inserts TR or TRs and their children of TDs with or without attributes into certain position in a defined TABLE.
> > 
> >I wonder if folks who are truly JavaScript experts can turn them into better JS code (object-oriented and code re-use, use closure etc. when appropriate).  Many thanks.
> 
> Warning : Beware creating a single DoTheJob object with just one
> method, DoIt. That wouldn't be OO, it would be a confusing and messy
> repackaging of a function. 
> 
> Creating a single object to hold all the functions is ok, but it would
> be a namespace implementation, not OO.
> 
> 
>   <snip>
> >	function addRow4Prop() {
>   <snip>	
> >				// cell 1
> >                var cell = document.createElement("td");				
> >				var cellText = document.createElement('input');
> >				cellText.type = 'text';
> >				cellText.id = 'documentType'+cnt;
> >				cellText.name = 'documentType'+cnt;
> >				cellText.size = "60";
> >                cell.appendChild(cellText);
> >                newrow.appendChild(cell);
> >		
> >				// cell 2
> >				var cell = document.createElement("td");
> >                var cellText = document.createElement('input');
> >				cellText.type = 'text';
> >				cellText.id = 'insNumPage'+cnt;
> >				cellText.name = 'insNumPage'+cnt;
> >				cellText.size = "15";
> >                cell.appendChild(cellText);
> >                newrow.appendChild(cell);
> 
> The  // cell n  code looks like a candidate for another function that
> is called several times.
> 
> 
>   <snip>
> >	function addRow4Name() {
>   <snip>	
> >				// cell 1
> >                var cell = document.createElement("td");				
> >				var cellText = document.createElement('input');
> >				cellText.type = 'text';
> >				cellText.id = 'nameSearched'+cn;
> >				cellText.name = 'nameSearched'+cn;
> >				cellText.size = "60";
> >                cell.appendChild(cellText);
> >                newrow.appendChild(cell);
> >		
> >				// cell 2
> >				var cell = document.createElement("td");
> >                var cellText = document.createElement('input');
> >				cellText.type = 'checkbox';
> >				cellText.id = 'allClear'+cn;
> >				cellText.name = 'allClear'+cn;
> >				cellText.value = '1';
> >				cellText.size = "1";
> >                cell.appendChild(cellText);
> >                newrow.appendChild(cell);
>   <snip>
> 
> Ditto.
> 
> In general, it's not clear where the values you put in the table come
> from. If they're constants why not do it in HTML. If they're data it's
> the data that might be Object Oriented, though I suspect it's just a
> 2-D array sent by the web server. Inside the web server there's much
> more scope for using objects, but that's somewhat OT here.
> 
>   John

John,

I should have stated, these two functions add TABLE elements (TRs and TDs and FORM elements such as INPUT) dynamically to the page in question.  Thus, value for newly created INPUT field etc. are unknown (they would be user input).

And I like your idea of "Creating a single object to hold all the functions is ok, but it would be a namespace implementation, ", but questions, (a) since I have different TABLES such as TBL1 and TBL2 and new elements need to be added into them respectively, how do we create a single object to reference each of them? First, reference such TABLE as parent.TBL1 ?
(b) "namespace implementation" not OO would be fine as long as it's a better way to get things done.

Thanks.

[toc] | [prev] | [next] | [standalone]

#31491

On Sat, 1 Oct 2016 09:23:12 -0700 (PDT), justaguy
<lichunshen84@gmail.com> wrote:

>On Saturday, October 1, 2016 at 10:17:03 AM UTC-4, John Harris wrote:
>> On Fri, 30 Sep 2016 09:55:22 -0700 (PDT), justaguy
>> <lZ@skskail.com> wrote:
  <snip> 
>> Creating a single object to hold all the functions is ok, but it would
>> be a namespace implementation, not OO.
>> 
>> 
>>   <snip>
>> >	function addRow4Prop() {
  <snip> 
>> >	function addRow4Name() {


  <snip>
>I should have stated, these two functions add TABLE elements (TRs and TDs and FORM elements such as INPUT) dynamically to the page in question.  Thus, value for newly created INPUT field etc. are unknown (they would be user input).

You haven't said what prompts these additions to the tables. Is it
just once when the page is first displayed, or whenever the user does
a certain action?


>And I like your idea of "Creating a single object to hold all the functions is ok, but it would be a namespace implementation, ", but questions, (a) since I have different TABLES such as TBL1 and TBL2 and new elements need to be added into them respectively, how do we create a single object to reference each of them? First, reference such TABLE as parent.TBL1 ?
>(b) "namespace implementation" not OO would be fine as long as it's a better way to get things done.

A namespace implementation would have you writing something like
jag.addRow4Prop() instead of just addRow4Prop(), and jag.addRow4Name()
instead of just addRow4Name(). That way, if you add code to your
program that uses different functions also named addRow4Prop or
addRow4Name then they won't get confused. At worst you just have to
change the name jag. The need for this change would be a lot easier to
spot than for lots of different functions, and you can spot it before
getting very strange faults in your program.

jag, if that's what you call it, is a global object with the functions
as its properties. jag knows nothing. It's just a parking place for
functions that would otherwise be global.

As to whether it's a better way to get things done, it depends what
you think is useful. It's tidier, and makes it easier to build large
programs, especially if different people do different parts of it.

  John

[toc] | [prev] | [next] | [standalone]

#31492

Thank you, John. First, when the page is first loaded.  Your explanation for namespace implementation is perfect.

[toc] | [prev] | [next] | [standalone]

#31493

On Sunday, October 2, 2016 at 6:27:39 AM UTC-4, John Harris wrote:
> On Sat, 1 Oct 2016 09:23:12 -0700 (PDT), justaguy
> <liskkds@gmail> wrote:
> 
> >On Saturday, October 1, 2016 at 10:17:03 AM UTC-4, John Harris wrote:
> >> On Fri, 30 Sep 2016 09:55:22 -0700 (PDT), justaguy
> >> <lZ@skskail.com> wrote:
>   <snip> 
> >> Creating a single object to hold all the functions is ok, but it would
> >> be a namespace implementation, not OO.
> >> 
> >> 
> >>   <snip>
> >> >	function addRow4Prop() {
>   <snip> 
> >> >	function addRow4Name() {
> 
> 
>   <snip>
> >I should have stated, these two functions add TABLE elements (TRs and TDs and FORM elements such as INPUT) dynamically to the page in question.  Thus, value for newly created INPUT field etc. are unknown (they would be user input).
> 
> You haven't said what prompts these additions to the tables. Is it
> just once when the page is first displayed, or whenever the user does
> a certain action?
> 
> 
> >And I like your idea of "Creating a single object to hold all the functions is ok, but it would be a namespace implementation, ", but questions, (a) since I have different TABLES such as TBL1 and TBL2 and new elements need to be added into them respectively, how do we create a single object to reference each of them? First, reference such TABLE as parent.TBL1 ?
> >(b) "namespace implementation" not OO would be fine as long as it's a better way to get things done.
> 
> A namespace implementation would have you writing something like
> jag.addRow4Prop() instead of just addRow4Prop(), and jag.addRow4Name()
> instead of just addRow4Name(). That way, if you add code to your
> program that uses different functions also named addRow4Prop or
> addRow4Name then they won't get confused. At worst you just have to
> change the name jag. The need for this change would be a lot easier to
> spot than for lots of different functions, and you can spot it before
> getting very strange faults in your program.
> 
> jag, if that's what you call it, is a global object with the functions
> as its properties. jag knows nothing. It's just a parking place for
> functions that would otherwise be global.
> 
> As to whether it's a better way to get things done, it depends what
> you think is useful. It's tidier, and makes it easier to build large
> programs, especially if different people do different parts of it.
> 
>   John

One issue tho.  Previously without namespace, I set up global vars, for instance, 
cnt = 1;
function addMoreRows() {
  // set business rule, no more than 20 new entries (TRs)
  if (cnt == 20) { return } 
  cnt += 1;
  ...
}

But now, no matter where I define the global counter var of cnt (out of my namespace or inside, my business role of 
 if (cnt == 20) { return }  
is no longer valid (yes I also tried to replace cnt with this.cnt inside each function, still to no avail).  How do we deal with this?

Thanks.

[toc] | [prev] | [next] | [standalone]

#31496

On Sun, 2 Oct 2016 11:27:07 -0700 (PDT), justaguy
<lichunshen84@gmail.com> wrote:

  <snip>
>One issue tho.  Previously without namespace, I set up global vars, for instance, 
>cnt = 1;
>function addMoreRows() {
>  // set business rule, no more than 20 new entries (TRs)
>  if (cnt == 20) { return } 
>  cnt += 1;
>  ...
>}
>
>But now, no matter where I define the global counter var of cnt (out of my namespace or inside, my business role of 
> if (cnt == 20) { return }  
>is no longer valid (yes I also tried to replace cnt with this.cnt inside each function, still to no avail).  How do we deal with this?

It looks as though cnt isn't used anywhere outside the function, so
declare it as a local variable, so making it a variable that doesn't
exist outside the function :

  jag.addMoreRows() = function ()
    {
       var cnt = 1;
       ...
       if (cnt == 20) 
         return;
       ...
    }

And cn likewise in the other function.

Incidentally, if the current value of cnt needed to be read in more
than one function, then the namespace object would hold it :
  jag.cnt = 1;
  if (jag.cnt == 1)
  etc.
'this' values have nothing to do with it.

  John

[toc] | [prev] | [next] | [standalone]

#31497

On Mon, 03 Oct 2016 10:26:59 +0100, John Harris
<niam@jghnorth.org.uk.invalid> wrote:

>On Sun, 2 Oct 2016 11:27:07 -0700 (PDT), justaguy
><lichunshen84@gmail.com> wrote:
>
>  <snip>
>>One issue tho.  Previously without namespace, I set up global vars, for instance, 
>>cnt = 1;
>>function addMoreRows() {
>>  // set business rule, no more than 20 new entries (TRs)
>>  if (cnt == 20) { return } 
>>  cnt += 1;
>>  ...
>>}
>>
>>But now, no matter where I define the global counter var of cnt (out of my namespace or inside, my business role of 
>> if (cnt == 20) { return }  
>>is no longer valid (yes I also tried to replace cnt with this.cnt inside each function, still to no avail).  How do we deal with this?
>
>It looks as though cnt isn't used anywhere outside the function, so
>declare it as a local variable, so making it a variable that doesn't
>exist outside the function :
>
>  jag.addMoreRows() = function ()
>    {
>       var cnt = 1;
>       ...
>       if (cnt == 20) 
>         return;
>       ...
>    }
>
>And cn likewise in the other function.

I've just noticed a carefully undocumented feature of your code which
implies that cnt and cn must be available at the next call of the
functions, so the solution below applies.

>Incidentally, if the current value of cnt needed to be read in more
>than one function, then the namespace object would hold it :
>  jag.cnt = 1;
>  if (jag.cnt == 1)
>  etc.
>'this' values have nothing to do with it.
>
>  John

[toc] | [prev] | [next] | [standalone]

#31498

John Harris <niam@jghnorth.org.uk.invalid> wrote on 03 Oct 2016 in 
comp.lang.javascript:

>>  jag.cnt = 1;
>>  if (jag.cnt == 1)

Seems to me the if-condition is always true,
despite whatever orientation.

if (!jag.cnt) let jag.cnt = 1;
if (jag.cnt == 1)
...
jag.cnt++;

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#31499

On Mon, 03 Oct 2016 12:01:10 +0200, "Evertjan."
<exxjxw.hannivoort@inter.nl.net> wrote:

>John Harris <niam@jghnorth.org.uk.invalid> wrote on 03 Oct 2016 in 
>comp.lang.javascript:
>
>>>  jag.cnt = 1;
>>>  if (jag.cnt == 1)
>
>Seems to me the if-condition is always true,
>despite whatever orientation.
>
>if (!jag.cnt) let jag.cnt = 1;
>if (jag.cnt == 1)

The == 1 is a typing error. It should have been == 20.

>...
>jag.cnt++;

  John

[toc] | [prev] | [next] | [standalone]

#31500

On Monday, October 3, 2016 at 2:07:17 PM UTC-4, John Harris wrote:
> On Mon, 03 Oct 2016 12:01:10 +0200, "Evertjan."
> <exxjxw.hannivoort@inter.nl.net> wrote:
> 
> >John Harris <niam@jghnorth.org.uk.invalid> wrote on 03 Oct 2016 in 
> >comp.lang.javascript:
> >
> >>>  jag.cnt = 1;
> >>>  if (jag.cnt == 1)
> >
> >Seems to me the if-condition is always true,
> >despite whatever orientation.
> >
> >if (!jag.cnt) let jag.cnt = 1;
> >if (jag.cnt == 1)
> 
> The == 1 is a typing error. It should have been == 20.
> 
> >...
> >jag.cnt++;
> 
>   John

This namespace thing is a bit weird tho.

My current code looks like this:
var ws = {};

	ws.addRow4Prop = function() { 
        // code goes under
	...
	}
	
	
html caller: <input type='button' onclick="ws.addRow4Prop()">

err msg: addRow4Prop is not defined

What's wrong?  Thanks.

[toc] | [prev] | [next] | [standalone]

#31509

On Mon, 3 Oct 2016 14:33:42 -0700 (PDT), justaguy
<lichunshen84@gmail.com> wrote:

  <snip>
>This namespace thing is a bit weird tho.
>
>My current code looks like this:
>var ws = {};
>
>	ws.addRow4Prop = function() { 
>        // code goes under
>	...
>	}
>	
>	
>html caller: <input type='button' onclick="ws.addRow4Prop()">
>
>err msg: addRow4Prop is not defined
>
>What's wrong?  Thanks.

Did you remember to alter
  				
  cellText.onclick = addRow4Prop;
to				
  cellText.onclick = ws.addRow4Prop;

and similar in the other function?

  John

[toc] | [prev] | [next] | [standalone]

#31513

Other than phone i dont have computer access right now, once i have i'll update you, many thanks.

[toc] | [prev] | [next] | [standalone]

#31514

On Tuesday, October 4, 2016 at 11:10:12 PM UTC-4, justaguy wrote:
> Other than phone i dont have computer access right now, once i have i'll update you, many thanks.

@John Harris, you were exactly right, I missed the ws (global object) for the 
 cellText.onclick event action.  Many thanks.

[toc] | [prev] | [next] | [standalone]

#31501

John Harris <niam@jghnorth.org.uk.invalid> wrote on 03 Oct 2016 in 
comp.lang.javascript:

> On Mon, 03 Oct 2016 12:01:10 +0200, "Evertjan."
> <exxjxw.hannivoort@inter.nl.net> wrote:
> 
>>John Harris <niam@jghnorth.org.uk.invalid> wrote on 03 Oct 2016 in 
>>comp.lang.javascript:
>>
>>>>  jag.cnt = 1;
>>>>  if (jag.cnt == 1)
>>
>>Seems to me the if-condition is always true,
>>despite whatever orientation.
>>
>>if (!jag.cnt) let jag.cnt = 1;
>>if (jag.cnt == 1)
> 
> The == 1 is a typing error. It should have been == 20.

Same problem:

jag.cnt = 1;
if (jag.cnt == 20)

Seems to me NOW the if-condition is NEVER true.
 
>>...
>>jag.cnt++;
> 
>   John



-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#31502

On 10-03-16 14:46, Evertjan. wrote:
> John Harris <niam@jghnorth.org.uk.invalid> wrote on 03 Oct 2016 in
> comp.lang.javascript:
>
>> The == 1 is a typing error. It should have been == 20.
>
> Same problem:
>
> jag.cnt = 1;
> if (jag.cnt == 20)
>
> Seems to me NOW the if-condition is NEVER true.

Unless there's an increment of jag.cnt like below.

if (jag.cnt >= 20) {	// safer to always account for an anomalous condition
	// do something and reset jag.cnt

>>> ...
>>> jag.cnt++;

[toc] | [prev] | [next] | [standalone]

#31503

On 10-03-16 15:22, $Bill wrote:
> On 10-03-16 14:46, Evertjan. wrote:
>> John Harris <niam@jghnorth.org.uk.invalid> wrote on 03 Oct 2016 in
>> comp.lang.javascript:
>>
>>> The == 1 is a typing error. It should have been == 20.
>>
>> Same problem:
>>
>> jag.cnt = 1;
>> if (jag.cnt == 20)
>>
>> Seems to me NOW the if-condition is NEVER true.
>
> Unless there's an increment of jag.cnt like below.

PS: And the two stmts aren't literally following each other as shown.

>
> if (jag.cnt >= 20) {    // safer to always account for an anomalous condition
>     // do something and reset jag.cnt
>
>>>> ...
>>>> jag.cnt++;

[toc] | [prev] | [next] | [standalone]

#31505

$Bill <news@todbe.com> wrote on 04 Oct 2016 in comp.lang.javascript:

> On 10-03-16 15:22, $Bill wrote:
>> On 10-03-16 14:46, Evertjan. wrote:
[..]
>>> Same problem:
>>>
>>> jag.cnt = 1;
>>> if (jag.cnt == 20)
>>>
>>> Seems to me NOW the if-condition is NEVER true.
>>
>> Unless there's an increment of jag.cnt like below.
> 
> PS: And the two stmts aren't literally following each other as shown.

Ah yes: "Unless the code is different".

In another field, that is called "apologetics" ;-)

>> if (jag.cnt >= 20) {    // safer to always account for an anomalous
>> condition 
>>     // do something and reset jag.cnt
>>
>>>>> ...
>>>>> jag.cnt++;
> 



-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#31506

On 10-04-16 00:16, Evertjan. wrote:
> $Bill <news@todbe.com> wrote on 04 Oct 2016 in comp.lang.javascript:
>
>> On 10-03-16 15:22, $Bill wrote:
>>> On 10-03-16 14:46, Evertjan. wrote:
> [..]
>>>> Same problem:
>>>>
>>>> jag.cnt = 1;
>>>> if (jag.cnt == 20)
>>>>
>>>> Seems to me NOW the if-condition is NEVER true.
>>>
>>> Unless there's an increment of jag.cnt like below.
>>
>> PS: And the two stmts aren't literally following each other as shown.
>
> Ah yes: "Unless the code is different".
>
> In another field, that is called "apologetics" ;-)

No, it's called clarification of an assumption I made.  I don't believe
for a second that those two stmts literally follow each other in the
actual code, but you can never be sure can you.

[toc] | [prev] | [next] | [standalone]

#31507

$Bill <news@todbe.com> wrote on 04 Oct 2016 in comp.lang.javascript:

> On 10-04-16 00:16, Evertjan. wrote:
>> $Bill <news@todbe.com> wrote on 04 Oct 2016 in comp.lang.javascript:
>>
>>> On 10-03-16 15:22, $Bill wrote:
>>>> On 10-03-16 14:46, Evertjan. wrote:
>> [..]
>>>>> Same problem:
>>>>>
>>>>> jag.cnt = 1;
>>>>> if (jag.cnt == 20)
>>>>>
>>>>> Seems to me NOW the if-condition is NEVER true.
>>>>
>>>> Unless there's an increment of jag.cnt like below.
>>>
>>> PS: And the two stmts aren't literally following each other as shown.
>>
>> Ah yes: "Unless the code is different".
>>
>> In another field, that is called "apologetics" ;-)
> 
> No, it's called clarification of an assumption I made.  I don't believe
> for a second that those two stmts literally follow each other in the
> actual code, but you can never be sure can you.

Quite. 

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

Page 1 of 2  [1] 2  Next page →

Back to top | Article view | comp.lang.javascript

csiph-web