JavaScriptちゃんでプログラムしますぜい

 前回、最初に見せた3D画像ページはcube-600.htmlという名前のHTMLファイルをWebブラウザが読み込んで表示した結果っす。

 

↓こいつね

cube-600.html

 

 このHTMLファイルてのは、人間が直接読み書きできるテキストファイルなわけでして、Webブラウザで表示させたい内容を記述するためのタグ(<>で囲んだ文字列)によってブロック化されているってのが特長です。

 

 

 上の図のようにに<タグ名><タグ名/>に囲まれた部分が、そのタグ名のブロックとなります。
 

 <タグ名>  ←「タグ名」ブロック開始タグ

 ・・・   ← ブロックの内容

 <タグ名/>   ←「タグ名」ブロック終了タグ

 

 ブロックは入れ子にもできて、HTMLファイルでは一番外側のブロックとしてhtmlブロックを用意し、その中にheadブロック、bodyブロックを置くという決まりがあります。

 注意)ちなみに一番最初の<!DOCTYPE html>は、それ一つでブロックとなるタグで「このテキストファイルはHTMLファイルですよ」ってのを示すためのタグです。無くても動いてくれますが礼儀として入れましょう。

 

 で、このうちbodyブロックに書かれた内容が、Webブラウザの画面内容として表示される仕組みです。

 

 

 基本的には、bodyブロック内に表示させたい文字列を書き込みます。

 

 注意)<br/>は改行を意味する単独のタグ

 

 で、これだけだと味気ないので、例えば一部分だけ文字を大きくするとか、赤色にするといった外観(HTMLでは、これをスタイルって呼んでます)の調整をしたいとか思うわけですよ。

 その場合、まずbodyブロック内の調整したい部分をdivタグでブロック化しておきます。

 

 そしてheadブロック側にstyleタグを置くことで、divブロックに対してスタイルを指定します。例えばdivタグ内の文字列は全て赤色という指定は次のようになり、結果divブロック内の文章は赤文字になるわけです。

 

 

 直接bodyブロック内でスタイルを指定することも可能なんですが、こんな感じでbodyブロックに内容、headブロックにスタイルと分離しておくのが今風のHTMLです。

 

 もちろん、これだけだとdivブロックか、そうでないか程度の組み合わせしかできません。なので、divブロックはそれぞれのブロックごとに識別子を付けることができ、その識別子ごとにスタイルを指定できるようにもなってます。

 識別子は<div id="識別子">とすることで指定できます。例えば

 

  <div id="canvas-frame">

 

とすることで、このdivブロックはcanvas-frameという識別子を持つことになります。識別子として指定する文字列は任意です。ここではcanvas-frameとしたけどview-3dやgreatViewにしてもかまいません。

 注意)ただし半角スペースを使うのは不可。漢字も使えるみたいだけど半角英数を使うのが無難っす。あと先頭一文字目に数字は使えません

 

 でもって、styleタグ側ではdiv#識別子とすることで、その識別子を持つdivブロックだけに限定したスタイルを指定できます。例えば

 

 div#canvas-frame {
     font-size:1cm
 }

 

 

と書くことで、識別子canvas-frameを持つdivブロックだけ、文字の大きさが1cmになります。

 

 

 

 div#canvas-frameのスタイルが、div側の文字色設定を引き継いでいるのはそういった取り決めがあるからです。こんな風に、自分のスタイルに定義されていないスタイルは、自分の上流(div#・・・ならdivが上流)のスタイルを引き継ぐ仕組みから、この取り決めをCSS(Cascading Style Sheets)と呼びます。

 注意)styleタグに書かれたtype="text/css"てのが、このタグに書かれた内容がCSS仕様に従うことを示しています

 

 このCSSを利用して、cube-600.htmlのbodyブロックでは、空のdivブロック(canvas-frameという識別子)を1つだけ持たせ、そのブロックにWebブラウザの画面上で幅:600ピクセル、高さ600ピクセルの大きさを持つように指定しています。

 

 

 

 で、この矩形指定から想像できると思いますが、このcanvas-frameというdivブロックこそが3D表示画面です。

 ただしHTMLでは、3D表示をbodyブロックに直接記述する機能は提供されてません。そのためbodyブロック内のcanvas-frameというdivブロックは空になるわけです。

 

 <div id="canvas-frame"></div>  ←3Dなんて書きようがないので、内容部は空

 

 んじゃ、なんで3D表示されてんだよっていうと、3D表示は表示矩形を確保したdivブロックにJavaScriptというプログラム言語を使って描いています。

 

これな↓

https://codeiq.jp/magazine/2015/10/30057/


 JavaScriptのプログラムは、次のようにheadブロック側にscriptというブロックを用意して記述します。

 

<html>
<head>
・・・
<style type="text/css">
・・・
</style>

<script>  

  ↓ JavaScriptのプログラム​
    function threeStart() {
        //    描画領域の設定
        var frame = document.getElementById('canvas-frame');
・・・

</script>
</head>
 

 ここに書かれた3D空間に赤い球体を描く、灰色の立方体を描くっといった処理が、canvas-frameというdivブロック内に3D画像を表示させているわけです。

 

 

 cube-600.htmlを前回説明したSafariの開発ツールでソース表示させるかしてscriptブロック見てもらうとわかりますが、こんなふうに、赤い球体を描くにしても、灰色の立方体を描くにしても、色を指定したり、形を指定したり、座標を指定したりといろいろな処理が必要なわけです。

 

 

 で、これをにまとめているのが、functionというキーワードで始まるブロックです。

 このブロックを関数と呼びます。

 

 

 関数にも名前がつけられるようになっていて、その名前を使って関数内に書かれた一連の処理を実行させることができます。

 

 

 というところであらためてcube-600.htmlのbodyブロック見てみると

 

  <body onload="threeStart();">

 

となっていて、threeStartという関数ブロック(以後threeStart関数って呼ぶ)に関する何かを指定してるのがわかると思います。

 で、何をやっているかというと、onloadが、このbodyブロックの内容が画面に表示された時を意味していて、ここに=をつなげて

 

  ="JavaScriptで書かれた実行したい処理"

 

とすることで、画面に表示された時に実行させたい処理を指定しているわけです。

 書かれているのは

 

 threeStart();

 

 で、これが上で言ったJavaScriptで、名前の付いた関数を実行させる(これを関数を呼び出すと言います)方法です。

 というわけで

 

 

 となり、ようやくthreeStartまでたどり着いたところで力尽きたので、続きは次回。

 

AD