Javascript [ Head ]

양혜정·2024년 4월 6일
day51
0

HTML/CSS/JS 실행

목록 보기
17/60
post-thumbnail

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>스크립트 태그는 head 태그 내에 위치해도 됩니다.</title>
<script type="text/javascript">
	function myFunction() {
		document.getElementById("demo").innerHTML = "p태그의 내용이 변경되었습니다";
		document.getElementById("demo").innerHTML = "p태그의 <span style='color: red; font-weight: bold;'>내용이 변경</span>되었습니다";
	}
	
	// 1줄 주석
	/*
		여러줄 주석
	*/

	document.getElementById("h1").innerHTML = "<span style='color: green;'>h1</span> 태그 입니다.";	
	// html의 해석순서가 위에서 부터 내려오므로 script 가 위에있으면 함수만 적용 가능하다. ( 현재 h1이 어디인지 찾지 못해서 적용이 안된다. )
</script>

</head>
<body>
	<h1 id="h1"></h1>
	<h2>스크립트 태그는 head 태그 내에 위치해도 됩니다.</h2>
	
	<p id="demo">변경전 p태그</p>
	<button type="button" onclick="myFunction()">클릭하세요.</button>
	<!-- <button type="button">마우스를 여기에 올려 놓으세요.</button> -->
	<!-- <button type="button">여기를 더블클릭 하세요.</button> -->
</body>
</html>

정리

  • 01_where_to -> 01_javascript_in_head.html
profile
양혜정
이전 포스트

Image - 2

다음 포스트

Javascript [ Body ]

0개의 댓글

관련 채용 정보