1. 자바스크립트의 역할
자바스크립트는 브라우저 화면에 랜더링 된 웹 콘텐츠를 조작하는 역할을 한다. 렌더링 된 페이지에 어떤 동작을 추가한다.
html이 웹 페이지에 표시될 웹 콘텐츠들을 정의하는 역할을 하고, css가 콘텐츠들의 크기나 색상, 레이아웃 등을 정의한다면, 자바스크립트는 웹사이트의 동작과 상호작용을 정의한다. 동작에는 움직이는 시계나 이미지 슬라이더 등이 있고, 사용자가 버튼을 누르면 반응을 한다거나, 마우스를 올리면 메뉴가 펼쳐진다거나 하는 상호작용이 있다.
자바스크립트는 프로그래밍 언어이며, 여러 기능이 있지만 주로 웹 개발을 위해서 사용되는 언어이다.
1. HTML: 웹 페이지의 내용을 구조화
2. CSS: 웹 페이지의 레이아웃을 스타일화
3. JavaScript: 웹 페이지의 동작을 프로그래밍
2. 자바스크립트 코드 사용 방법
웹 콘텐츠에 자바스크립트 코드를 더해 주는 방법에는 스크립트 코드를 html 문서 내부에 쓰는 방법과 외부 파일을 연결하는 방법이 있고, 스크립트 태그의 위치를 추가하는 방법에는 head 영역에 추가하는 방법과 body 영역에 추가하는 방법이 있다. 그리고 head에 추가하되, async 속성과 defer 속성을 쓰는 방법이 있다.
여기에 대한 자세한 내용은 앞글 참고
단 여기서는 스크립트 코드를 html 내부에 쓰느냐, 외부 js파일을 연결하느냐로 구분하고, 모두 body 태그 안에 쓰는 것으로 함.
1) html 문서 내부에 작성하는 방법
먼저 태그 하나를 미리 알아야 한다.
그것은 스크립트 태그이다. 스크립트란 대본, 각본이라는 뜻이다.
자바스크립트가 해야 할 일에 대한 각본이다.
이 스크립트는 자바스크립트 코드를 HTML 문서 내부의 작성할 때와 외부의 작성한 자바스크립트 파일을 합칠 때 모두 사용하는 태그이다. 즉 두 상황 모두 스크립트 태그를 사용한다.
스크립트 태그를 만들고 그 안에 무엇을 작성하게 되면 그것은 html 도 css 도 아닌 자바스크립트 코드로 인식이 된다. 즉 자바스크립트 코드이다.
자바스크립트 태그 위치는 헤드 아래쪽보다는 바디 아래쪽에 쓰는 게 낫다.
html과 css에 의해 웹 콘텐츠가 렌더링 된 이후에 자바스크립트 코드가 html과 css의 기능을 추가하는 방식이
보통 진행되므로 자바스크립트 코드는 이렇게 바디 제일 아래쪽에 들어가는 경우가 일반적이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>script 코드 위치</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<div class="aaaa">
</div>
</div>
<script>
document.getElementById("abc").innerHTML = "안녕하세요";
</script>
</body>
</html>
2) 자바스크립트 파일을 html 문서에 연결하는 방법
이 방법으로 코드를 작성하려면 자바스크립트 파일을 만들어야 한다.
자바 스크립트 파일의 확장자는 *. js이다.
외부의 다 작성한 js 파일을 가져와서 연결하는 방식이다.
비주얼 스튜디오 코드를 사용하는 경우 익스플로러에서 js 파일을 생성해 주어야 한다
먼저 파일의 이름을 abc.js 등으로 지어서 저장한 후 파일을 열어 내부에 코드를 작성하는 방식으로 한다.
코드 작성을 하고 파일을 다시 저장한 후, 연결을 한다.
html 내부에 자바스크립트 코드를 작성할 때와 동일하게 스크립트 태그를 사용한다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>script 코드 위치</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<div class="aaaa">
</div>
</div>
<script src="script.js"></script>
</body>
</html>
css의 링크를 사용할 때와 같은 방식으로 스크립트 태그에 특성을 추가한다. 추가하는 특성은 소스(src: source)라는 특성이며 css를 가져올 때 href의 역할과 같다. 가져오고 싶은 파일의 url을 적어 주면 된다.(위의 경우: src="script.js")
'코딩 > JavaScript' 카테고리의 다른 글
| 자바스크립트 객체 (0) | 2021.12.11 |
|---|---|
| 비주얼 스튜디오코드 확장프로그램 (0) | 2021.12.02 |
| 자바스크립트 태그 위치 4가지(async, defer) (0) | 2021.12.02 |
| 비주얼 스튜디오 코드, Visual Studio Code, 설치 및 사용 방법 (0) | 2021.11.24 |
| Node.js 설치, Node.js 설치 방법 (0) | 2021.11.24 |