자바스크립트는 웹 브라우저에서 동작되는 스크립트 언어이다.

자바스크립트(영어: JavaScript)는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 사이드 네트워크 프로그래밍에도 사용되고 있다. 자바스크립트는 본래 넷스케이프 커뮤니케이션즈 코퍼레이션의 브렌던 아이크(Brendan Eich)가 처음에는 모카(Mocha)라는 이름으로, 나중에는 라이브스크립트(LiveScript)라는 이름으로 개발하였으며, 최종적으로 자바스크립트가 되었다. 자바스크립트가 썬 마이크로시스템즈의 자바와 구문이 유사한 점도 있지만, 이는 사실 두 언어 모두 C 언어의 기본 구문에 바탕을 뒀기 때문이고, 자바와 자바스크립트는 직접적인 관련성이 없다. 이름과 구문 외에는 자바보다 셀프나 스킴과 유사성이 많다. 2013년 1월 기준으로, 가장 최근 버전은 자바스크립트 1.8.5이고[3], 파이어폭스 3에서 지원된다. 표준 ECMA-262 3판에 대응하는 자바스크립트 버전은 1.5이다. ECMA스크립트는 쉽게 말해 자바스크립트의 표준화된 버전이다. 모질라 1.8 베타 1이 나오면서 XML에 대응하는 확장 언어인 E4X(ECMA-357)를 부분 지원하게 되었다. 자바스크립트는 브라우저마다 지원되는 버전이 다르다. (출처 : 위키백과)

자바스크립트는 인터프리터 언어입니다.

자바스크립트 코드는 작성된 순서대로 구문을 분석합니다. 만약 코드에 문제가 생기면 에러가 발생한 다음 줄 부터는 구문을 분석하지 않습니다.

자바스크립트는 클라이언트 스크립트 언어입니다.

자바스크립트는 서버에서 실행되지않고, 사용자 컴퓨터에서 실행되는 클라이언트 언어입니다. 서버에서 운영되는 언어는 PHP, JSP, ASP언어와 비교됩니다.

자바스크립트는 객체(object)기반 언어입니다.

C++와 JAVA와 같이 클래스를 이용하여 객체를 생성하는 클래스 기반 객체 지향 언어 입니다. 자바스크립트는 클래스가 아닌 프로토타입을 상속하는 프로토타입 기반 객체 지향 언어입니다.

자바스크립트는 다양한 라이브러리가 지원되는 언어입니다.

자바스크립트를 이용한 언어에는 제이쿼리(jQuery), 앵귤러(Angular)js, 리액트(React)js, 노드(Node)js 등이 있습니다. 이를 통해 다양한 기능을 쉽게 구현할 수 있으며, 뛰어난 효과를 만들어 낼 수 있습니다.

자바스크립트는 동적 타입의 언어이며 클로저를 정의합니다.

C++와 JAVA는 실행되기 전에 변수 타입을 정하는 언어이며, 자바스크립트는 변수 타입이 없는 동적 타입의 언어이며, 자바스크립트 함수는 클로저(Closure)를 정합니다.

ECMAScript

자바스크립트는 ECMA-262 문서로 공개되고 있으며 핵심기술은 ECMAScript로 규정되어 있습니다. ECMAScript는 ECMA(Ecma International)라는 조직이 표준화 작업을 하고 있으며, 현재 최신버전은 ECMAScript8입니다.

클라이언트 언어 자바스크립트

자바스크립트는 웹 브라우저에 작동되는 클라이언트 언어입니다. 자바스크립트는 ECMAScript가 규정한 코어 언어와 웹 브라우저로 구성되어 있습니다.

  • Window 인터페이스 : 자바스크립트는 브라우저를 조작하는 기능을 제공
  • DOM : 자바스크립트는 HTML 문서를 조작하는 기능을 제공
  • XMLHttpRequest : 자바스크립트는 서버와 비동기로 통신하는 기능

서버 언어 자바스크립트

웹 서버에서 동작되는 자바스크립트를 서버 측 자바스크립트라고 합니다. 웹 서버를 구현 하는데 Perl, PHP, Python, Ruby 등의 프로그래밍 언어가 널리 사용되고 있으며, 최근에는 서버 측 언어로 자바스크립트를 많이 사용하고 있습니다.

  • Node.js : 구글이 개발한 자바스크립트 실행 환경
  • Rhino : 모질라가 개발한 자바스크립트 실행 환경
  • Aptana Jaxer : 압타나가 개발한 자바스크립트 실행 환경

