ノート：Javascriptの書き方

Web系

ふだんC言語しか書かないマイコンおじさんによる備忘録。

script要素

そもそも、JavaScriptはscript要素内に書く。script要素は、head要素内とbody要素内のどちらにでも書けるが、body要素の最下部に書くのが無難。

外部のJavaScriptファイルを読み込むには、scriptタグにsrc属性で指定する。

<script src='hoge.js' />

window.onload

ページの読み込みが完了したときに実行したい処理(初期化など)は、window.loadに定義する。

window.onload = function(){
  処理;
};

setInterval

周期タイマ処理はsetIntervalを用いてイベントハンドラを設定する。時間の単位はミリ秒である。また、周期タイマ処理の停止にはclearIntervalを用いる。

var timer1 = null;
...
timer1 = setInterval(func_timer1, 10*1000);
...
clearInterval(timer1)

HTML要素の操作

JavaScriptで操作したいHTML要素にidを付けておく。

<span id='hoge'></span>

JavaScriptからは document.getElementById で参照して操作する。

document.getElementById('hoge').innerHTML= 'あいうえお';

jQueryを使えばもっと簡潔に記述できるが、ここではふれない。

input要素

テキストボックスやボタンなどはinput要素を用いる。<input type="submit">タグを用いて送信するのであればinput要素はform要素内に書く。そうでないならformタグは必須ではない。

<input type='text' id='text1' value='初期値' />
<input type='password' id='password1' />
<input type='number' id='number1' min='0' max='100' step = '1' value='50' />
<input type='range' id='range1' min='0' max='100' step = '1' value=50 />
<input type='checkbox' id='checkbox1' /> checkbox1

JavaScriptからは document.getElementById で参照して値を取得する。formタグとname属性を用いれば、document.form名.input名 の形でinput要素を参照でき、記述が少し簡便にはなるが、ここではふれない。

const text1 = document.getElementById('text1').value;
const number1= parseInt(document.getElementById('number1').value);

ボタンなどに対するイベントハンドラは、タグ内に呼び出しを書く。ここでthisを引数に渡すとどのinput要素のイベントかをイベントハンドラ側で判別できる。

<input type='button' id='button1' value='ボタン1' onclick='clickButton(this)' />
<input type='range' id='range1' min='0' max='100' oninput='changeSlider(this)' />

function clickButton(element) {
  if(element.id=='button1') {
    button1をクリックしたときの処理;
  }
}
function changeSlider(element) {
  if(element.id=='range1') {
    range1の値が変化したときの処理;
  }
}

canvas要素

グラフィックを描画するにはcanvas要素を用いる。

<canvas id='canvas1' width='400' height='300' />

JavaScript側ではcanvas要素を参照してgetContextでコンテキストを取得し、グラフィックを描画する。

var canvas1 = document.getElementById('canvas1');
var context1 = canvas1.getContext('2d');
context1.fillStyle = "blue";
context1.fillRect(10, 10, 100, 100);

canvas要素上でのマウスイベントは下記のようにイベントハンドラを定義する。

canvas1.addEventListener('mousedown', onDown);
canvas1.addEventListener('mouseup', onUp);
canvas1.addEventListener('click', onClick);

マウスの座標はイベントハンドラの引数から取得できる。

function onClick(e) {
  var rect = e.target.getBoundingClientRect();
  var x = e.clientX - rect.left;
  var y = e.clientY - rect.top;
  処理;
}

また、ウィンドウ全体のサイズはwindow.innerWidth, window.innerHeightで取得できる。キャンバスのサイズはCanvas.width, Canvas.heightで取得・設定できる。

APIの詳細は下記を参照。

AjaxとWebSocket

次の記事にまとめた。