liguofeng29’s blog

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

javascript - 基本②

例外処理

<script type="text/javascript">
    try {
        for (var i = 0; i < 10; i++) {
            document.writeln(i + '<br />');
            if (i > 4)
                throw new Error('iが4より大きい');
        }
    } catch (e) {
        document.writeln("catch処理 : " + e.message + '<br/>');
    } finally {
        document.writeln("finally処理");
    }
</script>

f:id:liguofeng29:20160207123900p:plain

with

<script type="text/javascript">
   with (document) {
       writeln("hello<br/>");
       writeln("javascript<br/>");
   }
</script>

処理制御

  • if, else if, else
  • switch
  • while
  • do while
  • continue, break
  • for
  • for in
<script type="text/javascript">
   // 配列
   var a = ["hello", "javascript", "world"];
   // for (index in array)
   for (index in a) {
       document.writeln('INDEX' + index + 'の値:' + a[index] + "<br />" );
   }
   
   // for (propertyName in array)
   for (propName in navigator) {
       document.write('属性' + propName + 'の値:' + navigator[propName]);
       document.write("<br />");
   }
</script>

Function

<script type="text/javascript">
   // 1. 命名
   function hello1(msg) {
       alert(msg);
   }
   hello1('hello javascript1.');
   
   // 2. 匿名
   var hello2 = function(msg) {
       alert(msg);
   };
   hello2('hello javascript2.');
   
   // 3. Functionクラス
   var hello3 = new Function("msg",
       "alert(msg);"
   )
   hello3('hello javascript3.');
</script>
  • グローバル関数とローカル関数
<script type="text/javascript">
    // global function
    function global() {
        // local funtion
        function local1() {
            document.write("local1<br />");
        }
        // local funtion
        function local2() {
            document.write("local2<br />");
        }
        local1();
        loacl2();
    }
    global();
</script>
  • 関数はオブジェクトである

    • 定義した関数はオブジェクトにつける。
    • 明示的につけてない場合には、windowにつけられる
<script type="text/javascript">
    // Person定義
    function Person(name, age) {
        // 属性
        this.name = name;
        this.age = age;
        // function定義
        this.info = function() {
            document.writeln("name : " + this.name + "<br />");
            document.writeln("age : " + this.age + "<br />");
        };
    }
    // 生成
    var p = new Person('person', 29);
    // 呼び出し
    p.info();

   // windowに付加
    var hello = function(name) {
       document.write(name : ", name<br />");       
   }
   // windowに付加されている
   window.hello("javascript");
</script>
<script type="text/javascript">
    // Person定義
    function Person(national, age) {
        // インスタンス変数
        this.age = age;
        // Person関数変数
        Person.national = national;
        // ローカル変数
        var bb = 0;
    }
</script>
  • 関数の呼び出し

    • 直接呼び出し : window.alert("直接呼び出し")
    • call : fn.call
    • apply : fn.apply
<script type="text/javascript">
    // 関数定義
    var each = function(array, fn) {
            for (var index in array) {
                fn.call(null, index, array[index]);
            }
        }
        // 呼び出し
    each([4, 20, 3], function(index, ele) {
        document.write(index + " : " + ele + "<br />");
    });
</script>

f:id:liguofeng29:20160207162732p:plain

  • 引数

    • 基本型の場合、値渡しする
<script type="text/javascript">
    function change(arg1) {

        arg1 = 10;
        document.write("実行中arg1 : " + arg1 + "<br/>");
    }

    var x = 5;

    document.write("呼び出し前x : " + x + "<br />");
    change(x);
    document.write("呼び出し後x : " + x + "<br />");
</script>
  • 複合型の場合、参照渡しであるが、引数自体はコピーである ⇒ 実際は値渡し。
<script type="text/javascript">
    // 定義
    function changeAge(person) {
        person.age = 10;
        document.write("関数内変更 : " + person.age + "<br />");
        // 引数にnullを入れる
        person = null;
    }

    // JSON型
    var person = {
        age: 5
    };
    document.write("読みだし前age : " + person.age + "<br />");

    // 呼び出し
    changeAge(person);
    document.write("呼び出し後age : " + person.age + "<br />");
    document.write("personの型は" + person);
</script>