자바스크립트 기본 문법 정리

1. html 변경하기

[html]
<p id="hello">안녕하세요.</p>
[script]
document.getElementById("hello").innerHTML = "반갑습니다.";

2. 이벤트리스너 실행하기

[html]
<p id="hello">안녕하세요.</p>
<button id="btn">버튼</button>
[script]
      document.getElementById("btn").addEventListener("click", function () {
        document.getElementById("hello").innerHTML = "잘부탁드립니다.";
      });

☞ 버튼을 클릭하면 잘부탁드립니다로 바뀌게 됨.

3. 자료 저장를 저장하기 위해 > [변수]

      var name = "Lee"; // 재선언과 재할당 가능
      let age = 20; // 재할당 가능, 재선언 불가
      const abo = "b"; // 재선언 불가, 재할당 불가
      name; // Lee가 담겨 있음

4. 긴코드를 간단하게 > [함수]

function 인사() {
        document.getElementById("hello").innerHTML = "날씨가 좋습니다.";
      }
      인사(); //실행

5. 함수 업그레이드 > [파라미터문법] 매개변수를 넣어서 사용이 가능함.

        document.getElementById("hello").innerHTML = 나이;
      }
      document.getElementById("btn2").addEventListener("click", function () {
        소개("3살입니다.");
      });

6. array & object

      var names = ["Lee", "Kim", "Park", "Back"];
      name[0]; //Lee 출력 0부터 시작함

      var person = { name: "Lee", age: 33 };
      person["age"]; //나이만 출력

7. 조건부 출력 IF

      if (1 < 3) {
        console.log("3은 1보다 큽니다");
      } else {
        console.log("3은 1보다 크지 않습니다");
      }

8. 반복문 for, forEach

      for (var i = 0; i < 3; i++) {
        console.log("반가워요");
      }
      // ☞ 3이 되기 전까지 반복이 됨

      [1, 2, 3, 4].forEach(function () {
        //배열의 갯수만큼 반복함
        console.log("반가워요");
      });

9. 그냥 this 쓰거나, 일반함수 안에서 쓰는 this

      console.log(this);
      function 함수() {
        console.log(this);
      }
      함수();

☞ 여기서 this는 윈도우임

10. 오브젝트에서의 this

      var 오브젝트 = {
        name: "Lee",
        함수: function () {
          console.log("반가워요");
        },
      };
      오브젝트.함수();

☞ 오브젝트 안에 함수도 넣을수 있음

11. 만약에 오브젝트 안의 함수(메소드)에 this를 넣는다면?

    var 오브젝트 = {
        name: "Lee",
        함수: function () {
          console.log(this);
        },
      };
      오브젝트.함수();

☞ {name: 'Lee', 함수: ƒ}가 뜸. 그러므로 내가 속해있는 전부를 뜻함 (어려운 말로는 this는 해당 메소드를 호출한 오브젝트를 참조함)

두 함수의 차이는?

      function 함수() {
        console.log(this);
      }
      함수();

      window.함수(); 

이런 전역함수는 사실상 window{}안에 보관함.
그래서 함수();이나 window.함수(); 은 같은결과로 나옴.

12. Constructor에서의 this

function 기계() {
  this.이름 = 'Kim';
}

var 오브젝트 = new 기계();

☞ 기계라는 함수를 사용해서 오브젝트라는 새로운 객체를 만듬

☞ this의 역할: this는 새로 생성 될 새로운 객체를 가리킴
☞ this.이름 = 'Kim'; : 오브젝트에 이름이라는 속성을 추가하고 그 값을 'Kim'으로 지정함

☞ 간단히 말해, 기계라는 함수를 사용해 오브젝트라는 새로운 객체를 만들 때, 이 객체에 이름이라는 속성을 'Kim'으로 설정함

13. Event Listener에서의 this

document.getElementById('버튼').addEventListener('click', function(e) {
  console.log(this);
});

☞ 버튼'이라는 아이디를 가진 HTML 요소에 클릭 이벤트 리스너를 추가함
☞ this의 역할: this는 이벤트가 발생한 요소, 즉 e.currentTarget와 동일함
☞ console.log(this);: 클릭한 버튼을 출력함

☞ 간단히 말해, 클릭 이벤트가 발생한 요소(여기서는 '버튼')를 나타내는 것이 this임

☞ e.currentTarget는 현재 이벤트가 발생한 요소를 가리킴

오늘의 한줄평 : 열심히 코딩 공부한 하루, 조금 정리가 되어서 좋다.

출처 : 코딩애플