liguofeng29’s blog

個人勉強用ブログだっす。

javascript - 基本①

javascript ┗━基本内容

・実行方法

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> JavaScript実行方法 </title>
</head>
<body>
    <!-- javascriptのURL -->
    <a href="javascript:alert('JavaScript実行');">JavaScript実行</a>
    
    <!-- javascriptのタグ -->
    <script type="text/javascript">
       alert("JavaScript実行");
   </script>
</body>
</html>

・javascript導入

<script src="test.js" type="text/javascript"></script>

・変数宣言

  • 値を代入する際に型が決まる
  • 違う型を代入すると型が変わる
  • 明示宣言は、必ず変数を定義する
  • 暗黙宣言は、システム全体で変数がなければ定義する
<script type="text/javascript">
   // 暗黙宣言
   a = "Hello JavaScript";
   alert(a);
   // 明示宣言
   var b;
   b = true;
   alert(b);
   // 複数明示宣言
   var a,b,c;
</script>

・自動型変換

  • マイナス : 文字列が数値に変換される
  • プラス : 文字列が連結される
  • 自動変換は決められており、システムが行う。
<script type="text/javascript">
   // 文字列
   var a = "3.145";
   // 数値に自動変換する
   var b = a - 2;
   // 連結される
   var c = a + 2;
   // 結果は
   // 1.145
   // 3.1452
   alert (b + "\n" + c);
</script>

・明示型変換

  • toString()
  • parseInt()
  • parseFloat()

  • 数値変換の場合

    • 文字列変換失敗は、NaN
    • undefined,null,boolean,obejctは一律NaN
<script type="text/javascript">
   var a = "3.145";
   var b = a + 2;
   // 明示的型変換
   var c = parseFloat(a) + 2;
   alert (b + "\n" + c);
</script>

・変数の範囲

<script type="text/javascript">
    var global = "global";
    function test(o) {
        // グローバル
        var local = "local";
        if (1 == 1) {
            // ここもローカル変数になる
            // block変数はない
            var block = "block";
        }
        // 
        alert(global + "\n" + local + "\n" + block);
    }
</script>

・基本型

  • 数値
  • boolean
  • 文字列
  • undefined : 未定義
  • null : 値が空
<script type="text/javascript">
   a = 0x13; // 16進数
   b = 014;  // 8進数
   c = 45.0; // 10進数
   d = 3.12e1; 
   alert(a + '---' + b + '---' + c + '---' + d); 
</script>

<script type="text/javascript">
   var a = "0123456789AbCd0123";

   alert("対象文字列 : " + a  + "\n" 
       + "a.length : " + a.length + "\n" 
       + "a.charAt(5) : " + a.charAt(5) + "\n" 
       + "a.charCodeAt(5) : " + a.charCodeAt(5) + "\n" 
       + "a.toUpperCase() : " + a.toUpperCase() + "\n" 
       + "a.toLowerCase() : " + a.toLowerCase() + "\n" 
       + "a.indexOf('2') : " + a.indexOf("2") + "\n" 
       + "a.lastIndexOf('0') : " + a.lastIndexOf("0") + "\n" 
       + "a.substring(1, 5) : " + a.substring(1, 5) + "\n" 
       + "a.substring(5) : " + a.substring(5) + "\n" 
       + "a.slice(3, 7) : " + a.slice(3, 7) + "\n" 
       + "a.slice(3, -7) : " + a.slice(3, -7) + "\n" 
       + "a.slice(3, -7) : " + a.slice(3, -7) + "\n" 
       + "a.search('AbC') : " + a.search("AbC") + "\n" 
       + "a.match(/\d/g) : " + a.match(/\d/g) + "\n"
       
   );
</script>

f:id:liguofeng29:20160206222135p:plain

・複合型

  • Objectタイプ

    • Array
    • Data
    • Error
    • Function
    • Math
    • Number
    • Object
    • String

  • Arrayタイプ

<script type="text/javascript">
   var a = [3 , 5 , 23];
   var b = [];
   var c = new Array(); // 生成
   b[0] = 'hello';
   b[1] = 5;
   c[5] = true; // 違う型でもOK
   c[7] = null; // 違う型でもOK
   alert(a + "\n" + b + "\n" + c
       + "\na長さ:" + a.length
       + "\nb長さ:" + b.length
       + "\nc長さ:" + c.length);
</script>

f:id:liguofeng29:20160206223154p:plain

  • Functionタイプ

    • 引数、戻り値型不要
    • functionキーワードで定義
<script type="text/javascript">
    function judgeAge(age) {
        // ageは数値である必要がある
        if (typeof age === "number") {
            if (age > 60) {
                alert("年寄り");
            } else if (age > 40) {
                alert("中年");
            } else if (age > 15) {
                alert("青年");
            } else {
                alert("児童");
            }
        } else {
            alert("歌方駅倬葎方峙");
        }
    }
    // 実行
    judgeAge(46);
</script>

・演算子

  • 演算

    • +, -, *, /, %
    • &, |, ~, ^, <<, >>, >>>
    • +=, -=, *=, /=, %=
    • &=, |=, ~=, ^=, <<=, >>=, >>>=

  • 比較

    • >, >=, <, <=, !=, ==, !==, ===
      • !==, === は型と値が両方比較する
<script type="text/javascript">
   // ture
   alert(5 == "5");
   // false
   alert(5 === "5");
</script>

  • 論理

    • &&, ||, !

  • 三項演算子

    • (expression) ? if-true-statement : if-false-statement
<script type="text/javascript">
   5 > 3 ? alert("5>3") : alert("5<3") ;
</script>
  • void演算 : 強制的に戻り値なしにする
<script type="text/javascript">
   var a , b , c , d;
   // aに強制的にundefined設定
   a = void(b = 5, c = 7, d = 56);
   alert('a = ' + a + ' b = '
       + b + ' c = ' + c + ' d = ' + d);
</script>

f:id:liguofeng29:20160206225226p:plain

  • typeof演算子

    • undefined : undefined
    • null値 : object
    • boolean値 : boolean
    • 数値 : number
    • 文字列 : string
    • オブジェクト : object
    • Function : function
<script type="text/javascript">
   var a = 5;
   var b = true;
   var str = "javascript";
   alert(typeof(a) + "\n" + typeof(b) + "\n" + typeof(str));
</script>

f:id:liguofeng29:20160206225635p:plain

  • instanceof
<script type="text/javascript">
   var a = [4, 5];
   alert(a instanceof Array); // ture
   alert(a instanceof Object); // ture
</script>