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() 명령어는 입력으로 준 값을 콘솔창에 출력해주는 명령어입니다.

파일명 : test.html


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

var 말고도 let 또는 const를 사용할 수 있습니다.

let : 변수안에 무언가를 넣고 빼고를 허용합니다. 안에 있는 값을 변형할 수 있습니다.

const : 변수안에 무언가를 담아두게 되면 다른것이 절대 들어올 수 없습니다.

또한 typeof 명령어를 통해서 각 변수들의 타입을 확인할 수 있습니다.

파일명 : test.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript_test</title>
</head>
<body>
    <script>
        // var userName = "착한호랑이";
        const userName= "착한호랑이"; // string 문자열("",'')
        const age = 43; // number 숫자
        const married = false; // boolean 참, 거짓
        let girlfriend; // undefined 정의되지 않음
        const money = null; // null 비어있음

        // console.log(userName);	
        console.log(typeof userName);
        console.log(typeof age);
        console.log(typeof married);
        console.log(typeof girfrenid);
        console.log(typeof money);
    </script>
</body>
</html>

위 그림과 같이 문자열, 숫자, 논리 연산자 등의 다양한 형태의 자료형이 있는 것을 볼 수 있습니다.

2. 연산자

다음으로 연산자에 대해서 살펴보도록 하겠습니다. JavaScript에서는 산술, 증가, 감소, 대입, 비교, 조건, 논리 등 다양한 연산자들이 존재합니다.

간단하게 산술연산자와, 비교연산자를 살펴보도록 하겠습니다.

산술연산자는 말 그대로 덧셈, 뺄셈, 곱셈, 나눗셈 계산을 하는 연산자입니다.

비교연산자는 좌변과 우변을 비교하는 연산자입니다. JavaScript에서는 '='은 대입연산자이고 '===' 은 비교연산자입니다.

파일명 : test.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript_test</title>
</head>
<body>
    <script>
        // var userName = "착한호랑이";
        const userName= "착한호랑이"; // string 문자열("",'')
        const age = 43; // number 숫자
        const married = false; // boolean 참, 거짓
        let girlfriend; // undefined 정의되지 않음
        const money = null; // null 비어있음
	
        // console.log(userName);	
        console.log(typeof userName);
        console.log(typeof age);
        console.log(typeof married);
        console.log(typeof girfrenid);
        console.log(typeof money);

        // 산술연산자
        console.log(2-3);
        console.log(2*3);

        // 비교 연산자
        console.log(userName === '나쁜호랑이');
        console.log(userName === '착한호랑이');
        console.log(age > 30); 
        console.log(age < 30); 
    </script>
</body>
</html>

3. 조건문

if문


if( 1번 조건 ){
    1번 조건이 성립할 경우 수행될 명령어
}

파일명 : test.html


...

        // 산술연산자
        console.log(2-3);
        console.log(2*3);

        // 비교 연산자
        console.log(userName === '나쁜호랑이');
        console.log(userName === '착한호랑이');
        console.log(age > 30); 
        console.log(age < 30); 

        if(userName === '착한호랑이'){
            console.log('정답!');
        }

...

파일명 : test.html


...

        /* if(userName === '착한호랑이'){
            console.log('정답!');
        } */

        if(userName === '나쁜호랑이'){
            console.log('정답!');
        }

...

조건에 부합하지 않을 경우에는 아무것도 출력되지 않습니다.

if~else문


if( 1번 조건 ){
    1번 조건이 성립할 경우 수행될 명령어
}else{
    조건이 성립하지 않을 경우 수행될 명령어
}

파일명 : test.html


...

        /* if(userName === '나쁜호랑이'){
            console.log('정답!');
        } */

        if(userName === '나쁜호랑이'){
            console.log('정답!');
        }else{
            console.log('오답!');
        }

...

if~else if문


if( 1번 조건 ){
    1번 조건이 성립할 경우 수행될 명령어
}else if( 2번 조건 ){
    2번 조건이 성립할 경우 수행될 명령어 
}else if{
    3번 조건이 성립할 경우 수행될 명령어 
}

파일명 : test.html


...

        /* if(userName === '나쁜호랑이'){
            console.log('정답!');
        }else{
            console.log('오답!');
        } */

        if(userName === '어벙한호랑이'){
                console.log('안녕 난 어벙한 호랑이야');
        }else if(userName ==='멍청한호랑이'){
                console.log('안녕 난 멍청한 호랑이야');
        }else if(userName ==='착한호랑이'){
                console.log('안녕 난 착한 호랑이야');
        }

...

if~else if~else문


if( 1번 조건 ){
    1번 조건이 성립할 경우 수행될 명령어
}else if( 2번 조건 ){
    2번 조건이 성립할 경우 수행될 명령어 
}else if( 3번 조건 ){
    3번 조건이 성립할 경우 수행될 명령어 
}else{
    조건이 성립하지 않을 경우 수행될 명령어
}

파일명 : test.html


