JavaScriptで文字を表示する方法

シェアする

  • このエントリーをはてなブックマークに追加
  • 0

あーりーです。

今回は、JavaScriptで文字を表示する方法です。

文字を表示させるときは…

document.write("文字");

を使います。

使うって、具体的にどうやるのか。

見ていきましょ~。

スポンサーリンク

JavaScriptを記述する場所

そもそもJavaScriptをどこに記述するか。

いくつかの方法があります。

このブログでも過去に書きました。

外部ファイルに記述する方法はこちらをご覧ください。

HTMLの<head>タグや<body>タグに記述する方法はこちらをご覧ください。

今回は、<body>タグに記述する方法でやってみますね。

手順

では、試してみます。

1.エディタ(メモ帳など)を起動します

2.以下の内容をエディタにコピペします

※ゴチャゴチャしないように、究極にシンプルにしてあります。

<html>
<head>
</head>
<body>
<script>
document.write("あいうえお");
</script>
</body>
</html>

赤い部分が文字を表示するJavaScriptです。

あとは、この内容をHTML形式で保存します。

その方法がこちら

3.エディタがメモ帳なら「ファイル」をクリック

4.「名前を付けて保存」をクリック

5.保存場所を選びます

6.適当なファイル名を付けます

7.拡張子(ファイル名のうしろの英文字)を「.html」にします

8.「保存」をクリック

メモ帳以外のエディタでも、だいたい同じような操作で保存ができると思います。

これでJavaScriptが組み込まれたHTMLファイルがひとつ出来上がりました。

HTMLファイルを開いて見る

いま保存したHTMLファイルを開いてみます。

(ダブルクリックとか、ファイルをクリックしてEnterなどで開けます)

文字が表示される

するとブラウザに「あいうえお」という文字が表示されます。

成功です!

HTMLタグも使える

JavaScriptにHTMLタグを使うこともできます。

HTMLタグを追加してみると、こんな感じです。

<html>
<head>
</head>
<body>
<script>
document.write("<h2>あいうえお</h2>");
</script>
</body>
</html>

赤い部分が、追加したタグです。

<h2>の見出しタグを追加してみました。

こうすると、文字が見出しとして表示されます。

わざわざJavaScriptでやる意味あるの?

ところで…

これだけなら、わざわざJavaScriptを使わなくても、ふつうにHTMLで良いのでは?

と思いますよね。

そうです。

その通りなんです。

たしかに、これだけだとHTMLでふつうに「あいうえお」と表示すればいい話なんです。

でも…

いろんなことが出来る

JavaScriptで文字を表示させられるようになると、いろんな可能性が広がります。

その時その時で、場合によって表示させる文字を変えたりできます。

そのための基礎の基礎が、今回の内容なんですね。

これからが楽しみです。

では、今回はこれでおしまい。

JavaScriptの記事は、この記事も含めて「初心者のための超わかりやすいJavaScript入門」にまとめてあります。よろしければご覧ください。