JavaScript 객체

프론트엔드(Web)/JavaScript

JavaScript 객체

만능 엔터테이너 2024. 7. 16. 20:59

728x90

SMALL

<노드>.style.<css 속성명> = <속성값>;

객체는 { } 를 이용하여 생성이 가능하며 이러한 방식을 리터럴 방식으로 객체를 생성했다고 표현합니다.

만약, { } 내부에 아무런 속성이 없으면 빈 객체라고 부릅니다.

대괄호 연산자로 접근하기 = [ ]

console.log(person["name"]);

마침표 연산자

const person = {
  name:"Hong Gildong"
};
console.log(person.name);

객체 속성 동적으로 추가 - 객체 속성에 값을 할당해 접근하면 해당 속성이 존재하는지 확인하고, 없는 속성이면 해당 키와 값으로 구성된 새로운 속성을 객체에 추가합니다.

const person = {};
person.name = {
  firstName:"GilDong", lastName:"Hong"};
  person.likes = ["apple", "samsung"];
  person.printHello = function(){
  return "hello";
}

객체 속성 동적으로 삭제 - 객체 속성에 접근할 때 앞에 delete 키워드를 명시하면 해당 속성이 삭제됩니다.

const person = {
  name:"Hong GilDong"
  };
delete person.name // 또는 delete person["name"]
console.log(person); { } 출력

표준 내장 객체

문자열을 다루는 string 객체

구분		설명
속성	length	문자열의 길이를 반환
메서드	includes()	매서드의 매개변수에 문자열 중 대상 문자열에 포함되어 있으면 true, 아니면 false 반환
	replace()	대상 문자열에서 메서드의 매개변수에 인자로 전달되는 문자열과 일치하는 모든 부분을 찾아서 다른 데이터로 변경한 새로운 문자열을 반환합니다.
	replaceAll()	대상 문자열에서 메서드의 매개변수에 인자로 전달되는 문자열과 일치하는 모든 부분을 찾아서 다른 데이터로 변경한 새로운 문자열을 반환합니다.
	split()	메서드의 매개변수에 인자로 전달되는 구분자를 이용해 대상 문자열을 여러 개의 문자열로 분리하고 ,분리한 문자열을 새로운 배열로 반환합니다.
	toUpperCase()	대상 문자열을 대문자로 변경해 반환
	trim()	대상 문자열의 앞뒤 공백을 제거한 값을 반환
	indexOf()	대상 문자열과 일치하는 첫 번째 문자의 인덱스를 반환

length 속성

const pw = "124";
if(pw.length < 4) {
  console.log("비밀번호는 최소 4자리 이상 입력해 주세요.");
}

includes() 속성

const email = "test!naver.com";
if(email.includes("@") === false) {
  console.log("올바른 이메일 형식이 아닙니다.");
}

indexOf() 속성

const email = "test!naver.com";
if(email.indexOf("@")=== -1){
  console.log("올바른 이메일 형식이 아닙니다.");
}

배열을 다루는 array 객체

구분	구분	설명
속성	length	배열의 요소 개수를 반환합니다.
파괴적 메서드	push()	배열의 맨 뒤에 데이터를 추가합니다.
	pop()	배열의 맨 뒤에서 데이터를 추출합니다.
	unshift()	배열의 맨 앞에서 데이터를 추가합니다.
	shift()	배열의 맨 앞에서 데이터를 추출합니다.
	sort()	배열의 요소를 정렬합니다.
	reverse()	배열의 요소를 역순으로 정렬합니다.
비파괴적 메서드	forEach()	배열의 요소를 하나씩 순회하면서 요소마다 콜백 함수를 호출합니다.
	filter()	배열의 요소를 하나씩 순회하면서 콜백 함수를 호출해 true를 반환하는 요소만 추출합니다. 추출한 요소로 새로운 배열을 만들고 만들어진 배열을 반환합니다.
	find()	배열의 요소를 탐색하면서 주어진 판별 함수를 만족하는 첫 번째 값을 반환합니다.
	findIndex()	값 대신 인덱스 숫자를 반환한다는 것만 빼면 find() 메서드와 같습니다.
	includes()	배열에 특정 값이 포함되어 있는지 확인해서 포함됐으면 true, 아니면 false를 반환합니다.
	join()	배열의 모든 요소를 주어진 구분자로 합칩니다.

파괴적 메서드 - 메서드를 사용했을 때, 원본 데이터를 변경하는 메서드

