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

wpl sign
2021-12-16

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

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

조회수
11,789

타겟 적중률 91.5% #코어타겟 문자광고 .

성별, 연령, 앱/웹 접속 이력, 거주, 근무지역, 통화 이력까지 정교하다...
함께 읽으면 좋아요
아티클
거창한 이유나 의미가 없어도 성장할 수 있는 이유
직장인
아티클
‘롱블랙(Long Black)을 아시나요?’ 여기서 말하는 롱블랙은 커피 메뉴 롱블랙이 아닌, 구독 서비스다. 콘셉트는 롱블랙 커피에...
직장인
아티클
“명함 빨”이 중요한 것은 동서양이나 세대를 막론하고 마찬가지겠지만, 명예를 중시하고 어느 집단에 속하는지에 따라 사회적 평가가...
자기계발 직장인 트렌드
아티클
더 나은 주니어 되는 법(10)
직장인
아티클
어떤 경험이 가치 있는 경험 일까?
직장인
북클럽
‘하루 10분 마케팅습관’ 흑상어쌤입니다.  오늘은 ‘무기가 되는~’ 시리즈의 세 번째 신간 ‘무기가 되는 알고리즘’의 후기를...
직장인
아티클
미국 클라우드 IT 기업의 테크 마케터가 실리콘밸리 본사 출장을 다녀온 후 느낀점을 공유합니다.
직장인
wpl sign
위픽레터

마케터에게 제안하기

마케팅, 강연, 출판, 프로젝트 제안을 해보세요
커뮤니티