JavaScript 入門講座

JavaScript 第３回 / 全６回

JavaScript 入門講座 第３回

おさらい（LAMP環境）

JavaScript 入門講座 第３回

フロントエンドとバックエンド

  • 今までやってきた JavaScript は主にフロントエンド（ブラウザ上）で動かすための環境です。
  • 今まで書いてきた HTML や JavaScript はローカルに保存されてました。
  • これらをインターネット上に公開するためには、サーバーが必要です。
  • サーバー上の HTML や JavaScript をユーザーのブラウザへ配信するための環境をバックエンドと呼びます。
JavaScript 入門講座 第３回

フロントエンドで出来ること

  • クライアント（ブラウザ側）の見た目の変更
  • ブラウザへ入力した内容のサーバーへの送信

フロントエンドで出来ないこと

  • 他の訪問者の情報や入力内容の閲覧、編集
  • サーバー上の情報（データーベースなど）を書き換えること
JavaScript 入門講座 第３回

おさらい（HTML）

<html>
<head>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>
JavaScript 入門講座 第３回

JavaScript から HTML の書き換え（準備）

  • HTML の書き換えたいタグに id="hello" を書き込みます。
<html>
<head>
    <script type="text/javascript" src="sample0301.js"></script>
</head>
<body>
    <h1 id="hello">Hello World</h1>
</body>
</html>
JavaScript 入門講座 第３回

JavaScript から HTML の書き換え

以下の JavaScript により、 "Hello World" の文字が "Good Morning" に書き換わります。

const element = document.getElementById('hello');
element.innerText = "Good Morning";
JavaScript 入門講座 第３回

練習

  1. SetTimeout 関数を利用して、 5秒後に文字が書き換わるようにしてみましょう。
  2. 余力があれば、 5秒ごとに "Hello World" と "Good Morning" の表示が入れ替わるようにしてみましょう。
JavaScript 入門講座 第３回

HTML の挿入

以下のようにすると、 HTML タグも差し込むことが出来ます。

const element = document.getElementById('hello');
element.innerHTML = "<FONT COLOR="red">Good Morning</FONT>";
  • タグを文字列で書き換えるよりも効率の良い方法があります。
JavaScript 入門講座 第３回

木構造

  • 根から葉へと木が先端に行くまでの経路と似ているので、以下のようなデーター構造を「木構造」と言います。
  • HTML は木構造。
html
├ head
└ body
　　└ h1
　　　　└ "Hello World"
JavaScript 入門講座 第３回

DOM(Document Of Model)

HTML が木構造で表されているという性質を使い、 JavaScript から HTML を操作できる DOM という便利な概念があります。

  • document.body で HTML の BODY タグが取れます。
  • このタグに innerHTML でタグを書き込めば、何でも出来ます。
  • 書き込みにも DOM を使うと、より便利に HTML 構造が書けます。
JavaScript 入門講座 第３回

DOM サンプル

以下の JavaScript で、 IMG タグの src 属性のみを書き換えることが出来ます。

<html>
<head>
    <script type="text/javascript" src="sample0303.js"></script>
</head>
<body>
    <img id="dog" src="https://x.gd/9Uow0"></img>
</body>
</html>

const element = document.getElementById('dog');
element.setAttribute('src', 'https://x.gd/LLx5A');
JavaScript 入門講座 第３回
JavaScript 入門講座 第３回

$theme: gaia template: invert