JavaScriptおぼえがき（補足）

関数

関数とは、複数の処理をひとまとまりにしたものです。
関数を利用することで目的ごとに処理を分割したり、似たような処理を何度も書かなくて済むようになります。
アロー関数式は、従来の関数式の簡潔な代替構文です。

変数の宣言

文字列や数値などのデータに名前をつけることで、繰り返し利用できるようにする変数という機能があります。
変数を宣言をするキーワードとして、const、let、varがあり、使い方の違いは次の通りです。

スコープとは変数の名前や関数などの参照できる範囲を決めるものです。
スコープの中で定義された変数はスコープの内側でのみ参照でき、
スコープの外側からは参照できません。

• グローバルスコープ
  プログラム直下（関数の外）に定義した変数はグローバル変数と呼ばれ、
  グローバル変数はあらゆるスコープから参照できる変数となります。
  また、宣言なし変数もグローバル変数とみなされます。

• 関数スコープ
  function内の変数及び仮引数は関数内で有効（function 関数(仮引数){・・・・・}）

• ブロックスコープ
  ブロック内（{と}で囲まれた中）で宣言された変数は、
  スコープ内でのみ参照でき、スコープの外側からは参照できません。

イベントハンドラ

JavaScriptにおける「イベント」とは、ウェブページ上で発生するあらゆるアクションの総称です。
例えば、ボタンのクリック、フォームへの入力、ページの読み込み、
マウスポインタを要素の上に合わせるなど、
様々な出来事がページ上で発生します。
イベントハンドラは、このイベントを検出し、イベントに処理を与えるのに使用します。
イベントハンドラによって、発生したイベントごとに処理を実行することができます。

イベントハンドラの指定方法

• <tagName onxxx="・・・.">
  例）<input type="button" value="OK" onclick="alert('Hello!')">
  
• object.onxxx = function
  例１）window.onload = function() { alert("Hello!"); };
  例２）document.getElementById("button1").onclick = function() { alert("Clicked!"); };
  ※HTMLは<input type="button" id="button1">
  
• object.addEventListener(event, function)
  例１）window.addEventListener("load", function() { alert("Hello A");");});
  例２）function keyUpHandler() { alert("Hello!"); }
  　　　obj.addEventListener("keyup", keyUpHandler);
• URL記述(javascript:...)
  <a href="javascript:alert('Hello!!')">Click Me!!</a>

参考で「マウス/タッチイベント」のサンプルコードをご覧ください。

JavaScriptの改行コードの扱い

改行文字「\n」

エスケープシーケンスの改行文字「\n」を挿入すると、改行が出来ます。

data ="一行目\n二行目\n三行目" ;
res1.innerHTML = data ;
res2.innerHTML = data ;

<textarea id="res1">タグ内で改行出来ます。

<div id="res2">や<p id="res2">などのタグ内では改行しません。

バッククォーテーション「`」

ECMAScript 2015 (ES 6) からバッククォーテーション「`」で全体を囲って記述することができるようになりました。
囲ったデータは改行を含んだデーターとして扱えます。

data =`一行目
二行目
三行目` ;
res3.innerHTML = data ;

<textarea id="res3">タグ内で改行出来ます。

エスケープシーケンスの改行「\」

エスケープ処理（エスケープシーケンス）は、JavaScriptで特殊な文字を入力する際に
￥（円マーク）か（バックスラッシュ）を前につけて表示する方法です。
シングルクォーテーション「'」またはダブルクォーテーション「"」で囲った内容が長い場合に、
見やすくするために使います。この場合は、改行コードは含みません。

data ="一行目\
二行目\
三行目" ;
res5.innerHTML = data ;

<textarea id="res5">タグ内で改行しません。。

改行タグ「<br>」

<div>や<p>タグ内の改行は改行タグ「<br>」を挿入します。
改行文字「\n」は使えません。

data = "一行目<br>二行目<br>三行目" ;
res7.innerHTML = data ;

<div id="res7">タグ内で改行できます。

配列データの改行指定

「Arrayオブジェクト」のデータは「join」メソッドで、配列の要素を繋げて文字列に変換することがで来ます。
繋げる文字を「\n」や「<br>に指定すると、改行簡単に出来ます。

data =
    ["一行目","二行目","三行目"].join('\n') ;
res8.innerHTML = data ;

<textarea id="res3">タグ内で改行出来ます。

※<textarea>タグは改行コードを含むデータの取得や表示が出来ます。