[TIL-13] 생활코딩 WEB2 JavaScript-23~30

23. 배열과 반복문의 활용

• 페이지 내 모든 <a> 태그 선택하기
  • 검색 추천 : "javascript get element by css selector multiple"
  • querySelectorAll
    • 결과가 노드리스트로 나옴. 배열 같은 것.
    • NodeList(5) [a, a, a, a, a]
  • var alist = document.querySelectorAll('a');       - 위 결과를 alist라는 변수에 담음.
    console.log(alist[0]);                                    - 괄호 안 결과를 콘솔 창에 출력.
    • 인덱스 번호가 0인 <a> 태그 나옴.
    • 반복문 통해 노드리스트의 모든 <a> 태그 선택할 수 있음. 

 

25. 함수 ~ 26. 함수 : 매개변수와 인자 ~ 27. 함수(리턴) ~ 28. 함수의 활용

• 쓰임
  • 코드를 효율적으로 리팩토링. 연속적이지 않게 반복되는 경우 반복문 사용 불가.
  • 한 번만 쓰이는 코드라도 함수화해서 로직에 이름을 붙여놓을 수 있음.
• 문법 : function 함수명(  ){
           코드
           }
• 함수는 입력(매개변수, parameter)과 출력(인자, argument)로 이뤄져있음.
  • 입력값에 따라 함수가 다른 결과 출력하게 할 수 있음.
  • function sum(left, right){
       document.write(left+right+'<br>');
    }
    • 괄호 안 left, right는 매개변수. 이 값이 함수에 적용되어 결과값을 출력함.
• 표현식 : 1+1은 2에 대한 표현식. 1===1은 true라는 값에 대한 표현식.
• return : 어떤 다른 행동을 실행하기보다, 그냥 어떤 값이 출력되는 함수를 만들 때 {} 안에 사용.
  • function sum(left, right){
      return left+right;
    }
  • 그럼 그 함수는 return 값을 내보내기 때문에 이 함수를 어떤 값으로 활용할 수 있음.
    • document.write(sum(2,3)+'<br>';
    • document.write('<div style = "color: red">'+sum(2,3)+'</div>');
•  야간모드 버튼에 함수 활용
  • 코드를 함수 안으로 그대로 옮기면 에러 남.
    • 이유 : <input> 태그 안 onclick 이벤트에 대한 this가 전역객체를 가리키게 됨.
    • 해결책 : 함수가 실행될 때 this 값을 부여할 수 있게 self라는 매개변수 정함.
      • this처럼 target도 이동하면 의미가 달라짐.

 

29. 객체 예고  ~ 30. 객체 쓰기와 읽기

• 객체 : 서로 연관된 함수와 변수들을 그뤂핑해서 정리하는 폴더 같은 것.
  • 예) "document.querySelector"의 document
  • querySelector는 document라는 객체에 속한 함수. 이런 함수를 메소드라고 함.
• 배열이 순서에 따라 정보가 저장된다면, 객체는 순서 없이 저장. 하지만 물건을 담을 때 이름을 붙여놓는 상자.
• 객체 만들기
  
  • var 객체명 = {
      "이름1" : "정보1",
      "이름2" : "정보2"
    }
    • 배열이 [ ](대괄호)였다면, 객체는 { }(중괄호)
• 객체에 정보 추가하기
  • 객체명.추가할정보이름 =  "추가할정보";
  • 추가할 정보 이름에 띄어쓰기가 필요할 땐 점(.) 대신 배열에서 인덱스 사용해서 정보 가져오듯 대괄호 사용.
    • 객체명["추가할 정보 이름"] = "추가할정보";