자바스크립트 주석은 일반적으로 특정 코드에 대한 설명을 입력하거나 특정한 부분의 코드가 실행되지 않도록 사용합니다. 주석표시는 프로그램에 영향을 미치지 않습니다.

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

자바스크립트는 대문자와 소문자를 구별합니다. console와 Console은 각각 다른 문자열로 처리됩니다.

날짜 객체 생성 : New date(); (X)
날짜 객체 생성 : New Date(); (O)

프로그램을 구성하는 최소 단위를 토큰(어휘)라고 합니다. 자바스크립트 언어는 프로그램을 실행하기 전에 토큰으로 분해합니다. 이러한 동작을 어휘 분석이라고 하며, 이러한 분석을 통해 올바른 프로그램인지 판단합니다. 이 동작을 구문 분석(파싱)이라고 합니다. 토큰은 공백을 넣지 않고 나열하기만 해서는 토큰을 판단 할 수 없습니다. 그래서 프로그래밍 언어에서는 토큰과 토큰 사이에 공백문자를 통해 구분합니다. 이 때 토큰과 토큰 사이의 공백 문자를 여러 개 입력해도 공백문자를 하나만 인식합니다.

자바스크립트에서는 문자열을 구분하기 위해서는 작은 따옴표와 큰 따옴표를 사용합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>javascript02 : 문자열 처리</title>
	<script>
		var str1 = "javascript";				// 큰 따옴표
		var str2 = 'javascript';				// 작은 따옴표
		var str3 = "hello 'javascript'";		// 큰 따옴표 안에 작은 따옴표
		var str4 = 'hello "javascript"';		// 작은 따옴표 안에 큰 따옴표
		var str5 = "hello\njavascript";			// 줄 바꿈
		var str6 = "hello\'javascript\'";		// 작은 따옴표
		var str7 = "hello\"javascript\"";		// 큰 따옴표

		document.write(str1);
		document.write("<br>");
		document.write(str2);
		document.write("<br>");
		document.write(str3);
		document.write("<br>");
		document.write(str4);
		document.write("<br>");
		alert(str5);
		document.write("<br>");
		alert(str6);
		document.write("<br>");
		alert(str7);
	</script>
</head>
<body>
	
</body>
</html>

자바스크립트를 사용하는 방법은 외부파일, 스크립트 태그, 태그에 직접 기술하는 방법이 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>Javascript</title>
	<!-- 외부파일로 로드하는 방법 -->
	<script type="text/Javascript" src="경로"></script>

	<!-- script 태그 사이에 기술하는 방법 -->
	<script>
		document.write("hello");
	</script>
</head>
<body>
	<!-- 태그에 직접 기술하는 방법 -->
	<input type="button" onclick="alert('hello')">
</body>
</html>

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

변수는 변하는 수를 의미하며, 사용 가능 범위에 전역변수, 지역변수, 매개변수, 멤버변수로 나눌 수 있으며, 변수는 식별자로 구분해야 하기 때문에 변수에는 숫자, 문자열, 불린, 함수, 객체 등을 사용할 수 있습니다.

변수 사용하는 방법
var 변수명;
var 변수명 = 값;
예약어 : 자바스크립트에서 정해진 단어, 즉 자바스크리브 문법을 규정짓기 위해 자바스크립트에서 사용하는 특수한 키워드입니다.
식별자 : 사용자가 임의로 사용하는 단어 즉 변수나 함수를 사용할 때 정의하는 키워드입니다.

식별자를 만드는 규칙

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

단어를 조합할 때 규칙

  • 언더스코어 노테이션 (스네이크 표기법) : color_top와 같이 중간에 '_'을 사용합니다.
  • 캐멀 노테이션 (로어 캐멀 표기법) : colorTop와 같이 두번째 단어의 첫 글자를 대문자로 사용합니다.
  • 파스칼 노테이션 (어퍼 캐멀 표기법) : ColorTop와 같이 모든 단어의 첫 글자를 대문자로 사용합니다.
지역변수 : 특정 범위 안에서만 사용하는 변수
전역변수 : 모든 영역 안에서 사용하는 변수
매개변수 (파라미터) : 함수 외부에서 함수 내부로 데이터를 전달하기 위한 변수
멤버변수 (프로퍼티) : 클래스 내부에서 만들어지면 주로 객체에서 사용하는 변수

