JavaScript体験

きょうのもくひょう

挨拶プログラムの作成
おみくじアプリの作成

プログラミングってなに？

コンピューターに「命令」を出すこと

HTMLとJavaScriptの概要

Web ページは「見る・読める」だけでなく、クリックや入力に応じて「動く」ことが当たり前になっています。こうしたページを作るときによく登場するのが HTML と JavaScript です。

HTML（Hyper Text Markup Language）

HTML は HyperText Markup Language の略で、文書の構造を記述するマークアップ言語です。

Webページの要素 (見出し、段落、リストなど) の構造を定義します。

<h1>タイトル</h1>   <!-- 見出し -->
<p>本文の段落。</p> <!-- 段落 -->
<img src="photo.jpg" alt="写真"> <!-- 画像 -->
<a href="https://example.com">リンク</a> <!-- 別のページへ -->

Javascript

JavaScript はブラウザ上で動く「動きをつけるためのプログラミング言語」です。

フォームに入力された内容をチェックする
ボタンを押すと画像が入れ替わる
スクロールに合わせてアニメーションを流す

といった「インタラクティブ（双方向）」な機能を実現します。

<button id="show">クリックして挨拶</button>

<script>
  document.getElementById("show").addEventListener("click", () => {
    alert("こんにちは！");
  });
</script>

上の例では、HTML で配置したボタンを JavaScript が見つけ出し、クリックした瞬間にポップアップを表示しています。

挨拶プログラムの作成

jsfiddleにアクセスしてプログラムを作成します。

HTMLを書く

<h1>あいさつしてみよう！</h1>
<button id="hello-btn">あいさつする</button>
<p id="output"></p>

buttonはボタンを作るタグ
pは文字を表示するタグ

Javascriptを書く

<h1>あいさつしてみよう！</h1>
<button id="hello-btn">あいさつする</button>
<p id="output"></p>


<script>
  const helloBtn = document.getElementById('hello-btn');
  const output = document.getElementById('output');
  
  helloBtn.onclick = () => {
  	output.textContent = "こんにちは！";
  }
</script>

getElementByIdでボタンや表示場所を見つけている
onclickは「ボタンが押されたときの動き」

おみくじアプリの作成

HTMLの作成

下記HTMLをコピーして、jsfiddleのHTMLに欄に貼り付けてください。

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<div class="flex justify-center mt-5">
  <button id="omikuji-btn" class="rounded-lg bg-blue-300 px-5 py-3 shadow-md">
    おみくじを引く
  </button>
</div>

<div id="omikuji" class="bg-white w-32 h-64 relative shadow-xl flex items-center justify-center hidden">
  <!-- 紙の内側の赤い線 -->
  <div class="absolute inset-2 border-4 border-red-500 pointer-events-none"></div>
  <div class="absolute inset-4 border-2 border-red-500 pointer-events-none"></div>

  <h2 id="omikuji-label" class="vertical-text text-3xl font-bold tracking-widest z-10"></h2>
</div>

Javascriptを書く

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<div class="flex justify-center mt-5">
  <button id="omikuji-btn" class="rounded-lg bg-blue-300 px-5 py-3 shadow-md">
    おみくじを引く
  </button>
</div>

<div id="omikuji" class="bg-white w-32 h-64 relative shadow-xl flex items-center justify-center hidden">
  <!-- 紙の内側の赤い線 -->
  <div class="absolute inset-2 border-4 border-red-500 pointer-events-none"></div>
  <div class="absolute inset-4 border-2 border-red-500 pointer-events-none"></div>

  <!-- 真ん中に縦書きで「大吉」 -->
  <h2 id="omikuji-label" class="vertical-text text-3xl font-bold tracking-widest z-10"></h2>
</div>

<script>
  const omikujiBtn = document.getElementById('omikuji-btn');
  const omikuji = document.getElementById('omikuji');
  omikuji.classList.add('hidden')
  const omikujiLabel = document.getElementById('omikuji-label');
  
  omikujiBtn.addEventListener('click', e => {
    const randomNum = Math.floor(Math.random() * 5);
    let omikujiText;
    if (randomNum == 0) {
    	omikujiText = "大吉"
    } else if (randomNum == 1) {
    	omikujiText = "中吉"
    } else if (randomNum == 2) {
    	omikujiText = "吉"
    } else if (randomNum == 3) {
    	omikujiText = "小吉"
    } else if (randomNum == 4) {
    	omikujiText = "凶"
    }
    
    omikujiLabel.textContent = omikujiText;
    omikuji.classList.remove('hidden');
  })
</script>

まとめ

プログラムはコンピューターに命令（指示）すること
HTML は文書の構造を記述するためのマークアップ言語
JavaScript はブラウザ上で動く動きをつけるためのプログラミング言語