builder by ZDNet Japanをご愛読頂きありがとうございます。 builder by ZDNet Japanは2022年1月31日にサービスを終了いたします。 長らくのご愛読ありがとうございました。
前回までのおさらいと今回のあらすじ これまで二回にわたって、「JavaScriptでオブジェクト指向を行うには」というトピックについてお話ししてきました。 前々回は、「コンストラクタ=関数」であるという事実を紹介し、独自のクラスを作成する方法についてお話ししました。 前回は、JavaScriptによるオブジェクト指向の中核とも言える「プロトタイプ」と言う仕組みについて紹介しました(プロトタイプについてのお話はまだ終わりではありません。次回、さらに進んだ「プロトタイプチェイン」と言うテクニックについてお話します)。 ここまでの説明で、JavaScriptでオブジェクト指向を行うための基本的な知識はほとんど押さえたことになります。そこで今回は、これまで学んだことをしっかり身につけるためにも「JavaScriptでクラスを作るには」という点をしっかりおさらいしておきたいと思います。その過程で、今
前回までのおさらいと今回のあらすじ 前回まで、JavaScriptでオブジェクト指向を行う方法についてお話ししてきました。コンストラクタやthisオブジェクトなど、様々なことについてお話ししてきましたが、その中でも重要なのはプロトタイプという概念です。 プロトタイプについては前々回お話ししました。その内容を簡潔に表すと、「オブジェクトのメンバは、『オブジェクト自身→プロトタイプ』と言う順序で検索される」ということでした。 しかし、この話にはまだ先があります。それが「プロトタイプチェイン」と言う概念です。 「プロトタイプチェイン」は、JavaScriptプログラムの動作を理解する上ではある意味中核ともいえる概念で、またとても面白いところでもあります。 プロトタイプチェインとは? いきなりですが、プロトタイプってそもそも何なのでしょう? 前々回もお伝えしたとおり、「オブジェクト自身→プロトタイ
前回までのおさらいと今回のあらすじ 前回は、「プロトタイプチェインとは何か」について詳しくお話ししました。オブジェクトのメンバを検索するにあたって、JavaScriptランタイムがプロトタイプチェインを順々に検索していくと言う動作についてのお話でした。 今回は、きわめて単純に見えるこの仕組みが、JavaScriptにとっていかに重要であるかを説明したいと思います。そのために、まずプロトタイプチェインを用いて擬似的なクラスの継承を行い、その上でObjectクラスが持つメンバについてもお話ししておきたいと思います。 プロトタイプチェインを使った擬似的な継承 前回お話ししたプロトタイプチェインについては、しっかり理解していただけましたでしょうか。この一見単純な仕組みを応用すると、JavaScriptにおいても、擬似的なクラス継承を実現することができます。 例えばPersonクラスを継承したShi
20日に発表されたGoogleの新しいWeb API、Google AJAX Language APIは、誰でも簡単に言語の翻訳を行えるようにするJavaScript APIだ。同APIを使うと、JavaScript文字列に対して「日本語←→英語」や「中国語←→英語」と言った変換を簡単に行えるのみならず、文字列が何語で書かれているかを自動判別することもできる。 同APIのパワーがどれほどのものかというと、以下のような翻訳サイトを10分足らずで作れてしまったほどだ(ソースコードは次ページで解説)。 非常にシンプルなAPI(メソッド2つしかない!)にも関わらず、そのパワーがあまりに凄まじすぎる。この興奮をぜひ皆さんにもお伝えしたいと思う。 ということで、さっそくLanguage APIの使い方を学んでいこう。
MozillaのJavaScriptドキュメントとECMA Scriptの言語仕様を、まとめてHTMLヘルプ(chm)形式にコンパイルしました。Windows用です。 (2008-05-27 追記) OS XならChemrがいいみたいです。(参考) http://cid-57544de2edadf883.skydrive.live.com/self.aspx/jsref/jsref.chm *1 以下のドキュメントが入っています。 Core JavaScript 1.5 リファレンス http://developer.mozilla.org/ja/docs/Core_JavaScript_1.5_Reference Core JavaScript 1.5 ガイド http://developer.mozilla.org/ja/docs/Core_JavaScript_1.5_Guide G
JavaScript チュートリアル 初級編 JavaScript の基礎 JavaScript の第一歩 JavaScript の構成要素 JavaScript オブジェクト入門 JavaScript ガイド 入門編 文法とデータ型 制御フローとエラー処理 ループとイテレーター 関数 式と演算子 数と日付 テキスト処理 正規表現 インデックス付きコレクション キー付きコレクション オブジェクトを利用する Using classes プロミスの使用 JavaScript 型付き配列 イテレーターとジェネレーター メタプログラミング JavaScript モジュール 中級編 クライアントサイド JavaScript フレームワーク クライアントサイド Web API Language overview JavaScript のデータ構造 等値比較と同一性 プロパティの列挙可能性と所有権 クロ
AMP(Accelerated Mobile Pages)対応におけるサイト作成と広告表示などなど 当サイトをAMP(Accelerated Mobile Pages)で構成しました。 元々別ページでAMP用ファイルを設けていましたが、スタンドアロンAMPのススメ - Mercari Engineering Blogという記事を見て、統一してしまおうと思ったのがきっかけです。
twitter facebook hatena google pocket aなどのタグにtitle属性を付与すると、説明が表示されます。 しかし、そのままでは味気ないのでツールチップと呼ばれるjavascriptが多く公開されています。 Bubble Tooltipsもツールチップの一つですが、マンガの吹き出しの様な形で表示されます。 sponsors 使用方法 Bubble TooltipsからBubbleTooltips.js、bt.gif.css、bt.gifをダウンロードします。 <script src="http://yourdomain/BubbleTooltips.js" type="text/javascript"></script> <script type="text/javascript"> window.onload=function(){enableToolti
twitter facebook hatena google pocket リンクを張っていても、時間が経つにつれリンク先が閉鎖されてしまうことがあります。 ご丁寧に「閉鎖しました」と伝えてくれるのはまれでしょう。 そんな時、Ajax Broken Link Checkerを利用すれば、リンク先の状態を確認することができます。 sponsors 使用方法 Ajax Broken Link Checkerからjquery.linkchecker.jsとchecklinks.phpを、jQueryからjquery.jsをダウンロードします。 <script src="http://yourdomain/jquery.js" type="text/javascript"></script> <script src="http://yourdomain/jquery.linkchecker.js"
jQueryのプラグインを利用して出来るサンプルです。 jQueryは、John Resig によって開発されたJavaScriptライブラリで、AjaxやDOMプログラミングコードを「簡潔・簡単」に書けます。 ここでは、画像関連、メニュー関連、フォーム関連、テキスト/リンク関連、その他、日本語未解説のjQueryプラグインを分類して紹介しています。 初心者でもすぐにリッチなサイトを作成可能ですので、ぜひjQueryプラグインをご利用ください Image Menu Form Text/Link Other W/O_JP
twitter facebook hatena google pocket 文字や画像に影を付けると浮き上がって見えるので、インパクトがあります。 ただし加工するのは面倒でした。 Drop Shadowではほんの少しの手間でテキストはもちろん画像、ボタンまですべてに影を付けることが出来ます。 sponsors 使用方法 Drop Shadowからjquery.dropshadow.jsをjQueryからjquery.js(v1.2.1)を、jQuery Dimensions Pluginからjquery.dimensions.jsをダウンロードします。 <script src="http://yourdomain/jquery.js" type="text/javascript"></script> <script src="http://yourdomain/jquery.dimensi
twitter facebook hatena google pocket 画像を拡大表示するのにLightBoxを使用するのはもう時代遅れ。 LightBoxではできない指定場所の拡大もできます。 jQZoomはズームエフェクトをクールに実現します。 sponsors 使用方法 jQZoomからjquery.jqzoom.jsとjqzoom.cssをjQueryからjquery.jsをダウンロードします。 <link rel="stylesheet" href="http://yourdomain/jqzoom.css" type="text/css" media="screen"> <script type="text/javascript" src="http://yourdomain/jquery.js"></script> <script type="text/javascrip
twitter facebook hatena google pocket 要素をドラッグすることがあるかもしれません。 そんな時はEasyDrag jQuery Pluginを利用すれば簡単に実現できます。 sponsors 使用方法 EasyDrag jQuery Pluginからjquery.easydrag.jsをjQueryからjquery.jsをダウロードします。 <script src="http://yourdomain/jquery.js" type="text/javascript"></script> <script src="http://yourdomain/jquery.easydrag.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("要素
twitter facebook hatena google pocket テーブルで多くの項目を作りたいけどスペースが・・・ という悩みは、このjavascriptで解消されそうです。 ElasticTableはテーブルで作成した各項目を自在に伸縮してくれます。 sponsors 使用方法 ElasticTableからelastictable.jsとelastictable.cssをmootoolsからmootools.jsをダウンロードします。 <script src="http://yourdomain/mootools.js" type="text/javascript"></script> <script src="http://yourdomain/elastictable.js" type="text/javascript"></script> <link rel="styl
twitter facebook hatena google pocket ある文字をキーボードで打つと、ファイルを開くなど対応したプログラムが実行されます。 これをショートカットキーと呼びますが、サイト上でも使えるようにしたのが、shortKeys jQuery plug-inです。 sponsors 使用方法 shortKeys jQuery plug-inからjquery.shortkeys.jsをjQueryからjquery.jsをダウンロードします。 <script src="http://yourdomain/jquery.js" type="text/javascript"></script> <script src="http://yourdomain/jquery.shortkeys.js" type="text/javascript"></script> 上記を書き込ん
twitter facebook hatena google pocket 既存のサイトに折りたたみ式のスライドを採用したいと思う人は多いでしょう。 しかし、導入にあたっては多くの障壁があるのが現状でしょう。 jquery.toggleElements.jsでは手間無く導入できてしまいます。 sponsors 使用方法 jquery.toggleElements.jsからjquery.toggleElements.js、toggleElements.cssをjQueryからjquery.jsをダウンロードします。 <link rel="stylesheet" href="http://yourdomain/toggleElements.css" style="text/css"> <script src="http://yourdomain/jquery.js" type="text/ja
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く