학습한 내용

항목 전체 선택

a1=Web, a2=html, a3=css, a4=java 로 지정한다

• All을 쓰지 않고 document.querySelector('a')를 쓰면 가장 첫번째 a(a1=Web)을 가리킨다
  
• All을 써주면 id="a"항목 전체를 선택할 수 있다
  이를 이용해 주간모드 야간모드 버튼을 만들었다
  
  

---

버튼 2000개가 있는 웹사이트

• 2000개의 버튼 전체 선택하기

  for(let i=0; i<inputs.length;i=i+1){
  inputs[i].click()}

• 100보다 큰 버튼 전체 선택하기

  let inputs = document.querySelectorAll('input');
  for(let i=0; i<inputs.length; i=i+1){
  if(inputs[i].value>100){
  inputs[i].click();}
  }

• 101~199의 버튼 선택하기
  (if문 안에 if문 작성)

  let inputs = document.querySelectorAll('input');
  for(let i=0; i<inputs.length; i=i+1){
  if(inputs[i].value>100){
  if(inputs[i].value<200){inputs[i].click();}}
  }

※if문 안의 if문은 &&(혹은 ,)를 사용해 하나의 if문으로 작성 가능
let inputs = document.querySelectorAll('input');
for(let i=0; i<inputs.length; i=i+1){
if(inputs[i].value>100 && inputs[i].value<200)
{inputs[i].click();}
};

함수

함수의 장점

코드가 간결해진다
가독성이 좋아진다
유지보수가 편해진다

함수를 이용하여 버튼코드 정리하기

기존의 코드

함수코드 작성
함수코드 안에 기존 if문 코드 이동
기존 if문의 빈 자리에 앞서 만든 함수 채워넣기

완성코드

반복성

반복되는 코드가 있을 경우 함수를 이용해 간소화할 수 있다
a,b,c가 반복반복되는 부분을 함수로 묶어준다반복되는 부분을 지우고 함수를 써준다

함수를 이용한 부가가치세 계산 코드 정리

객체지향

서로 연관된 함수와 변수를 그룹화해서 이름을 붙인것

student(배열)는 순서가 있고 평등한 데이터
member(객체)는 서로 역할이 있는 데이터

로그는 동일하게 출력된다

어려운 내용

함수를 이용해 주간 야간모드 버튼 코드를 다시 정리하는데 작동이 되지 않아 당황했다

해결방법

역시나 근본적인 문제는 (, { 등으로 여는 코드를 썼으면 ), }로 잘 닫아줄 것

학습소감

지금까지 배웠던 내용 중 가장 어려운 부분처럼 느껴진다
다행인건 오늘 배운 내용은 앞으로 코드를 작성할때 편의성을 제공하는 도구지,
모르면 성립이 안되는 핵심코드는 아니라는 점
아직은 수업내용 따라가고 정리하기 버거운 단계이므로 정말 필요한 도구, 기초를 다져 다음에 배울 파이썬 언어에 대비하자