21 Javascript tips worth collecting_javascript tips

1 Convert Javascript array to CSV format

First consider the following application scenario. There is a Javscript character (or numeric) array, which now needs to be converted into a comma-delimited CSV format file. Then we can use the following tips, the code is as follows:

Copy code The code is as follows:

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

Output: apple,peaches,oranges,mangoes

　 Among them, the valueOf() method will convert the Javascript array into a comma-separated string. It should be noted that if you do not want to use commas to separate, for example, use | to separate, please use the join method, as follows:

Copy code The code is as follows:

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

Output: apple|peaches|oranges|mangoes

2 Convert CSV format back to Javscript array

So how to convert a CSV formatted string back to a Javascript array? You can use the split() method to separate using any specified characters. The code is as follows:

Copy code The code is as follows:

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

Output fruitsArray[0]: apple

3 Remove an element from the array based on index

If you need to remove an element from a Javascript array, you can use the splice method. This method will remove the nth element from the array based on the passed parameter n (calculated from the 0th position in the Javascript array) .

Copy code The code is as follows:

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 final output is Apple,Ball,Dog

　　4 Remove the value in the array element according to the value of the element

The following technique is very practical. It is to delete elements in an array based on a given value. The code is as follows:

Copy code The code is as follows:

function removeByValue(arr, val) {
for (var i=0; i if(arr[i] == val) {
arr.splice(i, 1);
break;
}
}
}
var somearray = ["mon", "tue", "wed", "thur"]
removeByValue(somearray, "tue");
//somearray will The elements that will be included are "mon", "wed", "thur"

Of course, a better way is to use the prototype method to achieve it, as shown in the following code:

Copy code The code is as follows:

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

5 Dynamically call a method by specifying a string

Sometimes, it is necessary to dynamically call an existing method at runtime and pass in parameters. How to achieve this? The following code will do:

Copy code The code is as follows:

var strFun = "someFunction"; //someFunction is the defined method name
var strParam = "this is the parameter"; //The parameter to be passed into the method
var fn = window [strFun];

//Call the method and pass in the parameters
fn(strParam);

6 Generate random numbers from 1 to N

Copy code The code is as follows:

var random = Math.floor(Math.random() * N 1);
//Generate a random number between 1 and 10
var random = Math.floor(Math.random() * 10 1);
//Generate a random number between 1 and 100 Random number
var random = Math.floor(Math.random() * 100 1);

7 Capture browser closing event

We often want to prompt the user to save unsaved things when the user closes the browser. The following Javascript technique is very useful. The code is as follows:

Copy code The code is as follows:

…………

Just write the code for the onbeforeunload() event

8 Check whether the back button is pressed

Similarly, you can check whether the user pressed the back key, the code is as follows:

Copy code The code is as follows:

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

　9 Check whether the form data has changed

Sometimes, you need to check whether the user has modified the content of a form. You can use the following technique. If the content of the form has been modified, it will return true, and if the content of the form has not been modified, it will return false. The code is as follows:

Copy code The code is as follows:

function formIsDirty(form) {
for (var i = 0; i var element = form.elements[i];
var type = element.type;
if (type == "checkbox" || type == "radio") {
       if (element.checked != element.defaultChecked) {
                                                                                                                                                                           " || 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                                                                                                                                                                             🎜> }
}
return false;
}

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




10 Completely disable the use of the back key


The following tips can be placed on the page to prevent users from clicking the back button, which is needed in some cases. The code is as follows:

Copy code

The code is as follows:

　11 Delete the item selected in the user's multi-select box

The technique provided below is that when the user selects multiple items in the drop-down box and clicks Delete, they can be deleted at once. The code is as follows:

Copy code The code is as follows:

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

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

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

try {
src .remove(count, null);

} catch(error) {

src.remove(count);
}
}
}
}

12 All selection and non-selection in Listbox

For the specified listbox, the following method can pass in true or false according to the user's needs, which means whether to select all items in the listbox or not select all items respectively. The code is as follows:

Copy code The code is as follows:

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

　　13 Moving items up and down in Listbox

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

Copy code The code is as follows:

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) (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

　14 Move items in two different Listboxes

If you are in two different Listboxes, you often need to move items from the left Listbox to the other Listbox. The following is the relevant code:

Copy code The code is as follows:

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

for(var count=0; 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--; 🎜>

　
　15 Quickly initialize Javscript array


The following method gives a way to quickly initialize a Javscript array. The code is as follows:

Copy code

The code is as follows:

var numbers = [];for(var i=1; numbers.push(i )//numbers = [0,1,2,3 ... 100] Use the push method of the array

　
16 intercept the decimal number of specified digits


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

Copy code

The code is as follows:

var num = 2.443242342; alert(num. toFixed(2)); Using toPrecision(x) provides the precision of the specified number of digits, where x is the total number of digits, such as:

Copy code

The code is as follows:

num = 500.2349; result = num.toPrecision (4); //Output 500.2 　17 Check whether the string contains other strings

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

Copy code

The code is as follows:

if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function(obj, start) {
for (var i = (start || 0), j = this i 🎜>
if (!String.prototype.contains) {
String.prototype.contains = function (arg) {
return !!~this.indexOf(arg);
};
}



In the above code, the indexOf method is rewritten and the contains method is defined. The method used is as follows:

Copy code

The code is as follows:var hay = "a quick brown fox jumps over lazy dog "; var needle = "jumps"; alert(hay.contains(needle));

　
18 Remove duplicate elements in Javscript array

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

Copy code

The code is as follows:function removeDuplicates(arr) { var temp = {}; for (var i = 0; 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 extra spaces in String

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

Copy code

The code is 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:

Copy code

The code is as follows:window.location.href = "http://www .jb51.net";

　

21 Encode URL

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

Copy code

The code is as follows:var myOtherUrl = "http://example.com/ index.html?url=" encodeURIComponent(myUrl);

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