カテゴリー別アーカイブ: JavaScript

芸人の中で一番JavaScriptに詳しいのではないでしょうか。

正規表現とjavascript文字列中に含まれるある文字の個数を返す

IMG_2921

正規表現の話題になったからおさらいしたし、
100から200の数字を検索掛けるのに、正規表現で/[100-200]/ではないよな??
と思ったので。。
おさらいをかねていい勉強になったわ

        var str1 = 'わたしのサイトはhttp://kennjimoritattayahoo.co.jpですあなたのはhttp://watasshi.jpですね'
        var reg1 = /http(s)?:\/\/([\w-]+.)+[\w-]+(\/[\w- .\/?%&=]*)?/gi;
        //
        var result = str1.match(reg1);
        for(i= 0;i<result.length;i++){
            document.write(result[i]);
            document.write('<br/>');
        }
        var p1 = /[1-2]+([0-9][0-9])/g;
        var str2 = '100匹わんちゃん。\n7人の店主';
        var p2 = /^[0-9]{3,}/g;
        var result2 = str2.match(p2);
        for(i=0;i<result.length;i++){
            document.write(result2[i]);
        }
        //行頭にある1文字以上の数字を抽出
        var reg2 = /^[0-9]{1,}/g;
        var str3 = '1000ですが\n99にもなります';
        var result3 = str3.match(reg2);
        //["1000"]しか返さない
        //マルチラインを付けると改行コード直後、文字列末尾も検索する
        var reg2 = /^[0-9]{1,}/gm;
        var str3 = '1000ですが\n99にもなります';
        var result3 = str3.match(reg2);
        //[&quot;1000&quot;,&quot;99&quot;];</p>

<pre><code>    var reg4 = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?&amp;amp;%=]*)?/g;
    var str4 = 'わたしはhttp://kennjimorita.jpです。';
    str4 += 'これhttp://korekore.jpもそうです';
    var result4 = reg4.exec(str4);
    for(i=0;i&amp;lt;result4.length;i++){
        document.write(result4[i]);
        document.write('&amp;lt;br&amp;gt;');
    }



//execメソッド
var reg = /wow/g;
var target= 'fafwwoweeeewowfefawow';
matches = [];
while(match = reg.exec(target)){
    matches.push(match);
};


// javascript文字列中に含まれるある文字の個数を返す
var counter = function(str,seq){
    return str.split(seq).length -1;
}
var str = 'mooooooorita';
var str2 = 'moooorita';
var str3 = 'efafeofafeofa'
console.log(str + ':' + counter(str,'o'));
console.log(str + ':' + counter(str2,'o'));
console.log(str + ':' + counter(str,/\d/));
console.log(str + ':' + counter(str,/[a-z]/));
</code></pre>

<p>

&lt;div&gt;</p>

<pre><code>var re = new RegExp('j.*t')
</code></pre>

