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문, 반복문, 함수 등 알아가야 할 게 더 있지만 여기까지 제대로 이해하고 다음 스텝을 밟으면 하나씩 하나씩 풀이를 만들어내는 과정들이 재밌어진다.
내 사이트에 생명을 넣기 위해 공부하는 개발자 어린이들 모두 화이팅! ?
