JavaScriptのプログラミングに関するTips集。 主に中級レベルの話題とノウハウを掲載する。 なお，JavaScript初級〜中級をクイズ形式で網羅的に学習するためには，下記のエントリを参照。 JavaScriptの動かないコード (JavaScriptエラー集) http://language-and-engineering.hatenablog.jp/entry/20080912/1221297779 ※JavaScript以外のプログラミングについては，こちらを参照。 ピュアJSを極める： JavaScriptで，クラスを継承する方法 （複数のサブクラスから共通クラスのプロトタイプを参照する） JavaScriptでの例外設計 （throw，try-catch-finally構文のイメージと利用パターン） JavaScriptで，動的に追加されたイベントリスナの実行順序を保
JavaScriptでは、初見の人にはさっぱりわからないけれども、ある程度慣れた人は当たり前に使うイディオムが結構たくさんあります。知ってしまえば何てことはないので、私の知っている限りのイディオムとその意味を解説します。 （7/3追記: twitter等で教えていただいた内容を追加しました） +v （数値化） var v = "123"; console.log(+v + 100) // 223 console.log(v + 100) // 123100 vを数値化する方法では最もメジャーです。parseFloat(v) に比べて高速なのに加えて、parseFloatとは細かい挙動が異なります（例えば空文字列の場合、parseFloatならば NaN になりますが、 +v の場合はゼロになります）。必ず数値になることが保証されており、文字列などで数値化出来ない場合はNaNが返ります。 v
Cookbookがあった。 CoffeeScript Cookbook Cookbookとは「諸々の問題を華麗に解決しよう！」というレシピ本みたいなの。CoffeeScriptの特徴というより、単なるプログラムの書き方の寄せ集めみたいなノリでもある。 なので、CoffeeScriptの特徴を捉えてるやつをピックアップして見てみよう！ スルーしてるやつ 公式ドキュメントに載ってる基本的なものはだいたいスルー あと変態ぽいやつ(例えば「Repeating a String」)もスルー。(直感的でない) 単純なjsのtipsもスルー (Recursive Functions) スタティックなメソッドを使おう なぜか公式に書いてない、staticなやりかた。 classのメソッド、プロパティに@をつけるとOK。 class Songs @_titles: 0 # Although it's dir
追記 11/9/24 Gistのリンクを本家Wikiに貼ってみました。 11/9/24 log 関数を修正しました。 11/7/10 JSON.stringify の第二引数 replacer について、補足しました。 11/7/14 os0x さんの指摘を反映しました。 String.trimRight、trimLeft は ECMA Script 5 非標準です。 JSON.stringify の第3引数には"\t"などの文字列も渡せます。 JSON.parse の第2引数 reviver について補足しました。 Array.prototype.forEach の第2引数 について補足しました。 "use strict" 時の Object.freeze 等の挙動について補足しました。 「ECMA5 というのはちょっとおかしな略し方」について補足しました。 タイトルを修正しました。(旧
こんにちは。毎年花粉症になりかけている飯塚です。 最近のNode.jsの普及などによってサーバサイドJavaScript界隈が盛り上がっています。 そんなホットなJavaScriptをラクにかつエレガントに書くためのCoffeeScriptという言語をチュートリアル風に紹介します。 何かしらのライブラリを自分で書く程度にJavaScriptで開発している人は絶対に使ったほうがいいと思います。 JavaScriptを知っていれば1-2時間程度で十分駆使できるようになります。 （2011/6/28：@m_satyr様にご指摘頂いた箇所を修正しました。） 目次 CoffeeScriptとは？ インストール Hello World 構文 関数 変数展開 Objectの生成 ループ 存在チェック ヒアドキュメント thisのバインド クラス 無名関数 {var} Tips ?の使い分け 存在チェック
JavaScript Advent Calendar 2010 8日目担当のid:os0xです。 JavaScriptネタは案外範囲が広くて色んなネタがあるので、毎回が楽しみですね。 さて、私はデバッグをネタにしたいと思います。テストではなくデバッグです。誰かが書いたコードをメンテナンスしなきゃー、とか。jQueryプラグイン導入しようとしたけど、なんかうまく動かないーみたいなケースのおはなしです。 JavaScriptのデバッグは大変なので、多くの方が日々苦労されていると思います。なぜJavaScriptのデバッグが大変なのか少し整理してみましょう。 ブラウザ依存 まず、なんといってもJavaScriptはウェブブラウザ上で実行されるので、環境が一定ではありません。特定の環境だけを対象にJavaScriptを書くことは滅多にありません。PC向けではIE、Firefox、Chrome、Sa
基本 jQueryとは jQuery は様々な処理を短く簡単に書ける JavaScript ライブラリです． 独自のXPATH/CSSセレクタを利用することで，多くのDOM操作を非常に簡単に書くことが出来ます． JavaScriptのDOM操作や，XMLHTTPRequest，XMLの操作などを覚えなくとも， Ajaxを利用したインタラクティブなページを作ることが出来ます． 以下のサンプルを見れば，JavaScriptらしい表記をほとんどする必要がないことがわかると思います． toggleサンプル 特定のブロックの表示・非表示を切り替えるのは以下のようなコードになります． $("#target_toggle").toggle("slow"); このブロックは，<p id="target_toggle"> です． Ajaxサンプル Ajaxでhello.htmlをロードするのは以下のようなコ
ここ最近はブラウザーの上で動く思いっきりRIAなアプリケーションを書いている私。こと通信の部分になると JavaScript での開発効率が、C++/Java/Objective Cなどと比べて格段に高いことをつくづく感じている毎日なので、今日は、そのあたりを少し解説してみようかと思う。 サーバーのAPIにアクセスするプログラムを書く方法は色々とあるが、「サーバー上の特定のURLにHTTPでアクセスして結果をXMLやHTMLやJSONで受け取る」というケースに限定すれば、基本的に３つのパターンに分けられる。 1. 同期通信 result = urlfetch.fetch("http://www.google.com/") if result.status_code == 200: doSomethingWithResult(result.content) その書きやすさのために、実務経験の
http://github.com/hotchpotch/as3rails2u/tree/master/src/com/rails2u/bridge/JSProxy.as AS3 から HTML の特定要素の内容を取得したり JS のメソッドを引数つけて呼び出したり、値をセットしたりがめんどくさくなってきたので作ってみました。 JSProxy.proxy もしくは new JSProxy() で JSProxy のインスタンスを作り、適当にプロパティを呼び出していって(この時点ではスタックにどういう処理を行うかを書いてるだけ)、最後JSを本当に叩いて値を取得やメソッド呼び出しを行いたいときは、プロパティの頭に $ をつけます。 // アラート関数を実行 JSProxy.proxy.$alert('foo'); // body の本文を取得 var body:String = JSProxy
window.open()で小窓 いわゆる小窓です。これはJavaScriptの window.open() というメソッドで 小窓となるウィンドウを生成します。 各引数の文字列は一重引用符または二重引用符で括って指定します。 第１引数「URL」は生成されるウィンドウに表示するページのURLです。 ※ ウィンドウに表示するページ（別のファイル）は別途作成して用意しておきます。 第２引数「ウィンドウ名」は特に指定する必要がなければ null で良いでしょう。 ウィンドウ名を指定するときは引用符で括ります。 ※ null を指定するとウィンドウ名の設定されていない新規ウィンドウとなります。 (HTMLの属性 target="_blank" と同等です) 例: window.open('example.html', null); 第３引数「オプション」はウィンドウの特徴を設定する文字列です。 こ
Flashのフレームワーク、Progression（プログレッション）を使った事のある、Web制作者さんに質問です。 Progressionを使って、swfファイルを作成したあと、通常のswfファイルのように、ヘッダーとフッダーのあるHTMLに組み込みたいと考えていますが、progression.jsの影響で、swfが左上に設置されてしまいます。 progression.jsを経由せず、swfObjectでswfを配置した所、表示正常に出来たのですが、swfAddressの機能が動かなくなりました。 以下のトピックスとやりたいことは同じなのですが、 http://forum.progression.jp/index.php?topic=135.0 『必要となる js ライブラリの読み込み』というのが、具体的に何をさし、どのような記述をHTMLにすればよいのか判りません。 そこで、Progr
はじめに JavaScriptは簡単な言語のようでいて、実は奥が深く、初心者にとってなかなかその本質がわかりにくい言語です。ここでは、JavaScriptの言語的エッセンスを理解できるようなものをFAQ形式で書いてみました。ご意見や誤り等を指摘してもらえたら嬉しいです。 なお、JavaScriptの標準化であるECMAScriptは、今年末にEdition 5 がリリースされる予定です。このFAQは、現在のバージョンであるEdition 3をベースにしています。 ECMAScriptって何ですか？ ECMAはEuropean Computer Manufacturer Association(欧州電子計算機工業会)の略で、標準化団体です。NetscapeのJavaScriptとMicrosoftのJScriptをベースに、純粋なプログラム言語部分を抽出したものをECMAで標準化したスクリプ
HTML5で正規表現がサポートされる、といったことをきっかけに、正規表現はプログラマだけでなくWebクリエイター全体のスキルとして求められていくものになっていくのではないでしょうか（参考：あまり知られていないけれど、HTML5では正規表現が使えるようになる ）。 ここではそうした正規表現の初学者や、一度挫折したけど再入門したい人、そしてより高度な内容をマスターしたいすべての人のためのリソース集を作りました。 初学者向けには「はじめての正規表現」 「はじめての正規表現」は、文字通り正規表現という言葉は知っていても中味はよく分からない、という初学者の方にぴったりのコンテンツ。紙芝居形式のプレゼンテーションで楽しく正規表現について把握できます。 はじめての正規表現 初学者の方には、次の2つの記事も手っ取り早く読めて概要を把握できますので紹介しておきます。 使うほどに良さが分かる正規表現（1/2）
設置方法 まず、ファイル一式をダウンロードします。 通常版 | prototype.js利用版 stripedtableを使いたいHTMLファイルにjavascriptを読み込みます。 <script src="js/stripedtable.js" type="text/javascript"></script> prototype.js版を使う場合は先にprototype.jsを読み込みます。 <script src="js/prototype.js" type="text/javascript"></script> <script src="js/stripedtable_proto.js" type="text/javascript"></script> テーブルに設定するクラス名や、trに対して自動的に付加されるクラス名を変える場合はstripedtable.jsの設定部分をテ
西田 善彦氏 storage.goodmix 本記事で紹介している「Flash Helper Scripts」は、Flash/ActionScript開発のためのオープンソースコミュニティ「Spark project」にて共有・提供されています。Spark projectでは、その他にもさまざまな用途のライブラリやソースコードが公開されています。ぜひ、チェックしてみてください。 Flashサイトを構築する際に、サイトデザインやデザインパーツをPhotoshopで作成し、それをFlashに読み込んでオーサリングしている人も多いでしょう。バージョンアップとともに、FlashとPhotoshopの連携は強化されてはいるものの、現状の機能だと物足りなさを感じている人はいませんか？ 本記事では、FlashとPhotoshopの連携をもっとスムーズに、もっと便利にするスクリプト集を紹介します。
「商業利用もOK！ Google Mapsについて知りたいこと」に続くGoogle Mapsインタビューの後編は、数多く存在するGoogle Maps関連のAPIや機能のうち、あまり知られていないものや新しいものをグーグルのソフトウェアエンジニア、淺川浩紀さんに聞いた。 Code Playgroundでオンライン編集 まずは、即効性のあるものからいこう。 Googleが持つ多くのAPIは、Webブラウザ上からJavaScriptによって呼び出せる。JavaScriptはコンパイルの手順なしに書けば実行できるので手軽である。しかし、だからAPIを試すのも簡単だとは限らない。例えば、Google Maps APIなら正しいGoogle Maps APIキーを用意したり、適切な文書にプログラムを埋め込んだりする作業を行い、それをWebブラウザで開かねばならない。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