<p>undefined
var re = new RegExp(&quot;j.<em>t&quot;);
undefined
re
/j.</em>t/
var re = /j.<em>t/
undefined
re
/j.</em>t/
re.global
false
re.ignoreCase
false
re.multiline
false
var re = new RegExp(&quot;j.<em>t&quot;)
undefined
re
/j.</em>t/
var re = /j.<em>t/ig;
undefined
re
/j.</em>t/gi
re.ignoreCase
true
re.global
true
re.ignoreCase
true
re.mulreligne
undefined
re.multeline
undefined
re.mulitiline
undefined
re.multiline
false
re.multiline
false
/j.<em>t/.test(&quot;javascript&quot;);
true
re.test(&quot;javascript&quot;)
true
/j.</em>t/i.test('javascript');
true
/j.<em>t/.exec(&quot;javascript&quot;)[0]
&quot;javascript&quot;
/j.</em>t/.exec(&quot;javascript&quot;,&quot;eee&quot;)[1]
undefined
var s = new String('HellowJavascriptWorld');
undefined
s
String {0: &quot;H&quot;, 1: &quot;e&quot;, 2: &quot;l&quot;, 3: &quot;l&quot;, 4: &quot;o&quot;, 5: &quot;w&quot;, 6: &quot;J&quot;, 7: &quot;a&quot;, 8: &quot;v&quot;, 9: &quot;a&quot;, 10: &quot;s&quot;, 11: &quot;c&quot;, 12: &quot;r&quot;, 13: &quot;i&quot;, 14: &quot;p&quot;, 15: &quot;t&quot;, 16: &quot;W&quot;, 17: &quot;o&quot;, 18: &quot;r&quot;, 19: &quot;l&quot;, 20: &quot;d&quot;, length: 21, [[PrimitiveValue]]: &quot;HellowJavascriptWorld&quot;}
s.match(/a/);
[&quot;a&quot;]
s.match(/a/g);
[&quot;a&quot;, &quot;a&quot;]
s.match(/a/ig);
[&quot;a&quot;, &quot;a&quot;]
s.match(/j.<em>/ig);
[&quot;JavascriptWorld&quot;]
s.match(/j.</em>a/i);
[&quot;Java&quot;]
s.match(/j.<em>s/i);
[&quot;Javas&quot;]
s.match(/j.</em>c/i);
[&quot;Javasc&quot;]
s.match(/a.<em>c/i);
[&quot;avasc&quot;]
s.match(/a.</em>c/i);
[&quot;avasc&quot;]
s.search(/a.<em>c/i);
7
s.search(/j.</em>c/i);
6
s.search(/j.<em>c/i);
6
s.search(/j.</em>a/i);
6
s.search(/j.<em>a/i);
6
s.replace(/[A-Z]/g,'');
&quot;ellowavascriptorld&quot;
s.replace(/[a-z]/g,'');
&quot;HJW&quot;
s.replace(/[A-Z]/,'');
&quot;ellowJavascriptWorld&quot;
s.replace(/[A-Z]/,'<em>$&amp;');
&quot;_HellowJavascriptWorld&quot;
s.replace(/[A-Z]/g,'</em>$&amp;');
&quot;<em>Hellow_Javascript_World&quot;
s.replace(/([A-Z])/g,'</em>$1');
&quot;<em>Hellow_Javascript_World&quot;
s.replace(/([A-Z])/g,'</em>$1');
&quot;_Hellow_Javascript_World&quot;
var email = morita@yahoo.co.jp
Uncaught SyntaxError: Unexpected token ILLEGAL VM1156:732
email
Uncaught ReferenceError: email is not defined VM2116:2
var email = 'morita@yahoo.co.jp'
undefined
email
&quot;morita@yahoo.co.jp&quot;
var username = /.</em>@/i;
undefined
var username = email.replace(/.<em>@/i);
undefined
var username = email.replace(/.</em>@/i);
undefined
username
&quot;undefinedyahoo.co.jp&quot;
var username = email.replace(/(.<em>)@.</em>/,&quot;$1&quot;);
undefined
username
&quot;morita&quot;
function replaceCallback(match){return &quot;<em>&quot;+ match.toLowerCase();}
undefined
function replaceCallback(match){return &quot;</em>&quot;+ match.toLowerCase();}
s.replace(/[A-Z]/g,replaceCallback);
&quot;_hellow_javascript_world&quot;
var glob;
undefined
var re = /(.*)@(.*)&#46;(.*)/;
undefined
re
/(.*)@(.*)&#46;(.*)/
var callback = function(){
glob = arguments;
return arguments[1] + 'at' + arguments[2] + 'dot' + arguments[3];
}
undefined
&quot;moritakenji@yahoo.co.jp&quot;.replace(re,callback);
&quot;moritakenjiatyahoo.codotjp&quot;
var callback = function(){
glob = arguments;
return arguments[1] + ' at ' + arguments[2] + ' dot ' + arguments[3];
}
undefined
&quot;moritakenji@yahoo.co.jp&quot;.replace(re,callback);
&quot;moritakenji at yahoo.co dot jp&quot;
glob
[&quot;moritakenji@yahoo.co.jp&quot;, &quot;moritakenji&quot;, &quot;yahoo.co&quot;, &quot;jp&quot;, 0, &quot;moritakenji@yahoo.co.jp&quot;]ß
&lt;/div&gt;
var reg = new RegExp('^[0-9]');
reg.test('foo');
false
reg.test('123');
true
var reg = /'^[0-9]'/;
undefined
var reg = /'^[0-9]'/;
function RegExp(){</p>

<p>}
undefined
var reg = /'^[0-9]'/;
reg.constructor;</p>

