What is is? This is a 100% JavaScripted app implemented in one day. Please browse this page with latest Chrome, Safari, or Firefox. Please contact to fukatsu@gmail.com if you have any question.
What is is? This is a 100% JavaScripted app implemented in one day. Please browse this page with latest Chrome, Safari, or Firefox. Please contact to fukatsu@gmail.com if you have any question.
こんにちは、太田です。前回は総集編的な内容でしたが、今回は一転して基礎編に戻ります。JavaScriptにおける継承の方法とその仕組みについて、今回から数回に分けて基礎的な部分からきっちり押さえていきたいと思います。 JavaScriptとオブジェクト指向 JavaScriptはプロトタイプベースのオブジェクト指向プログラミング言語と言われています。new演算子を用いることで、関数がコンストラクタとして働き、そのコンストラクタが持つプロトタイプオブジェクトのメソッド(プロパティ)を継承した新しいオブジェクトを作ることができます。 なお、オブジェクト指向という概念については今回は触れません。オブジェクト指向という概念を掴みきれていない、自信がないという方は、JavaScriptのprototypeをしっかりと理解してから改めてその概念を学んでみるとすんなりと理解できるかもしれません。さらに、
「Google Scribe」は、Googleサジェスト機能をどこでも利用できるサービスです。 もちろん、Google Scribe上でも動きますが、用意されているブックマークレットが非常に便利。これを利用すれば、どんな場所でもGoogle Scribeが使えます。 以下に使ってみた様子を載せておきます。 Google Scribeにアクセスして、文字を入力してみましょう。現在は、英語しか対応していません。 このように次の候補や、入力している単語を自動的に補完してくれます。かなり高速で、もたつかないところは流石ですね。 補完してくれる内容は、英単語だけでなく、HTMLなどのコードも対応しています。また、Googleアカウントにログインしている状態だと、ユーザ履歴にもとづいて候補がでてくるようです。 Google Scribeの下部にブックマークレットがあります。こちらをブックマークに保存し
jQuery Mobile is no longer supported To read more about the status of the jQuery Mobile project, see the announcement blog post. A Touch-Optimized Web Framework jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices. Seriously cross-platform with HTML5 jQuery Mobile framework takes the "w
Twitterでこっそりと募集して、オレ標準JavaScript勉強会というイベントを開催しました。 id:edvakfさんが来日されるということで、「会いましょう→何かやりましょう→勉強会とかどうでしょう」というTwitter上の軽いノリで企画され、みんなで短いネタを披露し合う一品持ち寄りの少人数勉強会をやってみよう、ということになりました。で、そのままTwitter上で参加者を呼びかけてみたところ、半日もたたずに15名集まって、しかもそうそうたる顔ぶれに! 当日 色々と反省があったので、少し書き出しておきます。 まず、会場*1には有線LANしかないので、自前のルータで無線LANをやろうとしたんですが、設定がなかなかうまくいかず、だいぶ手間取ってしまいました。やはり、安物のLANは駄目ですね…。大人数で繋ぐと安定しないし、有線をいっぱい用意したほうが良かったです。 で、Ustreamに挑
こんにちは、太田です。前々回と前回はHTMLの操作について解説しました。今回は、CSSの操作を中心に解説していきます。 CSSとJavaScript JavaScriptからCSSを扱うとは、JavaScriptから要素に適用されているスタイルを変更して見た目を変化させる、ということを意味します。その具体的な方法にはいくつかの種類があります。 styleプロパティの操作 class名の操作 CSS自体の操作 では、styleプロパティの操作から順番に見ていきます。 styleプロパティの操作 要素のstyleプロパティを直接操作する方法は、その要素だけに影響するので1回あたりの処理コストは低く済むというメリットはあります。しかし、複数のプロパティの操作に加え、多くの要素のスタイルを変更する場合には、スタイルを変更するたびに描画への影響の計算が行われる(この計算をreflowと呼びます)ので
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 これ系はいくつかありますので 1つの選択肢として、という感じ ですね。css3のtransformや box-shadowをクロスブラウザ 対応させるjsライブラリですが、 特徴はプロパティを1行で統一 させる事が出来る点です。 css3のtransform(変形)、box-shadow(影)、gradient(グラデーション)ですが、gradientは不完全でした。しかしながらこのスクリプトを応用してアニメーションさせることも出来るようです。 各ブラウザで実装したものを比較していました。IEに限らず、主要ブラウザ全てをサポートしています。また、何より独自のプロパティを使うのですが、これが1行で済むので場合によってはなかなか楽では無いかと。 左がChrome、右がI
jQueryでsectionとかarticleとかをappendしたときにstyleが反映されなかったという話しを聞いたので調べた&検証してみたメモ。 デモつくった 調べてみたところ、定義されていない要素をinnerHTMLしてappendChildすると、以下の例の場合IE8以下では開始タグ、テキストノード、終了タグの3つの要素として追加されるとのこと。(html5shivは読み込んでます) var div = document.createElement('div'); div.innerHTML = '<section>section</section>'; document.getElementById('box').appendChild(div); 以下のようにcreateElementすればいける。 var div = document.createElement('div'
大分市大石町4丁目1組の2 / 097-543-1100 月・火・金: 8:30~11:45 / 13:30~16:45 水: 8:30~11:45 / 13:30~14:45 木・土: 8:30~11:45 / 午後休診 休診日: 日曜・祭日・木曜午後・土曜午後
こんにちは。Yahoo!検索の高林です。先日、書籍『続・ハイパフォーマンスWebサイト』(オライリー刊)に寄稿させていただいた関係でトークイベントに参加してきました。 お忙しいところ、たくさんの方々に出席していただき、ありがとうございます。 今回のイベントでは、「Yahoo!検索のパフォーマンス向上策全て見せます!」というテーマでYahoo!検索で実際に行っているTipsの紹介と現在、Yahoo!検索で検討しているシステム構成などを発表しました。 そのときの発表内容は、以下のリンクから確認できますのでご興味のある方はご覧ください。 『続・ハイパフォーマンスWebサイト』出版記念トークイベントのビデオを公開 (O'Reilly Japan) トークセッションでは来場者の方々にたくさんの質問をいただきました。今回はそのなかからいくつかピックアップしてご紹介したいと思います。 ――Q: Yaho
IE における cloneNode の困った挙動について調べてました。 cloneNodeの仕様 IEでオレオレ属性を追加しcloneNodeすると、参照が作成されてしまいます。 <div id="AAA">NodeA</div> var AAA = document.getElementById("AAA"); AAA.oreoreAttr = { key: 1 }; var BBB = AAA.cloneNode(); // BBB を作成 AAA.oreoreAttr.key = 2; // AAA に 2 を設定すると… alert(BBB.oreoreAttr.key); // BBB も 2 になってしまう このような挙動が問題になるのは、以下のように、不可視な属性を設定していた場合に、cloneNodeで参照が作成されてしまい、あっちを変えるとこっちも変わってしまうケースです
気づいたことやミスしたことなどメモしていたので確認作業。細かい仕様だったり暗黙のルールだったり、テクニックだったり。JSに慣れていたら当たり前なことばかりかもしらん。 追記のところはid:os0xさんより。ありがとうございます! undefined var a; alert(a) // undefined 宣言だけだとundefined。undefinedというのは、宣言している変数に値が入っていませんよ、ということ。 そしてオブジェクトには無いプロパティとか参照すると出てくる。 var a = 100; alert(a.length); // undefined さらに引数も。 function func(val) { alert(val); } func() // undefined 引数はCallオブジェクトってのに格納される。このオブジェクトはローカルの変数が格納されるオブジェクト
はじめに 「マンガでわかるJavaScript」は、難しそうに思えるプログラムを、簡単そうに見えるマンガで解説するという初心者向けの入門講座です。 架空の高校生たちに教える形式で、プログラムの基礎から応用を、解説していきます。一通りのマンガを読めば、かなり実践的なところまで、プログラムを書けるようにしていきます。 (マンガは、左上から右下へと読みます) プログラムというと、けっこう大変そうに思えますが、この講座のテーマは「面倒くさいことを楽にする」です。面倒臭がりで、手抜き大好きの女子高生を主人公にして、楽しくプログラムを学んでいくことにします。 主な対象読者は「これからプログラムを学んでみたい人」「Webの世界に関わっていてJavaScriptを学んでみたい人」「昔JavaScriptを触っていたけど最新のトレンドが分からないので改めて学んでみたい人」などです。初心者だけでなく、Webデ
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 YoxView 画像をスタイリッシュに拡大表示するスライドショー。 Roundabout Shapes 複数のオブジェクトをさまざま
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 使いやすそうなjqueryプラグイン をまとめました。最低でもIE6,7でも 動いてくれる事を前提にしています。 他サイトでよく見かけるプラグインで、 個人的に実用性のあるプラグインと 思ったものをまとめます。 IE6、7でも動いてくれて、実用性のあるjQueryいろいろ。確認したブラウザはIE6,7とChromeです。他は大抵動くんじゃないかな(適当)。 デモで画像が透過されていないのもありますが、他のjsライブラリでIE6でも透過可能(DD_belatedPNG.jsとか)なのでそこは抜きにして動作する事を条件に挙げています。主観入ってるので参考程度に・・ Horizontal Subnav マウスオーバーでサブメニューがプルダウンするcssメニューです。サブメ
Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area. (And now, not just turntables, but many shapes!) In its simplest configuration, Roundabout works with ordered- and unordered-lists, however after some quick configuration, Roundabout can work with an set of nested elements. Requirements & Add-Ons Requires jQue
jQuery Fubar ? How To Create A Website Toolbar From Scratch And Add Widgets To It | AddyOsmani.com | Where Web Businesses Grow ページのフッターに常に便利リンクを固定で表示するためのjQueryプラグイン「jQuery Fubar」。 ページフッターに、ツールバーなどでソーシャルサイトへの投稿リンクなどが表示されていると便利なだけでなく、ソーシャルによって情報が広まる可能性も高めてくれます。 そういうツールバーを簡単に実装するためのjQueryプラグインがチュートリアルとともに公開されました。 実装された画面は次のようになっており、なかなかクールな上、ガクガク動かずに固定なので目障りにもなりません。 同じような物を実装したい場合があった際に覚えておくとすぐに実装でき
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く