slide.js 1日目

JavaScript

久しぶりに日記を書いてみる。


2日前から1日1,2時間かけて、JavaScriptでスライドショーアプリを作ってる。
名づけてslide.js。
やりたいのはid:amachangさんとかma.laさんが作っているようなアレ。
あんなすごいのを作れないだろうけど、とりあえずシンプルなやつ作ってみる。

実装したい機能

  • とりあえず、oopなJavaScriptで実装
  • スライドショーモードと通常モード（Webページ閲覧）の切り替え機能
  • ショートカット厨なので、ショートカットは必須
  • レイアウトはもちCSS駆使
  • レイヤー重ねて、インデックスも実装できるといいな（パワポのctrl+sみたいなやつ）


久しぶりにコーディングするのと、JavaScript書くのをほぼ初めてなので時間かかるかかる。
CSSもあんま詳しくないし。
まぁまったりやります○o｡.-y(´Д｀)y-.｡o○ﾌﾞﾊｰ


できあがっていく様子を貼ってみます。
突っ込んで頂けるとありがたいです。
もちろん応援も^ ^;

というわけで、まず1日目（5月1日）。
firefoxでは動くのに、IEではなぜか動かなかったorz
デバッグ文とかもそのまま載せちゃうｗ

slide.js

var main = null;
var contents = new Array();	
var j = 0;

function start(){
	var divPages = document.getElementsByTagName('div');
	for (var i=0; i<divPages.length ; i++) {
		if (divPages[i].className == 'page') {
			contents.push(divPages[i].firstChild.nodeValue);
		}
		divPages[i].innerHTML = '';
	}
}
function next() {
	if(!main) main = document.getElementById('main');
//	alert(contents.length);
	if (j < contents.length) {
		main.innerHTML = contents[j++];

		//last action
		if (j == contents.length) {
			document.getElementById('nextBtn').disabled = true;
		}
	}
}

これを呼び出すHTML側

<html>
<head>
<title>プレゼンツール</title>

<STYLE TYPE="text/css">
<!--
A:link
  { color:#0ac0ff; text-decoration:none; }
A:visited
  { color:#5080e0; text-decoration:none; }
A:hover
  { color:#2ae0ff; text-decoration:underline;}
-->
</STYLE>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<script type="text/javascript" language="JavaScript" src="slide.js"></script>
<SCRIPT type="text/javascript">
<!--
// -->
</SCRIPT>

</head>

<body bgcolor="#FFFFFF" text="#003366" link="#3399FF" vlink="#99CCFF" alink="#FF3333">

<input type="button" value="start!" id="startBtn" onclick="start()">
<input type="button" value="next!" id="nextBtn" onclick="next()">

<div id="main" class="main">
start
</div>
<div id="1" class="page">
test1
</div>

<div id="2" class="page">
test2
</div>

</body>
</html>

ってか、はてな記法にすらまだ慣れてないｗ

参考にした書籍

http://images-jp.amazon.com/images/P/4798016039.09.MZZZZZZZ.jpg
詳解JavaScript&Dynamic HTML辞典 第3―Ajax対応 半場 方人
作者: 半場 方人
出版社/メーカー: 秀和システム
出版日: 2007/03
売り上げランキング: 20327位







“WiiでRimo見たい！”
Wii当たるといいな。