<p>function RegExp() { [native code] }
var reg = /'^[0-9]'/g;
var reg = /^\s+/;
undefined
reg
/^\s+/
var reg = new RegExp('^\s+');
undefined
var reg = new RegExp('^&#92;s+');
undefined
reg
RegExp {}
var text = 'abc def ghi jkl';
var reg = /(\w+)\s(\w+)/;
reg.exec(text);
[&quot;abc def&quot;, &quot;abc&quot;, &quot;def&quot;]
var reg = /(\w+)\s(\w+)/g;
undefined
reg
/(\w+)\s(\w+)/g
var text = 'abc def ghi jkl';
undefined
reg.exec(text);
[&quot;abc def&quot;, &quot;abc&quot;, &quot;def&quot;]
reg.exec(text);
[&quot;ghi jkl&quot;, &quot;ghi&quot;, &quot;jkl&quot;]
reg.exec(text);
null
var text = 'moritakenji';
var result = text.search(/^kan/g);
result;
-1
var text = 'moritakenji';
var result = text.search(/^moirta/g);
result;
-1
var text = 'moritakenji';
var result = text.search(/^(moirta)/g);
result;
-1
var text = 'abc def ghi jkl';
text.replace(/\s/,',');
&quot;abc,def ghi jkl&quot;
var text = 'abc def ghi jkl';
text.replace(/\s/g,',');
&quot;abc,def,ghi,jkl&quot;
text.replace(/(.)\s/g,',$1');
&quot;ab,cde,fgh,ijkl&quot;
text.replace(/(.)\s/g,function(01m,02m){return ','+ 02m});
Uncaught SyntaxError: Unexpected token ILLEGAL VM50:732
text.replace(/(.)\s/g,function(m0,m1){return ','+ m1});
&quot;ab,cde,fgh,ijkl&quot;
var text = 'abc def ghi jkl';
undefined
text
&quot;abc def ghi jkl&quot;
text.match(/\w/g);
[&quot;a&quot;, &quot;b&quot;, &quot;c&quot;, &quot;d&quot;, &quot;e&quot;, &quot;f&quot;, &quot;g&quot;, &quot;h&quot;, &quot;i&quot;, &quot;j&quot;, &quot;k&quot;, &quot;l&quot;]
text.match(/(w+)\s/g);
null
text.match(/(w)\s/g);
null
text.match(/(.)\s/g);
[&quot;c &quot;, &quot;f &quot;, &quot;i &quot;]
text.match(/(.)\s/g);
[&quot;c &quot;, &quot;f &quot;, &quot;i &quot;]
text.match(/([a-z]{,3})\s/g);
null
text.match(/([a-z]{3})\s/g);
[&quot;abc &quot;, &quot;def &quot;, &quot;ghi &quot;]
text.match(/([a-z]{1,2})\s/g);
[&quot;bc &quot;, &quot;ef &quot;, &quot;hi &quot;]
text.match(/([a-z]{0,1})\s/g);
[&quot;c &quot;, &quot;f &quot;, &quot;i &quot;]
text.match(/([a-z]{3})\s/g);
[&quot;abc &quot;, &quot;def &quot;, &quot;ghi &quot;]
text.match(/(\w+)\s(\w+)/g);
[&quot;abc def&quot;, &quot;ghi jkl&quot;]

    //コンストラクタクラス定義、インスタンス生成、プロトタイプ継承を使った関数を参照
        var Menber = function(fname,sname){
            this.fname = fname;
            this.sname = sname;
        };
        Menber.prototype.me1 = function(){
            return this.fname + this.sname;
        }
        Menber.prototype.me2 = function(){
            return this.fname + this.sname;
        }<br />
        var men1 = new Menber('morita','kenji');
        var men2 = new Menber('kenji','kenji');</p>

<pre><code>// オブジェクトリテラルでのprototype定義

    var Menber = function(fname,sname){
        this.fname = fname;
        this.sname = sname;
    }
    Menber.prototype = {
        add : function(){return this.fname + this.sname},
        add2 : function(){return this.sname + this.fname}
    };
    var men1 = new Menber('ff','ee');
    console.log(men1.add(),men1.add2());


    // プロトタイプチェーン
    var Animal = function(){};
    Animal.prototype = {
        walk : function(){document.write('tokotoko');}
    }
    var Dog = function(){};
    Dog.prototype = new Animal();
    Dog.prototype.bark = function(){document.write('baubau');}

    var d = new Dog();
    d.walk();
    d.bark();
</code></pre>

<p>

</p>

<p>5分でわかる
bxスライダー5つ動かしたらiPhoneでピカピカちらついたんだけど
transform:translate3d(0,0,0)をちらつく箇所に指定したら直った
なぜだ</p>

<p>答えは
tranlate3dを指定するとGPUで処理するようになるからだった</p>

<p>説明
CPUで処理をするアニメーションとGPUで処理をするアニメーションの違い</p>

<p>CPU(GGO)
position:absolut
left:0</p>

<p>こちらは例えるなら画用紙に書いては背景で塗りつぶして書いては移動
ぺらぺら漫画に一枚背景の真っ白な一枚を挟んで移動しているようなもの</p>

<p>GPU(GGO)
transform:transtlate
opacitiyのフェードイン</p>

<p>GPUアクセラーレーションが有効になる=アニメーションのレンダリングをソフトではなくハード(グラフィックチップスが担当になる)</p>

<p>photoshopの背景レイヤーの上にある描画されているレイヤーが移動するようなもの</p>

<p>Android OSが2.3以下はGPUアクセラーレーションが利かない</p>

<p>レンダリング時の負荷によるアニメーションの遅れが一枚真っ白な背景がピカピカの原因</p>

<p>パフォーマンスの違い
css、animationだけで移動
javascriptだけで移動</p>

<p>css、translatetransform
javascriptでtransform</p>

<p>パフォーマンス
ほかのGPUに演算させるプロパティは??</p>

<p>ここで注意
GPUをbodyに指定するとよくないよ
GPUは画像処理にすぐれているのでそのほかの演算がある要素やコンテンツに指定すると結果
パフォーマンス落ちますよ
ブラウザのバージョンによって異なる不要で無駄かもしれないレイヤーを形成しない</p>

<p>・再描画されている箇所に的確に指定</p>

<p>スクロールは??
再描画されているのでは?</p>

<p>GIFアニメーションは?</p>

<p>確かめる方法は?
開発ツールのrectangle</p>

<p>今後のGPUの行方
WebCLでWebデベロッパもGPUやCPUのマルチコアをブラウザ内で有効利用(==並列処理)できるようになる
http://jp.techcrunch.com/2014/03/20/20140319webcl-will-soon-let-web-developers-harness-the-power-of-multi-core-gpus-and-cpus-from-the-browser/</p>

<p>CSS will-changeプロパティについて知っておくべきこと
https://dev.opera.com/articles/ja/css-will-change-property/</p>

