2013-01-15

39回目授業内容リンク〜今後のBlogとDiaryの在り方を考えて〜JavaScriptの復習〜オブジェクトを生成する

授業 JavaScript Dreamweaver

39回目授業内容　オブジェクトを生成する（JavaScript）～脱線

2013/01/15はてなDiaryリンク

http://d.hatena.ne.jp/Tokiyo/20130115

今後のBlogとDiaryの在り方を考えて

同じ記事を書いてると良くないんだそうだ・・・

と言うことで記事内容を変えないとSEO的にも不味いんだそうだ。
なのでBlogではその日習った事の復習的な内容に変えて行きたい。
復習は苦手なのだがやる価値がかなりあるから困ったものだ・・・。
しかも一ヶ月前の記事をしこしこ復習

JavaScript　＞　オブジェクトを生成する

Dateオブジェクトでサーバーから日時を取り出しテキストで表示させます

var now;
now = new Date();
document.write('<h1>', now.toString(), '</h1>');

new Date()で呼び出すのかな。確かそうだ。

このnew date()の「（）」内に「(2014, 0, 11, 15, 55, 50)」と指定すると、

この様に日時表示を指定出来ます。
そういうことです！

getTimeメソッド

getTimeは指定の年月日時を指定できる・・・のかなｗ。確かそうだ。

<script>
var now, date;
now = new Date();

var gantan, days, diff;
gantan = new Date(now.getFullYear() + 1, 0, 1);
diff = gantan.getTime() - now.getTime();
days = Math.ceil(diff / (24 * 60 * 60 * 1000));
document.write('<h1>今年は残り日数：' + days ,'</h1>');
</script>

で、年の初めを「1,0,1」で元旦を指定し、diffで差を計算。
diffの中身は「秒」だったと思う。なので「日」まで計算。
で、やっとこさdocument.writeで表示されるわけ。
あ〜〜難しい！ｗ。

1ヶ月前の勉強だけどやっとこさ読めるようになったかな。
JavaScriptの復習に丁度いいや。

日時時刻の設定

<script>
var now, hour, minute;
now = new Date();

hour = now.getHours();
minute = now.getMinutes();
document.write('<h1>');
document.write('現在時刻：');
document.write(hour, '時', minute, '分');
document.write('</h1>');
</script>

これはよく使いそうですね。
ちらっとWebページに入れておけばそれなりに役に立ちそうです。
getするってのがJavaScriptらしい。
「命令」って感じがいっぱいだな！

今後のBlogの書き方

今後は時間がある限り以前の授業内容を振り返ることにしました。
今やってみてなかなか勉強になったｗ。
見て解析するだけでも全然勉強だ。
blogの書き込み日付をどうするかなんだけどもなぁ・・・。
少しずつ近づいて行かないとなぁ・・・。
まぁ頑張ります！

2013-01-12

38回目授業内容　PhotoShop（カンプ製作）～脱線

授業 PhotoShop

38回目授業内容　PhotoShop（カンプ製作）～脱線

PhotoShop

カンプ
- 正解標準の幅960pxで製作
- pタグ等の文字ベースは「鮮明（アンチエイリアス）」をかけずに作る
  - Windowsでは文字が綺麗に映らない
  - 72dpiは紙媒体と同じ寸法にするため
- コピーしてきた画像の色を変えたいときは「カラーオーバーレイ」を使う
- FontはHGシリーズは厳禁！

- Web用に保存では色数が少ないものはGIFで
  - カラー32の誤差拡散法

googleBotを止める方法

robots.txt
- Disallowにする
- User-agent: * + /
- .htaccess

脱線話（復活）

PhotoShopの使い方もかなり分かってきた。

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

2013-01-11

37回目授業内容　jQuery（アコーディオンとタブ）～脱線

授業 Dreamweaver JavaScript jQuery

37回目授業内容　jQuery（アコーディオンとタブ）～脱線

