先日、「JavaScriptのオブジェクトについて考察してみた - あと味」を書いてから、chikuraさんからコメントいただいたり、id:dankogaiさんから「404 Blog Not Found:javascript - にはクラスはない」という記事で言及いただいたり、JavaScript: The Good Partsを読み返したりした結果、newについて調べたいという衝動にかられましたので、その調べた結果を書いてみたいと思います。 newを調べようと思ったキッカケを整理 まずは、そのキッカケから整理します。 chikuraさんのコメントより 押さえるべきポイントは、new演算子の際に何が行われるか?だと思うので、こちらのページもぜひ読んでみてください。 JavaScript の new 演算子の意味: Days on the Moon http://nanto.asablo.j
またJavaScriptで遊んでる。 JavaScriptにもnew演算子があった。クラスを定義してからnewでインスタンスを作成するということができるらしい。 コンストラクタになる関数を作ってからそれをnewの後に付けて呼べばいい。 function Class1(){ this.str = "これはClass1のインスタンス"; } Class1.prototype.toString = function(){ return this.str; } var instance1 = new Class1(); alert(instance1); コンストラクタが呼ばれたとき、thisが新しいインスタンスになっているので好きなように初期化する。 でもこれ、new書き忘れたら大変なことになりますね。Class1を普通に関数として呼んだ時のthisは何でしたっけ。ブラウザの場合はwindow?
JavaScriptプログラミングのTOPへ input や textarea などのテキストボックスをフォーカスした際に表示される,「|」の形をしたカーソルの事をキャレットという。 また,Shiftキーを押しながらキャレットを移動させると,文字列が選択状態になる。 キャレットや選択文字列の情報は,JavaScriptで取得・設定できる。 下記は,IEで・・・ カーソル(キャレット)の位置を 取得する方法。 設定する方法。つまり,カーソルの移動。 選択状態になった文字列の範囲を 取得する方法。 設定する方法。つまり,指定した範囲を選択する。 のサンプルコード。 また,これらを応用して テキストボックスで,クリックした文字を取得する方法 についても述べる。 (1)IEで,カーソル位置を取得するサンプル (2)IEで,カーソル位置を設定するサンプル (3)IEで,選択範囲の取得をするサンプル
さてさて、JavaScriptで「日本語入力がON & 変換確定時に何か処理をしたい」と考えました。「日本語の変換が確定した」という情報を得なくてはなりません。キーイベントを受け取ることで、日本語入力中 / 変換確定 の区別は可能なんだろうか。 手元にある、いくつかのブラウザで挙動を調べてみた。 Firefox 3.6.x (Gecko 1.9.2) : Mac OS X , Windows , Linux(Xubuntu) 日本語変換中は、全てのキーで keydown,keypress,keyup,全てのイベントを受け取らない。 確定のエンターキーを押したときのキーアップイベントから復活。 Internet Explorer 8 日本語入力中、keydownにはキーコード"229"が、keyupには押したキーのキーコードが返ってくる。キープレスイベントは発生しない。 日本語変換中の 複数
cssのルールとして規定されていないプロパティをcss内に書いたら、 それはJavaScriptからとれるんだろうか、とふと思った。 cssはこんな感じ。 /* hoge.css */ #hoge { width: 200px; /* 普通に指定 */ shinout: cool; /* computedStyleにはないプロパティの指定 */ } で、これを <head> <link rel="stylesheet" href="hoge.css" /> </head> で読み込んで JavaScriptでは //スタイルシートオブジェクトの取得! var css = document.styleSheets[0]; // ルールの取得 var rules = css.cssRules || css.rules; // クロスブラウザな意味で。 alert(rules[0].cssTex
前回 に引き続き、Microsoft のコンサルタント兼トレーナー (であるらしい) で、本も出版している (らしい) Dino さんの記事 Functional vs. Object-Oriented JavaScript Development の後半を要約してみたいと思います。 今回は、jQuery の関数型プログラミング的な側面とオブジェクト指向プログラミング的な側面、そして JavaScript で OO プログラミングをする時の2つの手法 - クロージャーとプロトタイプについてです。 私の理解不足とヘタクソな翻訳を補うため、Dino さんの論点を先にまとめると、次の様になるかと思います。 jQuery は モナド のコンセプトを採用し、表に見えるところでは関数型のメリットを最大限生かしている。一方、拡張性を重視し、内部はオブジェクト指向で作られている。 JavaScript で
ブラウザは通常 Web サイトを訪れたとき、CSS や画像などのページ要素を幾つか並列で読み込みますが、JavaScript ファイルを読み込んでいる最中は、(JavaScriptやスタイルシート以外の) 他要素の読み込みをブロックします。それゆえ Yahoo! の 「Best Practices for Speeding Up Your Web Site」 では、それ以上他の要素を読み込む必要のないページ下端に JavaScript を置くことを推奨しているわけです。 これに対し 「ハイパフォーマンスWebサイト―高速サイトを実現する14のルール」 (今は35のルールですが) の著者 Steve Souders が Non-blocking JavaScript、つまり他のページ要素をブロックしないファイルの読み方を提唱しています。LABjs は氏の監修の下で作成されたオープンソースの
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネット(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日本のドメイン登録業者(レジストラ)(「ICANNがレジストラとして認定した企業」一覧(InterNIC提供)内に「Japan」の記載があるもの)を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2024年5月時点の調査。
home blog labs about contact JavaScript > JSLoader 作成: 2008-08-31T19:50:49+09:00 更新: 2008-08-31T19:58:38+09:00 これは何? 外部JSの読み込みを同期又は非同期に読み込みながら、間に処理を挟んだりするライブラリです。 依存関係のあるライブラリの読み込み、ブックマークレット、Greasemonkey、widgetの読み込み等に使う事が出来ます。 使い方 new JSLoder({ finish : function(){ alert('全ての読み込み完了'); } }) .next('first.js') .next(function(){ alert('firstの読み込み完了') }) .next('second.js','third.js') .next(function(){
JavaScriptに、applyとcallというメソッドが用意されていますが、自分なりにapplyとcallの丁寧に説明をしてみようと思ってこのエントリーを書くなどをしてみます。 applyとcallは非常に似たメソッドなので、まずはcallから説明します。 callメソッドとは? callメソッドは以下のように呼び出します。 methodA.call(thisArg, [, arg1 [, arg2, ...]]); methodAには任意の関数(メソッド)を指定します。 callの引数は第一引数にmethodAのthisとしたいオブジェクトを指定して、第二引数以降はmethodAに渡したい引数があれば、カンマ区切りでそれぞれ指定します。 callメソッドは、すべての関数が共通して持っているメソッドです。すべての関数はFunctionクラスのオブジェクトで、callはFunction.
こんにちは、太田です。前々回、前回でDOMの基礎を簡単に解説しました。今回からは、DOMを使った実用的なスクリプトを解説していきます。特に今回はHTMLの操作、テキストの操作にフォーカスを当てていくつかのサンプルコードを解説していきます。 HTML操作の基本 JavaScriptによってHTMLを書き出したり、一部を書き換えたり、削除したりといった方法は実は様々な方法が用意されています。目的に合わせて適切な方法を選ばないと非効率だったり、最悪クロスサイトスクリプティングなどの問題を抱えてしまう危険もあります。 document.writeと同期読み込み JavaScriptでHTMLを書き出すというと、最初に学ぶのはこのdocument.writeかもしれません。いわゆるprint文のようにシンプルなAPIなので、入門書の最初のサンプルなどで扱われることも多いようです。しかし、docume
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
2009-11-12 ナビ子記法について追記しました 本文 今日は、amachangさんの記事 http://d.hatena.ne.jp/amachang/20071010/1192012056 を 1mm だけ掘り下げ、IE 以外のブラウザでも document へのアクセスを速くする方法がないか、色々試してみます。 # 記事自体はずいぶん前に書き上げてたけど、公開するの忘れてたんだな。 C系を追加しました。C系は「ネストしたスコープからグローバル変数にアクセスするとどうなるか?」がテーマです。 試したこと 以下は様々な方法で document へのアクセス速度を計測します。 A系では、非日常的な方法で測定し、B系では実際の用法に近い形で測定します。C系では何重にもネストしたスコープから、グローバル変数にアクセスするとどうなるかを測定します。 A系 A0 は、素の document に
プレフィックス(接頭辞)を使用して、ロードのタイミング、UAごとに必要なファイルだけをロードなど、条件付きでファイルをロードさせることができるスクリプトローダーを紹介します。 yepnope.js -A Conditional Loader For Your Polyfills! [ad#ad-2] yepnope.jsの書式 yepnope.jsの基本書式は、下記のようになります。 yepnope(resources /* string | object | array */ [, $LABchain]) css! プレフィックス「css!」を使用して、指定したファイルをCSSファイルとしてロードします。 ※「.css」で終了していない名前はJavaScriptファイルとして認識されます。 例:cachebusted.css?version=1452318 yepnope({ load
JavaScriptでヒアドキュメントを使うライブラリを作りました。 heredoc.js http://www.teria.com/~koseki/memo/jsheredoc/heredoc.js テスト http://www.teria.com/~koseki/memo/jsheredoc/test.html 外部ファイルサンプル http://www.teria.com/~koseki/memo/jsheredoc/tests.txt 使い方 scriptタグ内に直接書き込む使い方(インラインモード)と、外部ファイルを読み込んでコールバックを実行する使い方があります。 インラインモード <script src="heredoc.js"> # ここはscriptとして解釈されません。 str1 =<<EOT 複数行の文字列です。 下の行でおわりです。str1はグローバルになります。
JavaScriptプログラミングのTOPへ JavaScriptで,グローバル変数が存在するかどうか判定するための3つの方法。 3つのうち1つはよく使う。 残りの2つは,特殊な状況(WSHとの使い分けなど)で役立つ。 (1)「in window」 を使う 常套手段。 特定のオブジェクトが特定のプロパティを持っているかどうかを判定するためには,inを使う。 下記は, 一つ目のボタンでグローバル変数をセットし 二つ目のボタンでその存在判定を行なう というコード。 <input type="button" value="グローバル変数をセット" onClick="f()"> <input type="button" value="グローバル変数の定義状況を判定" onClick="g()"> <script language="JavaScript"> function f() { // グロ
CSS Sprites 化や画像サイズの最適化、Data URI 化、CSS/JavaScript ファイルの圧縮・結合・読み込み順番の整理やキャッシュ制御など、本サイトでは主に HTTP リクエストの数、データ量およびそれらの順番に関して色々なテクニックを試してきましたが、さらに深く掘り下げるには JavaScript の実行がページの読み込み時間に与える影響を知っておく必要があると思います。 「ウェッブサイトの表示速度を測定するフリーツール集」 でも紹介しましたが、dynaTrace AJAX Edition という優れたツールをフリーで公開している dynaTrace software のブログでこの問題を扱った記事がありましたので共有します。JavaScript 高速化 Tips は (例えば 「JavaScriptを高速化する6つのテクニック」 など) 多々あるかと思いますが、ペ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く