Hatena::ブログ(Diary)

はけの徒然日記 このページをアンテナに追加 RSSフィード

2005 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2006 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2007 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2008 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2009 | 01 | 02 | 04 | 05 | 08 | 09 | 10 | 12 |
2010 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 10 | 11 |
2011 | 01 | 02 | 03 | 04 | 11 | 12 |
2012 | 02 | 03 | 05 |
2014 | 02 | 03 | 04 | 05 | 12 |
2015 | 05 | 07 | 08 | 09 | 10 | 11 | 12 |
2016 | 01 | 02 | 04 | 05 | 08 | 09 | 11 | 12 |
2017 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 10 |
2018 | 02 | 03 | 04 | 05 |

2015-05-17(Sun)

javascript ノードの動的操作

SELECTタグスクリプトで子ノードとしてOPTIONタグ要素を追加して、その属性値を表示する。

追加する要素は、createElement()で作成し、appendChild()で追加、removeChiled()で削除する。

全ての子ノードの確認は、firstChild()とnextSibling()をfor文(あるいはwhile文)で使用する。子ノードを全て削除するのに、同様にfor文で試したが上手くいかなかったので、firstChild()がnullになるまでwhile文で繰り返す様にした。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>ノードの動的操作</title>
<script type="text/javascript">

	var items = [["item1","項目1"]
		, ["item2","項目2"]
		, ["item3","項目3"]
		];

	function print(str){
		var r = document.getElementById("result");
		var s = str + "<br>";
		r.innerHTML += s;
	}

	// 表示領域クリア
	function print_clr(){
		var r = document.getElementById("result");
		r.innerHTML = '';
	}

	// 子ノード情報表示
	function print_node(){
		var p = document.getElementById("sel");
		// selectタグの属性情報表示
		print("typeof Node -> " + typeof(p));
		print("nodeName  ->" + p.nodeName);
		print("nodeType  ->" + p.nodeType);
		print("nodeValue ->" + p.nodeValue);
		print("value     ->" + p.value);      // 選択されている子ノードのvalue値
		print("tagName   ->" + p.tagName);

		print("---");
		print("子ノード属性確認");
		var it;

		// 終了条件が、!itではうまくいかない。
		for(it = p.firstChild; it != null; it = it.nextSibling){
			print("---")
			if(it.selected){
				print("selected!!");
			}
			print("tagName   ->" + it.tagName);
			print("value     ->" + it.value);
			print("innerText ->" + it.innerText);
		}
	}

	// 子ノード(OPTIONタグ)追加
	function appned_node(){
		var p = document.getElementById("sel");
		var e;
		var idx;
		for(idx = 0; idx < items.length; idx++){
			// optionタグ(要素)作成
			e = document.createElement("option");
			e.value = items[idx][0];
			e.textContent = items[idx][1];
			// 子ノードとして追加
			p.appendChild(e);
		}
	}

	// 子ノード削除
	function remove_node(){
		var p = document.getElementById("sel");
		var it;
		// 子ノードを全て削除する。
		// print_node()と同様のfor文ではうまくいかない。
		while((it = p.firstChild) != null){
			p.removeChild(it);
		}
	}

	window.onload = function(){
		p = document.getElementsByName("menu")[0];
		// selectタグの属性情報表示
		print("typeof Node -> " + typeof(p));
		print("nodeName  ->" + p.nodeName);
		print("nodeType  ->" + p.nodeType);
		print("nodeValue ->" + p.nodeValue);
		print("value     ->" + p.value);      // 何も選択されていないとvalue属性がない。
		print("tagName   ->" + p.tagName);
	}

</script>
</head>
<body>
	<select name="menu" id="sel" value="セレクトメニュー"></select><br>
	<button onclick="appned_node()">子ノード追加</button>
	<button onclick="remove_node()">子ノード削除</button>
	<button onclick="print_node()" >親子ノード属性確認</button>
	<button onclick="print_clr()"  >表示クリア</button><br>
	結果:
	<div name="name" id="result"></div>
