JavaScript/HTMLおぼえがき

JavaScriptJavaScript/HTMLサイトマップホーム

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

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

画面表示 テキストエリア日付・時間・曜日の表示システム情報表示文字サイズ・太さ・色、背景色の変更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>&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>
<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> 
 

webフォント   戻る


<!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>

HTML/CSSの操作

表示スタイルの変更   戻る


<!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>


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>

ファイルの読込・情報取得

CSVの読込   戻る


<!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)   戻る

写真用画像ファイルは撮影時の情報を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>


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

チェックツール

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]

マウス/タッチイベント   戻る


マウス/タッチイベントは下表の通りです。
また、要素の絶対座標値(位置)を取得するには、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>

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