[2024-2 웹기초 스터디] 김민재 #4주차

보충 수업 Part 1.

---

문자열 메소드

• toUpperCase(), toLowerCase() - 대문자, 소문자
• trim(), trimStart(), trimEnd() - 공백 제거
• repeat() - 지정한 문자 반복
• padStart(), padEnd() - 지정한 문자열을 횟수만큼 추가
• indexOf() - 주어진 키워드를 문자열에서 찾아서 반환
• includes() - 문자열에 해당 문자가 있는지 확인
• startsWith(), endsWith() - 해당 문자로 시작하고 끝나는 지 확인
• replace(), replaceAll() - 문자열 안에 해당 문자를 변경
• substring() - 인덱스에 해당 되는 문자를 리턴
• split() - 주어진 기준에 따라 슬라이싱
• slice() - 주어진 범위에 따라 슬라이싱

배열 메소드

• push() - 배열 끝에 새로운 요소 추가
• pop() - 배열 끝에 있는 요소 반환
• unshift() - 배열 앞부분에서 push()
• shift() - 배열 앞부분에서 pop()
• forEach() - 배열을 순회해서 요소를 콜백
• map() - 새로운 배열을 반환하는 forEach()
• includes() - 배열에 해당 요소가 있는지 확인
• find() - 조건을 만족하는 첫번째 요소만 반환
• findindex() - 조건을 만족하는 첫번째 요소의 인덱스 반환
• fill() - 지정한 요소로 배열을 채움
• slice() - 인덱스 번호를 정해 슬라이스
• splice() - 인덱스를 자르고, 몇개를 자를지, 새로운 요소를 넣을지 정할 수 있음
• join() - 배열의 요소를 이어 붙여 문자열로 반환
• concat() - 배열을 이어 붙임
• filter() - 주어진 판별에 대해 참인 요소만 반환
• reduce() - 배열의 요소를 순회하며 실행 값을 누적해 하나의 결과값을 반환

객체 심화

• for in - 객체에서 사용하는 반복
• 객체 축약 표현

const name = '김민재'
const country = 'KR'

const user = {
    name,
    country,
}

console.log(user)

• 메소드 축약 표현

const obj = {
	greeting(){
		console.log('HI!');
	},
};

obj.greeting();

• object.keys() - 인자로 객체를 전달해주면 객체가 가지고 있는 키 값을 배열로 반환
• object.values() - 인자 로 객체를 전달해주면 객체가 가지고 있는 값을 배열로 반환
• object.entries() - 객체안의 키와 값을 배열로 묶어서 반환

구조분해할당

• 배열의 구조분해할당

const [one, two, three] = arr;

• 객체의 구조분해할당

const { x, y } = obj;

const { x: hello, y: world } = obj;
console.log(hello, world)

• 함수와 구조분해할당

const obj = {
	x: 10,
	y: 20,
};

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

보충 수업 Part2.

---

DOM(document object model)

• js로 html 문서를 조작하기 위해 사용
• getElementsById() - id 값을 선택
• getElementsByClassName() - 클래스 값을 선택
• getElementsByTagName() - 태그 값을 선택
• querySelector(), querySelectorAll() - id, 클래스, 태그 다 사용 가능함
• createElement() - 새로운 요소를 만듬

이벤트

• addEventListener - 이벤트 리스너 등록
• removeEventListener - 이벤트 리스너 삭제

모듈

• 코드를 모아놓은 하나의 파일
• export - 다른 파일의 함수 등을 내보냄
• import - 내보낸 다른 파일의 함수를 가져와서 사용 가능