Posts
String.prototype.padLeft = function padLeft(length, leadingChar) {
if (leadingChar === undefined) leadingChar = "0";
return ( this.length < length )
? (leadingChar + this).padLeft(length, leadingChar)
: this;
};
Showing posts with label JavaScript. Show all posts
Showing posts with label JavaScript. Show all posts
Monday, November 16, 2015
Tuesday, December 31, 2013
Firebug Net panel - HTTP Traffic Monitoring
Needed to collect info around request URL, request header, response status, and response value of REST service calls, I utilized Net panel of Firebug which provided me a lot of details to verify the service calls processes in the web application.
The goal of using the Net panel was monitoring the HTTP traffic initiated by a web page which simply revealed all the collected and computed information in a graphical and intuitive interface.
.jpg)
.jpg)
introduction of Firebug by Rob Campbell
The goal of using the Net panel was monitoring the HTTP traffic initiated by a web page which simply revealed all the collected and computed information in a graphical and intuitive interface.
.jpg)
.jpg)
introduction of Firebug by Rob Campbell
Friday, December 6, 2013
jQuery - replace html element by .remove()
.remove()
Remove the set of matched elements from the DOM.
You could remove an element from DOM but it doesn't get eliminated from wrapper set and this feature allows you remove an element, operate on that element, and then place that element back into the DOM, all within a single jQuery chain.
Remove the set of matched elements from the DOM.
You could remove an element from DOM but it doesn't get eliminated from wrapper set and this feature allows you remove an element, operate on that element, and then place that element back into the DOM, all within a single jQuery chain.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title></title> </head> <body> <div id="ItemToBeRelaced">remove it!</div>
<script> (function ($) { $('#ItemToBeRelaced') .remove() .html('<a href="http://greyknots.com/">GreyKnots</a>') .appendTo('body'); })(jQuery); </script>
</body> </html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title></title> </head> <body> <div id="ItemToBeRelaced">remove it!</div>
<script> (function ($) { $('#ItemToBeRelaced') .remove() .html('<a href="http://greyknots.com/">GreyKnots</a>') .appendTo('body'); })(jQuery); </script>
</body> </html>
jQuery - difference between closest() and parents()
closest() stops traversing once it finds a match.
closest() can only return a maximum of one element.
closest() will actually include the currently selected element in its filtering.
parents() gets all parents and then filters on your optional selector.
Try the following example:
closest() can only return a maximum of one element.
closest() will actually include the currently selected element in its filtering.
parents() gets all parents and then filters on your optional selector.
Try the following example:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title></title> </head> <body> <!-- Nested Div(s) --> <div id="parent3"> <div id="parent2"> <div id="parent1"> <div id="parent0"> <div id="LastInChain"></div> </div> </div> </div> </div>
<script> (function ($) { alert($('#LastInChain').parents().length); alert($('#LastInChain').parent().attr('id')); alert($('#LastInChain').parents('#parent0').attr('id')); alert($('#LastInChain').parents()[0].id);
alert($('#LastInChain').closest('#parent1').length); alert($('#LastInChain').closest('#parent1').length); alert($('#LastInChain').closest('#parent1').attr('id')); })(jQuery); </script>
</body> </html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title></title> </head> <body> <!-- Nested Div(s) --> <div id="parent3"> <div id="parent2"> <div id="parent1"> <div id="parent0"> <div id="LastInChain"></div> </div> </div> </div> </div>
<script> (function ($) { alert($('#LastInChain').parents().length); alert($('#LastInChain').parent().attr('id')); alert($('#LastInChain').parents('#parent0').attr('id')); alert($('#LastInChain').parents()[0].id);
alert($('#LastInChain').closest('#parent1').length); alert($('#LastInChain').closest('#parent1').length); alert($('#LastInChain').closest('#parent1').attr('id')); })(jQuery); </script>
</body> </html>
Friday, September 13, 2013
JavaScript - Calling function "statements" before definition
function statements get interpreted and will be added to the execution stack before code execution then that's the reason but have attention that it doesn't happen to neither function expressions nor functions which define by Function constructor.
<!DOCTYPE html><html lang="en"><body><script>
// logs 11
console.log(aFunc(1, 2, 3));
function aFunc(x, y, z) {
return x*y + arguments[0]*arguments[1]*arguments[2]
};
// logs "Uncaught TypeError: ..." console.log(iFunc(1, 2, 3)); var iFunc = function (x, y, z) { return x*y + arguments[0]*arguments[1]*arguments[2] };
// logs "Uncaught TypeError: Property 'bFunc' of object [object Object] is not a function" console.log(bFunc(1, 2, 3)) var bFunc = function (x, y, z) { return x*y + arguments[0]*arguments[1]*arguments[2] }; </script></body></html>
// logs "Uncaught TypeError: ..." console.log(iFunc(1, 2, 3)); var iFunc = function (x, y, z) { return x*y + arguments[0]*arguments[1]*arguments[2] };
// logs "Uncaught TypeError: Property 'bFunc' of object [object Object] is not a function" console.log(bFunc(1, 2, 3)) var bFunc = function (x, y, z) { return x*y + arguments[0]*arguments[1]*arguments[2] }; </script></body></html>
Thursday, September 12, 2013
Non-primitive [false] Boolean object is actually [true]
A Boolean object with false parameter (not the primitive false value) which generated from the Boolean() constructor, the object value will be true to check you may use it in an "if" condition.
If a value is false, undefined, null, NaN, 0, -0, or an empty string(""), it is false! but any other value in JavaScript will be converted to true if used in a Boolean context.
If a value is false, undefined, null, NaN, 0, -0, or an empty string(""), it is false! but any other value in JavaScript will be converted to true if used in a Boolean context.
<!DOCTYPE html>
<html lang="en">
<body>
<script>
var myBoolean = new Boolean(false);
console.log( myBoolean );
console.log( myBoolean.toString() );
console.log( myBoolean.valueOf() );
if( myBoolean )
console.log( typeof myBoolean );
</script>
</body>
</html>
Wednesday, September 11, 2013
JavaScript - references to object properties
if the property of an object which you try to access is not available, JavaScript will try searching the prototype chain. At first steps it goes after the constructor function that created the object to check its prototype (e.g., Array.prototype) and if that's not available there it keeps searching up the chain at the constructor behind the initial constructor.
As all those prototype properties are objects, the final step would be Object.prototype because there is no other constructor prototype property upper than Object level to be examined.
Anyway if finally JavaScript can't find the property it would have produced an error stating that the property was undefined.
As all those prototype properties are objects, the final step would be Object.prototype because there is no other constructor prototype property upper than Object level to be examined.
Anyway if finally JavaScript can't find the property it would have produced an error stating that the property was undefined.
<!DOCTYPE html><html lang="en">
<body>
<script>
var myArray = ['element1', 'element2'];
console.log(myArray.hasOwnProperty('join'));
console.log(myArray.join());
console.log(myArray.hasOwnProperty('toLocaleString')); console.log('toLocaleString' in myArray); console.log(myArray.toLocaleString());
</script> </body> </html>
console.log(myArray.hasOwnProperty('toLocaleString')); console.log('toLocaleString' in myArray); console.log(myArray.toLocaleString());
</script> </body> </html>
Javascript console.log for web browsers
Javascript console.log for web browsers
by console.log you may view any output message, other debugging tools or plugins can be utilized too for this purpose which are generally better as they provide rich features for debugging (e.g Firebug, ...).
To open the console window the following keywords work depend on the web browser:
console window
<b>Internet Explorer<\b> F12 to open the developer tools, then
Ctrl+3 to open the console window
<b>Chrome<\b> Ctrl+Shift+J
<b>Firefox<\b> Ctrl+Shift+K
<b>Safari<\b> Ctrl+Alt+I
To open the console window the following keywords work depend on the web browser:
console window
<b>Internet Explorer<\b> F12 to open the developer tools, then
Ctrl+3 to open the console window
<b>Chrome<\b> Ctrl+Shift+J
<b>Firefox<\b> Ctrl+Shift+K
<b>Safari<\b> Ctrl+Alt+I
Sunday, May 1, 2011
Ext JS (JavaScript library)
Ext JS is a JavaScript library for building interactive web applications using techniques such as Ajax, DHTML and DOM scripting. Ext includes interoperability with jQuery and Prototype.
Ext JS provides an easy-to-use, rich user interface, much like you would find in a
desktop application. This lets Web developers concentrate on the functionality
of Web applications instead of the technical caveats.
"The Ext JS library started out as an extension to the moderately popular, yet very
powerful Yahoo User Interface library, providing what the YUI library lacked: an
easy-to-use API (Application Programming Interface), and real world widgets.
Even though the YUI Library tried to focus on the 'User Interface', it didn't contain
much that was useful right out-of-the-box."
Ext JS provides an easy-to-use, rich user interface, much like you would find in a
desktop application. This lets Web developers concentrate on the functionality
of Web applications instead of the technical caveats.
"The Ext JS library started out as an extension to the moderately popular, yet very
powerful Yahoo User Interface library, providing what the YUI library lacked: an
easy-to-use API (Application Programming Interface), and real world widgets.
Even though the YUI Library tried to focus on the 'User Interface', it didn't contain
much that was useful right out-of-the-box."
Sunday, September 19, 2010
Core JavaScript files in the Microsoft AJAX Library
The JavaScript files provide client side functionality for your web pages. Three JavaScript files are stored as resources in the System.Web.Extensions assembly.
At runtime, the HTTP handler ScriptResourceHandler loads the files, caches them for future use, compresses them, and sends them to the web browser when they’re requested:
* MicrosoftAjax.js, contains most of the Microsoft AJAX Library’s functionality, the browser compatibility layer, the core JavaScript classes, and the Base Class Library.
* MicrosoftAjaxTimer.js, contains classes to support the Timer server control. This control enables you to update either part of or an entire web page at regular intervals,
* MicrosoftAjaxWebForms.js, contains classes to support partial page rendering, this functionality allows portions of a page to be updated asynchronously.
At runtime, the HTTP handler ScriptResourceHandler loads the files, caches them for future use, compresses them, and sends them to the web browser when they’re requested:
* MicrosoftAjax.js, contains most of the Microsoft AJAX Library’s functionality, the browser compatibility layer, the core JavaScript classes, and the Base Class Library.
* MicrosoftAjaxTimer.js, contains classes to support the Timer server control. This control enables you to update either part of or an entire web page at regular intervals,
* MicrosoftAjaxWebForms.js, contains classes to support partial page rendering, this functionality allows portions of a page to be updated asynchronously.
Friday, January 30, 2009
Sunday, January 25, 2009
The Internet browser Embedded Objects
Users can view non-HTML contents by embeded objects. For example to watch a flash animation, listen to a RealAudio audio, watch a QuickTime movie or many other non-HTML documents or media entities, a browser need to take advantage of embedded objects. It's possible to check client browser to see if required embedded object is installed or not.
Internet Explorer uses Microsoft ActiveX components to load other applications and support embedded objects and FireFox uses the Netscape Plugin Application Programming Interface (NPAPI) system. FireFox does not officially support ActiveX. (Mozilla and ActiveX)
Which properties keep the name of available embedded objects in the Internet browser?
The document.embeds[] array contains a list of all the objects embedded in a document which are applied by the <OBECT> tag for IE and the <EMBED> tag in Mozilla.
The document.applets[] works for <APPLET> tag in the web page codes and contains all the applets embedded in a document as Java Applet although <OBJECT> and <EMBED> are recommended instead of using <APPLET>.
The navigator.plugins[] array contains all the plug-ins that Mozilla supports like Adobe Acrobat.
The navigator.mimeTypes[] array contains all the MIME types supported by Mozilla. MIME is Multipurpose Internet Mail Extension, It related to the file types that Mozilla can understand and display. MIME is a component for communication protocols (HTTP) and also it defines methods for transferring binary data in ASCII text format as a message and more.
The navigator.plugins[] and navigator.mimeTypes[] arrays in IE are null cuz IE uses ActiveX to implement embedded objects instead of plug-ins, then in IE document.embeds[] array detects embedded contents.
Internet Explorer uses Microsoft ActiveX components to load other applications and support embedded objects and FireFox uses the Netscape Plugin Application Programming Interface (NPAPI) system. FireFox does not officially support ActiveX. (Mozilla and ActiveX)
Which properties keep the name of available embedded objects in the Internet browser?
The document.embeds[] array contains a list of all the objects embedded in a document which are applied by the <OBECT> tag for IE and the <EMBED> tag in Mozilla.
The document.applets[] works for <APPLET> tag in the web page codes and contains all the applets embedded in a document as Java Applet although <OBJECT> and <EMBED> are recommended instead of using <APPLET>.
The navigator.plugins[] array contains all the plug-ins that Mozilla supports like Adobe Acrobat.
The navigator.mimeTypes[] array contains all the MIME types supported by Mozilla. MIME is Multipurpose Internet Mail Extension, It related to the file types that Mozilla can understand and display. MIME is a component for communication protocols (HTTP) and also it defines methods for transferring binary data in ASCII text format as a message and more.
The navigator.plugins[] and navigator.mimeTypes[] arrays in IE are null cuz IE uses ActiveX to implement embedded objects instead of plug-ins, then in IE document.embeds[] array detects embedded contents.
Saturday, January 24, 2009
How to find referrer page (JavaScript)
The referrer page is the page that user loaded before loading your web page. It's useful if you are interested to find visitors of you web page came from which URL to see your web pages.
Simply enough, the referrer property of the document object, identifies the referrer page URL.
If the value of document.referrer is blank ("") , then it shows user loaded up your page directly by typing its URL into the browser address field.
Just be notified that the value of document.referrer is blank if you test an HTML page locally in your machine.
if (document.referrer != "") {
document.writeln("Ref page: " + document.referrer);
}
else
{
document.writeln("Page loaded up from fresh.");
}
Simply enough, the referrer property of the document object, identifies the referrer page URL.
If the value of document.referrer is blank ("") , then it shows user loaded up your page directly by typing its URL into the browser address field.
Just be notified that the value of document.referrer is blank if you test an HTML page locally in your machine.
if (document.referrer != "") {
document.writeln("Ref page: " + document.referrer);
}
else
{
document.writeln("Page loaded up from fresh.");
}
Tuesday, January 6, 2009
BUG in Microsoft.JScript evaluator
I encountered with an interesting mis calculation (bug) on Microsoft.JScript expression evaluator.
It calculates the following expression:
"-180.188+38.1-19.05-(57.15)+142.088+19.05+57.15+76.2-19.05-(57.15)"
It returns "-7.105427357601E-15" instead of 0 (Zero)
To Evaluate an expression in a C# class, we need to add Microsoft.JScript and call Eval.JScriptEvaluate method:
using Microsoft.JScript;
...
public static string EvalJScript(string equation)
{
return Eval.JScriptEvaluate(equation, Vsa.VsaEngine.CreateEngine()).ToString();
}
It calculates the following expression:
"-180.188+38.1-19.05-(57.15)+142.088+19.05+57.15+76.2-19.05-(57.15)"
It returns "-7.105427357601E-15" instead of 0 (Zero)
To Evaluate an expression in a C# class, we need to add Microsoft.JScript and call Eval.JScriptEvaluate method:
using Microsoft.JScript;
...
public static string EvalJScript(string equation)
{
return Eval.JScriptEvaluate(equation, Vsa.VsaEngine.CreateEngine()).ToString();
}
Subscribe to:
Posts (Atom)
