연구실

자바스크립트 코딩 따라하면서 이해하기

2021년 1월 5일

CSS로 예쁘게 디자인까지 입힌 내 사이트에 생명감을 불어넣는 인터랙티브 코딩 자바스크립트 언어의 기초를 알아보자.

 

JavaScript는 웹 브라우저에서 UI를 동적으로 보여주기 위한 프로그래밍 언어로,

HTML로 웹 사이트의 구조를 만들고 CSS로 사이트에 예쁜 옷을 입혀 JavaScript로 행동을 입력해

살아있는듯한 하나의 웹 사이트가 완성된다.

 

JavaScript 기본 작성법은 아래와 같다.

<script>
    자바스크립트 실행문 ;
    // 주석문 (한 줄)
    /* 주석문 (여러 줄 설명) */
</script>

 

*문법 주의사항 (내가 자바스크립트를 처음 시작하고 익숙하지 않을 때 발생하는 오류의 80%정도는 하단 체크리스트를 검토하면 해결되었다.)

– 대소문자를 구분한다.

– 실행문 종료시 ; 를 사용한다.

– 한줄에 한문장만 작성을 권장한다. (가독성 고려)

– {} , () 괄호의 짝이 맞아야 한다.

– 대부분 작은따옴표 ‘’ 를 사용하지만 큰따옴표 “” , 작은따옴표 ‘’를 둘 다 사용할 경우 겹치지 않게 짝을 맞춘다.

 

이제 가장 간단한 자바스크립트 실행문을 써보자.

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>Document</title>
</head>
<body>
    <script>
        document.write(‘문자열을 출력합니다.’);
        document.write(‘<h2>태그를 출력합니다</h2>’); 
    </script>
</body>
</html>

위와 같이 html을 저장하고 웹 브라우저로 열어보면 아래 이미지와 같은 결과값을 확인할 수 있다.

 

여기까진 그냥 html로 작성하면 되는데 왜 굳이 출력을 저런 방식으로 한줄씩 작성하는걸까 싶다.

이제 설명할 변수를 같이 써보면 이해가 간다.

 

변수란 변하는 데이터 값을 저장할 수 있는 메모리 공간이다.

변수는 문자형, 숫자형, 논리형, null(비어있음) 4개 타입의 데이터를 저장할 수 있다.

변수의 기본 선언은 아래와 같다.

<script>
    //문자형 데이터일 경우
    var 변수명 = ‘문자 혹은 숫자’ ;
    
    //숫자형 데이터일 경우
    var 변수명 = 숫자 ; // 혹은
    Number(‘숫자’)

    //논리형 데이터일 경우
    var 변수명 = true or false ; //혹은
    Boolean(데이터);
</script>

 

*변수 선언 규칙

– 첫 글자는 숫자 사용이 안된다. $ , _ , 영문자만 올 수 있다.(앞 3개는 혼용사용이 가능하다)

– $ , _ , 영문자는 혼용사용이 가능하다.

– 의미를 부여하여 지정한다.

– 의미에 맞는 영문으로 사용한다.

– 대소문자를 구분한다.

 

*단어 조합 규칙 (사람마다 다양하게 사용해서 표기법이 다를수도 있다는 정도로만 알아두면 좋다!)

– 스네이크 표기법 : 소문자만 사용하고 각각의 사이를 언더바를 넣어 표기 (background_color)

– 카멜 표기법 : 두번째 단어의 첫 글자를 대문자로 표기 (backgroundColor)

– 파스칼 표기법 : 첫번째 단어, 두번째 단어 둘 다 첫 글자를 대문자로 표기 (BackgroundColor)

 

변수를 한번 선언해보자.

Ex. 예원은 은송에게 붕어빵 총 5개 중 3개를 주었다.

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>Document</title>
</head>
<body>
    <script>
        var name1= ‘예원’, name2 = ‘은송’, food=’붕어빵’, total = 5, count = 3;

        document.write (name1 + ‘은 ‘ + name2 + ‘에게 ‘ + food + ‘ 총 ‘ + total + ‘개 중 ‘ + count + ‘개를 주었다.<br>’);

    </script>
</body>
</html>

위 예시문을 변수로 선언하고 출력하면 위와 같이 출력되는걸 확인 할 수 있다.

 

논리형도 한번 선언해보도록 하자.

Ex. c는 a가 100보다 같거나 작고 b도 20보다 작아야 참이다. = 결과값은?

c는 a가 100보다 같거나 작다 또는 b가 20보다 작아야 참이다. = 결과값은?

c는 참이 아니다. = 결과값은?

c는 거짓이 아니다. = 결과값은?

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>Document</title>
</head>
<body>
    <script>
        var a = 10 , b = 20 , c = 0 , d = 0 ;

        c = ( a <= 100 ) && ( b < 20 ) ;
        document.write (‘결과 : ‘ + c + ‘<br>’);

        c = ( a <= 100 ) || ( b < 20 );
        document.write (‘결과 : ‘ + c + ‘<br>’);

        c = !true ;
        document.write (‘결과 : ‘ + c + ‘<br>’);

        c = !false ;
        document.write (‘결과 : ‘ + c + ‘<br>’);

        d = ( a + b ) ;
        console.log (d)
    </script>
</body>
</html>

논리 연산자는

&& 는 and 로 첫번째 논리 그리고 두번째 논리 둘 다 맞으면 true

|| 는 or 로 첫번째 논리 또는 두번째 논리 둘 중 하나 이상이 맞으면 true

! 은 not 으로 논리가 false 이면 true (!false = true), 논리가 ture 라면 false (!true = false)

의 결과값을 나타낸다.

 

마지막으로 나중에 점점 복잡해지는 함수의 결과값을 출력해보기도하고 코드를 디버깅할 때 사용하기도 하는 Console.log 작성법이다.

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>Document</title>
</head>
<body>
    <script>
        var a = 10 , b = 20 , d = 0 ;

        d = ( a + b ) ;
        document.write ( d )

        console.log (d)
    </script>
</body>
</html>

 

일일히 출력하여 값을 확인하는데에는 한계가 있다. 그렇기 때문에 console.log를 사용하면 f12>콘솔에서 값을 확인할 수 있다.

또한 오류가 생겨 화면출력이 안될 경우에도 console.log 를 이용하여 코드의 몇 번째 줄에서 어떤 오류가 났는지 확인할 수 있다.

 

 

여기까지 알면 html과 css만 접했던 디자이너들에게는 생소했을 자바스크립트의 구조가 어느정도 이해가 되기 시작한다.

연산자, If문, 반복문, 함수 등 알아가야 할 게 더 있지만 여기까지 제대로 이해하고 다음 스텝을 밟으면 하나씩 하나씩 풀이를 만들어내는 과정들이 재밌어진다.

 

내 사이트에 생명을 넣기 위해 공부하는 개발자 어린이들 모두 화이팅! 😊