タグ別アーカイブ: JavaScript

javascript

image

    //</p>

<pre><code>Book = Backbone.Model.extend({
    initialize: function(){
        //検出エラーが生じた場合イベントが生成される。invalidイベントハンドラを追加すると検証エラーをフィードバックとして提供できるようになる
        this.on('invalid',function(model,error){
            console.log('**Validation Error:' + error + &amp;quot;**&amp;quot;);
        });
    },
    defaults: {
        name:'Book Title',
        author : 'No One'
    },
    printDetails:function(){
        //something
    },
    validate: function(attrs){
        if(attrs.year &amp;lt; 2000){
            return 'Year must be after 2000';
        }
        if(!attrs.name){
            return 'A name must be provided';
        }
    }
});
var thisBook = new Book();
//2000年よりも前の年を設定
thisBook.set('year',1999,{validate:true});
console.log('Check year change' + thisBook.get('year'));

//モデルから名前を削除
thisBook.unset('name',{validata:true});
console.log('Check if name was removed:' + thisBook.get('name'));


//validフラグを指定しない場合,setメソッドの呼び出し時にvalidate関数は実行されない。
//ただしisValidメソッドを利用すれば、モデルが有効な状態かをいつでもチェックできる
//モデルが有効かどうかをチェック
console.log('Is model valid:' + thisBook.isValid());
// validate フラグを指定しない状態でルール違反
thisBook.set('year',1990);
//モデルが有効かどうかをチェック
console.log('Is model valid:' + thisBook.isValid());
</code></pre>

<p>

image

高いんだよこの本。。
でもやってやろうって気にさせてくれた。。
よく本を人に借りるっていうのあるけど、
お金掛けた方が必死で勉強するよ??

そんなわけでbackboneのモデルからお勉強。2月はCoffeeScriptとBackbone.jsとNode.jsやってきます。。

    &lt;script src=&quot;./js/external/jquery1.11.1.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;./js/external/underscore.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;./js/external/backbone.js&quot;&gt;&lt;/script&gt;
    &lt;script&gt;
        Book = Backbone.Model.extend({
            initialize: function(){
                console.log('a new book');
            },
            defaults:{
                name : 'Book Title',
                author: 'No One'
            },
            printDetails: function(){//繰り返し発生するタスクを処理するための関数
                console.log(this.get('name') + 'by' + this.get('author'));
            }
        });
        var myBook = new Book();
        var thisBook = new Book({name: 'Beginning Backbone', author:'James Sugrue'});
        console.log(thisBook.get('name')+ 'by' + thisBook.get('author'));</p>

<pre><code>    console.log(thisBook.attributes);//すべての属性のJSON表現

    thisBook.set('name','Beginning Backbone.js');//コンストラクタの外側で属性値を変更する方法
    thisBook.set('year','2015');//yearという新しい属性値を作成

    //モデルで使用しなくなった属性の削除:unset()
    thisBook.set('year',2015);
    console.log('Book year' + thisBook.get('year'));
    thisBook.unset('year');
    console.log('Boook year' + thisBook.get('year'));

    //モデルの存在の確認:has()
    var hasYear = thisBook.has('year');
    var hasName = thisBook.has('name');
    console.log('Has an attribute called year:' + hasYear);
    console.log('Has an attribute called name:' + hasName);

    //clearメソッドを使ってモデル属性を全て削除する
    var newBook = new Book({name:'Another Book',author:'You'});
    //属性を全て削除
    newBook.clear();
    //newBook.hasがfalseを返す
    console.log('Has an attribute called name :' + newBook.has('name'));

    //モデルインスタンスの完全なコピ
    var clonedBook = thisBook.clone();

    //printDetails関数の使用
    thisBook.printDetails();

    //
</code></pre>

