JavaScript/HTMLおぼえがき

JavaScriptJavaScript/HTMLJavaScript/HTML5サイトマップホーム

実行サンプル表示があります。書き方を忘れた場合はサンプルソースを参考にしてください。

入力フォーム ラジオボタンチェックボックスセレクトボックス

画面表示 テキストエリア日付・時間・曜日の表示システム情報表示文字サイズ・太さ・色、背景色の変更

画面制御 ページ戻し、進めカラーダイアログウィンドウズダイアログウインドウ間のデータ受け渡し

HTML/CSSの操作 表示スタイルの変更HTMLの追加変更

ソート 単純ソート連想配列キーでソート

クッキー クッキー(作成)クッキー(削除)

ファイルの読込 CSVファイルの読込

その他 : 時間カウントクリップボード入力チェック(正規表現)


入力フォーム

ラジオボタン   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>ラジオボタン</title>
<script>
<!--
//メイン処理
function cl(x) {if(document.myform.r1[x].checked) 
  document.myform.data.value=document.myform.r1[x].value;
}
// -->
</script>
</head>
<body>
<p>ラジオボタン</p>
<hr>
<form name="myform">
<p>
<input type="radio" value="あか" name="r1" onclick="cl(0)" checked>赤       
<input type="radio" value="あお" name="r1" onclick="cl(1)">青    
<input type="radio" value="きい" name="r1" onclick="cl(2)">黄           
<input type="radio" value="しろ" name="r1" onclick="cl(3)">白      
<input type="radio" value="くろ" name="r1" onclick="cl(4)">黒 
<p>&nbsp;  
<input type="text" name="data" size="18" >   
</p>
</form>
</body>
</html>       

チェックボックス   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>チェックボックス</title>
<script>
<!--
function cl(x) {
  if(document.myform.c1[x].checked) {document.myform.data.value="○"+document.myform.c1[x].value;}
    else {document.myform.data.value="×"+document.myform.c1[x].value;}
}
//-->
</script>
</head>
<body>
<p><b>チェックボックス</b></p>
<hr>
<form name="myform">
<p>
<input type="checkbox" value="あか" name="c1" onclick="cl(0)" checked>赤          
<input type="checkbox" value="あお" name="c1" onclick="cl(1)" checked>青              
<input type="checkbox" value="きい" name="c1" onclick="cl(2)" checked>黄              
<input type="checkbox" value="しろ" name="c1" onclick="cl(3)" checked>白             
<input type="checkbox" value="くろ" name="c1" onclick="cl(4)" checked>黒 
<p>          
<input type="text" name="data" size="19" >           
</p> 
</form>   
</body> 
</html>                 

セレクトボックス   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>セレクトボックス</title>
<SCRIPT>
<!--
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>セレクトボックス</p>
<hr>
<FORM NAME="MyForm">       
<p>       
<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>
<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>

画面表示

テキストエリア   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>テキストエリア</title>
<script>
<!--
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>テキストエリア</p>
<hr>
<form name="myform">
<p>
<input type="text" name="inp" size="38" >
<p>
<input type="button" value="追加" onclick="ad()">
<input type="button" value="クリア" onclick="cr()">      
</p>
<p>
<textarea name="out" rows="5" cols="30">ここに文字を追加 </textarea>      
</p>   
</form>   
</body>
</html>

日付・時間・曜日の表示   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>時間の表示</title>
<SCRIPT>
<!--
  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>時間の表示</p>
<hr>
<FORM Name="myform">
<p>編集して表示:
<INPUT NAME="dctime" value="" size=40><p>ローカル編集:
<INPUT NAME="d2" value="" size=40><p>世界標準時刻:
<INPUT NAME="d3" value="" size=40><p>
</form>
</BODY>
</HTML>

システム情報表示   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>システム情報</title>
</head>
<body>
<p>システム情報</p>
<hr>
<script>
<!--
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>
<p>
</body> 
</html>            

文字サイズ・太さ・色、背景色の変更   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>文字・色の変更</title>
<script>
<!--
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>文字サイズ・太さ・色、背景色の変更
</p>
<hr>
<p>文字サイズ【   
<a href="#" onclick="cs('18pt');" style="font-size:18pt;">18</a>| 
<a href="#" onclick="cs('14pt');" style="font-size:14pt;">14</a>| 
<a href="#" onclick="cs('12pt');" style="font-size:12pt;">12</a>| 
<a href="#" onclick="cs('10pt');" 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>色【 
<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> </p> 
</BODY> 
</HTML> 
 

