Unicode Generated by JavaScript
I'm working my way through several parallel programming activities, some of them are related to P2PU[1] which is a great way to get peer support as you develop skills...any skills, not just web coding and programming.
My goal in this case, was to take some first steps to using JavaScript to insert Unicode characters into my web pages.
First test steps:
This first section provides a few hand coded samples inserted into html. I needed to verify how codes should be entered into html. Using Google searches got me going. It always seems good to check the basic idea.
<p>Print the letter "A" using Unicode: A</p>
That gives us:
Print the letter "A" using Unicode: A
To get the character for the letter "A" using the Unicode (also known as UTF-8) code, you enter A ("A") as part of a text line, inside a paragraph tag. The semicolon is required at the end of the code. The ampersand-number code produces nothing special this time, just the letter "A" somewhere in the text. The uppercase alphabet is the Unicode/UTF-8 codes from 65 to 91. These are decimal values. Though not explored here, the lowercase codes are 97 to 122. I'll leave it to you to explore punctuation marks. There are also many codes which produce accented letters, alphabets with non Roman characters.
Ordinarily the guides you see show UTF-8 codes using standard decimal numbers for html/web pages not hexadecimal. Hexidecimal numbers can be used, but are coded with an x in the code to identify it as hexadecimal: A which is still just a capital "A". (Yes, decimal 65 is equal to hex 41. Clearly you'll need to explore hex further than is covered here.)
Maybe you'll think that this is worth looking further into this topic. ⏿ (⏿). The 🔑 (🔑) to success is exploration.
Scripted with loop from value 64 to 97
The next step was to try doing a JavaScript loop to make the basic set of letters. You can see I began one character before the letter "A" and ended after "Z" to extend my understanding. I looked up the codes for the 26 capital letters and added a script to my html page code (in the body section where I wanted to see the letters). This is the code I used. I started just before "A" and went a bit past "Z".
<script>
for (var i=64; i<97; i++){
document.write("&#"+i.toString()+"; ");
}
</script>
The results of the actual loop.
Script loop with values from 9728 to 10175
This next range covers the interesting "miscellaneous" and the "dingbats" groups of characters.
Review the excellent source for this Unicode information by Alan Wood. [2]
The script that did that bunch of UTF-8 characters was:
<script>
document.write("<p>");
for (var i=9728; i<10176; i++){
document.write("&#"+i.toString()+"; ");
}
document.write("</p>");
</script>
You may note that I added JavaScript to put the code in an official html paragraph block.
Divider line made with 80 of Thai 7 - ๗ characters.
This tests the one of the handcoded codes from before.
<script>
document.write("<p>");
for (var i=0; i<80; i++) {
document.write("๗")
}
document.write("</p>");
</script>
Divider line from random character between 9728 and 10175.
Finally, I set up a script which would do a "practical" job on a web page, making a divider line like the well known <hr>.
Unfortunately, the width of each character in the specified range is not consistent. The script, therefore, prints the random character only 50 times which will fit across a typical desktop browser window. Making the line centered also helps handle the appearance change between runs of the script. Go ahead refresh/reload the page and notice the change in the next line.
<script>
document.write("<p style='text-align:center'>");
var randomnumber=Math.floor(Math.random()*272+9728);
for (var i=0; i<50; i++) {
document.write("&#"+randomnumber.toString()+";");
}
document.write("</p>");
</script>
This document is licensed with the creative Commons Attribution (cc-by)[3] license to promote wide re-use and the JavaScript code is freely yours to reuse and modify.
Happy coding!
References:
[1] Peer to Peer University (P2PU) https://p2pu.org/en/
[2] UTF-8 code list http://www.alanwood.net/unicode/miscellaneous_symbols.html
[3] Creative Commons Attribution http://creativecommons.org/licenses/by/3.0/