Firebug の使い方：(X)HTML と CSS の確認・修正方法のまとめ
Firefox アドオンの「Firefbug」はご存知の方も多いと思いますが、Firefbug を使って表示しているページの(X)HTMLマークアップや CSS を確認・修正する方法のまとめを紹介します。 特に３項に記した、(X)HTMLとCSSを一発で確認する方法はおすすめです。 動作は Firefox 3.5 + Firebug 1.4.0b7 で確認しています。 １．基本：(X)HTML マークアップと CSS を表示する 確認したいページを表示した状態で、メニューバーの「表示」→「Firebug」を選択します。または F12 を押下します。 これでページ下半分に Firebug のウィンドウが表示され、左側に(X)HTMLマークアップ、右側にそのページで使われている左側のウィンドウで選択状態になっている要素の CSS が表示されます。この手順で Firebug の画面を開くと、bo
高度な JavaScript 技集
JavaScript で作って意味があるのかどうか分かりませんが、作ってみました。 応用編 入力したテキストをページ上に書き出し、個々の文字をドラッグ＆ドロップ で動かせるようにする ソースを読んでも中身が分からない HTML を作成する パスワードチェックの部屋 (パスワードは「開けごま」ですが、HTML のソースや JavaScript を解析しても、絶対にパスワードが分からない仕組みになっています。) バー ライブラリ編 こんなの JavaScript で作るかよってな代物です。 できてしまったものはしょうがないでしょう。 utf.js (UTF-8 <-> UTF16 変換) base64.js (Base64 encode/decode) md5.js (MD5) des.js (DES 暗号化/復号化) zlib.js (JavaScript による zlib 実装、zlib
JavaScript開発ツールの本命！ FirebugとAptana（1/3） − ＠IT
JavaScript開発ツールの本命！ FirebugとAptana：どこまでできる？ 無料ツールでWebサイト作成（4）（1/3 ページ） ついに「Aptana STUDIO」がリリース 先日、連載第1回と第2回で紹介したAptanaが、2年にわたる開発期間を経て「Aptana STUDIO 1.0」としてリリースされた。 「Aptana STUDIO 1.0」には、「Community Edition」と呼ばれるフリー版と、「Professional Edition」と呼ばれる製品版が存在し、製品版は1年間の更新と優先的なサポート、最新開発版へのアクセスパスが付いて199ドル（現在はセール中？）で、以降更新のために1年ごとに79ドル、というプランが用意されている。Professional EditionはIE（Internet Explorer）のデバッグサポート、JSONエディタ、S
javascript - にはクラスはない : 404 Blog Not Found
2009年06月13日22:00 カテゴリLightweight Languages javascript - にはクラスはない かえってわかりにくくなっている感じをかつてさんざん実感したので。 JavaScriptのオブジェクトについて考察してみた - あと味 JavaScriptにおけるほとんど全てのデータはオブジェクトである オブジェクトの定義にもいろいろありますが、ここでは「メソッドを持つ」という狭い意味においても事実だということです。実際に見てみましょう。 p(true.toString()); p("String".toString()); p((1).toString()); p((3.14159265).toString()); p([0,1,2,3].toString()); p({q:"answer to life, the universe, and everythi
tiny-studio :: JavaScriptのArray.lengthプロパティでは、配列の要素数が取得できないことがある。
最近知ったことなのですが、JavaScriptの配列のlengthプロパティは、配列の要素数を返すワケではないそうです。JavaScriptの配列をも～っと深く理解する：lengthの不思議な動作試しに、下記のようなコードを実行してみてください。配列の要素数は1個であるにも関わらず、6と表示されるはずです。<html> <head> <script type="text/JavaScript"> var hasOneElement = new Array(); hasOneElement[5] = 'one'; alert(hasOneElement.length);//6が表示される。 </script> </head> <body></body> </html> そこで、配列の要素数を取得するメソッドをArrayオブジェクトのプロトタイプに追加してみます。<html> <head> <
怠け者になりたくて - wshの覚え書き - csvファイル読込
今回は特に意味があるわけではありませんが、csvファイルを読み込んでみたいと思います。 内容としてはcsvファイルを読み込み配列の配列に格納してそれを表示します。区切り文字は「,」です。ただ読み込むだけと言うのもつまらないので 「#」以降はコメントと仮定して読み飛ばします。 //読み込み対象ファイルが存在するディレクトリ var path = './'; //読み込み対象ファイル名 var fName = 'test.csv'; //csvファイルの区切り文字 var separator = //読み込んだファイルの一時格納先 var dat = new Array(); var object = WScript.CreateObject( 'Scripting.FileSystemObject' ); //ファイルオブジェクト作成 var
各ブラウザのキーに対するキーコード表[JavaScript]
表中のセルの色は値に応じて変えている。 何も数値が書かれていない欄は何も値がなかった、もしくは取得できなかったことを示す。 キーコードの取得は以下の関数で行った。 function keyCode(e){ if(document.all) return e.keyCode; else if(document.getElementById) return (e.keyCode)? e.keyCode: e.charCode; else if(document.layers) return e.which; } ファンクションキーなど何かのショートカットキーに割り当てられ、うまくキーコードが拾えないキーは、可能ならばそのイベントをキャンセルしてキーコードを取得している。 データの取得は全てWindowsXP上、ＪＰ106キーボードで行っている。
JavaScript: KeyEventのkeyCode定数一覧 - mayokara note
Firefoxのみ。 >>> for (var i in KeyEvent) console.log(KeyEvent[i], i); 3 DOM_VK_CANCEL 6 DOM_VK_HELP 8 DOM_VK_BACK_SPACE 9 DOM_VK_TAB 12 DOM_VK_CLEAR 13 DOM_VK_RETURN 14 DOM_VK_ENTER 16 DOM_VK_SHIFT 17 DOM_VK_CONTROL 18 DOM_VK_ALT 19 DOM_VK_PAUSE 20 DOM_VK_CAPS_LOCK 27 DOM_VK_ESCAPE 32 DOM_VK_SPACE 33 DOM_VK_PAGE_UP 34 DOM_VK_PAGE_DOWN 35 DOM_VK_END 36 DOM_VK_HOME 37 DOM_VK_LEFT 38 DOM_VK_UP 39 DOM_V
JavaScript正規表現メモ。 (JavaScriptでよく使う書き方。) - こせきの技術日記
タイトル変えました。旧タイトル「JavaScriptでよく使う書き方」。よく使うけど毎回忘れる。 正規表現にマッチするかどうか。 RegExp#testを使う。 /abc/.test("abcdefg") // => true String#searchはマッチした位置を返す。マッチしない場合は-1。先頭にマッチすると0でfalseなので注意。真偽値が欲しい場合はString#searchを使わない。 "abcdefg".search(/xxx/) // => -1 "abcdefg".search(/def/) // => 3 "abcdefg".search(/abc/) == false // => true 正規表現の部分マッチを得る。 部分マッチを得るには、RegExp#execかString#matchを使う。execとmatchの速度は大して変わらない。 正規表現のベンチマー
selectボックスの中身は「jSelect」を活用してサーバで管理する開発方法:phpspot開発日誌
Plugin JQuery jSelect - Demonstration selectボックスの中身は「jSelect」を活用してサーバで管理する開発方法。 これまで select の組み立てはサーバ側でPHPなんかでループさせて行うのが当たり前と思っていました。 jSelect を使えば、XMLやJSON、配列等のフォーマットからなるデータをajaxで読み取ってselect ボックスを簡単に動的に作成できます。 JavaScriptで動的に作った方がよいケースも多そうなので、導入できそうな部分は取り入れたほうがよいかも。 ということで、jSelect とそのメリットをご紹介。 jselect は、たとえば、次のようなHTMLがあったとします <select name="test"> <optoin>loading.... </select> で、$('#test').jselect({
[JS]セレクトボックスにアイコンを配置してグラフィカルにするスクリプト -image combobox
セレクトボックスの各アイテムにアイコンを配置して、グラフィカルに認識しやすくするスクリプトをMarghoob Sulemanから紹介します。
jQuery入門（その1）（1/7）：CodeZine
はじめに 実を言うと、私はずっとJavaScriptを嫌っていました。JavaScriptのコードを書くのが嫌でしたし、いろいろなブラウザに対応するために大量のスクリプトコードを使わなければならないのも嫌でした。そうした点は今でも変わらないのですが、最近になってJavaScriptへの理解が深まったことと、jQueryという小さなJavaScriptクライアントライブラリのおかげで、クライアント中心のAJAXスクリプトコードを書かなければならないときでも恐怖を抱かなくなりました。それどころか、今では喜んで引き受けるほどになっています。クライアントロジックがもっと複雑になり、ブラウザの機能や実装の多様化がさらに進んだとしても、jQueryをはじめとするクライアントライブラリが、JavaScriptやHTML DOMを扱う際に必要な正規化を提供してくれます。 私はJavaScriptの初心者と
[JS]パネルをスムーズなアニメーションで開閉するシンプルなスクリプト
Simple Toggle with CSS & jQuery demo デモではバーをクリックすると、パネルがスムーズに開閉します。 それぞれのパネルは個別に開閉するため、同時に開いた状態にすることも可能です。 バーはH2要素、パネルはdiv要素で実装されており、パネル内には画像やテキストなどを自由に配置することができます。 HTMLの基本構造 <textarea name="code" class="html" cols="60" rows="5"> <h2 class="trigger"><a href="#">Toggle Header</a></h2> <div class="toggle_container"> <div class="block"> <h3>Content Header</h3> <!--Content--> </div> </div> </textarea>
はてなー☆来歴：はてなダイアリーに貼付可能な☆を利用した足跡帳 - 風柳メモ
考えてみたら… はてな☆ログ：はてなスターを利用した足跡ログ取得サンプル - 風柳メモ で触れた、 はてなスターの認証強化について - はてなスター日記 の記事中の、 新しい仕様でも、JavaScriptが実行可能な環境で意図的にスクリプトを仕込むことで意図しない☆が付く動作を実行させることが可能ですが、はてなダイアリーやグループなどのJavaScriptを自由に書くことができない環境ではこのようなことはできなくなっています。 ですが……Google ガジェットを使ってしまうと、前提が崩れてしまうのでは。 てなわけで… こういうのが出来てしまいます。 とりあえず、サイドバーに設置して、様子見中…。 ■■■見たな？■■■ 設定方法 「はてなー☆来歴」のGoogle ガジェット追加「はてなー☆来歴」のGoogle ガジェット追加ページへ行く。 なお、はてなにログインしていると、上記ページに行っ
わずか2.5KBでテーブルにソート機能を提供する「TinyTable」:phpspot開発日誌
TinyTable JavaScript Table Sorter - 2.5KB - Web Development Blog わずか2.5KBでテーブルにソート機能を提供する「TinyTable」。 シンプルだけど次のようなかっこいいソート可能テーブルを実現できる軽量ライブラリが公開。 デモページ 各種変数の設定でカスタマイズも可能みたい。 ＣＳＳのクラス名の指定なんかが出来るようです。 var sorter = new TINY.table.sorter("sorter"); sorter.head = "head"; //header class name sorter.asc = "asc"; //ascending header class name sorter.desc = "desc"; //descending header class name sorter.even
[JS]スムーズなスライドが気持ちいい、パンくずのスクリプト -jBreadCrumb
jBreadCrumb demo パンくずはリスト要素で実装されており、既存のパンくずに適用することも簡単です。 「jquery.jBreadCrumb.js」の最後に記述してあるオプションでは、オープンするルール、オープンしておくレベル、アニメーションのスピード、クローズ時のサイズなどを変更できます。 オープンするルールの最大文字数と最小文字数を100に、エレメント数を1に、オープンしておくレベルを終わりから2に、クローズ時のサイズを20に変更。 jBreadCrumbはjQueryのプラグインのため、動作にはjquery.jsが必要です。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
S2ファクトリー | Web/アプリ/システム/デザイン/ディレクション
特集：Firefox 3とFirebugで始めるJavaScript開発｜gihyo.jp … 技術評論社
[JS]画像を使用して、divの矩形を角丸やグラフィカルにするスクリプト -DivCorners
独習JavaScript: 高橋 和也, 竹添 直樹, 里見 知宏: Amazon.co.jp: 本
