산술연산자
- 4칙 연산(+, -, *, /)과 나머지 값을 구하는 연산자(%)를 말한다.
-
주의! 문자열과 다른 데이터형을 +연산을 하면 문자열로 연결된다.
ex) var test="가나다"+23; → "가나다23"
var test2="30"+10; → "3010"
구분 연산자 의미 산술연산자 + 더하기 - 빼기 * 곱하기 / 나누기 % 나머지 값 구하기
예시
var result1=10+1; //11
var result2=10-1; //9
var result3=10*10; //100
var result4=10/2; //5
var result5=10%3; //1
var num1=10;
var num2=1;
//산술연산을 할때 숫자가들어있는 변수명으로 할수도 있다.
var result6=num1+1; //11
var result7=num1%3; //1
var result8=num1-num2; //9
//plain object나 array에 있는 특정 내용을 참조해서 연산을 할 수 있다.
var obj={first:10, second:20};
var arr=[10, 20, 30];
var result9=1+obj.first; //11
var result10=10*arr[1]; //200
대입연산자
- 특정한 상수 값이나 변수값 또는 객체를 변수에 전달하여 기억시킬때 사용하는 연산자이다.
- 대입연산자는 산술연산자 보다 늦게 읽힘.
구분 연산자 의미 대입 연산자 = 연산자를 중심으로 오른쪽 변수값을 왼쪽 변수에 대입한다. += 왼쪽 변수에 더하면서 대입한다. -= 왼쪽 변수값에서 빼면서 대입한다. *= 왼쪽 변수에 곱하면서 대입한다. /= 왼쪽 변수에 나누면서 대입한다. %= 왼쪽 변수에 나머지 값을 구하면서 대입한다.
예시
<script>
/*
3. 대입연산자
*/
var num1=100;
var num2=100;
//num2=num2+10;
num2+=10;
var num3=100;
//num3=num3-10;
num3-=10;
var num4=100;
//num4=num4*10;
num4*=10
var num5=100;
//num5=num5/10;
num5/=10;
var num6=100;
//num6=num6%3;
num5%=3;
</script>
비교연산자(관계 연산자)
- 변수나 상수의 값을 비교할 때 쓰이는 연산자로서 결과가 항상 true 또는 false인 논리값이어야한다.
- 문자열의 내용이 같은지 다른지 비교
- 숫자의 크기 비교
- 숫자가 같은지 다른지 비교
- 논리값이 같은지 다른지 비교
- 문자열의 알파벳 순서 혹은 가나다 순서 비교
구분 연산자 의미 비교 연산자 > 크다 < 작다 >= 크거나 작다 <= 작거나 같다 == 피연산자들의 값이 같다 != 피연산자들의 값이 같지 않다
예시1
<script>
/*
4. 비교 연산자
- 문자열의 내용이 같은지 다른지 비교
- 숫자의 크기 비교
- 숫자가 같은지 다른지 비교
- 논리값이 같은지 다른지 비교
- 문자열의 알파벳 순서 혹은 가나다 순서 비교
*/
//1.문자열의 내용 비교
var myName="김구라";
var isEqual=myName=="김구라"; //true
var isDifferent=myName!="해골"; //true
//2. 숫자의 크기 비교
var myNum=100;
var isBigger=myNum>50; //true
var isSmaller=myNum<200; //true
//3. 숫자가 같은지 다른지 비교
var yourNum=100;
var isNumEqual=yourNum==101; //false
var isNumDiff=yourNum!=101; //true
//4. 논리값 비교
var isRun=true;
var result=isRun==true; //true
var result2=isRun!=false; //true
//5. 알파벳, 가나다 순서
var result3="a"<"b"; //true
var result4="가">"나"; //false
</script>
예시2
논리 연산자(Boolean)
논리값(true, false)를 계산해 주는 연산자
| 구분 | 연산자 | 의미 | 설명 |
| 논리 연산자 | && | and(논리곱) | 주어진 조건들이 모두 true일 때만 true를 나타낸다. |
| || | or(논리합) | 주어진 조건들 중 하나라도 true이면 true를 나타낸다. | |
| ! | not(부정) | true는 false로 false는 true로 나타낸다. |
예시
<body>
<h1>논리 연산자 테스트</h1>
<script>
/*
2. 논리(Boolean)연산자
- 논리값(true, false)를 계산해 주는 연산자
*/
// 연산에 참여하는 boolean 값이 모두 true면 결과는 true 이다.
// 연산에 참여하는 boolean 값이 어느 하나만 false 여도 결과는 false 이다.
var result1=false&&false; //false
var result2=false&&true; //false
var result3=true&&false; //false
var result4=true&&true; //true
// 연산에 참여하는 boolean 값이 어느 하나만 true 여도 결과는 true 이다.
var result5=false||false; //false
var result6=false||true; //true
var result7=true||false; //true
var result8=true||true; //true
//boolean 값을 반전 시킨다.
var result9=!true; //false
var result10=!false; //true
</script>
</body>
예시
실수1! 전역 변수 지역변수 개념 확실하게 하기!
처음에 전역 변수로 지정해 놓아서, 값이 페이지 로딩시점에 들어왔음.
따라서 버튼을 눌렀을때 값이 들어오지 않았음.
실수2! value 값은 문자열로 들어 온다는 것 잊지 말기!
자바 스크립트는 문법구조가 헐렁하기 때문에 자동으로 숫자열로 바꿔주지만
좀 더 정확하게 처리해주기 위해서 parseFloat(); 사용해준다.
또한 java를 배울때 매우 중요함.
키가 너무 작거나 몸무게가 너무 작으면 탈 수 없는 놀이기구가 있다.
키는 150이상, 몸무게는 40이상 최소 기준이다.
키와 몸무게를 입력하고 확인하기 버튼을 누르면
해당 놀이기구를 탈수 있는지 없는지 메세지를 p요소에 출력하는 프로그래밍을 해보세요.
<body>
<h1>논리 연산자 테스트 중...</h1>
<input type="text" id="height" placeholder="키를 입력하세요"/>
<input type="text" id="weight" placeholder="몸무게를 입력하세요"/>
<button onclick="check();">놀이기구를 탈 수 있는지 확인하기</button>
<p id="console"></p>
<script>
var check=function(){
//value값은 문자열로 읽어오기 때문에 정확한 비교를 위해 숫자열로 바꿔줘야한다.
var checkHeight=document.querySelector("#height").value;
var checkWeight=document.querySelector("#weight").value;
if(checkHeight>=150&&checkWeight>=40){
document.querySelector("#console").innerText="탈 수 있습니다.";
}else{
document.querySelector("#console").innerText="탈 수 없습니다.";
}
};
</script>
</body>
증감 연산자
| 구분 | 연산자 | 의미 |
| 증감 연산자 | ++ | 1씩 증가시킨다. |
| -- | 1씩 감소시킨다. |
예시
<script>
/*
5. 증감연산자
++ -> 1씩 증가 시키기
-- -> 1씩 감소 시키긱
*/
var num=10;
// num=num+1;
// num+=1;
num++;
var num2=10;
//num2=num2-1;
//num2-=1;
num2--;
</script>
'Javascript' 카테고리의 다른 글
| Number (수치형) (0) | 2019.11.04 |
|---|---|
| Boolean type (논리형) (0) | 2019.11.04 |
| 내장객체 (Built-in) (0) | 2019.11.01 |
| Javascript 식별자(Identifier)와 데이터형(Data Type) (0) | 2019.11.01 |
| javascript (0) | 2019.10.30 |
