JavaScriptかんたん入門

はじめに

このサイトではブラウザ上で動くJavascriptの基本的な使い方と

簡単なサンプルなどを紹介しています。

動作確認はFireFox6とGoogle Chrome 13辺りでやりました。IEでは動かないものも多いと思います。

JavaScriptを使うための準備

1. metaタグの記述

<head>の中で次のように記述します。

<meta http-equiv="Content-Script-Type" content="text/javascript">

2. scriptタグで囲う

JavaScriptを使いたい場所で次のように記述して、その中にscriptを書いていきます。

<script type="text/javascript">
<!--
//ここにJavascriptを書きます。
-->
</script>

その他に下の例ようにタグの中で呼び出すこともできます。

<a href="#" onMouseOver="myfunction();">画像1</a>

この例ではリンクにマウスカーソルが乗ったときに関数myfunction()を呼び出しています。

ブラウザ上に文字を書き出す

ブラウザにHello World!の文字を書き出してみます。 <body>の中に次のように記述します。

<script type="text/javascript">
<!--
//ここにJavascriptを書きます。
document.wright("Hello World!");
-->
</script>
    

sampleファイルを開く

閉じるボタンを設置する

開いたページを閉じるための「閉じる」ボタンをフォームを使って設置します。

<body>の中に次のように記述します。

<form>
<input type="button" value="close" onClick="window.close()">
</form>

sampleファイルを開く

関数を作る

ここでは<head>の中で2つの数字を足す関数を作り<body>でその関数を使って
2と3の和を書き出しています。また、同じ関数で文字も連結しています。

<head>の記述

<script type="text/javascript">
<!--
function tasu(x, y){
	return x+y;
}
-->
</script>

<body>の記述

<script type="text/javascript">
<!--
	document.write("2+3=" + tasu(2,3)+"<br>");
	document.write(tasu("文字を","連結"));
-->
</script>

    

sampleファイルを開く

流れるテキストを表示する。

setTimeout()を使って、300ミリ秒ごとに、<p>タグの中身を書き換えます。
タグの内容を書き換えるのにはinnerHTMLを使っています。一回書き換えるたびにsmの最初の一文字を一番最後に移動出せています。
(smの中は実際には改行を入れません。)

<head>の記述

<script type="text/javascript">
<!--
var sm="祇園精舎の鐘の声、諸行無常の響きあり。娑羅双樹の花の色、
盛者必衰の理をあらわす。おごれる人も久しからず、唯春の夜の夢のごとし。
たけき者も遂にはほろびぬ、偏に風の前の塵に同じ。                       ";

function mess() {
	document.getElementById("message").innerHTML=sm.substring(0,30);
	sm = sm.substring(1,sm.length) + sm.substring(0,1);
	setTimeout('mess()',300);
}
-->
</script>

<body>の記述

<script type="text/javascript">
<!--
mess();
-->
</script>
    

sampleファイルを開く

BOXを動かしてみる

ここでもsetTimeout()を使っています。littleboxのtop属性とleft属性に5を加えています。
繰り返しを終了させるためclearTimeout()を使っています。

<head>の記述

<style type="text/css">
<!--

#littlebox {
	background-color: #0F0;
	height: 20px;
	width: 20px;
	position:absolute;
	top:0px;
	left:0px;
}

-->
</style>

<script type="text/javascript">
<!--
var x=0;
var y=0;
var timeID = setTimeout("",1000);

function movebox(){
	if(x < 480){
		top_px=y+"px";
		left_px=x+"px";
		document.getElementById("littlebox").style.top = top_px;
		document.getElementById("littlebox").style.left = left_px;
		x+=5;
		y+=5;
		timeID=setTimeout('movebox()',50);
	} else {
		clearTimeout(timeID);
	}
}
-->
</script>

<body>の記述

<div id="littlebox"></div>
<script type="text/javascript">
<!--
movebox();
-->
</script>
    

sampleファイルを開く

画像の操作

リンクにマウスカーソルを乗せたときに画像の幅や高さを変更します。

画像「mypic」のsrc属性を変更する関数と、幅と高さを変更する関数をつくりonMouseOverで呼び出しています。

<head>の記述

<script type="text/javascript">
<!--
function change_pic(sr){
	document.getElementById("mypic").src = sr;
}

function change_size(he,wi){
	document.getElementById("mypic").height = he;
	document.getElementById("mypic").width = wi;
}
-->
</script>

<body>の記述

<a href="#" onMouseOver="change_pic('images/pic1.jpg');">画像1</a>
<a href="#" onMouseOver="change_pic('images/pic2.jpg');">画像2</a>
<a href="#" onMouseOver="change_size(600,800);">大きく表示</a>
<a href="#" onMouseOver="change_size(300,400);">小さく表示</a><br>

<img src="images/pic1.jpg" alt="" id="mypic">

sampleファイルを開く

マウスの位置を取得する

画面をクリックしたときマウスの位置を表示します。

<head>の記述

<script type="text/javascript">
<!--
function eve(e){
	document.getElementById("posi_mouse").innerHTML="X:"+e.pageX+"<br>Y:"+e.pageY;
	return true;
}
-->
document.onmousedown = eve;
</script>

<body>の記述

<p id="posi_mouse"></p>

