MLOps 개발자 양성과정/web

[Day- 35] JavaScript③ 객체 다루기

숲로 2023. 2. 10. 17:18

chap11. 자바스크립트 객체 다루기

 

 

2. 객체 속성 다루기

 

1) 객체 속성에 접근하기

 

● 대괄호 연산자로 접근하기

대괄호 연산자는 []를 사용해 객체의 속성에 접근하는 방법으로, 배열에서도 사용할 수 있습니다.

객체의 속성에 접근하려면 객체명 뒤에 대괄호를 붙이고 대괄호 안에 키를 넣습니다.

이때 키는 반드시 큰따옴표나 작은따옴표로 감싼 문자열 형태로 작성해야 합니다.

 

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

 

● 마침표 연산자

마침표 연산자는 .를 이용해 객체 속성에 접근합니다. 객체 속성에 접근하려면 접근할 객체명과 객체 속성의 키를 마침표 연산자로 연결 마침표 연산자를 사용할 때는 키를 바로 적어야 합니다

 

객체의 키 식별자에 공백이 있다면 마침표 연산자는 사용할 수 없고 대괄호 연산자로만 접근할 수 있습니다.

공백이 있는 키는 큰따옴표나 작은따옴표로 감싸야 하는데, 마침표 연산자 접근 방식에서는 큰따옴표나 작은따옴표를 붙여서 사용할 수 없기 때문입니다.

 

3) 객체 속성 동적으로 추가하기

객체 속성에 키로 접근해 값을 재할당하면 기존 속성값을 변경할 수 있습니다. 그런데 해당 키가 객체에 없다면 즉, 객체에 없는 속성이라면 해당 키와 값으로 구성된 새로운 속성이 객체에 추가됩니다.

이렇게 이미 만들어진 객체에 나중에 속성을 추가하는 것을 자바스크립트에서는 속성을 동적으로 추가한다고

 

4) 객체 속성 동적으로 삭제하기

객체 속성에 키로 접근해 값을 재할당하면 기존 속성값을 변경할 수 있습니다. 그런데 해당 키가 객체에 없다면 즉, 객체에 없는 속성이라면 해당 키와 값으로 구성된 새로운 속성이 객체에 추가됩니다.

const 상수? 어떻게 재할당해?
 const 키워드로 선언한 상수 변수에 할당한 객체에 속성을 추가하거나 삭제할 수 있었습니다. 이는 객체 자료형의 특성인 참조(reference) 때문에 그렇습니다.
객체는 참조값을 갖고 있어

● 기본 자료형의 데이터 관리: 깊은 복사

기본 자료형은 변수에 데이터를 할당할 때 데이터 그 자체가 할당됩니다.

복사한 값을 재할당할 때 한쪽 데이터가 변경되어도 서로 영향을 미치지 않게 복사되는 것

 

● 참조 자료형의 데이터 관리: 얕은 복사

기본 자료형과 다르게 객체와 같은 참조 자료형은 변수 공간에 데이터가 할당되는 것이 아니고, 데이터가 위치하고 있는 메모리의 주소 값만 할당됩니다.

데이터를 복사했을 때 한쪽 데이터가 변경되면 다른 쪽 데이터도 변경되어 서로 영향을 받는 것

const person = {
  name:"Hong Gildong"
};
const copyPerson = person; // 변수 person에 할당된 객체를 변수 copyPerson에 복사
person.name = "Hong"; // 변수 person에 할당된 객체의 값을 변경
console.log(person.name); // Hong
console.log(copyPerson.name); // Hong

 

 

3. 표준 내장 객체 사용하기

 

1)  문자열을 다루는 String 객체

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

 

2) 배열을 다루는 Array 객체

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

3) 날짜와 시간을 다루는 Date 객체

 

const date1 = new Date("2022-12-23");
const date2 = new Date("2022-12-25");

const dateDiff = date2.getTime() - date1.getTime(); //getTime 밀리초 단위
const interval = dateDiff / (60*60*24*1000); 
//24(시간) × 60(분) × 60(초) × 1000(밀리초)로 나누면 두 날짜 사이의 간격을 일수로 환산
console.log(`두 날짜의 차이는 ${interval}일입니다.`);

4) 수학 연산을 다루는  Math객체

종류 설명
Math.floor() 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환합니다(내림).
Math.ceil() 주어진 숫자와 같거나 큰 정수 중에서 가장 작은 수를 반환합니다(올림).
Math.round() 주어진 숫자를 반올림한 수와 가장 가까운 정수를 반환합니다(반올림).
Math.random() 0 이상 1 미만의 난수를 반환합니다.

4. 브라우저 객체 모델 사용하기

 

표준 내장 객체는 자바스크립트에 내장된 객체입니다. 그런데 자바스크립트 언어 사양에 포함되지 않고 웹 브라우저에서 제공하는 객체도 있습니다. 이를 브라우저 객체 모델(BOM, Browser Object Model)

 