画面制御

ページ戻し、進め   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>システム情報</title>
</head>
<body>
<p>ページに戻る・進む</p>
<hr>
<p>Page1</p>
<p>リンク先: <a href="page.html">Page1</a> <a href="page2.html">Page2</a> <a href="page3.html">Page3</a></p>
<p><a href="#"onClick="history.back(); return false;">前のページにもどる</a><br>
<a href="#"onClick="history.forward(); return false;">次のページにすすむ</a><br>
<a href="#"onClick="history.go(-2); return false;">2つ前のページにもどる</a><br>
<a href="javascript:history.back()">もどる</a><br>
<a href="javascript:history.forward()">すすむ</a></p>
</body>
</html>  

カラーダイアログ   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>カラーダイアログ</title>
<script>
<!--
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>
<object id="Dialog" classid="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0" height="0">
</object>
</head>
<body>
<p>カラーダイアログ</p>
<hr>
<form name="frmFORM">
<p>
<input type="button" value="背景色選択" onclick="ChooseCol('bc')">
<input type="text" name="bc" size="8" ><p>
<input type="button" value="文字色選択" onclick="ChooseCol('cc')"> 
<input type="text" name="cc" size="8" >  
</p>     
<p><b>文字の色</b> 
</p>    
</form>    
</body>    
</html>    

ウィンドウズダイアログ   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>Windowダイアログ</title>
<script>
<!--
function disp() {
  if(window.confirm('実行しますか?')) {
    user = window.prompt("ユーザー名を入力してください","田中");
    window.alert('ユーザ名は'+user);// 警告ダイアログを表示
	}
	else{
      window.alert('キャンセルされました');// 警告ダイアログを表示
	}
}
// -->
</script>
</head>
<body>
<p> </p>
<p> </p>
<p>
<input type="button" value="確認ダイアログ" onClick="disp()"></p>
<p>データ入力ダイアログが動作しない場合は、
インターネットエクスプローラのインターネットオプションのセキュリティ設定で
レベルのカスタマイズを選択してスクリプトのスクリプト化されたウインドウを使って情報の入力を求めることを、
Webサイトに許可するを「有効にする」</p>
</body>
</html>

ウインドウ間のデータ受け渡し   戻る

<親ウインドウ>


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>ウインドウ間のデータ受け渡し(親ウインドウ)</title>
<script> 
function opn(){ window.open('win-sub.html','','width=350,height=200');}
</script>
</head>
<body>
<form>
<p>ウインドウ間のデータ受け渡し(親ウインドウ)</p>
<p><input id="min-put" value="子に渡す"> 子に渡す</p>
<p><input id="min-get" > 子からもらう
<input type="button" value="開く" onclick="opn()"><br>
</p>
</form>
</body>
</html>

<子ウインドウ>


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>ウインドウ間のデータ受け渡し(子ウインドウ)</title>
<script> 
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()">
<form>
<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>
</form>
</body>
</html>
 

HTML/CSSの操作

表示スタイルの変更   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>表示スタイルの変更</title>
<script>
<!--
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   = "MS Pゴシック";break;
  case  42:m.style.fontFamily   = "MS P明朝";    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>1.文字スタイル(<a href="#" onclick="c(11)">通常</a>、<a href="#" onclick="c(12)">イタリック</a>)</p>
