JavaScript — HTML: Preprocessor Pug

Pug allows you to use JavaScript to add logic to a template. In the SASS course, we looked at many options for creating additional logic: variables, functions, loops, and conditional constructs. The JavaScript inside Pug allows you to do the same, but with slightly different syntax and features. This is a crucial part of working with the templating tool, which allows you to reveal it one hundred percent.

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

All JavaScript code inside the preprocessor can be divided into three main groups:

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

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

Unbuffered code

A distinctive feature of unbuffered code is that it's not output into the final HTML. Any code written in this style will not add a single line of code 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 was used to output the variable value in the last example. This is an important part of Pug syntax. 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. This is done for security reasons: if you output the tags “as is”, there's a high probability that unwanted tags will be inserted.

- 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. The !{} construct is used 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 result in the layout. Don't worry, it's 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 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 is used to undo this effect. Like with interpolation, you just 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 yes, both methods allow you to add JavaScript logic to existing code, but there's a key difference, buffered code must first get the result, and only then will it be output. Unbuffered code can be executed at any convenient time or not be executed at all.

• Unbuffered code is convenient to use when creating functions, arrays, 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.

Sample result:

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

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.