[授業][JavaScript][Dreamweaver][jQuery]

jQuery

- アコーディオンとtab

脱線話（復活）

今日も一生懸命やりました！

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

2013-01-10

36回目授業内容　関数～jQueryの練習～脱線

授業 Dreamweaver ActionScript Flash JavaScript jQuery

36回目授業内容　関数～jQueryの練習～脱線

[授業][ActionScript][Flash][Dreamweaver][jQuery][JavaScript]

関数

ボタンごとにfunction

<body>
<p>商品A（1000円）<button onClick="zeiA()">税込価格</button></p>
<p>商品B（1000円）<button onClick="zeiB()">税込価格</button></p>
<p>商品C（1000円）<button onClick="zeiC()">税込価格</button></p>
<script>
var zeikomi;
function zeiA(){
	zeikomi = 1000 * 1.05;
	alert('税込み価格は' + zeikomi + 'です。');
}
function zeiB(){
	zeikomi = 2000 * 1.05;
	alert('税込み価格は' + zeikomi + 'です。');
}
function zeiC(){
	zeikomi = 3000 * 1.05;
	alert('税込み価格は' + zeikomi + 'です。');
}
</script>
</body>

functionを一つで計算

<body>
<p>商品A（1000円）<button onClick="zei(1000)">税込価格</button></p>
<p>商品B（1000円）<button onClick="zei(2000)">税込価格</button></p>
<p>商品C（1000円）<button onClick="zei(3000)">税込価格</button></p>
<script>
var zeikomi;
function zei(price){
	zeikomi = price * 1.05;
	alert('税込み価格は' + zeikomi + '円です。');
}
</script>
</body>

functionを一つで計算２

<body>
<p>商品A（1000円）<button onClick="zei('商品A',1000)">税込価格</button></p>
<p>商品B（1000円）<button onClick="zei('商品B',2000)">税込価格</button></p>
<p>商品C（1000円）<button onClick="zei('商品C',3000)">税込価格</button></p>
<script>
var zeikomi;
function zei(name, price){
	zeikomi = price * 1.05;
	alert(name + 'の税込み価格は' + zeikomi + '円です。');
}
</script>
</body>

returnで戻り値を返す

<head>
<script>
function zei(x){
	var x = price * 1.05;
	return x;
}
</script>
</head>
<body>
<script>
var price;
price = prompt('価格の数字を入力してください。','半角数字で入力');
a = zei(price);
alert('税込み価格は' + a + '円です');
</script>
</body>

returnで戻り値を返す2

<head>
<script>
function dollToYen(doll, rate) {
	var yen;
	yen = doll * rate;
	return yen;
}
</script>
</head>
<body>
<p>
<script>
var yen1 = dollToYen(100, 90);
document.write(yen1, "円<br>");

var doll2 = 50;
var rate2 = 88;
var yen2= dollToYen(doll2, rate2);
document.write(yen2, "円<br>");
</script>
</p>
</body>

jQueryの練習

横スクロールとlightBox

脱線話（復活）

今日もガッツリやりました。もうちょっとでくじけるところだった・・・やばかったねぇ～(笑´∀｀)！

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

2013-01-09

35回目授業内容　while文～break～jQuery～Flash～脱線

授業 Dreamweaver ActionScript Flash JavaScript jQuery

35回目授業内容　while文～break～jQuery～Flash～脱線

while文

西暦表示

<table>
<tr><th>和暦（平成）</th><th>西暦</th></tr>
<script>
var MAX = 25;
var i = 1;
while(i <= MAX) {
	document.write('<tr>');
	document.write('<td>', i, '</td>');
	document.write('<td>', i+1988, '</td>');
	document.write('</tr>');
	i++;
}
</script>
</table>

入力した数字までの合計

<h3>合計</h3>
<p>以下のボタンをクリックすると、<br>
入力した数字までの合計を求めて表示しす。</p>
<p><button onClick="total()">数字を入力する</button></p>

