I love to program, and discover new tech.
Check out my <a href="http://stackoverflow.com/users/527776/larry-battle">stackoverflow</a> and <a href="https://github.com/LarryBattle">github</a> accounts.
I love to program, and discover new tech.
Check out my <a href="http://stackoverflow.com/users/527776/larry-battle">stackoverflow</a> and <a href="https://github.com/LarryBattle">github</a> accounts.
Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /home/bateeqjg/public_html/news/wp-content/plugins/wp-syntax/wp-syntax.php on line 380
Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /home/bateeqjg/public_html/news/wp-content/plugins/wp-syntax/wp-syntax.php on line 380
Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /home/bateeqjg/public_html/news/wp-content/plugins/wp-syntax/wp-syntax.php on line 380
Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /home/bateeqjg/public_html/news/wp-content/plugins/wp-syntax/wp-syntax.php on line 380
Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /home/bateeqjg/public_html/news/wp-content/plugins/wp-syntax/wp-syntax.php on line 380
Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /home/bateeqjg/public_html/news/wp-content/plugins/wp-syntax/wp-syntax.php on line 380
Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /home/bateeqjg/public_html/news/wp-content/plugins/wp-syntax/wp-syntax.php on line 380
Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /home/bateeqjg/public_html/news/wp-content/plugins/wp-syntax/wp-syntax.php on line 380
Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /home/bateeqjg/public_html/news/wp-content/plugins/wp-syntax/wp-syntax.php on line 380
Warning: Undefined array key "layout" in /home/bateeqjg/public_html/news/wp-content/plugins/wp-about-author/wp-about-author.php on line 94
Intro:
“There are 10 types of people in this world. Those who understand binary and those who don’t” – Author Unknown
Javascript is loaded with hidden features that can that be used for more than DOM manipulation and event handling. Javascript supports binary operations pretty well, and now I’m going to show you how to master them.
By the end of this tutorial you will learn the following.
Base Conversions
Bitwise operations
Logic Gates
For better comprehension, I recommend that you use a Javascript Console, which is available in Firebug ( a Firefox addon) or in Google Chrome Dev Tools. If you wish, you can even use online editors, like jsbin.com and jsfiddle.net, to follow along. Note: Negative numbers will not be dealt with in this tutorial, since Javascript doesn’t support signed bits.
Definitions:
For those that are new to the binary concept, watch the following short videos to catch up then continue.
Decimal, Binary, Octal, and Hexadecimal
Hexadecimal – learn it in less than a minute
Boolean Algebra: AND/OR/NOT
Javascipt Code:
Base Conversion: For positive numbers
The toString() and parseInt() functions will be your friends in this section.
(number).toString( [baseTo] ) will change a number to a string type. If a base is provided in the toString argument, then the number gets converted to a new base from 2 – 36. Example:
1
2
3
4
// number.toString( [ baseTo ] ); returns number in desired base.(3).toString(2);// returns "11"(54).toString(2);// returns "110110"(120).toString(16);// returns "78"
Additionally, hexadecimal numbers( base 16) can be represented with a prefix of “0x”.
While a prefix of “0” denotes an Octal number( base 8). Example:
1
2
3
var hex = 0xFF // hex is 255 in decimal
hex = 0x01 // now hex is 1 in decimalvar oct = 013 // oct = 11
var hex = 0xFF // hex is 255 in decimal
hex = 0x01 // now hex is 1 in decimal
var oct = 013 // oct = 11
Alternatively, parseInt( { number | string }, [baseFrom] ) will parse a number or a string that contains a number, and convert the bases, with the default base set to 10. Please be aware that you the base must be between 2 – 36. Example:
1
2
3
4
5
6
7
8
9
// parseInt( { number | string }, [ baseFrom ] ); returns decimal number.
num ="110110";
parseInt( num );// displays 110110 because default base 10.
parseInt( num,2);// displays 54
parseInt("dad",16);// displays 3501, "dad" is valid hex;var hex ="badDad";
parseInt( hex,16);// returns 12246445+("0x"+ hex );// returns 12246445 (Alternative way to parse hex.)
// parseInt( { number | string }, [ baseFrom ] ); returns decimal number.
num = "110110";
parseInt( num ); // displays 110110 because default base 10.
parseInt( num, 2 ); // displays 54
parseInt( "dad", 16 ); // displays 3501, "dad" is valid hex;
var hex = "badDad";
parseInt( hex, 16 ); // returns 12246445
+("0x"+ hex ); // returns 12246445 (Alternative way to parse hex.)
Ok, so your next question might be how to convert from one base to another, like from Binary to Hexadecimal. To achieve your goal, convert base A to decimal then to base B.
For those seeking a function to encode and decode bases higher than 36, check out this script at Snipplr.com
Example:
1
2
3
4
5
6
// Convert from baseA( Binary ) to baseB( Hexadecimal). // Note: Both baseA and baseB must be between 2 and 36.var baseA =2, baseB =16;var binary =1010111, hex, dec;
dec = parseInt( binary, baseA );// dec = 87
hex = dec.toString( baseB );// hex = 57
// Convert from baseA( Binary ) to baseB( Hexadecimal).
// Note: Both baseA and baseB must be between 2 and 36.
var baseA = 2, baseB = 16;
var binary = 1010111, hex, dec;
dec = parseInt( binary, baseA ); // dec = 87
hex = dec.toString( baseB ); // hex = 57
Thankfully, you can simplify all the base conversion to one simple function, which I call convertNumToBase.
1
2
3
4
5
6
7
8
9
10
11
// Convert from baseA to baseB// Note: Both baseA and baseB must be between 2 and 36.var convertNumToBase =function( num, baseA, baseB ){if(!( baseA <2|| baseB <2|| isNaN( baseA )|| isNaN(baseB)|| baseA >36|| baseB >36)){return parseInt( num, baseA ).toString( baseB );}};
convertNumToBase(1111,2,10);// return "15"
convertNumToBase(10101111,2,16);// return "af"
convertNumToBase("FF",16,2);// return "11111111"
// Convert from baseA to baseB
// Note: Both baseA and baseB must be between 2 and 36.
var convertNumToBase = function( num, baseA, baseB ){
if( !( baseA < 2 || baseB < 2 || isNaN( baseA )
|| isNaN(baseB) || baseA > 36 || baseB > 36) ){
return parseInt( num, baseA ).toString( baseB );
}
};
convertNumToBase( 1111, 2, 10 ); // return "15"
convertNumToBase( 10101111, 2, 16 ); // return "af"
convertNumToBase( "FF", 16, 2 ); // return "11111111"
Sometimes, it might be useful to have a binary string with a fixed number of bits.
We can implement this with an extension to the previous example.
var getStrCopy =function(str, copies){var newStr = str;
copies =(copies >0)? copies :1;
while (--copies){
newStr += str;}return newStr;},
convertDecToBase =function( dec, base, length, padding ){
padding = padding ||'0';var num = dec.toString( base );
length = length || num.length;if(num.length!== length){if(num.length< length){
num = getStrCopy( padding,(length - num.length))+ num;}else{thrownew Error("convertDecToBase(): num("+ num +").length > length("+ length +") too long.");}}return num;};// Usage
convertDecToBase(23,2,8);//returns "00010111"
convertDecToBase(23,2,8,'x');//returns "xxx10111"
var getStrCopy = function (str, copies) {
var newStr = str;
copies = (copies > 0) ? copies : 1;
while (--copies) {
newStr += str;
}
return newStr;
},
convertDecToBase = function ( dec, base, length, padding ) {
padding = padding || '0' ;
var num = dec.toString( base );
length = length || num.length;
if (num.length !== length) {
if (num.length < length) {
num = getStrCopy( padding, (length - num.length)) + num;
}
else {
throw new Error("convertDecToBase(): num(" + num + ").length > length(" + length + ") too long.");
}
}
return num;
};
// Usage
convertDecToBase( 23, 2, 8 ); //returns "00010111"
convertDecToBase( 23, 2, 8, 'x' ); //returns "xxx10111"
Two’s Complement
Javascript designates the character tilde, ~, for the two’s complement, even though in most programming languages tilde represents a bit toggle for the one’s complement.
1
2
3
var num =70;
~num;// returns -71
~num.toString(2);// returns -1000111
var num = 70;
~num; // returns -71
~num.toString(2); // returns -1000111
Bitwise operations
Bitwise operations are covered in great details at Wikipedia: Bitwise Operations.
But if you don’t want to read that then watch this video. Note: Remember Javascript’s tilde, ~, returns the two’s complement.
clear();var a = parseInt("1010",2);// a = 10var b = parseInt("1100",2);// b = 12(a & b).toString(2);// a AND b returns dec = 8, binary = 1000(a | b).toString(2);// a OR b returns dec = 14, binary = 1110(a ^ b);// a XOR b returns dec = 6, binary = 0110//Invalid binary number because of the negative sign.
~b.toString(2);// a NOT returns dec = -13, binary = "-1101"(~( a & b )).toString(2);// a NAND b returns dec = -7, binary = "-1001"(~( a | b )).toString(2);// a NOR b returns dec = -15, binary = "-1111"
~( a ^ b );// a NXOR b returns dec = -7, binary = "-1001"var num =13;// 13 is "1101" in binary;var position =3;// access bit position(num >> position).toString(2)// returns 1(num >> position)& 0x01;// returns 1
num.toString(2).charAt( position );// Alternative method, returns '1'// set a bit(1<< position ).toString(2);// returns "1000"
num &=(1<< position );// returns 8, binary "1000"// clear a bit(0<< position ).toString(2);// returns "1000"
num &=(0<< position );// returns 0// Toggle a bit
num ^=(1<< position );// returns 8, binary = "1000"// Test a bit(num >> position)&1;//returns 1// left shift with 0's
num >>> position;// returns 1// right shift with 0's
num << position;// returns 64, binary = "1000000"
clear();
var a = parseInt( "1010", 2 ); // a = 10
var b = parseInt( "1100", 2 ); // b = 12
(a & b).toString(2); // a AND b returns dec = 8, binary = 1000
(a | b).toString(2); // a OR b returns dec = 14, binary = 1110
(a ^ b); // a XOR b returns dec = 6, binary = 0110
//Invalid binary number because of the negative sign.
~b.toString(2); // a NOT returns dec = -13, binary = "-1101"
(~( a & b )).toString(2); // a NAND b returns dec = -7, binary = "-1001"
(~( a | b )).toString(2); // a NOR b returns dec = -15, binary = "-1111"
~( a ^ b ); // a NXOR b returns dec = -7, binary = "-1001"
var num = 13; // 13 is "1101" in binary;
var position = 3;
// access bit position
(num >> position).toString(2) // returns 1
(num >> position) & 0x01; // returns 1
num.toString(2).charAt( position ); // Alternative method, returns '1'
// set a bit
( 1 << position ).toString(2); // returns "1000"
num &= ( 1 << position ); // returns 8, binary "1000"
// clear a bit
( 0 << position ).toString(2); // returns "1000"
num &= ( 0 << position ); // returns 0
// Toggle a bit
num ^= ( 1 << position ); // returns 8, binary = "1000"
// Test a bit
(num >> position) & 1; //returns 1
// left shift with 0's
num >>> position; // returns 1
// right shift with 0's
num << position; // returns 64, binary = "1000000"
Conclusion:
Javascript is a powerful language that many hidden features that waiting to be discovered.
Even though bitwise operations are rarely used in projects, it’s still useful to know.
This concludes the tutorial.
Test your knowledge. Take the quiz below!
Binary Quiz ( made with jQuizMe)
I love to program, and discover new tech.
Check out my <a href="http://stackoverflow.com/users/527776/larry-battle">stackoverflow</a> and <a href="https://github.com/LarryBattle">github</a> accounts.
Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /home/bateeqjg/public_html/news/wp-content/plugins/wp-syntax/wp-syntax.php on line 380
Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /home/bateeqjg/public_html/news/wp-content/plugins/wp-syntax/wp-syntax.php on line 380
Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /home/bateeqjg/public_html/news/wp-content/plugins/wp-syntax/wp-syntax.php on line 380
Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /home/bateeqjg/public_html/news/wp-content/plugins/wp-syntax/wp-syntax.php on line 380
Not gate
A weird part of javascript is trying to toggle the bits in a number. For most programming languages, like C and Java, ~ represents a bitwise NOT operation, aka one’s complement. But in javascript, ~ produces the two’s complement. Since ~num gives the two’s complement, equivalent to -(num + 1), then one would suspect that ~(num -1) should give back the one’s complement.
However that’s not the case, as the next example demonstrates.
1
2
3
4
var num =9;
num.toString(2);//returns 1001(~num).toString(2);// returns "-1010"
~(num -1).toString(2);//returns "-1001"
var num = 9;
num.toString(2); //returns 1001
(~num).toString(2); // returns "-1010"
~(num - 1).toString(2); //returns "-1001"
As you can see from the example, there are two main problems. The first is that the sign bit is replaced with a negative sign. And second, the bits don’t get toggled.
To fix this problem most programmers would just XOR the number with a mask to toggle the bits. Although this works, it quickly produces the unintended result once you XOR a number larger than the mask. Example:
1
2
3
4
5
var BIT_MASK = 0xF;(9).toString(2);//returns "1001"(9^ BIT_MASK).toString(2);//returns "110"(30).toString(2);//returns "11110"(30^ BIT_MASK).toString(2);//returns "10001"
A simple solution to this problem is to not to use javascript for bitwise operations.
However, if javascript is required then use the following code to implement bitwise NOT operation. Method 1: Simple approach.
1
2
3
4
5
6
7
8
9
var toggleBits =function( dec ){var mask = 0xFFFFFFF;return( dec ^ mask ).toString(2).match( RegExp("[01]{"+(dec.toString(2).length)+"}$"))[0];};var num =23;
num.toString(2);// returns 10111
num = toggleBits(num);// num = 01000;
num = parseInt( num,2);// num = 8, binary = 1000
var toggleBits = function( dec ){
var mask = 0xFFFFFFF;
return ( dec ^ mask ).toString(2).match( RegExp( "[01]{"+(dec.toString(2).length)+"}$" ) )[0];
};
var num = 23;
num.toString(2); // returns 10111
num = toggleBits(num); // num = 01000;
num = parseInt( num, 2); // num = 8, binary = 1000
I love to program, and discover new tech.
Check out my <a href="http://stackoverflow.com/users/527776/larry-battle">stackoverflow</a> and <a href="https://github.com/LarryBattle">github</a> accounts.