h23. HTML 자바스크립트

HTML 자바스크립트

자바스크립트는 HTML 페이지를 동적이면서 상호작용이 가능하도록 구현해 줍니다.

HTML 태그 안에 자바스크립트와 같은 사용자 측 (client-side) 스크립트를 담을 수 있습니다.

태그는 그 안에 스크립트를 담을 수도 있고 아니면 외부의 스크립트를 src 속성을 사용하여 위치를 지정할 수도 있습니다.

일반적으로 자바스크립트는 이미지 조작, 입력값 검증, 및 내용의 동적인 변화를 줄때 사용됩니다.

예를 들어 HTML 태그의 id 가 id="id1" 이라고 할 때, 자바스크립트가 실행되면 그곳에 내용을 "안녕하세요. 방문해 주셔서 고맙습니다." 라고 바꾸려고 하면 아래와 같이 스크립트를 작성할 수 있습니다.

<button type="button" onclick="myFunction()">여기 클릭해 보세요.</button>
<p id="id1">여기에 글자가 바뀔 것입니다.</p>
<script>
function myFunction() {
document.getElementById("id1").innerHTML = "안녕하세요. 반가워요. 스크립트를 허가하는 사이트이군요.";
}
</script>
<noscript>앗, 미안합니다. 귀하의 브라우저가 스크립트의 실행을 허가하지 않았습니다.</noscript>

여기에 글자가 바뀔 것입니다.

---

그런데 위에서 HTML <noscript> 태그는 혹시라도 스크립트를 실행하지 못하는 브라우저인 경우에, 사용자에게 대체문자를 표현해 주는 용도로 사용됩니다.

<noscript> 태그 내에는, HTML 페이지에 사용될 수 있는 어떤 태그들도 들어 갈수 있습니다. 

다만, 스크립트가 지원되지 않거나 사용자의 브라우저에서 스크립트 실행중지 설정된 경우에만 <noscript> 태그가 실행됩니다.

자바스크립트로 할 수 있는 기능은 요약하면 아래와 같습니다.

1) HTML 태그의 내용을 지정함
	document.getElementById("표시할 위치").innerHTML = "안녕하세요. 곰돌이님";

2) HTML 의 스타일을 지정함:
	document.getElementById("표시할 위치").style.fontSize = "24px";

3) HTML 의 속성값을 지정함:
	document.getElementById("표시할 위치").src = "그림경로/파일이름.확장자";

---

[광고] Udemy 동영상 강의로 보기