JavaScript - アドボン・ネット -adbon.net-

PR

2010/06/19

47都道府県「日本地図」のパズル

Ajaxで日本地図のパズルを作りました。

ドラッグ＆ドロップで県パネルを当てはめていくゲームです。

Ajaxを利用しているので、iPhoneやiPadでも利用できます。

県の位置を学習するだけでなく、県にまつわる雑学も学習できます。

参考になりました？

Filed under: Ajax,JavaScript,便利なツール — admin 21:50 Comments (0)

2010/06/10

JavaScript canvasタグのサンプル

canvasタグのサンプルサイト

http://serennz.sakura.ne.jp/sb/log/eid108.html

canvasタグのチュートリアル

https://developer.mozilla.org/ja/Canvas_tutorial

参考になりました？

Filed under: JavaScript,技術ノウハウサイト — admin 19:41 Comments (0)

2010/06/09

JavaScriptドラッグ＆ドロップ＆吸着

JavaScriptで、ドラッグ＆ドロップして、ドロップ先に触れたら吸着するスクリプトを作りました。

全部ドラッグ完了したら、「ドラッグ完了」というメッセージが表示されます。

カスタマイズ次第では、いろいろ使えます。利用したい方は下記よりダウンロードしてください。

また、これを応用して作ったのが「日本地図のパズル」です。

参考になりました？

Filed under: Ajax,JavaScript — admin 00:16 Comments (0)

2010/06/08

JavaScriptをページ読み込みと同時に実行させる方法

JavaScriptをページ読み込みと同時に実行させる方法には２種類あります。

１つはページ全体を読み込んだあとにJavaScriptを実行させる方法と、もう一つはDOM読み込み後に実行させる方法です。DOM読み込み後に実行させる方が早く処理をしてくれます。

以下<head>タグ内に記述する方法です。

DOM読み込み直後に実行する場合は、jquery-1.2.1.min.js が必要です。下記サンプルをダウンロードするボタンからダウンロードしてください。

<!-- DOM読込み直後に実行したいJavaScript -->
<script type="text/javascript">
$(document).ready(function(){
  ここにスクリプトを書く
  ※DOM読み込み直後（ページが読み込み完了前）に実行されるので早い
});
</script>
 
<!-- ページ読込み直後に実行したいJavaScript -->
<script type="text/javascript">
window.onload = function(){
  ここにスクリプトを書く
  ※ページ（画像含む）全てロード後に実行されるので遅い
};
</script>
</head>

サンプルをダウンロード

参考になりました？

Filed under: JavaScript — admin 09:55 Comments (0)

2010/06/03

ドラッグ＆ドロップで配置が変更できるフォトギャラリー

ドラッグ＆ドロップで配置を変更できるフォトギャラリーです。フォトギャラリーだけでなく、写真を掲載するようなサイトの制作にご利用ください。

以下が仕様です。

■仕様
（１）photo.csvに記述されてあるデータを基に、画像とタイトルを一覧表示する。
（２）ドラッグ＆ドロップで配置変更できる
（３）「配置を保存」ボタンクリックで、変更した配置を photo.csv に保存できる。

■注意事項
このスクリプトは個人、商用とも利用可能です。ただし、ページ下部にある「PRリンク」は削除しないようお願いします。商用利用などでどうしても見せたくない場合などは<noscript>タグで括るなどして非表示にしてください。

参考になりました？

Filed under: Ajax,JavaScript,PHP — admin 11:07 Comments (0)

2010/06/02

サブミット前にダイアログで確認メッセージを出す

submit（サブミット）前にJavaScriptで確認ダイアログを表示する方法

■ソース

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>サンプル</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
 
<script type="text/javascript">
<!--
function check_dialog(msg){
  ret = confirm(msg);
  return ret;
}
//-->
</script>
</head>
<body>
 
<p>送信前にダイアログで確認</p>
<form method="post" action="" onsubmit="return check_dialog('送信しますか？')">
<input type="submit" value="送信" />
<input type="hidden" name="data2" value="送信しました" />　<?=$_POST["data2"]?>
</form>
 
</body>
</html>

■動作サンプル＆ソースダウンロード

参考になりました？

Filed under: JavaScript,忘れっぽいのでメモる — admin 15:02 Comments (0)

aタグやbuttonでサブミットする

JavaScriptを使って、<a>タグや<input type=”button”>でサブミットする方法

■ソース

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>サンプル</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
 
<script type="text/javascript">
<!--
function DisableButtonSubmit(b){
    b.disabled = true;
    b.form.submit();
}
function setSubmit(f){
    document[f].submit();
}
//-->
</script>
</head>
<body>
 
 
 
 
<p>buttonによる送信（二度押ししないよう非活性）</p>
<form name="form1" method="post" action="">
<input type="button" value="送信" onclick="DisableButtonSubmit(this)"/>
<input type="hidden" name="data1" value="送信しました" />　<?=$_POST["data1"]?>
</form>
 
<hr />
 
<p>Ａタグによる送信</p>
<form name="form2" method="post" action="">
<a href="javascript:;" onclick="setSubmit('form2')">送信</a>
<input type="hidden" name="data2" value="送信しました" />　<?=$_POST["data2"]?>
</form>
 
</body>
</html>

■動作サンプル＆ソースダウンロード

参考になりました？

Filed under: JavaScript,忘れっぽいのでメモる — admin 13:07 Comments (0)

JavaScriptでフォーム内のアイテムに値をセット

JavaScriptでフォーム内のアイテムに値をセットする方法

hidden値に値をセットして、処理を分岐させたり、いろいろ利用できます。

■ソース

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>サンプル</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
 
<script type="text/javascript">
<!--
function setform(fm, name, val){
    document.forms[fm][name].value = val;
} 
//-->
</script>
</head>
 
<body>
 
<form method="post" name="form1">
名前：<input type="text" name="name" value="" /><input type="button" value="セット" onclick="setform('form1','name','山田')" />
</form>
 
<form method="post" name="form2">
年齢：<input type="text" name="age" value="" /><input type="button" value="セット" onclick="setform('form2','age','30才')" />
</form>
</body>
</html>

■動作サンプル＆ソースダウンロード

参考になりました？

Filed under: JavaScript,忘れっぽいのでメモる — admin 11:58 Comments (0)

JavaScriptでフルスクリーン表示

JavaScriptでフルスクリーン表示します。

普通にフルスクリーンにすると、IEとかは「閉じる」ボタンが見えなくなるまで大きくなってしまうので、
ここでは画面サイズ（幅、高さ）を算出してそのサイズに表示するようにしました。

■ソース

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>サンプル</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
 
<script type="text/javascript">
<!--
function openFullScreen(url, wname){
 
    newwindow = window.open(url, wname, "resizable, scrollbars,width=" + window.screen.width + ", height=" + window.screen.height);
    newwindow.moveTo(0,0);
    newwindow.focus();
}
//-->
</script>
</head>
 
<body>
 
<p><a href="javascript:;" onclick="openFullScreen('http://www.google.co.jp', 'win')">フルスクリーン</a></p>
 
</body>
</html>

■動作サンプル＆ソースダウンロード

参考になりました？

Filed under: JavaScript,忘れっぽいのでメモる — admin 11:04 Comments (0)

2010/05/29

JavaScriptの書式

<head>～</head>の間に書く書式

外部JavaScriptファイルの読み込み

<script type="text/javascript" src="abc.js"></script>

HTML内に書くとき

<script type="text/javascript">
<!--
function abc(){
  ここに内容
}
// -->
</script>

参考になりました？

Filed under: JavaScript,忘れっぽいのでメモる — admin 23:42 Comments (0)