３月１１日　授業内容（javascript(復習),職業能力基礎講習（サイト制作のワークフローの説明））

＊サイト制作のワークフローの説明
d.hatena.ne.jp

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
※まとめ-演習
d.hatena.ne.jp

f:id:paris1204:20160311223302p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>演習</title><!--http://d.hatena.ne.jp/web-0818/20160530/p1-->
</head>

<body>
<script>

var num;
var cal;

function ans(){
num=prompt('数字を半角英数で入力してください','12');
num=parseInt(num);
cal=num%2;

var even='';
var odd='';

if(cal===0){
	console.log(num + 'は偶数です。');
	even =num + 'は偶数です。';
	document.getElementById('msg').innerHTML=even;//※id名はシングルクォーテーションで囲む
	}
else{
	console.log(num + 'は奇数です。');
	odd =num + 'は奇数です。';
	document.getElementById('msg').innerHTML=odd;
	
	}

}//functionの閉め
</script>
<h1>入力した整数の偶数、奇数を判別</h1>
<p><button onclick="ans()">判別する</button></p>
<div id="msg"></div>
</body>
</html>

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

f:id:paris1204:20160311223512p:plain
f:id:paris1204:20160311223520p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>演習2</title><!--http://d.hatena.ne.jp/web-0818/20160530/p1-->
</head>

<body>
<script>

function ans(){
var today=new Date;
var h=today.getHours();
var m=today.getMinutes();
var msg='';
msg='現在の時刻は' + h + '時' + m + '分です。';
console.log(msg);

document.getElementById('up').innerHTML=msg;
}
</script>
<h1>現在の時刻を表示</h1>
<button onclick="ans()">現在時刻</button>
<p id="up"></p>
</body>
</html>

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
f:id:paris1204:20160311223836p:plain
f:id:paris1204:20160311223845p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>演習3</title><!--http://d.hatena.ne.jp/web-0818/20160530/p1-->
</head>

<body>
<script>

function ans(){
var today=new Date;
var y=today.getFullYear();
var msg='';
msg='今年は' + y+ '年です。';
console.log(msg);

document.getElementById('up').innerHTML=msg;
}
</script>
<h1>今年を西暦で表示</h1>
<button onclick="ans()">西暦表示</button>
<p id="up"></p>
</body>
</html>

。。。。。。。。。。。。。。。。。。。。。。。

f:id:paris1204:20160311224248p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>演習3</title><!--http://d.hatena.ne.jp/web-0818/20160530/p1-->
</head>

<body>
<script>

function ans(){
var today=new Date;
var y=today.getFullYear();
var m=today.getMonth()+1;
var date=today.getDate();
var msg='';
msg='今日は' + y+ '年' + m +'月' +date + '日です。';
console.log(msg);

document.getElementById('up').innerHTML=msg;
}
</script>
<h1>今日を西暦で表示</h1>
<button onclick="ans()">日付表示</button>
<p id="up"></p>
</body>
</html>

。。。。。。。。。。。。。。。。。。。。。。。。。。。
f:id:paris1204:20160311224523p:plain
f:id:paris1204:20160311224529p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>入力された点数の数値を「100が満点」「80点以上が合格」「80点未満が不合格」と表示する</title>
</head>

<body>

<script>
var score;
score=prompt('テストの点数を整数で入力してください','100');
score=parseInt(score);

if(score>=80){
	if(score===100){
		document.write('おめでとうございます!!満点合格です。');
		}
		else{document.write('合格です！！');}
		}
		else{document.write('不合格だ！！がんばれ！！');}

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

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

f:id:paris1204:20160311224718p:plain
f:id:paris1204:20160311224725p:plain

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>月の数値を入力すると「春です」「夏です」「秋です」「冬です」と表示する</title>
</head>

<body>
<script>
var month;

function season(){
	
	month=prompt('今何月ですか？季節を判定するので半角英数で入力してください','1');
month=parseInt(month);
switch(month){
	case 12:
	case 1:
	case 2:
	document.write('冬です');
	break;
	
	case 3:
	case 4:
	case 5:
	document.write('春です');
	break;
	
	case 6:
	case 7:
	case 8:
	document.write('夏です');
	break;
	
	case 9:
	case 10:
	case 11:
	document.write('秋です');
	break;
	
	default:
	document.write('1～１２までの半角英数を入力してください。');
	

}//switchの閉め
}//functionの閉め
</script>
<h1>月別に季節を判別</h1>
<p>ボタンをクリックすると月を入力するウインドウが表示されます。</p>
<p><button onclick="season()">月別に季節を判別する</button></p>
</body>
</html>

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

f:id:paris1204:20160311224855p:plain
f:id:paris1204:20160311224901p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>繰り返し文字を表示する（for文）</title>
</head>

<body>
<script>
function up(){
	var msg='';
msg='<p>「JavaScriptの勉強」</p>';
var para='';
for(var i=1;i<=5; i++ ){
	console.log(msg);
	para +=msg;
document.getElementById('htmlstr').innerHTML=para;


}

}//functionの閉じ
</script>
<h1>繰り返し文字を表示する（for文）</h1>
<button onclick="up()">表示する</button>
<div id="htmlstr"></div>