<script>
function total() {
	var ans = 0;
	var i = 1;
	var maxNum;
	
	maxNum = prompt('数字を入力して下さい。', '半角数字');
	
	while(i <= maxNum) {
		ans = ans + i;
		i++;
	}
	alert('1～' + maxNum + 'の合計は' + ans + 'です。');
}
</script>

break

「100」を超えた段階の数字

<h3>合計</h3>
<p>以下のボタンをクリックすると、<br>
入力した数字までの合計は「100」を超えた段階を表示します。</p>
<p><button onClick="total()">数字を入力する</button></p>

<script>
function total() {
	var ans = 0;
	var maxNum;
	var bkNum = 100;
	
	maxNum = prompt('数字を入力してください。', '半角数字');
	for(i=1; i<=maxNum; i++){
		ans = ans + 1;
		if(ans >= maxNum){
			break;
		}
		}
		  alert('1~' + i + 'の合計は' + ans+ 'です');
}
</script>

処理の中断

<h3>（問題）</h3>
<p>日本で最も面積が大きい“県”は何県でしょう？</p>
<p><button onClick="ans()">答えを見る</button></p>
<p>
※ボタンのクリックが2回までの間はヒントが表示されます。<br>
※ボタンを3回以上クリックすると、答えが表示されます。
</p>
<script>
var i =1;
function ans() {
	switch ( i ) {
		case 1:
		alert('【ヒント】北海道は件ではありません。');
		break;
		case 2:
		alert('【ヒント】東北地方にある県です');
		break;
		default:
		alert('答えは「岩手県」です！');
}
i++;
}
</script>

while文でbreak

<script>
var ans = 5;
var num;
var msg ='1～10までの数字を入力して下さい。';

while(true) {
	num = prompt(msg, '半角数字を入力');
	if(ans == num) {
		document.write('<h1>正解です</h1>');
		break;
	}
	if(num < ans) {
		msg ='もっと大きな数を入力してください。';
	}else if(num > ans) {
		msg ='もっと小さな数を入力してください。';
	}else{
		msg = '数を入力して下さい';
}
}
</script>

２または３で割り切れない数値

<h3>２または３で割り切れない数値</h3>
<p>1～100までの場合</p>
<script>
  for (i=1 ; i<=100 ; i++){
    if(i % 2 == 0 || i % 3 == 0) {
      continue;
    }
  document.write(i, '　');
		}
</script>

jQuery

