「JavaScript」カテゴリーアーカイブ

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

【JavaScript】レシカルスコープ芸人

今日レシカルスコープってなんだっけって思い、ぐぐったら わたしの書いたgithubが出てきた。

過去の自分に教わった。。 んで思い出した。

例えると

部屋があります。

庭があります(部屋は当然庭の中の家にあります。)

部屋で宣言したローカル変数(var)があり、

さらに部屋の中で宣言した関数fがそのvarを参照していたら、

同じ名前の変数が庭に既に宣言されていたとして、(グローバル変数)

庭で返り値とされた関数fが実行されてもfは部屋で宣言されたvarを参照する

これが 「関数は実行された時のスコープではなく、宣言時のスコープを参照する」の意味かな。。

var x = '庭';
var f = function(){ var x = '部屋';
return function(){return x}
//宣言した時のスコープは’部屋’を参照している
};
var f1 = f();
x -> '庭'
f1()
->'部屋'//関数実行時は一番上の'庭'もあるけど宣言時の'部屋'を参照する

でその関数宣言時のスコープがレシカルスコープ。

違いますか??過去のわし。。

スコープは部屋から庭へと変数を探す。

庭になければundefined

でも庭から部屋の変数は見えない

内から外へは辿っていける(スコープチェーン)けど外からはできない。

ここの理屈が以前本当に分からなかった。。

prototypeがチェーン役をするんだけど、ここらへんも「にゃーちゃんに教えなきゃ

フロントエンドの話 github qiita

【Immutable.jsの使い方】Immutable.js超入門~ReactでsetStateのプロパティ値に直接代入避ける~

【Immutable.jsの使い方】Immutable.js超入門~ReactでsetStateのプロパティ値に直接代入避ける~
【Immutable.jsの使い方】Immutable.js超入門~ReactでsetStateのプロパティ値に直接代入避ける~

続きを読む

【React】babelでbabel-preset-stage-0や使う方法「ES7 Property Initialiazers for Default Props and Prop 」を使いたい方へ

英語文しかなかったので自分のようなReactにおいて「ES7 Property Initialiazers for Default Props and Prop」を使いたい方へ記事書きました

参照 https://babeljs.io/blog/2015/10/29/6.0.0 https://egorsmirnov.me/2015/06/14/react-and-es6-part2.html

babelは6系からそれぞれプラグインをインストールすることになったみたいです。

具体的には これらを適当にインストールしてください(適当です)

"babel-core": "^6.7.6",
"babel-loader": "^6.2.4",
"babel-plugin-syntax-class-properties": "^6.5.0",
"babel-plugin-transform-class-properties": "^6.6.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"babelify": "^6.1.3",

その後 package.jsonに下のようにpresetsを設定(使いたいpresetのプラグインです)上のならbebel-plugin-[ここ] 「ES7 Property Initialiazers for Default Props and Prop 」はstage-0として設定すればOK .babelrcだったらpackage.jsonと同じ階層に置けばいいみたいです。今回はjsonに記述します。

"babel": {
"presets" : ["es2015", "react", "stage-0"
 ]
},
"devDependencies": {
//some
}

で gulpfileのtransformのところに

.transform("babelify", {presets: ["es2015", "react", "stage-0"]})

でok

ちょっとエラーが出たり分からなかった場合下記リンク先に playgroundあげてありますので余計なソースを削って使ってください。 ミニマムでReact,ES6の最新が動作できるようにされています。

https://github.com/kenmori/React-ES6-Flux-Playground/tree/master/playground

【 併せて読みたい 】

【REACT】REACTの動きを理解したい人の為の最小サンプル

【REACT入門】過去のREACT初心者の自分にREACTのPROPSとSTATEの違いを簡単に説明してあげたい

【REACT × ES6 × FLUX】を手っ取り早く学びたい人の為にサンプル作ったよ【3の倍数と3が付くときだけ猫になるCOUNTER】

REACT × FLUX × ES6 [WIP]LINE風チャット

他のReact記事

フロントエンド記事

github

qiita

Tagged template strings(タグテンプレートストリング)

Tagged template strings(タグテンプレートストリング)が多分便利なので 理解したことを書いておく コードはコチラ

もしも下記のように呼び出した場合、

[code language="javascript"] tag'もりた${kenji}です' [/code]

ES5でいうこのようなものとして呼び出している tag(["もりた","です"], kenji)

