displayを変更する

表示を切り替える

《素材1》→


《素材2》→




<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>まずはやってみる:方丈記編</title>
<link href="css/sample01.css" type="text/css" rel="stylesheet" media="all">
<script type="text/javascript" src="js/1_01.js"></script>
</head>
<body>
<div id="whatsnew">
<h1><img src="img/whatsnew.png" alt="最新情報" width="398" height="25"></h1>
<div class="section first">
<h2 id="news1Title">方丈記<br>
【ゆく河の流れ】</h2>
<p id="news1Paragraph">ゆく河の流れは絶えずして、しかももとの水にあらず。淀みに浮ぶうたかたは、かつ消え、かつ結びて、久しくとどまりたる例(ためし)なし。世の中にある人と、栖(すみか)とまたかくのごとし。<br>
  たましきの都のうちに、棟を並べ、甍(いらか)を争へる、高き、いやしき、人の住ひは、世々を経て尽きせぬものなれど、これをまことかと尋ねれば、昔ありし家は稀(まれ)なり。或は去年(こぞ)焼けて、今年作れり。或は大家(おほいへ)亡びて小家(こいへ)となる。住む人もこれに同じ。所も変らず、人も多かれど、いにしへ見し人は、二三十人が中(うち)に、わづかにひとりふたりなり。朝(あした)に死に、夕(ゆふべ)に生るるならひ、ただ水の泡にぞ似たりける。<br>
  知らず、生れ死ぬる人、何方(いずかた)より来たりて、何方へか去る。また知らず、仮の宿り、誰(た)が為にか心を悩まし、何によりてか目を喜ばしむる。その主と栖と、無常を争ふさま、いはばあさがほの露に異ならず。或は露落ちて花残れり。残るといへども朝日に枯れぬ。或は花しぼみて露なほ消えず。消えずといへども夕を待つ事なし。</p>
</div>
<div class="section">
<h2 id="news2Title">方丈記<br>【安元の大火】</h2>
<p id="news2Paragraph">予(われ)、ものの心を知れりしより、四十(よそぢ)あまりの春秋(しゅんじう)をおくれるあひだに、世の不思議を見る事ややたびたびになりぬ。<br>
  去(いんし)、安元三年四月(うづき)廿八日かとよ。風烈(はげ)しく吹きて、静かならざりし夜、戌(いぬ)の時(とき)許(ばかり)、都の東南(たつみ)より火出で来て、西北(いぬゐ)に至る。はてには朱雀門・大極殿・大学寮・民部省などまで移りて、一夜のうちに塵灰(ちりはい)となりにき。<br>
  火(ほ)もとは、樋口富(ひぐちとみ)の小路(こうじ)とかや。舞人(まひびと)を宿せる仮屋より出で来たりけるとなん。咲き迷ふ風に、とかく移りゆくほどに、扇(あふぎ)をひろげたるがごとく末広になりぬ。遠き家は煙(けぶり)に咽(むせ)び、近きあたりはひたすら焔(ほのほ)を地に吹きつけたり。空には灰を吹き立てたれば、火の光に映じて、あまねく紅(くれなゐ)なる中に、風に堪へず、吹き切られたる焔、飛ぶが如くして一二町を越えつつ移りゆく。その中の人、現(うつ)し心あらむや。或(あるい)は煙に咽びて倒れ伏し、或は焔にまぐれてたちまちに死ぬ。或は身ひとつ、からうじて逃るるも、資財を取り出づるに及ばず。七珍万宝さながら灰燼(くわいじん)となりにき。その費え、いくそばくぞ。そのたび、公卿の家十六焼けたり。ましてその外、数へ知るに及ばず。惣(すべ)て都のうち、三分が一に及べりとぞ。男女死ぬるもの数十人、馬・牛のたぐひ辺際を知らず。<br>
  人の営み、皆愚かなるなかに、さしも危ふき京中の家をつくるとて、宝を費し、心を悩ます事は、すぐれてあぢきなくぞ侍る。</p>
</div>
</div>
</body>
</html>
window.onload = function () {
	para1 = document.getElementById( 'news1Paragraph' );
	para2 = document.getElementById( 'news2Paragraph' );
	para1.style.display = 'none';
	para2.style.display = 'none';
	title1 = document.getElementById( 'news1Title' );
	title2 = document.getElementById( 'news2Title' );
	title1.onclick = function () {
		para1.style.display = 'block';
	}
	title2.onclick = function () {
		para2.style.display = 'block';
	}
}
@charset "UTF-8";

*{
	margin:0;
	padding:0;
	font-size:100%;
}

body{
	background-color:#f1f1f1;
	font-family:sans-serif;
}

#whatsnew{
	background-color:#fff;
	border:1px solid #ddd;
	width:460px;
	margin:62px auto;
	padding-bottom:34px;
}

#whatsnew h1{
	margin:31px auto 24px;
	width:398px;
}

#whatsnew .section{
	background-color:#f1f1f1;
	width:398px;
	margin:0 auto;
	padding:4px;
	font-size:12px;
	line-height:1.5;
}
#whatsnew .section.first{
	padding-bottom:0;
}

#whatsnew h2{
	border:1px solid #ddd;
	height:38px;
	background:url(../images/h2_bg.png) #fff;
	font-weight:normal;
	color:#3d5bb0;
	padding:6px 1em 0 43px;
	cursor: pointer;
}

#whatsnew p{
	border:1px solid #ddd;
	border-top:none;
	background:#fff;
	padding:1em;
}


減速の動きは、jQueryで練習します。

JavaScriptの記述

読み込まれたときにパラグラフを非表示にする

window.onload = function (){
    document.getElementById( 'news1Paragraph' ).style.display = 'none';
}


クリックされたときにパラグラフを表示する

window.onload = function () {
    document.getElementById( 'news1Paragraph' ).style.display = 'none';
    document.getElementById( 'news1Title' ).onclick = function() {
    document.getElementById( 'new1Paragraph' ).style.display = 'block';
    }
}


変数を使ってまとめます

window.onload = function () {
    para1 = document.getElementById( 'news1Paragraph' );
    para1.style.display = 'none';
    title1 = document.getElementById( 'news1Title' );
    title1.onclick = function() {
        para1.style.display = 'block';
    }
}


もうひとつの見出しと段落についても設定

window.onload = function () {
    para1 = document.getElementById( 'news1Paragraph' );
    para2 = document.getElementById( 'news2Paragraph' );
    para1.style.display = 'none';
    para2.style.display = 'none';
    title1 = document.getElementById( 'news1Title' );
    title2 = document.getElementById( 'news2Title' );
    title1.onclick = function () {
        para1.style.display = 'block';
    }
    title2.onclick = function () {
        para2.style.display = 'block';
    }
}

DOM Scriptingの流れ

  • JavaScriptはブラウザで動作するスクリプト言語
  • DOMはW3Cから勧告されている文書を操作する仕組み
  • Web標準に準拠する形でページを制作すると多くのメリットがある
  • HTMLはJavaScriptが無効でも成り立つようにする必要がある
  • JavaScriptでは順番に命令文を記述していく
  • 1つの命令文の最後には「;」(セミコロン)を置く
  • 命令文は基本的に「.」でつなげていく(ドットシンタックス
  • スクリプトを適用する場所は外部ファイル、script要素、各要素の属性内の3カ所
  • 要素の取得はDOMを使う
  • スタイルシートで設定できるものはDOMでも設定できる
  • 変数を使うと短く短縮できる
  • functionを使って命令をまとめられる
  • 命令が特定のタイミングで実行されるにはイベントを使う
  • ページが読み込まれたときに実行するには「window.onload」に関数(function)を設定する