티스토리 뷰

JavaScript

자바스크립트의 기능

IT Knowledge Share 2021. 9. 11. 11:18
반응형

자바스크립트로 어떤 부분을 할 수 있는지 알아볼 것입니다.

 

1. 자바스크립트는 웹페이지의 HTML 내용을 바꿀 수 있습니다. 이 때 자주 사용되는 함수는 getElementById() 입니다. 자바스크립트에서는 싱글 따옴표와 더블 따옴표를 모두 사용할 수 있습니다. 

 

아래의 코드는 버튼을 클릭할 때 id가 change인 p태그를 찾은 후, 내용이 변경되는 작업을 onclick 속성에 집어 넣은 것입니다. 이렇게 자바스크립트에서는 HTML 내용을 바꿀 수 있답니다.

<!DOCTYPE html>
<html>
<body>

<h2>내용 바꾸기</h2>

<p id="change">아래의 내용을 바꿀 수 있습니다.</p>

<button type="button" onclick='document.getElementById("change").innerHTML = "내용이 변경되었습니다!"'>클릭하기</button>

</body>
</html>

 

2. 자바스크립트로 HTML 속성 값을 변경할 수 있습니다.

HTML에는 여러 다양한 속성이 존재합니다. 태그마다 사용 가능한 다양한 속성의 값을 자바스크립트를 통해서 변경할 수 있습니다. 

반응형

아래의 예시와 같이 button onclick="document.getElementById('myImage').src='bunny.gif'" 코드를 보면, onclick 이벤트 발생 시 id값이 myImage인 이미지 소스에 바꾸려는 이미지가 할당됩니다.

<!DOCTYPE html>
<html>
<body>

<h2>이미지 바꾸기</h2>

<p>자바스크립트로 이미지 바꾸기.</p>

<button onclick="document.getElementById('myImage').src='bunny.gif'">토끼 이미지</button>

<img id="myImage" src="nothing.gif" style="width:100px">
<img id="myImage" src="bunny.gif" style="width:100px">
<img id="myImage" src="lion.gif" style="width:100px">

<button onclick="document.getElementById('myImage').src='lion.gif'">사자 이미지</button>

</body>
</html>

 

3. 자바스크립트를 통해서 HTML 스타일을 변경할 수 있습니다. CSS 파일을 별도로 사용하지만, 간단한 스타일 체인지의 경우 자바스크립트를 통해 HTML 내용의 스타일을 변경할 수 있습니다.

 

아래는 버튼 클릭 시 구문의 사이즈가 100으로 변경되는 예문입니다. 

<!DOCTYPE html>
<html>
<body>

<h2>HTML 스타일 변경</h2>

<p id="size">다음 구문의 폰트 사이즈 키우기</p>

<button type="button" onclick="document.getElementById('size').style.fontSize='100px'">클릭</button>

</body>
</html>

 

4. 자바스크립트는 HTML 요소를 숨기거나 보이게 할 수 있습니다.

자바스크립트의 display 메소드를 통해서 특정 요소를 감추거나 보이게 할 수 있습니다.

아래의 예시처럼, id값이 hide인 내용은 display='none'으로 숨기거나, id값이 show인 내용은 원래 style 속성의 값이 display:none으로 되어 있으나, 버튼 클릭 시 style 속성의 display 값을 block 처리함으로써 보이게됩니다.

<!DOCTYPE html>
<html>
<body>

<h2>HTML 요소 숨기기 & 보이기</h2>

<p id="hide">이 내용을 숨겨주세요</p>
<p id="show" style="display:none">숨겨진 내용입니다. 보여 주세요.</p>

<button type="button" onclick="document.getElementById('hide').style.display='none'">숨기기!</button>
<button type="button" onclick="document.getElementById('show').style.display='block'">보이기!</button>

</body>
</html>

이렇게 자바스크립트의 간단한 기능에 대해 알아보았습니다.

반응형
저작자표시 비영리 변경금지

'JavaScript' 카테고리의 다른 글

자바스크립트 연산자 Operators  (0) 2021.09.14
자바스크립트 변수 Var, Let, Const  (0) 2021.09.12
자바스크립트 사용법  (0) 2021.09.11
자바스크립트로 HTML 내용 보여주기/테스트하기/출력하기  (0) 2021.09.11
자바스크립트 위치  (0) 2021.09.11
댓글