基礎事項 2つの違いについての説明は最低限のみします 構文 関数宣言(declaration) function x() {} 関数式(expression) var x = function(){} 本当は違うけれど・・・詳細はFunction コンストラクタか関数宣言か関数式か "関数宣言は同時にその関数名と同じ名前の変数を作成" する ;(function(){ "use strict" a = 1 // var で変数宣言をしていないがエラーにならない。 function a(){} // 関数宣言をあとで宣言しても、このスコープではaが変数となるから })() ;(function(){ "use strict" a = 1 // assignment to undeclared variable こちらでは a が変数ではないのでエラー })() 優先順位 （本題） 関数宣言は
JavaScript文字列のエスケープ – yohgaki's blog に対して、 最近だと id="hoge" data-foo="<% bar %>" しておいて $("#hoge").data('foo') でとりだすのが主流かと思います。 はてなブックマーク - JavaScript文字列のエスケープ – yohgaki's blog のように、 そもそもJavaScriptコードを動的生成すべきでない JavaScriptコードに渡す変数はHTMLノードを経由すべきだ というような反論がついています。 が、はたしてそうでしょうか。 僕には、元の記事の手法も、HTMLノードを経由する手法もあまり好ましくない*1ように思えます。 そもそも、HTML生成時にXSS脆弱性が発生しがちなのは、 タグや静的な文字列と動的に生成される文字列が混在し 埋め込まれる多数の文字列を正しくエスケープ
今日の内容 JavaScriptを勉強し始めくらいの人を対象にしたJavaScript入門講座的なもの 文法とかは調べればわかるのでふれません 一人で勉強してもわからなそうな概念などを重点的に説明します ライブコーディングするのでJavaScriptってこんな感じて作るんだなーというのがわかってもらえればと アジェンダ JavaScriptを勉強する前に JavaScriptの基礎知識 ライブコーディング part1 jQueryの基礎知識 ライブコーディング part2
Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode
こんにちは、中川です。 今回は「Google JavaScript Style Guide」を気軽にチェックできるClosure Linterをご紹介したいと思います。 http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml Google JavaScript Style Guideのいいところですが、 規約だけでなく、しっかりしたツールも揃っているところが素晴らしいと思います。 コーディング規約はあったとしても、それに従っているか定期的に簡単にチェックする方法がないと、 いつしか守られないまま開発されてしまうことになりますね。 ※今回の内容はMacにて動作確認を行なっています。
HTMLで複数の画像を読み込むとき、HTMLのimgタグだけだと不恰好となりがちですが、読み込みを管理すれば見栄えも整いますというデモとJSライブラリを作ってみました。次の2つのデモを見比べて何が違うのか確認ください。 デモ (通常のimgタグ) デモ (LoadManager.jsを使用) デモの違いとは 前者は画像がバラバラとインターレース的に読み込まれ、後者は読み込み終わるまでローディングが表示され読み込まれたものがフェードインして表示されます。 ▼前者のデモ ▼後者のデモ 後者のデモには、ローディングのパーセンテージ表示も付いています。読み込みが何%まで達しているかを確認できるのも、後述のJSライブラリのメリットです。 HTML5で作られたフルFlash的なサイトを見たときにimgタグでインターレース的に画像がバラバラとでてくることが多くて、いつも微妙な思いをしていました。Flas
既に多くの方が JavaScript のオブジェクト指向的側面についての解説を記事にされていますが、読み手側から見ると、例えばプログラミング言語への習熟度やオブジェクト指向自体に対する理解度がマチマチなわけで、私自身、「おお、なるほど！」 っていう、頭の中のスイッチがパチンッ！と入るような境地には達していませんでした。 かつて私も オブジェクト指向なJavaScriptプログラミングのススメ なんていう翻訳記事を書いてはいるのですが、正直なところ prototype.constructor の存在は知りませんでしたし、Function.call や Function.apply をどう使えばよいのかなどをちゃんと理解できてはいませんでした。 そんな中、2011年12月に書かれた Doc Center | Mozilla Developer Network の記事 オブジェクト指向 Java
WEB+DB PRESS 編集の R たんから、僕の連載記事に読者様から質問が来ていると教えていただいたので、その内容を教えていただきました。 以下、内容を転載 「JavaScriptわくわく開発道」の記事に関して質問です。 今回の内容で特に興味を持ったのはthisキーワードの振る舞いでした。 thisキーワードの説明には、オブジェクト型の変数を別の変数にコピーしてから初期化すると、コピーした変数からメソッドを実行できなくなるという例が紹介されていました。 そこには「（1）の時点でobj0には{}が入っているため、hogeは未定義となってしまう」という説明があるのですが、誌面の都合上省略があるためか、thisキーワードを用いることで問題を回避できるという理由がなかなか理解できないでいます。 自分なりに考えてみたところ、内部的には以下のようなことが起きているのではないかと思いました。 (1)
ECMAScriptの言語仕様と組込関数の動作仕様は非常にきめ細かく規定されていますが、それに含まれていないJavaScriptの関数の仕様はどうもはっきりしないように思えます。そのためか、それを利用するコードも正確なものではないものが見受けられます。その１つがsetInterval関数。何をいまさら？という感じですが、ちょっとググッてみたところsetInterval関数を解説する記事は沢山見つかりますが、そのことについて注意している記事はほとんど見当たりません。 何のことかと言うと、setInterval関数は一定間隔で指定した関数を実行する、とだけ説明されていて、何が一定なの？ということについての説明が抜けているように思われます。例えば、もし、関数が一定間隔でコールされるなら、下のコードを実行した場合、duration=???はいくつと表示されるのが正しいのでしょうか？ functio
This is yet another JavaScript reference manual viewer. The source document was taken from MDN wiki. The keys are working if the search field has focus or your mouse cursor is in the navigation area. ESC key is global. UP - Previous category / Previous item DOWN - Next category / Next item ENTER - Open category / Load selected item ESC - Clear search field and set focus
HTML5テロッパーのサンプル。テキストエリアの文字がテロップとして動画の上に表示される画像クリックでサンプルページを表示します（Firefox 3／Opera 10／Safari 4で表示可能） 動画投稿サイト「ニコニコ動画」が人気です。ニコニコ動画はユーザーのコメントを再生中の動画にテロップのように表示する機能が特徴で、多くのユーザーがコメントを書き込んで楽しんでいます。 ニコニコ動画のようにブラウザー上で動画を再生しながらテロップを表示するには、従来、Flashが必要でした。Flash（Action Script）に習熟している開発者でなければ、ニコニコ動画のようなWebサービスは作れなかったのです。ところが現在、モダンブラウザーへの実装が進んでいるHTML5 videoなら、JavaScriptを使って簡単に文字や画像を動画に重ねられます。 今回はHTML5 videoとJavaS
新人配属や異動の季節になった。この4月，あなたがもし新しい職場に配属されて，上司から「君，Ajaxって知ってる？」と聞かれたとする。そのとき，堂々と「知ってますよ」と答えられるだろうか？ このITproのサイトでは，Ajax，マッシュアップ，リッチ・クライアント，SaaSなどいわゆるWeb2.0関連の記事が一昨年ぐらいから毎日のように掲載されている。そもそもITproはこうした言葉を知っている読者を対象にしているので，ほとんどの読者は冒頭のような質問を受けても，「知ってますよ」と堂々と答えられるだろう。しかし，この春初めてITの世界に入る人の中には，「名前や概念的なことなら分かるのですが…」という人も多いのではないだろうか。 そこで今回の記者の眼では，そういう新人君にお勧めな「Ajax学習法」を考えてみた。といっても，要するに，実際に自分でちょっとしたプログラムを作って試してみるだけである
2010年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年は、アニメーションのエフェクトやレイアウト、後半は背景画像関連のプラグインが特に目立っていたように思います。 [ad#ad-2] コンテンツスライダー・カルーセル関連 ギャラリー・画像拡大関連 ナビゲーション関連 タブ関連 パネル・ボックス関連 ツールチップ関連 レイアウト関連 背景画像関連 その他UI関連 アニメーション関連 スクロール・ドラッグなど操作関連 テーブル・リスト・データ関連 フォーム関連 コンテンツ生成 その他 コンテンツスライダー・カルーセル関連
プラグインだけど公開してないものだったり、いつも使ってるプラグインとの組み合わせだったり、ショートコードとかなんだか色々。どれもCodaにスニペットで登録してて一発変換で使ってます。 コードはアレなんですけど、ひょっとしてひょっとすると誰かの役に立つかもしれないので恥ずかしながら公開します。対象はちょっとだけJS書けるとかそういう人ですかねたぶん。書ける人はもっとキレイなやつ使ってるでしょうし。（もっときれいに書けとか何そのコードとかも歓迎） 紹介してるスニペットたち ページトップにスクロールするだけ テキストボックスにラベル表示するやつ 要素のサイズを取得するやつ タブきりかえるやつ IEで透過pngをフェードしたときに黒くなるやつ対策のshow()とhide() Google Analyticsのトラックイベント一括bind Ajaxサイトにするときに使うリンク置き換えプラグイン スク
パネルに配置したテキストを下部にいくにつれフェードアウトで表示し、残りのテキストをアニメーションで表示するコンテンツを実装するチュートリアルを紹介します。 残りのテキストをアニメーションで表示したキャプチャ [ad#ad-2] 実装 HTML HTMLはシンプルで、テキストと「Read More」ボタンをdiv要素内に配置します。 <div class="sidebar-box"> <p>パネルのテキスト</p> <p class="read-more"><a href="#" class="button">Read More</a></p> </div> CSS パネルの初期状態のサイズはスタイルシートで設定します。フェードアウトはCSS3グラデーションを使用します。 .sidebar-box { max-height: 120px; position: relative; overfl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
