Form And Table In HTML

In general, entire form must be completely included into a single table cell (single TD element). For format purpose, one might put form head/declaration outside the table and input items spread over cells. Put entire form with in a table but spread over several rows (TR elements), it will fail.

In addition, if one uses DHTML, form outsider table may not work in some browser, such as IE.

Conclusion: Put entire form completely with in a single table cell will be the best practice.


http://www.cs.tut.fi/~jkorpela/forms/tables.html

Issues In Multidimensional Array in JavaScript

Multidimensional array in JavaScript is treated as object, so it would be a problem when it works with dynamic HTML and Ajax. Since the reference points to the multidimensional array needs to be closely working with string, it is hard to program when should such reference being instantiated, that is presenting the whole body of the array rather than the reference itself. This issue becomes very serious when parameter management gets involved. Indeed, both bind variable and parameter management are essential for dynamic HTML.

If a string used as reference to be passed between functions, another issue may be occurred: hard to convert it back to reference. In some cases eval() function can be used to achieve this goal, however, it won't be able to work with multidimensional array.

The solution is using JSON datatype to represent the multidimensional array. In addition, it is suggested to convert it into string before being composed into bind variable or get involved with parameter management.


http://koncordpartners.blogspot.com/2010/08/parameter-management.html

Equivalent of window.innerWidth/Height in IE

IE 8 continues to defy pupolar JavaScript functions in Firefox and Chrome, for window/document measurements.

The equivalent of window.innerWidth/Height in IE is document.documentElement.clientWidth/Height.

Following codes can be used:

; var horizonPosi = (window.innerWidth) ? window.innerWidth : document.documentElement.clientWidth
; var verticalPosi = (window.innerHeight) ? window.innerHeight : document.documentElement.clientHeight

There are other functions such as document.body.clientWidth/Height, document.body.offsetWidth/Height, but none of them are the equavalent. There is also a special case for document.body.clientHeight: it does not work while document.body.clientWidth works fine.

Passing JavaScript Array to PHP by Using POST

Passing JavaScript Array to Php is not very popular. However, in some circumstances it becomes necessary; for instance, passing value of a group of checkboxes, using array would be most suitable setting.

In general, passing array is same as passing a variable. In HTML part, it looks:

<input type="checkbox" name="jsArray[1]" value="firstValue">
<input type="checkbox" name="jsArray[2]" value="secondValue">
<input type="checkbox" name="jsArray[3]" value="thirdValue">

The problem happens when HTML codes are generated dynamically or the value of checkbox is assigned dynamically. Normal assignment method, namely document.formName.inputItemName.value = something does not work. There is a suggestion in http://www.it-base.ro/2007/07/27/send-a-javascript-array-to-php/.

Another simply solution is to use id to assign the value:

; document.getElementById('inputItemId').value = something

Easy.

Code Conventions: JavaScript

Organizing

There can be six major parts:

1. Passing Variable Register: This is to register any variable across the HTML files. Do not use crossing file variable directly in body of JavaScript, instead declare here. For instance:

; var localVar = parent.superVar

2. Passing Function Register: To register the functions calling other functions located in different HTML file. Do not call crossing file function directly in body of JavaScript, instead declare here. For instance:

; function closeProcess()
{
; parent.closing()
}

Put Passing Variable Register and Passing Function Register at top of JavaScript file to enable easier updating during coding phrase.

3. Local Global Variable Declaration.

4. Event Functions: Include all event functions here, such as onload, etc.

5. HTML Action Functions: If the function is called by HTML file, initialized by the user, it should be included here.

6. Internally Called Functions: Functions called by event functions or action functions.

End of Statement

JavaScript allows the developer to decide whether or not to end a line with a semicolon. If the semicolon is not provided, JavaScript considers the end of the line as the end of the statement. It is suggested to use semicolon instead of nature line break. Furthermore, you can indeed use semicolon in front of each statement, not only emphasis the line break, but also to increase visual impact on the indentation. All examples in this post are in this format.

Comments

It is suggested to use closed comments tag as much as possible: <!-- -->. By doing this, it would be relatively easier to keep coding parts clearer. In addition, if you are using PHP Wrapping JavaScript Debugging Method, as introduced here:
http://koncordpartners.blogspot.com/2010/04/how-to-enforce-download-of-javascript.html, it is essential to use the closed comments.

DHTML

Use + to concatenate every line of HTML codes, such as:

; var htmlBody = ''
+ ' <table> ...
+ ' <tr> ...

Whitespace within string serves no purpose for HTML. However, it can make visual alignment for coding purpose.

Function Declaration

Always use most orthdox variablized function declaration:

; funcation func()
{
...
}

Avoid to use variablized function declaration like var func = function() {...}, unless it is necessary. If you do use variablized function declaration, make sure it had been placed before the caller. For details please see http://koncordpartners.blogspot.com/2010/04/function-declaration-in-javascript.html.

Form With PHP Behind

Use '' instead of null. Accordingly, the PHP end should be:

if (0!=strlen(trim(@$_POST["theInputItem"]))) {...};

When use function to assign value to form, string parameter would need to be assigned with '' in consideration of it might be null or undefined:

; document.theForm.theInputItem.value = (parameter) ? parameter : ''

For details, please refer to http://koncordpartners.blogspot.com/2010/04/trouble-with-internet-explorer.html.


http://javascript.crockford.com/code.html

HTML Page Loading Sequence

HTML page loading sequence is to load head first, then body, then window.onload event. If one use document.write() to write DHTML and for which the value is to be assigned by window.onload event, it will be failed because HTML body would be loaded before window.onload event. That is why in DHTML, document. getElementById().innerHTML is preferred in comparison to document.write().

When HTML head being loaded, sequentially it loads external JavaScript files. If more than one JS files exist, be careful the sequence; because for functions have not loaded yet, but called by window.onload, an error will occur.

Use getElementById().innerHTML in DHTML

In comparison with document.write(), document. getElementById().innerHTML is very useful because it can be changed after load. However, it cannot be used to insert a row in the table. To do it, it is suggested to insert a complete inner table. Yes, frame your row by an inner table within the table.

Structure in Web Development (1)

This is study notes of web development involving the relationship and value passing between technologies.

HTML, Hyper Text Markup Language, as its name suggested is a markup language, which does formatting for the document; such as font, border format for cells in table, etc. There are two parts in HTML, head section and body section. Head contains all metadata, controls and the body is the document to be presented in web browser. When URL called by browser, whole HTML file is downloaded in the browser’ computer, which means it is a client side process.

To be easily and programmatically changed or updated, all formats can be centrally managed by a separate file, with extension of .css. This is the file of Cascading Style Sheets, or CSS. The inner link between two files is done through the following declaration to be included in the head of HTML:

‹link rel="stylesheet" type="text/css" href="cssFilename.css"›

In addition, in each division of HTML, “class=”classInCSS”” is needed to point the format class in CSS file. There is no value passing between two files.

Both HTML and CSS do not have programming functionality. To add the programming functionality, JavaScript can be added in HTML. Since programming functions are not of the presentation, it therefore locates in the head of HTML. However, when JavaScript consists too much contents, it can be separated as a file with extension of .js. The inner link between two files is done through the following declaration to be included in the head of HTML:

‹script type='text/javascript' language='Javascript' src='javascriptFileName.js' ›‹/script›

When JavaScript file is called by the HTML in browser’s computer, the whole file is downloaded too. So, JavaScript is also the client side process. Since contents of HTML may need to be changed frequently, separation of HTML and JavaScript may help to improve the refresh speed because programming functions may not change so frequently. This is another reason why JavaScript needs to be an independent file. However, this reason may not sustainable in DHTML scenario, to be mentioned late. At this stage, we deal with the HTML with static contents.

Functions in JavaScript need to be invoked. It can be done through window events, such as mouse move, mouse over, mouse out, mouse click or HTML page on load, etc; or through the calling from another funcation. Since HTML content is static, when value in HTML need to be passed to JavaScript, it is no need to be dealt specifically. Programmer can just use that value when write JavaScript file. In other words, there is no value passed from HTML to JavaScript, apart from invoking action. However, if value passing from JavaScript to HTML is needed, it can be done through “documnt.write()” and “.innerHTML =” methods. “documnt.write()” is located within the body of HTML. Since HTML body is for presentation purpose, to use “documnt.write()” one much first declare it is of JavaScript scripts:

‹script type="text/javascript"›
document.write(' javascriptVariable ');
‹/script›

The major difference between “documnt.write()” and “.innerHTML =” is “documnt.write()” does not need trigger to be active, simply because it is located in the body of HTML. When HTML page loaded, it is invoked. On contrast, “.innerHTML =” is located in JavaScript section/file, it needs to be called either by window events or other functions. Generally, “.innerHTML =” method is recommended. For instance:

