96's blog

WEBサイト制作科 6ヶ月コース

JavaScript02(ユーザーからの入力を受け取る)

  • comfirm OKかキャンセルかを選ばせる。
  • prompt 入力させる。
  • parseInt 整数に直す。
  • エラーチェック console.logを演算過程の計算と表示の間に入れると、エラーの原因箇所を突き止めやすい。
  • imgタグ内で、onclickなど画像に対する動作を指定できる。onclickの場合は、StyleSheetでcursor:pointerを指定し、画像の上でカーソルが指の形になるようにする。画像が押せるものであることを表す。
  • 確認テスト2
<body>
<p>
Q1
<script>
  document.write('あけましておめでとう!');
  alert('今年もよろしく。');
</script>
</p>
<p>Q2
<img src="img/test02_1.jpg" width="500" height="400"
 alt="アマルフィ海岸の画像" onClick="alert('アマルフィ海岸');"></p>
<p>
Q3
<img src="img/test02_1.jpg" width="500" height="400"
 alt="アマルフィ海岸の画像" onMouseOver="alert('アマルフィ海岸');">
</p>
<p>
Q4
<img src="img/test02_1.jpg" width="500" height="400"
 alt="アマルフィ海岸の画像" onMouseOut="alert('アマルフィ海岸');">
</p>
<p>
Q5
<img src="img/test02_1.jpg" width="500" height="400"
 alt="アマルフィ海岸の画像" onload="alert('アマルフィ海岸')";>
</p>
<p>Q6
<script>  //Q6
  var day,hour,minute,second,ans;
  day = 365;
  hour = 24;
  minute = 60;
  second = 60;
  ans = day * hour * minute * second;
  document.write('1年は',ans,'秒です。');
</script>
</p>
<p>Q7
<script>  //Q7
  document.write('長いメッセージの場合は、<br>改行します。');
</script>
</p>
</p>
<p>Q8 (prompt)
<script>  //Q8
  prompt('好きな花は?','ひまわり');
</script>
</p>
<p>Q9 (alert)
<script>  //Q9
  var age;
  age = prompt('年齢を入力してください',20);
  age = parseInt(age);
  if(age >= 20) {  
  alert('あなたは成人ですね'); 
  }else{
  alert('あなたは未成年ですね');
  }
</script>
</p>
</body>

f:id:webtm2013:20130725144907j:image

f:id:webtm2013:20130725144908j:image

f:id:webtm2013:20130725144909j:image

f:id:webtm2013:20130725144911j:image

f:id:webtm2013:20130725144912j:image