WeBlog

Webに関する情報を中心に発信してるブログ

JavaScriptについて

JavaScriptとは?

JavaScriptとはブラウザ(クライアント)で動くプログラムが書ける言語です。

JavaScriptを使ってHTMLやCSSを動的に書き換えることができます。

HTMLで文章や画像などの構造を作成し、CSSで見た目を整えて、JSで動きをつけるという感じです。

JavaScriptの3つの書き方

① scriptタグで囲ってあげて中に書く

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
       # head内にscriptで囲って書ける
       <script>
           alert("OK");
       </script>
</head>

<body>
    <p>ここをクリック</p>
        # body内にもscriptで囲って書ける
        <script>
           alert("OK");
       </script>
</body>

# bodyの外でscriptで囲って書ける
<script>
   alert("OK");
</script>

</html>

HTMLの中に<script>〜</script>で囲ってあげて、その中にJSのコードを書くことができます。

ちなみに<script> alert("OK"); </script>は、<head> </head>の中で書いても<body> </body>の中で書いても動作します。

② HTMLのタグに直接書く

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <p onclick = "alert('OK');">ここをクリック</p>
</body>

</html>

pタグにonclick = "alert('OK');"と書いていますが、このように直接書くこともできます。

pタグがクリックされたら、アラートウィンドウに「OK」と表示するコードです。

JSをHTMLのタグ自体に「onclick」などを使って直接書く方法を「イベントハンドラ」といいます。

他にも「マウスが乗ったら」「キーボードで入力したら」などいろんなイベントを設定できます。

HTMLコードにイベントハンドラを使って直接書く方法はHTMLとJSがごちゃごちゃになるので、オススメ出来ません。

③ 外部ファイルを読み込む

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
       <script type="text/javascript" src="main.js"></script>
</head>

<body>
    <p>ここをクリック</p>
</body>

</html>

<script type="text/javascript" src="main.js"></script>が外部ファイルとして切り出した

同じ階層上にあるmain.jsと言うファイルを読み込むコードです。

なのでJSのコードはmain.jsと言うファイルに切り出して書くことができます。

基本的には①か②で書くことがおすすめです。

JSのコードが多くなれば、③で外部に切り出して書くことをお勧めします。

JavaScriptで気をつけるべきこと

JavaScriptを記述する位置は注意が必要です。

下記のコードを見てください。

このコードはエラーになります。

なぜかというと、パソコンはプログラムを上から1行1行順番に実行していきます。

なので、最初にJSのコードを読み込んで実行します、

そうすると、<p id="blue">ここをクリック</p>より前にJSを記述しているので、操作対象を取得するdocument.getElementById('blue');と言うコードでそんなid属性のタグ無いよ・・・と言われます。

id = 'blue'ってどれのこと???となるわけです。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
       <script>
           let element = document.getElementById('blue');
           element.style.color = 'blue'
       </script>
</head>

<body>
    <p id="blue">ここをクリック</p>
</body>

</html>

なので、下記のように書く必要があります。

pタグよりも下のJSのコードを書くことで、JSのコードが実行される時にはid属性blueがあるので、問題なく動作します。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <p id="blue">ここをクリック</p>
</body>
<script>
  let element = document.getElementById('blue');
  element.style.color = 'blue'
</script>

</html>

他にも

・全角文字はシングル or ダブルクオートで囲う

・全角スペース

・外部のJSファイルを読み込むパス

にも注意が必要です。

DOMを操作する

JavaScript言語は「DOM」を操作する言語です。

DOMは「Document Object Model」の略でHTMLの要素のアクセスして、要素の情報を「作成・取得・更新・削除」したりするための仕組みです。

サーバーから返ってきたHTMLファイルは、ブラウザ上で上から1行1行読み込まれた下記のように「DOMツリー」が作られます。

f:id:weblog_tec:20210424232707j:plain

DOMツリーは各要素ごとに枝分かれさせて、お互いの親子、兄弟関係をわかりやすくしたものです。

DOMツリーにある1つ1つの要素のことをJSでは「ノード」と言います。

プログラムは上から1行1行読み込まれるので、まず「document」と言われるノードが作られます。

その下にHTMLノードが出来ます。

各タグが読み込まれるごとにノードができます。

このようにしてDOMツリーが出来上がります。

JSでは出来上がったDOMツリーを使って、特定の要素を操作しま。

f:id:weblog_tec:20210425225017j:plain

なので、先ほど「JavaScriptで気をつけるべきこと」であげたエラーになってしまうコードは、DOMが出来上がる前にJSでHTMLを操作しようとしているためにエラーになります。

www.w3schools.com

DOMが作り終わってからJSを実行するようにする

先ほどDOMツリーが出来上がる前にJSで操作をしようとするとエラーになることがわかりました。

では、DOMが作り終わるまで実行しないようにするにはどうすればいいでしょうか?

