Go to Qiita Advent Calendar 2024 Top
LoginSignup
5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@intern

Javascript(nojimayusuke)

Last updated at Posted at 2014-05-01

##JavaScript
####概要

  • ブラウザに実装されているスクリプト言語
  • 動きのあるウェブサイト
  • Javaではない
  • コメントの書き方（/* */ , // ）
  • スクリプトを外部ファイルに書くことも可能
  • Javascriptの拡張子　.js
<body>
  <script src="myscript.js"></script>
  <script>
  /*
    コメント
  */
  //コメント
  console.log("hello world");
  </script>
</body>
  • ブラウザ->表示タグ->開発/管理->javascript コンソール

###myscript.jsの作成

console.log("hello from script")

###変数の作成

<script>
  var msg;
  msg = "hello world";
 console.log(msg);
</script>
  • 変数：データにつけるラベル
  • 変数宣言　「var」
  • 文の区切り「;」
  • 代入演算子「=」
  • 「msg = "hello world!"」のように記述する。
  • 「=」->右辺のものを左辺に代入するという意味
  • 変数の宣言と代入は「var msg="hello world!";」のように一気に書くことも可能

###Javascriptで扱えるデータの種類

  • 文字列
  • 数値
  • 真偽値（true/false）条件が真か偽かの評価や論理演算などに用いられる。
  • オブジェクト
  • 配列
  • 関数
  • 組み込みオブジェクト
  • undefined(定義されていない)
  • null(何もない)

###数値の種類と演算子

<script>
  var x;
  x = 10 * 2;
  x = 10 % 3;
  x += 5;
  x++;
  x--;
  console.log(x);
</script>
  • 四則演算「+」「-」「*」「/」
  • 余りを表す「%」
  • 代入を伴う演算子「x = x + 5;」->「x += 5;」と記述できる。
  • 単項演算子「x++;」1を足しなさいという意味

###文字列

<script>
 s = "hello";
 s = 'hello';
 s = 'it\'s\n a pe\tn.';
 s = "hello" + "world";
 s = "5" +5;
 console.log(s);
</script>
  • 文字列の表現 -> 「"」「'」で囲う。
  • 特殊文字 -> 「\」の後に文字を付けて表現する。
  • 改行「\n」
  • タブ「\t」
  • 「'」で囲った中で「'」を使うとき -> 「'」
  • 文字列を連結するとき -> 「+」を使う
    　*　数値同士の演算の場合には数値になり、文字列同士の場合には連結になるが、片方が文字列の場合は「+」がでてくると文字列の連結になるので気をつける。

###if文を使った条件分岐

<script>
 var score = 50;
 if (score > 60) {
   console.log("ok!");
   } else if (score > 40) {
   console.log("soso...");
   } else {
   console.log("ng!");
   }
</script>
  • if文の基本的な構文
  • 「if(条件){}」条件が真だった場合の処理をその中に記述
  • 条件が真偽の偽だった場合の処理 ->「else{}」と記述
  • さらに条件をつなげて記述する場合、「else if」で条件を増やす。
  • 比較演算子
  • 大きい小さい「>」「<」
  • 以上以下「>=」「<=」
  • 等しい等しくない「===」「!===」
  • 論理演算子
  • AND -> 「&&」
  • OR -> 「||」
  • NOT -> 「!」

###真偽値と三項演算子

<script>

     /* 真偽値 */

  if(x) {
    //処理
  }

  if (x !=='') {
    //処理
  }

     /* 三項演算子 */
  var max, x, y;
  max = (x > y) ? x : y;

</script>
  • 真偽値
  • 比較演算子を使わなくても、値自体で真偽値を判定することができる。
  • 文字列の場合 -> 空文字列以外true
  • 数値の場合　-> 0かNaN(特殊な型)以外true
  • true/false
  • オブジェクトに関して -> null以外だったらtrue
  • undefinedとnull -> 両方false
  • 三項演算子
  • ある条件下においてif-else文を書き換えることができる構文
  • 例　「if(条件){ a = b;}else{ a = c;}」-> 「a = (条件)?b:c;」と書き換える事ができる。

###switch文

<script>
   var signal = "blue";

   switch (signal) {
      case "red":
         console.log("stop");
         break;
      case "green":
      case "blue":
         console.log("go!");
         break;
      case "yellow":
         console.log("slow down!");
         break;
      default:
         console.log("wrong signal");
         break;
    }
</script>
  • switch文
  • ある変数が取りうる値が複数あって、それに応じて処理を振り分けたい場合にすっきり書くことができる構文
  • 処理が終わったという合図 -> 「break;」
  • 上記だと、"red""green""yellow"でもない場合に何とかの処理をしなさいという場合に「case」の部分を「default:」にする。
  • 「case」は続けて書いていくことが可能である。

###while文

  • while文
