왕초보도 뚝딱! HTML+CSS+JS 8장, 자바스크립트 쉽게 시작하는 법 공개!

게시일: 2022년 04월 21일 작성자: 자청의 유튜브 추출기

자바스크립트, 어렵지 않아! 😎

안녕! 오늘은 웹사이트를 더 신나고 재밌게 만들어주는 마법의 언어, 자바스크립트를 배우는 첫걸음을 뗄 거야. 자바스크립트 코드를 어떻게 써야 하는지, 그리고 어디에 써야 하는지 자세히 알려줄게!

자바스크립트 코드를 쓰는 방법은 크게 두 가지가 있어.

내부 스크립트 방법: <script> 태그 안에 자바스크립트 코드를 직접 쓰는 거야. 마치 노트에 바로 필기하는 것처럼 말이지!

html <script> document.write("내부 스크립트 방법!"); // 웹 브라우저에 글자를 보여주는 코드 </script>

이렇게 쓰면 웹페이지에 "내부 스크립트 방법!"이라고 글자가 딱! 나타날 거야.
외부 스크립트 방법: .js 확장자를 가진 별도의 파일에 자바스크립트 코드를 쓰고, 이걸 HTML 파일이랑 연결하는 거야. 마치 따로 정리해둔 자료를 가져와서 쓰는 느낌이지.

먼저 main.js라는 파일을 만들고 코드를 써보자.

javascript // main.js 파일 내용 document.write("외부 스크립트 방법!");

그리고 HTML 파일에서는 <script> 태그의 src 속성을 이용해서 main.js 파일을 불러오면 돼.

html <script src="main.js"></script>

이렇게 하면 웹페이지에 "외부 스크립트 방법!"이라고 글자가 나타날 거야.

이게 진짜 중요해! <script> 태그를 어디에 쓰느냐에 따라 웹페이지가 느려질 수도 있거든.

절대 여기 쓰지 마! ❌: <head> 태그 안에 <script> 태그를 쓰면 안 돼. 만약 자바스크립트 파일이 엄청 크면, 웹페이지가 로딩되는 동안 멈춰버릴 수도 있어. 마치 책을 읽는데 중간에 어려운 내용이 나와서 한참을 붙잡고 있으면 다음 내용을 못 읽는 것처럼 말이야.
여기에 써야 해! ✅: <script> 태그는 항상 <body> 태그가 끝나기 바로 직전에 써야 해. 이렇게 하면 웹페이지의 내용이 먼저 다 보이고 나서 자바스크립트가 실행되니까, 사용자는 기다리지 않고 바로 내용을 볼 수 있지.

```html

```

HTML 문서에 자바스크립트를 연결하는 방법은 위에서 배운 두 가지가 전부야. 하지만 자바스크립트 코드를 그냥 실행해보고 싶을 때 쓸 수 있는 다른 방법들도 있어.

콘솔 창 이용하기: 웹 브라우저의 개발자 도구(보통 F12 키를 누르면 열려)에 있는 '콘솔' 탭에서 자바스크립트 코드를 바로 입력하고 실행할 수 있어. 마치 계산기처럼 바로바로 결과를 확인할 수 있지.
- 코드를 입력하면 바로 실행되고, 결과가 있으면 보여주고, 없으면 undefined라고 나와.
- 콘솔 창이 너무 복잡해지면 오른쪽 클릭해서 'Clear console'이나 'Clear console history'를 눌러서 깨끗하게 만들 수 있어.
VS Code 확장 프로그램 이용하기: 'Code Runner' 같은 확장 프로그램을 설치하면 VS Code 안에서 자바스크립트 코드를 바로 실행할 수 있어. 다만, 웹페이지에 뭔가를 보여주는 코드는 실행되지 않고, 주로 결과를 콘솔에 출력하는 용도로 많이 써.

중요한 건, 웹페이지에 지속적으로 자바스크립트를 적용하고 싶다면 꼭 내부 스크립트나 외부 스크립트 방법으로 HTML 파일에 연결해야 한다는 거야!

코드를 작성하다 보면 나중에 내가 왜 이렇게 썼는지 헷갈릴 때가 있어. 그럴 때 '주석'을 사용하면 돼. 주석은 컴퓨터가 읽지 않고 그냥 넘어가기 때문에, 나중에 코드를 보거나 다른 사람이 볼 때 이해하기 쉽게 도와줘.

한 줄 주석: // 뒤에 쓰는 내용은 한 줄 주석이 돼.

javascript // 이건 한 줄 주석이야. 실행되지 않아.
여러 줄 주석: /* 와 */ 사이에 쓰는 내용은 여러 줄 주석이 돼.

javascript /* 이건 여러 줄 주석이야. 이 안에 있는 모든 내용은 실행되지 않아. */

VS Code 같은 에디터에서는 단축키를 이용해서 쉽게 주석 처리를 할 수 있으니 활용해보자!

자바스크립트는 코드를 한 줄씩 실행하는 방식이라서, 특정 줄에서 에러가 나면 거기서 실행이 멈춰. 그리고 어디서 에러가 났는지, 왜 났는지 친절하게 알려주지.

만약 console이라는 단어를 오타 내서 conosle이라고 썼다면, 웹 브라우저의 콘솔 창에 빨간색으로 에러 메시지가 뜰 거야. "conosle은 정의되지 않았어!"라고 말이지.

이런 에러 메시지를 잘 보고, 어떤 줄에서 에러가 났는지 확인해서 고치면 돼. 실무에서는 콘솔 창에 뜨는 에러 메시지를 보고 문제를 해결하는 경우가 많으니까, 에러 메시지를 두려워하지 말고 잘 살펴보는 연습을 하자!

오늘은 자바스크립트 코드를 작성하고 실행하는 기본적인 방법들을 알아봤어. 앞으로 더 재미있는 내용들을 배울 테니 기대해도 좋아! 😊