WEB、始めました

半年間WEB制作の学校に通います。その記録。

41日目　ワイヤーフレーム

他のサイトからどんな構成（ワイヤーフレーム）でサイトを作っているのか研究


Illustrator


新規
Ｗｅｂ　1024px

ファイル→配置

webサイトからスクリーンショットしてもってきたファイルを選択（テンプレートのみにチェックをいれる）

ファイル→ドキュメント設定→アートボード編集
上下の位置を合わせて移動ツールに持ち替えてクリックすると確定される

表示→ピクセルプレビュー

f:id:chawannmusi:20160328011845p:plain

レイヤーをコンテンツ分用意し面積の大きいところから四角を描く
※photoshopでガイド線を引くため



このとき四角のサイズ縦横が必ず偶数になるようにすること





container

f:id:chawannmusi:20160328012229p:plain



footer

f:id:chawannmusi:20160328014014p:plain



nav

f:id:chawannmusi:20160328014247p:plain



header

f:id:chawannmusi:20160328014628p:plain



content
sidebar

f:id:chawannmusi:20160328014920p:plain




f:id:chawannmusi:20160328015021p:plain

すべての四角が描けたらレイヤー全てを選択して
ファイル→書き出し

psdで保存
オプション画面が開く

f:id:chawannmusi:20160328015302p:plain

RGB
スクリーン72
アンチエイリアスなし でOK





Photoshop

書き出したファイルをPhotoshopで開きガイドの線をひく
レイヤーを選択してから引くとするとスナップが効いてくれる

f:id:chawannmusi:20160331140728p:plain

40日目　アコーディオンパネル

■アコーディオンパネル
http://tototo.webcrow.jp/BlogUp/1/accordion.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>アコーディオンパネル</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$(function(){
  $('dd:not(:first)').css('display','none');  //1つ目以外のddは閉じる（1つ目は開いている）
  $('dl dt').on('click',function(){
    if($('+dd',this).css('display')=='none'){  //this=押されたdt に隣接しているddが閉じていたら
      $('dd').slideUp('slow');  //開かれてるddを閉じる(全てのddを閉じる)
      $('+dd',this).slideDown('slow');  //押したdtの隣接している閉じられているddを開く
	}
  });
  });
  </script>
</head>

<body>
<div id="container">
<dl>
<dt>好きな食べ物</dt>
<dd>うどんうどんうどんうどんうどんうどんうどんうどんうどんうどん</dd>
<dt>好きな飲み物</dt>
<dd>ビールビールビールビールビールビールビールビールビールビール</dd>
<dt>好きな事</dt>
<dd>旅行旅行旅行旅行旅行旅行旅行旅行旅行旅行旅行旅行旅行旅行旅行</dd>
</dl>
</div>
</body>
</html>

■アコーディオンパネル２
授業ではやってないけど開いたタブを色が変わるように変更してみた
http://tototo.webcrow.jp/BlogUp/2/accordion2.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>アコーディオンパネル</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<script>
$(function(){
  $('dd:not(:first)').css('display','none');  //1つ目以外のddは閉じる（1つ目は開いている）
  $('dl dt').on('click',function(){
    if($('+dd',this).css('display')=='none'){  //this=押されたdt に隣接しているddが閉じていたら
      $('dd').slideUp('slow');  //開かれてるddを閉じる(全てのddを閉じる)
      $('+dd',this).slideDown('slow');  //押したdtの隣接している閉じられているddを開く
      $('dt').css('color','#000').css('background','#7CADB6');
      $(this).css('color','#7CADB6').css('background','#000');
    }
  });
});
//順番も大事（下が上書きしてる） $('dd').slideUp('slow');を下にすると全てが閉じられてしまう。
</script>
</head>

<body>
<h1>開いたらdtの色が変わるようにする</h1>
<div id="container">
<dl>
<dt>好きな食べ物</dt>
<dd>うどんうどんうどんうどんうどんうどんうどんうどんうどんうどん</dd>
<dt>好きな飲み物</dt>
<dd>ビールビールビールビールビールビールビールビールビールビール</dd>
<dt>好きな事</dt>
<dd>旅行旅行旅行旅行旅行旅行旅行旅行旅行旅行旅行旅行旅行旅行旅行</dd>
</dl>
</div>
</body>
</html>

■animate　復習
http://tototo.webcrow.jp/BlogUp/3/hukushu2.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-animate()-</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<style>
p {
  width:2184px;
  height:410px;
  margin:0;
}
div {
  width:546px;
  height:410px;
  overflow:hidden;
}
</style>
<script>
$(function(){
  $( '#surf1' ).click(function(){
    $( 'p:not(:animated)' ).animate({marginLeft : '-546px' },'slow', 'swing' );
  });
  $( '#surf2' ).click(function(){
    $( 'p:not(:animated)' ).animate({marginLeft : '-1092'}, 'slow', 'swing');
  });
  $( '#surf3' ).click(function(){
    $( 'p:not(:animated)' ).animate({marginLeft : '-1638'}, 'slow', 'swing');
  });
  $( '#surf4' ).click(function(){
    $( 'p:not(:animated)' ).animate({marginLeft : '0'}, 'slow', 'swing');
  });
});
</script>
</head>
<body>
<div>
<p><img src="../0317/img/surf01.png" alt="サーフィン１" id="surf1"><img src="../0317/img/surf02.png" alt="サーフィン２" id="surf2"><img src="../0317/img/surf03.png" alt="サーフィン3" id="surf3"><img src="../0317/img/surf04.png" alt="サーフィン4" id="surf4"></p>
</div>
</body>
</html>

39日目　jQuery基本　onClick続き　toggle　show　hide　not:animated　slide　fade　animate

■jQueryの命令-HTMLの移動(wrap)-

<h1><strong>テキストテキスト</strong></h1>
<h1><strong>テキストテキスト</strong></h1>

となる
ひとつずつ囲む

f:id:chawannmusi:20160327191741p:plain　f:id:chawannmusi:20160327191814p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの命令-HTMLの囲み(wrap)-</title>
<script src="../../js/jquery-2.2.1.min.js"></script>
<script>
$(function() {
  $('strong').wrap('<h1></h1>');
});
</script>
</head>

<body>
<strong>テキストテキスト</strong>
<strong>テキストテキスト</strong>
</body>
</html>


■jQueryの命令-HTMLの囲み(wrapAll)-

<h1><strong>テキスト</strong>
<strong>テキスト</strong></h1>

となる

f:id:chawannmusi:20160327192818p:plain　f:id:chawannmusi:20160327192843p:plain


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの命令-HTMLの囲み(wrapAll)-</title>
<script src="../../js/jquery-2.2.1.min.js"></script>
<script>
$(function() {
  $('strong').wrapAll('<h1></h1>');
});
</script>
</head>

<body>
<strong>テキスト</strong>
<strong>テキスト</strong>
</body>
</html>

■jQueryの命令-HTMLの囲み(wrapAll（2）)-
strongの間にあるspanは除外される

f:id:chawannmusi:20160327193034p:plain　f:id:chawannmusi:20160327193058p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの命令-HTMLの囲み(wrapAll（2）)-</title>
<script src="../../js/jquery-2.2.1.min.js"></script>
<script>
$(function() {
  $('strong').wrapAll('<h1></h1>');
});
</script>
</head>

<body>
<strong>テキスト</strong>
<span>除外される</span>
<strong>テキスト</strong>
</body>
</html>

■jQueryの命令-HTMLの囲み(wrapInner)-

<p><strong>テキスト</strong></p>
<p><strong>テキスト</strong></p>

となる


f:id:chawannmusi:20160327193237p:plain　f:id:chawannmusi:20160327193313p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの命令-HTMLの囲み(wrapInner)-</title>
<script src="../../js/jquery-2.2.1.min.js"></script>
<script>
$(function() {
  $('p').wrapInner('<strong></strong>');
});  //pの中に<strong>が入る
</script>
</head>

<body>
<p>テキスト</p>
<p>テキスト</p>
</body>
</html>


■jQueryの命令-HTMLの囲み(unwrap)-

<strong>テキスト</strong>
<strong>テキスト</strong>

となる
親要素全てが取り除かれる

f:id:chawannmusi:20160327192347p:plain　f:id:chawannmusi:20160327192422p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの命令-HTMLの囲み(unwrap)-</title>
<script src="../../js/jquery-2.2.1.min.js"></script>
<script>
$(function() {
  $('strong').unwrap();
});  //親要素が取り除かれる
</script>
</head>

<body>
<h1><strong>テキスト</strong></h1>
<h1><strong>テキスト</strong></h1>
</body>
</html>

■jQueryの命令-HTMLの置き換え(replaceWith)-

f:id:chawannmusi:20160327193807p:plain　f:id:chawannmusi:20160327193829p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの命令-HTMLの置き換え(replaceWith)-</title>
<script src="../../js/jquery-2.2.1.min.js"></script>
<script>
$(function() {
  $('p').replaceWith('<h1>置き換え後</h1>');
});  //要素の置き換え
</script>
</head>

