ITツールの使い方

配列の作成法

投稿日: 2013年11月21日作成者: 関口郁夫

new Array()を使う方法と配列リテラルを使う方法がある。
new Array()を使うとはnew演算子でArrayオブジェクトを生成することで、コーディングの仕方に2つある
【書き方1】
配列名 = new Array(要素数);
配列名[0] = “要素1”;
配列名[1] = “要素2”;
配列名[2] = “要素3”;
【書き方2】
配列名 = new Array(“要素1″,”要素2″,”要素3″,…,”要素n”);

配列リテラルとは数値の値を数値リテラルと呼ぶように、配列の値そのものを使って配列を定義する方法。
var 配列名 = [“要素1″,”要素”,”要素3″,…,”要素n”];
と書きます。
1次元の配列などは配列リテラルで作成するのが通常。

二次元配列の記述はnew演算子を使う場合は
var a = new Array();
a[ 0 ] = new Array( 1, 2 );
a[ 1 ] = new Array( 3, 4 );
配列リテラルを使う場合は
var a = [ [ 1, 2 ], [ 3, 4 ] ];
だが、配列リテラルの値を直接書く性質上、2次元配列までしか記述できず、3次元以上になると配列アドレスを指定することになるので正しく動作しなくなる事がある。

＜正しく動作しない配列　配列リテラルによる作成＞

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>4dimentionArrey</title>
<script type="text/javascript">
<!--
var aryGawa011001 =[["0110011"], ["0110012"], ["0110013"], ["0110014"], ["0110015"], ["0110016"], ["0110017"] ];
var aryGawa011002 =[["0110021"], ["0110022"], ["0110023"], ["0110024"], ["0110025"], ["0110026"] ];
var aryGawa011003 =[["0110031"], ["0110032"], ["0110033"], ["0110034"], ["0110035"] ];
var aryGawa011004 =[["0110041"], ["0110042"], ["0110043"], ["0110044"] ];
var aryGawa011005 =[["0110051"], ["0110052"], ["0110053"] ];
var aryShu011 =[aryGawa011001, aryGawa011002, aryGawa011003, aryGawa011004, aryGawa011005];

var aryGawa012001 =[["0120011"], ["0120012"], ["0120013"] ];
var aryGawa012002 =[["0120021"], ["0120022"], ["0120023"], ["0120024"] ];
var aryGawa012003 =[["0120031"], ["0120032"], ["0120033"], ["0120034"], ["0120035"] ];
var aryGawa012004 =[["0120041"], ["0120042"], ["0120043"], ["0120044"], ["0120045"], ["0120046"] ];
var aryShu012 =[aryGawa012001, aryGawa012002, aryGawa012003, aryGawa012004 ];

var aryGawa021001 =[["0210011"], ["0210012"], ["0210013"], ["0210014"], ["0210015"], ["0210016"], ["0210017"] ];
var aryGawa021002 =[["0210021"], ["0210022"], ["0210023"], ["0210024"], ["0210025"], ["0210026"] ];
var aryGawa021003 =[["0210031"], ["0210032"], ["0210033"], ["0210034"], ["0210035"] ];
var aryGawa021004 =[["0210041"], ["0210042"], ["0210043"], ["0210044"] ];
var aryGawa021005 =[["0210051"], ["0210052"], ["0210053"] ];
var aryShu021 =[aryGawa021001, aryGawa021002, aryGawa021003, aryGawa021004, aryGawa021005 ];
var aryGawa022001 =[["0220011"], ["0220012"], ["0220013"] ];
var aryGawa022002 =[["0220021"], ["0220022"], ["0220023"], ["0220024"] ];
var aryGawa022003 =[["0220031"], ["0220032"], ["0220033"], ["0220034"], ["0220035"] ];
var aryGawa022004 =[["0220041"], ["0220042"], ["0220043"], ["0220044"], ["0220045"], ["0220046"] ];
var aryShu022 =[aryGawa022001, aryGawa022002, aryGawa022003, aryGawa022004 ];

