Bits, Bytes and Blobs
4 likes4,241 views
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
Bits, Bytes and Blobs
- 1. Bits, Bytes and Blobs Binary programming in Javascript Mrinal Wadhwa www.mrinalwadhwa.com
- 2. Abstraction
- 3. Why think in binary ?
- 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
- 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.
- 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
- 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
- 57. String String.charCodeAt(index) String.fromCharCode(n1, ... nn)
- 58. Array of Numbers
- 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
- 78. ?
- 79. References Bitwise Operators JavaScript Numbers File API XmlHttpRequest Level 2 Typed Array Canvas ImageData