<body>
<p>置き換え前</p>
</body>
</html>


■this 種類の違うaを使った時

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習3/16課題-on(click())-</title>
<script src="../js/jquery-2.2.1.min.js"></script>
<script>
$(function() {
  $('#nav a').on('click',function() {
    $('img').attr('src',$(this).attr('href')).attr('alt',$(this).text());
    return false;
  });
});

</script>
</head>

<body>
<h1>文字をクリックしたら画像が変わる</h1>
<p><a href="https://www.google.co.jp/">リンクしているページに移動</a></p>  <!--ここにaを追加してもリンクしない（imgの情報を拾ってきてしまうから）ulにidをふる-->
<ul id="nav">
<li><a href="img/flower.jpg">花</a></li>
<li><a href="img/sea.jpg">海</a></li>
<li><a href="img/jellyfish.jpg">くらげ</a></li>
<li><a href="img/building.jpg">建物</a></li>
</ul>
<p><img src="img/flower.jpg" alt="花"></p>
</body>
</html>


■toggle
http://tototo.webcrow.jp/0317/01.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-画像をクリックすると順番に画像が変わる-</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script>
$(function() {
  $('#imgChange').toggle(
  function(){ $('img').attr('src','img/surf02.png'); },
  function(){ $('img').attr('src','img/surf03.png'); },
  function(){ $('img').attr('src','img/surf04.png'); }
  );
});
//画像をクリックすると順番に画像が変わる・toggleは繰り返し
</script>
</head>

<body>
<div id ="container">
<p id="imgChange"><img src="img/surf01.png" alt=""></p>
</div>
</body>
</html>


■show
http://tototo.webcrow.jp/0317/02.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-show-</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$(function() {
  $('button').on('click',function() {
    $('#box').show('slow');
  });
});
</script>
<style>
#box {
  width: 300px;
  height: 300px;
  background: skyblue;
  display: none;
}
</style>
</head>

<body>
<p><button>表示</button></p>
<div id="box"></div>
</body>
</html>


■showコールバック関数
http://tototo.webcrow.jp/0317/03.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-showコールバック関数-</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$(function() {
  $('button').on('click',function() {
    $('#box').show('slow',function(){
      $(this).css('background','pink');
      });
  });
});
//画像が出終わったあと色が変わる
</script>
<style>
#box {
  width: 300px;
  height: 300px;
  background: skyblue;
  display: none;
}
</style>
</head>

<body>
<p><button>表示</button></p>
<div id="box"></div>
</body>
</html>

■hide
http://tototo.webcrow.jp/0317/04.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-hide-</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$(function() {
  $('button#show').on('click',function() {
    $('#box').show('slow');
      });
  $('button#hide').on('click',function() {
    $('#box').hide('slow');
      });
});
</script>
<style>
#box {
  width: 300px;
  height: 300px;
  background: skyblue;
  display: none;
}
</style>
</head>

<body>
<p><button id="show">表示</button></p>
<p><button id="hide">非表示</button></p>
<div id="box"></div>
</body>
</html>

■not:animated
http://tototo.webcrow.jp/0317/05.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-(not:animated)-</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$(function() {
  $('button#show').on('click',function() {
    $('#box:not(:animated)').show('slow');
      });
  $('button#hide').on('click',function() {
    $('#box:not(:animated)').hide('slow');
      });
});
//実行中は何度押しても反応しない
</script>
<style>
#box {
  width: 300px;
  height: 300px;
  background: skyblue;
  display: none;
}
</style>
</head>

<body>
<p><button id="show">表示</button></p>
<p><button id="hide">非表示</button></p>
<div id="box"></div>
</body>
</html>

■toggle（ひとつのボタンで表示・非表示）
http://tototo.webcrow.jp/0317/06.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-toggle非表示-</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$(function() {
  $('button').on('click',function() {
    $('#box:not(:animated)').toggle('slow');
      });
});
//ひとつのボタンで表示非表示
</script>
<style>
#box {
  width: 300px;
  height: 300px;
  background: skyblue;
  display: none;
}
</style>
</head>

<body>
<p><button>表示・非表示</button></p>
<div id="box"></div>
</body>
</html>


■slideUp　slideDown
http://tototo.webcrow.jp/0317/07.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-sideDown/slideUp-</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<style>
dl {
  width: 500px;
  margin: 50px auto;
}

dt{
  background: #7CADB6;
  padding: 10px;
  cursor: pointer;
}

dd {
  border: 1px solid #7CADB6;
  padding: 10px;
  margin: 0;
}
</style>
<script>
$(function() {
  $('dt').on('click',function() {
    if($('dd').css('display')=='block') {  //ddが見えている状態の場合
      $('dd:not(:animated)').slideUp('slow');  //スライドをあげる
    }else{
      $('dd').slideDown('slow');  //スライドを下げる
    }
  });
});
</script>

</head>

<body>
<div>
<dl>
<dt>スライドして表示状態を切り替える</dt>
<dd>
slideDown()とslideUp()、show()やhide()とは違いスライドアニメーションで表示非表示を切り替える命令です。
</dd>
</dl>
</div>
</body>
</html>

■slideToggle
http://tototo.webcrow.jp/0317/08.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-sideToggle-</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<style>
@charset "UTF-8";

/* reset */
html, body, dl, dt, dd {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}

dl {
  width: 500px;
  margin: 50px auto;
}

dt{
  background: #7CADB6;
  padding: 10px;
  cursor: pointer;
  color: #FFF;
}

dd {
  border: 1px solid #7CADB6;
  padding: 20px;
}
</style>
<script>
$(function() {
  $('dt').on('click',function() {
    $('dd:not(:animated)').slideToggle('slow');
  });
});
</script>

</head>

<body>
<dl>
<dt>スライドして表示状態を切り替える</dt>
<dd>
slideDown()とslideUp()、show()やhide()とは違いスライドアニメーションで表示非表示を切り替える命令です。
</dd>
</dl>
</body>
</html>


■fadeIn　fadeOut
http://tototo.webcrow.jp/0317/09.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-fadeIn/fadeOut-</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<style>
img { display: none; }
</style>
<script>
$(function() {
  $('button#fadeIn').on('click',function(){
    $('img:not(:animated)').fadeIn('slow');
  });
  $('button#fadeOut').on('click',function(){
    $('img:not(:animated)').fadeOut('slow');
  });
});

</script>
</head>

<body>
<p><button id="fadeIn">表示</button></p>
<p><button id="fadeOut">非表示</button></p>
<p><img src="img/surf01.png" alt="サーフィン"></p>
</body>
</html>

■fadeTo
http://tototo.webcrow.jp/0317/10.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-fadeTo-</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$(function() {
  $('button#fade100').on('click',function(){
    $('img:not(:animated)').fadeTo('slow',1);
  });
  $('button#fade50').on('click',function(){
    $('img:not(:animated)').fadeTo('slow',0.5);
  });
  $('button#fade0').on('click',function(){
    $('img:not(:animated)').fadeTo('slow',0);
  });
});

</script>
</head>

<body>
<p><button id="fade100">表示</button></p>
<p><button id="fade50">半透明</button></p>
<p><button id="fade0">非表示</button></p>
<p><img src="img/surf01.png" alt="サーフィン"></p>
</body>
</html>


■animate()
http://tototo.webcrow.jp/0317/11.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-animate()-</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<style>
p {
  width:1092px;
  height:410px;
  margin:0;
}
div {
  width:546px;
  height:410px;
  overflow:hidden;
}
</style>
<script>
$(function(){
  $( '#surf1' ).click(function(){
    $( 'p:not(:animated)' ).animate({marginLeft : '-546px' },'slow', 'swing' );
  });
  $( '#surf2' ).click(function(){
    $( 'p:not(:animated)' ).animate({marginLeft : '0'}, 'slow', 'swing');
  });
});
</script>
</head>
<body>
<div>
<p><img src="img/surf01.png" alt="サーフィン１" id="surf1"><img src="img/surf02.png" alt="サーフィン２" id="surf2"></p>
</div>
</body>
</html>

38日目　jQuery基本　onClick onMouseover

■nth-child擬似クラス
上から３番目に出てきたliに適用

f:id:chawannmusi:20160327162033p:plain　f:id:chawannmusi:20160327174256p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-nth-child擬似クラス-</title>
<script src="../../js/jquery-2.2.1.min.js"></script>
<script>
$(document).ready(function() {
  $('li:nth-child(3)').css('color','coral');
});

</script>
</head>

<body>
<ul>
<li id="first">HTML5+CSS3</li>
<li id="second">JavaScript</li>
<li id="third">jQuery</li>
<li id="forth">ActionScript</li>
<li id="fifth">PHP+MySQL</li>
</ul>
</body>
</html>

■nth-last-child擬似クラス
下から２番目に適用


f:id:chawannmusi:20160327162033p:plain　f:id:chawannmusi:20160327174826p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-nth-last-child擬似クラス-</title>
<script src="../../js/jquery-2.2.1.min.js"></script>
<script>
$(function(){
  $('li:nth-last-child(2)').css('color','yellowgreen');

});
</script>
</head>

