making a hyper-text markup library

#javascript #html #library

i'm going to try to create a hyper-text markup (htm) library. but how is this even possible?

i'm going to mess around with some pretty experimental ideas. but for now, as far as this post goes, i'm not going to make any actual special capabilities.

so as far as the original htm language, i'm going to use html5 (hyper-text markup language 5) which includes css and javascript (there are more, eg php, but we'll ignore those for now). obviously we can't do much with static html or css, so that leaves us with javascript to add a library.

this adds a couple more problems. how are we going to get the javascript to properly interact with the html? javascript only runs in script tags, html only runs outside of script tags.

to solve both of those problems at once, we can make it document.write everything we write in a specific variable or id. this means that we'll write everything, javascript and html, in a specific tag. that makes it easy, because we can wrap a script tag in an html tag, and then add an id to the html tag.

<!--main page.-->
<!DOCTYPE html>
<script src="/htmLibrary.js"></script>
<html id="newHTM">
<div>some epic text goes here!</div>
<epicProprietaryBlock>some even epic-er text goes here!</epicProprietaryBlock>
<script>
  function totallyNormalJS {
    alert("Look! JavaScript works just fine too!")
  }
</script>
</html>

but does that work? well, before we get ahead of ourselves, we have to write the actual htm library.

//htmLibrary.js
  function applyLibrary() {
    var newHTM = document.getElementById("newHTM");
    document.write(newHTM);
    alert("this is a debug thing that proves this function loaded!");
  }
  applyLibrary();

Now this doesn't apply the special <epicProprietaryBlock>, but it should properly write all of the HTM. right?
well, if you export all that we've made here, it all loads everything, but what is that null that appears?

and how are we going to get rid of it?

well, we could just strip all instances of null from the html. but what if the user wants to say null somehwere in their code?

but the problem lies deeper than that. think about it: we put the customized html in an html tag. that means that all of that is going to be displayed in real time. and it's also going to be sent to the library. that means that even if it worked, it would have been duplicated.

so to fix it, let's shove it into a <script> tag and add a .value to the end of the document.getElementById. now, instead of getting null, we just get...

nothing! that didn't go very well. let's enter the developer console and see what happens.

TypeError: document.getElementById(...) is null

uh-oh. how do we fix this?

well by looking around, i found that we shouldn't use .value. we should use .innerHTML! But that doesn't fix it either (it was a problem we saw ahead of time).

So, the answer? Repeated variables. We just have to change the id that the code is wrapped in, and it will work! There's just one more problem: it still doesn't show anything until we run it manually. How do we fix this?

Well, one way we could do so is just by removing the function altogether and have it simply run blank. But it still doesn't work. Why? The script is loading before the actual page can finish loading. In fact, we still get the TypeError on loading.

The task looks daunting, but it's not. The easiest way to fix this is to simply have another tag at the bottom of the main page like this: <code> window.onload = applyLibrary(); </code> so that's what we have to do to get it to run the html within a script tag. but what about custom html? well, it's actually quite simple. we just need to have it treat these custom blocks as variables. but this post is getting too long. maybe some other time. bye, guys!