자바스크립트

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

자바스크립트(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언어와 비교됩니다.

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

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)

자바스크립트 토큰과 공백문자

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

자바스크립트 문자열 처리 view

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Javascript : 문자열 처리</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);
		alert(str6);
		alert(str7);
	</script>
</head>
<body>
	
</body>
</html>

자바스크립트 사용방법 view

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Javasript</title>
	<!-- 외부 파일로 로드하는 방법 -->
	<script type="text/Javasript" 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="en">
<head>
	<meta charset="UTF-8">
	<title>Document</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);
			document.write("<br><br>");
		}
		func();

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

매개변수 view

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>매개변수</title>
	<script>
		//화면에 숫자 1000을 출력하세요!!
		document.write(1000);
		document.write("<br><br>");

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

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

		//함수(func1)를 이용해서 화면에 "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) 데이터의 참(true)과 거짓(false)을 나타내는 논리값을 사용합니다.
특수값(null) null은 아무런 값이 없는 경우를 의미합니다.
특수값(undefined) undefined은 정의되지 않은 상태를 의미합니다.
심벌(symbol) 심벌은 자기 자신을 제외한 유일한 값입니다.
객체타입 객체 유형도 사용할 수 있습니다.

변수 검사 view

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Javascript</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));
		document.write("<br>");
	</script>
</head>
<body>
	
</body>
</html>

배열

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

배열 선언 view

배열 사용하는 방법
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="en">
<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>");

		//배열을 이용해서 화면에 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 arr6 = [100,200,300,400,500];
		var sum = 0;

		for(var i=0; i<arr6.length; i++){
			// sum = 100+200+300+400+500;
			// sum = arr5[0]+arr5[1]+arr5[2]+arr5[3]+arr5[4]
			// sum = arr5[i]+arr5[i]+arr5[i]+arr5[i]+arr5[i]
			sum = sum + arr6[i];
			// 0 	=  0  + 100;
			// 100 = 100 + 200;
			// 300 = 300 + 300;
			// 600 = 600 + 400;
			// 1000= 1000+ 500;
			// 1500
		}
		document.write("<br>");
		document.write(sum);
	</script>
</head>
<body>
	
</body>
</html>

배열 객체의 메서드 및 속성

종류 설명
join() 배열 객체의 데이터를 문자형 데이터로 출력합니다.
reverse() 배열 객체의 데이터를 반대로 출력합니다.
sort() 배열 객체의 데이터를 오름차순으로 출력합니다.
slice() 배열 객체의 데이터를 인덱스 구간만큼 가져옵니다.
splice() 배열 객체의 지정 데이터를 삭제하고 새 테이터를 삽입합니다.
concat() 배열 객체의 데이터 중 2개의 배열 객체를 하나로 합칩니다.
pop() 배열 객체의 데이터 중 마지막 데이터를 삭제합니다.
push() 배열 객체의 마지막 인덱스에 새 데이터를 삽입합니다.
shift() 배열 객체의 데이터 중 첫 번째 데이터를 삭제합니다.
unshift() 배열 객체의 첫 번째 인덱스에 새 데이터를 삽입합니다.
length 배열 객체의 데이터 개수를 반환합니다.

연산자

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

산술 연산자

종류 예시 설명
+ x + y 더하기
- x + y 더하기
* x * y 곱하기
/ x / y 나누기
% x % y 나머지

산술 연산자 view

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>산술 연산자</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="en">
<head>
	<meta charset="UTF-8">
	<title>복합 연산자</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="en">
<head>
	<meta charset="UTF-8">
	<title>table</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="en">
<head>
	<meta charset="UTF-8">
	<title>증감 연산자</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="en">
<head>
	<meta charset="UTF-8">
	<title>비교 연산자</title>
	<script>
		var x = 10;
		var y = 20;		//숫자
		var a = 10;
		var b = "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);		//ture
		document.write("<br>");
		document.write(x >= y);		//false
		document.write("<br>");
		document.write(x <= y);		//true
		document.write("<br>");
	</script>
</head>
<body>
	
</body>
</html>

논리 연산자

논리 연산자 표
종류 예시 설명
&& x && y 둘다 true인 경우 true를 반환합니다.
|| x || y 둘 중의 하나 이상이 true인 경우 true를 반환합니다.
! !x 반대 값을 반환합니다.

논리 연산자 view

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>논리 연산자</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 );					//ture
		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="en">
<head>
	<meta charset="UTF-8">
	<title>문자 결합 연산자</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="en">
<head>
	<meta charset="UTF-8">
	<title>적정 체중 구하기</title>
	<script>
		//적정 체중 = (본인 신장 - 100) * 0.9;

		// var userHegiht = 174; 	//키
		// var userWeight = 90;	//몸무게
		// var normal = (userHegiht - 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="en">
<head>
	<meta charset="UTF-8">
	<title>Document</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;
		
		console.log(total);
		var result =  total > 10000  ? total - 10000 + "초과되었습니다." : "돈 관리 잘했어요!";

		document.write(result);
	</script>
</head>
<body>
	
</body>
</html>

조건문

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

if문

if문 사용하는 방법
if(조건식){
    //실행 코드
}

if문 view

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</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,"<br>");
		}

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

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

		//통화량 구분하기
		var min = prompt("당신의 하루 통화량은 몇 분인가요?", "0");
		if(min > 60){
			document.write("당신은 전화를 많이쓰네요~<br>");
		}

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

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

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

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

		var useName = prompt("당신의 이름은 무엇입니다.","");
		if(useName){
			document.write(useName + "님 방갑습니다.");
		}
		//document.write(useName + "님 방갑습니다.");
		
		//if(useName) document.write(useName + "님 방갑습니다.");
	</script>
</head>
<body>
	
</body>
</html>

if ~ else문

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

if ~ else문 view

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
		//홀수 짝수 구분하기
		var num = prompt("당신이 좋아하는 숫자는?");

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

		//아이디 비밀번호 구분하기
		var userID = prompt("아이디를 입력해주세요~");
		var userPW = prompt("비밀번호를 입력해주세요~");

		if(userID == "webstoryboy" && 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문

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

if문 view

<!DOCTYPE html>

switch문

조건부(삼항) 연산자

반복문

자바스크립트는

함수

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

객체

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

내장객체

자바스크립트는

브라우저객체

자바스크립트는

문서객체

자바스크립트는

이벤트

자바스크립트는