<body>
<ul>
<li>HTML5+CSS3</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>ActionScript</li>
<li>PHP+MySQL</li>
</ul>
</body>
</html>

■nth-of-type擬似クラス
■nth-last-of-type擬似クラス
■first-of-type擬似クラス
■last-of-type擬似クラス

f:id:chawannmusi:20160327175027p:plain　f:id:chawannmusi:20160327175054p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-nth-of-type擬似クラスとnth-last-of-type擬似クラスとfirst-of-type擬似クラスとlast-of-type擬似クラス-</title>
<script src="../../js/jquery-2.2.1.min.js"></script>
<script>
$(function(){
  $('dt:nth-of-type(2)').css('color','green');  //nth-child擬似クラスは兄弟要素で数える。これは指定した要素のみ数える
  $('dt:nth-last-of-type(2)').css('color','red');  //指定した要素の下から数える
  $('dd:first-of-type').css('color','pink');  //指定した要素の最初に出てくる要素に反映される
  $('dd:last-of-type').css('color','blue');  //指定した要素の最後に出てくる要素に反映される
});

</script>
</head>

<body>
<dl>
<dt>HTML5+CSS3</dt>
<dd>テキスト</dd>
<dt>JavaScript</dt>
<dd>テキスト</dd>
<dt>jQuery</dt>
<dd>テキスト</dd>
<dt>ActionScript</dt>
<dd>テキスト</dd>
<dt>PHP+MySQL</dt>
<dd>テキスト</dd>
</dl>
</body>
</html>

■only-of-type擬似クラス
f:id:chawannmusi:20160327175517p:plain　f:id:chawannmusi:20160327175538p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-only-of-type擬似クラス-</title>
<script src="../../js/jquery-2.2.1.min.js"></script>
<script>
$(function(){
  $('dt:only-of-type').css('color','red');  //指定した要素が１つだけ存在する場合に反映する
  $('dd:only-of-type').css('color','green');  //ddは複数あるので反映しない
});

</script>
</head>

<body>
<dl>
<dt>HTML5+CSS3</dt>
<dd>テキスト</dd>
<dd>JavaScript</dd>
<dd>テキスト</dd>
<dd>jQuery</dd>
<dd>テキスト</dd>
<dd>ActionScript</dd>
<dd>テキスト</dd>
<dd>PHP+MySQL</dd>
<dd>テキスト</dd>
</dl>
</body>
</html>

■lang擬似クラス
言語指定

f:id:chawannmusi:20160327162033p:plain　f:id:chawannmusi:20160327175655p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-lang擬似クラス-</title>
<script src="../../js/jquery-2.2.1.min.js"></script>
<script>
$(document).ready(function() {
  $(':lang(ja)').css('color','coral');
  $(':lang(en)').css('color','blue');
  $(':lang(en-us)').css('color','green');
});

</script>
</head>

<body>
<ul>
<li lang="ja">HTML5+CSS3</li>
<li lang="en">JavaScript</li>
<li lang="en-es">jQuery</li>
<li lang="en-us">ActionScript</li>
<li lang="ja">PHP+MySQL</li>
</ul>
</body>
</html>


■属性セレクター（attribute）
属性指定で適用

f:id:chawannmusi:20160327162033p:plain　f:id:chawannmusi:20160327175809p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-属性セレクター（attribute）-</title>
<script src="../../js/jquery-2.2.1.min.js"></script>
<script>
$(document).ready(function() {
  $('[id]').css('color','coral');
});

</script>
</head>

<body>
<ul>
<li id="first">HTML5+CSS3</li>
<li class="second">JavaScript</li>
<li id="third">jQuery</li>
<li class="forth">ActionScript</li>
<li id="fifth">PHP+MySQL</li>
</ul>
</body>
</html>

■属性セレクター（attribute='value'）と（attribute!='value'）

f:id:chawannmusi:20160327162033p:plain　f:id:chawannmusi:20160327180044p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-属性セレクター（attribute='value'）と（attribute!='value'）-</title>
<script src="../../js/jquery-2.2.1.min.js"></script>
<script>
$(document).ready(function() {
  $('[title="second"]').css('color','coral');  //title属性の値がsecondの要素に反映
  $('li[title!="second"]').css('color','blue');  //title属性の値がsecondの以外の要素に反映・要素セレクター<li>の記述が必要
});

</script>
</head>

<body>
<ul>
<li title="first">HTML5+CSS3</li>
<li title="second">JavaScript</li>
<li title="third">jQuery</li>
<li title="forth">ActionScript</li>
<li title="fifth">PHP+MySQL</li>
</ul>
</body>
</html>


■属性セレクター（attribute^='value'）と（attribute$='value'）と（attribute*='value'）

f:id:chawannmusi:20160327162033p:plain　f:id:chawannmusi:20160327180218p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-属性セレクター（attribute^='value'）と（attribute$='value'）と（attribute*='value'）-</title>
<script src="../../js/jquery-2.2.1.min.js"></script>
<script>
$(document).ready(function() {
  $('[title^="s"]').css('color','coral');  //title属性の値が特定の文字列で始まっている要素に反映
  $('[title$="h"]').css('color','blue');  //title属性の値が特定の文字列で終わっている要素に反映
  $('[title*="ir"]').css('color','green');  //title属性の値が特定の文字列を含んでいる要素に反映
});

</script>
</head>

<body>
<ul>
<li title="first">HTML5+CSS3</li>
<li title="second">JavaScript</li>
<li title="third">jQuery</li>
<li title="forth">ActionScript</li>
<li title="fifth">PHP+MySQL</li>
</ul>
</body>
</html>


■属性セレクター[attributeFilter1][attributeFilter2]

f:id:chawannmusi:20160327162033p:plain　f:id:chawannmusi:20160327180417p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-属性セレクター[attributeFilter1][attributeFilter2]</title>
<script src="../../js/jquery-2.2.1.min.js"></script>
<script>
$(document).ready(function() {
  $('[title^="f"][title*="th"]').css('color','coral');  //複数の属性セレクターを同時に指定可能（fで始まりかつtjが含まれる）
});

</script>
</head>

<body>
<ul>
<li title="first">HTML5+CSS3</li>
<li title="second">JavaScript</li>
<li title="third">jQuery</li>
<li title="forth">ActionScript</li>
<li title="fifth">PHP+MySQL</li>
</ul>
</body>
</html>

■jQuery独自のセレクター（firstセレクター/lastセレクター）

f:id:chawannmusi:20160327164409p:plain　f:id:chawannmusi:20160327180538p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-jQuery独自のセレクター（firstセレクター/lastセレクター）-</title>
<script src="../../js/jquery-2.2.1.min.js"></script>
<script>
$(document).ready(function() {
  $('li:first').css('color','coral');
  $('li:last').css('color','blue');
});
//fist-child.last-child擬似クラスは共通の親要素を持つ要素から最初（最後）の要素を選択するのに対して:ulが２つある為１つずつの最初（最後）計４つに反映
//指定したセレクターに対して最初（最後）に登場する要素だけを選択：ulが２つあっても最初のliと最後のliにしか反映されない　計２つ
</script>
</head>

<body>
<ul>
<li id="first">HTML5+CSS3</li>
<li id="second">JavaScript</li>
<li id="third">jQuery</li>
<li id="forth">ActionScript</li>
<li id="fifth">PHP+MySQL</li>
</ul>
<ul>
<li id="first">HTML5+CSS3</li>
<li id="second">JavaScript</li>
<li id="third">jQuery</li>
<li id="forth">ActionScript</li>
<li id="fifth">PHP+MySQL</li>
</ul>
</body>
</html>


■jQuery独自のセレクター（evenセレクター/oddセレクター）

f:id:chawannmusi:20160327164409p:plain　f:id:chawannmusi:20160327180711p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-jQuery独自のセレクター（evenセレクター/oddセレクター）-</title>
<script src="../../js/jquery-2.2.1.min.js"></script>
<script>
$(document).ready(function() {
  $('li:even').css('color','coral');  //偶数番目（0番目2番目）に出現する要素に反映
  $('li:odd').css('color','blue');  //奇数番目に出現する要素に反映
});
//nth-child擬似クラスのeven/oddは共通の親要素を持つ要素から最初（最後）の要素を選択するのに対して:ulが２つある場合最初のulに対しての偶数奇数２番目に対しての偶数奇数を反映させる
//指定したセレクターに対してすべての要素から選択：ulが２つあっても全てのliの中から合算して偶数奇数を反映
</script>
</head>

<body>
<ul>
<li id="first">HTML5+CSS3</li>
<li id="second">JavaScript</li>
<li id="third">jQuery</li>
<li id="forth">ActionScript</li>
<li id="fifth">PHP+MySQL</li>
</ul>
<ul>
<li id="first">HTML5+CSS3</li>
<li id="second">JavaScript</li>
<li id="third">jQuery</li>
<li id="forth">ActionScript</li>
<li id="fifth">PHP+MySQL</li>
</ul>
</body>
</html>


