home ホーム search 検索 -  login ログイン  | help ヘルプ

find 検索

71 - 80 / 1297    [|<]  [|<]  [<]  1  2  3  4  5  6  7  8  9  10   [>]  [>|][>|]
タイトル/名前 更新者 更新日
JavaScript/DOMイベント,非同期処理とイベントループとスレッドモデル msakamoto-sf 2017-01-07 22:16:46
技術/運用管理/Vagrant msakamoto-sf 2017-01-07 22:11:43
日記/2015/04/29/ブログ引っ越しのお知らせ msakamoto-sf 2015-04-29 14:36:30
JavaScript/YUI Compressor メモ msakamoto-sf 2015-03-08 19:45:10
技術/Socketプログラミング/Wiresharkの使い方メモ msakamoto-sf 2015-03-08 19:13:48
技術/Security/DOM based XSS メモ1(DOMinator) msakamoto-sf 2015-03-07 21:46:56
技術/HTTP/Fenix Web Server (静的ページ開発用ローカルWebサーバ) msakamoto-sf 2015-03-07 20:20:26
Java/WebSocket/勉強メモ1 msakamoto-sf 2015-03-07 20:14:03
Java/ExecutorService, Futureのサンプル msakamoto-sf 2015-03-03 01:05:08
Java/Unicodeの正規化(normalize)メモ1 msakamoto-sf 2015-03-01 22:24:44
ソート項目 / ソート順     1ページ 件ずつ表示

JavaScript/DOMイベント,非同期処理とイベントループとスレッドモデル  

所有者: msakamoto-sf    作成日: 2014-07-14 00:26:30
カテゴリ: HTML JavaScript 

勉強中のメモです。

HTML開発でAjaxなどJavaScriptを活用しようとすると、コールバックを使った非同期処理が活躍します。
ここで一つ疑問に思ったのが、「内部実装としてはイベント処理ってどうしてるんだろう?」という点です。
Win32API開発経験者としては、「やっぱりイベントメッセージのループとかあるのかなぁ・・・」とか、「Ajaxとか非同期I/Oが発生すると、そこだけ別スレッドで処理して、処理が終わるなどのイベントが発生したら、元スレッドのイベントキューにpostしたりしてやりとりしてんのかなぁ」とか。

ということで、調査中の参考リンク、簡単なデモコードなどの仮置き場です。

参考リンク

JavaScriptのDOMイベントの分かりやすい概説

JavaScriptからDOMノードに任意のイベントハンドラを設定し、イベントを発生させるサンプルの解説

JavaScriptのイベントループの内部実装の解説系

html5rocksより:

SpiderMonkeyのThreadSafetyメモ

Javaでコールバック地獄を解決するためのアプローチ:

Javaでのマルチスレッドプログラミング

サンプルコード1

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
  div {
    margin: 5px;
    padding: 5px;
    border: 1px solid red;
  }
  </style>
  <script>
 
  // [start : http://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript の丸パクリ]
  // Add an event listener
  document.addEventListener("name-of-event", function(e) {
      console.log(e.detail); // Prints "Example of an event"
  });
 
  // Create the event
  var event = new CustomEvent("name-of-event", { "detail": "Example of an event" });
 
  // Dispatch/Trigger/Fire the event
  document.dispatchEvent(event);
  // [end]
 
  // stopPropagation() のテスト用グローバルフラグ
  window.div2_stop_propagate = false;
  function stop_propagete() {
    window.div2_stop_propagate = true;
  }
 
  function test() {
    // DOM要素が構築された後でないとgetElementById()でDOMノードを取り出せないので、body#onloadイベントで呼び出す。
 
    var p1 = document.getElementById("p1");
    p1.addEventListener("click", function(e) {
      console.log("p1-click", e);
    });
    var div1 = document.getElementById("div1");
    div1.addEventListener("click", function(e) {
      console.log("div1-click", e);
    });
    var div2 = document.getElementById("div2");
    div2.addEventListener("click", function(e) {
      console.log("div2-click", e);
      if (window.div2_stop_propagate) {
        // テスト用グローバルフラグがセットされていれば、stopPropagation()を呼んでみる。
        e.stopPropagation();
      }
    });
    var div3 = document.getElementById("div3");
    div3.addEventListener("click", function(e) {
      console.log("div3-click", e);
    });
  }
  </script>
</head>
<body onload="test()">
  <div id="div1">
    div1
    <div id="div2">
      div2
      <div id="div3">
        div3
        <p id="p1">click</p>
      </div>
    </div>
  </div>
  <hr>
  <input type="button" value="stop at div2" onclick="stop_propagete()">
</body>
</html>

