Quiz

1. when do we need to know the different tags vs using a pre-determined template?

   I don't understand this question. We use the tags to write the templates, and then our Express app (our server.js file) loads the templates and uses them in creating response pages.

   Can someone help me out?

2. could you give another example of using a loop with EJS?

   Sure. Your code gets a list of students from the database:

   
   {name: "Alice", email: "aa123@wellesley.edu"},
   {name: "Betty", email: "bb234@wellesley.edu"},
   ...
   
   

   Ad you want to create a nice table of results:

   
   <table border=1>
       <tr><th>Name</th><th>Email</th></tr>
       <% students.forEach( function (s) { %>
       <tr><td> <%= s.name %></td><td> <%= s.email %></td></tr>
       <% }) </%>
   </table>
   
   
   

3. Can we see more use cases for partials?

   Assuming your website had multiple pages, with some custom elements (e.g. only the profile page has a form to update your profile) and some elements that appear on many/most pages (a button to logout, a footer with copyright info), then partials can be a good way to have a single definition of those duplicated elements.

   Examples:

   • headers/footers
   • flashing messages (we'll get to this soon)
   • Loop bodies:

     
     <table border=1>
         <tr><th>Name</th><th>Email</th></tr>
         <% students.forEach( function (s) { %>
            <%- include('partials/user-row.ejs', {s}) %>
         <% }) </%>
     </table>
     
     
     

4. How do partials work if we want the nav bar to look different on different pages? For example if we want to highlight the page we're on.

   What a great question! The basic idea is this:

   1. pass in a value from render saying what the current page is
   2. *generate* the list of links from a data structure
   3. have an if statement in that code that adds a marker for the current page
   4. For best accessibility, use aria-current=page as the attribute
   5. Use [aria-current=page] as a selector in the CSS.

   I loved this so much that I added it to the examples for today!

5. Could you clarify the difference between escaped and unescaped data? / can you talk more about escaped vs. unescaped values? / When would we use the "unescaped" data over the "escape data? (Basically when should we use <%- over <%=)

   I was planning to put this off for a bit, but y'all have forced my hand.

   (This will be covered in the reading on Security, after the break.)

   Imagine the dynamic content allows HTML. Is that okay?

   Here are two examples: XSS Demo