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基本/タイマーで呼び出し
window.setTimeout("JS", int)
intミリ秒後に指定した処理を行います。
JS にJavaScript の構文か関数名を記述します。
function test() {
alert("一秒後にもう一回");
setTimeout("test()", 1000);
}
window.setInterval("JS", int)
指定した処理が intミリ秒毎に定期的に実行。
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へ
String/match
myStr="123abc456def";
if (myStr.match(/456/i)) {
alert("456");
}
iはオプション
オプション
i=大文字小文字を区別しない
g=2番目、3番目も検索する
m=複数行検索
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/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へ
オブジェクト指定/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へ
配列/連結
array3=array.concat(array2, ...) ;
TOPへ