연산자
- 산술 연산자 (Arithmetic Operators)
- +, =, *, **, /, %, ++, --
- ** : 누승법
- 할당 연산자 (Assignmet Operators)
- =, +=, ==, *=, /=, %=, **=
- 비교 연산자 (Comparison Operators)
- ==, ===, !=, !==, >, <, >=, <=, ?
- ===와 !== 는 값에 변수 타입까지 체크
- 논리, 유형 연산자 (Logical, Type Operators)
- && : AND
- || : OR
- ! : NOT
- typeof : 변수의 타입을 리턴
- instanceof : 객체가 특정 클래스의 인스턴스인지 비교
- 비트 연산자 (Bitwise Operators)
| 연산자 |
설명 |
예시 |
이진수 예시 |
이진수 결과 |
십진수 |
| & |
AND |
5 & 1 |
0101 & 0001 |
0001 |
1 |
| | |
OR |
5 | 1 |
0101 | 0001 |
0101 |
5 |
| ~ |
NOT |
~ 5 |
~0101 |
1010 |
10 |
| ^ |
XOR |
5 ^ 1 |
0101 ^ 0001 |
0100 |
4 |
| << |
Zero fill left shift |
5 << 1 |
0101 << 1 |
1010 |
10 |
| >> |
Signed right shift |
5 >> 1 |
0101 >> 1 |
0010 |
2 |
| >>> |
Zero fill right shift |
5 >>> 1 |
0101 >>> 1 |
0010 |
2 |
배열
- 둘 이상의 값을 가질 수 있는 특수 변수
- 단일 이름으로 많은 값을 가질 수 있으며 인덱스 번호를 참조하여 값에 액세스 할 수 있음
배열 선언
- 배열 선언은 문자로 하는 것이 가장 일반적
- 공백과 줄바꿈은 무시, 배열 선언은 여러 줄에 걸쳐 표현할 수 있음
- 배열을 선언한 후, 배열의 요소값을 나중에 배정할 수 있음
배열 사용법
- 인덱스 번호를 참조하여 배열 요소에 액세스
- 배열 색인은 0으로 시작
- 배열 요소 변경
const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "0pel";
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
const fruits = ["Banana", "Orange", "Apple"];
fruits.push("Lemon");
fruits[fruits.length] = "Melon";
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array.find()</h2>
<p>find() 메서드는 조건에 맞는 배열 요소를 찾는다.</p>
<p id="demo"></p>
<script>
let k=13;
const numbers = [4, 9, 16, 25, 29, 32, 100];
let first = numbers.find(myFunction);
document.getElementById("demo").innerHTML = "First number over "+ k +" is " + first;
function myFunction(value) {
return value > k;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p>sort() 메서드는 배열 요소를 정렬한다.</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango", "Korea", "Hell-Bound"];
document.getElementById("demo1").innerHTML = fruits;
fruits.sort();
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>
날짜
날짜 오브젝트
- 날짜 관련 작업을 수행할 수 있음
- 기본적으로 JS는 브라우저의 시간대를 사용하고 날자를 전체 텍스트 문자열로 표시
- 날짜 객체는 new Date() 생성자를 사용하여 생성
new Date()
new Date(year, month, day, hours, minutes, seconds, milliseconds)
new Date(milliseconds)
new Date(date string)
<!DOCTYPE html>
<html>
<body>
<h4>JavaScript Date()</h4>
<p id="demo1"></p>
<script>
const d = new Date();
document.getElementById("demo1").innerHTML = d;
</script><hr>
<p id="demo2"></p>
<script>
const e = new Date(2021, 10, 24, 10, 33, 30, 0);
document.getElementById("demo2").innerHTML = e;
</script><hr>
<p id="demo3"></p>
<script>
const f = new Date(2022, 10, 24);
document.getElementById("demo3").innerHTML = f;
</script>
</body>
</html>
Get Date 메서드
| Method |
Desc |
| getFullYear() |
연도를 네 자리 숫자로 (yyyy) |
| getMonth() |
월을 숫자로 (0-11) |
| getDate() |
날짜를 숫자로 (1-31) |
| getHours() |
시간을 숫자로 (0-23) |
| getMinutes() |
분을 받음 (0-59) |
| getSeconds() |
초를 받음 (0-59) |
| getMilliseconds() |
밀리초를 받음 (0-999) |
| getTime() |
1970.1.1으로부터 지난 시간, 단위는 밀리초 |
| getDay() |
요일을 숫자로 받음 (0-6) |
| Date.now() |
현재 시간, ECMAScript 5. |
<!DOCTYPE html>
<html>
<body>
<h4>JavaScript getDate()</h4>
<p id="demo0"></p>
<script>
const c = new Date();
document.getElementById("demo0").innerHTML = c.getMonth()+1;
</script><hr>
<p id="demo1"></p>
<script>
const d = new Date();
document.getElementById("demo1").innerHTML = d.getDate();
</script><hr>
<p id="demo2"></p>
<script>
const e = new Date();
document.getElementById("demo2").innerHTML = e.getHours();
</script><hr>
<p id="demo3"></p>
<script>
const f = new Date();
document.getElementById("demo3").innerHTML = f.getMinutes();
</script>
</body>
</html>