plugin練習（スライドショー系）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>jQuery plugin</title>

	<link rel="stylesheet" type="text/css" href="../style-projects-jquery.css">    
    
    <!-- Arquivos utilizados pelo jQuery lightBox plugin -->
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
		<script type="text/javascript" src="js/jquery.cross-slide.min.js"></script>
		<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
		<script type="text/javascript" src="js/bsn.Crossfader.js"></script>
		<script type="text/javascript" src="js/jquery.pause.min.js"></script>
 

    <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen">
    <!-- / fim dos arquivos utilizados pelo jQuery lightBox plugin -->
    
    <!-- Ativando o jQuery lightBox plugin -->
    <script type="text/javascript">
    $(function() {
        $('#gallery a').lightBox();
    });
		
		  $(function() {
    $('#slideshow').crossSlide({
      sleep: 2,
      fade: 1
    }, [
  { src: 'photos/1.jpg' },
  { src: 'photos/2.jpg' },
  { src: 'photos/3.jpg' },
  { src: 'photos/4.jpg' },
  { src: 'photos/5.jpg' }
    ])
  });

		  $(function() {
		$('#slideshow2').crossSlide({
  speed: 45,
  fade: 1,
/*	loop: 1*/
}, [
  { src: 'photos/1.jpg', dir: 'up'   },
  { src: 'photos/2.jpg', dir: 'down' },
  { src: 'photos/3.jpg', dir: 'up'   },
  { src: 'photos/4.jpg', dir: 'down' },
  { src: 'photos/5.jpg', dir: 'up'   }
    ])
  });
	
		  $(function() {
	$('#slideshow3').crossSlide({
  fade: 1
}, [
  {
    src:  'photos/1.jpg',
    alt:  '画像１',
    from: '100% 80% 1x',
    to:   '100% 0% 1.7x',
    time: 3
  }, {
    src:  'photos/2.jpg',
    alt:  '画像２',
    from: 'top left',
    to:   'bottom right 1.5x',
    time: 2
  }, {
    src:  'photos/3.jpg',
    alt:  '画像３',
    from: '100% 80% 1.5x',
    to:   '80% 0% 1.1x',
    time: 2
  }, {
    src:  'photos/4.jpg',
    alt:  '画像４',
    from: '100% 50%',
    to:   '30% 50% 1.5x',
    time: 2
  }, {
	  src:  'photos/5.jpg',
    alt:  '画像４',
    from: '100% 50%',
    to:   '30% 50% 1.5x',
    time: 2
  }

], function(idx, img, idxOut, imgOut) {
  if (idxOut == undefined)
  {
    // starting single image phase, put up caption
    $('div.caption').text(img.alt).animate({ opacity: .7 })
  }
  else
  {
    // starting cross-fade phase, take out caption
    $('div.caption').fadeOut()
  }
});
  });

		  $(function() {
$('#slideshow4').crossSlide({
  fade: 1,
  variant: true,
  easing: 'easeInOutQuad'
}, [
  {
    src:  'photos/1.jpg',
    alt:  '画像１',
    from: '100% 80% 1x',
    to:   '100% 0% 1.7x',
    time: 3
  }, {
    src:  'photos/2.jpg',
    alt:  '画像２',
    from: 'top left',
    to:   'bottom right 1.5x',
    time: 2
  }, {
    src:  'photos/3.jpg',
    alt:  '画像３',
    from: '100% 80% 1.5x',
    to:   '80% 0% 1.1x',
    time: 2
  }, {
    src:  'photos/4.jpg',
    alt:  '画像４',
    from: '100% 50%',
    to:   '30% 50% 1.5x',
    time: 2
  }, {
	  src:  'photos/5.jpg',
    alt:  '画像５',
    from: '100% 50%',
    to:   '30% 50% 1.5x',
    time: 2
  }

], function(idx, img, idxOut, imgOut) {
  if (idxOut == undefined)
  {
    // starting single image phase, put up caption
    $('div.caption').text(img.alt).animate({ opacity: .7 })
  }
  else
  {
    // starting cross-fade phase, take out caption
    $('div.caption').fadeOut()
  }
});
  });
	
	
	window.onload = function() {
var cf = new Crossfader( new Array('cf1','cf2','cf3', 'cf4', 'cf5'), 500, 2000 );
}

    </script>
   	<style type="text/css">
	/* jQuery lightBox plugin - Gallery style */
	body {
		background-color: #000;
		text-align: center;
		margin: 0 auto;
		text-align: center;
}
	p, h1 {
		color: #fff;
	}
	h2 {
		color: #fff;
	}
	#gallery a {
		text-decoration: none;
	}
	#gallery {
	background-color: #171717;
	padding: 10px;
	width: 840px;
	margin: 0 auto;

	}
	#gallery ul {
	list-style: none;
	margin: 10px 0 10px 0;
	padding: 0;
	}
	#gallery ul li { display: inline; }
	#gallery ul img {
		border: 5px solid #262626;
		border-width: 5px 5px 5px;
	}
	#gallery ul a:hover img {
		border: 5px solid #fff;
		border-width: 5px 5px 5px;
		color: #fff;
	}
	#gallery ul a:hover { color: #fff; }
	
	#slideshow {
  width: 800px;
  height: 600px;
	margin: 0 auto;
}
	#slideshow2 {
  width: 800px;
  height: 400px;
	margin: 0 auto;
}
	#slideshow3 {
  width: 800px;
  height: 600px;
	margin: 0 auto;
}
	#slideshow4 {
  width: 800px;
  height: 600px;
	margin: 0 auto;
}
.album {
	width: 800px;
	height: 600px;
	margin: auto;
	position: relative;
	background-image: url(images/bg.jpg);
	background-repeat: no-repeat;
}
p img {
	width: 800px;
	height: 600px;
	position: absolute;
	left: 0px;
	top: 0;
}
	</style>
