JavaScript Lesson 2: Output

0
21

JavaScript Output

The most important part to take away from this lesson is that the best way to use JavaScript to print or output data is by manipulating HTML Elements and modifying their values. This is what makes JavaScript such a powerful tool in your programming arsenal.

Let’s get started.

Manipulating HTML Elements

At some point during your programming experience, whether it be with HTML or with CSS, I am sure you have come across the id attribute. This attribute is going to be your new best friend. By giving an HTML Element and id value, you are able to modify that element with JavaScript.

The first manipulation statement we will learn is document.getElementById(id). By attaching .innerHTML to the end of this statement, we can modify the HTML of an Element. Let’s check out an example and then break it down.

Javascript Manipulation

That will be changed by JavaScript!

So what happened? Well, using the document.getElementById() statement, we were able to locate the Element with the id of test and modify its value with .innerHTML! So in essence, the first part of the statement is locating the HTML Element, the second part is telling what part of the Element to edit, and the final part is telling the value to change it too! Neat huh?

JavaScript Strings

Before we go any further, I want to explain what a string is. A string is a group of characters enclosed in quotations marks. The characters can be literally anything from letters, numbers, symbols, spaces and can be of any combination of them all and can vary between one character to an infinite number of characters. So in short a string can be a letter, a word, or a sentence.

Outputting Text

There are ways to output text to the HTML document using JavaScript, but they aren’t recommended. This is mainly because most of the time you can output the text without the use of JavaScript. Sometimes, usually for debugging purposes, you may want to output some data. You can do so with the document.write() statement. For this statement, you will put the output in between the parentheses. The output can be a text string, a variable, or a function. Let’s look at all three.

Source Code

Javascript Output

In this particular example we didn’t include any line breaks. Because of this, all the output is one right after another. We address this in the next section.

Special Characters

So we’re outputting some data, however it’s not looking too good clumped together like that. What we need is special characters. Special Characters serve a couple of functions. For example, what if you want to output the string:
Wikiprogramming is the "bomb"
I can’t think of why you would want to do this, and I’m sure you can’t either. However, in the instance you did you would need to be able escape the quotations so that JavaScript doesn’t read it as an end of the string. For this example, it would look something like this:
Wikiprogramming is the \"bomb\"
The backslashes (\) in this case escape the quotation allowing JavaScript to properly read the string. So much like the \" to create a quotation, you can use \n to skip to the next line. Let’s take the example in the previous section and apply some special characters to it.

Source Code Output

Javascript Output

Don’t worry too much about the syntax right now. We will cover what happened in Lesson 4 on Operators. The important thing is to recognize special characters and the purpose they serve.

List of Special Characters

Code Outputs
\’ single quote
\” double quote
\\ backslash
\n new line
\r carriage return
\t tab
\b backspace
\f form feed

Summary

  • The real power behind JavaScript is being able to manipulate HTML Elements
  • The id attribute can be used to call upon a certain HTML Element in JavaScript
  • JavaScript can output to an HTML document using document.write() but it’s not recommended
  • Special Characters can be used to manipulate the data output

Next Lesson

The defining factor of most programming languages is the ability to use Variables. JavaScript is no exception.

 

Leave a Reply