JavaScript Reference

자바스크립트는 웹 브라우저에서 동작되는 스크립트 언어를 말합니다. HTML은 정적인 레이아웃을 포현한다면, 자바스크립트는 동적인 기능을 표현합니다.

자바스크립트는 1995년 넷스케이프 커뮤니케이션의 브렌던 아이크가 개발하였으며 Netscape Navigsator2.0에 구현되었습니다. 1996년에는 마이크로소프트사의 Internet Explorer3.0 탑재되었으며 java 애플릿으로 구현된 웹 브라우저의 지지부진한 보급과 맞물려 빠르게 보급되었습니다. 1997년부터 EXMAScript를 따르는 표준화 작업을 통해 현재는 모든 브라우저에서 지원됩니다.

자바스크립트 언어의 특징

자바스크립트는 인터프린터 언어입니다.
- 자바스크립트는 작성된 순서대로 구문을 분석합니다. 만약 코드에 문제가 생기면 에러가 발생한 다음 줄 부터는 구문을 해석하지 않습니다.
자바스크립트는 클라이언트 언어입니다.
- 자바스크립트는 서버에서 실행되지 않고, 사용자 컴퓨터에서 실행되는 클라이언트 언어입니다. 클라이언트 자바스크립트는 EXMAScript가 규정한 코어 언어와 웹 브라우저 API로 구성되어 있습니다.
자바스크립트는 객체 기반의 언어입니다.
- C++와 JAVA는 클래스를 이용하여 객체를 생성하는 클래스 기반의 객체 지향 언어인 반면 자바스크립트는 포로토타입을 상속하는 프로토타입 기반의 객체 지향 언어입니다.
자바스크립트는 동적 타입 언어입니다.
- C++와 JAVA는 변수 타입이 결정되는 정적 타입 언어인 반면 자바스크립트 변수 타입이 없습니다.
자바스크립트는 다양한 라이브러리가 지원되는 언어입니다.
- 자바스크립트를 이용한 언어에는 제이쿼리가 있습니다. 이를 통해 다양한 기능을 쉽게 구현 할 수 있으며, 뛰어난 효과를 만들어 낼 수 있습니다.

대문자와 소문자

자바스크립트는 대문자와 소문자를 구별하여 처리해야합니다.

주석

일반적으로 특정 코드에 대한 설명을 입력하거나 특정한 부분의 코드가 실행되지 않도록 사용합니다.

/* ..... */ : 여러줄에 주석을 적용한는 경우
// : 한줄에 주석을 적용하는 경우

키워드와 식별자

키워드(예약어) : 자바스크립트에 정해진 단어
식별자 : 사용자가 임의로 사용하는 단어

변수명 규칙

사용자가 사용할 수 있는 문자 알파벳(a~z, A~Z), 숫자(0~9), 밑줄(_), 달러기호($)
첫 글자는 숫자를 사용할 수 없습니다.
공백을 주면 안됩니다. : 밑줄(_) 사용가능, 하이픈(-) 사용안됩니다.
특수기호 사용 안됩니다.
키워드(예약어)를 사용할 수 없습니다.

변수명 조합 규칙

언더스코어 표기법 : text_top
카멜 표기법 : textTop
파스칼 표기법 : TrxtTop

변수는 하나의 데이터를 저장하는 저장소입니다.

var 변수명 = 값;

변수view


<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>변수</title>
	<script>
		var x = 10;  							//변수 x에 숫자 10을 저장
		var y = 20;							//변수 y에 숫자 20을 저장
		var y2 = "20";						//변수 y2에 문자 20을 저장
		var y2 = '20';						//변수 y2에 문자 20을 저장
		var z = "javascript"				//변수 z에 문자 javascript를 저장
		y = 200;								//변수 y에 값이 20 --> 200 변경

		document.write(x);
		document.write("<br>");
		document.write(y);
		document.write("<br>");
		document.write(z);
		document.write("<br>");
		document.write(y2);
	</script>
</head>
<body>
	
</body>
</html>

변수의 종류

변수의 사용 가능 범위에 따라 4가지로 구분됩니다.

지역변수 : 특정 범위 안에서만 사용하는 변수
전역변수 : 모든 영역에서 사용하는 변수
매개변수(파라미터) : 함수 외부에서 함수 내부로 데이터를 전달하기 위한 변수
멤버변수(프로퍼터) : 클래스 내부에서 만들어지며, 주로 객체에서 사용하는 경우

지역변수/전역변수 view


<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>지역변수/전역변수</title>
	<script>
		var x = 100;		//변수(전역) x에 숫자 100을 저장
		var y = 200;		//변수(전역) y에 숫자 200을 저장
		
		function area(){
			var x = 300;		//변수(지역) x에 숫자 100을 저장
			var z = 400;		//변수(지역) z에 숫자 200을 저장
			y = 600;			//변수(전역) y의 값을 200에서 600으로 변경
			document.write("area 함수 안");
			document.write("<br>");
			document.write(x);
			document.write("<br>");
			document.write(z);
			document.write("<br>");
			document.write(y);
			document.write("<br>");
		}
		area();
		
		document.write("area 함수 밖");
		document.write("<br>");
		document.write(x);
		document.write("<br>");
		document.write(y);
		document.write("<br>");	
	</script>
