[2024 JS 심화 프론트 스터디] 박지민 #2주차 "JS 마무리"

반복문

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

 

for문: 괄호 안에 반복을 위한 조건들 명세 & 요소들은 세미콜론(;)으로 구분

• 변수의 선언 및 할당: 반복문을 진입할 때 최초로 딱 한 번만 실행
• 종료조건: 코드를 반복할 때마다 부합하는지 확인
• 참일 시 블록 안의 코드 이후 실행할 것

for (초깃값; 조건; 증가식) {
	실행할 명령
}

// 중첩 사용 예시
for (let i = 1; i <= 9; i++) {
	for (let j = 1; j <= 9; j++) {
    	console.log(i + ' X ' + j + ' = ' + i*j);
    }
}

 

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

continue: 현재 반복만 종료하고 다음 반복으로 넘기는 명령어

break: 조건들과 무관하게 사용자가 원하는 시점에 반복문을 빠져나올 수 있음

for (let i = 0; i < 100; i++) {
	if (i % 3 === 0) continue;  // 한 루프를 건너뜀
    if (i > 10) break;  // 루프 종료
    console.log(i)
}

 

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

const arr = [1, 2, 3];

for (const i of arr) {
	console.log(i);
}

 

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

const person = {
    name: '박지민'
    age: 23
    married: false
}

for (const key in person) {
    console.log(person[key]);
}

 

while문: 괄호 안의 조건이 참인 동안 반복

while (조건) {
	실행할 명령
}

 

do while 문: 조건문이 반복문의 끝 위치에서 판별

• 실행될 때 우선 진입 하면서 무조건 한 번은 실행되고 조건문으로 넘어감

do {
	실행할 명령
} while (조건)

 

 

함수

• 반복될 수 있는 작업 정의
• input을 받아 output 반환

function 함수명() { // 함수 선언
	명령
}

함수명() 또는 함수명(변수) // 함수 호출

 

매개변수와 인자

• 매개변수: 함수를 정의할 때 작성하는 필요 인자 -> 함수의 입력 변수
• 인자: 함수를 호출할 때 전달하는 값 -> 함수의 입력 값

function countTo (to) {  // 매개변수: to
	for (let i = 1; i <= to; i++) {
		console.log(i);
	}
}

countTo(5);  // 인자: 5

 

값을 반환하는 함수

return: 함수가 해당 값을 반환 - 마지막에 작성

function add(x, y) {
	return x + y;
}

 

함수도 값

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

const subt = function (x, y) {
  return x - y;
}

console.log(subt(7, 2));

 

화살표 함수

함수 선언을 간단하게 작성 가능

(매개변수) => { 함수 내용 }

const sum = (a, b) => console.log(a + b);

// 명령이 한 줄 -> 중괄호 생략 -> return이 자동적으로 들어감
const mult = (x, y) => x * y;

console.log(mult(2, 7));

// 두 줄 이상의 작업 - 중괄호가 있음 -> 자동으로 return X 도로 return 작성
const mult = (x, y) => {
  console.log(`${x}와 ${y}를 곱합니다.`);
  console.log(`결과는 ${x * y}입니다.`);
  return x * y;
};

console.log(mult(2, 7));

 

 

HTML 요소들 선택하기

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

 

getElementsByTagName: 태그명으로 선택

document.getElementsByTagName('section');

// 상수/변수로 저장 가능 - 변수명이나 상수명 앞에 $를 붙임
const $listItems = document.getElementsByTagName('li');

console.log($listItems);

 

getElementsByClassName: 클래스명으로 선택

document.getElementsByClassName('plant');

document.getElementsByClassName('soldout');

 

getElementById: 아이디로 선택

document.getElementById('sweets');

 

 

querySelector, querySelectorAll: CSS 선택자로 선택

document.querySelector('section');  // 첫 번째 요소 반환
document.querySelectorAll('section');  // 모든 요소 반환

document.querySelector('.plant > ul > .soldout');  // plant 클래스 속 ul 속 soldout
document.querySelector('#sweets ul > :nth-child(2)');  // sweets 아이디 속 ul 속 2번째 자식

 

