実行サンプル表示があります。書き方を忘れた場合はサンプルソースを参考にしてください。
■入力フォーム： ラジオボタン｜チェックボックス｜セレクトボックス
■画面表示： テキストエリア｜日付･時間・曜日の表示｜システム情報表示｜ 文字サイズ・太さ・色、背景色の変更
■画面制御： ページ戻し、進め｜カラーダイアログ｜ウィンドウズダイアログ ｜ウインドウ間のデータ受け渡し
■ＨＴＭＬ/ＣＳＳの操作： 表示スタイルの変更｜ＨＴＭＬの追加変更
■その他 ： 時間カウント｜クリップボード｜入力チェック（正規表現）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>セレクトボックス</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
function go() {
MyForm.p1.value=document.MyForm.ft.value;
MyForm.p2.value=document.MyForm.wt.value;
}
function s1(x1) {
MyForm.p3.value=x1+"-"+document.MyForm.d1.value;
}
function s2(x2) {
MyForm.p4.value=x2+"-"+document.MyForm.d2.value;
}
// -->
</SCRIPT>
<link rel="stylesheet" type="text/css" href="tom.css">
</HEAD>
<body>
<p align="center">セレクトボックス</p>
<hr>
<FORM NAME="MyForm">
<p align="center">
<select NAME="d1" onChange="s1(this.selectedIndex)">
<option value="赤" >あか
<option value="青" >あお
<option value="黄" >きい
<option value="白" selected>しろ
<option value="黒" >くろ
<option value="紫" >むらさき
<option value="茶" >ちゃ
</select>－<input type="text" name="p3" size="5" >
<p align="center">
<select NAME="d2" size=3 onChange="s2(this.selectedIndex)">
<option value="赤" >あか
<option value="青" >あお
<option value="黄" selected>きい
<option value="白" >しろ
<option value="黒" >くろ
<option value="紫" >むらさき
<option value="茶" >ちゃ
</select>－<input type="text" name="p4" size="5" ></p>
</form>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>テキストエリア</title>
<script language="javascript">
<!--
function ini() {document.myform.inp.value ="文字の追加";}
function ad() {document.myform.out.value+=document.myform.inp.value+"\n";}
function cr() {document.myform.out.value="";}
// -->
</script>
</head>
<body onload="ini()">
<p align="center">テキストエリア</p>
<hr>
<form name="myform">
<p align="center">
<input type="text" name="inp" size="38" >
<p align="center">
<input type="button" value="追加" onclick="ad()">
<input type="button" value="クリア" onclick="cr()">
</p>
<p align="center">
<textarea name="out" rows="8" cols="28">ここに文字を追加 </textarea>
</p>
</form>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>時間の表示</title>
<SCRIPT language=JavaScript>
<!--
week= new Array("日","月","火","水","木","金","土");
function today() {
setTimeout("today()",1000);
day=new Date();
cy=day.getYear(); //年
cn=day.getMonth()+1; //月
cd=day.getDate(); //日
cw=day.getDay(); //週
ch=day.getHours(); //時間
cm=day.getMinutes(); //分
cs=day.getSeconds(); //秒
document.myform.dctime.value=" "+cy+"年"+cn+"月"+cd+"日（"+week[cw]+"）"+ch+"："+cm+"："+cs ;
document.myform.d2.value=day.toLocaleString(); //ローカル編集
document.myform.d3.value=day.toGMTString(); //世界標準時間
}
// -->
</SCRIPT>
</head>
<BODY onload="today()">
<p align="center">時間の表示</p>
<hr>
<FORM Name="myform">
<p align="center">編集して表示：
<INPUT NAME="dctime" value="" size=40><p align="center">ローカル編集：
<INPUT NAME="d2" value="" size=40><p align="center">世界標準時刻：
<INPUT NAME="d3" value="" size=40><p align="center">
</form>
</BODY>
</HTML>
<html>
<head>
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>システム情報</title>
</head>
<body>
<p align="center">システム情報</p>
<hr>
<script language="javascript">
<!--
document.write("<p>ブラウザ名："+navigator.appName.toUpperCase()+"</p>");
document.write("<p>ユーザエジェント："+navigator.userAgent.toUpperCase()+"</p>");
document.write("<p>リンク元URL："+document.referrer + "</p>");
document.write("<p>ブラウザ横のサイズ："+document.body.clientWidth
+ "</p>");
document.write("<p>ブラウザ縦のサイズ："+document.body.clientHeight
+ "</p>");
document.write("<p>モニタ横のサイズ："+screen.width + "表示可能領域（"+screen.availWidth
+ "）");
document.write("<p>モニタ縦のサイズ："+screen.height + "表示可能領域（"+screen.availHeight
+ "）");
// -->
</script>
<p align="center">
<p>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>文字・色の変更</title>
<script language="javascript">
<!--
function cs(n) {document.body.style.fontSize=n;}
function ct(n) {
if (n==0) {document.body.style.fontWeight="normal";
} else if (n==1) {document.body.style.fontWeight="bold";}
}
function cl(n) {document.body.style.color=n;}
function bc(n) {document.body.style.backgroundColor=n;}
// -->
</script>
</head>
<body>
<p align="center">文字サイズ・太さ・色、背景色の変更
</p>
<hr>
<p align="center">文字サイズ【
<a href="#" onclick="cs('18');" style="font-size:18pt;">18</a>|
<a href="#" onclick="cs('14');" style="font-size:14pt;">14</a>|
<a href="#" onclick="cs('12');" style="font-size:12pt;">12</a>|
<a href="#" onclick="cs('10');" style="font-size:10pt;">10</a><a
style="font-size: 10pt">】</a>太さ【
<a href="#" onclick="ct('1');" style="font-weight:bold;">太字</a>|
<a href="#" onclick="ct('0');" style="font-weight:normal;">標準</a>】
</p>
<p align="center">色【
<a href="#" onclick="cl('#000000');" style="Color='#000000'">■</a>
<a href="#" onclick="cl('#ff0000');" style="Color='#ff0000'">■</a>
<a href="#" onclick="cl('#0000ff');" style="Color='#0000ff'">■</a>
<a href="#" onclick="cl('#ffff00');" style="Color='#ffff00'">■</a>】背景色【
<a href="#" onclick="bc('#ffffff');" style="Color='#ffffff'">■</a>
<a href="#" onclick="bc('#e0e0e0');" style="Color='#e0e0e0'">■</a>
<a href="#" onclick="bc('#ffe0e0');" style="Color='#ffe0e0'">■</a>
<a href="#" onclick="bc('#e0e0ff');" style="Color='#e0e0ff'">■</a>
<a href="#" onclick="bc('#ffffe0');" style="Color='#ffffe0'">■</a>】
</p>
<p> </p>
<p align="center"> </p>
</BODY>
</HTML>
<html>
<head>
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>システム情報</title>
</head>
<body>
<p align="center">ページに戻る・進む</p>
<hr>
<p align="center">Ｐａｇｅ１</p>
<p align="center">リンク先： <a href="page.html">Ｐａｇｅ１</a> <a
href="page2.html">Ｐａｇｅ２</a> <a href="page3.html">Ｐａｇｅ３</a></p>
<p align="center"> </p>
<p align="center"><a href="#"onClick="history.back();
return false;">前のページにもどる</a></p>
<p align="center"><a href="#"onClick="history.forward();
return false;">次のページにすすむ</a></p>
<p align="center"><a href="#"onClick="history.go(-2);
return false;">2つ前のページにもどる</a></p>
<p align="center"><a href="javascript:history.back()">もどる</a></p>
<p align="center"><a href="javascript:history.forward()">すすむ</a></p>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>カラーダイアログ</title>
<script language="JavaScript">
<!--
function ChooseCol(h){
switch(h){
case "bc":
ChooseCol_Dig();
if (col==0) {return;}
document.body.style.backgroundColor=col; //カラー設定
frmFORM.bc.value=col; //カラーの16進数表示
break;
case "cc":
ChooseCol_Dig();
if (col==0) {return;}
document.body.style.color=col;
frmFORM.cc.value=col;
break;
}
}
function ChooseCol_Dig(){
col=Dialog.ChooseColorDlg(); //戻り値は10進数のカラーコード
if (col==false) return; //キャンセルが選択された場合
col="000000"+col.toString(16); //16進数カラーコードに変換
col=col.substring(col.length-6,col.length); //16進数カラーコード右端6桁のみを取得
col="#"+col ;
}
//-->
</script>
</head>
<object id="Dialog" classid="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b"
width="0" height="0">
</object>
<body>
<p align="center">カラーダイアログ</p>
<hr>
<form name="frmFORM">
<p align="center">
<input type="button" value="背景色選択" onclick="ChooseCol('bc')">
<input type="text" name="bc" size="8"
><p align="center">
<input type="button" value="文字色選択" onclick="ChooseCol('cc')">
<input type="text" name="cc" size="8"
>
</p>
<p align="center"><b>文字の色</b>
</p>
</form>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>Windowダイアログ</title>
</head>
<script type="text/javascript">
<!--
function disp() {
if(window.confirm('実行しますか？')) {
user = window.prompt("ユーザー名を入力してください","田中");
window.alert('ユーザ名は'+user);// 警告ダイアログを表示
}
else{window.alert('キャンセルされました');// 警告ダイアログを表示}
}
// -->
</script>
<body>
<p align="center"> </p>
<p align="center"> </p>
<p align="center">
<input type="button" value="確認ダイアログ" onClick="disp()"></p>
<p align="center">
<font color="#008000">データ入力ダイアログが動作しない場合は、インターネットエクスプローラのインターネットオプションのセキュリティ設定でレベルのカスタマイズを選択してスクリプトのスクリプト化されたウインドウを使って情報の入力を求めることを、Ｗｅｂサイトに許可するを「有効にする」</font></p>
</body>
</html>
＜親ウインドウ＞
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 14.0.3.0 for Windows">
<title>ウインドウ間のデータ受け渡し（親ウインドウ）</title>
<script language="JavaScript">
function opn(){ window.open("win-sub.html","tom","width=350,height=200");}
</script>
</head>
<body>
<p>ウインドウ間のデータ受け渡し（親ウインドウ）</p>
<p><input id="min-put" value="子に渡す"> 子に渡す</p>
<p><input id="min-get" > 子からもらう <input type="button" value="開く" onclick="opn()"><br>
</p>
</body>
</html>
＜子ウインドウ＞
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 14.0.3.0 for Windows">
<title>ウインドウ間のデータ受け渡し（子ウインドウ）</title>
<script language="JavaScript">
window.focus()
function getdata(){
w = window.opener.document.getElementById("min-put").value ;
document.getElementById("sub-get").value = w ;
}
function putdata(){
w = document.getElementById("sub-put").value ;
window.opener.document.getElementById("min-get").value = w ;
window.close() ;
}
</script>
</head>
<body onload="getdata()">
<p>ウインドウ間のデータ受け渡し（子ウインドウ）</p>
<p><input type="text" value="" id="sub-get"> 親からもらう</p>
<p><input type="text" value="親に渡す" id="sub-put"> 親に渡す <input type="button" value="渡す" onclick="putdata()"></p>
</body>
</html>
<!DOCTYPE HTML>
<html lang="ja">
<head>
<title>表示スタイルの変更</title>
<script language="JavaScript">
<!--
function c(f) {
switch (f) {
case 11:m.style.fontStyle = "normal"; break;
case 12:m.style.fontStyle = "italic"; break;
case 21:m.style.fontWeight = "normal"; break;
case 22:m.style.fontWeight = "bold"; break;
case 31:m.style.fontSize = "20pt"; break;
case 32:m.style.fontSize = "14pt"; break;
case 33:m.style.fontSize = "10pt"; break;
case 41:m.style.fontFamily = "ＭＳ Ｐゴシック";break;
case 42:m.style.fontFamily = "ＭＳ Ｐ明朝"; break;
case 51:m.style.color = "#000000"; break;
case 52:m.style.color = "#ff0000"; break;
case 61:m.style.backgroundColor = "#ffffff"; break;
case 62:m.style.backgroundColor = "#ffff00"; break;
case 71:m.style.margin = "10px"; break;
case 72:m.style.margin = "50px"; break;
case 73:m.style.margin = "30px"; break;
case 81:m.style.borderWidth = "1px"; break;
case 82:m.style.borderWidth = "3px"; break;
case 83:m.style.borderWidth = "5px"; break;
case 91:m.style.borderStyle = "none"; break;
case 92:m.style.borderStyle = "solid"; break;
case 93:m.style.borderStyle = "dotted"; break;
case 101:m.style.borderColor = "#000000"; break;
case 102:m.style.borderColor = "#ff0000"; break;
case 103:m.style.borderColor = "#0000ff"; break;
case 111:m.style.padding = "10px"; break;
case 112:m.style.padding = "50px"; break;
default:alert("OTHER"); break;
}
}
//-->
</script>
</head>
<body>
<hr>
<div id="m">それぞれの文字キーワードをクリックするとそれぞれの表示スタイルが変わります。
<p>１．文字スタイル（<a href="#" onclick="c(11)">通常</a>、<a href="#" onclick="c(12)">イタリック</a>）</p>
<p>２．文字の太さ（<a href="#" onclick="c(21)">標準</a>、<a href="#" onclick="c(22)">太字</a>）</p>
<p>３．文字サイズ（<a href="#" onclick="c(31)">大</a>、<a href="#" onclick="c(32)">中</a>、<a href="#" onclick="c(33)">小</a>）</p>
<p>４．フォント名（<a href="#" onclick="c(41)">ＭＳ Ｐゴシック</a>、<a href="#" onclick="c(42)">ＭＳ Ｐ明朝</a>）</p>
<p>５．前景色（<a href="#" onclick="c(51)">（黒</a>、<a href="#" onclick="c(52)">赤 </a>）</p>
<p>６．背景色（<a href="#" onclick="c(61)">白</a>、<a href="#" onclick="c(62)">黄</a>） </p>
<p>７．マージン（<a href="#" onclick="c(71)">１０ｐｘ</a>、<a href="#" onclick="c(72)">５０ｐｘ</a>）</p>
<p>８．ボーダ幅（<a href="#" onclick="c(81)">３ｐｘ、</a><a href="#" onclick="c(82)">５ｐｘ） </a></p>
<p>９．ボーダスタイル（<a href="#" onclick="c(91)">無</a>、<a href="#" onclick="c(92)">実践</a>、<a href="#" onclick="c(93)">点線</a>）</p>
<p>１０．ボーダカラー（<a href="#" onclick="c(101)">黒</a>、<a href="#" onclick="c(102)">赤</a>、<a href="#" onclick="c(103)">青</a>）</p>
<p>１１． パディング（<a href="#" onclick="c(111)">１０ｐｘ</a>、<a href="#" onclick="c(112)">５０ｐｘ</a>）</p>
</div>
<hr>
</body>
</html>
<!DOCTYPE HTML>
<html lang="ja">
<head>
<title>HTMLの追加変更</title>
<script language="JavaScript">
<!--
function c(f) {
switch (f) {
case 1:m.innerHTML ="文字を表示します。" ; break;
case 2:m.innerHTML ="<table border="1"><tbody><tr><td>Ａ</td><td>Ｂ</td></tr><tr><td>Ｃ</td><td>Ｄ</td></tr></tbody></table>" ;break;
case 3:m.innerHTML ="<input type="button" value="ボタン" onClick=al("ok")>" ;break;
default:alert("OTHER"); break;
}
}
//下記の様な書き方もあります。
//document.getElementById("dcvs").innerHTML =xxxxx
function al(a) {alert(a) ;}
//-->
</script>
</head>
<body>
<p>クリックしてください（<a href="#" onclick="c(1)">文字</a>、<a href="#" onclick="c(2)">表</a>、<a href="#" onclick="c(3)">ボタン</a>）</p>
<hr>
<div id="m">
<p>ここに表示します</p>
</div>
<hr>
</body>
</html>
<html>
<head>
<title>ソート</title>
</head>
<body>
<script type="text/javascript">
<!--
var array = [40000,30,800,2000,5];
display(array,"元データ ");
// 文字列の比較でソートする場合
array.sort( function(a,b){ if (a.toString() > b.toString() ) { return 1; } else { return -1;} } ) ;
display(array,"文字でソート（昇順）");
array.sort( function(a,b){ if (a.toString() < b.toString() ) { return 1; } else { return -1;} } ) ;
display(array,"文字でソート（降順）");
// 数値の比較でソートする場合
array.sort( function(a, b) { return a - b ; } )
display(array,"数字でソート（昇順）");
array.sort( function(a, b) {return b - a ; } )
display(array,"数字でソート（降順）");
// 配列の内容を表示
function display(array,d) {
document.open();
document.write(d + " : ");
d = "" ;
for (var i = 0; i < array.length; i++) { d+= " ==> " + array[i] }
document.write(d + "<br>");
document.close();
}
//-->
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>連想配列の配列をキーでソート</title>
</head>
<body>
<script type="text/javascript">
<!--
// 連想配列の配列
var array = [
{ 'name' : 'bbbbbbbbbb', 'suu' : 100 },
{ 'name' : 'uuuuuuuuuu', 'suu' : 400 },
{ 'name' : 'aaaaaaaaaa', 'suu' : 300 },
{ 'name' : 'pppppppppp', 'suu' : 200 }
];
display(array,"元データ");
// 文字列の比較でソートする場合
array.sort(
function(a, b) {
if (a['name'] == b['name']) { return 0; }
else { return (a['name'] < b['name']) ? -1 : 1; }
}
);
display(array,"文字でソート");
// 数値の比較でソートする場合
array.sort( function(a, b) { return a['suu'] - b['suu']; } )
display(array,"数字でソート");
// 配列の内容を表示
function display(array,d) {
document.open();
document.write(d + "<br>");
for (var i = 0; i < array.length; i++) {
document.write(
array[i]['name'] + ' : ' +
array[i]['suu'] + "<br>"
);
}
document.write("<br>");
document.close();
}
//-->
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 14.0.3.0 for Windows">
<title>クッキー（作成）</title>
<script language="JavaScript">
<!--
if(!navigator.cookieEnabled){alert("クッキーへの書き込みができません");}
else {
count = 0; // 訪問回数
cookie = document.cookie; // クッキー読み込み
data = cookie.split("; "); // "; "で分割
for(i = 0 ; i < data.length ; i++) {
data2 = data[i].split("="); // "="で分割
if(data2[0] == "count") {
count = data2[1]; // 訪問回数
}
}
dd = new Date(); // 今日の日時
dd.setHours(dd.getHours() + 24*30); // 有効期限３０日
cookie = "count=" + ++count + ";"; // クッキーデータ作成
cookie += "expires="+dd.toGMTString();
document.cookie = cookie;
}
//-->
</script>
</head>
<body>
<script language="JavaScript">
<!--
if (count==1) {document.write("あなたは初めての訪問です。");}
else {document.write("あなたは"+count+ "回目の訪問です。");}
//-->
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 14.0.3.0 for Windows">
<title>クッキー（削除）</title>
<SCRIPT language="JavaScript">
<!--
function del(){
if(document.cookie==""){
alert("削除するCookieはありません。")}
else{
tmp=document.cookie.split(";");
dd=new Date();
dd.setYear(dd.getYear()-1);
for(i=0;i<tmp.length;i++){
w=tmp[i].split("=")[0];
document.cookie=w+"=;expires="+dd.toGMTString();
}
alert("このサーバによるCookieを削除しました。");
}
}
// -->
</SCRIPT>
</HEAD>
<body>
<p> </p>
<p>
<CENTER>
<input type="button" value="Cookieの削除" onclick="del()" ;>
</CENTER>
</body>
</HTML>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>ＣＳＶ表示</title>
</head>
<body>
<div id="tx"></div>
<script type="text/javascript">
xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET","csv.csv", false); //ＣＳＶファイルのオープン
xmlHttp.send(null);
nl = String.fromCharCode(10); //改行コード
lines = xmlHttp.responseText.split(nl);//一行編集
edit = "<table border=1>";
for ( n = 0; n < lines.length; n++) { //すべての行数を編集するまで。
cols = lines[n].split(","); //列データに編集
edit += "<tr>";
for ( k = 0; k < cols.length; k++) { //すべての列数を編集するまで。
edit += "<td>" + cols[k] + "</td>";//セルデータのセット
}
edit += "</tr>"; //列データの終了
}
edit += "</table>"; //全データの終了
document.getElementById("tx").innerHTML = edit;//HTMLの書き込み
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<TITLE>時間のカウント</TITLE>
<script language="JavaScript">
<!--
//タイマー起動
function time() {
tmr=setTimeout("time()",10);
sday=new Date();
document.myform.ctime.value=((sday.getTime()-st)/1000).toFixed(3);
}
//スタート
function srt() {
sday=new Date();
st=sday.getTime();
time();
}
//ストップ
function stp() {clearTimeout(tmr);}
//-->
</script>
</head>
<body>
<p align="center">時間のカウント</p>
<hr>
<FORM Name="myform">
<p align="center">
<input type="button" value="スタート" onClick="srt()">
<input type="button" value="ストップ" onClick="stp()">
<p align="center">
<INPUT NAME="ctime" value="" size=20>
</form>
</BODY>
</HTML>
<html>
<head>
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 14.0.3.0 for Windows">
<title>クリップボード</title>
<script language="JavaScript">
<!--
//インプトエリアクリア
function cl() {
document.myform.data.value="";
}
//テキストエリアに張り付け
function paste() {
cp = clipboardData.getData("Text");
if (cp != "") {document.myform.data.value=cp;}
else {alert("クリップボードにテキストがありません。");}
}
//クリップボードにコピー
function copy(cp) {
clipboardData.setData("Text",cp);
alert("文字列をクリップボードにコピーします。");
}
//-->
</script>
</head>
<body>
<p align="center">クリップボードの操作</p>
<hr>
<form name="myform">
<p align="center">
<input style=";width:70px;height:25px" type="button" value="貼付" onclick="paste()" rows="10">
<input style=";width:70px;height:25px" type="button" value="コピー" onclick="copy(document.myform.data.value)"></p>
<p align="center"><input style=";width:70px;height:25px" type="button" value="クリア" onclick="cl()"></p>
<p align="center">
<textarea name="data" rows="6" cols="30"> </textarea>
</form>
</body>
</html>
チェックツール
チェックスプリプト
re = new RegExp("正規表現文字列"); |
| 特殊記号 | |
| .(ドット) | 改行以外の任意の1文字を表す |
| (半角スペース) | 1文字分のスペースを表す |
| ^(ハット) | 行の先頭を表す |
| $(ドル) | 行末を表す |
| |(フェンス) | 指定したもののいずれか、を表す |
| ()(括弧) | 括弧の中の文字列を表す フェンスと組み合わせて次の様に使用する ex:(abc|def|ghi) |
| [](ブラケット) | 囲った範囲の文字のいずれかにマッチする場合を表す |
| ^(否定演算子) | ブラケットの中で使用し、指定した文字以外を意味する "[^A-Z]"では大文字のアルファベット以外を意味する。 |
| \(バックスラッシュ) | 直前の1文字の正規表現の意味をエスケープする または¥(円記号) |
| メタシンボル | |
| \d | 1文字分の数字を表す。"[0-9]"に等しい |
| \D | 数字以外の1文字を表す。"[^0-9]"に等しい |
| \w | 数字とアルファベットかアンダースコア(_)のいずれかを表す。 "[0-9a-zA-Z_] "と等しい |
| \t | 1文字分のタブを表す |
| \f | フォームフィールドを表す |
| \r | キャリッジリターンを表す |
| \n | 改行記号を表す |
| \b | 単語とスペースの境界を表す |
| \B | 単語がそこで終らないことを意味する |
| \s | \b,\t,\f,\r,\nのいずれかを表す。"[\b\t\f\r\n]"と等しい |
| \S | \b,\t,\f,\r,\n以外の1文字を表す。"[^\b\t\f\r\n]"と等しい |
| 量数指定 | |
| *(アスタリスク) | 直前の文字を0回以上繰り返した文字列を表す |
| +(プラス) | 直前の文字を1回以上繰り返した文字列を返す |
| ?(クエスチョン) | 直前の文字が存在しなくてもいいような場合を表す |
| {n}(中括弧) | n回繰り返した文字列を表す "{n,m}"ではn回以上、m回以下にマッチし"{n,}"でn回以上にマッチする |
| 文字クラス | |
| 0-9 | 半角数字0から9いずれかにマッチするex:[0-9] |
| a-z | 半角英数の小文字いずれかにマッチするex:[a-z] |
| A-Z | 半角英数の小文字いずれかにマッチするex:[A-Z] |
| 0-9a-zA-Z | 半角英数のいずれかにマッチするex:[0-9a-zA-Z] |