最近ではWebアプリなどでもよく使われるようになったjavascript。AngularJSやNode.jsなどのフレームワークもでてきて複雑なことでも簡単に実装できるようになってます。
jQueryの方が簡単なのでjavascriptをすっとばしてjQueryだけやっちゃう人も多いと思いますが、本格的にWebアプリを作ったりする場合はしっかりjavascriptについても理解しておきたいところ。
javascriptの読み込み方
1.HTMLに直接書く
まずは一番わかりやすいパターン。<script>
タグ内に直接コードを書くことができるので直感的でわかりやすいです。例えばこんな感じ。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Basic Jacvascript</title>
</head>
<body>
<h1>Hello</h1>
<script>
document.write('Next to Hello');
</script>
<p>this is Paragraph</p>
</body>
</html>
ブラウザで表示するとこうなります。
2.外部ファイルから直接表示
2つめは外部ファイルにする方法。HTML内に直接書くのではなく、外部ファイルを用意してその中に書き込みます。先ほどと同じものを外部ファイル化するとこんな感じ。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Basic Jacvascript</title>
</head>
<body>
<h1>Hello</h1>
<script src="js/add-content.js"></script>
<p>this is Paragraph</p>
</body>
</html>
add-content.js
var say = 'Next to Hello';
document.write(say);
ブラウザで表示した結果は先ほどのものと同じになります。
3.外部ファイルから任意の場所に表示
3つめは外部ファイルから任意の場所に表示する方法。任意の場所に表示(もしくは変更)するためにはどこに表示するかを指定する必要があります。
よく使われるのは、HTMLタグのidやclass名(セレクタ)を使用する方法。例えばこんな感じ。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Basic Jacvascript</title>
</head>
<body>
<h1 id="title">Hello</h1>
<p>this is Paragraph</p>
<script src="js/add-content.js"></script>
</body>
</html>
add-content.js
// add text content
var str = 'Next to Hello';
var place = document.getElementById('title');
place.textContent = str;
ブラウザで表示すると、以下のようになります。
ここではidがtitle
になっているものを置き換えているので先ほどとは違い、h1の内容が書き換えられています。document.getElementById()
で指定した場所のテキストを変更しているわけですね。