<p>2.文字の太さ(<a href="#" onclick="c(21)">標準</a>、<a href="#" onclick="c(22)">太字</a>)</p>
<p>3.文字サイズ(<a href="#" onclick="c(31)">大</a>、<a href="#" onclick="c(32)">中</a>、<a href="#" onclick="c(33)">小</a>)</p>
<p>4.フォント名(<a href="#" onclick="c(41)">MS Pゴシック</a>、<a href="#" onclick="c(42)">MS P明朝</a>)</p>
<p>5.前景色(<a href="#" onclick="c(51)">(黒</a>、<a href="#" onclick="c(52)">赤 </a>)</p>
<p>6.背景色(<a href="#" onclick="c(61)">白</a>、<a href="#" onclick="c(62)">黄</a>) </p>
<p>7.マージン(<a href="#" onclick="c(71)">10px</a>、<a href="#" onclick="c(72)">50px</a>)</p>
<p>8.ボーダ幅(<a href="#" onclick="c(81)">3px、</a><a href="#" onclick="c(82)">5px) </a></p>
<p>9.ボーダスタイル(<a href="#" onclick="c(91)">無</a>、<a href="#" onclick="c(92)">実践</a>、<a href="#" onclick="c(93)">点線</a>)</p>
<p>10.ボーダカラー(<a href="#" onclick="c(101)">黒</a>、<a href="#" onclick="c(102)">赤</a>、<a href="#" onclick="c(103)">青</a>)</p>
<p>11. パディング(<a href="#" onclick="c(111)">10px</a>、<a href="#" onclick="c(112)">50px</a>)</p>
</div>
<hr>
</body>
</html>

HTMLの追加変更   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>HTMLの追加変更</title>
<script>
<!--
function c(f) {
  switch (f) {
  case  1:m.innerHTML ="文字を表示します。" ; break;
  case  2:m.innerHTML ='<table border="1"><tbody><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</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>

ソート

単純ソート   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>ソート</title>
</head>
<body>
<script>
<!--
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>

連想配列キーでソート   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>連想配列の配列をキーでソート</title>
</head>
<body>
<script>
<!--
// 連想配列の配列
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>

クッキー

クッキー(作成)   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>クッキー(作成)</title>
<script>
<!--
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);         // 有効期限30日
    cookie = "count=" + ++count + ";";          // クッキーデータ作成
	cookie	+= "expires="+dd.toGMTString();
	document.cookie	= cookie;
  }	
//-->
</script>
</head>
<body>
<script>
<!--
  if (count==1) {document.write("あなたは初めての訪問です。");}
    else {document.write("あなたは"+count+ "回目の訪問です。");}
//-->
</script>
</body>
</html>

クッキー(削除)   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>クッキー(削除)</title>
<SCRIPT>
<!--
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>
<input type="button" value="Cookieの削除" onclick="del()">
</body>
</HTML>

ファイルの読込

CSVの読込   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>CSV表示</title>
</head>
<body> 
<div id="tx"></div>
<script>
  xmlHttp = new XMLHttpRequest();
  xmlHttp.open("GET","csv.csv", false);  //CSVファイルのオープン
  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>

その他

時間カウント   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<TITLE>時間のカウント</TITLE>
<script>
<!--
//タイマー起動
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>時間のカウント</p>
<hr>
<FORM Name="myform">
<p>
<input type="button" value="スタート" onClick="srt()">
<input type="button" value="ストップ" onClick="stp()"> 
<p>
<INPUT NAME="ctime" value="" size=20>   
</form> 
</BODY> 
</HTML> 

 

クリップボード   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>クリップボード</title>
<script>
<!--
//インプトエリアクリア
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>クリップボードの操作</p>
<hr>
<form name="myform">
   <p>
   <input type="button" value="貼付" onclick="paste()">
   <input type="button" value="コピー" onclick="copy(document.myform.data.value)"></p>        
   <p><input type="button" value="クリア" onclick="cl()"></p>       
   <p>       
<textarea name="data" rows="6" cols="30"> </textarea>  
</form>
</body>
</html>        


入力チェック(正規表現)  戻る

チェックツール

NO チェック項目 チェックデータ チェックの正規表現 備考
1 全角ひらかなカタカナ  
2 数字(半角整数) マイナス、小数点使用可 &半角
3 時間(hh:mm)チェック  
4 日付(yyyy/mm/dd)チェック  
5 電話番号チェック  
6 メルアドチェック :@前は「英数字_-.」使用可、@後ひとつ以上の
「.」があるか、 「.」で終わっていないか
5 フリー  

チェックスプリプト

re = new RegExp("正規表現文字列");
if(!入力データエリア名.match(re) ) { alert("入力フォーマットエラー")} else { alert("OK")} ;

正規表現文法

特殊記号
.(ドット) 改行以外の任意の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]

JavaScriptJavaScript/HTMLJavaScript/HTML5サイトマップホーム