지역변수/전역변수 View

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>Javascript03</title>
	<script>
		var x1 = 1000;			// (전역)변수 x1에 숫자를 1000을 저장
		var x2 = 2000;			// (전역)변수 x2에 숫자를 2000을 저장
		var x3;					// (전역)변수 x3을 선언

		x1 = 100;				// (전역)변수 x1에 숫자를 1000에서 100으로 변경
		x2 = 200;				// (전역)변수 x2에 숫자를 2000에서 200으로 변경

		function func(){
			var x1 = 3000;		// (지역)변수 x1에 숫자를 3000을 저장
			var x2 = 4000;		// (지역)변수 x2에 숫자를 4000을 저장

			x1 = 300;			// (지역)변수 x1에 숫자를 3000에서 300으로 변경
			x2 = 400;			// (지역)변수 x2에 숫자를 4000에서 400으로 변경
			x3 = 500;			// (전역)변수 x3에 숫자를 500을 저장

			document.write("함수 안 <br>");
			document.write(x1);
			document.write("<br>");
			document.write(x2);
			document.write("<br>");
			document.write(x3);
		}
		func();

		document.write("<br><br>함수 밖 <br>");
		document.write(x1);
		document.write("<br>");
		document.write(x2);
	</script>
</head>
<body>
	
</body>
</html>

매개변수 View

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>매개변수</title>
	<script>
		// 화면에 숫자 1000을 출력하세요!!

		document.write(1000);
		document.write("<br><br>");

		// 화면에 문자 javascript를 출력하세요!!
		document.write("javascript");
		document.write("<br><br>");

		//변수에 문자열 "html"을 저장하고 출력하세요!!
		var x1 = "html";
		document.write(x1);
		document.write("<br><br>");

		// 함수를 이용해서 화면에 "CSS"를 출력하세요!!
		function func1(){
			document.write("CSS");
			document.write("<br><br>");
		}
		func1();

		// 매개변수를 이용해서 화면에 "jQuery"를 출력하세요!!
		function func2(str){
			document.write(str);
			document.write("<br><br>");
		}
		func2("jQuery");

		// 매개변수를 이용해서 화면에 "javascript jQuery"를 출력하세요!!
		function func3(str1,str2){
			document.write(str1, " " + str2);
			document.write("<br><br>");
		}
		func3("javascript","jQuery");
	</script>
</head>
<body>
	
</body>
</html>
변수 유형의 데이터 타입 표
데이터타입 원시타입 숫자(Number) 숫자에는 정수와 실수를 구분하지 않고 사용합니다.
문자열(String) 문자열은 문자를 사용하는 집합입니다.
논리값(Boolean) 논리값은 참과 거짓을 표현하기 위해 사용하는 값입니다.
특수값(null) null은 아무런 값이 없는 경우를 의미합니다.
특수값(undefined) undefined는 정의되지 않은 상태를 의미합니다.
심벌(symbol) 심벌은 자기 자신을 제외한 유일한 값입니다.
객체타입 객체 유형도 사용할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>Javascript02</title>
	<script>
		var x1 = 30;				// 숫자 저장
		var x2 = "30";				// 문자열 저장
		var x3 = "javascript";		// 문자열 저장
		var x4;						// 선언
		var x5 = function(){};		// 함수 저장
		var x6 = {};				//객체 저장
		var x7 = Symbol();			// 심볼 저장

		document.write(typeof (x1));
		document.write("<br>");
		document.write(typeof (x2));
		document.write("<br>");
		document.write(typeof (x3));
		document.write("<br>");
		document.write(typeof (x4));
		document.write("<br>");
		document.write(typeof (x5));
		document.write("<br>");
		document.write(typeof (x6));
		document.write("<br>");
		document.write(typeof (x7));
	</script>
</head>
<body>
	
</body>
</html>

문자형

문자형(String) 데이터는 다음과 같이 문자나 숫자를 큰따옴표("")또는 작은따옴표('')로 감싸고 있습니다. 또한 문자형 데이터에 HTML 태그를 포함하여 출력하면 태그로 인식합니다.

기본형 : var 변수 = "사용할 문자나 숫자";
var s = "javascript";
var num = "100";
var tag = "<h1> String </h1>";

