ベストアンサー

bt_melter.jsをサイトの一部のみに適応させたい。また演算の方

2010/01/18 19:02

bt_melter.jsをサイトの一部のみに適応させたい。また演算の方法を1種類にしたい。という、サイト全体をマトリックス風に演算して表示させるjsがあるのですがこのまま<body>タグ内にいれてしまうと、サイト全体が適応されてしまいますのでたとえば #hoge というようにIDをふってそのIDのみ適応されるようにするにはどこをいじればよいでしょうか？ http://bodytag.org/bt_melter/ jsファイル本体：　http://bodytag.org/bt_melter/bt_melter.js

ritzkun
お礼率61% (175/284)

JavaScript
回答数6
ありがとう数3

みんなの回答 （6）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

my--
ベストアンサー率89% (91/102)

2010/01/19 13:06 回答No.3

No.2もありますが //bt_melter.js断片 //var bt_root = document.getElementsByTagName('body').item(0); var bt_root = document.getElementById('hoge'); //追記 <div id="hoge">～</div> <script src="bt_melter.js" type="text/javascript"></script> あるいは //bt_melter.js断片 function bt_godeep(o) { 　for (var i = 0; i < o.childNodes.length; i++) { 　　if(o.childNodes[i].childNodes) { 　　　bt_godeep(o.childNodes[i]); 　　　} 　　if (o.childNodes[i].parentNode.id != 'hoge') continue; //追記　　if(o.childNodes[i].nodeName == '#text' && bt_haschars(o.childNodes[i].nodeValue)) { 一応それっぽく動きました。前者の方が融通は利くようです。おもしろいですね。これ。

質問者

お礼 2010/01/19 16:37

本当に、ありがとうございます☆！！動きました！後々参照する人のために詳しく書いておきます。 ======================== 元々あった var bt_root = document.getElementsByTagName('body').item(0); にコメントとして //var bt_root = document.getElementsByTagName('body').item(0); をいれ、代わりに var bt_root = document.getElementById('hoge'); を指定しました。 html内では <div id="hoge">～</div>タグの直下に <script src="bt_melter.js" type="text/javascript"></script> を配置すると動きました。 ========================= わがままをいわせていただくとすると、後3点ほどこれに関してお伺いしたいのですが 1)ご回答いただきました後者の方に関してですが <script src="bt_melter.js" type="text/javascript"></script>は、body直下でもよいのでしょうか？それとも前者同様div直下でしょうか？前者の場合ではうまく動いたのですが、後者の場合、文字が一瞬1段下がるので反応はしているのですが動きませんでした･･･ 2)IDやクラス指定でそのクラスのdivに囲まれているところはすべてそうなる。というような形にはできないでしょうか？一箇所のみの場合、融通が利くので便利なのですが、ページの中で複数箇所設置する場合、<script>をいちいち配置するのは面倒で･･･ 3)仮に縦長のサイトの場合で、スクロールして画面が表示されたときに、開始させるような形にもできますでしょうか？イメージとしてはこんな感じです。 http://www.skuare.net/test/jLazyLoad.html LazyLoadというプラグインで画像をスクロールにあわせて読み込むようにしていますがこんな風にスクロールで画面表示とともにロードされるようなコードはどのように書けばよいでしょうか？ 3に関しては、当初の質問より少し脱線する部分ですので、もしおわかりでなければ結構です☆あまりっわがままばかりいえませんので-☆! ご教授お願い致します☆

その他の回答 (5)

my--
ベストアンサー率89% (91/102)

2010/01/21 17:53 回答No.6

>質問者「if」「else」は単純かつ初歩的な命令です。どのサイトでも必要十分な解説はされていると思います。「javascript 入門基礎」で検索してみましょう。お手上げってことなら、質問タイトルとはかけ離れてますし同じ疑問を持つ読者のためにも分かりやすいタイトルで改めて質問されてはどうでしょ。すばやい回答も得られやすいと思いますよ。

質問者

お礼 2010/01/22 00:09

else ifに関してはなんとか今勉強中です☆ 本当に親切に教えていただいてありがとうございました☆ bt_melterをつかってまだもうちょっと勉強をしていこうと思っています。今、いろいろと試しているのですがなぜか、処理中に2行になってしまうようで、jsの問題ではないと思いますのでおそらくCSSで他の問題があるのでしょう･･･ん～思案中です。本当にありがとうございました！これでこの質問は閉めさせていただきますが、また今後とも宜しくお願い致します！