</head>
<body>
	
</body>
</html>

매개변수 view


<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>매개변수</title>
	<script>
	//브라우저 화면에 "javascript" 문자를 출력해주세요!
		document.write("javascript");
		document.write("<br>");
		
	//변수를 이용해서 화면에"jQuery" 문자를 출력해주세요!
		var x = "jQuery";
		document.write(x);
		document.write("<br>");
		
	//함수를 이용해서 화면에"HTML" 문자를 출력해주세요!
		function str1(){
			document.write("HTML");
			document.write("<br>");
		}
		str1();
		
	//매개변수를 이용해서 화면에 "CSS" 문자를 출력해주세요!
		function str2(num){
			document.write(num);
			document.write("<br>");
		}
		str2("CSS");
	</script>
</head>
<body>
	
</body>
</html>

변수의 유형

변수는 식별자로만 구분하기 때문에 어떠한 값인지 구분해야 하며, 숫자, 문자열, 함수, 객체, undefined으로 나눌 수 있습니다.

자료형	설명
숫자(Number)	정수와 실수가 있지만, 자바스크립트에서는 정수와 실수를 구분하지 않고 사용할 수 있습니다.
문자열(String)	"문자","string"처럼 따옴표를 사용한 문자의 집합을 문자열이라고 합니다.
논리(Boolean)	참과 거짓을 나타내는 자료형이며 오직 `true`,`false`로만 표현합니다.
특수값(null)	null은 아무런 값이 없는 경우를 의미하며, 주로 변수를 초기화할 때 사용합니다.
특수값(undefined)	변수 선언 시 자료형의 지정이 이루어지지 않거나, 어떤 자료형인지 알 수가 없을 경우에 undefined라고 표시가 됩니다.
배열(array)	배열 형태의 자료형도 자바스크립트 변수에 사용할 수 있습니다.
객체(object)	배열 형태의 자료형도 자바스크립트 변수에 사용할 수 있습니다.
함수(function)	배열 형태의 자료형도 자바스크립트 변수에 사용할 수 있습니다.

배열는 여러 개의를 저장하는 저장소입니다.

var 변수명 = [값1, 값2, 값3.....]

배열 view


<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>배열</title>
	<script>
		//변수 x=100, y=200 출력해주세요!
		var x = 100;
		var y = 200;
		document.write(x);
		document.write("<br>");
		document.write(y);
		document.write("<br><br>");
	
		//배열 선언
		var arr1 = new Array();
		arr1[0] = 100;
		arr1[1] = 200;
		
		document.write(arr1[0]);
		document.write("<br>");
		document.write(arr1[1]);
		document.write("<br><br>");
		
		//배열 선언과 동시에 초기화하기
		var arr2 = new Array(100, 200, 300);
		
		document.write(arr2[0],"<br>");
		document.write(arr2[1],"<br>");
		document.write(arr2[2],"<br>");
		
		//배열의 크기 구하기
		var arr3 = Array(100,200,300,400,500);
		
		document.write(arr3.length);
		
		//for문을 이용한 배열의 합 구하기
		var arr4 = new Array(100,200,300,400,500,600,700,800,900,1000)
		var sum = 0;
		
		//arr4[0] = 100
		//arr4[1] = 200
		//arr4[2] = 300
		//arr4[3] = 400
		//arr4[4] = 500
		//arr4[5] = 600
		//arr4[6] = 700
		//arr4[7] = 800
		//arr4[8] = 900
		//arr4[9] = 1000
		
		//0 = 0 + 100;
		//100 = 100 + 200;
		//300 = 300 + 300;
		//600 = 600 + 400;
		//1000 = 1000 + 500;
		//1500 = 1500 + 600;
		//2100 = 2100 + 700;
		//2800 = 2800 + 800;
		//3600 = 3600 + 900;
		//4500 = 4500 + 1000;
		//5500
		
		//i=0;   0<10; 1;
		//i=1;   1<10; 2;
		//i=2;   2<10; 3;
		//i=3;   3<10; 4;
		//i=4;   4<10; 5;
		//i=5;   5<10; 6;
		//i=6;   6<10; 7;
		//i=7;   7<10; 8;
		//i=8;   8<10; 9;
		//i=9;   9<10; 10;
		
		for(var i=0; i<arr4.length; i++){
			sum = sum + arr4[i];
		}
		document.write("<br><br>");
		document.write(sum);
	</script>
</head>
<body>
	
</body>
</html>

산술연산자는 사칙연산을 수행합니다.

연산자	예시	설명
`+`	x + y	더하기
`-`	x - y	빼기
`*`	x * y	곱하기
/	x / y	나누기
%	x % y	나머지

복합연산자는 사칙연산을 간결하게 표현할 때 사용합니다.

연산자	예시	설명
`+=`	x = x + 10	x+=10
`-=`	x = x - 10	x-=10
`*=`	x = x * 10	x*=10
`/=`	x = x / 10	x/=10
`%=`	x = x % 10	x%=10

증가연산자는 1만큼 증가시키고, 감소연산자는 1만큼 감소시킵니다.

연산자	예시	설명
`++`	x = x + 1	x++ 또는 ++x
`--`	x = x - 1	x-- 또는 --x

