JavaScript 객체 실습 문제 1

- 입력버튼을 눌러 이름, 나이, 주소를 prompt로 입력받고 객체에 저장한 후, 
  출력버튼을 클릭하면 그 정보를 아래와 같이 출력하도록 만들기 
 (단, 입력을 받지 않은 상태에서 출력 버튼 클릭시 입력을 먼저 해달라는 알림을 띄우도록 할 것)

ex) 이름 :  000
      나이 : xx세
      주소 :  XXXXX

 

1) 나의 답안 

<script>
        const member = {};
        function input(){
         
            const name = prompt("이름 입력 :");
            const age = prompt("나이 입력 :");
            const address = prompt("주소입력 : ");
           
            member.name = name;
            member.age = age;
            member.address = address;
            
        }

        function output(){
            const area = document.getElementById("fieldset");

            if(member.name ==null || member.age ==null || member.address == null){
                alert("정보를 먼저 입력하세요");
            }else{
            area.innerHTML = "이름 : "+ member.name + "<br>" 
                           + "나이 : "+ member.age + "세 <br>"
                           + "주소 : "+ member.address;
            }
            
       }


    </script>

>> member 객체를 전역변수로 생성한 후 ,
     입력버튼 클릭시 프롬프트를 통해 값을 입력하도록 하고 입력받은 값을 객체 속성에 대입
     출력버튼 클릭시 입력값이 비어있을경우(null) 알림창을 통해 "정보를 먼저 입력해주세요"를 출력 
     비어있지 않을 경우 member객체에 담긴 값을 출력하도록 함

 

2) 선생님 답안

<script>
        let member2;

        function insertMember(){
            let name = prompt("이름입력 : ");
            let age = prompt("나이 입력 : ");
            let addr = prompt("주소 입력: ");

            member = {name:name,
                      age:age,
                      addr:addr,
                    toString : function(){
                        let str = "이름 : " + this.name + "<br>"
                                + "나이 : " + this.age + "<br>"
                                + "주소 : " + this.addr + "<br>"
                        return str;       
                    }
                }
        }

        function printMember(){
            if(member == null){
                alert("입력을 먼저 진행해주세요.");
            }else{
                let flag = true;

                for(let key in member){
                    if(member[key]=="" || member[key]==null){
                        flag = false;
                    }
                }
                if(flag){
                    document.getElementById("print").innerHTML = member;
                }else{
                    alert('값이 누락되었습니다.');
                }
            }

            member=null;
        }


    </script>

>> 전역변수로 객체를 생성한 후 입력값을 대입한것은 비슷하나,입력버튼 클릭시  toString 을통해  출력될 내용을 먼저 정의했고, 출력버튼을 눌렀을 경우 객체가 비어있을경우 알람창을 통해 입력먼저하도록 유도하는 것은 동일하나, 값이 하나라도 비어있거나 누락되었을 경우 조건문을 통해 다시 알람창을 띄워 사용자에게 알려준점이 다름. 
디테일을 위해 답안을 좀 더 참고해서 코드를 수정해야겠다. 

 

출력창