자바스크립트 코딩 따라하면서 이해하기
2021-12-16
email 공유
facebook 공유
linkedin 공유

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

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

정은송
프로
순수한 가치, 열정, 나눔을 통해 세상을 더 즐겁게 만듭니다.
브랜딩팀
프로필 소개글을 작성하세요.
정은송의 글 더보기
런칭을 위한 서비스 기획 방법론 2가지
위픽 우먼
매거진 더보기
제품 개발자의 자세
지역성장 바우처 신청하기
지역성장 바우처 소개
중소기업 혁신 바우처 신청하기
중소기업 혁신 바우처 소개
수출 바우처 신청하기