実行サンプル表示があります。書き方を忘れた場合はサンプルソースを参考にしてください。
■入力フォーム: ラジオボタン|チェックボックス|セレクトボックス
■画面表示: テキストエリア|日付・時間・曜日の表示|システム情報表示| 文字サイズ・太さ・色、背景色の変更|webフォント
■画面制御/印刷: ページ戻し、進め|カラーダイアログ|ウィンドウズダイアログ |ウインドウ間のデータ受け渡し |印刷制御
■HTML/CSSの操作: 表示スタイルの変更|スタイル変更方法|HTMLの追加変更
■ファイルの読込・情報取得: CSVファイルの読込|画像情報取得(EXIF)
■その他 : 時間カウント|クリップボード|入力チェック(正規表現) |マウス/タッチイベント
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>ラジオボタン</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<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>
<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>
<meta name="viewport" content="width=device-width,initial-scale=1">
<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>
<meta name="viewport" content="width=device-width,initial-scale=1">
<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>
<meta name="viewport" content="width=device-width,initial-scale=1">
<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>
<meta name="viewport" content="width=device-width,initial-scale=1">
<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>
<meta name="viewport" content="width=device-width,initial-scale=1">
</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>
<meta name="viewport" content="width=device-width,initial-scale=1">
<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 lang="ja">
<head>
<meta charset="UTF-8">
<title>Google 日本語のwebフォント</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="https://fonts.googleapis.com/earlyaccess/mplus1p.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/earlyaccess/hannari.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/earlyaccess/kokoro.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/earlyaccess/sawarabimincho.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/earlyaccess/sawarabigothic.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/earlyaccess/nikukyu.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/earlyaccess/nicomoji.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet" />
<style>
<!--
*{
background-color: #ffffff;color: #000000;font-size: 18px;
}
.tate{
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
.f_mplus1p{
font-family: "Mplus 1p";
}
.f_roundedmplus1c{
font-family: "Rounded Mplus 1c";
}
.f_hannari{
font-family: "Hannari";
}
.f_kokoro{
font-family: "Kokoro";
}
.f_sawarabimincho{
font-family: "Sawarabi Mincho";
}
.f_sawarabigothic{
font-family: "Sawarabi Gothic";
}
.f_nikukyu{
font-family: "Nikukyu";
}
.f_nicomoji{
font-family: "Nico Moji";
}
.f_notosansjapanese{
font-family: "Noto Sans Japanese";
}
-->
</style>
</head>
<body>
<p>Google 日本語webフォントが無料で利用可能です</p>
<p class="f_mplus1p">◎Google 日本語webフォントです。「M+ 1p」</p>
<p class="f_roundedmplus1c">◎Google 日本語webフォントです。「Rounded M+ 1c」</p>
<p class="f_hannari">◎Google 日本語webフォントです。「はんなり明朝」</p>
<p class="f_kokoro">◎Google 日本語webフォントです。「こころ明朝」</p>
<p class="f_sawarabimincho">◎Google 日本語webフォントです。「さわらび明朝」</p>
<p class="f_sawarabigothic">◎Google 日本語webフォントです。「さわらびゴシック」</p>
<p class="f_nikukyu">◎Google 日本語webフォントです。「ニクキュウ」</p>
<p class="f_nicomoji">◎Google 日本語webフォントです。「ニコモジ」</p>
<p class="f_notosansjapanese">◎Google 日本語webフォントです。「Noto Sans Japanese」</p>
<div class="tate">
<p class="f_mplus1p">◎Google 日本語webフォントです。「M+ 1p」</p>
<p class="f_roundedmplus1c">◎Google 日本語webフォントです。「Rounded M+ 1c」</p>
<p class="f_hannari">◎Google 日本語webフォントです。「はんなり明朝」</p>
<p class="f_kokoro">◎Google 日本語webフォントです。「こころ明朝」</p>
<p class="f_sawarabimincho">◎Google 日本語webフォントです。「さわらび明朝」</p>
<p class="f_sawarabigothic">◎Google 日本語webフォントです。「さわらびゴシック」</p>
<p class="f_nikukyu">◎Google 日本語webフォントです。「ニクキュウ」</p>
<p class="f_nicomoji">◎Google 日本語webフォントです。「ニコモジ」</p>
<p class="f_notosansjapanese">◎Google 日本語webフォントです。「Noto Sans Japanese」</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>ページ戻し・進め</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</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>
<meta name="viewport" content="width=device-width,initial-scale=1">
<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> </head>
<body>
ページ戻し、進め
<object id="Dialog" classid="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0" height="0">
</object>
<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>
<meta name="viewport" content="width=device-width,initial-scale=1">
<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>
<meta name="viewport" content="width=device-width,initial-scale=1">
<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>
<meta name="viewport" content="width=device-width,initial-scale=1">
<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>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>印刷</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
<!--
@media print{
.noprint{
display: none; /*印刷しない指定*/
}
body{
padding:0px;margin:0px;
}
}
@page { size: 91mm 55mm ; margin: 0mm; } /*ページサイズの指定*/
.page{
/*ページの指定*/
width:91mm;height:54mm; /*ページサイズは@pageのサイズより小さい値を指定する*/
position:relative;
border-width:1px;border-style:solid;border-color:#FF0000;
padding:0px;margin:0px;
page-break-after : always; /*改行指定*/
}
.pdata{
/*印字データ領域の指定*/
width:80mm;height:15mm;
position:absolute; top:20mm; left:5mm;
font-size:20pt;font-family:MS ゴシック;
color:#000000;background-color:#FFFFFF;
border-width:1px;border-style:solid;border-color:#0000FF;
padding:0px;margin:0px;
text-align:reft;
}
-->
</style>
</head>
<body>
<div class="noprint">
<button onclick="window.print();">印刷</button>
<br>
</div>
<div class="page">
<div class="pdata">名刺サイズの印刷<br>ページ1</div>
</div>
<div class="page">
<div class="pdata">名刺サイズの印刷<br>ページ2</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>表示スタイルの変更</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<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>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS変更</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="style_a.css" disabled = "true" id="style-a">
<link rel="stylesheet" href="style_b.css" disabled = "false" id="style-b">
<style>
<!--
.class_a{
border-width:0px;
}
.class_b{
border-width:3px;border-style:solid;border-color:#FF0000;
}
-->
</style>
</head>
<body>
<script>
function class_a() {
dv.className = "class_a";
}
function class_b() {
dv.className = "class_b";
}
function style_a() {
hd.style.backgroundColor = "#000000";
hd.style.color = "#ffffff";
}
function style_b() {
hd.style.backgroundColor = "#ffff00";
hd.style.color = "#0000ff";
}
function sheet_a() {
document.getElementById("style-a").disabled = true;
document.getElementById("style-b").disabled = false;
}
function sheet_b() {
document.getElementById("style-a").disabled = false;
document.getElementById("style-b").disabled = true;
}
</script>
<h1 ID="hd">スタイルの変更方法</h1>
<div id="dv" class="class_a">
<p>classの変更:<button onclick="class_a()">class a</button> <button onclick="class_b()">class b</button></p>
<p>styleの変更:<button onclick="style_a()">style a</button> <button onclick="style_b()">style b</button></p>
<p>stylesheetの変更:<button onclick="sheet_a()">sheet a</button> <button onclick="sheet_b()">sheet b</button></p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>HTMLの追加変更</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<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>
<meta name="viewport" content="width=device-width,initial-scale=1">
</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>
<meta name="viewport" content="width=device-width,initial-scale=1">
</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>
<meta name="viewport" content="width=device-width,initial-scale=1">
<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>
<meta name="viewport" content="width=device-width,initial-scale=1">
<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>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>CSV表示</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</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>
写真用画像ファイルは撮影時の情報をExif(Exchangeable image file format)様式で保存されています。その詳細情報を取得します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>画像情報取得(EXIF)</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<input id="input" type="file">
<div id="out"></div>
<!--exif-jsライブラリーを使います。-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/exif-js/2.2.1/exif.min.js"></script>
<script>
document.getElementById("input").addEventListener("change", function(evt) {
EXIF.getData(evt.target.files[0], function() {
d = EXIF.getTag(this,"DateTime") ; //プロパティの項目名を指定して、必要な情報を取得する。
p = EXIF.pretty(this); //EXIF(プロパティ)詳細情報の取得
out.innerHTML = "<pre>作成日時:" + d + "<br>プロパティ:<br>" + p + "</pre>" ;
});
}, false);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<TITLE>時間のカウント</TITLE>
<meta name="viewport" content="width=device-width,initial-scale=1">
<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 lang="ja">
<head>
<meta charset="UTF-8">
<title>クリップボードにコピー</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<button onclick="copyText ()">コピー</button><br>
<textarea class="copyTarget" rows="10" cols="40">クリップボードにコピーします。</textarea><br>
<script>
//Chrome/Firefox/Safari10〜/IE9〜/Edge)対応
function copyText () {
var target = document.querySelector('.copyTarget');
if (!target) {
return false;
}
var range = document.createRange();
range.selectNode(target);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
document.execCommand('copy');
return false;
}
</script>
</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] |
マウス/タッチイベントは下表の通りです。
また、要素の絶対座標値(位置)を取得するには、getBoundingClientRectメソッドを使用します。
分類 イベントの種類 PCでの操作 スマホ・タブレットでの操作 マウス
イベントonmousedown マウスボタンから指を離した 指が画面から離れた onmouseup 押しているマウスボタンから指を離した 指が画面から離れた onmousemove マウスカーソルが移動している なし onmouseover マウスカーソルがオブジェクトの上に載った なし onmouseout マウスカーソルがオブジェクトから離れた なし onclick マウスでクリックした 指で画面をタップした タッチ
イベントontouchstart なし 画面に指が触れた ontouchmove なし 画面に指を触れたまま動かした ontouchend なし 画面から指を離した ontouchcancel なし ontouchendの発生前に処理が取り消された ongesturestart なし ジェスチャーの開始(※iOSのみ) ongesturechange なし ジェスチャーの変更(※iOSのみ) ongestureend なし ジェスチャーの終了(※iOSのみ)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>mouse event</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script>
window.addEventListener("load", ini , true);
function ini() {
form.out.value="" ;
cw = canvas.width ; ch = canvas.height ;
canvas = document.getElementById("canvas"); context = canvas.getContext("2d");
context.fillStyle = "#000000" ;
context.fillRect(0,0,cw,ch); // バックの描画
canvas.addEventListener("mousemove", function(e){//マウスカーソルが移動している
dsp("mousemove",e) ;
}, true);
canvas.addEventListener("mousedown", function(e){//マウスボタンから指を離した
dsp("mousedown",e) ;
}, true);
canvas.addEventListener("mouseup", function(e){//押しているマウスボタンから指を離した
dsp("mouseup",e) ;
}, true);
canvas.addEventListener("mouseover", function(e){//マウスカーソルがオブジェクトの上に載った
dsp("mouseover",e) ;
}, true);
canvas.addEventListener("mouseout", function(e){//マウスカーソルがオブジェクトから離れた
dsp("mouseout",e) ;
}, true);
canvas.addEventListener("click", function(e){//マウスでクリックした
dsp("click",e) ;
}, true);
canvas.addEventListener("dblclick", function(e){
dsp("dblclick",e) ;
}, true);
canvas.addEventListener("touchstart", function(e){//画面に指が触れた
e.preventDefault(); // デフォルトイベントをキャンセル
dspt("touchstart",e) ;
}, true);
canvas.addEventListener("touchmove", function(e){//画面に指を触れたまま動かした
e.preventDefault(); // デフォルトイベントをキャンセル
dspt("touchmove",e) ;
}, true);
canvas.addEventListener("touchend", function(e){//画面から指を離した
e.preventDefault(); // デフォルトイベントをキャンセル
dspt("touchend",e) ;
}, true);
canvas.addEventListener("touchcancel", function(e){//ontouchendの発生前に処理が取り消された
e.preventDefault(); // デフォルトイベントをキャンセル
dspt("touchcance",e) ;
}, true);
window.addEventListener("touchmove", function(){ }, true);
}
function dsp( act,e ) {
rect = e.target.getBoundingClientRect() ;
curx = e.clientX ;
curx -= rect.left ;
cury = e.clientY ;
cury -= rect.top ;
form.out.value = act + ",x=" + curx + " y=" + cury + "\n" + form.out.value ;
}
function dspt( act,e ) {
for ( i = 0; i < e.touches.length; i++) {
rect = e.target.getBoundingClientRect() ;
t = e.touches[i]; // 触れている指に関する情報を取得
curx = t.pageX ;
curx -= rect.left ;
cury = t.pageY ;
cury -= rect.top ;
form.out.value = act + i + ",x=" + curx + " y=" + cury + "\n" + form.out.value ;
}
}
</script>
</head>
<body>
<form name="form">
<TABLE style="margin:0px auto;"><tr><td>
<canvas id="canvas" width="320" height="320"></canvas><br>
<input type="button" value="CLR" onclick="form.out.value=''"><br>
<textarea name="out" rows="10" cols="30"></textarea>
</td></tr></table>
</form>
</body>
</html>