[2024 JS 심화 프론트 스터디] 한승훈 #2주차

09. 반복문

반복문은 주어진 조건동안 블록을 반복 수행합니다.

continue, break 사용 가능

*for 문

for (let i = 0; i < tc; i++){}

*배열의 for ~ of 문

const array = [1, 2, 3, 4, 5]

for (const e of array){} 으로 순환이 가능합니다.

*딕셔너리의 for ~ in 문

const me = {

name = "한승훈"

age = 22

}

for (const key in me){} 로 순환이 가능하다.

*while 문

()내부의 식이 참일 경우 반

while (tc < 10) console.log(tc++)

*do while

do {

식

}while (조건)



10. 함수

함수는 function funcName (parameters){}로 선언한다.

return으로 값을 반환.

*함수는 argument로 사용될 수 있다.

*화살표 함수로 간략하게 표현이 가능하다.

ex) 

const multiply (x, y) => x*y



11. HTML 요소들 선택하기

** getElementsBy ~

* getElementsByTagName

document.getElementsByTagName('li') 와 같이 태그명으로 선택

*getElementsByClassName

document.getElementsByClassName('plant'); 와 같이 클래스명으로 선택

*getElementById

document.getElementById('sweets'); 와 같이 ID로 선택



** querySelector, quereSelectorAll: CSS 선택자로 첫 번째, 그리고 전체 요소를 반환한다.

document.querySelector('.plant > ul > .soldout');

document.querySelectorAll('.plant > ul > .soldout');



*자식 요소 반환: children, firstElementChild, lastElementChild          

document.children;

c.f. 부모는 parentElement

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






12. 요소들 조작하기

*textContext

const $carrot = document
.querySelector('section > ul > li');
$carrot;
$carrot.textContent;
$carrot.textContent = '제주당근';


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

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


**style: CSS스타일을 확인하고, 수정한다

$onion.style;
$onion.style.fontSize;
// 대괄호 접근자로는 CSS 속성명 그대로 사용 가능
$onion.style['font-size'] = '2em';
// 마침표 접근자를 쓰면 camel case 사용
$onion.style.fontSize = '1em';


*appendChild, removeChild: 각각 요소를 넣고, 지운다

const $ul = document.querySelector('section > ul');
$ul.removeChild($onion);
$ul.appendChild($tomato);


13. 이벤트

이벤트 리스너를 사용하여 입력을 처리해보자.

addEventListener

// 입력과 이벤트를 각각 입력한다. (ex. click, function())
myButton.addEventListener('click', function () {
   console.log('클릭');
});


*이벤트 객체

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


14. 최종 프로젝트

배운 JS를 통해 .js파일을 만들고, html로 적용시키면 멋진 웹페이지를 볼 수 있어요.

감사합니다.