728x90
변수(variable)
- 프로그램을 실행하는 동안 값이 여러 번 달라질 수 있는 데이터
↔ 값을 한 번 지정하면 바뀌지 않는 데이터를 상수(constant) - 변수 선언 규칙
변수를 사용하려면 변수를 구별할 수 있도록 이름을 붙여 주어야 하는데, 이것을 변수 선언 - 변수 선언
var || let || const 변수명
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>변수</title>
</head>
<body>
<script>
// 변수 선언하기
var currentYear = 2024;
var birthYear;
var age;
// 변수 한꺼번에 선언
// var currentYear, birthYear, age;
birthYear = prompt("태어난 연도를 입력해주세요.(형식 : YYYY)", "");
age = currentYear - birthYear;
document.write(currentYear + "년 현재, " + age + "입니다.");
</script>
</body>
</html>
자료형
컴퓨터가 처리할 수 있는 자료의 형태. 데이터 유형, 데이터 타입, 데이터형이라고도 함
기본 유형(숫자형, 문자열, 논리형), 복합 유형(배열, 객체), 특수 유형(undefined, null)
숫자형(number)
- 따옴표 없이 숫자로만 표기
ex) var currentYear = 2024; - 정수 : 소수점이 없는 숫자
- 실수 : 소수점이 있는 숫자
ex) var PI = 3.14; - 자바 스크립트에서는 실수를 정밀하게 계산하는 것은 적합하지 않음. 예상하지 못한 계살 결괏값이 나올 때가 있음
따라서 정밀하게 숫자를 계한하는 프로그램을 만들 때 주의
문자형(String)
- 작은 따옴표나 큰 따옴표로 묶은 데이터를 의미
- 숫자도 따옴표로 묶으면 문자열로 인식
- 작은 따옴표로 시작한 문자열 데이터는 작은 따옴표로 끝맺음해야함
- 따옴표를 중복으로 써야할 경우 중복되지 않도록 속성값은 다른 따옴표로 묶어서 표현
ex) document.write("<\span style = 'color : red'>", "hello world", "<\/span>")
논리형(boolean)
- 참 혹은 거짓의 값으로 표현하는 자료형
undefined
- 자료형이 정의되지 않았을 때의 데이터 상태를 나타냄
- 자바스크립트에서 변수를 선언할 때 자료형을 미리 지정하지 않고 값을 할당할 때 결정
- 변수 선언만 하고 값이 할당되지 않을 자료형
- 변수에 값이 할당 되지 않았다를 뜻함
null
- 데이터 값이 유효하지 않은 상태
배열
- 변수 하나에 값을 여러 개 저장
- 여러 개의 데이터값을 하나의 배열 이름으로 묶어서 선언
연산자
프로그램에서 특정한 동작을 하도록 지시하는 기호
산술연산자
- +, -, *, /, %, ++, --
할당연산자(대입 연산자)
- 변수에 값을 할당하거나 연산식의 결과를 변수에 저장할 때 사용
- =, +=, -=, *=, /=, %=
연결연산자
- 둘 이상의 문자열을 합쳐서 하나의 문자열로 만드는 연산자
- +, ,
비교연산자
- 피연산자 2개의 값을 비교해서 참 혹은 거짓으로 결괏값을 반환
- 주로 두 값을 비교하므로 어떠한 조건을 체크할 때 사용
- ==, ===, !=, !==, <, <=, >, >=
- ==, === 연산자 비교
== : 피연산자가 서로 같으면 true
=== : 피연산자도 같고 자료형도 같으면 true
논리연산자
- true, false를 처리하는 연산자
- ||, &&, !
조건문
if문
if(조건){
조건 결과가 true일 때 실행
}
if-else
if(조건){
조건 결과가 true일 때 실행
} else {
조건 결과가 false일 때 실행
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>조건문</title>
</head>
<body>
<script>
var num = prompt("숫자를 입력하세요.");
if(num%3==0) {
document.write("3의 배수");
} else {
document.write("3의 배수가 아닙니다.");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>조건문</title>
</head>
<body>
<script>
var num = prompt("숫자를 입력하세요.");
if(num!=null){
if(num%3==0) {
document.write("3의 배수");
} else {
document.write("3의 배수가 아닙니다.");
}
} else {
document.write("입력이 취소되었습니다.")
}
</script>
</body>
</html>
※ 조건 계산을 빠르게 하는 방법
조건이 2가지 이상일 경우 동시에 함께 체크하는 조건식을 만들 때는 첫 번째 조건을 보고 빠르게 판단할 수 있도록 해야함
만약, and(&&) 조건식이 둘 이상일 경우 false가 될 확률이 높은 조건을 첫 번째 조건식으로
or(||) 조건식이 둘 이상일 경우 true가 될 확률이 높은 조건을 첫번째 조건식으로 사용하는 것이 좋음
switch
처리할 명령이 많은 경우 if-else문을 여러 개 사용해서 조건을 확인하는 것보다 switch문이 더 보기 편함
switch(조건)
{
case 값1 : 명령1
break;
case 값2 : 명령2
break;
...
default : 명령 n
}중요한 것은 break 작성 유무(자주 까먹어서 값1이 나왔을 때 명령1만 나오면 되는 데 명령2, ... 명령 n까지 실행됨)
또한 default에는 break를 작성하지 않음
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>조건문</title>
</head>
<body>
<script>
var switchTest = prompt("관심 언어를 입력해주세요. 1 : html/css, 2 : javascript, 3. python");
switch(switchTest){
case "1" : document.write("관심있어하는 언어는 <b>html/css</b> 입니다.");
break;
case "2" : document.write("관심있어하는 언어는 <b>javascript</b> 입니다.");
break;
case "3" : document.write("관심있어하는 언어는 <b>python</b> 입니다.");
break;
default : document.write("잘 못 입력하셨습니다.");
}
</script>
</body>
</html>
만약 아래와 같이 break가 없다면?
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>조건문</title>
</head>
<body>
<script>
var switchTest = prompt("관심 언어를 입력해주세요. 1 : html/css, 2 : javascript, 3. python");
switch(switchTest){
case "1" : document.write("관심있어하는 언어는 <b>html/css</b> 입니다.");
//break;
case "2" : document.write("관심있어하는 언어는 <b>javascript</b> 입니다.");
//break;
case "3" : document.write("관심있어하는 언어는 <b>python</b> 입니다.");
//break;
default : document.write("잘 못 입력하셨습니다.");
}
</script>
</body>
</html>
switch에서는 break를 작성해주는게 가장 중요함
반복문
for
초깃값 → 조건 → 명령 → 증감식 순서로 진행
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>반복문 for</title>
</head>
<body>
<script>
var i;
var sum = 0;
for(i = 1; i < 11; i++){
sum += i;
}
document.write("1부터 10까지 더한 합은 : " + sum);
</script>
</body>
</html>
중첩된 for문
for문 안에 다른 for문을 넣어서 사용할 수 있는데 이를 중첩된 for문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>반복문 중첩 for</title>
</head>
<body>
<script>
var i;
var j;
for(i = 2; i < 10; i++){
document.write("<h1>"+i+"단</h1>");
for(j = 1; j < 10; j ++){
document.write(i+" * "+j+" = " + (i*j)+"<br>");
}
}
</script>
</body>
</html>
while문
- while
조건이 참인 동안 명령을 반복 - do-while
조건이 마지막에 붙는데, do문은 일단 명령을 한 번 실행 한 후 while 문에서 조건을 체크
조건이 false라도 최소 한 번은 실행
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>반복문 while</title>
</head>
<body>
<script>
var num = prompt("숫자를 입력해주세요");
var result = 1;
var first = 1;
while(first<=num){
result *= first;
first++;
}
document.write(num + "! = " + result);
</script>
</body>
</html>
continue
주어진 조건에 해당하는 값을 만나면 해당 반복문을 건너뜀. 반복문의 맨 앞으로 되돌아가 다음 과정으로 넘어감
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>continue</title>
</head>
<body>
<script>
var i;
var sum = 0;
for(i = 1; i <= 10; i++){
if(i%2==0){
continue;
}
sum +=i;
}
document.write("1부터 10까지의 홀수의 합은 " + sum);
</script>
</body>
</html>
728x90