JavaScript じてん (うごきヘん)

HTMLや CSSに「いのち」をふきこもう！

⚡ 1. JavaScript (ジャバスクリプト) ってなあに？

HTML, CSS となにがちがうの？

これまでまなんだ HTML と CSS だけでは「とまった」ページしかつくれなかったね。
JavaScriptは、そのページに「うごき」をつけるための、ほんかく的な プログラミングげんご なんだ。

HTMLにどうやってかくの？

CSSとおなじで、HTMLファイルにかくばしょがきまっているよ。
<head> のなかに <style> をかいたように、こんどは <body> の いちばんさいご に <script> タグをかくのがおやくそくだよ。

<body>
  <h1>こんにちは</h1>
  <button>おしてね</button>

  <script>
    // ここに JavaScript の コードを かくよ！
    console.log("ページが よみこまれたよ");
  </script>
</body>
            

🖱️ 2. 「イベント」 (うごきだすきっかけ)

JavaScriptがうごきだすには、「きっかけ」がひつようだ。
たとえば、「ボタンがおされたとき」や「マウスがのったとき」など...
この「きっかけ」のことを イベント とよぶよ。

onclick (クリックイベント)

いちばんよくつかうイベントだよ。
「クリックされたときに、この JavaScript をじっこうして！」と HTMLのタグにちょくせつめいれいできるんだ。

かきかた

<button onclick="myFunction()">おしてね</button>

<script>
  function myFunction() {
    alert("ボタンが おされたよ！");
  }
</script>
                    

がめんイメージ

✍️ 3. 「DOMそうさ」 (HTMLや CSSをかきかえる)

JavaScriptのほんとうのすごさは、HTMLや CSSをあとからじゆうにかきかえられること！
このぎじゅつを「DOM（ドム）そうさ」とよぶよ。

document.getElementById()

「ドキュメント（このページ）のなかから、IDをつかって、タグをつれてきて！」というめいれいだよ。
CSSの #id セレクタとにているね。

かきかた

// HTMLの <p id="message"> を つかまえる
const pTag = document.getElementById("message");
                    

.innerHTML (HTMLをかきかえる)

getElementById でつかまえたタグの、なかみの HTML をぜんぶかきかえるワザだよ。
「こんにちは」を「さようなら」にかえたりできるんだ。

かきかた

// "message" という IDの タグを つかまえて...
const pTag = document.getElementById("message");
// なかみを かきかえる！
pTag.innerHTML = "さようなら";
                    

.style (CSSをかきかえる)

つかまえたタグの CSS（インラインスタイル）をちょくせつかきかえるワザだよ。
もじのいろをあかくしたり、おおきさをかえたりできるんだ。

かきかた

// "title" という IDの タグを つかまえて...
const h1Tag = document.getElementById("title");
// スタイルを かきかえる！
h1Tag.style.color = "red";
h1Tag.style.backgroundColor = "yellow";
                    

💡 ぜんぶくみあわせたれい

「ボタンをおしたら、ID (#message) をもつタグのもじをかきかえる」
これが JavaScript のきほんにしておうぎだよ！

HTML と JavaScript

<!-- なまえを つけておく -->
<h1 id="message">こんにちは</h1>

<!-- クリックしたら changeText() を よぶ -->
<button onclick="changeText()">もじを かえる</button>

<script>
  function changeText() {
    // 1. "message" を つかまえる
    const h1Tag = document.getElementById("message");
    
    // 2. なかみを かきかえる
    h1Tag.innerHTML = "ありがとう！";
    
    // 3. (おまけ) いろも かえる
    h1Tag.style.color = "red";
  }
</script>
            

⚡ 1. JavaScript (ジャバスクリプト) って なあに？

HTML, CSS と なにが ちがうの？

HTMLに どうやって かくの？

🖱️ 2. 「イベント」 (うごきだす きっかけ)

かきかた

がめんイメージ

✍️ 3. 「DOMそうさ」 (HTMLや CSSを かきかえる)

かきかた

かきかた

かきかた

💡 ぜんぶ くみあわせた れい

HTML と JavaScript

がめんイメージ

⚡ 1. JavaScript (ジャバスクリプト) ってなあに？

HTML, CSS となにがちがうの？

HTMLにどうやってかくの？

🖱️ 2. 「イベント」 (うごきだすきっかけ)

✍️ 3. 「DOMそうさ」 (HTMLや CSSをかきかえる)

💡 ぜんぶくみあわせたれい