私設SoS2オーナー応援BBS

新規発言一覧最新記事過去一覧検索ダウンロードページHOME

スレッド

└◇759:
サンプルHTML [moon] 08/30 01:15

 ├◇761:Re:サンプルHTML [masaki] 08/30 16:00
 │└◇762:サンプルHTML(改) [moon] 08/30 17:32
 │ └◇763:Re:サンプルHTML(改) [masaki] 08/31 19:01
 │  └◇764:Re[2]:サンプルHTML(改) [moon] 08/31 19:09
 │   └◇765:Re[3]:サンプルHTML(改) [masaki] 09/01 17:58
 │    └◇766:Re[4]:サンプルHTML(改) [moon] 09/01 21:57
 │     └◇767:Re[5]:サンプルHTML(改) [masaki] 09/02 19:11
 │      └◇768:Re[6]:サンプルHTML(改) [moon] 09/02 19:21
 │       └◇769:Re[7]:サンプルHTML(改) [masaki] 09/06 08:04
 └◇770:769の次 [masaki] 09/06 09:46
  └◇771:nameが無さそう [moon] 09/06 10:24
   └◇772:参考 [moon] 09/06 10:36
    └◇773:Re:参考 [masaki] 09/06 11:29
     └◇774:Re[2]:参考 [moon] 09/06 13:09
      └◇775:Re[3]:参考 [masaki] 09/06 15:34<-last


759● サンプルHTML[ moon ] 2003 08/30 01:15
> javascriptはよくわかりませんが、やってみます。
> ありがとうございました。

サンプル@JavaScript初心者の落書き(それでも、IE6.0SP1とMozilla1.4で動作確認済み)

<html>
<head>
<script language=JavaScript1.2>
<!--
function SortRegex(num){
  var i, j;
  var obj = document.getElementById("test");
  var obj1, obj2;
  var str1, str2;
  var re = new RegExp("(\\d{4}):(.+)\\((.+)\\)");
  var ar;
  var revflag = !document.getElementById("reverse").checked;
  if(num < 1){
    num = 1;
  }
  else if(num > 3){
    num = 3;
  }
  for(i = 1; i < obj.length; i++){
    if((ar = re.exec(obj.options[i].text)).length == 0){
      alert("正規表現にマッチしませんでした。(1)");
      return;
    }
    str1 = ar[num];
    for(j = 0; j <= i; j++){
      if((ar = re.exec(obj.options[j].text)).length == 0){
        alert("正規表現にマッチしませんでした。(2)");
        return;
      }
      str2 = ar[num];
      if(i != j && (revflag && str1 <= str2 || !revflag && str1 >= str2)){
        obj1 = obj.options[i];
        obj2 = obj.options[j];
        obj.insertBefore(obj1, obj2);
        j = i;
      }
    }
  }
  obj.selectedIndex = 0;
}
//-->
</script>
</head>
<body>
<select id="test">
<option value="opt1">0005:名前3(職業a)
<option value="opt2">0004:名前2(職業b)
<option value="opt3">0001:名前1(職業c)
<option value="opt4">0003:名前0(職業z)
<option value="opt5">0006:名前4(職業y)
<option value="opt6">0000:名前5(職業x)
<option value="opt7">0002:名前6(職業w)
</select><br>
<input type="button" value="ID順" onClick="SortRegex(1)"><br>
<input type="button" value="名前順" onClick="SortRegex(2)"><br>
<input type="button" value="職業順" onClick="SortRegex(3)"><br>
<input type="checkbox" id="reverse">降順
</body>
</html>
スレッド一覧


