32日目 | さらにjavascript練習 | if文 | if else文 | if文のネスト | switch文

テキスト:ブログ風姿花伝2013.1/2〜1/5

javascript 平成を西暦に変える計算をさせる

http://latte.moto-chika.com/0107/index.html
※変数名のつけ方 2つ目の単語の頭文字は大文字にする(例 fullYear)

<html lang="ja">
<head>
<meta charset="UTF-8">
<title>平成を西暦に変えるjavascript</title>
</head>
<body>
<script>
  var heisei;
	var fullYear;
	var message;
	
	heisei=25;
	fulYear=heisei+1988;
	message='平成' + heisei + '年は' + '西暦' + fulYear + '年です。';
	document.write('<h1>', message, '</h1>');
	
</script>
</body>
</html>

javascriptで平成を西暦に変える(2)警告メッセージ表示

http://latte.moto-chika.com/0107/index2.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>平成を西暦に変えるjavascript(警告ウインドウ)</title>
</head>
<body>
<script>
  var heisei;
	var fullYear;
	var message;
	
	heisei=25;
	fulYear=heisei+1988;
	message='平成' + heisei + '年は' + '西暦' + fulYear + '年です。';
	alert(message);
	
</script>
</body>
</html>

javascript ドル円換算 promptでユーザーに入力求める

http://latte.moto-chika.com/0107/index3.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ドル円換算(プロンプト)ユーザーに入力求める</title>
</head>
<body>
<script>

  var RATE=100; //為替レート
	var doll, yen;
	
  document.write('<h1>');
	document.write('本日のレート:1ドルは', RATE, '円です');
	document.write('</h1>');
	
	doll=prompt('金額をドルで入力して下さい');
	yen=doll*RATE;
	  alert(yen + '円です');
	
</script>
</body>
</html>

javascript 入力された身長から標準体重を計算して表示 confirm使う

http://latte.moto-chika.com/0107/index5.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>標準体重</title>
</head>
<body>
<script>
/*
*  標準体重計算プログラム
*  最終修正日:2013.01.07
*
*/
  var height; //身長
	var weight; //体重

//身長を入力する
height=prompt('身長をcmで入力して下さい')	;
height=parseInt(height);

//計算を行う
weight=(height-100)*0.9;

//結果を表示する
document.write('<h1>');
document.write('身長が', height, 'cmの人の標準体重は');
document.write(weight,'kgです。');
document.write('</h1>');
	
</script>
</body>
</html>

javascript 男性かどうか確認してから標準体重計算

http://latte.moto-chika.com/0107/index5.html

!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>標準体重</title>
</head>
<body>
<script>
/*
*  標準体重計算プログラム
*  最終修正日:2013.01.07
*
*/
  var height; //身長
	var weight; //体重
	var man;//男性かどうか
	
//男性か女性かを入力
man=confirm('あなたは男性ですか?');	

//身長を代入する
height=prompt('身長をcmで入力して下さい')	;
height=parseInt(height);

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


//結果を表示する
document.write('<h1>');
document.write('身長が', height, 'cmの人の');
if(man){
	document.write('男性の標準体重は');

}
else{
	document.write('女性の標準体重は');
	
}
document.write(weight,'kgです。');
document.write('</h1>');
	
</script>
</body>
</html>

javascript 偶数か奇数かを判定する

http://latte.moto-chika.com/0107/index6.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>偶数奇数判別 if文</title>

</head>
<body>
<script>
var num;

function guki(){
	num=prompt('数値を入力してください', '半角数字で入力');
	
	if(num%2 == 0){
		alert(num+'は偶数です');
		}
		
	else{
		alert(num+'は奇数です。');
	}
}
</script>
<h1>偶数か奇数かの判別します</h1>
<p>ボタンをクリックすると数値を入力するウインドウが表示されます。</p>
<p><button onClick="guki()">判別する</button></p>
</body>
</html>

※ポイント num%2==0 2で割ると余りが0、つまり割り切れる

javascript 入力された数値から桁数を判定

