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

Semelhante a Binary Programming in Javascript - Bits, Bytes and Blobs

23 gray codesAri Ramos Cabrera

Sistem bilanganMochNur Purnama

Lecture.1Faiza Memon

Binaryheidirobison

CSC103 Bits, Bytes & BinaryRichard Homa

Chapter1bMaeEstherMaguadMaralit

Semelhante a Binary Programming in Javascript - Bits, Bytes and Blobs (6)

23 gray codes

Sistem bilangan

Lecture.1

Binary

CSC103 Bits, Bytes & Binary

Chapter1b

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

Search Engine Optimization SEO PDF for 2024.pdfRankYa

Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited

E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxnull - The Open Security Community

New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada

The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech

Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity

"ML in Production",Oleksandr BaganFwdays

Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3

How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe

Anypoint Exchange: It’s Not Just a Repo!Manik S Magar

SIP trunking in Janus @ Kamailio World 2024Lorenzo Miniero

DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy

Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos

From Family Reminiscence to Scholarly Archive .Alan Dix

Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University

Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed

TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey

H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo DaySri Ambati

SAP Build Work Zone - Overview L2-L3.pptxNavinnSomaal

How to write a Business Continuity PlanDatabarracks

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