ScriptタグとHTMLページへのアクセス

9601 ワード

JavaScript

ScriptタグとHTMLページへのアクセス
Scriptラベル
スクリプトタグはHTMLページに保存可能なスクリプトを埋め込むために使用されます.

	<script>
		//some script goes here
	</script>

scriptタグには三つの特殊な属性があります.(もちろん、id、classのような属性もあります.HTMLページのほとんどの要素にはクラス、id属性があります.)

	<script language="JavaScript">//language                  
		//         JavaScript,JScript,VBScript
		//some script goes here
	</script>
	//  JScript  IE    ,                  
	//   VBScript,  Windows  IE    ,  
	//  language     XHTML  type     
	<script type="text/javascript">//     ,text/javascript,text/jscript,text/vbscript
		//some script goes here
	</script>

WebブラウザではJavaScriptしか使えません.type属性はtext/javascriptに設定されています.実際にはJavaScriptが流行していますので、ほとんどスクリプトの代名詞になりました.Webブラウザでは、たとえScriptタグにはいかなる属性が付けられていなくても、ブラウザはそれをJavaScriptにします.

	<script>
		alert("Hello!");
	</script>
	//          JavaScript     
	//   IE ,     script     JavaScript  ,   VBScript
	<script>
		msgbox "Hello!"
	</script>
	//      IE     ,IE      JavaScript

以前HTMLページでは、Oclickやonmouseoverなどの属性が付加されていました.これはイベントバインディングです.(イベントについては後で詳しく説明しますので、急がないでください.)HTMLページのある要素に何かがあった時に実行するJavaScriptコードを指定します.

	<img src="../images/stack_heap.jpg" alt="    " onclick="alert('      !')"  />

上のコードはHTMLページに画像を表示します.マウスでクリックすると、パチンコが現れます.「私を痛くしました.」と表示されます.Oclick属性の値は実はJavaScriptコードです.これは事件で、下はその他のいくつかの簡単な事件です.
onclick、マウスをクリックした時に一回実行します.
onmouseoverマウスを上に置くとを実行します.
onmouseoutでは、マウスが移動した時に1回を実行します.
onmousedownマウスを押すとを実行します.
onmouseupでは、マウスが上で離すとを実行します.
onmousedblclickは、マウスをダブルクリックするとを実行します.
onloadでは、オブジェクトの読み込みが完了したらを実行します.
以前、インターネットで流行っていたRollverImagesという効果は、実はオンモスover、onmouseoutというイベントと簡単なJavaScriptコードを組み合わせて実現したものです.

	<img src="../images/stack_heap.jpg" alt="    "
	 onmouseover="this.src='../images/over.jpg'" 
	 onmouseout="this.src='../images/out.jpg'"  />

ご存知のように、onmouseoverのような属性の文字列はイベントが発生した時にシナリオとして実行されますが、上のコードははっきり見えません.

	 //      ,             
	 this.src='../images/over.jpg'
	 this.src='../images/out.jpg'

上のコードを分析してみましたが、これは実はオブジェクトにthisという属性のsrcを与えています.問題は私たちがthisというオブジェクトを宣言したことがないことです.実はthisオブジェクトは常に存在するオブジェクトです.これは宣言されません.ここでthisは「これ」を指します.HTMLの要素に対しては、JavaScriptは自動的にオブジェクトに解析されます.次のタブについては、次のオブジェクトに解析されます.

	 <img src="../images/stack_heap.jpg" alt="    " onclick="alert('Hello!')"  />
	 //  ,   this       ,        ,       
	 this = {
	 	src:"../images/stack_heap.jpg",
	 	alt:"    ",
	 	onclick:"alert('Hello!')",
	 	tagName:"IMG"
	 };
	 //

上の方は、Src、altなどの属性を持ち、Src、alt属性はHTMLに書いてありますが、tagNameはシステムが自動的に生成し、ラベルのラベル名を表しています.私たちは下のコードでテストできます.

	 <img src="../images/stack_heap.jpg" alt="    " onclick="alert(this.src);alert(this.tagName);"  />

