1. 변수 선언
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>변수 선언</title>
</head>
<body>
<h1>변수 선언, 전역/지역/블록 변수</h1>
<hr>
<script>
let x;
function f(){
let y;
x = 10;
y = 20;
z = 30;
if(y==20){
let b = 400;
b++;
document.write("if 블록 내 블록변수 b = "+b+"<br>");
}
document.write("함수 f()내 지역변수 y = "+y+"<br>");
}
f();
document.write("전역 변수 x = "+x+"<br>");
document.write("전역 변수 z = "+z+"<br>");
</script>
</body>
</html>2. 리터럴 선언
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>리터럴</title>
</head>
<body>
<h1>리터럴</h1>
<hr>
<script>
let x = 015;
let y = 0x15;
let condition = true;
document.write("8진수 015는 십진수로 "+x+"<br>");
document.write("16진수 0x15는 십진수로 "+y+"<br>");
document.write("condition은 "+condition+"<br>");
document.write('문자열 : 단일 인용부호로도 표현<br>');
document.write("그녀는 \"누구세요\"라고 했습니다.");
</script>
</body>
</html>3. 산술 연산
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>산술연산</title>
</head>
<body>
<h1>산술 연산</h1>
<hr>
<script>
let x= 32;
//let total = 100+x*2/4-3;
document.write("x : "+x+"<br>");
document.write("100 + x*2/4 - 3 = " + (100+x*2/4-3)+"<br>");
document.write("x/10 = "+(x/10)+"<br>");
document.write("x%2 = "+(x%2)+"<br>");
</script>
</body>
</html>4. 대입 연산
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>대입 연산</title>
</head>
<body>
<h1>대입 연산</h1>
<hr>
<script>
let x= 3, y=3,z=3;
document.write("x = "+x+"<br>");
document.write("y = "+y+"<br>");
document.write("z = "+z+"<br>");
x +=3;
y*=3;
z%=2;
document.write("x+=3; 실행 후, +x="+x+"<br>");
document.write("y*=3; 실행 후, +y="+y+"<br>");
document.write("z%=2; 실행 후, +z="+z+"<br>");
</script>
</body>
</html>5. 비교 연산
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>비교 연산</title>
<style>
script{
border : 1px solid red;
}
</style>
</head>
<body>
<h1>비교 연산</h1>
<hr>
<script>
let x= 13, y=7;
document.write("x = "+x+", ");
document.write("y = "+y + "<br>");
document.write("x == y : "+(x==y)+ "<br>");
document.write("x != y : "+(x!=y)+ "<br>");
document.write("x >= y : "+(x>=y)+ "<br>");
document.write("x > y : "+(x>y)+ "<br>");
document.write("x <= y : "+(x<=y)+ "<br>");
document.write("x < y : "+(x<y)+ "<br>");
</script>
</body>
</html>6. 논리 연산
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>논리 연산</title>
</head>
<body>
<h1>논리 연산</h1>
<hr>
<script>
let x= true;
let y = false;
document.write("x = "+x+", ");
document.write("y = "+y+"<br>");
document.write("x && y : " + (x&&y)+"<br>");
document.write("x || y : " + (x||y)+"<br>");
document.write("!x : " + (!x)+"<br>");
document.write("<hr>")
document.write("(3>2) && (3<4) : "+((3>2) && (3<4)) + "<br>");
document.write("(3==-2) || (-1<0) : "+((3==-2) && (-1<0)) + "<br>");
</script>
</body>
</html>7. 조건 연산
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>조건 연산</title>
</head>
<body>
<h1>조건 연산</h1>
<hr>
<script>
let a= 3;
let b= 5;
document.write("a = " + a+" b = "+b+"<br>");
document.write("두 수의 차이 : "+(a>b ? a-b : b-a));
</script>
</body>
</html>'CS Study > Javascript' 카테고리의 다른 글
| 6. 이벤트 객체 (1) - 마우스 핸들링 (0) | 2022.04.08 |
|---|---|
| 5. DOM / document 객체 (0) | 2022.04.08 |
| 4. 배열과 객체 (0) | 2022.04.08 |
| 3. 함수 (0) | 2022.04.08 |
| 2. 조건문 / 반복문 (0) | 2022.04.08 |