Javascript Tips and Tricks

Javascript Tips and Tricks

Introduction

In this article, we learn about import consideration while we are working with javascript.This information will help you to prevent most common mistake while development. JS tips and Tricks at one place.

Description

Quick tips
  1. Use === while comparing two variable instead of ==
  2. Remember undefined is not null
  3. Remember javascript falsy value:   0, '', NaN, null, undefined
  4. Remember javascript truthy value:   '0', 'any string', [] (Empty array), {} (Empty object), 0 (any non-zero number)
  5.  Always declare all variables at the beginning of every scope
  6.  "use strict"; In javascript to avoid unwanted bug due to a variable.
  7. Avoid global variable declaration
  8. Reduce globals e.g var name='abc', isValid=false; Should be writen as var common={name:'abc', isValid:false};
  9. Always declare local variables
  10. Never declare Number, String or Boolean Objects ( e.g. Never use: new Number(1), new String("abc"), new Boolean() )
  11. Use {} instead of new Object()
  12. Use "" instead of new String()
  13. Use 0 instead of new Number()
  14. Use false instead of new Boolean()
  15. Use [] instead of new Array()
  16. Use /()/ instead of new RegExp()
  17. Use function (){} instead of new Function()
  18. Avoid Using eval()
  19. Don't use short hand  e.g Always use curly bracket with conditional operation
  20. Place scripts at the Bottom of page
  21. Declare Variables Outside of the from loops and conditionals (such as if, for, while, switch and try)
  22. Properly comment your code
  23. Never pass a string to SetInterval and SetTimeOut. Instead, pass a function name.
  24. Always, Always Use Semicolons
In this article we have get idea of lots of JavaScript tips and tricks and best practice consideration while development.

Add Event To Dynamically Added Control

Introduction

Sometimes in real world project we require that we can add html control dynamically to after page successfully rendered on browser. We also require to perform certain task such as register event based on requirement.

In this article we learn about how we can register event on html control which was added dynamically using jquery.

Two implement this type of demo first of all we require jQuery library you can download from Here.

Html Snippet:
<div class="container">
<div class="body-container">
<input id="btnNew" type="button" value="Add New Button" />
<ul class="parent-ul"></ul>
</div>
</div>
JavaScript Snippet:
        $(function () {
            console.log("DOM is READy");
            // button handler which is responsible for 
            //adding new html control
           $('#btnNew').click(function () {
            var cnt = $('.parent-ul .item').length;
            $('.parent-ul').append($("<li/>").addClass('item').text("Item"+(cnt+1)));
       });
            //Below method register click event on dynamically
          // added control
            $('.parent-ul').on('click', '.item', function () {
                console.log($(this));
            });
             //Below commented code also worked
             //$(document).on('click', '.item', function () {
             //  console.log($(this));
             //});
     });

You can test above code on jsfiddle link
As per above code we are adding new list item dynamically as child element of unorder list '.parent-ul'.

To achieve this we have register click event on all child element of specific parent element(here parent-ul class) as per the above code.

In some scenario we didn't know exact parent element or have multiple parent with same type of child control, in that type of condition below code work perfectly as document (DOM) is parent of all element rendered on browser so we can attach any event or perform some specific tasks for control which are added dynamically in page.
             
             //Below commented code also worked
             $(document).on('click', '.item', function () {
               console.log($(this));
             });

Conclusion

In this article we have learn about how we can access or register event on dynamically added control on page using jquery.

Dynamic Query in LINQ using Predicate Builder

Introduction This tutorial explains how to create a dynamic query using LINQ, Using Predicate Builder  LINQ to SQL dynamic query an...

Learn More