</head>

<body>

<h2 id="example">jQuery plugin を使った練習</h2>
<p>lightBox</p>
<p>写真を<strong>クリック</strong> すると拡大します。</p>
<div id="gallery">
    <ul>
        <li>
            <a href="photos/1.jpg" title="ここに写真のキャプションが入る">
                <img src="photos/thumb_1.jpg" width="150" height="113" alt="">
            </a>
        </li>
        <li>
            <a href="photos/2.jpg" title="ここに写真のキャプションが入る">
                <img src="photos/thumb_2.jpg" width="150" height="113" alt="">
            </a>
        </li>
        <li>
            <a href="photos/3.jpg" title="ここに写真のキャプションが入る">
                <img src="photos/thumb_3.jpg" width="150" height="113" alt="">
            </a>
        </li>
        <li>
            <a href="photos/4.jpg" title="ここに写真のキャプションが入る">
                <img src="photos/thumb_4.jpg" width="150" height="113" alt="">
            </a>
        </li>
        <li>
            <a href="photos/5.jpg" title="ここに写真のキャプションが入る">
                <img src="photos/thumb_5.jpg" width="150" height="113" alt="">
            </a>
        </li>
    </ul>
</div>
<p>Static cross-fade</p>
<div id="slideshow"></div>
<p>Slide and cross-fade</p>
<div id="slideshow2"></div>
<p>Ken Burns effect</p>
<div id="slideshow3"></div>
<p>Ken Burns variant</p>
<div id="slideshow4"></div>
<p>Brand Spanking New</p>
<h1>Frog Album</h1>
<div class="album">
<p>
<img id="img01" src="photos/1.jpg" width="800" height="600" alt="">
<img id="img02" src="photos/2.jpg" width="800" height="600" alt="">
<img id="img03" src="photos/3.jpg" width="800" height="600" alt="">
<img id="img04" src="photos/4.jpg" width="800" height="600" alt="">
<img id="img05" src="photos/5.jpg" width="800" height="600" alt="">
</p>
</div>
<script>
	window.onload = function(){
		var imageList = [
			"img01","img02", "img03", "img04", "img05"
		]
		new Crossfader( imageList, 1000, 5000 );
	}
</script>
</body>
</html>

Flash

レモンをボタンで動かす（イベントハンドラメソッド）

var rate:Number = 10;
 top_btn.onRelease = function() {
	 lemon_MC._y -= rate;
 }
 right_btn.onRelease = function() {
	 lemon_MC._x += rate;
 }
 bottom_btn.onRelease = function() {
	 lemon_MC._y += rate;
 }
 left_btn.onRelease = function() {
	 lemon_MC._x -= rate;
 }
 ||<


**脱線話（復活）
-

2013-01-08

34回目授業内容　jQuery～脱線

授業 JavaScript jQuery Dreamweaver

34回目授業内容　jQuery～脱線