<p>transform: translate3d(0, 0, 0);
こうした方法でハードウェア・アクセラレーションを行うと、
合成レイヤーとして知られているものが生成されます。
これは、GPUにアップロードされGPUによって合成されるレイヤーです。
しかし、CSSハックを用いたレイヤー生成は、パフォーマンス・ボトルネックの解消に必ずしも役立ちません。
レイヤーを作らせることでページ表示速度は速くなるかも知れませんが、コストがかかります。
RAMやGPUのメモリ使用量が多くなり(特にモバイル端末では)、
レイヤーをたくさん抱えると悪影響が及びます(特にモバイル端末では)。
ですから、ハックを使うときは慎重に扱わなければなりません。
ハードウェア・アクセラレーションの実行によって本当にページ表示が最適化されるのか、
そしてその操作で新たなパフォーマンス・ボトルネックが起きていないことを確認した上で、
これらのテクニックを使うようにしなければなりません。</p>

<p>transform:transform3dは
cssハックだった!</p>

<p>なぜ3次元の処理を2次元のアニメーションに指定しているのか!!
ブラウザをだましてレイヤー生成を促すCSSハック!</p>

<p>null transoin</p>

<p>まとめ
GPUちゃんと使おうGPU</p>

<p>参考</p>

<p>GPUの可視化
Visualizing WebKit's hardware acceleration</p>

<p>Web制作にGPU処理を取り入れる
https://w3g.jp/blog/studies/web_gpu_adopt</p>

<p>Mobile Safariで2Dアニメーションを実行する時に、本当にtranslate3dを使用すべきなのか検証してみました
http://blog.bluearrowslab.com/smartphone/topicks/663/</p>

<p>&lt;/div&gt;</p>

<p>chromeデベロッパーツール
パフォーマンスの調べ方を完全にマスター</p>

<p>will-changeプロパティ
要素に変更を加える前に前もってブラウザに知らせておけるプロパティ
だが
上述したスタックコンテキストや包含ブロックを生じるような場合以外に、will-changeが要素に直接的な影響を与えることはありません。
レクタングルの操作</p>

<p>例えば、clip-pathとopacityプロパティはいずれも、デフォルト値以外の値を指定した時、対象となる要素にスタックコンテキストを生成します。
包含ブロック</p>

<p>パフォーマンス・ヒットとクラッシュ

javascript Ajax-スクロール値によるページ読み込み-

XMLHttpRequestオブジェクトのプロパティ、メソッド、イベント全部調べる

javascript

XMLHttpRequestオブジェクトってどんなメソッドとかプロパティ持っているのかって思ったのでちょっと調べてみた。

利用可能なプロパティ

readyState Number XHR通信の状態を取得
status Number HTTPステータスを取得
statusText String HTTPステータスをテキストで取得
responseText String レスポンスボディの内容をStringで取得
responseXML Document レスポンスボディの内容をDocumentで取得
responseType String レスポンスボディのデータ型を指定する
response * レスポンスボディの内容を任意のデータ型で取得
upload #1 XMLHttpRequestUploadオブジェクトを取得する
timeout Number タイムアウトエラーが発生するまでの時間を設定
withCredentials Boolean Cookieなどの認証情報を送信するか?

1 XMLHttpRequestUpload

利用可能なメソッド

open() 「HTTPメソッド」を指定する「アクセス先URL」を指定する
overrideMimeType() 「MIME Type」のオーバーライドを設定する
send() 「送信データ」を指定する「XHR通信」を開始する
abort() 「XHR通信」を中止する
setRequestHeader() リクエストヘッダを設定する
getResponseHeader() レスポンスヘッダの情報を1つ取得する
getAllResponseHeaders() レスポンスヘッダの情報をまとめて取得

利用可能なイベント

onreadystatechange Event XHR通信の状態が変化するたびに実行される
onloadstart ProgressEvent XHR通信を開始したときに実行される
onprogress ProgressEvent 受信中に繰り返し実行される
onloadend ProgressEvent XHR通信が完了したときに実行される(失敗成功に関係なく)
onload ProgressEvent XHR送信が成功したときに実行される(成功時のみ)
onerror ProgressEvent XHR送信が失敗したときに実行される
onabort ProgressEvent XHR通信を中止すると実行される
ontimeout ProgressEvent タイムアウトエラー発生時に実行される

参照: JavaScript プログラミング講座

こちらはAjaxによるスクロールするとtxtファイルが読み込まれるコード

    &lt;script type=&quot;text/javascript&quot;&gt;
        var readingpart = 0;
        window.addEventListener('load',
            function(event){
                var elem = document.getElementById('text');
                elem.addEventListener('scroll',scrollText,false);
                loadText();
            },false);
        function loadText(){
            var req = new XMLHttpRequest();
            req.open('GET','part' + (readingpart + 1) + '.txt');
            req.onreadystatechange = function(event){
                if(req.readyState == 4){
                    var text = document.getElementById('text');
                    if(req.status == 200){
                        text.innerHTML += req.responseText;
                        readingpart++;
                    }
                }
            };
            req.send();
        }
        function scrollText(event){
            var text = event.currentTarget;
            var output = document.getElementById('output');
            var ss = text.scrollHeight - text.scrollTop;
            output.innerHTML =
            'H' + text.clientHeight +
            ' SH:' + text.scrollHeight + ' ST:' + text.scrollTop +
            ' SS:' + ss;
            if(ss &lt;= text.clientHeight){
                loadText();
            }
        };
    &lt;/script&gt;</p>

