勉強用

プログラミング学習のアウトプット用ブログです。他に目的はありません。

eventオブジェクトのtargetプロパティ

下のようなコードがある。
(HTML)

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Test</title>
    <style>
      #box {
        width: 200px;
        height: 200px;
        line-height: 200px;
        background-color: #ccc;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
    <script src="main.js"></script>
  </body>
</html>

(JavaScript)

const box = document.getElementById('box');


box.addEventListener( 'mouseenter', (e) => {
    e.target.textContent = 'マウスが乗った!';
  }
);

box.addEventListener( 'mouseleave', (e) => {
  e.target.textContent = 'マウスが離れた!';
  }
);

これでbox内にマウスが乗ると、
f:id:fridge2020:20201122152035p:plain
が、マウスが離れると、
f:id:fridge2020:20201122152136p:plain
が表示される。

この仕組みについてみていく。

まず、

const box = document.getElementById('box');

ここだが、これはid属性が「box」であるHTMLの要素

<div id="box"></div>

を取得し、boxという定数に代入する。

次に、

box.addEventListener( 'mouseenter', (e) => {
    e.target.textContent = 'マウスが乗った!';
  }
);

だが、これは先ほど定義した定数boxにマウスが乗ったとき(mouseenter)、

(e) => {
    e.target.textContent = 'マウスが乗った!';
  }

という関数を呼び出す。

e.targetとはeventオブジェクトのtargetプロパティのことで、これはイベントの発生元であるオブジェクトを返す。つまりこの場合は、

<div id="box">

それに、.textContentで、テキストの中身を'マウスが乗った!とう文字列に書き換える。

box.addEventListener( 'mouseleave', (e) => {
  e.target.textContent = 'マウスが離れた!';
  }
);

は、そのマウスが離れたときのバージョン。

今回の学習、e.targetとはeventオブジェクトのtargetプロパティのことで、これはイベントの発生元であるオブジェクトを返す。このとき引数に(e)を渡す。

電卓作り その1(課題で作成した簡易電卓を1度分解して考える)

タイトルの通り、課題で作成した簡易電卓を1度分解し、その構成を一つひとつ考えていく。

※下記テキストは、まだ思考が整理されていない状態の下書きのようなものであり、分かりづらさはご愛敬。

では、まずはHTMLから

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Test</title>
  </head>
  <body>
    <div>
      <input type="text" id="num1">
      <input type="text" id="num2">
    </div>
    <button type="button" id="button-add">+</button>
    <button type="button" id="button-sub">-</button>
    <button type="button" id="button-mul">*</button>
    <button type="button" id="button-div">/</button>
    <div id="box"></div>
    <script src="main.js"></script>
  </body>
</html>

↑のコードで、↓のような簡易電卓が出来上がる。が、まだこの段階では、ボタンを押したところで何も起こらない。
f:id:fridge2020:20201118161246p:plain


<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Test</title>
  </head>

↑headに関しては今回は考える必要がないので割愛する。

まずは、

<div>
      <input type="text" id="num1">
      <input type="text" id="num2">
</div>

この部分から。
このdivタグで囲われたinput要素によって↓のボックスが作られる。f:id:fridge2020:20201118162359p:plain
type属性に”text”を指定することで、1行のテキストボックスが作られる。
左のボックスには"num1"というidが、右にはnum2"というidが指定されている。


次に、

<button type="button" id="button-add">+</button>
<button type="button" id="button-sub">-</button>
<button type="button" id="button-mul">*</button>
<button type="button" id="button-div">/</button>

この部分。これは↓の
f:id:fridge2020:20201118162849p:plain
にあたる。
type属性に"button"を指定することで、「何もしない汎用的な押しボタン」が作成される。そのボタンが4つ。それぞれにidが振られ、それに適したテキストが書かれている。


次に、

<div id="box"></div>

ここは空のdivタグ。idにboxが指定されている。


次。

<script src="main.js"></script>

HTMLでJavaScriptを読み込むために書かれている。

htmlは以上。


続いて、JavaScript

const buttonAdd = document.getElementById('button-add');
const buttonSub = document.getElementById('button-sub');
const buttonMul = document.getElementById('button-mul');
const buttonDiv = document.getElementById('button-div');

const getNum1 = () => {
  return parseFloat(document.getElementById("num1").value)
};

const getNum2 = () => {
  return parseFloat(document.getElementById("num2").value)
};

const showResult = (num) => {
  document.getElementById("box").innerHTML=num
};


buttonAdd.addEventListener('click', () => {
  const result = getNum1() + getNum2();
  showResult(result);
});

buttonSub.addEventListener('click', () => {
  const result = getNum1() - getNum2();
  showResult(result);
});

buttonMul.addEventListener('click', () => {
  const result = getNum1() * getNum2();
  showResult(result);
});

buttonDiv.addEventListener('click', () => {
  const result = getNum1() / getNum2();
  showResult(result);
});


