新卒研修7日目 JavaScriptと格闘(part2)の末、高熱＆8日目

こんばんは。たつろーです。

この記事は昨日、一昨日についてのものになります。

JS(JavaScript)に慣れるまで時間がかかっております。Webサイトに動きをつける言語なので、楽しいんですけどね。

「動け！」と思って書いたコードが動かない。そしてまた書き直して『今度こそ』と思えど動かない。

三度目の正直でやっと動く、今はなんとかその段階に着こうとしてる感じです。

だからこそ面白いんです。これと同じで、思い通りにいく人生なんてつまらないじゃないですか。

いやまぁプログラムは思い通りに動かせないとダメですが。

タイトルにあるように一昨日の夕方から39℃超えの熱を出しました。昨日病院に行ったんですけどインフルは陰性で普通に風邪って言われました。

その日夕方ぐらいまでずっと38℃ぐらいだったんでかなり疑ってましたけど、今朝起きたら治ってたので謝ります。疑ってすんませんドクター。。

さて、JSとの闘い（課題を解くこと）に時間を食い過ぎたためペースアップする必要があります。時間を取りすぎるのには、自分で考える・ググる時間が多いことが主な原因となっています。まだ知識が浅いので、現段階では

『こういう技術あったな』と思い出せるように多くの課題に触れておく
その技術に関するキーワードを知っておく（自分で調べられるために）

が重要だと先輩から教えて頂きました。現在の時間の使い方を再考して、15分考えて・調べてできなかったら知識・実力不足ってことで先輩に助言をもらうようにしました。

そして、考える→知る→理解する→記録するのサイクルを回すように今は意識してます。研修の序盤に先輩が「サイクルを回すことが大事」と言ってたことに納得しました。

さて、今回の課題の一つはこんな感じです。 f:id:kawano-fusic:20180413235020p:plain

f:id:kawano-fusic:20180413235029p:plain

左側のクリックを押したら選手が増え、右側のクリックを押したら選手の名前を順番にアラート表示するプログラムです。選手を削除できるようにもしてあります。

    <div>
        <button onclick='add()' id='btn1'>クリック！</button>
        <button onclick='alertbtn()' id='btn2'>こっちもクリック！</button>
    </div>

    <table>
        <thead>
            <tr>
              <td>No.</td>
              <td>名前</td>
              <td>削除</td>
            </tr>
        </thead>
        <tbody id="table1">
        </tbody>

    </table>

<script>
var player_num = 0; //global
        function add(){
            //trを定める
            var add_tr = document.createElement('tr'); 

            //tdを定める
            var num_td = document.createElement('td');

            //tdにnumberを入れる
            var num = document.createTextNode(player_num + 1);   
            player_num++;    //increment

            //tdを定める
            var player_td = document.createElement('td'); 
            var playerNames = ['Tatsuro Kawano', 'Mr. Seike', 'Cho Jiho']  
            var del = document.createElement('td'); //deleteのtdを定める
            var del_btn = document.createElement('input');    //deleteのbutton
            del_btn.type = 'button';
            del_btn.value = '削除';

            //del_btnが押された時の即時関数
            del_btn.addEventListener('click', function () {  
                 //del_btnの親の親の要素＝ tr を削除
                del_btn.parentElement.parentElement.remove(); 
            }, false);

            // add_trに対して、tdを付け加えて行く
            document.getElementById("table1").appendChild(add_tr); //trを追加
            add_tr.appendChild(num_td).appendChild(num); //numberのtdを追加
            //剰余を使ってplayerNameを変えて行く
            add_tr.appendChild(player_td).appendChild(document.createTextNode(playerNames[player_num % 3])); 
            add_tr.appendChild(del).appendChild(del_btn);  //delete_btnの作成
        }

        function alertbtn(){  //アラートで名前を順番に表示する関数
            var array = document.getElementById('table1').children;  //tbodyをarrayに
            var alert_num = array.length;  //アラート表示回数alert_num
            for(var i = 0; i < alert_num; i++) {
                //名前取得
                var str = document.getElementById('table1').children[i].children[1].innerHTML;  
                alert(str); //アラート表示
            }
        }
</script>

これ結構時間かかりました。。この部分

//del_btnが押された時の即時関数
del_btn.addEventListener('click', function () {   
                //del_btnの親の親の要素＝ tr を削除
                del_btn.parentElement.parentElement.remove();  
            }, false);

のように、どれかの削除ボタンを押した時にその行がどこであるかを判別して削除するのですが、parentElementの使い方をイマイチ理解してなかったので手こずりました。

でもJS（他の言語はよく知らない）では頻繁に出てくるので慣れておかなければ。（結局jQueryを使うことになると聞きます）

以上です。病み上がりなので寝ます、おやすみなさい。

webエンジニア1年目でございます

気が向いたら更新するやつ

新卒研修7日目 JavaScriptと格闘(part2)の末、高熱＆8日目