今日やったこと

Udemyの「Web開発入門完全攻略コース - プログラミングをはじめて学び創れる人へ！未経験から現場で使える開発スキルを習得！」のセクション9の104~119
セクション10の120~131
セクション11の132~138

以下、パートごとにとったメモです。

104.繰り返し処理とは

繰り返し処理の概要です。

105.繰り返し処理for

For文に関する動画です。

スライドで繰り返しの流れが説明されていて、とてもわかりやすかったです。

106.繰り返し処理while

While文に関する動画です。

これはProgateで学んだことなのですが、while文よりfor文の方が短くまとまるので、実際に書くときはfor文の方がいいみたいです。

107.繰り返し処理 do while

はじめて見ました。

Whileとの大きな違いは条件にかかわらず、最低１回はループを実行する、というところです。

用途はよくわかりませんが、こういう処理もあるんだな〜というのを頭の片隅に置いておけたらと思います。

108.演習：繰り返し処理

これまで学んできた繰り返し処理の確認テストです。

1から100までの数字の内、偶数だけを足していくという処理を作る、というテストです。

偶数だけを抽出するところはできたのですが、足していくのがわかりませんでした。

109.演習回答：繰り返し処理

108の回答です。

正解はこれでした↓

let sum=0;
for(i=1;i<=100;i++){
  if(i%2===0){
    sum+=i;
  }
}

console.log(sum);

結構簡単な問題だったと思うのですが、できませんでした。

要復習ですね。

考え方としては、1~100の中でもし2で割り切れたら、初期値0のsumに足していくようにする、という感じですね。

110.配列

配列は英語でarrayと言います。

配列の中に配列がある配列のことを２次元配列といいます。

さらに中に配列があるものを３次元配列というが、webアプリではせいぜい2次元配列までしか使わないそうです。

111.連想配列

Progateでいうオブジェクトのことです。

112.演習：配列を使ったテストの点数の集計

テストの点数の、合計値、平均値を求めるプログラムを作ります。

113.演習回答：配列を使ったテストの点数の集計

112の回答です。

模範回答とは多少異なるのですが、なんとか合計値と平均値を自力で出すことができました。

let scores=[100,90,80,70,60];
let sum=0;
for(let i=0;i<scores.length;i++){
  sum=sum+scores[i];
};

let average=sum/scores.length;

console.log(sum);
console.log(average);

scores.lengthを使うことにより、配列の中の個数を数えなくてもよくなります。

今回の場合は配列の中身が５つしかないので、i<5としても大丈夫です。

しかし、配列の中身が数え切れないほど多くなると、数えるのがかなりめんどくさくなるので、.lengthを使いましょうということです。

114.関数とは

関数とは
* タスクや値の計算を実行する処理の集まり
* 与えられた入力値に基づいて、なんらかの処理を行い、その結果を返す仕組み

関数には、JavaScriptが標準で用意している「標準関数」と開発者が自分で関数を定義する「ユーザー定義関数」があります。

関数の定義方法３種類
1. function命令で定義する
2. 関数リテラルで定義する
3. Functionコントラクターで定義する

115.function命令

Function命令を用いた関数の定義に関する動画です。

実務ではfunction命令を関数の定義に使うことが多いそうです。

長方形の面積を求める関数を作りました↓

function getRectangele(height,width){
  return height*width;
};

console.log(getRectangele(3,5));

116.関数リテラル

関数リテラルは、関数名を持たないので「無名関数」「匿名関数」とも呼ばれます。

115で作った関数を関数リテラルで表現すると以下のようになります↓

let getRectangle=function(height,width){
  return height*width;
};

console.log(getRectangle(3,5));

117.Functionコンストラクタ

Function命令や関数リテラルに比べると、functionコンストラクタの利用機会は少ないそうです。

なので、こんな書き方もあるんだな〜というぐらいで頭の片隅に入れておこうと思います。

115、116でやった関数をfunctionコンストラクタで表現すると、以下のようになります↓

let getRectangle=new Function('height','width','return height*width');
console.log(getRectangle(3,5));

118.演習：関数

関数が理解できているかの確認テストです。

りんごの値段を計算するプログラムを関数化します。

１個100円のりんごをn個買った時の合計金額を計算して返す関数を作成しました。

119.演習回答：関数

118の回答です。

模範回答通りの回答をすることができました。

function price(unitPrice,n){
  return unitPrice*n;
};

console.log(price(100,13));

セクション９JavaScript入門　全体の感想

