JavaScript の this を理解する - tacamy--blog
this はインスタンス自身を指す、ただそれだけの話でしょう？ そんなふうに考えていた時期が私にもありました。そう、JavaScript の this に出会うまでは・・。 用語について 私は Java 脳で書いてるので、言葉遣いが JavaScript と若干違う部分があると思います。 下記のようなイメージで言葉を使っています。 用語 意味 クラス インスタンスオブジェクトの元となる設計図 コンストラクタ クラスのコード部分で、new したときにコンストラクタの内容で初期化する インスタンス クラスを元に実体化したオブジェクト メンバ変数 クラスやインスタンスに属するローカル変数 メソッド クラスやインスタンスに属する命令（関数） オブジェクト指向とプロトタイプと this JavaScript のオブジェクト指向開発では、元になるクラスを new することで、インスタンスを生成します。
ステップアップのためのJavascriptデザインパターン入門（２） 【コンストラクタパターン】
前回は第1回目ということで、そもそもデザインパターンとはなんぞや？という話に触れました。 今回から具体的なデザインパターンについて紹介していきます。 コンストラクタパターン コンストラクタ（Constructor）とはオブジェクトを作成し、初期化する関数のことです。 コンストラクタはJavascript以外の言語では「クラス」と呼ばれています。 プロトタイプベースの言語であるJavascriptでは、クラスの概念がありませんが、コンストラクタを作成することでクラスに似たオブジェクトを作成することができます。 コンストラクタは、オブジェクトを使用するための準備を行い、引数を受け取りオブジェクトの初回作成時にメンバのプロパティやメソッドに値を設定するのに利用します。 // コンストラクタを定義する function Person(name, age) { this.name = name; t
『[jQuery] 外部JavaScriptファイル読込みに関する考察』
前回の「GO2WEB20のTwitterバッチをAmebloにつけてみた。と、IE対策方法 」に端を発してjQueryを使って外部のJavaScriptのソースを読み込む際の様々なやり方の検証をしてみる。 jQueryのappend()を使ってタグを追加できますのでこれでscriptタグを追加してみます。 <script> $(document).ready(function(){ var script_tag = document.createElement("script"); script_tag.type = "text/javascript"; script_tag.src = "hoge.js"; script_tag.charset = "utf-8"; $("body").append(script_tag); }) </script> function foo() { a
![『[jQuery] 外部JavaScriptファイル読込みに関する考察』](https://cdn-ak-scissors.b.st-hatena.com/image/square/fa24a3b30d8fa23a05574c6d7eda22c94d409206/height=288;version=1;width=512/https%3A%2F%2Fstat.ameba.jp%2Fuser_images%2F20100402%2F00%2Fitboy%2F60%2F00%2Fj%2Fo0687039310477745699.jpg)
JavaScriptのコーディングTips集 - 主に言語とシステム開発に関して
JavaScriptのプログラミングに関するTips集。 主に中級レベルの話題とノウハウを掲載する。 なお，JavaScript初級〜中級をクイズ形式で網羅的に学習するためには，下記のエントリを参照。 JavaScriptの動かないコード (JavaScriptエラー集) http://language-and-engineering.hatenablog.jp/entry/20080912/1221297779 ※JavaScript以外のプログラミングについては，こちらを参照。 ピュアJSを極める： JavaScriptで，クラスを継承する方法 （複数のサブクラスから共通クラスのプロトタイプを参照する） JavaScriptでの例外設計 （throw，try-catch-finally構文のイメージと利用パターン） JavaScriptで，動的に追加されたイベントリスナの実行順序を保
[jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する | CreativeStyle
タイトルに書いてあることを実現しようとして、少し悩んだのでメモ。 ウインドウのリサイズ操作やjQueryに限らず、短い周期で連続してイベントが発生する場合に、一連の最後のイベントが発生した時にだけ何らかの処理を行いたい時に使えるパターンです。 何も工夫せずに書くと… こんな感じになります。
jQueryで「jQuery("input").attr("disabled",true)」と書くのはもはや古い
概要 ▶ jQueryについて調べていると色々情報が目に入ってくるものです。2012年4月7日現在、私はjQueryの1.4.4というバージョンを使用しています。これは「会社のCMSでも現在使用しているから」というところが大きいのですが、jQueryの最新版は1.7.2です。最新版のjQueryは以下のページからダウンロードできます。jQuery: The Write Less, Do More, Java jQueryについて調べていると色々情報が目に入ってくるものです。 2012年4月7日現在、私はjQueryの1.4.4というバージョンを使用しています。 これは「会社のCMSでも現在使用しているから」というところが大きいのですが、jQueryの最新版は1.7.2です。 最新版のjQueryは以下のページからダウンロードできます。 jQuery: The Write Less, Do
すごい便利になった！javascript入門の基礎知識と小技まとめ
作成：2013/12/24 更新：2014/11/01 Web制作 > サイト構築中にちょっとした動きをのせたいとき、どうすれば良かったのか何度も調べ直さないといけないことがあります。今回はJavaScript で初心者の方でもすぐ活用できるように、使用頻度の高いリファレンスと基本知識をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ できること １．リファレンス スクリプトの書き方／基礎知識 ２．スクリプトの記述 ３．文字列／特殊文字 ４．演算子 ５．オブジェクト ６．プロトタイプ ７．イベント ８．変数 ９．if文 １０．配列 １１．連想配列 １２．正規表現 １３．デバッグ できること １．リファレンス JavaScriptは開発環境の準備がほぼ不要で、コピー＆ペーストだけで、動くものができてしまいます。他の言語だとそう簡単にはいきません。サ
JavaScript で クエリストリング を 取得 & 分解 & 整形 する 方法
URLに含まれる クエリストリング （クエリ文字列、クエリパラメータ） を取得し、使いやすい形に分解、整形する サンプルコード を掲載します。 単純な クエリストリング を分解する コード はよく見かけるので、もう少しがんばって 配列 や ハッシュ（連想配列） に対応したものを実装してみました。 目次 取得 & 分解 & 整形 する 実装 サンプルコード の 使い方 対応している クエリストリング 関連記事 JavaScript で クエリストリング を 生成 する 方法 取得 & 分解 & 整形 する サンプルコード サンプルコード /** * グローバル変数 query に、クエリストリング解析結果を格納します。 * * サンプル クエリ * ?action=view&id=123&debug&arraylist[]=val1&arraylist[]=val2&hashlist[foo
連想配列や配列をクエリする。 - Thousand Years
予備知識 クエリで配列や連想配列を送りたい場合以下の形式でリクエストしてあける。以下のサンプルはURLエンコード前でつ。 // 1.配列ですよ index.html?hoge[]=10&hoge[]=20 // 2.連想配列ですよ index.html?hoge[foo]=foo&hoge[bar]=bar上記1のクエリが来たら$_GETの中身は以下みたいな感じになっている。 array(1) { ["hoge"]=> array(2) { [0]=> string(2) "10" [1]=> string(2) "20" } } HTMLだとこんな感じ。 <form action="index.html"> <input type="text" name="hoge[]" /> <input type="text" name="hoge[]" /> <input type
String.toJSON(), JSON.stringify(), JSON.parse() の実装比較一覧 - latest log
"あa".toJSON() JSON.stringify("あa") JSON.stringify({"あa": null}) Google Chrome6(dev) "あa" ""\u3042a"" "{"\u3042a":null}" Safari5 not impl ""あa"" "{"あa":null}" Opera10.60β not impl '"あa"' '{"あa":null}' Firefox3.6.3 "あa" ""あa"" "{"あa":null}" IE8 "あa" ""\u3042a"" "{"\u3042a":null}" IE6, IE7 not impl not impl not impl JSON.parse('"あa"') JSON.parse('"\u3042a"') Google Chrome6(dev) "あa" "あa" Safari5 "あa"
JSON - Wikibooks
JSON（ジェイソン、JavaScript Object Notation）とは、JavaScriptのオブジェクトの文法をもとにした軽量データ記述言語およびデータシリアライゼーションフォーマットです。 文法[編集] JSONは、JavaScriptの false / null / true / Object / Array / Number / String の7種類のオブジェクトのリテラルの組み合わせをシリアライズされたデータ形式 です（RFC8259）。多くの場合トップレベルのオブジェクトは Object（より一般的に用語で言えば、連想配列）であるが、仕様上は他の6種類のオブジェクトであってもよい。false, null, true のいずれでも良いし、0 1文字でも有効なJSONのデータ です。このように自由度が高い形式ではあるが、Object のキーは String に限られると
[JS]Pinterestやウォールなどの最近よく見かけるカードを使ったレイアウトを作成するスクリプト -Freewall
Demo :Piterest Layout Pinterest風に高さの異なるカードをダイナミックにレイアウト。 Freewallの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="jquery-1.7.min.js"></script> <script type="text/javascript" src="freewall.js"></script> </head> Step 2: HTML カードを包むラッパーを用意します。 <div id="freewall" class="free-wall"> </div> Step 3: JavaScript デモでは、各カードをスクリプトで生成してレイアウトを作成しています。 <sc
1分でわかるJavaScript開発テストツールQUnitの使い方
まずQUnitのCSSとJavaScriptを読み込みます CSSはhead内、JavaScriptはbody内に記述。 body内に記述したJavaScriptの直前に<div id="qunit"></div>を記述 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.11.0.css"> </head> <body> <div id="qunit"></div> <script src="http://code.jquery.com/qunit/qunit-1.11.0.js"></script> </body> </html> テストにはokメソッ
QUnitの基本的な使い方 - but hopeful
[追記] 2013/9/1 三年前の記事が未だに読まれているようなので、一応書いておきますが、あれから色々変わってもっと良いものも出ています。 QUnit でも別に問題はないですが、今から QUnit を使うよりは http://visionmedia.github.io/mocha/:title=mocha] とかの方が個人的にはお勧めです。とにかく、今は色々あるのでもっと別の選択肢調べて見ることを個人的にはおすすめします。別に QUnit は使わないほうが良いとは言いません。 JavaScriptのテスティングフレームワークはいろいろありますが、自分は今主にQUnitを使っているので、少し使い方をまとめて見たいと思います。 [追記]今回作成したソースを上げました。ninja.js QUnit とは QUnitはもともと、jQueryをテストするために開発されたJavaScript Un
[js] javascript・jQueryの基本まとめ - Webのプルタブ
window.$ = window.jQuery = function(){ ... } $やjQueryは同じ意味、エイリアス。windowオブジェクトのプロパティ名。関数オブジェクトらしい。 jQueryの関数API、メソッドAPI 今まで朧げで、謎だったjQueryの関数やメソッドAPIについて 関数API jQuery関数オブジェクトが持つ、関数オブジェクトの事。 // 関数API jQuery.functionName = function(){ ... } これが関数APIらしいけど、これでいいのかな。 メソッドAPI jQueryセレクタのprototypeオブジェクトが持つ関数オブジェクトのこと。 // メソッドAPI jQuery.prototype.functionName = function(){ ... } // これは同じ意味 jQuery.fn = jQuer
jQueryプラグインの作り方 ~ 重要な3つのポイント ~ - nigoblog
jQueryプラグインの作成方法について書いていきます。 jQueryのプラグインを一言でいうと 「jQueryクラスのメソッド」 ということで、jQueryを一つのクラスと考えそのメソッドを作るということが 「jQueryプラグインを作成する」 ということです。 つまり javascriptのオブジェクト指向がわかる javascriptのメソッド作成方法がわかる jQueryを一つのクラスとして捉える 上記3つのポイントを抑えるだけで、jQueryのプラグインは簡単に作ることができます。 では早速1番目のポイントから書いていきます。 javascriptのオブジェクト指向がわかる javascriptのオブジェクト指向は少し特殊です。 PHPやJava、rubyなどの場合は class クラス名 { ~ } などのように書きます。 一方javascriptの場合は var クラス名 =
JSONとJSONPのContent-typeに書くMIMEタイプ - kanonji’s diary
ファイル 正しいMIMEタイプ RFC IE用 json application/json http://www.ietf.org/rfc/rfc4627.txt RFC通り jsonp application/javascript http://www.ietf.org/rfc/rfc4329.txt text/javascript JSONの場合はapplication/jsonだけど、JSONPって実体はコールバック関数でJSONを包んだ単なるJavaScriptなので、MIMEタイプはJavaScriptと同じです。JavaScriptのMIMEタイプは、以前はtext/javascriptだったけど、2006年4月にRFC4329が出てapplication/javascriptになったんだとか。 IEって使えない Internet Explorer 7 では applicati
Googleが開発、JavaScriptカバレッジツール登場 | エンタープライズ | マイコミジャーナル
SCRIPTCOVER is a Chrome extension for Javascript coverage analysis. Googleは10月26日(米国時間)、JavaScriptカバレッジツール「ScriptCover」をオープンソースソフトウェアとして公開した。ScriptCoverはChromeエクステンションとして実装されたJavaScriptカバレッジツール。Apacheライセンス2.0のもとで公開されている。 ScriptCoverを使うことで、リアルタイムにWebページを分析することが可能。JavaScript行単位での分析が可能となっている。複雑なコードの解析やデバッグ、試験の実施などに有効とされている。現在のところエクステンション単体では提供されておらず、使用するにはドキュメントに従って自らビルドして開発版を用意する必要がある。利用するツールなども含めてあ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
rfc4329 - Scripting Media Types
fam.cx