• Home
  • About
    • Young's Github Pages photo

      一日不作一日不食

    • About
    • Github
  • Posts
    • All Posts
    • All Tags
  • Projects

JavaScript 정리 05

11 Feb 2019

Reading time ~6 minutes

JavaScript 정리 05 - 함수

함수(function)

  • 일을 구분하여 작성할 때 사용
    • 코드의 중복을 줄일 수 있다.
  • JS에선 사용자의 동작에 의해 호출됨
  • 함수는 제작자 함수, 사용자 정의 함수 두가지 존재
    • 제작자 함수는 W3C에서 제공
    • 사용자 정의 함수는 개발자가 직접 생성
  • 작성법
    • 반환형이 없다.
      • 반환형을 정의하지 않는다.
    • 함수의 매개변수는 반드시 전역형태
      • 매개변수 var를 붙이지 않는다.
function 함수명(매개변수, ... ) { ... }

<script>영역 호출
    함수명(값, ... );
</script>

// <body>에서 사용자의 동작에 의한 호출
// 속성 : onOOO = '함수명(값,..')

<script type="text/javascript">
     // 함수 정의, 호출 : function 함수명(매개변수, ...) { ...  }
     // 매개변수 없는 함수
     function test1() {
           alert('test1 호출');
     }
     
     // 호출 : 함수명();
     test1();
     
     // 매개변수 있는 함수 : 매개변수는 전역변수형태
     function test2(name, age) {
           alert("이름 입력 :" +  name +"나이 입력 : "+age);
     };
     
     // 반환값이 있는 함수 : 함수의 가장 마지막줄에 return
     // 반환형은 정의하지 않는다.
       function test3() {
           var msg = "오늘은 월요일입니다."
           return msg;
     }
     
     // 반환값이 있는 함수는 호출 시 결과값을 갖는다.
     var returnValues = test3();
     alert(returnValues);
     
</script>

사용자의 동작에 의한 함수 호출

01

<script type="text/javascript">
     // 사용자 동작에 의한 함수 호출
     // onload로 호출되면 body태그 내의 정보가 loading된 후 실행되기 때문에
     // tag의 정보를 script 영역에서 얻을 수 있다.
     
     // script 영역에서 직접 호출하면 body가 로딩되기 전에 호출되므로 tag의 정보를
     // script영역에서 얻을 수 없다.
     function test() {
           var val = document.getElementById("temp");
           alert("test!!  "+val.value);
     }
     
</script>
</head>
<body onload="test()">
     <input type="text" id="temp" value="월요일" onchange="test()">
</body>

02

기명함수

  • 이름이 있는 함수
    • 업무를 이름으로 구분하여 처리할 때 사용
function 함수명(매개변수, ...) {
    ...
}

무기명함수

  • 이름이 없는 함수
    • 자동으로 호출되어야 할 때 사용
    • 변수명으로 함수에 접근
var 변수명 = function(매개변수, ... ) {
    ...
}

변수명(값, ... );
  • 속성이 동작하면 코드가 동시에 실행되어져야할 때 자동 호출된다.
window.onload = function() {
    ...
}

<script type="text/javascript">
     // 무기명 함수 : 이름이 없는 함수
     // 변수에 대입하는 경우
     var func = function() {
           alert("무기명 함수");
     }
     
     // 변수의 이름을 함수처럼 사용
</script>
</head>
<body>
     <input type="button" value="클릭" onclick="func()"/>
</body>

03

<script type="text/javascript">
     window.onload = function() {
           alert("윈도우가 로딩 되었음.");
     }
</script>

04

태그를 얻는 함수

  • name으로 얻는 방법
    • 반드시 form태그가 필요
    • HTML Form Control의 값을 back-end로 전송할 때 사용
    • 값의 유효성 검증할 때 사용
window.document.폼이름.컨트롤명;
  • id로 얻는 방법
    • form태그가 필요 없음
    • HTML 특정 부분의 디자인을 변경할 때 많이 사용(AJAX)
window.document.getElementById("id명");
  • tag명으로 얻는 방법
    • 같은 태그가 여럿 존재, 배열로 들어옴
    • 어떤 태그로 이벤트처리를 하는지 알기 어려워 잘 사용안함
window.document.getElementsByTagName("태그명");

무기명 함수 이벤트 처리

  • 두가지 방법이 존재
    • 태그 하나를 얻어와 태그 하나에 이벤트 처리하는 방법
    • 이벤트를 Listener에 등록하여 처리하는 방법

