[2024 JS 심화 프론트 스터디] 류상우 #2주차

목차

• 반복문
• 함수
• HTML 요소
• 이벤트

---

반복문

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

 

for 문: for (변수의 선언 및 할당; 조건문; 참일 시 실행할 코드) {} 형식으로 변수를 선언 혹은 할당한 후 조건문이 참일 시 블럭 내의 코드를 실행하고 괄호 안 세 번째 요소를 실행한다. 괄호 안의 요소들은 ;로 구분한다.

for (let i = 0; i < 5; i++) {
  console.log(i);
} //0 1 2 3 4

• 루프 제어
  • continue: 현재 진행 중인 루프를 건너뛴다. 즉, 블럭 내의 continue 이후 코드는 실행되지 않는다.
  • break: 반복문을 종료한다.

for (let i = 0;; i++) {
    if (i % 3 === 0) continue;
    if (i > 10) break;
    console.log(i);
}//1 2 4 5 7 8 10

• for ... of 문: 배열의 요소들을 순서대로 반환한다.

const arr = ['Web', 'IN', 'Kookmin'];

for (const item in arr) {
    console.log(item);
}//Web IN Kookmin

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

const rswoo = {
    name: '류상우',
    age: 20,
    club: 'WINK'
}

for (const key in rswoo) {
    console.log(key, rswoo[key]);
}
//name 류상우
//age 20
//club WINK

---

while 문: while (조건문) {} 형식으로 조건문이 참일 시 블럭 안의 코드가 실행된다.

let i = 0;

while (i < 5) {
  console.log(i);
  i++
}//0 1 2 3 4

• do ... while 문: do {} while (조건문) 형식으로 블럭 안의 코드를 실행한 후 조건문이 참일 시 계속 진행된다.

let i = 5;

do {
  console.log(i);
  i++
} while (i < 5);
//5

---

함수

반복 될 수 있는 작업을 정의하는 것으로 input과 output이 존재한다. 일반적으로 function 함수명 (매개변수) {} 형식이다.

function hello () {
    console.log('Hello, World!');
}

hello(); //Hello, World!

• 매개변수와 인자: 괄호 내에 작성하며 특정 인풋을 함수 내에서 사용할 수 있게한다. 쉼표로 구분해 여럿을 사용할 수도 있다.

//name = 매개변수
function hello (name) {
    console.log("Hello, ", name, "!");
}

//"상우" = 인자
hello("상우"); //Hello, 상우 !

• 값을 반환하는 함수: return 을 통해 함수가 어떤 값을 반환하도록 한다. return이 실행되면 함수가 종료된다.

function bigger (a, b) {
    if (a > b) return a;
    return b;
}

console.log(bigger(1, 3)); //3

• 화살표 함수: function으로 정의한 함수와는 세부적으로 기능이 다르다. const 함수명 = (매개변수) => {} 형식이다.
  블럭 안의 코드가 한 줄이고 값만 반환하는 경우 중괄호와 return을 생략할 수 있다.

const add = (a, b) => a + b;
const mult = (a, b) => {
    console.log(`${a} * ${b} = ${a * b}`)
    return a * b
}

console.log(add(2, 3)) //5
console.log(mult(2, 3)) //2 * 3 = 6  6

---

HTML 요소

JavaScript에서 HTML 요소를 선택 및 조작할 수 있다.

DOM: Document Object Model의 약자로 문서 객체 모델이라는 뜻이다. XML이나 HTML문서에 접근하기 위한 일종의 인터페이스로, 문서 내의 모든 요소를 정의하고 각 요소에 접근하는 방법을 제공한다.

 

HTML 요소 선택하기: 여러 방법으로 요소를 선택하고 상수/변수로 저장할 수 있다. 상수나 변수로 지정할 때에는 보 앞에 $를 붙인다.

• getElementsByTagName: 태그명으로 요소를 선택한다.
• getElementsByClassName: 클래스명으로 요소를 선택한다.
• getElementsById: 아이디로 요소를 선택한다.
• querySelector, querySelectorAll: CSS선택자로 요소를 선택한다. 전자는 첫 번째 요소를, 후자는 모든 요소를 반환한다.
• children: 어떤 요소의 자식 요소들을 반환한다
• firstElementChild, lastElementChild: 첫 번째 / 마지막 자식 요소를 반환한다.
• parentElement: 어떤 요소의 부모 요소를 반환한다.

HTML 요소 조작하기: 선택한 HTML 요소를 조작한다.

• textContent: 요소의 텍스트를 확인 및 수정한다.
• classList: 요소의 클래스를 리스트 형태로 확인하고 수정할 수 있다. 배열과 유사한 기능이다.
• style: 요소의 CSS 스타일을 확인 및 수정한다.
• getAttribute, setAttribute: 요소의 속성을 반환 / 수정한다.
• value, checked: 인풋 요소들의 값을 확인 및 수정한다.
• removeChild: 요소를 제거한다
• createElement: 태그명으로 요소를 생성한다.
• appendChild: 어떤 요소를 대상 요소 안에 넣는다.

---

이벤트

이벤트란 클릭이나 드래그, 키보드 입력 등의 행위를 말한다. 

 

addEventListener: 요소에 이벤트 리스너를 추가한다. 첫 번째 인자로 주어진 이벤트에, 두 번째 인자로 주어진 메서드의 동작을 부여한다.

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

//myButton을 클릭하면 console.log('클릭')이 실행된다
myButton.addEventListener('click', function () {
	console.log('클릭');
});

//따로 정의된 함수를 인자로 사용할 수도 있다
const logMouseEnter = () => { console.log('진입'); };
myButton.addEventListener('mouseenter', logMouseEnter);

• 콜백함수: 함수가 어떤 함수에 인자로 전달되어, 그 함수 내부에서 실행되는 것을 말한다. addEventListener도 콜백함수이다. 

function f1(msg, callback) {
    callback(msg);
}

f1("callback1", (msg) => console.log(msg)); // callback1 출력
//msg를 콘솔에 출력하는 익명 함수를 인자로 사용하였다.

• 이벤트 객체: addEventListener 의 콜백함수의 인자에 매개변수로 포함된다. 해당 이벤트에 대한 상세정보 포함한다.

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

clickPosition.addEventListener('click', function (e) {
	console.log(e);
});
//clickPosition을 클릭했을 때 클릭한 위치, alt를 누르고 클릭했는지 등의 정보가 e에 포함된다.