JavaScript_1

송민우·2020년 7월 27일
0

Web 2020Camp

목록 보기
6/9

HTML이 웹의 구조, 뼈대이고 CSS가 살과 옷이고 JavaScript는 그 몸이 특정 행동을 할 수 있도록 해주는 역할을 하는 것 같다.

Javascript를 사용할 때 자주 사용되는 방법에 getElementById() 가 있다.
해당 코드는 html코드에서 원하는 Id를 검색해 특정 작용을 할 수 있도록 도와준다.

해당 element를 클릭하면 이벤트가 발생하도록 해주는 코드로 onclick이 있다.

getElementById 와 onclick, innerHTML을 사용하여 원하는 태그 사이의 Html을 다른 데이터로 바꿀 수 있는 코드를 작성할 수 있다.

ex)

<p id= "p_ID"> JavaScript can find a id of HTML code</p>
<input id="button" type="button" onclick='changeText()'>
<script>
	function changeText() {
  	document.getElementById("p_ID").innerHTML = "Paragraph changed.";
	}
</script>

**innerHTML 코드를 function 이용없이 단독으로 사용할 경우 body 태그의 아래에 있는 경우에만 작동하며 head에 있을 경우 오류가 나는 것을 확인함

CSS와 마찬가지로 JS 또한 Inline, External, internal방식으로 작성하는 방법이 나눠진다. 코드의 가독성과 디버깅을 위해 Inline 방식은 지양하도록 하자.

profile
Front-end Developer / UX designer

0개의 댓글