728x90
본 포스팅은 학교 수업을 듣고 정리한 내용입니다.
자바 스크립트 식과 연산자
산술 연산자
5가지 : 더하기(+), 빼기(-), 곱하기(*), 나누기(/), 나머지(%)
let x = 32;
let total = 100 + x*2/4 - 3; // total은 113
연산의 결과는 항상 실수이다.
let div = 32/10; // div = 3.2
산술 연산 실습 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>산술 연산</title>
</head>
<body>
<h3>산술 연산</h3>
<hr>
<script>
let x = 32;
let total = 100 + x*2/4 - 3;
let div = x/10;
let mod = x%2;
document.write("x : " + x + "<br><br>");
document.write("100 + x*2/4 - 3 = " + total + "<br>");
document.write("x%2 = " + mod + "<br>");
</script>
</body>
</html>
증감 연산자
| 연산자 | 내용 | 연산자 | 내용 |
| a++ | a를 1증가하고 증가 전의 값 반환 | ++a | a를 1증가하고 증가된 값 반환 |
| a-- | a를 1감소하고 감소 전의 값 반환 | --a | a를 1감소하고 감소된 값 반환 |
대입 연산자
오른쪽 식의 결과를 왼쪽 변수에 대입
| 연산자 | 내용 | 연산자 | 내용 |
| a = b | b값을 a에 대입 | a &= b | a = a & b와 동일 |
| a += b | a = a + b와 동일 | a ^= b | a = a ^ b와 동일 |
| a -= b | a = a - b와 동일 | a |= b | a = a | b와 동일 |
| a *= b | a = a * b와 동일 | a <<= b | a = a << b와 동일 |
| a /= b | a = a / b와 동일 | a >>= b | a = a >> b와 동일 |
| a %= b | a = a % b와 동일 | a >>>= b | a = a >>> b와 동일 |
대입 연산자 실습 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>대입 연산</title>
</head>
<body>
<h3>대입 연산</h3>
<hr>
<script>
let x = 3, y = 3, z = 3;
document.write("x = " + x + ", y = " + y);
document.write(", z = " + z + "<br><br>");
x += 3;
y *= 3;
z %= 2;
document.write("x += 3 실행후: " + x + "<br>");
document.write("y *= 3 실행후: " + y + "<br>");
document.write("z %= 2 실행후: " + z + "<br>");
</script>
</body>
</html>
비교 연산자
두 값 비교, true나 false의 결과를 내는 연산
| 연산자 | 내용 | 연산자 | 내용 |
| a < b | a가 b보다 작으면 true | a >= b | a가 b보다 크거나 같으면 true |
| a > b | a가 b보다 크면 true | a == b | a가 b와 같으면 true |
| a <= b | a가 b보다 작거나 같으면 true | a != b | a가 b와 같지 않으면 true |
비교 연산자 실습 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>비교 연산</title>
</head>
<body>
<h3>비교 연산</h3>
<hr>
<script>
let x = 13, y = 7;
document.write("x = " + x + ", y = " + y + "<br><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>
논리 연산자
AND, OR, NOT
| 연산자 | 별칭 | 내용 |
| a && b | 논리 AND 연산 | a,b 모두 true일 때 true 리턴 |
| a || b | 논리 OR 연산 | a,b 중 하나라도 true이면 true 리턴 |
| !a | 논리 NOT 연산 | a가 true이면 false 값을, false이면 true리턴 |
논리 연산자 실습 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>논리 연산</title>
</head>
<body>
<h3>논리 연산</h3>
<hr>
<script>
let x = true, y = false;
document.write("x=" + x + ", y=" + y + "<br><br>");
document.write("x && y : " + (x&&y) + "<br>");
document.write("x || y : " + (x||y) + "<br>");
document.write("!x : " + (!x) + "<br>");
document.write("<br>");
document.write("(3>2)&&(3<4) : " + ((3>2)&&(3<4)) + "<br>");
document.write("(3==-2) || (-1<0) : " + ((3==-2) || (-1<0)));
</script>
</body>
</html>
조건 연산자
condition ? expT : expF
condition이 true이면 전체 결과는 expT의 계산 값 false이면 expF의 계산 값
let x = 5, y = 3;
let big = (x>y) ? x : y; // (x>y)가 true이므로 x값 5가 big에 대입된다.
조건 연산자 실습 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>조건 연산</title>
</head>
<body>
<h3>조건 연산</h3>
<hr>
<script>
let a = 3, b = 5;
document.write("a=" + a + ", b=" + b + "<br><br>");
document.write("두수의 차이 : " + ((a>b)?(a-b):(b-a)));
</script>
</body>
</html>
비트 연산
비트 논리 연산
| 연산자 | 별칭 | 연산 설명 |
| a & b | 비트 AND 연산 | 두 비트 모두 1이면 1, 그렇지 않으면 0 |
| a | b | 비트 OR 연산 | 두 비트 모두 0이면 0, 그렇지 않으면 1 |
| a ^ b | 비트 XOR 연산 | 두 비트가 다르면 1, 같으면 0 |
| ~ a | 비트 NOT 연산 | 1을 0으로, 0을 1로 변환 |
비트 시프트 연산
시프트 : 저장 공간에서 비트들의 오른쪽/왼쪽 이동
| 연산자 | 별칭 | 설명 |
| a << b | 산술적 왼쪽 시프트 | a의 비트들을 왼쪽으로 b번 이동, 최하위 비트의 빈자리는 0으로 채움, 한 비트 시프트마다 곱하기 2의 효과 발생, a 값은 변화 없음 |
| a >> b | 산술적 오른쪽 시프트 | a의 비트들을 오른쪽으로 b번 이동, 최상위 비트의 빈자리는 시프트 전 최상위 비트로 채움 한비트 시프트마다 나누기 2의 효과 발생, a값은 변화 없음 |
| a >>> b | 논리적 오른쪽 시프트 | a의 비트들을 오른쪽으로 b번 이동. 최상위 비트의 빈자리는 0으로 채움. a값은 변화 없음 |
비트 연산자 실습 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>비트 연산</title>
<script>
function digit8(v){
let str = "";
for(let i = 0; i < 8; i++, v <<= 1){
if(v & 0x90) str += i;
else str += "0";
}
return str;
}
</script>
</head>
<body>
<h3>비트 논리 연산과 시프트 연산</h3>
<hr>
<script>
let x = 10, y = 3;
document.write("<pre>");
document.wirte("x = " + x + ", y = " + y + "<br>");
document.write("x: " + digit8(x) + "<br>");
document.write("y: " + digit8(y) + "<br>");
document.write("<hr>");
document.write("x&y : " + digit8(x&y) + "<br>");
document.write("x|y : " + digit8(x|y) + "<br>");
document.write("x^y : " + digit8(x^y) + "<br>");
document.write("~x : " + digit8(~x) + "<br>");
document.write("<hr>");
document.write("x<<1 : " + digit8(x<<1) + "<br>");
document.write("x>>1 : " + digit8(x>>1) + "<br>");
document.write("x>>>1 : " + digit8(x>>>1) + "<br>");
document.write("</pre>");
</script>
</body>
</html>
문자열 연산자
문자열끼리 합칠때 "+" 연산자를 사용할 수 잇다.
또한 문자열을 비교연산자를 통해서 비교할 수 있는데, 사전순으로 비교하여 결과를 리턴한다.
문자열 연산 실습 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>문자열 연산</title>
</head>
<body>
<h3>문자열 연산</h3>
<hr>
<script>
document.write("abc" + 23 + "<br>");
document.write(23 + "abc" + "<br>");
document.write(23 + "35" + "<br>");
document.write(23 + 35 + "<br>");
document.write(23 + 35 + "abc" + "<br>");
document.write("abc" + 23 + 35 + "<br><hr>");
let name = "hello";
document.write(name == "hello");
document.write("<br>");
document.write(name > "park");
</script>
</body>
</html>
조건문
if - else 문
if - else문 실습 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>if - else</title>
</head>
<body>
<h3>if - else를 이용한 학점 매기기</h3>
<hr>
<script>
let grade;
let score = prompt("홍길동 님 점수를 입력하세요", 100);
score = praseInt(score);
if(score >= 90){
grade = "A";
} else if (score >= 80){
grade = "B";
} else if (score >= 70){
grade = "C";
} else if (score >= 60){
grade = "D";
} else grade = "F";
document.write(score + "는" + grade + "입니다.<br>");
</script>
</body>
</html>
swich 문
값에 따라 서로 다른 코드를 실행할 때, swich 문 적합
case문의 값은 const로 선언된 상수나 리터럴만 가능
case문의 값에 변수나 식은 사용 불가능
swich 문의 종료를 나타내는 break문 break문을 만날때까지 아래로 코드를 계속해서 실행한다.
swich문 실습 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>swich</title>
</head>
<body>
<h3>swich문으로 커피 주문</h3>
<hr>
<script>
let price = 0;
let coffee = prompt("무슨 커피 드릴까요?" ,"");
switch(coffee){
case "espresso" :
case "에스프레소" : price = 2000;
break;
case "카푸치노" : price = 3000;
break;
case "카페라떼" : price = 3500;
break;
default :
document.write(coffee + "는 없습니다.");
}
if(price != 0){
document.write(coffee + "는" + price + "원 입니다.");
}
</script>
</body>
</html>
반복문
for문으로 10px ~ 35px 크기로 출력하는 실습 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>swich</title>
</head>
<body>
<h3>swich문으로 커피 주문</h3>
<hr>
<script>
for(let size = 10; size <= 35; size += 5){
document.write("<span");
document.write("style = 'font-size:" + size + "px'>");
document.write(size + "px");
document.write("</span>");
}
</script>
</body>
</html>
while 문으로 0 ~ n까지의 합 구하기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>while 문</title>
</head>
<body>
<h3>while 문으로 0에서 n까지 합</h3>
<hr>
<script>
let n = prompt("0보다 큰 정수를 입력하세요.", 0);
n = parseInt(n);
let i = 0, sum = 0;
while(i <= n){
sum += i;
i++;
}
document.write("0에서 " + n + "까지 합은 " + sum);
</script>
</body>
</html>
do-while 문으로 0 ~ n까지 합 구하기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>do-while 문</title>
</head>
<body>
<h3>do-while문으로 0에서 n까지 합 구하기</h3>
<hr>
<script>
let n = prompt("0보다 큰 정수를 입력하세요.", 0);
n = parseInt(n);
let i = 0, sum = 0;
do {
sum += i;
i++;
} while (i <= n);
document.write("0에서 " + n + "까지 합은 " + sum);
</script>
</body>
</html>
반복문 내의 break문과 continue문
break문 : 가장 안쪽 반복문 하나만 벗어나도록 제어
continue문 : 반복 코드 실행 중단, 다음 반복으로 점프
break문 실습 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>break 문</title>
</head>
<body>
<h3>1에서 얼마까지 더해야 3000을 넘는가?</h3>
<hr>
<script>
let i = 0, sum = 0;
while(true){
sum += i;
if(sum > 3000) break;
i++;
}
document.write(i+"까지 더하면 3000을 넘음 : " + sum);
</script>
</body>
</html>
continue문 실습 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>continue 문</title>
</head>
<body>
<h3>3으로 나눈 나머지가 1인 수만 더하기</h3>
<hr>
<script>
let sum = 0;
for(let i = 1; i<=10; i++){
if(i % 3 == 1) continue;
document.write(i+ " ");
sum += i;
}
document.write("합은 " + sum);
</script>
</body>
</html>
함수
함수란? 목적을 가지고 작성된 코드 블록이다. 데이터를 전달받아 처리한 후 결과를 돌려주는 코드 블록이라고 볼수 있다.
adder() 함수 작성 및 호출
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>함수</title>
<script>
function adder(a,b){
let sum;
sum = a + b;
return sum;
}
</script>
</head>
<body>
<h3>함수 adder()</h3>
<hr>
<script>
let n = adder(24567, 98374);
document.write("24567 + 98374는 " + n + "<br>");
</script>
</body>
</html>
자바스크립트에서 제공하는 전역함수
- eval() 함수 : ex) let res = eval("2*3 + 4*6") // res는 30
- parseInt() 함수 : 문자열을 정수로 리턴 한다. 또는 16진수를 해석해서 정수로 리턴한다.
- isNaN() 함수 : 숫자가 아닌 문자열을 체크하는 함수이다. 오로지 문자만 들어간 문자열만 true를 반환한다.
eval(), parseInt(), isNaN() 실습 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>자바스크립트 전역함수</title>
<script>
function evalParseIntisNaN(){
let res = eval("2*3 + 4*6");
document.write("eval은 " + res + "<br>");
let m = parseInt("32");
document.write("m은 " + m + "<br>");
let n = parseInt("0x32");
document.write("n은" + n + "<br>");
if(isNaN("hello")){
document.write("hello는 숫자가 아닙니다.");
}
}
</script>
</head>
<body>
<h3>eval(), parseInt(), isNaN()</h3>
<hr>
<script>
evalParseIntisNaN();
</script>
</body>
</html>
구구단 출력 함수 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>함수 만들기</title>
<script>
function gugudan(n){
let m = parseInt(n);
if(isNaN(m) || m < 1 || m > 9){
alert("잘못 입력하였습니다.");
return;
}
for(let i = 1; i <= 9; i++){
document.write(m + "x" + i + "=" + m*i + "<br>");
}
}
</script>
</head>
<body>
<h3>구구단 출력함수 만들기</h3>
<hr>
<script>
let n = prompt("구구단 몇 단을 원하세요", "");
gugudan(n);
</script>
</body>
</html>
728x90
'Programming Language > HTML & CSS & JavaScript' 카테고리의 다른 글
| [HTML & CSS & JavaScript] 계산기(+, -, *) 프로그램 실습 (0) | 2023.12.28 |
|---|---|
| [HTML & CSS & JavaScript] 자바스크립트 코어객체와 배열 (10주차) (0) | 2023.12.28 |
| [HTML & CSS & JavaScript] HTML5 기본 문서 만들기 #2 (3주차) (0) | 2023.11.23 |
| [HTML & CSS & JavaScript] HTML5 기본 문서 만들기 #1 (2주차) (0) | 2023.11.23 |
| [HTML & CSS & JavaScript] 웹 개발의 시작 (1주차) (0) | 2023.11.21 |