var aryGawa031001 =[["0310011"], ["0310012"], ["0310013"], ["0310014"], ["0310015"], ["0310016"], ["0310017"] ];
var aryGawa031002 =[["0310021"], ["0310022"], ["0310023"], ["0310024"], ["0310025"], ["0310026"] ];
var aryGawa031003 =[["0310031"], ["0310032"], ["0310033"], ["0310034"], ["0310035"] ];
var aryGawa031004 =[["0310041"], ["0310042"], ["0310043"], ["0310044"] ];
var aryGawa031005 =[["0310051"], ["0310052"], ["0310053"] ];
var aryShu031 =[aryGawa031001, aryGawa031002, aryGawa031003, aryGawa031004, aryGawa031005];
var aryGawa032001 =[["0320011"], ["0320012"], ["0320013"] ];
var aryGawa032002 =[["0320021"], ["0320022"], ["0320023"], ["0320024"] ];
var aryGawa032003 =[["0320031"], ["0320032"], ["0320033"], ["0320034"], ["0320035"] ];
var aryGawa032004 =[["0320041"], ["0320042"], ["0320043"], ["0320044"], ["0320045"], ["0320046"] ];
var aryShu032 =[aryGawa032001, aryGawa032002, aryGawa032003, aryGawa032004];

var ku1 =[aryShu011, aryShu012];
var ku2 =[aryShu021, aryShu022];
var ku3 =[aryShu031, aryShu032];

var Ku =[Ku1, Ku2 , ku3];

function aryPrint(i, j, k, pp) {
	for (var p=1; p<=pp; p++) {					//							This doesn't work.
		document.write( i + "Ku " + j + "Shu " + k + "Gawa " + p + "Point = " + Ku[i-1][j-1][k-1][p-1] + "<br />" );
//																				This DOES Work!
//		document.write( i + "Ku " + j + "Shu " + k + "Gawa " + p + "Point = " + ku1[j-1][k-1][p-1] + "<br />" );
//		document.write( i + "Ku " + j + "Shu " + k + "Gawa " + p + "Point = " + ku2[j-1][k-1][p-1] + "<br />" );
//		document.write( i + "Ku " + j + "Shu " + k + "Gawa " + p + "Point = " + ku3[j-1][k-1][p-1] + "<br />" );
	}
	document.write("<br />");
}
-->
</script>
</head>

<body>
<script type="text/javascript">
document.write(1 + "Ku " + 1 + "Shu<br />");
aryPrint(1, 1, 1, 7);
aryPrint(1, 1, 2, 6);
aryPrint(1, 1, 3, 5);
aryPrint(1, 1, 4, 4);
aryPrint(1, 1, 5, 3);

document.write(1 + "Ku " + 2 + "Shu<br />");
aryPrint(1, 2, 1, 3);
aryPrint(1, 2, 2, 4);
aryPrint(1, 2, 3, 5);
aryPrint(1, 2, 4, 6);

document.write(2 + "Ku " + 1 + "Shu<br />");
aryPrint(2, 1, 1, 7);
aryPrint(2, 1, 2, 6);
aryPrint(2, 1, 3, 5);
aryPrint(2, 1, 4, 4);
aryPrint(2, 1, 5, 3);

document.write(1 + "Ku " + 2 + "Shu<br />");
aryPrint(2, 2, 1, 3);
aryPrint(2, 2, 2, 4);
aryPrint(2, 2, 3, 5);
aryPrint(2, 2, 4, 6);

document.write(3 + "Ku " + 1 + "Shu<br />");
aryPrint(3, 1, 1, 7);
aryPrint(3, 1, 2, 6);
aryPrint(3, 1, 3, 5);
aryPrint(3, 1, 4, 4);
aryPrint(3, 1, 5, 3);

document.write(3 + "Ku " + 2 + "Shu<br />");
aryPrint(3, 2, 1, 3);
aryPrint(3, 2, 2, 4);
aryPrint(3, 2, 3, 5);
aryPrint(3, 2, 4, 6);

</script>
</body>
</html>

この場合も

document.write( i + "Ku " + j + "Shu " + k + "Gawa " + p + "Point = " + ku1[j-1][k-1][p-1] + "<br />" );
document.write( i + "Ku " + j + "Shu " + k + "Gawa " + p + "Point = " + ku2[j-1][k-1][p-1] + "<br />" );
document.write( i + "Ku " + j + "Shu " + k + "Gawa " + p + "Point = " + ku3[j-1][k-1][p-1] + "<br />" );

3次元までは正しく動作する。

＜正しく動作する配列　new演算子による作成＞

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>4dimentionArrey</title>
<script type="text/javascript">
<!--
var aryShu011 = new Array();
aryShu011[0] = new Array("0110011", "0110012", "0110013", "0110014", "0110015", "0110016", "0110017");
aryShu011[1] = new Array("0110021", "0110022", "0110023", "0110024", "0110025", "0110026");
aryShu011[2] = new Array("0110031", "0110032", "0110033", "0110034", "0110035" );
aryShu011[3] = new Array("0110041", "0110042", "0110043", "0110044");
aryShu011[4] = new Array("0110051", "0110052", "0110053");

