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>
</head>
<body>
    <h1 id="hello">Hello World</h1>
</body>
<script type="text/javascript" src="sample0301.js"></script>
</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" の表示が入れ替わるようにしてみましょう。

２のヒント： SetInterval 関数（時計を１秒毎に表示するときに使ったもの）を使ってみましょう。

JavaScript 入門講座 第３回

HTML の挿入

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

const element = document.getElementById('hello');
element.innerHTML = '<FONT COLOR="red">Good Morning</FONT>';
JavaScript 入門講座 第３回

$theme: gaia template: invert