JavaScriptで指定したオブジェクトの全てのプロパティとメソッドを表示する - hoge256ブログ
備忘録をかねてJavaScriptで指定したオブジェクトの全てのプロパティとメソッドを表示する方法をメモっておきます。 function printProperties(obj) { var properties = ''; for (var prop in obj){ properties += prop + "=" + obj[prop] + "\n"; } alert(properties); } とりあえず、上記の関数を書いておいて、プロパティを表示したいオブジェクトを渡せば、alertのダイアログとして表示されます。 IEの場合はダイアログを表示した段階で、Ctrl+Cでダイアログの表示内容をコピーできます。 Firefoxの場合は、alert(properties); のところを document.write とかにするといいかも。 カテゴリー: 技術メモ |
HTML5 の File API でローカルファイルを扱ってみる
HTML5 の File API でローカルファイルを扱ってみる HTML5 の File API を使用することでドラッグ＆ドロップでの複数ファイルの取得や、ローカルファイルのちょっとした加工などができるようになりました。 この記事では、画像とテキストファイルを簡単に表示する方法をご紹介します。 投稿日2012年12月13日 更新日2012年12月13日 html html はファイルをドロップする div と表示する div を用意します。 html <p> ファイルをドロップしてください。</p> <div id="file-input"> <div class="input"></div> <div class="out"></div> </div> cssでドロップするdivを大きくしておくと良い感じだと思います。 css #file-input div.input { padd
JavaScriptでファイル操作！？ File APIを使いこなそう
連載目次 近年のWebアプリケーションでは、画像ファイルやテキスト・ファイル、Officeファイルのアップロードやダウンロードのやり取りが行われることが多くなってきている（例えば、Twitter上での画像ファイル共有やGoogleドキュメントでのOfficeファイルのアップロードなどがそれだ）。 HTML5では、ファイル操作に関するAPIとして「File API」が定義されたことで、ローカルのファイルをブラウザ上で直接、取り扱うことが可能となった。これによって、Webとローカルの違いをアプリケーションで意識しなければならない局面も少なくなる。 現在、File APIは以下の3種類の仕様が策定されている。
無名関数をすぐに実行する(function(){})()の覚え書き [JavaScript] : ずっと工事中
本題に入る前に、 普通に関数を作って実行するとき var foo = function() { … }; foo(); としますよね。 この動作を普通に説明すると、 無名関数をfooに代入 fooを実行 という感じになりますが、もう少し細かく分解して、 function(){}はその関数の参照を値に持つ JavaScriptでは、functionの代入は参照を渡すので、 var foo = function() { … }; は左辺のfunction(){}は、自身への参照値を持ち、 それをfooに代入 していることがわかります。 関数の参照にカッコ()を付けると、関数を実行する 次に、普段なんとなく使っている foo(); これは foo（参照）に演算子()を付けると、関数が実行される …という事をあらわしていますね。 ということで、fooもカッコを付けないと参照だし、function(
今更聞けないcanvasの基礎の基礎 - KAYAC Engineers' Blog
はじめまして。新入りのnagataです。 入社式で自転車乗ってた野郎です。 先輩方から「ブログ、書いてね！」とのお達しがあったので、 日報で書いたらウケがよさげだったcanvasのことについて書いてみようと思います。 ※各種サンプルはMac上のSafari4.05、Firefox3.6.3、Chrome5.0で動作を確認しています。 canvasってなんぞ？ 図を書き込めるhtml要素です。 OpenGLやDirectXのような面倒な設定を書くことなく、 手軽にグラフィック描画が行えます。 ブラウザだけでローカルアプリケーションのような グラフィカル（かつ動的な）表現が行えるわけです。 とりあえずつかってみる 早速何か描いてみましょう。 こういうことは実践あるのみです。 処理にはJavascriptを使います。 canvasに描画を行うときは、canvas要素からcontextを取得して、
jQueryのbind/live/delegateの違いまとめ、と新API .on()の使い方 - y-kawazの日記
jQueryのイベント記述方法はいくつかあり、大雑把におさらいしたのが以下の3パターンです。 まず一番基本的なのが $("a").click(fn) や $("a").bind('click', fn) です。click(fn)はbind('click', fn)の省略形です。 次にjQuery1.3で $("a").live("click", fn) という機能が出来ました。liveの良いところはDOM操作で出たり消えたりするエレメントに対して再バインド無しでイベント定義ができる利便性と、内部的にはbind個所がdocumentの1か所になり複数個所へのbindが無くなることによるメモリ効率と実効速度の向上です。 更にjQuery1.4.2で $("#foo").delegate("a", "click", fn) という書き方が出来るようになりました。これは特定要素以下に限定するliv
jQuery UIで実現！ Ajaxで複数選択ドラッグ＆ドロップ
jQuery、プラグイン、jQuery UI、Web経由のCDNとは CSSの書き方も分かるjQueryプラグイン実践活用法（1） 基本／おさらいとしてプラグインやjQuery UIについて簡単に触れ、Web経由でjQueryを使うCDNについて解説 デザインハック ＜ リッチクライアント 2009/12/8 今回は「jQuery UI」のより進んだ活用例 ■ jQueryのプラグイン「jQuery UI」とは？ 今回紹介するjQuery UIは、JavaScript（Ajax）フレームワークjQueryのプロジェクトがjQuery用に開発している、以下の機能を提供するプラグインです。 ドラッグ＆ドロップなどのマウス操作の機能拡張 ユーザーインターフェイスを改善するウィジェット（アコーディオン、日付入力、ダイアログ、スライダー、タブなど） 今回は、jQuery UIのドラッグ＆ドロップ機能
innerTextとinnerHTML
※このドキュメントは長くは残りませんので、必要であればハードディスクに保存してください。 オブジェクト まず、JavaScriptの根幹である「オブジェクト」について、少し触れておきます。JavaScriptは「オブジェクト指向型言語」ですから、仕組みから学ぶ時はオブジェクトの理解が必須なのです。 この言語は、ほとんどのものがオブジェクトです。なにがなんでもオブジェクトです。windowとかdocumentなどおなじみのやつを始めとして、変数も配列もオブジェクトですし、メソッドや自作の関数もオブジェクトなら、HTMLまでもオブジェクト（ドキュメントオブジェクトモデル＝DOM）となります。 オブジェクトは基本的に「操作されるもの」で、ただ存在するだけです。ただし、例外として、メソッドと関数は「操作するもの」です。（機能を持ったオブジェクト、ということです） オブジェクトは、メソッドや関数、プ
Javascript/配列操作 - 俺の基地
先頭を削除し先頭を取得する var hoge = [1,2,3,4]; var piyo = hoge.shift(); //[2,3,4]; alert(piyo); //1 破壊的 ▲ ▼ 末尾を削除し末尾を取得する var hoge = [1,2,3,4]; var piyo = hoge.pop(); //[1,2,3] alert(piyo); //4 破壊的 ▲ ▼ 末尾に追加する var hoge = new Array(); hoge.push('aaa'); 破壊的 実はこのメソッド var hoge = []; hoge.push('aaa', 'bbb', 'ccc'); 引数を何個もとって連続で追加することができる。 ▲ ▼ 配列を結合する（破壊的） 「末尾に追加する」pushは引数を複数個とれるので、こいつを応用すると破壊的に配列を結合することができる var h
input type='file'で選択可能なファイルをjQueryで指定する | Base Views
長年実装されずに来た属性なので、Internet Explorerやfirefoxへの実装は今後も期待できないでしょう。それに、ファイル選択ダイアログの「ファイルの種類」のプルダウンメニューをいじれば、結局は指定した拡張子以外も選べてしまうわけです。 jQuery Multiple File Upload Pluginを使う ということで、こちらで紹介されているjQuery Multiple File Upload PluginというjQueryプラグインを使ってみます。このプラグイン、本来の目的は複数ファイルのアップロードを行うことみたいですが、受け入れ可能ファイルタイプのコントロールも厳格でいい感じです。 jpgのみ選択可能なフォーム <script type="text/javascript" src="http://www.google.com/jsapi"></script> <
JavaScriptのタイマー処理 setTimeoutとその活用 - 犬も歩けば棒も歩く
以前id:amachangさんのブログでJavaScriptのsetTimeoutの活用方法が掲載されていたのですが、当時はいまいち意味が分かりませんでした。その補足というのはあつかましいですが、簡単な解説と応用をのせておきます。なお、setTimeoutだけに限らず、JavaScriptのタイマー処理に関する話になります。 setTimeoutのはなし setTimeoutは指定した時間後に、指定した関数を実行してくれる関数です。JavaScriptで数秒間処理を待ちたい場合、最も単純なものに次のような方法があります。 for(var i = 0 ; i < 10000 ; i++) for(var j = 0 ; j < 10000 ; j++); //何もしない これは単に処理を重くしているだけで、ほとんどのブラウザでは、このように何回もループが続くとエラーが出ます。これをエラーが出
『[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/2bb5c9a7f0f0387772ea0883b607b831f5fbe695/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fstat.ameba.jp%2Fuser_images%2F20100402%2F00%2Fitboy%2F60%2F00%2Fj%2Fo0687039310477745699.jpg)
ウェブサイト作成に役立つ35のwebサービス｜Webpark
ウェブサイトを作成する際に個人的に使っているWebサービスを紹介します。幅広く35個紹介しますので、新しい発見があれば幸いです。 フォント関係 wordmark.it パソコンに入っているフォントを一覧で見ることができます。フォントサイズも調整できます。 日本語フォント252種類を表示確認できます！フォントを探すならfonthack.jp。 日本語フォントの表示が確認できます。現在252種類あります。 PXtoEM.com: PX to EM conversion made simple. ベースのサイズ（px）を決めると、em, pt, %の値が表示されます。 カラー関連 ウェブ配色ツール Ver2.0 配色ツールは色々ありますが、日本語ですし、あまり考えなくても感覚的に使えるので楽しいです。 Color Scheme Designer 3 カラーパレットジェネレーターです。海外サイトで
[JS]一行追加するだけで、IE6/7/8でもHTML5のvideoとaudioを利用できる -html5media
HTML5のvideo要素やaudio要素をサポートしていないメジャーブラウザでもたった一行、ページに追加するだけでこれらを利用できるようにするスクリプトを紹介します。 html5media デモページ [ad#ad-2] html5mediaの実装 html5mediaの利用方法は簡単です。 ページに追加する一行 下記をページのhead内に記述します。 <script src="http://api.html5media.info/1.1.4/html5media.min.js"></script> これだけで、すべてのメジャーブラウザでHTML5のvideoとaudioを利用できるようになります。 video, audioに非対応のIE7でも期待通りに動画が再生されます。 IE6(IE Tester)でのキャプチャ 参考：video, audioのサポート状況 video, audio
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Spriteを活用しよう - DesignWalker
Loading...
IDEA*IDEA 〜 とあるサービス運営者が学んだことをまとめるブログ