[2024 JS 백엔드 스터디] 김수아 #2주차 "반복문~최종프로젝트"

08. 반복문

조건이 충족되는 동안 특정 작업을 반복해서 수행한다(중첩사용 가능)

for (let i = 0; i < 5; i++) {
  console.log(i);
}

 

" ; "

• 괄호 안 요소들을 구분
• 변수의 선언 및 할당
• 종료조건
• 참일 시 블록 안의 코드 이후 실행

" continue & break "

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

 

" for ... of문 "

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

const list = ['수아', '국민이', '소프', '소사', '공기수'];

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

 

" for ... in문 "

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

const person = {
	name: '김수아',
	age: '20',
	school: KookMin
}

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

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

 

" While문 "

괄호 안 조건이 참일 동안 반복한다 (선확인 후 조치)

let x = 0;

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

 

" do ... while문 "

(선조치 후 확인)

let x = 12;

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

 

09. 함수

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

• 매개변수와 인자 

특정 input을 받아 작업 수행하는 함수들에 사용 / 여러 개를 쉼표로 구분

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

// 5 : 인자
count(5);

 

• 값을 반환하는 함수

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

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

 

• 함수도 값이다!

변수, 상수에 객체의 값이나 배열의 요소로 다른 함수의 인자 넣기 가능!

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

console.log(what(10,5));

 

• 화살표 함수

// 한 줄 안에 값만 반환시
const mult = (x, y) => x * y;

console.log(mult(5,6));

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

console.log(mult(5,6));

 

10. HTML 요소들 선택

*DOM이란? "Document Object Model"의 약자로 웹 페이지의 구조화된 표현을 나타낸다. DOM은 HTML, XML 및 XHTML 문서 등을 트리 구조로 나타내며, 프로그래밍 언어를 사용하여 해당 문서의 내용, 구조 및 스타일에 동적으로 접근하고 조작할 수 있도록 한다. 웹 개발에서 자바스크립트를 사용하여 DOM을 조작하여 웹 페이지의 동적인 동작을 만들 수 있다.

// 태그명으로 선택하기 getElementsByTagName
document.getElementsByTagName('section');
// 상수/변수로 저장 가능
const $listItems = document.getElementsByTagName('li');

console.log($listItems);

// 클래스명으로 선택하기 getElementsByClassName
document.getElementsByClassName('plant');
document.getElementsByClassName('soldout');

// 아이디로 선택하기 getElementById
document.getElementById('sweets');

// CSS 선택자로 선택하기 (각각 첫 번째, 모든 요소 반환)
// querySelector, querySelectorAll
document.querySelector('section');
document.querySelectorAll('section');
document.querySelector('.plant > ul > .soldout');
document.querySelector('#sweets ul > :nth-child(2)');

// 자식 요소들 반환하기
document
.querySelector('section')
.children;

// 첫번째와 마지막의 자식 요소 반환
//firstElementChild , lastElementChild
const $firstUl = document.querySelector('ul');
$firstUl;
$firstUl.firstElementChild;
$firstUl.lastElementChild;

// 부모 요소 반환하기 parentElement
$firstUl.parentElement;

 

11. 요소들 조작하기 

• textContent_ 요소의 텍스트 확인 및 수정
• classList_ 리스트 형태의 클래스 확인 및 수정
• style_ CSS 스타일 확인 및 수정
• getAttribute, setAttribute_ 요소의 속성을 반환 및 수정
• value, checked_ 인풋 요소들의 값 확인 및 수정
• removeChild_ 요소제거
• createElement_ 태그명으로 요소 생성
• appendChild_ 요소를 대상 요소 안에 넣음

12. 이벤트

첫번째 인자로 주어진 이벤트에, 두번쨰 인자로 주어진 매서드의 동작 부여(콜백함수라 부르기도함)

addEventListener

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

 

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

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

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

 

13. 최종 프로젝트

// 자바스크립트 파일 로드
<script defer src="./script.js"></script>

// 네비게이션 항목 추가
const headerNavs = [
  { title: '얄코강좌는', link: '#about' },
  { title: 'HTML', link: '#html' },
  { title: 'CSS', link: '#css' },
  { title: '커리큘럼', link: '#curriculum' },
  { title: '문의하기', link: '#contact' }
];
const $headerNavUl = document.querySelector('.header__nav ul');

for (const nav of headerNavs) {
  const $li = document.createElement('li');
  $li.classList.add('header__nav-item');

  const $a = document.createElement('a');
  $a.textContent = nav.title;
  $a.setAttribute('href', nav.link);

  $li.appendChild($a);
  $headerNavUl.appendChild($li);
}

// about 항목들 추가
const aboutCards = [
  {
    img: './images/about_1.svg',
    title: '빠른 강의',
    descs: [
      '군더더기 없는 진행으로',
      '여러분의 시간을 절약합니다.'
    ]
  },
  {
    img: './images/about_2.svg',
    title: '손쉬운 학습',
    descs: [
      '강의 페이지를 활용해서',
      '편리하게 실습할 수 있습니다.'
    ]
  },
  {
    img: './images/about_2.svg',
    title: '플레이그라운드',
    descs: [
      '강의를 위해 제작한 도구가',
      '반복학습을 도와줍니다.'
    ]
  }
];
const $aboutDiv = document.querySelector('.about');
for (let i = 0; i < aboutCards.length; i++) {
  const card = aboutCards[i];

  const $div = document.createElement('div');
  $div.classList.add('about__card');

  const $img = document.createElement('img');
  $img.classList.add('about__icon');
  $img.setAttribute('src', card.img);

  const $h2 = document.createElement('h2');
  $h2.classList.add('about__title')
  $h2.classList.add('_' + (i + 1));
  $h2.textContent = card.title;

  const $p = document.createElement('p');
  $p.classList.add('about__text');

  for (const desc of card.descs) {
    const $word = document.createElement('div');
    $word.textContent = desc;
    $p.appendChild($word);
  }

  $div.appendChild($img);
  $div.appendChild($h2);
  $div.appendChild($p);

  $aboutDiv.appendChild($div);
}

// 문의하기 탭 기능
const $contactTabs = document.querySelectorAll('input[name=contact]');
const $contactSlideCon = document.querySelector('.contact__slide-con');

for (let i = 0; i < $contactTabs.length; i++) {
  const $tab = $contactTabs[i];
  const marginLeft = [0, '-100vw'][i];

  $tab.addEventListener('click', () => {
    $contactSlideCon.style.marginLeft = marginLeft;
  });
}

// 모바일 네비게이션 버튼
const $menuBtn = document.querySelector('.header__menu-btn');
const $headerNav = document.querySelector('.header__nav');

$menuBtn.addEventListener('click', (e) => {
  $menuBtn.classList.toggle('on');
  $headerNav.classList.toggle('active');

  // 이 요소 아래 레이어에는 클릭 이벤트가 먹히지 않도록
  e.stopPropagation();
});

document
.querySelector('body')
.addEventListener('click', () => {
  $menuBtn.classList.remove('on');
  $headerNav.classList.remove('active');
});