HTML内のIDについて
http://qiita.com/nakajmg/items/c895105afae95bfa8fae
おお。。。
<html> <head> <script> function test(){ alert(window.t.innerHTML); } </script> </head> <body onload="test()"> <div id="t">aaaaa</div> </body> </htlm>
プリミティブデータ型についてと、関数のスコープ
javascriptについて、自分が作りたいものを作ってるだけだと
なかなか基礎的な部分が身につかない。
休日など、時間があるときに本読んで
深くまで理解できるようになりたい。
プリミティブデータ型
値を割り当ててないと、undefinedになる
var a; typeof a;
数値に変換できないときにNaNになる
var s = '1s'; s++;
関数のスコープ
・関数内で書かれた変数については外に影響しない
・グローバルで書かれた変数については中で取得可
var b = 4; (function(){ alert(b); })();
即時関数も、外から内への影響はあるが
中のものは外へ影響しない。
グローバル変数とローカル変数
ふつうなら、はじめのalertで291、次にalertで3が
きそうですが実際は、はじめにundefined、次に3がきます。
関数の定義を実行前に、行う為
関数内にローカル変数が作られそちらが優先されます。
var a = 291; function f(){ alert(a); //関数の定義の際に、ローカル変数aが入ってれば //ローカル変数aが優先される var a=3; alert(a); } f();
interfaceとabstract
http://havelog.ayumusato.com/develop/php/e166-php-interface-abstract.html
読んで、interfaceとabstractの違いを自分用メモにまとめた。
interface
abstract
特徴
・実装を伴う目祖度やプロパティの宣言はできる
・クラスはアブストラクトで宣言されたメソッドをすべて実装しなくてはいけない
・インスタンス化できない(継承されたサブクラスをインスタンス化は可能)
abstract
複数の派生先クラスで、一部の実装が異なる場合。interface
http://havelog.ayumusato.com/develop/php/e166-php-interface-abstract.html
不特定のクラスを共通の方法で、取り扱えるようにしたい場合。
権限
・protected そのクラス自身と継承したクラス、親クラスからのみ
・public どこからでも
・private そのメンバーを定義したクラスからのみ
ユーザスクリプトでjQueryを利用する【ソースを読む】
ユーザスクリプトで、jQueryを使う場合の
ソースについて何をしているのか、読んでみる。
前のブログ記事で紹介したソースです。
http://iwa4.hatenablog.com/entry/2013/07/02/181645
動作の流れに沿って書く。
0.引数に、jQueryにて実行したい処理を書く
})(function ($) { //ここに、実行したい処理を書く alert('jQuery is ' + typeof $); });
1.スクリプトタグ生成
var script = document.createElement("script"); script.setAttribute("src", "//code.jquery.com/jquery-2.0.0.min.js");
ローカルで試しに実行するときに、file://になってると読み込めないので
注意。その場合は、http:を足してください。
2.生成したスクリプトタグをbodyタグの子要素として追加
document.body.appendChild(script); script.textContent = "(" + callback.toString() + ")(jQuery.noConflict(true));";
3.イベント処理(scriptタグロード時)
引数(function型)を、スクリプトタグ生成して実行できるようにする。
var script = document.createElement("script"); script.textContent = "(" + callback.toString() + ")(jQuery.noConflict(true));";
textContentについては、下記記事が参考になった。
textContent も innerText もある要素の text 部分にアクセスするためのプロパティです.
http://d.hatena.ne.jp/cou929_la/20110517/1305644081
noConflict
jQuery.noConflict([extreme])
http://www.hp-kyoto.info/jQuery/jquery3000.html
この関数を実行すると、$関数の動作が先に定義されている動作に戻します。
noConflictを使った場合、jQueryオブジェクトの呼び出しには明確に'jQuery'と書く必要があります。
第1引数 extreme (ブール値) を true とすると、$関数のみならず、jQueryオブジェクトも含めて完全にグローバルの名前空間から除去します。
これを設定すると、$関数だけでなくjQueryオブジェクトも、先に定義された動作に戻してしまいます。
この文章の後の、参考例がわかりやすかった。
そして、スクリプトタグを、bodyタグの子要素として追加
document.body.appendChild(script);
どうなるか
bodyタグ内に、下記２つのscriptタグが生成される。
<script src="//code.jquery.com/jquery-2.0.0.min.js"></script> <script> (function ($) { alert('jQuery is ' + typeof $); })(jQuery.noConflict(true)); </script>
即時関数について
このソースでも利用されているが
即時関数のメリットは
・グローバル変数に関数の割り当てがされない
変数の名前が衝突しないので、外を気にしなくてよくなる
・内部で宣言した変数や関数はローカルに限定される
function hoge(){ alert(1); } hoge();
↑は↓と同じ
(function hoge(){ alert(1); })();
ユーザスクリプト初めの一歩【chromeの場合】
GreaseMonkeyとは
ユーザスクリプトでググってると
GreaseMonkeyという単語をよく目にする。
これはFireFoxのアドオンで、「Firefox」上で「ユーザスクリプト」を
動かせるようにするものである。
ブラウザによって、ユーザスクリプトの挙動が違うので
気をつける。
ユーザスクリプトの書き方について
下記3点、注意が必要です。（主に自分へ向けて）
1.メタ情報を指定
// ==UserScript== // @name sample // @namespace aczz.hateblo.jp // @description sample // @match http://aczz.hateblo.jp/* // ==/UserScript==
@name スクリプト名(任意)
@namespace 名前空間の指定(スクリプト作成者の持つドメインなどが定番)
@description スクリプトの説明(任意)
@match
chromeの場合は、スクリプトを実行したいURLの設定は
@matchで行ったほうがよい。
ユーザースクリプトがChromeで実行したいページを指定する主な方法は、@matchです。その使用例は以下の通りです。
http://d.hatena.ne.jp/zuzu_sion/20090325/1238042619
// ==UserScript==
// @match http://*/
// @match http://*.google.com/*/
// @match http://www.google.com/*/
// ==/UserScript==
@match構文の詳細な情報についてはこれらのコメントを参照して下さい。
現在、ChromeはGreasemonkeyの@include構文をサポートしていますが、推奨はしていませんし使えなくなる可能性もあります。”また@includeよりも@matchの方がユーザーにはどのページで実行するのかわかりやすいので@matchを勧めます。”
3.ファイルを保存する
ユーザスクリプト書けたら、保存する。
必ず、ファイル名末尾に「.user.js」を入れる。
