JavaScript — HTML: Preprocessor Pug

• Unbuffered code
  • Interpolation of variables and expressions
• Buffered code
• Additional assignment

Pug allows you to use JavaScript to add logical expressions to a template. In the SASS course, we looked at many options for creating additional logic like variables, functions, loops, and conditional constructs.

The JavaScript inside Pug allows you to do the same but with slightly different syntax and features. It is a crucial part of working with the templating tool, allowing you to reveal it one hundred percent.

If you are not familiar with how JavaScript works and looks, you can take the Programming fundamentals course. It will teach you the basics of the language.

We can divide all JavaScript code inside the preprocessor into three main groups:

1. Buffered code
2. Unescaped buffered code
3. Unbuffered code

These words are scary, but the concepts are simple. Let us look at each of them separately.

Unbuffered code

A distinctive feature of unbuffered code is that it is not output into the final HTML. Any code in this style will not add a single line to the final code. Its purpose is to create additional logic within the preprocessor. These can be variables, arrays, loops, and so on. To create unbuffered code, we use the - symbol and add JavaScript code.

Create a variable with text and add it to the paragraph:

- const title = "Hexlet Training Programs"; // JavaScript code

.container
  .row
    .col-12
      h1 #{title}

<div class="container">
  <div class="row">
    <div class="col-12">
      <h1>Hexlet training programs</h1>
    </div>
  </div>
</div>

Interpolation of variables and expressions

The h1 #{title} construct helps to output the variable value in the last example. The #{} construct outputs the contents of a variable or an expression as a string:

- const one = 1;
- const two = 2;
- const action = "plus";

.calculation
  | #{one} #{action} #{two} = #{one + two}

<div class="calculation">1 plus 2 = 3</div>

There is one weird part of interpolation: HTML tag escaping. Instead of escape symbols, we use special mnemonic symbols. It works that way for security reasons: if you output the tags as is, there is a risk that someone can insert unwanted tags:

- const html = "<p>Paragraph text</p>";

.result
  | #{html}

<div class="result">
  &lt;p&gt;Paragraph text&lt;/p&gt;
</div>

Pug provides an option to change this behavior and output unescaped characters. We use the !{} construct for this, but be careful; using this code is a potential problem, especially when receiving data from the user:

- const html = "<p>Paragraph text</p>";

.result
  | !{html}

<div class="result">
  <p>Paragraph text</p>
</div>

Buffered code

If the unbuffered code doesn't interact directly with the layout, the task of the buffered code is to process the JavaScript and insert the layout result.

It is much easier to understand the difference in practice. Buffered code starts with the = symbol:

.plus
  p= 2 + 2

<div class="plus">
  <p>4</p>
</div>

As with interpolation, Pug escapes all HTML when using the buffered output for security:

.buffer
  p= "<span>Hello</span>, Hexlet"

<div class="buffer">
  <p>&lt;span&gt;Hello&lt;/span&gt;, Hexlet</p>
</div>

Unescaped buffered code can undo this effect. Like with interpolation, you need to insert the ! symbol. Although this action is possible, it's worth reiterating that using unescaped output is a bad practice because it creates potential security problems:

.buffer
  p!= "<span>Hello</span>, Hexlet"

<div class="buffer">
  <p><span>Hello</span>, Hexlet</p>
</div>

At first glance, there's no significant difference between buffered and unbuffered code. On the one hand, both methods allow you to add JavaScript logic to existing code, but there is a difference. Buffered code must first get the result, and only then will it be output. We can execute unbuffered code at any convenient time or not execute it at all.

• Unbuffered code is convenient when creating functions, arrays, and objects
• Buffered code is most often used when creating single-line functions or strings that consist only of JavaScript code

Additional assignment

Using the knowledge you've gained from the Programming fundamentals course, create a variable with a counter and, using a loop, increment it by two. Output the results as a list. Choose the number of iterations yourself. Determine where the buffered and unbuffered code will be.

Let us observe a sample result:

<ul>
  <li>1</li>
  <li>3</li>
  <li>5</li>
  <li>7</li>
  <li>9</li>
</ul>