パソコン様に操られて頂く… [HTML&JavaScript]
私自身、JavaScriptはほとんど素人で、![[あせあせ（飛び散る汗）]](https://blog.ss-blog.jp/_images_e/162.gif)
他の先輩サイトで勉強させて頂いている身であり、
そもそもJavaScriptで長いプログラムなど
書いたことがないもので、調べてみたんですが、
前に、あかしや さんからデバッグ(プログラムの不具合を修正すること)
についてご質問がありましたが、
ブラウザがfirefoxやsafariなら
アドオンなどで強力？なデバッガーがあるようです。
IEなら、
１つは、アドレスバーに『javascript:alert(変数など);』と入れて変数などの値を見る方法。
２つ目は、Officeがあれば、Visual Studioライクの環境が実現できるようです。
３つ目は、そのVisual Studioをインストールする方法。
ぐらいで、あとは、いくらかのフリーソフトがあるようです。
前に、JavaScriptなどの簡易型言語が簡単だと申し上げましたが、
本格的と言いますか、例えば、C言語などは、
本来は、最初はJavaScriptと同様に、テキストで記述するんです![[メモ]](https://blog.ss-blog.jp/_images_e/76.gif)
(これをソースとか、ソースコードと言います)が、
その後、中間コードというものに変換され、それに様々なものを付加し、
最終的に実行形式のプログラムになります。
この過程をコンパイルと言い、ソースコードをコンパイルするプログラムを
コンパイラーと言います。
いったんコンパイルされれば、非常に高速で動作しますが、
ソースコードが巨大だと、コンパイルするのに時間がかかったり、
デバッグに時間がかかったりします。![[もうやだ～（悲しい顔）]](https://blog.ss-blog.jp/_images_e/143.gif)
そういう煩わしさからすれば、JavaScriptはわかりやすい言葉で、
プログラムを書き、あとはほとんど、JavaScriptがやってくれますので、
比較的楽な訳なんです。(でもバグってもあまり何にも言わない。)![[がく～（落胆した顔）]](https://blog.ss-blog.jp/_images_e/142.gif)
そういう意味で比較的かなり入り込みやすいんです。
ということで、a-yaさんから続きのリクエストや
複数の方からご要望を頂き？ましたので、![[exclamation&question]](https://blog.ss-blog.jp/_images_e/159.gif)
JavaScriptとHTMLの理解のお手伝いになればということで、
擬似的なサイコロを作ってみました。
一応、わからない方のために注釈を入れておきますと、
HTMLは歴としたコンピュータ言語で、
皆さんが今ご覧のブログなどは、これで書かれてあります。
あっ、それから、おそらくセキュリティを強めにされている方は、
IE6なら前回、ダブルクリック後すぐにセキュリティの警告が出て、
それを解除したら、実行されて、Alert文のポップアップ感が![[ぴかぴか（新しい）]](https://blog.ss-blog.jp/_images_e/150.gif)
体験できなかった方も多かったのではないでしょうか。
話を戻しますと、まずソースです。
<script type="text/javascript"><!--
function dice(){
tmp = Math.random() * 6 + 1;
document.fomu.atai.value = Math.floor(tmp);
}
//--></script>
<center>
<form name="fomu">
<input type="text" style="width:25px; background:#FFFF00; text-align:center; font-weight:bold" name="atai" value="0"><br />
<input type="button" value="サイコロを振る" onClick="dice()">
</form>
</center>
試されたい方は、いつものようにメモ帳をお開きになって
といっても紙のメモ帳ではだめですよ。
えっ、そんなことはわかっている、早く進めろ？![[パンチ]](https://blog.ss-blog.jp/_images_e/153.gif)
そうですね。それで、WindowsXPなら、
左下のスタートからすべてのプログラム、
そして、アクセサリにメモ帳が、いじっていなければあると思います。
あるいは、ワードパッドでも、秀丸でも、なんでもいいです。
テキストエディタと呼ばれるものを開いて、コピー＆ペーストです。
ほんでからして、拡張子を
～.htmlか～.htmでデスクトップにでも保存してください。
そして、そのファイルをダブルクリックですね。
おそらくセキュリティの警告が出ます。それを解除して…、
解除しても大丈夫ですよ。
変なウイルスみたいのは入っていないですから。
すると、下の例のようなものが、無垢のブラウザに現われますので、
と言いますかすでに見えていますが、ボタンを押して遊んでみてください。
説明のためもう一度掲示します。
<script type="text/javascript"><!--
↑はおまじないでした。
ちなみにHTMLは<??>対象</??>と対象物をタグで囲むんです。
そして、入れ子構造にしなければいけません。
↓JavaScriptはいくつかの命令をまとめてひとつの命令にする事ができます。
命令は関数といいます。ここでは、diceという名前の関数を作りました。
function 関数名(){文;}という形になります。
function dice(){
↓tmpという関数diceの中でしか通用しないローカル変数を宣言し、
tmpに右辺の値を代入しています。
今回は取り上げませんが、逆にScript内全てで通用する、グローバル変数もあります。
代入は=です。左辺と右辺が等しいではありません。
tmp = Math.random() * 6 + 1;
↑Math.random()はScriptで予め用意されている数学関数で、
0～1の間の小数を擬似ランダムで求めてくれます。
擬似サイコロと書いたのは、正確にはランダムでない為です。
*は×のことです。
6倍して1を足せば1～7の間の小数になりますよね。
上の様な;までの1行から複数行を文と言いますが、
文は必ず;で終わらなければなりません。
tmpから;まで何行あっても1文です。
↓関数の中は見やすいようにインデントします。
document.fomu.atai.value = Math.floor(tmp);
↑HTMLのformタグの名前がfomuで、その中のテキスト欄の名前がataiで、
その値valueに右辺を代入せよと言う事です。
Math.～は組み込み数学関数のようです。
正確にはMathオブジェクトの～メソッドと言います。
Math.floor(?)は?の小数部分を切り捨てて下さいと言う意味です。
これで、1～6の整数になりますよね。
}
↑関数の終わりです。忘れないように。
↓Scriptの終わりです。これまた忘れずに。
//--></script>
↓HTMLの始まりです。ホントは
<HTML>
<HEAD>
</HEAD>
<BODY>
本文
</BODY>
</HTML>
という形になります。
↓<center>タグで囲まれた部分をセンタリングします。
<center>
↓HTMLでテキストの入力欄やボタン等を設けるformタグです。名前がfomuです。
<form name="fomu">
↓テキストの入力欄を設けます。
styleはスタイルシートです。;で区切っていろいろ整形できます。
widthで25ピクセル分横幅を確保してくださいという意味です。
backgroundで色を指定できます。
R=赤、G=緑、B=青で、#RRGGBBで指定します。
例えば10進数でR(G、Bも)の最高値が255です。
これを16進数で表すとFFです。真っ赤です。
よって#FFFF00は赤と緑で黄色です。
これは、アクセサリの電卓を使って、関数電卓モードですぐ計算できます。
16進数で指定するか、yellowとカラーネームで指定します。
text-alignで欄の中の文字を寄せることができます。この場合、真ん中です。
<input type="text" style="width:25px;
background:#FFFF00; text-align:center;
<br />おなじみ、改行です。↓
font-weight:bold" name="atai" value="0"><br />
↑font-weightで文字の太さを指定します。boldで太字です。
normalが普通の太さです。
入力欄の名前がataiで、その中身の値valueが0です。
最初0が入っていましたよね。
<input type="button" value="サイコロを振る"
onClick="dice()">
↑ボタンを設けます。表示する値valueが「サイコロを振る」です。
onclickクリックするとJavaScriptのdice関数を実行せよという事になります。
</form>
↑formタグの終わりで忘れないようにしましょう。
</center>
↑センタリングタグの終わりです。やっぱり忘れずに。
他の先輩サイトで勉強させて頂いている身であり、
そもそもJavaScriptで長いプログラムなど
書いたことがないもので、調べてみたんですが、
前に、あかしや さんからデバッグ(プログラムの不具合を修正すること)
についてご質問がありましたが、
ブラウザがfirefoxやsafariなら
アドオンなどで強力？なデバッガーがあるようです。
IEなら、
１つは、アドレスバーに『javascript:alert(変数など);』と入れて変数などの値を見る方法。
２つ目は、Officeがあれば、Visual Studioライクの環境が実現できるようです。
３つ目は、そのVisual Studioをインストールする方法。
ぐらいで、あとは、いくらかのフリーソフトがあるようです。
前に、JavaScriptなどの簡易型言語が簡単だと申し上げましたが、
本格的と言いますか、例えば、C言語などは、
本来は、最初はJavaScriptと同様に、テキストで記述するんです
(これをソースとか、ソースコードと言います)が、
その後、中間コードというものに変換され、それに様々なものを付加し、
最終的に実行形式のプログラムになります。
この過程をコンパイルと言い、ソースコードをコンパイルするプログラムを
コンパイラーと言います。
いったんコンパイルされれば、非常に高速で動作しますが、
ソースコードが巨大だと、コンパイルするのに時間がかかったり、
デバッグに時間がかかったりします。
そういう煩わしさからすれば、JavaScriptはわかりやすい言葉で、
プログラムを書き、あとはほとんど、JavaScriptがやってくれますので、
比較的楽な訳なんです。(でもバグってもあまり何にも言わない。)
そういう意味で比較的かなり入り込みやすいんです。
ということで、a-yaさんから続きのリクエストや
複数の方からご要望を頂き？ましたので、
JavaScriptとHTMLの理解のお手伝いになればということで、
擬似的なサイコロを作ってみました。
一応、わからない方のために注釈を入れておきますと、
HTMLは歴としたコンピュータ言語で、
皆さんが今ご覧のブログなどは、これで書かれてあります。
あっ、それから、おそらくセキュリティを強めにされている方は、
IE6なら前回、ダブルクリック後すぐにセキュリティの警告が出て、
それを解除したら、実行されて、Alert文のポップアップ感が
体験できなかった方も多かったのではないでしょうか。
話を戻しますと、まずソースです。
<script type="text/javascript"><!--
function dice(){
tmp = Math.random() * 6 + 1;
document.fomu.atai.value = Math.floor(tmp);
}
//--></script>
<center>
<form name="fomu">
<input type="text" style="width:25px; background:#FFFF00; text-align:center; font-weight:bold" name="atai" value="0"><br />
<input type="button" value="サイコロを振る" onClick="dice()">
</form>
</center>
試されたい方は、いつものようにメモ帳をお開きになって
といっても紙のメモ帳ではだめですよ。
えっ、そんなことはわかっている、早く進めろ？
そうですね。それで、WindowsXPなら、
左下のスタートからすべてのプログラム、
そして、アクセサリにメモ帳が、いじっていなければあると思います。
あるいは、ワードパッドでも、秀丸でも、なんでもいいです。
テキストエディタと呼ばれるものを開いて、コピー＆ペーストです。
ほんでからして、拡張子を
～.htmlか～.htmでデスクトップにでも保存してください。
そして、そのファイルをダブルクリックですね。
おそらくセキュリティの警告が出ます。それを解除して…、
解除しても大丈夫ですよ。
変なウイルスみたいのは入っていないですから。
すると、下の例のようなものが、無垢のブラウザに現われますので、
と言いますかすでに見えていますが、ボタンを押して遊んでみてください。
説明のためもう一度掲示します。
<script type="text/javascript"><!--
↑はおまじないでした。
ちなみにHTMLは<??>対象</??>と対象物をタグで囲むんです。
そして、入れ子構造にしなければいけません。
↓JavaScriptはいくつかの命令をまとめてひとつの命令にする事ができます。
命令は関数といいます。ここでは、diceという名前の関数を作りました。
function 関数名(){文;}という形になります。
function dice(){
↓tmpという関数diceの中でしか通用しないローカル変数を宣言し、
tmpに右辺の値を代入しています。
今回は取り上げませんが、逆にScript内全てで通用する、グローバル変数もあります。
代入は=です。左辺と右辺が等しいではありません。
tmp = Math.random() * 6 + 1;
↑Math.random()はScriptで予め用意されている数学関数で、
0～1の間の小数を擬似ランダムで求めてくれます。
擬似サイコロと書いたのは、正確にはランダムでない為です。
*は×のことです。
6倍して1を足せば1～7の間の小数になりますよね。
上の様な;までの1行から複数行を文と言いますが、
文は必ず;で終わらなければなりません。
tmpから;まで何行あっても1文です。
↓関数の中は見やすいようにインデントします。
document.fomu.atai.value = Math.floor(tmp);
↑HTMLのformタグの名前がfomuで、その中のテキスト欄の名前がataiで、
その値valueに右辺を代入せよと言う事です。
Math.～は組み込み数学関数のようです。
正確にはMathオブジェクトの～メソッドと言います。
Math.floor(?)は?の小数部分を切り捨てて下さいと言う意味です。
これで、1～6の整数になりますよね。
}
↑関数の終わりです。忘れないように。
↓Scriptの終わりです。これまた忘れずに。
//--></script>
↓HTMLの始まりです。ホントは
<HTML>
<HEAD>
</HEAD>
<BODY>
本文
</BODY>
</HTML>
という形になります。
↓<center>タグで囲まれた部分をセンタリングします。
<center>
↓HTMLでテキストの入力欄やボタン等を設けるformタグです。名前がfomuです。
<form name="fomu">
↓テキストの入力欄を設けます。
styleはスタイルシートです。;で区切っていろいろ整形できます。
widthで25ピクセル分横幅を確保してくださいという意味です。
backgroundで色を指定できます。
R=赤、G=緑、B=青で、#RRGGBBで指定します。
例えば10進数でR(G、Bも)の最高値が255です。
これを16進数で表すとFFです。真っ赤です。
よって#FFFF00は赤と緑で黄色です。
これは、アクセサリの電卓を使って、関数電卓モードですぐ計算できます。
16進数で指定するか、yellowとカラーネームで指定します。
text-alignで欄の中の文字を寄せることができます。この場合、真ん中です。
<input type="text" style="width:25px;
background:#FFFF00; text-align:center;
<br />おなじみ、改行です。↓
font-weight:bold" name="atai" value="0"><br />
↑font-weightで文字の太さを指定します。boldで太字です。
normalが普通の太さです。
入力欄の名前がataiで、その中身の値valueが0です。
最初0が入っていましたよね。
<input type="button" value="サイコロを振る"
onClick="dice()">
↑ボタンを設けます。表示する値valueが「サイコロを振る」です。
onclickクリックするとJavaScriptのdice関数を実行せよという事になります。
</form>
↑formタグの終わりで忘れないようにしましょう。
</center>
↑センタリングタグの終わりです。やっぱり忘れずに。