tagの第一引数に["もりた","です"]という変数として展開されない文字列が要素となる配列を受け取る それ以外のkenjiは第二引数以降受け取れる。 上記が

tag'もりた${kenji}です${yeah}' だとした場合 引数の数が増える

下記のように受け取った第一引数の配列のインデックスを参照することも可能(もちろん)

function tag(strings, ...values){ console.log(strings[0]) //もりた console.log(strings1) //です }

具体的な使用例

var long = '30px'; var weight = '40px';

function tag(strings, ...values){ return m:${values[0]}、p:${values[1]}; };

var str1 = tag身長${long}で、体重は${weight}です;

console.log(str1);

知らなかった!AtomでReact×ES6×JSX書くヒトの為のpackage「language-babel」が既にあった

Babel JavaScript ES201x, React JSX & Flow Grammar & Transpiler
Babel JavaScript ES201x, React JSX & Flow Grammar & Transpiler

https://atom.io/packages/language-babel

早速入れた。

【React × ES6 × Flux】を手っ取り早く学びたい人の為にサンプル作った【3の倍数と3が付くときだけ猫になるCounter】 Cat comes out when that contains the multiples of 3 and the string to 3

AWS11-5

なかなかミニマムでこれらを学べるプロジェクトがみつからなくて、勉強も兼ねて作りました。 なるべく小さい部品だと分かりやすいですしね。 この【React × ES6 × Flux】を手っ取り早く学びたい人の為にサンプル作ったよ【3の倍数と3が付くときだけ猫になるCounter】(Cat comes out when that contains the multiples of 3 and the string to 3)は clickすると値が増えるだけの本当に簡素なものですが、 中身はFluxで管理しているのでコードリーディングするのに動きがわかりやすくなっています。 component内でeventを感知すると状態を更新し、更新されたstateは予めリスナー登録していたメソッドをactionTypeによって振り分けてstore内で更新して、状態を子componentに伝えます。

プロジェクトをダウンロードして gulp立ち上げるとローカルサーバー立ち上がります。 jsが変更される度にbrowserifyでまとめてbabelifyでES6をES5に変換後bundleしてくれます。 ReactをClass構文で書きたい方、ES6も勉強したい方にはいいと思います。(僕も奮闘中です)

Fluxに関してはいろいろな書き方があるのですが、今実務でやっているような書き方でやっています。 (EventEmitterはライブラリではありません。)

プロジェクトはこちらです

Fluxに関して言えば前にも理解深めるためにこんなの作りました React × Flux × ES6 [WIP]LINE風チャット

ここからはわたしの今後。 わたしはAngular2もReactもマスターすると決めました。 「RactのこれはAngularでいうところのこれかぁ」、とか「AngularでいうところのtemplateってReactでこーなんだー」って結びつきが強くなるんですよね。 5年後残らないかもしれない技術でも学んだ意欲と「あれとどこか似ているぞ」というはどんなものが資産になるしね。 フロントは多分これからも過渡期ですよね。 ずーーと。 止まらない電車が止まったら乗るのではなく、動いている電車に飛び込んで、しがみつかないといけないと思っています。

こんどはおんなじものをAngular2 × TypeScriptで作ってみたい

ではみなさんいい週末を!!

フロントエンド系の話

github

qiita

【React × Flux × ES6】LINE風チャット

fafa
話は表題と違うのですが、
小さい頃よく母親の作る料理がどこか一箇所凝ったものが混ざってて、
普通の味噌汁でいいのにしめじ入ってたり、
普通の魚でいいのに苦手な野菜をあんかけにして乗っけてきたり、
普通の白ごはんでいいのに栗入れてきたり、、
普通のカレーやハンバーグでいいのにと思ってたのですが、そのカレーすらも茄子が入ってたり、、
よく買い物から帰ってきたスーパーの袋に小さい紙切れ入ってて、
鮮魚売り場で取ってきたレシピなんですよ、
「今度これ、作るのか、、勘弁してくれ、、」て。
今では「美味しいじゃん!」と思えるかもしれませんが、
小学生ですから舌もこえてないですよ。

失礼しました。
RactとFlux周りを勉強しているうちにじゃぁ実装しながら学んだ方がいいのではないか、
と思いました。
ここから状態をどう分けるかをやらなくちゃいけないですね。 コードは
こちら

こちら
です。よかったら

【 併せて読みたい 】

【React】Reactの動きを理解したい人の為の最小サンプル

【REACT入門】過去のREACT初心者の自分にREACTのPROPSとSTATEの違いを簡単に説明してあげたい

【REACT × ES6 × FLUX】を手っ取り早く学びたい人の為にサンプル作ったよ【3の倍数と3が付くときだけ猫になるCOUNTER】

他のReact記事

フロントエンド記事

[javascript]
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="https://cdn.rawgit.com/lodash/lodash/3.0.1/lodash.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<script>

function unsplat(fun){
return function(){
return fun.call(null, _.toArray(arguments));
};
}
var joinElements = unsplat(function(array){ return array.join('') });
var view = joinElements(1,2,90,"eee","ll");
console.log(view);

function lameCSV(str){
return .reduce(str.split("\n"), function(table, row){
table.push(
.map(row.split(","), function(c){return c.trim()}));
return table;
}, []);
};

var peopleTable = lameCSV("name,age,hair\nMerble,35,red\nBob,64,blonde");
console.log(peopleTable)

console.log(_.rest(peopleTable).sort());

var lyrics = [];
for(var bottles = 5; bottles > 0; bottles--){
console.log(bottles)
lyrics.push(bottles + "本のビールが残っている");
lyrics.push(bottles + "本のビール");
lyrics.push("ひとつ取って、隣に回せ");
if(bottles > 1 ){
lyrics.push((bottles - 1) + "本のビールが残っている");
}else {
lyrics.push("もうビールは残っていない");
}

}
console.log(lyrics);
</script>
</body>
</html>
[/javascript]

ES6(ECMAScript2015) related sites I have bookmarked

proto in ECMAScript 6 > <a href="https://See

reason is widely used. But non-encouragement.
See

Let's now check from now > See

You want to bookmark ES6 related

Specification

> See

free webbook

> See

good

> See

Tools can actually writing ES6

> See

It is checked whether to use a transformer compiler

> See

PostCSS,asm.js,ES6,Angular2。。2015年のフロントエンド界隈ではこちらが次世代の技術みたいですよ

スクリーンショット 2015-08-22 21.41.04

今日大阪でフロントエンドの話がされたみたいですね。 けっこうこの4つが大事みたい。。

スクリーンショット 2015-08-22 22.04.29

はちさんがいうんだから間違えない。

Angular2ES6

KAIZENの方がいうんだから間違えない スクリーンショット 2015-08-22 22.06.01

PostCSS!?コンパイルなしに書くSCSSみたいな記述??合ってる?? ・PostCSSasm.js

ちょっと先取りしようと思っています。

image
[javascript]
//

Book = Backbone.Model.extend({
    initialize: function(){
        //検出エラーが生じた場合イベントが生成される。invalidイベントハンドラを追加すると検証エラーをフィードバックとして提供できるようになる
        this.on('invalid',function(model,error){
            console.log('**Validation Error:' + error + &quot;**&quot;);
        });
    },
    defaults: {
        name:'Book Title',
        author : 'No One'
    },
    printDetails:function(){
        //something
    },
    validate: function(attrs){
        if(attrs.year &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());

[/javascript]

image

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

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

[javascript]
<script src="./js/external/jquery1.11.1.js"></script>
<script src="./js/external/underscore.js"></script>
<script src="./js/external/backbone.js"></script>
<script>
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'));

    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();

    //

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

        //特定の属性の変更を待ち受ける場合。下記は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:{&quot;name&quot;:&quot;Different Book&quot;}
            //Changed attributes:{&quot;year&quot;:&quot;34&quot;}

            //全ての属性について以前の状態をまとめて取得することもできる:previousAttributes
            // console.log('Previous attributes:' + JSON.stringify(this.previousAttributes()));
            // Previous attributes:{&quot;name&quot;:&quot;Book Title&quot;,&quot;author&quot;:&quot;No One&quot;}
            // Previous attributes:{&quot;name&quot;:&quot;Different Book&quot;,&quot;author&quot;:&quot;No One&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:{&quot;name&quot;:&quot;Different Book&quot;}
            // The name has changed fromBook TitletoDifferent Book
            // Changed attributes:{&quot;year&quot;:&quot;34&quot;}
        });
    },
    defaults: {
        name: 'Book Title',
        author: 'No One'
    },
    printDetails: function(){
        console.log(this.get('name') + 'by' + this.get('author'));
    }
});

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

