- 締切済み
JavaScriptを使って九九の表を作る（tableを使って)
大学で、タイトルに書いてある通りの課題が出されました。 以前も質問させていただきましたが、自分の専攻としている分野ではないのですが（つまり、学部の必修科目ではないです）、教員免許取得希望者は落とせない単位なんです…。 もちろん、こんな難解な科目（しかも必須じゃない）を取っている生徒は教員志望者くらいなもので、かなり難しいと評判の科目です。 加えて、私はパソコン初心者です。 なんとか単位を取らねばならないので頑張りたいです。 授業ではJavaScriptの概要を説明されたのみで、実践は教えてもらっていないのにいきなりこんな課題が…。 tableを使っての九九の表の作り方を教えてください。 全て教えてください、という訳ではありません。課題なので自分の力でやらなければならないのは分かります。 タグや記号は自分で調べるので、「九九の表を作るためにはどのような命令をすればいいのか」手助けが欲しいです。 お願いします。どうか助けてください。来週中に提出なんです。
- marumaru-33
- お礼率44% (663/1476)
- JavaScript
- 回答数6
- ありがとう数7
- みんなの回答 （6）
- 専門家の回答
みんなの回答
#2です。 お詫びです。 #4さんの方法が正解ですね。 実習でこういう例題があるのですね。Googleで「JavaScript 九九 Table」と検索したら， http://www.google.com/search?hl=ja&q=JavaScript+%E4%B9%9D%E4%B9%9D+Table ゾロゾロ出てきます。演習と解法みたいなのが。 （ついでにココも出てきてしまいます。キャシュで見たら，質問者さまがここで質問したのバレバレ。） そうだったのですか，document.writeで自動的に表を完成させなさいという意味だったのですね。 Tableを使った計算機を作るのかと勘違いをしていました。 えらく遠回りをさせてしまうところでした。申し訳ございません。 内容が理解できるかどうかは別にして，後も答えは検索すると出てくるかもしれません。 でもテストとかになると検索は使えませんがら自分で考えなければならないと思います。 でも，検索で出た答えを参考に理解していくのも１つの方法かもしれませんね。
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
>テーブルについては授業内で全く説明が無く ＨＴＭＬ部分については既に終わっているか、履修している人を対象としてるということなのでしょうね。 少なくとも、JavaScriptで対象としているのは、HTMLやＣＳＳを対象としているので、知らないでは話になりません。このままjavascriptの科目を受け続けるには早急に履修する必要があります。(HTMLやCSSいじらないなら、特別必要ないともいえるが、多分少なくともFORMに関しては必要になると思う） ｔａｂｌｅの書き方には色々ありますが基本的には <table> <tr><td></td><td></td></tr> <tr><td></td><td></td></tr> </table> のような形になります。 <tr>～</tr>がテーブルの一行のデータを表します。 <td></td>が一行の中のデータを表します。 上記サンプルでは、１行に２つのデータ（セル）があるものが２行あります。（２×２の表）
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
埋め込み方式でとりあえず作ってみました。 行と列の見出しはありません。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <style> <!-- TD { text-align:center; border:1px solid black; width:20; height:20; } //--> </style> <title>九九</title> </head> <body> <script type="text/javascript"> <!-- var row,col; document.write("<table border='1' cellspacing='0'>"); for(row=1;row<=9;row++){ document.write("<tr valign='middle'>"); for(col=1;col<=9;col++){ document.write("<td>"+row*col+"</td>"); } document.write("</tr>"); } document.write("</table>"); //--> </script> </body> </html>
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
document.writeを使ってjavascriptでtableを書き出すということがわからないのでしょうか？ HTMLでTABLEの書き方が判っているなら <TD>に九九の結果を埋め込んで行けばいいですね。 それとも、 すでにあるテーブルにIDなどで、<TD>にあとから値を埋め込むということがわからないのでしょうか？
特別な関数も使わないし，ヒントを出そうとすると，ほとんど答えになってしまうのですが… 「九九」は難しいので，「一一」から考えましょう。 まず，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"> <!-- function keisan(){ document.kuku.A11.value = document.kuku.X1.value * document.kuku.Y1.value; } //--> </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"> <!-- function keisan(){ document.kuku.A11.value = document.kuku.X1.value * document.kuku.Y1.value; document.kuku.A12.value = document.kuku.X1.value * document.kuku.Y2.value; document.kuku.A21.value = document.kuku.X2.value * document.kuku.Y1.value; document.kuku.A22.value = document.kuku.X2.value * document.kuku.Y2.value; } //--> </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のようにプラスしていってループさせるともっと簡素化されます。 ループは次の課題でしょうかね？ 良いのだろうか？ 説明が苦手なので，サンプルを表示する方が早くなり， やっぱりほとんど答えになってる…(呟き)。
お礼
こんなにご丁寧に…どうもありがとうございます！ そういえば、ループの説明をしていたのでループを使うんだと思います。 後で実際にやって見ます！ ご協力ありがとうございます。
- hanazawa-love
- ベストアンサー率13% (8/61)
JavaScriptの概要の説明はあったと書いてありますので構文なんかはある程度わかっているものとして答えます。 とりあえず九九の答えを１の段から順番に出力するっていう部分のみを記載しますね。 for (i=0; i<9; i++) { alert(i+1 + "の段"); for (j=0; j<9; j++) { alert(i*j); } } 自分で動かして確認はしてませんが、こんな感じで九九の答えが延々とアラートで出力されると思います。 あとは<table>タグなんかを使ってやれば表っぽくなると思いますよ。
お礼
どうもありがとうございます！ 今日は他にやらねばならない課題が山ほどあるので、まずはそっちを片付けてから、プログラミングの課題に取り組もうと思います！ わからないことがあれば、またココで質問させていただきます。 本当にご協力ありがとうございます。
お礼
テーブルについては授業内で全く説明が無く、課題を出された紙に「テーブルを使って表にすること」となっていたんです。 だから本当に自力でやるしかなくて…。ひどい先生です… 質問しに行ったら、「自分で考えてやりなさい」と冷たくあしらわれました…。 こっちは教員免許がかかっているというのに…