</body>
</html>

起動時

結果: 
typeof Node -> object
nodeName ->SELECT
nodeType ->1
nodeValue ->null
value ->
tagName ->SELECT

子ノード追加後

結果: 
typeof Node -> object
nodeName ->SELECT
nodeType ->1
nodeValue ->null
value ->item1
tagName ->SELECT
---
子ノード属性確認
---
selected!!
tagName ->OPTION
value ->item1
innerText ->項目1
---
tagName ->OPTION
value ->item2
innerText ->項目2
---
tagName ->OPTION
value ->item3
innerText ->項目3

2015-05-16(Sat)

javascript 何をfalseと判定するか

if文などの条件に渡されたときにfalseと判定されるもの

<!DOCTYPE html>
<html lang='ja'>
<head>
	<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
	<title>false判定</title>
	<script type="text/javascript">

	function print(str){
		var s = str + '<br>';
		document.getElementById('result').innerHTML += s;
	}

	function check_bool(v){
		if(v){ return "true";}
		return "false";
	}


	window.onload = function(){
		var u;
		var i = parseInt("hoge");

		print("true  -> "  + check_bool(true));
		print("false -> " + check_bool(false));
		print("null  -> " + check_bool(null));
		print("undefined -> " + check_bool(u));
		print("NaN -> " + check_bool(i));
		print("1  -> " + check_bool(1));
		print("0  -> " + check_bool(0));
		print("-1 -> " + check_bool(-1));
		print("[] -> " + check_bool([]));
		print("{} -> " + check_bool({}));
		print("\"foo\" -> " + check_bool("foo"));
		print("\"\" -> " + check_bool(""));

	}

</script>
</head>
<body>
結果<br>
<div id='result'></div>
</body>
</html>

結果

結果
true -> true
false -> false
null -> false
undefined -> false
NaN -> false
1 -> true
0 -> false
-1 -> true
[] -> true
{} -> true
"foo" -> true
"" -> false

2015-05-14(Thu)

javascript Windows環境でのローカルPCのフォルダアクセス

fso.GetFolder()でFolderオブジェクトを取得して、そのプロパティにて各種情報アクセスする。filesプロパティではサブフォルダの要素が取得できないことに注意、SubFoldersプロパティを使用する。

<!DOCTYPE html>
<html lang='ja'>
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>ローカルフォルダ内のファイルリスト表示(IEのみ)</title>
<script type="text/javascript">

	function print(str){
		var s = str + '<br>';
		document.getElementById('result').innerHTML += s;
	}

	window.onload = function(){
		var fso, fd, fs, it;
		var target = 'c:\\work\\javascript';

		fso = new ActiveXObject('Scripting.FileSystemObject');

		// https://msdn.microsoft.com/ja-jp/library/cc428096.aspx
		fd = fso.GetFolder(target); // 指定フォルダのFolderオブジェクトを返す。
		print('FolderName : ' + fd.Name);
		print('FolderPath : ' + fd.Path);
		print('---');
		print('ParentFolderPath : ' + fd.ParentFolder.Path);

		//ファイルリスト表示
		print('--Files--');
		fs = fd.files;            // フォルダ内のFileコレクションを返す。
		for (it = new Enumerator(fs); !it.atEnd(); it.moveNext()){
			print(it.item());
		}

		//サブフォルダリスト表示
		print('--Sub Folders-');
		fs = fd.SubFolders;       // フォルダ内のFoldersコレクションを返す。
		for (it = new Enumerator(fs); !it.atEnd(); it.moveNext()){
			print(it.item());
		}
	}

</script>
</head>
<body>
結果<br>
<div id='result'></div>
</body>
</html>

2015-05-13(Wed)

javascript 正規表現

文字列正規表現マッチするかの判断には、RegExp.test()を使用し、置換はString.replace()を使用する。