숫자형

숫자형(Number) 데이터는 단어 의미 그대로 숫자를 의미합니다. 만약 "100"과 같이 큰 따옴표가 숫자를 감싸고 있다면 숫자가 아닌 문자형 데이터입니다. 이 경우에는 Number("100")을 이용하면 문자형 데이터를 숫자형 데이터로 바꿀 수 있습니다.

기본형 : var 변수 = 숫자; 또는 Number("문자형 숫자");
var s = 100;
var t = Number("500"); //"500" -> 500

논리형

논리형(Boolean) 데이터는 true(참) 또는 false(거짓)가 있습니다. 이 데이터는 주로 2개의 데이터를 비교할 때 나오는 결과입니다. 예를 들어 '100보다 10이 크다'는 잘못된 비교이므로 false라는 결과를 반환하게 됩니다. 논리형 데이터의 기본형은 다음과 같습니다. 예제

기본형 : var 변수 = true or false; 또는 Boolean(데이터);
var s = true;
var t = 10 >= 100; //false
var k = Boolean("hello"); //true

var m = Boolean(0) //false
var k = Boolean("홍길동") //true
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>boolean</title>
</head>
<script>
	// 논리형 값, 비교 연산자, Boolean 메서드를 사용해 변수에 논리형 데이터를 저장한 후 문서에 출력하는 예제
	var a = true;
	var b = false;
	var c = 10 > 5;				// true
	var d = Boolean(null); 		// false

	document.write(a, "<br>");
	document.write(b, "<br>");
	document.write(c, "<br>");
	document.write(d, "<br>");
</script>
<body>
	
</body>
</html>

null & undefined 데이터

undefined는 다음과 같이 변수 s에 값이 등록되기 전의 기본값이고, null은 변수에 저장된 값이 null인 경우를 가리킵니다. null은 변수에 저장된 데이터를 비우고자 할 때 사용하는 값입니다.

기본형
var s; //undefined
var t = hello; t = null;

typeof

typeof는 지정한 제이터 또는 변수에 저장된 자료형을 알고 싶을 때 사용합니다. 기본형은 다음과 같습니다. 예제

기본형
typeof 변수 또는 데이터;
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>typeof</title>
</head>
<script>
	// typeof를 이용하여 변수에 저장된 자료형을 알아내는 예제
	var num = 100;
	var str = "자바스크립트";

	document.write(typeof num, "<br>");		// number
	document.write(typeof str);				// string
</script>
<body>
	
</body>
</html>

배열은 여러개의 데이터를 순차적으로 저장하는 저장소입니다.

