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