태그 하나를 얻어와서 태그 하나에 이벤트를 처리하는 방법

  • 이벤트 코드의 재사용성이 낮다.
window.document.getElementById("id명").이벤트처리속성 = function () {    
    이벤트가 발생했을 때 처리할 코드
}

<input type="button" value="클릭" id="id명" />
  • 버튼을 눌러서 이미지를 변경시키는 이벤트 처리 예
<script type="text/javascript">
     var flag = false;
     // 무기명 함수로 이벤트 처리
     window.onload = function() {
           window.document.getElementById("btn").onclick =  function() {
                // 이미지 태그 얻기
                var img = document.getElementById("img");
                if (flag == false) {
                     img.src = "../common/images/img2.jpg";
                     flag = true;
                } else if (flag == true){
                     img.src = "../common/images/img.png";
                     flag = false;
                }
           }
     }
</script>
</head>
<body>
     <input type="button" value="클릭" class="btn" id="btn"/>
     <div>
           <img src="../common/images/img.png" id="img"/>
     </div>
</body>

05

이벤트를 Listener에 등록하여 처리

  • 이벤트 처리 코드의 재사용성이 높아진다.
  • addEventListener함수를 사용
    • 첫번째 파라미터 이벤트는 on빼고 사용
      • onclick이면 click만 입력, onkeydown이면 keydown만 입력
    • 두번째 파라미터는 “()”를 생략한 함수명만 입력한다.
      • 괄호를 쓰면 이벤트 호출 전에 바로 함수가 호출됨
window.document.getElementById("id명").addEventListener("이벤트", "호출될 함수명");

<script type="text/javascript">
    function 함수명() {
        이벤트 처리 코드
    }

    document.getElementById("id명").addEventListener("click", "함수명");
</script>
...
<body>
    <input type="text" id="id명"/>
</body>
  • 버튼을 눌러서 이미지를 변경시키는 이벤트 처리 예
<script>
     // addEventListener 함수 이벤트 처리
     window.onload = function() {
          window.document.getElementById("btn1").addEventListener("click",  chgImg);
     }
     
     function chgImg() {
          document.getElementById("img").src="../common/images/img1_1.png";
     }
     
</script>
</head>
<body>
     <input type="button" value="addEventListener 클릭"  class="btn" id="btn1"/>
     <div id ="div" style="height:400px;">
           <img src="../common/images/img.png" id="img"/>
     </div>
</body>

<script type="text/javascript">

     window.onload = function() {
          window.document.getElementById("name").addEventListener("click",  setName);
          window.document.getElementById("addr").addEventListener("click",  setAddr);
     }
     
     function setName() {
          document.getElementById("div1").innerHTML="<strong>공선의</strong>";
     }
     
     function setAddr() {
          document.getElementById("div1").innerHTML="<marquee>서울시  양천구 목동</marquee>";
     }
     
</script>
</head>
<body>
     <input type="button" value="이름" class="btn" id="name"/>
     <input type="button" value="주소" class="btn" id="addr"/>
     <div id="div1" style="width:400px; height:150px;  border:1px solid #333"></div>
</body>

06

HTML Form Control 값 얻기

  • name 속성으로 값 얻기
    • form 태그 필수
    • HTML 형상
    • input type이 radio, checkbox, select태그는 배열로 처리된다.
<form name="이름">
    <input type="text" name="유일">
</form>
  • 이름이 유일한 객체의 값 얻기
    • document.폼이름은 생략가능
window.document.폼이름.컨트롤명.value;

<form name="frm"> 
    <input type="text" name="name">
    <input type="password" name="addr">
    <input type="button" value="클릭" id="btn">
</form>

<script text="text/javascript">
    window.onload = function() {
        document.getElementById("btn").addEventListener("click", getValue);
    }

    function getValue() {
        // var name = document.frm.name.value;
        // var addr = document.frm.addr.value;

        // 아래 obj변수처럼 만들면 더 유연한 코드가 됨
        var obj = document.frm;
        var name = obj.name.value;
        var addr = obj.addr.value;
    }
</script>
  • id 속성으로 값 얻기
    • form태그가 필요없다.
var name = document.getElementById("id명").value;
var addr = document.getElementById("id명").value;
  • 값 얻기 예제