비파괴적 메서드 - 메서드를 사용했을 때, 원본 데이터를 변경하지 않는 메서드

브라우저 객체 모델(BOM)

종류	설명
window	웹 브라우저가 열릴 때마다 생성되는 최상위 관리 객체
document	웹 브라우저에 표시되는 HTML 문서 정보가 포함된 객체
location	웹 브라우저에 현재 표시된 페이지에 대한 URL 정보가 포함된 객체
history	웹 브라우저에 저장된 방문 기록이 포함된 객체
navigator	웹 브라우저 정보가 포함된 객체
screen	웹 브라우저의 화면 정보가 포함된 객체

이 중 실무에서 가장 많이 쓰이는 window, document 객체만 다루겠습니다.

window 객체의 기본 속성 / 웹 브라우저의 새로운 창과 스크롤 제어 메서드

구분		설명
속성	innerWidth	웹 브라우저 화면의 너비를 px 단위로 나타냅니다.
	innerHeight	웹 브라우저 화면의 높이를 px 단위로 나타냅니다.
	outerWidth	웹 브라우저 창의 너비를 px 단위로 나타냅니다.
	outerHeight	웹 브라우저 창의 높이를 px 단위로 나타냅니다.
	screenTop/screenY	웹 브라우저 위쪽 면과 모니터의 간격을 px 단위로 나타냅니다.
	screenLeft/screenX	웹 브라우저 왼쪽 면과 모니터의 간격을 px 단위로 나타냅니다.
	pageXOffset/scrollX	웹 브라우저의 수평 스크롤 위치를 px단위로 나타냅니다.
	pageYOffset/scrollY	웹 브라우저의 수직 스크롤 위치를 px 단위로 나타냅니다.
메서드	alert()	알림창을 표시합니다.
	confirm()	확인창을 표시합니다.
	prompt()	입력창을 표시합니다.
	open()	새로운 웹 브라우저 창을 엽니다.
	close()	웹 브라우저 창을 닫습니다.
	setTimeout()	일정 시간(ms) 뒤에 콜백 함수를 한 번만 실행합니다.
	setInterval()	일정 시간(ms)마다 콜백 함수를 반복적으로 실행합니다.
	clearInterval()	setInterval() 메서드로 반복 실행되는 함수를 중지합니다.
	scrollTo()	웹 브라우저의 스크롤을 특정 위치만큼 이동합니다.
	scrollBy()	웹 브라우저의 스크롤을 현재 위치에서 상대적 위치로 이동합니다.

<!DOCTYPE html>

<head>

<title>Window 객체의 속성</title>

<style>

/* 웹 브라우저에 스크롤을 생기게 하기 위해 body 태그에 너이, 높이 추가 */

body{

width:2500px;

height:5000px;

}

/* 스크롤 되어도 버튼이 따라다니게 하기 위해 fixed 속성값 추가 */

button{

position:fixed;

left:10px;

top:10px;

}

</style>

</head>

<body>

<button onclick="printInfo()">window 객체 속성</button>

function printInfo(){

console.log(`웹 브라우저의 너비(innerWidth): ${window.innerWidth}`);

console.log(`웹 브라우저의 높이(innerHeight): ${window.innerHeight}`);

console.log(`웹 브라우저 창의 너비(outerWidth): ${window.outerWidth}`);

console.log(`웹 브라우저 창의 높이(outerHeight): ${window.outerHeight}`);

console.log(`웹 브라우저 창 위쪽 면과 모니터 사이의 간격(screenTop,screenY): ${window.screenTop}/${window.screenY}`);

console.log(`웹 브라우저 창 왼쪽 면과 모니터 사이의 간격(screenLeft,screenX): ${window.screenLeft}/${window.screenX}`);

console.log(`웹 브라우저 창의 스크롤 가로 위치(scrollX): ${window.scrollX}`);

console.log(`웹 브라우저 창의 스크롤 세로 위치(scrollY): ${window.scrollY}`);

}

</script>

</body>

</html>

window 객체의 open() 메서드는 웹 브라우저에서 새로운 창을 여는 데 사용합니다.

window.open(경로, 이름, 속성);

button 태그를 클릭했을 때, popup.html 파일이 새 창에서 열리게 하고 싶다면 open() 메서드를 다음과 같이 사용합니다.

두 번째 매개변수로 전달된 팝업은 새 창의 이름을 '팝업'이라고 지정하겠다는 의미입니다.