jQueryで画像をポップアップ

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>jQuery lightBox plugin</title>

	<link rel="stylesheet" type="text/css" href="../style-projects-jquery.css">    
    
    <!-- Arquivos utilizados pelo jQuery lightBox plugin -->
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
    <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen">
    <!-- / fim dos arquivos utilizados pelo jQuery lightBox plugin -->
    
    <!-- Ativando o jQuery lightBox plugin -->
    <script type="text/javascript">
    $(function() {
        $('#gallery a').lightBox();
    });
    </script>
   	<style type="text/css">
	/* jQuery lightBox plugin - Gallery style */
	body {
		background-color: #000;
		text-align: center;
		margin: 0 auto;
	}
	p {
		color: #fff;
	}
	h2 {
		color: #fff;
	}
	#gallery a {
		text-decoration: none;
	}
	#gallery {
	background-color: #171717;
	padding: 10px;
	width: 840px;
	margin: 0 auto;

	}
	#gallery ul {
	list-style: none;
	margin: 10px 0 10px 0;
	padding: 0;
	}
	#gallery ul li { display: inline; }
	#gallery ul img {
		border: 5px solid #262626;
		border-width: 5px 5px 5px;
	}
	#gallery ul a:hover img {
		border: 5px solid #fff;
		border-width: 5px 5px 5px;
		color: #fff;
	}
	#gallery ul a:hover { color: #fff; }
	</style>
</head>

<body>

<h2 id="example">jQuery lightBox plugin を使ったLightBoxの練習</h2>
<p>写真を<strong>クリック</strong> すると拡大します。</p>
<div id="gallery">
    <ul>
        <li>
            <a href="photos/1.jpg" title="ここに写真のキャプションが入る">
                <img src="photos/thumb_1.jpg" width="150" height="113" alt="">
            </a>
        </li>
        <li>
            <a href="photos/2.jpg" title="ここに写真のキャプションが入る">
                <img src="photos/thumb_2.jpg" width="150" height="113" alt="">
            </a>
        </li>
        <li>
            <a href="photos/3.jpg" title="ここに写真のキャプションが入る">
                <img src="photos/thumb_3.jpg" width="150" height="113" alt="">
            </a>
        </li>
        <li>
            <a href="photos/4.jpg" title="ここに写真のキャプションが入る">
                <img src="photos/thumb_4.jpg" width="150" height="113" alt="">
            </a>
        </li>
        <li>
            <a href="photos/5.jpg" title="ここに写真のキャプションが入る">
                <img src="photos/thumb_5.jpg" width="150" height="113" alt="">
            </a>
        </li>
    </ul>
</div>

</body>
</html>

for文

文字を繰り返す

<script>
var i;
for (i = 0; i < 10; i++) {
	document.write('<p>JavaScript</p>');
}
</script>

年齢を選択して下さい。

<p>年齢を選択して下さい。</p>
<select>
<script>
var i;
for (i=20; i<=70; i++) {
	document.write('<option value="' + i + '">' + i + '歳</option>');
}
</script>
</select>

西暦を表示

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

偶数の合計

<body>
<h3>偶数の合計</h3>
<p>以下のボタンをクリックすると、</p>
<p>2、4、6、8、…、100を全て合計した結果を表示できます。</p><br>
<button onClick="total()">計算結果</button>

<script>
function total(){
	var ans = 0;
	for (i=2 ; i<=100 ; i=i+2){
		ans = ans + i;
	}
	alert('2、4、6、8、…、100の合計は' + ans + 'です。');
}

</script>
</body>

3の倍数を強調表示

<style>
#mulOfThree {
	font-weight: bold;
	font-size: 1.5em;
}
</style>
</head>

<body>
<h1>3の倍数を強調表示</h1>
<p>
<script>
var MAX = 15;
for(var i=1; i<=MAX; i++){
	if((i % 3) == 0) {
		document.write('<span id="mulOfThree">',i,'</span>','&nbsp;');
	}else{
		document.write(i + '&nbsp;');
	}
}

</script>
</p>
</body>

1～100を全て合計した結果

<h3>合計</h3>
<p>以下のボタンをクリックすると、</p>
<p>1～100を全て合計した結果を表示できます。</p>
<button onClick="total()">計算結果</button>
<script>
function total() {
	var ans = 0;
	for(i=0; i<=100; i++) {
		ans = ans + i;
	}
	alert('1~100の合計は' + ans + 'です。');
}
</script>

九九の対数表を表示

