かんたん作成【HTML CSS JavaScript PHP CGI Perl Ruby Python .htaccess】
┣ JavaScript
このエントリーをはてなブックマークに追加
フォーム入力内容をクッキーに保存（document.cookie, escape, unescape）
<html>
<head>
<title>フォーム入力内容をクッキーに保存</title>
    <script language="JavaScript">
    <!--
    cookiename    = "form";                //　クッキー名
    life        = 30;                    //　クッキーの保存日数
    element        = new Array("name", "mail");        //　保存するエレメント名
    function getcookie() {                    //　クッキー読み込み
        cookie    = "";
        cookie1    = document.cookie.split("; ");        //　"; "で分割
        for(i = 0 ; i < cookie1.length ; i++) {
            cookie2 = cookie1[i].split("=");    //　"="で分割
            if(cookie2[0] == cookiename) {
                cookie = cookie2[1];
            }
        }
        if(cookie != "") {
            cookie3 = cookie.split("&");        //　"&"で分割
            for(i = 0 ; i < element.length ; i++) {
                for(j = 0 ; j < document.form.length ; j++) {
                    if(document.form.elements[j].name == element[i]) {
                        document.form.elements[j].value = unescape(cookie3[i]);
                        break;
                    }
                }
            }
        }
    }
    function setcookie() {                    //　クッキー保存
        today    = new Date();                //　今日の日時
        expires    = new Date();                //　クッキーの有効期限
        expires.setTime(today.getTime() + (life * 1000 * 60 * 60 * 24));
        mon    = new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
        week    = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat");
        cookie    = cookiename + "=";            //　クッキーデータ作成
        for(i = 0 ; i < element.length ; i++) {
            for(j = 0 ; j < document.form.length ; j++) {
                if(document.form.elements[j].name == element[i]) {
                    cookie += escape(document.form.elements[j].value) + "&";
                    break;
                }
            }
        }
        cookie    += ";";
        cookie    += "expires=";
        cookie    += week[expires.getDay()]    +",";
        cookie    += expires.getDate()        +"-";
        cookie    += mon[expires.getMonth()]    +"-";
        cookie    += expires.getFullYear()    +" ";
        cookie    += expires.getHours()        +":";
        cookie    += expires.getMinutes()        +":";
        cookie    += expires.getSeconds()        +";";
        document.cookie    = cookie;            //　クッキー書き込み
    }
    //-->
    </script>
</head>
<body onLoad="getcookie()">
    <form name="form" action="../../sample/sample.cgi" method="POST" onSubmit="setcookie()">
    名前：<br><input type="text" name="name" size="100" value=""><br><br>
    メール：<br><input type="text" name="mail" size="100" value=""><br><br>
    本文：<br><textarea name="text" cols="70" rows="10"></textarea><br><br>
    <input type="submit" value="　送　信　">
    <input type="reset" value="　リセット　"><br>
    <small>※名前･メールは一度送信すると次回から自動的に入力されます。</small>
    </form>
