読者です 読者をやめる 読者になる 読者になる

kkana's blog

新米コーダーの忘れそうなことメモ

覚えたこと乱雑メモ

Vanilla.JSメモ

今日覚えたこと

dispatchEventでイベント発火

参考:JavaScript document.dispatchEvent() 要素にイベントを送る
dispatchEventをつかってイベントを発火させる - みかづきブログ その3
JavaScriptのカスタムイベント - console.lealog();
イベント初期化についてはここ
event.initEvent - Web API インターフェイス | MDN

見たのはdocument.createEventでイベントオブジェクトを作成するのじゃなくて、 customEventをnewするほうだったので、そっちをメモ

var elm = document.getElementById('id');
var ev = new CustomEvent('hoge', {
  // ここに初期化の設定
  bubbles : false,
  cancelable : true
});
elm.addEventListener('hoge', function() { alert('foo'); }, false);

//発火
elm.dispatchEvent(ev);

call apllyの違い

どっちもメソッド拝借パターンに出てきた。 applyメソッドは第二引数に配列を渡す

URIエンコード/デコード

ここで確認。 encode/decodeURIComponent()

AjaxのdataFilterオプション

サーバから取得した応答データを処理する前に、フィルタ処理を挟む。

$.ajax({
  url: './Data.htm', // リクエスト先のURL

  // フィルタの定義
  dataFilter: function(data, type) {
    data = data
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;');
    return data;
  },

  // 成功時に応答データを<div>要素に反映
  success: function(data) {
    $('#result').html(data);
  }

dataFilterの引数のdataはサーバーからのデータがそのまま入っている。
typeはdataTypeプロパティに渡した値。

XMLHttpRequestのreadyStateプロパティ

  • 0 openメソッドが呼ばれていない
  • 1 sendメソッドは呼ばれていない
  • 2 HTTPヘッダを全て受信し終えた状態。この状態からstatusプロパティやgetResponseHeaderメソッドなどが利用可能。まだデータ本体は受信していない。
  • 3 本文のデータを受信中
  • 4 受信完了。またはリクエストに失敗して終了。

svgの属性をjsで変更するときの注意点

SVGグラフィック固有の属性は個々でsvg.setAttribute('cx',x);という感じで設定するが 汎用的な属性を当てるときにはsvg.setAttribute('style','fill:#6666FF;stroke:0000FF;stroke-width:10;');という感じでまとめて指定する。

css フレキシブルボックス

CSS3の「フレキシブルレイアウト」使い方まとめ – フラップイズム

formDataをJSON.stringifyでjsonに変換

jQuery - $.ajax でオブジェクトの配列を POST したい - Qiita
[JavaScript] 拡張なしでオブジェクトのJSON文字列化、JSON文字列のパースを行う方法 - YoheiM .NET

iframe要素にsandbox属性がある

制限の解除は以下の値をいれる。

  • allow-same-origin 親文書と同じドメインを持つものとする
  • allow-top-navigation 最上位のウィンドウの操作を許可する
  • allow-forms フォームの送信を許可する
  • allow-scripts スクリプトの実行を許可する
いつかまた調べる

constructor プロパティについて - hogehoge @teramako