Firefox30での実行結果:

  • 最初に"Example of an event"と表示され、カスタムイベントのテストに成功している。
  • 2行目~5行目までは、"click"をクリックした際に、p1 -> div3 -> div2 -> div1 の順序で順次、イベントが伝播していることを表している。
  • 6行目~8行目は、"stop at div2" をクリックした後 "click" をクリックした様子。div2のところで "stopPropagation()" が呼ばれ、div1のイベントリスナーが動作していない。

Chrome34での実行結果:

  • Firefox30での実行結果と同じ。

IE11での実行結果:

  • 最初のカスタムイベントについては、IE用ではないAPIを使っていたためエラーとなってる。
  • p1の"click", "stop at div2" クリック後のイベント伝播の様子は、Firefox30と同じ。

整理メモ

  • ちょっと古めのサイトによると、JavaScriptはシングルスレッドで動作してるっぽい。
    • そのため、イベント処理はメッセージループでやってる。Win32APIなどのGUIアプリケーションと同じモデル。
  • ただ、HTML5になってDOM構築などのイベントも統合され、最低一つのイベントループ + 1つ以上のタスクキューで処理するようになった。
    • また、ブラウザによってはタスクの種類とブロッキングの特性、順序付などで変更あるらしく、古めの記事のイベントハンドラ処理のサンプルコードが、記事の解説通りの順序ではイベントが発火してないケースも見られた。


プレーンテキスト形式でダウンロード
現在のバージョン : 2
更新者: msakamoto-sf
更新日: 2017-01-07 22:16:46
md5:f544bf5df7c67262c4ca0417c245c736
sha1:63e48afb501be7aa14da4b64eb07b2004edbcdb6

技術/運用管理/Vagrant  

所有者: msakamoto-sf    作成日: 2014-05-06 12:12:13
カテゴリ: DevOps Ubuntu Vagrant VirtualBox 

開発用VMのパッケージングとデプロイを簡略化してくれるVagrantのメモです。

紹介記事:

(全て表示する)
プレーンテキスト形式でダウンロード
現在のバージョン : 7
更新者: msakamoto-sf
更新日: 2017-01-07 22:11:43
md5:780ad7a070e3270f95896163375c4812
sha1:6aad0cefb4519d57d1034cc11175f7043df4a567

日記/2015/04/29/ブログ引っ越しのお知らせ  

所有者: msakamoto-sf    作成日: 2015-04-29 14:05:14
カテゴリ:

こちらのブログ、自分で作ったお手製のPHPサイトなんですが、PHPのバージョンアップに追従する時間の捻出が難しく、将来の不安が大きくなってきました。

そこで、今後は「はてなブログ」の方に記事を書いてくことにします。
既にいくつか練習を兼ねて記事を書いてて、以下のブログで引き続き技術メモなど書いていきます。

なお、こちらのサイトは引き続き公開を続けますので、既存記事はそのまま閲覧頂けます。

今後も新しいブログをよろしくお願いいたします。


プレーンテキスト形式でダウンロード
現在のバージョン : 1
更新者: msakamoto-sf
更新日: 2015-04-29 14:36:30
md5:2829c97fed6f40501e417f7060f91bcc
sha1:dffdd019f7578dbb29c73927c5e49573f374297d

JavaScript/YUI Compressor メモ  

所有者: msakamoto-sf    作成日: 2015-03-08 19:44:54
カテゴリ: JavaScript 

公式:

使い方:

  1. 公式サイトからjarファイルをDLする。
  2. "java -jar jarファイル -o 出力ファイル ソースファイル" で実行する。

例:

デフォルトは難読化あり
> java -jar yuicompressor-2.4.8.jar -o foo.min.js foo.js
難読化無し
> java -jar yuicompressor-2.4.8.jar --nomunge -o bar.min.js bar.js


プレーンテキスト形式でダウンロード
現在のバージョン : 1
更新者: msakamoto-sf
更新日: 2015-03-08 19:45:10
md5:8901490fcf6a307ff6bf05aae356e596
sha1:71647d1bc026ed96abafde3ab36801ace1ba7583

技術/Socketプログラミング/Wiresharkの使い方メモ  

所有者: msakamoto-sf    作成日: 2015-03-08 19:13:26
カテゴリ: Groovy ネットワーク プログラミング 

公式:

基本的な使い方はこの辺から:

キャプチャする時のフィルタ設定:

1.8になって、キャプチャフィルタの設定方法が少しわかりづらくなった:

表示するときのフィルタ設定:

Windowsでlocalhostをキャプチャしたい:

localhostのキャプチャについて、wireshark以外でRawCapというフリーソフトもある。フィルタとかは設定できないが、RawCap単体でlocalhostをキャプチャして、".pcap"ファイルに出力できるので、後でWiresharkで開いて解析出来る。
公式:

使い方は簡単。ただし、管理者権限が必要:



