-->
./
<!-- フラ&#65533;ュが見れな&#65533;のためにここに何か書&#65533; --> フラ&#65533;ュがインス&#65533;&#65533;ルされて&#65533;&#65533;たいで&#65533;&#65533;&#65533;

2010年04月29日

JavaScriptとCSSで特定DIV要素の表示/非表示

JavaScriptとCSSで特定DIV要素の表示/非表示を切り替えるサンプル:phpspot開発日誌
JavaScriptとCSSで特定DIV要素の表示/非表示を切り替えるサンプル。
次のように数行で行える簡単なサンプルが紹介されていてライブラリに依存しない&軽い、簡単な実装を行いたい時に使えます。

<div id="mydiv" style="display:none"><h3>This is a test!<br>Can you see me?</h3></div>
<a href="javascript:;" onmousedown="if(document.getElementById('mydiv').style.display == 'none'){ document.getElementById('mydiv').style.display = 'block'; }else{ document.getElementById('mydiv').style.display = 'none'; }">Toggle Div Visibility</a>



Powered by ScribeFire.

posted by hirono at 04:45| Comment(0) | TrackBack(0) | prototype.js

stripTags(HTMLタグを除去)

js> var str="<div id='no01'>a<p>b</p><h1>c</h1>d</div>"
js> str
<div id='no01'>a<p>b</p><h1>c</h1>d</div>
js> str.stripTags();
abcd
js>


posted by hirono at 03:18| Comment(0) | TrackBack(0) | prototype.js

scanメソッドのパターンマッチ

【連載】いまからはじめるPrototype.js (2) 数値と文字列の拡張メソッド | エンタープライズ | マイコミジャーナル

'文字列'.scan( パターン, function( match ) {
  // パターンに合致した部分(match)を用いた処理
} );

いずれもパターンは文字列か/正規表現/という形式で記述する。sub()は文字列中のパターンに合致した部分のうち、最初から指定された回数(デフォル トは1)だけ文字列を置き換える。gsub()はすべての合致した部分を指定された置き換える。置き換え後の文字列を表す際に、$1にあたる部分を# {1}のように記述する。

scan()はパターンに合致した部分が出現すると関数が実行される。関数の引数matchは、match[ 1 ] == $1, match[ 2 ] == $2, ...となる。


 変わったの挙動の関数なので、いろいろ試してみました。

