Form／selectの値を調べる

selectの値を調べるには下記のようにする
<!--
function jump(){
var TXT=""
obj=document.jumpform.urlMenu;
TXT=obj.options[obj.selectedIndex].value;
url="menu"+TXT+".html";
location.href=url;
}

HTMLは。。。
<form name="jumpform">
<select name="urlMenu" onchange="jump()">
<option value="" SELECTED>選んでね。</OPTION>
<option value="00">00年</OPTION>
<option value="01">01年</OPTION>
<option value="02">02年</OPTION>
<option value="03A">03年前半</OPTION>
<option value="03B">03年後半</OPTION>
<option value="04A">04年前半</OPTION>
</select>
</form>

TOPへ

JavaScript基本／イベントで呼び出し

function myfnc(){
    alert();
}

onclick="myfnc()"
ondblclick="myfnc()"
onmousedown="myfnc()"
onmouseup="myfnc()"
onmouseover="myfnc()"
onmouseout="myfnc()"
onmousemove="myfnc()"

TOPへ

JavaScript基本／スクリプトタグの書き方

<script type="text/javascript">
<!--
function my_test(){
    alert("test");
}
//-->
</script>

TOPへ

JavaScript基本／タイマーで呼び出し

window.setTimeout("JS", int) 

intミリ秒後に指定した処理を行います。
JS にJavaScript の構文か関数名を記述します。

function test() {
	alert("一秒後にもう一回");
	setTimeout("test()", 1000);
}

window.setInterval("JS", int)
指定した処理が intミリ秒毎に定期的に実行。

TOPへ

JavaScript基本／ボタンから呼び出し

<input type="button" value="テスト" onclick="my_test()" />

TOPへ

JavaScript基本／リンクから呼び出し

<a href="javascript:submitgo('1');">

TOPへ

JavaScript基本／ロード時に呼び出し

<script type="text/javascript" language="JavaScript">
<!--
function jump()
{
	location.href = "./index.php";
}
// -->
</script>

<body bgcolor="#ffffff" text="#191919" onLoad="setTimeout('jump()',500)">

この例ではロードされてからjump()が呼び出される。

TOPへ

Math／abs

絶対値
aryNum=Math.abs(ary[N]);

TOPへ

String／length

myStr="123456";
num=myStr.length;

文字列の長さを調べます。

TOPへ

String／match

myStr="123abc456def";
if (myStr.match(/456/i)) {
	alert("456");
}

iはオプション

オプション
i=大文字小文字を区別しない
g=2番目、3番目も検索する
m=複数行検索

TOPへ

String／replace

myStr="あれこれいろいろ";
KEKKA=myStr.replace(正規表現, 置換文字列) ;

TOPへ

String／split

myStr="123456";
myStr2=myStr.substr(0 ,2)

結果"12"


最初の文字を 0 番目。
から2つめの引数文字分返します。
負の値を指定すると後ろから数えます。

TOPへ

String／substr

myStr="123456";
myStr2=myStr.substr(0 ,2)

結果"12"


最初の文字を 0 番目。
から2つめの引数文字分返します。
負の値を指定すると後ろから数えます。

TOPへ

String／文字列を数値に変換する

文字列を数値に変換する

myNum = parseInt("500");
myNum = parseFloat("500");
myNum = Number("500");
myNum = "500" - 0;

TOPへ

Window／history.back

onClick="JavaScript:window.history.back()"

TOPへ

Window／location

window.location.href="takenote/index.html";

menuというFrameに行う場合は
top.menu.location.href = "menu.html";




再読込は
window.location.reload

TOPへ

Window／open

w=window.open('demoimg/k-tai.html','_blank','width=250,height=600,scrollbars=yes');

TOPへ

Window／print

window.print()
印刷を開始。

TOPへ

Window／reset

onClick="reset()"

TOPへ

オブジェクト指定／document.all(id)

document.all(id).style.color=ff0000;
document.all.item(id).style.color=ff0000;
はSafariで動かなかったので×

Safariでは下記のように書く
document.getElementById('1-0').style.color=ff0000;

このようにしてオブジェクトを指定する。

TOPへ

オブジェクト指定／getElementById

document.getElementById('1-0').style.color=ff0000;

このようにしてオブジェクトを指定する。

document.all(id)
document.all.item(id)
はSafariで動かなかったので×

TOPへ

サンプル／疑似エクスプローラ