var aryShu012 = new Array();
aryShu012[0] = new Array("0120011", "0120012", "0120013");
aryShu012[1] = new Array("0120021", "0120022", "0120023", "0120024");
aryShu012[2] = new Array("0120031", "0120032", "0120033", "0120034", "0120035" );
aryShu012[3] = new Array("0120041", "0120042", "0120043", "0120044", "0120045", "0120046");

var aryShu021 = new Array();
aryShu021[0] = new Array("0210011", "0210012", "0210013", "0210014", "0210015", "0210016", "0210017");
aryShu021[1] = new Array("0210021", "0210022", "0210023", "0210024", "0210025", "0210026");
aryShu021[2] = new Array("0210031", "0210032", "0210033", "0210034", "0210035" );
aryShu021[3] = new Array("0210041", "0210042", "0210043", "0210044");
aryShu021[4] = new Array("0210051", "0210052", "0210053");

var aryShu022 = new Array();
aryShu022[0] = new Array("0220011", "0220012", "0220013");
aryShu022[1] = new Array("0220021", "0220022", "0220023", "0220024");
aryShu022[2] = new Array("0220031", "0220032", "0220033", "0220034", "0220035" );
aryShu022[3] = new Array("0220041", "0220042", "0220043", "0220044", "0220045", "0220046");

var aryShu031 = new Array();
aryShu031[0] = new Array("0310011", "0310012", "0310013", "0310014", "0310015", "0310016", "0310017");
aryShu031[1] = new Array("0310021", "0310022", "0310023", "0310024", "0310025", "0310026");
aryShu031[2] = new Array("0310031", "0310032", "0310033", "0310034", "0310035" );
aryShu031[3] = new Array("0310041", "0310042", "0310043", "0310044");
aryShu031[4] = new Array("0310051", "0310052", "0310053");

var aryShu032 = new Array();
aryShu032[0] = new Array("0320011", "0320012", "0320013");
aryShu032[1] = new Array("0320021", "0320022", "0320023", "0320024");
aryShu032[2] = new Array("0320031", "0320032", "0320033", "0320034", "0320035" );
aryShu032[3] = new Array("0320041", "0320042", "0320043", "0320044", "0320045", "0320046");

var Ku = new Array();
Ku[0] = new Array(aryShu011, aryShu012);
Ku[1] = new Array(aryShu021, aryShu022);
Ku[2] = new Array(aryShu031, aryShu032);

function aryPrint(i, j, k, pp) {
	for (var p=1; p<=pp; p++) {					//Point
		document.write( i + "Ku " + j + "Shu " + k + "Gawa " + p + "Point = " + Ku[i-1][j-1][k-1][p-1] + "<br />" );
//		document.write( i + "Ku " + j + "Shu " + k + "Gawa " + p + "Point = " + ku1[j-1][k-1][p-1] + "<br />" );
//		document.write( i + "Ku " + j + "Shu " + k + "Gawa " + p + "Point = " + ku2[j-1][k-1][p-1] + "<br />" );
//		document.write( i + "Ku " + j + "Shu " + k + "Gawa " + p + "Point = " + ku3[j-1][k-1][p-1] + "<br />" );
	}
	document.write("<br />");
}
-->
</script>
</head>

<body>
<script type="text/javascript">
document.write(1 + "Ku " + 1 + "Shu<br />");
aryPrint(1, 1, 1, 7);
aryPrint(1, 1, 2, 6);
aryPrint(1, 1, 3, 5);
aryPrint(1, 1, 4, 4);
aryPrint(1, 1, 5, 3);

document.write(1 + "Ku " + 2 + "Shu<br />");
aryPrint(1, 2, 1, 3);
aryPrint(1, 2, 2, 4);
aryPrint(1, 2, 3, 5);
aryPrint(1, 2, 4, 6);

document.write(2 + "Ku " + 1 + "Shu<br />");
aryPrint(2, 1, 1, 7);
aryPrint(2, 1, 2, 6);
aryPrint(2, 1, 3, 5);
aryPrint(2, 1, 4, 4);
aryPrint(2, 1, 5, 3);

document.write(1 + "Ku " + 2 + "Shu<br />");
aryPrint(2, 2, 1, 3);
aryPrint(2, 2, 2, 4);
aryPrint(2, 2, 3, 5);
aryPrint(2, 2, 4, 6);