■jQuery独自のセレクター（headerセレクター）


f:id:chawannmusi:20160327180807p:plain　f:id:chawannmusi:20160327180827p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-jQuery独自のセレクター（headerセレクター）-</title>
<script src="../../js/jquery-2.2.1.min.js"></script>
<script>
$(document).ready(function() {
  $(':header').css('color','coral');  //h1～h6までの要素をまとめて反映
});
</script>
</head>

<body>
<h1>HTML5+CSS3</h1>
<p>JavaScript</p>
<h2>jQuery</h2>
<p>ActionScript</p>
<h6>PHP+MySQL</h6>
</body>
</html>


■jQuery独自のセレクター（containsセレクター/hasセレクター）


f:id:chawannmusi:20160327162033p:plain　f:id:chawannmusi:20160327180939p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-jQuery独自のセレクター（containsセレクター/hasセレクター）-</title>
<script src="../../js/jquery-2.2.1.min.js"></script>
<script>
$(document).ready(function() {
  $('li:contains("+")').css('color','coral');  //特定の文字列が含まれている要素に反映
  $('li:has(strong)').css('color','blue');  //特定の要素が含まれている要素に反映
});

</script>
</head>

<body>
<ul>
<li id="first">HTML5+CSS3</li>
<li id="second">JavaScript</li>
<li id="third"><strong>j</strong>Query</li>
<li id="forth">ActionScript</li>
<li id="fifth">PHP+MySQL</li>
</ul>
</body>
</html>


■jQuery独自のセレクター（parentセレクター）

f:id:chawannmusi:20160327181036p:plain　f:id:chawannmusi:20160327181101p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-jQuery独自のセレクター（parentセレクター）-</title>
<script src="../../js/jquery-2.2.1.min.js"></script>
<script>
$(document).ready(function() {
  $('li:parent').css('color','coral');  //何らかの子要素やテキストを含む要素に反映・empty擬似クラスと反対
});

</script>
</head>

<body>
<ul>
<li id="first">HTML5+CSS3</li>
<li></li>
<li id="second">JavaScript</li>
<li id="third"><strong>j</strong>Query</li>
<li></li>
<li id="forth">ActionScript</li>
<li id="fifth">PHP+MySQL</li>
</ul>
</body>
</html>


■jQueryの命令-テキストの変更-

f:id:chawannmusi:20160327181215p:plain　f:id:chawannmusi:20160327181245p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの命令-テキストの変更-</title>
<script src="../../js/jquery-2.2.1.min.js"></script>
<script>
$(function() {
  $('p#first').text('変更後');
});
</script>
</head>

<body>
<p id="first">変更前</p>
</body>
</html>


■jQueryの命令-テキストの取得-

f:id:chawannmusi:20160327181357p:plain　f:id:chawannmusi:20160327181416p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの命令-テキストの取得-</title>
<script src="../../js/jquery-2.2.1.min.js"></script>
<script>
$(function() {
  $('p#second').text($('p#first').text());  //firstのテキストを取得してsecond内を書き換える
});
</script>
</head>

<body>
<p id="first">取得する文字列</p>
<p id="second">変更前</p>
</body>
</html>

■jQueryの命令-HTMLの変更-

f:id:chawannmusi:20160327181215p:plain　f:id:chawannmusi:20160327181517p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの命令-HTMLの変更-</title>
<script src="../../js/jquery-2.2.1.min.js"></script>
<script>
$(function() {
  $('p#first').html('<strong>変更後</strong>');
});
</script>
</head>

<body>
<p id="first">変更前</p>
</body>
</html>


■jQueryの命令-HTMLの取得-

f:id:chawannmusi:20160327181556p:plain　f:id:chawannmusi:20160327181626p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの命令-HTMLの取得-</title>
<script src="../../js/jquery-2.2.1.min.js"></script>
<script>
$(function() {
  $('p#second').html($('p#first').html());
});
</script>
</head>

<body>
<p id="first"><strong>変更後</strong></p>
<p id="second">変更前</p>
</body>
</html>


■jQueryの命令-HTMLの挿入（prepend/append/before/after）-

f:id:chawannmusi:20160327181726p:plain　f:id:chawannmusi:20160327181745p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの命令-HTMLの挿入（prepend/append/before/after）-</title>
<script src="../../js/jquery-2.2.1.min.js"></script>
<script>
$(function() {
  $('p#first').prepend('<strong>先頭に挿入</strong>');
  $('p#first').append('<strong>最後に挿入</strong>');
  $('p#first').before('<h1>要素の前に挿入</h1>');
  $('p#first').after('<h2>要素の後に挿入</h2>');
});
</script>
</head>

<body>
<p id="first">テキストテキスト</p>
</body>
</html>


■jQueryの命令-HTMLの移動(prependTo/insertBefore)-

f:id:chawannmusi:20160327181835p:plain　f:id:chawannmusi:20160327181859p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの命令-HTMLの移動(prependTo/insertBefore)-</title>
<script src="../../js/jquery-2.2.1.min.js"></script>
<script>
$(function() {
  $('strong').prependTo('p');
  $('h1').insertBefore('p');
});
</script>
</head>

<body>
<p>テキストテキスト</p>
<strong>先頭に移動</strong>
<h1>前に移動</h1>
</body>
</html>


■jQueryの命令-HTMLの移動(appendTo/insertAfter)-

f:id:chawannmusi:20160327181943p:plain　f:id:chawannmusi:20160327182001p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの命令-HTMLの移動(appendTo/insertAfter)-</title>
<script src="../../js/jquery-2.2.1.min.js"></script>
<script>
$(function() {
  $('strong').appendTo('p');
  $('h1').insertAfter('p');
});
</script>
</head>

<body>
<h1>後ろに移動</h1>
<p>テキストテキスト</p>
<strong>最後に移動</strong>
</body>
</html>

■クリックすると背景色が変わる
http://tototo.webcrow.jp/0316/command/kadai.html


f:id:chawannmusi:20160327182339p:plain　f:id:chawannmusi:20160327182401p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習3/16課題-on(click())-</title>
<style>
body { background-color: #09F; }
</style>
<script src="../../js/jquery-2.2.1.min.js"></script>
<script>
$(function() {
  $('button').on('click',function() {
    $('body').css('background-color','#000');

  });
});

</script>
</head>

<body>
<p><button>背景色を変える</button></p>
</body>
</html>


■クリックするとBoxが表示される
http://tototo.webcrow.jp/0316/command/kadai2.html


f:id:chawannmusi:20160327182654p:plain　f:id:chawannmusi:20160327182726p:plain


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習3/16課題-on(click())-</title>
<style>
body { background-color: #09F; }
</style>
<script src="../../js/jquery-2.2.1.min.js"></script>
<script>
$(function() {
  $('button').on('click',function() {
    $('#box').width( 300 ).height( 300 ).css('background-color','#666');
  });
});

</script>
</head>

<body>
<p><button>表示する</button></p>
<div id="box"></div>
</body>
</html>


■クリックするとBoxがゆっくり表示される
http://tototo.webcrow.jp/0316/command/kadai3.html


f:id:chawannmusi:20160327182833p:plain　f:id:chawannmusi:20160327182901p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習3/16課題-on(click())-</title>
<style>
#box {
  width: 300px;
  height: 300px;
  background-color: #666;
  display: none;
}
</style>
<script src="../../js/jquery-2.2.1.min.js"></script>
<script>
$(function() {
  $('button').on('click',function() {
    $('#box').show('slow');
  });
});

</script>
</head>

<body>
<p><button>表示する</button></p>
<div id="box"></div>
</body>
</html>


■クリックするとBoxがゆっくり表示・非表示される
http://tototo.webcrow.jp/0316/command/kadai4.html



f:id:chawannmusi:20160327183015p:plain　f:id:chawannmusi:20160327183043p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習3/16課題-on(click())-</title>
<style>
#box {
  width: 300px;
  height: 300px;
  background-color: #666;
  display: none;
}
</style>
<script src="../../js/jquery-2.2.1.min.js"></script>
<script>
$(function() {
  $('#show').on('click',function() {
    $('#box').show('slow');
  });
  $('#hide').on('click',function() {
    $('#box').hide('slow');
  });
});

</script>
</head>

<body>
<p><button id="show">表示する</button></p>
<p><button id="hide">隠す</button></p>
<div id="box"></div>
</body>
</html>


■クリックすると画像が花→から海に変更される
http://tototo.webcrow.jp/0316/command/kadai5.html


f:id:chawannmusi:20160327183143p:plain　f:id:chawannmusi:20160327183206p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習3/16課題-on(click())-</title>
<script src="../../js/jquery-2.2.1.min.js"></script>
<script>
$(function() {
  $('button').on('click',function() {
    $('img').attr('src','img/sea.jpg').attr('alt','海');
  });
});

</script>
</head>

<body>
<p><button>画像を変更する</button></p>
<p><img src="img/flower.jpg" alt="花"></p>
</body>
</html>


■文字をクリックすると画像が変わる
http://tototo.webcrow.jp/0316/command/kadai6.html

