[JavaScript] HTML 태그 제어

티스토리 뷰

WEB/자바스크립트

[JavaScript] HTML 태그 제어

춘햄 2021. 5. 12. 16:45

자바 스크립트의 첫 포스팅이다. 개인적으로는 입문하긴 쉽지만 마스터하긴 굉장히 어려운 언어라고 생각을 하는데, 지금부터 차근차근 스탭을 밟아가며, 공부해보자.

우선 그 개념부터 짚고 넘어가자.

기본적으로 자바 스크립트는 웹 브라우저 내에서 동작하는 객체 기반의 스크립트 프로그래밍 언어이다. 또한 다른 응용 프로그램의 내장 객체에도 접근할 수 있기 때문에 View 단에서 동적 웹 페이지를 구성하기 위하서 반드시 알아둬야할 언어이다.

즉, 아래와 같이 script내에서 HTML 태그들을 제어하여 페이지에 동적인 느낌을 줄 수 있다.

◎change.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>on Click</title>
	<link rel = "stylesheet" href = "css/change_color.css">
</head>
<body>
	<h1 id = "heading">자바스크립트</h1>
	<p id = "text">위의 글자를 클릭</p>
	<p class = "red"> 위의 글자를 클릭</p>
	
	<script>
		var heading = document.querySelector("#heading");
		heading.onclick=function(){
			heading.style.color = "red";
		}
		var text=document.querySelector("#text");
		text.onclick = function() {
			text.style.color = "blue";
		}
	</script>
</body>
</html>

◎change_color.css

@charset "UTF-8";
body{
	text-aglgn: center;
}

#heading{
	color: gray;	
}

#text{
	color: gray;
	font-size: 15px;
}

.red{
	color: red;
}

각 태그들을 클릭했을 때, 선언해놓은 함수가 호출되어, 글자의 색이 바뀌게 된다.

'WEB > 자바스크립트' 카테고리의 다른 글

[Javascript] 객체 생성 & 활용 기초 (0)	2021.05.13
[Javascript] 글 숨기기 / 보이기 (0)	2021.05.12
[Javascript] 제어문 (0)	2021.05.12
[Javascript] 입력창 prompt 를 이용한 나이 계산 (0)	2021.05.12
[Javascript] Date를 이용한 현재 시간 출력 (0)	2021.05.12