<p>//モデルのイベント
//変更イベントの処理
    Book = Backbone.Model.extend({
        initialize : function(){
            // this.on('change',function(){//setメソッドが呼び出される度にこの関数が呼び出される
            //     console.log('Model Changes Detected');
            // });</p>

<pre><code>        //特定の属性の変更を待ち受ける場合。下記はname属性への変更のみ対応
        // this.on('change:name',function(){})

        //
        this.on('change',function(){

            // set()で呼び出される関数
            // console.log('Model has changed');

            //モデルの何が変更されたかを追跡する hasChanged()
            // if(this.hasChanged('name')){
            //     console.log('The name has changed');
            // }
            // if(this.hasChanged('year')){
            //     console.log('The year has changed');
            // }

            //変更された属性をまとめて取得:changedプロパティ
            // console.log('Changed attributes:' + JSON.stringify(this.changed));
            // Changed attributes:{&amp;quot;name&amp;quot;:&amp;quot;Different Book&amp;quot;}
            //Changed attributes:{&amp;quot;year&amp;quot;:&amp;quot;34&amp;quot;}

            //全ての属性について以前の状態をまとめて取得することもできる:previousAttributes
            // console.log('Previous attributes:' + JSON.stringify(this.previousAttributes()));
            // Previous attributes:{&amp;quot;name&amp;quot;:&amp;quot;Book Title&amp;quot;,&amp;quot;author&amp;quot;:&amp;quot;No One&amp;quot;}
            // Previous attributes:{&amp;quot;name&amp;quot;:&amp;quot;Different Book&amp;quot;,&amp;quot;author&amp;quot;:&amp;quot;No One&amp;quot;}

            //特定の属性に対して変更前の値を取得する: previous('属性名')
            console.log('Changed attributes:' + JSON.stringify(this.changed));
            if(this.hasChanged('name')){
                console.log('The name has changed from' + this.previous('name') + 'to' + this.get('name'));
            }
            // Changed attributes:{&amp;quot;name&amp;quot;:&amp;quot;Different Book&amp;quot;}
            // The name has changed fromBook TitletoDifferent Book
            // Changed attributes:{&amp;quot;year&amp;quot;:&amp;quot;34&amp;quot;}
        });
    },
    defaults: {
        name: 'Book Title',
        author: 'No One'
    },
    printDetails: function(){
        console.log(this.get('name') + 'by' + this.get('author'));
    }
});
</code></pre>

<p>//setメソッドには更新時にイベントを発生させないためのオプションパラメーターがある。このオプションを指定すると,changeハンドラが呼び出されなくなる
    //変数を設定(本来ならchangeハンドラが呼び出される)
    //changeハンドラが呼び出される
    var thisBook = new Book();
    thisBook.set('name','Different Book');
    thisBook.set('year','34');
    // //changeハンドラが呼び出されない
    // thisBook.set('name','Differnt Book',{silent:true});</p>

<p>

grunt

1.javascriptの処理をそのまま実行できるカスタムタスク

カスタムタスク内は自由な記述が可能

module.exports = function(grunt){
    grunt.registerTask('default','”hellow”と表示',function(){
        grunt.log.writeln('Hellow').ok();
    });
};
//grunt

// 2.コマンドの引数受け取り

module.exports = function(grunt){
    grunt.registerTask('displayArgv','引数表示',function(argv1,argv2){
        grunt.log.writeln('argv1:' + argv1);
        grunt.log.writeln('argv2:' + argv2);
    })
}
//コマンド上で
grunt displayArgv:foo:bar
//argv1: foo
//argv2: bar

ターミナルで
npm install
したら
このようなエラーが出たら

If you’re seeing this message, either a Gruntfile wasn’t found or grunt
hasn’t been installed locally to your project. For more information about
installing and configuring grunt, please see the Getting Started guide:

プロジェクトにGruntfile.jsがありませんよ
こちらを実行
cd ~project
npm install –save-dev grunt

このようなエラーが出たら
kenjimorita-MacBook-Pro:study ***$ grunt

Local Npm module “grunt-combine-media-queries” not found. Is it installed?
Local Npm module “grunt-contrib-uglify” not found. Is it installed?
Local Npm module “grunt-csscomb” not found. Is it installed?
Local Npm module “grunt-imageoptim” not found. Is it installed?
Local Npm module “grunt-pngmin” not found. Is it installed?
Local Npm module “grunt-styleguide” not found. Is it installed?
Local Npm module “grunt-text-replace” not found. Is it installed?
Local Npm module “grunt-usemin” not found. Is it installed?
Running “connect:server” (connect) task
Started connect web server on http://0.0.0.0:9000

Package.jsonには書いてあるけど実際ローカルにこれらのプラグインインストールされていませんよ。
こちらのコマンドを実行
npm install –save-dev プラグイン名
npm install –save-dev grunt-contrib-uglify