<p>

html

    <div id="wrapper">
    <h1>テキスト読み込み</h1>
    <div id="text"></div>
    <div id="output"></div>
    </div>

JSON

javascript

        &lt;script type=&quot;text/javascript&quot;&gt;
            window.addEventListener('load',
            function(event){
                var elem = document.getElementById('btn_load');
                elem.addEventListener('click',loadJSON,false);
            },false);
            function loadJSON(){
                var req = new XMLHttpRequest();
                req.open('GET','prod_data.json');
                req.onreadystatechange = function(event){
                    if(req.readyState == 4){
                        var div = document.getElementById('div_source');
                        if(req.status == 200){
                            div.innerHTML = req.responseText;
                            createTable(req.responseText);                    }
                        } else{
                            div.innerHTML = '読み込みエラー';
                        }
                };
                req.send();
            };
            function createTable(jsontxt){
                var prod_data = eval('(' + jsontxt + ')');
                var table = document.getElementById('prod_table');
                var tbody = document.getElementsByTagName('tbody')[0];
                for(var i = 0; i&lt;prod_data.length; i++){
                    var tr = document.createElement('tr');
                    var td = document.createElement('td');
                    td.innerHTML = prod_data[i].name;
                    tr.appendChild(td);
                    td = document.createElement('td');
                    td.innerHTML = prod_data[i].price;
                    tr.appendChild(td);
                    tbody.appendChild(tr);
                }
            }
        &lt;/script&gt;</p>

<p>

html

    <div id="wrapper">
    <h1>テキスト読み込み</h1>
    <input type="button" id="btn_load" value="読み込み"></button>
    <div id="div_source"></div>
    <table id="prod_table">
        <tbody>
        <thead>
            <tr>
                <th>製品名</th>
                <th>価格</th>
            </tr>
        </thead>
        </tbody>
    </table>
    </div>

javascript-Ajax-

javascript

        window.addEventListener('load',
            function(event){
                var elem = document.getElementById('btn_loadtext');
                elem.addEventListener('click',loadText,false);
            },false);
        function loadText(event){
            var req = new XMLHttpRequest();
            req.open('GET','aozora.txt');
            req.onreadystatechange = function(event){
                if(req.readyState ==  4){
                    var text = document.getElementById('text');
                    if(req.status == 200){
                        text.innerHTML = req.responseText;
                    }else{
                        text.innerHTML = '読み込みエラー';
                    }
                }
            };
            req.send();
        }

html

    &lt;h1&gt;テキスト読み込み&lt;/h1&gt;
    &lt;input type=&quot;button&quot; id=&quot;btn_loadtext&quot; value=&quot;読み込み&quot;&gt;
    &lt;div id=&quot;text&quot;&gt;&lt;/div&gt;</p>

<p>

&lt;p class=&quot;p1&quot;&gt;&amp;lt;!DOCTYPE &lt;span class=&quot;s1&quot;&gt;html&lt;/span&gt;&amp;gt;&lt;/p&gt;
&lt;p class=&quot;p1&quot;&gt;&lt;span class=&quot;s1&quot;&gt;&amp;lt;html&amp;gt;&lt;/span&gt;&lt;/p&gt;
&lt;p class=&quot;p1&quot;&gt;&amp;lt;head&amp;gt;&lt;/p&gt;
&lt;p class=&quot;p1&quot;&gt;&amp;lt;meta &lt;span class=&quot;s1&quot;&gt;charset&lt;/span&gt;=&quot;UTF-8&quot;&amp;gt;&lt;/p&gt;
&lt;p class=&quot;p1&quot;&gt;&amp;lt;title&amp;gt;&amp;lt;%=title %&amp;gt;&amp;lt;/title&amp;gt;&lt;/p&gt;
&lt;p class=&quot;p1&quot;&gt;&amp;lt;link type=&quot;text.css&quot; &lt;span class=&quot;s1&quot;&gt;href&lt;/span&gt;=&quot;style.css&quot; &lt;span class=&quot;s1&quot;&gt;rel&lt;/span&gt;=&quot;&lt;span class=&quot;s1&quot;&gt;stylesheet&lt;/span&gt;&quot;&amp;gt;&lt;/p&gt;
&lt;p class=&quot;p1&quot;&gt;&amp;lt;/head&amp;gt;&lt;/p&gt;
&lt;p class=&quot;p1&quot;&gt;&amp;lt;body&amp;gt;&lt;/p&gt;
&lt;p class=&quot;p1&quot;&gt;&amp;lt;h1&amp;gt;&amp;lt;%=title %&amp;gt;&amp;lt;/h1&amp;gt;&lt;/p&gt;
&lt;p class=&quot;p1&quot;&gt;&amp;lt;p&amp;gt;&amp;lt;%=&lt;span class=&quot;s1&quot;&gt;msg&lt;/span&gt; %&amp;gt;&lt;/p&gt;
&lt;p class=&quot;p1&quot;&gt;&amp;lt;/body&amp;gt;&lt;/p&gt;
&lt;p class=&quot;p1&quot;&gt;&amp;lt;/html&amp;gt;&lt;/p&gt;</p>

