1. Escaping Characters document.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 styles by 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.

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. The alert() function is one means of outputting information, but is not a great choice for doing so. Reasons include: o Alert boxes are not capable of generating HTML. They can only generate standard text. o Alert boxes require the user to click ‘OK’ for every box that pops up. If you want to output multiple statements at various points throughout your script, this would generate multiple boxes which would quickly become annoying! However, there is a JS function that allows us to output HTML source code. In addition, this function does not generate boxes that must be clicked on to make them disappear. This function is called document.write(). Tip: That being said, if you want to quickly output some information, such as when you are testing your code, definitely feel free to use an alert() function.

4. The document.write() function document.write will write whatever is inside the parentheses to your HTML page. This includes HTML markup. document.write("Hello"); document.write(" Hello ") 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, " + name + ", how are you?");

5. Using your browser’s ‘BACK’ button JS will often result in a new page being generated. This frequently occurs following submission of a form. It also occurs after certan functions such as document.write(). 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 fox. You might think that the correct document.write statement would be: document.write("The crazy brown 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. 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 brown fox. " ); The problem is that JS will see the first attibute 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 brown 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 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! 10

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: 1.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… "); 2.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… "); 3.NOW go ahead and put your escape character before any potentially problematic character. document.write(" Some H1 text… "); 11

12. Practice: Try outputting the following HTML code using document.write statements: Hello!!! document.write(" Hello!!! "); More H1… document.write(" More H1… "); document.write("<img src=\"airplane.jpg\" alt=\“Pic of a plane\" "); DePaul document.write(" DePaul "); In the last example I chose to escape the forwardslashes 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. 12

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. The main reason to be familiar with the material in this lecture is that the issue of ‘escaping a character’ is important in programming and will definitely play a role down the road.