読者です 読者をやめる 読者になる 読者になる

DOMでのオブジェクトの使い方練習 2

正円の面積を求める関数

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>正円の面積を求める関数</title>
<script>
function circle(){
  var pai = 3;
  var r = prompt('半径を半角で入力してください。');
  var area = Math.pow(r,2) * pai; //Math.pow(r,2)は、rの2乗を返す
  console.log(area);
  var out1 = '半径'+r+'mの正円の面積は'+area+'㎡です。';
  var out2 = '<p>半径'+r+'mの正円の面積は'+area+'㎡です。</p>';
  document.getElementById('box1').textContent = out1;
  document.getElementById('box2').innerHTML = out2;
}
</script>
</head>

<body>
<h1>正円の面積を求めます</h1>
<button onclick="circle();">面積計算</button>
<p id="box1"></p>
<div id="box2"></div>
</body>
</html>

 

f:id:develog:20160922222156g:plain

配列を使って平均・最大・最低点を求める

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>配列を使って平均・最大・最低点を求める</title>
</head>

<body>
<div id="ans"></div>
<div id="ans2"></div>
<div id="ans3"></div>
<script>
var scores = [72, 48, 62, 88, 94];
var total = 0;
var max = scores[0], min = scores[0];

for(var i = 0; i < scores.length; i++){
  total += scores[i];
  if( max < scores[i]) {
    max = scores[i];
    console.log('最高点:'+max);
}
  if( min > scores[i]) {
    min = scores[i];
    console.log('最低点:'+min);
  }
}
var average = total / scores.length;
console.log('合計:'+total);
console.log('配列の数:'+scores.length);
console.log('平均:'+average);
console.log('最高:'+max);
console.log('最低:'+min);

var out = '<p>平均点は'+average+'点です。</p>';
document.getElementById('ans').innerHTML = out;

max = Math.max.apply(null, scores);//最高点を返す
var out2 = '<p>最高点は'+max+'点です。</p>';
document.getElementById('ans2').innerHTML = out2;

min = Math.min.apply(null, scores);//最低点を返す
var out3 = '<p>最低点は'+min+'点です。</p>';
document.getElementById('ans3').innerHTML = out3;
</script>
</body>
</html>

 

f:id:develog:20160922223526g:plain

連想配列の値を求める

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>連想配列の値を求める</title>
</head>

<body>
<script>
var average = 60;
var scores = {Tanaka:72, Yamada:48, Suzuki:60, Yamamoto:88, Inoue:94};
for (var key in scores){//連想配列の値を取り出す
  console.log(key+'の点数は'+scores[key]+'です。');

  if (scores[key] === average){
    console.log(key+'は平均点です。');
  } else if (scores[key] > average) {
    console.log(key+'は平均点以上です。');
  } else if (scores[key] < average) {
    console.log(key+'は平均点以下です。');
  }
}
</script>
</body>
</html>

 

f:id:develog:20160922224628p:plain