f:id:chawannmusi:20160327190536p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習3/16課題-on(click())-</title>
<script src="../../js/jquery-2.2.1.min.js"></script>
<script>
$(function() {
  $('a').on('click',function() {
    $('img').attr('src',$(this).attr('href')).attr('alt',$(this).text());
    return false;  //クリックしたらリンクに飛んでいくのをやめて取れている値だけを<p>のソースに入れ替えるだけ
  });
});

</script>
</head>

<body>
<h1>文字をクリックしたら画像が変わる</h1>
<ul>
<li><a href="img/flower.jpg">花</a></li>
<li><a href="img/sea.jpg">海</a></li>
<li><a href="img/jellyfish.jpg">くらげ</a></li>
<li><a href="img/building.jpg">建物</a></li>
</ul>
<p><img src="img/flower.jpg" alt="花"></p>
</body>
</html>


■文字にマウスオーバーしたら画像が変わる
http://tototo.webcrow.jp/0316/command/kadai7.html



f:id:chawannmusi:20160327183540p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習3/16課題-on(mouseover)-</title>
<script src="../../js/jquery-2.2.1.min.js"></script>
<script>
$(function() {
  $('a').on('mouseover',function() {
    $('img').attr('src',$(this).attr('href')).attr('alt',$(this).text());
    return false;
  });
});

</script>
</head>

<body>
<h1>文字にマウスオーバーしたら画像が変わる</h1>
<ul>
<li><a href="img/flower.jpg">花</a></li>
<li><a href="img/sea.jpg">海</a></li>
<li><a href="img/jellyfish.jpg">くらげ</a></li>
<li><a href="img/building.jpg">建物</a></li>
</ul>
<p><img src="img/flower.jpg" alt="花"></p>
</body>
</html>

■花の画像にマウスオーバーしたら画像が海に変わる
http://tototo.webcrow.jp/0316/command/kadai8.html


f:id:chawannmusi:20160327183627p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習3/16課題-mouseover</title>
<script src="../../js/jquery-2.2.1.min.js"></script>
<script>
$(function() {
  $('img').mouseover(function() {
    $(this).attr('src','img/sea.jpg').attr('alt','海');
  }).mouseout(function() {
    $(this).attr('src','img/flower.jpg').attr('alt','花');
  });
});

</script>
</head>

<body>
<h1>花の画像にマウスオーバーしたら画像が海に変わる</h1>
<p><img src="img/flower.jpg" alt="花"></p>
</body>
</html>


■サムネイル画像をクリックしたらメイン画像が変わる
http://tototo.webcrow.jp/0316/command/kadai9.html

f:id:chawannmusi:20160327184404p:plain




<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習3/16課題-on(click())-</title>
<script src="../../js/jquery-2.2.1.min.js"></script>
<script>
$(function() {
  $('a').on('click',function() {
    $('#mainImg').attr('src',$(this).attr('href')).attr('alt',$(this).text());
    return false;  //クリックしたらリンクに飛んでいくのをやめて取れている値だけを<p>のソースに入れ替えるだけ
  });
});

</script>
</head>

<body>
<h1>サムネイル画像をクリックしたらメイン画像が変わる</h1>
<ul>
<li><a href="img/flower.jpg"><img src="img/flower.jpg" width="100" alt="花"></a></li>
<li><a href="img/sea.jpg"><img src="img/sea.jpg" width="100" alt="海"></a></li>
<li><a href="img/jellyfish.jpg"><img src="img/jellyfish.jpg" width="100" alt="クラゲ"></a></li>
<li><a href="img/building.jpg"><img src="img/building.jpg" width="100" alt="建物"></a></li>
</ul>
<p><img src="img/flower.jpg" alt="花" id="mainImg"></p>
</body>
</html>

■サムネイル画像をマウスオーバーしたら画像が変わる
http://tototo.webcrow.jp/0316/command/kadai10.html

f:id:chawannmusi:20160327184541p:plain


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習3/16課題-on(mouseover)-</title>
<script src="../../js/jquery-2.2.1.min.js"></script>
<script>
$(function() {
  $('a').on('mouseover',function() {
    $('#mainImg').attr('src',$(this).attr('href')).attr('alt',$(this).text());
    return false;
  });
});

</script>
</head>

<body>
<h1>サムネイル画像をマウスオーバーしたら画像が変わる</h1>
<ul>
<li><a href="img/flower.jpg"><img src="img/flower.jpg" width="100" alt="花" class="sImg"></a></li>
<li><a href="img/sea.jpg"><img src="img/sea.jpg" width="100" alt="海" class="sImg"></a></li>
<li><a href="img/jellyfish.jpg"><img src="img/jellyfish.jpg" width="100" alt="クラゲ" class="sImg"></a></li>
<li><a href="img/building.jpg"><img src="img/building.jpg" width="100" alt="建物" class="sImg"></a></li>
</ul>
<p><img src="img/flower.jpg" alt="花" id="mainImg"></p>
</body>
</html>

37日目　jQuery 基本

■要素セレクタ

要素に対して色変更を適用

f:id:chawannmusi:20160327161358p:plain　f:id:chawannmusi:20160327154727p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-要素セレクター-</title>
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(document).ready(function() {
  $('li').css('color','red');
});


</script>
</head>

<body>
<ul>
<li>HTML5+CSS3</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>ActionScript</li>
<li>PHP+MySQL</li>
</ul>
</body>
</html>

■IDセレクタ

IDに対して色変更を適用


f:id:chawannmusi:20160327162033p:plain　f:id:chawannmusi:20160327162122p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-IDセレクター-</title>
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(document).ready(function() {
  $('#second').css('color','red');
});


</script>
</head>

<body>
<ul>
<li id="first">HTML5+CSS3</li>
<li id="second">JavaScript</li>
<li id="third">jQuery</li>
<li id="forth">ActionScript</li>
<li id="fifth">PHP+MySQL</li>
</ul>
</body>
</html>


■クラスセレクタ

クラス名に対して色変更を適用

f:id:chawannmusi:20160327162244p:plain　f:id:chawannmusi:20160327162342p:plain


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-クラスセレクター-</title>
<script src="../js/jquery-2.2.1.min.js"></script>
<script>
$(document).ready(function() {
  $('#first').css('color','red');
  $('.second').css('color','blue');
});


</script>
</head>

<body>
<ul>
<li id="first">HTML5+CSS3</li>
<li class="second">JavaScript</li>
<li class="third">jQuery</li>
<li class="forth">ActionScript</li>
<li class="fifth">PHP+MySQL</li>
</ul>
</body>
</html>

■子孫セレクタ


子孫要素に対して色変更を適用

f:id:chawannmusi:20160327162557p:plain　f:id:chawannmusi:20160327162635p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-子孫セレクター-</title>
<script src="../js/jquery-2.2.1.min.js"></script>
<script>
$(document).ready(function() {
  $('#first').css('color','red');
  $('.second').css('color','blue');
  $('.forth strong').css('color','yellowgreen');
});


</script>
</head>

<body>
<ul>
<li id="first">HTML5+CSS3</li>
<li class="second">JavaScript</li>
<li class="third">jQuery</li>
<li class="forth"><strong>Action</strong>Script</li>
<li class="fifth"><strong>PHP</strong>+MySQL</li>
</ul>
</body>
</html>

■ユニバーサルセレクタ

liの子要素全てに対して色変更を適用
「*」をつけることによって全てに適用できる

f:id:chawannmusi:20160327162826p:plain　f:id:chawannmusi:20160327162930p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-ユニバーサルセレクター-</title>
<script src="../js/jquery-2.2.1.min.js"></script>
<script>
$(document).ready(function() {
  $('li *').css('color','red');
});


</script>
</head>

<body>
<ul>
<li id="first"><strong>HTML5</strong>+CSS3</li>
<li class="second"><em>Java</em>Script</li>
<li class="third"><span>j</span>Query</li>
<li class="forth">ActionScript</li>
<li class="fifth"><strong>PHP</strong>+MySQL</li>
</ul>
</body>
</html>


■グループセレクタ

「,」で区切り同時に適用させられる

f:id:chawannmusi:20160327162244p:plain　f:id:chawannmusi:20160327163629p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-グループセレクター-</title>
<script src="../js/jquery-2.2.1.min.js"></script>
<script>
$(document).ready(function() {
  $('#first , .fifth').css('color','red');
});


</script>
</head>

<body>
<ul>
<li id="first">HTML5+CSS3</li>
<li class="second">JavaScript</li>
<li class="third">jQuery</li>
<li class="forth">ActionScript</li>
<li class="fifth">PHP+MySQL</li>
</ul>
</body>
</html>

■子セレクタ

子セレクター（

  • 直下ののみ）に適用
    ※
  • ActionScript
    • 　は子要素がdivの為除外される


    f:id:chawannmusi:20160327163751p:plain　f:id:chawannmusi:20160327163815p:plain

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-子セレクター-</title>
<script src="../js/jquery-2.2.1.min.js"></script>
<script>
$(document).ready(function() {
  $('li > strong').css('color','red');
});
//ActionScriptはli直下にdivがあるので実行されない
</script>
</head>