<script>
  var i = 0;
  while (i < 10){
    console.log(i);
    i++;
}
</script>

  • ループ処理（繰り返し処理）を行う。

  • 0-9までの数値を出力するというプログラム

  • whileの後に条件を書いていって、この条件が真で間、次のことを繰り返しなさいという構文になる。

  • do...while文

<script>
  var i = 0;
  do {
    console.log(i);
    i++;
  } while (i < 10);
</script>
  • ループがdoで始まって条件で終わるという形になっている。
  • while文とdo...while文の違いは、条件判定が先に行われるか後に行われるかの違いになる。

###for文

  • for文は、forで書いた後に丸括弧で３つのものを「;」で区切って記述する。
  • 「var i =0;」ループを回すための変数を初期化
  • 「i<10」の条件が真である間、波括弧の中の処理を実行
  • 「i++」は処理を行うごとにiを１ずつ足すという意味
<script>
  for (var i = 0; i < 10; i++) {
    if (i === 5) {
       break;
    }
   console.log(i);
  }
</script>
  • break文 -> ループを抜けるための命令
  • iが5のときにループを抜ける
<script>
  for (var i = 0; i < 10; i++) {
    if (i === 5) {
       continue;
    }
   console.log(i);
  }
</script>
  • continue文 -> ループ処理を１回スキップするための処理
  • 実行結果は５だけ抜けている

###ユーザーに情報を提示したりユーザの確認を求めたりといった命令
#####alertを使った場合

<script>
   alert("hello");
</script>
  • ブラウザで実行すると「hello」というテキストとOKボタンが付いたダイアログボックスが出現。
  • ユーザに何らかの情報を提示したい場合にはよく使用する。

#####confirmを使った場合

<script>
   var answer = confirm("are you sure?");
   console.log(answer);
</script>
  • 「are you sure?」メッセージを出して、OKボタンだけではなくキャンセルボタンがついたダイアログボックスを出現させる。
  • confirmには返り値があり、OKを押すとtrueがキャンセルボタンを押すとfalseが返ってくる。
  • 削除処理に使用できる。OKボタンを押されたら実際の削除処理を行うといった使い方。

#####prompt

<script>
  var name = prompt("お名前は？","名無しさん");
  console.log(name);
</script>
  • ユーザから情報を受取るために使用する。
  • これも返り値があり、もし何かが入力されたらその値が帰って、nameという変数に格納される。何も入力されなくキャンセルが押された場合nullが返ってくる。
  • 第２引数を取ることができ、最初からダイアログボックスに入れておく初期値を設定することも可能である。

###関数の使用

  • 関数というのは、複数の処理をまとめて名前をつけたもの。
 関数：複数の処理

 function 関数名（引数）{
     処理
     return 返り値
 }

<script>
  function hello(name) {
    console.log("hello" + name);
  }
  hello("Tom");
  hello("Bob");
</script>
  • 関数にオプションを与えることができる。-> 引数を関数名の後の丸括弧の中に入れる。
  • 引数は「,」区切りでいくつでも使うことができる。
<script>
  function hello(name) {
    return "hello" + name;
  }
  var greet = hello("Tom");
  console.log(greet);
</script>
  • 関数から返り値をもらいたいとき -> 「return 返り値」
  • 文字列を返してほしいとき「function hello(name) { return"hello"+name; }」と記述

###ローカル変数

  • 関数内で宣言した変数について重大なルールがある。
<script>
  function hello(name) {
      var msg = "hello " + name;
      return msg;
  }
  var greet = hello("Tom");
  console.log(greet);
</script>
  • 関数内で定義した変数は「ローカル変数」と呼ばれていて、その関数の中でしか有効ではない。関数外からアクセスしようとするとエラーになる。
<script>
   var hello = function(name) {
     var msg = "hello " + name;
     return msg;
   };
   var greet = hello("Tom");
   console.log(greet);
</script>
  • 関数は実はデータ型であるので、変数に入れることも可能。
  • 「var hello = function hello(name)...」と記述することができる。-> 関数名が省略されていて関数名がないので関数自体は無名関数とは匿名関数と呼ばれている。
  • 「var hello = function hello(name)...」自体が式になるので、最後に「;」を付けるのを忘れない。

###即時関数

<script>
  (function(name) {
      console.log("hello " + name);
  })("Tom");
</script>
  • 定義した後にすぐに呼び出したい場合 -> 「(」と「)」で全体を囲った後に「()」を付ける
  • 定義してすぐ実行するので、即時関数と呼ばれる。
  • 引数を取る場合は「()」の中に値を入れれば良い。
<script>
  (function() {
     var x = 10;
         y = 20;
     console.log(x + y);
  })();
</script>
  • 関数名の省略が可能
  • 自分が書いたプログラムの変数を、他の人のプログラムから影響を受けたり他の人の変数に影響を与えたりしないローカル変数にするにもよく使われる。
  • 関数内で定義された変数は外からアクセスできない -> 即時関数で囲うことによって変数を安全につかうことができる。

