プログラム
WEBサービスを作りたいので、プログラミングの学習をしていると言う話をしています、最近。
ボクは昔のBASIC言語のプログラマーなので、最近の言語に関しては素人です。
最近の言語のキモとなるのは、たぶん、オブジェクト指向ですよね。
これが、昔のプログラマーにとって、何とも難解で。
と言うか、そんな概念を知らなかったので、概念を身に付けるのが大変です。
前回の記事で、ボタンを押すと画像の大きさが変わるプログラムを書きました。
ソースコード
そのソースコードはとてもカンタンです。
<script>
var j = 120;
function big() { // 大きくする関数を定義
j = j + 20; // 20増やす
if (j > 320) { // 320を超えたら320にする
j = 320;
}
// pictと言うidのstyle.widthエレメントを決める
document.getElementById("pict").style.width = j + "px";
}
function small() { //小さくする関数を定義
j = j - 20; // 20減らす
if (j < 120) { // 120を下回ったら120にする
j = 120;
}
// pictと言うidのstyle.widthエレメントを決める
document.getElementById("pict").style.width = j + "px";
}
</script>
<button onClick="big()">大きくなる</button>
<button onClick="small()">小さくなる</button>
<img id="pict" style="width: 120px;" src="https://c2.staticflickr.com/8/7157/6445750229_bd5fea8d92_b.jpg" />
オブジェクト指向は、まだよくわかりませんが、
- オブジェクト
- メソッド
- プロパティ
と言う3つの記述をよく見かけます。
英語を理解できる人なら、だいたい意味はわかると思います。
オブジェクトは物体とか対象。
メソッドは方法、手段。
プロパティは属性。
数多くの言語が同じ書き方なんですが、
- オブジェクト.メソッド
- オブジェクト.プロパティ
と言う語順です。
例えば、
document.bgColor="red";
と書けば、documentはオブジェクトで、それにbgColorと言うプロパティを定義します。定義の中身は、redです。
documentはページ全体を指し、それのbgColor、つまり背景色を定義します。ここでは、red、つまり赤色です。
では、上記のソースコードを見てみましょう。
document.getElementById("pict").style.width = j + "px";
getElementByIdは長いですが覚えるしかありません。
これは、documentと言うオブジェクトに付くメソッドです。つまり手段です。
- get
- Element
- By
- Id
と分ければカンタンです。
idによって要素をゲットしろ！ってことです。ここではpictと言うidのstyle要素のwidth属性をゲットする、つまり幅を決めるってコトです。
ここに150を入れれば、画像の幅が150ピクセルになるんですね。
getElementByIdと言うメソッドがたまたま長い名前なのでややこしいですが、そもそもプログラミング言語は、人間にとってわかりやすくなるように設計されています。
document.bgColor="red";
document.getElementById("pict").style.width = j + "px";
よく見たら、どちらも同じですよね。
初心者（ボクも含めて）は、これだけでも、何が何やらと思うかもしれませんが、ボク自身もとりあえず、これだけのことが書けるようになりました。
いつか、この記事を見たときに、ああ、こんなカンタンなことを書いていたんだな、となるかもしれませんね。
