webの勉強!!初心者!脱出マニュアル!!

webの勉強を、初心者から脱出するためのメモを残していきます

WEBの勉強~JavaScript1日目~

 こんにちは!! メグルです!!

 

今日から、新しい人が入ってきました。

今日のwebの勉強もはjavascriptです。

 

2月は Javasqript

3月は PHP MySQL

4月は photoshop  Illustrator  Fireworks HTML/CSS

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<script>
document.write("<p>今日も一日よろしく!</p>");
document.write("<p>", 5 + 3, "</p>");
document.write("<p>", (3+7) * 50, "</p>");
document.bgColor = "yellow";
</script>
</head>

<body>
<h1>おはようございます</h1>
</body>
</html>

 

f:id:meglez1:20150202112729p:plain

 

f:id:meglez1:20150202114644p:plain

f:id:meglez1:20150202114651p:plain

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<script>

var heisei;
var seireki;
var message;

heisiei = 27;
seireki = 1988 + heisiei;
message = "平成" + heisiei + "年は西暦" + seireki + "年です。";
document.write("<p>" + message + "</p>");
alert(message);


</script>
</head>

<body>
<h1>おはようございます</h1>
</body>
</html>

 

 

<script>

var heisei;
var seireki;
var message;

heisiei = prompt("平成の年号を入力してください", 27);
seireki = 1988 + heisiei;
message = "平成" + heisiei + "年は西暦" + seireki + "年です。";
/*document.write("<p>" + message + "</p>");*/
alert(message);


</script>

f:id:meglez1:20150202115039p:plain

 

 

<script>

var heisei;
var seireki;
var message;

heisei = prompt("平成の年号を入力してください", 27);
seireki = 1988 + parseInt(heisei);
message = "平成" + heisei + "年は西暦" + seireki + "年です。";
/*document.write("<p>" + message + "</p>");*/
alert(message);


</script>

 

f:id:meglez1:20150202115829p:plain

 

 

次にウエストのサイズでメタボかどうかを測定するプログラムです。

<script>
var value = 85;//変数の命名と代入を同時に行う
var waist;

waist = prompt("ウエストサイズを入力してください。", "");
waist = parseInt(waist);//数字にしてはっきりしておく!!

</script>

 

f:id:meglez1:20150202131700p:plain

 

となります。

 

次に、条件分岐のif文を使っていきます。

waistの数字が85以上なら、メタボリック症候群の可能性が大です。と表示させてみます。

 

<script>
var value = 85;//変数の命名と代入を同時に行う
var waist;

waist = prompt("ウエストサイズを入力してください。", "");
waist = parseInt(waist);//数字にしてはっきりしておく!!

if(waist >= value) {
alert("メタボリック症候群の可能性が大です。");
}

</script>

 

f:id:meglez1:20150202132602p:plain

 

85以上を入力すると、

 

f:id:meglez1:20150202132607p:plain

 

になります。

 

次に条件分岐のelse文です。85以下ならどうなるか?

f:id:meglez1:20150202133548p:plain

 

85以下に入力すると、

f:id:meglez1:20150202133608p:plain

になります。

<script>
var value = 85;//変数の命名と代入を同時に行う
var waist;

waist = prompt("ウエストサイズを入力してください。", "");
waist = parseInt(waist);//数字にしてはっきりしておく!!

if(waist >= value) {
alert("メタボリック症候群の可能性が大です。");
} else {
alert("メタボリック症候群ではなさそうです。");
}

</script>

 

演算子の参考サイトです。

演算子/JavaScriptリファレンス

 

次に男の場合と女性の場合を分けてみる。

まずは、男性か女性かを分ける。

<script>
var valueMan = 85;//男性の基準値
var valueWoman = 90;//女性の基準値
var value;//基準値
var isMan;//男性かどうか判断する

isMan = confirm("あなたは男性ですか?");//confirmはyseかnoか(真偽地true/false)


var waist;

waist = prompt("ウエストサイズを入力してください。", "");
waist = parseInt(waist);//数字にしてはっきりしておく!!

if(waist >= value) {
alert("メタボリック症候群の可能性が大です。");
} else {
alert("メタボリック症候群ではなさそうです。");
}

</script>

f:id:meglez1:20150202135332p:plain

 

<script>
var valueMan = 85;//男性の基準値
var valueWoman = 90;//女性の基準値
var value;//基準値
var isMan;//男性かどうか判断する

isMan = confirm("あなたは男性ですか?");//confirmはyseかnoか(true/false真偽値)

if (isMan) {
value = valueMan;
} else {
value = valueWoman;
}

var waist;

waist = prompt("ウエストサイズを入力してください。", "");
waist = parseInt(waist);//数字にしてはっきりしておく!!

if(waist >= value) {
alert("メタボリック症候群の可能性が大です。");
} else {
alert("メタボリック症候群ではなさそうです。");
}

</script>

次は、BMI判定装置を作ってみる。

 

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<script>
var bmi;
var weight;
var height;

height = prompt("身長を入力してください。(cm)", "");
weight = prompt("体重を入力してください。(kg)", "");
height = height / 100;

bmi = weight / (height * height);

if (bmi < 18.5)
alert("身長:" + height *100 + "cm,体重:" + weight + "kg,BMI:" + bmi + "。低体重です。");
else if (bmi >= 18.5 && bmi < 25)
alert("身長:" + height *100 + "cm,体重:" + weight + "kg,BMI:" + bmi + "。普通です。");
else
alert("身長:" + height *100 + "cm,体重:" + weight + "kg,BMI:" + bmi + "。肥満です。");


</script>
</head>

<body>
</body>
</html>

 

f:id:meglez1:20150202154608p:plain

 

身長を入力して、

 

f:id:meglez1:20150202154616p:plain

 

体重を入力すると、

 

f:id:meglez1:20150202154622p:plain

 

BMIがわかるようになります。