HTML JavaScript
웹 페이지에 상호작용과 동적 기능을 추가하는 프로그래밍 언어입니다.
웹 브라우저에서 기본적으로 지원됩니다.
HTML 문서의 요소를 선택, 수정, 추가 또는 삭제할 수 있습니다.
The HTML <script> Tag
HTML의 <script> 태그는 클라이언트 측 스크립트 (JavaScript)를 정의하는 데 사용됩니다.
<script> 요소는 스크립트 문을 포함하거나 src 속성을 통해 외부 스크립트 파일을 가리킬 수 있습니다.
JavaScript의 일반적인 용도는 이미지 조작, 폼 유효성 검사 및 콘텐츠의 동적 변경입니다.
HTML 요소를 선택하려면 JavaScript는 대부분 document.getElementById() 메서드를 사용합니다.
아래는 자바스크립트를 사용해 스타일을 변경하고 content를 변경하는 예제입니다.
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p id="demo">Click the button to check the time!</p>
<script>
function myFunction() {
var demoElement = document.getElementById("demo");
var buttonElement = document.querySelector("button");
if (demoElement.innerHTML === "Click the button to check the time!") {
var currentTime = new Date().toLocaleTimeString();
demoElement.innerHTML = "Current time: " + currentTime;
demoElement.style.fontSize = "25px";
demoElement.style.color = "red";
demoElement.style.backgroundColor = "yellow";
buttonElement.textContent = "Hide Time";
} else {
demoElement.innerHTML = "Click the button to check the time!";
demoElement.style.fontSize = "initial";
demoElement.style.color = "initial";
demoElement.style.backgroundColor = "initial";
buttonElement.textContent = "Check Time";
}
}
</script>
<button type="button" onclick="myFunction()">Check Time</button>
</body>
</html>My First JavaScript
Click the button to check the time!
'FRONTEND > HTML' 카테고리의 다른 글
| [FE] HTML 문서 구조 - Doctype, html, head, body (1) | 2023.11.10 |
|---|---|
| HTML 튜토리얼 - HTML Iframes (0) | 2023.08.14 |
| HTML 튜토리얼 - HTML id Attribute (0) | 2023.08.04 |
| HTML 튜토리얼 - HTML class Attribute (0) | 2023.07.28 |
| HTML 튜토리얼 - HTML Block and Inline Elements (0) | 2023.07.24 |