[JavaScript] 메서드 / getByElementById / innerHTML

js의 메서드

See the Pen Untitled by korany0315 (@korany0315) on CodePen.

js메서드 특징!

반환형을 쓰지 않음

리턴코드 사용가능

파라미터 타입 구분 없음

검색코드는 getElementById

 

파라미터가 없는 메서드

버튼1을 누르면 alert("버튼1을 눌렀구나" 띄우기

 function test1() {
            //function 키워드로 시작하는 js 메서드는 반환형을 가지고 있지 않다
            alert("버튼1을 눌렀구나");
        }

<!-- type="text"기본설정, value="미리 넣고싶은 값"-->
<!-- id는 js에서 검색을 위한 용도로 사용된다. class쓰지 말기-->
<input id="res2" placeholder="값"> <br>
<!--타입을 기술하지 않으면 기본적으로 text타입을 갖게된다-->

 

파라미터가 있는 메서드

버튼 2를 누르면 안녕 이라는 데이터가 들어가게 됨

function test2(n) {
            // 파라미터를 받을 때 타입을 따로 지정하지 않는다.
            // n의 값에 숫자나 문자 데이터 타입 상관없이 넘겨줄 수 있다.
            //alert(n);

            //지역변수이기 때문에 변수명 중복돼도 상관없음
            let res = document.getElementById('res1');
            //너무 중요
            // res가 밑의 input #res1과 완전히 동일해진다.
            res.value = n;
        }

<input type="button" value="버튼2" onclick="test2('안녕');">
<!--test2함수에 파라미터를 보냄 정수, 스트링 모두 가능-->

<input id="res1" type="text" value="" placeholder="이름을 입력하세요"> <br>
<!-- type="text"기본설정, value="미리 넣고싶은 값"-->
<!-- id는 js에서 검색을 위한 용도로 사용된다. class쓰지 말기-->

 

 

버튼 1을 눌렀을때 입력상자2에 쓰여진 글을 alert띄우는 메서드

버튼 1을 눌렀을때 입력상자2에 쓰여진 글을 alert띄우기

 

let aa = "결과 : ";
        //일반적인 전역변수 설정은 문제가 되지 않는다.

        //태그를 검색하는 코드는 '절대' 전역으로 지정할 수 없다
        // let a2 = document.getElementById("res2");
        
        
        function test1() {
            //function 키워드로 시작하는 js 메서드는 반환형을 가지고 있지 않다
            let res = document.getElementById('res2');
            alert(aa + res.value);
        }

<input id="res2" placeholder="값"> <br>
<!--타입을 기술하지 않으면 기본적으로 text타입을 갖게된다-->

<input type="button" value="버튼1" onclick="test1();">
<!--버튼1을 클릭하면 test1()메서드가 호출된다. test1()함수는 자바스크립트에서 만든다.-->

 

 

value를 받을 수 없는 메서드

 

input처럼 value값이 있는 위의 경우들은 값을 받을 때 res.value을 사용하면 되지만

h태그 처럼 value가 없이 태그와 태그사이에 값을 넣어야 하는 경우는 아래처럼 tag.textContent 혹은 tag.innerHTML를 사용한다.

 

 function test3() {
                let h_tag = document.getElementById("h3");
                // h_tag == #h1
                // h_tag.innerHTML = "innerHtml";
            // innerHtml은 외부의 공격에 취약하기 때문에 textConetent로 바꾸어준다!
            h_tag.textContent = "textContent";
            // 태그사이에 값을 넣어야 할땐 textcontent!
        }

h_tag.value로는 접근 할 수없다!

<input type="button" value="버튼3" onclick="test3();">
<h3 id="h3">value속성을 갖고있지 않은 h3</h3>