</body>
</html>

。。。。。。。。。。。。。。。。。。。。。。。

f:id:paris1204:20160311225118p:plain
f:id:paris1204:20160311225125p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>1～100までの合計をブラウザに表示に表示する</title>
</head>

<body>
<script>
function result(){
var ans=0;//初期値は必ず入れろ

for(var i=1;i<=100;i++){
	ans +=i;

	
}
document.write(ans);

}//functionの閉じ
</script>

<h1>１から１００の合計を表示できます。</h1>
<p><button onclick="result()">結果を見る</button></p>
</body>
</html>

。。。。。。。。。。。。。。。。。。。。。。。。。。

f:id:paris1204:20160311225248p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>和暦（平成）と西暦を並べて表示する</title>
<style>
table{border:1px black solid;
border-collapse:collapse;}
th,td{border:1px black solid;
text-align:center;
width:150px;}
th{background:#E7E4E2;}
</style>
</head>

<body>


<table>
<tr><th>和暦（平成）</th><th>西暦</th></tr>
<script>
for(var i=1; i<=28; i++){
	document.write('<tr>');
	document.write('<td>   '+ i +'   </td>')
	document.write('<td>  '+ (i +1988)  + ' </td>')
  document.write('</tr>');
}
</script>
</table>
</body>
</html>

。。。。。。。。。。。。。。。。。。。。。。。。。。。。

f:id:paris1204:20160311225520p:plain
f:id:paris1204:20160311225526p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>入力された数字までの合計をブラウザに表示する</title>
</head>


<body>
<script>
function result(){
var ans=0;//初期値は必ず入れろ

var num;
num=prompt('希望の数を整数で入力してください。','50')
num=parseInt(num);


for(var i=1;i<=num;i++){
	ans +=i;
	
}

document.write('1～' + num + 'までの合計は' +ans + 'です。');

}//functionの閉じ
</script>

<h1>１から入力された数字の合計を表示できます。</h1>
<p><button onclick="result()">結果を見る</button></p>
</body>
</html>

。。。。。。。。。。。。。。。。。。。。。。。。。。。。
f:id:paris1204:20160311225703p:plain
f:id:paris1204:20160311225711p:plain
f:id:paris1204:20160311225717p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サイコロの目をランダムで表示する</title>
</head>

<body>

<script>
var diceNum=new Array('one','two','three','four','five','six');
function throwDice(){
	var rdm=Math.floor(Math.random()*diceNum.length);
	console.log(rdm)
	var diceImg='<img src=" img/' + diceNum[rdm] + '.jpg " alt="" >';
	document.getElementById('dice').innerHTML =diceImg;//id名は必ずシングルクォーテーションで囲むこと
	
}//functionの閉じ
</script>
<h1>サイコロをランダムで表示する。</h1>
<p><button onclick="throwDice()">サイコロをふる</button></p>
<p id="dice"></p>

</body>
</html>

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

f:id:paris1204:20160311231318p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>奇数のサイコロのみ表示する。</title>
</head>

<body>
<!--<img src="img/1.png">-->
<script>
 function throwDice(){
	  for(var i=1; i<=6; i++){
		 var img='<img src="img/' + i + '.png" alt="">';
		if(i%2==1){ document.getElementById('dice').innerHTML+=img; } } 
		
		
		}  //functionの閉じ
</script>
<h1>奇数のサイコロのみ表示する。</h1>
<p><button onclick="throwDice()">サイコロをふる</button></p>
<p id="dice"></p>

</body>
</html>

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

f:id:paris1204:20160311231541p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サイコロの目が偶数のときのみ表示する。</title>
</head>

<body>

<script>
 function throwDice(){
	  for(var i=1; i<=6; i++){
		 var img='<img src="img/' + i + '.png" alt="">';
		if(i%2==0){ document.getElementById('dice').innerHTML+=img; } } 
		
		
		}  //functionの閉じ
</script>
<h1>偶数のサイコロのみを表示。</h1>
<p><button onclick="throwDice()">サイコロをふる</button></p>
<p id="dice"></p>

</body>
</html>

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

f:id:paris1204:20160312001753p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ランダムな値でサイコロの目が偶数の表示する。</title>
</head>

<body>

<script>

var diceNum=new Array('1','2','3','4','5','6');

 function throwDice(){

	 var rdm=Math.floor(Math.random()*diceNum.length);
	console.log(rdm)
	
	var img='<img src="img/' + diceNum[rdm] + '.png" alt="">';
		 
		if(diceNum[rdm]%2==0){ document.getElementById('dice').innerHTML+=img; } 
		
		
		}  //functionの閉じ
</script>
<h1>ランダムでサイコロをふり偶数のサイコロのみを表示。</h1>
<p><button onclick="throwDice()">サイコロをふる</button></p>
<p id="dice"></p>

</body>
</html>