一つのファイルでサーバーとHTMLファイルとコードを共有するやつ - 素人がプログラミングを勉強していたブログ
ちょっと説明がし難いがindex.htmlというファイルがあったとして、ファイルプロトコル経由で file://path/index.html などのように直接ブラウザで起動すると、プロトコルの関係でファイルが読み込めなかったり、エラーになったりすることがよくある。サーバーをたててlocalhostなどから読み込めばいいのだが、微妙にセットアップが面倒臭い。下記コードをindex.htmlとして保存すると node index.html とするだけでブラウザが立ち上がり、index.html自身をルートとしてそのディレクトリ以下のファイルを配信する簡易サーバーが立ち上がる。具体的には、 http://localhost:port/index.html のような形でアクセスできるようになる。コマンドを実行したディレクトリの絶対パスをもとにポートを自動生成しているので、すでにサーバーが起動済み
続・IEでのa要素の各属性について - monjudoh’s diary
前置き IEでのa要素の各属性について - 文殊堂の続き。 IE 6,7 で相対URL -> 絶対 URL の変換 - #生存戦略 、それは - subtechを参考にして、 cloneNodeハックとlink.hrefによるURLの絶対URL化を組み合わせてみました。 http://jsdo.it/monjudoh/o2Mk http://jsdo.it/monjudoh/9aHd link.hrefによるURLの絶対URL化はIE6,7では使えないので割愛。 検証 IE6 なぜかhostnameがiframeではなく外側のものになってしまっている。 少なくとも短いURLについてはouterHTMLハックを使った場合に各属性の値をちゃんと取れていたので、 そっちを使ったほうが良さそう。 a要素の各属性(cloneNodeハック) ---url.length:11 href:[htt
IE で a 要素を使って相対 URL からスキームを得る: Days on the Moon
この「いくつかのブラウザ」とは IE のことを指していると思われますが、href プロパティに絶対 URL を設定しなおすことで、URL のスキーム部分を取得できるようになります。 // http://www.example.org/ 上で実行しているものとする。 var elm = document.createElement('a'); elm.href = '/foo?bar#baz'; // IE 6 / 7 で絶対 URL を設定。 // elm.href = elm.cloneNode(false).href でもよい。 elm.href = elm.getAttribute('href', 4); // IE (少なくとも 8 ～ 11) で絶対 URL を設定。 elm.href += ''; elm.protocol // => "http:" elm.hostname
Friendly iFrame とサードパーティスクリプトのロード
Friendly iFrame という、サードパーティスクリプトの呼び出し方法について調べた。手法自体はかなり古いもので、後述する iAB のドキュメントは 2008 年に出ているものだ。Google の DFP などでは現在でも使われている。 Friendly iFrame (FiF) とは サードパーティのスクリプト (広告タグや SNS のシェアボタン、ブログパーツなど) をページに埋め込む手法のひとつ。より狭義には、iAB が出す Best Practices for Rich Media Ads in Asynchronous Ad Environments (pdf) で説明されている、(主に) リッチアドのアドタグを設計・設置する際のベストプラクティス。 利点と他手法との比較 Friendly iFrame を他のサードパーティスクリプトの埋め込み手法と比較すると、ページのレ
Hiding JSON-formatted data in the DOM with CSP enabled · Mathias Bynens
If Content Security Policy is enabled for protection against cross-site scripting attacks (i.e. the unsafe-inline option is not set), the use of inline <script>s is not allowed. In that case, how can we pass server-generated data to the front-end without negatively affecting load time and run-time performance? Introduction A common way to pass server-generated JSON-formatted data to the client so
Front End Development Guidelinesの読書メモ - prog*sig
■簡単な内容紹介 Accessibility/HTML/CSS/JavaScript/jQuery/について基本的な事や知っておくべき、意識しておくべき事などについて書かれたドキュメントです。 あちこち触れている感じなので、一つ一つは余り濃くない内容が多めです。 ■Accessibility What's Up, DOCTYPE? DOCTYPEがないのは論外として、今までは以下のようなスニペットを使っていた人もいるだろう。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> HTML5ではもっとスリムにしたスニペットを利用できます。 このスニペットはモダンなブラウザはサポートしていますし、IE6とI
DOM ECMAScripting
DOM 仕様書を読む前のガイドとして、DOM のおおまかな内容と ECMAScript（JavaScript）によるごく簡単な例文を提供します。DOM Level 1 から Level 3 まで。DOM Core 入門 (1)DOM Core 入門 (2)DOM Events 入門DOM Traversal 入門DOM Range 入門DOM Load and Save 入門DOM Validation 入門DOM XPath 入門DOM Views、DOM Style Sheets、DOM CSS 関連。CSSOM 入門 (1)CSSOM 入門 (2)CSSOM View 入門DOM HTML 関連。DOM HTML 入門 (1)DOM HTML 入門 (2)私的翻訳。DOM FAQ 日本語訳DOM Requirements 日本語訳（途中）DOM Level 3 Load and Sa
script, styleタグ内のコードの書き方 - os0x.blog
# 最初にちょっと余談を。Chromium-Extensions-JapanのほうにChrome6 Betaの変更点を書きました。どうぞよろしく。 さて、scriptタグ内をHTMLコメントで括ってからJavaScript書くのって意味あるの? - Togetterの件に関して、関連ネタをいくつか書いておきます。。 まず前提として、scriptタグの中に直にコードを書くというのはできる限り避けたほうが良いです。とはいえ、ちょっとしたコードをいちいち外部ファイルにしていると読み込みのコストも馬鹿にならないので、インラインで書く事もよくあります。なので、以下は主に数行程度のコードをインラインに書く場合の話です。 scriptタグの中に直にコードを書くときはscriptタグに非対応なブラウザのために<！--で始め*1 // -->で閉じるというノウハウは今でも結構使われているみたいです。 しかし
第8回 実践DOMスクリプティング#1：HTMLとテキストの操作 | gihyo.jp
こんにちは、太田です。前々回、前回でDOMの基礎を簡単に解説しました。今回からは、DOMを使った実用的なスクリプトを解説していきます。特に今回はHTMLの操作、テキストの操作にフォーカスを当てていくつかのサンプルコードを解説していきます。 HTML操作の基本 JavaScriptによってHTMLを書き出したり、一部を書き換えたり、削除したりといった方法は実は様々な方法が用意されています。目的に合わせて適切な方法を選ばないと非効率だったり、最悪クロスサイトスクリプティングなどの問題を抱えてしまう危険もあります。 document.writeと同期読み込み JavaScriptでHTMLを書き出すというと、最初に学ぶのはこのdocument.writeかもしれません。いわゆるprint文のようにシンプルなAPIなので、入門書の最初のサンプルなどで扱われることも多いようです。しかし、docume
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
Browser's implied globals
Like it's not bad enough that JavaScript has implied globals (forget var and you create a global), but the browsers have decided it's a good idea to add more pollution to the global namespace. This has been a source of frustration before with IE, it's really hard to understand the logic behind it, but it's also happening in other browsers. Consider this:
TAKESAKO @ Yet another Cybozu Labs: JavaScriptでフォント名一覧を取得する3つの方法
先月・今月と新しいメンバーが加わったサイボウズ・ラボですが、いま社内でfont-familyが密かなブームです。 ということで、ブラウザで使用できるフォント名一覧をJavaScriptで取得する方法について調べてみました。 ■ 1. IE の Dialog Helper Object を利用してフォント名一覧を取得する IE の Dialog Helper Object を利用して フォント名の一覧を取得する方法がよく知られています。 まず、HTMLの中に以下のOBJECTタグを定義して、 <OBJECT id="dlgHelper" CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px" height="0px"> </OBJECT> JavaScriptから以下のコードを実行すると、現在の環境で利用できるフォント
文字列を作る::JavaScriptでのおはなし - hoshikuzu | star_dust の書斎
出題編 alert(<>ABC</>); //firefox alert(/ABC/.source); alert(String.fromCharCode(65,66,67)); alert(String.fromCharCode(0x41,0x42,0x43)); CSRFのMLで登場した、（シングルやダブル）クォートを使わずに文字列を作る試み。このほか、documentオブジェクト,locationオブジェクトあたりから既にに存在している文字列をひっぱってきて加工するあたりもネライめ。 上記の解とは別の解があることに気がついたので、日記に書いてみます。 IE6とFirefoxとOperaとで共通の書き方でできました。 var x = "またきてね"; $userdata //ここでxの中身を書き換えます。 alert(x); 上記のように、$userdataがあって自由に書けるとき、「
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
<link>: The External Resource Link element - HTML: HyperText Markup Language | MDN
https://codylindley.com/dom-desktop-tests/
DOM Reference Manual
JavaScript Syntax Highlighter - Dottoro Services
google-code-prettify でソースコードを色分け表示 - WebOS Goodies