ブラウザの中で動くJavaScript

ブラウザの中で動くJavaScript（１）

（と DOMの扱い HTML5 jQueryも）

基本：プログラムの動かし方１

ブラウザ→コンソールに入力

ブラウザを開く（とりあえずは適当なページを表示していればいい）。
開発ツールを出す（多くのブラウザで F12キーで出現する。再度F12で非表示に戻る）。
- 開発ツールには様々な機能が内装されていて、切り替えて使うことができる。
- 今般、主に使うのは「要素」「コンソール」「ネットワーク」（のようなタイトルが、上部のタブ部分に書かれているが、その表記はブラウザによって若干違うかも知れない）。
タブ（を使って機能を切り替え、「コンソール」表示に。
プロンプト（おそらく >の字）の右に、javascriptの式を入力し Enter。

=> その式を評価した値が表示される。
- コマンドプロンプトで Node.js を使うのと同様の REPL機能。ただし、
- ブラウザのコンソールでは、DOMの木構造はツリー表示され、
- ▶ ↔︎ ▲ のクリックで、それを展開表示 ↔︎ 畳んだ状態、の切替が行える。

画面の準備： HTMLによる枠組み

ページ上に何か画像が置いてある… という状態を作る。そのために、

HTMLファイルを１つ作成する。（実習）
1. 適切な作業場所（フォルダ）に
2. 適当な名前で保存（拡張子は .html にする）。
3. img タグで（下記の）画像ファイルをページに配置する。
  - img タグは閉じタグ不要。
4. style タグ（一対）を置く。
  - この中に何を書くでしょうか。

課題１

