The document discusses binary data in JavaScript, including: - Binary and hexadecimal number systems as alternatives to decimal - Bitwise operators for manipulating individual bits in JavaScript - Encoding and storing binary data using strings, arrays, Blobs, ArrayBuffers, and TypedArrays - Transporting binary data over HTTP and WebSockets - Applications of binary data like faster calculations, lighter data exchange, and file manipulation

1. Bits, Bytes and Blobs
Binary programming in Javascript
Mrinal Wadhwa
www.mrinalwadhwa.com

2. Abstraction

3. Why think in binary ?

4. Number Systems

5. Decimal Numbers

6. Decimal Numbers
10 digits

7. Decimal Numbers
10 digits
0 1 2 3 4 5 6 7 8 9

8. Decimal Numbers
10 digits
0 1 2 3 4 5 6 7 8 9
base 10

9. 4 2
* the answer to life, universe, and everything

10. 4 2
1 0
4 * 10 + 2 * 10

11. 4 2
1 0
4 * 10 + 2 * 10
40 + 2

12. 4 2
1 0
4 * 10 + 2 * 10
40 + 2
position position
digit * base + ... + digit * base

13. 8 4 2
2 1 0
8 * 10 + 4 * 10 + 2 * 10
800 + 40 + 2
position position
digit * base + ... + digit * base

14. position position
digit * base + ... + digit * base

15. Binary Numbers

16. Binary Numbers
2 digits

17. Bit
A binary digit.
0 or 1

18. Binary Numbers
2 digits
0 1
base 2

19. 1 0

20. 1 0
position position
digit * base + ... + digit * base

21. 1 0
1 0
1*2 + 0*2
position position
digit * base + ... + digit * base

22. 1 0
1 0
1*2 + 0*2
2 + 0
position position
digit * base + ... + digit * base

23. 1 1 0
2 1 0
1*2 + 1*2 + 0*2
4 + 2 + 0
position position
digit * base + ... + digit * base

24. Bit
A binary digit.
0 or 1

25. Nibble
A set of 4 bits.
0/1 0/1 0/1 0/1
Store values 0 to 15

26. Byte
A set of 8 bits.
0/1 0/1 0/1 0/1 0/1 0/1 0/1 0/1
Store values 0 to 255

27. Hexadecimal Numbers

28. Hexadecimal Numbers
16 digits

29. Hexadecimal Numbers
16 digits
0 1 2 3 4 5 6 7 8 9 A B C D E F

30. Hexadecimal Numbers
16 digits
0 1 2 3 4 5 6 7 8 9 A B C D E F
base 16

31. what’s interesting about Hexadecimal
numbers is that a Hex digit fits exactly
into a Binary nibble.

32. 1 1 1 1
3 2 1 0
1*2 + 1*2 + 1*2 + 1*2
8 + 4 + 2 + 1
15
F

33. Byte Order

34. Big Endian / Network Byte Order
B3 B2 B1 B0
Most Significant Byte Least Significant Byte

35. Decimal 1 stored in a 4 byte big endian word
0 0 0 1
Most Significant Byte Least Significant Byte

36. Little Endian
B0 B1 B2 B3
Least Significant Byte Most Significant Byte

37. Decimal 1 stored in a 4 byte little endian word
1 0 0 0
Least Significant Byte Most Significant Byte

38. Numbers in Javascript
64 bit (8 bytes) - IEEE 754 double precision floating-point

39. Bitwise Operators in JavaScript

40. The operands of all bitwise operators
are converted to signed 32-bit integers
in big-endian order and in two's
complement format.

41. Bitwise Logical Operators

42. & 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

43. | 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

44. ^ 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

45. ~ 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

46. Bitwise Shift Operators

47. << Bitwise Shift Left
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
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 0 0

48. >> 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 1 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 0 0 0 0 0 0 1 0

49. >> 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 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 1 1 1 0 1

50. >>> Bitwise Zero Fill 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 0 1 1 1
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 1 1 0 1

51. Encoding

52. Text Formats

53. Binary Formats

54. Fixed Width Data Types

55. Variable Width Data Types

56. Storage in JavaScript

57. String
String.charCodeAt(index)
String.fromCharCode(n1, ... nn)

58. Array of Numbers

59. Blob
Binary Large Object

62. BlobBuilder

63. File Reader

64. ArrayBuffer
An Array Of Bytes in Memory

65. ArrayBufferView
A view of a part of the ArrayBuffer

66. TypedArrays
ArrayBufferViews where each element is of a certain type -
Int8Array, Uint8Array, Int16Array, Uint16Array, Int32Array, Uint32Array,
Float32Array, Float64Array

67. TypedArrays

68. DataView

69. ImageData

70. Transport

71. HTTP
Content-Type: application/octet-stream
or a custom header

72. WebSockets

73. Applications

74. Faster Calculations

75. Lighter Data Exchange

76. Speak Binary Protocols

77. File Manipulation

78. ?

79. References
Bitwise Operators
JavaScript Numbers
File API
XmlHttpRequest Level 2
Typed Array
Canvas ImageData

80. Thank You
http://mrinalwadhwa.com
http://twitter.com/mrinal