세 번째 매개변수는 새 창의 속성을 지정하는 값으로, 새 창의 너비를 200px, 높이를 100px로 지정합니다.

속성	예	설명
width	width=400	웹 브라우저의 너비를 px 단위로 지정
height	height=400	웹 브라우저의 높이를 px 단위로 지정
left	left = 400	웹 브라우저 왼쪽에서의 위치를 px 단위로 지정
top	top = 400	웹 브라우저 위쪽에서의 위치를 px 단위로 지정

<!DOCTYPE html>

<head>

</head>

<body>

function popup(){

window.open('popup.html', '팝업', 'width=200, height=100');

// window.open('popup.html', '팝업', 'width=200, height=100, left=400, top=400, titlebar=no, resizable=yes');

}

</script>

</body>

</html>

속성으로 노드 선택하기

구분	속성	설명
모든 노드 탐색	parentNode	부모 노드를 반환
	childNodes	모든 자식 노드를 반환
	firstChild	첫 번째 자식 노드를 반환
	lastChild	마지막 자식 노드를 반환
	previousSibling	이전 형제 노드를 반환
	nextSibling	다음 형제 노드를 반환
요소 노드 탐색	parentElement	부모 요소 노드를 반환
	chlidren	자식 요소 노드를 반환
	firstElementChild	첫 번째 자식 요소 노드를 반환
	lastElementChild	마지막 자식 요소 노드를 반환
	previousElementSibling	이전 요소 노드를 반환
	nextElementSibling	다음 요소 노드를 반환

document 객체로 접근 가능한 html 노드로 이동하려면 firstChild 속성을 사용하고, 첫 번째 
자식 요소 노드로 이동하고 싶다면 firstElementChild 속성을 사용하면 됩니다.

document.firstChild // <DOCTYPE html>
document.firestElementChild; // html

메서드로 노드 선택하기

속성값과 태그명 사용하기 - get 메서드

메서드 형식	설명
getElementId(<id 속성값>)	id 속성값과 일치하는 요소 노드를 1개만 선택합니다.
getElementsByClassName(<class 속성값>)	class 속성값과 일치하는 요소 노드를 모두 선택합니다.
getElementByTagName(<태그명>)	태그명과 일치하는 요소 노드를 모두 선택합니다.

<!DOCTYPE html>

<head>

</head>

<body>

<h1 id="title">title</h1>

// id 속성값이 title인 요소 노드 선택하기

const el = document.getElementById("title");

console.log(el);

// class 속성값이 text인 요소 노드 모두 선택하기

const classEl = document.getElementsByClassName("text");

console.log(classEl);

// console.log(classEl[0]);

// console.log(classEl[1]);

for(let el of classEl){

console.log(el);

}

// p 태그에 해당하는 요소 노드 모두 선택하기

const tagEls = document.getElementsByTagName("p");

console.log(tagEls);

// console.log(tagEls[0]);

// console.log(tagEls[1]);

for(let el of tagEls){

console.log(el);

}

</script>

</body>

</html>

이때, getElementById () 메서드로 선택하는 요소는 무조건 1개이기에 해당하는 요소 1개만 보여주지만, 다른 2개의 메서드는 객체로 여러 요소를 한꺼번에 선택합니다.

CSS 선택자 사용하기 - query 메서드

매개변수로 css 선택자를 전달받아 노드를 선택하는 메서드

메서드 형식	설명
querySelector(<CSS 선택자>)	매개변수로 넘어오는 CSS 선택자에 해당하는 노드를 1개만 선택합니다.
querySelectorAll(<CSS 선택자>)	매개변수로 넘어오는 CSS 선태갖에 해당하는 노드를 모두 선택합니다.

const el = document.querySelector(".box-1");

// const el = document.getElementsByClassName("box-1")[0].children;

// const el = document.querySelectorAll(".box-1 .text");

console.log(el);

</script>

※ get 메서드 보다 query 메서드가 더 범용성이 좋기에 query 메서드를 사용합니다.

콘텐츠 조작하기

선택한 노드의 타입이 요소 노드면 다음 속성을 사용해 콘텐츠를 조작할 수 있습니다.

속성	설명
textContent	요소 노드의 모든 텍스트에 접근합니다.
innerText	요소 노드의 텍스트 중 웹 브라우저에 표시되는 텍스트에만 접근합니다.
innerHTML	요소 노드의 텍스트 중 HTML 태그를 포함한 텍스트에만 접근합니다.

