005 JS(JavaScript)

HTML은 사람의 몸 중에서 사람의 뼈대와 유사합니다. 사람의 뼈대를 잘 만들어야 사람의 구실을 잘 하겠죠? 사람의 팔 하나가 없거나 다리가 없으면 문제가 될 수 있습니다. 그래서 HTML을 가장 먼저 잘 구성을 해야합니다.

CSS는 사람에게 옷을 입혀주는 것과 유사하다고 보시면 됩니다. 같은 뼈대에 어떤 옷을 입히느냐에 따라서 웹 페이지가 잘 만든 웹 페이지가 되거나 못 만든 웹 페이지가 된다고 할 수 있습니다. HTML과 CSS만을 활용하여 웹을 만들면 정적 웹 사이트라고 합니다. 뼈대에 옷을 입힌다고, 사람이 움직일 수 있을까요?

그래서 움직임을 주기 위해서 JavaScript를 이용합니다. JavaScript를 활용해서 웹 페이지에 움직임을 주면 정적인 사이트가 아닌 동적인 사이트가 된다고 할 수 있습니다. JavaScript를 활용해서 웹 사이트를 만들어보도록 하겠습니다.

JAVA와 JavaScript를 헷갈려하시는 분들이 있는데 JAVA는 백엔드에서 주로 사용되는 언어이고, JavaScript는 프론트엔트에서 주로 사용되는 언어로 다른 언어입니다. 또한, JavaScript 언어는 인터프리터 언어로 한 줄씩, 한 블록씩 일처리를 합니다. 반대로 JAVA는 컴파일러 언어입니다. 컴파일러 언어는 문서를 한꺼번에 다 읽고 처리합니다.

JavaScript에는 여러가지 데이터 타입이 존재합니다. 데이터 타입을 알기 전에 변수에 대해서 알아야 합니다. 변수는 말 그대로 변할 수 있는 수로써 보통 그릇에 많이 비유합니다. 그릇의 이름을 정하고, 그릇에 데이터를 저장하거나 저장한 데이터의 값을 바꿀 수도 있습니다.

1. 변수 설정

파일명 : test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript_test</title>
</head>
<body>
    <script>
        **var userName = "착한호랑이";**
    </script>
</body>
</html>

위 코드를 실행하면 "착한호랑이" 라는 문자열이 userName이라는 변수에 담기게 됩니다. 여기서 '='은 대입연산자로 우변에 있는 값을 좌변에 넣겠다라는 뜻이 됩니다.

아래 코드를 통해서 값이 잘 담겼는지 확인해보겠습니다. 확인을 할 때에는 [개발자 도구]-[콘솔] 창에 기록을 남길 수 있습니다.

console.log() 명령어는 입력으로 준 값을 콘솔창에 출력해주는 명령어입니다.