...

        /* if(userName === '어벙한호랑이'){
                console.log('안녕 난 어벙한 호랑이야');
        }else if(userName ==='멍청한호랑이'){
                console.log('안녕 난 멍청한 호랑이야');
        }else if(userName ==='착한호랑이'){
                console.log('안녕 난 착한 호랑이야');
        } */

        if(userName === '어벙한호랑이'){
            console.log('안녕 난 어벙한 호랑이야');
        }else if(userName ==='멍청한호랑이'){
            console.log('안녕 난 멍청한 호랑이야');
        }else if(userName ==='나쁜호랑이'){
            console.log('안녕 난 나쁜 호랑이야');
        }else{
            console.log('안녕 난 착한 호랑이야');
        }

...

4. 반복문


for( 정의 ; 조건 ; 갱신 ){
    수행 코드
}

파일명 : test.html


...

        if(userName === '어벙한호랑이'){
            console.log('안녕 난 어벙한 호랑이야');
        }else if(userName ==='멍청한호랑이'){
            console.log('안녕 난 멍청한 호랑이야');
        }else if(userName ==='나쁜호랑이'){
            console.log('안녕 난 나쁜 호랑이야');
        }else{
            console.log('안녕 난 착한 호랑이야');
        }

        for(let i = 0; i< 100; i++){
            console.log(i + '번이야');
        }

...

5. 선택자

우리가 HTML 만들고 스타일링을 입히기 위해서 id, class와 같은 이름이나 별명을 통해 가져왔습니다. 이렇게 선택자를 CSS로 가지고 왔기 때문에 만들 수 있었습니다.

JS도 클릭해서 동적인 제어를 하고 싶은 경우에는 선택자를 불러와야 합니다. JS로 선택자를 잡는 경우를 '돔 오브젝트 가져온다' 또는 '돔 오브젝트를 컨트롤 한다' 라고 합니다. 돔이라고 하는 것은 'document html'를 뜻합니다. 사용하는 방법은 다음과 같습니다. <script> 태그 안에 JS 소스코드를 넣으면 됩니다. Selector를 통해서 HTML의 태그 객체를 가져올 수 있습니다.

