mdnの「JavaScript の第一歩」を終えたまとめ【jsで簡易的なカート機能実装】

mdnの「JavaScript の第一歩」を終えたまとめ【jsで簡易的なカート機能実装】:

mdnの「JavaScript の第一歩」を終えたまとめです。

こういう構成になっていました。

1. JavaScript って何？

2. 最初のダイブ

3. 何が悪かったのか？JavaScript のトラブルシューティング

4. 必要な情報を保存する — 変数

5. JavaScript の簡単な数学 — 数値と算術演算子

6. テキストの処理 — JavaScript での文字列

7. 便利な文字列のメソッド

8. 配列

やりたいこと

Amazonなどのショッピングサイトでよくあるカート機能のような機能を実装したい。

すでにある配列の中に、特定のフォーマットに従って入力された値を配列として追加。

その値が5を越えると一番最初の値から削除されていく。

つまり、画面上には合計５つの商品・価格・作成者の名前とすべての合計金額が表示されていく。

（作成者の名前は頭文字だけが大文字）

デモ

http://liladesign.html.xdomain.jp/mdn/summary1.html

コード

test.html

  <!DOCTYPE html> 
  <html> 
  <head> 
    <meta charset="utf-8"> 
    <title>Number guessing game</title> 
  </head> 
 
  <body> 
    <h1>カートの中身</h1> 
    <div class="output" style="min-height: 150px;"> 
      <div class="totalbox"> 
      </div> 
 
      <div> 
        <h6><span style="color: red;">商品名,価格,作成者（半角英語）</span>で入力してください。</h6> 
        <input type="text"><button>検索</button> 
        <div class="listbox"></div> 
      </div> 
    </div> 
 
    <script> 
      // 使用する変数の定義 
      var list = document.querySelector('.output p'); 
      var listbox = document.querySelector('.output .listbox'); 
      var input = document.querySelector('.output input'); 
      var btn = document.querySelector('.output button'); 
      var total = 0; 
      var totalBox = document.querySelector('.totalbox') 
 
      // あらかじめ２つの値を配列に設定 
      var mygoods = [ 
      'バッグ,200,yoshida', 
      '車,450,ino' 
      ]; 
 
      // あらかじめ設定されている値をループ 
      for(var i = 0 ; i < mygoods.length ; i++) { 
        subarray = mygoods[i].split(','); 
        var name = subarray[0]; 
        var price = subarray[1]; 
        var maker = subarray[2]; 
 
        itemText = maker + 'さんのてがけた' + name + 'の値段は' + '¥' + price + 'です'; 
 
        total += Number(price); 
 
        var listItem = document.createElement('li'); 
        listItem.textContent = itemText; 
        listbox.appendChild(listItem); 
      } 
 
      // あらかじめ設定されている値の合計金額を表示 
      var totalBoxIn = document.createElement('h3'); 
      totalBoxIn.textContent = 'ただいまの合計金額' + total + '円です！！'; 
      totalBox.appendChild(totalBoxIn); 
 
 
      // 新たに追加される値のループ処理 
      btn.onclick = function update() { 
        // 配列に追加 
        mygoods.unshift(input.value); 
        // 現在のリストを空白に 
        listbox.innerHTML = ''; 
        // 現在の合計金額を空白に 
        totalBox.innerHTML = ''; 
        // 合計金額を初期化 
        total = 0; 
 
 
        for(i = 0 ; i < mygoods.length ; i++) { 
          // １つの文字列を３つの配列に分割 
          subarray = mygoods[i].split(',') 
          // 配列１つ１つを取得 
          var name = subarray[0]; 
          var price = subarray[1]; 
          var maker = subarray[2]; 
 
          // リストの作成 
            // 表示するメッセージをあらかじめ定義 
            itemText = maker + 'さんのてがけた' + name + 'の値段は' + '¥' + price + 'です'; 
            // li要素を生成 
            var listItem = document.createElement('li'); 
            // 生成したli要素の中身を生成 
            listItem.textContent = itemText; 
            // listboxに生成したli要素を追加 
            listbox.appendChild(listItem); 
 
            total += Number(price); 
 
          // 入力欄を初期化 
          input.value = ''; 
 
          // 入力欄にカーソルを当てる 
          input.focus(); 
        } 
 
        // 新たに追加される値の合計金額に表示変更 
        var totalBoxIn = document.createElement('h3'); 
        totalBoxIn.textContent = 'ただいまの合計金額' + total + '円です！！'; 
        totalBox.appendChild(totalBoxIn); 
 
        // 新たに追加される値の合計金額をウィンドウ表示 
        var message = '合計金額は ¥' + total + 'です'; 
        alert(message); 
      } 
    </script> 
  </body> 
  </html>

こんとこで使えそう！

・ショッピングサイトのカート

・ゲームなどをしている時のカウント

など、リアルタイムにアクションの結果を得たいときに使えそうです！

この結果をデータベースを通してやりとりできるようになれば、googleのスプレッドシートみたいなやつが作れちゃったりするんですかねえ。

感想

でも、ここまでだと他のサーバーサイド言語で処理しているのとやってることは変わりませんね。

サーバーとやりとりできない時点であまり使い所のない機能といったところでしょうか。。。

使えるとしたら、使ったことのないよくわからないサーバーサイド言語で配列を返されてるものを、無理やりjsを使ってループ表示したいときなどでしょうかww

ここまでで得た知識

・文字列の処理（連結・分割・型の変更など）

・要素の取得（documentSelector）

・要素の追加（document.createElement,appendChild）

・テキストの変更（textCOntent）

・ループ（for）

・配列

このブログを検索

IT音痴アラフィフおやじのストック記事倉庫