자바 스크립트
1. 자바스크립트의 역사
자바스크립트는 웹 브라우저에서 많이 사용하는 프로그램 언어입니다. 자바스크립트가 많이 사용되자European Computer Manufacture’s Association에서 ECMAScript라는 이름으로 표준화 했으며 이 표준을 바탕으로 웹브라우저 회사마다 조금씩 다른 방향으로 구현해서 약간의 차이가 존재합니다.
2. 자바스크립트 기본
A. 문장
실행문이 끝나면 끝에 ; 붙인다. (필수는 아님)
대소문자가 구별된다.
B. 키워드
break, if, else , for , switch ...
C. 주석
1) // /* */
D. 변수
변수는 자료형은 따로 지정하지 않고 var 키워드를 이용해서 변수를 선언합니다.
예 ) var pi;
E. 식별자
1) 키워드를 사용하면 안 된다.
2) 숫자로 시작하면 안 된다. 1tot; (x)
3) 특수문자는 _와 $만 허용 score#eng; (x)
4) 공백 문자를 포함할 수 없다. score eng = 10; (x)
3. 자료형
A. 문자열
문자열은 단일 인용 부호‘ 나 이중 인용 부호로 감싸서 표현한다.
var msg = “동해물과 백두산이”;
var msg2 = ‘동해물과 백두산이’;
* 자주 사용하는 이스케이프 문자 \n \t \’ \“ \\
B. 정수형
소수점 이하가 없는 수
예) var a = 10;
C. 실수형
소수점이 있는 수
예) var f = 3.4;
D. 불리언
true 또는 false 표현되는 형태
E. 기타
undefind (정의되지 않은 값), NaN (Not a Number)
예제1)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
var a = 10;
document.write("<font color='blue'><b>javascript </b></font>");
</script>
</head>
<body>
</body>
</html>
예제2)
<script>
var a = 11, b = 21;
var result = a + b;
document.write('a + b = ' + result);
</script>
예제3)
<script>
var str = "동해물과 백두산이 마르고 닳도록";
document.write(str);
</script>
4. 연산자
() []
! (not) ++(증가연산자) --(감소연산자)
a++ ; => a = a + 1;
a-- ; => a = a - 1;
*(곱하기) /(나누기) %(나눈 나머지)
+(더하기) -(빼기)
<(작다) <=(작거나 같다) >(크다) >=(크거나 같다)
==(같다) !=(같지 않다)
&&(and)
||(or)
? : (삼항 연산)
+= -= *= /= %= ...
( a = a +20 => a+=20 )
예제)
var a = 0, b = 0;
a2 = a++;
b2 = ++b;
document.write('a2 = '+a2+'\n'+'b2 = ' + b2);
예제) 3항 연산자
var (10 > 5) ? 1:2;
예제) +=
a += 1; 과 a = a + 1;은 같다.
5. 제어문
A. if
B. switch
C. for
D. while
예제) if문
<script>
var a = 10;
if (a > 10) {
document.write('a는 10보다 크다.');
} else if(a == 10){
document.write('a는 10이다.');
}else document.write('a는 10보다 작다.');
</script>
예제) switch문
<script>
var a = 3;
switch(a){
case 1 :
document.write('a는 1');
break;
case 2 :
document.write('a는 2');
break;
default :
document.write('a는 1,2 이외의 수');
}
</script>
예제) for문
<script>
var st = 10, ed = 15, tot = 0;
document.write('for문으로 10~15까지의 합계를 구합니다.<br />');
for(var i = st ; i <= ed ; i++){
tot = tot + i;
}
document.write('<br /> tot = ' + tot);
</script>
예제) 2중 for문을 이용한 구구단 3단~5단까지 출력
<script>
for(var a = 3; a <= 5; a++) {
for(var b = 1; b <= 9; b++){
document.write(a + 'x' + b + '=' + a*b + '<br />');
}
}
</script>
6. 함수
A. 유저가 만드는 함수
1) 선언
function 함수이름(매개변수) {
실행문;
return (값);
}
함수이름 : 함수의 이름을 이용해서 호출한다.
매개변수 : 함수를 실행하면서 필요한 데이터를 넘긴다.
return : 되돌려 줄 값이 있으면 return 을 이용한다.
예제) function
자바의 메소드와 문법이 비슷하다. 예제의 3가지 function을 사용하는 방법을 잘 확인.
<script>
function fnSum() {
var a = 10, b = 20;
var c = a + b;
document.write(c + "<br />");
}
function fnSum2(a, b) {
var c = a + b;
document.write(c + "<br />");
}
function fnSum3(a, b) {
var c = a + b;
return c;
}
fnSum();
fnSum2(3, 5);
var sum = fnSum3(5, 7);
document.write(sum + "<br />");
</script>
예제) function, 이중for문을 이용한 구구단 2~5단 정렬 출력
function gugudan() {
var a, b;
for (a=1; a <= 9; a++) {
for(b = 2; b <= 5; b++) {
c = a*b;
document.write(b + ' x ' + a + '=' + c);
document.write('  ');
}
document.write('<br />');
}
}
gugudan();
예제) 메시지창이 뜨는 alert가 담긴 function을 만든 뒤 html 영역에서 input button을 누를 때 function 호출
<head>
<script>
function myFunc() {
alert('버튼이 눌렸어요');
}
</script>
</head>
<body>
<input type="button" value="버튼" onclick="myFunc()">
</body>
2) js파일로 만들어서 외부에서 링크하기
<script src="mem.js" > => mem.js
예제) 별도로 만든 func.js파일
/**
*
*/
function myFunc() {
alert('버튼이 눌렸네요(func.js)');
}
function myFunc2(msg) {
alert(msg);
}
예제) 위의 func.js를 불러오는 HTML file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="func.js"></script>
</head>
<body>
<input type="button" value="버튼" onclick="myFunc()">
<input type="button" value="버튼2" onclick="myFunc2('버튼2를 눌렀다')">
</body>
</html>
B. 자바스크립트 내장함수
1) 내장함수
① 문자열 입력 관련
1. prompt
문자열을 입력할 때 사용
- 숫자를 입력 받아야 하는 경우는 문자열로 입력 받은 뒤 변환
- 첫번째 매개변수는 입력 창에서 띄워줄 메시지
- 두번째 매개변수는 입력 부분의 기본 값
2. confirm
- 불린 값을 입력 받을 때 사용
- 확인을 누르면 true를 리턴
- 취소를 누르면 false를 리턴
예제) prompt로 국어점수와 영어점수를 입력받아 평균을 출력
<script>
function inputData() {
var kor = 0;
var eng = 0;
kor = prompt("국어", ""); // prompt 창에 '국어'란 문자가 뜨며 그 아래 문자를 입력을 받을 수 있다.
eng = prompt("영어", "");
var tot = parseInt(kor) + parseInt(eng); // 입력받은 문자를 숫자로 변환하여 합산
var avg = tot / 2;
document.f1.result.value = avg; // form 'f1'의, name 'result' 값을 사용하므로 .value도 꼭 넣어야 함
}
</script>
</head>
<body>
<form name="f1">
<input type="button" value="국어영어 입력받기" onclick="inputData()"><br />
평균: <input type="text" name="result" value="">
</form>
예제) submit으로 저장할 지 물어본 뒤 save.jsp파일로 전송(submit)
function save() {
var chk;
chk = confirm('저장?');
if(chk == true) {
document.f1.submit(); // form f1에 input type=submit이 꼭 없어도 작동함.
}
else {}
}
</script>
</head>
<body>
<form action="save.jsp" name="f1">
<input type="text" value=""><br />
<input type="button" value="저장" onclick="save()">
</form>
② 숫자함수
1. parseInt(string) string을 정수로 바꿉니다.
2. parseFloat(string) string을 실수로 바꿉니다.
3. isNaN(number) number가 NaN(Not a Number)인지 확인.
4. eval(string) string을 자바스크립트 코드로 실행
5. isFinite(number) number가 유한한 값인지 확인
6. toFixed() 실수를 특정 자리 수까지 출력한다.
예제) 숫자함수
<script>
var a = 10 * "aa";
var b = 10 * 20;
var str1 = "10", str2 = "20";
var str3 = "1.2" , str4 = "1.4";
var f1 = parseFloat(str3) + parseFloat(str4);
document.write("a = " + a + "<br>");
document.write("isNaN(a) = " + isNaN(a) + "<br>");
document.write("b = " + b + "<br>");
document.write("isNaN(b) = " + isNaN(b) + "<br>");
document.write("str1 + str2 = " + ( parseInt(str1) + parseInt(str2) ) + "<br>");
document.write("str3 + str4 = " + ( f1.toFixed(1) ) + "<br>"); // toFixed는 해당 자리수로 변환
document.write("str3 = " + ( parseFloat(str3) ) + "<br>");
document.write("isFinite(\"1234\") = " + ( isFinite("1234") ) + "<br>"); // -10 / 0은 음의 무한대
document.write("isFinite(\"ab123\") = " + ( isFinite("ab123") ) + "<br>");
</script>
결과)
a = NaN
isNaN(a) = true
b = 200
isNaN(b) = false
str1 + str2 = 30
str3 + str4 = 2.6
str3 = 1.2
isFinite("1234") = true
isFinite("ab123") = false
③ 문자열 인코딩 관련
1. encodeURI() 인코딩 인터넷 주소에 사용되는 일부 특수 문자 (:, ;, /, =, ?, &)는 변환하지 않습니다.
2. decodeURI(encodeUri) 디코딩
예제) 문자열 인코딩/디코딩
<script>
var str = "1 + 3";
var str2 = encodeURI("한글데이터");
var num = eval(str); // eval은 문자열을 계산하는 함수
var msg = decodeURI(str2);
document.write("num : " + num + "<br>");
document.write("str2 : " + str2 + "<br>");
document.write("msg : " + msg + "<br>");
</script>
결과)
num : 4
str2 : %ED%95%9C%EA%B8%80%EB%8D%B0%EC%9D%B4%ED%84%B0
msg : 한글데이터
'JavaScript' 카테고리의 다른 글
| ECMA 스크립트에서의 배열 (0) | 2016.05.24 |
|---|---|
| 자바스크립트로 회원가입시 문자 체크 (0) | 2016.02.15 |
| 자바스크립트로 간단한 덧셈 뺄셈 연산 (0) | 2016.02.15 |
| 자바 스크립트의 기본: 이벤트 처리 (0) | 2016.02.15 |
| 자바 스크립트의 기본: Array, String, Date, Math, DOM, 브라우저 객체 (0) | 2016.02.15 |