파일명 : test.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript_test</title>
    <style>
        .box{
            width:200px;
            height:200px;
            background: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        ...

        // document.getElementsByClassName('box');
        const box = documment.querySelector('.box')
        // const box = documment.querySelectorAll('.box')
    </script>
</body>
</html>

getElementsByClassName() 안에는 클래스 이름을 넣어주면 됩니다.

querySelector() 안에는 CSS선택자를 넣어주면 됩니다. querySelector의 경우에는 가장 앞에 있는 하나의 요소만 가져옵니다.

querySelectorAll()의 경우에는 모든 요소를 가져옵니다.

이어서 클릭 이벤트를 추가해보도록 하겠습니다. 박스를 클릭했을 때 박스가 파란색으로 색이 변하는 것을 볼 수 있습니다.

파일명 : test.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript_test</title>
    <style>
        .box{
            width:200px;
            height:200px;
            background: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        ...

        // document.getElementsByClassName('box');
        const box = documment.querySelector('.box')
        // const box = documment.querySelectorAll('.box')

        box.addEventListner('click',function(){
            console.log('눌렀어');
        )} // 클릭 이벤트 추가
    </script>
</body>
</html>

파일명 : test.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript_test</title>
    <style>
        .box{
            width:200px;
            height:200px;
            background: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        ...

        // document.getElementsByClassName('box');
        const box = documment.querySelector('.box')
        // const box = documment.querySelectorAll('.box')

       box.addEventListner('click',function(){
           // console.log('눌렀어');
           box.style.background = "blue"; // 파랑색으로 색상 변경 
       )} // 클릭 이벤트 추가
    </script>
</body>
</html>

클릭했을 경우 갑자기 CSS의 Background가 파란색으로 바뀌는 것이 아니라 JS으로 CSS를 컨트롤 하게 되면 CSS는 바뀌지 않고 태그의 인라인 방식으로 style이 들어오게 됩니다. 바꾸지 않고 들어오게 되면 스타일 시트의 특징인 케스케이딩, 우선순위를 지정하게 되는데 우선순위 중 인라인 방식이 외부로 작성한 것보다 높습니다.

클래스 박스에 on이라고 칠 경우 색깔이 바뀌도록 만들어 보겠습니다.

파일명 : test.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript_test</title>
    <style>
        .box{
            width:200px;
            height:200px;
            background: red;
        }
        .box.on{ /* 클래스 박스와 on이라는 속성을 함께 가짐 */
            background:green;
        }  
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        ...

        // document.getElementsByClassName('box');
        const box = documment.querySelector('.box')
        // const box = documment.querySelectorAll('.box')

        box.addEventListner('click',function(){
           // console.log('눌렀어');
           box.style.background = "blue"; // 파랑색으로 색상 변경 
        )} // 클릭 이벤트 추가
    </script>
</body>
</html>

이렇게 box on이라고 치는 순간 색상이 바뀌게 됩니다. 같은 스타일 시트 내에서 우선순위를 따질 경우에는 밑에서 부터 위로, 클래스나 선택자가 더 많은 클래스에게 우선순위가 부여됩니다.

클래스를 넣다 뺐다 할 수 있는 add클래스와 remove클래스를 활용해 보도록 하겠습니다.

파일명 : test.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript_test</title>
    <style>
        .box{
            width:200px;
            height:200px;
            background: red;
        }
        .box.on{ /* 클래스 박스와 on이라는 속성을 함께 가짐 */
            background:green;
        }  
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        ...

        // document.getElementsByClassName('box');
        const box = documment.querySelector('.box')
        // const box = documment.querySelectorAll('.box')

       box.addEventListner('click',function(){
           // console.log('눌렀어');
           // box.style.background = "blue"; // 파랑색으로 색상 변경 
           box.classList.add('on');
       )} // 클릭 이벤트 추가
    </script>
</body>
</html>

파일명 : test.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript_test</title>
    <style>
        .box{
            width:200px;
            height:200px;
            background: red;
        }
        .box.on{ /* 클래스 박스와 on이라는 속성을 함께 가짐 */
            background:green;
        }  
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        ...

        // document.getElementsByClassName('box');
        const box = documment.querySelector('.box')
        // const box = documment.querySelectorAll('.box')

       box.addEventListner('click',function(){
           // console.log('눌렀어');
           // box.style.background = "blue"; // 파랑색으로 색상 변경 
           // box.classList.add('on');
           box.classList.remove('on');
       )} // 클릭 이벤트 추가
    </script>
</body>
</html>

또한 클래스 리스트와 토글을 통해서 스위치처럼 색을 전환하게 만들 수도 있습니다.

파일명 : test.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript_test</title>
    <style>
        .box{
            width:200px;
            height:200px;
            background: red;
        }
        .box.on{ /* 클래스 박스와 on이라는 속성을 함께 가짐 */
            background:green;
        }  
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        ...

        // document.getElementsByClassName('box');
        const box = documment.querySelector('.box')
        // const box = documment.querySelectorAll('.box')

       box.addEventListner('click',function(){
           // console.log('눌렀어');
           // box.style.background = "blue"; // 파랑색으로 색상 변경 
           // box.classList.add('on');
           // box.classList.remove('on'); 
           box.classList.toggle('on'); // 있으면 .on 클래스 제거, 없으면 .on 클래스 추가 
       )} // 클릭 이벤트 추가
    </script>
</body>
</html>

완성된 코드는 아래와 같습니다.

파일명 : test.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript_test</title>
    <style>
        .box{
            width:200px;
            height:200px;
            background: red;
        }
        .box.on{ /* 클래스 박스와 on이라는 속성을 함께 가짐 */
            background:green;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        // var userName = "착한호랑이";
        const userName= "착한호랑이"; // string 문자열("",'')
        const age = 43; // number 숫자
        const married = false; // boolean 참, 거짓
        let girlfriend; // undefined 정의되지 않음
        const money = null; // null 비어있음

        // console.log(userName);	
        console.log(typeof userName);
        console.log(typeof age);
        console.log(typeof married);
        console.log(typeof girfrenid);
        console.log(typeof money);

        // 산술연산자
        console.log(2-3);
        console.log(2*3);

        // 비교 연산자
        console.log(userName === '나쁜호랑이');
        console.log(userName === '착한호랑이');
        console.log(age > 30); 
        console.log(age < 30); 

        /* if(userName === '착한호랑이'){
            console.log('정답!');
        } */

        /* if(userName === '나쁜호랑이'){
            console.log('정답!');
        } */

        /* if(userName === '나쁜호랑이'){
            console.log('정답!');
        }else{
            console.log('오답!');
        } */

        /* if(userName === '어벙한호랑이'){
                console.log('안녕 난 어벙한 호랑이야');
        }else if(userName ==='멍청한호랑이'){
                console.log('안녕 난 멍청한 호랑이야');
        }else if(userName ==='착한호랑이'){
                console.log('안녕 난 착한 호랑이야');
        } */

        if(userName === '어벙한호랑이'){
            console.log('안녕 난 어벙한 호랑이야');
        }else if(userName ==='멍청한호랑이'){
            console.log('안녕 난 멍청한 호랑이야');
        }else if(userName ==='나쁜호랑이'){
            console.log('안녕 난 나쁜 호랑이야');
        }else{
            console.log('안녕 난 착한 호랑이야');
        }

        for(let i = 0; i< 100; i++){
            console.log(i + '번이야');
        }

        // document.getElementsByClassName('box');
        const box = documment.querySelector('.box')
        // const box = documment.querySelectorAll('.box')

        box.addEventListner('click',function(){
           // console.log('눌렀어');
           box.style.background = "blue"; // 파랑색으로 색상 변경 
           // box.classList.add('on');
           // box.classList.remove('on');
           box.classList.toggle('on'); // 있으면 .on 클래스 제거, 없으면 .on 클래스 추가 
        )} // 클릭 이벤트 추가
    </script>
</body>
</html>