JavaScriptを使って九九の表を作る（tableを使って)

締切済

質問者：marumaru-33
質問日時：2005/05/21 08:18
回答数：6件

大学で、タイトルに書いてある通りの課題が出されました。
以前も質問させていただきましたが、自分の専攻としている分野ではないのですが（つまり、学部の必修科目ではないです）、教員免許取得希望者は落とせない単位なんです…。
もちろん、こんな難解な科目（しかも必須じゃない）を取っている生徒は教員志望者くらいなもので、かなり難しいと評判の科目です。
加えて、私はパソコン初心者です。
なんとか単位を取らねばならないので頑張りたいです。

授業ではJavaScriptの概要を説明されたのみで、実践は教えてもらっていないのにいきなりこんな課題が…。

tableを使っての九九の表の作り方を教えてください。
全て教えてください、という訳ではありません。課題なので自分の力でやらなければならないのは分かります。
タグや記号は自分で調べるので、「九九の表を作るためにはどのような命令をすればいいのか」手助けが欲しいです。

お願いします。どうか助けてください。来週中に提出なんです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (6件)

最新から表示
回答順に表示

No.1

回答者： hanazawa-love
回答日時：2005/05/21 09:05

JavaScriptの概要の説明はあったと書いてありますので構文なんかはある程度わかっているものとして答えます。

とりあえず九九の答えを１の段から順番に出力するっていう部分のみを記載しますね。

for (i=0; i<9; i++) {
alert(i+1 + "の段");
for (j=0; j<9; j++) {
alert(i*j);
}
}

自分で動かして確認はしてませんが、こんな感じで九九の答えが延々とアラートで出力されると思います。
あとは<table>タグなんかを使ってやれば表っぽくなると思いますよ。

- 0
- 件

通報する

この回答へのお礼

どうもありがとうございます！
今日は他にやらねばならない課題が山ほどあるので、まずはそっちを片付けてから、プログラミングの課題に取り組もうと思います！

わからないことがあれば、またココで質問させていただきます。

本当にご協力ありがとうございます。

通報する

お礼日時：2005/05/21 16:16

No.2

回答者： sassakun
回答日時：2005/05/21 12:07

特別な関数も使わないし，ヒントを出そうとすると，ほとんど答えになってしまうのですが…

「九九」は難しいので，「一一」から考えましょう。
まず，HTML内のJavaScriptではfunctionをヘッダの中に配置します。
1×1＝A　で，Aを求める場合，

function keisan(){
A.value = 1 * 1;
}

となります。命令も何もないというか，単なる計算です。.valueはセットするということです。
それをテーブル内のセルにテキストボックスに表示すれば良いということになります。

最終的には

-- 　Y1　　Y2　　Y3　…　　　
X1　A11　A12　A13 …
X2　A21　A22　A23 …
X3　A31　A32　A33 …
…　 …　　…　　…

というような変数の入った表をイメージして，「一一」の表をHTMLで書くと

---------------------------------
<html>
<head>
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>一×一</title>
<Script type="text/javascript">

</Script>
</head>
<body>
<Form name="kuku" method="POST">
<table border="1" cellpadding="1" cellspacing="1">
<tr>
<td>---</td>
<td><Input type="text" name="Y1" size="5" value="1"></td>
</tr>
<tr>
<td><Input type="text" name="X1" size="5" value="1"></td>
<td><Input type="text" name="A11" size="5"></td>
</tr>
</table>
<INPUT type="button" value="計算" onClick="keisan()"> <INPUT type=reset value="リセット">
</Form>
</body>
</html>
---------------------------------

のようになります。
計算ボタンをクリックすると，1×1＝1 がA11に計算されます。
計算するオブジェクトのエリア指定がいるため，テーブル全体をFormでくくっています。
Y1やX1の初期値(value)を"1"にしていますが，この1を他の数に変えて計算ボタンをクリックすると，A11もそれにしたがって再計算されます。

これを，「九九」まで延長して行けばいいわけです。
考え方というかほとんど答えになってしまって，質問者様の勉強にならないかもしれませんが，
「二二」だと，

---------------------------------
<html>
<head>
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>二×二</title>
<Script type="text/javascript">