[/javascript]

grunt

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('&lt;br&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('&lt;br&gt;');
    document.write(re3);

[/javascript]

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

image
未リファクタリング。
パフォーマンスあんま。
とにかく機能だけ実装した叩き台。
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文字列中に含まれるある文字の個数を返す

IMG_2921

正規表現の話題になったからおさらいしたし、
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- .\/?&amp;%=]*)?/g;
    var str4 = 'わたしはhttps://kennjimorita.jpです。';
    str4 += 'これhttps://korekore.jpもそうです';
    var result4 = reg4.exec(str4);
    for(i=0;i&lt;result4.length;i++){
        document.write(result4[i]);
        document.write('&lt;br&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]/));

[/javascript]

[javascript]
<div>

var re = new RegExp('j.*t')

undefined
var re = new RegExp("j.t");
undefined
re
/j.
t/
var re = /j.t/
undefined
re
/j.
t/
re.global
false
re.ignoreCase
false
re.multiline
false
var re = new RegExp("j.t")
undefined
re
/j.
t/
var re = /j.t/ig;
undefined
re
/j.
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.t/.test("javascript");
true
re.test("javascript")
true
/j.
t/i.test('javascript');
true
/j.t/.exec("javascript")[0]
"javascript"
/j.
t/.exec("javascript","eee")[1]
undefined
var s = new String('HellowJavascriptWorld');
undefined
s
String {0: "H", 1: "e", 2: "l", 3: "l", 4: "o", 5: "w", 6: "J", 7: "a", 8: "v", 9: "a", 10: "s", 11: "c", 12: "r", 13: "i", 14: "p", 15: "t", 16: "W", 17: "o", 18: "r", 19: "l", 20: "d", length: 21, [[PrimitiveValue]]: "HellowJavascriptWorld"}
s.match(/a/);
["a"]
s.match(/a/g);
["a", "a"]
s.match(/a/ig);
["a", "a"]
s.match(/j./ig);
["JavascriptWorld"]
s.match(/j.
a/i);
["Java"]
s.match(/j.s/i);
["Javas"]
s.match(/j.
c/i);
["Javasc"]
s.match(/a.c/i);
["avasc"]
s.match(/a.
c/i);
["avasc"]
s.search(/a.c/i);
7
s.search(/j.
c/i);
6
s.search(/j.c/i);
6
s.search(/j.
a/i);
6
s.search(/j.a/i);
6
s.replace(/[A-Z]/g,'');
"ellowavascriptorld"
s.replace(/[a-z]/g,'');
"HJW"
s.replace(/[A-Z]/,'');
"ellowJavascriptWorld"
s.replace(/[A-Z]/,'$&');
"_HellowJavascriptWorld"
s.replace(/[A-Z]/g,'
$&');
"Hellow_Javascript_World"
s.replace(/([A-Z])/g,'
$1');
"Hellow_Javascript_World"
s.replace(/([A-Z])/g,'
$1');
"_Hellow_Javascript_World"
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
"morita@yahoo.co.jp"
var username = /.
@/i;
undefined
var username = email.replace(/.@/i);
undefined
var username = email.replace(/.
@/i);
undefined
username
"undefinedyahoo.co.jp"
var username = email.replace(/(.)@./,"$1");
undefined
username
"morita"
function replaceCallback(match){return ""+ match.toLowerCase();}
undefined
function replaceCallback(match){return "
"+ match.toLowerCase();}
s.replace(/[A-Z]/g,replaceCallback);
"_hellow_javascript_world"
var glob;
undefined
var re = /(.*)@(.*).(.*)/;
undefined
re
/(.*)@(.*).(.*)/
var callback = function(){
glob = arguments;
return arguments[1] + 'at' + arguments[2] + 'dot' + arguments[3];
}
undefined
"moritakenji@yahoo.co.jp".replace(re,callback);
"moritakenjiatyahoo.codotjp"
var callback = function(){
glob = arguments;
return arguments[1] + ' at ' + arguments[2] + ' dot ' + arguments[3];
}
undefined
"moritakenji@yahoo.co.jp".replace(re,callback);
"moritakenji at yahoo.co dot jp"
glob
["moritakenji@yahoo.co.jp", "moritakenji", "yahoo.co", "jp", 0, "moritakenji@yahoo.co.jp"]ß
</div>
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"]
[/javascript]

[javascript]
//コンストラクタクラス定義、インスタンス生成、プロトタイプ継承を使った関数を参照
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;
}
var men1 = new Menber('morita','kenji');
var men2 = new Menber('kenji','kenji');

// オブジェクトリテラルでの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();

[/javascript]