JavaScriptの使い方1. 『HTML内に直接書き込む』

    
    <script>
    // JavaScriptによる何らかの処理
    </script>
    
  

JavaScriptの処理内容を、上記のようにscriptタグで囲み、head要素内、もしくはbody要素内のどこかに置きます。

JavaScriptの使い方2. 『外部ファイルを使用する』

    
    <script src=”ファイルへのパス”></script>
    
  

JavaScriptの処理を書いたjsファイルを用意し、それを読み込むためのscriptタグをhead要素内、body要素内いずれかに記述します。

※HTML5より前はscriptタグにtype属性をつける必要があったのですが、HTML5ではtype属性を省略した場合、デフォルトで「type=”text/javascript”」とみなされるようになっていますので、例では省略しています。

文字を出す方法1.『コンソール』に書き出す

ブラウザには『コンソール』と呼ばれる、HTMLの内容やエラー情報を表示する機能が付いています。

全てのブラウザについているかどうかは定かではありませんが、Google Chrome、Firefox、Internet Explorerなど、世界中で主に使用されているブラウザには実装されています。

Internet Explorerの場合、ブラウザを開き、F12キーを押すと開発ツールが起動し、コンソールが表示されますので、そこで確認をします。

例:script

    
    <script>
      console.log('コンソールに文字を出すテスト');
    </script>
    
  

表示イメージ

文字を出す方法2.『メッセージボックス』に書き出す

alert関数という機能を使います。

ブラウザによってメッセージボックスの形状が違う場合がありますが、どれも同じものですので、ブラウザの差異は気にしなくても問題ありません。

ホームページなどで警告文を出す際にもよく使われる方法です。

例:script

    
    <script>
      alert('メッセージボックスに文字を出すテスト'); 
    </script>
    
  

表示イメージ

文字を出す方法3.ページに直接書き出す

少々複雑な方法ですが、一度覚えてしまうと、いろいろなことに応用が利く方法です。詳細は後に記載しますので、まずは例を挙げます。

例:script

    
    <script>
      body = document.body;
      paragraph = document.createElement('p');
      paragraph.textContent = 'ページに直接文字を出すテスト';
      body.appendChild(paragraph);
    </script>
    
  

表示イメージ

若干わかりづらいのですが、各行で行っていることを簡単に説明すると、次のような意味があります。

詳細は別の記事でお伝えしますが、HTMLの要素は、JavaScript上でDOM(Document Object Model)と呼ばれ、『element 型オブジェクト』として扱われます。

element 型オブジェクトはプロパティやメソッドと呼ばれる値や関数を持っており、それらを操作することで、ホームページに動きをつけられます。

算術演算子

算術演算子とはどのような計算をするか示すもので、次の5種類あります。

算数や数学で習うものと違う書き方をするものもあるので、混乱しやすいのですが、慣れるしかありません…！

JavaScriptだけでなく、プログラミング言語で必ず登場する演算子なので、ここで覚えてしまえば他のプログラム言語を使う際にも役立ちます。

代入演算子

代入演算子とは、変数に代入する際に使用する記号のことです。

数値や文字をそのまま代入したり、先に計算をしてその結果を代入したりする可能になります。

『=』と『+=』の2つはよく使う代入演算子です。

加算代入の適切な書き方の例

    
    <script>
      a = 0;
      a += 2;
      console.log(a);
    </script>
    
  

加算代入を行う前に変数『a』に0が代入されているため、適切に処理されています。

正しく代入されない例

    
    <script>
      a += 2;
      console.log(a);
    </script>
    
  

変数『a』に数字が無いため、エラーが出ます。

この2つ以外にも代入演算子はありますが、それらは必要になった際に改めて調べる方が良いと考えております。

MDN(Mozilla Developer Network)というリファレンスサイトがありますので、そちらを参照するのもお勧めです。

MDNによる代入演算子の解説

JavaScript 言語のすべての演算子、式、キーワードについて記述しています。

比較演算子

比較演算子とは、演算子の左右の値を比較して、true(正)もしくは false(誤)を返す演算子のことで、等号や不等号などの記号を組み合わせて書きます。

条件文　『if ~ else』 – 条件によって処理を分けたいときに –

if～else文は条件の欄がtrueだった場合にifブロックの処理を実行し、falseだった場合にelseブロックの処理を実行するプログラムです。

条件の欄には前述の比較演算子をよく利用します。

例　if ~ else

      
      <script>
        if(条件){
          //条件に合う時に実行する処理
        }else{
        //条件に合わない時に実行する処理
        }
      </script>
      
    

例　if ~ else if ~ else

より複雑な条件で分けたい場合は『if ~ else if ~ else』を利用します。

      
      <script>
        if(条件){
          //条件に合う時に実行する処理
        }else if(条件2){
          //ifの条件に合わないがelse ifの条件に合う時に実行する処理
        }else{
          //どの条件にも合わないときに実行する処理
        }
      </script>
      
    

繰り返し文　『for～』 – 同じ処理を繰り返したいときに –

『for』は変数が繰り返す条件を満たしている限り延々と繰り返し処理をします。

絶対に満たされないような条件を設定してしまうと、いつまでも処理を続けてしまいます。

これは『無限ループ』や『永久ループ』などと呼ばれています。

例

      
      <script>
        for(変数;繰り返す条件;繰り返す直前に実行する演算){
          //繰り返し実行する処理
        }
      </script>
      
    

より実践で使用する形に近い繰り返し条件を書くと次のようになります。

      
      <script>
        for(i=0;i<10;i++){
          console.log(i);
        }
      </script>
      
    

forの括弧内を簡単に説明すると次のような意味になります。