</Script>
</head>
<body>
<Form name="kuku" method="POST">
<table border="1" cellpadding="1" cellspacing="1">
<tr>
<td>---</td>
<td><Input type="text" name="Y1" size="5" value="1"></td>
<td><Input type="text" name="Y2" size="5" value="2"></td>
</tr>
<tr>
<td><Input type="text" name="X1" size="5" value="1"></td>
<td><Input type="text" name="A11" size="5"></td>
<td><Input type="text" name="A12" size="5"></td>
</tr>
<tr>
<td><Input type="text" name="X2" size="5" value="2"></td>
<td><Input type="text" name="A21" size="5"></td>
<td><Input type="text" name="A22" size="5"></td>
</tr>
</table>
<INPUT type="button" value="計算" onClick="keisan()"> <INPUT type=reset value="リセット">
</Form>
</body>
</html>
---------------------------------

のようになります。
functionの部分は形式が一定の法則にしたがって，変化しています。
九九までできそうだったら，ここの部分を
while()
などでくくって，変数iをi+1のようにプラスしていってループさせるともっと簡素化されます。
ループは次の課題でしょうかね？

良いのだろうか？
説明が苦手なので，サンプルを表示する方が早くなり，
やっぱりほとんど答えになってる…(呟き)。

- 0
- 件

通報する

この回答へのお礼

こんなにご丁寧に…どうもありがとうございます！

そういえば、ループの説明をしていたのでループを使うんだと思います。

後で実際にやって見ます！

ご協力ありがとうございます。

通報する

お礼日時：2005/05/21 16:19

No.3

回答者： BLUEPIXY
回答日時：2005/05/21 15:23

document.writeを使ってjavascriptでtableを書き出すということがわからないのでしょうか？

HTMLでTABLEの書き方が判っているなら
<TD>に九九の結果を埋め込んで行けばいいですね。
それとも、
すでにあるテーブルにIDなどで、<TD>にあとから値を埋め込むということがわからないのでしょうか？

- 0
- 件

通報する

この回答へのお礼

テーブルについては授業内で全く説明が無く、課題を出された紙に「テーブルを使って表にすること」となっていたんです。

だから本当に自力でやるしかなくて…。ひどい先生です…

質問しに行ったら、「自分で考えてやりなさい」と冷たくあしらわれました…。

こっちは教員免許がかかっているというのに…

通報する

お礼日時：2005/05/21 16:24

No.4

回答者： BLUEPIXY
回答日時：2005/05/21 15:36

埋め込み方式でとりあえず作ってみました。

行と列の見出しはありません。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS">
<style>

</style>
<title>九九</title>
</head>
<body>
<script type="text/javascript">

</script>
</body>
</html>

- 0
- 件

通報する

No.5

回答者： BLUEPIXY
回答日時：2005/05/22 02:12

>テーブルについては授業内で全く説明が無く

ＨＴＭＬ部分については既に終わっているか、履修している人を対象としてるということなのでしょうね。
少なくとも、JavaScriptで対象としているのは、HTMLやＣＳＳを対象としているので、知らないでは話になりません。このままjavascriptの科目を受け続けるには早急に履修する必要があります。(HTMLやCSSいじらないなら、特別必要ないともいえるが、多分少なくともFORMに関しては必要になると思う）

ｔａｂｌｅの書き方には色々ありますが基本的には
<table>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
のような形になります。
<tr>～</tr>がテーブルの一行のデータを表します。
<td></td>が一行の中のデータを表します。
上記サンプルでは、１行に２つのデータ（セル）があるものが２行あります。（２×２の表）

- 0
- 件

通報する

No.6

回答者： sassakun
回答日時：2005/05/23 12:10

#2です。

　お詫びです。
#4さんの方法が正解ですね。
実習でこういう例題があるのですね。Googleで「JavaScript 九九 Table」と検索したら，

http://www.google.com/search?hl=ja&q=JavaScript+ …

ゾロゾロ出てきます。演習と解法みたいなのが。
（ついでにココも出てきてしまいます。キャシュで見たら，質問者さまがここで質問したのバレバレ。）

そうだったのですか，document.writeで自動的に表を完成させなさいという意味だったのですね。
Tableを使った計算機を作るのかと勘違いをしていました。
えらく遠回りをさせてしまうところでした。申し訳ございません。

内容が理解できるかどうかは別にして，後も答えは検索すると出てくるかもしれません。
でもテストとかになると検索は使えませんがら自分で考えなければならないと思います。
でも，検索で出た答えを参考に理解していくのも１つの方法かもしれませんね。

参考URL：http://www.google.com/search?hl=ja&q=JavaScript+ …