<body>
<ul>
<li><strong>HTML5</strong>+CSS3</li>
<li>JavaScript</li>
<li>jQuery</li>
<li><div><strong>Action</strong>Script</div></li>
<li>PHP+MySQL</li>
</ul>
</body>
</html>

    ■隣接セレクタ

    #secondに隣接しているli（#third）が適用

    f:id:chawannmusi:20160327162033p:plain　f:id:chawannmusi:20160327164221p:plain

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-隣接セレクター-</title>
<script src="../js/jquery-2.2.1.min.js"></script>
<script>
$(document).ready(function() {
  $('#second + li').css('color','red');
});
//thirdが変わる
</script>
</head>

<body>
<ul>
<li id="first">HTML5+CSS3</li>
<li id="second">JavaScript</li>
<li id="third">jQuery</li>
<li id="forth">ActionScript</li>
<li id="fifth">PHP+MySQL</li>
</ul>
</body>
</html>

    ■first-child擬似クラス

    初めに出てきたliに適用
    ２つulがある場合どちらの初めのliにも適用される

    f:id:chawannmusi:20160327164409p:plain　f:id:chawannmusi:20160327164445p:plain

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-first-child擬似クラス-</title>
<script src="../js/jquery-2.2.1.min.js"></script>
<script>
$(document).ready(function() {
  $('li:first-child').css('color','red');
});
</script>
</head>

<body>
<ul>
<li id="first">HTML5+CSS3</li>
<li id="second">JavaScript</li>
<li id="third">jQuery</li>
<li id="forth">ActionScript</li>
<li id="fifth">PHP+MySQL</li>
</ul>
<ul>
<li id="first">HTML5+CSS3</li>
<li id="second">JavaScript</li>
<li id="third">jQuery</li>
<li id="forth">ActionScript</li>
<li id="fifth">PHP+MySQL</li>
</ul>
</body>
</html>

    ■間接セレクタ

    #second以下の（同一親要素の）li全てに適用


    f:id:chawannmusi:20160327162033p:plain　f:id:chawannmusi:20160327164645p:plain

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-間接セレクター-</title>
<script src="../js/jquery-2.2.1.min.js"></script>
<script>
$(document).ready(function() {
  $('#second ~ li').css('color','coral');
});
//second以降のthirdとforthとfifthが変わる
</script>
</head>

<body>
<ul>
<li id="first">HTML5+CSS3</li>
<li id="second">JavaScript</li>
<li id="third">jQuery</li>
<li id="forth">ActionScript</li>
<li id="fifth">PHP+MySQL</li>
</ul>
</body>
</html>

    ■否定擬似セレクタ

    #third以外のliに適用

    f:id:chawannmusi:20160327162033p:plain　f:id:chawannmusi:20160327165028p:plain

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-否定擬似セレクター-</title>
<script src="../js/jquery-2.2.1.min.js"></script>
<script>
$(document).ready(function() {
  $('li:not(#third)').css('color','coral');
});
//(#third)以外が実行される
</script>
</head>

<body>
<ul>
<li id="first">HTML5+CSS3</li>
<li id="second">JavaScript</li>
<li id="third">jQuery</li>
<li id="forth">ActionScript</li>
<li id="fifth">PHP+MySQL</li>
</ul>
</body>
</html>

    ■only-child擬似クラス

    liの中に１つのみしかない要素に適用


    f:id:chawannmusi:20160327162033p:plain　f:id:chawannmusi:20160327165200p:plain

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-only-child擬似クラス-</title>
<script src="../js/jquery-2.2.1.min.js"></script>
<script>
$(document).ready(function() {
  $('li span:only-child').css('color','coral');
});
//liの中に１つのみしかない要素に反映される。だからsecondには反映されない
</script>
</head>

<body>
<ul>
<li id="first"><span>HTML5</span>+CSS3</li>
<li id="second"><span>Java</span>Sc<span>r</span>ipt</li>
<li id="third">jQuery</li>
<li id="forth"><span>A</span>ctionScript</li>
<li id="fifth">PHP+MySQL</li>
</ul>
</body>
</html>

    36日目　習熟度確認試験2　JavaScript

    課題サイト


    ※以下の指示に従って、プログラムを作成しなさい。
    ・表示は全てブラウザ上に表示するように記述すること
    ・DOMまたはwrite()メソッドと指定がない場合は、どちらでも可。
    ・CSSの記述は不要（必然性があれば記述可）



    【問1】サムネール(5個)にマウスを乗せたとき、メイン画像が変化するように記述しなさい。

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>【問１】</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div class="imgbox">
<h1>【問１】サムネール</h1>
<div class="thumbnail">
<img src="../img/s01.jpg" alt="" onmouseover="swap.src='../img/01.jpg'" onmouseout="swap.src='../img/00.jpg'"><img src="../img/s02.jpg" alt="" onmouseover="swap.src='../img/02.jpg'" onmouseout="swap.src='../img/00.jpg'"><img src="../img/s03.jpg" alt="" onmouseover="swap.src='../img/03.jpg'" onmouseout="swap.src='../img/00.jpg'"><img src="../img/s04.jpg" alt="" onmouseover="swap.src='../img/04.jpg'" onmouseout="swap.src='../img/00.jpg'"><img src="../img/s05.jpg" alt="" onmouseover="swap.src='../img/05.jpg'" onmouseout="swap.src='../img/00.jpg'">
</div><!--/.thumbnail-->
<div class="mainImg">
<img src="../img/00.jpg" alt="" name="swap">
</div><!--/.mainImg-->
</div><!--/.imgbox-->
</body>
</html>

    【問2】1～45までの合計を、DOMの記述を使ってボタンを押したときに表示させなさい。

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>【問２】</title>
<script>
function kai() {
var ans = 0;
for(var i=1; i<=45; i++) {
  ans += i;
}
  var total =  '1～45までの合計は、'+ ans +'です。';
  document.getElementById('sumNum').textContent = total;
}
</script>
</head>

<body>
<h1>【問２】1～45までの合計を、DOMの記述を使ってボタンを押したときに表示させなさい。</h1>
<p><button onClick="kai()">合計を求める</button></p>
<div id="sumNum"></div>
</body>
</html>


    【問3】入力された値が7の倍数かどうかを判別する記述を、write()メソッドの記述を使ってボタンを押したときに表示させなさい。

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>【問３】</title>
<script>
var num;
function baisu() {
num = prompt( '半角数字を入力して下さい', 49 );
num = parseInt( num ); 

if ( num%7 === 0 ) {
	document.write( '入力された' + num + 'は7の倍数です。' );
}

else {
	document.write( '入力された' + num + 'は7の倍数ではありません。' );
}
}
</script>
</head>

<body>
<h1>入力された値が7の倍数かどうかを判別します。</h1>
<p><button onClick="baisu()">判別する</button></p>

</body>
</html>


    【問4】1～入力された値までの合計を、write()メソッドの記述を使ってボタンを押したときに表示させなさい。

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>【問４】</title>
<script>

function total() {
  var ans = 0;
  var maxNum;

maxNum = prompt('半角で数字を入力して下さい。','100');
maxNum = parseInt( maxNum );

  for(var i=1 ; i<=maxNum ; i++) {
  ans += i ;
  console.log( ans );
}

  document.write('1～' + maxNum + 'の合計は、' + ans + 'です。');
}

</script>
</head>

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

</body>
</html>

    【問5】今日の西暦年月日曜日(～年～月～日～曜日)を表示させなさい。

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>【問５】</title>
</head>

<body>
<script>
var n= new Date();
var f= n.getFullYear();
var m= n.getMonth()+1;
var d= n.getDate();
var y= n.getDay();
var w=[ '日', '月', '火', '水', '木', '金', '土'];
y = w[y];

document.write('<h1>今日は' + f +'年' + m + '月' + d + '日' + y + '曜日です。</h1>' );
</script>
</body>
</html>


    【問6】現在の時刻を(～時～分～秒)を表示させなさい。

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>【問６】</title>
<script>
function time() {

var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
var htmlstr;

htmlstr = '現在の時刻は、' + h + '時' + m + '分' + s + '秒です。'
document.getElementById( 'ans' ).textContent = htmlstr;

}
</script>
</head>

<body>
<h1>現在の時刻を表示</h1>
<p><button onClick="time()">表示する</button></p>
<div id="ans"></div>
</body>
</html>

    【問7】「月曜日」と「金曜日」が「定休日」、それ以外は「営業日」を表示させなさい。

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>【問７】</title>
<script>
function yobi() {

var today = new Date();
var day = today.getDay();
var holiday = '今日は定休日です。';
var weekday = '今日は営業しています。';

if( day===1 || day===5 ) {

document.getElementById( 'ans' ).textContent = holiday;
} else {

document.getElementById( 'ans' ).textContent = weekday;

}
}
</script>
</head>

