タグ別アーカイブ: JavaScript芸人

javascript

lazyload.jsで遅延ロードとURLパラメーターを流入元毎にページ内のコンテンツ要素順序を変える(Jquery)

image
未リファクタリング。
パフォーマンスあんま。
とにかく機能だけ実装した叩き台。
regExpのところ全然。。もっとある。。
lazy.jsはここを参照しました。
ここ

URLパラメーターを取得、流入元毎にページ内のコンテンツの表示順序を変えるって
LPOっていうらしいね。初めて知りました。。勉強になります。。

順番はこれ。。力業ですけど。。もっとスマートな感じでやりたい。。

    <script type="text/javascript" src="js/jquery1.11.1.js"></script>
    <script type="text/javascript" src="jquery.lazyload.js"></script>
    $(function(){
        var href = window.location.href;
        var result = href.match(/\?page=(\d)+/);
        var $wrapper = $('#wrapper');
        var $wrapperinner = $wrapper.html();
        var $red = $('#red');
        var $blue = $('#blue');
        var $yellow = $('#yellow');
        var redinner = $red.html();
        var blueinner = $blue.html();
        var yellowinner = $yellow.html();
        var $last;
        if(result[1] == "1"){
            $wrapper.before(redinner);
            $last = $wrapper.find('#red').last();
            $last.empty();
        }else if(result[1] == "2"){
            $wrapper.before(blueinner);
            $last = $wrapper.find('#blue').last();
            $last.empty();
        };
    });</p>

<p>

html

遅延ロードには「data-original」属性でパス指定するみたいですね。んで普通のsrc属性にはダミー画像。srcなしなら灰色の画像がでるみたい。
オプションでfadeinとかスクロールに対しての画像読み込み準備とかできるみたいですね。

    <div id="wrapper">
        <div id="yellow"><div class="yellowhrefcontent hrefcontent"><span>わたしは2の場合ファーストビューになる黄色コンテンツです。</span></div></div>
        <div id="blue"><div class="bluehrefcontent hrefcontent"><div>わたしは3の場合ファーストビューになる青コンテンツです。</div></div></div>
        <div id="red"><div class="redhrefcontent hrefcontent"><p>わたしは1の場合ファーストビューになる赤コンテンツです。</p><div>ふぁふぁふぁ</div></div></div>
    </div>
    <div class="azy-container">
        <div><img data-original="./img/1.jpg" alt="" class="lazy"></div>
        <div><img data-original="./img/2.jpg" alt="" class="lazy"></div>
         <noscript><img class="lazy_fallback" src="./img/002.jpg" /></noscript>
        <div><img data-original="./img/3.jpg" alt="" class="lazy"></div>
        <div><img data-original="./img/4.jpg" alt="" class="lazy"></div>
        <div><img data-original="./img/5.jpg" alt="" class="lazy"></div>
        <div><img data-original="./img/6.jpg" alt="" class="lazy"></div>
        <div><img data-original="./img/7.jpg" alt="" class="lazy"></div>
        <div><img data-original="./img/8.jpg" alt="" class="lazy"></div>
        <div><img data-original="./img/9.jpg" alt="" class="lazy"></div>
    </div>

CSS

    div.lazy-container{text-align:center;}
    img.lazy{width:640px;height:480px;}</p>

<pre><code>.hrefcontent{width:400px;height: 400px;text-align:center;vertical-align:middle;}
.redhrefcontent{background:red;}
.yellowhrefcontent{background:yellow;}
.bluehrefcontent{background:blue;}
</code></pre>

<p>

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

IMG_2921

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

        var str1 = 'わたしのサイトはhttp://kennjimoritattayahoo.co.jpですあなたのはhttp://watasshi.jpですね'
        var reg1 = /http(s)?:\/\/([\w-]+&#46;)+[\w-]+(\/[\w- .\/?%&amp;=]*)?/gi;
        //
        var result = str1.match(reg1);
        for(i= 0;i&lt;result.length;i++){
            document.write(result[i]);
            document.write('&lt;br/&gt;');
        }
        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&lt;result.length;i++){
            document.write(result2[i]);
        }
        //行頭にある1文字以上の数字を抽出
        var reg2 = /^[0-9]{1,}/g;
        var str3 = '1000ですが\n99にもなります';
        var result3 = str3.match(reg2);
        //[&quot;1000&quot;]しか返さない
        //マルチラインを付けると改行コード直後、文字列末尾も検索する
        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>

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年3月
« 2月    
 12345
6789101112
13141516171819
20212223242526
2728293031