#01 JavaScriptのバッドノウハウ | gihyo.jp
今回から「BK通信」（ビーケーツウシン）と題して、連載することになった高林と申します。以前連載していた「プログラミングの光景」ではデバッグ、コードレビューといった大きなテーマを取り上げましたが、今回の連載では日常的に遭遇するチマチマした「バッドノウハウ」（Bad Knowhow）について書いていきたいと思います。 バッドノウハウとは？ バッドノウハウとは、筆者が2003年に作った造語です。元の定義は以下のようなものです。 計算機を使っていると、何でこんなことを覚えないといけないのだろうか、とストレスを感じつつも、それを覚えないとソフトウェアを使いこなすことができないためにしぶしぶ覚えなければならない、といった類いのノウハウは多い。そうした雑多なノウハウのことを、本来は知りたくもないノウハウという意味で、私はバッドノウハウと呼んでいる。 一方、「はてなキーワード」にある定義は簡潔ですっ
第3回 クロスブラウザの傾向と対策 | gihyo.jp
こんにちは、太田です。第1回は各ブラウザの特徴をまとめ、第2回は環境作りについて解説したので、ようやく今回からクロスブラウザの本題に入っていきます。まずはクロスブラウザ対応のパターンを整理し、そのパターンごとの対策をまとめます。 クロスブラウザとはなにか そもそも、クロスブラウザ対応とはどういうことでしょうか？ここで、この連載におけるクロスブラウザの定義を決めておきます。 サポート対象のブラウザで設計通りの表示・動作をして、たとえ未知のブラウザであっても、そのブラウザがWeb標準に沿っているなら最低限の表示・動作をすること サポート対象のブラウザについては第1回で解説した通りですが、メインターゲットはIE（6/7/8）、Firefox（3.6）、Chrome（4.1）、Safari（4.0.5）、Opera（10.51）とします。カッコ内はフルサポートするバージョンで、それ
第5回 JavaScriptの基礎知識#2：クロージャ編 | gihyo.jp
こんにちは、太田です。前回はJavaScriptの基礎的な部分を解説しました。今回はJavaScriptのクロージャについて解説します。クロージャはJavaScriptでは使用頻度が高く（意識して使用していなくとも、ほとんどの場合クロージャが使われています）、今後の連載の中でも積極的に使っていきますのでここで確実に理解してしまいましょう。 クロージャとは クロージャはその定義を説明されてもなかなか理解できないため、難しいものだと思われがちです。しかし、ソースコードを中心に見方を少し工夫すればすんなりと理解できると思います。 さて、クロージャの前に確認しておくべき基本事項があります。それは、JavaScriptでは関数を入れ子にできる、という点です。ある関数の中に別の関数を定義することができます。基本中の基本ですが、これがクロージャにおいてもっとも重要です。 では、それを踏まえて次のコー
第8回 実践DOMスクリプティング#1：HTMLとテキストの操作 | gihyo.jp
こんにちは、太田です。前々回、前回でDOMの基礎を簡単に解説しました。今回からは、DOMを使った実用的なスクリプトを解説していきます。特に今回はHTMLの操作、テキストの操作にフォーカスを当てていくつかのサンプルコードを解説していきます。 HTML操作の基本 JavaScriptによってHTMLを書き出したり、一部を書き換えたり、削除したりといった方法は実は様々な方法が用意されています。目的に合わせて適切な方法を選ばないと非効率だったり、最悪クロスサイトスクリプティングなどの問題を抱えてしまう危険もあります。 document.writeと同期読み込み JavaScriptでHTMLを書き出すというと、最初に学ぶのはこのdocument.writeかもしれません。いわゆるprint文のようにシンプルなAPIなので、入門書の最初のサンプルなどで扱われることも多いようです。しかし、docume
第2回 Firebugによるデバッグの基本、Console APIとその活用 | gihyo.jp
Firefox 3とFirebugで始めるJavaScript開発 第2回Firebugによるデバッグの基本、Console APIとその活用 さて、前回はインストールからFirebugのタブの基本的な部分について紹介をしてきました。今回は、Firebugに実装されているConsole APIの紹介と、Console APIを利用したデバッグ手法について解説していきます。 Firebugで利用できるAPI Firebugには、デバッグに活用できる2つのAPIが実装されています。今回は、その2つあるAPIのうちConsole APIについて解説していきます。 Console API Console APIはFirebugのタブだけでなく、コンテンツ側のJavaScriptから呼び出すことのできるAPIです。デバッグのために便利な関数があらかじめたくさん用意されています。これらの関数を以下
javascriptを理解するためのたった2つの大切なこと:改
9割ぐらいはハッシュ何がハッシュなのかjavascriptで存在するほとんどのオブジェクトの実体はハッシュだよ。 var arr = [0,1,2,3]; とかをみると配列(人によってはリスト)に見えると思う。でも実際は違うんだ。 これは var has = {0:0,1:1,2:2,3:3}; と基本的には等価なんだ。ただちょっと束縛されているメソッド(インターフェイス)が違うだけ。 ためしに arr[4] = 4; arr['x'] = 'string'; arr[-1] = -1; としてみよう。 Firebugで確認してみると[0, 1, 2, undefined, 4]というような値がかえってくるよ。 でもarr[-1]やarr['x']の値は保存されてないのかな？そんなことはないちゃんとアクセスできるんだ。 それどころかarr.xで'string'がかえってくるんだ。 別の例を
あれ、いつも書いてるな～というJavaScript の小技集 | バシャログ。
いい加減髪を切りたいminamiです。 JavaScriptでいつも書いてるな～という処理や、知っていると便利なTipsを簡潔に集めた記事を見てほお～と思ったものがいくつもあったので抜粋してみました。 ※追記1： ご指摘がありましたので一部修正しました。「配列をソートする」ではなく「配列をシャッフルする」でした。 ※追記2：「HTMLをエスケープする」のソースがまちがって表示されていました。修正しました。 ※追記3：予想以上に反響が大きく、多数ご指摘を受けてしまいました。よく使う処理の書き方もいろいろあるんだな～という参考程度にご紹介したのですが、参照元の記事の内容の検証が不十分なまま紹介してしまい申し訳ありませんでした。いろいろと勉強になりました！ 45 Useful JavaScript Tips, Tricks and Best Practices 配列からランダムで値を取り出す v
HTMLテーブルの行を見やすくするテーブルクロスJavaScript*ホームページを作る人のネタ帳
» Introducing Tablecloth テーブルクロスを導入する。 この記事がWEB関連のなかで話題になっていました。 はて・・テーブルクロス・・・。 何のことやらさっぱりだったんですが、使ってみるとなかなか素敵な動きをしてくれましたので記事に。 あなたのhtmlに2行のコードを加えたら・・・ By simply adding 2 lines of code to your html page you will have styled and active tables that your visitors will love あなたのhtmlにたった2行のコードを加えるだけで、あなたのサイトのテーブルは、あなたのサイトの訪問者に愛される。 なんとも素敵な響きだなと思った人はデモを見てみましょう。 » デモはこちら テーブルによって大量のデータを出力するときには便利な機能ですね。
ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由
ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由を調べてみました。 １．はじめに TwitterやPocketなどのソーシャルボタンのコードをみると、共通してscript要素の中にあるfunctionの前に「!（エクスクラメーション）」がついています。 Twitterの場合 <a href="https://twitter.com/share" class="twitter-share-button" data-via="yujiro" data-lang="ja" data-size="large">ツイート</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getE
javascriptを理解するためのたった2つの大切なこと
9割ぐらいはハッシュ何がハッシュなのかjavascriptで存在するほとんどのオブジェクトの実体はハッシュだよ。 var arr = [0,1,2,3]; とかをみると配列(人によってはリスト)に見えると思う。でも実際は違うんだ。 これは var has = {0:0,1:1,2:2,3:3}; と基本的には等価なんだ。ただちょっと束縛されているメソッド(インターフェイス)が違うだけ。 ためしに arr[4] = 4; arr['x'] = 'string'; arr[-1] = -1; としてみよう。 Firebugで確認してみると[0, 1, 2, undefined, 4]というような値がかえってくるよ。 でもarr[-1]やarr['x']の値は保存されてないのかな？そんなことはないちゃんとアクセスできるんだ。 それどころかarr.xで'string'がかえってくるんだ。 別の例を
IT戦記 - 一行で IE の JavaScript を高速化する方法
以下の一行をすべての JavaScript の前に読み込む /*@cc_on _d=document;eval('var document=_d')@*/ この一行を読み込むことによって IE での document へのアクセスが 5 倍速くなります。 たとえば 以下のように、読み込む前と読み込んだ後を比較してみます。 // Before var date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date - date); // 643 /*@cc_on _d=document;eval('var document=_d')@*/ // After date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date -
【Javascript】consoleオブジェクトが持つlog以外の便利メソッド18（後編）
前回紹介したerrorメソッドや、のちほど紹介するwarnメソッドと一緒につかって、メッセージに意味付けを行うと便利に使えると思います。 logメソッド console.log(message-object) ご存知logメソッドです。引数で渡された値を出力します。 引数の値なのですが、カンマ区切りで複数渡すことも可能です。 また、あまり知られていないと思いますが、logメソッド(debugなどのメッセージを出力する系のメソッドも含む)では、printf-styleのプレスホルダの一部を使用することも可能です。 %s 文字列 %d, %i 数値 %f 浮動小数点数 %o オブジェクトへのリンク など。 FireBugでは、%cプレースホルダをつかって、メッセージのスタイルを設定することもできます。 以下、サンプルです。 var str = 'ほげほげ', intNum = 10, floa
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