ProgateではES6で学んでおり、この講座ではES5を学んだので一部戸惑う部分もありましたが、大きくつまづくところはありませんでした。

強いて言えば108の演習ができなかったぐらいです。

108の演習だけあと2回ぐらい復習して、次のセクションに進もうと思います。

セクション10JavaScript DOM操作

120.イントロダクション=JavaScript DOM操作-

セクション10の概要。

DOMとは？
DOM（Document Object Model）とは、W3Cから勧告されているHTML文書やXML文書をアプリケーションから利用するためのAPIです。

【JavaScript】今更聴けない！？DOM操作（1）
（https://www.casleyconsulting.co.jp/blog/engineer/96/）より引用

121.DOMとは

DOMツリーやノードの説明。
HTMLの構造をツリーのように見ることをDOMツリーと言います。

DOMツリーの１つ１つの枝の部分をノードと言います。

122.IDをキーに要素を取得

getElementByIdメソッドを利用して、指定したIDを持つ要素を取得しました。

取得ボタンを押すと、取得したIDを持つ要素内のテキストを現在時刻に替えるプログラムを作成しました。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>IDをキーに要素を取得</title>
  </head>
  <body>
    <p id="result">pタグの文字列です。</p>
    <input type="button" value="取得" onclick="show()">
    <script src="js/element_id.js"></script>
  </body>
</html>

// IDをキーに要素を取得
// getElementByIdメソッド

// 現在のid:resultの内容（テキスト）をコンソールに表示。
// id:resultの内容（テキスト）を、現在時刻（日時）に書き換え。
function show(){
  let result=document.getElementById('result');
  console.log(result.innerText);
  let nowDate=new Date();
  result.innerText=nowDate.toLocaleString();
}

123.タグ名をキーに要素を取得

getElementsByTagNameメソッドを使い、指定したタグ名の要素を取得しました。

今回はdivだけを取得するプログラムを作成しました。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>タグ名をキーに要素を取得</title>
  </head>
  <body>
    <div>要素1(div)</div>
    <p>要素2(p)</p>
    <div>要素3(div)</div>
    <span>要素4(span)</span>
    <div>要素5(div)</div>

    <input type="button" value="取得" onclick="showElements()">

    <script src="js/elements_tag_name.js"></script>
  </body>
</html>

function showElements() {
  var elements = document.getElementsByTagName('div');
  for (var i = 0; i < elements.length; i++) {
    console.log(elements[i].innerText);
  }
}

Elementsに入ったdivをfor文を使うことにより、順番に取り出しています。

124.name属性をキーに要素を取得

getElementsByNameメソッドを使い、指定したname属性を持つ要素を取得しました。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>name属性をキーに要素を取得</title>
  </head>
  <body>
    <input name="result" type="text"></input>
    <input type="button" value="取得" onclick="showElements()">
    <script src="js/elements_name.js"></script>
  </body>
</html>

// テキストボックスとボタンを配置、
// ボタンをクリックしたら、
// name属性が’result’の要素を取得して、その入力内容（テキスト）をコンソール表示する。
function showElements() {
  var elements = document.getElementsByName('result');
  console.log(elements[0].value);
}

Elementsは配列なので、先頭の要素を取り出してその内容をコンソールに出力します。

.valueで入力されたテキストを取り出します。

125.class属性をキーに要素を取得

getElementsByClassNameを使い、指定したclass属性を持つ要素を取得しました。

今回はfooクラスの要素だけを取得しました。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>class属性をキーに要素を取得</title>
  </head>
  <body>
    <ul>
      <li class="foo">要素1</li>
      <li class="bar">要素2</li>
      <li class="foo">要素3</li>
      <li>要素4</li>
      <li class="bar">要素5</li>
    </ul>
    <input type="button" value="取得" onclick="showElements()">
    <script src="js/elements_class.js"></script>
  </body>
</html>

// ボタンをクリックしたら、class名が’foo’の要素を取得し、
// その内容（テキスト）をコンソールに出力する。

function showElements() {
  var elements = document.getElementsByClassName('foo');
  for (var i = 0; i < elements.length; i++) {
    console.log(elements[i].innerText);
  }
}

Elementsは配列なので、順番に取り出してコンソールに出力します。

122~125は取得するのがタグなのかIDなのかclassなのかという違いだけで、やっていることは同じです。

最初は「何これ？」と思ったのですが、繰り返し同じことをやることで理解できました。

126.ノードを追加