my--
ベストアンサー率89% (91/102)

2010/01/20 18:24 回答No.5

ソースコードを下記に書き換えてみて下さい。 var bt_chartype = Math.floor(Math.random() * 3); //2 -> 3 alert('bt_chartypeの値 -> ' + bt_chartype + '\n\ndigit関数が返す値\n0 : 0 or 1\n1 : _\n2 : +'); function digit() { if (bt_chartype == 0) return Math.floor(Math.random() * 2); else if (bt_chartype == 1) return '_'; else if (bt_chartype == 2) { return '+'; //出力文字を追加 } else return '_'; } 実行行程で変数の値や関数の返す値、演算結果の変化を手当り次第確認してみましょう。それらの役割、プログラムの全体像をつかむヒントになるかも知れませんよ。 document.title = hoge; status = fuga; タイマーで値が頻繁に変化する場合、処理速度を落とせばステータスバーやタイトルバーを使って確認することもできます。基本を勉強する方法で一番良いかは微妙ですけど、面白いならそれはそれで。バッドノウハウを身に着けないよう、たまには退屈な基本解説記事も読みましょう。

質問者

お礼 2010/01/21 15:43

ありがとうございます☆ 丁寧にコードを書いていただいて大変ありがたい限りです☆ var bt_chartype = Math.floor(Math.random() * 3); とする意味から考えてみました。まず、Math.floorと、Math.ramdomなどのMathクラスについて調べてみてなんとなくわかったのですがイメージとしてまず、 var bt_chartype = Math.floor(Math.random() * 3); を日本語に直すと Math.random()*3;であれば、0.0～2.99までの乱数を返し、 Math.floorでMath.randomで返された値から最も近い整数に切り捨てた数値が bt_chartypeということになるということでよいのですよね？そこでまったく流れとは関係ないのですが少しだけ変えてみようと思い、 var bt_chartype2 = Math.floor(Math.random() * 3);にしてみたところ少し数値の表れ方が変わりました。という流れをもって回答いただいたものを精査すると function digit() { if (bt_chartype == 0) //bt_chartype戻り値が0の場合 return Math.floor(Math.random() *2);　// 0.0～1.99までが返される（整数では0と1に結果的にMath.floorでなる。） else if (bt_chartype == 1) return '0'; //bt_chartypeの戻り値が1の0が返される else if (bt_chartype == 2) {　//戻り値が2の場合 return '|'; //　''内に追加した文字が返される。 } else return '_';　←　それ以外の場合、_が返される。 } ------ if ( （条件式1） ){ （条件式1を満足した時の処理） } elseif ( （条件式2） ){ （条件式1を満足しないで条件式2を満足した時の処理） } elseif ( （条件式3） ){ （条件式1、条件式2を満足しないで条件式3を満足した時の処理） } else{ （上記の条件のいずれも満足しなかった時の処理） } ------- ということですよね？そこで疑問なのが、 elseifを3回目につかって　bt_chartype == 3とするとうまく動かないのはなぜなんでしょうか･･･？不思議と、elseをはずすと動くのですがこれは処理を飛ばしているのかな・・・？表示の仕方で気になるのは、なぜ、処理しているときは1段下がるのか･･･？ということです。これはおそらくCSSの問題だと思いますのでちょっとがんばってみます。関数っておもしろいですね☆ 学校ではなんの役にもたたないと思っていたのですが、こんなところで役にたつんですね･･･ちゃんとやっときゃよかった･･･。これを機会にscriptを勉強していきます☆jsもasも基本言語が似ているんですね☆ 書き方が違うだけで･･･いままでhtmlやcssしかいじったことがないので、一から勉強するつもりでやってみます☆

my--
ベストアンサー率89% (91/102)

2010/01/19 22:34 回答No.4

bt_root.style.visibility = 'hidden'; 非表示の適用を優先させるため先頭にベタ書きされてますからね。 .jsの読み込み場所が気になるならタイマーで監視してみるとか。 var bt_root; //タイマーで監視 (function standBy() { 　if (document.getElementById('hoge')) { 　　bt_root = document.getElementById('hoge'); 　　bt_root.style.visibility = 'hidden'; 　　setTimeout(bt_spin, 1000); //準備が整った1秒後に始動　} 　else { setTimeout(standBy, 1); } })(); この場合loadで実行してるbt_spinも待機させます。（先頭2行、行末削除）どこで.jsを読み込んでも大丈夫だと思います。適用要素指定の件は、id'hoge'で適用要素を囲み、適用要素にクラス'hogeClass' if (o.childNodes[i].parentNode.className != 'hogeClass') continue; //追記 No.3のidをclassNameで処理、でしょうか。問題なのが（個人的好み）適用要素以外もすべて非表示が適用になっていること。そこで var bt_root; var list = []; //タイマーで監視 (function standBy() { 　if (document.getElementById('hoge')) { 　　bt_root = document.getElementById('hoge'); 　　var elms = bt_root.getElementsByTagName('*'); 　　for (var i = 0; i < elms.length; i++) { 　　　if (elms[i].className == 'hogeClass') { 　　　　elms[i].style.visibility = 'hidden'; //'hogeClass'だけに適用　　　　list[list.length] = elms[i]; 　　　} 　　} 　　//bt_root.style.visibility = 'hidden'; 　　setTimeout(bt_spin, 1000); //準備が整った1秒後に始動　} 　else { setTimeout(standBy, 1); } })(); 表示する処理のところを function bt_spin() { 　if(is.dom && !(is.mac && is.ie)) bt_godeep(bt_root); 　//bt_root.style.visibility = 'visible'; 　for (var i = 0; i < list.length; i++) { 　　list[i].style.visibility = 'visible'; //表示する　} 　if(is.dom && !(is.mac && is.ie)) bt_sponge(); } ここまで。一応こちらでは動きましたが、疑ってかかって下さい。スクロールして...の件はなるほど。設計の見直しが必要になりそうですけど可能だと思います。これをきっかけに自身で実現できるよう頑張ってみてはどうでしょ。私もしばらくこれで遊んでみるつもりです。

質問者

補足 2010/01/20 13:40

なるほど！！ありがとうございました！ちょっといろいろこれをつかって勉強してみます(ﾟДﾟ) javascript自体、あまりきちんと基本を勉強せずライブラリの貼り付けばかりでやってきましたので、行き詰ってしまっていました･･･。基本を勉強するにはこういうサンプルで勉強するのが一番ですね☆ ちなみになんですが、最後にひとつだけ質問させていただいてもよいでしょうか？ bt_melter.jsが実行される際、「0、1」というパターンと「--」というパターンの2種類あるようです。そこで 1)「--」というパターンをやめて、0、1だけにする 2)「--」を、｢a～z｣のアルファベットなどをランダムに表示する。（よりマトリックス風になる）というようなことをしたいのですが、どこで指定されているのかがわかりません･･･この0、1や--がどこで指定されていて、どのような規則性をもって表示されているのかなどはどこをみればわかりますでしょうか？