もちろん、私達もその値を修正できます.画像を反転させる効果はこのように成功しました.
このような行内イベントのバインディングには、いくつかの注意点があります.

	<head>
		 <script>
			function myFn() {
				alert("       !");
			}
		</script>
	</head>
	//.............        
	 <img src="../images/stack_heap.jpg" alt="    " onload="myFn()"  />//

上のコードの実行は大丈夫ですが、順番を反転させます.

	<img src="../images/stack_heap.jpg" alt="    " onload="myFn()"  />//              
	//.............        
	<script>
		function myFn() {
			alert("       !");
		}
	</script>

HTMLページは上から下の順にロードして実行します.画像のロードが成功したら、Oloadの内容(カスタム関数)を実行しますが、scriptタグは下のコードの後にあるので、まだロードされていません.これはなぜscriptタグをheadの部分に置くべきですか?headはbodyの前にあります.bodyの中の元素のロードが完了した時、headの中のscriptはきっとロードが完了しました.
その後、XHTMLがありました.「三層分離」がありました.W 3 CはDOM 2を発売しました.私達は他の方法でイベントをバインディングしてHTMLページの要素を取得したいです.上の画像を例にします.

	<head>
		 <script>
		 	var img = document.getElementById("myImg");//    ID    
		 	//document.getElementById      ,     ID
		 	//  ,img            
		 	img.onclick = myFn;
		 	/*     JavaScript           onclick  
		 	             
		 	    ,     img.onclick=myFn();
		 	      JavaScript     
		 	 "()"        ,              img.onclick*/
			function myFn() {
				alert("       !");
			}
		</script>
	</head>
	//.......
	<img src="../images/stack_heap.jpg" id="myImg" alt="    " />
	//     onclick   ,       ID

しかし、上のコードが実行されてもエラーが発生します.HTMLが上から下にロードされ、scriptにロードされた時、bodyの部分は下にあります.JavaScriptはブラウズした時に自動的に実行されます.この時、ページ上のIDはmyImgであります.まだロードされていないので、エラーが発生します.Dcument.getElementById方法は文字列形式のIDを必要とし、もしページにIDがないとnull(空のオブジェクト)に戻ります.次の行では、img.onclickという言葉は空のオブジェクトを使っていますので、ここで間違えます.解決方法としては、従来の行内イベントを結びつけるscript位置を逆にして置くだけです.scriptをHTML要素の後ろに置いてください.

	<img src="../images/stack_heap.jpg" id="myImg" alt="    " />
	//..................      
	<script>
	 	var img = document.getElementById("myImg");
	 	//    ,  script         img    ,   script img         
	 	img.onclick = myFn;
		function myFn() {
			alert("       !");
		}
	</script>

しかし、標準はまだscriptをheadの部分に置くことを勧めています.じゃ、これはもう一つの事件のonloadを使います.

	window.onload = initAll;//             ,     window   onload     
	//window      ,      ,      ,        ,   window    onload  
	function initAll() {
		var img = document.getElementById("myImg");
	 	img.onclick = myFn;
		function myFn() {
			alert("       !");
		}
	}

このように、コードは間違っていません.スクリプトをどこに置いても、initAllはページローディングが完了したら実行されます.
HTMLページにアクセス:HTML DOM
HTML DOMはページ全体を一つのdocumentオブジェクトとして扱い、HTML内のラベルはすべてdocumentオブジェクトを通じてアクセスします.ドキュメント内の各ラベルはまた一つのオブジェクトに変換されます.

	<p class="demo" title="     :DOM " id="p1">     p     </p>

また次のオブジェクトに変換されます.

	//            
	{
		tagName:"p",
		className:"demo",
		title:"     :DOM ",
		id:"p1",
		innerHTML:"     p     "
	}
	//      ,      class        className     class.
	//class JavaScript   !!!
	//tagName       , innerHTML      HTML