正規表現マッチした文字列の取得は、String.match()かRegExp.exec()を使用する。正規表現にgオプションを使用していない場合、両者とも最初マッチした文字列を返す。正規表現にgオプションを使用している場合は、String.match()はマッチした文字列配列を返す。RegExp.exec()は実行する毎にマッチした文字列を返し、マッチしなくなった場合nullを返す。

正規表現にキャプチャの記述がある場合には、String.match(/re/g)以外は返った配列の2番目以降にキャプチャされた文字列が入る。

<!DOCTYPE html>
<html lang='ja'>
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>正規表現テスト</title>
<script type="text/javascript">

	function print(str){
		var s = str + '<br>';
		document.getElementById('result').innerHTML += s;
	}

	window.onload = function(){
		var src = 'ababcabcd';
		var re  = /a[^a]+/;
		var rec  = /a([^a]+)/;  // キャプチャー有
		var reg = /a[^a]+/g;
		var recg = /a([^a]+)/g;  // キャプチャー有
		var result;

		print('src : ababcabcd');
		print('re  : a[^a]+');
		print('rec : a([^a]+)');


		print('');
		print('- test -');
		// test
		result = re.test(src);
		print('/re/.test(src) -> ' + result);


		print('');
		print('- exec -');
		// exec
		result = re.exec(src);
		print('/re/.exec(src)  -> ' + result);

		result = reg.exec(src);   // resultには最初にマッチした文字列が返る。
		print('/re/g.exec(src) 1st -> ' + result);
		result = reg.exec(src);   // resultには2番目にマッチした文字列が返る。
		print('/re/g.exec(src) 2nd -> ' + result);
		result = reg.exec(src);   // resultには3番目にマッチした文字列が返る。
		print('/re/g.exec(src) 3rd -> ' + result);
		result = reg.exec(src);   // マッチする文字列が無いのでnullが返る。
		print('/re/g.exec(src) 4th -> ' + result);

		print('');
		print(' キャプチャ有');
		result = rec.exec(src);// resultにはマッチした文字列とキャプチャ文字列の配列が返る。
		print('/rec/.exec(src)  -> ' + result);

		result = recg.exec(src);   // resultには最初にマッチした文字列とキャプチャ文字列の配列が返る。
		print('/rec/g.exec(src) 1st -> ' + result);
		result = recg.exec(src);   // resultには2番目にマッチした文字列とキャプチャ文字列の配列が返る。
		print('/rec/g.exec(src) 2nd -> ' + result);
		result = recg.exec(src);   // resultには3番目にマッチした文字列とキャプチャ文字列の配列が返る。
		print('/rec/g.exec(src) 3rd -> ' + result);
		result = recg.exec(src);   // マッチする文字列が無いのでnullが返る。
		print('/rec/g.exec(src) 4th -> ' + result);


		print('');
		print('- match -');
		// match
		result = src.match(re);// resultにはマッチした文字列が入る。
		print('src.match(/re/)  -> ' + result);
		result = src.match(reg);  // resultにはマッチした文字列の配列が返る。
		print('src.match(/re/g) -> ' + result);

		print('');
		print(' キャプチャ有');
		result = src.match(rec); // resultにはマッチした文字列とキャプチャ文字列の配列が返る。
		print('src.match(/rec/)  -> ' + result);
		result = src.match(recg);  // resultにはマッチした文字列の配列が返る。
		print('src.match(/rec/g) -> ' + result);


		print('');
		print('- replace -');
		// replace
		print('src.replace(/re/,"0")  -> ' + src.replace(re, '0'));
		print('src.replace(/re/g,"0") -> ' + src.replace(reg, '0'));

	}

</script>
</head>
<body>
結果<br>
<div id='result'></div>
</body>
</html>

結果

結果

src : ababcabcd
re : a[^a]+
rec : a([^a]+)

- test -
/re/.test(src) -> true

