タグ

javascriptに関するkitsのブックマーク (545)

  • script, styleタグ内のコードの書き方 - os0x.blog

    # 最初にちょっと余談を。Chromium-Extensions-JapanのほうにChrome6 Betaの変更点を書きました。どうぞよろしく。 さて、scriptタグ内をHTMLコメントで括ってからJavaScript書くのって意味あるの? - Togetterの件に関して、関連ネタをいくつか書いておきます。。 まず前提として、scriptタグの中に直にコードを書くというのはできる限り避けたほうが良いです。とはいえ、ちょっとしたコードをいちいち外部ファイルにしていると読み込みのコストも馬鹿にならないので、インラインで書く事もよくあります。なので、以下は主に数行程度のコードをインラインに書く場合の話です。 scriptタグの中に直にコードを書くときはscriptタグに非対応なブラウザのために<!--で始め*1 // -->で閉じるというノウハウは今でも結構使われているみたいです。 しかし

  • 間違ったJavaScriptとFlashの使い分け

    なると @narutohyper どっちが良いではなく、状況で使い分ける RT @Quarter4Nori: RT @TopsyRT: FlashとjQuery どちらで実装するか決める際の重要なファクター http://bit.ly/cFrBnd 2010-08-09 10:37:08 尾野(しっぽ) @tail_y 今coliss見てたら、「HTML5とFlashの議論が活発で、Flash vs JavaScriptの話題は少し失われていました」って文章があったんだけど、ここで言うHTML5はJS含んでるじゃないの?JSを除いたHTML5とFlashの議論なんかあるの? 2010-08-10 01:45:38

    間違ったJavaScriptとFlashの使い分け
  • インターン講義4日目「JavaScript で学ぶ イベントドリブン」 - Hatena Developer Blog

    今日行なわれたインターン4日目の講義「JavaScript で学ぶ イベントドリブン」by id:cho45の資料と録画を公開します。今回は、JavaScriptの概要からDOM、イベントドリブンまでを2時間で網羅した密度の高い講義となっています。今回の放送は安定していましたので、音質・画質とも良好にできました。 明日もAM10:30より、JavaScript界の貴公子id:nanto_viによる「ユーザーインターフェース, HTML5」を放送しますので、是非ご覧ください。 自己紹介 id:cho45 - vimmer うごメモチームのエンジニア (7月後半〜) 少し前までブックマークチーム Perl, JS (Scala, Ruby, etc...) サーバサイド・クライアントサイドUI・スマートフォンなど Java や AS も場合によっては書いています 特技 1行コードを書くごとにハ

    インターン講義4日目「JavaScript で学ぶ イベントドリブン」 - Hatena Developer Blog
    kits
    kits 2010/08/06
    var宣言は関数の先頭で宣言したのと等価になる、というのは初めて知ることができた。
  • ECMAの読み方 - os0x.blog

    # なんかTwitter記法がうまく動いてないんだけど、なにが悪いのかわからない… この前の#orejsや今日の#hatenatechでも話題になっていたECMAの読みについて。*1 @Constellation: ECMAってすぐイーシーエムエーって読んでしまう... #orejs 2010-07-24 20:03:06 via Tween http://twitter.com/Constellation/status/19413623287 @rwest2112: いーしーえむえーっていうのか。。。ずっと絵熊って読んでた。「絵熊では…(キリッ)」なんて。orz (#hatenatech live at URL ) 2010-08-05 11:50:18 via Ustream.TV http://twitter.com/rwest2112/status/20355293935 どっちや

    ECMAの読み方 - os0x.blog
    kits
    kits 2010/08/05
    昔は頭字語(European Computer Manufacturers Association)。今は名称(Ecma International)。
  • Togetter - 「scriptタグ内をHTMLコメントで括ってからJavaScript書くのって意味あるの?」

    @monjudoh scriptタグ内を<!-- // -->で括ってからJavaScript書くのってどの辺のブラウザ向けにやってるんだっけ? #javascript 2010-07-28 11:31:45

    Togetter - 「scriptタグ内をHTMLコメントで括ってからJavaScript書くのって意味あるの?」
    kits
    kits 2010/08/04
    はてブエントリページのタイトルに「HTMLコメント」を追加。
  • Shibuya.js beyond HTML5 の発表資料 (Kanasansoft Web Lab.)

    Shibuya.js beyond HTML5 で飛び入りで話してきた。以前にLTをやった関係で、スピーカー募集の通知があり、開催日前後が忙しくなりそうだったこと等々、諸事情により参加できない可能性があったため、発表はほとんど諦めていた。ところが、飛び入り発表もOKとの事だったので、当日はできるだけ早く会場入りし、2時間で資料を作って発表してきた。諸事情により一部のスライドを削除している。

  • Román Cortés » A Tribute to The Beatles

    Último proyecto completado: Chimeneas Rofer & Rodi Proyecto actual en curso: Arteforo I’ve done this CSS/Javascript experiment as a tribute to The Beatles for its 50th anniversary. Click on the lyrics! It works on mostly all the browsers from IE5.5 and up. The best results will be shown if the system has Arial font installed on it and font-antialiasing is enabled. It will look good enough with Hel

    kits
    kits 2010/07/30
    Yesterdayはポールの曲なので何だか腑に落ちない。
  • Hatena::Engineering始めます - Hatena Developer Blog

    id:stanakaこと田中慎司です。 はてなでは、これまではてな技術勉強会日記にて、はてな社内の勉強会の資料や動画を公開してたのですが、ほぼ3年近く更新が止まってしまっていました。 今日から、この日記をリニューアルして「Hatena::Engineering」として、技術的な情報発信を再開していこうと思います。Twitterの公式アカウントは@hatenatechですので、是非フォローをお願いします。 さて、はてなでは、来週からインターンが始まります。昨年の内容は「大規模サービス技術入門」という書籍にもなっているのですが、今年は約半分の講義をUstreamで公開しようと思います。 ラインナップ(予定)は以下の通りとなっています。具体的なチャンネルなどは、確定次第、お知らせします。平日の日中になりますので、なかなかリアルタイムで見るのが難しいかもしれませんが、可能な方はリアルタイムで、そう

    Hatena::Engineering始めます - Hatena Developer Blog
    kits
    kits 2010/07/29
    8/5にcho45さん、8/6にnanto_viさんの講義。
  • window.onhashchangeが便利すぎる - TYAGE EMOTION

    昨日の記事 http://d.hatena.ne.jp/da-yoshi/20100722/1279811055 に対してコメントいただきました。 http://d.hatena.ne.jp/da-yoshi/20100722/1279811055#c1279857804 window.onhashchangeというそのものズバリのイベントハンドラがあるのですね。 IE8については、HTML5だけではなく、XHTML1.0やHTML4.01の標準モードでも動作しました。Firefox3.6でもChrome5でもSafariでも動作しますね。これなら十分採用できます。ちょっと簡単なHTML書いてみました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loo

    window.onhashchangeが便利すぎる - TYAGE EMOTION
    kits
    kits 2010/07/28
    hash とは何だろうと思ったがURIのフラグメント識別子のことか。
  • HTML5 の placeholder 属性を jQuery でクロスブラウザに

    2011-09-23更新: 一部を修正して Gist に置きました。 フォームの入力フィールドにあらかじめテキストを表示させておく「プレースホルダ」。ブラウザの検索バーなんかに見られるような、フィールドが空のときは薄く文字が表示されていて、フォーカスすると消えるあれです。このプレースホルダの機能、HTML5 では input 要素や textarea 要素の placeholder 属性で簡単に実現できます。 <label>お名前 <input type="text" name="fn" placeholder="山田 太郎"></label> しかしながら、この placeholder 属性をサポートしているのは今のところ Safari と Chrome のみ。そのほかのブラウザでは無視されてしまいます。そこで、この placeholder 属性をクロスブラウザで扱えるようにする jQu

    HTML5 の placeholder 属性を jQuery でクロスブラウザに
    kits
    kits 2010/07/18
    eachループの中で function(){ ... } しているところなどはもっと効率化できそう。 → と思ったが、元の色を保存するために要素の数だけクロージャを作る必要があった。
  • Dance Party

    Reset

    kits
    kits 2010/07/06
    am6.jp, ow.ly 等を避けるgreasemonkeyスクリプト。
  • 竹取 JS

    画面をダブルクリックで縦書きと横書きを切り替えることができます。要素を指定して縦書きにしている場合は、次回アクセス時に同じ表示が引き継がれます。 どんなサイトでも縦書きにするブックマークレット。 ↓右クリックで「お気に入り」に保存するか、リンクをドラッグしてブックマークバーにドロップします。 「縦書きにする・iPhone 用リンク」 「縦書き可能にする・iPhone 用リンク」 「段組み縦書き可能にする・iPhone 用リンク」 iPhone に登録するには? とりあえずこのページを共有ボタンからブックマーク。 iPhone 用リンク を長押ししてコピー。 ブックマークを開いて、追加したブックマークを「編集」。 名前を「縦書き可能にする」などに変更し、URL 欄に上記コードをペースト。 最初の「http://」を削除。 注意! やや動作が重いです! うまく変換できなかったときは、画面をダブ

  • 要素が document につながっているかを高速に調べる方法 - IT戦記

    とある要素が document につながっているかどうかを調べたい! とりあえず、ほとんどすべてのブラウザで出来る方法としては、 parentNode で確認することができますね。 function isElementInDocument(node) { do { if (node === document) { return true; } } while (node = node.parentNode) return false; } でも 前の例だとちょっと遅いので contains や、 compareDocumentPosition を使うといいです! コードにすると以下のような感じ function isElementInDocument(node) { if (document === node) { return true } else if (document.compa

    要素が document につながっているかを高速に調べる方法 - IT戦記
    kits
    kits 2010/06/24
    documentの子孫として存在するかどうかの判定と思います(document.createXXX しただけのnodeはfalse)。 > id:teramako
  • 第8回 実践DOMスクリプティング#1:HTMLとテキストの操作 | gihyo.jp

    こんにちは、太田です。前々回、前回でDOMの基礎を簡単に解説しました。今回からは、DOMを使った実用的なスクリプトを解説していきます。特に今回はHTMLの操作、テキストの操作にフォーカスを当てていくつかのサンプルコードを解説していきます。 HTML操作の基 JavaScriptによってHTMLを書き出したり、一部を書き換えたり、削除したりといった方法は実は様々な方法が用意されています。目的に合わせて適切な方法を選ばないと非効率だったり、最悪クロスサイトスクリプティングなどの問題を抱えてしまう危険もあります。 document.writeと同期読み込み JavaScriptHTMLを書き出すというと、最初に学ぶのはこのdocument.writeかもしれません。いわゆるprint文のようにシンプルなAPIなので、入門書の最初のサンプルなどで扱われることも多いようです。しかし、docume

    第8回 実践DOMスクリプティング#1:HTMLとテキストの操作 | gihyo.jp
  • 第6回 JavaScriptとHTMLとDOMの基本#1 | gihyo.jp

    こんにちは、太田です。前々回、前回とJavaScriptの基礎的な部分を解説しました。今回はJavaScriptからみたHTMLを中心に、DOMについても少しずつ解説しています。 JavaScriptHTML FirefoxのアドオンやサーバーサイドJavaScriptなどの例外をのぞいて、多くのJavaScriptHTML上で実行されるので、HTMLは土台となる重要な要素です。そこでHTMLの基礎的な部分からHTMLJavaScriptの関係を解説します。 DOCTYPEとレンダリングモード HTMLといえば最初に書くのはDOCTYPEです。現在使われているDOCTYPEはHTML4.01、XHTML1.0、XHTML1.1といくつかの種類があり、さらにその中でTransitionalやStrictなどの違いや、XHTMLではXML宣言の有無(来は必須ですが)などバリエーションが

    第6回 JavaScriptとHTMLとDOMの基本#1 | gihyo.jp
    kits
    kits 2010/05/25
    「script要素を最後に記述する方法は簡単でわかりやすく,どのブラウザでも動作するので,HTMLを編集できるならケースならこの方法がおすすめです」なるほど。
  • Another HTML-lintのブックマークレット | 沖縄のWebデザイナーChopstickBrunch

    コーダーは毎日使っていると言っても過言ではない、説明不要のAnother HTML-lint gatewayですが、 いちいちサイトを開いてURLをコピー&ペーストするのが面倒じゃないですか? 既出かもしれませんが、便利なブックマークレットがあります。 コチラ↓ javascript:var%20f%20=%20document.createElement('form');var%20o=new%20Object;o[0]=document.createElement('input');o[0].setAttribute('type','text');o[0].setAttribute('name','Stat');o[0].setAttribute('value','on');o[1]=document.createElement('input');o[1].setAttribute('

    kits
    kits 2010/05/25
    f.submit(); の前あたりに f.target='_blank'; を入れとくと別窓で開けるよ。
  • ブラウザにローカルファイルを Drag & Drop でフォトライフにアップロードする Greasemonkey Script - 2nd life (移転しました)

    HTML5 File API つかうとローカルファイルをブラウザに Drag したファイルをハンドリングして binary やら data スキームとして扱うことができ、Firefox 3.6 や Chrome 5 ですでに使えるというのを今さらながら知った*1ので、はてなフォトライフにローカルファイルをブラウザにドラッグするだけでアップロードできる UserScript を作ってみまんた。 http://gist.github.com/raw/406281/drag_drop_fotouploader.user.js WinXP + Firefox 3.6.3 で確認してますが OSXChrome5 などの環境で動くかは試してないので解りません。動作デモは以下の swf 動画を見てください。 http://rails2u.com/misc/fotolife_drag/ なんかすごい

    ブラウザにローカルファイルを Drag & Drop でフォトライフにアップロードする Greasemonkey Script - 2nd life (移転しました)
  • ブックマークレットサービス・Hatena::Let を作りました - 2nd life (移転しました)

    ブックマークレットをかんたんに作成・公開できるラボサービス、その名も Hatena::Let を作りました。 http://let.hatelabo.jp/ 未だにブックマークレットを作るときには、アドレスバーに javascritp:... を打ち込んで実行したり、 Firebug で実行して試しつつも外部の bookmarklet 化サービスを使って文字列削ったり、IE対策のため500ちょい文字を超えると gist にファイルを置きつつもおきまりの var script = document.createElement('scrit');... で JS のローダー書いたり、とやりたいことは同じなのにめんどくさい手順を毎回行っていたました。 ここらへんの手順を毎回繰り返すことなくさくっと作って公開したい!と思い id:cho45 と半年ぐらい前の開発合宿*1で作って眠らせていたのを、ち

    ブックマークレットサービス・Hatena::Let を作りました - 2nd life (移転しました)
  • 第1回 JSDeferredによる簡単非同期処理 | gihyo.jp

    どうもはじめまして、株式会社はてなのid:cho45です。これから数回に渡り、拙作のJavaScriptのライブラリであるJSDeferredの紹介と、それに関係するJavaScriptにおける非同期の技術に関して解説させていただきます。 JavaSciptにおける非同期処理 非同期処理とは まずは確認程度に、非同期処理がどういうものかを解説しておきます。先に乱暴にまとめてしまうと、以下の事柄が大切なところです。 非同期とは「あとで」という意味 同期処理はコードの見た目順に実行される/非同期ではそうならない JavaScript の非同期処理は絶対に同期処理にすることができない JavaScriptにおける非同期処理をいくつか例に出すと、以下のようなものが挙げられます。 リスト1 // XMLHttpRequest の例 var req = new XMLHttpRequest(); re

    第1回 JSDeferredによる簡単非同期処理 | gihyo.jp
  • 細かいJavaScriptの仕様や習慣やテク集 - 三等兵

    気づいたことやミスしたことなどメモしていたので確認作業。細かい仕様だったり暗黙のルールだったり、テクニックだったり。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の仕様や習慣やテク集 - 三等兵