JavaScript 일반 예제

이 페이지는 JavaScript가 무엇을 할 수 있는 몇 가지 예제를 포함하고 있습니다.

주의:이 예제에서 사용된 방법이 아직 배우지 않았다면,예걱정하지 마세요. 다음 장에서 이들을 배울 것입니다.

JavaScript는 HTML 내용을 수정할 수 있습니다

getElementById() 메서드는 지정된 값과 일치하는 ID를 가진 요소를 반환합니다.

이 예제는 이 방법을 사용하여 HTML 요소를 찾습니다(id="para") 및 요소 내용(innerHTML)을 "Hello world"로 변경합니다:

document.getElementById("para").innerHTML = "Hello world";

JavaScript는 HTML 속성 값을 변경할 수 있습니다

이 예제에서 JavaScript는 다음을 변경했습니다<img>태그의src속성의 값:

JavaScript는 HTML 스타일(CSS)을 변경할 수 있습니다

JavaScript style속성은 요소의 인라인 스타일을 설정하는 데 사용됩니다.

document.getElementById("demo").style.color = "blue";

JavaScript는 HTML 요소를 숨길 수 있습니다

HTML 요소를 숨기는 것은 표시 스타일을 변경하여 완성할 수 있습니다.

document.getElementById("demo").style.display = "none";

JavaScript는 HTML 요소를 표시할 수 있습니다

숨겨진 HTML 요소를 표시하거나 숨기는 것은 표시 스타일을 변경하여 완성할 수 있습니다.

document.getElementById("demo").style.display = "block";

JavaScript는 경고 팝업 창을 생성할 수 있습니다

이 예제에서 JavaScript는 알림 대화 상자를 생성합니다.

alert("Hello　world!");

JavaScript는 이벤트 처리기를 문서에 추가할 수 있습니다

이 예제에서 JavaScript는 마우스 클릭 이벤트를 모니터링하고 대응합니다.

document.addEventListener("click",　myFunc);
function　myFunc()　{
　　　document.body.style.backgroundColor　=　"coral";
}

JavaScript는 시간을 표시할 수 있습니다

이 예제에서 JavaScript는 현재 시간을 표시합니다.

var　intervalID　=　setInterval(startTimer,　1000);
function　startTimer()　{
　　　　var　date　=　new　Date();
　　　　var　x　=　document.getElementById("result");
　　　　x.innerHTML　=　date.getHours();　+　":"　+　date.getMinutes()　+　":"　+　date.getSeconds();
}