fujillin
ベストアンサー率61% (1594/2576)

2010/01/19 12:04 回答No.2

#1です。『頭でbodyを取得しているから、とりあえずそこではなかろか？』という意味のつもりでした。 idで取得するなら、　var bt_root = document.getElementById('hogehoge'); ではないの？？（まったく未検証なので、的はずれの可能性もあり）配布元の許諾事項に、改変するってのはあったのかしらん？

fujillin
ベストアンサー率61% (1594/2576)

2010/01/18 19:26 回答No.1

開いてみたら、いきなりbodyを取得しているので、後を見る気が失せました。ここではないのかしらん？（まったく未検証）ライセンスとか調べてないので、配布元でちゃんと調べたほうがよろしいかと。

質問者

補足 2010/01/18 22:33

えっ!?　見る気がうせちゃったんですか･･･残念です('A`) bodyを読み込んでいるのはわかったので、自分なりにいろいろと調べてみたのですがここ↓を参考にして色々実験してみたのですが http://blog.8maki.jp/2006/11/javascript.html ソースの一番最初にある var bt_root = document.getElementsByTagName('body').item(0); を document.getElementById('ID名’)とするために var bt_root = document.getElementById('hogehoge’).item(0); として、 html内に <div id="hogehoge"> //ここにマトリックスのようになるべきテキストを挿入// </div> を設置し、試してみたのですがうまく動きませんでした。上記サイトの中に、 document.getElementById('hogehoge’)をfunction内にいれることでbodyを読むと同時にできるんじゃないかと思ったのですがそれもかなわず･･･どうしていいやらさっぱりです。どうにか教えていただけませんでしょうか。お願いします щ(ﾟдﾟщ)