アプリ版:「スタンプのみでお礼する」機能のリリースについて

JavaScript初心者です。繰り返し処理についての問題が分からないのでご教授ください。
問題
ユーザがポップアップウィンドウから1から始まる整数値を入力します。プログラムを動かす度に入力される値は異なります。

動作は次のようなものを想定しています。

【1】プログラムを実行すると、次のようなポップアップウィンドウを表示する。なお、入力欄の初期値は空白とする。

【2】ユーザが、整数を入力して、OKボタンを押す。

【3】処理開始後、まずユーザが入力した数値をWebブラウザに出力する。

【4】次に、ユーザが入力した数値の数だけデータが保持できるよう配列を準備する。その配列の要素の中に星という文字を入力する。代入終了後、配列の中身を 【変更前の配列】として、Webブラウザに出力する。

【5】続いて、配列のインデックス番号に応じて、配列に代入する内容を変える。代入する内容は次のとおりとする。

・配列のインデックス番号が奇数ならば★マークを代入する。
・配列のインデックス番号が偶数ならば☆マークを代入する。

なお、ある数値について、数値を2で割った余りが0の時は偶数、余りが1の時は奇数と判定できる。
偶数→2n 奇数→2n+1

【6】配列の要素の中身の変更が終わったら、配列の中身を【変更後の配列】として、Webブラウザに出力する。

出力例
入力された数字:10
【変更前の配列】
星星星星星星星星星星
【変更後の配列】
★☆★☆★☆★☆★☆

【7】もし、ユーザがキャンセルボタンもしくは閉じるボタンを押した場合は、処理がキャンセルされましたとWebページに出力する。


【1】~ 【3】までは分かるのですが、 【4】からどうすればいいのか全く分かりません。
for文、for in文を使う方法で教えて頂きたいです。
よろしくお願いします

A 回答 (2件)

こんにちは



多分、課題かなにかと思いますが、出題者にはそれまでに教えた内容に照らして期待する正解があるものと想像します。
例えば「Webブラウザに出力する」のには、document.writeのような方法を想定しているかも知れませんが、この回答も前の方の回答もそれぞれ違う方法になっています。

また、javascriptの配列はindexの範囲を事前に定義しておかなくても(他の言語と違って)自由に拡張できてしまいますので、「データが保持できるよう配列を準備する」必要は必ずしもありません。(配列として定義しておく必要はあります)
さらに、配列のindexのスタートは0からなので、indexが奇数なら★、偶数なら☆にする場合は、ご質問文の出力例とは異なり「☆★☆★☆★☆★・・・」の順になるはずと思われます。

以下は、期待される回答とはかなり違うものと想像しますが、なにかのご参考までに。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title></head>
<body>
<script>
(function(){

// ブラウザ出力用関数
function output(pre, txt, cr){
var p = document.createElement("p");
var html = pre + (cr?"<br /" + ">":"") + (txt?txt:"");
p.innerHTML = html;
document.body.appendChild(p);
}

// 使用する文字列群
var message = "自然数を入力";
var cancel = "処理がキャンセルされました";
var input = "入力された数字: ";
var bad = "自然数ではありません";
var before = "【変更前の配列】";
var after = "【変更後の配列】";
var mark0 = "星", mark1 = "★", mark2 = "☆";

// 【1】、【2】の処理
var n = window.prompt(message,"");

// 【7】の処理
if (n===null){
output(cancel);
return;
}

// 入力値が自然数かのチェック(ご質問にはないけれど)
var m = parseInt(n);
if(isNaN(m) || n!=m || m<1 ){
output(bad);
return;
}

// 【3】の処理
output(input, m);

// 【4】の処理
var i, star = [];
for(i=0; i<m; i++) star[i] = mark0;
output(before, star.join(""), 1);

// 【5】の処理
for(i=0; i<m; i++) star[i] = i%2==0?mark2:mark1;

// 【6】の処理
output(after, star.join(""), 1);

})();
</script>
</body>
</html>
    • good
    • 0

たとえばこう



<script>
function myFunc(){
var ta=document.getElementById("ta");
var num=parseInt(document.getElementById("num").value);
ta.value="";
ta.value+="入力された数字:"+num+"\n";
var arr=new Array(num);
for(var i=0;i<arr.length;i++){
arr[i]="星";
}
ta.value+="【変更前の配列】\n";
ta.value+=arr.join("")+"\n";
for(var i=0;i<arr.length;i++){
arr[i]=(i%2==0)?"★":"☆";
}
ta.value+="【変更後の配列】\n";
ta.value+=arr.join("")+"\n";
}
</script>
<input type="text" name="num" id="num">
<input type="button" value="ok" onclick="myFunc()">
<br>
<textarea id="ta" rows=10></textarea>
    • good
    • 0

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