투케이2K

322. (javaScript) 자바스크립트 class constructor 사용해 JSON.stringify JSON 데이터 생성 수행 본문

JavaScript

322. (javaScript) 자바스크립트 class constructor 사용해 JSON.stringify JSON 데이터 생성 수행

투케이2K 2023. 8. 13. 10:40

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : JavaScript

 

[소스 코드]

​

<!DOCTYPE HTML>
<html lang="ko">
<head>
    <title>javaScriptTest</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">




    <!-- ===================================================================================================== -->
    <!-- [반응형 구조 만들기] -->
    <!-- ===================================================================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">






    <!-- ===================================================================================================== -->
    <!-- [내부 CSS 스타일 지정] -->
    <!-- ===================================================================================================== -->
    <style>

        html, body {
            width: 100%;
            height: 100%;
            margin : 0 auto;
            padding : 0;
            border : none;    
        }


    </style>





    <!-- ===================================================================================================== -->
    <!-- [CDN 주소 설정] -->
    <!-- ===================================================================================================== -->       
    <!-- ===================================================================================================== -->






    <!-- ===================================================================================================== -->
    <!-- [자바스크립트 코드 지정] -->
    <!-- ===================================================================================================== -->
    <script>


        /*
        -----------------------------------------
        [요약 설명]
        -----------------------------------------
        1. 자바스크립트에서 클래스 사용은 ES6 에서부터 사용할 수 있습니다
        -----------------------------------------
        2. 자바스크립트에서 클래스를 생성하기 위해서는 class 키워드를 사용합니다
        -----------------------------------------
        3. constructor 는 클래스 생성자 초기화 수행시 사용합니다
        -----------------------------------------
        4. JSON.stringify : JSON 형식 문자열을 생성합니다
        -----------------------------------------
        */


        // [html 최초 로드 및 이벤트 상시 대기 실시] 
        window.onload = async function() {
            console.log("");
            console.log("=========================================");
            console.log("[window load] : [html 로드 수행 실시]");
            console.log("=========================================");
            console.log("");


            // [클래스 생성]
            var user = new User("투케이", 30, true);


            // [JSON 생성 수행]
            var json = JSON.stringify(user);


            // [로그 결과 출력]
            console.log("");
            console.log("=========================================");
            console.log("[window load] : [로그 출력 수행]");
            console.log("-----------------------------------------");
            console.log("[json] : " + json);
            console.log("=========================================");
            console.log("");

        };  




        // [클래스 생성 수행]
        class User {

            // [클래스 생성자 초기화]
            constructor (name, age, sex) {
                this.name = name;
                this.age = age;
                this.sex = sex;
            }

            // [get 메소드 생성]
            getName(){
                return this.name;
            }
            getAge(){
                return this.age;
            }
            getSex(){
                return this.sex;
            }

        }
 

        
    </script>



</head>


<body>

</body>

</html>
 

[결과 출력]

​

 

 

반응형
저작자표시

'JavaScript' 카테고리의 다른 글

324. (javaScript) 자바스크립트 Object.keys length 사용해 object 객체 key 개수 확인 실시  (0) 2023.08.29
323. (javaScript) 자바스크립트 JSON.stringify 사용해 object 객체 특정 key 선택해 json 문자열로 변환  (0) 2023.08.29
321. (javaScript) 자바스크립트 class constructor 사용해 클래스 생성 및 생성자 초기화 수행  (0) 2023.08.13
320. (javaScript) [slick 라이브러리] 자바스크립트 slick 라이브러리 사용해 슬라이더 (slide) 화면 교체 및 전환 구현 실시  (0) 2023.08.12
319. (javaScript) [fullcalendar 라이브러리] 자바스크립트 fullcalendar 풀캘린더 사용해 웹 달력 생성 및 일정 등록, 삭제 수행  (0) 2023.08.06
'JavaScript' Related Articles more
Comments