※ 본 포스팅은 책 『실전 프로젝트 반응형 웹 퍼블리싱』을 바탕으로 하여 작성됨
선언문(Declaration)
선언문이란 Html 페이지 내에 자바스크립트를 작성하기 위해 "여기서부터는 자바스크립트를 작성할 것이다"라고 '스크립트 개시'를 선언하는 것이다.
만일 선언문을 작성하지 않고 스크립트를 작성하면 브라우저는 자바스크립트 실행문들을 단순히 HTML 태그로 인식하게 되어 문법 오류가 발생할 것이다.
선언문의 문법은 아래와 같이 실행문을 기준으로 <script></script> 태그로 작성한다.
<script type="text/javascript">
스크립트 실행문;
</script>선언문은 HTML 페이지의 head 및 body 요소 내에 작성할 수 있다.
<head>
<script type="text/javascript">
document.write("hello javascript");
</script>
</head>위 예제의 코드 내용 중, 실행문 "document.write();" 부분의 'document'를 객체(Object)라 부르고, 'write()'는 메서드(Method)라고 부른다.
객체(Objrct)와 메서드(Method)의 의미와 역할은 무엇일까?
만일 일하는 곳에 복합기가 없다면 복사를 할 수 없듯이 여기서 '복합기'는 객체가 되고, 복사를 하는 '기능'은 메서드가 된다. 그럼 이 내용을 자바스크립트로 표현하자면 아래와 같이 표현할 수 있다.
복합기.복사해라();
또한 복합기는 복사하는 기능 외에 스캔하는 기능도 있는 것 처럼 한 개의 객체에는 여러 가지 메서드가 모두 포함될 수 있다.
이렇듯 자바스크립트는 다양한 객체들로 구성되며, 각 객체마다 다양한 메서드들을 가지고 있다. 그래서 자바스크립트를 가리켜 '객체 기반 언어'라고 부른다.
한 줄의 실행문을 작성했다면, 문장의 마침표에 해당하는 세미콜론(;)으로 마무리를 해 준다. 물론 실제로는 이 세미콜론을 생략하더라도 한 줄에 하나의 실행만 내려진다면 오류는 발생하지 않을 수 있다.
하지만, 차후 다양한 기능의 스크립트를 기술하게 되는 경우에는 한 줄에 2개 이상의 실행문을 수행시키는 등 매우 복잡한 구조를 가진 스크립트 문장을 만들어야 하는 경우가 생기는데 이 때 만약 실행문 뒤에 세미콜론으로 마감하는 습관이 제대로 베어있지 않다면 그렇게 열심히 작성한 스크립트가 세미콜론 때문에 오류를 발생시킬 수도 있다. 그러므로 제대로 된 프로그래밍 연습을 하려면 초기부터 세미콜론으로 마무리 하는 습관을 길러두자.
자바스크립트는 위와 같이 html 문서 내에 모두 기술할 수도 있지만(내부형), 그 실행문의 내용만 별도의 파일(OOO.js)로 작성한 뒤 이를 불러오는 방식의 선언도 가능하다.
이를 가리켜 '외부형 선언'이라고 하는데, 그럼 이렇게 자바스크립트 선언문을 외부형으로 기술하는 방법과 그 장점에 대하여 알아보자.
외부형 선언문의 장점
- 관리가 편하다.
간혹 퍼블리셔가 내부 스크립트 실행문을 잘못 건드려서 프로그램이 제대로 구현되지 않는 경우가 발생한다. 하지만 js 파일을 외부로 분리해 두면 그럴 걸정이 없다.- 소스를 숨길 수 있다.
100% 소스를 감춘다는 것은 불가능하지만 브라우저에서의 '소스 보기'에서는 보이지 않는다.- 라이브러리(library) 언어를 사용할 수 있다.
대표적 라이브러리 언어인 jQuery(제이쿼리)를 연동하여 사용할 수 있다. 그밖에 제이쿼리 모바일이나 센차터치 등 다양한 라이브러리 언어를 연동할 수 있다.
변수 및 데이터 형(Variables & Data Type)
변수란 '변화하는 값(Data)'을 저장하는 공간이라고 보면 된다. 단, 변수에는 한 번에 1개의 데이터(Data)만 저장할 수 있다. 즉, 새로운 데이터가 입력되면 기존의 값은 삭제된다.
변수 선언은 다음과 같이 작성한다.
var 변수명; 또는 var 변수명1, 변수명2, 변수명3; 또는 var 변수명 = 데이터값;
예시
var num = 10; --- 'num'이라는 변수에 숫자형 데이터 값이 10이 저장되었다.
var numm = num/2; --- dlwp, 'num' 변수에는 "num/2"의 결과인 5가 새롭게 저장된다.
document.write(num); --- 그대로 출력하면 '5'라고 출력된다.
변수명 작성 시 주의사항
+ 대-소문자의 구분 +
변수명을 소문자로 만들고 출력할 때 대문자로 입력하면 '정의되지 않은 변수'로서 오류가 발생한다.var num = 50; document.write(Num); --- X
+ 변수명 맨 앞에는 영문, '_', '$' 등만 가능 +
var $num = 10 --- O var 3num = 0; --- X // 숫자가 맨 앞에 올 수 없다.
+ 변수명에는 영문, '$', '_', 숫자만 포함 가능 +
var the% = 100 --- X // %(특수문자)는 포함할 수 없다.
변수에 저장 가능한 데이터의 종류
+ 문자(String)형 데이터 +
다음과 같이 큰따옴표 또는 작은따옴표로 둘러싸인 데이터로서, '문자'로 인식된다.var txt1 = "자바스크립트"; var txt2 = '10';
+ 숫자(Number)형 데이터 +
다음과 같이 데이터에 숫자로 정의되는 데이터이다.var num = 10;
+ 논리(Boolean)형 데이터 +
다음과 같이 데이터에 true(참) 또는 false(거짓)로 정의되는 데이터이다.var rewult = true;
+ 널(Null)형 데이터 +
다음과 같이 데이터 null(비어 있음)로 정의되는 데이터이다.var result = null;
연산자(Operator)
산술 연산자
피연산자(연산의 대상인 데이터)가 2개 필요하며 '이항 연산자' 라고도 부른다. 초등학교 때 배운 사칙 연산에 해당한다.
[ + ] --- 더하기
[ - ] --- 빼기
[ * ] --- 곱하기
[ / ] --- 나누기
[ % ] --- 나머지
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title> new document </title>
<script type="text/javascript">
var A=10;
var B=3;
var result;
result=A+B;
document.write(result+"<br />")
result=A-B;
document.write(result+"<br />")
result=A*B;
document.write(result+"<br />")
result=A/B;
document.write(result+"<br />")
result=A%B;
document.write(result+"<br />")
</script>
</head>
<body>
</body>
</html>이 코드를 실행시키면
13
7
30
3.33333333333333
1
과 같은 결과가 나오는데 하단 바에 ❌ 표시와 함께 '5 오류'라는 문구가 뜬다. 왜 Validator(유효성 검사기)가 5개의 오류를 지적했을까?
유효성 검사 오류를 막는 CDATA 선언
오류의 원인은, 바로 자바스크립트 내에 들어간<br />태그이다. 예제와 같이 내부형으로 작성된 스크립트에서 html 태그를 포함하게 되면 비록 기능은 정상적으로 작동할지라도 브라우저의 유효성 검사기들은 오류를 지적한다.
결국, 내부형 스크립트에서 html 코드를 포함해야 할 때에는 유효성 검사 오류를 막기 위해 다음과 같이 'CDATA 선언' 을 함께 작성해야 한다.
CDATA 선언문은 내부형 자바스크립트 내에 HTML 태그가 포함되었을 경우, 이들을 모두 문자형 데이터로 인식시켜 이후 문서의 body 부분에 잘 출력되도록 돕는 역할을 한다. 즉, 스크립트가 실행되는 사이에 HTMl 태그가 갑자기 끼어드는 현상을 막아주는 것이다. 그러니 앞으로 HTML 내에서 자바스크립트를 작성할 때 태그를 포함해야 한다면 그 실행문 전체를 CDATA 선언문으로 감싸주는 습관을 들여야 할 것이다.
<script type="text/jaavascript">
//![Cdata[
실행문 내용들
//]]>
</script>물론, 이 경우에도 스크립트 코드를 외부형 파일로 따로 만들어 불러들이는 경우라면 문제가 없다.
비교 연산자
역시 피연산자가 2개 필요하며, 그 2개의 데이터를 비교할 때 사용한다. 비교하여 잘못됐으면 flase(거짓)를, 올바르면 true(참)라는 값을 반환한다.
[ A > B ] --- A가 B보다 크다
[ A >= B ] --- A가 B보다 크거나 같다
[ A < B ] --- A가 B보다 작다
[ A <= B ] --- A가 B보다 작거나 같다
[ A == B ] --- A와 B가 같다 // 데이터의 형(ype) 상관 없음
[ A != B ] --- A와 B가 다르다 // 데이터의 형(ype) 상관 없음
[ A === B ] --- A와 B가 같다 // 데이터 및 형(ype)이 일치할 때 true
[ A !== B ] --- A와 B가 다르다 // 데이터 및 형(ype)이 불일치할 때 true
대입(할당) 연산자
대입 연산자는 연산된 데이터를 지정된 변수에 대입할 때 사용한다.
[ = ] --- A = 10 → A = 10
[ += ] --- A += B → A = A+B
[ -= ] --- A -= B → A = A-B
[ *= ] --- A = B → A = AB
[ /= ] --- A /= B → A = A/B
[ %= ] --- A %= B → A = A%B
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title> new document </title>
<script type="text/javascript">
//<![CDATA[
var num1=10;
var num2=20;
num1+=5; //기존에 num1에 저장된 10 에 5를 더해서 num1에 저장합니다.
document.write(num1+"<br />"); //출력 15
num1-=5; //기존에 num1에 저장된 15 에 5를 빼서 num1에 저장합니다.
document.write(num1+"<br />"); //출력 10
num1*=5; //기존에 num1에 저장된 10 에 5를 곱해서 num1에 저장합니다.
document.write(num1+"<br />"); //출력 50
num1/=5; //기존에 num1에 저장된 50 에 5를 나누어 num1에 저장합니다.
document.write(num1+"<br />"); //출력 10
num2%=3; //기존에 num2에 저장된 20에 3으로 나눈 나머지값을 num1에 저장합니다.
document.write(num2+"<br />"); //출력 2
//]]>
</script>
</head>
<body>
</body>
</html>증감 연산자
증가 연산자는 변수에 저장된 값을 1씩 증가시킨다. 반대로 감소 연산자는 변수에 저장된 값을 1씩 감소시킨다.
[ ++ ] --- 1씩 증가
[ -- ] --- 1씩 감소
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
var num1=10;
var num2=20;
num1++; //num1의 10에서 1 더하여 저장
document.write(num1+"<br />"); //출력값: 11
num2--; //num2의 20에서 1을 감하여 저장
document.write(num2+"<br />"); //출력값: 19
//]]>
</script>
</head>
<body>
</body>
</html>논리 연산자
피연산자로는 논리데이터인 true 또는 false가 올 수 있다. 연산자로는 이항 연산자인 논리합(||), 논리곱(&&)이 있으며, 단항 연산자인 논리부정(!)이 있다.
[ || (논리합) ] --- OR (또는)
[ && (논리곱) ] --- AND (그리고)
[ ! (논리부정) ] --- NOT (부정)
논리합 연산자는 피연산자에 true가 한 개라도 있으면 true값을 반환하면 반면, 논리곱 연산자는 피연산자 중 false가 한 개라도 있으면 false값을 반환한다. 한편, 논리 부정은 변수에 true가 저장되어 있으면 false를, false가 저장되어 있으면 true를 결과로 내어놓는다.
실생활을 예로 들어, 엄마가 철수에게 김밥 또는(||) 순대를 사오라고 시켰는데 철수가 순대와 떡볶이를 사왔다면 심부름을 맞게 한 것일까?
떡볶이는 틀렸지만(false) 김밥은 참(true)이므로 철수는 제대로 심부름을 해온 것이다.
이제 논리연산자 표를 보면서 결과를 확인해 보도록 하자.
var A = 10, B = 20;
var C = 30, D = 40;| num1 | num2 | num1 || num2 | num1 && num2 | !num1 |
|---|---|---|---|---|
| A > B | C >= D | ㉠ | ㉡ | ㉢ |
| A >= B | C <= D | ㉣ | ㉤ | ㉥ |
| A <= B | C < D | ㉦ | ㉧ | ㉨ |
-
㉠ --- num1은 false이고, num2도 false이므로 논리합( || ) 결과는 false이다.
-
㉡ --- num1은 false이고, num2도 false이므로 논리곱( && ) 결과는 false이다.
-
㉢ --- num1은 false이므로, num1의 논리부정(!) 결과는 true이다..
-
㉣ --- num1은 false이고, num2는 true이므로 논리합( || ) 결과는 true이다.
-
㉤ --- num1은 false이고, num2는 true이므로 논리곱( && ) 결과는 false이다.
-
㉥ --- num1은 false이므로, num1의 논리부정(!) 결과는 true이다.
-
㉦ --- num1은 true이고, num2도 true이므로 논리합( || ) 결과는 true이다.
-
㉧ --- num1은 true이고, num2도 true이므로 논리곱( && ) 결과는 true이다.
-
㉨ --- num1은 true이므로, num1의 논리부정(!) 결과는 false입니다.
응용문제1
20대 대상의 소개팅을 준비 중입니다. 그런데 남성은 다 모집이 되었지만 여성은 아직 모집이 다 되지 않았네요. prompt 메서드를 활용하여 성별과 나이를 물어봅니다. 20대 여성이라면 결과값이 true로, 아니라면 결과값으로 falsee가 나오게 만드세요
우선, 문제에서 언급된 'prompt 메서드' 를 알아보자. 자바스크립트를 활용한 재미있는 이벤트 메서드 중 하나인데, 단어 뜻(prompt : 띄우다) 그대로 사용자에게 간단한 창을 띄워 질문에 대한 답 을 받아 저장하는 기능이다.사용법은 다음과 같다.
기본형식
prompt("질문내용") 처럼 기술하거나 만약 기본적인 답변이 있을 경우라면, prompt("질문내용", "기본답변")
<예> prompt("이름은?", "홍길동")과 같이 기술합니다.
일단, 문제에서 설명한 대로 '성별'을 먼저 물어본 후 입력된 값을 gender라는 변수에 저장해 보겠다.(여성을 찾고 있으므로, 기본답변은 '여성'으로 해두겠다.)
var gender = prompt("당신의 성별은?", "여성");다음 조건으로, '나이'에 관한 질문을 입력된 값을 age라는 변수에 저장한다.
var age = prompt("당신의 나이는?", "20");질문이 다 끝났으면 입력된 뎅이터로 조건을 체크할 차례이다. 응답자가 20대라면, 그 나이(age)값은 20보다 크거나 같고 30보다는 작은 숫자겠다. 만약 응답자가 '여성'과 '25'라는 수를 응답한 경우라면 연산자를 통한 체크 과정은 다음과 같다.
gendeer == "여성" --- 성별이 여성과 같다
&&(논리곱, 그리고)
age >= 20 --- 20보다 크거나 같다
&&(그리고)
age < 30 --- 30보다 작다
= true
그럼 지금까지의 과정을 코드로 작성해보자
<script type="text/javascript">
//<![CDATA[
var gender = prompt("당신의 성별은?", "여성"); // --- 성별 질문 응답창
var age = prompt("당신의 나이는?", "20"); // --- 나이 질문 응답창
var reesult = age >= 20 && age < 30 && gender == "여성";
document.write9result);
//]]>
</script>위와 같이 코딩된 페이지를 연 사람이 응답창에
당신의 성별은? --- 여성
당신의 나이는? --- 25
와 같이 입력했다면 웹 브라우저에sms true값이 출력될 것이다.
응용문제2
국어, 영어, 수학 3과목 평균 및 통과여부 문제
prompt 메서드를 활용하여 국어, 영어, 수학 점수를 입력받으세요. 평균이 70점 이상이고 각 과목별 점수가 60점 이상이라면 true를, 아니라면 false를 출력한다.
먼저 질문 코드를 입력하도록 하자. 한 가지 알아둘 것은, prompt 메서드는 입력 받은 데이터를 문자형 데이터로 반환한다는 것이다. 만일 문자형 데이터에 더하기 연산자를 사용하게 된다면 우리가 아는 '사칙연산'이 아닌, 문자들의 연결로 인식하게 되는 것이다. 즉, '1+1'이라는 수식을 연산의 결과 2가 아니라 그냥 11로 출력할 수 있다는 이야기다.
var korNum = prompt("국어 점수는?", "0");
var engNum = prompt("영어 점수는?", "0");
var mathNum = prompt("수학 점수는?", "0");결국, 이와 같이 코딩한 수 사용자가 국어 점수를 70, 영어 점수를 80, 그리고 수학 점수를 70으로 입력해도 평균을 위해 '+' 연산자를 쓰면 '문자 결합'이 되어 결과는 "708070"이 되어 버린다. 이런 오류를 막으려면, 다음과 같이 prompt로 입력 받을 내용을 Number() 메서드로 감싸주어 그 데이터를 숫자형식(Number)으로 저장해야 한다.
var korNum = Number(prompt("국어 점수는?", "0"));
var engNum = Number(prompt("영어 점수는?", "0"));
var mathNum = Number(prompt("수학 점수는?", "0"));이제, 평균 점수는 그렇게 입력 받은 세 과목의 점수를 합산하여 과목수로 나눠주면 된다. '(국어점수 + 영어점수 + 수학점수) / 과목수 = var avg = (korNum + engNum + mathNum) / 3
검토 과정은 다음과 같다.
avg >= 70 --- 평균이 70점 이상
&&
korNum >= 60 --- 국어점수 60 이상
&& --- 그리고
engNum >= 60 --- 영어점수 60 이상
&& --- 그리고
mathNum >= 60 --- 수학점수 60 이상
→ true
이번에도, 이런 모든 과정을 실제로 코딩해보자.
<script type="text/javascript">
//<![CDATA[
var korNum = Number(prompt("국어 점수는?", "0")); // Number() : 숫자형식으로 전환
var engNum = Number(prompt("영어 점수는?", "0"));
var mathNum = Number(prompt("수학 점수는?", "0"));
var avg = (korNum + engNum + mathNum)/3;
var result = avg >= 70 && korNum >= 60 && engNum >= 60 && mathNum >= 60 ;
document.write(result);
//]]>
</script>문자 결합 연산자
피연산자로는 2개의 데이터가 필요하며, 피연산자(연산대상)에 데이터가 1개 이상 문자형 데이터일 경우에 문자 결합 연산자로 실행한다. 만일 피연산자 데이터가 모두 숫자형 데이터라면 산술 연산자로 실행을 하게 된다.
<script type="text/avascript">
//<![CDATA[
var txt1 = "아름다운";
var txt2 = "우리강산";
document.write(txt1 + txt2 + "<br />");
// 문자결합 = 문자+문자 ---> 출력값 : 아름다운우리강산
var txt3 = "은하철도";
var txt4 = 999;
docuument.write(txt3 + txt4 + "<br />");
// 문자결합 = 문자+숫자 ---> 출력값 : 은하철도999
var num1 = 200;
var num2 = 300;
var txt5 = String(100); // String() 메서드로 숫자를 문자형 데이터로 변환
// 문자결합 = 숫자 + 숫자 + 문자 ---> 출력값 : 500100
var addText = "2002월드컵";
addText += "대한민국"; // 기존 문자데이터에 추가 결합 "2002월드컵 대한민국"
addText += "짝짝~짝짝짝~!!"; // 또 더하면 맨 끝에 '짝짝~짝짝짝~!!' 추가
document.write(addText);
// 출력값 : "2002월드컵 대한민국 짝짝~짝짝짝~!!"
//]]>
</script>조건 연산자
조건 연산자는 조건식의 결과가 true(참) 혹은 false(거짓)일 때 각각 다른 실행문을 수행시킨다. 우선 기본형식을 익힌 후 예제를 통해 정확한 사용법을 익혀보도록 하자.
기본 형식
조건식 ? 실행문1 : 실행문2
- 조건식의 결과값이 참(true)이면 실행문1을, 거짓(false)이면 실행문2를 수행한다.
<script type="text/javascript">
//<![CDATA[
var num1 = 30;
var num2 = 20;
num1 >= num2 ? alert("참(true)일 경우") : alert("거짓(true)일 경우");
// 조건식이 참(true)이므로 "참(true)일 경우" 경고창을 띄운다.
//]]>
</script>또한 우리는 confirm() 메서드를 활용해 확인, 취소창을 띄울 수 있다.. 여기서 '확인'버튼을 누를 경우, true값을 반환하며 '취소' 버튼을 누를 경우 false값을 반환한다.
<script type="text/javascript">
//<![CDATA[
var result=confirm("do you like javascript?"); // 확인 : true / 취소 : false
//result에 true값이 저장되면 ('확인'버튼) 아래 theText 변수에 "good" 저장
var theText = result ? "good" : "No-good";
document.write(theText);
//]]>
</script>