ボタンを押すとノードが追加されるプログラムを作りました。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>ノードを追加</title>
  </head>
  <body>
    <ul id="lists">
    </ul>
    <input type="button" value="追加" onclick="append()">
    <script src="js/append_child.js"></script>
  </body>
</html>

// 空のリスト、ボタンを配置
// ボタンをクリックすると、
// リストの項目が追加される。
// 追加される文字列は”追加文字列”とする。
function append() {
  // li要素を生成
  var li = document.createElement('li');
  // テキストノードを生成
  var text = document.createTextNode('追加文字列');
  // liタグの要素に、テキストノード textを追加
  li.appendChild(text);
  // idがlistsのulタグに、liを追加。具体的には<li>追加文字列</li>が、追加される。
  lists.appendChild(li);
}

順番に解説します。

まず
var li = document.createElement('li');
でliタグを作り、
var text = document.createTextNode('追加文字列');
でliタグ内に入れるテキストを作りました。

そして、作ったliタグにtextを入れました。

最後にtextの入ったliタグをid=“lists”のulタグの中に入れました。

という感じです。

127.ノードの置換

ノードを別のノードに置換しました。

今回はliタグを置換しました。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>ノードの置換</title>
  </head>
  <body>
    <ul>
      <li id="oldList">古い要素です</li>
    </ul>
    <input type="button" value="置換" onclick="replace()">
    <script src="js/replace_child.js"></script>
  </body>
</html>

// リストとボタンを配置
// ボタンをクリックしたら、リストの子要素を置換する処理
function replace() {
  // 空のli要素を作成
  var newList = document.createElement('li');
  // 生成したノードにid属性"newList"を付与
  newList.setAttribute('id', 'newList');
  // テキストノードを生成
  var newText = document.createTextNode('新しい要素です');
  // 生成したノードを、空のli要素の子ノードとして追加
  newList.appendChild(newText);
  // 置換前の変数oldListの参照を変数oldListに代入。
  // (参照とは、オブジェクトへのリンクのことを言う)
  // https://developer.mozilla.org/ja/docs/Glossary/Object_reference
  var oldList = document.getElementById('oldList');

  // 親ノードulの参照を変数parentNodeに代入
  var parentNode = oldList.parentNode;
  // 既存ノードoldListを、新規に作成したli要素newListと置換
  parentNode.replaceChild(newList, oldList);

}

ざっくり説明すると、置換したいノードを（今回の場合はnewList）を作って、oldListと置換するという流れです。

replaceChildメソッドは、指定した子ノードを置き換えるメソッドです。

appendChildとremoveChildを同時に行う操作とも言えます。

repraceChildメソッドにより、oldListの親ノード、つまりulタグの中のli(id=“oldList”)をli(id=“newList)に置換しました。

128.ノードの削除

removeChildメソッドを使い、指定した子ノードを削除しました。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>ノードの削除</title>
  </head>
  <body>
    <ul id="lists">
      <li>要素1</li>
      <li>要素2</li>
      <li>要素3</li>
      <li>要素4</li>
      <li>要素5</li>
    </ul>
    <input type="button" value="削除" onclick="remove()">
    <script src="js/remove_child.js"></script>
  </body>
</html>

// リストとボタンを設置
// ボタンをクリックすると
// リストの子要素が最後のものから削除される
function remove() {
  var parentElement = document.getElementById('lists');
  var elements = parentElement.getElementsByTagName('li');
  var removeIndex = elements.length - 1;
  parentElement.removeChild(elements[removeIndex]);
}

まず、elements[4]が削除されます。
次にelements[3]、elements[2]…という順番で削除されていきます。

129.演習：DOM操作

入力した文字列がボタンを押すと追加されるというプログラムを作ります。

色々試してみたのですが、結局正解にたどり着けませんでした。

130.演習回答：DOM操作

131.補足：演習回答：DOM操作
回答を見たら思ったよりも簡単で拍子抜けしました。
が、できなかったので要復習ですね。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>ノードを追加</title>
  </head>
  <body>
    <ul id="lists">
    </ul>
    <input id="textBox" type="text">
    <input type="button" value="追加" onclick="append()">
    <script src="js/exercise.js"></script>
  </body>
</html>

function append() {
  var li = document.createElement('li');
  var textBox = document.getElementById("textBox");
  var text = document.createTextNode(textBox.value);
  li.appendChild(text);
  var lists = document.getElementById('lists');
  lists.appendChild(li);
}

まず、liタグを作ります。

