HTML를 이용한 자바 스크립트
먼저 HTML 문서에 자바스크립트를 작성하는 방법이 있다. HTML 문서에 자바스크립트 소스를 작성하려면 HTML 태그 안에 문장을 입력하듯 주어진 태그 안에 소스를 작성하면 된다.
HTML를 이용한 자바스크립트의 작성은 아래 사항을 주의하며 태그의 기능과 사용법은 필자의 포스팅을 참조한다.
https://udangtangtang-cording-oldcast1e.tistory.com/133?category=1064943
#2-2. HTML 문서 실습하기
이전 포스팅을 참조하여 HTML의 기본 문서 작성을 실습해보자. https://udangtangtang-cording-oldcast1e.tistory.com/131?category=1064943 #2-1. HTML의 기본 구조 이번 HTML 포스팅은 "HTML5+CSS3 웹 표준의 정..
udangtangtang-cording-oldcast1e.tistory.com
HTML을 이용한 자바스크립트 작성 시 주의점
- <script> 태그는 HTML 문서 어디에서든 사용이 가능하다.
- <script> 태그는 한 문서 안에서 여러 개를 사용할 수 있다.
- <script> 태그가 삽입된 위치에서 소스가 실행된다.
자바스크립트 소스 다운로드
실습 파일 사용하기 위해 "자바스크립트 입문"의 저자의 레포지터리를 참조한다.
https://github.com/funnycom/js-basic-new
GitHub - funnycom/js-basic-new: "Do it! 자바스크립트 입문" 에서 사용하는 실습 파일을 제공하고 있습니
"Do it! 자바스크립트 입문" 에서 사용하는 실습 파일을 제공하고 있습니다. Contribute to funnycom/js-basic-new development by creating an account on GitHub.
github.com
해당 레포지터리를 포크 또는 다운로드하여 사용한다.
자바스크립트 작성하기
자바스크립트 소스 확인 하기
레포지터리-change-1.html 파일을 열어 소스를 확인한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>글자색 바꾸기</title>
<link rel="stylesheet" href="css/change-color.css">
</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>자바스크립트의 태그 기능
| <!DOCTYPE html> | 현재 문서가 HTML5 언어임을 알려주는 메서드. |
| <html> ~ </html> | 웹 문서의 시작과 끝을 알려주는 메서드. <html> 부터 ~<html/> 까지가 소스이다. |
| <htmllang=" --"> 부분의 HTML 문서의 언어 설정을 담당한다. |
|
| <head> ~ </head> | 웹 브라우저가 웹 문서를 해석하기 위해 필요한 정보를 입력하는 부분. 여기있는 정보는 실제 정보가 아니기 때문에 웹 화면에 뜨지않는다. 웹 브라우저와 웹 문서의 차이는 아래의 주석을 확인한다. |
| <title> 문서의 제목 </title> 문서의 제목 부분에 원하는 문서의 제목을 작성할 수 있다. |
|
| <body> ~ </body> | 제로 웹 브라우저 화면에 나타날 정보를 입력하는 코드 스페이스를 구분한다. |
| <h1> 제목을 표시하는 태그. 다른 텍스트 보다 진하게 표시된다. | |
| <p> 텍스트 단락의 표시한다. | |
| <br> 줄 바꿈 |
태그의 기능에 대한 위 표의 설명을 참고하며 위의 코드를 실행해보자.
자바스크립트가 포함된 HTML 문서는 브라우저에서 결과를 확인 할 수 있는데,
위 실행창이 뜬 후 글자를 클릭하면 색이 변하는 것을 볼 수 있다.
<script> 태그는 HTML 문서 어디에 있어도 상관이 없지만 효율적인 프로그램을 위해서 HTML 문서 내 </body> 태그 바로 앞에 삽입하도록 한다.
외부 스크립트 파일 연결 (1)
외부 스크립트 파일 연결: 자바 스크립트 소소를 따로 작성하여 HTML 문서에 연결하는 것.
외부 스크립트 파일 연결하는 것은 꼭 필요한 작업인데 규모가 큰 프로젝트와 같이 여러 개의 소스 파일이 있는 경우에 자바 스크립트 소스를 분리하는 것이 훨씬 효율적이기 때문이다.
예를 들어, 방금 실행한 소스 파일에서 사용한 글자 색 변환 코드를 다른 소스에 사용하고자 한다면 두 가지 방법이 존재한다.
1. 일일히 코드를 복사 및 붙여 넣기를 한다.
2. 필요한 소스 코드를 자바스크립트 파일로 저장한 후 HTML 문서에 연결한다.
(2)의 경우 일일이 코드를 복사/붙여 넣기 하는 수고를 덜어주기 때문에 코드가 섞이지 않고 빠르게 사용이 가능하다. 따라서 앞으로 이러한 방법으로 코드를 실습한다.
외부 스크립트 파일 연결 (2)
1. 프로그램 편집기를 이용하여 new.js 파일을 생성한다. (임의의 파일을 생성한다)
2. 소스 파일의 change-2.html 파일 안의 <script> 태그 안의 코드만 제거한 후 전부를 복사한 후 new.html에 복사한다.
3. change-result.js 소스를 열어 제거한 복사 붙여 넣기를 한다.
var heading = document.querySelector('#heading');
heading.onclick = function() {
heading.style.color = "red";
}4. change-result.js와 new.html을 연결한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>글자색 바꾸기</title>
<link rel="stylesheet" href="css/change-color.css">
</head>
<body>
<h1 id="heading">자바스크립트</h1>
<p id="text">위 텍스트를 클릭해 보세요</p>
<script>
scr = "/workspace/JS/Study/1.자바스크립트의 작성/copyfile.html"
</script>
</body>
</html>라이브 서버를 이용하여 결과를 확인하면 두 파일 연결되어 처음 실행한 결과와 같음을 확인 할 수 있다.
'JavaScript > [theory]' 카테고리의 다른 글
| [변수와 자료형] #1. 변수와 <meta> 태그 (1) | 2022.09.21 |
|---|---|
| [자바스크립트의 기본 문법] #4-2. 자바스크립트의 구조 복습 (1) | 2022.09.20 |
| [자바스크립트의 기본 문법] #4-1. 자바스크립트의 입출력 (0) | 2022.09.20 |
| [자바스크립트의 기본 문법] #2. 자바스크립트의 시작 (0) | 2022.09.19 |
| [자바스크립트의 기본 문법] #1. 웹 프로그래밍과 자바 스크립트 (0) | 2022.09.18 |