<body onLoad="yobi()">
<h1>定休日か営業日か判別</h1>
<p id="ans"></p>
</body>
</html>


    【問8】「大吉」「中吉」「小吉」「凶」と、ボタンを押したときにランダムに表示されるおみくじプログラムをDOMの記述を使って作りなさい。

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>【問８】</title>
<script>
function omikuji() {

var rdm = Math.random();

if( rdm< 0.25 ) {
  document.getElementById( 'ans' ).textContent = '大吉';
} else if( rdm<0.5 ) {
  document.getElementById( 'ans' ).textContent = '中吉';
} else if( rdm<0.75 ) {
  document.getElementById( 'ans' ).textContent = '小吉';
} else {
  document.getElementById( 'ans' ).textContent = '凶';
}

}
</script>
</head>

<body>
<h1>おみくじ</h1>
<p>下のボタンをクリックするとおみくじが引けます。</p>
<p><button onclick="omikuji()">おみくじを引く</button></p>
<h2 id="ans"></h2>
</body>
</html>


    【問9】5×5までの九九一覧表を、write()メソッドで記述しなさい。

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>【問９】</title>
<style>
table {
     border-collapse: collapse;
}
td,th {
     width: 50px;
     text-align: center;
}
th {
     background-color: #CCC;
}

</style>
</head>

<body>
<table width="500" border="1">
<tr>
<th>&nbsp;</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th>
</tr>

<script>
for (var i=1 ; i<=5 ; i++) {
  document.write('<tr>');
  document.write('<th>' + i + '</th>');

    for (var j=1 ; j<=5; j++) {
      document.write('<td>' + i*j + '</td>');
    }

  document.write('</tr>');
}
</script>


</table>
</body>
</html>

    【問10】表示されている画像をクリックの度に、順番(1→2→3→4→5)に表示が変更されるプログラムをDOMの記述を使って作りなさい。

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>【問１０】</title>
<script>
var i=1;
var fig;

function change() {
if(i === 5) {
  i =1;
//↑は５までいったら１に戻れという指示
} else {
  i++;
}

fig = '<img src="../img/' + i +'.jpg" alt="さいころ">';
document.getElementById('image').innerHTML = fig;
}

</script>
</head>

<body>
<h1>画像をクリックする度に順番(1→2→3→4→5)に表示が変更されます。
<p id=image onClick="change()"><img src="../img/1.jpg" alt="さいころ"></p>
</body>
</html>

    問１０が　「var i = 1;」の変数宣言を忘れていて出来なかった。

    35日目　JavaScript演習

    入力された数値の偶数・奇数を判別

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>演習・偶数奇数判別</title>
<script>
function guki() {
var num;
var htmlstr='';

num = prompt('半角数字を入力してください', 2 );
num = parseInt( num);

if( num%2===0 ) {
  htmlstr = '入力された数字' + num + 'は偶数です。'
  document.getElementById( 'ans' ).innerHTML = htmlstr;
} else {
  htmlstr = '入力された数字' + num + 'は奇数です。'
  document.getElementById( 'ans' ).innerHTML = htmlstr;
}
}
</script>
</head>

<body>
<h1>入力された数学の偶数・奇数を判別</h1>
<p><button onClick="guki()">判別する</button></p>
<div id="ans"></div>
</body>
</html>

    現在の時刻を表示

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>演習・時刻表示</title>
<script>
function time() {

var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var htmlstr;

htmlstr = '現在の時刻は、' + h + '時' + m + '分です。'
document.getElementById( 'ans' ).innerHTML = htmlstr;

}
</script>
</head>

<body>
<h1>現在の時刻を表示</h1>
<p><button onClick="time()">表示する</button></p>
<div id="ans"></div>
</body>
</html>


    今年を西暦で表示

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>今年を西暦で表示</title>
<script>
window.onload = function() {
var today = new Date();
var nowYear = '今年は､西暦' + today.getFullYear() + '年です｡';
document.getElementById( 'now' ).textContent = nowYear;
}
</script>
</head>
<body>
<h1>今年を西暦で表示</h1>
<p id="now"></p>
</body>
</html>


    今日の年月日を西暦で表示

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>今日の年月日を西暦で表示</title>
<script>
window.onload = function() {
var today = new Date();
var nowToday = '今日は､西暦' + today.getFullYear() + '年' + (today.getMonth()+1) + '月' + today.getDate() + '日です｡';
document.getElementById( 'now' ).textContent = nowToday;
}
</script>
</head>
<body>
<h1>今日の年月日を西暦で表示</h1>
<p id="now"></p>
</body>
</html>


    曜日判別
    営業休業表示
    if文

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>演習・営業定休表示if</title>
<script>
function yobi() {

var today = new Date();
var day = today.getDay();
var htmlstr;

if( day===0 || day===6 ) {
htmlstr = '定休日'
document.getElementById( 'ans' ).innerHTML = htmlstr;
} else {
htmlstr = '営業中'
document.getElementById( 'ans' ).innerHTML = htmlstr;

}
}
</script>
</head>

<body onLoad="yobi()">
<h1>今日は営業日か定休日か表示</h1>
<p id="ans"></p>
</body>
</html>


    Switch文

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>演習・営業定休表示switch</title>
<script>
function yobi() {

var today = new Date();
var day = today.getDay();
var htmlstr;

switch(day) {
  case 0:
  case 6:
htmlstr = '定休日'
document.getElementById( 'ans' ).innerHTML = htmlstr;
  break;
  case 1:
  case 2:
  case 3:
  case 4:
  case 5:
htmlstr = '営業中'
document.getElementById( 'ans' ).innerHTML = htmlstr;
break;
}
}
</script>
</head>

<body onLoad="yobi()">
<h1>今日は営業日か定休日か表示</h1>
<p id="ans"></p>
</body>
</html>


    入力された点数の数値を｢100が満点｣｢80点以上が合格｣｢80点未満が不合格｣と表示する
    合否判断

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>演習・合否表示if</title>
<script>
function tensu() {
var score;
var refValue = 80;
var compValue = 100;
var htmlstr;

score = prompt('点数を半角で入力して下さい','');
score = parseInt( score );

if(score >= refValue) {

  if(score === compValue) {
    htmlstr = '満点です';
    document.getElementById( 'ans' ).innerHTML = htmlstr;
  } else {
    htmlstr = '合格です';
    document.getElementById( 'ans' ).innerHTML = htmlstr;
  }
}
else {
  htmlstr = '不合格です';
  document.getElementById( 'ans' ).innerHTML = htmlstr;
}

}

</script>

</head>

<body>
<h1>合否判定します。</h1>
<p><button onClick="tensu()">判定する</button></p>
<div id="ans"></div>
</body>
</html>

    入力された数字（月）で四季を判別
    for文

    <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>演習・四季判別if</title>
<script>
var month;
var htmlstr;

function siki() {

month = prompt('月を半角数字で入力して下さい','');
month = parseInt( month );

if(month>=3 && month<=5) {
  htmlstr='春です';
  document.getElementById('ans').innerHTML = htmlstr;
} else if(month>=6 && month<=8) {
  htmlstr='夏です';
  document.getElementById('ans').innerHTML = htmlstr;
} else if(month>=9 && month<=11) {
  htmlstr='秋です';
  document.getElementById('ans').innerHTML = htmlstr;
} else{
  htmlstr='冬です';
  document.getElementById('ans').innerHTML = htmlstr;
}

}

</script>

</head>

<body>
<h1>四季判別します。</h1>
<p><button onClick="siki()">判別する</button></p>
<div id="ans"></div>
</body>
</html>

    switch文

    <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>演習・四季判別</title>
<script>
var month;
var htmlstr;

function siki() {

month = prompt('月を半角数字で入力して下さい','');
month = parseInt( month );

switch(month){
  case 3:
  case 4:
  case 5:
  htmlstr='春です';
  document.getElementById('ans').innerHTML = htmlstr;
  break;
	
  case 6:
  case 7:
  case 8:
  htmlstr='夏です';
  document.getElementById('ans').innerHTML = htmlstr;
  break;

  case 9:
  case 10:
  case 11:
  htmlstr='秋です';
  document.getElementById('ans').innerHTML = htmlstr;
  break;

  case 12:
  case 1:
  case 2:
  htmlstr='冬です';
  document.getElementById('ans').innerHTML = htmlstr;
  break;
}
}

</script>

</head>

<body>
<h1>四季判別します。</h1>
<p><button onClick="siki()">判別する</button></p>
<div id="ans"></div>
</body>
</html>


    ｢JavaScriptの勉強｣という文字を5回繰り返し表示する

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>演習・繰り返し文字表示for</title>
<script>
function forStr() {

  for(var i= 1; i<=5; i++) {
  var htmlstr = '<p>JavaScriptの勉強</p>'
  document.getElementById('ans').innerHTML += htmlstr;
//計算を5回繰り返すのではなく文字表示（出力）を5回している
  }
}
</script>
</head>

<body>
<h1>繰り返し文字を表示する：for文</h1>
<p><button onClick="forStr()">表示する</button></p>
<div id="ans"></div>
</body>
</html>

    1～100までの合計をﾌﾞﾗｳｻﾞに表示に表示する


    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>演習・1~100まで表示for</title>