HTMLタグをこのようなオブジェクトに変換した後、JavaScriptでこのラベルの属性や中身にアクセスすると簡単に多くなりますが、問題はどのようにこのオブジェクトにアクセスしますか?

	//         ID,    document.getElementById          
	window.onload = initAll;//  ,      HTML        window onload     !
	function initAll() {
		var p = document.getElementById("p1");
		alert(p.className);
		alert(p.tagName);
		alert(p.title);
		alert(p.id);
		alert(p.innerHTML);
	}

HTMLページにアクセスするのは簡単です.要素を取得すると、属性値だけでなく、属性値も設定できます.

	window.onload = initAll;
	function initAll() {
		var p = document.getElementById("p1");
		p.title="JavaScript";
		p.className="load";//          
	}

これらを利用して、私達はすでにいくつかの感動的な事をすることができました!

	//  CSS
	.over {
		color:red;
		background:blue;
		font-size:larger;
	}
	.out {
		color:black;
		background:white;
		font-size:smaller;
	}
	.click {
		color:yellow;
		background:yellow;
		font-size:12px;
	}
	//HTML  
	<p id="p1" class="out">     ,         !</p>
	//JavaScript  
	window.onload = initAll;
	function initAll() {
		var p = document.getElementById("p1");
		p.onclick=clickFn;//                      ,       
		p.onmouseover = overFn;
		p.onmouseout = outFn;
	}
	function clickFn() {
		this.className="click";//  ,this     
		//   className,   class
	}
	function overFn() {
		this.className="over";
	}
	function outFn() {
		this.className="out";
	}

もちろん、ページ要素の取得はこの方法だけではありません.document.getElements ByTagName方法でもページ要素を取得できます.名前の通り、IDではなくHTMLのタグから元素を取得します.HTMLページはID名が唯一です.ラベル名はほとんど同じです.したがって、getEments ByTagme Nameメソッドは一つしかありません.つまり、文字列形式のラベル名です.戻り値は同じ配列のHTML要素リストです.

	window.onload = initAll;//     window.onload       
	function initAll() {
		var pList = document.getElementsByTagName("P");
		//        P?     p   ,      ,      tagName        , ....
		alert(pList.length);//     ,length        ,       p  ,     
		alert(pList[0].innerHTML);//        p  
	}

また、document.getElementsByTagName方法については、ページのすべての要素をCSSのワイルドカードのようにパラメータとして「*」という記号を送ることもできます.

	window.onload = initAll;
	function initAll() {
	var allThings = document.body.getElementsByTagName("*");
	//    DOM     getElementsByTagName  , body       ,body         
	alert(allThings.length);//         ,     (  DOCTYPE)
	alert(allThings[3].innerHTML);//          
	}

その他-javascript:偽プロトコル
疑似プロトコルは、インターネット上に実在するhttp://や、https://ではなく、関連アプリケーションのために使用されます.例えば、tencent:/(関連QQ)、data:(base 64コードでブラウザ側でバイナリファイルを出力します.また、javascript:
私達は閲覧住所欄に「javascript:alert('JS!')」と入力できます.ポイントを変えたら、実際にはjavascript:後のコードはJavaScriptが実行し、結果を現在のページに返します.
同様に、私達はaラベルのhref属性の中でjavascript疑似契約を使うことができます.

	<a href="javascript:alert('JS!');"></a>
	//       ,             ,

しかし、javascript:偽プロトコルには問題があります.実行結果は当然のページに戻ります.

	<a href="javascript:window.prompt('           !','');">A</a>

解決方法は簡単です.

	<a href="javascript:window.prompt('           !','');undefined;">A</a>
	// undefined

javascriptの偽契約は一定の柔軟性を提供していますが、ページでは使用しないようにしてください.JavaScriptをデバッグするには、javascriptの疑似プロトコルが非常に有用です.

JSONタイプのデータを読み出して解析する方法