White Space in ECMAScript 2015

ECMAScript Basics - Part 13

ECMAScript 6

Foreword: In this part of the series, I explain what is white space and how it is used in ECMAScript.

By: Chrysanthus Date Published: 12 May 2016

Introduction

This is part 13 of my series, ECMAScript Basics. In this part of the series, I explain what is white space and how it is used in ECMAScript. When an ordinary man looks at a printed document or a web page, he can call the spaces that do not have text or pictures, whitespace. These spaces are actually blank spaces; they do not have to be white in color.  On a computer screen, some of these spaces have characters and a programmer has to be conscious of which character creates which particular type of white space. The meaning of these characters and their particular type of whitespaces are listed and explained in this tutorial.

Type of Characters
The ordinary man considers, A, as a character, B, as another character, C, as another character, 5 as a character, 7 as character, and so on. On the computer keyboard, you see non-commonly used characters such as the asterisk, *. In many computer languages, a white space character consists of two items. It begins with a backslash followed by text. These two items effectively form the whitespace character. For example, \n, is a white space character for a good number of computer languages. These two-item characters are better called Escape Sequences.

On a web page, the user sees the effect (space) created by these escape sequences; the user does not see any escape sequence.

The Space
While typing in a text editor, when the computer user presses the spacebar of the keyboard, a space is created on the screen. In ECMAScript, the escape sequence for this space is, \u0020. The two items involved are the backslash and u0020. Try the following code:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>

    <script type="text/ECMAScript">

        document.write('text\u0020text');

    </script>

</body>
</html>

The extra HTML code is to produce a web page.

The Horizontal Tab
While somebody is writing with a pen on a peace of paper, if he wants to start a new paragraph he does not start at the left margin; he shifts a bit to the right (indents). That indentation can be considered as a horizontal tab. There is an escape sequence that can be used to achieve this with ECMAScript. It is, \t. It begins with a backslash, followed by ‘t’ in lower case. This special character or escape sequence is called the horizontal tab (i.e. \t).

Try the following code:

    <script type="text/ECMAScript">

        alert('\tsome text');

    </script>

The text in the alert box displayed, is shifted (indented) to the right.

The Vertical Tab
As the horizontal tab exists, a Vertical Tab in the vertical direction also exists. For many languages, the escape sequence for the vertical tab is ‘\v’. You have a backslash followed by ‘v’ in lower case. Try the following code (it may not work with your browser):

    <script type="text/ECMAScript">

        alert('\vsome text');

    </script>

Form Feed
A form feed is more of an instruction than a blank space character. It is called a white space character because it can cause a blank space. Imagine that there are about ten lines of text for a document. Also imagine that in the middle of this text, you have the escape sequence, f, which is what many languages use as the form feed character. Now while the page that has this text is being printed (displayed), when the printer (or screen) reaches this escape sequence, it should not print the rest of the text below on the current page; it should advance the page, leaving a blank space and then starts printing the rest of the text on the next page (paper). Form Feed means: print the rest of the text on the next page, just after feeding in the next page (paper to the printer). If the printer meets this character at the end of the current page, then no blank space would be produced, as the rest of the text would be printed (or displayed) on the next page fed.

Line Terminators
Two escape sequences are described below as whitespace characters, but they do not really produce blank spaces. However, they affect where the next line of text would be printed or displayed.

The space, horizontal tab and vertical tab white space characters are by themselves blank spaces. The form feed character can produce a blank space depending on its position in the current page; in itself, it is more of an instruction than a blank space character. The two escape sequences below, are not really blank characters by themselves. They are actually line terminators, but in many forums they are called, whitespace characters.

Carriage Return
Imagine that a line of text is to be displayed (printed) and there is the escape sequence, \r in the middle of the line of text. \r is known as the Carriage Return character for many languages. When the printer or screen reaches this point, it sends the ink (or light) to the beginning of the current line. After this, if printing were to continue, the current line will be written over, by the right half of the line of text. The carriage return escaped sequence is normally used in conjunction with the Newline escape sequence - see below.

The Newline
Imagine that a line of text is to be displayed and there is the escape sequence, \n in the middle of the line of text. \n is known as the Newline character for many languages. When the printer or screen reaches this point, it sends the ink (or light) to the next (to-be-displayed) line. It is not clear whether the ink should go to the beginning or middle or end of the next line. If the programmer wants printing to continue at the beginning of the next line, then he has to use both \r and \n together (i.e. \r\n) at the same point in the line of text. With ECMAScript (compilers, interpreters or parsers), \n alone serves the purpose of the presence of both \r and \n. Try the following code:

    <script type="text/ECMAScript">

        alert('the first line\nthe second line');

    </script>

The alert box should display two separate lines, one above the other.

That is it for this part of the series. We stop here and continue in the next part.

Chrys

Broad Network

Related Articles

White Space in ECMAScript 2015

ECMAScript Basics - Part 13

ECMAScript 6

Introduction

Related Links

Comments