bits, bytes and blobs
DESCRIPTION
A presentation introducing binary programming in JavaScript, That I presented at jsFoo Bangalore - October 1, 2011TRANSCRIPT
![Page 1: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/1.jpg)
Bits, Bytes and Blobs
Mrinal Wadhwawww.mrinalwadhwa.com
Binary programming in Javascript
![Page 2: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/2.jpg)
Abstraction
![Page 3: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/3.jpg)
Why think in binary ?
![Page 4: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/4.jpg)
Number Systems
![Page 5: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/5.jpg)
Decimal Numbers
![Page 6: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/6.jpg)
Decimal Numbers10 digits
![Page 7: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/7.jpg)
Decimal Numbers
0 1 2 3 4 5 6 7 8 9
10 digits
![Page 8: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/8.jpg)
Decimal Numbers
0 1 2 3 4 5 6 7 8 9
10 digits
base 10
![Page 9: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/9.jpg)
24
* the answer to life, universe, and everything
![Page 10: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/10.jpg)
2 * 1004 * 101 +
24
![Page 11: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/11.jpg)
2 * 1004 * 101 +
24
40 + 2
![Page 12: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/12.jpg)
2 * 1004 * 101 +
24
40 + 2
digit * base position + ... + digit * base position
![Page 13: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/13.jpg)
2 * 1004 * 101 +
248 * 102 +
8
40 + 2800 +
digit * base position + ... + digit * base position
![Page 14: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/14.jpg)
digit * base position + ... + digit * base position
![Page 15: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/15.jpg)
Binary Numbers
![Page 16: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/16.jpg)
Binary Numbers2 digits
![Page 17: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/17.jpg)
BitA binary digit.
0 1or
![Page 18: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/18.jpg)
Binary Numbers
base 2
0 1
2 digits
![Page 19: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/19.jpg)
01
![Page 20: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/20.jpg)
01
digit * base position + ... + digit * base position
![Page 21: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/21.jpg)
0 * 201 * 21 +
01
digit * base position + ... + digit * base position
![Page 22: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/22.jpg)
0 * 201 * 21 +
01
2 + 0
digit * base position + ... + digit * base position
![Page 23: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/23.jpg)
0 * 201 * 21 +
01
2 + 0
1 * 22 +
1
4 +
digit * base position + ... + digit * base position
![Page 24: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/24.jpg)
BitA binary digit.
0 1or
![Page 25: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/25.jpg)
NibbleA set of 4 bits.
0/1 0/1 0/1 0/1
Store values 0 to 15
![Page 26: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/26.jpg)
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
![Page 27: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/27.jpg)
Hexadecimal Numbers
![Page 28: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/28.jpg)
Hexadecimal Numbers16 digits
![Page 29: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/29.jpg)
Hexadecimal Numbers
0 1 2 3 4 5 6 7 8 9 A B C D E F
16 digits
![Page 30: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/30.jpg)
Hexadecimal Numbers
0 1 2 3 4 5 6 7 8 9 A B C D E F
16 digits
base 16
![Page 31: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/31.jpg)
what’s interesting about Hexadecimal numbers is that a Hex digit fits exactly
into a Binary nibble.
![Page 32: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/32.jpg)
1 * 201 * 21 +
11
2 + 1
1 * 22 +
1
4 +
1 * 23 +
1
8 +
15
F
![Page 33: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/33.jpg)
Byte Order
![Page 34: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/34.jpg)
Big Endian / Network Byte Order
B0B1B2B3Most Significant Byte Least Significant Byte
![Page 35: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/35.jpg)
1000
Decimal 1 stored in a 4 byte big endian word
Most Significant Byte Least Significant Byte
![Page 36: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/36.jpg)
Little Endian
B3B2B1B0Least Significant Byte Most Significant Byte
![Page 37: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/37.jpg)
0001
Decimal 1 stored in a 4 byte little endian word
Least Significant Byte Most Significant Byte
![Page 38: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/38.jpg)
Numbers in Javascript
64 bit (8 bytes) - IEEE 754 double precision floating-point
![Page 39: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/39.jpg)
Bitwise Operators in JavaScript
![Page 40: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/40.jpg)
The operands of all bitwise operators are converted to signed 32-bit integers
in big-endian order and in two's complement format.
![Page 41: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/41.jpg)
Bitwise Logical Operators
![Page 42: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/42.jpg)
& 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
![Page 43: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/43.jpg)
| 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
![Page 44: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/44.jpg)
^ 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
![Page 45: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/45.jpg)
~ 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
![Page 46: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/46.jpg)
Bitwise Shift Operators
![Page 47: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/47.jpg)
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
![Page 48: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/48.jpg)
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
![Page 49: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/49.jpg)
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
![Page 50: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/50.jpg)
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
![Page 51: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/51.jpg)
Encoding
![Page 52: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/52.jpg)
Text Formats
![Page 53: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/53.jpg)
Binary Formats
![Page 54: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/54.jpg)
Fixed Width Data Types
![Page 55: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/55.jpg)
Variable Width Data Types
![Page 56: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/56.jpg)
Storage in JavaScript
![Page 57: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/57.jpg)
String
String.charCodeAt(index)String.fromCharCode(n1, ... nn)
![Page 58: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/58.jpg)
Array of Numbers
![Page 59: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/59.jpg)
BlobBinary Large Object
![Page 60: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/60.jpg)
![Page 61: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/61.jpg)
![Page 62: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/62.jpg)
BlobBuilder
![Page 63: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/63.jpg)
File Reader
![Page 64: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/64.jpg)
ArrayBufferAn Array Of Bytes in Memory
![Page 65: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/65.jpg)
ArrayBufferViewA view of a part of the ArrayBuffer
![Page 66: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/66.jpg)
TypedArrays
ArrayBufferViews where each element is of a certain type -
Int8Array, Uint8Array, Int16Array, Uint16Array, Int32Array, Uint32Array, Float32Array, Float64Array
![Page 67: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/67.jpg)
TypedArrays
![Page 68: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/68.jpg)
DataView
![Page 69: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/69.jpg)
ImageData
![Page 70: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/70.jpg)
Transport
![Page 71: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/71.jpg)
HTTP
Content-Type: application/octet-stream
or a custom header
![Page 72: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/72.jpg)
WebSockets
![Page 73: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/73.jpg)
Applications
![Page 74: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/74.jpg)
Faster Calculations
![Page 75: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/75.jpg)
Lighter Data Exchange
![Page 76: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/76.jpg)
Speak Binary Protocols
![Page 77: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/77.jpg)
File Manipulation
![Page 78: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/78.jpg)
?
![Page 79: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/79.jpg)
References
Bitwise Operators
JavaScript Numbers
File API
XmlHttpRequest Level 2
Typed Array
Canvas ImageData
![Page 80: Bits, Bytes and Blobs](https://reader031.vdocuments.net/reader031/viewer/2022013121/5550aa05b4c90595208b512b/html5/thumbnails/80.jpg)
Thank You
http://mrinalwadhwa.com
http://twitter.com/mrinal