[2024 JS 심화 백엔드 스터디] 김민서 #2주차 "JS 기본 (2)"

반복문

1. for 문

for문은 조건식을 만족할 때까지 특정 코드를 반복하여 실행한다.

for(초깃값; 조건식; 증감식){
 자바스크립트 코드;
}

 

2. break 문 (for 문에서)

조건식과 상관없이 강제로 반복문을 종료한다.

for(초깃값; 조건식; 증감식){
 break; //반복문을 강제로 종료함
 자바스크립트 코드;
}

for(let i =1; i<=10; i++){
  if(i == 6) break; // i의 값이 6이면 break 문으로 종료
  console.log(i);
}

1부터 10까지 반복, break 문으로 변수 i의 값이 6일 경우 강제로 반복문 종료

 

3. continue 문 (for 문에서)

continue 문 다음에 오는 코드는 무시하고 바로 증감식으로 이동해 증감 연산을 실행한다.

for(초깃값; 조건식; 증감식){
  continue;
  자바스크립트 코드;
}

for(let i =1; i <= 10; i++){
  if(i % 2 == 0) continue;
  console.log(i);
}

1부터 10까지 i가 2의 배수일 경우에만 continue문을 실행해 홀수만 출력함

 

4. 중첩 for 문

for(초깃값; 조건식; 증감식){      //바깥쪽 for 문
  for(초깃값; 조건식; 증감식){     //안쪽 for 문
    자바스크립트 코드;
  }
}

 

5. for ... of 문

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

const array = ['김밥', '파스타', '제육', '국밥'];

for (const item of array) {
  console.log(item);
}

 

6. for ... in 문

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

const person = {
  name: '홍길동',
  age: '75',
  marrried: false
}

for (const key in person) {
  console.log(key, typeof key);
}

 

7. while 문

조건식을 만족할 때까지 코드를 여러 회 반복하여 실행

1. 조건식을 검사

2. 만족하면 중괄호 안에 있는 코드와 증감식을 실행

3. 다시 조건식을 검사

let 변수 = 초깃값;
while(조건식){
  자바스크립트 코드;
  증감식;
}

let x = 0;

while (x < 10) {
  console.log(x++);
}​

 

8. do ... while 문

선조치 후 확인

let x = 12;

do {
  console.log(x++);
} while (x < 10);

 

 

함수

1. 함수 정의문

반복될 수 있는 작업을 정의

input을 받아 output을 반환

function 함수명(){
  자바스크립트 코드;
}

참조 변수 = function(){
  자바스크립트 코드;
}

// 함수 호출
함수명();
또는 참조 변수();

 

2. 매개변수와 인자

매개변수가 있는 함수 정의문은 함수를 호출할 때 전달하고자 하는 값을 입력해 호출할 수 있다.

function 함수명{(매개변수 1, 매개변수 2, ...매개변수 n)
  자바스크립트 코드;
}
함수명(데이터1, 데이터2, ...데이터 n);

 

3. return 문

return 문은 함수에서 결괏값을 반환할 때 사용, 함수에서 return 문이 실행되면 반복문의 break 문과 비슷하게 코드가 강제 종료된다.

function 함수명() {
  자바스크립트 코드1;
  return 데이터(값);

  자바스크립트 코드2;
}

 

4. 화살표 함수

function 으로 정의한 함수와는 세부적으로는 기능이 다르다

// 한 줄 안에 값만 반환 시
const mult = (x, y) =>n x * y;
console.log(mult(2,7));

// 두 줄 이상의 작업이 있을 시
const mult = (x, y) => {
  console.log('${x}와 ${y}를 곱합니다.');
  console.log(`결과는 ${x * y}입니다.`);
  return x * y;
};
console.log(mult(2, 7));

 

 

HTML 요소들 선택하기

문서 객체 모델(DOM)은 HTML 문서 구조를 말한다.

• getElementsByTagName :  태그명으로 선택
• getElementsByClassName : 클래스명으로 선택
• getElementById : 아이디로 선택
• querySelector, querySelectorAll : CSS 선택자로 선택, 각각 첫 번째, 모든 요소 반환
• children : 자식 요소들 반환
• firstElementChild, lastElementChild : 첫 번째, 마지막 자식 요소 반환
• parentElement : 부모 요소 반환

 

요소들 조작하기

• textContent : 요소의 텍스트 확인 및 수정
• classList : 리스트 형태의 클래스 확인 및 수정
• style : CSS 스타일 확인 및 수정
• getAttribute, setAttribute : 요소의 속성을 반환 및 수정
• value, checked : 인풋 요소들의 값 확인 및 수정
• removeChild : 요소 제거
• creatElement : 태그명으로 요소를 생성
• appendChild : 요소를 대상 요소 안에 넣음

 

이벤트

1. addEventListener

첫 번째 인자로 주어진 이벤트에, 두 번째 인자로 주어진 함수의 동작을 부여한다. 콜백함수라고 부른다.

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

const logMouseEnter = () => { console.log('진입'); };
const logMouseLeave = () => { console.log('이탈'); };

const logMouseEnter = () => { console.log('진입'); };
const logMouseLeave = () => { console.log('이탈'); };

 

addEventListener 함수를 사용할 때의 이점

• 이전에 추가한 이벤트 핸들러를 제거할 수 있는 대응 메소드가 존재
• 같은 리스너에 대해 다수의 핸들러를 등록할 수 있음
• 추가적인 옵션 사항들이 제공됨

2. 이벤트 객체

추가적인 기능과 정보를 제공하기 위해 이벤트 핸들러에 자동으로 전달되는 데이터

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

const clickPosition = document.querySelector('#clickPosition');

clickPosition.addEventListener('click', function (e) {
	console.log(e);
});

// 하나의 이벤트에 여러 콜백함수 등록 가능
clickPosition.addEventListener('click', function (e) {
	let text = 'x: ';
	text += e.clientX;
	text += ', y: ';
	text += e.clientY;
	clickPosition.textContent = text;
});

 

3. focus

입력을 받는 상태를 나타냄

const myInput = document.querySelector('#myInput');
// 인풋 요소 등이 사용자 입력을 받을 준비가 된 상태
myInput.addEventListener('focus', () => {
	myInput.setAttribute('placeHolder', '포커스 온 된 상태');
});

 

 

4. blur

입력 받지 않는 상태를 나타냄

// 포커스를 잃어 활성이 아니게 된 상태
myInput.addEventListener('blur', () => {
	myInput.setAttribute('placeHolder', '블러 된 상태');
});

 

5. change

인풋 요소의 값이 바뀔 때 함수를 실행시킨다.

// 인풋 요소의 값이 바뀔 때
myInput.addEventListener('change', (e) => {
	console.log(e.target.value)
});

 

6. keyup

키보드가 눌리는 것 그 자체에 반응한다.

// 키 입력
myInput.addEventListener('keyup', (e) => {
	console.log(e.key);
});