JavaScriptとは？
|
このページは様々な用途で利用できるBookmarkletをご紹介しています。もしこのページで紹介しているBookmarkletが気にいったら是非このページをあなたのホームページとリンクしてください。そしてもっと多くの人にBookmarkletのおもしろさを伝えてください。リンクに許可は必要ありません。またこのページで紹介しているBookmarkletの多くは海外サイトで紹介されているコピーフリーなものです。ですから自由にコピーして使ってください。 「JavaScript」で検索してこのページにこられた方、求めているものとはちょっと違うかもしれませんが、息抜きにちょっとだけBookmarkletの世界を体験してみてください。 Bookmarkletとは、 JavaScriptで記述された小さな（1行で記述される）プログラムで、ブラウザのブックマーク（お気に入り）から利用することができるものです。Bookmarkletを利用すれば、あなたが見ているWebページの背景色を変えたり、特定のキーワードだけ強調表示させたり、ページ中のリンクを抽出したりすることができるだけでなく、電卓のような簡単なプログラムをブラウザの中で簡単に利用することができるようになります。 Bookmarkletの使い方は簡単です。下で紹介している使いたい機能（Bookmarklet)にマウスのカーソルを持っていき左クリックしたままそのリンクをブラウザのツールバーまでドラッグしたり、右クリックして「お気に入り」に登録します（Macの人はマウス長押しですね）。そしてその機能を利用したいページで「お気に入り」からその機能を選択します。すると・・・あとは次の「サンプル」でBookmarkletのおもしろさを堪能してください（このページの多くはそのままクリックするだけでその効果がみれます）。Bookmarkletを使用して効果をみた後、元に戻すにはページをリロードしてください。 JavaScriptの学習に役立つ書籍をまとめています。レベルに合わせてご参考ください。ページを開く⇒ クリックするたびにクリックした場所に[1][2]・・・と番号を表示していきます。このページではクリックした場所にうまく表示できないので別のサイトで試してみてください。 JavaScriptを使用して作成されたHTML要素を含むページのソースコードを表示します。JSファイルでタグを記述しているような時にそのJSの中身を見るときなどに便利です。 スパム対策用に<a>タグにnofollow属性がついたリンクを強調表示します。[テスト用リンク](このリンクにはnofollow属性がついています) 以下のリンクをクリックすると送信先のメアドとそのBookmarkletの名前をどうするか聞いてきますので、それぞれ設定してください。その後、その設定でリンクが作成されますので、そのリンクをブラウザのリンクバーに登録してご利用ください。 ページ内で使用しているリンクの番号付き一覧をページのフッター部分に表示させます。番号はボディ部にも表示されます。 imagesといったフォルダにブラウザからアクセスしたときにファイル名がリスティングされる時にファイル名ではなくく画像そのものを表示されることができます。 マウスをクリックしてそのままドラッグするとその座標情報を表示します。色は英語でredとかblueまたは#FF0などと指定してください。(2004.1.7) タグ（要素）が割り当てられている部分を好きな色で囲みます。色は英語でredとかblueまたは#FF0などと指定してください。(2003.10.27) ページ内に記述されているURLなどを選択して実行するとそのサイトに移動します。たとえば、bookmarklet.daa.jp/blog/、とかhttp://www.yahoo.co.jp/、ttp://bookmarklet.daa.jp/といった文字列をマウス選択して実行してみてください。[注意]ブックマークに登録して使わないと文字列の選択が解除されるので注意してください。(2003.9.8) リンク形式で表示されているテキスト部分にそのリンク先URLを表示します。例えばこのページで試してみてください。リンク先URLをコピーするのにいちいちソースを表示して該当先を検索する手間が省けます。(2003.７.23) 以下のテキストエリア内の「mt.cgiまでのパス」部分をご利用しているMTのパスに変更後、「リンクを作成」ボタンを押してください。クリック後表示されたページ内の「Port to MT Weblog」のリンクをブックマークに登録してご利用ください。 取得したタイトル、選択文字列の文字化けに関してはMTのlib/MT/App/CMS.pmも変更したほうがよいようなので、cottonさんが書かれた掲示板の「SafariのMT用Bookmarkletの文字化け 7月11日(金)11時53分」をご参考ください。掲示板で情報をくださったポトフさんとs,sawada、そしてcottonさん、どうもありがとうございました。 ブラウザベースでスタイルをリアルタイムにいろいろ試してみることができます。例えば次のコードをペーストしてbackgroundの色を000なんかにしてみてください。(2003.6.17) ブラウザのステータスバーに現在マウスが乗っている部分のエレメントの構造を表示します。(2003.6.17) 電卓を表示します。電卓はいろいろあるので一番よさそうなのを http://ostermiller.org/calc/calculator.htmlからいただいてきました。キーボードショットカット（Alt-Cなど）も使えるようなので是非ページを訪れてみてください。（2003.6.6) CSSを適用しないようにします。元のレイアウトがどうなっているのか知りたいときに便利です。(2003.5.29) CSSの<div>タグの範囲をそのid名と一緒に表示します。CSSデザインを分析するときに便利です。(2003.5.22) 上の「DIVのid部を表示」と同じ動きをしますが、classが定義されている部分だけをラベルつきで表示します。(2003.5.22) 以前紹介したこのページの下のほうにある「ソースを表示」はNetScapeでも使えますし、ブラクラのチェック用に使うと便利なんですが、IEですぐにソースをみたいときはワンクッション入ってしまうのでちょっといやだなあ、という人向けのBookmarkletです。 ページ内で選択した単語などをGoogleで検索します。以前日本語はだめバージョンをのっけてたのですが、これは日本語・英語OKです。「conf」さん、掲示板での情報ありがとうございました。(2003.4.21) 以前同じBookmarkletをのっけていましたが、Infoseek側がページ翻訳のシステムをAMIKAIに変更したので、それに伴いこのBookmarkletを更新します。以前のだと使えないのでこれに置き換えてください。 （2003.4.21) クリックしたときの表示先（新規ウィンドウ、今のウィンドウ）を指定します。一度実行するとそのページはずっとそのモードで動作します。ウィンドウがたくさん開いてうざいとお考えの方、逆にページを比較したいときなど、臨機応変ご利用ください。（2003.4.16) よく一度どこかにリダイレクトしてから目的のサイトに飛ばすURLがありますが、そのリダイレクト部分を削除します。よく一度ランキングサイトに飛ばしてから目的のサイトに誘導するリンクがありますが、そういうのに効果的です。（2003.4.16) Webサーバとブラウザ間でどういうデータがやりとりされているのかを見ることができます。 内部リンクは赤に、外部リンクは青に、そしてページ内リンクをオレンジに変えます。 フレームを利用しているページのリンク数（<a>タグの数）を表示します。 ページ内に設定されている<a>タグの内容を別ウィンドウに表示します。 ページ内で使用している画像を表示します。<img>タグを抜いているだけなので同じ画像が何度も表示されることがあります。 最初から最後まで読むのに押さなければならないPgDn（またはSpace）キーの回数 現在のウィンドウのサイズとページの分量を比較して一番上から最後までPgDnキーを押してスクロールさせて読むとして、何回PgDnキーを押さなければならないかを計算します。 クリックすると現在のページが編集可能になります。たとえば、このテキストの間に何か文字を入力してみてください。 普通はイメージは固定されていますが、このBookmarkletを使用するとイメージを動かせるようになります。 スタイルシートを使ってフォントサイズ固定しているとブラウザの「文字のサイズ」メニューを使ってもフォントサイズは変更されません。このBookmarkletを使えば小さくて読みにくいページでも拡大して読むことができるようになります。 HTMLで<table>タグで囲まれている範囲を表示します。border=0でテーブルの構成がどうなっているかわからないページなどで有効です。 ウィンドウのサイズを800x600に変更します。何が嬉しいかというと、HTMLデザイナーがページをデザインするときにターゲットサイズが800x600だったりするときのプレビュー用に利用すると便利です。 ページの背景色を変えます。文字が読みにくいフレームを利用したサイトで利用すると便利です。 ページの背景色を変えます。文字が読みにくいフレームを利用したサイトで利用すると便利です。 ページ内で一番最初に<img>タグで指定されているイメージを好きな倍率で拡大することができます。 バナー広告で利用されている468X60というサイズを指定することでバナー広告を非表示にします。数値を変えることで他のサイズのバナー広告にも応用することができるでしょう。 バナー広告で利用されている468X60というサイズを指定することでバナー広告を非表示にします。数値を変えることで他のサイズのバナー広告にも応用することができるでしょう。 よく左側にメニュー、上部にバナー広告があるフレームを利用したサイトがありますが、このBookmarkletを利用すればメインのページだけを表示させることができるようになります。 えっと、そのものズバリです。食事しながらのアクセスの時などにご利用ください。 このページのようにリンクに下線がついていないような場合に、このBookmarkletを利用するとどれがリンクなのかがわかりやすくなります。 ページ内に記述されているリンク先をランダムに選択してリンク先に移動（実行）します。このページでやると紹介しているBookmarkletのどれかを実行するので怖いですね。 クリックしたらこのページの一番上までスクロールしてください。マウスで絵がかけます。 |
[ 131] JAVASCRIPT::BOOKMARKLET
[引用サイト] http://bookmarklet.daa.jp/
|
JavaScript（ジャバスクリプト、ジャヴァスクリプト、略称：JS）はスクリプト言語である。主にWebブラウザ上で動作し、HTMLの動的書き換えや入力フォームの自動補完など、Webページの使用感向上を目的として使用されたり、リッチクライアントアプリケーションの構築に使われる。 文法はプロトタイプベースのオブジェクト指向型である。多くの場合は、C言語に似た手続き型言語のようなスタイルで書かれるが、関数型言語とも多くの類似点がある。近年ではその柔軟な設計が評価され、様々なアプリケーションで自動実行の用途におけるマクロ言語としても採用されている[1]。 当初は、テキストエディタで編集するだけの簡単なアプリ構築に使われていたが、近年では、IntelliJ IDEAなどにより、IDEにコード補完・編集時のリアルタイム文法チェック・リファクタリングなどの機能が搭載されるようになり、大規模開発が可能となった。また、Ajaxにおける、ブラウザ間の互換性の問題は、JavaScriptライブラリにより吸収することで、大きく解決された。さらに、Extなどの本格的なGUIライブラリの登場により、デスクトップアプリと差がないアプリを作ることが可能となった。また、DWRなどのJavaScriptとサーバー間をつなぐ技術の発達により、クライアント・サーバー間の通信が著しく容易になり、また、JettyなどのアプリケーションサーバーがComet利用時のメモリ使用量の削減を実現したため、サーバーからクライアントへの情報のPush型の配信が実用的となった。 なおJavaとScriptの間は詰めて表記する。Javaと名前や文法が似ているためしばしば混同されるが、互換性は全くない。Javaと呼ぶ場合はプログラミング言語Javaを指すので注意が必要。名前の由来については#誕生を参照。 JavaScriptはネットスケープコミュニケーションズのBrendan Eichによって開発され、Netscape Navigator 2.0 で実装された。開発当初は「LiveScript」と呼ばれていたが、1995年にSun Microsystems社の開発したプログラミング言語「Java」が当時大きな注目を浴びており、これに便乗したネットスケープ社のマーケティング的な思惑が働き「JavaScript」という名前に変更されたといわれている[要出典]。1996年にマイクロソフトのInternet Explorer3.0に搭載されるようになると、その手軽さからJavaScriptは急速に普及していく。1997年、通信に関する標準を策定する国際団体Ecma Internationalによって JavaScript の中核的な仕様がECMAScriptとして標準化され (ECMA 262, ISO/IEC 16262, JIS X 3060)、多くの Webブラウザで利用できるようになった。 ネットスケープ社は、自社サーバ製品で、WEBアプリケーション開発言語としての実装も行ったが、こちらは余り普及しなかった[要出典]。 1990年代後半にMicrosoftのInternet Explorer、NetscapeのNetscape Navigator間で勃発した、いわゆる第一次ブラウザ戦争では、両ブラウザが独自の拡張を施し様々な仕様が乱立する事態に発展した。ブラウザに関するセキュリティ意識も今日程高くなく、JavaScriptに関する脆弱性が次々と発見されることになる。また、初心者でも比較的容易にプログラムが書けることが、JavaScriptの言語仕様及びその周辺技術に精通していない利用者が増える原因ともなった。さらにその名称から、Javaのサブセットや下位バージョンの様な印象を一部の人間に与えたことも事実である。以上の様な理由から各ブラウザ上での挙動に差異が出たり、必要以上に「アマチュアが使うもの」「低機能な言語」と捉えられてしまうことになる[2]。 市場のブラウザ間互換性がある程度確立された2000年頃にはGoogleやAmazon等の大手企業もJavaScriptを積極的に利用し始めた。代表的なものとしてはGoogle マップ[1]やAmazon Diamond Search[2]等がある。2005年、JavaScriptの非同期通信を利用した技術にAjaxという名前がつけられたことによって、高機能なWebアプリケーションの開発言語の一つとして再び注目を集めている。しかし今も尚、JavaScriptによる脆弱性や攻撃は存在しており、状況が本質的に変わった訳ではない[要出典]。 2000年〜2003年にかけて、JavaScript 2.0 を作ろうとした動きがあったが、ネットスケープコミュニケーションズとマイクロソフトの対立でまとまらなかった。当時ネットスケープコミュニケーションズが提案していた案がアドビの ActionScript 2.0 に引き継がれ、マイクロソフトの案が JScript .NET へと引き継がれた。2006年現在 ECMAScript 4 の策定が進められており、Mozilla Foundation はこれに基づいて JavaScript 2.0 を作成することを表明している。また、Mozilla は ECMAScript 4 の策定にあたって Python のよさを取り込んだ案を提案しており、自身でもこれを実装している[3]。 XMLHttpRequestや、IFRAMEを使った通信では、ダウンロード元のサーバー以外のURLにアクセスすることが出来ない。 そのため、一般的には、サーバーを経由して他のドメインのリソースにアクセスすることが多いが、動的scriptタグの生成などにより、他のドメインのURLにアクセスすることが可能である。 悪意のあるユーザによってクロスサイトスクリプティングや、ブラウザクラッシャー等の危険性のあるページが生成される可能性がある。 ブラウザ間の、言語仕様そのものの実装に関する互換性は極めて高く、DOMなど関連仕様の実装に関する互換性も比較的高い。しかし、単純な装飾処理や入力チェック等は比較的安易に導入できるため、現状では利用者の多くが言語仕様やDOM仕様、ブラウザベンダの提供する技術文書等に目を通さずに使用している。このため各利用者の使用法に大きな癖があることが多い。ベンダにとっては新しいブラウザの開発にあたり、現存するWebページの大半が問題なく表示・動作可能な製品を提供することも使命であるため、この実情がブラウザ間での完全な互換性を確立することを困難にしている。 1999年のECMA262-3以来、数えるほどのベンダ独自拡張があっただけで、言語仕様自体の変更は無かったと言える。しかし、XULでの使われ方や、Ajaxと呼ばれる使われ方など、複数の人間が長期間携わって作り管理するようなものが目に付くようになってきている。現在の言語仕様に限界が見えてきているわけではないが、より楽な管理を実現する為に、言語仕様改訂を待ち望む声は少なくない。 Java（JavaScriptと名称は似ていて間違えやすいが、文法が多少似ているのみで、違う言語。→#誕生を参照。） |
[ 132] JavaScript - Wikipedia
[引用サイト] http://ja.wikipedia.org/wiki/JavaScript
|
「基礎からのJavaScript第3版」・「逆引きJavaScript」（工学社）好評発売中。お買い求めはアマゾン・楽天ブックスまたは全国有名書店で。 「JavaScript/DHTMLを使いたいけど勉強するのは面倒」という人のために、そのままコピー＆ペーストして使える自作JavaScript/DHTMLの数々をご紹介します。今までＣＧＩを使わなければできないと思っていたようなこともJavaScriptやDHTMLを使うと簡単にできるようになります。 「JavaScriptの小技」でご紹介するスクリプトは、ごくごく基本的な物なので著作権などは気にせず、ご自分のホームページにご自由にお使いください。ただ、無理にとは言いませんが、代わりに著書「基礎からのJavaScript」や「逆引きJavaScript」を買っていただいたり、このページの宣伝をさりげなくしていただけると非常にうれしいです。（ただしホームページ素材集などとして販売したり出版物に転載するなどの商業目的の無断使用、および「JavaScript集」のような形での転用は禁止します）「JavaScriptの中技」の中のスクリプトも著作権表示を変更・削除しない限りご自由に使っていただいて構いません。 コピーするのはhead部分のscriptタグで囲まれた部分と、もしあればstyleタグで囲まれた部分、それにbodyタグ内のイベントハンドラー（onload=で始まるもの）、body部分の<div id="main">より下にあるhtmlタグとスクリプトです。head部分のlinkタグやmetaタグはコピーする必要はありません。 ホームページにアクセスした人がJavaScriptに対応していないブラウザー（Lynxとか）を使用している場合は当然のことながらJavaScriptは動きませんのでご注意ください。最近はほとんどなくなりましたが、ブラウザーによってはJavaScriptやCSS関係のバグがあって、うまく表示されなかったり、システムエラーを起こす場合もたまにあります。特にベータ版はバグが多いので覚悟してください。特に断りのない限り、当サイトのスクリプトはIE5以降、NN7以降、Mozilla、Firefox、Operaの正式版すべてで動作するように作ってあります。 当サイトへのリンクはご自由にしていただいてかまいませんが、このトップページにお願いします。雑誌・本への掲載は、URLとトップページのキャプチャー画面はＯＫですが、スクリプトの転載はご遠慮願います。 JavaScriptでこんなことまでできる、という例です。少し手の込んだスクリプトですので、使用はフリーとしますが、著作権は放棄しません。著作権表示を削除したりしない（あるいは勝手に自分の名前に変えない）という条件さえ守っていただければ自由に使用していただいてかまいません。 ホームページ作りに使われるJavaScript以外の技術やホームページ作りに役立つものについて簡単に解説します。 Dojo---基本的なユーティリティからDijitのような高度なアプリケーションコンポーネントまでカバーする機能豊富なJavaScriptライブラリ All About Webプロデュース･デザイン ---ビジネスとしてのWebプロデュース・デザイン・ユーザビリティーについてのガイド All About ソフトウエアエンジニア ---ソフトウエアエンジニアのキャリア形成に役立つさまざまな情報 All Aboutビジネスへのネット活用---ビジネスにネットを活用するノウハウ（Ｗｅｂ・メルマガ・アフィリエイトなど） 私の書いたJavaScript入門書です。JavaScriptは非常に簡単なスクリプト言語です。私自身、勉強し始めて３週間目で「JavaScript小技集」を作り上げました。この本の最初の２、３章を読んだだけでもアイデアしだいで様々な自作スクリプトが作れるようになります。自分で勉強してみたくなった方はぜひ買ってください。 第3版では記述の古い部分を書き直し、新たにAjaxやW3C DOMに関する章や節を加えました。2006年6月発売。 機能別に分類された、逆引き実用スクリプト集です。JavaScriptプログラミングに関する知識がまったくない人でも自分のホームページにそのまま使えるように、第１章に最低限必要なJavaScript/DHTMLの解説があり、またそれぞれのスクリプトに詳しい使い方が付いています。 DHTMLやイベントオブジェクト、クッキー、クロスブラウザープログラミングのためのテクニックなど「基礎からのJavaScript」で扱っていない中上級者向けのプログラミング解説（テクニカル・ノート）も随所に盛り込んであり、JavaScriptの勉強にも役立ちます。 Amazon.co.jpでは代金引換でも買えるようになりました。クレジットカードなしでもＯＫです。日本国内は送料無料。 JavaScriptの基本を理解した上でさらに理解を深めたいという上級者向けの解説書。DOMスクリプティング、Ajax、オブジェクト指向プログラミングなど最近のJavaScriptの動向をすべて盛り込んで改訂された第5版。JavaScriptのオブジェクト、関数、配列、クラス、プロトタイプによる継承、クロージャを使った変数のプライベート化テクニック、名前空間、モジュールなど大規模プロジェクトに必要な概念が詳細に解説されています。2007年発行（原書は2006年発行）。 2006年発行の第3版。DOM、JavaScript、XHTML、CSSの詳細なレファレンス。1300ページもあって分厚いですが、AjaxをはじめとするDOMスクリプティングに必要なものが一冊にまとまっているのが便利です。机の上に一冊あると役に立ちます。 ここ数年主流になってきた、DOM標準準拠のJavaScriptのテクニックをその背景にある考え方とともに解説する本。ある程度JavaScriptを学んだことのある人で、最新の知識をアップデートしたい人や、DOMスクリプティングの考え方を身につけたい人は必読。 Ajaxプログラミングで最近よく使われているJavaScriptフレームワーク（ライブラリ）のPrototypeとScriptaculousに関する解説書。かなり高度なJavaScriptの知識が必要です。この本を理解するにはまず「基礎からのJavaScript」のような入門書でざっと基本を頭に入れ、さらに上の「JavaScript 第5版」のPart 1や「DOM Scripting」などでDOMスクリプティングとオブジェクト指向JavaScriptを勉強してから取り掛かるのをお勧めします。 Ajaxのサーバーサイドのプラットフォームとして定着してきたRuby on Railsを使った本格的アプリケーションを例にさまざまなテクニックを解説する、Ajaxの実用書。 体脂肪の正しい減らし方アメリカ大学院留学の手引海外に住む日本人のためのリンク集週刊為替相場予測Java小技集東欧見聞録日本の債券市場 |
[ 133] JavaScript小技集
[引用サイト] http://javascript.maxux.com/