プレーンテキスト形式でダウンロード
現在のバージョン : 1
更新者: msakamoto-sf
更新日: 2015-03-08 19:13:48
md5:bec2be11a19f190995cb4ce0aaf80fe0
sha1:15843af88b66f23c238f53b3add236cd38895c66

技術/Security/DOM based XSS メモ1(DOMinator)  

所有者: msakamoto-sf    作成日: 2015-03-07 21:45:53
カテゴリ: JavaScript セキュリティ 

先日外部のWebセキュリティの方と話していたら、DOM based XSSの話題でDOMinatorというのを教えてもらいました。メモとして参考リンクなど残しておきます。

初期:Google Codeでホスティングされてた時代:

→2011年の紹介Blog:

→現在はMinded Security社の製品として、Webセキュリティの検査員向けのツール製品として販売。Free Trialは日数限定・機能限定のお試し版。

→上記HPのヘッダにリンクがあった、DOM based XSSのテストケースについてのナレッジベースWikiらしい:

Minded Security社作成の、DOM based XSSのテストサイト:

こちらは恐らくProになる前のGoogle Code時代のをGitHubに移してきたと思われる。コミットログもFirefox8時代の対応で止まっている。

アプローチとしては、FirefoxのJSエンジンを直接改造して、入力から出力に至るまでのコードパスを解析できるようになっている。
恐らく静的解析と、実行時の挙動を捉える動的解析を組み合わせた形と想像される。



プレーンテキスト形式でダウンロード
現在のバージョン : 1
更新者: msakamoto-sf
更新日: 2015-03-07 21:46:56
md5:9da362125466cdbf50b0c88a58ff444b
sha1:299ac14d993ada1c7b58b9aa79b1326036aa8c0e

技術/HTTP/Fenix Web Server (静的ページ開発用ローカルWebサーバ)  

所有者: msakamoto-sf    作成日: 2015-03-07 20:20:01
カテゴリ: HTTP ネットワーク プログラミング 

結構便利だったのでメモ。

開発用にローカルでシンプルなWebサーバを立てられる。
node.jsでのサーバが内部では起動される。
便利なのが、公開するディレクトリとポート番号のペアを複数設定できる=Webサーバのインスタンスを複数起動出来る点。
動的なFWというわけでは無いため、静的なリソースに限定されるものの、HTMLとかJavaScriptのちょっとした実験にも便利。

一度インストールすればOKではあるが、いざインストールしようとすると中々名前を思い出せなかったりするのでメモ。



プレーンテキスト形式でダウンロード
現在のバージョン : 1
更新者: msakamoto-sf
更新日: 2015-03-07 20:20:26
md5:9105d2e55dcacaa73cbf42a902b3477a
sha1:b670250465c29b3361ba02ec1919ad7e95392b40

Java/WebSocket/勉強メモ1  

所有者: msakamoto-sf    作成日: 2015-03-07 20:13:38
カテゴリ: Java ネットワーク 

JavaでWebSocket使うときどうするか、の勉強メモ。

Java API for WebSocket(JSR 356)がJavaEE7以降扱えるようになったっぽい。

参考:

Stack Overflowでの参考資料とか載ってるやりとり:



プレーンテキスト形式でダウンロード
現在のバージョン : 1
更新者: msakamoto-sf
更新日: 2015-03-07 20:14:03
md5:cb4a7aa7df17212cae3dc41dc083eb93
sha1:d0237bf9f12e126663814596a1fb6a2720b8c11f

Java/ExecutorService, Futureのサンプル  

所有者: msakamoto-sf    作成日: 2015-03-03 01:03:44
カテゴリ: Java 
現在のバージョン : 1
更新者: msakamoto-sf
更新日: 2015-03-03 01:05:08
md5:5ee68eb20e73e0ee336a2c08c95b4860
sha1:1bffcd8d794930f667e2e329900649f97e602378

Java/Unicodeの正規化(normalize)メモ1  

所有者: msakamoto-sf    作成日: 2015-03-01 22:22:18
カテゴリ: Java 

たまたま、はてブで、以下の記事を発見。「は~、Unicodeって色んな記号あるんだな~」と眺めてた。

そしたら、同じblogでこんな記事を見つけた。

記事はPHPだったが、Javaだとうどうかな?と思ってぐぐったらこんなの見つけた。

JDK6から正規化が使えるようになったみたい。
このへんで、ちゃんと「Unicode 正規化」でぐぐったら以下の記事を発見。スゴイ。

Javaの正規化で、本当に上の記事のようになるか、確認してみた練習:
https://github.com/msakamoto-sf/javasnack/commit/5853d88d0e043e85decf37272e07b1e5ce076ac1



プレーンテキスト形式でダウンロード
現在のバージョン : 1
更新者: msakamoto-sf
更新日: 2015-03-01 22:24:44
md5:2a9ce33cd9f0a3d61ec956016896691a
sha1:d86cb6b9fb3d998d012de7a536b4352973a54b5a