[2024 JS 심화 백엔드 스터디] 김규현 #2주차 "JS"

9. 반복문

 

- for문

// 변수설정을 위해 let 사용,괄호안에는 변수의 선언및 할당-종료조건-참일 시 실행할 코드 를 작성 ;으로 구분 
for (let a = 0; a < 9; a +=1) {
    console.log(a);
}
//0 1 2 3 4 5 6 7 8 출력

 

- 중첩 사용

for (let i = 1; i <= 9; i++) {
  for (let j = 1; j <= 9; j++) {
    console.log(i + ' X ' + j + ' = ' + i * j);
  }
}
//i가 1일때 j는 1부터 9까지 반복후 i가 1씩 커지면서 반복

 

- for...of문

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

for (const item of myArray) { // 상수명은 자유
	console.log(item);
}
//myArray라는 상수를 설정하고 item이라는 상수명을 설정하여 값 하나씩 출력

 

- for...in문

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

for (const key in person1) {
	console.log(key, typeof key);
}
//name, age, married라는 key값을 설정한후 for 반복문을 사용하여 key값을 출력함

 

- continue & break

for (let i = 0; i < 100; i++) {
	if (i % 3 === 0) continue; // 한 루프를 건너뜀
	if (i > 10) break; // 루프 종료
	console.log(i);
}
//continue에서는 그 루프를 건너뛰고, break에서는 반복문 루프 종료

 

- while문

let x = 0;

while (x < 10) { //선확인
  console.log(x++); //후조치
}
//for문과 달리 조건이 단순하고 조건을 만족하는한 지속함

 

- do...while문

let x = 12;

do { //선조치
  console.log(x++);
} while (x < 10); //후확인
//12출력됨

 

 

10. 함수

function a() { //a라는 함수 설정
	console.log('안녕하세요'); //a함수 내용설정
	console.log('반갑습니다');
}
a()//a라는 함수 실행

 

- 매개변수와 인자

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

// 5 : 인자
countTo(5);
// 괄호안에 매개변수를 설정하여 함수를 생성하면 함수 실행할때 인자를 대입하여 실행

 

function countTo () {
	for (let i = 1; i <= 5; i++) {
		console.log(i);
	}
}

countTo();

위의 두 함수는 동일한 결과를 도출

 

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

function multi(x, y) { //multi라는 함수 설정, x ,y를 받음
	return console.log(x*y); //x와 y를 곱한값을 출력
}

 

- 함수도 값으로 생각해서 다른함수의 인자로 사용가능

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

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

 

- 화살표 함수

const mult = (x, y) => x * y; //function을 사용하지 않고 =>을 사용하여 함수설정

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

 

 

11. HTML 요소들 

getElementsByTagName	태그명으로 선택	document.getElementsByTagName('section');
getElementsByClassName	클래스명으로 선택	document.getElementsByClassName('plant');
getElementById	아이디로 선택	document.getElementById('sweets');
querySelector	CSS 선택자로 선택, 첫 번째 요소 반환	document.querySelector('section');
querySelectorAll	CSS 선택자로 선택, 모든 요소 반환	document.querySelectorAll('section');
children	자식 요소들 반환	document .querySelector('section') .children;
firstElementchild	첫 번째 요소 반환	$firstUl.firstElementChild;
lastElementchild	마지막 요소 반환	$firstUl.lastElementChild;
parentElement	부모 요소 반환	$firstUl.parentElement;

 

 

12. 요소들 조작하기

 

- textContent

$carrot.textContent; //요소의 텍스트 확인
$carrot.textContent = '제주당근'; // =을 사용하여 요소의 텍스트 수정

 

- classList

$onion.classList;//onion의 리스트 형태의 클래스 확인 
$onion.classList.remove('hidden'); // onion의 'hidden'클래스 삭제
$onion.classList.add('organic'); // onion의 'organic'클래스 추가

 

- style

$onion.style; //onion의 CSS스타일 확인
$onion.style.fontSize; 
$onion.style['font-size'] = '2em';//onion의 CSS 폰트 스타일 변경

 

- getAttribute, setAttribute

$hyperlink.getAttribute('href'); //href에 연결되어 있는 주소 확인
$hyperlink.setAttribute('href', 'https://www.yalco.kr'); // href를 ,뒤에 있는 주소에 연결

 

- value, checked

$message.value; //message의 vlaue값 확인
$message.value = '안녕하세요'; //message의 value 값을 '안녕하세요'로 전환
$toggle.checked; //checked의 toggle값 확인
$toggle.checked = !$toggle.checked; //checked의 toggle값 전환

 

- removeChild

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

 

- createChild

const $tomato = document.createElement('li');
$tomato.textContent = '토마토'; //새로운 요소 생성

 

13. 이벤트

 

- addEventListener

// 마우스 클릭 이벤트
myButton.addEventListener('click', function () { //click 에 함수 function 이벤트 삽입
	console.log('클릭');
});
//첫 번째 인자로 주어진 이벤트에 두 번째 인자로 주어진 메서드 동작을 부여,, 콜백함수라 부름