javascriptを読み込む３つのパターン

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

最近では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>

ブラウザで表示するとこうなります。
javascriptを読み込む方法１

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.外部ファイルから任意の場所に表示

３つめは外部ファイルから任意の場所に表示する方法。任意の場所に表示（もしくは変更）するためにはどこに表示するかを指定する必要があります。

よく使われるのは、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;

ブラウザで表示すると、以下のようになります。
javascriptを読み込む方法2
ここではidがtitleになっているものを置き換えているので先ほどとは違い、h1の内容が書き換えられています。document.getElementById()で指定した場所のテキストを変更しているわけですね。