JavaScript란 무엇이며 첫 번째 스크립트는 무엇야??

웹의 세 번째 언어를 만나고 브라우저 콘솔과 통신하는 첫 번째 스크립트를 작성해.

웹의 세 가지 언어

레벨 1에서는 두 가지 언어를 알 수 있어.

HTML – 페이지의 뼈대(내용),
CSS – 모양(표시되는 방식)야.

세 번째이자 마지막 언어는 JavaScript – 행동(무슨 일이 발생하면…)야. YouTube에서 ▶를 클릭하면 동영상이 시작될 때, 온라인 상점에서 가격을 계산할 때, 게임이 점수를 계산할 때, 그게 모두 JavaScript야.

자바스크립트가 사는 곳

JavaScript는 CSS처럼 자체 파일에 존재해. 너는 페이지에 그것에 대해 알립니다<script>태그 – 끝 부분에 바로 배치해.<body>, 직전에</body>:

  ...page content...

  <script src="script.js"></script>
</body>

💡

**왜 마지막에?** 브라우저는 페이지를 위에서 아래로 읽어. 스크립트가 끝나면 전체 페이지가 이미 존재하므로 스크립트가 즉시 작업할 수 있어.

보여줄게: 첫 번째 스크립트

에서`my-web`폴더에 **라는 파일을 만듭니다.`script.js`** 그리고 다음과 같이 쓰세요:

console.log("Hi, this is your website!");

~ 안에`index.html`, 다음 줄을 추가해``직전에``두 파일을 모두 저장해.

브라우저에서 페이지를 열고 **F12**(Mac의 경우 **Cmd+Alt+I**)를 누릅니다. 개발자 패널이 열어. **콘솔** 탭을 클릭해.

"안녕해, 이곳은 네 웹사이트야!"가 보이나요? 첫 번째 JavaScript가 실행 중야! 🎉

콘솔은 프로그래머가 페이지와 채팅하는 브라우저의 비밀 방야. 방문자는 결코 그것을 볼 수 없어 – 그것은 단지 너을 위한 것야.console.log(...)”이것을 콘솔에 인쇄해”를 의미해. 너는 그것을 항상 사용할 것야. 이것은 스크립트 내부에서 무슨 일이 일어나고 있는지 알아내는 가장 좋은 방법야.

콘솔에서도 수학을 할 수 있어

다음을 콘솔에 직접 입력해 보세요(각 줄 끝에서 Enter를 누르세요).

5 + 3
"Jake" + " is " + "awesome"
10 * 365

JavaScript는 계산기이기도 해. 숫자를 더하고 텍스트(문자열이라고 함, 따옴표로 구분 가능)를 끝에서 끝까지 연결해.

네 차례 💪

추가script.js웹사이트의 모든 페이지에(한 번 추가한 것과 마찬가지로)style.css).
스크립트를 통해 웹 사이트 이름을 콘솔에 인쇄하고 여름 방학까지 남은 시간을 계산해. 예를 들어 다음과 같어.console.log("Hours left until vacation:", 48 * 24);.
고의로 실수하는 경우 – 따옴표를 삭제하고 저장해. 콘솔에서 오류가 어떻게 보이는지 살펴보세요(줄 번호가 있는 빨간색 텍스트). 그런 다음 수정해. 이는 중요한 습관야. 콘솔은 항상 문제가 있는 위치를 알려줍니다.

✅

**직접 확인해:** 웹사이트의 페이지를 열면 콘솔에 메시지가 나타나. 콘솔을 여는 방법과 오류가 어떻게 나타나는지 알고 있어. 이것이 전체 기초야. 다음 강의부터 페이지에서 마술 작업을 시작해.

이번 수업에서 배울 점

JavaScript = 웹의 세 번째 언어: 동작. 로 쓰여 있어요script.js파일로 연결되고<script src="...">전에 태그를 지정해</body>.
콘솔(F12)은 스크립트에 대한 창야.console.log()내용을 인쇄하면 오류가 줄 번호와 함께 빨간색으로 표시돼.
따옴표 안의 텍스트는 문자열이며, 문자열은 다음과 같이 붙일 수 있어.+. 숫자를 계산할 수 있어.