JavaScriptで文字を書く方法

JavaScriptの書き方を解説します。JavaScriptはHTMLと相性の良いプログラム言語で、JavaScriptを使って時と場合によってページの内容を自動的に変更できたりします。

HTMLの1行目に書くDOCTYPE宣言によって同じHTMLでも表示のされ方が異なる場合があり、結果的に制作者の意図しない表示になってしまう事があります。

DOCTYPE宣言をしなくてもHTMLは表示されるしJavaScriptも動いてしまいますが、そのコードをいざDOCTYPE宣言したファイルに載せ替えた時などに不具合が生じるケースがあります。

HTML4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML5

<!DOCTYPE html>

使い分けが必要で、使い分けられる人は良いかも知れませんが、ビギナーの場合はできるだけHTML5に統一しておいた方が今後の時代には相応しいでしょう。

文字コードのセット

上記はキャラクターセットと呼ばれる文字コードの指定なのですが、今は特別な事情が無い限りはUTF-8にしておくのが一般的でしょうね。<head></head>内に書きます。

Windowsの場合、標準の文字コードがUTF-８では無いので、UTF-8の使えるテキストエディタ（秀丸・サクラエディタ等）を使うのが望ましいと思います。

コードを書く場所

JavaScriptのコードはHTMLファイルの中で専用のタグとタグに囲まれた範囲に書きます。

HTML5より以前では以下のように書きましたが、今は上記のように省略できます。

<!-- 〜ここ〜

--></script>

プログラムが複雑で長くなる場合などは外部ファイルに書いて、呼び出す事もできます。

文字を表示する

Javascriptを使って文字を表示するには、以前はdocument.writeが使われていました。

上記のコードをHTMLファイルの任意の場所に貼り付ければ、Hello worldと表示されます。ただ、現在ではdocument.writeが非推奨となっているのでinnerHTMLを使うのが一般的なようです。

<div id="hoge"></div>
<script>
document.getElementById('hoge').innerHTML = '<p>ほげ</p>';
</script>

上記のコードの意味は、コードは上から順に読み込まれるので、まずidにhogeという名前の付いた中身の入っていないdivタグが読み込まれ、続いてJavaScriptのエリアに入り、hogeというidのdivタグの間に指定したHTML文を入れろという命令が実行されます。

他にも文字を表示する手段はありますが、実際に使ってみるとinnerHTMLが一番活用しやすい印象はありますね。

詳しい事を知りたい人はhttps://qiita.com/RyBB/items/c87af2413c34f9367d00を参考にしてみてください。

document.getElementById('id').innerHTML = '表示したい文字';

idを指定して、その部分のHTMLの内容を書き換えるという意味の命令文になります。JavaScriptでは命令文の最後に「; セミコロン」を付けるのを忘れないようにしましょう。

ここまでのおさらい

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JavaScript練習</title>
</head>
<body>
<div id="hoge"></div>
<script>
document.getElementById('hoge').innerHTML = '<p>ほげ</p>';
</script>
</body>
</html>

文字の表示位置が違う

pタグがある場合と無い場合では若干表示位置が違います。pタグが自動的に隙間を作ってしまうので、注意しましょう。

document.getElementById('hoge').innerHTML = '<p>ほげ</p>';

document.getElementById('hoge').innerHTML = 'ほげ';

文字だけでなく、imgタグなどで画像に切り替えることもできます。

文字の表示位置を変える

普通は文字の表示位置はCSS（スタイルシート）で調節すれば良いのですが、JavaScriptで何か処理を行った結果、表示位置が変わる仕組みにしたい場合は、以下の事を知っているとスムーズに対応できると思います。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JavaScript練習</title>
</head>
<body>
<div id="hoge" style="position:absolute;"></div>
<script>
document.getElementById('hoge').innerHTML = 'ほげ';
document.getElementById('hoge').style.left = '100px';
document.getElementById('hoge').style.top = '100px';
</script>
</body>
</html>

styleで絶対位置を意味するabsoluteを入れた場合です。

最初に言ったDOCTYPE宣言ですが、宣言をしていない場合…

document.getElementById('hoge').style.left = 100;

このように記述しても意図通りに表示されますが、動いているから良いか…と、そのままDOCTYPE宣言しているファイルに載せてしまうと意図しない位置に文字が表示される上に、ブラウザのデバッグツール等にもエラーとして表示されないため、修正が困難になります。

座標は変数でも指定できます。

フォントサイズも変更できる

表示位置だけでなく、フォントサイズも変更出来ます。