<html>
<head>
<title>ツリー練習</title>
<style type="text/css">
<!--
a{font-size:"12px";color:"#0000ff";}
a:Visited{font-size:"12px";color:"#880000";}
a:Active{font-size:"12px";color:"#ff0000";}
a:hover{font-size:"12px";color:"#ff0000";}i
-->
</style>
<script type="text/javascript">
<!--
myAry=new Array(2);
myAry[1]=new Array(3);
myAry[2]=new Array(3);
myAry[1][0]=1;
myAry[1][1]=0;
myAry[1][2]=0;
myAry[1][3]=0;
myAry[2][0]=1;
myAry[2][1]=0;
myAry[2][2]=0;
myAry[2][3]=0;
function setPos(){
Ypos=10;
Xpos=10;
W=20;
H=15;
for(N=1;N<=2;N++)
{
for(i=0;i<=3;i++)
{
	name=N+"-"+i;
	if(document.getElementById(name) != null){
	if(myAry[N][i]==1){
		document.all(name).style.visibility="visible";
		document.all(name).style.position="absolute";
		document.all(name).style.top=Ypos;
		if(i==0){
			document.all(name).style.left=Xpos;
		}else{
			document.all(name).style.left=Xpos+W;
		}
		Ypos=Ypos+H;
	}else{
		document.all(name).style.visibility="hidden";
		document.all(name).style.position="absolute";
	}
	}
}
}
	//document.all.text1.style.visibility="hidden";
}
function mclick1(num){
//alert();
for(i=1;i<=3;i++)
{
	name=num+"-"+i;
//	alert(name);
	if(myAry[num][i]==1){
	myAry[num][i]=0
	}else{
	myAry[num][i]=1
	}
	//alert("1-"+i+"="+myAry[1,i]+"/"+"2-"+i+"="+myAry[2,i]);
}
	setPos();
}
//-->
</script>
</head>
<body onLoad="setPos()">
<div name="text1" id="1-0">
<a href="javascript:void(0);" onclick="mclick1('1')">+list1</a>
</div>
<div id="1-1">
<a href="javascript:void(0);">+list1-1</a>
</div>
<div id="1-2">
<a href="javascript:void(0);">+list1-2</a>
</div>
<div id="1-3">
<a href="javascript:void(0);">+list1-3</a>
</div>

<div id="2-0">
<a href="javascript:void(0);" onclick="mclick1('2')">+list2</a>
</div>
<div id="2-1">
<a href="javascript:void(0);">+list2-1</a>
</div>
<div id="2-2">
<a href="javascript:void(0);">+list2-2</a>
</div>
<div id="2-3">
<a href="javascript:void(0);">+list2-3</a>
</div>
</body>
</html>

TOPへ

基本の基本／01_01画面に出力

<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
	document.write("Hello World!!");
//-->
</script>
</body>
</html>

TOPへ

基本の基本／01_02画面に出力

<html>
<head>
<title>サンプル</title>
</head>
<body>
<script type="text/javascript">
<!--
dd = new Date();
document.write(dd.toLocaleString());
// -->
</script>
</body>
</html>

TOPへ

基本の基本／01_03画面に出力

<html>
<head>
<script type="text/javascript">
<!--
function setDate() {
	myDate = new Date();
	document.form1.timefield.value = myDate.getYear()+"/"+myDate.getMonth()+"/"+myDate.getDate()+"/"+myDate.getHours()+":"+myDate.getMinutes()+":"+myDate.getSeconds()+":"+myDate.getMilliseconds();
	window.setTimeout("setDate()", 1);
}
// -->
</script>
</head>
<body onload="setDate()">
<form name="form1" action="#">
<input type="text" name="timefield" size=50>
</form>
</body>
</html>

TOPへ

基本の基本／02_01変数1

<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
	X=2;
	Y=3;
	Z=X+Y;
	document.write(Z);
//-->
</script>
</body>
</html>

TOPへ

基本の基本／02_02変数2

<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
	Str="こんにちは";
	document.write(Str);
//-->
</script>
</body>
</html>

TOPへ

基本の基本／02_03変数3

<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
	Str="こんにちは";
	Name="たけうち";
	document.write(Str+Name+"です");
//-->
</script>
</body>
</html>

TOPへ

基本の基本／03_01if文

<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
	num=50;
	if (num < 10) {
		document.write("10より小さい");
	} else {
		document.write("10より大きい");
	}
//-->
</script>
</body>
</html>

TOPへ

基本の基本／03_02else if文

<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
	num=10;
	if (num < 10) {
		document.write("10より小さい");
	} else if(num==10){
		document.write("10です");
	} else {
		document.write("10より大きい");
	}
