View
7.188
Download
4
Category
Tags:
Preview:
DESCRIPTION
A presentation introducing binary programming in JavaScript, That I presented at jsFoo Bangalore - October 1, 2011
Citation preview
Bits, Bytes and Blobs
Mrinal Wadhwawww.mrinalwadhwa.com
Binary programming in Javascript
Abstraction
Why think in binary ?
Number Systems
Decimal Numbers
Decimal Numbers10 digits
Decimal Numbers
0 1 2 3 4 5 6 7 8 9
10 digits
Decimal Numbers
0 1 2 3 4 5 6 7 8 9
10 digits
base 10
24
* the answer to life, universe, and everything
2 * 1004 * 101 +
24
2 * 1004 * 101 +
24
40 + 2
2 * 1004 * 101 +
24
40 + 2
digit * base position + ... + digit * base position
2 * 1004 * 101 +
248 * 102 +
8
40 + 2800 +
digit * base position + ... + digit * base position
digit * base position + ... + digit * base position
Binary Numbers
Binary Numbers2 digits
BitA binary digit.
0 1or
Binary Numbers
base 2
0 1
2 digits
01
01
digit * base position + ... + digit * base position
0 * 201 * 21 +
01
digit * base position + ... + digit * base position
0 * 201 * 21 +
01
2 + 0
digit * base position + ... + digit * base position
0 * 201 * 21 +
01
2 + 0
1 * 22 +
1
4 +
digit * base position + ... + digit * base position
BitA binary digit.
0 1or
NibbleA set of 4 bits.
0/1 0/1 0/1 0/1
Store values 0 to 15
ByteA set of 8 bits.
0/1 0/1 0/1 0/10/1 0/1 0/1 0/1
Store values 0 to 255
Hexadecimal Numbers
Hexadecimal Numbers16 digits
Hexadecimal Numbers
0 1 2 3 4 5 6 7 8 9 A B C D E F
16 digits
Hexadecimal Numbers
0 1 2 3 4 5 6 7 8 9 A B C D E F
16 digits
base 16
what’s interesting about Hexadecimal numbers is that a Hex digit fits exactly
into a Binary nibble.
1 * 201 * 21 +
11
2 + 1
1 * 22 +
1
4 +
1 * 23 +
1
8 +
15
F
Byte Order
Big Endian / Network Byte Order
B0B1B2B3Most Significant Byte Least Significant Byte
1000
Decimal 1 stored in a 4 byte big endian word
Most Significant Byte Least Significant Byte
Little Endian
B3B2B1B0Least Significant Byte Most Significant Byte
0001
Decimal 1 stored in a 4 byte little endian word
Least Significant Byte Most Significant Byte
Numbers in Javascript
64 bit (8 bytes) - IEEE 754 double precision floating-point
Bitwise Operators in JavaScript
The operands of all bitwise operators are converted to signed 32-bit integers
in big-endian order and in two's complement format.
Bitwise Logical Operators
& Bitwise AND
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 1 1
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 0 1
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 1
| Bitwise OR
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 0 0 0 0 1 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 1 0 0 0 1 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 1 0 0 0 1 0 0 0 0 0 0
^ Bitwise XOR
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 0 1 1
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 1 1 1
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 0 0
~ Bitwise NOT
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 1
1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 1 0
Bitwise Shift Operators
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 1
<< Bitwise Shift Left
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 10 01 0
9 << 2
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 1
>> Bitwise Sign Propagating Shift Right
9 >> 2
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 010
1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 1 1 1
>> Bitwise Sign Propagating Shift Right
-9 >> 2
1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 01 1 1
1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 1 1 1
>>> Bitwise Zero Fill Shift Right
-9 >>> 2
0 0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 01 1 1
Encoding
Text Formats
Binary Formats
Fixed Width Data Types
Variable Width Data Types
Storage in JavaScript
String
String.charCodeAt(index)String.fromCharCode(n1, ... nn)
Array of Numbers
BlobBinary Large Object
BlobBuilder
File Reader
ArrayBufferAn Array Of Bytes in Memory
ArrayBufferViewA view of a part of the ArrayBuffer
TypedArrays
ArrayBufferViews where each element is of a certain type -
Int8Array, Uint8Array, Int16Array, Uint16Array, Int32Array, Uint32Array, Float32Array, Float64Array
TypedArrays
DataView
ImageData
Transport
HTTP
Content-Type: application/octet-stream
or a custom header
WebSockets
Applications
Faster Calculations
Lighter Data Exchange
Speak Binary Protocols
File Manipulation
?
References
Bitwise Operators
JavaScript Numbers
File API
XmlHttpRequest Level 2
Typed Array
Canvas ImageData
Thank You
http://mrinalwadhwa.com
http://twitter.com/mrinal
Recommended