Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
JavaScript DataView()
The JavaScript DataView provides a low-level interface for reading and writing multiple number types in binary ArrayBuffer. You cannot manipulate ArrayBuffer directly without using DataView().
Syntax
new DataView(buffer) new DataView(buffer, byteOffset) new DataView(buffer, byteOffset, byteLength)
Parameters
- buffer - The ArrayBuffer to create a view for
- byteOffset - (Optional) Starting byte offset, default is 0
- byteLength - (Optional) Number of bytes to include, default is buffer's length
Basic Example
<!DOCTYPE html>
<html>
<head>
<title>DataView Example</title>
</head>
<body>
<div id="result"></div>
<button onclick="demonstrateDataView()">Run DataView Demo</button>
<script>
function demonstrateDataView() {
// Create an 8-byte ArrayBuffer
var buffer = new ArrayBuffer(8);
var view = new DataView(buffer);
// Set different data types
view.setInt16(0, 0x2721); // Set 16-bit integer at offset 0
view.setFloat32(2, 3.14159); // Set 32-bit float at offset 2
// Read the values
var int16Value = view.getInt16(0);
var floatValue = view.getFloat32(2);
document.getElementById("result").innerHTML =
"Int16 (hex): 0x" + int16Value.toString(16) + "<br>" +
"Int16 (binary): " + int16Value.toString(2) + "<br>" +
"Float32: " + floatValue;
}
</script>
</body>
</html>
Output
Int16 (hex): 0x2721 Int16 (binary): 10011100100001 Float32: 3.1415898799896240
Common DataView Methods
<!DOCTYPE html>
<html>
<head>
<title>DataView Methods</title>
</head>
<body>
<div id="methods-result"></div>
<button onclick="showMethods()">Show DataView Methods</button>
<script>
function showMethods() {
var buffer = new ArrayBuffer(16);
var view = new DataView(buffer);
// Set different data types
view.setInt8(0, 127); // 8-bit signed integer
view.setUint8(1, 255); // 8-bit unsigned integer
view.setInt16(2, -1000); // 16-bit signed integer
view.setUint16(4, 65000); // 16-bit unsigned integer
view.setInt32(6, -2000000); // 32-bit signed integer
view.setFloat64(8, 3.141592653589793); // 64-bit float
// Read the values
var result = "Data stored in ArrayBuffer:<br>";
result += "Int8: " + view.getInt8(0) + "<br>";
result += "Uint8: " + view.getUint8(1) + "<br>";
result += "Int16: " + view.getInt16(2) + "<br>";
result += "Uint16: " + view.getUint16(4) + "<br>";
result += "Int32: " + view.getInt32(6) + "<br>";
result += "Float64: " + view.getFloat64(8);
document.getElementById("methods-result").innerHTML = result;
}
</script>
</body>
</html>
Output
Data stored in ArrayBuffer: Int8: 127 Uint8: 255 Int16: -1000 Uint16: 65000 Int32: -2000000 Float64: 3.141592653589793
Key Points
- DataView provides methods for reading/writing integers and floats of various sizes
- Methods include getInt8(), setInt8(), getFloat32(), setFloat32(), etc.
- Byte offsets must be within the buffer bounds
- DataView handles endianness (byte order) automatically
Common Use Cases
- Working with binary file formats
- Network protocol implementation
- Interfacing with WebAssembly
- Low-level data manipulation
Conclusion
DataView provides essential low-level access to ArrayBuffer data, enabling precise control over binary data reading and writing. It's particularly useful for working with binary formats and network protocols.
Updated on: 2026-03-15T23:18:59+05:30
232 Views
Advertisements