Javascript の勉強 2
その1 条件分岐
【 一択 if ~ 】
if (theWaist >= refValue) {
alert('メタボリックの可能性が大です。');
}
もし、「theWaist >= refValue」ならば、
「alert('メタボリックの可能性が大です。');」を実行する。
条件分岐( if )
var refValue = 85;
var theWaist;
theWaist = prompt('ウエストサイズを入力してください。', '');
theWaist = parseInt(theWaist);
if (theWaist >= refValue) {
alert('メタボリックの可能性が大です。');
}
</script>
その2 条件分岐 複数の条件式を組み合わせる
【 二択 if ~ else ~ 】
if (theWaist >= refValue) {
alert('メタボリックの可能性が大です。');
} else {
alert('メタボリックではなさそうです。');
}
もし、「theWaist >= refValue」ならば、
「alert('メタボリックの可能性が大です。');」を実行する。
そうでないならば、
「alert('メタボリックではなさそうです。');」を実行する。
条件分岐( if ~ else ~ )
複数の条件式を組み合わせる(if..else if) - 条件分岐 - Java入門
var refValue = 85;
var theWaist;
theWaist = prompt('ウエストサイズを入力してください。', '');
theWaist = parseInt(theWaist);
if (theWaist >= refValue) {
alert('メタボリックの可能性が大です。');
} else {
alert('メタボリックではなさそうです。');
}
</script>
その3 条件分岐 複数の条件式を組み合わせる
【 三択 if ~ else if ~ else ~ 】
if (theWaist == refValue) {
alert('メタボリックの可能性が大です。');
} else if (theWaist > refValue) {
alert('メタボリックです。');
} else {
alert('メタボリックではなさそうです。');
}
もし、「theWaist == refValue」ならば、
「alert('メタボリックの可能性が大です。');」を実行する。
そうでなく、もし、「theWaist > refValue」ならば、
「alert('メタボリックです。');」を実行する。
いずれでもなければ、
「alert('メタボリックではなさそうです。');」を実行する。
条件分岐( if ~ else ~ )
複数の条件式を組み合わせる(if..else if) - 条件分岐 - Java入門
var refValue = 85;
var theWaist;
theWaist = prompt('ウエストサイズを入力してください。', '');
theWaist = parseInt(theWaist);
if (theWaist == refValue) {
alert('メタボリックの可能性が大です。');
} else if (theWaist > refValue) {
alert('メタボリックです。');
} else {
alert('メタボリックではなさそうです。');
}
</script>
その4 条件分岐 複数の条件式を組み合わせる
【確認ダイアログ OK→true、キャンセル→false】
isMan = confirm('あなたは男性ですか?');
ウィンドウ名.confirm()・・・・・確認ダイアログを表示する
ウィンドウ名.confirm()−JavaScriptリファレンス
【 二択 if ~ else ~ 】→【 三択 if ~ else if ~ else ~ 】
var refValueMan = 85;
var refValueWoman = 95;
var refValue;
var isMan;
var theWaist;
isMan = confirm('あなたは男性ですか?');
if (isMan) {
refValue = refValueMan;
} else {
refValue = refValueWoman;
}
theWaist = prompt('ウエストサイズを入力してください。', '');
theWaist = parseInt(theWaist);
if (theWaist == refValue) {
alert('メタボリックの可能性が大です。');
} else if (theWaist > refValue) {
alert('メタボリックです。');
} else {
alert('メタボリックではなさそうです。');
}
</script>
その5 繰り返し
【 for ~ 】
for (i = 0; i < 10; i++) {
document.write('<p>あけましておめでとうございます</p>');
}
10回繰り返して「あけましておめでとうございます」を記述する。
繰り返し( for ~ )
【 i++ インクリメント】
i++ 変数に1を加算するもの
i = i + 1
i += 1
も同じ意味。
インクリメント/1加算
<script>
var i;
for (i = 0; i < 10; i++) {
document.write('<p>あけましておめでとうございます</p>');
}
</script>
その6
【for文とif文の組み合わせ →1からの数字のうち3の倍数を大きく赤く表示する】
for (var i = 1; i <= Max; i++) {
if ((i % 3) == 0) {
document.write('<span class="three">', i ,'</span>', ' ');
} else {
document.write(i, ' ');
}
}
3で割った余りが0ならば、クラス名「.three」をつけた i を記述し、
そうでないなら、ただの i を記述する。
これを、i = 1 ~ 15 まで繰り返す。
【(i % 3) == 0】
.three {
font-size: 250%;
color: red;
}
</style>
<script>
var Max = 15;
for (var i = 1; i <= Max; i++) { /1~15まで、数を1ずつ足していく/
if ((i % 3) == 0) { /3で割った余りが0 つまり3の倍数/
document.write('<span class="three">', i ,'</span>', ' ');
} else {
document.write(i, ' '); /後ろの' 'はスペースを開けたいため/
}
}
</script>
その7
function kinri(gankin, kikan, rishi) {
var uketori; /ローカル変数(外に取り出せない)/
uketori = gankin;
for (var i = 1; i <= kikan; i++) {
uketori = uketori * (1 + rishi / 100);
}
return Math.round(uketori);
}
var uketori;
uketori = kinri(100000, 10, 4); /円、年4、%/
document.write('<p>金利4%の積立貯金に10万円を10年預けたときの受け取りは、', uketori, ' 円です。</p>');
</script>
その8
function kinri(gankin, kikan, rishi) {
var uketori; /ローカル変数(外に取り出せない)/
uketori = gankin;
for (var i = 1; i <= kikan; i++) {
uketori = uketori * (1 + rishi / 100);
}
return Math.round(uketori);
}
var gankin = 100000;
var rishi = 4;
var uketori;
document.write('<h2>元金:', gankin, '円、利率:', rishi, '%</h2>');
for (var i = 1; i <= 10; i++) {
uketori = kinri(gankin, i, rishi);
document.write('<p>', i, '年後:', uketori, '円</p>');
}
</script>
その9
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>繰り返し文 複利計算</title>
<script>
window.onload = init; / ウィンドウを読み込んだら init を実行する /
function init() {
document.calcForm.calc.onclick = calcUketori; / calcForm の calcというボタン をクリックしたら、calcUketori を実行する /
}
function calcUketori() {
var kikan, rishi, gankin;
gankin = parseInt(document.calcForm.gankin.value); / parseInt:計算できる整数にする /
rishi = parseFloat(document.calcForm.rishi.value); / parseFloat:計算できる小数にする /
kikan = parseInt(document.calcForm.kikan.value);
document.calcForm.uketori.value = kinri(gankin, kikan, rishi);
}
function kinri(gankin, kikan, rishi) {
var uketori; / ローカル変数(外に取り出せない)/
uketori = gankin;
for (var i = 1; i <= kikan; i++) {
uketori = uketori * (1 + rishi / 100);
}
return Math.round(uketori);
}
</script>
</head>
<body>
<form name="calcForm">
<p>
金利:<input type="text" name="rishi" size="8">%<br>
金額:<input type="text" name="gankin" size="8">円<br>
預入期間:<input type="text" name="kikan" size="3">年<br>
<input name="calc" type="button" value="計算"> <!-- calcというボタン -->
<input type="reset" value="クリア"><br>
受取金額:<input type="text" name="uketori" size="15">円<br>
</p>
</form>
</body>
</html>