코딩 스터디(모각코) 6일차 - 한 입 웹개발(JS)

웹 공부/javascript

코딩 스터디(모각코) 6일차 - 한 입 웹개발(JS)

윈터가든 2021. 7. 12. 23:06

✅ 오늘의 문제 : console.log( )를 통해 사칙연산을 출력해보세요

👉 예시

✅ 오늘의 문제 풀이 인증

<HTML>

<!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>javascript6</title>

    <link rel="stylesheet" href="./5.css">
    <script src="./5.js"></script>
</head>

<body>
    <div class="all">
        <img src="img/보라.jpg">
        <div class="btns">
            <button onclick="plus_click()">+</button>
            <button onclick="minus_click()">-</button>
            <button onclick="multiply_click()">*</button>
            <button onclick="divison_click()">/</button>
        </div>
    </div>
</body>

</html>

<CSS>

img{
    width: 350px;
    border-radius: 20px;
    margin-bottom: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;

}
.btns{
    
    width: 420px;
    margin: auto;
    

}



button{
    width:100px ;
    height: 50px;
    background-color: rgb(191, 163, 218);
    font-size: 30px;
    color: aliceblue;
    border: none;
    border-radius: 10px;
    cursor: pointer;
   
}

var x=1;
var y=2;
function plus_click(){
    console.log("x+y=",x+y);
}
function minus_click(){
    console.log("x-y=",x-y);
}
function multiply_click(){
    console.log("x*y=",x*y);
}
function divison_click(){
    console.log("x/y=",x/y);
}

<결과화면>

✅ 오늘의 한마디

<javascript 사칙연산>

연산자: (+ - * / %) 
설명 :
+ ➡ 더하기(ex:2+1=3)
- ➡ 빼기  (ex:2-1=1)
* ➡ 곱하기(ex:2*1=2)
/ ➡ 나누기(ex:2/1=2)
% ➡ 나머지(ex:2%1=0)

<javascript 문자열 결합 연산자>

설명: 문자 끼리 결합할 수 있는 연산자 입니다.

"가나다" + "ABC" ➡ "가나다ABC"
 문자 + 문자 ➡ 문자
 문자 + 숫자 ➡ 문자
 숫자 + 문자 ➡ 문자
 숫자 + 숫자 ➡ 숫자 (덧셈)

<javascript 비교 연산자>

연산자:(> < >= <= == === != !==)
설명:
>   ➡ ~ 보다 큼, 좌가 우보다 크면 참 ex)1 > 2 결과:false
<   ➡ ~ 보다 작음, 좌가 우보다 작으면 참 ex)1 < 2 결과:true
>=  ➡ ~ 보다 크거나 같다, 좌가 우보다 크거나 같으면 참 ex)1 >= 2 결과:false
<=  ➡ ~ 보다 작거나 같다, 좌가 우보다 작거나 같으면 참 ex)1 <= 2 결과:true
==  ➡ 같다, 같으면 참 ex)1 == 1 결과:true
=== ➡ 엄격히 같다, 같으면 참 ex)'1' === 1 결과:false 
!=  ➡ 다르다, 다르면 참 ex)1 != 1 결과:false
!== ➡ 엄격히 다르다, 다르면 참 ex)1 !== '1' 결과:true

<jacascript 대입 연산자>

연산자:(= += -= *= /= %=)
설명:
=  ➡ 대입 연산 x = y
+= ➡ 덧셈 대입 x = x + y
-= ➡ 뺄셈 대입 x = x - y
*= ➡ 곱셈 대입 x = x * y
/= ➡ 나눗셈 대입 x = x / y
%= ➡ 나머지 대입 x = x % y

<javascript 증감 연산자>

연산자: (++ --)
설명:
++ ➡ 증가연산자, 피연산자에 1을 더한다 
ex) a++ 결과 : a = a + 1

-- ➡ 감소연산자, 피연산자에게 1을 뺀다
ex) a-- 결과 : a = a - 1

저작자표시 (새창열림)