- exec -
/re/.exec(src) -> ab
/re/g.exec(src) 1st -> ab
/re/g.exec(src) 2nd -> abc
/re/g.exec(src) 3rd -> abcd
/re/g.exec(src) 4th -> null

 キャプチャ有
/rec/.exec(src) -> ab,b
/rec/g.exec(src) 1st -> ab,b
/rec/g.exec(src) 2nd -> abc,bc
/rec/g.exec(src) 3rd -> abcd,bcd
/rec/g.exec(src) 4th -> null

- match -
src.match(/re/) -> ab
src.match(/re/g) -> ab,abc,abcd

 キャプチャ有
src.match(/rec/) -> ab,b
src.match(/rec/g) -> ab,abc,abcd

- replace -
src.replace(/re/,"0") -> 0abcabcd
src.replace(/re/g,"0") -> 000

2015-05-10(Sun)

javascript 子ウィンドウとのデータのやりとり

ウィンドウデータのやり取りを行う方法2つ。

  • showModal(Modeless)Dialogを使用する方法IEのみで動作?)
    • 親→子:showModalDialogの第二引数を使用する。
    • 子→親:変数returnValueを使用する。
    • ウィンドウを右上×で閉じた場合にはreturnValueはundefinedになる。

main.html

<!DOCTYPE html>
<html lang='ja'>
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>子ウィンドウとのデータやり取り</title>
<script type="text/javascript">

	var obj = {opt1 : 1, opt2 : 'foo'};

	// showModalDialogを使用
	function open_window1(){
		var ret = 'no data';
		ret = showModalDialog('05_child1.html',this,'dialogWidth:480px,dialogHeight:120px');
//		ret = showModalDialog('05_child1.html',this.document.getElementById('result1').innerText
//									,'dialogWidth:480px,dialogHeight:120px');
		document.getElementById('result1').innerText = ret;
	}

	// window.openを使用
	function open_window2(){
		window.open('05_child2.html','sub','width:480,height:120');
	}
</script>
</head>
<body>
	<button onclick='open_window1()'>開く(showModalDialog)</button><br>
	子ウィンドウの文字列:<span id='result1'>何か入力してください。</span><br>
	<br>
	<button onclick='open_window2()'>開く(window.open)</button><br>
	子ウィンドウの文字列:<span id='result2'>何か入力してください。</span><br>


</body>
</html>

child1.html

<!DOCTYPE html>
<html lang='ja'>
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>子ウィンドウ(showModalDialog)</title>
<script type="text/javascript">
	function close_window(){
		var ret;
		returnValue = document.getElementById('txt').value;
		this.close();
	}

	window.onload=function(){
		var opener = window.dialogArguments;
		var v = opener.document.getElementById('result1').innerText;
//		var v = window.dialogArguments;

		document.getElementById('txt').value  = v;
	}
</script>
</head>
<body>
	<input type='text' id='txt' style='width:320px;'>
	<button onclick='close_window()'>閉じる</button><br>

</body>
</html>

child2.html

<!DOCTYPE html>
<html lang='ja'>
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>子ウィンドウ(window.open)</title>
<script type="text/javascript">
	function close_window(){
		var ret;
		ret = document.getElementById('txt').value;
		this.opener.document.getElementById('result2').innerText = ret;
		this.close();
	}

	window.onload=function(){
		var v = this.opener.document.getElementById('result2').innerText;
		document.getElementById('txt').value  = v;
		v = this.opener.window;
		document.getElementById('obj1').value  = v.obj.opt1;
		document.getElementById('obj2').value  = v.obj.opt2;

	}
</script>
</head>
<body>
	<input type='text' id='txt' style='width:320px;'><br>
	<input type='text' id='obj1' readonly style='width:320px;'><br>
	<input type='text' id='obj2' readonly style='width:320px;'><br>
	<button onclick='close_window()'>閉じる</button><br>

</body>
</html>

2015-05-06(Wed)

javascript イベントハンドラの動的な追加と削除