ページの背景色を淡いブルーに　　（色はなんでもいいが）
画像をページの中央あたりに置く
- div タグを作り、CSSの属性として height、width‘、background-color` を指定してもいい。

（練習なので次項のほぼ解答を見る前に自分で調べながら作って見て下さい）

ページ準備（例）

この画像（リンク先）を使った例：

<!doctype html>
<div id='a'><img src="ball.png"></div>
<style>
  #a {position: absolute;
    left: 20%; top: 30%;
  }
  body {background: #aaccdd;}
</style>

画像に属性を与えるためのセレクタとして、タグ名 img を使ってもいいし、上記例のように div 要素で囲んでもいい。
セレクタの与え方として、div#a とも書けるが、タグ名を省略して id名だけ（id名に # を前置して）与えてもいい。
また、<img src='ball.png' id='a'> のように img 要素に直接 id名を与えてもいい。
CSSの left および top 属性で、画面上の要素の位置を決められるが、それが有効になるためには position: absolute; も指定されている必要がある。

また、HTMLを直接書かずに、pug で用意することもできる（下の例）。

doctype html
#a: img(src="ball.png")
style.
  #a {position: absolute;
    left: 20%; top: 30%;
  }
  body {background: #aaccdd;}

この先の話（予告）：

ボールが勝手に動く
マウスをクリックした場所に動く

or マウスに追従する

といった動作をさせることを考えて行こう。

CSSについての基礎と補足

CSS属性として様々なものがある。必要に応じてリファレンスで調べられるようにしておこう。
CSSを使いこなすためにセレクタの知識も必要となる。

画面のデザインや装飾のためにもCSSが必要だが、それ以外にもセレクタが様々な役割を果たすため（先月クローリングを行った際にもセレクタの活用が必要となったのを思い出して下さい）。
属性ごとに、その値として付与できるデータの種類は決まっている（リファレンスを参照）。先の例で言えば、
- position 属性には、relative, absolute など予め決められたキーワードの中から選んで指定する。
- left, top など、画面上での距離（左上隅を原点として）を表す属性には、長さを示す数値を与える。
  
  長さを示す値を表す数字は、いくつかの単位での表現方法が用意されている（ピクセル数、インチ、ミリメートルなど）ので、数値の後ろにその単位を付けて指定することが必要。
  
  単位なしの数値は無視されることに留意されたい（これはよくつけ忘れてしまい動作が変だと困惑することも多々ある）。

プログラムからの設定方法

1 要素を「取得」（get）し、プログラムからアクセス可能にする

Webページに置かれた様々な要素（タグ、と同じと考えていい。たとえば img 要素）は、 window.document オブジェクト（JavaScript言語からアクセスできる言語要素）の下に、DOMの木構造として内部で表現されている。

ここで先に作ったWebページを表示した状態で、F12キーでブラウザのコンソールを開き、以下のような式を試してみて下さい。

window      // ブラウザ上のJavaScriptで
            // プログラムの動作環境（現在表示しているページ）を表す
            // トップレベルのオブジェクト
window.document     // DOMを表す木構造
document    // レシーバ（ピリオドの左）としての window オブジェクトは省略可
document.body
document.children
document.children[0]    // 当該ノード（木構造の節点）の直下（DOMの木構造において、という意味）
            // にあるすべての子要素の集合体
            //（実体は NodeListという種類のオブジェクトだが、配列と同様に、
            // 後置の[] に整数を置いて、
            // 配列の要素（指定した添え字の位置に置かれたもの、
            // 実体はHTMLの要素を表すオブジェクト。

このようにしてオブジェクトの要素を（ピリオドの右にキーを指定して）選択する、という書き方を連鎖させて、ページ上のDOM要素にプログラムから自由にアクセスすることは可能だが、

ページの構成の小さい変化に対してもプログラムの変更を行う必要が出てしまうため、

実際にはこのアクセス方法はほぼ使われていない。

代わりに、getElement 系のメソッドや、queryでgetするメソッドが使われている（上と同様にコンソールで試してみて下さい）。

document.getElementById('a')        // idを指定する 要素が１つ得られる
document.getElementsByTagname('img')    // タグ名を指定
            // 複数の要素があることを想定して HTMLCollectionが返ってくる     document.getElementsByTagname('img')[0] // 配列と同様に扱える 
// 以下は query 系のメソッド   
document.querySelector('#a')    // 最初に見つかった要素が得られる
            // id を指定する場合はおそらく１つしか見つからないのでこれでいい
document.querySelectorAll('#a')     // NodeList が返ってくる
document.querySelectorAll('#a')[0]  // これも配列のように扱える

// 次の演習の準備として この要素を変数に代入しておく
var a=document.querySelector('#a')

２要素の現在位置を得る

a.style
a.style.top
a.style.left
a.getAttribute('style')

要素が画面上で表示される位置は、（この例では単純にleft top の２つのCSS属性だけで決定しているが、一般には）要素の包含関係なども影響して、ブラウザ内部の計算で決まるようだ。

なので、１つのスタイル値を取得することで要素の位置を得ることができない場合がある。
代わりに以下のメソッドを使おう。
```
a.offsetTop
a.offsetLeft
```
- この offset 値は、（要素が別の要素に含まれている構造でなければ）文書（ページ）の左上隅を起点とした値となる。
- ピクセル単位の整数として値が返されることに注意（別の単位で指定した結果だとしても）。
- この２つの属性値は、読み取り専用なので、値の設定はできない。
```
a.offsetTop=0        // 代入式は受け付けている、が
a.offsetTop          // 変化はない（画面上でも変化はない）
```

３要素の位置を変更する

a.style.top および a.style.left に値を（CSSの値として）直接代入するといいだろう。
値を与えるときには、単位を明確にした上で文字列として代入することになる。ここではピクセル単位を想定して、数値の後ろに ‘px’ をつける。
```
`${a.offsetLeft+10}px`
a.style.left=`${a.offsetLeft+10}px`      // 要素を10ピクセル分右に移動する
a.style.left
```
- 文字列を囲むクォート文字として、シングルクォート(' ')、ダブルクォート(" ") がよく使われている（場合によっては組み合わせて）が、ここでは、
  
  バッククォート（これもJavaScriptに比較的新しく加わった）を使おう。
- バッククォート `` `` で囲まれた文字列の中では、${...} の中に式を書くことができ、
  
  式の値を評価（計算）した結果がその場所に展開される

４マウスイベント

以下のような例を参考に作ってみて下さい。

window.addEventListener("onmousemove", event => {
  console.log(event.clientX, event.clientY);
});

発展的な研究課題

（以下のいずれかの方向で取り組んでみて下さい =>宿題）

往復運動（或いは他の、画面から消えてしまわない見せ方）
CSSやjQueryの機能でアニメーション
マウスカーソルに追従させるには（ユーザ参加）
ボールの外側を透明にして丸い画像に見せるには
ボールがくるくる回って見えるようにするには

参考　jQueryを使う場合：

予め、HTMLの先頭部（doctypeの下ぐらいが適切だろう）に、
```
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
```
を入れておく。
以下のような式が使える。
```
$('#a')               // 要素の取得
          // ただしここで得られる値は、
          // jQueryで用意するオブジェクト（jQueryオブジェクトと呼ばれる）。
          // $ 関数 （または jQuery関数）の値はすべてこの型。
$('#a').offset()
var t=$('#a').offset().top            // 変数tに代入しておいて、
$('#a').css({top:`${t+100}px`})       // 値を変更する（100ピクセル下へ）
          // CSS属性とその値をオブジェクトとして渡す
```
- 今回の例では、ネイティブ関数でもjQueryでも記述の複雑さはさほど変わらないが、 jQueryの特性として、
  - jQueryオブジェクトに対する処理をメソッドチェーンとして記述できる。
  - 対象となる要素が１つでも複数でも、同じjQueryオブジェクトに対する処理として記述できる。
  という長所が、要素の数が複数になるなど、ページの構成の状況によっては、生きてくる可能性がある。
なお、jQueryでマウスイベント（ここではクリック）を扱うコードの例を示しておく。
```
$(document).click((ev)=>{
  console.log(ev);
  $('#a').css({left:`${ev.pageX}px`})
})
```
- click などの関数には、コールバック関数を渡すことになっている（クリックというイベントが発生したときに、何をさせるか、を記述する）。
- マウスがクリックされた座標値はイベントオブジェクト（上では引数 ev）の pageX, pageY 属性として得られる。他に clientX, offsetX といった値もあり、どこを起点として扱うかで使い分けることになるだろう。
- 他に、mousemove などの関数もある。