sampleファイルを開く

リンク元のURLを取得する

document.referrerでリンク元のURLを取得しスラッシュで区切って分割します。

<body>の記述

<p>リンク元を/(スラッシュ)で区切って表示します。</p>
<script type="text/javascript">
<!--
	linkmoto=document.referrer.split("/");
	document.write("スラッシュで区切った配列の数は" + linkmoto.length + "<br>");
	document.write("リンク元:<br>");
	var i=0;
	while(i < linkmoto.length) {
	document.write(linkmoto[i]+"<br>");
	i++;
	}
-->
</script>

sampleファイルを開く

jQuery UIを使う準備

jQuery UIを使えばこのサイトで使っているようなタブやアコーディオン機能を使ったサイトを簡単に作ることができます。

jQuery UIでは自分でテーマをカスタマイズすることもできますが、ここではもともとあるテーマを使ってみます。

まず最初にjQuery UIのサイトに行きthemesのgalleryから好きなテーマを選んで ダウンロードボタンをクリックします。ここではSunnyのテーマを選んだこととして進めていきます。

開いたページでダウンロードするコンポーネントを選ぶことができますが、とりあえず全てのチェックをつけてダウンロードボタンをクリックします。

ダウンロードしたファイルを解凍し、jsフォルダとcssフォルダをウェブサイトのルートフォルダにコピーします。

後はhtmlの<head>の中でjsファイルとcssファイルへのリンクを記述すれば準備は完了です。

具体的な記述は以下のようになります。

<link rel="stylesheet" type="text/css" href="css/sunny/jquery-ui-1.8.16.custom.css">
<script type='text/javascript' src="js/jquery-1.6.2.min.js"></script>
<script type='text/javascript' src="js/jquery-ui-1.8.16.custom.min.js"></script>

jQuery UIのタブを使う

jQuery UIのタブを使うにはまず<body>の中に次のように記述します。

<div id="mytab">
	<ul>
		<li><a href="#tab1">タブ1のタイトル</a></li>
		<li><a href="#tab2">タブ2のタイトル</a></li>
		<li><a href="#tab3">タブ3のタイトル</a></li>
	</ul>
	<div id="tab1">
		タブ1の内容
	</div>
	<div id="tab2">
		タブ2の内容
	</div>
	<div id="tab3">
		タブ3の内容
	</div>
</div>
	

全体を囲う<div>には自分の好きな名前をつけます。ここではmytabとしています。

<li>の中でタブの内容を入れる<div>へのページ内リンクを張っています。

次に<head>の中で以下のように記述します。

<script type="text/javascript">
	$(function() {
		$( "#mytab" ).tabs();
	});
</script>

ここでさっきつけた名前のmytabを指定しています。

sampleファイルを開く

jQuery UIのアコーディオンを使う

jQuery UIのアコーディオンを使うにはまず<body>の中に次のように記述します。

<div id="myacco">
	<h2><a href="#">タイトル1</a></h2>
	<div>
		<p>タイトル1の内容</p>
	</div>
	<h2><a href="#">タイトル2</a></h2>
	<div>
		<p>タイトル2の内容</p>
	</div>
	<h2><a href="#">タイトル3</a></h2>
	<div>
		<p>タイトル3の内容</p>
	</div>
</div>
	

ここでは全体を囲うタブにmyaccoという名前をつけています。好きな名前で構いません

次に<head>の中で以下のように記述します。

<script>
	$(function() {
		$( "#myacco" ).accordion();
	});
	</script>
</head>

ここでさっきつけた名前のmyaccoを指定しています。

これで基本的な形は完成です。

sampleファイルを開く

アコーディオンの設定を変える

デフォルトだとアコーディオンの各パネルの高さは一定です。これを内容に合わせて高さが変わるようにするには <head>の記述を以下のように変えます。

<script>
	$(function() {
		$( "#myacco" ).accordion({
			autoHeight: false
		});
	});
</script>

{autoHeight: false}を加えています。

解かりやすいようにパネルの内容を増やしてみます。

sampleファイルを開く

更に、デフォルトでは必ず1つのパネルが開いた状態ですが、この仕様を変えて全てのパネルを畳む事ができるようにしてみます。

カンマで区切りcollapsible: trueの一行を加えます。

<script>
	$(function() {
		$( "#myacco" ).accordion({
			autoHeight: false,
			collapsible: true
		});
	});
</script>

sampleファイルを開く

jQueryUIのエフェクトを使う

jQueryUIのエフェクトの中でも簡単に使えるエフェクトを使ってみます。

ここではボックスが下からだんだん消えるblindというエフェクトを使ってみます。

<body>の記述

<a href="#" onMouseOver="$('#redbox').effect('blind');">マウスカーソルを乗せてください。</a>
<div id="redbox" style="width:200px; height:200px;background:#F00;"></div>

sampleファイルを開く

blindを以下の文字に入れ替えることでいろいろなエフェクトを使うことができます。

bounce バウンする
clip 上下から消える
drop 左にフェードアウト
explode 拡散して消える
fade フェードアウト
fold 途中まで下から、その後左へ消える
highlight 一瞬光る
puff 広がって消える
pulsate 点滅する
shake 左右にゆれる
slide 左から現れる