<!DOCTYPE html>

<head>

</head>

<body>

<p id="title">Hello, <span style="display: none;">Javascript!</span></p>

document.getElementById("title").textContent; // Hello, Javascript!

document.getElementById("title").innerText; // Hello,

document.getElementById("title").innerHTML; // Hello, <span style="display: none;">Javascript!</span>

console.log(document.getElementById("title").textContent);

console.log(document.getElementById("title").innerText);

console.log(document.getElementById("title").innerHTML);

</script>

</body>

</html>

스타일 조작하기

선택된 노드의 타입이 요소 노드면 style 속성으로 요소에 스타일(CSS)을 지정할 수 있습니다.

<노드>.style.<css 속성명> = <속성값>;

예를 들어, p 태그의 텍스트 색상을 빨간색으로 변경하고 싶다면 다음과 같이 작성합니다.

const pEl = document.querySelector("p"); // 노드 선택하기

pEl.style.color = "red";

</script>

querySelector () 메서드로 스타일을 조작하고 싶은 노드를 선택 -> 선택한 노드에 style 속성으로 조작하고 싶은 css 속성명을 적고, 적용하고 싶은 css 속성값을 할당

이때, background-color와 같은 속성은 -를 빼기로 인식하므로 카멜표기법인 backgroundColor로 작성해야합니다.

const pEl = document.querySelector("p"); // 노드 선택하기

pEl.style.backgroundColor = "#ff0000";

pEl.style.fontSize = "20px";

pEl.style.color = "#ffffff";

</script>

클래스 속성 조작하기

<노드>.classList.add("class 속성값"); // 추가
<노드>.classList.remove("class 속성값"); // 삭제
<노드>.classList.toggle("class 속성값"); // 추가와 삭제 반복

<style>

.red-color{

color:red;

}

.fz20{

font-size:20px;

}

</style>

</head>

<body>

const pEl = document.querySelector("#text"); // 노드 선택하기

pEl.classList.add("red-color", "red-color");

pEl.classList.add("red-color", "fz20");

// pEl.classList.add("red-color", "fz20");

</script>

</body>

이때, 적용된 class 속성값을 삭제하고 싶을 때는 classList 속성의 remove() 메서드를 사용합니다.

<style>

.red-color{

color:red;

}

.fz20{

font-size:20px;

}

</style>

</head>

<body>

const pEl = document.querySelector("#text");

pEl.classList.remove("red-color", "fz20"); // 삭제

</script>

</body>

toggle() 메서드는 add() 메서드와 remove() 메서드를 반복해서 호출합니다.

<body>

const pEl = document.querySelector("#text"); // 노드 선택

// 1초마다 toggle 메서드 반복 실행

setInterval(function(){

pEl.classList.toggle("red-color");

}, 1000);

</script>

</body>

데이터 속성 조작하기

data-* 속성은 자바스크립트의 dataset 속성을 사용해 조작 가능합니다.

const buttonEls = document.querySelectorAll("button");

buttonEls.forEach((el) => {

console.log(el.dataset);

// console.log(el.dataset.cnt);

// el.dataset.cnt = 50;

})

</script>

querySelectorAll() 메서드로 button 태그에 해당하는 노드를 한 번에 선택 -> forEach() 메서드로 반복해서 각 노드에 접근한 뒤, dataset 속성으로 data-cnt 속성 정보를 가져와 출력

메서드로 속성 조작하기

지금까지는 document 객체의 속성으로 HTML 요소의 일부 속성을 조작하였습니다. 그런데 다음 메서드를 사용하면 모든 속성을 전체적으로 조작이 가능합니다.

메서드 형식	설명
<노드>.getAttribute("속성명");	속성값을 가져옵니다.
<노드>.setAttribute("속성명", "속성값");	속성값을 설정합니다.
<노드>.removeAttribute("속성명");	속성을 삭제합니다.

const aEl = document.querySelector("a");

const href = aEl.getAttribute("href");

// aEl.setAttribute("href", "https://www.sucoding.kr");

// aEl.innerText = "수코딩";

// aEl.setAttribute("target", "_blank");

console.log(href);

</script>

classList 속성과 setAttribute() 메서드
classList 속성으로 class 속성값을 추가하거나 삭제하면 기존 요소가 가지고 있던 class 속성값을 보존하면서 추가하거나 삭제한다는 특징이 있습니다.
하지만, setAttribute() 메서드는 아예 속성값을 새로 설정하는 것이어서 기존 class 속성값을 보존하지 않습니다.

