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

カスタムタスク内は自由な記述が可能
[javascript]
module.exports = function(grunt){
grunt.registerTask('default','”hellow”と表示',function(){
grunt.log.writeln('Hellow').ok();
});
};
//grunt
[/javascript]

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

[javascript]
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
[/javascript]

ターミナルで
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 https://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
[javascript]
watch: {
sass: {
files: ['<%= dir.sass %>/.scss'],
tasks: ['compass']
},
html_files:{
files:'html/.html'
},
options:{
livereload: true
}
}
[/javascript]

[javascript]

var ary = ['bb','eeee','aaa','dddd','cc'];
var result = ary.sort();//["aaa", "bb", "cc", "dddd", "eeee"]

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

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

//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});

alert(sum);

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

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

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

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

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

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

[javascript]

    var text = 'abc def ghi jkl';

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

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

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

[/javascript]

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

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

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

順番はこれ。。力業ですけど。。もっとスマートな感じでやりたい。。
[javascript]
<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();
};
});

[/javascript]
html

遅延ロードには「data-original」属性でパス指定するみたいですね。んで普通のsrc属性にはダミー画像。srcなしなら灰色の画像がでるみたい。
オプションでfadeinとかスクロールに対しての画像読み込み準備とかできるみたいですね。
[html]
<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>
[/html]
CSS
[css]
div.lazy-container{text-align:center;}
img.lazy{width:640px;height:480px;}

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

[/css]

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

正規表現の話題になったからおさらいしたし、
100から200の数字を検索掛けるのに、正規表現で/[100-200]/ではないよな？？
と思ったので。。
おさらいをかねていい勉強になったわ
[javascript]
var str1 = 'わたしのサイトはhttps://kennjimoritattayahoo.co.jpですあなたのはhttps://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);
//["1000","99"];

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



//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]/));

[/javascript]