7. EJSを使った値の表示(2週目)
EJSを使って値を表示しよう
EJSとは
HTMLの中にJavaScriptが使えるNode.jsパッケージのことを指す
point
JavaScriptを使用するには2つの方法がある。
- <% %>
- <%= %>
- <% %>
=を使わない場合、文字が見えなくなる。この際に変数の定義などに使用される。
2.<%= %>
=がある場合、文字が可視化する。
変数の値をブラウザに可視化したければこちらを使用する。
演習問題
EJSをコマンドプロンプトにインストールする
<%= %>を使用しアイテム(item)を定義する
定義する方法
全体を<% %>にて括る。
itemを出力(const)するには = から先はさらに{}で括る。
日本語は''で括る。
{}後には必ず;セミコロンにて締める。
EX.演習内容より、IDおよび商品名を追加した例
<% const item = {item id: 4, name: 'とまと'}; %>
このように書く。
i'd-colum name-columそれぞれに<%= %>を使用し、id,name それぞれプロパティの値を表示させる
Ex.
<% item.id %>
<% name.id %>
このように書く。
Ex.
<li>
<span class= id-column>
<% item.id %>
<span class= name-column>
<% item.name %>
</span>
</li>
今回はここまでになります。お疲れ様でした。