関数名の記述について、add(remove)EventListenerの引数では括弧()があると上手く動作しない。また、buttonタグのonlick属性では括弧()が無いとダメ。クォートで囲む場合は括弧()が必要ということ?

add(remove)EventListenerの第3引数はとりあえずfalseにしておく。

あとhtaでは、add(remove)EventListenerは使用できないので、attach(detach)Eventを使用する。この場合引数イベント名はclickではなくonclick。

またhtaではtextarea内の改行が使用できない。

<!DOCTYPE html>
<html lang='ja'>
<head>
	<meta http-equiv="content-type" content="text/html; charset=shift_jis">
	<script type="text/javascript">
		function print(s){
			var t = document.getElementById('disp');
			t.innerHTML = t.innerHTML + s + '&#13;'; // '&#13;'はTEXTAREA内の改行
		}

		function hello(){
			print('Hello World!');
		}

		function add_event(){
			document.getElementById('btn').addEventListener('click', hello, false);
			//document.getElementById('btn').attachEvent('onclick', hello);
			alert('イベントハンドラを追加しました。');
		}

		function remove_event(){
			document.getElementById('btn').removeEventListener('click', hello, false);
			//document.getElementById('btn').detachEvent('onclick', hello);
			alert('イベントハンドラを削除しました。');
		}


//		window.onload = function(){
//			document.getElementById('btn').addEventListener('click', hello, false);
//			alert('onload イベントが発生しました。');
//		}
	</script>
</head>
<body>
	<textarea id='disp' rows='10' cols='40'></textarea><br>
	<button id='btn'>Hello</button><br>
	<button onclick='add_event()'>イベント追加</button>
	<button onclick='remove_event()'>イベント削除</button>

</body>
</html>

2015-05-05(Tue)

javascript Windows環境でローカルPCからテキストファイルの読み込み

一括で読み込む場合と一行ずつ読み込む場合記載

<!DOCTYPE html>
<html lang='ja'>
<head>
	<meta http-equiv="content-type" content="text/html; charset=shift_jis">
	<script type="text/javascript">

	var file;

	// http://msdn.microsoft.com/ja-jp/library/cc428044.aspx
	// OpenTextFile メソッド
	var forReading, forWriting, forAppending
	var tristateUseDefault, tristateTrue, tristateFalse
	//第2引数 ファイル入出力モード
	forReading   = 1;
	forWriting   = 2;
	forAppending = 8;

	// 一括で読み込み
	// https://msdn.microsoft.com/ja-jp/library/cc428049.aspx
	function readAll(filename) {
		var fsi = new ActiveXObject('Scripting.FileSystemObject');
		var file = fsi.OpenTextFile(filename, forReading);
		var s = file.ReadAll();
		file.Close();
		alert(s);
	}

	// 一行ずつ読み込み
	// https://msdn.microsoft.com/ja-jp/library/cc428051.aspx
	// https://msdn.microsoft.com/ja-jp/library/cc428128.aspx
	function readLine(filename) {
		var fsi = new ActiveXObject('Scripting.FileSystemObject');
		var file = fsi.OpenTextFile(filename, forReading);
		var s;
		while(!file.AtEndOfStream){
			s = file.ReadLine();
			alert(s);
		}
		file.Close();
	}

	file = 'C:\\work\\javascript\\test.txt'
	readAll(file);
	readLine(file);

	</script>
</head>
</html>

2015-05-04(Mon)

javascript 部品の配置

style属性、またはstylesheetで、position:absolute, top, left(right), width, heightを設定すると好きな位置に配置できる。

calc.html

<!DOCTYPE HTML>
<html lang='ja'>
<head>
	<meta http-equiv='content-type' content='text/html; charset=Shift_JIS'>
	<link rel='stylesheet' type='text/css' href='./calc.css'>
	<title>簡易電卓</title>
	<script type="text/javascript" src="./calc.js" charset="Shift_JIS">
	</script>
	</head>