761● Re:サンプルHTML[ masaki ] 2003 08/30 16:00
> > javascriptはよくわかりませんが、やってみます。
> > ありがとうございました。
>
> サンプル@JavaScript初心者の落書き(それでも、IE6.0SP1とMozilla1.4で動作確認済み)
>
> <html>
> <head>
> <script language=JavaScript1.2>
> <!--
> function SortRegex(num){
>   var i, j;
>   var obj = document.getElementById("test");
>   var obj1, obj2;
>   var str1, str2;
>   var re = new RegExp("(\\d{4}):(.+)\\((.+)\\)");
>   var ar;
>   var revflag = !document.getElementById("reverse").checked;
>   if(num < 1){
>     num = 1;
>   }
>   else if(num > 3){
>     num = 3;
>   }
>   for(i = 1; i < obj.length; i++){
>     if((ar = re.exec(obj.options[i].text)).length == 0){
>       alert("正規表現にマッチしませんでした。(1)");
>       return;
>     }
>     str1 = ar[num];
>     for(j = 0; j <= i; j++){
>       if((ar = re.exec(obj.options[j].text)).length == 0){
>         alert("正規表現にマッチしませんでした。(2)");
>         return;
>       }
>       str2 = ar[num];
>       if(i != j && (revflag && str1 <= str2 || !revflag && str1 >= str2)){
>         obj1 = obj.options[i];
>         obj2 = obj.options[j];
>         obj.insertBefore(obj1, obj2);
>         j = i;
>       }
>     }
>   }
>   obj.selectedIndex = 0;
> }
> //-->
> </script>
> </head>
> <body>
> <select id="test">
> <option value="opt1">0005:名前3(職業a)
> <option value="opt2">0004:名前2(職業b)
> <option value="opt3">0001:名前1(職業c)
> <option value="opt4">0003:名前0(職業z)
> <option value="opt5">0006:名前4(職業y)
> <option value="opt6">0000:名前5(職業x)
> <option value="opt7">0002:名前6(職業w)
> </select><br>
> <input type="button" value="ID順" onClick="SortRegex(1)"><br>
> <input type="button" value="名前順" onClick="SortRegex(2)"><br>
> <input type="button" value="職業順" onClick="SortRegex(3)"><br>
> <input type="checkbox" id="reverse">降順
> </body>
> </html>
<head></head>の部分は、sub header にやるのでしょうか?(^^;;;
スレッド一覧


762● サンプルHTML(改)[ moon ] 2003 08/30 17:32
> <head></head>の部分は、sub header にやるのでしょうか?(^^;;;

JavaScriptのコードはHEADタグ内に直接書くか外部ファイルとして読み込むのが動作的には安心です。
しかし、今回のような場合はsub header内に単純に書いただけだと関係無い時も毎回出力することになるので効率的とは言えません。
なので、sub normal_actionで出力されるようにするのが良いと思います。(直接出力するなり、サブルーチンを用意しそこで出力するなり。)

----
機能強化サンプル
<html>
<head>
<script language=JavaScript1.2>
<!--
function RegexSort(num){
  var i, j;
  var obj = document.getElementById("test");
  var obj1, obj2;
  var str1, str2;
  var re = new RegExp("(\\d{4}):(.+)\\((.+)\\)");
  var ar;
  var revflag = !document.getElementById("reverse").checked;
  if(num < 1){
    num = 1;
  }
  else if(num > 3){
    num = 3;
  }
  for(i = 1; i < obj.length; i++){
    if((ar = re.exec(obj.options[i].text)).length == 0){
      return;
    }
    str1 = ar[num];
    for(j = 0; j <= i; j++){
      if((ar = re.exec(obj.options[j].text)).length == 0){
        return;
      }
      str2 = ar[num];
      if(i != j && (revflag && str1 <= str2 || !revflag && str1 >= str2)){
        obj1 = obj.options[i];
        obj2 = obj.options[j];
        obj.insertBefore(obj1, obj2);
        break;
      }
    }
  }
  obj.selectedIndex = 0;
}
function SelectShow(){
  var opt = document.getElementById("test").options;
  var str = document.getElementById("teststr").value;
  var i;
  if(str != ""){
    for(i = 0; i < opt.length; i++){
      opt[i].style.color = (opt[i].text.indexOf(str) != -1 ? "#FF0000" : "#000000");
    }
  }
  else{
    for(i = 0; i < opt.length; i++){
      opt[i].style.color = "#000000";
    }
  }
}
//-->
</script>
</style>
</head>
<body>
<select id="test">
<option value="opt1">0005:名前3(職業a)
<option value="opt2">0004:名前2(職業b)
<option value="opt3">0001:名前1(職業c)
<option value="opt4">0003:名前0(職業z)
<option value="opt5">0006:名前4(職業y)
<option value="opt6">0000:名前5(職業x)
<option value="opt7">0002:名前6(職業w)
</select>
<hr>
<input type="button" value="ID順" onClick="RegexSort(1)">
<input type="button" value="名前順" onClick="RegexSort(2)">
<input type="button" value="職業順" onClick="RegexSort(3)">
<input type="checkbox" id="reverse">降順
<hr>
<input type="text" id="teststr" size="20">を含むものを色付け表示<input type="button" value="実行" onClick="SelectShow()">
</body>
</html>
スレッド一覧


763● Re:サンプルHTML(改)[ masaki ] 2003 08/31 19:01
やってみましたが、エラーがでてしまいました(泣
もしかして、perl -cwで調べるとjavascriptは全部エラーになってしまうとかあるのでしょうか(汗
スレッド一覧


764● Re[2]:サンプルHTML(改)[ moon ] 2003 08/31 19:09
> やってみましたが、エラーがでてしまいました(泣
> もしかして、perl -cwで調べるとjavascriptは全部エラーになってしまうとかあるのでしょうか(汗

どう書きました?
printで出力するようにしないといけないですよ。
例えば、
  print "<script language=JavaScript1.2>\n";
  〜
  print "</script>\n";
のようにするか、
print << 'JSLIST';
<script language=JavaScript1.2>

</script>
JSLIST
のように。
また、全角空白は削除するなりタブに置き換えるなりする必要があります。
スレッド一覧


765● Re[3]:サンプルHTML(改)[ masaki ] 2003 09/01 17:58
>  print "<script language=JavaScript1.2>\n";
>  〜
>  print "</script>\n";
>のようにするか、
すべてprintですよね?
これでやってみたのですが・・・(汗
おかしいですね、もう一度やってみます(^^;;
(明日課題テストなので、終わってから・・・
失礼しました(礼))
スレッド一覧


766● Re[4]:サンプルHTML(改)[ moon ] 2003 09/01 21:57
> >  print "<script language=JavaScript1.2>\n";
> >  〜
> >  print "</script>\n";
> >のようにするか、
> すべてprintですよね?
> これでやってみたのですが・・・(汗
> おかしいですね、もう一度やってみます(^^;;
> (明日課題テストなので、終わってから・・・
> 失礼しました(礼))

そうです。
まあ、全行printに書き直すのは面倒なのでヒアドキュメントで書いたほうが楽ですが。(<<'JSLIST'として書いた方法)
スレッド一覧


767● Re[5]:サンプルHTML(改)[ masaki ] 2003 09/02 19:11
正しく表示されるようになったのですが、うまく動いてくれません(汗)
やっていることが間違っているかもしれませんが、
normal_actionのprint qq|<div align=center><select name=pd>\n|;の上に
        print << 'JSLIST';
    <select id="test">
<option value="opt1">0005:名前3(職業a)
<option value="opt2">0004:名前2(職業b)
<option value="opt3">0001:名前1(職業c)
<option value="opt4">0003:名前0(職業z)
<option value="opt5">0006:名前4(職業y)
<option value="opt6">0000:名前5(職業x)
<option value="opt7">0002:名前6(職業w)
</select>
<hr>
<input type="button" value="ID順" onClick="RegexSort(1)">
<input type="button" value="名前順" onClick="RegexSort(2)">
<input type="button" value="職業順" onClick="RegexSort(3)">
<input type="checkbox" id="reverse">降順
<hr>
<input type="text" id="teststr" size="20">を含むものを色付け表示<input type="button" value="実行" onClick="SelectShow()">
JSLIST
を追加しました。
(<head>の部分はすべて&header2に書きました)
「名前順」などの表示はちゃんとされていますが(汗汗
ご迷惑ばかりおかけしてすみません。(泣
スレッド一覧


768● Re[6]:サンプルHTML(改)[ moon ] 2003 09/02 19:21
> (<head>の部分はすべて&header2に書きました)

このsub header2をsub headerの「代わり」に実行していますか?

# サンプルHTML自体の動作確認はしたのでしょうか?
# これがそもそも動作しないのであればブラウザの問題も考えられるということになりますし。
スレッド一覧


769● Re[7]:サンプルHTML(改)[ masaki ] 2003 09/06 08:04
返信がものすごく遅れてしまい、申し訳ないです。
> このsub header2をsub headerの「代わり」に実行していますか?
そうです(^^;
> # サンプルHTML自体の動作確認はしたのでしょうか?
> # これがそもそも動作しないのであればブラウザの問題も考えられるということになりますし。
試してみます(^^;
スレッド一覧


770● 769の次[ masaki ] 2003 09/06 09:46
一応、見た目は成功したのですが、リストでプレイヤーを選択しても、ID0000のプレイヤーにしか会うことが出来なくなってしまいました(;;
ID順。などを押さなくても、ID0000にしか会えません(泣
スレッド一覧


771● nameが無さそう[ moon ] 2003 09/06 10:24
> 一応、見た目は成功したのですが、リストでプレイヤーを選択しても、ID0000のプレイヤーにしか会うことが出来なくなってしまいました(;;
> ID順。などを押さなくても、ID0000にしか会えません(泣

selectタグにnameを付けていますか?
サンプルではnameが付いていませんがあれはGETやPOSTをする目的がなかったので付いていないだけです。
スレッド一覧


772● 参考[ moon ] 2003 09/06 10:36
sos2.cgiの設定部分にある「$method = 'POST';」をGETに変更してテストしてみると良いかもしれません。
そうすれば、どういう値が送られているかURLに表示されるので。

# 間違ってもGETにしたまま公開しないように注意。
スレッド一覧


773● Re:参考[ masaki ] 2003 09/06 11:29
> sos2.cgiの設定部分にある「$method = 'POST';」をGETに変更してテストしてみると良いかもしれません。
> そうすれば、どういう値が送られているかURLに表示されるので。
>
> # 間違ってもGETにしたまま公開しないように注意。
nameの設定がされていませんでした(TT
無事解決できました。ありがとうございました!
スレッド一覧


774● Re[2]:参考[ moon ] 2003 09/06 13:09
> > sos2.cgiの設定部分にある「$method = 'POST';」をGETに変更してテストしてみると良いかもしれません。
> > そうすれば、どういう値が送られているかURLに表示されるので。
> >
> > # 間違ってもGETにしたまま公開しないように注意。
> nameの設定がされていませんでした(TT
> 無事解決できました。ありがとうございました!

疑問に思っていたのですが、No.767から考えるとプレイヤーリストのselectが2つある、なんてことはないですよね?
元のselectはname=pdが最初から付いているので今回のようなミスは無いと思いますし。

# まあ、name=pdをid=に変更してしまいこういう状況になったとは考えられますが。
スレッド一覧


775● Re[3]:参考[ masaki ] 2003 09/06 15:34
> 疑問に思っていたのですが、No.767から考えるとプレイヤーリストのselectが2つある、なんてことはないですよね?
いえ。ひとつです(^^;
> 元のselectはname=pdが最初から付いているので今回のようなミスは無いと思いますし。
> # まあ、name=pdをid=に変更してしまいこういう状況になったとは考えられますが。
そうです(^^;
ご迷惑をおかけしました。
スレッド一覧

CGIROOM