<p>&lt;h3&gt;node.js&lt;/h3&gt;
var http = require('http');
var fs = require('fs');
var url = require('url');
var ejs = require('ejs');
var cookie = require('cookie');</p>

<p>var index = fs.readFileSync('./index.ejs','utf8');
var style = fs.readFileSync('./style.css','utf8');
var server = http.createServer();</p>

<p>server.on('request',doRequest);
server.listen(1337);</p>

<p>function doRequest(req,res){
var path = url.parse(req.url);
switch(path.pathname){
case '/' :
var msg = &quot;クッキーはありません&quot;;
if(req.headers.cookie != null){
var ck = cookie.parse(req.headers.cookie);
msg = &quot;クッキー:&quot; + ck.lasturl + &quot;,&quot; + ck.lasttime;
}
var tmp = ejs.render(index,{
title : 'index Page',
msg : msg
});
res.setHeader('Content-Type','text/html');
res.write(tmp);
res.end();
break;
case '/style.css':
res.setHeader('Content-Type','text/css');
res.write(style);
res.end();
break;
case '/time':
var d = new Date().toDateString();
var ck1 = cookie.serialize('lasttime',d,{
maxAge : 100
});
res.setHeader('Set-Cookie',ck1);
res.setHeader('Content-Type','text/plain');
res.write('SET - COOO_KIEE!');
res.end();
break;
case '/favicon.ico':
break;</p>

<p>default :
res.setHeader('Content-Type','text/plain');
res.setHeader('Set-Cookie',['lasturl=' + path.pathname]);
res.write('SET COOKIE!');
res.end();
break;
}
}
console.log('Server runnning at http://127.0.0.1:1337');</p>

<p>

Nod.jsを扱うときのEclipseの設定方法とプラグインを使って日本語化(Pleiades)めもめも

①ここのサイトからダウンロード

<

h4>Eclipse IDE for Java EE Developers

<

h4>
https://eclipse.org/downloads/packages/eclipse-ide-java-ee-developers/keplersr2

自分のOSにあったものを右端のところから
bit数はOSの(調べてね)そのものを。
64bitのやつで32bitをダウンロードしたら使えるけど、自分のOSが32なのに64はダメ

わたしはMacなので
ここから
http://www.eclipse.org/downloads/download.php?file=/technology/epp/downloads/release/kepler/SR2/eclipse-jee-kepler-SR2-macosx-cocoa-x86_64.tar.gz

この写真の緑のところ

<

h4>Pleiades – Eclipse プラグイン日本語化プラグイン

<

h4>
http://mergedoc.sourceforge.jp/

写真

気持ち悪い

ここの安定版のほう
ここ

一瞬迷ったけどダウンロード数多い方選んだ

③今ダウンロードしたpleiadesの中の「features」内にある[jp.sourcefore.mergedoc.pleiades]を
コピーしてEclipse内の「features」内にペースト

次にダウンロードしたpleiadesの中の「plugins」内にある[jp.sourcefore.mergedoc.pleiades]を
コピーしてEclipse内の「plugins」内にペースト

eclipse.iniを編集する
※Macの方はeclipse.appをctr+右で「パッケージ内容を表示」でcontentフォルダの中にあるよ

    // var tar = document.getElementById("price")
    // var elem = tar.getElementsByTagName('p');
    // var tagleng = tar.getElementsByTagName('p').length;
    // var str =[],addEleme = '';
    // var re =[],result;
    // for(var i = 0;i<tagleng;i++){
    //   addEleme += elem[i].innerHTML + ',';
    //  result = addEleme.replace(/([0-9]{3}),/g,',$1_');
    //   re = result.split('_');

// re.pop();
//最後の要素を取得して削除
// }
// re;

    // p要素に入っているtextNodeの値を全て取得
    // stringにする
    // 全てのそれに
    // 一番最後から数えて3番目の前にカンマをつける


    //正解
    // function numberFormat(source){
    //  var s = new String(source);
    //  var ret = '';
    //  for (var i = s.length-3; i>0;i-=3){
    //      ret = '.' + s.substr(i,3) + ret;
    //  }
    //  ret = s.substr(0,i+3) + ret;
    //  return ret;
    // }
    // document.write('合計金額は' + numberFormat(2895 * 5) +  'です');円
    // window.alart('保存しました');

var reg = new RegExp(‘^[0-9]’);
reg.test(‘foo’);
false
reg.test(‘123’);
true
var reg = /’^[0-9]’/;
undefined
var reg = /’^[0-9]’/;
function RegExp(){

}
undefined
var reg = /’^[0-9]’/;
reg.constructor;

