1. 변수란?
변수(variable) : 값이 여러 번 달라질 수 있는 데이터
상수(constant) : 값을 한 번 지정하면 바뀌지 않는 데이터
◎ 변수 선언의 규칙
▷ 변수 이름
▶ 영어 문자, 언더스코어(_), 숫자를 사용합니다.
▶ 첫 글자는 영문자, _기호, $기호를 사용합니다.
▶ 띄어쓰기나 기호는 허용하지 않습니다.
ex) now, _now, now25 (사용 가능)
ex) 25now, now 25, *now25 (사용 불가능)
▷ 영어 대소문자를 구별하며 예약어는 변수 이름으로 사용할 수 없습니다.(int, String 등)
▷ 여러 단어를 연결할 때는 하이픈이나 언더스코어를 사용할 수 있고 중간에 대문자를 섞어 쓸 수도 있습니다.
ex) total-area, total_area, totalArea 등
▷ 변수 이름은 다른 사람이 보기에 의미를 이해할 수 있도록 작성합니다.
◎ 변수 선언하기
▷ var 뒤에 변수 이름을 작성합니다.
▷ var를 한 번만 사용하고 뒤에 여러개의 변수를 한꺼번에 선언할 수도 있습니다.
◎ 변수에 값을 할당하기
▷ '=' 기호 다음에 값을 저장합니다.
//변수를 하나씩 선언하기
var currentYear;
var birthYear;
var age;
//변수를 한 번에 선언하기
var currentYear, birthYear, age;
//변수에 값 할당
var birthYear = 1996;
var currentYear;
currentYear = 2022;
2. 자료형이란
◎ 컴퓨터가 처리할 수 있는 자료의 형태
| NO | 종류 | 설명 | 예시 | |
| 1 | 기본 유형 |
숫자형 | 따옴표 없이 숫자로만 표기합니다. | var birthYear = 2000; |
| 2 | 문자열 | 작은따옴표(' ')나 큰따옴표(" ")로 묶어서 나타냅니다. 숫자를 따옴표로 묶으면 문자로 인식합니다. | var greeting = "Hello!"; var birthYear = "2000"; |
|
| 3 | 논리형 | 참(true)과 거짓(false)이라는 2가지 값만 있는 유형입니다. 이때 true와 false는 소문자로만 표시합니다. | var isEmpty = true; | |
| 4 | 복합 유형 |
배열 | 하나의 변수에 여러 개의 값을 저장합니다. | var seasons = ['봄', '여름', '가을', '겨울']; |
| 5 | 객체 | 함수와 속성을 함께 포함합니다. | var date = new Date(); | |
| 6 | 특수 유형 |
undefined | 자료형이 지정되지 않았을 때의 상태입니다. 예를 들어 변수 선언만 하고 값을 할당하지 않은 변수는 undefined 상태입니다. |
|
| 7 | null | 값이 유효하지 않을 때의 상태입니다. 변수에 할당된 값이 유효하지 않다는 의미입니다. | ||
인터넷 개발자모드(F12) → 콘솔 → 입력 : typeof 숫자
▷ typeof 100, typeof 100.0 → number출력
▷ typeof "a", typeof 'a' → string출력
▶ 자바와 다르게 정수, 실수가 구분되지 않고 숫자로 출력됩니다. → 실수를 정밀하게 게산하지 못합니다.
▶ 또한, 문자열과 문자도 따로 구분되지 않습니다.
◎ 배열
//배열의 기본형
배열명["값1", "값2", .......]
배열명[ ]
//예시
//배열 사용하지 않음
var spring = "봄";
var summer = "여름";
var fall = "가을";
var winter = "겨울";
//배열 사용시
var season = ["봄","여름","가을","겨울"];
자바스크립트는 데이터 유형이 자동 변환됩니다. 하나의 변수를 문자열로 받았지만 사칙연산에 해당 변수를 사용하면 자동으로 숫자형으로 변환되어 계산됩니다.
▷ 이것이 코드 작성시에는 편리하지만 코드 작성하면서 혼동이 올 우려가 있습니다.
3. 연산자
◎ 산술 연산자 : 계산을 할 때 사용하는 연산자입니다.
| NO | 연산자 | 의미 | 사용방법 |
| 1 | + | 더하기 | c = a + b |
| 2 | - | 빼기 | c = a - b |
| 3 | * | 곱하기 | c = a * b |
| 4 | / | 나누기 | c = a / b |
| 5 | % | 나머지 | c = a % b |
| 6 | ++ | 피연산자 1 증가 | a++ |
| 7 | -- | 피연산자 1 감소 | b-- |
산술 연산자는 자바와 동일하네요!!
◎ 할당 연산자(대입 연산자) : 연산자 오른쪽의 실행 결과를 왼쪽 변수에 할당하는 연산입니다.
| NO | 연산자 | 사용방법 | 설명 |
| 1 | = | y = x + 3 | 연산자 오른쪽 값을 왼쪽 변수에 할당합니다. |
| 2 | += | y += x | y = y + x |
| 3 | -= | y -= x | y = y - x |
| 4 | *= | y *= x | y = y * x |
| 5 | /= | y /= x | y = y / x |
| 6 | %= | y %= x | y = y % x |
◎ 연결 연산자 : 둘 이상의 문자열을 합쳐서 하나의 문자열로 만드는 연산자 '+' 기호를 사용합니다.
▷ document.write(birthYear + "년에 태어난 사람의 나이는 " + age + "세 입니다.");
◎ 비교 연산자 : 피연산자 2개의 값을 비교해서 true나 false로 결과값을 반환합니다.
| NO | 연산자 | 설명 | 예시 조건식 결과값 |
|
| 1 | == | 피연산자가 서로 같으면 true입니다. | 3 == "3" | true |
| 2 | === | 피연산자도 같고 자료형도 같으면 true입니다. | a === " 3" | false |
| 3 | != | 피연산자가 서로 같지 않으면 true입니다. | 3 != "3" | false |
| 4 | !== | 피연산자가 같지 않거나 자료형이 같지 않으면 true입니다. | 3 !== "3" | true |
| 5 | < | 왼쪽 피연산자가 오른쪽 피연산자보다 작으면 true입니다. | 3 < 4 | true |
| 6 | <= | 왼쪽 피연산자가 오른쪽 피연산자보다 작거나 같으면 true 입니다. | 3 <= 4 | true |
| 7 | > | 왼쪽 피연산자가 오른쪽 피연산자보다 크면 true입니다. | 3 > 4 | false |
| 8 | >= | 왼쪽 피연산자가 오른쪽 피연산자보다 크거나 같으면 true입니다. | 3 >= 4 | false |
▷ == 연산자와 != 연산자 : 피연산자의 자료형을 자동으로 변환해서 비교합니다.
▶ 3 == "3" → true
▷ === 연산자와 !== 연산자 : 피연산자의 자료형을 변환하지 않습니다.
▶ 3 === "3" → false
◎ 논리 연산자 : true와 false가 피연산자인 연산자 조건을 처리할 때 사용합니다.
| NO | 종류 | 기호 | 설명 |
| 1 | OR 연산자 | || | 피연산자 중 하나만 true여도 true가 됩니다. |
| 2 | AND연산자 | && | 피연산자가 모두 true일 경우에만 true가 됩니다. |
| 3 | NOT 연산자 | ! | 피연산자의 반대값을 지정합니다. |
◎ 나이 계산
<body>
<script>
var name;
var currentYear = 2022;
var birthYear;
var age;
name = prompt("이름을 입력하세요", "");
birthYear = prompt("태어난 연도를 입력하세요. (YYYY)", "");
age = currentYear - birthYear + 1;
document.write(currentYear + "년 현재<br>");
document.write(birthYear + "년에 태어난 <span id=name>" + name + "</span> 의 나이는 " + age + "세입니다.")
</script>
</body>
이름과 태어난 년도를 입력받고 새로운 페이지에 출력하는 코드입니다.
너무 오랜만에 해서 다 잊어버렸네요,,ㅎㅎ
자바스크립트의 기본 입출력 방법은 다음 시간에 바로 업로드하겠습니다!!
많은 분들의 피드백은 언제나 환영합니다! 많은 댓글 부탁드려요~~
'FrontEnd > java script' 카테고리의 다른 글
| [java script] 객체 1(object, 내장 객체 Array) (0) | 2022.12.16 |
|---|---|
| [java script] 자바 스크립트 함수 2(function) (0) | 2022.12.16 |
| [java script] 자바 스크립트 함수 1(function) (0) | 2022.12.15 |
| [java script] 자바스크립트 반복문(for, while) (0) | 2022.12.15 |
| [java script] 자바스크립트 조건문(if, switch) (0) | 2022.12.15 |
