# 【InFiNiTO Club】プログラミング講座4回目
## 初期準備
Teams上にアップロードした資料をダウンロードしてください。
Zipファイルですので解凍してデスクトップにフォルダを配置してください。
今日の授業で使うのは「04_js」というフォルダです。
このフォルダをVsCodeで開いた状態で授業に進んでいきます。

本日使う授業フォルダに入っているもの。

01-array.html
02-omikuji_tpl.html
array_date.html
css/practice.css
css/sample.css
js/jquery-2.1.3.min.js

今日の授業では04_jsフォルダ内の各htmlファイルを開いて作業していきます。

## セクション１　配列
### 1-1 VsCode上で01-array.htmlを開いてscriptタグの中に配列の中身を表示する。

console.log(weekdays[0]);

表示は日曜日になっているはずです。
配列内のデータの数え方は0から始まります。
演習：木曜日を表示したい場合のconsole.log()を書いてください。

### 1-2 配列の中身のデータの数を数えてみる。

console.log(weekdays.length);

### 1-3 【演習】おみくじ（配列版）を実装してみる。
10分間与えるので実装してみる。
答え合わせは授業内で。

## セクション2　反復処理(for文)
### 2-1 VsCode上で01-array.htmlを開いてスクリプトタグの中に新たにfor文を作成

//for文
for (let i =0; i<10; i++ ) {
    console.log(i);
}

### 2-2 繰り返し処理でHTMLにデータを表示してみる為に空の変数を準備

//中身が空の変数を作る
let str = "";


//for文
for (let i =0; i<10; i++ ) {
    console.log(i);
}

### 2-3 for文の中にHTMLをstrという変数に追加する処理

//中身が空の変数を作る
let str = "";


//for文
for (let i =0; i<10; i++ ) {
    str += "ループ：" + i + "回目<br>";
}

### 2-4 HTMLに表示する処理を作成

//中身が空の変数を作る
let str = "";


//for文
for (let i =0; i<10; i++ ) {
    str += "ループ：" + i + "回目<br>";
}

//HTLMで表示
$("#view").html(str);

### 2-5 配列とfor文の組み合わせ技
先程のfor分をこちらに変更すると曜日が表示されます。

for (let i =0; i<weekdays.length; i++ ) {
    str += weekdays[i] + "<br>";
}

## セクション3　メモアプリ作成（locakStorage）
＊ここからはkadaiフォルダで作業していきます。　
### 3-1 ローカルストレージの仕組み説明
ローカルストレージはデータをブラウザに保存する機能になります。ブラウザが元々持っている簡易的なDBです。積極的に使うことは少ないですがシンプルに使えるので初学者には最適です。以下はできること一覧です。

【DATA取得】
localStorage.getItem(KEYネーム);

【DATA登録or更新】
localStorage.setItem(KEYネーム, 値);

【DATAを全削除】
localStorage.clear();

【1レコード削除】
localStorage.removeItem(KEYネーム);

【DATA数:データ個数】
localStorage.length

【DATA取得:0~n】
localStorage.key(インデックス)

### 3-2 kadaiフォルダのindex.htmlのhtmlにidを記述

<main>
    <input type="text" id="key">
    <textarea id="memo"></textarea>
    <ul>
        <li id="save">Save</li>
        <li id="clear">Clear</li>
    </ul>
</main>

### 3-3 Saveクリックイベント作成

//1.Save クリックイベント
$("#save").on("click",function(){
   //ここに処理を書いていきます 
});

### 3-4 入力された文字を取得する処理を作成(keyとmemo)

$("#save").on("click",function(){
    const key = $("#key").val();
    const value = $("#memo").val();
    
    console.log(key);
    console.log(value);
});

### 3-5 取得したデータをlocalStrageに保存する処理を作成　

$("#save").on("click",function(){
    const key = $("#key").val();
    const value = $("#memo").val();
    
    console.log(key);
    console.log(value);
    
    //データをlocalStrageに保存
    localStorage.setItem(key,value);
});

### 3-6 ブラウザに表示する処理を作成（テンプレートリテラル）　
バッククォートを使用します。
[ Shift ] ＋ [ @ ] キー or [ Alt ] ＋ [ ~ ] キー

$("#save").on("click",function(){
    
    //〜〜〜〜省略〜〜〜〜〜
    
    const html = `
                <tr>
                    <th>${key}</th>
                    <td>${value}</td>
                </tr>
                `;
                
    $("#list").append(html);
    
});

### 3-7 登録ができたらフォームを空にする処理を実行

$("#save").on("click",function(){
    
    //〜〜〜〜省略〜〜〜〜〜
    
    
    //フォームの中身を空にする処理
    $("#key").val("");
    $("#memo").val("");
    
});

### 3-8 Clearクリックイベント作成

$("#clear").on("click",function(){
    
});

### 3-9 Clear処理を作成

$("#clear").on("click",function(){

    //ローカルストレージのデータを削除
    localStorage.clear();
    
    //HTMLのデータの削除
    $("#list").empty();
    
});

### 3-10 </script>終了タグの直上に以下の処理を記述（保存データ取得表示）

for(let i=0; i<localStorage.length; i++){

    //ローカルストレージ内のi番目のkeyを取得
    const key   = localStorage.key(i);
    
    //i番目のkeyのデータを取得
    const value = localStorage.getItem(key);
    
    //テンプレートリテラルで表示データを作成
    const html = `
                <tr>
                    <th>${key}</th>
                    <td>${value}</td>
                </tr>
                `;
                
    //表示
    $("#list").append(html);
}