If you are doing lot of JavaScript programming, you might find below list of code snippets very useful. Keep it handy (bookmark it) and save it for future reference.
Here are 20 very useful JavaScript tips and tricks for you.
Disclaimer: Not all these snippet are written by me. Some of them are collected from other sources on Internet.
1. Converting JavaScript Array to CSV
First one goes like this. You have a javascript array of strings (or numbers) and you want to convert it to comma separated values (csv). We’ll below is the code snippet:
Reference: Array to CSV in JavaScript
var fruits = ['apple', 'peaches', 'oranges', 'mangoes'];
var str = fruits.valueOf();
//print str: apple,peaches,oranges,mangoes
The valueOf() method will convert an array in javascript to a comma separated string.
Now what if you want to use pipe (|) as delimeter instead of comma. You can convert a js array into a delimeted string using join() method. See below:
var fruits = ['apple', 'peaches', 'oranges', 'mangoes'];
var str = fruits.join("|");
//print str: apple|peaches|oranges|mangoes
The join() method will convert the array into a pipe separated string.
2. Convert CSV to Array in JavaScript
Now what if you want to convert a comma seprated string into a JavaScript array? We’ll there is a method for that too. You can use split() method to split a string using any token (for instance comma) and create an array.
Reference: Array to CSV in JavaScript
In below example we split string str on comma (,) and create a fruitsArray array.
var str = "apple, peaches, oranges, mangoes";
var fruitsArray = str.split(",");
//print fruitsArray[0]: apple
3. Remove Array element by Index
You have an array. You want to remove a perticular element from array based on its index. We’ll you can do so using splice() method. This method can add as well as removes element from an array. We will stick to its removal usage.
Reference: Remove element by array index
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);
4. Remove Array element by Value
This one is very useful. You have an array and you want to remove an element based on its value (instead of index).
Reference: Remove element by array index
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 now have "mon", "wed", "thur"
See how in above code we defined a method removeByValue that takes serves the purpose. In JavaScript you can define new functions to classes at runtime (although this is discourage) using prototypes.
In below code snippet, we create a new method removeByValue() within Array class. So now you can call this method as any other arrays method.
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");
//somearray will now have "mon", "wed", "thur"
5. Calling JavaScript function from String
Sometime you want to call a Javascript method at runtime whos name you know. Let say there is a method “foo()” which you want to call at runtime. Below is a small JS snippet that helps you calling a method just by its name.
Reference: Call Function as String
var strFun = "someFunction"; //Name of the function to be called
var strParam = "this is the parameter"; //Parameters to be passed in function
//Create the function
var fn = window[strFun];
//Call the function
fn(strParam);
6. Generate Random number from 1 to N
Below little snippet helps you in generating random number between 1 to N. Might come handy for your next JS game.
//random number from 1 to N
var random = Math.floor(Math.random() * N + 1);
//random number from 1 to 10
var random = Math.floor(Math.random() * 10 + 1);
//random number from 1 to 100
var random = Math.floor(Math.random() * 100 + 1);
7. Capture browser close button event or exiting the page in JavaScript
This is a common use case. You want to capture the browsers close event so that you can alert user if there is any unsaved data on webpage that should be saved. Below javascript snippet will help you in that.
Reference: Capture Browser Close Event
<script language="javascript">
function fnUnloadHandler() {
// Add your code here
alert("Unload event.. Do something to invalidate users session..");
}
</script>
<body onbeforeunload="fnUnloadHandler()">
<!-- Your page content -->
</body>
8. Warn user if Back is pressed
This is same as above. Difference is instead of capturing close event here we capture back button event. So that we know if user is moving awaw from this webpage.
Reference: Capture Browser Back Button
window.onbeforeunload = function() {
return "You work will be lost.";
};
9. Check if Form is Dirty
A common usecase. You need to check if user changed anything in an HTML form. Below function formIsDirty returns a boolean value true or false depending on weather user modified something within the form.
/**
* Determines if a form is dirty by comparing the current value of each element
* with its default value.
*
* @param {Form} form the form to be checked.
* @return {Boolean} <code>true</code> if the form is dirty, <code>false</code>
* otherwise.
*/
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"])) {
// For IE and Firefox
if (e) {
e.returnValue = "You have unsaved changes.";
}
// For Safari
return "You have unsaved changes.";
}
};
10. Disable Back button using JavaScript
This one is tricky. You want to disable the browsers back button (Dont ask me why!!). Below code snippet will let you do this. The only catch here is that you need to put this code in page where you dont want user to come back. See below reference for more details.
Reference: Disable Browsers Back Button
<SCRIPT type="text/javascript">
window.history.forward();
function noBack() { window.history.forward(); }
</SCRIPT>
</HEAD>
<BODY onload="noBack();"
onpageshow="if (event.persisted) noBack();" onunload="">
11. Deleting Multiple Values From Listbox in JavaScript
You have a SELECT box. User can select multiple OPTIONS from this SELECT box and remove them. Below Javascript function selectBoxRemove let you do this. Just pass ID of SELECT object you want to remove OPTIONS in.
Reference: Delete Multiple Options in Select
function selectBoxRemove(sourceID) {
//get the listbox object from id.
var src = document.getElementById(sourceID);
//iterate through each option of the listbox
for(var count= src.options.length-1; count >= 0; count--) {
//if the option is selected, delete the option
if(src.options[count].selected == true) {
try {
src.remove(count, null);
} catch(error) {
src.remove(count);
}
}
}
}
12. Listbox Select All/Deselect All using JavaScript
You can use below JS snippet to select/deselect all the OPTIONS from a SELECT box. Just pass the ID of select box you want to perform this operation on and also a boolean value isSelect specifying what operation you want to perform.
Reference: Select All/None using Javascript
function listboxSelectDeselect(listID, isSelect) {
var listbox = document.getElementById(listID);
for(var count=0; count < listbox.options.length; count++) {
listbox.options[count].selected = isSelect;
}
}
13. Listbox Move selected items Up / Down
This one is useful if you are playing a lot with multi options select box in your application. This function let you move select OPTIONS in a SELECT box to UP or DOWN. See below reference for more details.
Reference: Move Up/Down Selected Items 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
14. Listbox Move Left/Right Options
This javascript function lets you move selected OPTIONS between two SELECT boxes. Check below reference for details.
Reference: Move Options Left/Right between two SELECT boxes
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. Initialize JavaScript Array with series of numbers
Sometime you want to initialize a Javascript array with series of numbers. Below code snippet will let you achieve this. This will initialiaze array numbers with numbers 1 to 100.
var numbers = [];
for(var i=1; numbers.push(i++)<100;);
//numbers = [0,1,2,3 ... 100]
16. Rounding Numbers to ‘N’ Decimals
This one is quite useful. It will let you round off a number to ‘N’ decimal places. Here in below example we are rounding of a number to 2 decimal places.
var num = 2.443242342;
alert(num.toFixed(2)); // 2.44
Note that we use toFixed() method here. toFixed(n) provides n length after the decimal point; whereas toPrecision(x) provides x total length.
num = 500.2349;
result = num.toPrecision(4); // result will equal 500.2
17. Check if String contains another substring in JavaScript
Below code snippet (courtesy Stackoverflow) let you check if a given string contains another substring.
Reference: stackoverflow
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);
};
}
The code will add two new methods to String, indexOf and contains. Once this is done, you can use contains method to check weather a substring is present in a given string.
var hay = "a quick brown fox jumps over lazy dog";
var needle = "jumps";
alert(hay.contains(needle));
18. Remove Duplicates from JavaScript Array
Aha!! You know this one comes quite handy. Just call removeDuplicates method and pass the array, it should remove all duplicate elements from the array.
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);
//print uniquefruits ['apple', 'orange', 'peach', 'strawberry'];
19. Trim a String in JavaScript
Below code will add a method trim() to String which can be used to remove spaces from both sides of a string.
if (!String.prototype.trim) {
String.prototype.trim=function() {
return this.replace(/^\s+|\s+$/g, '');
};
}
//usage
var str = " some string ";
str.trim();
//print str = "some string"
20. Redirect webpage in JavaScript
This javascript code should perform http redirect on a given URL.
window.location.href = "http://viralpatel.net";
21. Encode a URL in JavaScript
Whenever you are making an http request and passing some parameters. You should encode the URL string. Use encodeURIComponent function for encoding a url parameter.
Reference: w3scools
var myOtherUrl =
"http://example.com/index.html?url=" + encodeURIComponent(myUrl);
via ViralPatel.net http://feedproxy.google.com/~r/viralpatelnet/~3/7Txp1SIlKas/
µTorrent is a small and incredibly popular BitTorrent client.
