첫 JavaScript 3

전회의 계속이 됩니다.
첫 자바스크립트 2부 - Qiita

다양한 기능



로컬 함수에 관하여



index.html
  <script>
        function hello() {   
            var local = 3 + 12 - 4  // ローカル変数
            alert(local); // OK
        }
        alert(local);  // NG エラーになる
  </script>

위에서 언급했듯이 함수에서 정의한 변수는 해당 함수 내에서만 사용할 수 있습니다! !

즉시 함수



index.html
  <script>
        // 引数を渡す書き方
        (function(name) {
            // alert(name);
        })("Me"); 

     // 即時間数のメリット
        (function() {
            var x = 10,
                y = 20;
            // x , y はローカル変数となり、外部からの影響を受けなくなる
        })();
  </script>

위와 같이 즉시 실행하는 함수를 즉시 시간 수라고합니다.
주로, 로컬 변수를 실현하기 위해서 사용해 왔습니다만, 지금은 대신에 let나 const(후술)를 사용하는 것이 일반적인 생각이 듭니다.

타이머 처리를 작성하는 방법



setTimeout



index.html
  <script>
        var i = 0;
        function show() {
            var t = setTimeout(function() {
                show();    // 自分自身を飛び出すので結果ループ処理となる
            }, 1000);  // 一秒ごとに実行
            if (i > 3) {
                clearTimeout(tid);  // clearTimeoutを使うことでsetTimeout処理を終了させることができる。
            }
        }
        show();  
  </script>

그 밖에 setInterval이라는 타이머계의 함수도 있습니다만, 쓰기가 이마이치이므로, 특히 만약 필요하지 않으면 기억하지 않아도 좋을지도 모릅니다.
흥미있는 분은 여기 를 봐 주세요.

배열



그룹화된 데이터

index.html
    <script>

        // var eki_1 = "東京", eki_2 = "名古屋";
        // ↑のように書くのはすこしだるいし、変数が多くて読みづらいかと思います。
        // 下のように配列で書くとすっきりします。
        var eki= ["東京", "名古屋", 100];  // 異なる型を入れることができる

        eki[0] = "大阪"; // 東京が大阪に書き換えられます

        // 下記のような配列の中に配列を書くことができます。
        var m = [
            [1, 2, 3],
            [4, 5, 6]
        ];
        // m[1][2]);  で6という数字が取れます。
    </script>

배열의 첨자는 "0"의 시작임을 잊지 마십시오!

객체 정보



이름과 값을 가진 원본으로 통합 된 데이터

index.html
    <script>
        var user = {
            name: "kato", // 名前はプロパティと呼ばれます(例:nameプロパティ)
            age: 20
        };
        alert(user.name);  // katoと出力される
        user.age= 20;    // ageを20に書き換え
        alert(user.age);  // 20と出力される
    </script>

객체의 메소드 정보



객체 안에 메소드를 더 쉽게 할 수 있습니다.

index.html
    <script>
        var user = {
            name: "kato", // プロパティ
            age: 80,
            getUserInfo: function() {    // getUserInfoメソッド
                alert("名前:" + this.name + "年齢:" + this.age);
            }
        };
        user.getUserInfo();
    </script>

this.hogehoge와 같이 this를 사용하여 동일한 객체의 속성에 액세스 할 수 있습니다!

오늘은 여기까지, 계속은 다음 번에! !

좋은 웹페이지 즐겨찾기