비교연산자는 두개의 값을 비교하여 결과를 참 또는 거짓으로 나타냅니다.

연산자	예시	설명
`==`	x == y	좌변과 우변이 값이 같을 경우에 true
`==`	x === y	좌변과 우변의 값이 같고 데이터형도 같을 경우에 true
`!=`	x != y	좌변과 우변의 값이 같지 않을 경우에 true
`!==`	x !== y	좌변과 우변의 값이 같지 않을 경우, 데이터형이 다른 경우에 true
`>`	x > y	좌변이 우변보다 클 경우에 true
`<`	x < y	좌변이 우변보다 작을 경우에 true
`>=`	x >= y	좌변이 우변보다 크거나 같을 경우에 true
`<=`	x <= y	좌변이 우변보다 작거나 같을 경우에 true

논리연산자는 참/거짓으로 나타내는 boolean 값을 조합해서 논리 연산을 수행합니다.

연산자	예시	설명
`&&`	x && y	(and) 둘 다 true인 경우에 true
`\|\|`	x \|\| y	(or) 둘 중의 하나 이상이 true 이면 true
`!`	!x	(not) 식이 false인 경우 true

조건문은 조건에 맞으면 실행하고, 맞지 않으면 다른 코드를 실행하도록 조건을 거는 제어문입니다.

if

if 단독으로 사용하는 형태입니다.

if(조건){
//실행코드
}

if view


<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>if</title>
	<script>
		var x = 100;
		
		if(x % 2 == 0){
			document.write("짝수!");   
		}
		
		var num = window.prompt("숫자를 입력해주세요!");
		
		if(num % 2 == 0){
			document.write("당신이 입력한 숫자는 짝수!");   
		}
	</script>
</head>
<body>
	
</body>
</html>

if~else

두개의 값을 비교하여 코드를 별개로 실행합니다.

if(조건){
//참일 때 실행코드
} else {
//거짓일 때 실행코드
}

if~else view


<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>if~else</title>
	<script>
		var x = 100;
		if(x % 2 === 0){
			document.write("짝수!");
		} else {
			document.write("홀수!");
		}
		
		var num = window.prompt("숫자를 입력해주세요!");
		
		if(num % 2 == 0){
			alert("넌 짝수!");
		} else {
			alert("넌 홀수!");
		}
		
		var userID = window.prompt("아이디를 입력하세요!");
		var userPW = window.prompt("패스워드를 입력하세요!");
		
		if (userID == "kimju7" && userPW == "1234"){
			alert("안녕하세요!");
		} else {
			alert("아이디 또는 비밀번호를 확인해주세요!");
		}
	</script>
</head>
<body>
	
</body>
</html>

다중 if

여러가지 조건에 따라 조건문을 설정합니다.