<body onload='init()'>
	<input type='text' id='disp'
		style='font-size:x-large; position:absolute; top:10px; left:100px; width:196px; text-align:right;'>
	<input type='button' value='AC' onclick='init()' class='btn' style='top: 40px; left:100px;'>

	<input type='button' value='7' onclick='push_num("7")' class='btn' style='top: 90px; left:100px;'>
	<input type='button' value='8' onclick='push_num("8")' class='btn' style='top: 90px; left:150px;'>
	<input type='button' value='9' onclick='push_num("9")' class='btn' style='top: 90px; left:200px;'>
	<input type='button' value='/' onclick='push_op("/")'  class='btn' style='top: 90px; left:250px;'>

	<input type='button' value='4' onclick='push_num("4")' class='btn' style='top: 140px; left:100px;'>
	<input type='button' value='5' onclick='push_num("5")' class='btn' style='top: 140px; left:150px;'>
	<input type='button' value='6' onclick='push_num("6")' class='btn' style='top: 140px; left:200px;'>
	<input type='button' value='*' onclick='push_op("*")'  class='btn' style='top: 140px; left:250px;'>

	<input type='button' value='1' onclick='push_num("1")' class='btn' style='top: 190px; left:100px;'>
	<input type='button' value='2' onclick='push_num("2")' class='btn' style='top: 190px; left:150px;'>
	<input type='button' value='3' onclick='push_num("3")' class='btn' style='top: 190px; left:200px;'>
	<input type='button' value='-' onclick='push_op("-")'  class='btn' style='top: 190px; left:250px;'>

	<input type='button' value='0' onclick='push_num("0")'   class='btn' style='top: 240px; left:100px;'>
	<input type='button' value='.' onclick='push_point()' class='btn' style='top: 240px; left:150px;'>
	<input type='button' value='=' onclick='push_eq()'    class='btn' style='top: 240px; left:200px;'>
	<input type='button' value='+' onclick='push_op("+")'    class='btn' style='top: 240px; left:250px;'>
</body>
</html>

calc.css

.btn {
	position: absolute;
	width:50px;
	height:50px;
}

calc.js

続きを読む

javascript Windows環境でローカルPCへのテキストファイルの作成保存

htmlでもhtaでも動作する。

ActiveXを使用するのでhtmlIEで実行させた場合には、実行時に警告がでる。

また、OpenTextFile メソッド引数の定義を定数(const)にしたところhtaで動作しなかったので変数としました。

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=shift_jis">
	<script type="text/javascript">

	var file;

	// http://msdn.microsoft.com/ja-jp/library/cc428044.aspx
	// OpenTextFile メソッド
	var forReading, forWriting, forAppending
	var tristateUseDefault, tristateTrue, tristateFalse
	//第2引数 ファイル入出力モード
	forReading   = 1;
	forWriting   = 2;
	forAppending = 8;
	//第3引数 ファイルが存在しない場合新規ファイルを作成するか否か(省略時は否:false)
	//第4引数 ファイル形式(省略時は、0)
	tristateUseDefault = -2;   //システムデフォルト(Shift_JIS)
	tristateTrue       = -1;   //Unicodeファイル
	tristateFalse      =  0;   //ASCII 

	function writeAll(filename, content) {
		var fso = new ActiveXObject('Scripting.FileSystemObject');
		var file = fso.OpenTextFile(filename, forWriting, true, tristateUseDefault);
		file.Write(content);
		file.Close();
		alert('書き込み終了');
	}

	function appendLine(filename, first, second) {
		var fso = new ActiveXObject('Scripting.FileSystemObject');
		var file = fso.OpenTextFile(filename, forAppending, true, tristateUseDefault);
		file.WriteLine(first);
		file.WriteLine(second);
		file.Close();
		alert('書き込み終了');
	}

	file = 'C:\\work\\javascript\\test.txt'
	writeAll(file, 'この文章をテキストファイルに書き込みます。\n');
	appendLine(file, '追加行1行目', '追加行2行目');

	</script>
</head>
</html>