JavaScript는 HTML 페이지를 보다 역동적이고 상호 작용적으로 만든다.
HTML <script> 태그
HTML <script> 태그는 클라이언트 쪽 스크립트(JavaScript)를 정의하는 데 사용된다.
<script> 요소는 스크립트 문을 포함하거나 src 특성을 통해 외부 스크립트 파일을 가리킨다.
JavaScript의 일반적인 용도는 이미지 조작, 폼 유효성 검사 및 컨텐츠의 동적 변경이다.
HTML 요소를 선택하기 위해 JavaScript는 document.getElementById() 메서드를 가장 많이 사용한다.
이 JavaScript 예제에서는 ID="hello JavaScript!"를 HTML 요소에 쓴다:
| <!DOCTYPE html> <html> <body> <h2>자바스크립트를 사용하여 텍스트 변경</h2> <p>이 예제는 ID="http"인 HTML 요소에 "Hello JavaScript!"를 씁니다:</p> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script> </body> </html> |
자바스크립트의 묘미
다음은 JavaScript가 수행할 수 있는 몇 가지 예이다:
| <!DOCTYPE html> <html> <body> <h1>나의 처음 자바스크립트</h1> <p>JavaScript는 HTML 요소의 내용을 변경할 수 있습니다:</p> <button type="button" onclick="myFunction()">Click Me!</button> <p id="demo">이것은 자바스크립트 예제입니다.</p> <script> function myFunction() { document.getElementById("demo").innerHTML = "Hello JavaScript!"; } </script> </body> </html> |
| <!DOCTYPE html> <html> <body> <h1>자바스크립트 예제(스타일변경)</h1> <p id="demo">JavaScript는 HTML 요소의 스타일을 변경할 수 있습니다.</p> <script> function myFunction() { document.getElementById("demo").style.fontSize = "25px"; document.getElementById("demo").style.color = "red"; document.getElementById("demo").style.backgroundColor = "yellow"; } </script> <button type="button" onclick="myFunction()">Click Me!</button> </body> </html> |
[Click Me]버튼을 클릭하면,
| <!DOCTYPE html> <html> <body> <h1>자바스크립트(요소 스타일 변경)</h1> <p>여기서 JavaScript는 이미지의 src(소스) 속성 값을 변경합니다.</p> <script> function light(sw) { var pic; if (sw == 0) { pic = "pic_bulboff.gif" } else { pic = "pic_bulbon.gif" } document.getElementById('myImage').src = pic; } </script> <img id="myImage" src="pic_bulboff.gif" width="100" height="180"> <p> <button type="button" onclick="light(1)">Light On</button> <button type="button" onclick="light(0)">Light Off</button> </p> </body> </html> |
[Light off] 버튼을 클릭했을 때]
[Light on] 버튼을 클릭했을 때]
HTML <noscript> 태그
HTML <noscript> 태그는 브라우저에서 스크립트를 비활성화하거나 스크립트를 지원하지 않는 브라우저를 가진 사용자에게 표시할 대체 콘텐츠를 정의한다:
| <!DOCTYPE html> <html> <body> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script> <noscript>죄송합니다. 브라우저가 JavaScript를 지원하지 않습니다!</noscript> <p>JavaScript를 지원하지 않는 브라우저는 noscript 요소 내부에 작성된 텍스트를 표시합니다.</p> </body> </html> |
마무리
HTML 스크립트 태그 정리
| 태그 | 설명 |
| <script> | 클라이언트 측의 스크립트를 정의한 |
| <noscript> | 클라이언트 측 스크립트를 지원하지 않는 사용자에 대한 대체 콘텐츠 정의 |
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > HTML 기본문법' 카테고리의 다른 글
| HTML 레이아웃(HTML Layout) (0) | 2023.05.24 |
|---|---|
| HTML HEAD 요소 (0) | 2023.05.23 |
| HTML 파일 경로(File Path) (0) | 2023.05.21 |
| HTML Iframe (0) | 2023.05.20 |
| HTML id 속성 (0) | 2023.05.19 |
댓글