노드 추가 및 삭제하기

구분	메서드	설명
노드 생성	createElement()	요소 노드를 생성합니다.
	createTextNode()	텍스트 노드를 생성합니다.
	createAttribute()	속성 노드를 생성합니다.
노드 연결	<기준 노드>.appendChild(<자식 노드>)	기준 노드에 자식 노드를 연결합니다.
노드 연결	<기준 노드>.setAttributeNode(<속성 노드>)	기준 노드에 속성 노드를 연결합니다.

<!DOCTYPE html>

<html>

<head>

<title>Create Node</title>

</head>

<body>

// 요소 노드 생성하기

const aEl = document.createElement("a");

document.body.appendChild(aEl);

// 텍스트 노드 추가하기

const txtEl = document.createTextNode("길벗");

document.querySelector("a").appendChild(txtEl);

// href 속성 추가하기

const hrefAttr = document.createAttribute("href");

hrefAttr.value = 'https://www.gilbut.co.kr';

document.querySelector("a").setAttributeNode(hrefAttr);

</script>

</body>

</html>

노드 삭제하기

노드를 삭제할 때는 removeChild() 메서드를 사용합니다.

<부모 노드>.removeChild(<자식 노드>)

다음은 p 요소 노드를 찾아서 삭제하는 코드입니다. 삭제할 때는, 항상 부모 노드에서 removeChild()메서드를 사용해야 합니다. 따라서, 부모 노드를 반환하는 parentNode 속성으로 부모 노드에 접근해서 삭제합니다.

<!DOCTYPE html>

<head>

<title>remove Child</title>

</head>

<body>

const pEl = document.querySelector("p");

pEl.parentNode.removeChild(pEl);

</script>

</body>

</html>

폼 조작하기

form 태그 선택하기

html 폼 요소의 시작은 항상 form 태그입니다. form 태그는 forms 속성과 name 속성으로 선택할 수 있습니다.

forms 속성 - doument 객체의 forms 속성은 모든 form 태그의 노드 정보를 HTMLCollection 객체에 담아 반환합니다.

<!DOCTYPE html>

<head>

<title>forms</title>

</head>

<body>

<form>

</form>

<form>

</form>

<form>

</form>

</body>

</html>

name 속성 - form 태그에 name 속성을 사용하면 forms 속성보다 훨씬 직관적으로 form 요소 노드를 추가 가능합니다.

<!DOCTYPE html>

<head>

<title>forms name</title>

</head>

<body>

</form>

</form>

</form>

</body>

</html>

이때, name 속성으로 추가하면 form 태그의 순서가 바뀌어도 문제가 발생되지 않습니다.

폼 요소 선택하기

폼 요소를 선택할 때는, elements 속성이나 name 속성을 사용합니다.

elements 속성은 form 요소 노드의 하위 노드 중 폼 요소 노드만 반환하는 속성입니다.

<!DOCTYPE html>

<head>

<title>forms_element</title>

</head>

<body>

<option value="female">female</option>

</select>

</form>

</body>

</html>

728x90

LIST

'프론트엔드(Web) > JavaScript' 카테고리의 다른 글

JAVASCRIPT [기본 ~ 심화 문법] (1)	2024.09.24
JavaScript 문서 객체 모델 및 이벤트 (0)	2024.07.18
JavaScript 함수 (0)	2024.07.16
JavaScript 조건문, 반복문 (1)	2024.07.16
JavaScript 함수 및 자료형, 연산자 (1)	2024.07.16

현재글JavaScript 객체

250x250

yh-jeon Full stack

기획부터 디자인, 프론트, 백 개발까지 모든 거를 다 해보고 싶은 개발자 입니다~!

티스토리챌린지, 오블완, ㅂ, #유데미 #udemy #웅진씽크빅 #스나이퍼팩토리 #인사이드아웃 #미래내일일경험 #프로젝트캠프 #부트캠프 #react #리액트프로젝트 #프론트엔드개발자양성과정 #개발자교육과정#유데미 #udemy #웅진씽크빅 #스나이퍼팩토리 #인사이드아웃 #미래내일일경험 #프로젝트캠프 #부트캠프 #react #리액트프로젝트 #프론트엔드개발자양성과정 #개발자교육과정 태그 삭제# 태그입력, .,

Today :
Yesterday :

일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

yh-jeon Full stack