---
title: "JavaScript 정리 03"
date: "2019-02-07"
tags: ["JavaScript"]
status: archived
verified: false
---
---
## 연산자(Operator)
* **연산자의 우선순위는 자바와 같다.**
* **최우선**
```
(), []
```
* **단항**
* tilde(~) : 1의 보수 연산자, 비트 단항 연산자(NOT)
* - : 부호바꿈 연산자, 2의 보수 연산자
* ++ : 증가연산자
* -- : 감소 연산자
```
~, !, +, -, ++, --
```
* **산술**
* Java에선 정수/정수 = 정수
* JS에선 정수/정수 = 실수
```
+, -, *, /, %
```
* **쉬프트**
```
<<, >>, >>>
```
* **관계**
* ==, !=과 ===, !==의 차이
* **==, !=은 값만 같은지 **비교**
* **===, !==은 값과 데이터형이 모두 같은지 비교**
```
>, >=, <, <=, ==, ===, !=, !==
```
```javascript
a = "안녕";
a = 10;
b = "10";
(a == b) ? "같다" : "다르다"; // "같다"가 나옴
(a === b) ? "같다" : "다르다"; // "다르다"가 나옴
```
* **논리**
* 일반 논리 - 여러개의 관계 연산자를 묶어서 비교할 때
* 비트 논리 - 비트 연산
```javascript
// 일반 논리
&& // 전항과 후항이 모두 참일 경우 참을 반환
|| // 전항과 후항이 모두 거짓일 때만 거짓을 반환
// 비트 논리
& // AND, 상위비트와 하위비트가 모두 1인 경우 1내림
| // OR, 상위비트와 하위비트가 모두 0인 경우 0내림
^ // XOR, 상위비트와 하위비트 둘 중 하나만 1인 경우 1내림
```
* **삼항(조건 연산자)**
```
조건 ? 참반환값 : 거짓반환값
```
* **대입**
```
=
+=, -=, *=, /=, %=, <<=, >>=, >>>=, &=, |=, ^= // 연산결과로 변수의 값을 변경시킴
```
## 데이터형
* JavaScript에선 정수, 실수를 **number**로 인식
* 정수/정수 = number
* 정수 또는 실수가 나올 수 있다.
* Java에선 정수/정수 = 정수
* 수가 아닌 걸 연산하면 **NaN(Not A Number)**이 발생
* true/ false는 **boolean**
* "안녕", '안녕'은 **string**
* **object**는 HTML Tag, HTML Form Control
* 변수를 만들지 않고 사용하면 **undefined**가 발생
* 데이터형을 확인하는 함수 **typeof()**
```
typeof(변수);
```
## 제어문
* **프로그램의 순차적인 흐름을 바꾸어 주는 문장.**
* **조건문**
* Java와 다르게 **if ~ else, switch ~ case**에서 모든 형을 비교가능
* if문은 범위를 비교할 때 사용
* switch는 값이 일치할 때 사용
```javascript
if ~ else, switch ~ case
```
* **반복문**
* for는 시작과 끝을 알 때 사용
* while,(최소 0~조건까지) do ~ while(최소 1~조건까지)은 시작과 끝을 모를 때 사용
```javascript
for, while, do~while
```
* **분기문**
* break는 switch ~ case나 반복문을 빠져나갈 때 사용
* continue는 반복문의 수행을 건너뛸 때 사용
* return은 값을 반환하거나 코드의 실행을 멈추고 호출한 곳으로 돌아갈 때 사용
```javascript
break, continue, return
```
## 외부값 입력받기
* **HTML Form Control을 사용하지 않고 입력값을 받고 싶을 때 사용**
* 서비스로 사용하진 않는다.
* **개발할 때만 사용**
```javascript
var inputValue = prompt("메시지","초기값");
```
```javascript
var name = prompt("이름을 입력해주세요.", "초기값");
alert(name);
```
```javascript
var name = prompt("이름을 입력해주세요.", "초기값");
var img="img.png";
var msg="평민";
// 조건문 : 단일 if - 조건에 맞을 때에만 코드를 실행해야 할 때 사용
if(name == "이재찬"){
img="img1_1.png";
msg="반장";
}
document.write("![](../common/images/"+img+")
");
document.write(name+"은 "+msg);
```
## 숙제1
* 방향을 입력받기
* UP, DOWN, LEFT, RIGHT
* 메시지를 입력받기
* 넓이 500px, 높이 400px이면서 border가진 <div>를 만들고 화살표 방향으로 메시지를 이동시킴
```html
Insert title here
```
```javascript
function setDirection(direction) {
var msg = prompt("메시지를 입력해주세요.", "");
var htmlContent = "";
if (direction == "up") {
htmlContent = "";
} else if (direction == "down") {
htmlContent = "";
} else if (direction == "left") {
htmlContent = "";
} else if (direction == "right") {
htmlContent = "";
}
window.document.write(htmlContent);
}
var direction = prompt("방향을 입력해주세요.","UP, DOWN, LEFT, RIGHT만 입력가능합니다.");
if (direction == "UP" || direction=="up") {
direction = "up";
setDirection(direction);
} else if (direction == "DOWN" || direction == "down") {
direction = "down";
setDirection(direction);
} else if (direction == "LEFT" || direction == "left") {
direction = "left";
setDirection(direction);
} else if (direction == "RIGHT" || direction == "right") {
direction = "right";
setDirection(direction);
} else {
alert("UP, DOWN, LEFT, RIGHT 중 한가지 방향을 입력해주세요.");
}
```
## 숙제2
* Java, CSS, JavaScript, HTML 중 한개를 입력받고 입력받은 언어의 창시자의 이름, 태어난 해, 나이 정보를 box-shadow를 가진 table로 뜨도록 만드세요.
```html
Insert title here
```
