자바스크립트 기초
자바스크립트는 네스케이프社에서 개발한 HTML 문서 내에 삽입되어 동적인 웹페이지를 구현할 수 있는 스크립트이다.
독립된 응용프로그램의 형태를 지니지 못하는 스크립트 언어이다.
객체를 이용하여 프로그래밍하는 객체기반언어다.
자바스크립트는 웹 페이지의 HTML 엘리먼트에 DOM(document object model)이라는 좀 더 정형화되고, 구조화된 정의가 추가되면서 더욱 강력해졌다.
자바스크립트는 스크립트 언어의 특성 상 플랫폼에 독립적이며 모든 웹 브라우저에서 동일한 실행 결과를 얻을 수 있다.
프로그램 코드가 직접 html문서에 삽입되어, 브라우저에서 html파일을 읽을 때 같이 해석되고 실행된다.
컴파일 과정이 필요 없으며, 브라우저만 있다면 실행이 가능하다.
클라이언트에서만 실행되기에 정보를 서버에 보낼 필요 없이 처리할 수 있다.
소스 코드가 노출되어 누구든지 복사하여 사용할 수가 있다.
HTML안에 삽입 될 때는 <script> ~ </script>안에 정의한다.
<script> ~ </script>의 위치는
<head>~</head>태그 또는 <body>~</body>태그에 모두 정의 가능하다.
- HTML 페이지의 <body> 태그 안을 자바스크립트에서는 document 라고 부른다.
- 스크립트 실행문 document.write(); 부분의 document 를 객체(object)라고 부르고
write() 는 '매서드(method)'라고 부른다.
- 문장 끝에는 세미콜론';'을 적어서 문장의 끝을 알려주어라.
자바스크립트에서는 새로운 줄이 세미콜론과 똑같이 동작하여 ';'를 붙이지 않아도 되기는 하다.
하지만, 한줄에 하나 이상의 문장을 배치하려면 세미콜론 ';' 으로 나눠야 한다.
- document.write(); 는 PHP의 echo 나 print 명령어와 같다.
document.write("Hello World");
<script type="text/javascript" src="node.js"></script>
는 외부형 js 파일을 불러온다는 의미이다.
ㅇ 자바스크립트 주석문 : // 와 /* */
// : 한 줄 주석 처리. 프로그램 코드 끝에 사용
/* ~ */ : 한 줄 이상의 주석 처리
HTML 주석 태크는 <!-- 내용입력 -->
ㅇ 문장 끝에는 세미콜론';'을 적어서 문장의 끝을 알려준다
ㅇ 변수 만드는 규칙
- 사용 가능한 문자는 영문자, 숫자, _(underbar, underscore)이다
- 숫자로 시작할 수 없다.
- _(underbar , underscore)를 제외한 !, #, ?, $, @ 등과 같은 다른 특수문자는 올 수 없다.
- 공백은 허용되지 않는다.
- 자바스크립트 문법 안에서 규정한 예약어(키워드)는 변수로 사용할 수 없다.
ㅇ 식별자 종류
- 식별자 뒤에 괄호가 없고 단독으로 사용 : 변수
- 식별자 뒤에 괄호가 있고 단독으로 사용 : 함수
- 식별자 뒤에 괄호가 없고 다른 식별자와 사용 : 속성
- 식별자 뒤에 괄호가 있고 다른 식별자와 사용 : 메서드
ㅇ 이용문법
- \n : 줄바꿈
- 문자열 연결은 + 를 사용 : '이런'+'식으로도'+' '+'출력 가능'
- \t : Tab
- \' : 작은 따옴표
- \" : 큰 따옴표
- \\ : 역슬레쉬(\)
- % : 나머지 연산자, alert(5 % 3);
- 변수 : 값을 저장할 때 사용하는 식별자, 변수선언 var 식별자;
ㅇ 자료형 확인 : typeof 연산자를 이용
<script>
alert(typeof('String')); //String
alert(typeof(123)); //Number
alert(typeof(true)); //Boolean
alert(typeof(function(){})); //Function
alert(typeof({})); //Object
alert(typeof(abc)); //Undefined : 선언되지 않은 변수를 출력하려고 할 때
// 변수를 선언했지만 초기화를 하지 않았을 경우에도 undefined 출력된다
</script>
# null 은 의도해서 비워놓은 값
function getType(data) {
return Object.prototype.toString.call(data).slice(8,-1);
}
console.log(getType(123));
console.log(getType(false));
console.log(getType(null));
console.log(getType({}));
console.log(getType([]));
ㅇ switch 문
- 코드를 읽다가 break 를 만나게 되면 switch 문을 빠져 나가게 된다.
ㅇ 삼항 연산자
- (불 표현식) ? (참일 때 실행되는 문장) : (거짓일 때 실행되는 문장)
- 삼항연산자는 코드가 너무 복잡해지므로 한 줄로 적을 수 있을 때만 사용하는 것이 좋다.
반복문 : for, while, do ~while
ㅇ for 문 (For statement)
for (초기식; 조건식; 종결식) { // 1. 먼저 초기식을 실행하고 조건식을 비교
문장 // 2. 조건식이 참이면, 문장을 실행한 후 종결식을 실행하고
} // 3. 다시 조건식을 비교하고, 참이면 문장실행후 종결식을 실행(반복)
continue; // continue를 만나면 continue 이전 까지의 문장만이 실행이 되고 다음 반복으로 넘어감
ㅇ while 문
while (불 표현식) { // 불 표현식이 참인 동안 수행문을 실행하고, 거짓이면 수행문을 실행하지 않는다.
수행문 ...
}
ㅇ do while 문
do {
문장
} while (불 표현식) // 무조건 한번 실행 후 반복
# 변수 유효범위(Variable Scope)
형변환(Type conversion)
=== 일치연산자
== 동등연산자 : 형변환이 발생한다.
Falsy(거짓 같은 값)
false, '', null, undefined, 0, -0, NaN
1 + undefined ==> NaN
ㅇ 배열
- 배열은 여러 개의 변수를 한곳에 저장할 수 있는 자료형이다.
- 자바스크립트에서는 문자열과 숫자, 불, 함수, 객체와 정의되지 않은 자료형까지 총 6가지의 자료형이 존재
- 배열은 이중 객체의 일종으로, 대괄호([])를 이용해서 생성
- 배열 안에 입력된 값을 배열 요소라고 부른다.
- alert(array[1]); // 배열 기호 안에 들어간 숫자를 인덱스(Index)라고 부른다.
- for (var i in array) 은 for (var i = 0; i < array.length; i++) 와 같은 의미
<script>
var lls = document.getElementsByTagName('li');
for(var i in lls){
lls[i].style.color = 'blue';
}
</script>
- 배열 함수 정리 자료는 http://link2me.tistory.com/1458 참조
ㅇ 함수
함수란, 미리 만들어 놓은 작은 프로그램으로 혼자서는 실행되지 않고 다른 함수에 의해서 호출(call)을 받아야만 실행 될 수 있는 프로그램
function 함수이름(매개변수, 매개변수) {
함수의 수행문 ...
return 리턴값;
}
내장함수
alert : 가장 많이 사용되는 자바스크립트 메세지창이다.
prompt : 사용자의 입력을 받아 자바스크립트로 인식시킬때 사용하는 내장함수이다.
confirm : 확인과 취소 버튼을 가지는 메세지상자이다.
<script>
var res;
res = confirm("계속하겠습니까?");
if (res == true)
document.write("진행을 선택했습니다");
else
document.write("취소 되었습니다.");
</script>
ㅇ Example
alert(1000 > 100 > 10);
해설 : 연산 과정은 좌측부터 계산하며, alert(true > 10) -> alert(1 > 10) -> alert(false)
alert(num++) 은 alert(num); num=num+1;
alert(++num) 은 num=num+1; alert(num);
문자열을 입력하는 함수인 prompt()
var input = prompt('이름을 입력하세요.', '홍길동');alert(input);
confirm()함수는 사용자가 확인을 누르게 되면 true, 취소를 누르면 false를 리턴한다.
var input = confirm('수락하시겠습니까?');alert(input);
ㅇ 알아두면 좋은 팁
- window.open 을 클릭으로 열면 팝업이 차단되지 않지만, 그냥 열면 기본은 차단된다.
<script>
window.open('demo2.html');
</script>
- window.open('test1.html', '_blank', 'width=200, height=100, resizable=yes');