まずは、

const buttonAdd = document.getElementById('button-add');
const buttonSub = document.getElementById('button-sub');
const buttonMul = document.getElementById('button-mul');
const buttonDiv = document.getElementById('button-div');

この部分。正確に言うなら、

const buttonAdd = document.getElementById('button-add');

この部分の、

document.getElementById('button-add');

を考える。

getElementById() メソッド。
このメソッドで、指定した名前のid属性を持つHTMLの要素をオブジェクトとして取得することができる。
つまり、↑は「button-add」というid属性を持つ要素をHTMLから取得することができる。
それは、

<button type="button" id="button-add">+</button>

この部分。
この部分を変数buttonAddに代入するということ。
(HTMLの特定の要素を取得し、それを変数に代入する。)

下三つ

const buttonSub = document.getElementById('button-sub');
const buttonMul = document.getElementById('button-mul');
const buttonDiv = document.getElementById('button-div');

も同じ作業なので割愛。


続いては

const getNum1 = () => {
  return parseFloat(document.getElementById("num1").value)
};

const getNum2 = () => {
  return parseFloat(document.getElementById("num2").value)
};

↑この部分。
の↓この部分。

parseFloat(document.getElementById("num1").value)

f:id:fridge2020:20201119112916p:plain
とのこと。
つまり、簡単にいうと、parseFloat() を使えば、文字列を数値に変換することができる。

つまり、↑は「num1」というid属性を持つ要素の値をHTMLから取得し、その取得した"文字列"を数値に変換して、返すという意味。
↑の関数を「getNum1」という変数に代入する。

下の

const getNum2 = () => {
  return parseFloat(document.getElementById("num2").value)
};

に関しても同じ作業なので割愛。

※ただここで疑問に思ったのは、なぜparseFloat() 関数を使うのか、という点だ。つまり、これは今電卓を作っており、したがってボックスに入力される値はそもそも数値なのだから、わざわざparseFloat() 関数を使って文字列を数値に変える必要はないのではないか? ということだ。
その質問に対する答えはこうである。
input要素.value で受け取ったものは文字列である。

input要素.value で受け取ったものは文字列である。


続いてはこの部分。

const showResult = (num) => {
  document.getElementById("box").innerHTML=num
};

まず関数部分は、「box」というid属性を持つHTML要素を取得。
それから、innerHTMLというプロパティは、HTML要素の中身を取得、変更できるので、取得したbox」というid属性を持つHTML要素を「num」に変更する。
引数の「num」に関してはあとで述べるので、ここではスキップ。


次に、

buttonAdd.addEventListener('click', () => {
  const result = getNum1() + getNum2();
  showResult(result);
});

buttonSub.addEventListener('click', () => {
  const result = getNum1() - getNum2();
  showResult(result);
});

buttonMul.addEventListener('click', () => {
  const result = getNum1() * getNum2();
  showResult(result);
});

buttonDiv.addEventListener('click', () => {
  const result = getNum1() / getNum2();
  showResult(result);
});

この部分の、

buttonAdd.addEventListener('click', () => {
  const result = getNum1() + getNum2();
  showResult(result);
});

この部分。

上で作成した変数buttonAddがクリックされたとき、↓の関数が呼び出される。

() => {
  const result = getNum1() + getNum2();
  showResult(result);
}

この関数とは、変数resultに、上で作ったgetNum1()変数とgetNum2()変数を代入し、 showResult(result);関数を呼び出すというもの。ちなみに、ここでの実引数「result」が上の仮引数「num」に渡されるので、結果的にここで合計された値がディスプレイ上に表示される。


ここまでで、とりあえずの解説は終了。きっと間違えている箇所もあるだろうが、何となく電卓の仕組みは理解できたように思う。
いずれ、綺麗にまとめたものをアップし直そうと思う。

「サイトにFlickr APIを使う」という課題を解くために その1

上記課題を解くためにWeb APIを学ぶ。

まず、Web APIAPIとは、Application Programming Interfaceの略で、これを簡単に説明すると、"あるWebサービスの機能を他のアプリやサービスから使えるようにするための仕組み"らしい。

Web APIの仕組み
1. 使いたい機能を呼び出して、
2. 結果を受け取る。

呼び出し: GET/POST形式の標準Webリクエスト方式。
結果返却: JSON/XML形式の標準データフォーマット。

次、JSONについて。
JSON (JavaScript Object Notation)とは、データを記述するための表記法のひとつ。JavaScriptのObjectの記法に由来するからこの名前とのこと。
↓(例)

{
  "firstName": "John",
  "lastName": "Smith",
  "email": "john@example.com"
}


次、Ajax
Ajaxは、Asynchronous JavaScript + XMLの略で、訳すと"非同期的なJavaScriptXML"。
ブラウザ内からAPIに直接アクセスするにAjaxを使う。JavaScriptを使って任意のタイミングでサーバーと通信を行う。