지금까지 공부한 프론트엔드 언어들의 역할은 무엇인가?
- HTML - 웹 문서의 내용을 구성한다.
- CSS - 웹문서의 레이아웃이나 스타일을 지정한다.
- js - 웹의 요소를 움직이게 하거나, UI에 활용
웹 문서 안에 작성하는 방법 -> <script> 태그이용.
<script> </script> 사이에 작성한다.
- <script>태그는 웹 문서 안 어디든 위치할수있고, 사입된 위치 그자리에서 바로 스크립트가 실행된다. 또한 하나의 문서에서 여러개 사용할수도있다.
- js는 웹 문서에서 이미지나 텍스트 요소등을 제어하는 경우가 많으므로 되도록이면 이미지나 텍스트등을 다 표시한 후에 실행하는것이좋다.
- 일반적으론 </body>태그 직전에 사용함
- HTML,CSS와 달리 JS는 영어 대소문자를 구별함
클릭하면 글자색이 바뀌는 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글자색 바꾸기</title>
<style>
body { text-align:center; }
#heading { color:blue; }
#text {
color:gray;
font-size:15px;
}
</style>
</head>
<body>
<h1 id="heading">자바스크립트</h1>
<p id="text">위 텍스트를 클릭해 보세요</p>
<script>
var heading = document.querySelector('#heading');
heading.onclick = function() {
heading.style.color = "red";
}
</script>
</body>
</html>
그러나 대부분 문서 내부에 js코드를 적는것보단, 외부 스크립트 파일로 저장해서 웹 문서와 연결하는 방법을 많이 사용한다.
외부 스크립트 파일로 연결해서 자바스크립트 작성하는 방법
- 외부 자바스크립트 파일은 자바스크립트 소스만 작성하고 확장자는 *.js로 저장한다.
- HTML 문서에서 <script>태그의 src속성을 이용해 자바스크립트 파일을 연결하면된다.
<script src="외부 스크립트 파일 경로"></script>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글자색 바꾸기</title>
<style>
body { text-align:center; }
#heading { color:blue; }
#text {
color:gray;
font-size:15px;
}
</style>
</head>
<body>
<h1 id="heading">자바스크립트</h1>
<p id="text">위 텍스트를 클릭해 보세요</p>
<script src="script.js"></script>
</body>
</html>
var heading = document.querySelector('#heading');
heading.onclick = function() {
heading.style.color = "red";
}