function RegExp() { [native code] }
var reg = /’^[0-9]’/g;
var reg = /^\s+/;
undefined
reg
/^\s+/
var reg = new RegExp(‘^\s+’);
undefined
var reg = new RegExp(‘^\s+’);
undefined
reg
RegExp {}
var text = ‘abc def ghi jkl’;
var reg = /(\w+)\s(\w+)/;
reg.exec(text);
[“abc def”, “abc”, “def”]
var reg = /(\w+)\s(\w+)/g;
undefined
reg
/(\w+)\s(\w+)/g
var text = ‘abc def ghi jkl’;
undefined
reg.exec(text);
[“abc def”, “abc”, “def”]
reg.exec(text);
[“ghi jkl”, “ghi”, “jkl”]
reg.exec(text);
null
var text = ‘moritakenji’;
var result = text.search(/^kan/g);
result;
-1
var text = ‘moritakenji’;
var result = text.search(/^moirta/g);
result;
-1
var text = ‘moritakenji’;
var result = text.search(/^(moirta)/g);
result;
-1
var text = ‘abc def ghi jkl’;
text.replace(/\s/,’,’);
“abc,def ghi jkl”
var text = ‘abc def ghi jkl’;
text.replace(/\s/g,’,’);
“abc,def,ghi,jkl”
text.replace(/(.)\s/g,’,$1′);
“ab,cde,fgh,ijkl”
text.replace(/(.)\s/g,function(01m,02m){return ‘,’+ 02m});
Uncaught SyntaxError: Unexpected token ILLEGAL VM50:732
text.replace(/(.)\s/g,function(m0,m1){return ‘,’+ m1});
“ab,cde,fgh,ijkl”
var text = ‘abc def ghi jkl’;
undefined
text
“abc def ghi jkl”
text.match(/\w/g);
[“a”, “b”, “c”, “d”, “e”, “f”, “g”, “h”, “i”, “j”, “k”, “l”]
text.match(/(w+)\s/g);
null
text.match(/(w)\s/g);
null
text.match(/(.)\s/g);
[“c “, “f “, “i “]
text.match(/(.)\s/g);
[“c “, “f “, “i “]
text.match(/([a-z]{,3})\s/g);
null
text.match(/([a-z]{3})\s/g);
[“abc “, “def “, “ghi “]
text.match(/([a-z]{1,2})\s/g);
[“bc “, “ef “, “hi “]
text.match(/([a-z]{0,1})\s/g);
[“c “, “f “, “i “]
text.match(/([a-z]{3})\s/g);
[“abc “, “def “, “ghi “]
text.match(/(\w+)\s(\w+)/g);
[“abc def”, “ghi jkl”]

再帰呼び出し
アクセサプロパティ
with()
apply call

var gloval;
var re = /(.)@(.+).(.)/;
var callback = function(){
gloval = arguments;
return arguments[1] + ‘at’ + arguments[2] + ‘dot’ + arguments[3];
}
‘kennjirmotaitata@yahoo.co.jp’.replace(re,callback);
//”kennjirmotaitataatyahoo.codotjp”

var arry = [];
var csv = ‘one, two, three’;
var re = csv.replace(/\s/g,”);
arry.push(re);

/<(\S+)(?:\s+.+)?>/
//配列に含めないタグ正規表現

文字列の位置。sliceとsubstringの第二引数に-1を与えた場合

var s = ‘moritakenji’;
s.slice(0,5);
“morit”
s.slice(0,-1)
“moritakenj”
s.substring(0,-1)
“”
s.substring(1,-1)
“m”

substr(0,3)
長さ

s.charAt(0)
位置にある文字を取得

全部とるにはslice(0,-1);

検索位置を返すstring.indexOf();
‘moritakenji’.indexOf(‘o’,2)//-1
‘moritakenji’.indexOf(‘o’) //1

.コールバック関数

3つある任意の数字を2倍にして配列で返す関数を実行した後、1を足す関数を実行
//失敗
function multi(a,b){
var arr = [];
for(var i in arguments){
var result = arry.push(i *2);
}
return result;
};
var result2 = multi(3,4);
result2

//見本
var i,arr = [];
function muliti(a,b,c){
for(i = 0;i<3;i++){
arr[i] = arguments[i] *2;
}
return arr;
};
function add(a){
return a + 1;
}
var my = [];
my = muliti(10,30,40);

for(var i = 0;i<3;i++){my[i] = add(my[i])};

ループをへらすことで実行コストを抑える。
1つのコードでやる。
コールバック関数を受け取るようにして繰り返しごとに関数を呼び出す
var my = [];
function muliti(a,b,c,callback){
var i,arr = [];
for(i= 0;i<3;i++){
arr[i] = callback(arguments[i] * 2);
}
return arr;
}
function add(a){
return a + 1;

}
my = muliti(2,3,5,add);

add()の代わりに無名関数を使うとグローバル関数を減らせることができる
var my = [];
function muliti(a,b,c,callback){
var i,arr =[];
for(i=0;i<3;i++){
arr[i] = callback(arguments[i] *2);
}
return arr;
}
my = muliti(2,3,5,function(a){return a + 1})

1

