3월 15일 JavaScript - 객체(Object)

객체 Object

객체 = 변수 + 메소드(함수)

객체 자체로의 완성품이기도 하면서 프로그램의 안의 구성물이 되기도 한다.

구조체 다음이 객체, 자바스크립트에서는 구조체가 없다.

객체는 한 가지 목적을 가지고 모아놓은 정보! 배열로 처리하기 어려움.

객체의 정보는 다양하다.

정보객체(정보를 저정하는 것을 목적으로 하는 객체)

변수만 묶어서, 메소드만 묶어서 객체를 표현할 수 있다.

메소드만 묶어서 객체를 표현하는 방법은 많이 없지만 변수만 묶어서 객체로 표현하는 경우는 많음.

JSON(JavaScript Object Notation)

자바스크립트 객체 표기 형식을 빌어 데이터의 전송에 사용하는 문자열 작성 방식

{name: "홍길동", age: 20, adress: "인천시 미추홀구"}

객체를 직접 만들기 보다는 JSON을 사용한다. 오픈 API 공공 인증을 처리할 때 사용함

XML(Extensible Markup Language)

HTML의 확장 형식의 언어, HTM이 문서(보이는 부분)의 골격을 만드는 언어라면, XML은 내부 데이터를 구성하기 위한 언어, 데이터 전송에 사용하는 언어, 파싱(parsing) 등의 복잡하고 오래 걸리는 분석 작업이 필요하다. 요즘은 JSON을 사용.

parsing : 문서의 데이터를 분석하는 작업, 처리가 오래 걸려서 무겁다고 표현한다.

호스트 : 시간, 자원, 용량 등, XML은 호스트가 높다.

JSON과 XML이 같이 사용된다. HTML과 비슷한 형식으로 이루어져 있다.

DOM(Document Object Model) - 문서 객체 모델

1. finder - getElementById, querySelector 등

2. attribute(속성) - 요소의 속성을 가져오거나, 새로운 속성값을 지정하여 모양, 내용을 변화시킬 수 있다.

가져올 때 : let 변수 = 요소.getAttribute("속성명");

let 변수 = 요소.속성명;

지정할 때 : 요소.setAtribute("속성명", "변경값");

요소.속성명 = "변경값";

3. 스타일 변경

1) style 속성을 사용하는 방식

형식) 요소.style.css속성 (css 속성은 카멜케이스로 작성)

요소.setAttribute("style", "css작성형식") 똑같이 css 작성형식으로 작성한다. inline style

setAttribute는 한꺼번에 스타일을 변경하기 때문에 개별적으로 적용되는 style.xxx를 덮어버림

순서상 style.xxx를 밑에서 작성, 일반적으로 두 형식을 혼용하지 않음.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>요소의 스타일 변경</title>
</head>
<body>
    <div id="box">상자</div> 
</body>
<script>
    const box = document.querySelector("#box");
    
    //box.setAttribute("style", "border: 1px solid blue; color: green;")
    box.style.color = "#ff00ff"; 
    box.style.border = "1px solid black";
    box.style.width = "300px";
    box.style.height = "100px";
    // 순서에 따라서 css 스타일이 적용되지 않을 수 있다. 
    // 글자색 후에 border 사용시 글자색을 덮어 버림
    // 둘을 혼용해서 사용하지 않는다.

</script>
</html>

2) 클래스를 변경하여 스타일을 변경하는 방식

classList : 요소의 class 속성을 제어. 클래스를 통해서 바꾸는 것이 수월하다 classList는 객체이다.

add("클래스명"[, "클래스명2", "클래스명3"....]) : 클래스 추가
remove("클래스명"[, "클래스명2", "클래스명3"....]) : 클래스 제거
replace("이전클래스명", "새클래스명") : 새로운 클래스값으로 변경 하나만 변경 가능
contains("클래스명"[, "클래스명2", "클래스명3"....]) : 클래스의 존재 여부 확인(ture/false) 여러개 일 때 and 조건으로 검색
toggle("클래스명") : 추가와 제거가 합쳐짐

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>요소의 스타일 변경</title>
    <style>
        .cl1 {
            background-color: brown;
            width: 300px;
            height: 150px;
            color: yellow;
        }

        .cl2 {
            background-color: darkmagenta;
            width: 400px;
            height: 100px;
            border: 1px dotted bisque;
        }
    </style>

</head>

<body>
    <!-- 클래스가 생략 된 것이라고 본다. -->
    <div>
        <button>추가</button>
        <button>삭제</button>
        <button>교체</button>
        <button>확인</button>
        <button>토글</button>
    </div>
    <div id="box2">상자2</div>
</body>
<script>

    const btns = document.getElementsByTagName("button")
    const box2 = document.getElementById("box2");
    btns[0].addEventListener("click", () => {
        box2.classList.add("cl1");
    });
    btns[1].addEventListener("click", () => {
        box2.classList.remove("cl1");
    });
    btns[2].addEventListener("click", () => {
        box2.classList.replace("cl1", "cl2");
    });
    btns[3].addEventListener("click", () => {
        let c = box2.classList.contains("cl1");
        if (c == true) { //c가 cl1이 맞다면
            box2.classList.replace("cl1", "cl2"); //cl1을 cl2로 바꿔라
        }
        else {
            box2.classList.add("cl1");
        }
    });
    btns[4].addEventListener("click", () => {
        box2.classList.toggle("cl1");
    });

</script>

</html>

초등학생 프로그래밍 알려주는 방식 - 블록 코딩

노드 관계를 통한 요소 제어 p 604 -605

html 요소간의 관계를 활용

노드(node) = html요소

연습문제

야구 전광판 만들기

1. 스트라이크 3개면 아웃 1개 카운트

이때 스트라이크와 볼 카운트는 0으로 초기화

2. 볼 4개면 스트라이크와 볼 카운트 0으로 초기화

3. 아웃카운트 3개면 스트라이크, 볼 버튼 비활성화

요소.disabled = true; // 비활성화

요소.disabled = false; //활성화

4. 아웃카운트 3개면 재시작 버튼 보임

요소를 보이게 하는 법 : 요소.style.display = "inline";

요소를 숨기는 법 : 요소.style.display = "none";

5. 재시작 버튼을 누르면 스트라이크, 볼 버튼 활성화

모든 카운트는 0으로 초기화, 재시작 버튼 숨김

저작자표시 비영리 변경금지

'공부기록 > JavaScript' 카테고리의 다른 글

3월 16일 (2) JavaScript - 브라우저 객체 모델 (0)	2023.03.16
3월 16일 (1) JavaScript - node 활용 제어 (0)	2023.03.16
3월 14일 (2) JavaScript - 객체 date, DOM (2)	2023.03.14
3월 14일 (1) JavaScript - 함수 파라미터, 객체 (0)	2023.03.14
3월 13일 (2) JavaScript - 변수 범위, 함수 표현식, 이벤트 (0)	2023.03.13

새롭게 공부시작하기

3월 15일 JavaScript - 객체(Object)

'공부기록 > JavaScript' 카테고리의 다른 글

티스토리툴바

3월 15일 JavaScript - 객체(Object)

'공부기록 > JavaScript' 카테고리의 다른 글

관련글

티스토리툴바