JavaScript/HTMLおぼえがき

｜JavaScript/HTML｜ JavaScript/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 cl(x) {
  if(document.myform.r1[x].checked) 
  document.myform.data.value=document.myform.r1[x].value;
}
// -->
</script>
</head>
<body>
<p align="center">ラジオボタン</p>
<hr>
<form name="myform">
<p align="center">
<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 align="center">&nbsp; 
<input type="text" name="data" size="18" > 
</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 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 align="center"><b>チェックボックス</b></p>
<hr>
<form name="myform">
<p align="center">
<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 align="center">　 
<input type="text" name="data" size="19" > 
</p> 
</form> 
</body> 
</html> 

セレクトボックス　　　戻る

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

　

その他

時間カウント　　　戻る

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<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>

クッキー（作成）　　　戻る

<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 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(&quotwin-sub.html&quot,&quottom&quot,&quotwidth=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>

　

｜JavaScript/HTML｜ JavaScript/HTML５｜ サイトマップ｜ホーム｜