独自オブジェクトのコンストラクタ
function Product(name,price){
    this.name = name;
    this.price = price;
}
var prod_data = [];
prod_data.push(new Product('リラックスチェア','4000'));//{name:'リラックスチェア',price:'4000'}
prod_data.push(new Product('リラックスデスク','12000'));//{name:'リラックスデスク',price:'12000'}
prod_data.push(new Product('ブックスタンド','800'));//{name:'ブックスタンド',price:'800'}
window.addEventListener('load',function(event){
    createTable();

},false);
//表作成関数
function createTable(){//HTMLの生成
    var table = document.getElementById('prod_table');
    var tbody = document.getElementsByTagName('tbody')[0];
    for(var i = 0;i<prod_data.length;i++){
        if(!(prod_data[i] instanceof Product)){
            continue;
        }
        var tr = document.createElement('tr');
        var td = document.createElement('td');
        td.innerHTML= prod_data[i].name;
        tr.appendChild(td);
        td = document.createElement('td');
        td.innerHTML = prod_data[i].price;
        tr.appendChild(td);
        tbody.appendChild(tr);
    }
}

2
//他の関数を作成する場合

//独自オブジェクトのコンストラクタ
function Product(name,price){
    this.name = name;
    this.price = price;
    //コンストラクタに定義
    this.calcPrice1 = function(amount){
        return this.price * amount;
    }
}
//プロトタイプで共有
Product.prototype.calcPrice2= function(amount){
    return this.price * amount;
}
var prod_data = [];
prod_data.push(new Product('リラックスチェア','4000'));
prod_data.push(new Product('リラックスデスク','12000'));
prod_data.push(new Product('ブックスタンド','800'));

window.addEventListener('load',function(event){
    createTable();

},false);
function TableTool(){}//静的メソッドを作成
TableTool.createTdStr = function(value){
    var str = '';
    for(var i= 0;i<value.length;i++){
        str += '<td>' + value[i] + '</td>';
    }
    return str;
}
//表作成関数
function createTable(){
    var table = document.getElementById('prod_table');
    var tbody = document.getElementsByTagName('tbody')[0];
    for(var i = 0; i < prod_data.length; i++){
        var tr = document.createElement('tr');
        tr.innerHTML = TableTool.createTdStr(
            [prod_data[i].name,
            prod_data[i].price,
            prod_data[i].calcPrice2(10),
            prod_data[i].calcPrice2(20),
            prod_data[i].calcPrice2(30)
            ]
        );
        tbody.appendChild(tr);
        }
    }

3

// オブジェクトの継承
//独自オブジェクトのコンストラクタ
function Product(name,price){
    this.name = name;
    this.price = price;
}
Product.prototype.calcPrice = function(amount){
    return this.price * amount;
}
function HardProduct(name,price){//継承元と同じプロパティを定義する必要がある。そうしないとprototypeで継承元をたどってしまうから
    this.name = name;
    this.price = price;
    this.zaiko = 0;
}
HardProduct.prototype = new Product();//継承したいオブジェクト(継承元)のインスタンスを代入する

function SoftProduct(name,price){
    this.name = name;
    this.price = price;
}
SoftProduct.prototype = new Product();//継承はprototypeに対しての代入になる。これ逆にするとprototypeに対して追加していたメソッドが消えてしまう
SoftProduct.prototype.calcPrice = function(){
    return '---';
}
var prod_data = [];
prod_data.push(new HardProduct('リラックスチェア','4000'));
prod_data.push(new HardProduct('リラックスデスク','12000'));
prod_data.push(new HardProduct('ブックスタンド','800'));
prod_data.push(new SoftProduct('設置サービス','2800'));
prod_data.push(new SoftProduct('1年保証','5800'));
window.addEventListener('load',function(event){
    createTable();
},false);

function TableTool(){}//静的メソッドを作成
TableTool.createTdStr = function(value){
    var str = '';
    for(var i= 0;i<value.length;i++){
        str += '<td>' + value[i] + '</td>';
    }
    return str;
}
//表作成関数
function createTable(){
    var table = document.getElementById('prod_table');
    var tbody = document.getElementsByTagName('tbody')[0];
    for(var i = 0; i < prod_data.length; i++){
        if(!(prod_data[i] instanceof Product)){
            continue;
        }
        var tr = document.createElement('tr');
        tr.innerHTML = TableTool.createTdStr(
            [
            prod_data[i].name,
            prod_data[i].price,
            prod_data[i].calcPrice(10),
            prod_data[i].calcPrice(20),
            prod_data[i].calcPrice(30)
            ]
        );
        tbody.appendChild(tr);
        }
    }

<style> 
table{border:solid 1px orange;border-spacing:0px;}
th,td{border:solid 1px orange;padding: 4px}
</style>


新製品価格表

</table>



–>

javascript消費税8%関数(実際のコード付、消費税10%になった場合のjavascript関数も対応)です。

よかったらコピペして使ってください。

javascript消費税8%関数のコード(下に実際に価格を入れてみて「計算」を押してください)

JS Bin on jsbin.com

inputに入れられた数値をcalcuに渡して1.08を乗算、小数点以下を丸めて(捨てて)返しています。返されたresultはそれをあらかじめ作られた要素のid取得してinnerHTMLとして代入しています。 htmlに埋め込んでありますので使うとき移行してください。 10%のが欲しかったらコード内の1.08を1.1に変更して使ってくださいね

javascript消費税8%関数が実際動作する様子

JAVASCRIPT消費税8%関数

]1 JAVASCRIPT消費税8%関数

製品名 価格 10個 20個 30個
2017年10月
« 9月    
 1
2345678
9101112131415
16171819202122
23242526272829
3031