https://ko.javascript.info/ 를 읽으며 정리하는 글이며 추가로 공부한 내용을 보강 하였음을 알립니다.
1. Hello, world!
웹 페이지에 자바스크립트를 적용하는 방법에 대해 알아보기 전에, C언어로 만든 프로그램 예제를 살펴 보겠습니다.
#include <stdio.h>
int main()
{
printf("Hello, world!\n");
return 0;
}이 예제를 실행 시키면 터미널에 "Hello, world" 가 출력됩니다.
프로그래밍 서적을 보신 적이 있다면, 첫 프로그래밍 예제로 "Hello world" 를 출력해 본 기억이 있을 것 입니다.
"Hello, world(안녕, 세상)" 를 출력하는 예제가 어떻게 시작되었는지 궁금하여 위키백과를 찾아 보았습니다.
프로그래밍을 할 수 있는 컴퓨터 개발에 있어서 작고 간단한 테스트용 프로그램이 이전에도 존재했으나, "Hello world!"가 사용된 것은 1978년에 출판된 브라이언 커니핸과 데니스 리치가 쓴 책 "The C Programming Language"에서 비롯한다. 이 책에서 첫 번째 예제 프로그램으로 hello, world 라는 문장을 출력했다. 모두 소문자이고, 느낌표도 없었다.
- 위키백과
컴퓨터가 보편화되어 있지 않은 시절에 코딩이란 것은 처음 스마트폰이 등장할때의 충격처럼 새시대의 문물이라고 느끼지 않았을까 생각됩니다.
우리는 자바스크립트로 "Hello, world" 를 출력하는 예제를 웹브라우저를 통해 출력 해보겠습니다.
HTML과 CSS는 잠시 잊고 자바스크립트만 확인해 봅시다.
웹페이지에 자바스크립트를 적용하기 위해선 <script></script> 라는 태그를 사용합니다.
<script>
// 자바스크립트 코드가 들어갑니다.
</script>
자바스크립트 프로그램은 HTML 문서 대부분의 위치에 적용 할 수 있습니다.
자바스크립트를 적용함에 있어서 "위치" 가 중요한 키워드 입니다. 위치에 따라서 우리가 구현한 코드가 의도대로 동작하지 않을 수 있습니다. 프로그래밍이라는 것은 동작 순서라는 것이 존재하며 중요하기 때문입니다.
이 내용은 긴 글이 될 것이기 때문에 다음에 심화 내용으로 포스팅 하겠습니다. 위치가 중요하다는 것을 기억하고 넘어가 주세요.
동작 순서가 아닌 단순하게 자바스크립트의 실행 가능 여부를 테스트 하는 것으로 "대부분의" 이 문장을 코드를 작성하여 분석해 보겠습니다. 모든 경우의 수를 테스트 할 수 없으니, "실행 - 불가능" 여부를 알 수 있는 부분으로만 작성해 보겠습니다.
1-1. 실행 가능한 위치
<body>
/* body 태그 사이에 <script></script>를 적용하는 방법으로 실행 테스트 */
<script>
스크립트 로직 구현
</script>
<body>
<body> 태그 사이에 스크립트를 적용해보는 예제를 봅시다.
테스트 하는 코드는 index.html 파일 안에 작성 하였습니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Hello, world를 출력해보자</title>
</head>
<body>
<script>
alert( 'Hello, world!' );
</script>
</body>
</html>index.html
[실행결과]
(1) <body>태그안에 자바스크립트를 작성함으로써 의도한대로 웹페이지에 "Hello, world!" 라는 문장이 출력 되었습니다.
(2) 웹 브라우저 탭에서 <title>Hello, world를 출력해보자</title> 타이틀 태그안의 글이 출력된 것을 확인 해주세요.
1-2. 실행 불가능한 위치
<head>
<meta charset="UTF-8">
<title>
<script>
alert('Hello, world!');
</script>
</title>
</head>[실행결과]
<title>의 태그는 웹브라우저에서 (1) 해당 영역을 표시할때 사용됩니다.
이렇게 각자 고유의 역할을 가지고 있는 태그안에는 스크립트의 사용이 불가합니다.
2. 외부에서 불러오는 스크립트
index.html 파일에서 프로그래밍을 계속 한다고 생각해 봅시다.
<script>
// 코드의 라인 수가 많아지면 어떻게 될까요?
</script>index.html
프로젝트를 몇 주간 또는 몇 달간 같은 파일에서 프로그래밍을 한다면 index.html 파일은 몇 천줄에서 만줄 이상의 코드를 가진 파일이 될 것입니다. 그러면 파일을 열었을때, 엄청난 스크롤 압박을 받게 될 것입니다. 이 방법은 효율적인 코딩 방법이 아니죠.
효율적인 코딩 방법을 알아봅시다.
아래와 같이 폴더를 만들고 js파일을 생성해 줍니다.
단순하게 index.html 이라는 박스안에 script01, script02 파일을 담는다고 생각해 봅시다.
파일을 담기 위해선 index.html의 코드안에 아래 코드를 작성합니다.
<script src="./script01.js"></script>외부 파일인 스크립트 파일을 불러와서 담는 방법은 src 속성이라는 것을 사용하는 것 입니다.
src(source 정의 : 소스 코드) 속성안에 저렇게 파일의 이름을 넣어주면 index.html에서 script01, script02의 스크립트 코드를 담을 수 있습니다.
<script></script> 스크립트 태그 사이에 내용이 없죠?
<head>
<meta charset="UTF-8">
<title>외부 스크립트</title>
<script src="./script01.js"></script>
</head>여러개의 스크립트를 적용하려면 아래와 같이 하면 됩니다.
<script src="./script01.js"></script>
<script src="./script02.js"></script>src 속성도 넣고 태그 사이에 스크립트도 입력하면 어떻게 될까요? 테스트를 해보았습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./script01.js">
alert("내부 스크립트");
</script>
</body>
</html>index.html
alert("외부 스크립트파일 script01.js")script01.js
[실행결과]
<script src="./script01.js"> script 안의 태그는 무시 <script>
스크립트 태그 안의 코드는 무시하고 외부 스크립트가 동작하였습니다.
둘 중 하나를 선택해야 할 것 같네요. 간단한 프로젝트라면 스크립트 태그 안에 작성을 하면 될 것이고, 규모가 있는 프로젝트라면 외부 스크립트를 불러오는 방식을 추천드립니다.
외부 파일을 불러오는 방식으로 작업하였을때의 이점으로 index.html 하나의 파일의 소스코드의 복잡도를 줄일 수 있는것만 있는 것은 아닙니다. 다른 좋은 이점이 있습니다. 브라우저는 캐시(cache)를 활용한다는 점입니다. 캐시를 활용하면 성능상의 장점이 생깁니다.
하지만 캐시라는 것은 현재 단계에서 이해하기 어려울 수 있으므로 다음에 따로 포스팅을 진행하겠습니다.
요점 정리
1. 웹페이지에 자바스크립트를 적용하기 위해 ‘<script></script>’ 태그를 사용하며 HTML 문서 대부분의 위치에 적용 할 수 있습니다.
2. HTML 파일의 스크립트 코드수가 너무 길어질 경우 외부 스크립트 파일을 불러오는 방식을 활용합니다. 외부 스크립트를 불러올때는 <script src="path/script.js"></script>와 같이 삽입합니다.
'Javascript' 카테고리의 다른 글
| 형변환과 연산자 기본 (0) | 2024.05.12 |
|---|---|
| 자료형이란? (0) | 2024.05.11 |
| 명령문과 엄격모드란? (0) | 2024.04.06 |
| 변수와 상수란 무엇인가? (0) | 2024.04.02 |
| 자바스크립트 소개 (4) | 2024.01.07 |