document.write(3 + "Ku " + 1 + "Shu<br />");
aryPrint(3, 1, 1, 7);
aryPrint(3, 1, 2, 6);
aryPrint(3, 1, 3, 5);
aryPrint(3, 1, 4, 4);
aryPrint(3, 1, 5, 3);

document.write(3 + "Ku " + 2 + "Shu<br />");
aryPrint(3, 2, 1, 3);
aryPrint(3, 2, 2, 4);
aryPrint(3, 2, 3, 5);
aryPrint(3, 2, 4, 6);

</script>
</body>
</html>

カテゴリー: Javascript | タグ: new演算子, 多次元配列, 配列アクセス, 配列リテラル | コメントする

表示画像の変更

投稿日: 2013年11月18日作成者: 関口郁夫

<img id="kuImg" src="../images/ku_initial.png" class="full">

document.getElementById("kuImg").src = "../images/Ku_" + Num + ".png";

カテゴリー: Javascript | タグ: 切替, 画像 | コメントする

表示、非表示の変更

投稿日: 2013年11月17日作成者: 関口郁夫

<方法1>
CSSのStyleのdisplay属性のblock(表示)/none(非表示)切替を
document.getElementById(“idName”).style.display=”xxxx”;で行う。
非表示により表示時の空間がなくなり、下に続くコンテンツが繰り上がる。

<方法2>
Styleのvisivility属性のvisible(表示)/hidden(非表示)切替を
document.getElementById(“idName”).style.visibility=”XXXX”;で行う。
非表示時も表示時の空間がなくならず、下に続くコンテンツが繰り上がらない。

カテゴリー: Javascript | タグ: 表示, 非表示 | コメントする

透明背景のpng出力

投稿日: 2013年11月17日作成者: 関口郁夫

出力したい透明背景のレイヤーだけを表示状態にして

[ファイル] – [web用に保存]を選択

png-24を選択し、「透明部分」にチェックし、[保存]

カテゴリー: Adobe フォトショップ | タグ: Png, 透明背景 | コメントする

配列

投稿日: 2013年11月16日作成者: 関口郁夫

多次元配列の作成と値の読出し

二つの二次元配列

まず２次元配列を二つ用意。

列数、行数が異なっても良い。

二つの配列を結合する

２次元配列を配列で結合、３次元化する

3次元化された二つの配列

読出しは、２次元の添え字で１次元の配列が読み出され、３次元の添え字で値が読み出される。

2次元添え字で1次元配列を読み出し、3次元添え字で値を直接読み出す


<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<script type="text/javascript">
<!--
var ary1 = [ [1, 1], [2, 2], [3, 3] ];
var ary2 = [ [10, 10], [20, 20] ];
var ary = [ ary1, ary2 ];

alert("ary1 = " + ary1 + " ary2 = " + ary2);
alert("ary = " + ary);
alert("ary[1][1] = " + ary[1][1] + " ary[1][0] = " + ary[1][0] + "\nary[0][2] = " + ary[0][2] + " ary[0][1] = " + ary[0][1] + " ary[0][0] = " + ary[0][0]);
-->
</script>
</head>
<body>
<script type="text/javascript">
<!--
document.write("<p>");
for (var i = 0; i<=1; i++) {
if (i == 0) { for (var j = 0; j<=2; j++) {document.write("["+i+"]["+j+"] = " + ary[i][j] + "<br />");} }
 document.write("<br />");
if (i == 1) { for (var j = 0; j<=1; j++) {document.write("["+i+"]["+j+"] = " + ary[i][j] + "<br />");} }
}
 document.write("<br />");
document.write("<p>");
for (var i = 0; i<=1; i++) {

if (i == 0) { for (var j = 0; j<=2; j++) {
 for (var k = 0; k<=1; k++) { document.write("["+i+"]["+j+"]["+k+"] = " + ary[i][j][k] + "<br />");}
 }
}
 document.write("<br />");
if (i == 1) { for (var j = 0; j<=1; j++) {
 for (var k = 0; k<=1; k++) { document.write("["+i+"]["+j+"]["+k+"] = " + ary[i][j][k] + "<br />");}
 }
}

}

document.write("</p>");
-->
</script>
</body>
</html>

カテゴリー: Javascript | タグ: 配列 | コメントする

ソースロード後にｊQueryを実行する

投稿日: 2013年11月15日作成者: 関口郁夫

一般的にｊQueryはタグ内に記述するので、ソースのロード順にソースが実行されるとすれば、ｊQueryが何かの操作をするためにHTMLソース内のIDやクラスを参照したときに、そのIDやclassはまだロードされずにブラウザー上には存在しないことになる。
そこで、ｊQueryの実行をHTMLソースロード終了まで遅延させる記述$(function(){})が必要になる。

