Escaping Characters document.write()

1. Escaping Charactersdocument.write()

2. Learning Objectives By the end of this lecture, you should be able to: • Recognize some of the characters that can cause bugs in programming code • Know how to “escape out” problematic characters • Be able to write relatively complicated document.write() statement that includes HTML attributes including one or more CSS stylesby escaping problematic characters Key Point: While this lecture spends lots of time discussing the document.write() function, a key learning objective is to understand why it is sometimes important to ‘escape’ characters. They are often useful and necessary when writing other jQuery commands as well.

3. The purpose of document.write() • It is extremely common for a programmer to be working through some JavaScript and find that they need to output some HTML to the web page. • In jQuery, we typically use functions such as html(), append(), prepend(), etc to do so. • One JavaScript (not jQuery) technique that technique that allows to do so is document.write() . We can also use the innerHTML command. • However, we will use document.write() as a technique to review the use of escape characters.

4. document.write() and concatenation • document.write will write whatever is inside the parentheses to your HTML page. This includes HTML markup. document.write("Hello"); document.write("<h1>Hello</h1>") • You can add as many strings together as you like by concatenating them with the ‘+’ operator: document.write("H" + "e" + "l" + "l" + "o"); • You can intermix strings and variables – very common: var name="Bob"; document.write("Hello, " + name); document.write("Hello, " + name + ", how are you?"); • How would you take the last line and put the name in bold ? document.write("Hello, <strong>" + name + "</strong>, how are you?");

5. Using your browser’s ‘BACK’ button • A document.write() command that is issued after a page has finished loading will often result in a new page being generated. For example, it will happen if you use the command following submission of a form. • To get back to your original page, simply pressing ‘refresh’ will usually NOT give you the results you want. This is because you are simply refreshing the page that resulted from the generated form or function, as opposed to the original page itself. • That is, you are, in essence, on a new page – even though the URL will show the original document. • For this reason, you often need to press ‘BACK’ to get to your original form (and then press ‘refresh’).

6. Place document.write()at the end Because document.write statements essentially create a new page on the browser, we typically try to place them as the last part of our script. For example, you should avoid having some document.write statements at the beginning of your code, then read some input from the form, then writing additional document.write statements, then have a calculation, then more document.write statements, etc. Instead, you should work out your script so that all of those statements are the last part of your script to execute. It may not always be possible, but it makes life easier if you can do so. Tip: Of course, don’t forget that you can also always use functions like append() and prepend() to place content in specific areas.

7. CSS inside document.write() Suppose you want to output the following HTML using the document.write() function: The crazy <span style="color:brown; font-weight:bold">brown</span> fox. You might think that the correct document.write statement would be: document.write("The crazy <span style="color:brown; font- weight:bold">brown</span> fox."); However, this will NOT work!! Can you see why?

8. When good quotes go bad… Recall that whenever we output a string, we need an opening quote at the beginning of our string, and a closing quote at the end of the string. E.g.: document.write("hello"); Also recall how whenever you have an HTML attribute/value pair, you must surround the value of the attribute with quotes: E.g. <img src="picture_of_dog.jpg"> How does your scripting code keep track of which quote is surrounding an attribute, and which quote is surrounding a string? In the example below, I have placed the quotes surrounding the entire string in blue, and the quotes surrounding the value of the style attribute in red: document.write("The crazy <span style="color:brown">brown</span> fox."); The problem is that JS will see the first attribute value quote (the first quote that you see in red) as the closing quote of the document.write() statement.

9. “Escaping a character” document.write("The crazy <span style="color:brown">brown</span> fox."); Our objective is to somehow tell the JavaScript interpreter to IGNORE the quotes in red. That is, we want to let the interpreter know that while the quotes need to be there, they are NOT intended to be JavaScript quotes. Rather, they should be treated as if they were meaningless (i.e. non programming-related) characters such as ‘3’ or ‘Q’ or ‘w’, etc. This is a very common issue in programming. As a result, every language gives us some way of notifying the interpreter that a given character (such as a quotation mark) should not be treated as part of the programming code. In JavaScript, the way to do this is to place a backslash before any problematic character. So the proper way to write the line above is to “escape” the two problematic quotation marks (the ones in red) by placing a backslash before each of them: document.write("The crazy <span style=\"color:brown\">brown</span> fox.");

10. Other potentially problematic characters There are other characters that show up quite a bit in HTML and CSS that could cause confusion to your JavaScript or jQuery code. Common ones include: • Quotations " • Semicolons ; • Pound Signs # • Etc So, whenever you are writing in a scripting language and come up with a situation where you need to notify the language engine to “ignore” a character, you must “escape” it somehow. Different programming languages have different methods of escaping a character. Again, in JS and JQ, this is done by preceding the character with a backslash. It is not a problem to escape a ‘normal’ character, that is, a character that would not ordinarily cause a problem. Therefore, if you’re not sure if a character will present a problem down the road,– just don’t go overboard! Eg: alert("\h\h\e\l\l\o\!\!\!"); Won’t hurt anything, but needlessly confusing!

11. Easiest way to do it When faced with all kinds of potentially problematic characters, it can get confusing about exactly where to put the escape characters. Here is one way of doing it: • Go ahead and simply throw all the code in. Don’t worry about special characters yet… document.write("<h1 style="color:red; background-color:blue">Some H1 text…</h1>"); • Then carefully go through the statement and look for any symbols (quotes, semicolons, etc) that might interfere with JS. document.write("<h1 style="color:red; background-color:blue">Some H1 text…</h1>"); • NOW go ahead and put your escape character before any potentially problematic character. document.write(" <h1 style=\"color:red\; background-color:blue\">Some H1 text…</h1> ");

12. Practice: Try outputting the following HTML code using document.write statements: <h1>Hello!!!</h1> document.write("<h1>Hello!!!</h1>"); <h1 style="color:#339900;">More H1…</h1> document.write("<h1 style=\"color:\#339900\;\">More H1…</h1>"); <img src="airplane.jpg" alt="Pic of a plane" > document.write("<img src=\"airplane.jpg\" alt=\“Pic of a plane\" "); <a href="http://www.depaul.edu"> DePaul </a> document.write("<a href=\"http:\/\/www.depaul.edu\"> DePaul </a>"); In the last example I chose to escape the forward slashes after ‘http’. The reason is that forward slashes are used for division. While I’m fairly certain that it would not cause any problems here, I chose to “escape” them just to be on the safe side. It doesn’t hurt to do so, so if you’re not sure, go ahead and escape.

13. @#%^!(Now he tells me!) All of this being said, at the end of the day you will find that we will not use document.write() all that much. Rather, programmers tend to use the functions discussed earlier such as html(), append(), prepend(), innerHTML, etc. The main reason to be familiar with the material in this lecture is that the issue of ‘escaping a character’ is important in programming.