まほうじゅ＋こぎん刺し
まほうじゅＰＬＡＺＡ、ご案内ブログなど、まほうじゅブログの詞
子供たちが駒に向かい 視界を広げ
火車（ひしゃ）や 勝利や 知恵までも つかもうとしている
「まほうじゅとは、おもちゃだよ。」と、ウソを言えない私、
見る間に学力が伸びるの気づいていた
部屋のオブジェが表す 「何か」
ボケかけのママの脳も揺さぶるらしい
互いにとって、気持ちいつも探る遊び
ちょっと、教室じゃ習えない「まほう術」
（Ｍｅｌｏｄｙ：久保田早紀「異邦人」）
＊＊＊＊＊＊
新型肺炎ウィルスへの警戒は、
ちょっとやそっとじゃ解けそうにありません。
みなさん、観念してスティホームしていますか？
家の中でできることをしましょう、という情報が
ネットやテレビにたくさん集まっています。
その中で、寝転がりながらダイエット体操、というのがあって
それをやるには、カウンターがあったらいいのにな、と
ふと思い立ち、作成中のやつをそういうプログラムにしたろか、と。
＊JavaScript
mygram.html <body>部分に「プログラム」を追加します。
</body>直前です。新たに<div id="javascript">範囲を設け、その中に
<script>～</script>の範囲を作ります。
<script>～</script>範囲に書いているのが
JavaScript
というプログラム言語です。box1、box2の表示まで各行の処理が終わったら
スクリプト（＝シナリオ、プログラム）を実行する番に降りてきます。
c=0； パソコンの記憶域の1部に「c」と名付け使わせてもらいます。
名付けた記憶域を「変数」と呼びます。値をゼロとします。
window.onkeydown=presskey；
Windowsパソコンのキーが何か押されたらpresskeyをしなさい、とあります。
presskeyとは、別に定義している命令群の名前で、こういう別定義命令は
「関数」「ファンクション」などの呼び名があります。
function presskey(e){ ・・・ }
プログラムを定義している部分です。プログラム群の名前がpresskeyで
キーが押されたら実行される具体的な内容がここに書かれています。
(e)がなんのこっちゃかわかりませんけど、とりあえずこのまま書いてください。
eは「何が押されたか情報」です。これを使って
「何が押されたかでいろんなことをする」芸も可能ですが
ここでは、何か押されたと検知するだけを目的にしています。
c=0 の変数設定のところは実行順が来た時に行いますが、
function からの書き始めは定義です。この時に実行はしません。
合図があれば（この場合は、キー入力があった場合）発動します。
c=c+1； 変数cに１足した値を新たにメモリcの内容とする、ということで
変数cの値を1増やします。このように操作次第で刻々と値が変わるのが
「変数」です。
box2.innerHTML=c； cの値はbox2のHTML内容となります。表示内容ですね。
こうして、キーを押すたびにbox2の値が増えるカウンターの出来上がり。
また、<div id="javascript">について、スタイル設定を追加します。
追加した設定は
display：none； 表示しない
画面表示が出来上がってそれから、という実行順の都合上
</body>直前に置いていますが、表示したい文ではありません。
<script>タグ範囲自体、普通は表示されないのですが、念のため。
さて、実行してみましょう。
実はタグ記述だけでは動きやリアクションのある画面は作れません。
このJavaScriptという言語で初めて、計算して答えを表示したり、
キーを押したなどの合図で動きを起こさせたりできるのです。
そのため、「HTMLをプログラムとは言わない」という見解もあります。
動かす「プログラム」以前に、それに作用される「もの」を用意した感じ。
<div>を書いた順に表示処理するんだから、
プログラムでいいと思うんだけどね。
さて、寝転がりダイエットです。
３０回１セットということで、
１ターンごとにとにかくキーボードにかけた指でプッシュ。
自分では回数を気にせず、時おり回数を確認するのです。
数字がちっちゃい、とか、いろいろあるので、直したいですね。
＊JavaScript おさらい
JavaScriptはC言語の作りを手本にできている本格プログラム言語です。
条件分岐、繰り返し、関数定義など、各言語大差ない基本的な要領を
JavaScriptも抑えているうえ、HTMLとともにブラウザ操作が主な用途で
このようにすぐに使えることからプログラム学習に最適だ
と、私は、思います。
苦手分野は、ファイル操作。インターネット上での活躍が多く、
アクセスした先のパソコンのファイルを読み込んだりが得意だったら、
大問題になりますからね。
例題で示した、変数、関数、イベントなどの使用例は、JavaScriptの文例
という以上に、言語の種類を超えて常道パターンです。
＜変数＞
パソコンの記憶域に名前を付けてプログラムの動作に活用します。
mygram.htmlでは c=0； c=c+1；（cの内容を増やす）などと使用しました。
a=2 としたら aといえば2である。b=4 としたときに
c=a+b；d=a/b；としたら、cは6、dは0.5 になります。
変数には文字や文章を入れることもできます。
a=”こんにちは。”としたら、aを表示せよという命令では
こんにちは。 と表示します。
＜関数＞
定義しておきプログラム中の呼び出しによって実行する命令グループです。
mygram.htmlでは function presskey(e){ ・・・ }という定義を行いました。
基本的に、プログラム中の関数の使い方は、文中で関数名を書くだけです。
c=0；
presskey()；←
・
・
みたいな感じで。
＜イベント＞
キー入力、マウスボタンのクリックなど、合図で発動する仕掛けです。
mygram.htmlでは window.onkeydown=presskey；
これは、画面上の区域というよりはWindowsパソコンで、キー入力あり
が検知されたら関数を実行するよ、という仕掛けを設けた部分です。
使えば使うほど、広い、深い、面白いのがプログラム言語です。
次回は「JavaScriptでスタイル変更」
シリーズ「おうちではじめるプログラミング」として連載しています。
バックナンバーをご確認ください。
テーマ別「プログラミング入門」
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
