I thought it might be illustrative to keep a diary of my latest battle with JavaScript. I have decided that I really shouldn’t be keeping several hundred K of data inside the script. It really should be stored in a file that is read in by the JavaScript. So I decided to tackle this problem once and for all.
Contemplating the problem, I had a realization that I have written up in another essay entitled “The Borg Versus the Dinosaur”. It goes a long way to explain why I’m so crotchedy about the problems I keep encountering with JavaScript.
First attempt
OK, so I search the web for {JavasScript read file} and hit upon this page. Wow! This looks trivially easy. So I copy the code and paste it into my program, make a few tiny adjustments, and try it out. Here’s what it looks like:
const fs = require('fs’);
fs.readFile('Input.txt', 'utf-8', (err, data) => {
if (err) throw err;
debugger;
});
This yields the following error message:
Exception with thrown value: ReferenceError: Can't find variable: require
OK, apparently ‘require’ isn’t part of the JavaScript language. Apparently I have to teach the program what “require” means. Since I don’t know what “require” means, it looks as if I’m out of luck. I search the Internet for {JavaScript require} and find this explanation:
require is not part of javascript , it is a keyword used in nodejs. nodejs isnt the DOM you use client side.so a script that may work with nodejs might not work in the browser. Can you call window or document in nodejs ? no , well same for require with the browser.
This explanation reminds me of Samuel Johnson’s definition of a network: “Any thing reticulated or decussated, at equal distances, with interstices between the intersections.” That sure clears up things, doesn’t it?
Time to move on.
Second attempt
The second hit in my Google search takes me to this page, which provides this helpful introduction:
The first step in any data processing is getting the data! Here is how to parse in and prepare common input formats using D3.js
Uh-oh! Now we’re talking about some handy-dandy piece of software called D3.js. I’m sure that those already familiar with it will call it a ‘piece o’ cake’ that I can have up and running in two minutes flat. Yeah. Right. Sure. I’ve been down this rabbit hole too many times to believe that line. You don’t figure out one technical mess by importing another technical mess. Time to move on.
Third attempt
The third hit is a request for help reading a CVS file; the problem concerns the format of a CVS file, so I’ll skip it. However, it does reference something called XMLHttpRequest() which I have seen many times before. Perhaps I should bite the bullet and figure out what this XMLHttpRequest() thing is about.
So I search for {JavaScript XMLHttpRequest} and find this page. It offers this code snippet:
function reqListener () { console.log(this.responseText);
}
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener);
oReq.open("GET", "http://www.example.org/example.txt");
oReq.send();
In the immortal words Christopher Columbus uttered upon discovering America, “Whut the hay-ull????” I want to load a file, but this appears to do a great deal more than just read a file. But I keep reading. And reading. And reading. The explanation of this single function goes on for many pages. Apparently XMLHttpRequest is just a bit short of being a complete operating system, allowing you to transfer data in a hundred different ways, formats, styles, colors, and flavors. And there are plenty of weird statements, like this jewel:
Setting overrideMimeType does not work from a Worker. See bug 678057 for more details. Other browsers may handle this differently.
Nevertheless, I might as well give it a try. So I copy the code exactly as above into my own script, with just a few changes:
function reqListener () {
debugger;
console.log(this.responseText);
}
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener);
oReq.open("GET", "http://www.erasmatazz.com/AList.json");
oReq.send();
And I get the following error messages:
Origin null is not allowed by Access-Control-Allow-Origin.
XMLHttpRequest cannot load http://www.erasmatazz.com/AList.json due to access control checks.
Hmm… perhaps I can cure this by loading directly from the same directory as the page containing the script, by changin one line of code thusly:
oReq.open("GET", "AList.json");
No dice; I get these errors:
Cross origin requests are only supported for HTTP.
XMLHttpRequest cannot load file:///Users/chriscrawford/Documents/MyDocuments/Arthurian%20Stuff/LMD%20Test/AList.json due to access control checks.
So I look at several other sites and find equally obscure explanations of this monstrosity called XMLHttpRequest. But one of them mentions something called ‘fetch’, so I search on that. It turns out that fetch() is even hairier than XMLHttpRequest, so I run away with my tail between my legs, yelping.
What’s especially frustrating about all this is the JavaScript is ridiculously easy to use if you only wish to load an image:
var img = new Image; img.src = "http://www.erasmatazz.com/MyPicture.png”;
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0,500,675);
Why can’t loading text be as simple and easy as this? Maybe it would be easier to encode text into an image, then decode the text from the image once it’s in…
There’s another possibility: Ajax. Several people have urged me to utilize this tool. I found a nice explanation of Ajax here. It seems that everybody uses Ajax. And gollygee whilikers, the explanation is only ten pages long. I suppose that I’ll just have to read the damn ten pages and go the long way. I feel like I have to take the freeway to go next door. I suppose that I have no choice.