その場合書き方として2つあります。

①画像やCSSも全て読み込まれてから実行する

windowオブジェクトのaddEventListenerメソッドを使って、loadと言うイベントを設定しています。

このloadと言うイベントは、「HTML、画像、CSS」全てを読み込んでからJSを実行するコードです。

こう書けば、DOMツリーが作成されてからJSを実行することができます。

ちなみにブラウザは、CSSも画像も持っていないので、その都度サーバーに「このCSSファイルちょうだい」などと通信を投げています。

window.addEventListener('load',
  function () {
        // JSのコードを書いていく
    }
);

② DOMが作成されたら実行する

DOMContentLoadedと言うイベントがDOMが作成されたらJSを実行するコードです。

ブラウザはまずDOMを作ってから、その後に「画像やCSS」を読み込みます。

なので、JSはDOMを操作する言語なので、「DOM」が作り終わったら操作するDOMContentLoadedが良いです。

window.addEventListener('DOMContentLoaded',
  function () {
        // JSのコードを書いていく
    }
);

オブジェクトって何?

JavaScriotは「DOMオブジェクト」を操作する言語です。

オブジェクトは「プロパティ」と「メソッド」を持っている物体のことです。

f:id:weblog_tec:20210424232801j:plain

上記の画像は左が現実世界、右がプログラムの世界です。

現実世界には色々は物体が存在します。

「車」「犬」「人間」「イルカ」・・・などなどです。

例えば猫がいます。

この猫は「毛の色」「体重」「鼻の高さ」・・・などいろんな情報を持っています。

そして、この猫は「走る」「寝る」「食べる」・・・などいろんな行動ができます。

プログラムの世界に猫を落とし込んでみると、

猫(オブジェクト)が持つ情報を保管しているのが「プロパティ」です。

プロパティとかっこよく行っていますが、ただの変数です。

猫(オブジェクト)ができる行動(実行できる処理)がメソッドです。

メソッドとかっこよく行っていますが、ただの関数です。

オブジェクトは情報や行える処理(行動)を持っています。

このように、現実世界の考え方をプログラムの世界にも取り入れて、プログラムを作ることをオブジェクト指向と言います。

なので、プロパティはその物体が持つ情報です。

メソッドはその物体ができる行動(処理)です。

JavaScriptのオブジェクト

先ほどオブジェクトについてみましたが、JSはオブジェクトを操作するので、オブジェクトがたくさんあります。

例えば

・windowオブジェクト

・documentオブジェクト

・Stringオブジェクト

などたくさんあります。

documentオブジェクトはHTMLのプロパティ(情報)やメソッド(処理)を持っています。

なので、HTMLを書き換えるや追加するなどできます。

先ほど

document.getElementById('blue');

と書きましたが、このdocumentがオブジェクトです。

このオブジェクトがgetElementById()と言うメソッドを持っているので使えるということです。

windowオブジェクトは画面を操作します。

なので、画面の横幅、縦幅の情報(プロパティ)を持っていたりします。

なので、画面の横幅や縦幅などを取得できます。

オブジェクトによって持っている情報(プロパティ)やできる処置(メソッド)が違うので、JSで何かを操作するにはオブジェクトを取得する必要があります。

先ほどの記述をみてみます。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <p id="blue">ここをクリック</p>
</body>
<script>
           let element = document.getElementById('blue');
           element.style.color = 'blue'
</script>

</html>

let elementで変数elementを作成しています。

documentオブジェクトの中にはgetElementById()と言うメソッドを持っています。

なので。id属性blueのオブジェクトを取得して、そのオブジェクトはstyleプロパティの中にcolorプロパティを持っているので、そのプロパティの情報を'blue'に変えています。

オブジェクトを操作するには

# オブジェクトのメソッドを操作する
オブジェクト名.メソッド名(引数);

# オブジェクトのプロパティを操作する
オブジェクト名.プロパティ名 = 値

JavaScriptの構文

switch文(条件分岐)

switch(num){
    case 1:
    console.log('1です');
    break;
    case 2:
    console.log('2です');
    break;
}

もし〇〇の場合は〜をする。〜の場合は〜をする。

という書き方。

if文(条件分岐)

if(num == 3){
    console.log('numは3です');
}else if(num == 5){
    console.log('numha5です');
}else{
    console.log('それ以外です');
}

もし〇〇の場合は〜をする。〜の場合は〜をする。それ以外は〜をする。

という書き方。

while文(繰り返し文)

while( i < 10 ){
    console.log(i);
    i++;
}

〇〇の間〜をする。

今回で言うと10未満の場合はログにiを出力する。

for文(繰り返し文)

for(let i = 0; i <10; i++){
    console.log(i);
}

〇〇の間〜をする。

今回で言うと10未満の場合はログにiを出力する。