21 Javascript tips to collect

  • 2020-03-30 01:35:10
  • OfStack

1   Javascript array converted to CSV format

Consider the following application scenario, where you have a character (or numeric) array of Javscript that needs to be converted to a comma-separated CSV file. Then we can use the following tips, the code is as follows:


var fruits = ['apple', 'peaches', 'oranges', 'mangoes'];
var str = fruits.valueOf();

Output: apple, peaches, oranges and mangoes

Where the valueOf() method converts the Javascript array into a comma-separated string. Note that if you don't want to use a comma split, such as a | split, use the join method, as follows:


var fruits = ['apple', 'peaches', 'oranges', 'mangoes'];
var str = fruits.join("|");

Output: apple | peaches | oranges | mangoes

2. Convert the CSV format back to the Javscript array

So how do you convert a string in CSV format back into a Javascript array? You can use the split() method to separate with any specified character. The code is as follows:


var str = "apple, peaches, oranges, mangoes";
var fruitsArray = str.split(",");

Output fruitsArray [0] : apple

Removes an element from an array by index

If you need to remove an element from a Javascript array, you can use the splice method, which removes the NTH element from the array based on the parameter n passed in.


function removeByIndex(arr, index) {
    arr.splice(index, 1);
}
test = new Array();
test[0] = 'Apple';
test[1] = 'Ball';
test[2] = 'Cat';
test[3] = 'Dog';
alert("Array before removing elements: "+test);
removeByIndex(test, 2);
alert("Array after removing elements: "+test);

The last output is Apple,Ball and Dog

Remove the value from the array element based on the value of the element

The following trick is very practical. It is to delete the elements in the array according to the given value. The code is as follows:


function removeByValue(arr, val) {
    for(var i=0; i<arr.length; i++) {
        if(arr[i] == val) {
            arr.splice(i, 1);
            break;
        }
    }
}
var somearray = ["mon", "tue", "wed", "thur"]
removeByValue(somearray, "tue");
//Somearray will have elements like "mon", "wed", "thur"

Of course, a better way is to implement it using prototype's methods, as follows:


Array.prototype.removeByValue = function(val) {
    for(var i=0; i<this.length; i++) {
        if(this[i] == val) {
            this.splice(i, 1);
            break;
        }
    }
}
//..
var somearray = ["mon", "tue", "wed", "thur"]
somearray.removeByValue("tue");

Call a method dynamically in a way specified by the string

Sometimes, at run time, you need to dynamically call an existing method and pass in its parameters. How does this work? The following code can:


var strFun = "someFunction"; //SomeFunction is the defined method name
var strParam = "this is the parameter"; //The parameter to pass in to the method
var fn = window[strFun];

//The calling method passes in parameters
fn(strParam);

6 generates random Numbers from 1 to N


var random = Math.floor(Math.random() * N + 1); 
//Generate random Numbers between 1 and 10
var random = Math.floor(Math.random() * 10 + 1);  
//Generate random Numbers between 1 and 100
var random = Math.floor(Math.random() * 100 + 1);

Capture the browser closing event


<script language="javascript">
function fnUnloadHandler() {

       alert("Unload event.. Do something to invalidate users session.."); 
}
</script>
<body onbeforeunload="fnUnloadHandler()">
 ...... 
</body>

Just write the code for the onbeforeunload() event

8   Check if the back button is pressed

Again, you can check whether the user has pressed the back key, and the code is as follows:


window.onbeforeunload = function() {
    return "You work will be lost.";
};

9   Check if the form data has changed

Sometimes, when you need to check whether the user has changed the contents of a form, you can use the following technique, which returns true if you have changed the contents of the form, or false if you have not changed the contents of the form. The code is as follows:


function formIsDirty(form) {
  for (var i = 0; i < form.elements.length; i++) {
    var element = form.elements[i];
    var type = element.type;
    if (type == "checkbox" || type == "radio") {
      if (element.checked != element.defaultChecked) {
        return true;
      }
    }
    else if (type == "hidden" || type == "password" ||
             type == "text" || type == "textarea") {
      if (element.value != element.defaultValue) {
        return true;
      }
    }
    else if (type == "select-one" || type == "select-multiple") {
      for (var j = 0; j < element.options.length; j++) {
        if (element.options[j].selected !=
            element.options[j].defaultSelected) {
          return true;
        }
      }
    }
  }
  return false;
}

window.onbeforeunload = function(e) {
  e = e || window.event;  
  if (formIsDirty(document.forms["someForm"])) {
    //Internet explorer and Firefox
    if (e) {
      e.returnValue = "You have unsaved changes.";
    }
    //Safari
    return "You have unsaved changes.";
  }
};


10   Do not use the back button at all

The following tips are placed on the page to prevent the user from clicking the back button, which is required in some cases. The code is as follows:


<SCRIPT type="text/javascript">
    window.history.forward();
    function noBack() { window.history.forward(); }
</SCRIPT>
</HEAD>
<BODY onload="noBack();"
    onpageshow="if (event.persisted) noBack();" onunload="">

Deletes the items selected in the user's checkbox

The following tips are as follows: when the user selects multiple items in the drop-down box, they can be deleted at one time when they click delete. The code is as follows:


function selectBoxRemove(sourceID) {   
    //Get the id of the listbox
    var src = document.getElementById(sourceID);

    //Loop listbox
    for(var count= src.options.length-1; count >= 0; count--) {

         //If the option to delete is found, delete
        if(src.options[count].selected == true) {

                try {
                         src.remove(count, null);

                 } catch(error) {

                         src.remove(count);
                }
        }
    }
}

12   Select all and select not all in the Listbox

If for the specified listbox, the following method can pass in true or false according to the needs of the user, indicating whether all items in the listbox are selected or not, the code is as follows:


function listboxSelectDeselect(listID, isSelect) {
    var listbox = document.getElementById(listID);
    for(var count=0; count < listbox.options.length; count++) {
            listbox.options[count].selected = isSelect;
    }
} 

Move items up and down in the Listbox

The following code shows how to move items up and down in a listbox


function listbox_move(listID, direction) {

    var listbox = document.getElementById(listID);
    var selIndex = listbox.selectedIndex;

    if(-1 == selIndex) {
        alert("Please select an option to move.");
        return;
    }

    var increment = -1;
    if(direction == 'up')
        increment = -1;
    else
        increment = 1;

    if((selIndex + increment) < 0 ||
        (selIndex + increment) > (listbox.options.length-1)) {
        return;
    }

    var selValue = listbox.options[selIndex].value;
    var selText = listbox.options[selIndex].text;
    listbox.options[selIndex].value = listbox.options[selIndex + increment].value
    listbox.options[selIndex].text = listbox.options[selIndex + increment].text

    listbox.options[selIndex + increment].value = selValue;
    listbox.options[selIndex + increment].text = selText;

    listbox.selectedIndex = selIndex + increment;
}
//..
//..

listbox_move('countryList', 'up'); //move up the selected option
listbox_move('countryList', 'down'); //move down the selected option

Move items in two different listboxes

If you are in two different listboxes, it is often necessary to move items in one Listbox on the left to another Listbox, the following is the relevant code:


function listbox_moveacross(sourceID, destID) {
    var src = document.getElementById(sourceID);
    var dest = document.getElementById(destID);

    for(var count=0; count < src.options.length; count++) {

        if(src.options[count].selected == true) {
                var option = src.options[count];

                var newOption = document.createElement("option");
                newOption.value = option.value;
                newOption.text = option.text;
                newOption.selected = true;
                try {
                         dest.add(newOption, null); //Standard
                         src.remove(count, null);
                 }catch(error) {
                         dest.add(newOption); // IE only
                         src.remove(count);
                 }
                count--;
        }
    }
}
//..
//..
listbox_moveacross('countryList', 'selectedCountryList');

15 quickly initializes a Javscript array

The following method, gives a quick method to initialize the Javscript array, the code is as follows:


var numbers = [];
for(var i=1; numbers.push(i++)<100;);
//numbers = [0,1,2,3 ... 100]

It USES the push method of the array

Intercepts a decimal number of specified digits

If you want to intercept the specified number after the decimal, you can use the toFixed method, such as:


var num = 2.443242342; 
alert(num.toFixed(2));

ToPrecision (x) is used to provide the precision of the specified number, where x is all the digits, such as:


num = 500.2349; 
result = num.toPrecision(4); //The output of 500.2

Check for other strings in the string

In the following code, you can check whether a string contains other strings. The code is as follows:


if (!Array.prototype.indexOf) { 
    Array.prototype.indexOf = function(obj, start) {
         for (var i = (start || 0), j = this.length; i < j; i++) {
             if (this[i] === obj) { return i; }
         }
         return -1;
    }
}

if (!String.prototype.contains) {
    String.prototype.contains = function (arg) {
        return !!~this.indexOf(arg);
    };
}

In the code above, the indexOf method is rewritten and the contains method is defined, using the following method:


var hay = "a quick brown fox jumps over lazy dog"; 
var needle = "jumps"; 
alert(hay.contains(needle));

18   Remove duplicate elements from the Javscript array

The following code can remove duplicate elements in the Javascript array, as follows:


function removeDuplicates(arr) {
    var temp = {};
    for (var i = 0; i < arr.length; i++)
        temp[arr[i]] = true;

    var r = [];
    for (var k in temp)
        r.push(k);
    return r;
}

// usage 
var fruits = ['apple', 'orange', 'peach', 'apple', 'strawberry', 'orange'];
var uniquefruits = removeDuplicates(fruits);
//Output uniquefruits [' apple ', 'orange', 'peach', 'strawberry'].

19   Remove the extra Spaces in the String

The following code will add a trim() method to the String as follows:


if (!String.prototype.trim) {
   String.prototype.trim=function() {
    return this.replace(/^s+|s+$/g, '');
   };
}

// usage 
var str = "  some string    ";
str.trim();
//Output STR = "some string"

20 redirection in Javascript

In Javascript, redirection can be implemented as follows:


window.location.href = "//www.jb51.net";


21 encode the URL

Sometimes, it is necessary to encode the transmission in the URL. The method is as follows:


var myOtherUrl = "http://example.com/index.html?url=" + encodeURIComponent(myUrl);

Original: http://viralpatel.net/blogs/javascript-tips-tricks/


Related articles: