shinoblog-manabu

Progate(プロゲート)を使って初歩の初歩からプログラミング勉強をはじめました。無料から有料バージョンへ以降しつつ、自分辞書として活用しています。なるべく私と同じ初心者目線を使い、各プログラミング内容を説明したいです。

7. EJSを使った値の表示(2週目)

EJSを使って値を表示しよう

EJSとは

 

HTMLの中にJavaScriptが使えるNode.jsパッケージのことを指す

 

point

JavaScriptを使用するには2つの方法がある。

  1. <% %>
  2. <%= %>

 

  1. <% %>

=を使わない場合、文字が見えなくなる。この際に変数の定義などに使用される。

 

 

 

     2.<%= %>

=がある場合、文字が可視化する。

変数の値をブラウザに可視化したければこちらを使用する。

 

 

演習問題

EJSをコマンドプロンプトにインストールする

f:id:shinoblog-manabu:20210228084534j:plain

 

 

 <%= %>を使用しアイテム(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>

 

 

今回はここまでになります。お疲れ様でした。