개발 기록

자바스크립트[연산자] 본문

공부

자바스크립트[연산자]

청군로 2021. 3. 4. 21:07

기본 연산자

var x=10;

var y=5;

 

x+y // 15   더하기 기능

x-y // 10   뺄셈 기능

x*y // 50   곱셈 기능

x/y // 2   나누기 기능

x%y // 0   나머지를 구하는 기능

 

A=A+5; -> A+=5; //좌측의 식은 우측에 있는 식으로 표현 가능하다.

A=A-5; -> A-=5;

A=A*5; -> A*=A;

A=A/5; -> A/=5;

A=A%5; -> A%=5;

 

증감 연산자

var x=5;

x++; //6   x=x+1 과 같은 결과다 x를 1증가시키는 식

 

var x=5;

x--; //4   x=x-1 과 같은 결과, x를 1감소 시키는 식

 

비교 연산자

//왼쪽을 기준으로

A<B //A가 B보다 작냐 (미만)

A>B //A가 B보다 크냐 (초과)

A<=B //A가 B보다 작거나 같냐 (이하)

A>=B //A가 B보다 크거나 같냐 (이상)

A==B //A랑 B랑 같냐

A!=B //A랑 B가 같지 않냐

 

논리식

&& : and연산자라고 부르며 그리고 라는 의미를 갖는다.

두 개 이상의 조건이 있을 때 전부 만족해야 true 값을 갖고 아니면 false이다.

ex) A=5 일 때,

(A>4 && A<6)//A는 4보다 크고, 6보다 작다.

모든 조건을 만족하면 true지만,

(A>4 && A<5)//A는 4보다 크고, 5보다 작다.

지금처럼 하나의 조건만 만족하면 false이다.

 

|| : or이라고 부르며 또는 이라는 의미를 갖는다.

두 개 이상의 조건이 있을 때 하나라도 만족하면 true 값을 갖고 모든 조건이 만족하지 못할 때 false를 갖는다.

ex)A=5 일 때,

(A>3 || A<5) //A는 3보다 작거나 5보다 크다.

이처럼 하나의 조건이라도 만족하면, true이고,

(A>5 || A<4) //A는 5보다 크거나 4보다 작다.

이처럼 모든 조건을 만족하지 못할 때 false이다.

 

오늘은 버튼을 클릭 했을 때 이미지와 투명도를 변경하는 효과를 만들었다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    #wrapper{
        width:800px;
        height: 500px;
        margin: auto;
        margin-top: 150px;
        background: url(../image/room.jpg);
        position: relative;
    }

    #wrapper img{
        position: absolute;
        width: 40px;
        right: 80px;
        top: 350px;
    }

    #surface{
        width: 100%;
        height: 100%;
        background-color: black;
        opacity: 0.8; /*색의 투명도를 결정할 수 있다.*/
    }
    
</style>
<script>
    //스위치를 off, on 전환하기 위한 변수
    var onOff="off";
    //배경의 투명도를 설정해서 
    var light=0.8;
    var flag=true;
    
    function turn(){
        //삼항 연산자를 이용해서 변수의 값을 바꿔줬다.
        light=(flag)? 0:0.8 ;
        onOff=(flag)?"on":"off";
        document.querySelector("#wrapper img").src="../image/switch_"+onOff+".png";
        document.querySelector("#surface").style.opacity=light;
        //스위치 역할을 한다. 함수가 종료되기 전에 값을 반대로 바꿔준다.
        flag=!flag;
    }

</script>
</head>

<body>
    <div id="wrapper">
        <div id="surface"></div>
            <img src="../image/switch_off.png" onclick="turn()">
    </div>
</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

'공부' 카테고리의 다른 글

자바 스크립트[마우스 좌표 구하기]  (0) 2021.03.09
자바스크립트[삼항연산자]  (0) 2021.03.05
자바스크립트[기본 문법/버튼 이벤트]  (0) 2021.03.03
div와 span  (0) 2021.02.26
C언어 #4[구조체]  (0) 2021.01.23
'공부' Related Articles more
Comments