###タイマー処理
#####setInterval

<script>
  var i = 0;
  function show() {
    console.log(i++);
  }
  setInterval(function() {
    show();
  },1000);
</script>
  • ある一定時間ごとにカウントアップするようなプログラム
  • ある一定時間ごとにある処理を繰り返す
  • 前の処理が終わったかどうかというのを考えずに次の処理を始めてしまうので、あまりにも処理が重い場合には、次々に新しい処理が実行されて、ブラウザがクラッシュしてしまうおそれがある。

#####setTimeout

<script>
   var i = 0;
   function show() {
       console.log(i++);
   }
   setTimeout(function() {
       show();
   }, 1000);
</script>
  • １秒後にshowを実行する
  • 前の処理が終わったかどうかを考慮するので、繰り返し処理によく使われる。

#####setTimeoutでの繰り返し処理

<script>
  var i = 0;
  function show() {
     console.log(i++);
     var tid = setTimeout(function() {
         show();
     },1000);
     if (i > 3) {
         clearTimeout(tid);
     }
  }
  show();
</script>
  • 「function show() {...}」の中に「setTimeout(function(){show();},1000);」を入れてしまえば、showの中でshowを呼び出すのでループになる。

#####タイマーの止め方

<script>
   var i = 0;
   function show() {
       console.log(i++);
       var tid = setTimeout(function() {
           show();
       },1000);
       if (i > 3) {
           clearTimeout(tid);
       }
    }
    show();
</script>
  • setTimeoutを呼び出すときに「var tid = setTimeout...」として、タイマーIDを変数の中に入れる。
  • iが３より大きくなったらタイマーを止めたい場合はclearTimeoutで先ほどのIDを指定する

###配列について

<script>
  var score = [100,300,500];
  console.log(score[0]); 
</script>
  • 添字は0から始まる
  • 値を取得するだけではなく、score[2]を書き換えたいという場合 -> 「score[2] = 400;」
  • 配列の中をすべて表示する -> 「console.log(score);」
  • 配列は数字だけではなく、いろいろなデータ型を混ぜることもできる。

#####配列の中に配列を入れる

<script>
  var m = [
      [1,2,3],
      [4,5,6]
      ];
      console.log(m[1][1]);
</script>

###オブジェクトを使う

<script>
  var user = {
    email: "taguchi@gmail.com",
    score: 80
  };
  console.log(user["email"]);
  console.log(user.email);
  user.score = 100;
  console.log(user);
</script>
  • オブジェクトも配列と同じようにグループ化されたデータになる。
  • 配列では値のみがグループ化されていたが、オブジェクトでは名前と値のペアがグループ化されている。
  • 名前と値は「:」で区切る
  • それぞれのペアは「,」で区切る
  • それぞれのペアはプロパティという。名前のことをプロパティ名という。
  • プロパティの値にアクセスするやり方
  • 配列と同じように「user[]」として添字をプロパティ名にする
  • 大括弧を使わずに「.」でつなげてプロパティ名を使えばよい。
  • 値を書き換えることもできる

####メソッドについて

<script>
  var user = {
    email: "taguchi@gmail.com",
    score: 80,
    greet: function(name) {
      console.log("hello, " + name + " from " + this.email);
    }
   };
   user.greet("Tom");
</script>
  • オブジェクトのプロパティの値に関数が来た場合、その関数のことをオブジェクトの「メソッド」と呼ぶ。
  • このメソッド内で「this」というキーワードを使うと、今自分がいるオブジェクトを参照することができる。

###組み込みオブジェクト

  • あらかじめJavaScriptが用意してくれているオブジェクトがいくつかある。
  • String -> 文字列に関するオブジェクト
  • Array -> 配列に関するオブジェクト
  • Math -> 数学に関するオブジェクト
  • Date -> 日付に関するオブジェクト

#####Stringオブジェクト

<script>
  var s = new String("taguchi");
  console.log(s.length);
  console.log(s.replace("t","T"));
  console.log(s.substr(1,3));
</script>
  • 「s.length」-> taguchiの文字数を返してくれる。 -> 7
  • 「s.replace("t","T"));」-> taguchiの小文字のtを大文字のTにする。
  • 「s.substr」-> 部分文字列を返してくれる。
  • 例えば、添字が１の部分から３文字文取ってきて欲しいという場合、「console.log(s.substr(1,3));」と記述。
  • Stringオブジェクトを作らずに「var s = "taguchi"」としても同じ結果が返ってくる。 -> 「var s = new String("taguchi");」は文字列オブジェクト、「var s = "taguchi";」は文字リテラルと呼ばれる。文字リテラルにメソッドやプロパティを付けると、JavaScriptの方で「文字列オブジェクトを使いたい」と解釈して、一瞬文字列オブジェクトに変換してくれる。

#####Arrayオブジェクト

<script>
   var a = new Array(100,300,200);
   console.log(a.length);
   
   a.push(500);
   console.log(a);
   a.splice(1,2,800,1000);
   console.log(a);
</script>
  • 「a.length」文字列にも使えたが、配列に使うと要素の個数を返してくれる。
  • 要素を追加する命令
  • 「unshift」 -> 先頭に追加
  • 「push」 -> 末尾に追加
  • 「shift」 -> 先頭から除去
  • 「pop」 -> 末尾から除去
  • 「splice」 -> 先頭や末尾ではなく途中に要素を追加したい場合に利用
  • 第１引数に追加や削除したい要素の数を指定
  • 第２引数には、削除したい要素の数を指定

#####Mathオブジェクト

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>JavaScriptの練習</title>
  </head>
  <script>
   console.log(Math.PI);
   console.log(Math.cell(5.3));
   console.log(Math.floor(5.3));
   console.log(Math.round(5.3));
   console.log(Math.random(5.3));
  </script>
 </body>
</html>
  • 他のオブジェクトと違って、newする必要がない。
  • PIというプロパティにアクセスしたい場合、直接Mathと記述する。
  • 「console.log(Math.PI);」 -> 円周率を表示
  • 「console.log(Math.ceil);」 -> 実数を渡すと切り上げを行う
  • 「console.log(Math.floor);」 -> 実数を与えると切り捨てを行う
  • 「console.log(Math.round);」 -> 四捨五入を行う
  • 「console.log(Math.random);」 -> ランダム値を生成する

#####日付オブジェクト

<script>
  var d = new Date();
  console.log(d.getFullYear());
  console.log(d.getMonth());
  console.log(d.getTime());
</script>
  • 現在時刻ではなく、ある特定の日付のものを取得したい時は、年月日を引数に記述する。
  • ただし、JavaScriptでは月は0から始まる。-> ２月は１と指定する。
  • ２月１１日１０時２０分３０秒の場合 -> 「var d = new Date(2014,1,11,10,20,30);」と記述
  • 「console.log(d.getFullYear());」-> 年が表示
  • 「console.log(d.getMonth());」-> 月を表示
  • 「console.log(d.getTime());」-> 基準日から経過ミリ秒を表示(1970年1月1日からの経過ミリ秒)

###DOMについて

<script>
  console.dir(window);
  console.log(window.outerHeight);
  window.location.href = 'http://dotinstall.com';
</script>
  • 実はブラウザ自体もwindowというオブジェクトでJavaScriptから扱うことができる。
  • console.dirという命令でオブジェクトのプロパティを表示することができる。
  • 「console.log(window.outHeight);」-> JavaScriptからアクセスし、windowの高さを示す
  • 「window.location.href = '飛ばしたいページのURL;」-> 今見ているページから別のページのURLに飛ばすことが可能
  • windows.document -> 今開いているページ
  • Javascriptで操作することによって動的にページの一部を書き換えたり、新しい要素を追加したりといったことができるようになる。
  • documentにアクセスするための色々な命令を「document object model (DOM)」という。

#####DOMの操作

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="utf-8">
   <title>JavaScriptの練習</title>
   <style>
       .myStyle {
           font-weight: bold;
           border: 1px solid gray;
        }
   </style>
</head>
<body>
   <h1>見出し</h1>
   <p id="msg">こんにちは！</p>
   <script>
      var e = document.getElementById('msg');
      e.textContent = 'hello';
      e.style.color = 'red';
      e.className = 'myStyle';

      var greet = document.createElement('p'),
      text = document.createTextNode('hello world');
      document.body.appendChild(greet).appendChild(text);
   </script>
</body>
</html>
  • DOMを使って動的にページを書き換える
  • JavaScriptからいじる時にはidが振ってあると扱いやすいのでそれも覚えておく
  • テキストを書き換える場合、textContentを使う。
  • スタイルを変えることもできる。
  • 「e.style.color = 'red';」-> 赤色にする

###ページ内の要素にイベントを設定する

  • 何かボタンをクリックする度にページ内の要素を書き換える。
<body>
    <h1>見出し</h1>
    <button id="add">Click!</button>
    <script>
       var e = document.getElementById('msg');
       e.textContent = 'hello!';
       e.style.color = 'red';
       e.className = 'myStyle';
   
       document.getElementById('add'),addEventListener('click',function() {
     var greet = document.getElementById('msg');
         text = document.createTextNode('hello world');
     document.body.appendChild(greet).appendChild(text);

});
     </script>
</body>
  • ボタンをクリックする度に、var greet以下で行ったテキストを追加する命令を実行する。
  • ボタンをクリックする度にhello worldが追加される。
5
5
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?