[2주차] 20220413 엘리스 TIL (JavaScript)

** 실습 ••• lorem

• inline 계열의 아무 의미없이 태그를 래핑하는 역할을 해주는 태그 = <span>
• block 계열의 아무 의미없이 태그를 래핑하는 역할을 해주는 태그 = <div>

** 일단은 어떻게든 구현만 되는 쪽으로 생각해보도록 하자

(최대한 세련된 코드를 짜려는 생각이 오히려 코드를 짜는 데 방해가 될 수 있음)

 

*** innerHTML 두가지 목적

1. 특정 태그 안에다 내용을 꽂아넣을 때
2. 특정 태그 안의 정보를 가져올 때

** innerHTML, innerTEXT 차이점

• innerTEXT 안에는 태그를 넣을 수 없다(그냥 텍스트로만 출력됨), 위에 기술한 innerHTML 두가지 목적 중 2번째만을 충족하는 것이 목적
• innerTEXT = 웹페이지 태그를 제외한 모든 텍스트를 긁어오는 데 활용(태그없이 텍스트만)
• innerHTML = Body태그 안의 모든 태그 포함 텍스트를 긁어오는데 활용

* Boolean을 배우고 -> 논리연산자 / 비교연산자 배우고 -> 반복문, 조건문 배우고 -> array + 반복문

 

** 배열

• 배열 = 대괄호로 시작해서 대괄호로 끝남. 각각의 데이터는 ' , ' 로 구분
• 'contents' 라는 이름의 ['html','css','js'] 배열이 있다고 가정하자
  • 'html','css','js' = 원소(element)
  • 각각의 값을 가리키는 자릿수 = 색인(=index) / index는 0부터 시작한다( 'html'의 index = 0, 차례로 1,2 )
  • 특이점 : length = console.log(contents.length) 의 결과 => 3 / length는 1부터 시작한다
  • index와 offset의 차이는? -> offset은 배열안의 자체적 개념이라기보단 처리하면서 필요한 개념
• 배열안의 값을 그냥 보고싶다 => console.log(contents)
• 배열안의 값에 하나를 추가하고 싶다 => contents.push('react')
• 구글에 'javascript array' 로 검색하면 배열에 관한 정보를 더 얻을 수 있다 (MDN)
  • https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array  

🌮 반찬 🌮 debugger - HTML 문서 안의 script 코드 내에 debugger 넣어주기

• 개발자도구 가면 실행이 중단된 채 나온다 => breakpoint
• debugger = for문이 어떻게 돌아가는지 파악하기 좋음
• 개발자도구 - debugger를 이용해 개발자도구의 sources에 들어가서 코드를 한줄씩 실행해볼 수 있다
  • 개발자도구 console창 여닫기 단축키 = ESC
  • sources 아래에 내가 안쓴 코드들이 뜨는 이유는? = 우리가 live server로 페이지를 보고있기 때문에 그 코드들이 뜨는 것
  • sources 들어가서 pages -> 보고자 하는 파일 선택 -> 오른쪽에 코드 줄번호 선택(파랗게 만듦) => 다음에 실행할 땐 그 줄부터 디버깅 해줌
  • 디버깅이 안되는 오류 (코드 선택하고 실행하면 스크롤이 자동으로 아래(live server 코드들 있는 쪽)로 이동) 해결법
    • 우측 break point 체크 해제하거나
    • 라이브 서버 사용하지 않고 켜서 해보기

** innerHTML = append가 아니라 replace하는 성격이 있다

 

** git reset --hard = git 버전관리와 관련 (구글링해보면 이유가 대충 나온다!)

 

** CSS 상속

• 예외 : a태그 - a태그의 속성을 바꾸려면 a태그를 직접 변경해야 한다
  • document.querySelector('a') => 상단 a태그 하나만 출력된다
  • document.querySelectorAll('a') => a태그 배열이 출력된다 (편의점에서 여러 물건을 샀을 때 비닐봉투에 담아주는 것 처럼)

*** 함수

• 함수 = 서로 연관된 코드를 그룹핑해서 이름을 붙인 것
• 변수 = 데이터에 이름을 붙인 것
• 배열 = 서로 연관된 데이터를 그룹핑해서 이름을 붙인 것

** 내장함수(빌트인 function)

• 내장함수 = 빌트인을 조합해서 새로운걸 만드는 것 (애플리케이션 프로그래밍 인터페이스(API) , API를 통해 응용 프로그램을 새로 만들음)
• 어떤 함수는 그 함수의 return 뒤에 있는 값이 그 함수의 출력값이 된다

🌮 반찬 🌮 Teachable Machine

• https://teachablemachine.withgoogle.com/

Teachable Machine

• 파일을 열 때 반드시 webserver에서 열어야 한다. live server 가능!! 직접 열지만 않으면 된다
• 참고 : 머신러닝에서 많이 쓰는 함수 이름 = predict (예측하다 라는 뜻)
• Teachable machine으로 재밌는 웹사이트를 만들 수 있다
  • 예시 : 캠의 밝기에 따라 주간 / 야간
  • 사람 표정에 따라 웹사이트 컨셉 바뀜
  • 씨끄러움 / 조용함에 따라 웹 속성 달라짐

 

---

 

실습강의

 

** window = 전역객체(생략가능)

window.close() = console.log에서 쓰면 창 닫힘

 

** scrollTo 부드럽게 쓰기

• scrollTo({top:0, left:0, behavior:"smooth"})
• 원본 : scrollTo(0,0)

** innerHTML을 안쓰는 이유가 있다?

-> XSS 공격에 취약히기 때문(태그까지 다 불러오기 때문에)

 

** 질문 : 함수에서 return 값이 없고 실행문만 있으면 함수명 옆에 괄호() 안적어도 되는건가요?

반환값이 있고 없고는 그냥 함수 만드는 사람의 용도에 따라 다른건가요?

• function attend( ){    }

=> target.addEventListener("click", attend  ) <- 여기에 괄호를 넣어서 attend() 로 적으면 함수가 실행되어버려서 이벤트리스너가 작동하지 않음

 

** getElementsByClassName , getElementsByTagName 에 [index] 를 붙이는 이유

• 인덱스를 주지 않으면 선택한 모든것을 다 갖고오기 때문에 주는 것(만약 요소가 하나뿐이어도 그 하나를 배열에 넣어서 갖고오기 때문에)
• querySelector 는 하나만 들고오는 친구다
• querySelectorAll 에도 인덱스 붙여야 한다
• getElementById 에는 인덱스 붙일 필요 없다 (아이디는 하나의 고유한 값)

** form 태그 한정으로, 'submit' 이벤트가 발생한다 (알아두기)

** preventDefalut() : https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault  

* 개인적 질문 - JS 문제를 풀 때 어떤건 문제를 풀기 앞서서 빈 배열이나 빈 변수를 할당해줘야 했는데 이걸 왜 해줘야하는가?

• 답변 : let a; a += 'abc'; console.log(a); / let b; b.push('abc'); console.log(b); 를 실행해 보면, 앞의 코드는 undefinedabc 가 출력되고, 뒤의 코드는 TypeError 가 출력됨을 확인할 수 있다. 이러한 오류를 방지하기 위해 변수를 초기화 해주거나, 배열을 할당해주는 개념이다. 코드를 let a = ''; a += 'abc'; console.log(a); / let b = []; b.push('abc'); console.log(b) 로 수정해주면 오류가 없이 잘 작동함을 확인할 수 있다!!