演習 - WEB制作の備忘録

消費税計算

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>消費税の計算</title>
</head>
<body>
<script>
var price = prompt( '金額を半角数字で入力してください。' , '例: 850' );
price = parseInt( price );
var tax = 0.08;

var kakaku = price + price*tax;

alert( '税込金額は、' + kakaku + '円です。' );
</script>
</body>
</html>

変数名がわからければローマ字（予約値を使用しないため）

和暦・西暦変換

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>和暦・西暦変換</title>
</head>
<body>
<script>
var heisei,fullYear,message;

heisei = prompt( '平成の年号を半角数字で入力してください。' , '例: 27' );
heisei = parseInt( heisei );

fullYear = heisei + 1988;

message = '平成' + heisei + '年は' + '西暦' + fullYear + '年です';

document.write( '<h1>' + message + '</h1>' );
</script>
</body>
</html>

標準体重

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>標準体重</title>
</head>
<body>
<script>
var height,weight;

height = prompt( 'あなたの身長(cm)を半角数字で入力してください。' , '例: 160' );
height = parseInt( height );

weight = ( height -100 ) *0.9;

document.write( '<h1>' );
document.write( '身長が' + height + 'cmの人の標準体重は' );
document.write( weight.toFixed(2) + 'kgです。' );//下2桁までを表示する
document.write( '</h1>' )
</script>
</body>
</html>

同じ処理

<script>
  var a = 10;
  a = a + 1;
  console.log(a);
</script>

<script>
  var a = 10;
  a += 1;
  console.log(a);
</script>

<script>
<script>
  var a = 10;
  a++;
  console.log(a);
</script>

実行結果は、condole.logに11と表示されます。

時間計算と桁指定

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Flash→JavaScript：数値の演算結果を桁指定で表示</title>
</head>
<body>
<script>
var speedA = 100;
var speedB = 140;
var distance = 560;

var timeA = distance / speedA;
var timeB = distance / speedB;

var ans = timeA - timeB;

document.write( '車Bは車Aよりも、' );
document.write( ans.toFixed(1) );
document.write( '時間早く到着します。' );
</script>
</body>
</html>

if文：奇数・偶数判別

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>if文</title>
</head>
<body>
<script>
var num;
num = prompt('数値を入力してください。', '半角数字で入力');
num = parseInt(num);

if(num % 2 === 0) {
 alert(num + 'は偶数です。');
} else {
 alert(num + 'は奇数です。');
}
//％=剰余算=割った余りを計算
</script>
</body>
</html>

switch文

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>switch文の特徴</title>
</head>
<body>
<script>
//consoleはエラーが途中で判断しやすい。
//ゲーム性が高い。
var a;
var a = prompt('半角数字を入力してください。' , '');
a = parseInt(a);

switch(a) {
  case 1:
    console.log('入力された値は、1です');
    break;
  case 2:
    console.log('入力された値は、2です');
    break;
  case 3:
    console.log('入力された値は、3です');
    break;
  default:
    console.log('一致なし');//それ以外
}
</script>
</body>
</html>

breakが必須です。

while文

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>while文の練習</title>
</head>
<body>
<script>

var i = 1;//初期値
while ( i <= 10 ) {
  console.log( i );
  i++;//1ずつ加算。カールブラケット内に記載
}
</script>
</body>
</html>

for文：1〜100の合算

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>for文の練習</title>
</head>
<body>
<script>
//Q:1〜100までの合計をダイアログボックスに表示させなさい。
var ans=0;
for(var i=1; i<=100 ;i++) {
  ans += i;
}
alert('1~100の合計は、' + ans + 'です');
</script>
</body>
</html>

/*
while繰り返し、データが何個あるかわからないものを取り出すときに使用します。
以下のことを記載しないと失敗しやすくなります。（無限ループ）

初期値
i++がカールブラケット内
どこからどこまで繰り返すのか

暴走した場合は、ブラウザを閉じます。
メモリをずっと消費している場合は、アプリケーションを閉じるか、強制終了します。

for文：カウントダウン

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>for文の練習:カウントダウン</title>
</head>
<body>
<script>
for (var i =5; i>=1; i--){
    console.log( i + '回目');
}
</script>
</body>
</html>

関数：消費税計算／奇数･偶数の判別

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>問１：消費税計算／問２：奇数･偶数の判別→関数化</title>
<script>
/*Q1:1個1000円の買物をしました。閲覧者が購入個数「ｎ」を入力したとき、消費税を含めた合計金額がいくらになるかブラウザに表示させるプログラムを記述しなさい。*/

/* functionで囲まれたvarはその中{}でしか通用しない。全てに適用する場合は、functionの上に記述する。
var price = 1000;
var TAX = 0.08; */

function calc(){
var price, n, tax;

var price = 1000;
var TAX = 0.08;//定数=ある程度固定されている数値は大文字で表記する。（税率、円周率など）
var num = prompt('購入個数を半角数字で入力してください。','');
num = parseInt(num);

var ans = price * num + (price * num) * TAX;//1.08は失敗するので素の値段を税率で掛けて加算する。

document.write(num + '個購入したときの、税込金額は' + ans + '円です。');
}
/* Q2:閲覧者が半角数字「ｎ」を入力したとき、偶数か奇数かを判別して、ダイアログボックスに表示させるプログラムを記述しなさい。 */
function disc(){
var num;

var num = prompt('数字を半角数字で入力してください。' , '');
num = parseInt(num);

if(num % 2 === 0){
  alert(num + 'は、偶数です。');
} else {
  alert(num + 'は、奇数です。');
}
}
</script>
</head>
<body>
<p><button onclick="calc()">計算する</button></p>
<p><button onclick="disc()">判別する</button></p>
</body>
</html>