このサイトではブラウザ上で動くJavascriptの基本的な使い方と
簡単なサンプルなどを紹介しています。
動作確認はFireFox6とGoogle Chrome 13辺りでやりました。IEでは動かないものも多いと思います。
<head>の中で次のように記述します。
<meta http-equiv="Content-Script-Type" content="text/javascript">
JavaScriptを使いたい場所で次のように記述して、その中にscriptを書いていきます。
<script type="text/javascript"> <!-- //ここにJavascriptを書きます。 --> </script>
その他に下の例ようにタグの中で呼び出すこともできます。
<a href="#" onMouseOver="myfunction();">画像１</a>
この例ではリンクにマウスカーソルが乗ったときに関数myfunction()を呼び出しています。
ブラウザにHello World!の文字を書き出してみます。 <body>の中に次のように記述します。
<script type="text/javascript">
<!--
//ここにJavascriptを書きます。
document.wright("Hello World!");
-->
</script>
開いたページを閉じるための「閉じる」ボタンをフォームを使って設置します。
<body>の中に次のように記述します。
<form> <input type="button" value="close" onClick="window.close()"> </form>
ここでは<head>の中で２つの数字を足す関数を作り<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>
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>
ここでも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>
リンクにマウスカーソルを乗せたときに画像の幅や高さを変更します。
画像「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');">画像１</a>
<a href="#" onMouseOver="change_pic('images/pic2.jpg');">画像２</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">
画面をクリックしたときマウスの位置を表示します。
<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>
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>
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のタブを使うにはまず<body>の中に次のように記述します。
<div id="mytab"> <ul> <li><a href="#tab1">タブ１のタイトル</a></li> <li><a href="#tab2">タブ２のタイトル</a></li> <li><a href="#tab3">タブ３のタイトル</a></li> </ul> <div id="tab1"> タブ１の内容 </div> <div id="tab2"> タブ２の内容 </div> <div id="tab3"> タブ３の内容 </div> </div>
全体を囲う<div>には自分の好きな名前をつけます。ここではmytabとしています。
<li>の中でタブの内容を入れる<div>へのページ内リンクを張っています。
次に<head>の中で以下のように記述します。
<script type="text/javascript">
$(function() {
$( "#mytab" ).tabs();
});
</script>
ここでさっきつけた名前のmytabを指定しています。
jQuery UIのアコーディオンを使うにはまず<body>の中に次のように記述します。
<div id="myacco"> <h2><a href="#">タイトル１</a></h2> <div> <p>タイトル１の内容</p> </div> <h2><a href="#">タイトル２</a></h2> <div> <p>タイトル２の内容</p> </div> <h2><a href="#">タイトル３</a></h2> <div> <p>タイトル３の内容</p> </div> </div>
ここでは全体を囲うタブにmyaccoという名前をつけています。好きな名前で構いません
次に<head>の中で以下のように記述します。
<script>
$(function() {
$( "#myacco" ).accordion();
});
</script>
</head>
ここでさっきつけた名前のmyaccoを指定しています。
これで基本的な形は完成です。
デフォルトだとアコーディオンの各パネルの高さは一定です。これを内容に合わせて高さが変わるようにするには <head>の記述を以下のように変えます。
<script>
$(function() {
$( "#myacco" ).accordion({
autoHeight: false
});
});
</script>
{autoHeight: false}を加えています。
解かりやすいようにパネルの内容を増やしてみます。
更に、デフォルトでは必ず1つのパネルが開いた状態ですが、この仕様を変えて全てのパネルを畳む事ができるようにしてみます。
カンマで区切りcollapsible: trueの一行を加えます。
<script>
$(function() {
$( "#myacco" ).accordion({
autoHeight: false,
collapsible: true
});
});
</script>
jQueryUIのエフェクトの中でも簡単に使えるエフェクトを使ってみます。
ここではボックスが下からだんだん消えるblindというエフェクトを使ってみます。
<body>の記述
<a href="#" onMouseOver="$('#redbox').effect('blind');">マウスカーソルを乗せてください。</a>
<div id="redbox" style="width:200px; height:200px;background:#F00;"></div>
blindを以下の文字に入れ替えることでいろいろなエフェクトを使うことができます。
bounce バウンする