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

変数を使った記述演習

JavaScript基礎

プログラムを記述する必須項目

  1. 初期値を設定(入力された値または変数に格納された値)
  2. 処理(命令または演算)
  3. 出力(DOMの記述、consoleに表示)
閲覧者が使いやすく設定する
  • 関数化
  • イベントを設定

入力された平成の数字を利用して西暦を求める

変数宣言
  var heisei;
  var fullYear;
  var msg;
初期値を取得
  heisei = prompt( '平成の数字を1から28まで半角数字で入力してください', '' );
  heisei = parseInt( heisei );
DOMで出力
  document.getElementById( 'str' ).innerHTML = msg;
まとめて記述
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>平成を西暦に変換する</title>
<script>
function getY() {
  var heisei;
  var fullYear;
  var msg;
  heisei = prompt( '平成の数字を1から28まで半角数字で入力してください', '' );
  heisei = parseInt( heisei );

  fullYear = heisei + 1988;
  msg = '平成' + heisei + '年は、' + '西暦' + fullYear + '年です。';
  msg = '<h1>' + msg + '</h1>';

  document.getElementById( 'str' ).innerHTML = msg;
}
</script>
</head>
<body>
<h1>平成から西暦を求めるプログラム</h1>
<p><button onclick="getY()">変換する</button></p>
<div id="str"></div>
</body>
</html>

消費税込みの合計金額を求める

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>消費税計算</title>
<script>
function taxTotal() {
  var box = prompt( '半角数字を入力してください', 1000 );
  box = parseInt( box );
  
  var taxRate = 0.08;  //消費税率
  var total = box + box*taxRate;
  var str = '<h2>1個' + box + '円の商品の税込価格は、' + total +'円です。</h2>';

  document.getElementById( 'ans' ).innerHTML = str;
}
</script>
</head>
<body>
<h1>消費税後の金額を求めるプログラム</h1>
<p><button onclick="taxTotal()">計算する</button></p>
<div id="ans">ここに結果が表示されます。</div>
</body>
</html>

入力された数字の偶数・奇数を判別する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>偶数か奇数かを判別</title>
<script>
function judge() {
  var num = parseInt( prompt( '半角数字で入力してください', '例:99' ) );
  if( num % 2 === 0 && num > 0) {
    document.getElementById( 'ans' ).textContent = '入力された数字「' + num + '」は、偶数です。';
  } else if( num % 2 === 1 ) {
    document.getElementById( 'ans' ).textContent ='入力された数字「' + num + '」は、奇数です。';
  } else {
    document.getElementById( 'ans' ).textContent ='1以上の半角数字で入力してください。';
  }
}
</script>
</head>
<body>
<h1>入力された数字が偶数か奇数かを判別するプログラム</h1>
<p><button onclick="judge()">判別する</button></p>
<div id="ans">ここに結果が表示されます。</div>
</body>
</html>

男性・女性を区別してそれぞれの標準体重を求める

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>標準体重を男性・女性を区別して求める</title>
<script>
function stdWeight() {

  var height; //身長
  var weight; //体重
  var male; //男性かどうか

  //男性か女性かを入力
  male = confirm( 'あなたは男性ですか?' ); 

  // 身長を代入する
  height = prompt( '身長を入力してください', 180 );
  height = parseInt( height ); 

  // 計算を行う
  if (male) {
    weight = (height - 80) * 0.7;
  } else {
    weight = (height - 70) * 0.6;
  }

  // 結果を表示する
  if (male) {
    document.getElementById( 'str' ).innerHTML = '<h1>身長が' + height + 'cmの男性の標準体重は、' + weight + 'kgです。</h1>';
  } else {
    document.getElementById( 'str' ).innerHTML =  '<h1>身長が' + height + 'cmの女性の標準体重は、' + weight + 'kgです。</h1>';
  }

}
</script>
</head>
<body>
<h1>標準体重を男性・女性を区別して求める</h1>
<p><button onclick="stdWeight()">求める</button></p>
<div id="str"></div>
</body>
</html>