</body>
</html>
〔 実行する 〕
JavaScript
●Hello world ! ●ユーザーエージェントを表示（navigator.userAgent）
●ブラウザ情報をすべて表示（navigator） ●画面の解像度を表示（screen.width, screen.height）
●画面の色数を表示（screen.colorDepth） ●リンク元ＵＲＬを表示（document.referrer）
●ドキュメント情報をすべて表示（document） ●ウインドウ情報をすべて表示（window）
●ロケーション情報をすべて表示（location） ●警告ダイアログにメッセージ（alert）
●ステータスバーにメッセージ（status） ●新しいウインドウにメッセージ（window.open）
●マウスクリック時にメッセージ（onClick） ●マウスダウン時にメッセージ（onMousedown）
●マウスアップ時にメッセージ（onMouseup） ●マウスオーバー時にメッセージ（onMouseover）
●マウスアウト時にメッセージ（onMouseout） ●フォーカス移動時にメッセージ（onFocus）
●フォーカスが離れた時にメッセージ（onBlur） ●選択項目変更時にメッセージ（onChange）
●入力欄の文字列選択時にメッセージ（onSelect） ●フォーム送信時にメッセージ（onSubmit）
●フォームリセット時にメッセージ（onReset） ●貼り付け禁止のフォーム（コピペ禁止　onPaste）
●画像読み込み失敗時にメッセージ（onError） ●右クリック時にメッセージ（oncontextmenu）
●右クリック時にメッセージ（event.button） ●別ウインドウに指定のページを開く（window.open）
●ウインドウを開く（サイズ・位置・各バーの表示設定　width,height, top,left） ●ウインドウを指定位置に移動（moveTo）
●ウインドウを上下左右に移動（moveBy） ●前に表示したページに戻る（history.back, history.go, history.forward）
●リダイレクト（window.location） ●一定時間後に指定のページに移動（setTimeout）
●一定時間ごとに再読み込み（setInterval, location.reload） ●アドレス統一（location.href, match, replace）
●アドレス統一（複数アドレス統一） ●フレーム内のページへの直接アクセス時にフレームページへ転送（top.frames.length）
●フレームページ内に読み込まれた場合にフレームを解除（top.location） ●一定時間ごとに背景色を変える（setInterval, document.bgColor）
●一定時間ごとに背景色を変える（setInterval, document.bgColor, charAt） ●見るたびに背景色を変える（Math.random,document.bgColor）
●背景色を選択（onChange, document.bgColor） ●一定時間ごとに背景画像を変える（document.body.background）
●見るたびに背景画像を変える（Math.random, document.body.background） ●クリックで文字サイズを変更（style.fontSize）
●文字スタイル変更（color, fontWeight, fontStyle, textDecoration, fontFamily） ●マウスを追いかける文字（pixelLeft, pixelTop, event.x, event.y）
●クリックで拡大・縮小できる画像（pixelWidth, pixelHeight） ●画像の重ね合わせ順序変更（zIndex）
●フェードイン画像（filters,opacity, finishOpacity） ●指定範囲内を動き続ける画像（setInterval, pixelLeft, pixelTop）
●ランダムに動く画像（Math.random, pixelLeft, pixelTop） ●キーボードの矢印キーで移動できる画像（event.keyCode）
●マウスを追いかける画像（onMousemove） ●マウスを回りながら追いかける画像（Math.cos, Math.sin）
●カーソルを自動的にフォーム入力欄に移動（focus） ●クリックするとテキストエリア内をすべて選択（select）
●入力時にテキストエリア内の初期文字列を削除（defaultValue） ●テキストエリア内をクリップボードにコピー（execCommand, Copy）
●テキストエリア内にクリップボードデータを貼り付け（execCommand, paste） ●フォーム送信時に空欄を確認（警告ダイアログ　alert）
●フォーム送信時に空欄を確認（確認ダイアログ　confirm） ●フォーム送信時に空欄を確認（文字入力ダイアログ　prompt）
●フォームリセット時に確認メッセージ（onReset, confirm） ●フォーム送信時に空欄を確認・空欄の色を変更（elements, borderColor, background）
●日付を表示（new Date, getFullYear, getMonth, getDate, getDay） ●時刻によってメッセージを変える（getHours）
●ステータスバーに時刻を表示（getHours, getMinutes, getSeconds） ●ステータスバーに時刻を表示（スクロール　substring）
●時刻を画像表示（new Image） ●年月日から曜日を調べる（setFullYear, setMonth, setDate）
●指定した日までの日数を表示（Date.parse） ●ページ滞在時間を計算（onLoad, onUnload, getTime）
●カレンダー ●カレンダー（前月・次月へのリンク付）
●JavaScriptの有効･無効を表示（noscript） ●クッキーの有効･無効を調べる（navigator.cookieEnabled）
●訪問回数（クッキー　document.cookie） ●フォーム入力内容をクッキーに保存（document.cookie, escape, unescape）
●お気に入りに追加（window.external.AddFavorite） ●小数点以下四捨五入・切り捨て・切り上げ（Math.round, Math.floor, Math.ceil）
●文字列エンコード・デコード（escape, unescape） ●10進数に変換（parseInt）
●2進数・8進数・16進数に変換（toString） ●文字列置き換え（replace）
●フェードイン（setInterval, document.bgColor） ●イメージマップの指定箇所で説明を表示（onMouseover）
●マウスオーバー時にメニューリストを表示（onMouseover, onMouseout, style.display） ●ステータスバーに電光掲示板風メッセージ（status, setInterval, length, substring）
●電光掲示板風メーセージ表示（setInterval, length, substring） ●おみくじ（Math.random）
●九九の勉強 ●ストップウォッチ
●電卓 ●スロット
かんたん作成【HTML CSS JavaScript PHP CGI Perl Ruby Python .htaccess】