id=“textBox”の要素を取得します。

id=“textBox”に入力された文字列を取得します。

最初に作ったliタグにtext（文字列）を入れます。

id=“lists”の要素を取得します。

textの入ったliタグをlistsの中に入れます。

といった手順ですね。

セクション10JavaScript DOM操作　全体の感想

テックアカデミーのフロントエンドコースでもDOMは軽く触れていたのですが、まだまだ理解が甘かったです。

セクション９まではスラスラ進めてこれたのですが、セクション10はつまづきながらの学習になりました。

基本的にやることは「欲しい要素を取得して、追加したい何かを追加する」というだけだと思います。

なので、どこから何を取得して、何を追加するのかを整理できれば簡単になるはずだと信じて、とりあえず復習を後回しに先に進みます。

セクション11JavaScriptイベントとイベントハンドラ

132.イベントとイベントハンドラを関連づける方法

イベントとイベントハンドラを関連づける方法
1.開始タグの中の属性を使って行う方法
2.プロパティを使って関連付ける方法

133.開始タグの中で関連付ける方法

例
<input type=“button” value=“取得” onclick=“show()”>

クリックするとjsファイルのshow関数が実行されます。

134.プロパティで関連付ける方法

若干133よりもコードが長くなってしまいます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>イベント プロパティで関連付け</title>
  </head>
  <body>
    <input id="button" type="button" value="クリックしてください">
    <script src="js/property.js"></script>
  </body>
</html>

var e = document.getElementById('button');
e.onclick = function() {
  console.log('イベント発生');
};

135.loadイベント

loadイベントは、リソースおよびその依存リソースの読み込みが終わると発生します。
MDN web docs load(https://developer.mozilla.org/ja/docs/Web/Events/load)より引用

136.addEventListener

1つの要素や1つのイベントに対して、複数のイベントハンドラを設定できる。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>addevent</title>
  </head>
  <body>
    <input id="button" type="button" value="クリックしてください">
    <script src="js/add_event.js"></script>
  </body>
</html>

window.onload = function() {
  var e = document.getElementById('button');
  e.addEventListener('click', function(){
    console.log('イベント発生!');
  }, false);
}

onloadとonclickの２つのイベントハンドラを設定しています。

137.演習：イベントとイベントハンドラ

テキストボックスに文字列を入力して、ボタンを押したら、文字列をリストに追加していくプログラムの開発です。

addEventListenerを利用して作るのですが、何から始めるべきかよくわかりませんでした。

138.演習回答：イベントとイベントハンドラ

蓋を開けてみれば簡単だったパターンでした。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>演習：イベント</title>
  </head>
  <body>
    <ul id="lists">
    </ul>
    <input id="result" type="text">
    <input id="button" type="button" value="追加" >

    <script src="js/exercise.js"></script>
  </body>
</html>

// 演習：イベント
// テキストボックスに文字列を入力して、
// ボタンを押したら、文字列をリストに追加していくプログラムの開発
// イベントの登録には、addEventListenerを利用する

// note : DOMContentLoaded : HTMLドキュメントの読み込みと解析が完了した時に発生
  document.addEventListener('DOMContentLoaded',function(){
    // idがbuttonの要素がクリックされたときに、関数appendElement()を呼び出す処理を
    // addEventListenerを使って実装する。
    var e = document.getElementById('button');
    // ここから↓↓↓↓
    var e = document.getElementById('button');
    e.addEventListener('click',function(){
      appendElement();


    // ここまで↑↑↑↑

  }, false);

  // テキストボックスに入力された文字列を、
  // リストに追加する関数。
  function appendElement() {
    // テキストボックスの要素を取得
    var result = document.getElementById('result');
    // liタグの要素を生成
    var li = document.createElement('li');
    // テキストノードを生成
    var text = document.createTextNode(result.value);
    // liタグの要素に、テキストノード text を追加。
    li.appendChild(text);
    // idがlistのulタグに、liを追加。具体的には<li>追加文字列</li>が、追加される
    lists.appendChild(li);
  }

正直、今はこれが何の役に立つのかわからないので、次に進みたいと思います。

セクション11JavaScriptイベントとイベントハンドラ　全体の感想

addEventListener以外は何となく理解できました。

addEventListenerは何のために、いつ使うのかはわかりませんが、また使う機会が出てきたときに詳しく学ぼうと思います。

ひとまず、復習を後回しにして先に進みます。

今日はだいぶ進みました。

明日からも引き続きプログラミング学習頑張ります。