こんにちは。
JavaScript さわってみる企画 (番外編を除くと) ６回目。５回目と同じような用語とか概念みたいなハナシになります。
※毎度申し訳ありませんが初心者の勝手な解釈を書いただけの記事ですので情報の正確性は保証致しません。本記事の情報によるトラブル等、一切の責任を負いかねます。
この企画は入門書を読みながらコードを書いてみたりネットを調べてみたりしているのですが、こういう概念的な説明のところを読むのってなかなか理解し難くて辛いです(;´Д｀)
まだ全６章あるうちの３章で"JavaScriptの基礎"っていうテーマ。ただ４章以降は実践的でゲームを作り始めちゃってる感じなのでこの企画としては３章だけでいいのかも知れません。
プログラミングで１からゲームを作ることは”今のところ”計画にありませんので(;´･ω･)
今回のピックアップテーマは”DOM”。
はて、聞いたことがありませんね(´・ω・｀)
本に出てきたので説明を読んでみましたがイマイチ理解できませんでした。ネットでも調べてみます。
DOMとは
Document Object Modelの略。HTMLドキュメントをプログラムから利用するためのAPI。HTMLドキュメントの構造を表現・ブラウザとのやり取りをして表示結果をコントールする。
(引用元:tcd-theme.com)
…だそうです。
うん、何言ってるのかわからん(・∀・)
参考サイトによればJavaScriptを扱うなら必須の知識って書かれてますね…読み進めます↓
もう少しかんたんに説明すると、HTMLドキュメントの中の「何処」に変更を与えるのか指定し、任意のプログラムを実装することができること。
(引用元:tcd-theme.com)
…だそうです。
うん、うーん…(;´Д｀)
ふわっとしたままとりあえず最後まで読んでみることに。
するとinnerHTMLって言うのが出てきました。
これはJavascriptさわってみる企画の記念すべき第１回目で使ったやつですね。
その時のコードがこちら↓
入力<input id="i0" value="うおああいええ" />
<script>
function shutsuryoku()
{
var a = document.getElementById("i0").value;
aaa.innerHTML = a;
}
</script>
<button onclick="shutsuryoku()">出力</button>
<p>ここに書き出し→ : <i id="aaa"></i></p>
このときinnerHTMLを使ったのは本で見たからではなくて本の内容をブログ上でやりたかったためにネットで調べて追加した内容です。
document.getElementById(“i0”) ってところをあえて本のような説明をすると「idが”i0”の要素を取得」しています。
この言い回し、わかりにくいなー。まぁ正確に伝えようとするとこうなってしまうのでしょうけど。
正確性を切り捨てて言い換えます。document.getElementById(“i0”) は処理の対象を指定しています。
指定しているのは丸で囲ったところ。id＝i0 と書いてありますね。続く.value が処理の内容で"値の取得"です。
つまり、「丸で囲ったところのvalueを持ってきて」ってことを言ってて、input要素はweb上の入力欄ですから、入力欄に入れられた文字列が返ってくるわけです(初期値だったら"うおああいええ")。
.innerHTMLも同様に処理の部分で「テキストを書き出して」っていう内容です。
aaa.innerHTML = a; って書いてますけどこれだけでもidが”aaa”の要素を取得できているようですね(=処理の対象を指定できている)。処理の対象は下の<i id=”aaa”></i> のところ。
今考えればこう書くべきと思ってしまいますね↓
document.getElementById(“aaa”).innerHTML = a;
これでも動きます。むしろ前者で動くんだ！？ へぇー(;´Д｀) ってなったｗ
今回は概念のお勉強なのでそれはひとまず置いておいて、「<i id=”aaa”></i> のところにa(つまり入力欄に入れられた文字列)を書き出してね。」って意味になるのです。
こういう感じで「文書の”ここ”を”こう”してね。」って"場所"と"処理"を指定するのが”DOM”ってことだと思います(そう解釈しました)。
たしかに最初のDOMの説明のとおり、このコードは表示結果をコントロールするものですね。
第1回目で本の内容をブログでやろうとしたことで既に使っていたというわけです。
「要素を取得」という言葉がどうにもしっくり来なくてドツボにハマってしまいましたが…(-_-;)
それでは まとめの一文。
DOMは文書中の場所を指定して処理を行うってこと。場所の指定は要素単位で、nameやidなどで指定する。これを要素の取得と言うそうな。
ちがってたらすみません(*'ω'*)
次回↓
らくがき。描いた立ち絵を画面の隅っこに表示させてみる。
採用は微妙。
ランキング参加中です。下のバナーをクリックして頂けるとやる気値が増幅します!！
