JavaScript の ブラウザ上の特性

  調査道具



アドレスバーで以下のコマンドを実行する事は、JavaScript の ブラウザ上での振舞い
を知る上でとても重要ななるので、覚えておきましょう。

  
javascript:alert(document.body.innerHTML)
  

面倒でなければ、以下のような URL ショートカットを作成して「お気に入り」に入れると良いでしょう

JavaScript チェック.url
  
[DEFAULT]
BASEURL=javascript:alert(document.body.innerHTML)
[InternetShortcut]
URL=javascript:alert(document.body.innerHTML)
  



  ロード中の document.write



その場所にタグを書くのと同じ結果になります

  
<HTML>
<HEAD>
<SCRIPT language="JavaScript" type="text/javascript">

	document.write( "<TITLE>" );
	document.write( "こんにちは" );
	document.write( "</TITLE>" );

</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
  

  
<HTML>
<HEAD>
</HEAD>
<BODY>
<SCRIPT language="JavaScript" type="text/javascript">

	document.write( "<TITLE>" );
	document.write( "こんにちは" );
	document.write( "</TITLE>" );

</SCRIPT>
</BODY>
</HTML>
  


  
<HTML>
<HEAD>
</HEAD>
<BODY>
<SCRIPT language="JavaScript" type="text/javascript">

	document.write( "入力" );
	document.write( "<INPUT type=\"text\" name=\"fld\">" );

</SCRIPT>
</BODY>
</HTML>
  



  ロード後の document.write

上書きされます

  
<HTML>
<HEAD>
</HEAD>
<BODY>
<SCRIPT language="JavaScript" type="text/javascript">

function userWrite() {
	document.write( "こんにちは" );
}

document.write( "<INPUT value=\"実行\" type=\"button\"" );
document.write( " name=\"fld\" onClick='userWrite();'>" );

</SCRIPT>
</BODY>
</HTML>
  



  innerHTML による動的コントロール作成

DOM では書ききれない複雑な記述も、確実に処理されます

  
<HTML>
<HEAD>
<SCRIPT language="JavaScript" type="text/javascript">

function createControl() {

	strHtml = "<INPUT type='button' value='非表示'";
	strHtml += " onClick='this.style.display=\"none\";'>";
	document.getElementById("target").innerHTML += strHtml;
}

</SCRIPT>
</HEAD>
<BODY>
<input type="button" value="実行" onClick='createControl()'>
<DIV id="target"></DIV>

</BODY>
</HTML>
  










  infoboard   管理者用   
このエントリーをはてなブックマークに追加





フリーフォントWEBサービス
SQLの窓WEBサービス

SQLの窓フリーソフト

素材

一般WEBツールリンク

SQLの窓

フリーソフト

JSライブラリ