document.getElementById('aDivision').innerHTML = javascriptVariable;

By this way, the value javascriptVariable generated from JavaScript functions is delivered to a HTML division called “aDivision”. Since HTML is only the markup language, there will be no variable involved in pure HTML. Variables need to be declared in JavaScript. Indeed, by this way, HTML can have variables. In addition, by this way, the delivered can be not only a value of single variable, but also more complicated contents:

var dynamicTable = ‘‹table›‹tr›‹td›’ + javascriptVariable + ‘‹/td›‹/tr›‹/table›’;
document.getElementById('aDivision').innerHTML = dynamicTable;

Please note, variable dynamicTable now contains some HTML codes, as string. The actual delivered now is no longer the single value but a complete table. This is very much same concept of Dynamic SQL if one is familiar with the database. This indeed is the basic concept of Dynamic HTML, or DHTML, for which the contents together with associated HTML codes are dynamically generated by the running of JavaScript functions.

Each HTML together with its associated CSS and JavaScript files are an independent program. If there are more than one HTML pages in a website, how they are structured? Since HTML and CSS files do not really involve the value passing, Multiple HTML pages can share a single CSS file. One HTML can have more than one JavaScript files by declare both of them in the head:

‹script type='text/javascript' language='Javascript' src='javascriptFile_1.js' ›‹/script›
‹script type='text/javascript' language='Javascript' src='javascriptFile_2.js' ›‹/script›

When a function is called, the browser will first search if “this” file have this function, if not, it would automatically goes to other JavaScript files declared in same HTML file.

It is not recommended to share JavaScript file between HTML pages. Because invoking any function is through window events, such as on page load etc. Sharing JavaScript file just confuses the computer and yourself, on which page load, for instance. Window events such as “onload” is very much HTML page specified and is not generic. However, for those generic functions with absolutely no window events involved, it can be aggregated into a JavaScript file to be shared by multiple HTML files.

Since each HTML page is an independent program, access to other’s functions or passing value between HTML pages is not recommended, for the sake of programming convention as well as security concern. In special cases like one HTML page (child) was opened by another HTML page (parent), it can be done with limitation. For instance:

In parent JavaScript file:

var windowChild = window.open(url); // “url” is the string variable.
windowChild.close();

In this example, parent JavaScript opens a new HTML window and close it immediately.

In child JavaScript file:

var valueFromParent = window.opener.valuePassToChild;

Child HTML can thus access the value of a variable in parent HTML. In case the child window is opened within the iFrame of parent, it is :

var valueFromParent = parent.valuePassToChild;

Please take special note, this syntax is also true for object reference passing through HTML pages. We know that the reference acts as pointer to point to original variable rather than make a copy, any using of the reference, valueFromParent here, is indeed referencing back to parent HTML ‘s object. It does generate the issue of speed. For details, see http://koncordpartners.blogspot.com/. So, please do apply this to the object other than simple variable, such as array.

Following is the method when parent window calls functions located in iFrame child:

document.getElementById('iFrameID').contentWindow
.functionInIFrame(parameter);

If one include this into another function, that function indeed can be called by same or other iFrame windows:

In parent JavaScript file:

function crossWindow(parameter)
{ document.getElementById('iFrameName').contentWindow
.functionInIFrame(parameter);
};

In iFrame file:

crossWindow(parameter);

Unfortunate, the string iFrameName should not be variable, otherwise dynamic function will be involved. Furthermore, dynamic reference passing does never work properly. It therefore dynamic reference and dynamic function should be avoid. In this example, one can use “if” statement to pick up right inner function:

function crossWindow(option, parameter)
{ if (1==option) document.getElementById('iFrameName_1').contentWindow
.functionInIFrame(parameter)
   else document.getElementById('iFrameName_2').contentWindow
.functionInIFrame(parameter);
};

When “parameter” is reference to variable located parent window, things become little complex. JavaScript indeed regards it is about the variable in iFrame window. One needs to declare parameter locally first:

var parameter = parent.paraInParent;

What about in iFrame child window, calling corssWindow() function is through dynamic insertion? Something like:

window.onload = function()
{ document.getElementById('dynamicContent').innerHTML = '‹a href="#" onclick="parent.crossWindow(‘ + parameter + ‘)"›Click here to run function in parent window‹/a›';
};

No, it would never work properly if parameter is the reference referring back to another variable in parent window.

(To be continued)