カテゴリー別アーカイブ: JavaScript

uncaught referenceerror function is not definedの対処方法(JQuery)

急に外部呼出しのjsファイル内の関数が読み込めなくなっていた。

ファイルの読み込み順をconsol.logでも確認するが読み込みのタイミングは順番通りで、なぜ参照できなくなったのかがわからなくなってしまった。

同一HTMLファイル内に関数を記述すると問題なく読み込まれるのになぜ?

外部jsファイルの実行も問題なく、JQueryの読み込み順番も一見問題ない。

プログラムの仕組みが良く理解できていないけど、やはり関数が読み込まれるようにするとかグローバル化しないといけないとの結論に達するが方法がわからない。

ちなみにhtaccessなどの制限も疑ってみるが、ローカルでもサーバー上でもファイル読み込みはされているので除外する。

JavaScriptなのですべてをローカル環境にして再度トライする。

外部jsファイルに記述したfunctionなども実行するがうまくいかなかったため、別の関数を新規に作成してテストするも同じく
uncaught referenceerror function is not defined

キャッシュなどは何度もクリアしながら、console.logも書き換えながら、最新ファイルを参照しているはずなのに。

どうやっても理由がわからなので初心に戻り、外部ファイルをすべて綺麗にして、グローバルスコープで別の関数を設置すると、うまくconsole.logが表示。

以前の関数をコピペすると動作できる。

・・・どうも記述部になんらかの欠陥があった模様。コメントアウトや記述などの編集も頻度があったので、なんとなく府に落ちないながらもトラブル回避。

cssセレクタなどでもごくまれに起こる、リドルクラッシュ(riddle crash)と全く似た現象かと。
ちなみにcssセレクタのリドルクラッシュは、正しい記述なのに値を変更したりすることで急に正常に反映されなくなり、同じセレクタ最初から記述しなおすと治る現象のこと。

ところが、再表示を試みたところ、やはり表示できない。他のブラウザでは表示できるから、ブラウザ特有のものであるかと考えるが、どうも狭い視野でしか思考が動かないので、その日は放置。

後日、やはり同じ現象が発生しているため、別種のブラウザで見てみるとどうやら表示されているので、ブラウザ限定の要因に絞り込みする。

再度テスト用のファイルを別途作成してトライするも、やっぱり同じエラーに悩まされる。

『あ!アドオンだ!』

GhosteryかAdblock Plus。怪しいのはどちらかだ。

結局、Adblock Plusが外部JSの読み込み制限をかけていたため、許可をするとすんなり表示。

冷静な思考を失うと、時間も労力も失う。

jQueryについて

jQueryについての情報。

jQueryはオブジェクト型スクリプト言語JavaScriptライブラリの1種です。

その他の情報としては、John Resig(ジョン・レッシグ)氏によって開発・公開されており、バージョンは1系と2系に別れており、それぞれ複数のブラウザやバージョンに対応しているがあり、特性としてはjQuery Core(jQuery本体)、スマートフォン用のjQuery Mobile、公式プラグインのjQuery UIなどがあり、著作権表記をすることで商用・非商用問わず使用ができることです。
カテゴリーとしては、ライブラリについてのJavaScriptに分類されます。
情報について、検索エンジンでは下記の関連情報での組み合わせでインデックスされてます。
jquery mobile
jquery ui
jquery スライドショー
jquery入門
jquery ajax
jquery animate
jquery lightbox
jquery セレクタ
jquery append
jquery ダウンロード

async属性の非同期処理JavaScriptの情報

asyncについての情報。
scriptタグの属性には、読み込みファイルを指定するsrcがあり、HTML5ではtype属性はtext/javascript標準で値が指定されており、省略できる属性である。
同じくHTML5から採用されている属性にasync属性があり、Webページのレンダリング処理とは別に読み込み処理を完了してから実行を指示する属性である。

その他の情報としては、他にJavaScriptの実行方法の指定属性にはdeferがありますが、こちらはレンダリングの順番に関係なく、Webページレンダリング完了後に実行される属性です。window.onloadと同じような処理があり、特性としてはJQueryが多用されることで大量の負荷のかかるjsファイルが読み込まれることです。

結論として、Webページの描画に関与する場合はヘッダ内に記述し、非同期の処理が必要な場合はasync、重要性の低いスクリプトに関してはdefer属性を指定するのがよいということが、asyncについてのおおまかな情報になる。
情報カテゴリーとしては、非同期処理についてのJavaScriptに分類される。
情報について、検索エンジンのGoogleでは下記の関連情報での組み合わせでインデックスされている。

async 読み方
asyncとは
async await
c# async
ajax async
jquery ajax async
async network io
async task c#