honjarake blog

自分用にテキトーにまとめる

イベント監視　メモ2

javascript

外部jsファイルの読み込み - honjarake blog
prototype.jsを読み込んでから下記を実行

var handler = function (event) {
  //console.log(this);
  try {
    var event = event || window.event;
    var target = event.target || event.srcElement;
    console.log('handler : ' + target.tagName);
  } catch (e) {
    console.log('handler : ' + e);
  }
}
var eventWatch = (function () {
  //console.log('eventWatch start');
  try {
    var html = document.getElementsByTagName('html') [0];
    Event.observe(html, 'click', handler);
  } catch (e) {
    console.log('eventWatch : ' + e);
  }
  //console.log('eventWatch end');
}) ();

jqueryなら特定のタグエレメント監視でできるんだろうな

ソースコピペ状態を振り返って

まとめ

よく知らないけど使っているもの（関数、概念）が多いなと思う
用語にしても全く頭に入っていないのが気になってはいた
実は発音すら知らず、調べてみて「え？そうだったの？」となることも多い

WEB関連の用語なんて、それこそ全く知らなかった
プログラミング言語だって使っていたのはVBだったし
開発環境なんて考えないでやっていたし、向上心もそれほどなかった
業務で使う本職でないからという部分が甘えになっている

今日も改めて知らないで使っていたものについて、いくつか参考サイトを残す
調べるのを後回しにそのまま使ったソース

ajax

外部jsファイルの読み込み

javascript

イベント監視 メモ - honjarake blog
prototype.jsを読み込む

var includeJS = (function (JS_PATH) {
  var xhr = null;
  if (window.XMLHttpRequest) xhr = new XMLHttpRequest();
   else if (window.ActiveXObject)
  try {
    xhr = new ActiveXObject('Msxml2.XMLHTTP');
  } 
  catch (e) {
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
  }
  xhr.open('GET', JS_PATH, false);
  xhr.send('');
  eval(xhr.responseText);
}) ('http://ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js');

まずい…参考にしたサイトをコピーしとくの忘れた

イベント監視　メモ

javascript メモ

Event.observe - イベントを監視 - prototype.jsリファレンス
これがやりたいけど、prototype.js を読み込まないといけない

変更オブザーバー (Windows)
Event.observe に変わる機能がないかと探していたときに見つけた
いつか使えそうな機能

監視ならjqueryで似たようなことできるんだろうけど
今のところグリモンで使うことが多いので…

Event.observe は使う必要があるかもしれないので即時的に読み込める方法も探す

多かったミス　まとめ

プログラミング まとめ エラー

自分が適当に組んでるときよくやっているミスが

  • 誤字、脱字
    効果：undefinedを多発させる。特に大文字と小文字の混在ミス、疲れているとたまに気づかない

例：
var bclick = element;
if(bclick.tagName != 'a') return;
if(bClick.href == 'foo') return; ←ここの変数名
bclick.id = 'bar';

他には

var node = document.createNode(); ← create'Text'Node
var a = getElementsByTagName(); ← documentを参照してない
var b = document.getElementByClassName(); ← getElement's'

備え付けのエディタには補完機能がない
こういうアホみたいな記述違いや抜けが多かった
if文の比較演算子間違えていた(=と==)ときはエラーもでないし
後で気づいて超絶素人過ぎて泣けてきた

matchの戻り値の型

javascript 
var current = local.href.match();

と変数に格納したあと

current.match();

したらエラーになった
type errorその型にmatch関数ないよだって
typeof current を見てみたら [object] だった

[JavaScript] String.match( regexp ) の返り値は何か？/ 正規表現の変わりに文字列を使うとどうなるのか | 学習B5デスノート

ああ、配列が返っていたのか
以前、どこかのスクリプトでmatch使ったときは意識しないでも動いてたから良く調べずに使っていた
そのときは配列に対してmatchしていなかったのか

var foo = "文字列" + str.match();

みたいにしていて自動的にstring型に変換されていたのかな？（検証はしてない）

とりあえず、nullチェックしてから

var foo = str.match()[0];

で対処した
※環境：firefox 3?.? greasemonkey2.1

JavaScript ページ読込切替しないページ　(URLは変わっている・履歴も残る)

Firefox javascript

一部のサイトでページ移動したように見えるのに
loadイベントが走らないページがあるのは、なぜなのか？
調べて行き着いたのが、このサイト

で、ページの一部だけ読み込み、変更して
URLは読み込んだページに変え、履歴に突っ込むみたいな感じなのかな
（追記：多分、これ→【JavaScript】pushStateとAjaxを使って非同期通信 | Web活）

と思って試したんだけど、Firefoxだからなのか、pushState された瞬間を検知しない
いや、pushState イベントの検知タイミングが違うのか？
以前、どこかのサイトで、「～イベントは、Firefoxではキャッシュを読みに行くパターンがあり、そのときは発生しない」と見たような気がする
はてブ登録しとけばよかった…

関係ありそうなサイト（あとで読む、あとで試す）

popStateとpushStateについて

XUL


戻るボタンを押したとき検知しない？（Firefoxじゃないけど）

移動する前に何かできないか（検知できないと思うが）

今回は移動前のクリックイベントを監視してみようと思う。