Web Developer Tutorial: Escape Characters
I get letters now and again asking how people are able to create such great looking alert and prompt boxes, along with properly formatted text, including often used ascii characters. They also want to know how people get line breaks and double and single quotes to show up so nicely.
The Prompt Example Using Escape Characters
Let's do the prompt first. I made it pretty small on text. Click the button to trigger the prompt to show up.
Hopefully you can scroll this page and show the code that created the text while at the same time showing the prompt box. That'll help greatly when you see the code:
var name = prompt("Please write your \'name\' in the box\r
Write it with \"quotes\" like this.","");
Look closely. You'll notice the single quotes were created with this: \'
The return was created with this: \r
The double quote was created with this: \"
The backslash is the key. If you plop that in front of the quotes or the letter "r" you escape the coding long enough for the script to understand you want the character to represent text rather than a command to be used in the coding. That's why we call it an escape character. Get it?
I have another similar tutorial on this topic regarding tabs. There's no real method of getting tabs in HTML. You need to use a table to get the nice columns. Well, if you use the escape character \t and write the text using a document.write method, you'll get the tabs. You can see the tutorial here.
I'll show a quick example using document.write later on in this tutorial. Now on to the Alert example.
The Alert Example Using Escape Characters
I used all four escape characters in this example. Note I sometimes used two to get a double tab or a double return. Position the scroll of the page so that the code is at the bottom and you can look at the alert box at the same time. Once you have that, click the button.
Now here's the code. This should all be written on one long line. It's probably trancating on your screen though. Just make a point of going through it piece by piece and you'll see each of the escape characters at work.
alert('OK Then!\r\rYou want a neat box like \"this\" one?\r\rWell!\r\rYou\'ll need:\rBrains\tBeauty\t\tTalent\rMoney\tDog food\t\tLuck\rA Cat\tEye of Newt\tA Shrubbery!\r\rAnd the ability to \'read\' this tutorial.\r\rOK?')
The document.write Example Using Escape Characters
You wouldn't want to use the retun character in a document.write because it's better to literally write a BR or P tag to the page. Where these escape characters come in real handy is when you need to use a double or single quote yet you do not want to end the line. For example, the line just below this one was written with a document.write command:
Anybody else have parents that sounded like that? Mine did. It was the only sentence I could think of that had a single and double quote in it. Huh. I guess I have issues to work out. Here's the code:
document.write('We\'re going to \"need\" to know where you\'re going tonight, young man!')
Read slowly and pick out the escape characters. Here are a few others that you may want to use at some point:
e, Acute accent é --> é
Ampersand & --> &
Registered trademark ® --> ®
Copyright © --> ©
Trademark ™ --> ™
Left Double Quote “ --> “
Right Double Quote ” --> ”
Left Single Quote ‘ --> ‘
Right Single Quote ’ --> ’
I'll bet those little blips of information on escape characters just made someone's life a little easier. At least now we'll have less alert boxes that do not talk in contractions.