[2024 JS 심화 프론트 스터디] 김지나 #2주차 "나머지"

01. 반복문

: 주어진 조건이 충족되는 동안 특정 작업을 반복해서 수행

- for문

괄호 안 요소들을 ;으로 구분

1) 변수의 선언 및 할당 2) 종료조건 3) 참일 시 실행할 것

for (변수선언&할당; 종료조건; 참일 시 실행할 것) {
	실행문
}
for (let i = 10; i > 0; i -= 2){
	console.log(i);
}//예시

중첩 사용 가능

continue, break: 반복문에서 뭔가를 건너뛰거나 특정 조건을 충족해서 해당 반복문을 종료해야 될 때

continue: 뒤에 있는 것은 해당 턴에서 실행되지 않고 넘어감

break: 루프 종료

- for ... of 문

: 배열의 요소를 순서대로 반환

for (const 상수명 of 배열) {

}

- for ... in문

: 객체의 키들을 순서대로 반환

 

- while문

: 괄호 안의 조건이 참인 동안 반복 (선확인 후조치)

while (조건) {
	실행문; 
}

 

- do while문: 선조치 후확인 

do {
	실행문;
} while (조건)

02. 함수

: 반복될 수 있는 작업, input을 받아 output을 반환

: 변수, 상수에 객체의 값이나 배열의 요소로, 다른 함수의 인자로 넣을 수 있음

 

- 매개변수와 인자

: 특정 인풋을 받아 작업을 수행하는 함수들에 사용

function 함수명(매개변수){
	실행문;
}
함수명(인자) //인자가 함수의 매개변수 안으로 들어가서 작동

 

- return

: 함수가 해당 값을 반환하도록 함

함수 안의 마지막에 작성

function add(x, y) {
	return x + y;
} // x+y값을 반환함

 

- 화살표 함수: function으로 정의한 함수와는 세부적으로 기능이 다름

const mult = (x, y) => x * y; //한줄일때, return X

const mult = (x, y) => {
	console.log(' ');
    return x * y;
} //두줄이상일때 return O

 

03. HTML 요소들 선택하기

DOM: HTML과 CSS를 제어할 수 있는 수단

getElementsByTagName: 태그명으로 선택

getElementsByClassName: 클래스명으로 선택

getElementById: 아이디로 선택

querySelector, querySelectorAll: CSS 선택자로 선택, 각각 첫번째, 모든 요소 반환

children: 자식 요소들 반환

firstElementChild, lastElementChild: 첫 번째/마지막 자식 요소 반환

parentElement: 부모 요소 반환

 

04. 요소들 조작하기

textContent: 요소 텍스트 확인 및 수정

classList: 리스트 형태의 클래스 확인 및 수정(배열과 유사한 기능)

- remove, add, toggle

Style: CSS 스타일 확인 및 수정

getAttribute, setAttribute: 요소의 속성을 반환 및 수정

value, checked: 인풋 요소들의 값 확인 및 수정

removeChild: 요소 제거

createElement: 태그명으로 요소를 생성

appendChild: 요소를 대상 요소 안에 넣음

 

05. 이벤트

addEventListener: 첫 번째 인자로 주어진 이벤트에, 두 번째 인자로 주어진 메서드의 동작을 부여, 콜백함수

// 마우스 클릭 이벤트
myButton.addEventListener('click', function () {
	console.log('클릭');
});

 

이벤트 객체: addEvenListener의 콜백함수의 인자에 매개변수로 포함, 해당 이벤트에 대한 상세정보 포함

하나의 이벤트에 여러 콜백함수 등록 가능

focus: 입력을 받게 되는 상태

blur: 입력을 받는 상태로부터 벗어난 상태

placeholder: 입력창에 텍스트가 보이는 상태

change: input 요소의 값이 바뀔 때마다 일어나는 이벤트

keyup: 키보드가 눌리는 것에 대한 반응