Javascript 02 (연산자)

문과생애긔개발자_공부/Javascript

Javascript 02 (연산자)

animeel 2022. 6. 11. 18:48

! + tab키 눌러서 html 껍데기 불러오기

연산자 주의할 점들

증감연산자

<!DOCTYPE html>
<html lang="ko">
<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>연산자</title>
</head>
<body>
    <script>
        var num = 10;

        //증감연산자를 사용함
        alert(num++); //후위 증감연산자 ;이 끝나야 그때 증감이 됨 10이 그대로 나옴
        alert(++num); //전위 증감연산자 이미 위에서 11이 num이 되어 있고 ;가 끝나기전에 증가되므로 12가 됨
        alert(num++); //;이 끝나야 증감되기 때문에 그냥 12가 나옴

        document.write(num); //마지막 연산이 끝난 후 보여주기 때문에 13이 나옴
        
    </script>
</body>
</html>

전위 연산자와 후위 연산자 수행 시 alert에 띄워지는 값과 연산 결과가 달라 보일 수 있으므로 주의 할 것

(전위 연산자는 ;를 입력하기 전에 연산이 이뤄져서 alert창에서 바로 연산 결과를 볼 수 있고 후위 연산자는 기존 값이 보여지고 이후에 ;이 끝나고 난 뒤 연산이 이뤄지기 때문에 alert창에는 반영되지 않지만 다음 연산 수행시 변환된 값이 기초값이 되기 때문에 연산 결과에 주의가 필요하다!!)

prompt()와 document.querySelector는 입력 받을 때 사용하는데 무슨 차이가 있는지 알아봤다.

prompt()는 prompt창이 띄워지고 거기에 입력하여 값을 받는 방식이지만

document.querySelector는 화면에서 입력하는 형식

예를 들어 prompt는 alert창이 뜨고 거기에 값을 입력하면 내가 짠 코드에 맞게 연산 결과가 다시 alert으로 보인다.

document.querySelector는 js에서 입력한 함수에 따라 변수에 값이 들어가고 연산 후 결과가 화면에 나타난다.

document.querySelector()는 html 요소를 리턴하는데 (css 검색자로 #아이디, 클래스, [속성], [속성=값] 등을 찾을 수 있음)

document.querySelector("").value 는 리턴한 html 요소의 value 속성값을 의미한다

var oPrice = document.querySelector("#originalPrice").value;


    document.querySelector("#showResult").innerHTML = "상품의 원래 가격은 "+ 
    oPrice + "원이고, 할인율은 " + rate + "%입니다. " + savedPrice + "원을 절약한 " 
    + resultPrice + "원에 살 수 있습니다.";

코드 예시는 위와 같다.

html 태그 몇개 정리

<ul>
	<li> </li>
	<li> </li>
</ul>

ul = unordered list

li = list

rel 속성

relationship의 약자로 <link rel = “stylesheet” href = “/경로"> 태그의 경우 css파일과 연결해주는 역할을 한다

ref는 references의 약자이다