inline ( 인라인 방식 )

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다.

스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다.

( 출처 :  https://opentutorials.org/course/743inf.run/pBzy)

---

 inline ( 인라인 방식 ) 

인라인 방식은 이벤트를 이벤트 대상의 태그 속성으로 지정하는 것이다.

---

아래 예제는, 버튼을 클릭했을 때 Hello world를 경고창으로 출력한다.

<input type="button" onclick="alert('Hello world');" value="button" />

---

이벤트가 발생한 대상을 필요로하는 경우 this를 통해서 자기 자신을 참조할 수 있다.

<!--자기 자신을 참조하는 불편한 방법-->
<input type="button" id="target" onclick="alert('Hello world, '+document.getElementById('target').value);" value="button" />
<!--this를 통해서 간편하게 참조할 수 있다-->
<input type="button" onclick="alert('Hello world, '+this.value);" value="button" />

위 코드에서 2줄의 document.getElementByID('target').value는 this.value라고 작성해도 같은 결과값이 출력된다.

왜냐하면, document.getElementByID('target')은 자기 자신을 가르키고 있기 때문이다.

---

인라인 방식은 태그에 이벤트가 포함되기 때문에 이벤트의 소재를 파악하는 것이 편리하다.

하지만 정보인 HTML과 제어인 JavaScript가 혼재된 형태이기 때문에 바람직한 방법이라고 할수는 없다. 

인라인으로 작성하면 복잡한 코드도 넣을 수 없는 단점을 갖고 있다.