<script>
function kai() {
var ans = 0;
for(var i=1; i<=100; i++) {
  ans += i;
  document.getElementById('sumNum').innerHTML = '<p>1～100までの合計は、'+ ans +'です。</p>';
}
}
</script>
</head>

<body>
<h1>1～100までの合計をブラウザに表示</h1>
<p><button onClick="kai()">表示する</button></p>
<div id="sumNum"></div>
</body>
</html>

    入力された数字までの合計をﾌﾞﾗｳｻﾞに表示する

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>演習・入力された数字まで表示for</title>
<script>
function kai() {
var x;
var ans = 0;

x = prompt('半角数字を入力して下さい','');
x = parseInt( x );

for(var i=1; i<=x; i++) {
  ans += i;
  document.getElementById('sumNum').innerHTML = '<p>1～100までの合計は、'+ ans +'です。</p>';
}
}
</script>
</head>

<body>
<h1>入力された数字までの合計をブラウザに表示</h1>
<p><button onClick="kai()">表示する</button></p>
<div id="sumNum"></div>
</body>
</html>


    サイコロの目を奇数のみ表示

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>演習・サイコロ奇数</title>
<script>
function throwDice() {

  for(var i=1; i<=6; i++) {
    var img = '<img src="img/d' + i + '.jpg" alt="">';

    if(i%2 == 1) {
      document.getElementById('dice').innerHTML += img;
    }

  }

}
</script>
</head>

<body>
<h1>サイコロの目を奇数のみ表示</h1>
<p><button onClick="throwDice()">サイコロをふる</button></p>
<div id="dice"></div>
</body>
</html>

    imgﾌｫﾙﾀﾞｰ内にある画像（5枚）をすべて表示する
    画像名が数字の場合

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>imgﾌｫﾙﾀﾞｰ内にある画像（5枚）をすべて表示</title>
<script>
window.onload = function() {
  for(var i=1; i<=5; i++) {
  var allImg = '<img src="img/s0' + i +'.jpg" alt="">';
  document.getElementById( 'image' ).innerHTML += allImg;
  }
}
</script>
</head>
<body>
<h1>imgﾌｫﾙﾀﾞｰ内にある画像（5枚）をすべて表示</h1>
<p id="image"></p>
</body>
</html>

    画像名が固有の場合



    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>imgﾌｫﾙﾀﾞｰ内にある画像（5枚）をすべて表示</title>
<script>
var diceNum = new Array( 'one', 'two', 'three', 'four', 'five' );
window.onload = function() {
  for(var i=0; i<diceNum.length; i++) {
  var allImg = '<img src="img/s' + diceNum[i] +'.jpg" alt="">';
  document.getElementById( 'image' ).innerHTML += allImg;
  }
}
</script>
</head>
<body>
<h1>imgﾌｫﾙﾀﾞｰ内にある画像（5枚）をすべて表示</h1>
<p id="image"></p>
</body>
</html>


    「みかん」「りんご」「いちご」「もも」「なし」「かき」をリストで表示する

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>演習・リスト表示</title>
<script>
function fList() { 
var list = new Array('みかん','りんご','いちご','もも','なし','かき');

for(var i = 0; i<list.length; i++) {
var htmlstr = '<li>' + list[i] + '</li>';

document.getElementById('ans').innerHTML += htmlstr;
}
}
</script>
</head>

<body onLoad="fList()">
<h1>「みかん」「りんご」「いちご」「もも」「なし」「かき」をリストで表示する</h1>
<ul id="ans"></ul>

</body>
</html>

    表示している画像をｸﾘｯｸしたら｢ようこそ！｣とﾀﾞｲｱﾛｸﾞﾎﾞｯｸｽに表示する

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ﾀﾞｲｱﾛｸﾞﾎﾞｯｸｽに表示</title>
<script>
function welcome() {
  var str = 'ようこそ！';
  alert( str );
}
</script>
</head>
<body>
<h1>ﾀﾞｲｱﾛｸﾞﾎﾞｯｸｽに表示</h1>
<p><img src="img/hello.jpg" alt="" onclick="welcome()"></p>
</body>
</html>

    ﾎﾞﾀﾝが押される度にｻｲｺﾛの目がﾗﾝﾀﾞﾑに表示する

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ｻｲｺﾛの目をﾗﾝﾀﾞﾑに表示</title>
<script>
var diceNum = new Array( 'one', 'two', 'three', 'four', 'five', 'six' );
function throwDice() {
  var rdm = Math.floor(Math.random()*diceNum.length);
  var diceImg = '<img src="img/' + diceNum[rdm] +'.jpg" alt="">';
  document.getElementById( 'dice' ).innerHTML = diceImg;
}
</script>
</head>
<body>
<h1>ｻｲｺﾛの目をﾗﾝﾀﾞﾑに表示</h1>
<p><button onclick="throwDice()">ｻｲｺﾛをふる</button></p>
<p id="dice"><img src="img/d1.jpg" alt=""></p>
</body>
</html>


    ﾎﾞﾀﾝが押される度に画像がﾗﾝﾀﾞﾑに表示する

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ﾎﾞﾀﾝをｸﾘｯｸする度に画像がﾗﾝﾀﾞﾑに表示</title>
<script>
function change() {
  var rdm = Math.floor(Math.random()*5+1);
  var changeImg = '<img src="img/0' + rdm +'.jpg" alt="">';
  document.getElementById( 'image' ).innerHTML = changeImg;
}
</script>
</head>
<body>
<h1>ｸﾘｯｸする度に画像がﾗﾝﾀﾞﾑに表示</h1>
<p><button onclick="change()">変更ﾎﾞﾀﾝ</button></p>
<p id="image"><img src="img/00.jpg" alt=""></p>
</body>
</html>

    画像をｸﾘｯｸする度に画像がﾗﾝﾀﾞﾑに表示する

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ｸﾘｯｸする度に画像がﾗﾝﾀﾞﾑに表示</title>
<style>
img {
  cursor: pointer;
}
</style>
<script>
function change() {
  var rdm = Math.floor(Math.random()*5+1);
  var changeImg = '<img src="img/0' + rdm +'.jpg" alt="" onclick="change()">';
  document.getElementById( 'image' ).innerHTML = changeImg;
}
</script>
</head>
<body>
<h1>ｸﾘｯｸする度に画像がﾗﾝﾀﾞﾑに表示</h1>
<p id="image"><img src="img/00.jpg" alt="" onclick="change()"></p>
</body>
</html>


    再表示（更新）する度に見出しの文字がﾗﾝﾀﾞﾑに表示する

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>再表示（更新）する度に見出しの文字がﾗﾝﾀﾞﾑに表示</title>
<script>
var hstr = new Array( 'こんにちは', 'Hello', 'Bonjour', 'Hola', '&#20320;好' );
window.onload = function() {
  var rdm = Math.floor(Math.random()*hstr.length);
  var str = hstr[rdm];
  document.getElementById( 'changeStr' ).textContent = str
}
</script>
</head>
<body>
<h1>再表示（更新）する度に見出しの文字がﾗﾝﾀﾞﾑに表示</h1>
<h2 id="changeStr"></h2>
</body>
</html>


    1～100までの数字の内､2の倍数を合計して結果を､ﾎﾞﾀﾝを押したらﾌﾞﾗｳｻﾞに表示する

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>1~100までの合計</title>
<script>
var ans=0;
function sum() {
  for(var i=1; i<=100; i++) {
    if( i%2 === 0) {
    ans += i;
    }
  }
  var total = '1～100までの数字の内 2の倍数を合計すると､' + ans + 'になります｡';
  document.getElementById( 'sumNum' ).textContent = total;
}
</script>
</head>
<body>
<h1>1~100までの合計</h1>
<p><button onClick="sum()">合計を求める</button></p>
<p id="sumNum"></p>
</body>
</html>

    消費税が､8%のときと10%のときの結果を､問題の下に表示させる

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>消費税計算､8%と10%の税込価格</title>
<script>
var tax = [0.08, 0.1];
var peyPrice;
var price;
function nowTax(){
  price = parseInt(prompt('価格を半角数字を入力してください',''));
  peyPrice = price * tax[0] + price;
  var txtArea = document.getElementById ('result1');
  txtArea.textContent = '税込み価格は､' + peyPrice + '円です｡';
}
function newTax(){
  price = parseInt(prompt('価格を半角数字を入力してください',''));
  peyPrice = price * tax[1] + price;
  var txtArea = document.getElementById ('result2');
  txtArea.textContent = '税込み価格は､' + peyPrice + '円です｡';
}
</script>
</head>
<body>
<h1>消費税計算､8%と10%の税込価格</h1>
<h2>消費税が8%の場合</h2>
<p><button onClick="nowTax()">計算してみる</button></p>
<p id="result1"></p>
<h2>消費税が10%の場合</h2>
<p><button onClick="newTax()">計算してみる</button></p>
<p id="result2"></p>
</body>
</html>