サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
買ってよかったもの
js.marooon.com
JavaScriptで文字列が含まれているかどうか判別する方法 javascriptにて特定の文字列が含まれているかどうか判別するにはいくつかの方法が存在します。 indexOfを使用する var str = 'marooon'; if ( str.indexOf('ooo') != -1) { //strにoooを含む場合の処理 } indexOfは、呼び出す String オブジェクト 中で、指定された値が最初に現れたインデックスを返します。値が見つからない場合は -1 を返すため、-1が返ってこなかった場合マッチしたことになります。 matchを使用する var str = 'marooon'; if ( str.match(/ooo/)) { //strにoooを含む場合の処理 } matchは正規表現を利用してマッチングを行います。
ブレイクスルーJavaScriptのChapter-01を参考にリアルタイムで入力チェックしてくれるフォームを実装してみます。この書籍は解説がシンプルでわかりやすく、中級者を目指すJavaScript初級者におすすめです。 validateメソッド実装する前に、まずは判定を行うvalidation patternのメソッドをプロトタイプで実装します。 // 空かどうか AppModel.prototype.required = function(){ return this.val !== ""; } // 数値がnum以上かどうか AppModel.prototype.maxlength = function(){ return num >= this.val.length; } // 数値がnum以下かどうか AppModel.prototype.minlength = functio
JavaScriptでリアルタイムバリデーションを実装する その1Model(モデル)の実装 ブレイクスルーJavaScriptのChapter-01を参考にリアルタイムで入力チェックしてくれるフォームを実装してみます。この書籍は解説がシンプルでわかりやすく、中級者を目指すJavaScript初級者におすすめです。 Modelの属性に値を追加する まずはModelを作成していきます。Modelの役割は以下の2つです。 Viewから値を受け取って、その値に対してバリデーションを実行する バリデーションの結果に応じてイベントを通知する まずはModelのコンストラクタを作成します。 function AppModel(attrs){ this.val = ""; } 次に前回とりあげたオブザーバの機能を追加します。 function AppModel(attrs){ this.val = ""
thisとは関数が呼び出された際に、その関数が属していたオブジェクトを指します。 function Person (name){ this.name = name; }; Person.prototype.sayName = function(){ console.log("hello "+ this.name); }; var taro = new Person("Taro"); taro.sayName(); // hello Taro; 上記のtaro.sayName()の場合saynameはtaroに属していることになるので、taroがこの関数内のthisになります。このときtaro.sayNameを渡しているのではなくsayNameに入っている関数オブジェクトを渡して実行しています。 また下記のように単なる関数呼び出しの際は、thisはグローバルオブジェクトを返します。 func
JavaScriptのデザインパターン オブザーバについて オブザーバとは? オブザーバとはデザインパターンの一種で、JavaScriptではよく使用されるパターンの一つです。 オブザーバまたはリスナーと呼ばれる1つ以上のオブジェクトを、サブジェクトと呼ばれる対象オブジェクトが発生するイベントを観察するために登録します。 実装をサブジェクトとオブザーバに分けることでイベントの対象とイベントの発行が疎結合に出来ます。 オブザーバの定義 // コンストラクタの生成 function Observer(){ this.listeners[]; // 監視者の格納場所 } // this.listenersにイベントを通知したい関数を追加するメソッド Observer.prototype.add = function(func){ this.listeners.push(func) } // 指定
変数のスコープ JavaScriptのスコープについてで説明したようにJavaScriptには変数にアクセスできる範囲が存在します。クロージャでは関数の中に関数を定義して、その関数の中で変数を定義することで変数を隠蔽します。 カウンターの実装例を見てみましょう。 普通のカウンター var count = 0; function counter(){ count++; console.log(count); } counter(); // 1 counter(); // 2 クロージャを使ったカウンター function createCounter(){ var count = 0; return function(){ count++; console.log(count); } } var counter1 = createCounter(); counter1(); // 1 coun
入門 React.js その2 JSXについて ReactではJSXというHTMLによく似たマークアップ言語がオプションで使用できます。 JSXを使用することで以下の利点があります。 HTMLと同様の方法で要素のツリーをマークアップできる 意味のわかりやすいセマンティックな記述ができる アプリケーションの構造が可視化できる Reactの内部表現が抽象化される マークアップとそれを生成するコードが一箇所にまとまる 最後にJavaScriptに変換される JSXとは? JSXはJavaScript XMLの略であり、Reactのコンポーネント内でマークアップ言語を記述するためのXML風のシンタックスです。 React.createElement('a', {href: 'http://facebook.github.io/react/'}, 'Hello!') JSXでは、これは次のようになり
http://facebook.github.io/react/ React.jsは現在注目を浴びているFacebook製のライブラリで、MVCアーキテクチャでいうViewにあたる機能を提供します。 公式サイトには、特徴として以下の3つが挙げられています。 JUST THE UI MVCのViewであり、既存のアーキテクチャと容易に結合することができます。 VIRTUAL DOM DOMを模した中間オブジェクトをあらかじめ生成し、更新差分のみを本物のDOMに反映することにより、ハイパフォーマンスを実現します。 DATA FLOW データフローを一方向に保ち、データと画面(DOM)の対応をを宣言的に記述することによって、可読性を向上させます。 今後、詳しい使い方について一つずつ説明をしていきます。 次回はJSXについて。 入門 React.js その2 JSXについて 入門 React.js
JavaScriptとイベント駆動型モデル(イベントドリブンモデル) JavaScriptはブラウザ上で起こる様々なイベントに応じて実行するコードを記述します。このプログラミングモデルのことをイベント駆動型モデル(イベントドリブンモデル)といいます。またイベントに対応してその処理内容を定義するコードをイベントハンドラと呼びます。
クラスの数が多くなってくるとオブジェクトの名前が競合する可能性が高くなります。そこでクラスライブラリを作成する場合には名前空間(パッケージ)の配下にまとめることが推奨されます。 名前空間の定義 名前空間を定義するには空のコンストラクタ関数を生成します。 var Marooon = function(){}; Marooon.Member = function(Name, Ruby){ this.name = Name; this.ruby = Ruby; } Marooon.Member.prototype = { getName: function(){ // 処理 } } var mem = new Marooon.Member("java", "script"); console.log(mem.getName); 上記ではMarooon名前空間を定義しています。Marooonオブジ
JavaScriptのオブジェクト指向について JavaScriptはれっきとしたオブジェクト指向言語です。しかし、一般的なJavaやC++、C#などの言語とは根本的に異なっています。 JavaScriptにはインスタンス化、インスタンスという概念はありますが、クラスがなくプロトタイプ(ひな形)という概念が存在しています。 関数で簡単なクラスを定義してみる var Person = function(){}; // クラス var p = new Person(); // インスタンス化 コンストラクタで初期化 new演算子によってオブジェクトを生成することを想定した関数オブジェクトのことをコンストラクタと言います。 var Person = function(name, ruby){ this.name = name; this.ruby = ruby; this.getName = f
JavaScriptで文字列が含まれているかどうか判別する方法 JavaScriptで文字列が含まれているかどうか判別する方法 javascriptにて特
このページを最初にブックマークしてみませんか?
『JavaScript Journal | JavaScript総合情報サイト』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く