연산자
<!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 x = 1;
// x = -x;
// alert(x);
// ──────── 사칙연산, 나머지 연산자(%), 거듭제곱 연산자(**)
// alert(5 / 2);
// alert(5 % 2);
// alert(2**2);
// alert(2**3);
// ──────── 문자열 + 문자열 = 문자열의 집합 ────────
// ──────── 문자열 + 숫자 = 문자열 ────────
// alert('my' + 'string')
// alert('my' + 123);
// ──────── 연산자 우선순위 ────────
// ++ , --
// * , /
// + , -
// =
// ──────── 할당연산자 = 대입연산자 ────────
// var a = 1;
// var b = 2;
// a = b + 1;
// var c = 3 - a;
// alert(a);
// alert(c);
// ──────── 할당 연산자 체이닝 ────────
// var a, b, c;
// a = b = c = 100;
// 가독성 살리기
// c = 100 + 200 + 300;
// a = c;
// b = c;
// alert(a);
// alert(b);
// alert(c);
// ──────── 복합 할당 연산자 ────────
// a = a + 1 ==> a += 1
// var a = 2;
// a += 5;
// alert(a);
// a *= 2;
// alert(a);
// ──────── 증감연산자 ++, -- ────────
// var counter = 2;
// counter++;
// alert(2 * counter++ );
// counter--;
// alert(counter);
// 쉼표연산자
// var a = (1+2, 3+4);
// alert(a);
// for (a = 1, b = 3; 반복조건; 증감문)
// {
// }
// ──────── 비교연산자 (boolean) ────────
// a > b, a < b, a >= b, a == b, a === b
// 1 === '1'
// alert('1' === 1);
// ──────── 문자열 비교 ────────
// A 문자 : 65
// B 문자 : 66
// a 문자 : 97
// alert('Z' > 'A');
// alert('ABC' < 'ABD');
// ──────── 서로 다른 타입끼리 비교 ────────
// 문자열(숫자형) 연산 숫자
// alert('2' > 1);
// alert(true === 1);
// ──────── null과 undefined ────────
// alert(null === undefined);
</script>
</body>
</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>Hello</title>
</head>
<body>
<h1>배경색이 변경됩니다.</h1>
<input type="button" value="red" id="bgc" onclick="
if(document.querySelector('#bgc').value == 'red')
{
document.querySelector('body').style.backgroundColor = 'blue';
document.querySelector('body').style.color = 'white';
document.querySelector('#bgc').value = 'blue';
}
else
{
document.querySelector('body').style.backgroundColor = 'red';
document.querySelector('body').style.color = 'white';
document.querySelector('#bgc').value = 'red';
}
"
>
</body>
</html>
알고 쓰자!