//HTML header
<link rel="stylesheet" href="css/jquery-ui-1.8.16.custom.css" type="text/css"></script>
<script type="text/javascript" src="script/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="script/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="script/jquery.stickynotes.js"></script>
<link rel="stylesheet" href="css/jquery.stickynotes.css" type="text/css"></script>
//JavaScript
// wait for the DOM to be loaded
$(document).ready(function() {
$('#notes').stickyNotes();
});
//HTML body
<div id="notes" style="width:800px;height:600px;">
</div>
jQeryで簡易ふせんを実現しました。
Plug inには
jQuery Sticky Notes Pluginを使っています。
このままだと、状態を保持できません(画面更新で付箋はすべて消滅)。なかなか使い道に困りますが、
とりあえず実現可能ということです。
alert method
function button_onclick(){
window.alert('Test');
}
confirm method
confirmメソッドは、場合に応じて戻り値を返します。
- [OK]ボタンをクリック⇒true
- [キャンセル]、[×]ボタンをクリック⇒false
function button_onclick(){
var xx;
xx=window.confirm('何も起こりませんが、よろしいですね?');
}
open method
window.open('URL','ウィンドウ名','オプション')という形式で記述する。
オプションで指定できるのは以下の通り。
オプション |
概要 |
width |
ウィンドウの幅 |
height |
ウィンドウの高さ |
location |
アドレスバーの表示 (yes|no) |
scrollbars |
スクロールバーの表示 (yes|no) |
resizable |
ウィンドウサイズ変更の可否 (yes|no) |
toolbar |
ツールバーの表示 (yes|no) |
status |
ステータスバーの表示 (yes|no) |
menubar |
メニューバーの表示 (yes|no) |
function open_onclick(){
var xx;
xx =window.open('http://minipoooo.web.fc2.com/','test',
'width=300,height=100,scrollbars=no,location=yes');
}
openメソッドの戻り値は、新たに開いたウィンドウのwindowオブジェクトです。
戻り値を利用して、closeメソッドでウィンドウを閉じることができます。
function close_onclick(){
if(yy && !yy.closed){
yy.close();
}
}
prompt method
入力ダイアログに入力された文字列が戻り値となります。
function prompt_onclick(){
var xx;
xx =window.prompt('何か入力してください。','初期値');
}
setInterval / clearInterval
setIntervalメソッドは下記のように記述します。
- 変数=window.setInterval(code,time)
「time」部分にミリ秒単位の時間を指定することで、指定された時間間隔で
「code」部分に記述された処理が実行されます。変数にはタイマーを識別
するIDが返されます。そして、下記のようにしてタイマーをクリアできます。
/* setInterval使用例*/
var timer
window.onload=function(){
timer=window.setInterval(
function(){
var dat=new Date();
document.getElementById('setinterval_id').innerHTML=dat.toLocaleTimeString();
},
1000
);
};
:
<a onclick="clearInterval(timer)">STOP</a>
<div id="setinterval_id"></div>
setTimeout / clearTimeout
setTimeoutメソッドの記述はsetIntervalと同じ記述の仕方をします。
- 変数=window.setTimeout(code,time)
setTimeoutの場合は指定時間後に一度だけ処理を実行します。
タイマーのクリアはclearTimeoutで行います。
Cookieとは
JavaScriptでは、クライアントにデータを書き込むことは基本的にできません。
唯一の例外はCookie(クッキー)です。
これはクライアント側に保存される小さなテキストで、
ちょっとした情報を記憶させておくことができます。
Cookieの読み書きはdocument.cookieプロパティで行います。
Cookieを設定する。-setCookie関数-
Cookieの設定はdocument.cookieプロパティに文字列を設定することによって行います。
その書式は以下のようになります。
Cookie名=値; expires=有効期限; domain=ドメイン; path=パス; secure
それぞれのパラメータの意味は次の通りです。
Parameter |
概要 |
Cookie名 |
Cookie名とその値。英数字以外の文字列を含む場合、encodeURIComponent関数でエンコードする必要がある。 |
expires |
クッキーの有効期限(グリニッジ標準時)。有効期限を過ぎたクッキーは削除される(有効期限を過去に設定しても削除される)。
省略の場合はブラウザを閉じた時点で削除。 |
domain |
指定のドメインページのみクッキーを利用可能にする。(省略すると現在のドメイン) |
path |
指定のパス配下のページでのみクッキーを利用可能にする。(省略時は現在のパス) |
secure |
SSL通信でのみクッキーを送信する |
例えばCookie名がCookieMonster、クッキー値が22、有効期限を20日後に設定する場合、
function setCookie(name,value,expires){
var ex = new Date();
ex.setDate(ex.getDate() + expires);
ex = ex.toGMTString();
document.cookie = name + "=" + value + ";expires=" + ex;
}
var number=22;
setCookie('CookieMonster',number,20);
Cookieの保存場所(Firefox)
Firefoxは、ブックマーク、パスワード、ユーザ設定などの情報をプロファイル
と呼ばれる特別なフォルダに保存しています。
プロファイルはFirefoxのプログラムフォルダとは別の場所に保存されています。
そのため、Firefoxをアンインストールしても設定が失われませんし、
設定情報を消去するためにFirefoxを再インストールする必要もありません。
Cookieもこのプロファイルに保存されます。プロファイルの格納場所は、
- &APPDATA&\Mozilla\Firefox\Profiles
「default」を含む名前のファイルがあり、これがプロファイルです。
その中でCookieを保持しているのは「cookies.sqlite」です。
Cookieの削除
Cookieの保存場所(IE)
- C:\Users\yamao\AppData\Local\Microsoft\Windows\Temporary Internet Files
「保護されたオペレーティングシステムファイルを表示しない」のチェックを外す。