JavaScript とは
JavaScript（JS） は、主に Webページに動的な機能を追加するためのプログラミング言語 です。
Webブラウザ上で動作し、HTML や CSS と連携して、ユーザーの操作に応じた動的な動作を実現できます。
今回は簡単な例を見ながらJavaScriptを学んでいく
例1 「ボタンをクリックすると文字が変わる」実装
以下のコードを考える
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript入門</title>
</head>
<body>
<h1 id="message">こんにちは！</h1>
<button onclick="changeText()">クリックして変更</button>
<script>
function changeText() {
document.getElementById("message").textContent = "JavaScriptを学ぼう！";
}
</script>
</body>
</html>
<h1 id="message">：変更するテキストを囲む要素
<button>：クリックしたら動作するボタン
onclick="changeText()"：ボタンをクリックすると changeText 関数が実行される
document.getElementById("message").textContent = "JavaScriptを学ぼう！";
→ id="message" のテキストを変更する!
このコードを実装するとつぎのようになる。
この画面の「クリックして変更」と書かれてある部分をクリックすると以下のようになる。
「こんにちは！」の部分が「JavaScriptを学ぼう！」にかわりました。
このようにJavaScriptはWebのフロント部分を動的に変化させることが可能となります。
例2 「入力テキストの表示」
つづいて以下のコードを試す。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 入門</title>
</head>
<body>
<h1>JavaScript 入門</h1>
<input type="text" id="userInput" placeholder="ここに入力">
<button onclick="displayText()">表示</button>
<p id="outputText">ここに入力内容が表示されます</p>
<script>
function displayText() {
// 入力フォームの値を取得
let inputText = document.getElementById("userInput").value;
// 取得した値を画面に表示
document.getElementById("outputText").textContent = inputText;
}
</script>
</body>
</html>
<input type="text" id="userInput">
→ ユーザーがテキストを入力するフォーム
<button onclick="displayText()"表示</button>
→ ボタンをクリックすると displayText 関数が実行される
document.getElementById("userInput").value;
→ 入力フォームの値を取得する
document.getElementById("outputText").textContent = inputText;
→ 取得した値を <p> の中に表示する
これを実装すると以下のようになる
このテキストボックスに例えば
このようにテキストをいれ、「表示」ボタンを押すと
このように表示される。