[2024 JS 심화 프론트 스터디] 박건민 #2주차 "JS 2주차"

12. 반복문 ✅

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

for문

// 💡 변수이므로 let이 사용됨
for (let i = 0; i < 5; i++) {
  console.log(i);
}

 

 

- 괄호 안의 요소들을 ';'으로 구분한다.

- 변수의 할당, 종료 조건, 실행 구문으로 이루어져 있다.

- 참일 시 블록 안의 코드 이후 실행할 것

 

중첩사용

for (let i = 1; i <= 9; i++) {
  for (let j = 1; j <= 9; j++) {
    console.log(i + ' X ' + j + ' = ' + i * j);
  }
}

 

- 구구단을 출력하는 중첩 반복문이다.

- j가 9가 되었을 때 i가 1 증가하며 i가 9가 되면 반복을 종료한다.

continue & break

- continue : 현재 반복 종료 후 다음 반복으로 넘어가게 하는 명령어

- break : 반복문을 종료하는 명령어

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

 

- i를 3으로 나눈 나머지가 0이면 다음 루프로 넘어간다.

- i가 10을 초과하면 반복문 자체를 종료한다.

- 그렇지 않으면 i를 출력한다.

for ... of 문

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

const myArray = ['한놈', '두시기', '석삼', '너구리', '오징어'];

for (const item of myArray) { // 상수명은 자유
	console.log(item);
}

 

- 배열의 요소를 차례대로 출력하는 반복문이다.

for ... in 문

- 객채의 키들을 순서대로 반환

const person1 = {
	name: '김철수',
	age: '25',
	married: false
}

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

 

- 객체의 키들을 순서대로 출력하는 반복문

- 객체의 키와 키의 자료형을 출력한다.

while 문

- 괄호 안의 조건이 참인 동안 반복

- 선확인 후조치

let x = 0;

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

 

- x가 10미만일 때만 반복하는 반복문

let x = 0;

while (x < 100) {
	const toPrint = x++;
	
	// continue와 break 역시 동작
	if (toPrint % 3 === 0) continue;
	if (toPrint > 10) break;

  console.log(toPrint);
}

 

- x가 100 미만일때까지 반복하는 반복문

- toPrint에 x를 저장하고 x를 1 증가 시킨다.

- toPrint가 3이면 다음 루프로 넘어가고 10 이상이면 반복문을 종료한다

- 그렇지 않으면 toPrint를 출력한다.

 

 

13. 함수 ✅

- 반복될 수 있는 작업을 정의

- input을 받아 output을 반환

console.log('HTML로 갖다놓고');
console.log('CSS로 꾸미고');
console.log('JavaScript로 시킨다.');

 

function describeHtmlCssJs () {
	console.log('HTML로 갖다놓고');
	console.log('CSS로 꾸미고');
	console.log('JavaScript로 시킨다.');
}

describeHtmlCssJs();

 

매개변수와 인자

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

- 쉼표로 구분하여 여럿을 받을 수 있음

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

// 5 : 인자
countTo(5);

 

- 매개변수 to를 받아서 to만큼 반복하는 반복문을 실행하는 함수

- i가 1부터 to가 되기 전까지 반복하며 매 반복마다 i를 출력하는 함수

 

값을 반환하는 함수

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

-  마지막에 작성

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

console.log(add(2, 3));

console.log(
  add(add(6, 7), add(8, 9))
);

 

- add는 매개변수 x, y를 받아서 x + y 값을 반환하는 함수

 

함수도 값

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

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

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

 

화살표 함수

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

// 한 줄 안에 값만 반환시
const mult = (x, y) => 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));

 

 

14. HTML 요소들 선택하기  ✅

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');

 

children

- 자식 요소들 반환

document
.querySelector('section')
.children;

 

firstElementChild , lastElementChild

- 첫 번째 / 마지막 자식 요소를 반환

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

$firstUl;

$firstUl.firstElementChild;

$firstUl.lastElementChild;

 

 

15. 요소들 조작하기 ✅

textContent

- 요소의 텍스트 확인 및 수정

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

$carrot;

 

- $carrot 반환

$carrot.textContent;

 

- $carrot에 접근

$carrot.textContent = '제주당근';

 

- 접근 및 값을 수정할 수 있음

- 당근 -> 제주당근 변경

classList

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

- 배열과 유사한 기능

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

$onion;

 

$onion.classList;

 

- 양파 클래스에 접근

 

$onion.classList.remove('hidden');

 

- 양파 숨김 처리

 

$onion.classList.add('organic');

 

- 유기농이되

 

// 반복실행해 볼 것
$onion.classList.toggle('soldout');

 

- 양파 반투명 처리

- classList를 사용하여 onion의 클래스에 접근 및 수정 가능

 

style

- CSS 스타일 확인 및 수정

$onion.style;

$onion.style.fontSize;

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

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

$onion.style['font-size'];

 

getAttribute, setAttribute

- 요소의 속성을 반환 및 수정

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

$hyperlink;

 

$hyperlink.getAttribute('href');

$hyperlink.setAttribute('href', 'https://www.yalco.kr');

$hyperlink.getAttribute('href');

 

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);
}

 

- while문을 사용하여 모든 자식 요소를 제거

 

createElement

- 태그명으로 요소를 생성

const $tomato = document.createElement('li');
$tomato.textContent = '토마토';

$tomato;

 

 

appendChild

- 요소를 대상 요소 안에 넣음

$ul.appendChild($tomato);

const veges = ['상추', '가지', '브로콜리'];

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

 

 

16. 이벤트 ✅

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

 

addEventListener

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

- 콜백함수라 부름

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

 

- 마우스 클릭 시 '클릭' 출력 이벤트 발생

 

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

// 마우스 진입/이탈 이벤트
myButton.addEventListener('mouseenter', logMouseEnter);
myButton.addEventListener('mouseleave', logMouseLeave);

 

- 마우스를 올리면 '진입' 출력, 마우스가 나가면 '이탈' 출력 이벤트 발생

 

이벤트 객체

- 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;
});

 

- 이벤트 리스너 안에 들어가는 함수를 콜백함수라 한다.

- 객체이므로 조회 및 수정도 가능

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

 

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

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

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

 

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

 

- 인풋 요소의 값이 바뀔 때 이벤트 발생

 

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

 

- 키보드로 입력할 때 이벤트 발생