There are several ways to define a block of JavaScript functionality. Learn which is the most appropriate one for your particular use case.
There are several ways to define a block of JavaScript functionality. Learn which is the most appropriate one for your particular use case.
IE6〜IE8のinnerHTMLには問題が多く、そのひとつに、HTML5の新要素を食わせると悪夢のようなDOMツリーを生成するというものがあります。 var div = document.createElement("div"); div.innerHTML = "<section>section</section>"; document.body.appendChild(div); 上記のコードを実行すると、body以下にはこのような構造ができてしまいます。 <body> <div> section </SECTION> </div> </body> どうやら、innerHTML に与える文字列を div でラップし、div要素の前に何か一つ以上のダミーの文字列を設定しておき、あとでアンラップすれば上手くいくようです。 http://jsdo.it/uupaa/IEInnerHTMLB
node.jsに関する基礎やチュートリアルのまとめ。 リアルタイムなWEBを実現するには必須のサーバサイドJS、node.jsについて色々とまとめてみました。 node.js node.jsについて node.js なんとなく凄そうだけどよく分からないという方も多いかもしれないので簡単に解説。 一番最初見た時は何かのJavaScript ライブラリかと思ったのですが、全く違って、V8というChromeにものっている高速JavaScriptエンジン上で動くサーバを動かせる仕組み。 サーバ自体を具体的に言うと次のようなコードで実現します。 var http = require('http'); http.createServer(function (request, response) { response.writeHead(200, {'Content-Type': 'text/plain
CSS3のtransitionでアニメーションするjQueryプラグイン「jQuery transition Animate」 iPhone / iPadではjQueryのanimateメソッドが重いのでCSS3のアニメーションを使いましょうというのがセオリーになっていますが、CSSでアニメーションって結構めんどくさかったりします。 そこで、jQueryのanimateメソッドと同じような記述をするとCSS3のtransition でアニメーションするjQueryプラグイン「jQuery transitionAnimate」を作成しました。 jQuery.transitionAnimate.js 新しいバージョンを「transitionAnimateをバージョンアップ」からダウンロード可能です $(セレクタ).transitionAnimate(params, duration, easi
RegExp オブジェクトは、パターンでテキストを検索するために使用します。 正規表現を詳しく知りたい方は JavaScript ガイド の 正規表現 を参考にしてください。 解説 リテラル記法とコンストラクター RegExp オブジェクトを生成するには二通りの方法があります。リテラル記法とコンストラクターです。 リテラル記法は引数をスラッシュで囲み、引用符は使用しません。 コンストラクター関数の引数はスラッシュで囲むのではなく、引用符を使用します。 以下の三つの式は、同じ正規表現を生成します。 /ab+c/i new RegExp(/ab+c/, 'i') // リテラル記法 new RegExp('ab+c', 'i') // コンストラクター リテラル記法では、正規表現が評価されるときにコンパイルを行います。正規表現が変化しない場合は、リテラル記法を使用してください。例えばループ内で
関数とはいくつかの処理をまとめ関数名として名前をつけて定義したものです。何度も繰り返し行われる一連の作業を関数としてまとめておき、必要に応じて関数を呼び出して使います。 JavaScript では関数もオブジェクトのひとつで Function オブジェクトです。ここでは JavaScript における関数の定義方法から使い方までを順に解説していきます。
うめぇヨーグルトソースでもいかがですか。個人差にもよりますが。もしよろしければ。 お久しぶりです。 最近うんめぇ〜と思ってるヨーグルトソースがあるので、書いていこうと思います。 ヨーグルトとハーブ類をもりもり使うので、そういうのが食べられない方にはうんめぇソースではないです。ごめんなさい…。もしよろしければお茶だけも…旦~ 【用意する…
Home » Tutorials » Basic Beginners’ Guide to Installing a jQuery Lightbox Line25 is reader supported. At no cost to you a commission from sponsors may be earned when a purchase is made via links on the site. Learn more Learn how to install a jQuery lightbox, by following this easy, step by step tutorial. Check it out and start learning! Have you always wanted to add those cool Javascript lightbox
chromeとsafariを対象とする場合 if(!jQuery.support.checkOn){ alert('あなたがお使いのブラウザはChromeもしくはSafariっぽいです'); } if文の条件式の中で!をつけたので、checkOnがfalseであればこの条件文に該当します。該当するのはwebkitだけなので、これでchormeとsafariのみに振り分けたコードを記述できます。なお、Android標準ブラウザ、iPhone / iPad標準ブラウザといったスマートフォンも同じChromeとSafariなので、この条件に合致します。 FirefoxとOperaを対象とする場合 if(jQuery.support.checkOn && jQuery.support.noCloneEvent){ alert('あなたがお使いのブラウザはFirefoxもしくはOperaっぽいです'
ようやくNode.jsをさわってみた。 インストール大変そうなイメージを勝手に持っていたけど、全然そんなことはなく $ wget http://nodejs.org/dist/node-v0.2.5.tar.gz $ tar zxvf node-v0.2.5.tar.gz $ cd node-v0.2.5 $ ./configure --prefix=$HOME/local $ make $ make installで普通に行けた。make testでなんかエラー出てた気もするけどキニシナイ あとはnpm。書いてある通り npm $ curl http://npmjs.org/install.sh | shでおk。 試しに幾つかインストールしてみた。 Express - Node.js web application framework EJS - JavaScript Templates
2011年はサーバサイド JavaScript の年! サーバサイド JavaScript の本命は node.js! ということで割と普通のウェブアプリケーションを node.js で作るためのチュートリアルを書いてみました。WebSocket とか新しめの話題は結構見ますが、PHP とかで普通のウェブアプリ作ってる人向けのチュートリアルとかあんま見ないような気がしたので、って感じです。 チュートリアルの内容ですが、コード量が少なめで機能的にも分かりやすそうなモノということで、短縮 URL ウェブアプリケーションを作ってみることにしました。bit.ly とか t.co とか nico.ms みたいなアレです。短縮 URL のデータは MySQL に保存します。 結構長文になっちゃったので、先に目次置いときます。 node.js のインストール npm (Node Package Mana
スマートフォン対応サイトではよく見られるのが、Ajaxによるコンテンツの切り替えです。ページ遷移によるユーザーのストレスを軽減を図る手法として利用されているものと思われます。この手法でたまに見られるのがモーダルウィンドウ(通称Lightbox。モーダルボックスとも呼ばれる)です。 今回はスマートフォン(主にiPhone Safari)に最適化したモーダルウィンドウを表示するjQueryプラグインを作りました。デモや使い方など、詳しくは以下の解説ページにて。 "smartModalWindow" jQuery plugin - 解説ページ スマートフォン端末ではiPhone 3GS Safari、iPhone 4 Safariで動作確認しています。PCのブラウザでも動作しますが、WebKit系以外はアニメーションしません。
あけましておめでとうございます。 今年もバンバンやっていきまっせ! というわけで、本年一発目はhashchangeイベントについて。 hashchageイベントとは、URLに#~とつく例のあれが変更された時に発生するイベント。 kinect.jp - Kinect for Xbox 360などでも使われてますね。 hashchange対応ブラウザへの実装 IE8、FF3.6以上、Chrome8、Safari5、Opera10、など主流ブラウザの最新版なら対応している。 サンプルデモ 注意点。 a要素を使ってハッシュを付加する場合、 preventDefaultやreturn falseなどをすると、ハッシュが付かなくなる。 また、jQuery1.4.4現在、hashchange()メソッドは未サポートなので、 使用する際はbind()メソッドを使ってwindowのhashchang
はじめに 第2回の今回からは本格的にjsdo.it -Share JavaScript,HTML5 and CSS-(以下、jsdo.it)を使ってJavaScriptを勉強していきたいと思います。毎回お題編と回答編に分けてやる予定で、お題編では基礎知識を解説してそれに関連した課題を出し、それをjsdo.itでつくってもらい、回答編で解説するというかたちで連載を進めていきます。 今回はjQueryの基本のお題編ということで、jQueryの基礎を解説したあと最後にお題がありますのでそちらを次回までにやっておくとより理解が深まるはずです。 jQueryってなに? そもそもjQueryとはなんでしょう。まったく知らないという人もいれば名前くらいは聞いたことがある、いつもJavaScriptを書くときは使っている、さまざまだと思います。今回は初回なので念のためjQueryとな何なのかというところ
こんにちは。前回に引き続き、JavaScriptでUIを実装する方法を紹介していきます。 要素のドラッグ ウェブアプリでよく使われるインタフェースのひとつ、ドラッグを実装してみます。ドラッグを使用するケースは幾つかありますが、今回は投稿用フォームをドラッグで移動できるようにするという使い方を想定してみます。 投稿フォームで入力する際、そのページのコンテンツを見ながら入力したいということはよくあります。フォームを好きな位置に移動できればそれが実現できます。 ドラッグの基本HTML <div class="js-drag" id="js-drag-1"> <form class="js-drag-form" onsubmit="return false;"> <textarea></textarea> <input class="submit" type="submit" value="送信"
30 best practices to boost your web application performance - Web User Interface Architect JavaScriptコーディング等を書く上でのパフォーマンス確認事項30。 自分へのインプット&メモがてらにちょっとまとめてみます。 JavaScript DOMの操作は可能な限りやめる eval, new Function() は遅いので可能な限り使わない withステートメントを使わない(使った事ないですが) for-in 文ではなく for 文を使う。 ループの中で try-catch ではなく、try-catchの中にループを置く グローバル変数をなるべく使わない aaa+='AAA';aaa+='BBB'; の方が aaa+='AAA'+'BBB';より速い 複数の文字列連結には、Array で文字列
XRegExp: JavaScript regex library ブラウザ標準の正規表現を拡張し、差異もなくしてくれるJavaScriptライブラリ「XRegExp」。 各種ブラウザで共通に使えるよう設計されており、追加機能やプラグインも実装できるみたい。 たとえば、次のように、分かりやすい正規表現でURLを分割したりすることができる模様。 APIのドキュメントはこちら。 標準の正規表現では満足いかないという方は参考にしてみるとよいかも。
先日、「JavaScriptのオブジェクトについて考察してみた - あと味」を書いてから、chikuraさんからコメントいただいたり、id:dankogaiさんから「404 Blog Not Found:javascript - にはクラスはない」という記事で言及いただいたり、JavaScript: The Good Partsを読み返したりした結果、newについて調べたいという衝動にかられましたので、その調べた結果を書いてみたいと思います。 newを調べようと思ったキッカケを整理 まずは、そのキッカケから整理します。 chikuraさんのコメントより 押さえるべきポイントは、new演算子の際に何が行われるか?だと思うので、こちらのページもぜひ読んでみてください。 JavaScript の new 演算子の意味: Days on the Moon http://nanto.asablo.j
jQuery で多数の要素を生成して別の要素に追加する場合、どんな書き方が速いのかなーと思って試してみました。 今回は、3,000回ループを回して既存の要素に追加していくというのを、パッと思いつく感じの6パターンで試してみました。 サンプル(※モダンブラウザ以外では実行しない方が良いです!) さて、HTMLのソースは次の通り単純です。 <ul id="result"> <li>このリストに結果を追記する</li> </ul> また、次の1文は最初に定義しておきます。 var $result = $("#result"), n = 3000; 1 : 毎回要素を生成して append() していく for (var i = -1; ++i < n;) { var $li = $("<li></li>").text(i).attr("id","id_" + i).addClass("class
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く