31日目 | javascript練習

授業

javascriptで、ブラウザに文字表示、警告メッセージ表示

http://latte.moto-chika.com/0105/index.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>javascript練習今年もよろしく</title>
</head>
<script>
window.document.write('あけましておめでとう');
window.alert('今年もよろしく');
</script>
<noscript>
javascript対応ブラウザで表示して下さい
</noscript>
<body>
</body>
</html>

javascriptで、写真をクリックすると警告メッセージを表示

アマルフィ海岸

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>アマルフィ海岸</title>
<style>
p img{
	cursor:pointer;
}
</style>
</head>

<body>
<p><img src="img/bay.jpg" width="900" height="600" onClick="alert('アマルフィ海岸の写真です');">
</p>
</body>
</html>
※スタイルシートでカーソルをポインター（指差し印）の形に指定しています

javascriptで、写真の上にマウスオンで警告メッセージを表示

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

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>アマルフィ船着場</title>
<style>
p img{
	cursor:pointer;
}
</style>
</head>

<body>
<p><img src="img/bay.jpg" width="900" height="600" onMouseover="alert('アマルフィ船着場の写真です');">
</p>
</body>
</html>

javascriptで、写真の上からマウスアウトで警告メッセージを表示

http://latte.moto-chika.com/0105/index4.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>マウスアウト　アマルフィ船着場</title>
<style>
p img{
	cursor:pointer;
}
</style>
</head>

<body>
<p><img src="img/bay.jpg" width="900" height="600"  onMouseOut="alert('アマルフィの写真です!');">
</p>
</body>
</html>

写真をクリックでアラート表示、これをfunction使用で書く

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

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>クリックでアラートfunction使用　アマルフィ船着場</title>
<style>
p img{
	cursor:pointer;
}
</style>
</head>

<body>
<p><img src="img/bay.jpg" width="900" height="600" alt="アマルフィの写真です!" onClick="mess()">
</p>
<script>
function mess( ){
	var answer=('アマルフィの写真です!');
	alert(answer);
}
</script>
</body>
</html>

質問を表示、回答を表示

http://latte.moto-chika.com/0105/index7.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>ボタンクリックで答え表示function使用　youtube</title>
<style>
p img{
	cursor:pointer;
}
</style>
<script>
function ans( ){
	var answer="YouTube";
	alert(answer);
}
</script>
</head>
<body>
<p>問題</p>
<br>
<p>
インターネット動画共有サイトで最も有名なものは？<br>
<button onClick="ans()">答えを見る</button></p>

</body>
</html>

h1要素とp要素をブラウザに表示する

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

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>はじめてのjavascript</title>
<style>
p img{
	cursor:pointer;
}
</style>

</head>
<body>
<script>
document.write('<h1>はじめてのjavascript</h1>','\n');
document.write('<p>ゼロからjavascriptを記述できるように練習します。</p>');
</script>
</body>
</html>

質問に対してボタンを押して答えを見る　日本でいちばん高い山は？

http://latte.moto-chika.com/0105/index9.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>つぎの語句を説明しているもの</title>
<style>
p img{
	cursor:pointer;
}
</style>
<script>
function ans2(){
	var answer="富士山";
	alert(answer);
}
</script>
</head>
<body>
<p>日本で一番高い山は？</p1>
<button onClick="ans2()">答えを見る</button>
</body>
</html>

四則演算

http://latte.moto-chika.com/0105/index10.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>一年の秒数</title>
<style>
p img{
	cursor:pointer;
}
</style>
</head>
<body>
<script>
document.write('2×8-6÷2=',(2*8-6/2));
document.write('<br>');
document.write('2×(8-6)÷2=',(2*(8-6)/2));
document.write('<br>');
document.write('1-2+3=',(1-2+3),"<br>");
document.write('1-(2+3)=',(1-(2+3)),"<br>");
</script>
</body>
</html>

一年の秒数を計算

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

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>一年の秒数</title>
<style>
p img{
	cursor:pointer;
}
</style>
</head>
<body>
<script>
document.write('365×24×60×60=',(365*24*60*60));
document.write('<br>');
</script>
</body>
</html>

質問と回答を警告ウインドウに表示する

http://latte.moto-chika.com/0105/index12.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>質問、回答</title>
<style>
p img{
	cursor:pointer;
}
</style>
</head>
<body>
<script>
var answer;
answer=prompt('好きな花は？','ひまわり');
</script>
</body>
</html>

質問に対して答えを入力してもらい、答えの数値によってメッセージを表示

http://latte.moto-chika.com/0105/index13.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>年齢の確認</title>
<style>
p img{
	cursor:pointer;
}
</style>
</head>
<body>
<script>
var age;
age=prompt('あなたの年齢を入力して下さい','20');

if (age>=20){
	alert('あなたは成人ですね');
}
</script>
</body>
</html>

変数の計算、計算結果はボタンをクリックすると警告メッセージ表示する

http://latte.moto-chika.com/0105/index14.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>変数の演算</title>
<script>
var a,b,kai;
a=28;
b=5;

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+ "です");
}
	
function amari(){
	kai=a/b;
		alert("答えは"  +kai+　"です");
}
</script>
</head>
<body>
<h3>変数の演算</h3>
a=28、b=5について、<br>
変数「a」と「b」の計算結果を表示します<br>
<button onClick='tashizan()'>足し算</button>
<button onClick='hikizan()'>引き算</button>
<button onClick='kakezan()'>掛け算</button>
<button onClick='warizan()'>割り算</button>
</body>
</html>

試験の点数を入力してもらい、3段階の評価を表示する

http://latte.moto-chika.com/0105/index15.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>if文のネスト</title>
<script>
var a;
a=prompt('あなたの点数を入力して下さい','');

if(a>80){
	
  if(a==100){
		alert('満点です');
  }else{
	alert('もう少しです');
  }

}else{
	alert('がんばりましょう');
}
</script>
</head>
<body>
</body>
</html>
||

**IllustratorとPhotoshopでカンプ作成
[f:id:hatewemar2012:20130107010921j:image]
illustlatorで四角描き、複製で各エリアを作る
-レイヤーウインドウの右端四角を別レイヤーにプレスドラッグするとそのレイヤーに移動する
-各エリアの上下左右マージンを10にする
-やりかた　上部ツールバーのw hの数値を変更して変形
-隣り合っているところは隣を合わせるとマージンが倍になるので、そのもののマージンは5にする

**Photoshopでポラロイド風画像処理
[f:id:hatewemar2012:20130107010920j:image]
使ったテクニック
-フィルター　ぼかし（ガウス）　乗算　
左下から対角線にプレスドラッグして移動
-ctrl+t　回転
-写真を最前面に配置
-写真の下レイヤーに切り抜きたい形、大きさのシェイプを描く
-写真と切り抜きシェイプの境目をAltを押しながらクリック
-いらないところを選択エリア指定してDelete
-シェイプの大きさに写真が見かけ上トリミングされる