【初心者】JavaScriptってなに?

スポンサーリンク
JavaScript

JavaScriptってなーに?

webページをインタラクティブにする言語です。

cssはwebページをきれいに装飾できますが、「ボタンを押したらポップアップが出てくる」とか、「背景色をランダムで変える」とか、webページに動きをつけることはできません。

これをやってくれるのがJavaScriptです!(ドヤァ

Webページを、よりリッチに、より、楽しめるものにするための言語ですね!

JavaScriptは他にもいろんなことができて、結構オールラウンドプレーヤーですが、ここでは 「htmlを操作するJavaScript」に絞ってご紹介したいと思います。

Htmlを操作してみよう

javascriptでは、documentというキーワードをつかって、html内のほぼすべてを操作することができます。

documentを使って取得されたオブジェクトのことを「Document Object Model」略して「DOM」といいます。

なお、ここでは文法等について詳しく話しません。

べつに、マネする必要もありません。「フーン、こんなことできるんだな、JavaScriptって。」というテンションでご覧ください。

準備

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>JavaScript練習</title>
    <style>
      #target{
        height: 200px;
        width: 600px;
        background-color: #36C9C6;
        color: #ffffff;
        font-size: 3em;
      }
    </style>
  </head>
  <body>
    <div id="target">
      変更前
    </div>
    <script>
      // ここにJavaScriptを書く
    </script>
  </body>
</html>

文字を挿入してみる

bodyタグの中にscriptタグを作って下記のように書き換えてみます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>JavaScript練習</title>
    <style>
      #target{
        height: 200px;
        width: 600px;
        background-color: #36C9C6;
        color: #ffffff;
        font-size: 3em;
      }
    </style>
  </head>
  <body>
    <div id="target" class="target_div">
      変更前
    </div>
    <script>
      // Divの中身を書き換える
      document.getElementById("target").textContent = "何が花金だよ!こちとらファッキンじゃい!";
    </script>
  </body>
</html>

変更、保存して、ブラウザをリロードすると画像のようになっていると思います。

早すぎて、最初から画像のような文字になっているように見えますが、htmlにて「変更前」と描画された後に、javascriptで書き換えられた結果なのです。

こんな風にJavaScriptは、htmlの中身を書き換えることができます。

ボタンを押したら文字が変わる処理を書いてみよう

先ほどの例では、あまりにもJavaScriptの処理が速すぎて、本当にJavaScriptが変更しているのかわかりません。

ここで、ボタンを押したら、文字が一瞬にして変わるようにしてみましょう。

まずは、準備の項目でつくったhtmlにボタンを追加します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>JavaScript練習</title>
    <style>
      #target{
        height: 200px;
        width: 600px;
        background-color: #36C9C6;
        color: #ffffff;
        font-size: 3em;
      }
      #text_chenge_button{
        background: #ED6A5A;/*ボタン色*/
        border-radius: 3px;
        color: #ffffff;
      }
    </style>
  </head>
  <body>
    <div id="target" class="target_div">
      変更前
    </div>
    <div>
      <button type="button" id="text_chenge_button">
        チェンジ!
      </button>
    </div>
  </body>
</html>

そこに、「文字を変更してみる」の項目と同じ位置にscriptタグを追加し、下記コードを追加します。

    <script>
      document.getElementById("text_chenge_button").onclick = function(){
        // ボタンを押したときに行われる処理

        // divのテキストを変更
        document.getElementById("target").textContent = "何が花金だよ!こちとらファッキンじゃい!";
      };
    </script>

ボタンとか、ロマンあふれますね。

こんな風に、いろいろなアクションに応じて、なにか処理をすることもできます。

JavaScriptってこんな言語です。

コメント

タイトルとURLをコピーしました