http://latte.moto-chika.com/0107/index8.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>桁数判定if else文</title>
<script>
var num;

function dgt(){
	num=prompt('0から1000までの数値を入力して下さい。', '半角数字で入力して下さい。');
	document.write(num+'は');
	
	if(0<=num && num<=9){
		document.write('一桁の数です。');
	}
	else if(10<=num && num<=99){
		document.write('二桁の数です');
	}
	else if(100<=num && num<=999){
		document.write('三桁の数です');
	}
	else if(1000<=num && num<=9999){
		document.write('四桁の数です');
	}
}
</script>
</head>
<body>
<h1>1から1000までの数値の桁数を判別します</h1>
<p>ボタンをクリックすると数値を入力するウインドウが表示されます。</p>
<p><button onClick="dgt()">判定する</button></p>
</body>
</html>

if else文 入力された月から季節を判定

if(条件){
}
else if(条件){
}
http://latte.moto-chika.com/0107/index9.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>if文でその月の春夏秋冬を判断する</title>
<script>
var month;

function season(){
	month=prompt('月を入力して下さい', '1から12の値を半角数字で入力');
	if((month == 12) ||(month == 1) ||(month == 2)){
		document.write('<h1>季節は冬です。</h1>');
	}
	else if((month >= 3)&&(month<=5)){
		document.write('<h1>季節は春です。</h1>');
	}
	else if((month>=6)&&(month<=8)){
		document.write('<h1>季節は夏です。</h1>');
	}
	else if((month>=9)&&(month<=11)){
		document.write('<h1>季節は秋です。</h1>');
	}
}
</script>
</head>
<body>
<h1>月別に季節を判別</h1>
<p>ボタンをクリックすると月を入力するウインドウが表示されます。</p>
<p><button onClick="season()">月別に季節を判別する</button></p>
</body>
</html>

if文のネスト 平均点数を基準に判定

※文字列を数値として扱うためにNumberを使用していますが、parseIntでも同じ結果が得られます。
http://latte.moto-chika.com/0107/index10.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>if文のネスト 平均点に対して判定</title>
<script>
var score;
var refValue=70;

function point(){
	score=prompt('点数を入力して下さい', '半角数字で入力');
	document.write('あなたの点数は',score,'点です。<br>');
	
	if(score>=refValue){
		
		if(score == refValue){
			document.write('平均点です。<br>');
			document.write('次も頑張りましょう!');
		}
		else{
			document.write('平均点以上です。<br>');
			document.write('よくできました!');
		}
	}
	else{
		document.write('平均まであと',(refValue-score),'点<br>');
		document.write('もっとがんばりましょう!');
	}
}
	
</script>
</head>
<body>
<h1>平均点数を基準に評価します</h1>
<p>ボタンをクリックすると点数を入力するウインドウが表示されます。</p>
<p><button onClick="point()">平均点数と比べて評価する</button></p>
</body>
</html>

switchからのcase文

http://latte.moto-chika.com/0107/index11.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>switch文で月の季節を判定する</title>
<script>
var month;
function season(){
	month=prompt('月を入力して下さい','1から12の値を半角数字を入力');
	month=Number(month);
	switch(month){
		case 12:
		case 1:
		case 2:
		  document.write('<h1>冬です。</h1>');
		break;
		
		case 4:
		case 5:
		case 6:
		  document.write('<h1>春です。</h1>');
		break;
		
		case 7:
		case 8:
		case 9:
		  document.write('<h1>夏です。</h1>');
	break;
	
	  case 10:
		case 11:
		case 12:
		  document.write('<h1>秋です。</h1>');
		break;
		
		default:
		  document.write('<h1>1から12の値を入力して下さい。</h1>');
		
	}
}
</script>
</head>
<body>
<h1>月別に季節を判別</h1>
<p>ボタンをクリックすると季節を入力するウインドウが表示されます。</p>
<p><button onClick="season()">月別に季節を判別する</button></p>
</body>
</html>

jQuery Lightbox

画像をじわっと見せる効果がある
jQueryは何かの機能を実現するためのjavascriptのライブラリ