js> function aaa(s){
s.scan( /.*(\d+)/, function( match ) {
print(match[1] + ('+++') + '
');
});}  >   >   >
js> aaa("w123 f f345")
5+++

js> function aaa(s){
s.scan( /.*(\d+)/, function( match ) {
print(match[0] + '---' + match[1] + '+++' + '
');
});}  >   >   >
js> aaa("w123 f f345")
w123 f f345---5+++

js> function aaa(s){
s.scan( /.*(\d+)/, function( match ) {
print(match.join('+++') + '
');
});}  >   >   >
js> aaa("w123 f f345")
w123 f f345+++5

js> function aaa(s){
s.scan( /.*([0-9]+)/, function( match ) {
print(match.join('+++') + '
');
});}  >   >   >
js> aaa("w123 f f345")
w123 f f345+++5

js> function aaa(s){
s.scan( /.*(\d+)/, function( match ) {
print(match[2] + '---' + match[1] + '+++' + '
');
});}  >   >   >
js> aaa("w123 f f345")
undefined---5+++


js> function aaa(s){
var a=[];
a=s.scan( /.*([0-9]+) .*(\d+)/, function( match ) {
a.push(match);
});
return a;}  >   >   >   >   >
js> xxx=aaa("a 8 ki8 8 a 00 9 x9 9")
a 8 ki8 8 a 00 9 x9 9
js> xxx
a 8 ki8 8 a 00 9 x9 9
js> xxx.inspect

function (useDoubleQuotes) {
    var escapedString = this.gsub(/[\x00-\x1f\\]/, function (match) {
        var character = String.specialChar[match[0]];
        return character ? character : "\\u00" + match[0].charCodeAt().toPaddedString(2, 16);
    });
    if (useDoubleQuotes) {
        return "\"" + escapedString.replace(/"/g, "\\\"") + "\"";
    }
    return "'" + escapedString.replace(/'/g, "\\'") + "'";
}

js> xxx.inspect()
'a 8 ki8 8 a 00 9 x9 9'
js> a=["x","y","z"]
x,y,z
js> a.inspect()
['x', 'y', 'z']
js> a.inspect

function () {
    return "[" + this.map(Object.inspect).join(", ") + "]";
}

js> xxx=[];

js> xxx=aaa("a 8 ki8 8 a 00 9 x9 9")
a 8 ki8 8 a 00 9 x9 9
js> xxx
a 8 ki8 8 a 00 9 x9 9
js> 




posted by hirono at 02:44| Comment(0) | TrackBack(0) | prototype.js

prototype.jsの利用。CSVファイルを読み込み,表組で表示する。

Ajaxを学ぶ

prototype.jsの利用。CSVファイルを読み込み,表組で表示する。

 参考にさせていただき、Linuxなので少し修正しました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Ajaxで,CSVファイルを読み込み表組で表示する - 03</title>
    <script type="text/javascript" src="javascripts/prototype.js"></script>
    <script type="text/javascript"><!--
        function loadText(fName) {
            var fileName = fName + "?cache=" + (new Date()).getTime();
            new Ajax.Request(fileName, { method: "get",
                onSuccess: displayData});
        }
        function displayData(pinObject) {
            var textLine = pinObject.responseText;
            if (textLine.substr(textLine.length-1,1)=="\n") {
                textLine = textLine.substr(0, textLine.length-1); }
              textLine = '<table border="1" cellspacing="0"><tr><td style="padding-left:5px">' + textLine;
              repWord = new RegExp(",", "g");
              textLine = textLine.replace(repWord, "</td><td style=\"padding-left:5px\">");
              repWord = new RegExp("\n", "g");
              textLine = textLine.replace(repWord, "</td></tr><tr><td>");
              textLine = textLine + '</td></tr></table>'
              textLine = textLine.gsub(/\"/,"")
              $("result").innerHTML = "<br/>"+textLine;   //  テキストを表示
        }
    // --></script>
  </head>
  <body>
    <h1>prototype.jsの利用とCSVファイルを読み込み表組で表示する</h1>
    <form>
     <input type="button" value="CSVファイル読み込み" onClick="loadText('xxxx.csv')"><br/>
    </form>
    この行の下に結果は挿入・表示されます!<br/>
    <div id="result"></div>
  </body>
</html>                                                  



posted by hirono at 00:04| Comment(0) | TrackBack(0) | prototype.js

2010年03月24日

prototype.js の開発者向けメモ-バージョン 1.5.0 対応

prototype.js v1.5.0 の使い方
prototype.js は Sam Stephenson によって書かれた JavaScript ライブラリです。 この熟考の上記述された標準に準拠したコードは、Web 2.0 において特徴となるリッチでインタラクティブなウェブページを制作する際の重荷を、あなたの肩から取り去ってくれるでしょう。

もしこのライブラリを使ったことがあるなら、充実したドキュメントがこのライブラリの売りではないことに気がついたはずです。 私は他の開発者と同様に、ソースコードを読み、試行錯誤しながら prototype.js を理解しました。 自分が学んでいる間にメモを取り、それを他の人たちと共有することは価値があるのでは、と考えたのです。

加えて、このライブラリによって提供されているオブジェクト、クラス、関数、拡張機能についての 非公式リファレンス も提供しています。

ここで提供する例とリファレンスを読んでいると、プログラミング言語 Ruby に詳しい開発者は Ruby のビルトインクラスと、このライブラリが実装している拡張が非常に似ていることに気がつくかもしれません。


posted by hirono at 16:47| Comment(0) | TrackBack(0) | prototype.js

2010年03月23日

文字列テンプレート

prototype.js v1.5.0 の使い方
アプリケーション中での JavaScript コードの量が増えるにつれ、同じタイプのオブジェクトの集合を書式化して表示する機会も増えるのではないでしょうか。

オブジェクトのリストをループで回し、オブジェクトのプロパティに基づいて定型の書式化文字列にあてはめる、というコードは珍しいものではないでしょう。 prototype.js はまさにこのような事例を手助けしてくれる Template クラス を提供しています。

以下の例では、ショッピングカート内の商品を書式化し、複数にわたる HTML 行として列挙するものです。

 参考にさせていただきました。DOM要素の書き換えでは出来るだけコード量を減らしたいと考えていました。タグの生成にも使えそうです。
 こんな感じで試してみました。

ソースコード:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html> <head>
<title>js test</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

  <script  type="text/javascript" src="/home/hirono-hideki-01/f8-git-works/rails_indictment/public/javascripts/prototype.js"></script>

</head>

<body>
<h1>JavaScript</h1>
<script>
function insertTmp(){

    var data = new Object();
    data.items = [ ];
    //putting some sample items in the data
    data.items.push({name: '麻婆豆腐', price: 7000, type: 'href="http://www.google.ne.jp/"'});
    data.items.push({name: '天ぷら', price: 544, type: '\'フランス\''});
    data.items.push({name: '卵焼き', price: 10000, type: '&lt;ロシア&gt;'});

    var itemFormat = new Template(
            'これは #{type}語のページではありません。 ' +
            'よろしければ#{name}料理を#{price}円でお願いします。'
            );
    var formatted = '';

    for(var i=0; i<data.items.length; i++){
        var dataItem = data.items[i];
        formatted += "prototype.jsのバージョン" + Prototype.Version + "で実行。<br />"
+ itemFormat.evaluate(dataItem) + '<br/>\n';
    }

    $('insert').innerHTML=formatted;

}
</script>

<button onclick="insertTmp();">Click</button><br />

<div id='insert'>insert</div>


<hr>
<address></address>
<!-- hhmts start -->
Last modified: Tue Mar 23 01:31:51 JST 2010
<!-- hhmts end -->
</body> </html>


ブラウザの表示:

JavaScript


prototype.jsのバージョン1.6.1で実行。
これは href="http://www.google.ne.jp/"語のページではありません。 よろしければ麻婆豆腐料理を7000円でお願いします。
prototype.jsのバージョン1.6.1で実行。
これは 'フランス'語のページではありません。 よろしければ天ぷら料理を544円でお願いします。
prototype.jsのバージョン1.6.1で実行。
これは <ロシア>語のページではありません。 よろしければ卵焼き料理を10000円でお願いします。

Last modified: Tue Mar 23 01:31:51 JST 2010

posted by hirono at 01:34| Comment(0) | TrackBack(0) | prototype.js