Register to get access to free programming courses with interactive exercises

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>

Hexlet Experts

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

The Hexlet support team or other students will answer you.

About Hexlet learning process

For full access to the course you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
130
courses
1000
exercises
2000+
hours of theory
3200
tests

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 130 courses, 2000+ hours of theory
  • 1000 practical tasks in a browser
  • 360 000 students
By sending this form, you agree to our Personal Policy and Service Conditions

Our graduates work in companies:

<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.bookmate">Bookmate</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.healthsamurai">Healthsamurai</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.dualboot">Dualboot</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.abbyy">Abbyy</span>
Suggested learning programs
Layout Designer icon
Profession
Under development beginner
Layout with the latest CSS standards
start anytime 5 months

Use Hexlet to the fullest extent!

  • Ask questions about the lesson
  • Test your knowledge in quizzes
  • Practice in your browser
  • Track your progress

Sign up or sign in

By sending this form, you agree to our Personal Policy and Service Conditions
Toto Image

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.