Binary Programming in Javascript - Bits, Bytes and Blobs

•

4 gostaram•4,222 visualizações

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

Tecnologia Negócios

Bits, Bytes and Blobs

Binary programming in Javascript

Mrinal Wadhwa
www.mrinalwadhwa.com

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

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

base 10

4 2

* the answer to life, universe, and everything

4 2
1 0
4 * 10 + 2 * 10

40 + 2

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

8 4 2
2 1 0
8 * 10 + 4 * 10 + 2 * 10

800 + 40 + 2

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

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

1 0

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

1 0
1 0
1*2 + 0*2

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

1 0
1 0
1*2 + 0*2

2 + 0

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

1 1 0
2 1 0
1*2 + 1*2 + 0*2

4 + 2 + 0

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

Nibble
A set of 4 bits.

0/1 0/1 0/1 0/1

Store values 0 to 15

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

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

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

base 16

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

1 1 1 1
3 2 1 0
1*2 + 1*2 + 1*2 + 1*2

8 + 4 + 2 + 1

15

F

Big Endian / Network Byte Order

B3 B2 B1 B0
Most Signiﬁcant Byte Least Signiﬁcant Byte

Decimal 1 stored in a 4 byte big endian word

0 0 0 1
Most Signiﬁcant Byte Least Signiﬁcant Byte

Little Endian

B0 B1 B2 B3
Least Signiﬁcant Byte Most Signiﬁcant Byte

Decimal 1 stored in a 4 byte little endian word

1 0 0 0
Least Signiﬁcant Byte Most Signiﬁcant Byte

Numbers in Javascript
64 bit (8 bytes) - IEEE 754 double precision ﬂoating-point

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

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

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

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

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

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

ArrayBuﬀerView
A view of a part of the ArrayBuﬀer

TypedArrays

ArrayBuﬀerViews where each element is of a certain type -

Int8Array, Uint8Array, Int16Array, Uint16Array, Int32Array, Uint32Array,
Float32Array, Float64Array

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

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

Thank You

http://mrinalwadhwa.com
http://twitter.com/mrinal

Mais conteúdo relacionado

Destaque

Analog and digital signalsNot currently emloyed

Analogue & Digitalk13086

Last news from New York / Buzz the Brand 2011Henri Kaufman

Reciclatge P5 ReformatIrisat

Use it or lose it : evidence based librarianship and resource management in r...UCD Library

Customer connected company v2Jose Payano

Designing a One-Size-Fits-All University Web Template, and other Impossible B...thisisdrew

Let's Work Together: UCD Research, UCD Library & AltmetricsUCD Library

Estonian ICT foresightguestdd74eb

Mg Tweek9Mohd Yusak

Dmars Part 2hycatraining

Week 5 Uf 5163Mohd Yusak

Presentation5Mohd Yusak

Estats FíSicsIrisat

OpenGovernmentMarc Garriga

Week 2 Uf 5163Mohd Yusak

Libguides pilot at UCD Library 2013. Author: Ros PanUCD Library

Presentation2Mohd Yusak

Les possibilitats d’Internet aplicades a l’agricultura ecològicaMarc Garriga

From Bean Counting to Adding Value: Using Statistics to Transform ServicesUCD Library

Destaque (20)

Analog and digital signals

Analogue & Digital

Last news from New York / Buzz the Brand 2011

Reciclatge P5 Reformat

Use it or lose it : evidence based librarianship and resource management in r...

Customer connected company v2

Designing a One-Size-Fits-All University Web Template, and other Impossible B...

Let's Work Together: UCD Research, UCD Library & Altmetrics

Estonian ICT foresight

Mg Tweek9

Dmars Part 2

Week 5 Uf 5163

Presentation5

Estats FíSics

OpenGovernment

Week 2 Uf 5163

Libguides pilot at UCD Library 2013. Author: Ros Pan

Presentation2

Les possibilitats d’Internet aplicades a l’agricultura ecològica

From Bean Counting to Adding Value: Using Statistics to Transform Services

Mais de Mrinal Wadhwa

SF IoT Meetup - Decentralized Identifiers & Verifiable ClaimsMrinal Wadhwa

Edge Computing and Machine Learning for a better Internet of ThingsMrinal Wadhwa

Considerations for a secure internet of things for cities and communitiesMrinal Wadhwa

Austin Smart City Readiness Workshop - Viability and Sustainability of IoT Sm...Mrinal Wadhwa

Better Parking. Better Communities.Mrinal Wadhwa

Transport Layer Security - Mrinal WadhwaMrinal Wadhwa

An Introduction To Rich Internet ApllicationsMrinal Wadhwa

Custom Components In Flex 4Mrinal Wadhwa

Flex 4 Component LifecycleMrinal Wadhwa

Introduction to Rich Internet Applications, Flex, AIRMrinal Wadhwa

Mais de Mrinal Wadhwa (10)

SF IoT Meetup - Decentralized Identifiers & Verifiable Claims

Edge Computing and Machine Learning for a better Internet of Things

Considerations for a secure internet of things for cities and communities

Austin Smart City Readiness Workshop - Viability and Sustainability of IoT Sm...

Better Parking. Better Communities.

Transport Layer Security - Mrinal Wadhwa

An Introduction To Rich Internet Apllications

Custom Components In Flex 4

Flex 4 Component Lifecycle

Introduction to Rich Internet Applications, Flex, AIR

Último

Scaling API-first – The story of a global engineering organizationRadu Cotescu

GenCyber Cyber Security Day PresentationMichael W. Hawkins

08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls

Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun

Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024The Digital Insurer

IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge

A Call to Action for Generative AI in 2024Results

Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal

Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer

How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes

What Are The Drone Anti-jamming Systems Technology?Antenna Manufacturer Coco

Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko

Advantages of Hiring UIUX Design Service Providers for Your BusinessPixlogix Infotech

Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer

2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong

08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls

🐬 The future of MySQL is Postgres 🐘RTylerCroy

CNv6 Instructor Chapter 6 Quality of Servicegiselly40

08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls

Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC

Binary Programming in Javascript - 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 ?

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 ﬁts 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 Signiﬁcant Byte Least Signiﬁcant Byte

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

36. Little Endian B0 B1 B2 B3 Least Signiﬁcant Byte Most Signiﬁcant Byte

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

38. Numbers in Javascript 64 bit (8 bytes) - IEEE 754 double precision ﬂoating-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

60.

61.

62. BlobBuilder

63. File Reader

64. ArrayBuﬀer An Array Of Bytes in Memory

65. ArrayBuﬀerView A view of a part of the ArrayBuﬀer

66. TypedArrays ArrayBuﬀerViews 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. ?