CodeGym /행동 /Frontend SELF KO /JavaScript 소개

JavaScript 소개

Frontend SELF KO

레벨 2 , 레슨 5

사용 가능

1. 태그 `<script>`

HTML을 자세히 배우기 전에, 한 가지 멋진 것을 소개하고 싶어 — JavaScript라는 언어야.

JavaScript는 강력한 프로그래밍 언어로, 동적이고 인터랙티브한 웹페이지를 만들 때 사용돼. 사용자 액션에 반응하고, 웹 페이지 내용을 변경하고, 서버와 상호작용하고 등등, 사용자 경험을 향상시키는 방법이 아주 많아.

지금은 JavaScript를 공부하진 않을 건데, 간혹 예제에서 사용하게 될 거야. 그래서 어떻게 HTML 문서에 JavaScript를 삽입하는지 알려줄게.

<script> 태그는 HTML 문서에 JavaScript 코드를 삽입할 때 사용해.

CSS+HTML+JavaScript

      
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 소개</title>
</head>
<body>
    <h1>내 웹사이트에 온걸 환영해!</h1>
    <script>
        // 여기에 JavaScript 코드를 작성해봐 alert('안녕, 세상!');
    </script>
</body>
</html>

이 예제에서는 <script> 태그를 사용해서 간단한 JavaScript 코드를 삽입했어. 그 코드는 사용자에게 "안녕, 세상!" 메시지를 보여주는 팝업창을 띄워.

2. 스크립트 연결하기

가끔은 JavaScript 코드를 별도의 파일에 저장하는 게 더 나을 때가 있어. 이렇게 하면 코드 관리를 더 쉽게 할 수 있고, 코드 재사용도 가능해져. 이런 JavaScript 파일을 연결하려면 마찬가지로 <script> 태그를 사용하고, src 속성으로 JavaScript 파일 이름을 지정하면 돼.

외부 JavaScript 파일 연결하기:

HTML

      
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 소개</title>
    <script src="script.js" defer></script>
</head>
<body>
    <h1>내 웹사이트에 온걸 환영해!</h1>
</body>
</html>

이 HTML 파일은 브라우저에 "script.js"라는 JavaScript 파일을 연결하라고 요청해. 이 파일은 이전 예제와 같은 코드를 포함할 수 있어:

JavaScript

      
//script.js:
// 여기에 JavaScript 코드를 작성해봐
alert('안녕, 세상!');

defer 속성은 브라우저에 HTML 문서가 완전히 로드되고 표시된 뒤 스크립트를 실행하라고 알려줘.

3. 인라인 코드

우리가 style 속성을 사용해서 CSS 스타일을 요소에 바로 작성했던 거 기억나?

HTML

      
<p style="color:red"> 빨강색</p>

JavaScript 코드도 똑같이 쓸 수 있어.

예를 들어, 사용자가 요소를 클릭했을 때 해당 요소의 색상을 파란색으로 바꾸고 싶다면, 다음과 같은 코드를 작성해야 해:

HTML

      
<p style="color:red" onclick="this.style.color = 'blue';">빨강색</p>

여기 녹색으로 표시된 부분이 JavaScript 코드야. 사용자가 <p> 요소를 클릭하면 실행돼. 정말 간단하지?

onclick: HTML 속성으로, 요소 클릭 시 실행되는 함수를 지정해.
this: 클릭된 요소를 참조해.
style.color: 요소의 텍스트 색상을 변경하는 CSS 속성이야.

이전 이전 레슨

다음 다음 레슨

코멘트

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION

JavaScript 소개

1. 태그 <script>

2. 스크립트 연결하기

3. 인라인 코드

1. 태그 `<script>`