JavaScriptで9×9の・の表を作成する方法

このQ&Aのポイント
  • JavaScriptで9×9のます目一つ一つに・を表示させるプログラムを作成する方法を教えてください。
  • 現在のプログラムではうまくいかないので、ご教授いただけると助かります。
  • また、SEOを意識したハッシュタグも教えてください。
回答を見る
  • ベストアンサー

javascriptに関する質問です

9×9のます目一つ一つに・を表示させるプログラムをつくっているのですがなかなかうまくいきませんどなたかご教授ください <script language="JavaScript" type="text/javascript"> <!-- document.write("<center>"); document.write("<h1>・の表</h1>"); document.write("<table border>"); var i; var j; for (i =・;i=<9 ){ document.write("<tr>"); for(j =・;j=<9 ){ document.write("<td>"); document.write(i * j) document.write("</td>") } document.write("</tr>"); } document.write("</table>"); //--> </script>

質問者が選んだベストアンサー

  • ベストアンサー
  • neko-ten
  • ベストアンサー率55% (1287/2335)
回答No.1

とりあえず「・」って「中黒」のことでいいんかね。 文字化けしているなら、補足をお願いします。 (当方で閲覧すると中黒になっている) まず、forの構文が間違ってる。 まず、for関数には ・カウンタの初期値 ・カウンタによる実行条件 ・カウンタの値変更式 が必要。 カウンタなので、当たり前だけど指定するのは数値。 「・」は数値じゃないので指定しても意味がない。 つまり 「for (i =・;i=<9 )」の「i=・」は全くの間違い。 また、カウンタがどのように推移するかの値が必須なので、 「for (i =・;i=<9 )」の構文自体が間違っている。 あと、「=<」じゃなくて「<=」です。 上記をもとに、中黒を9x9で表示したいなら <script language="JavaScript" type="text/javascript"> <!-- document.write("<center>"); document.write("<h1>・の表</h1>"); document.write("<table border>"); for (i=1;i<=9){  document.write("<tr>");   for(j=1;j<=9;j++){   document.write("<td>");   document.write("・")   document.write("</td>")  }  document.write("</tr>"); } document.write("</table>"); //--> </script> 全角スペースでインデント取ってるので、コピペするなら修正してね。 for文は初歩の初歩なんで、きちんと勉強しないとすぐに躓くよ。

74591111
質問者

補足

中点で・で正しいです

その他の回答 (1)

  • neko-ten
  • ベストアンサー率55% (1287/2335)
回答No.2

