WebブラウザにHTMLを出力する

2015年10月29日

メソッドって

javaScriptは、様々な要素がオブジェクトとして操作することができます。オブジェクトは、オブジェクトに用意されているメソッドと、属性であるプロパティから構成されています。
HTMLドキュメントは、javaScriptではdocumentオブジェクトとして扱われています。

今回は、メソッドの基本的な使い方について記載します。documentオブジェクトに備え付けられているwriteメソッドは、HTMLドキュメントに文字列を出力するメソッドです。このメソッドを使うことで、WebブラウザにHTMLタグを出力することができます。

実行結果はこちら。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Webブラウザに出力する</title>
</head>
<body>
    
<script>
    //引数１つ
    document.write("<h1>HTMLを出力する！！！</h1>");
    //引数３つ
    document.write("<h1>","引数を複数指定するときは「,」で区切る","</h1>");
</script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>Webブラウザに出力する</title>

</head>

<body>

//引数１つ

document.write("<h1>HTMLを出力する！！！</h1>");

//引数３つ

document.write("<h1>","引数を複数指定するときは「,」で区切る","</h1>");

</script>

</body>

</html>

実行して頂くと、「HTMLを出力する！！！」とブラウザに表示されています。

メソッドの書き方

オブジェクト名.メソッド名(引数);
オブジェクト名とメソッド名を「.(ピリオド)」で繋げています。

で、実際にサンプルコードをみると、
document.write("<h1>HTMLを出力する！！！</h1>");

と書いています。今回は、documentオブジェクトのwriteメソッドを
「<h1>HTMLを出力する！！！</h1>」という文字列を引数にして呼び出しています。
writeメソッドは引数をWebブラウザに出力するメソッドです。結果として、HTMLで直接タグで記述したのと同様です。

これと、
document.write("<h1>HTMLを出力する！！！</h1>");

これは、
<h1>HTMLを出力する！！！</h1>は同じです。

引数を複数指定したいときは

メソッドによって、複数の引数を指定するものがあります。その場合はカンマ「,」で区切って指定します。
オブジェクト名.メソッド名(引数1,引数2,引数3,....);サンプルコードの２つめのメソッドのようにできます。