1) 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() 웹 브라우저의 스크롤을 현재 위치에서 상대적 위치로 이동합니다.

2) window 객체의 기본 속성 사용하기

 

3) 웹 브라우저에서 새 창 제어하기

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

open() 메서드는 기본으로 이름이 같은 창은 1개만 열기 때문에 팝업 버튼을 여러 번 눌러도 1개의 창만 열립니다.

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

 

4) 웹 브라우저의 스크롤 이동하기

 

chap12.

문서 객체 모델과 이벤트 다루기

 

1. 문서 객체 모델 이해하기

. 문서 객체 모델이란 웹 브라우저에 표시되는 HTML 문서 구조를 객체화한 모델 구조를 의미

 

1)  문서 객체 모델이 생성되는 방식

문서 객체 모델은 다음 그림처럼 나무를 뒤집어 놓은 형태의 자료구조인 트리(tree) 구조를 가집니다. 그래서 이를 가리켜 DOM 트리구조

 

document 객체 하위에 HTML 태그 요소, 속성, 텍스트, 주석 등이 트리 형태로 구성되는데, 이들을 각각 노드(node)라고 합니다.

그리고 DOM 트리의 가장 꼭대기(최상위)에 있는 노드를 루트 노드(root node)라고 합니다.

document는 노드가 아니라 객체이므로 여기서는 html이 루트 노드가 됩니다.

 

2) 노드 타입 살펴보기

타입 설명
문서 노드(Node.DOCUMENT_NODE) 최상위 document 객체의 노드 타입
요소 노드(Node.ELEMENT_NODE) h1, p 태그와 같은 요소의 노드 타입
속성 노드(Node.ATTRIBUTE_NODE) href, src와 같은 속성의 노드 타입
텍스트 노드(Node.TEXT_NODE) 텍스트에 해당하는 노드 타입
주석 노드(Node.COMMENT_NODE) 주석에 해당하는 노드 타입

요소인지 속성인지 구별

 

 

2. 노드 선택하기

1) 속성으로 노드 선택하기

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

 

2) 메서드로 노드 선택하기

 

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

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

* HTMLCollection 객체는 유사 배열이라서 배열의 인덱스로 요소에 하나씩 접근할 수 있습니다.\

객체 형태지만, 배열처럼 인덱스로 각각의 요소에 접근할 수 있음

<body>
    <h1 id="title">title</h1>
    <p class="text">text-1</p>
    <p class="text">text-2</p>
    <script>
        // id속성값이 title인 요소 노드 선택하기
        const el = document.getElementById("title");
        console.log(el);
        // class속성값이 text인 요소 노드 모두 선택하기
        const classEl = document.getElementsByClassName("text");
        //console.log(classEl);
        concole.log(classE1[0]);
        concole.log(classE1[1]);
        for(let el of classEl){
            console.log(el);
        }
        // p태그에 해당하는 요소 노드 모두 선택하기
        const tagEls = document.getElementsByTagName("p");
        console.log(tagEls);
        for(let el of tagEls){
            console.log(el);
        }
    </script>
</body>

 

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

메서드 형식 설명
querySelector(<CSS 선택자>) 매개변수로 넘어오는 CSS 선택자에 해당하는 노드를 1개만 선택합니다.
querySelectorAll(<CSS 선택자>) 매개변수로 넘어오는 CSS 선택자에 해당하는 노드를 모두 선택합니다. 
<body>
    <div class ="box-1">
        <p class="text">text-1</p>
        <p class="text">text-2</p>
    </div>
    <div class="box-2">
        <p class="text">text-3</p>
        <p class="text">text-4</p>
    </div>
    <script>
        const el1 = document.querySelector(".box-1");
        console.log(el1);
        const el2 = document.getElementsByClassName("box-1")[0].children;
        console.log(el2);
        const el3 = document.querySelectorAll(".box-1 .text");
        console.log(el3);
    </script>
</body>

3.

2) 스타일 조작하기

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

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

은, CSS 속성 중에서 background-color 속성과 같이 속성명에 대시(-)가 있는 속성은 자바스크립트에서 -를 뺄셈 연산자(-)로 인식한다는 점입니다. 그러므로 backgroundColor처럼 카멜 표기법으로 변경해서 작성

 

classList 속성으로 class 속성값을 추가하거나 삭제하면 기존 요소가 가지고 있던 class 속성값을 보존하면서 추가하거나 삭제한다는 특징

setAttribute() 메서드는 아예 속성값을 새로 설정하는 것이어서 기존 class 속성값을 보존하지 않습니다.

 remove() 메서드는 기존 속성을 보존하면서 매개변수로 전달된 속성만 삭제하지만, removeAttribute() 메서드는 속성 자체를 삭제합니다.