//-->
</script>
</body>
</html>

TOPへ

基本の基本／03_03-1switch文

<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
	num=3;
	switch(num){
	case 1:
		document.write("1です。");
		break;
	case 2:
		document.write("2です。");
		break;
	case 3:
		document.write("3です。");
		break;
	case 4:
		document.write("4です。");
		break;
	case 5:
		document.write("5です。");
		break;
	default:
		document.write("1～5以外です。");
	}
//-->
</script>
</body>
</html>

TOPへ

基本の基本／03_03-2参考にswitch文なしで

<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
	num=3;
	document.write(num+"です。");
//-->
</script>
</body>
</html>

TOPへ

基本の基本／03_04whileを使った繰り返し

<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
	num=0;
	while(num<10){
		document.write(num+"です。");
		num=num+1;
	}
//-->
</script>
</body>
</html>

TOPへ

基本の基本／03_05forを使った繰り返し

<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
	for(num=0;num<10;num++){
		document.write(num+"です。");
	}
//-->
</script>
</body>
</html>

TOPへ

基本の基本／04_01九九

<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
	for(num=1;num<10;num++){
		for(num2=1;num2<10;num2++){
			document.write(num+"×"+num2+"＝"+num*num2+"
");
		}
	}
//-->
</script>
</body>
</html>

TOPへ

基本の基本／04_02カレンダー1

<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
	day=1;//日
	for(num=1;num<7;num++){
		for(num2=1;num2<8;num2++){
			if(day>0 && day<32){
				if(day<10){
					day="0"+day;
				}
				document.write(day+" ");
			}
			day++;
		}
		document.write("
");
	}
//-->
</script>
</body>
</html>

TOPへ

基本の基本／04_03カレンダー2

<html>
<head>
</head>
<body>
<table>
<script type="text/javascript">
<!--
	year=2004;
	mon=5;
	document.write(year+"年"+mon+"月");
	document.write("<tr><td>日</td><td>月</td><td>火</td><td>水</td><td>木</td><td>金</td><td>土</td></tr>");
	date=new Date(year,mon,1);//木
	youbi=date.getDay();
	switch(youbi){
	case 0:youbi="金";document.write("<tr><td colspan='5'>
</td>");break;
	case 1:youbi="土";document.write("<tr><td colspan='6'>
</td>");break;
	case 2:youbi="日";document.write("<tr>");break;
	case 3:youbi="月";document.write("<tr><td>
</td>");break;
	case 4:youbi="火";document.write("<tr><td colspan='2'>
</td>");break;
	case 5:youbi="水";document.write("<tr><td colspan='3'>
</td>");break;
	case 6:youbi="木";document.write("<tr><td colspan='4'>
</td>");break;
	}
	allDay=31;
	if(mon==4 || mon==6 || mon==9 || mon==11){allDay=30;}
	else if(mon==2 && year % 4 ==0){allDay=28;}
	else if(mon==2){allDay=29;}
	for(day=1;day<allDay+1;day++){
		document.write("<td>"+day+"</td>");
		if(new Date(year,mon,day).getDay()==1){document.write("</tr><tr>");}
	}
//-->
</script>
</table>
</body>
</html>

TOPへ

基本の基本／05_01関数

関数
	Adnum=Number(Astr)//文字列を数値にする
	Anum=parseInt(Astr)//文字列を整数にする
	val=eval("1+5+6+7+8+9");//文字列を計算する
	myStr=prompt("計算式を入力して下さい");//たずねる
関数サンプル1	
<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
	Astr="1.5";
	Bstr="3.3";
	document.write(Astr+Bstr);
	document.write("
");
	
	Adnum=Number(Astr)//文字列を数値にする
	Bdnum=Number(Bstr)//文字列を数値にする
	document.write(Adnum+Bdnum);
	document.write("
");
	
	Anum=parseInt(Astr)//文字列を整数にする
	Bnum=parseInt(Bstr)//文字列を整数にする
	document.write(Anum+Bnum);
	document.write("
");
//-->
</script>
</body>
</html>

TOPへ

基本の基本／05_02関数

関数サンプル2
<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
	myStr="1+2+3+4+5+6+7+8+9+10";
	document.write(myStr);
	document.write("
");
	
	val=eval(myStr);//文字列を整数にする
	document.write(val);
	document.write("
");
	
	myStr=prompt("計算式を入力して下さい");
	val=eval(myStr);//文字列を整数にする
	document.write(val);
	document.write("
");
//-->
</script>
</body>
</html>

TOPへ

基本の基本／05_03自作関数

サンプル簡易電卓1
<html>
<head>
<script type="text/javascript">
<!--
	function KEISAN(myStr){
		//alert(myStr);//警告をだす。
		val=eval(myStr);//文字列を整数にする
		document.all('out').value=val;
	}
//-->
</script>
</head>
<body>
<form name="form1">
簡易電卓
<input type="text" name="in" value="計算式を入力して下さい。">
<input type="button" value="計算する" onClick="KEISAN(document.all('in').value);">
<input type="text" name="out" value="答えが入ります">
</form>
</body>
</html>

TOPへ

基本の基本／05_03自作関数

サンプル簡易電卓2
<html>
<head>
<script type="text/javascript">
<!--
	function HENKAN(myStr){
		//alert(myStr);//警告をだす。
		myAry=myStr.split("\r\n");//改行区切りで分割するWindows
		myAry=myStr.split("\r");//改行区切りで分割するMac
		myStr2=myAry.join("+");//分割した文字を"+"という文字で連結する
		//alert(myStr2);//警告をだす。
		return myStr2;
	}

	function KEISAN(myStr){
		myStr2=HENKAN(myStr);
		val=eval(myStr2);//文字列を整数にする
		document.all('out').value=val;
	}
//-->
</script>
</head>
<body>
<form name="form1">
簡易電卓（下に改行区切りで入力して下さい）

<textarea name="in" cols="10" rows="10" wrap="VIRTUAL"></textarea>
<input type="button" value="計算する" onClick="KEISAN(document.all('in').value);">

<input type="text" name="out" value="答えが入ります">
</form>
</body>
</html>

TOPへ

基本の基本／06_01配列

配列サンプル1
<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
	youbi=prompt("何曜日から始めますか\n月=1火=2水=3木=4金=5土=6日=7");
	youbiAry= new Array(7);
	youbiAry[1]="月";
	youbiAry[2]="火";
	youbiAry[3]="水";
	youbiAry[4]="木";
	youbiAry[5]="金";
	youbiAry[6]="土";
	youbiAry[7]="日";
	day=1;
	for(N=1;N<100;N++){
		document.write(day);
		document.write(youbiAry[youbi]);
		document.write("
");
		day++;
		youbi++;
		if(youbi>7){
			youbi=1;
		}
	}
//-->
</script>

TOPへ

基本の基本／06_02配列

配列サンプル2
<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
	monAry= new Array(12);
	monAry[1]=31;
	monAry[2]=29;
	monAry[3]=31;
	monAry[4]=30;
	monAry[5]=31;
	monAry[6]=03;
	monAry[7]=31;
	monAry[8]=31;
	monAry[9]=30;
	monAry[10]=31;
	monAry[11]=30;
	monAry[12]=31;
	youbiAry= new Array(7);
	youbiAry[1]="月";
	youbiAry[2]="火";
	youbiAry[3]="水";
	youbiAry[4]="木";
	youbiAry[5]="金";
	youbiAry[6]="土";
	youbiAry[7]="日";
	mon=prompt("何月から作成しますか");
	youbi=prompt(mon+"月1日は何曜日ですか\n月=1火=2水=3木=4金=5土=6日=7");
	day=1;
	for(N=1;N<100;N++){
		document.write(mon+"/"+day);
		document.write(youbiAry[youbi]);
		document.write("");
		day++;
		if(monAry[mon]<day){
			day=1;
			mon++;
		}
		if(mon==13){
			mon=1;
		}
		youbi++;
		if(youbi>7){
			youbi=1;
		}
	}
//-->
</script>
</body>
</html>

TOPへ

基本の基本／06_03配列

配列サンプル3

//配列は下記のようにすると作るのが楽
	monStrObj="31,29,31,30,31,30,31,31,30,31,30,31";
	monAry=monStrObj.split(",");
	youbiStrObj="月,火,水,木,金,土,日";
	youbiAry=youbiStrObj.split(",");

TOPへ

配列／生成

myAry=new Array(14);
myAry[0]=new Array(2);
myAry[1]=new Array(6);
myAry[0][0]=1;
myAry[0][1]=0;
myAry[1][0]=1;
myAry[1][1]=0;
myAry[1][2]=0;
myAry[1][3]=0;
myAry[1][4]=0;
myAry[1][5]=0;

TOPへ

配列／連結

array３=array.concat(array2, ...) ;

TOPへ