※プロジェクトファイルでnpm install
$ npm install –save-dev // package.json 側に devDependencies と書いてあれば –save-dev は無くてもいい。
–save-devはpacage.jsonにインストール時に記述するコマンド

このようなエラーが出たら
npm ERR! peerinvalid The package grunt-contrib-coffee does not satisfy its siblings’ peerDependencies requirements!
npm ERR! peerinvalid Peer grunt-contrib@0.11.0 wants grunt-contrib-coffee@~0.10.0

バージョンが違いますよ。
この上記の peerが今のバージョン。wantsのところが要求バージョン。

ライブリロード便利だなー。
これをGruntfile.jsに追加して
chromeとかfoxのアドオン追加すればいいみたい
https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei

watch: {
    sass: {
           files: ['&lt;%= dir.sass %&gt;/<em>.scss'],
           tasks: ['compass']
          },
          html_files:{
                files:'html/</em>.html'
            },
            options:{
                livereload: true
         }
}

</p>

<p>var ary = ['bb','eeee','aaa','dddd','cc'];
var result = ary.sort();//[&quot;aaa&quot;, &quot;bb&quot;, &quot;cc&quot;, &quot;dddd&quot;, &quot;eeee&quot;]</p>

<p>//文字の長さで順番を変えるsortカスタマイズ
function sortlength(a,b){
    return a.length -  b.length;
};
var result2 = ary.sort(sortlength);//[&quot;bb&quot;, &quot;cc&quot;, &quot;aaa&quot;, &quot;dddd&quot;, &quot;eeee&quot;]</p>

<p>//ECMA5から追加されたArrayメソッド</p>

<p>//forEach(要素に対して順番に関数を呼び出す)
//順番に要素を足していく関数
//各要素に対してarrayメソッドが呼び出されている.//forEachは単に関数を呼び出している
var sum = 0;
var arraySum = function(value){
    sum = sum + value;
}
var a = [1,3,5,7];
a.forEach(arraySum);
//↓無名関数をつかう
var su = 0;
var a  =[1,4,5,7];
a.forEach(function(vaule){sum = sum + vaule});</p>

<p>alert(sum);</p>

<p>//map 要素を配列にして返す
var a = [1,3,5,7];
var m = a.map(function(value){return value + 1});//[2, 4, 6, 8]</p>

<p>//reduce forEachのように順番に関数を呼び出すが、関数で返却された値と要素の2つを引数にして次の関数を呼び出す
var a = [1,3,5,7];
var sum = a.reduce(function(pre,value){
    return pre + value;//最後に関数の結果を返す為、都度格納する必要はない
});
//16</p>

<p>//filter 各要素に対して関数が呼び出される。関数がtrueを返した要素だけの配列が返却される
//偶数だけを配列にする</p>

<p>var fafa = [1,2,3,4,5,6,7];
var sum = fafa.filter(function(value){return (value % 2 == 0);})
//[2,4,6]</p>

<p>//every(全ての要素が条件を満たす場合true) some(いずれかの要素が条件を満たすばあいtrue)
var a = [1,2,3,4,5];
var be = a.every(function(value){return (value &lt;= 3);})//全て3以下か?
var be = a.some(function(value){return (value &lt;= 3);})//3以下の要素があるか?

RegExpってなんていうのかって思っていたら
レジックスていうらしいね。

</p>

<pre><code>    var text = 'abc def ghi jkl';

    var re1 = text.replace(/\s/g,',');
    document.write(re1);
    //「,」直前の文字をグループの後ろに移動する
    document.write('&amp;lt;br&amp;gt;');
    var re2 = text.replace(/(.)\s/g,',$1');
    document.write(re2);

    //上記と同じものをreplaceのコールバックを使う

    var re3 = text.replace(/(.)\s/g,
        function(m1,m2){//第一引数はマッチ全体。第二引数以降はグループの前方参照.マッチ毎にコールバックされる
            return ',' + m2;
        })
    document.write('&amp;lt;br&amp;gt;');
    document.write(re3);
</code></pre>

<p>

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

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

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

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

    &lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery1.11.1.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;jquery.lazyload.js&quot;&gt;&lt;/script&gt;
    $(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] == &quot;1&quot;){
            $wrapper.before(redinner);
            $last = $wrapper.find('#red').last();
            $last.empty();
        }else if(result[1] == &quot;2&quot;){
            $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年12月
« 11月    
 123
45678910
11121314151617
18192021222324
25262728293031