<style>
table {
     border-collapse: collapse;
}
td,th {
     width: 50px;
     text-align: center;
}
th {
     background-color: #CCC;
}
</style>

</head>

<body>
<h3>九九表</h3>
<table width="500" border="1">
<tr>
<th>&nbsp;</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
</tr>

<script>
for(i=1; i<=9; i++){
	document.write('<tr><th>' + i + '</th>');
	for(j=1; j<=9; j++){
		document.write('<td>' + i*j + '</td>');
	}
	document.write('</tr>');
}

</script>
</body>

脱線話（復活）

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

2013-01-07

33回目授業内容　JavaScript～jQueryについて～卒業生のポートフォリオ紹介～脱線

授業 JavaScript Dreamweaver jQuery

33回目授業内容　JavaScript～jQueryについて～卒業生のポートフォリオ紹介～脱線

JavaScript

平成を西暦に変換する

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

標準体重計算プログラム

	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です。');

男性か女性かを選んでもらう

<body>
<script>
	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の人の標準体重は');
	document.write(weight,'kgです。');

</script>
</body>

偶数か奇数かの判別します

<h1>偶数か奇数かの判別します</h1>
<p>ボタンをクリックすると数値を入力するウインドウが表示されます。</p>
<p><button onClick="guki()">判別する</button></p>

<script>
	var num;
	
	function guki() {
		num = prompt('数値を入力して下さい', '半角数字で入力');
		
	if(num % 2 == 0) {
		alert(num + '偶数です。');
	}else{
		alert(num + 'は奇数です。');
	}
	}
</script>

基準値をもとに評価

<h1>基準値をもとに評価します</h1>
<p>ボタンをクリックすると点数を入力するウィンドウが開きます。</p>
<p><button onClick="point()">基準値をもとに評価する</button></p>


<script>
	var score;
	var refValue = 80;
	var compValue = 100;
	
	function point() {
	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>

0から1000までの数値の桁数を判別

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

月別に季節を判別

<h1>月別に季節を判別</h1>
<p>ボタンをクリックすると月を入力するウィンドウが表示されます。</p>
<p><button onClick="season()">月別に季節を判別する。</button></p>

<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>

平均点数を基準に評価

<h1>平均点数を基準に評価します</h1>
<p>ボタンをクリックすると点数を入力するウィンドウが開きます。</p>
<p><button onClick="point()">平均点数と比べて評価する</button></p>


<script>
	var score;
	var refValue = 70;
	
	function point() {
	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('平均点まで' + (refValue - score) + '点です。');
	}
}
</script>

jQueryについて

LightBoxを試す

脱線話（復活）

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

39回目授業内容 オブジェクトを生成する（JavaScript）～脱線

2013/01/15はてなDiaryリンク

今後のBlogとDiaryの在り方を考えて

今後のBlogの書き方

38回目授業内容 PhotoShop（カンプ製作）～脱線

googleBotを止める方法

脱線話（復活）

37回目授業内容 jQuery（アコーディオンとタブ）～脱線

脱線話（復活）

36回目授業内容 関数～jQueryの練習～脱線

関数

jQueryの練習

脱線話（復活）

35回目授業内容 while文～break～jQuery～Flash～脱線

while文

break

Flash

34回目授業内容 jQuery～脱線

jQueryで画像をポップアップ

for文

脱線話（復活）

33回目授業内容 JavaScript～jQueryについて～卒業生のポートフォリオ紹介～脱線

jQueryについて

脱線話（復活）

39回目授業内容　オブジェクトを生成する（JavaScript）～脱線

38回目授業内容　PhotoShop（カンプ製作）～脱線

37回目授業内容　jQuery（アコーディオンとタブ）～脱線

36回目授業内容　関数～jQueryの練習～脱線

35回目授業内容　while文～break～jQuery～Flash～脱線

34回目授業内容　jQuery～脱線

33回目授業内容　JavaScript～jQueryについて～卒業生のポートフォリオ紹介～脱線