Advanced Javascript Tips

Interesting article about lot of unknowns in JavaScript.

Wonder the power of JS!

Limitations of Javascript in large scale applications

Set of problems are very commonly encounterd while developing a large scale JS applications.

We really need to rely on custom framework until these are incorporated into standard specifications.

A Developer Gripes with Javascript

Cross browser compatibility - Thoughts

Recently I accomplished a challenging opportunity to make IE6 legacy web application compatible for all modern browsers - Firefox, IE, Safari and Chrome.

Albeit, there were comprehensive rework on CSS, JavaScript, HTML, I wondered about quite a few facts.

• DOM Reserved key words: The variable  location is owned by window in all browsers except IE. You can use that as a local variable :( . Same as the case of few DOM functions such as add, remove etc. Better you should have proper namespaces for all the Java Script functions you write anywhere. That way all we don't accidentally override any of WINDOW variables or DOM functions. 
• FireFox >3.x does not allow controlling resize behavior of child windows. Noway to disable the resize of child window. 
• String prototype method String.trim is not yet available in IE. Use of regular expression s.replace(/^\s+|\s+$/g,"") to trim the string is recommended. 
• To provide hand over behavior with style, cursor:hand is IE specific. Use cursor:pointer
• The select box value can be set to empty only by setSelectedIndex = -1; directly settings the values as element.value="" does not work on FireFox 
• Setting the value for check box through DOM API does not trigger the onclick event registered with the checkbox; the event should be manually triggered 
• Accessing the parentElement is IE specific. Use parentNode instead. 
• To set a class to a element through DOM API, use element.className = "className" instead of element.setAttribute("class", "className");
• While using IFRAMEs in a page, you can not use cascading style with respect to the parent level. You need to create a new Style hierarchy with the IFRAME onload event. 
• To reset the window height and widths, following functions can be used to get the height and width of window. This is optimized across all browsers. 


getDocumentHeight = function(){
var D = document;
return Math.max(D.body.scrollHeight,D.documentElement.scrollHeight,
D.body.offsetHeight,D.documentElement.offsetHeight,
D.body.clientHeight,D.documentElement.clientHeight);
}

Similarly you can get the width by replacing all Height with Width in above function.

        

Loading And Blocking JavaScript

LAB JS

How to execute JavaScript in Java

Java 6 provides full fledged scripting support. There is a in-built Mozilla Rhino Javascript engine available in JDK6 and JRE6.

Scripting is recommended in many large scale applications for Sophisticated configurations and ease of maintenance.

Using scripting from the Java platform is easy because the API is relatively small. You can quickly add scripting support to your application using only a handful of interfaces and classes in the javax.script package.

Following code quickly enables your Java environment to run a Java script.


ScriptEngineManager mgr = new ScriptEngineManager();
ScriptEngine jsEngine = mgr.getEngineByName("JavaScript");
try {
jsEngine.eval("print('Hello, world!')");
} catch (ScriptException ex) {
ex.printStackTrace();
}


More Details

JavaScript - Higher-Order Functions - First Class Functions

The main difference between a mathematical function[or pure functional language function] and the notion of a "function" used in imperative programming[widely spread industrily used programming languages] is that imperative functions [or methods] can have side effects, changing the value of already calculated computations, i.e. the same language expression can result in different values at different times depending on the state of the executing program.

Conversely, in functional code, the output value of a function depends only on the arguments that are input to the function, so calling a function f twice with the same value for an argument x will produce the same result f(x) both times.

Functions are higher-order when they can take other functions as arguments, and return them as results. (Operators in mathematics, such as the differential operator d / dx that produces the derivative in calculus when applied to a function f, are examples of this.)

Higher-order functions enable currying, a technique in which a function is applied to its arguments one at a time, with each application returning a new function that accepts the next argument.

Higher order functions in Java script.

sayHello = function(f1){

alert(f1('Power Of JS')('Easy Higher Order Functions!'));

};

sayHello(function(prefix){

getPrefix = function(){

return prefix;

};

return function(a){

return getPrefix()+' - ' +a;

}; } );

Comet - Reverse Ajax - Server Push

We see many attempts to bring Rich User experience - more of a- app like features to the modern browser users.

Numerous frameworks developed based on Java scripts handling browser DOM model to achieve Rich UI. These frameworks are currently leveraging the Asynchronous Requests to the server- AJAX. These requests are made from browser to server, however little research or development explored on the other way around - server pushing data to active browser sessions which would result in more of applet like applications on browser still proving better performance.

Comet - a new word - used to describe a web application model in which a long-held HTTP request allows a web server to push data to a browser, without the browser explicitly requesting it

There are many methods currently employed for this technique.

Example applications:

Google chat , Meboo