Children: 자식 요소들 반환

document
.querySelector('section')
.children;

 

firstElementChild, lastElementChild

const $firstUl = document.querySelector('ul');

$firstUl.firstElementChild;  // 첫 번째 자식 요소 반환
$firstUl.lastElementChild;  // 마지막 자식 요소 반환

 

parentElement: 부모 요소 반환

$firstUl.parentElement;

 

 

요소들 조작하기

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

const $carrot = document
.querySelector('section > ul > li');

$carrot;
$carrot.textContent;  // 접근자 - 특정 요소가 이미 가진 값에 접근해서 반응 받는 것 
$carrot.textContent = '제주당근';  // 요소 넣기 가능

 

classList: 리스트 형태의 클래스 확인 및 수정

• 배열과 유사한 기능

const $onion = document
.querySelector('section ul')
.lastElementChild;

$onion;
$onion.classList;  // 코드 상 감춰진 hidden 클래스 값 호출 가능
$onion.classList.remove('hidden');  // hidden 제거 - 숨겨져 있던 요소 나타남
$onion.classList.add('organic');  // organic 클래스 추가

// 반복실행해 볼 것 - 추가 되었다 없어졌다 함
$onion.classList.toggle('soldout');  // 토글링(on/off) 추가

 

style: CSS 스타일 확인 및 수정

$onion.style;

$onion.style.fontSize;  // - 사용 X -> - 를 빼고 다음 글자를 대문자

// 대괄호 접근자로는 CSS 속성명 그대로 사용 가능
$onion.style['font-size'] = '2em';

// 마침표 접근자를 쓰면 camel case 사용
$onion.style.fontSize = '1em';

 

getAttribute, setAttribute

const $hyperlink = document.querySelector('a');

$hyperlink;

$hyperlink.getAttribute('href');  // 속성 값 확인
$hyperlink.setAttribute('href', 'https://www.yalco.kr');  // 속성 값 수정

 

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

const $message = document
.querySelector('input[name=message]');

const $toggle = document
.querySelector('input[name=toggle]');

$message.value;
$message.value = '안녕하세요';

$toggle.checked;
$toggle.checked = !$toggle.checked;  // 반복 실행 가능

 

removeChild: 요소 제거

const $ul = document.querySelector('section > ul');

$ul.removeChild($onion);  // 요소 제거

// 모든 자식 요소 지우기
while ($ul.firstChild) {
  $ul.removeChild($ul.firstChild);
}

 

createElement: 태그명으로 요소 생성

const $tomato = document.createElement('li');  // tomato라는 li요소 만듦
$tomato.textContent = '토마토';

$tomato;  // 요소만 생성, 아직은 페이지에 추가 X

 

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

$ul.appendChild($tomato); // tomato를 ul안에 추가

// 배열/반복문을 이용해서 배열 속 아이템들을 속성으로 선언 & 안에 추가
const veges = ['상추', '가지', '브로콜리'];

for (const itm of veges) {
  const $el = document.createElement('li');
  $el.textContent = itm;
  $ul.appendChild($el);
};

 

 

이벤트

어떤 동작이나 상태 등의 사건 발생

• ex) 사용자가 키보드를 누룸, 마우스를 누르거나 스크롤을 내림

 

addEventListener: 발생한 이벤트에 반응해서 동작 수행

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

// 마우스 클릭 이벤트 - 버튼을 클릭할때마다 클릭 출력
myButton.addEventListener('click', function () {
	console.log('클릭');
});

 

이벤트 객체: addEventListener의 콜백함수의 인자에 매개변수로 포함

• 해당 이벤트에 대한 상세정보 포함

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

clickPosition.addEventListener('click', function (e) {
	console.log(e);  // e를 콘솔에 출력 했기 때문에 이벤트 객체 출력
});

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

 

포커스 (focus): 입력을 받게 되는 상태

블러 (blur): 입력을 받고 있는 상태로부터 벋어난 상태

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

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

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

 

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

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

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

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