JavaScript 기본 문법 (변수,연산자,명령어)

1. 자바스크립트 변수 2. 자바스크립트 변수 선언 3. 자바스크립트 기본 연산자 3. 변수 형변환 4. 화면 출력 5. 메세지창 출력

 

 

🔯 자바스크립트 변수

---

⭐ 기본 변수 타입

• 대부분의 경우 자바스크립트 변수는 사용전에 미리 선언할 필요 가 없음
• 타입도 지정할 필요가 없다
• 자바스크립트 변수형은 typeof() 연산자를 이용해서 확인 가능
• ex) typeof(123) → "Number"를 반환 / typeof("123") → "String"을 반환

기본 변수 타입	변수 값	비고
Number	정수, 실수 등 숫자 값을 가짐 (내부적으로 숫자는 모두 실수로 저장됨	숫자 (Number)와 문자열 (String) 타입간에는 숫자 값에 대해 자동 형변환을 제공한다.
String	문자열 작은 따옴표 (') or 겹따옴표 (")로 지정
boolean	true 혹은 false	조건식에서 사용
undefined	undefined 만 가능
null	null 만 가능

 

 

 

🔯 자바스크립트 변수 선언

---

⭐ 변수를 사전에 선언 없이 사용하는 것이 가능

• 전역 변수로 사용할때는 미리 선언되어 있어야 함
• 변수 타입을 고려하지 않고 선언해서 사용하면 되므로 편리

 

⭐ 모든 변수 타입에 대해 let 타입으로만 선언

• 대신, 변수에 실제로 어떤 값이 저장될 때 그 값에 따라 내부적으로 변수 타입이 정해진다

 

⭐ 변수의 선언 방식

• 대소문자를 구분함

let 변수명; let 변수명 = 변수값;

 

 

 

🔯 자바스크립트 기본 연산자

---

종류	연산자	설명	비고
사칙연산	+ - * / %	더하기, 빼기, 곱하기, 나누기, 나머지	- 내부적으로 실수 값으로   변환 후 처리 - 자바 언어와 동일한   연산 우선순위
대입 연산자	+= -= *= /= %=	왼편 변수에 우측 값을 연산 후 왼편 변수에 대입
증감 연산자	++ --	기존 변수 값에 +1 혹은 -1 연산 수행
비교연산자	> < >= <=	왼편의 값이 크다, 작다 왼편의 값이 크거나 같다, 작거나 같다	결과값이 true 혹은 false이다
	== != === !==	양편이 같다, 다르다 (값만 비교) 양편의 같다, 다르다 (값과 타입 모두 비교)
논리연산자	! | | &&	논리부정 (NOT), 논리합 (OR), 논리곱 (AND) 연산

 

 

 

🔯 변수 형변환

---

🖤 문자열 타입 → 숫자 타입

⦁ 문자열 변수를 parseInt() 혹은 parseFloat() 함수에 입력

🖤 숫자 타입 → 문자열 타입

⦁ 숫자 형 변수에 toString() 메소드 이용

 

NOTE: 메소드(Method): 객체에 미리 정의되어 포함되어 있는 함수

 

 

 

🔯 화면 출력

---

document.write() : 화면출력 명령어

• document.write() 메소드로 삽입된 문자열은 모두 HTML 문서안에 삽입되어 일반 HTML 문서처럼 해석된다.
• 콘텐츠가 삽입된 HTML 문서의 내용이 화면에 출력
•   > HTML 태그를 추가할 경우에는 그 태그도 해석되어 화면에 출력 

⭐ HTML 문서는 Document라는 객체로 모델링 되어 있다

• document라는 이름으로 접근
• Document 객체의 write() 메소드

베스트셀러

순위	제목
1	컴퓨터와 IT기술의 이해[개정판-2판]
2	소셜미디어의 이해와 활용
3	멀티미디어 배움터 2.0

let title1 = ＂컴퓨터와 IT기술의 이해[개정판-2판]＂;
let title2 = ＂소셜미디어의 이해와 활용＂;
let title3 = ＂멀티미디어 배움터 2.0";
document.write("<table>");
document.write("<caption> 베스트셀러 </caption>");
document.write("<tr>");
document.write("<th> 순위 </th>");
document.write("<th> 제목 </th>");
document.write("</tr>");
document.write("<tr> <td> 1 </td> <td> " + title1 + " </td> </tr>");
document.write("<tr> <td> 2 </td> <td> " + title2 + " </td> </tr>");
document.write("<tr> <td> 3 </td> <td> " + title3 + " </td> </tr>");
document.write("</table>");

 

 

 

🔯 메세지창 출력

---

: 대화상자(dialog box)를 만들어 화면에 메시지를 출력 or 키보드로부터 입력을 받기

 

🖤 alert() : 메세지창 출력 명령어

• 사용자에게 경고사항이나 메시지를 전달
• "확인" 버튼을 클릭하지 않으면 다음 자바스크립트 문장이 실행되지 않음

🖤 confirm() : 확인 입력 받기 명령어

• 사용자에게 Yes/No 선택을 입력받기 위해 사용하는 방식
• 대화상자 내에 메시지를 표시하고 “확인”과 “취소” 버튼 표시
• 버튼을 클릭할 때까지 실행을 대기
• 확인 버튼을 누르면 true, 취소 버튼을 누르면 false를 반환

 

⦁ 메세지창 출력 1

<script type="text/javascript">
	let answer = confirm("~Welcom my blog~");
	document.write("Answer = " + answer + "<br/>");
</script>

⦁ 메세지창 출력 2

<script type="text/javascript">
	alert("첫번째 메세지 입니다.");
	alert("두번째 메세지 입니다.");
			
	console.log("첫번째 메세지 입니다.");
	console.log("두번째 메세지 입니다.");
</script>

 

🖤 prompt() : 메세지창 내에 문자열 입력받는 명령어

• 사용자로부터 키보드를 통해 문자열을 입력 받는다
• 대화상자 내에 메시지와 초기입력값이 입력 상자와 함께 표시됨
• “확인”을 누르면 입력된 문자열, “취소”를 누르면 null을 반환

⦁ prompt() 예시1

<script type="text/javascript">
	let answer = prompt("서적 제목을 입력해 주세요.", "모바일 멀티미디어");
	document.write("Answer = " + answer + "<br/>");
</script>