JavaScript 演習（if文・switch文）／修了生の作品紹介／Jquery　Lightbox - WEB

JavaScript 演習

（変数と演算）

平成を西暦に変換して、ブラウザに結果を書き出し

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>平成を西暦に変換する</title>
</head>
<body>
<script>
var heisei;
var seireki;
var message; //ブラウザに値を表示させる

heisei=25;
seireki=heisei+1988;
message='平成'+heisei+'年は西暦'+seireki+'年です。';
document.write('<h1>',message,'</h1>');
</script>
</body>
</html>

平成を西暦に変換して、アラート表示

alert(message);

（ユーザーからの入力を受け取る）prompt

ドルを円に換算し、結果をアラート表示

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ドルを円に換算</title>
</head>
<body>
<script>
var doll,yen;
var RATE=100;

doll=prompt('金額をドルで入力してください。','半角数字で入力');
yen=doll*RATE;
alert(yen+'円');
</script>
</body>
</html>

標準体重計算

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>標準体重</title>
</head>
<body>
<script>
var height;
var weight; //標準体重
height=prompt('身長を?で入力してください。','半角数字で入力');

weight=(height-100)*0.9;

document.write('<h1>身長',height,'?のあなたの標準体重は',weight,'?です。</h1>');
</script>
</body>
</html>

（ユーザーに確認を求める）comfirm

標準体重計算男女別

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>確認ダイアログボックスを表示</title>
</head>
<body>
<script>
var man;
var height;
var weight;

height=prompt('身長を?で入力してください。','半角数字で入力');

man=confirm('あなたは男性ですか？');
if(man) {
  weight=(height-80)*0.7;
}else {
  weight=(height-70)*0.6;
}

document.write('<h1>身長が',height,'?の');
  if(man) {
	document.write('男性の標準体重は');
}else {
	document.write('女性の標準体重は');
}
  document.write(weight,'?です。</h1>');
</script>
</body>
</html>

IF文で偶数・奇数の判別

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>IF文　偶数・奇数の判別</title>
<script>
var num;
function oddEven() {
num=prompt('数値を入力してください。','半角数字で入力');
if(num%2==0) {
  alert('偶数です。');
}else {
  alert('奇数です。');
}
}
</script>
</head>
<body>
<h1>偶数か奇数か判別します。</h1>
<p>ボタンをクリックすると、数値を入力するウインドウが表示されます。</p>
<p><button onClick="oddEven()">判別！</button></p>
</body>
</html>

・IF文　基準値に対して判別する

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>IF文　テスト評価</title>
<script>
var score;
var refValue=80;　//基準点
var compValue=100; //満点

score=prompt('点数を入力してください。','半角数字で入力');
if(score==compValue) {
  document.write('<h1>百点満点！</h1>');
}
if(score>=refValue){
  document.write('<h1>合格です。</h1>');
　document.write('<p>よくがんばりました。</p>');
}else {
  document.write('<h1>不合格です。</h1>');
　　document.write('<p>もう少しがんばりましょう。</p>');
}

</script>
</head>
<body>
</body>
</html>

IF文　基準値に対して判別する（ボタンクリックで）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset='UTF-8'>
<title>if文　テスト評価</title>
<script>
var score;
var refValue=80;
var compValue=100;

function judge() {
score=prompt('点数を入力してください。','半角数字');
if(score>=refValue) {
  if(score==compValue) {
    document.write('<h1>百点満点!</h1>');
    document.write('<p>よくがんばりました。/p>');
  }else {
    document.write('<h1>合格です。</h1>');
    document.write('<p>よくがんばりました。</p>');
    }
}
  else {
    document.write('<h1>不合格です。</h1>');
    document.write('<p>もう少しがんばりましょう。</p>');
    }

}

</script>
</head>
<body>
<h1>基準値をもとに評価します。</h1>
<p>ボタンをクリックすると、点数を入力するウインドウが表示されます。</p>
<p><button onClick="judge()">判定！</button></p>
</body>
</html>

elseif 数字の桁数をカウント

複数の条件のどれにあてはまるかによって、それぞれ違う処理を行いたいときは、else ifを使う。
「&&」演算子は、どれも「true」のときだけ「true」を返す。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>elseif 数字の桁数をカウント</title>
<script>
var num;

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

elseif 春夏秋冬を判断

<!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>
<button onClick="season()">あなたに季節をお知らせしますよ</button>
</body>
</html>

if文のネスト

<!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>
<button onClick="season()">あなたに季節をお知らせしますよ</button>
</body>
</html>

switch文

値に応じて処理を分岐
「（）」の値に対応する case文にジャンプ　break文で1処理終了
どのcase文の値にも一致しない場合は「default;」へジャンプ

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

function season () {
month=prompt('今、何月？','半角数字で入力');
	
	month=Number(month);
	switch(month) {
		case 12:
		case 1:
		case 2:
		document.write('<h1>今は冬です。</h1>');
		break;
		
		case 3:
		case 4:
		case 5:
		document.write('<h1>今は春です。</h1>');
		break;
		
		case 6:
		case 7:
		case 8:
		document.write('<h1>今は夏です。</h1>');
		break;
		
		case 9:
		case 10:
		case 11:
		document.write('<h1>今は秋です。</h1>');
		break;
		
		default:
		document.write('<h1>1から12の値を入力してください。</h1>');
	}
}
</script>
</head>
<body>
<h1>月別に季節を判断</h1>
<P>ボタンをクリックすると月を入力するウインドウが表示されます。</p>
<button onClick="season()">あなたに季節をお知らせしますよ</button>
</body>
</html>

promptメソッドの戻り値は文字列のため、Number関数で数値に変換

修了生の作品紹介

Jquery　Lightbox

JQuery lightbox plugin 0.5をダウンロード
jquery.lightbox-0.5.jsのファイルを確認

overlayOpacity: 背景の透明度　0（透明）　→　1.0（不透明）
containerBorderSize：写真の枠のパディングの指定
containerResizeSpeed - モーションの速度を指定　デフォルトは400　1秒＝1000
$('#jquery-lightbox').css({

top: arrPageScroll[1] + (arrPageSizes[3] / 10),　写真が表示される位置　上からの距離を表している　もっと上にしたい時は分母を大きく。

JavaScript 演習

修了生の作品紹介

Jquery Lightbox

Jquery　Lightbox