배열 사용하는 방법
var 변수명 = [값1, 값2, 값3.....]
배열 사용하는 방식1
var arr1 = new Array();
arr1[0] = 100;
arr1[1] = 200;
배열 사용하는 방식2
var arr2 = new Array(100, 200);
배열 사용하는 방식3
var arr3 = [100,200];
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>javascript06 : 배열</title>
	<script>
		// 변수 x = 100; 변수 y = 100 저장한 다음 출력하세요!!
		var x = 100;
		var y = 200;

		document.write(x);
		document.write("<br>");
		document.write(y);
		document.write("<br><br>");

		// 배열을 이용해서 화면에 100과 200을 출력하세요!!
		var arr1 = new Array();
		arr1[0] = 100;			// 첫 번째 배열 저장소에 100을 저장
		arr1[1] = 200;			// 두 번째 배열 저장소에 200을 저장

		document.write(arr1[0]);
		document.write("<br>");
		document.write(arr1[1]);
		document.write("<br><br>");

		// 배열을 선언과 동시에 초기화하여 100과 200을 출력하세요!!
		var arr2 = new Array(100, 200);

		document.write(arr2[0]);
		document.write("<br>");
		document.write(arr2[1]);
		document.write("<br><br>");

		//배열을 선언하지 않고 100과 200을 출력하세요!!
		var arr3 = [100,200];

		document.write(arr3[0]);
		document.write("<br>");
		document.write(arr3[1]);
		document.write("<br><br>");

		// 배열의 크기 구하기
		var arr4 = [100,200,300,400,500];
		document.write(arr4.length);
		document.write("<br><br>");

		// 배열 가져오기
		var arr5 = [100,200,300,400,500];

		for(var i=0; i<(arr5.length; i++){
			document.write(arr5[i], "<br>");
		}

		// 배열의 합 구하기
		var arr5 = [100,200,300,400,500];
		var sum = 0;

		for(var i = 0; i<arr5.length; i++){
			// sum = arr5[0]+arr5[1]+arr5[2]+arr5[3]+arr5[4]
			sum = sum + arr5[i];
		}
		document.write(sum);

	</script>
</head>
<body>
	
</body>
</html>
배열 객체의 메서드 및 속성표
종류 설명
join(연결문자) 배열 객체의 데이터를 연결 문자 기준으로 1개의 문자형 데이터로 반환합니다.
reverse() 배열 객체의 데이터 순서를 거꾸로 바꾼 후 반환합니다.
sort() 배열 객체의 데이터를 오름차순으로 정렬합니다.
slice(index1, index2) 배열 객체의 데이터 중 원하는 인덱스 구간만큼 잘라서 배열 객체로 가져옵니다.
slipce() 배열 객체의 지정 데이터를 삭제하고 그 구간에 새 데이터를 삽입할 수 있습니다.
concat() 2개의 배열 객체를 하나로 결합합니다.
pop() 배열에 저장된 데이터 중 마지막 인덱스에 저장된 데이터를 삭제합니다.
push(new data) 배열 객체의 마지막 인덱스에 새 데이터를 삽입합니다.
shift() 배열 객체에 저장된 데이터 중 첫 번째 인덱스에 저장된 데이터를 삭제합니다.
unshift(new data) 배열 객체의 가장 앞의 인덱스에 새 데이터를 삽입합니다.
length 배열에 저장된 총 데이터의 개수를 반환합니다.

자바스크립트는 다양한 연산자를 통해 계산 작업을 할 수 있습니다.

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

산술 연산자 View

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>javascript07 : 산술 연산자</title>
	<script>
		var x = 100;
		var y = 200;

		document.write(x + y);		// 300
		document.write("<br>");
		document.write(x - y);		// -100
		document.write("<br>");
		document.write(x * y);		// 20000
		document.write("<br>");
		document.write(x / y);		// 0.5
		document.write("<br>");
		document.write(x % y);		// 100
		document.write("<br>");
	</script>
</head>
<body>
	
</body>
</html>
종류 예시 설명
+= 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

복합 연산자 View

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>javascript08 : 복합 연산자</title>
	<script>
		var x = 10;
		var y = 20;

		// x = x + 10;
		// x += 10;

		// y = y - 10;
		// y -= 10;

		// x = x * 10;
		// x *= 10;

		// y = y / 10;
		// y /= 10;

		// x = x % 10;
		// x %= 10;
		
		document.write(x);
	</script>
</head>
<body>
	
</body>
</html>

복합 연산자를 이용한 테이블 만들기View

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>javascript09 : 복합 연산자를 이용한 테이블 만들기</title>
	<script>
		var table = "<table border='1'>";
		table += "<tr>";
		table += "<td>1</td><td>2</td><td>3</td>";
		table += "</tr>";
		table += "<table>";

		document.write(table);

		console.log(table);
	</script>
</head>
<body>
	<!--
	<table border="1">
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
		</tr>
	</table>
	-->
</body>
</html>
종류 예시 설명
++ x = x + 1 x++ 또는 ++x
-- x = x - 1 x-- 또는 --x

증감 연산자 View

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>javascript10 : 증감 연산자</title>
	<script>
		var num1 = 10;
		var num2 = 20;
		var result;

		num1--;		// 9

		document.write(num1, "<br>");

		num1++;		// 10
		document.write(num1, "<br>");

		result = num2++;		// 20, 21
		document.write(result, "<br>");
		document.write(num2, "<br>");

		result = ++num2;		// 22, 22
		document.write(result, "<br>");
		document.write(num2, "<br>");
	</script>
</head>
<body>
	
</body>
</html>

비교 연산자는 비교할 때 사용하며, 결과 값은 true(참) 또는 false(거짓)로 반환합니다.

종류 예시 설명
== x == y 좌변과 우변이 같다.
=== x === y 좌변과 우변이 같고, 데이터형(자료형)도 같다.
!= x != y 좌변과 우변이 다르다.
!== x !== y 좌변과 우변이 다르고, 데이터형도 다르다.
> x > y 좌변이 우변보다 크다.
< x < y 좌변이 우변보다 작다.
>= x >= y 좌변이 우변보다 크거나 같다.
<= x <= y 좌변이 우변보다 작거나 같다.

비교 연산자 View

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>javascript11 : 비교 연산자</title>
	<script>
		var x = 10;
		var y = 20;		// 숫자 20
		var a = 10;
		var b = "20";	// 문자열 20

		document.write(x == y);		// false
		document.write("<br>");		
		document.write(x == a);		// true
		document.write("<br>");		
		document.write(y == b);		// true
		document.write("<br>");		
		document.write(y === b);	// false
		document.write("<br>");
		document.write(x != a);		// false
		document.write("<br>");
		document.write(x !== a);	// false
		document.write("<br>");
		document.write(x > y);		// false
		document.write("<br>");
		document.write(x < y);		// true
		document.write("<br>");
		document.write(x >= y);		// false
		document.write("<br>");
		document.write(x <= y);		// true
	</script>
</head>
<body>
	
</body>
</html>
종류 예시 설명
&& x && y 둘 다 ture인 경우 true를 반환합니다.
|| x || y 둘 중에 하나 이상이 ture인 경우 true를 반환합니다.
! !x 반대 값을 반환합니다.

논리 연산자 View

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>javascript12 : 논리 연산자</title>
	<script>
		var a = 10;
		var b = 20;

		document.write( false || false );		// false
		document.write("<br>");
		document.write( false || true );		// true
		document.write("<br>");
		document.write( true || true );			// true
		document.write("<br>");

		document.write( false && false );		// false
		document.write("<br>");
		document.write( false && true );		// false
		document.write("<br>");
		document.write( true && true );			// true
		document.write("<br>");

		document.write( !true );								// false
		document.write("<br>");
		document.write( !false );								// true
		document.write("<br>");

		document.write( a > b && a < b );						// false
		document.write("<br>");
		document.write( a > b && a < b && a >= b );				// false
		document.write("<br>");
		document.write( a > 200 || 50 < b );					// false
		document.write("<br>");
		document.write( !(a > 200));							// true
		document.write("<br>");
	</script>
</head>
<body>
	
</body>
</html>

문자 결합 연산자 View

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>javascript13 : 문자 결합 연산자</title>
	<script>
		var x1 = 100;				// 숫자(number)
		var x2 = "javascript";		// 문자(string)
		var x3 = "100";				// 문자(string)
		var x4 = "200";				// 문자(string)

		document.write(typeof (x1));
		document.write("<br>");	
		document.write(x1 + 100);		// 숫자 + 숫자
		document.write("<br>");	
		document.write(x1 + x2);		// 숫자 + 문자
		document.write("<br>");	
		document.write(x3 + x4);		// 문자 + 문자
		document.write("<br>");	
		document.write(x1 + true);		// 문자 + 불린
		document.write("<br>");	
		document.write(x1 + null);		// 문자 + 특수값
		document.write("<br>");	
		document.write(true + true);	// 불린 + 불린
		document.write("<br>");	
		document.write(true + false);	// 불린 + 불린
		document.write("<br>");	
		document.write(true + null);	// 불린 + 특수값
		document.write("<br>");	

		x1 = "" + x1;	// 숫자를 문자열로 형 변환
		document.write(x1);
		document.write("<br>");
		document.write(typeof (x1));
	</script>
</head>
<body>
	
</body>
</html>
우선순위 연산자 설명
1 괄호/대괄호 ()[]
2 단항 연산자 !,++,--
3 곱셈/나눗셈 연산자 *,/,%
4 덧셈/뺄셈 연산자 +,-
5 비교 연산자 >,>=,<,<=
6 비교 연산자 ==,===,!=,!==
7 논리 곱 연산자 &&
8 논리 합 연산자 ||
9 대입(복합 대입) 연산자 =,+=,-=,*=,/=,%=
10 쉼표 ,

적정 체중 만들기 View

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>javascript14 : 적정 체중 구하기</title>
	<script>
		// 적정 체중 = (본인 신장 - 100) * 0.9;

		// var userHeight = 162;		// 키
		// var userWeight = 49;			// 몸무게
		// var normal = (userHeight - 100) * 0.9;


		var name = prompt("당신의 이름은?", "");
		var height = prompt("당신의 키는?", "0");
		var weight = prompt("당신의 몸무게는?", "0");

		var normal = (height - 100) * 0.9;
		var result = weight >= normal - 5 && weight <= normal + 5;
		// console.log(result);
		result = result ? "적정 체중입니다." : "적정 체중이 아닙니다.";
		document.write(name + "님은 " + result);

	</script>
</head>
<body>
	
</body>
</html>

지출 내역 만들기 View

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>test1</title>
	<script>
		// var price1 = 3000;
		// var price2 = 6000;
		// var price3 = 3000;

		// var total = price1 + price2 + price3;
		// var result = total > 10000 ? "초과되었습니다." : "돈 관리 잘했어요!";

		var price1 = prompt("당신의 교통비는?");
		var price2 = prompt("당신의 음료비는?");
		var price3 = prompt("당신의 식비는?");

		price1 = Number(price1);		// 형 변환(숫자로)
		price2 = Number(price2);
		price3 = Number(price3);

		var total = price1 + price2 + price3;
		var result = total > 10000 ? total - 10000 + "초과되었습니다." : "돈 관리 잘했어요!";

		document.write(result);

	</script>
</head>
<body>
	
</body>
</html>

조건문은 조건식에 따라 참(true)인지, 거짓(false)인지에 따라 자바스크립트 코드를 제어하는 제어문입니다.

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

if문 View

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>javascript16 : if문</title>
	<script>
		var x = 100;		// 변수 x에 숫자 100을 저장

		if(x > 200){		// 변수 x가 숫자 200보다 크면 실행(true)
			// 실행 소스
			document.write(x);
		}

		if(x < 200){		// 변수 x가 숫자 200보다 작으면 실행(true)
			// 실행 소스
			document.write(x);
			document.write("<br>");
		}

		if(true){
			document.write(x);
		}

		if(false){
			document.write(x);
		}

		var min = prompt("당신의 하루 통화량은 몇 분인가요?", "0");
		if(min > 60) {
			document.write("많이 사용하는 편이네요", "<br>");
		}

		// 짝수 구분하기
		var num = window.prompt("숫자를 입력해 주세요!!", "0");

		if(num % 2 == 0){
			document.write("당신이 입력한 숫자는 짝수입니다.");
			document.write("<br>");

		}

		// 조건식에 논리형 데이터가 아닌 다른 형이 오는 경우
		// 0, null, ""(빈 문자), undefined --> true
		var y = 100;

		if(y){
			document.write(y, "<br>");
		}

		var userName = prompt("당신의 이름은 무엇입니다.", "");
		if(userName){
			document.write(userName + "님 반갑습니다.");
		}
		// document.write(userName + "님 반갑습니다.");

		// if(userName) document.write(userName + "님 반갑습니다.");
	</script>
</head>
<body>
	
</body>
</html>
if(조건식){
  //참(true)일 때 실행 코드
} else {
  //거짓(false)일 때 실행코드
}

if ~ else문 View

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>javascript17 : if ~ else문</title>
	<script>
		var num = prompt("당신이 좋아하는 숫자는?");

		if(num % 2 == 0){
			document.write("당신이 좋아하는 숫자는 짝수입니다.<br>");
		} else {
			document.write("당신이 좋아하는 숫자는 홀수입니다.<br>");
		}

		var userID = prompt("아이디를 입력해주세요!");
		var userPW = prompt("비밀번호를 입력해주세요!");

		if(userID === "hyunjiZzang" && userPW === "1234" ){
			document.write("환영합니다!<br>");
		} else {
			document.write("아이디 또는 비밀번호가 틀렸습니다!<br>");
		}

		// 확인하기
		var result = confirm("정말로 회원을 탈퇴하시겠습니까?");

		if(result){
			document.write("탈퇴 처리되었습니다.");
		} else {
			document.write("탈퇴 취소되었습니다.");
		}
	</script>
</head>
<body>
	
</body>
</html>
if(조건식){
  //참(true)일 때 실행 코드
} else if {
  //앞 조건이 거짓(false)일 때 실행코드
} else if {
  //앞 조건이 거짓(false)일 때 실행코드
} else {
  //앞의 모든 조건이 거짓(false)일 때 실행코드
}

다중if문 View

switch문 View

조건부(삼항) 연산자 View

자바스크립트는

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

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

자바스크립트는

자바스크립트는

자바스크립트는

자바스크립트는