Javascript　間違っている箇所を指摘願います。

解決済

質問者：my-mai-k
質問日時：2007/11/30 00:42
回答数：2件

大学の授業でJavascriptを扱っています。
が、熟練者ではなく、全くの初心者です。

初級者向けの授業なのに、なぜJavaを扱うのだ？と思っているほどです。
先生がスクリーンに映し出したプログラムを同じように打ち込んで写すというやり方なのですが、同じプログラムを書いたはずなのに、正しく表示されません。
Javaに詳しい方がおられましたら、僕の書いたものを以下に載せますので、間違っている箇所を指摘していただけたらと思います。

課題１　計算をendを入力するまでし続けるプログラムらしいのですが。
<html>
<body bgcolor=pink>
<center>
<h1>
<script type="text/javascript">
//typeの部分をlanguage="javascript"と書いてもよい。
s=0;
while(true){
m=prompt("数値を入力（終りは文字列endを入力）。","")};
if(m=="end"){
break;
}else{
n = parseFloat(m);
s=s+n;
document.write("n"="+n+"<br>");
};
};
document.write("合計"(s)="+s);
</script>
</h1>
</center>
</body>
</html>

課題２
<html>
<body>
<script language="javascript">
for(x=3;x<=10;x++){
document.write("<img src="aki10.jpg" width="+x+"% height="+x+"% hspace=2>");
};
for(x=9;x>=3;x--){
document.write("<img src="aki10.jpg " width="+x+"% height="+x+"% height="+x+"% hspace=2>");
};
</script>
</body>
</html>

課題３
チェックボックスをクリックすると、写真が変わるような仕組みになっています。
<html>
<head>
<script language="javascript">
function flip(){
if(document.f.check.checked){
document.image.src="aki10.jpg";
}else{
document.image.src="aki01.jpg";
};
};
</script>
</head>

<body bgcolor=gray>
<center>
<img src="aki10.jpg" name="image" width=400 height=300>
<form name="f">
<input type="checkbox" name="check" onClip="flip()">
</form>
</center>
</body>
</html>

ちなみに、jpgは間違ってません。
そういう名前の写真があるのだと思ってください。

詳しい方、１つでも結構ですので、よろしくお願いします。

通報する

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

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： himajin100000
回答日時：2007/11/30 18:13

何の注釈もなく，

>//typeの部分をlanguage="javascript"と書いてもよい。
こんなことを言い出すのは信頼できないなあ。教える気がないのかも。

一応最小限の修正で動くところまで持って言ってみたけれど
==================
<html>
<body bgcolor=pink>
<center>
<h1>
<script type="text/javascript">
s=0;
while(true){
m=prompt("数値を入力（終りは文字列endを入力）。","");
if(m=="end"){
break;
}else{
n = parseFloat(m);
s=s+n;
document.write("n="+n+"<br>");
}
}
document.write("合計(s)="+s);
</script>
</h1>
</center>
</body>
</html>
=================
<html>
<body>
<script language="javascript">
for(x=3;x<=10;x++){
document.write("<img src=\"aki10.jpg\" width=\""+x+"%\" height=\""+x+"%\" hspace=\"2\">");
}
for(x=9;x>=3;x--){
document.write("<img src=\"aki10.jpg\" width=\""+x+"%\" height=\""+x+"%\" hspace=\"2\">");
}
</script>
</body>
</html>
======================
<html>
<head>
<script language="javascript">
function flip(){
if(document.f.check.checked){
image.src="aki10.jpg";
}else{
image.src="aki01.jpg";
}
}
</script>
</head>

<body bgcolor=gray>
<center>
<img src="aki10.jpg" name="image" width="400" height="300">
<form name="f">
<input type="checkbox" name="check" onchange="flip();">
</form>
</center>
</body>
</html>

これはまだ最小限の修正であって，HTMLやEcmascriptとしては間違っている。(最も多かった修正は#1さんのに加え

if(true){
}else{
} // ←セミコロンいらない

//とか

while(true){
} //←セミコロンいらない

//ところで，Ecmascriptって何！？って思ったら
//「仕様」と「実装」とは何か調べてみるといいよ。
)

●IEを無視
●application/xhtml+xmlというContent-Typeを配布できる
(Windows前提でHDD内のファイルを読み込む形なら拡張子をxhtml
にするだけでも行けるかも)

という条件がそろっているなら

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Q3558434 TestCase 1</title>
<style type="text/css">
body{
background-color:pink;
}
</style>
<script type="text/javascript">
function body_onload(){
//DOMを経由することで，エスケープし忘れを事前に防ぐ
//Firefoxだといきなりスクリプト実行時，getElementByIdでコけるので
//body要素のonload属性からの発動にした。
var s = 0;
var n = 0;
var m = "";
var i;

var inputs = document.getElementById("userinputs");
var sum = document.getElementById("sum");

while(inputs.childNodes.length > 0){
inputs.removeChild(inputs.childNodes[0]);
}
while(sum.childNodes.length > 0){
sum.removeChild(sum.childNodes[0]);
}

while(true){
m = window.prompt("数値を入力（終りは文字列endを入力）。","");
if(m=="end"){
break;
}else if(parseFloat(m)){
n = parseFloat(m);
s=s+n;

var li = document.createElementNS("http://www.w3.org/1999/xhtml","li");
li.appendChild(document.createTextNode(n.toString()));
inputs.appendChild(li);

}
else{
//掲示のソースとの違い:
window.alert("入力するなら数字か予約語endにしてくださいよ。")
}
}
sum.appendChild(document.createTextNode(s.toString()));
}
</script>
</head>
<body onload="body_onload();">
<h1>Q3558434 TestCase 1</h1>
<h2>ユーザーが入力したもの</h2>
<ul id="userinputs">
<li>ユーザーが入力したものはありません。Ecmascriptが無効なのであろうと思います。</li>
</ul>
<h2>入力したものの合計(入力してなければ0)</h2>
<p id="sum">ユーザーは何も入力していません。</p>
</body>
</html>
=====================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Q3558434 TestCase 1</title>
<style type="text/css">
object{
margin-left:2px;
margin-right:2px;
border-style:solid;
border-color:red;
}
</style>
<script type="text/javascript">
function body_onload(){
var pictures = document.getElementById("pictures");
while(pictures.childNodes.length > 0){
pictures.removeChild(pictures.childNodes[0]);
}
for(x=3;x <= 10;x++){
var object = document.createElementNS("http://www.w3.org/1999/xhtml","object");

object.setAttribute("data","aki10.jpg");
object.setAttribute("type","image/jpeg");
object.setAttribute("width",x.toString() + "%");
object.setAttribute("height",x.toString() + "%");
object.appendChild(document.createTextNode("[" + "aki10.jpg - " + "width:"+x.toString() + "%" + "," + "height:"+x.toString() + "%" +"]" ))
pictures.appendChild(object);

}
for(x=9;x >= 3;x--){
var object = document.createElementNS("http://www.w3.org/1999/xhtml","object");
object.setAttribute("data","aki10.jpg");
object.setAttribute("type","image/jpeg");
object.setAttribute("width",x.toString() + "%");
object.setAttribute("height",x.toString() + "%");
object.appendChild(document.createTextNode("[" + "aki10.jpg - " + "width:"+x.toString() + "%" + "," + "height:"+x.toString() + "%" + "]" ))
pictures.appendChild(object);
}
}
</script>
</head>
<body onload="body_onload();">
<h1>Q3558434 TestCase 2</h1>
<p id="pictures">
Ecmascriptが無効です。本来ならアクセシビリティを考慮すべきところですが，
課題なので省略します。(というか適切な方法が思いつかないだけですが)
</p>

</body>
</html>
===================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Q355843 TestCase 3</title>
<script type="text/javascript">
function flip(){
var object = document.getElementById("image");

if (document.getElementById("check").checked){
object.setAttribute("data","aki01.jpg");
object.textContent = "aki01.jpg"
}else{
object.setAttribute("data","aki10.jpg");
object.textContent = "aki10.jpg"
}
};
</script>
</head>
<body>
<h1>Q355843 TestCase 3</h1>
<h2>画像</h2>
//どこかに送るためにaction属性を書かないならformを使わない。
<p><object id="image" type="image/jpg" data="aki10.jpg" width="400" height="300">aki10.jpg</object></p>
<p><input type="checkbox" id="check" onchange="flip()" /><label for="check">aki10.jpgをaki01.jpgの代わりに使う</label></p>
</body>
</html>
===========
という感じの記法を勧める。

- 0
- 件

通報する

No.1

回答者： benelli
回答日時：2007/11/30 01:12

流し読みしただけでも分かるような、基本的におかしい部分は文字列の扱い方です。

document.write("n"="+n+"<br>");

document.write("<img src="aki10.jpg" width="+x+"% height="+x+"% hspace=2>");

ダブルクォーテーションの中でダブルクォーテーションを直接使用することできません。これではどこからどこまでが文字データなのか分からないからです。

document.write("n=" + n + "<br>");
↑何が文字列で何が変数なのかを明確にする。

document.write('<img src="aki10.jpg" width="' + x + '%" height="' + x + '%" hspace=2>');
↑ダブルクォーテーションを使用する際は文字列宣言の囲み文字にシングルを使う。（または\"を使用する。）

それと、イベントハンドラが変ですね

<input type="checkbox" name="check" onClip="flip()">
↓
<input type="checkbox" name="check" onClick="flip()">

パッと見てみつかったエラー部分はここらへんでしょうか。
それと”Ｊａｖａ”と”ＪａｖａＳｃｒｉｐｔ”はまったくの別物です。同じ単語が使われているだけであって”本”と”本棚”ぐらいものが違います。同一のものと絶対に考えないでください。
あと、この勉強をする上で必須の<--! //-->おまじないがないことが気になりますね。学校で意図的に教えていない？のかも知れませんが、常にいれるクセをつけましょう。

<script type="text/javascript">

</script>