How to Use IrfanView’s Built-In Effects for HTML5 and CSS3 Programming
How to Create a New JavaScript File in Komodo Edit
How to Register a Domain Name for Your HTML5 and CSS3 Site

How to Create Simple HTML5 Application Output with JavaScript

When writing applications in JavaScript, you must confront some issues before being really ready for them. It’s a chicken-or-egg scenario — which technique should you address first? That’s how it is with application output.

To see how some programming techniques work, you need to know how to write output to the application screen. Of course, you really need to know more about JavaScript before you can master the technique of writing anything to the screen.

How to write to an HTML element

HTML documents are made up of individual elements. An element is any tag that you use to hold content, such as a <div>, <p>, or <input> tag. You can write information to any of these elements by using JavaScript. The following example shows how you can write to specific elements.

<!DOCTYPE html>
<html>
<head>
  <title>Outputting Data to HTML</title>
  <script language="JavaScript">
   function WriteText()
   {
     document.getElementById("myText").innerHTML =
      "Clicked!";
   }
  </script>
</head>
<body>
  <h1>Creating HTML Element Output</h1>
  <div><p id="myText">Change Me</p></div>
  <div><input id="btnClickMe"
        type="button"
        value="Click Me"
        onclick="WriteText()" />
  </div>
</body>
</html>

In this case, the page contains a <p> tag with an id of myText. This paragraph contains the text Change Me. In addition, there’s an <input> tag that creates a button the user can click. When the user clicks the Click Me button, the application calls the WriteText() function that appears in the <head> of the document within the <script> tag.

JavaScript has several global objects you can access with your code. One of the most important objects is document, which refers to the entire HTML document. Of course, you don’t want to change the entire document; you want to change just one element within the document. The getElementById() function retrieves any element that has an id attribute by the name of that attribute, which is myText in this case.

At this point, you have access to the entire <p> element with the name myText. You want to change the text within that element. The innerHTML property provides access to the text within the <p> element. You can either read the content or modify it. Using innerHTML =, as shown in the code, modifies the content. It makes the content equal to whatever follows, which is Clicked! in this case.

When you try the example, you initially see a page with some text and a button. Click the button, and the value of the text changes. This technique works with any element that displays text. You could just as easily use it with a <span> or any other tag that can display text.

This technique works only when you interact with elements that contain text within an opening and closing tag, such as <p>. When working with an <input> or other element that uses attributes to hold content, you need to use a different method. In this case, you must access the attribute within the control and make the change there, as shown here:

document.getElementById("btnClickMe").setAttribute(
  "value", "Clicked!");

In this case, you ask JavaScript to obtain access to the btnClickMe <input> element in the document and then to set the value attribute to Clicked!. The result is the same as when working with the <p> tag, but the approach is slightly different. The innerHTML property is useful only for elements that have a value assigned to that property.

How to create direct document JavaScript output

In some cases, you don’t want to interact with an existing element, so you create a new element that contains the content you want to see. For example, you can add a new <p> tag that contains the text you want to see. JavaScript provides a number of ways to accomplish this task.

The simplest way to perform the task is to create an inline script like the one shown in the following example that adds the required output.

<!DOCTYPE html>
<html>
<head>
  <title>Direct Document Output</title>
</head>
<body>
  <h1>Creating Direct Output</h1>
  <script language="JavaScript">
    document.write("<p>This is direct output</p>");
  </script>
</body>
</html>

The focal point of this example is the call to the document.write() function. This function lets you write any text you want to the document object. In this case, the example creates a new <p> tag that contains a simple message.

You could easily create this text by adding the <p> tag directly. This particular technique comes in handy. For example, you could use it to check for a condition and then add the appropriate text based on the condition. What you need to see in this example is that writing to the document using a script is indeed possible.

Avoid potential problems with output

Bugs can cause all sorts of problems for users who will, in turn, cause all sorts of problems for you. One of the more interesting errors that you can encounter is writing information to a document object incorrectly. The following illustrates one situation where you see the incorrect result from using the document.write() function.

<!DOCTYPE html>
<html>
<head>
  <title>Incorrect Output</title>
  <script language="JavaScript">
   function WriteText()
   {
     document.write("Oops!");
   }
  </script>
</head>
<body>
  <h1>Creating HTML Element Output</h1>
  <div><p id="myText">Change Me</p></div>
  <div><input id="btnClickMe"
        type="button"
        value="Click Me"
        onclick="WriteText()" />
  </div>
</body>
</html>

Notice that the document.write() function is called after the page is completed. When you use the document.write() function in this way, it overwrites everything that appears in the document object. When you click the Click Me button on the page, you see the word Oops! onscreen and nothing else.

In fact, the page won’t even finish loading because the browser doesn’t know what to do with it. To stop the loading process, you must manually click your browser’s Stop Loading button.

At this point, if you use your browser’s ability to view the page source, you’ll see a single word, Oops!. The page no longer contains a <!DOCTYPE> declaration, <html>, <head>, or <body> tags, or any of the other information it used to contain. The document.write() function has overwritten everything.

Now, this isn’t always an incorrect result — you may actually need to overwrite the page with new material, but you need to create an entirely new page when doing so.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
10 Stellar Web Resources for HTML5 and CSS3
How to Create Cascading Style Sheets (CSS) Simply and Easily
How to Use IrfanView to Process Image Batches for HTML5 and CSS3 Programming
How to Use the Date Object to Integrate JavaScript with HTML
How to Use an External Style Sheet for HTML5 and CSS3 Programming
Advertisement

Inside Dummies.com