第3回 javascriptで色を付ける

色を付けるってcssの役割じゃない?と、ここまで読んでくれた人は思うかもしれないが、javascriptでも色を付けることはできる。ただcssに比べてややめんどくさい。

だが、練習としてはちょうどいいのでやってみてほしい。

色を付ける

今回は、HTMLとjavascriptの2つを作成する。

まずは、次のようなHTMlファイルを作成してほしい。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>色を付ける</title>
</head>

<body>
<div id="iro">
こんにちは
</div>
</body>
</html>

名前はiro.htmlにしてほしい。

こんなダサい名前嫌だという人は違う名前でも構わない。

この部分で重要となるのは、divの「id=”iro”」という部分だ。これはID属性といって、一種の名前のようなものだと思ってくれてかまわない。

次に、javascriptのファイルを作成する。内容は一行で十分だ。名前はiro.jsにしてほしい。

例によって名前が気に入らないのなら、自分の好きな名前にしてもいい。が、必ず英字で名前を付けてほしい。言い忘れたが、HTMLの方も英字で記述してほしい。

document.getElementById("iro").style.color="#ff0000";

少し簡単な説明をする。

document

そのjsファイルを読み込んでいるファイル

getElementById(“iro”)

iroというid名の要素を取得する

style.color=”#ff0000″

取得したid要素の文字の色を変更、今回は#ff0000(赤)。””の中をredとしてもいいが、今後のことも考えて16進数表記をしたほうがいいかもしれない。

ここまで説明しておいてなんだが、これではまだ「こんにちは」の色を赤にすることはできない。

次の一行をHTMLファイルに追記する必要がある。

<script type="text/javascript" src="./iro.js"></script>

srcの後は、jsファイルまでの相対パス(絶対パス)を記述する。今回はHTMLファイルとjsファイルは同じ階層に置いているものとしている。

最終的なファイルを記述しておこう。

iro.html

<!DOCTYPE html>
<html lang="ja">
<meta chaarset="UTF-8">
<title>色を付ける</title>
</head>
<body>
<div id="iro">
こんにちは
</div>
<script type="text/javascript" src="./iro.js"></script>
</body>
</html>

iro.js

document.getElementById("iro").style.color="#ff0000";

ちなみHTMLファイルのほうに記述するjavascriptを使えるようにする宣言は、/bodyの前に書くことが普通だ。

おまけ アラート

デバッグをするときなどにlogやalertを使うことが多い。

今回はついでにアラートの使い方を紹介する。

やり方は簡単で、iro.jsを次のように変更するだけでいい。

document.getElementById("iro").style.color="#ff0000";
alert("hello");

iro.htmlファイルを更新すると、helloとメッセージが出てくるだろう。そのメッセージを閉じると「こんにちは」が表示される。

まとめ

今回はjavascriptの最初の部分に触れたのだが、どうだっただろうか。もちろんjavascriptができることはこんなものだけではない。

このサイトに書かれていることだけは、不十分という場合が多と思う、さまざまなサイトを参照しながらプログラミングをしていくことをおすすめする。