タグ

javascriptに関するs_moriのブックマーク (205)

  • サービス終了のお知らせ

    平素より「PHPプロ!」をご愛顧いただき、誠にありがとうございます。 2006年より運営してまいりました「PHPプロ!」ですが、サービスの利用状況を鑑みまして、2018年9月25日(火曜日)をもちましてサービスを終了させていただくことになりました。 サービス終了に伴いまして、2018年8月28日(火曜日)を持ちまして、新規会員登録ならびにQ&A掲示板への新たな質問、回答の投稿を停止させていただきます。 なお、ご登録いただいた皆様の個人情報につきましては、サービス終了後、弊社が責任をもって消去いたします。 これまで多くの皆様にご利用をいただきまして、誠にありがとうございました。 サービス終了に伴い、皆様にはご不便をおかけいたしますこと、心よりお詫び申し上げます。 件に関するお問い合わせはこちらよりお願いいたします。

  • スクロール時に画像の読み込みを開始するAjax Lazyload : 4GALAXYのメモ

    67 20 09 2007 スクロール時に画像の読み込みを開始するAjax Lazyload jQuery, Ajax jQueryプラグインLazyloadの解説・設置方法、画像大量表示している場合サーバー負担軽減につながります。 ブラウザ画面に表示された時に読み込みを開始するので、無駄なトラフィックを防ぐ事が出来ます。 大量に画像を表示しているホームページなんかでは有効なプラグインですね。 jquery.js - ダウンロードページ かならず必要ですのでダウンロードして下さい コード <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.dimensions.min.js"></script> <script type="t

  • window.onloadが2回以上あるとき - ささいなoutput

    window.onloadを同一ページ内でうっかり2回使ってしまうと、1回目の処理は行われず、後者のイベントに上書されてしまいます。 window.onload=function(){ //色々な処理 } window.onload=func2; //2回目 これは、windowオブジェクトのプロパティonloadに関数を参照渡しているだけにすぎないということを理解しておくことが必要。 イベント発生時にブラウザがもれなく、複数登録したonloadをキャッチして順次呼び出すということにはならず、一番最新のonloadを実行するということ。 onload時に1回目〜2回目のように順番に実行されるという錯覚を起こしてはいけない。 単純には以下と同じ var o={}; o.s="好き!"; //1回目の処理(のつもり) o.s="やっぱり嫌い!"; ///2回目の処理(のつもり) //いざ呼び出

    window.onloadが2回以上あるとき - ささいなoutput
  • Flash の z-index を Javascript から有効にする - elm200 の日記(旧はてなダイアリー)

    趣旨 Flash は、ただのインラインレベル置換要素であるにもかかわらず、デフォルトでは CSS の z-index に関する決まりごとに従わない。z-index とは、画面の x軸・y軸の両方に直交する軸で、要素が画面の手前におかれているのかそれとも奥かを指示する CSS プロパティである。たとえば、position:absolute で z-index を指定した DIV 要素を z-index の指定のない Flash と重ねると、来ならば、DIV は Flash の手前に表示されなければならないのに、実際には Flash のほうが手前に来てしまう。 では打つ手はないのか、というと実は wmode という Flash のプロパティがあり、これを "transparent" にしてやればよい。たとえばつぎのような感じだ。 <!-- EMBED を使うとき --> <embed src

    Flash の z-index を Javascript から有効にする - elm200 の日記(旧はてなダイアリー)
    s_mori
    s_mori 2010/03/13
    Flash と z-index
  • javascript: escape(), encodeURI(), encodeURIComponent() 比較 (groundwalker.com)

    « DoBeDo 2.5 | メイン | javascript で Query String » javascript: escape(), encodeURI(), encodeURIComponent() 比較 javascript の escape(), encodeURI(), encodeURIComponent() 関数群について、どの文字がエンコードされてどの文字がエンコードされないのか分かりにくいのでまとめておく。 まずは、対象範囲 %20(半角スペース)〜%7E(チルダ~) 元データ !"#$%&'()*+,-./ 0123456789 :;<=>?@ ABCDEFGHIJKLMNOPQRSTUVWXYZ [\]^_` abcdefghijklmnopqrstuvwxyz {|}~ escape() %20%21%22%23%24%25%26%27%28%29*+%2C-

  • そのサービスはAjaxフレームワークで一変できるか?

    そのサービスはAjaxフレームワークで一変できるか?:Web 2.0で変わるWebプログラミングの常識(1/4 ページ) 「prototype.js」と呼ばれるJavaScriptフレームワーク。多くのAjaxを応用したサービスで使われている「Ajaxフレームワークのデファクト」だ。 このオンライン・ムックPlus「Web 2.0で変わるWebプログラミングの常識」では、これまでにAjaxの概要(第1回)から発展系としてどのような取り組みあるのか(第2回)、そして、効率的な組み込み方法の一つとしてJSONと呼ばれるデータ形式のやり取り(第3回)、Webサービスとの連携(第4回)について解説した。 Ajaxアプリケーションの開発では、Webブラウザ依存の問題を解消したり、DOMツリーを操作するといった必要性がある。しかし、開発者が一からコード記述していくのは現実的ではない。そこで一般には、何

    そのサービスはAjaxフレームワークで一変できるか?
  • ITmedia エンタープライズ:実は、Ajaxのウラにこそ勝算がある (1/5)

    実は、Ajaxのウラにこそ勝算がある:Web 2.0で変わるWebプログラミングの常識(1/5 ページ) 見た目にインパクトが大きいAjax利用のWebアプリケーション。しかし、その見た目を支える要となるものは、背後にある有益な情報処理と活用方法だ。Ajaxのインパクトに負けないWebアプリはどのように作られるのか? このオンライン・ムックPlus「Web 2.0で変わるWebプログラミングの常識」では、これまでにAjaxの概要(第1回)から発展系としてどのような取り組みあるのか(第2回)、そして、効率的な組み込み方法の一つとしてJSONと呼ばれるデータ形式のやり取り(第3回)について解説した。 この一連の特集を読むことで、プログラミングノウハウを一から十まですべてを学べるほどのボリュームは詰め込めないが、それでも最低限押さえておくべきポイントが理解できるはずだ。今回の記事でテーマとなるの

    ITmedia エンタープライズ:実は、Ajaxのウラにこそ勝算がある (1/5)
  • Ajaxの真価はWebサービス連携にあり

    落ち着きつつあるAjaxを取り込んだWebアプリケーション開発への取り組み。後発でもアイデアはまだまだ出尽くしていない。基を復習して新たなサービスへとつなげてみよう。 Ajaxというと、XMLでデータを送受信するというイメージがある。 しかし、実際にはXMLである必要性はない。むしろXML形式ではないほうが、送受信データパースの手間が必要ないというケースが多いのだ。 一方で、XMLでデータをやり取りできる利点を生かせば、当然ながらWebサービスとの効果的な連携も現実的なものになってくる。今回は、Ajaxアプリケーションにおいてよく用いられる「JSON」と呼ばれるデータ形式について解説しよう。 このオンライン・ムックPlus「Web 2.0で変わるWebプログラミングの常識」では、これまでにAjaxの概要(第1回)から発展系としてどのような取り組みあるのか(第2回)について解説した。このオ

    Ajaxの真価はWebサービス連携にあり
  • ITmedia エンタープライズ:Ajaxを理解する4つのポイント (1/6)

    Ajaxはどのように実現されているのだろうか? こんな疑問に応えるべく、サンプルを挙げてみよう。Ajaxの基は、単に「JavaScriptでHTTP通信をする」というだけに過ぎないことが分かる。 オンライン・ムックPlus「Web2.0で変わるWebプログラミングの常識」の第1回目では、Ajaxが使われる背景と、どのような場合に適しているかを解説した。 今回はサンプルアプリケーションを取り上げていこう。ポイントは、もっとも基的な例に限定したことであり、開発者である読者が今すぐにでも既存のWebアプリケーションへ組み込むことができるよう配慮した点だ。 まず最初に、以下の図2に示す2つのテキストボックスに注目してほしい。その「和」と「差」をそれぞれ計算し、結果を埋め込むという処理を挙げてみよう。 「和」と「差」を計算する処理の部分は、サーバ側に用意したPHPプログラムで行うことにする(図3

    ITmedia エンタープライズ:Ajaxを理解する4つのポイント (1/6)
  • ITmedia エンタープライズ:Ajaxで変わる“新”ユーザー体験 (1/3)

    Web2.0を支えるテクノロジーの一つ「Ajax」。聞いたことはあるけれど、どんなものか分からない。そんな疑問に答えよう。 Webにおける新たなテクノロジーやサービスを総称する「Web 2.0」。そのなかでも、JavaScriptを用いてリッチなユーザーインタフェースを提供する「Ajax」は、Webアプリケーションの作り方を変える技術の一つだ。 Ajaxの仕組みそのものは、それほど複雑ではない。しかし細かい処理をするためには、膨大なJavaScriptのコードが必要となる。そこでAjaxアプリケーションを作る場合には、Ajaxのクラスライブラリを使うのが一般的となっている。 このオンライン・ムックPlus「Web2.0で変わるWebプログラミングの常識」では、Ajaxの基から各種クラスライブラリを使った次世代Webアプリケーションをどのように開発すればよいのか、解説していく。 Ajaxを

    ITmedia エンタープライズ:Ajaxで変わる“新”ユーザー体験 (1/3)
  • ITmedia エンタープライズ:ココを理解すれば近道な「Ajaxフレームワーク」 (1/5)

    ココを理解すれば近道な「Ajaxフレームワーク」:Web 2.0で変わるWebプログラミングの常識(1/5 ページ) AjaxをWebアプリケーションに取り入れるには、デファクトスタンダードなフレームワークを利用するのがよい。基礎を理解すると、さまざまな応用例が考えられるはずだ。 このオンライン・ムックPlus「Web 2.0で変わるWebプログラミングの常識」、第6回目となる今回は、第5回「そのサービスはAjaxフレームワークで一変できるか?」に続く、フレームワークの実装例について解説していく。冒頭よりコードを挙げた実践的な内容に入っていくため、内容が不明な場合には、最低でも第5回の最初から読んでみるとよい。 このオンライン・ムックPlus「Web 2.0で変わるWebプログラミングの常識」の連載を読むことで、読者はAjaxの実装形態がどのようになっているのか理解することができるはずだ。

    ITmedia エンタープライズ:ココを理解すれば近道な「Ajaxフレームワーク」 (1/5)
  • web制作の現場で使うjQueryデザイン入門が激しくお勧めな件

    web制作の現場で使う jQueryデザイン入門』 jQueryを、プログラムとしてとらえるのではなく、デザインとしてとらえて解説している一冊。 つまりデザイナー向けの攻略となっている。個人的に超お勧めの内容だったのでご紹介。 この作者は、西畑氏です。 何度か私のブログでもjQueryの記事かいてるのですが、そのときに色々教えてくれたto-Rのあの人です。 2010年2月15日発売予定で、書店では明日買えるようです。 「JavaScriptとしてjQueryに興味を持っている」という人よりも、「ウェブデザインをもっとクリエイティブに表現したい」という人のための一冊です。 目次 第1章 jQueryを始める前に。 ここでは、jQueryとは何なのか?あたりからきっちり説明されてます。 ある程度知ってる人は飛ばしちゃってもいいかも・・・。 第2章 サンプルで学ぶjQueryの基 HTML

    web制作の現場で使うjQueryデザイン入門が激しくお勧めな件
  • 無名関数を使った非同期通信のススメ(JavaScript)

    ここ最近はブラウザーの上で動く思いっきりRIAなアプリケーションを書いている私。こと通信の部分になると JavaScript での開発効率が、C++/Java/Objective Cなどと比べて格段に高いことをつくづく感じている毎日なので、今日は、そのあたりを少し解説してみようかと思う。 サーバーのAPIにアクセスするプログラムを書く方法は色々とあるが、「サーバー上の特定のURLにHTTPでアクセスして結果をXMLやHTMLやJSONで受け取る」というケースに限定すれば、基的に3つのパターンに分けられる。 1. 同期通信 result = urlfetch.fetch("http://www.google.com/") if result.status_code == 200: doSomethingWithResult(result.content) その書きやすさのために、実務経験の

  • [JS]画像拡大とキャプション表示をアニメーションで実装するチュートリアル

    スムーズなアニメーションで画像が拡大し、キャプションがスライド表示されるギャラリーの実装するチュートリアルをtutsvalleyから紹介します。 Making A Cool Thumbnail Effect With Zoom And Sliding Captions デモページ デモでは画像のサムネイルにマウスをフォーカスすると、アニメーションで拡大表示され、キャプションが下方向からスライド表示されます。 デフォルト時は、下記のようになっています。

  • JavaScript初心者におくる24のグレイトなtips - 三等兵

    私が作ったわけではなく海外の記事です。自分も学習してみました。 phpスポーツ啓発日誌や、コカトリスさんや、アイスクレアームパラダイスさんのような、品質の良い訳は私にはできませんので見出しは意訳もしくは誤訳、文章は無視して訳してません。かつ、私がいろいろコードや文章つけたしてます。内容的にはほとんどズレてはないと思いますが、適当なのでおかしいところがあるかもしれません。 うっとうしい場合は原文をどうぞ。 24 JavaScript Best Practices for Beginners 1. 等価演算子で==使うなよボケ===だろナスチン野郎 ひぃぃぃ。 ==|!= だとねー、型は自動に変換されるんすよねー。ねー。 s = '1'; i = 1; alert(s == i); // true alert(s === i); //false えーと、==は「わし、数値も文字列も中身が一緒だ

    JavaScript初心者におくる24のグレイトなtips - 三等兵
    s_mori
    s_mori 2009/12/15
    おもしろい。
  • グーグルのJavaScriptツール集大成「Google Closure Tools」

    2009年11月5日,Googleは自社サービス製品であるGmail,Google Maps,Google Docsなどの開発に使用しているJavaScriptアプリ開発ツール群「Google Closure Tools」を一般公開しました。 "Closure"は一般的に,閉鎖や閉店といった意味で使われます。ツールの命名としては少しネガティブなニュアンスを感じますが,Google Closure Toolsの場合は,終結といった意味で,開発プロジェクトにおける最終ステップの仕上げ用ツール。すなわち“栓”という意味で中身があふれ出さないようにキッチリ閉めておくものといった意味合いから命名されているようです。 Ultimate(究極)に近い意味でGoogleの自信の表れと受け取った方がいいかもしれません。Googleで新規公開になったプロジェクトとしては珍しく,ベータ版の表記もありません(Go

    グーグルのJavaScriptツール集大成「Google Closure Tools」
  • ウィンドウサイズを変えるとコンテンツが再配置される可変グリッドレイアウトに関する情報まとめ

    ウィンドウサイズを変えると コンテンツ(記事等)が再配置される 可変グリッドレイアウトに関する サンプルサイトやWPテーマ、 ライブラリなどの情報のまとめです。 詳しい方には参考にならないっぽいです。 いろいろ意見は分かれそうですが、知っておいて損は無いかなぁと思いますのでメモ。 可変グリッドレイアウトサイト可変グリッドレイアウトを使用したサイトの例。 D&DEPARTMENT PROJECT ECサイト。綺麗にまとまってます。MT使用。 D&DEPARTMENT PROJECT daily vitamins 暇つぶしが出来るサイト?どういう趣旨か分かりませんが、可変グリッド。WPです。 daily vitamins 小林聡美.jp 小林聡美さんのサイト。凄く見やすいです。MT使用。 小林聡美.jp Marunouchi.com 丸の内の情報サイト。ハイクオリティです。写真をダイナミックに

    ウィンドウサイズを変えるとコンテンツが再配置される可変グリッドレイアウトに関する情報まとめ
  • Ajaxに力を入れ始めたマイクロソフト、今度はJavaScript圧縮ツールを無料公開

    マイクロソフトのAjaxに関する動きが目立ってきました。以前のエントリで紹介したように、9月にはAjaxによるWebアプリケーションを最適化して起動速度を改善するツール「Doloto」の配布を開始。 Ajaxの起動を高速化するツール「Doloto」、マイクロソフトが発表 - Publickey 10月には、Ajaxのライブラリとして最も人気のあるjQueryのマイクロソフト自身による配布を開始すると同時に、Ajaxライブラリを高速に配布するためコンテンツデリバリネットワーク、「Microsoft Ajax CDN」を立ち上げています。 マイクロソフトも配布を開始したjQuery、今後のバージョンでは大幅な性能向上とモバイル対応へ - Publickey Announcing Microsoft Ajax Library (Preview 6) and the Microsoft Ajax

    Ajaxに力を入れ始めたマイクロソフト、今度はJavaScript圧縮ツールを無料公開
  • IE7のJavascriptで return false をしてもリンクしてしまう - OKWAVE

    これまでjavascript無効の人のために <a href="test.html" onclick="test();return false;">link</a> という感じで、無効の人はリンク先へ飛んで、有効の人はJavascriptを実行して処理する、といったコードを使っていました。 しかし、IE7では、onclickで false が帰ってきても、そのままリンクにいってしまうようで困っています。 IE6、Firefox2では思うように(onclickだけで止まる)動いてくれます。 もうこれは仕様のため、全面的に書き直さなければならないのでしょうか? ご存じの方おられましたらご教示いただけると幸いです。

    IE7のJavascriptで return false をしてもリンクしてしまう - OKWAVE
  • Googleのトップページを開くと毎秒100回JavaScriptが実行されるよ - 射撃しつつ前転 改

    FirefoxがCPUを常に15%ぐらいうのが気になっていたので調べてみたら、Googleのトップページを開くとものすごい勢いでJavaScriptが実行されることがわかった。具体的には、var k=t.value;k!=h&&X(0);h=k というコードが毎秒100回実行されている。このせいで、自分の使っているPCだと、Googleのトップページを開くだけでCPU使用率が2%ぐらい上がっているようだ。Firefox特有の問題というよりは、ウェブページ側の作り方に依るものみたいだ。たぶん他のブラウザでも問題は変わらないだろう。 Googleのトップページの場合、コードを調べてみた限りでは、原因はどうも検索候補の自動補完用のコードみたいだ。現在の入力文字列が過去の記録と違ったら補完の提示をやり直す、みたいなことをやっているように見える。 HTMLではテキストボックス内のテキストが変更され

    Googleのトップページを開くと毎秒100回JavaScriptが実行されるよ - 射撃しつつ前転 改
    s_mori
    s_mori 2009/10/01
    検索候補の自動補完機能のため。日本語入力中、変換する前に単語が勝手にずらずら生成されるバグは、これのせいか?(環境: Ubuntu/Firefox)