例えば、以下のロジックのｊQueryソースがあった場合、

<script>
    $('#sample1').hide();
</script>

という記述を、次のように変えます。

<script>
    $(function(){
    $('#sample1').hide();
    });
</script>

カテゴリー: ｊQuery | タグ: HTMLロード, 同期 | コメントする

ｊQueryの外部ファイル化

投稿日: 2013年11月15日作成者: 関口郁夫

ｊQueryはjavascriptの拡張なので、外部ファイル化もjavascriptと同じ。

外部ｊQueryファイル：script.js

$(function(){
$('#sample1').hide();
});

HTNL本体

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//
EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jqueryサンプル</title>
<script src="jquery-1.7.1.js"></script>
<script src="script.js"></script>
</head>
<body>
<ul>
  <li id="sample1">GreenDay</li>
  <li id="sample2">Oasis</li>
  <li id="sample3">Nilvana</li>
</ul>
</body>
</html>

カテゴリー: ｊQuery | タグ: 外部ファイル | コメントする

javascriptの外部ファイル化

投稿日: 2013年11月15日作成者: 関口郁夫

HTMLの中にJavaScriptを埋め込む時に使ったを記入する必要はありません。
のコメントも使えません。コメントは、 /* ~ */ で囲むか、 // を使います。
JavaScriptのソースだけを書いていきます。

保存する時に、拡張子を.jsにします。

<例＞外部jsファイル：modi.js

function koshin(){
  var hiduke=document.lastModified;
  document.write(hiduke);
}

HTML本体

<head>
  <script type="text/javascript" src="modi.js"></script>
</head>

<body>
<script>
  koshin();
</script>
</body>

カテゴリー: Javascript | タグ: 外部ファイル | コメントする

全角半角自動変換

投稿日: 2013年11月13日作成者: 関口郁夫

入力文字列の中に全角英数字と全角記号(!”#$%&'()=~^‘[@「＋＊}；：」「<>?_、。・)があったらinputBoxのフォーカスが外れたら半角に変換する。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>全角を半角に変換するサンプル</title>
<style>
body {
    margin: 20px;
}
h1 {
    font-size: 140%;
}
input {
    font-size: 120%;
    padding: 5px;
    width: 400px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
    $("#foo").change(function(){
        var str = $(this).val();
        str = str.replace( /[Ａ-Ｚａ-ｚ０-９－！”＃＄％＆’（）＝＜＞，．？＿［］｛｝＠＾～￥]/g, function(s) {
            return String.fromCharCode(s.charCodeAt(0) - 65248);
        });
        $(this).val(str);
    }).change();
});
</script>
</head>
<body>
<h1>全角を半角に変換するサンプル</h1>
<div>入力　<input type="text" id="foo" value="" /></div>
<p>フォーカスをはずすとテキストフィールド内の全角英数といくつかの記号を半角文字にします。</p>
</body>
</html>

＜使用例＞

全て全角で入力

inputBoxのフォーカスが外れると自動的半角変換

出典：入力フォームの全角・半角を勝手に変換してくれるJavaScript

カテゴリー: ウェブサイト作成の秘訣 | タグ: 全角半角変換, 自動変換 | コメントする

半角全角チェック

投稿日: 2013年11月13日作成者: 関口郁夫

入力された文字列を一文字づつ取出して半角だったらTrue、全角だったらFalseを返す。

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<script type="text/javascript">
function isHalf(chara){
	c=chara.charCodeAt(0);
	if ( (c >= 0x0 && c < 0x81) || (c == 0xf8f0) ||
	(c >= 0xff61 && c < 0xffa0) || (c >= 0xf8f1 && c < 0xf8f4)) {
		return true;
	}
	return false;
}
judge=function(){
	val=document.getElementById("inputext").value;
	ret="";
	for(i=0;i<val.length;i++){
		chara=val.charAt(i);
		ret+="("+chara+":"+isHalf(chara)+")";
	}
	document.getElementById("result").value=ret;
	//alert(ret);
}
</script>
<title></title>
</head>
<body>
<input type="text" size="10" id="inputext">
<button id="judge" onclick="judge()">Judge</button><br>
<textarea id="result" cols="50" rows="10"></textarea>
</body>
</html>


＜実行例＞
 
 
 
出典：JavaScriptで半角と全角を判定する

カテゴリー: ウェブサイト作成の秘訣 | タグ: 半角全角チェック | コメントする