기본 개념
Java (JVM)
JavaScript (Browser) : 내부적으로 HTML코드가 Browser를 열면서 JavaScript코드를 실행 시킨다. → HTML 동적관리
스크립트(대본) → 엑터(배우 - HTML)
언어뒤에 Script가 붙어있으면 기생언어라고 한다. (자신 혼자 실행할 수 없는 언어들)
W3S
JS Async, JS HTML DOM 중요
id : 자바스크립트에서 찾을 때 사용하는 식별자
1. Variables(변수)
선언 방법
- 자동으로
- var 사용, let 사용, const 사용
var은 이전 브라우저용으로 작성된 코드에서만 사용 (중복 선언 가능)
let은 선언한 블록 내에서만 유효(중복 선언 불가능)
const는 상수를 선언할 때 사용
2. Operators(연산자)
Java와 대부분 비슷
== 은 값만 비교하고, === 은 값과 타입을 비교
true 인것 같지만 문자열로 표현하였기 때문에 5<2 를 뜻하게 되어 false 이다.
3. Arithmetic(산술)
대부분 자바와 비슷
x ** y 는 x^y와 같음 (거듭제곱)
4. Functions(함수)
JavaScript 함수는
function키워드, 이름 , 괄호 () 로 정의 → Java 메서드 만드는 것과 비슷
5. Object(객체)
객체 선언 방법이 Java의 Map과 비슷해 보인다.
car.type 과 car[”type”] 두 가지 방법으로 액세스 가능하다.
6. Events(이벤트)
JavaScript가 HTML 페이지에서 사용될 때 JavaScript는 이벤트에 “반응”할 수 있다.
이벤트 첫 번째 버전
일반적인 이벤트 목록
onchange | HTML 요소가 변경 |
onclick | 사용자가 HTML 요소를 클릭 |
onmouseover | 사용자가 HTML 요소 위로 마우스를 이동 |
onmouseout | 사용자가 HTML 요소에서 마우스를 멀리 이동 |
onkeydown | 사용자가 키보드 키를 누름 |
onload | 브라우저가 페이지 로드를 완료 |
이벤트를 실행하면 EventLoop의 Queue에 등록되고 메인 스레드가 바쁘면 실행하지 않고, 바쁘지 않을 때 Queue에 등록된 이벤트들을 하나씩 실행됨.(JavaScript는 단일 쓰레드임)
이벤트 두 번째 버전
click : 요소를 클릭할 때 발생
dblclick : 요소를 더블 클릭할 때 발생
mousedown : 요소에서 마우스 버튼이 눌릴 때 발생
mouseup : 요소에서 마우스 버튼이 떼어질 때 발생
mousemove : 요소에서 마우스가 움직일 때 발생
mouseover : 요소에 마우스 커서가 올라갈 때 발생
mouseout : 요소에서 마우스 커서가 벗어날 때 발생
keydown : 키보드에서 키를 누를 때 발생
keyup : 키보드에서 키를 뗄 때 발생
submit : 폼을 제출할 때 발생
change : 요소의 값이 변경될 때 발생
load : 웹 페이지나 이미지 등이 로딩되었을 때 발생
jQuery(3번째 버전)
7. Strings(문자열)
큰 따옴표, 작은 따옴표 둘다 사용 가능 문자열 안에 문자열을 사용하기 위해서는 서로 다른 따옴표 사용
문자열을
new 키워드를 사용하여 Object 타입으로 정의 가능자바 스크립트에서 두 객체를 비교하면 항상 false가 나옴
8. String Templates(Back-Tics `)
`를 사용하면 문자열의 동적 사용이 편리해지고 가독성이 좋은 코드를 작성 할 수 있다.
const x = 10; const str = `변수 x의 값은 ${x}입니다.`; // ${변수}와 같은 형식으로 사용 가능 console.log(str);
"변수 x의 값은 10입니다." 를 출력한다.
9. Arrays(배열)
자바의 Collection과 같음 자바의 배열은 없다.
일반적으로 배열의 선언은
const 로 한다. (const는 상수 선언)let numbers = [1, 2, 3]; numbers.push(4); console.log(numbers);// [1, 2, 3, 4] numbers = [5, 6, 7]; // const라면 여기서 error 발생 console.log(numbers);// [5, 6, 7]
let으로 선언하면 이렇게 될 수도 있기 때문에 중복으로 선언 안하는 것이 좋기 때문에 const를 사용함.
불변성(Immutability)이 중요하다
10. Date Formats + Get Method
- ISO 8601 : 날짜와 시간 표현에 대한 국제 표준, 구문(YYYY-MM-DD)은 선호되는 JavaScript 날짜 형식
- YYYY-MM-DDTHH:MM:SSZ 형식으로 시간, 분, 초를 추가하여 작성 가능하다.
- 날짜와 시간은 T로 구분되고, UTC 시간은 대문자 Z로 정의됨.
LocalTime 반환
Method | Description |
getFullYear() | Get year as a four digit number (yyyy) |
getMonth() | Get month as a number (0-11) |
getDate() | Get day as a number (1-31) |
getDay() | Get weekday as a number (0-6) |
getHours() | Get hour (0-23) |
getMinutes() | Get minute (0-59) |
getSeconds() | Get second (0-59) |
getMilliseconds() | Get millisecond (0-999) |
getTime() | Get time (milliseconds since January 1, 1970) |
UTC 반환
Method | Same As | Description |
getUTCDate() | getDate() | Returns the UTC date |
getUTCFullYear() | getFullYear() | Returns the UTC year |
getUTCMonth() | getMonth() | Returns the UTC month |
getUTCDay() | getDay() | Returns the UTC day |
getUTCHours() | getHours() | Returns the UTC hour |
getUTCMinutes() | getMinutes() | Returns the UTC minutes |
getUTCSeconds() | getSeconds() | Returns the UTC seconds |
getUTCMilliseconds() | getMilliseconds() | Returns the UTC milliseconds |
11. JS Comparisons (비교) ==값, ===값과 타입
문자와 숫자를 비교 할 때는 숫자 비교하듯이 ( 5 == “5” ) true
문자와 문자 비교는 ( “12” > “2” ) false
12. if else
Java 와 거의 동일한 것 같음
13. for of (Java foreach)
14. while break, continue
While : java와 거의 동일한 것 같음
break, continue : java와 거의 동일하지만 JavaScript 에서는 아래와 같이도 사용 가능
Share article