はるですブログ
HARU's blog

素人がプログラミングを使って
こどもの成績を向上させるブログ
勉強アプリ

【試そう】素人がJavaScriptに挑戦してみた。

もくじ
  • JavaScriptとは?
  • 書いてみよう!
  • 実行してみよう!

JavaScriptとは??

JavaScriptを聞いたことのある方がいらっしゃると思いますが、それがどういうものなのかを理解されている方は多くないのではと思います。

私も数ヶ月前プログラムを学ぶまではその一人でしたが、いざプログラムを学んでいくと、JavaScriptをちょっと知るだけで、まったく世界観が変わってきます。

JavaScriptとは、前回説明したHTMLのコードを動的に書き換えることができます。表示する文字そのものを変えたり、見た目を変えたり、グラフ化したり、いろんなことができます。

書いてみよう!

では早速JavaScriptを少しかじってみましょう。まずは以下のコードをそっくりそのまま書いてみます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>はるですブログ</title>
</head> 
<body>
 <button>ボタン</button>
  <h1 id = "target">Hello!</h1>
  <h2>見出し2</h2>
  <h3>見出し3</h3>
  <script>
    document.querySelector('button').addEventListener('click', () => {
    document.getElementById('target').textContent = 'goodbye!';
  });
  </script>
</body>
</html>

これをメモ帳などに書き、名前を hello.html  といった拡張子に変えます。

実行してみよう!

今回も中身の説明はともかく、さきほど書いた、hello.htmlをダブルクリックして立ち上げてみましょう。

前回の画面に加えて、ボタンが追加されていると思います。

では、このボタンを押してみましょう!!

Hello! が goodbye! に変わったかと思います。ボタン自体は作られていますが、<script>内のコードでボタンが押されたら、Hello! を goodbye!に変えるスクリプトが書かれているのです。

これで皆さんもJavaScriptできちゃいましたね。

それではまた次回へ!

ABOUT ME
はる
はる
45歳。3児の父。ごく普通のサラリーマン。 趣味は広く浅く。 プログラムもかじった程度。
RELATED POST

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA