32回目授業内容　JavaScript〜脱線 - 四十路男TokiyoのWeb人生再スタートDiary

JavaScript

画像をクリックしてアラート

<body>
<p><img src="img/1.jpg" width="1280" height="720" alt="綺麗な写真" onClick="alert('綺麗な写真です');"></p>
</body>

マウスオーバーでアラート

<body>
<p><img src="img/1.jpg" width="1280" height="720" alt="綺麗な写真" onMouseOver="alert('綺麗な写真です');"></p>
</body>

マウスアウトでアラート

<body>
<p><img src="img/1.jpg" width="1280" height="720" alt="綺麗な写真" onMouseOut="alert('綺麗な写真です');"></p>
</body>

開いた瞬間アラート

<body>
<p><img src="img/1.jpg" width="1280" height="720" alt="綺麗な写真" onload="alert('綺麗な写真です');"></p>
</body>

ボタンをクリックでアラート

<p>問題</p>
<p>大阪人の突っ込みの定番は・・・</p>
<p><input type="submit" value="答えを見る" onClick="answer()"></p>

<script>
function answer(){
	alert('なんでやねん！');
}
</script>
</body>

ボタンをクリックで答えアラート（JavaScriptで計算）

<p>問題</p>
<p>一年は何秒？</p>
<p><input type="button" value="答えは" onClick="Click()"></p>

<script>
function Click(){
	alert('60x60x24x365='+(60*60*24*365));
}
</script>
</body>

if文

数字を入力してif判定

<body>
<script>
	var test;
	test = prompt('点数を入れて下さい。','');
	if(test > 80) {
	if(test == 100) {
	 alert('満点です！');
	 } else {
		alert('もう少しです。');
	 }
	 } else {
		 alert('頑張りましょう！');
	}
</script>
</body>

function

ボタンによって計算を変える（functionを使う）

<body>
<p>aの値は28</p>
<p>bの値は7</p>
<button onClick="tashizan()">足し算</button>
<button onClick="hikizan()">引き算</button>
<button onClick="kakezan()">掛け算</button>
<button onClick="warizan()">割り算</button>

<script>
var a,b,kai;
a = 28;
b = 7;
	
	function tashizan() {
		kai = a + b;
		alert('答えは' + kai + 'です。');
	}
	function hikizan() {
		kai = a - b;
		alert('答えは' + kai + 'です。');
	}
	function kakezan() {
		kai = a * b;
		alert('答えは' + kai + 'です。');
	}
	function warizan() {
		kai = a / b;
		alert('答えは' + kai + 'です。');
	}
</script>
</body>

Illustrator & PhotoShop

カンプの準備

脱線話（復活）

四十路男Tokiyoの人生再スタートblogもやってます。