투케이2K

321. (javaScript) 자바스크립트 class constructor 사용해 클래스 생성 및 생성자 초기화 수행 본문

JavaScript

321. (javaScript) 자바스크립트 class constructor 사용해 클래스 생성 및 생성자 초기화 수행

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

[개발 환경 설정]

​

개발 툴 : 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 는 클래스 생성자 초기화 수행시 사용합니다
        -----------------------------------------
        */


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


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


            // [로그 결과 출력]
            console.log("");
            console.log("=========================================");
            console.log("[window load] : [로그 출력 수행]");
            console.log("-----------------------------------------");
            console.log("[getName] : " + user.getName());
            console.log("-----------------------------------------");
            console.log("[getAge] : " + user.getAge());
            console.log("-----------------------------------------");
            console.log("[getSex] : " + user.getSex());
            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' 카테고리의 다른 글

323. (javaScript) 자바스크립트 JSON.stringify 사용해 object 객체 특정 key 선택해 json 문자열로 변환  (0) 2023.08.29
322. (javaScript) 자바스크립트 class constructor 사용해 JSON.stringify JSON 데이터 생성 수행  (0) 2023.08.13
320. (javaScript) [slick 라이브러리] 자바스크립트 slick 라이브러리 사용해 슬라이더 (slide) 화면 교체 및 전환 구현 실시  (0) 2023.08.12
319. (javaScript) [fullcalendar 라이브러리] 자바스크립트 fullcalendar 풀캘린더 사용해 웹 달력 생성 및 일정 등록, 삭제 수행  (0) 2023.08.06
318. (javaScript) [Video.js 라이브러리] 자바스크립트 Video.js 사용해 비디오 동영상 재생 수행 - video play  (0) 2023.08.06
'JavaScript' Related Articles more
Comments