電子書籍の厳選無料作品が豊富!

javaのfor文を使って縦4マス・横7マスの四角形を作り、左上から一マスごとに数字を入れ、最後のマスには28が入った四角形を作り表示するにはどうすればいいと思いますか?(画像のようにブラウザに表示させたいです。表示されたときの数字や四角形の大きさなどに要望はありません。)

「このjavascriptがわかりません」の質問画像

質問者からの補足コメント

  • 質問が的確ではなく申し訳ありません。
    出題された問題には下のような文字で()にjavascriptを記入と書かれていました。
    他には何も書かれていませんでした。
    それでもご提案していだたき誠にありがとうございました。

    <!DOCTYPE html>
    <html lang="java">
    <head>
    <meta charset="utf-8">
    <title>sample</title>

    </head>
    <body>
    (ここにjavascriptを記入と書かれていました。)
    </body>
    </html>

      補足日時:2015/12/01 13:44

A 回答 (4件)

出題状況からみるとDOMではなさそうな雰囲気ですが


仮にbodyの中に書く場合でもこんな風にかけます
<!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>
    • good
    • 0

ようは二重ループを使いましょうって課題ですよね?


たとえばこう

<script>
window.onload=function(){createTable();}
function createTable(){
var hoge=document.getElementById("hoge");
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);
hoge.appendChild(table);
}
</script>
<div id="hoge"></div>
    • good
    • 0

どのプログラミング言語を使って実装するかは置いておいて、ご自身はどういう処理手順で処理したらよいと考えられていますか?


そしてそれをJavascriptで実装しようとした時、具体的に何がわかりませんか?

特に前者が何も無いということだと、出来上がった動くものはあなたの成果ではないし、今後どの問題も分からないということにも成りかねません。
基本的な勝利手順(アルゴリズム)がわからないということなのであれば、まずそこをしっかり学ぶこと、考えることが必要なのではないでしょうか?
最初は「その方法ではこういう場合にこんなことになってしまうじゃない」と指摘されても、考えなかったのとの差はものすごく大きい訳で。。。

頑張ってください。
    • good
    • 0

ご存知とは思いますが、ご質問のように表示されるHTMLのマークアップはいろいろ考えられます。


例えば表にして表示するとか、あるいはリストとにするとかその他いろいろ・・・

目的や意味に応じて実際のマークアップは変わってくると考えられますし、スクリプトから生成する方法もいろいろ考えられます。
とりあえず、ご質問のような表示がされれば良いということとしての一例です。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>sample</title>

<style type="text/css">
#hoge { width:370px; }
#hoge>span {
display:inline-block;
width:50px; height:50px;
border:1px solid #888;
font-size:24px; font-weight:bold;
text-align:center; line-height:50px;
}
</style>
</head>
<body>

<div id="hoge"></div>

<script type="text/javascript">
var i, n = 28, html = "";
for(i=1; i<=n; i++) html += "<span>" + i + "</span>";
document.getElementById("hoge").innerHTML = html;
</script>
</body>
</html>

※マークアップも、スクリプトもいろいろ考えられすぎるのであくまでも例だと思ってください。
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!