<script type="text/javascript">
     window.onload = function() {
           // 이벤트 등록
          document.getElementById("frm").addEventListener("click",  getValue);
          document.getElementById("id").addEventListener("click",  idGetValue);
     }
     
     function getValue() {
           // form태그의 이름 속성을 사용하여 값설정
           
           // form 태그 얻기
           var obj = document.frm;
           
           // form 태그의 하위 컨트롤 값 얻기
           var name = obj.name.value;
           var addr = obj.addr.value;
           var age = obj.age.value;
           
           alert("이름 : "+name+"\n주소 : "+addr+"\n나이 :  "+age);
           
     }
     
     function idGetValue() {
           // form 태그를 거치지 않고 id속성으로 태그를 찾아서  값 얻기
           var name = document.getElementById("name").value;
           var addr = document.getElementById("addr").value;
           var age = document.getElementById("age").value;
           
           alert("id 속성으로 값 얻기 :  "+name+"/"+addr+"/"+age);
           
     }
</script>

<body>
     <form name="frm">
           <label>이름</label>
           <input type="text" name="name" class="inputBox"  id="name"><br/>
           <label>주소</label>
           <input type="text" name="addr" class="inputBox"  id="addr"><br/>
           <label>나이</label>
           <input type="password" name="age" class="inputBox"  id="age"><br/>
           <input type="button" value="form 값얻기" class="btn"  id="frm"><br/>
           <input type="button" value="id 값얻기" class="btn"  id="id"><br/>
           <input type="button" value="onclick 값얻기"  class="btn" onclick="getValue()"><br/>
     </form>
</body>

07

JavaScript에서 HTML <body>로 출력

  1. 출력 대상 얻기
    • tag == node == HTML Element
      • XML에서 tag를 가리킬 때 node를 사용
var divNode = document.getElementById("div tag id명");
  1. HTML 생성
var output = "<strong>"+OOO+"</strong>";
  1. 출력
divNode.innerHTML = output;

<script type="text/javascript">
     window.onload = () => {
          document.getElementById("id").addEventListener("click",  getValue);
     }
     
     var getValue = () => {
           var obj = document.frm;
           var name = obj.name.value;
           var addr = obj.addr.value;
           var age = obj.age.value;
           
           // 1. div 얻기
           var divNode = document.getElementById("output");
           var output = "이름 : <strong>"+name+
                "</strong></br>나이 : "+age+"</br>주소 :  "+addr;
           
           divNode.innerHTML = output;
     }
</script>
</head>
<body>
     <div>
     <form name="frm">
           <label>이름</label>
           <input type="text" name="name"><br/>
           <label>주소</label>
           <input type="text" name="addr"><br/>
           <label>나이</label>
           <input type="password" name="age"><br/>
           <input type="button" value="id 값얻기" id="id"><br/>
     </form>
     </div>
     <div id="output"></div>
</body>

08

숙제1

  • 이름 입력받아 h1태그부터 h6태그까지 이름 출력

09

<script type="text/javascript">
     window.onload = function() {
          window.document.getElementById("confirm").addEventListener("click", printName);
     }
     
     function printName() {
           
           var name = document.frm.name.value;
           var divNode = document.getElementById("output");
           
           var output = "";
           for(var i=1; i<7; i++) {
                output+= "<h"+i+">"+name+"</h"+i+"><br/>";
           }
           
           divNode.innerHTML = output;
     }
</script>
</head>
<body>
     <div>
           <form name="frm">
                <label>이름</label>
                <input type="text" name="name">
                <input type="button" value="확인" id="confirm">
           </form>
     </div>
     <div id="output">
     </div>
</body>

10

숙제2

11

<script type="text/javascript">
     
     window.onload = function() {
          document.getElementById("btn").addEventListener("click",  printTable);
     }
     
     function printTable() {
           
           var dan = document.gugudan.dan.value;
                
           var divNode = document.getElementById("table");
           var output = "";
           if(dan >= 2 && dan <= 9) {
                
                output+="<table border='1'>";
                for(var i=1; i<10; i++) {
                     output+="<tr><td  onclick='alert("+(dan*i)+")'>"+dan+"*"+i+"</td></tr>";
                }
                output+="</table>";
                
                divNode.innerHTML = output;
           } else {
                output = "구구단은 2~9단  사이입니다.<br/><marquee><img  src='../common/images/img2.jpg'><marquee>";
                
                divNode.style="width:400px; height:200px";
                divNode.innerHTML = output;
           }
     }
</script>
</head>
<body>
     <div>
           <form name="gugudan">
                <label>구구단</label>
                <input type="text" name="dan">
                <input type="button" id="btn" value="입력">
           </form>
     </div>
     <div id="table"></div>
</body>

12


JavaScript