webをつくる人になる

スクールでwebサイト制作を学んだことをきっかけに、webやパソコンなどについて記録していく たまにCG たまにおやつ・・・

Javascript の勉強 2

 

その1 条件分岐

【 一択 if ~ 】

if (theWaist >= refValue) {
    alert('メタボリックの可能性が大です。');
}

 

もし、「theWaist >= refValue」ならば、

「alert('メタボリックの可能性が大です。');」を実行する。

 

条件分岐( if )

構文

 

<script>
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入門

 

<script>
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入門

 

<script>
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 ~ 】

 

<script>
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加算

JavaScript講座 : インクリメント/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

 

<style>
.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

 

 

<script>
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

 

 

<script>
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

 

 

<!DOCTYPE html>
<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>