if(조건){
//참일 때 실행코드
} else if{
//앞 조건이 거짓일 때 실행코드
} else if {
//앞 조건이 거짓일 때 실행코드
} else {
//앞 모든 조건이 거짓일 떄 실행코드 }

다중 if view


<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>다중 if</title>
	<script>
		var x = 100;
		
		if(x == 90){
			document.write("x의 숫자는 90입니다.")
		} else if(x == 91) {
			document.write("x의 숫자는 91입니다.")
		} else if(x == 92) {
			document.write("x의 숫자는 92입니다.")
		} else if(x == 93) {
			document.write("x의 숫자는 93입니다.")
		} else if(x == 94) {
			document.write("x의 숫자는 94입니다.")
		} else if(x == 95) {
			document.write("x의 숫자는 95입니다.")
		} else {
			document.write("x의 숫자는 모르겠습니다.")
		}
		
		var userID = window.prompt("아이디를 입력하세요!");
		var userPW = window.prompt("패스워드를 입력하세요!");
		
		if (userID == "kimju7" && userPW == "1234"){
			alert("안녕하세요!");
		} else if(userID == "kimju7") {
			alert("비밀번호를 확인해주세요!");
		} else if(userPW == "1234") {
			alert("아이디를 확인해주세요!");
		} else {
			alert("아이디와 비밀번호를 다시 한번 확인해주세요!");
		}
	</script>
</head>
<body>
	
</body>
</html>

switch

해당 조건에 맞는 값을 case로 구분해서 수행하는 제어문입니다.

switch(조건){
    case 값1 :
        //조건을 체크할 변수가 값1을 가지고 있으면 실행
    break;
    case 값2 :
        //조건을 체크할 변수가 값2을 가지고 있으면 실행
    break;
    case 값3 :
        //조건을 체크할 변수가 값3을 가지고 있으면 실행
    break;
    default;
        //해당되는 값을 가지고 있지 않을 경우 실행
    /break;
}

switch view


<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>switch</title>
	<script>
		var color = window.prompt("빨강, 파랑, 노랑, 검정, 흰색 중 가장 좋아하는 색을 적어주세요!")
		
		switch(color){
			case "빨강" : 
				document.write("당신은 빨강처럼 열정적인 사람입니다.")
			break;
			case "파랑" : 
				document.write("당신은 파랑처럼 푸르른 사람입니다.")
			break;
			case "노랑" : 
				document.write("당신은 노랑처럼 지혜로운 사람입니다.")
			break;
			case "흰색" : 
				document.write("당신은 흰색처럼 깨끗한 사람입니다.")
			break;
			case "검정" : 
				document.write("당신은 검정처럼 어두운 사람입니다.")
			break;
				
			default : 
				document.write("당신은 색을 볼 줄 모르시군요!")
			break;
		}
	</script>
</head>
<body>
	
</body>
</html>

switch view


<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>switch</title>
	<script>
		var site = window.prompt("네이버, 구글, 다음, 네이트 중 가장 자주가는 사이트는?");
		var url;
		
		switch(site){
			case "네이버" : url="www.naver.com";
			break;
			
			case "다음" : url="www.daum.net";
			break;
				
			case "구글" : url="www.google.com";
			break;
				
			case "네이트" : url="www.nate.com";
			break;
				
			default : document.write("그런 사이트는 없습니다!");
			break;
		}
		//alert(url);
		
		if(url){
			location.href="http://"+url
		}
	</script>
</head>
<body>
	
</body>
</html>

조건부 연산자

if 단독으로 사용하는 형태입니다.

(조건) ? (참일 때 실행코드) : (거짓일 때 실행코드);

조건부 연산자 view


<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>조건부 연산자</title>
	<script>
	//숫자를 입력했을 때 10보다 크면 "숫자가 5보다 큽니다" 출력
	//숫자가 10보다 작으면 "숫자가 5보다 작습니다" 출력(if)
	//숫자가 5면 "빙고"
	
		var num = window.prompt("숫자를 입력해주세요!");
		if(num == 5){
			document.write("빙고");
		}else if(num > 5){
			document.write("5보다 큽니다.");
		}else if(num < 5){
			document.write("5보다 작습니다.");
		}	document.write("<br>");
		
		//x:100, y:200 x*y의 값을 화면에 출력해주세요.
		
		var x = 100; 
		var y = 200;
		document.write(x*y);
		
		//x:100, y:200 함수를 이용해서 x*y의 값을 화면에 출력해주세요.
		
		function num2(){
			var x = 100; 
			var y = 200;
			document.write(x*y);
		}	document.write("<br>");
		num2();
		
		//매개변수를 100,200을 이용해 함수(num3)를 만들어서 x*y의 값을 출력
		
		function num3(n1,n2){
			document.write(n1*n2);
		}	document.write("<br>");
		num3(100,200);
		
		//사용자가 숫자를 입력했을 때 홀수,짝수를 구별해서 출력해주세요.
		
		var num5 = window.prompt("숫자를 입력해주세요.");
		num5 = parseInt(num5);
//		
//		if (num5 % 2 == 0){
//			document.write("짝수");
//		}else {
//			document.write("홀수");
//		}
		(num5 % 2 == 0) ? document.write("짝수") : document.write("홀수");
	</script>
</head>
<body>
	
</body>
</html>

while

조건식의 만족 여부를 먼저 검사한 후, 중괄호에 있는 실행문의 실행 여부를 결정합니다.

var 변수 = 초기값
while(조건식){
실행문;
증감식;
}

while view


<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>while</title>
	<script>
	//1~1000출력
	//초기값, 실행문, 증감식
		var count = 1;
		while(count <= 1000){
			document.write(count,"<br>");
			count++;
		}
	</script>
</head>
<body>
	
</body>
</html>

100보다 작은 숫자에서 4의배수와 6의배수 출력하기 view


<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
		//1~100출력(4의배수, 6의배수)
		//초기값, 조건식, 실행문, 증감식
		var num = 1;
		while(num <= 100){
			if(num % 4 == 0 && num % 6 == 0){
				document.write(num,"<br>");
			}
			num++;
		}
	</script>
</head>
<body>
	
</body>
</html>

1~100출력(짝수:파란색, 홀수:빨간색) view


<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
		//1~100출력(짝수:파란색, 홀수:빨간색)
		var num = 1;
		while (num <= 100){
			
			if(num % 2 == 0){
				document.write("<span style='color: blue'>"+num+"</span style='color: blue'>","<br>");
				
			}else {
				document.write("<span style='color: red'>"+num+"</span style='color: blue'>","<br>");
			}
			num++;
		}
	</script>
</head>
<body>
	
</body>
</html>

do while

while 문의 경우에는 조건식의 만족 여부를 먼저 검사한 후, 중괄호에 있는 실행문의 실행 여부를 결정합니다. 하지만 do while문은 반드시 한 번은 실행문을 실행하고 조건식을 검사합니다.

var 변수 = 초기값;
do {
실행문;
증감식;
}while(조건식);

do while view


<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>do while</title>
	<script>
		var count = 0;
		do {
			count++;
			document.write(count,"<br>");
		}while(count<100);
		
	</script>
</head>
<body>
	
</body>
</html>

for

for문은 특정 구문을 여러번 반복하고 싶을 때 사용하는 반복문입니다.

for(초기값; 조건식; 증감값){
//실행코드
}br

for view


<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>for</title>
	<script>
		//0~100까지 출력
		for(var i=0; i<=100; i++){
			document.write("숫자"+i,"<br>")
		}
		//0~100중에서 짝수만 출력
		for(var i=0; i<=100; i+=2){
			document.write("짝수"+i,"<br>")
		}
	</script>
</head>
<body>
	
</body>
</html>

5의 배수는 파란색, 7의 배수는 빨간색, 5와7의 배수는 검은색 출력 view


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        //for문을 이용해서 1~100까지 출력
        //5의 배수는 파란색으로 출력
        //7의 배수는 빨간색으로 출력
        //5와 7의 배수는 검은색으로 출력
        for(var i=1; i<=100; i++){
            if(i%5==0 && i%7!==0){ //5의 배수이고 7의 배수가 아닌 경우
                document.write("<span style='color:blue'>"+i+"</span>","<br>");
            } else if(i%7==0 && i%5!==0){ //7의 배수이고 5의 배수가 아닌 경우
                document.write("<span style='color:red'>"+i+"</span>","<br>");
            } else if(i%5==0 && i%7==0){ //5의 배수이고 7의 배수인 경우
                document.write("<span style='color:black'>"+i+"</span>","<br>");
            }
        }
    </script>
</head>
<body>
    
</body>
</html>

for문을 이용해서 배열의 합 구하기 view


<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
		//변수 : 하나의 데이터를 저장하는 저장소
		//배열 : 두개 이상의 데이터를 저장하는 저장소
		var arr4 = new Array(100,200,300,400,500);
		var sum = 0;
		
		for(var i = 0; i<arr4.length; i++){
			//document.write(arr4[i],"<br>");
			sum = sum + arr4[i]
		}
		document.write(sum);
	</script>
</head>
<body>
	
</body>
</html>

다중 for

for(var i=0; i<100; i++){
    for(var j=0; j<100; J++){
        //실행코드
    }
}

구구단 view


<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>구구단</title>
	<script>
		//num1 * num2 = sum
		//(2~9)*(1~9)
		// 2*1=2
		// 2*2=4
		// 2*3=6
		// 2*4=8
		// 2*5=10
		// 2*6=12
		
		// 3*1=3
		// 3*2=6
		// 3*3=9
		// 3*4=12
		// 3*5=15
		// 3*6=18
		
		for(var i=0; i<8; i++){
			for(var j=0; j<9; j++){
				var num1 = i + 2;
				var num2 = j + 1;
				var sum = num1 * num2;
				document.write(num1 + " X " + num2 + " = " + sum);
				document.write("<br>");
			}
		}
	</script>
</head>
<body>
	
</body>
</html>

테이블 view


<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>table</title>
	<script>
		var num = 1;
		var table = "<table border='1'>";
		
		for(var i=1; i<=10; i++){
			table += "<tr>";
			
			for(var j=1; j<=10; j++){
				table += "<td>" + num + "</td>"
				num++;
			}
			
			table += "</tr>";
		}
		table += "</table>";
		document.write(table);
	</script>
</head>
<body>
<!--
	<table border="7">
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
			<td>5</td>
			<td>6</td>
			<td>7</td>
			<td>8</td>
			<td>9</td>
			<td>10</td>
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
			<td>5</td>
			<td>6</td>
			<td>7</td>
			<td>8</td>
			<td>9</td>
			<td>10</td>
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
			<td>5</td>
			<td>6</td>
			<td>7</td>
			<td>8</td>
			<td>9</td>
			<td>10</td>
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
			<td>5</td>
			<td>6</td>
			<td>7</td>
			<td>8</td>
			<td>9</td>
			<td>10</td>
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
			<td>5</td>
			<td>6</td>
			<td>7</td>
			<td>8</td>
			<td>9</td>
			<td>10</td>
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
			<td>5</td>
			<td>6</td>
			<td>7</td>
			<td>8</td>
			<td>9</td>
			<td>10</td>
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
			<td>5</td>
			<td>6</td>
			<td>7</td>
			<td>8</td>
			<td>9</td>
			<td>10</td>
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
			<td>5</td>
			<td>6</td>
			<td>7</td>
			<td>8</td>
			<td>9</td>
			<td>10</td>
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
			<td>5</td>
			<td>6</td>
			<td>7</td>
			<td>8</td>
			<td>9</td>
			<td>10</td>
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
			<td>5</td>
			<td>6</td>
			<td>7</td>
			<td>8</td>
			<td>9</td>
			<td>10</td>
		</tr>
	</table>
-->
</body>
</html>

break문과 continue문

var 변수 = 초기값;
while(조건식){
실행문;
증감식;
}

함수는 하나의 실행문을 저장하여 사용할 수 있습니다.

함수는 하나의 실행문을 저장하고 변수는 하나의 데이터를 저장하여 사용합니다. 함수는 크립트 실행문을 보관하는 역할을 하기 떄문에 반복 사용되는 코드를 구조화하거나 재활용을 목적으로 사용합니다.

함수를 사용하는 이유 view


<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
	//for문을 이용해서 화면에 다음과 같이 출력해주세요.
	//1.white
	//2.white
	//3.white
	//4.white
	//5.white
	//6.white
	//7.white
	//8.white
	//9.white
	//10.white
		
//		for(var i=1; i<=10; i++){
//			document.write(i+". white","<br>");
//		}
		
	//1.black
	//2.black
	//3.black
	//4.black
	//5.black
	//6.black
	//7.black
	//8.black
	//9.black
	//10.black
		
//		for(var j=1; j<=10; j++){
//			document.write(j+". black","<br>");
//		}
		
	//1.blue
	//2.blue
	//3.blue
	//4.blue
	//5.blue
	//6.blue
	//7.blue
	//8.blue
	//9.blue
	//10.blue
		
//		for(var z=1; z<=10; z++){
//			document.write(z+". blue","<br>")
//		}
		
		function color (name){
			for(var z=1; z<=10; z++){
				document.write(z+"."+name,"<br>");
			}
		}
		color("black");
		color("blue");
		color("white");
	</script>
</head>
<body>
	
</body>
</html>

함수의 사용 형태

함수는 사용형태에 따라서 선언적함수, 익명함수, 매개변수가 있는 함수, 리턴 값이 있는 함수로 구분됩니다.

선언적함수 view

function 함수이름(){
//실행코드
}
함수이름(); //함수 호출


<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>기본적인 함수</title>
	
</head>
<body>
	<div id="message">환영합니다!</div>
	
	<script>
		var msg = "10% 할인을 받으시려면 지금 회원으로 가입하세요!"
		
		function updateMessage(){
			var el = document.getElementById('message');
			el.textContent = msg; 
		}
		updateMessage();
	</script>
</body>
</html>

익명함수 view

var = 변수이름 function {
//실행코드
}
변수이름(); //함수 호출


<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>익명함수</title>
	<script>
		var fun = function(){
			document.write("익명함수가 실행되었습니다.","<br>");
			
		}
		fun();
	</script>
</head>
<body>
	<div id="message">환영합니다!</div>
	
	<script>
		var msg = "10% 할인을 받으시려면 지금 회원으로 가입하세요!"
		
		function updateMessage = function(){
			var el = document.getElementById('message');
			el.textContent = msg; 
		}
		updateMessage();
	</script>
</body>
</html>

매개변수가 있는 함수 view

function 함수이름(매개변수1, 매개변수2, ....){
//실행코드
}
함수이름(매개변수1, 매개변수2, ...); //함수 호출


<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>매개변수가 있는 함수</title>
	<script>
		function func3(num){
			document.write(num);
		}
		func3 ("매개 변수가 있는 함수 입니다.")
	</script>
</head>
<body>
	<div id="message">환영합니다!</div>
	
	<script>
		var msg = "10% 할인을 받으시려면 지금 회원으로 가입하세요!"
		
		function updateMessage(msg){
			var el = document.getElementById('message');
			el.textContent = msg; 
		}
		updateMessage(msg);
	</script>
</body>
</html>

리턴값이 있는 함수 view

function 함수이름(){
//실행코드
return 리턴값; }
함수이름(); //함수 호출


<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>리턴값이 있는 함수</title>
	<script>
		function func4(){
			var str = "리턴값이 있는 함수입니다."
			return str;
		}
//		func4();
		document.write(func4());
		
		function calculateArea(width,height){
			var area = width*height;
			return area;
		}
		var ca = calculateArea(300,400);
		document.write(ca);
		
		function getsize(width, height, depth){
			var area = width*height;
			var volume = width*height*depth;
			var size = [area, volume];
			return size;
		}
		var areaone = getsize(3,2,3)[0];
		var volumeone = getsize(3,2,3)[1];
		
		document.write(areaone);
		document.write(volumeone);
	</script>
</head>
<body>
	
</body>
</html>

객체는 데이터와 연산 작업을 담고 있는 기본적인 기능입니다.

객체(object)란 여러분이 현실 세계에서 인지하는 물체에 대한 모델을 만들기 위해 변수와 함수를 그룹화한 것을 말합니다.

속성 : 객체 안에 있는 변수
메서드 : 객체 안에 있는 함수

객체를 생성하는 방법

축약형 표기법, 객체 생성자 표기법view


<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>객체를 생성하는 방법</title>
	<script>
		//객체를 생성한 후 속성(변수)과 메서드(함수)를 추가하는 방법
		//축약형 표기법
		var hotel = {};

		hotel.name = "park";
		hotel.rooms = 40;
		hotel.booked = 25;
		hotel.check = function(){
			return this.rooms - this.booked;
		}
		
		//객체 생성자 표기법
		var hotel2 = new Object{};
		
		hotel2.name = "park";
		hotel2.rooms = 40;
		hotel2.booked = 25;
		hotel2.check = function(){
			return this.rooms - this.booked;
		}

		//속성과 메서드를 사전에 정의하여 객체를 생성하기
		//축약형 표기법
		var hotel3 = {
			name : "web",
			rooms : 40,
			booked : 25,
			check : function(){
				return this.rooms - this.booked;
			}
		}
		
		//객체 생성자 표기법
		//함수를 이용하면 여러개의 객체를 생성할 수 있습니다. 이때는 객체의
		//이름대신 this 키워드를 사용합니다.
		
		function hotel(name, rooms, booked){
			this.name = name;
			this.rooms = rooms;
			this.booked = booked;
			this.check = function(){
				return this.rooms - this.booked;
			}
		}
		var quayhotel = new hotel('quay',40,25);
		var parkhotel = new hotel('park',40,25);
	</script>
</head>
<body>
	
</body>
</html>

객체 view


<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>객체</title>
	<script>
		var hotel = {
			name : 'quay',
			rooms : 40,
			booked : 25,
			gym : true,
			roomTypes : ['트윈','더블','스위트'],
			checkAvailability : function(){
				var free = this.rooms - this.booked;
				return free;
			}
		}
	</script>
</head>
<body>
	<h2>예약정보</h2>
	<div id="hotelName"></div>
	<div id="availability">
		<p id="room"></p>
		<p>개의 방이 남아있습니다.</p>
	</div>
	
	<script>
		var hotel = {
			name : 'quay',
			rooms : 40,
			booked : 25,
			gym : true,
			roomTypes : ['트윈','더블','스위트'],
			checkAvailability : function(){
				var free = this.rooms - this.booked;
				return free;
			}
		}
		
		var elName = document.getElementById('hotelName');
		elName.textContent = hotel.name;
		
		var elRooms = document.getElementById('room')
		elRooms.textContent = hotel.checkAvailability();
	</script>
</body>
</html>

생성자 문법을 이용한 객체 view


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>생성자를 이용한 객체</title>
</head>
<body>
    <h2>예약정보</h2>
    <div id="hotelName"></div>
    <div id="availability">
        <p id="room"></p>
        <p>개의 방이 남아 있습니다.</p>
    </div>
    <script>
        //var hotel = new Array ( );
        var hotel = new Object ( );
        
        hotel.name = 'park';
        hotel.rooms = '120';
        hotel.booked = '70';
        hotel.checkAvailability = function( ){
            return this.rooms -this.booked;
        }
        var elName = document.getElementById('hotelName');
        elName.textContent = hotel.name;
        
        var elRooms = document.getElementById('rooms');
        elName.textContent = hotel.checkAvailability();
    </script>
</body>
</html>

데이터 저장 view


<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>데이터 저장하기</title>
	<script>
	//변수 : 하나의 데이터를 저장하는 저장소
	var hotel = "park";
	document.write(hotel,"<br>");
	
	//배열 : 여러개의 데이터를 저장하는 저장소
	var hotel = ["web","s","y"];
	document.write(hotel[0],"<br>",hotel[1],"<br>");
		
	//객체 : 속성과 메서드를 저장하는 저장소
	var hotel2 = {
		name : "java",
		rooms : 40
	};
	document.write(hotel2.name,"<br>");
	
	//여러개의 객체 : 여러개의 객체를 저장하는 저장소
	function Hotel4(name, rooms){
		this.name = name;
		
		this.rooms = rooms;
	}
	var hou1 = new Hotel4('css',40);
	var hou2 = new Hotel4('jennie',7);
	document.write(hou2.name,"<br>",hou2.rooms,"<br>");	
	</script>
</head>
<body>
	
</body>
</html>

내장 객체

브라우저는 브라우저 창과 이 창이 현재 보여주고 있는 페이지 등을 표현하기 위한 내장 객체들을 갖고 있습니다.

브라우저 객체 모델

브라우저 객체 모델은 브라우저 탭 혹은 창의 모델을 생성합니다.

document, history, location, navigaitor, screen

브라우저 객체 모델 : window 객체

속성	설명
window.innerHeight	창의 높이(브라우저 창 테두리 및 사용자 인터페이스 부분은 제외)(단위는 픽셀)
window.innerWidth	창의 너비(브라우저 창 테두리 및 사용자 인터페이스 부분은 제외)(단위는 픽셀)
window.pageXOffset	문서의 가로 스크롤 크기(단위는 픽셀)
window.pageYOffset	문서의 세로 스크롤 크기(단위는 픽셀)
window.screenX	화면의 좌측 상단으로부터 현재 마우스 포인터의 X 좌표(단위는 픽셀)
window.screenY	화면의 좌측 상단으로부터 현재 마우스 포인터의 Y 좌표(단위는 픽셀)
window.location	window 객체의 현재 URL(혹은 파일의 경로)
window.document	현재 창에 로드된 페이지를 표현하는 document 객체에 대한 참조
window.history	현재 창이나 탭을 통해 로드되었던 페이지들의 상세 정보를 제공하는 history 객체에 대한 참조
window.history.length	브라우저 창 또는 탭의 history 객체에 보관된 페이지의 개수
window.screen	screen 객체에 대한 참조
window.screen.width	screen 객체에 접근하여 width 속성 값을 조회(단위는 픽셀)
window.screen.height	screen 객체에 접근하여 height 속성 값을 조회(단위는 픽셀)

메서드	설명
window.alert()	메시지를 포함하는 대화상자를 출력한다.(대화상자를 닫기 위해서는 사용자가 반드시 확인 버튼을 클릭해야 한다.)
window.open()	매개변수로 지정된 URL을 표시하는 새로운 브라우저 창을 생성한다.(만일 팝업 차단 소프트웨어가 설치되어 있다면 이 기능은 올바르게 동작하지 않을 수도 있다.)
window.print()	브라우저에게 사용자가 현재 페이지를 인쇄하려 한다는 것을 알린다.(사용자가 브라우저의 사용자 인터페이스를 통해 인쇄 기능을 클릭한 것과 동일하게 동작한다.)

window 객체 view


<!DOCTYPE html&ht;
<html lang="ko"&ht;
<head&ht;
	<meta charset="UTF-8"&ht;
	<title&ht;Document</title&ht;
	<script&ht;
		var msg = "<h2&ht;브라우저 창</h2&ht;<p&ht;너비 : " + window.innerWidth + "</p&ht;";
		msg += "<p&ht;높이 : " + window.innerHeight + "</p&ht;";
		msg += "<p&ht;히스토리 : " + window.history.length + "</p&ht;";
		msg += "<h2&ht;화면</h2&ht;<p&ht;너비 : " + window.screen.width + "</p&ht;";
		msg += "<p&ht;높이 : " + window.screen.height + "</p&ht;";
		msg += "<h2&ht;브라우저</h2&ht;<p&ht;주소 : " + window.location + "</p&ht;";
		document.write(msg);
	</script&ht;
</head&ht;
<body&ht;
	
</body&ht;
</html&ht;

문서 객체 모델

문서 객체 모델(DOM : Document Object Model)은 현재 페이지의 모델을 생성합니다

document 객체 view


<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>document 객체</title>
	<script>
	var msg = "<p>페이지 제목 : " + document.title + "</p>"
	msg += "<p>페이지 주소 : " + document.URL + "</p>"
	msg += "<p>페이지 수정 : " + document.lastModified + "</p>"
	document.write(msg);
	</script>
</head>
<body>
	
</body>
</html>

전역 자바스크립트 객체 모델

전역 객체는 어떤 특정한 모델을 표현하지 않고 각기 다른 부분을 담당하는 관련 객체들의 집합입니다.

string, number, boolean, data, math, RegEx

string 객체 view


<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>string 객체</title>
	<script>
	var saying = "Home sweet home";
	var msg = "<p>길이 :" +saying.length+ "</p>"
		msg += "<p>대문자 :" +saying.toUpperCase()+ "</p>"
		msg += "<p>소문자 :" +saying.toLowerCase()+ "</p>"
		msg += "<p>문자인덱스12 :" +saying.charAt(12)+ "</p>"
		msg += "<p>'ee'첫 번째 위치 :" +saying.indexOf('ee')+ "</p>"
		msg += "<p>'e'마지막 번째 위치 :" +saying.lastIndexOf('e')+ "</p>"
		msg += "<p>인덱스 범위(8-15) :" +saying.substring(8,14)+ "</p>"
		msg += "<p>replace :" +saying.replace('me','w')+ "</p>"
		
		
	document.write(msg);
	</script>
</head>
<body>
	
</body>
</html>

number 객체 view


<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>number 객체</title>
	<script>
		var number = 10.23456;
		var msg = "<p>원래 숫자" + number + "</p>"
			msg += "<p>소수점 반올림" + number.toFixed(3); + "</p>"
			msg += "<p>소수점 반올림" + number.toPrecision(3); + "</p>"
		
		document.write(msg);
	</script>
</head>
<body>
	
</body>
</html>

math 객체 view


<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>math 객체</title>
	<script>
		var random = Math.floor((Math.random()*10))
		document.write(random);
	</script>
</head>
<body>
	
</body>
</html>

data 객체 view


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>date</title>
    <script>
        var today = new Date();
        var msg = "";
        msg += "오늘은 몇 일이니?" + today.getDate() + "<br>";
        msg += "오늘은 무슨 요일이니?" + today.getDay() + "<br>";
        msg += "오늘은 몇 년도니?" + today.getFullYear() + "<br>";
        msg += "지금은 몇 시니?" + today.getHours() + "<br>";
        msg += "지금은 몇 분이니?" + today.getMinutes() + "<br>";
        msg += "지금은 몇 초니?" + today.getMilliseconds() + "<br>";
        msg += "지금은 몇 월이니?" + today.getMonth() + "<br>";
        document.write(msg);
    </script>
</head>
<body>
    
</body>
</html>

JavaScript Reference v1.0 </doc>

자바스크립트

자바스크립트 언어의 특징

자바스크립트 기본

대문자와 소문자

주석

키워드와 식별자

변수명 규칙

변수명 조합 규칙

변수

변수view

변수의 종류

지역변수/전역변수 view

매개변수 view

변수의 유형

배열

배열 view

연산자

산술연산자

복합연산자

증감연산자

비교연산자

논리연산자

조건문

if

if view

if~else

if~else view

다중 if

다중 if view

switch

switch view

switch view

조건부 연산자

조건부 연산자 view

반복문

while

while view

100보다 작은 숫자에서 4의배수와 6의배수 출력하기 view

1~100출력(짝수:파란색, 홀수:빨간색) view

do while

do while view

for

for view

5의 배수는 파란색, 7의 배수는 빨간색, 5와7의 배수는 검은색 출력 view

for문을 이용해서 배열의 합 구하기 view

다중 for

구구단 view

테이블 view

break문과 continue문

함수

함수를 사용하는 이유 view

함수의 사용 형태

선언적함수 view

익명함수 view

매개변수가 있는 함수 view

리턴값이 있는 함수 view

객체

객체를 생성하는 방법

축약형 표기법, 객체 생성자 표기법view

객체 view

생성자 문법을 이용한 객체 view

데이터 저장 view

내장 객체

브라우저 객체 모델

브라우저 객체 모델 : window 객체

window 객체 view

문서 객체 모델

document 객체 view

전역 자바스크립트 객체 모델

string 객체 view

number 객체 view

math 객체 view

data 객체 view