修正・・・。 for (i=1;i<=9){ ↓ for (i=1;i<=9;i++){

関連するQ&A

  • javascripに関する質問です

    前回質問したものと似たような質問ですけど9×9のマス目一つづつに中点・を表示させたいですfor文とif文を使って表示させたいのですがなかなかうまくいきませんどなたかご教授ください <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>九九の表を作成する</title> </head> <body bgcolor="#ffffff"> <script language="JavaScript" type="text/javascript"> <!-- document.write("<center>"); document.write("<h1>九九の表</h1>"); document.write("<table border>"); for (var i = 1; i < 10; i++){ document.write("<tr>"); // ひとつの行を作成 for(var j = 1; j < 10; j++) { document.write("<td>"); if ( i==1 || j==1 ) { document.write("<td>"); document.write("・"); document.write("<","/td>"); } document.write("<","/tr>"); } document.write("<","/table>"); document.write("<","/center>"); //--> </script> </body> </html>

  • javascriptでカレンダーを作る方法

    下に書いてあるjavascriptを書き換えて、一番上のマスごとにはsun・mon・tue・wed・thu・fri・satと書かれ、その下の水曜日(wed)のマスから順に1~30まで一マスごとに数字を入れられ、sun・5・12・19・26は赤文字で書かれ、1より前のマスや30以降のマスは空欄のカレンダーを作るにはどうすればいいでしょうか? <!DOCTYPE html> <html lang="java"> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <script> var table=document.createElement("table"); table.setAttribute("border",1); var tbody=document.createElement("tbody"); for(var i=0;i<4;i++){ var tr=document.createElement("tr"); for(var j=0;j<7;j++){ var td=document.createElement("td"); var txt=i*7+j+1; td.appendChild(document.createTextNode(txt)); tr.appendChild(td); } tbody.appendChild(tr); } table.appendChild(tbody); document.getElementsByTagName("body")[0].appendChild(table); </script> </body> </html>

  • n回繰り返し書き出す

    例えば、 <TABLE border=1> <TR> <TD></TD> </TR> </TABLE> このような表を表示させたい場合、JavaScriptで <SCRIPT language="JavaScript"> <!-- document.write("<TABLE border=1><TR>"); document.write("<TD></TD>"); document.write("</TR></TABLE>"); --> </SCRIPT> このようにすると可能だと思うのですが、 <TABLE border=1> <TR> <TD></TD> <TD></TD> <TD></TD> </TR> </TABLE> このような場合や、あるいは <TD></TD> が20も30もあるような場合、最初の方法ですと、どうも非合理的に思えてなりませんし、 方法も絶対にあるようにも思えます。 このケースでいう、<TD></TD>をn回繰り返して表示させる。 というときには、どのように記述すればよいのでしょうか。 基本的なことを知らずに色々やってみているのですが、どうもわかりません。 おわかりになられる方、どうかご教授願います。

  • java scriptのwrite()の結果

    <script> document.write("<table border>"); document.write("<tr>"); for(i=0;i<3;i++){ document.write("<td>"+i+"</td>"); } document.write("</tr>"); document.write("</table>"); </script> 例えば上記のような Java Script を作ったとします。 Internet Explorer で実行すると表(HTMLの結果?)が表示されますが、 そうでなく 以下のようなHTMLのスクリプトを表示させる事は できますか? もしできるなら方法をお願いします。 <table border><tr><td>0</td><td>1</td><td>2</td></tr></table>

  • javascriptでちゃんと表示されない。

    javascriptの参考書通りに書いてるのになぜか出ません。 なぜか、新製品と価額だけしかでません。 リラックスチェアとか価額4000とかが出ません。 何が原因かわかりません。 何が原因なんでしょうか? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>はじめてのHTML</title> <style> table{border:solid 1px orange; border-spacing:0pc;} th,td{border:solid 1px orange; padding:4px;} </style> <script type="text/javascript"> var prod_name={'リラックスチェア','リラックスデスク','ブックスタンド'}; var prod_price ={4000,12000,800}; </script> </head> <body> <h1>新商品価額表</h1> <table> <thead> <tr><th>製品名</th><th>価額</th></tr> </thead> <tbody> <script type="text/javascript"> document.write('<tr>'); document.write('<td>'+ prod_name[0]+'</td>'); document.write('<td>'+ prod_price[0]+'</td>'); document.write('</tr>'); </script> </tbody> </table> </body> </html>

  • javascriptでラジオボタンを使用した検索をできるようにしたいです

    現在javascriptで任意のラジオボタンを選択すると、外部データベースから簡単な検索が出来るようなものを試しに作っているのですが、ラジオボタンのvalueが認識されないため頭を抱えています。 初歩的かつ、javascriptで行うことではないと思いますが、ご教授いただければ幸いです。 下に内容を入力しますので、宜しくお願いします。 ----------------------- <html> <head> <title>DB</title> <style type="text/css"> <!-- th{background:#000080;color:#ffffff;} .light-center{background:#ffffff;text-align:center;} .light{background:#ffffff;} .dark-center{background:#dddddd;text-align:center;} .dark{background:#dddddd;} --> </style> <script language="javascript" src="./data.js"></script> <script language="javascript"> <!-- var i; var cols=3; var rows=10; var amount=cols*rows; function dataSearch(){ if(document.iform.ichar.length){ if(document.iform.ichar[0].value=="" && document.iform.ichar[1].value==""){ alert("選択してください"); document.iform.ichar.focus(); return false; } var flag=false; var resultWindow=window.open("","Result","toolbar=no,location=no,status=no,menubar=no,width=400,height=200"); resultWindow.document.write("<h3>検索結果</h3>"); resultWindow.document.write("<hr /><table border='1'>"); for(i=0;i<amount;i+=cols){ if(exDB[i]==document.iform.ichar[0].value){ resultWindow.document.write("<tr><td width=60>" + exDB[i] + "</td>"); resultWindow.document.write("<td width=120>" + exDB[i+1] + "</td>"); resultWindow.document.write("<td width=120>" + exDB[i+2] + "</td></tr>"); flag=true; }else{ if(exDB[i]==document.iform.ichar[1].value){ resultWindow.document.write("<tr><td width=60>" + exDB[i] + "</td>"); resultWindow.document.write("<td width=120>" + exDB[i+1] + "</td>"); resultWindow.document.write("<td width=120>" + exDB[i+2] + "</td></tr>"); flag=true; } } } } resultWindow.document.write("</table>"); resultWindow.document.close(); } //--> </script> </head> <body bgcolor="#fff8dc"> <h3>電球検索</h3> <hr /> 検索したい色を選択してください<br /> <form name="iform" onSubmit="dataSearch()"> <input type="radio" name="ichar" value="昼白色" />昼白色 <input type="radio" name="ichar" value="電球色" />電球色<br> <input type="submit" value="Search" /> </form> <hr /> <br /> </body> </html>

  • JavaScript 保守性の高いコードの書き方

    保守性の高いコードを書きたいです。JavaScriptでdocument.write("<div id='main'></div>")みたいに書いて、後でこの要素にいろいろなコードでdocument.getElementById('main').innerHTMLします。しかし、その後id名mainを他の名前に変えると、多くのソースコードを手作業で変更しなくてはなりません。この手間を削減するJavaScriptの書き方はありますか? 例えば、 <table id="board">   <tr>    <td id="b0_0">A</td>    <td id="b0_1">A</td>    <td id="b0_2">A</td>    <td id="b0_3">A</td>  ・  ・  ・ 上記のようなHTMLを作成する、以下のようなコードがあります。 <table id='board'></table> <script>  var content = "";  for(i = 0; i < 5; i++){   content += "<tr>"   for(j = 0; j < 4; j++){    content += "<td id='b"+ i + "_" + j +"'>A</td>"   }   content += "</tr>"  }  $('table#board').html(content) // JQueryを使っているつもりです   </script> このコードの問題点は少なくとも2つあって、 1つは、2重ループ内の「content += "<td id='b"+ i + "_" + j +"'>A</td>"」が読みづらいことです。 2つ目は、今は td id='b0_1'のような形式ですが、このid名を変更しようと思ったときに、変更が容易ではないことです。 特に2つ目は、いろいろな場所にあるコードから$('table#board td#b1_1').html('B')のような操作をしていると、かなり変更が大変です。 こういったことを乗り越えるためのJavaScriptのコード設計法(?)やIDEやライブラリなどがありましたら教えて下さい。よろしくお願いします

  • 外部JavaScriptで書き出す文字がMozilla改行してくれない

    下記で書き出した文字列ですが、IEだと450pxで改行されるのに対して、Mozillaだと改行してくれません。 どうすれば改行してくれるのか、何がまずいのかご教授お願いします。 -----HTML <TABLE width='450' border='0' cellspacing='0' cellpadding='0' bgcolor='#FFE0B8'> <TR> <TD width='450'><SCRIPT LANGUAGE="JavaScript" src="sample.php"></SCRIPT> </TD> </TR> </TABLE> -----sample.php <?php //header("Content-type: text/html"); print "document.write(\"123456789012345678901234567890123456789012345678901234567890\")"; ?>

  • 外部ファイルを利用したい

    現在、Webの勉強を始めたのですが、自分でいろいろ作成していてうまくいかないので、教えて下さい。 htmlファイルが幾つかあるのですが、全てのページに同じテーブルタグを使用するので、JavaScriptの外部ファイルで書き出してそれぞれを各htmlファイルで呼び出そうと思っていますが、うまくいきません。 ★jsファイル/xx.js★ <SCRIPT language="JavaScript"><!-- document write("<table border='1'"); document write("<tr><td><img src='xx.gif'></td></tr>"); document write("</table>"); --> ★htmlファイルでの呼び出し★ <html> <head><title>外部ファイル呼び出し</title></head> <body><script language="JavaScript" src="xx.js"></script> </body></html> かなり素人なので変な書き方をしていると思いますが、ご指導お願いします。

  • テーブルの枠線

    IEブラウザのバージョンにより、表示が変わることはわかっているのですが どうしても解決できないので質問させていただきます。 対応ブラウザがIE8からIE11という前提なので、まずはIE8で試してみました。 きれいに表示できました。 が、IE11で表示したら、見出しは枠線が表示されました。 でも、中の罫線が表示されません。(画像添付) IE9、IE10はソフトを入れ直しが必要なので、また未確認です。 <meta>タグを入れてもダメでした。(IE=edge) IE8を捨ててもよいので、IE11で枠線を表示させるにはどうしたらよいのか、 ご教授願えないでしょうか? widthの指定もしているし、border-styleも記述しているつもりですが IE11では何が足りないのか、わかりません。 以下にソースコードを記載しますので よろしくお願いいたします。 ※まだdebug中なので、罫線以外につきましては無視願います。 <html> <head> <style type="text/css"> #midashi { border:2px solid #ffffff; border-collapse:collapse; } #table1 { border:2px solid #3d9f51; border-collapse:collapse; } #table0 { border:2px solid #83ca51; border-collapse:collapse; float:left; margin-right:-3px; } #table1 .td0{ width:15px; height:20px; border: none; text-align:left; font-size:80%; } #table1 .td1{ width:12px; height:20px; border-top-width: 1px; border-top-color = "#3d9f51"; border-top-style = "solid"; border-right-width: 1px; border-right-color = "#aaa"; border-right-style = "dotted"; background-color:#FFFFFF; border-collapse:collapse; } #table1 .td2{ width:12px; height:20px; border-top-width: 1px; border-top-color = "#3d9f51"; border-top-style = "solid"; border-right-width: 1px; border-right-color = "#aaa"; border-right-style = "solid"; background-color:#FFFFFF; border-collapse:collapse; } #table1 .td2bg{ background-color:#83ca51; } #table0 .td3{ width:60px; height:20px; border-bottom: 1px #7f7f7b solid; background-color:#83ca51; border-collapse:collapse; text-align:center; font-size:80%; } #table0 .td3non{ width:60px; height:20px; border-bottom: 1px #7f7f7b solid; background-color:#ffffff; border-collapse:collapse; text-align:center; font-size:80%; } </style> </head> <body> <table id="table0"> <script type="text/javascript"> //**************************************************************************** //--- 番号 for(i=0; i<9; i++){ document.write('<tr>'); if( i == 0){ document.write('<td class="td3non"> </td>') }else{ document.write('<td class="td3">部屋' + i + '</td>') } document.write('</tr>'); } //--- //**************************************************************************** </script> </table> <table id="table1"> <script type="text/javascript"> //**************************************************************************** //--- 見出し document.write('<tr>'); for(j=0; j<48; j++){ // 30分単位の一日分 if( j%2 == 1){ document.write('<td class="td2 td2bg"></td>') // 時間表示無し }else{ document.write('<td class="td0 td2bg">' + (j/2) + '</td>') // 時間表示有り } } document.write('</tr>'); //--- //**************************************************************************** //**************************************************************************** //--- 時間テーブル for(i=0; i<8; i++){ // i:部屋の数 document.write('<tr>'); for(j=0; j<45; j++){ // 30分単位の一日分(48) if( j%2 == 1){ document.write('<td class="td2"></td>') // solid }else{ document.write('<td class="td1"></td>') // dotted } } for(j=0; j<3; j++){ // 30分単位の一日分(48) if( j%2 == 1){ document.write('<td class="td2" style="font-size:50%;text-align:center;">・</td>') // solid }else{ document.write('<td class="td1" style="font-size:50%;text-align:center;">・</td>') // dotted } } document.write('</tr>'); //--- //**************************************************************************** } </script> </table> </body> </html>

    • ベストアンサー
    • CSS

専門家に質問してみよう