안녕하세요. pitang입니다.
저번 게시물을 마지막으로 CSS와 HTML의 개념은 얼추 마무리된 것 같습니다.
오늘부터는 JAVASCRIPT를 알아보도록 하겠습니다.
JAVASCRIPT
자바스크립트는 HTML 페이지에서 사용자 반응 등을 처리하는 스크립트를 작성하는 언어이다.
자바스크립트의 표준 명칭은 ECMAScript가 되었다. 하지만, 많은 사람들이 자바스크립트라는 이름을 사용한다.
자바스크립트는 script요소 안에서 작성된다.
CSS는 style요소안에, HTML은 body요소 안에 작성된다고 생각하면 된다.
script의 작성된 파일을 보는 방법은 HTML의 파일을 웹브라우저에 가져다 놓으면 결과가 뜬다는 것을 알 수 있었다.
거기서, 마우스 우클릭을 해 검사를 클릭하면 아래와 같이 뜨고 console을 클릭해 console창을 확인할 수 있다.
script-elemen와 comment
script 요소는 하나 이상 존재 가능하고, 순서대로 출력한다.
자바스크립트의 주석은 자바와 마찬가지로 //을 사용한다. /* */ 은 여러 줄 주석으로 사용할 수 있다.
단축키는 맥북이므로, command + / 로 사용한다.
console.log(); 는 괄호안에 있는 것을 출력해준다.
ex1)
ex2)
-> 자바와 달리 출력 웹브라우저에서 페이지 소스 보기를 클릭하면 주석 내용이 보이므로 중요한 내용은 작성하지 않는다.
변수
변수는 값을 저장할 때 사용하는 식별자이다.
자바와 달리, 데이터타입을 지정하지 않고 숫자뿐만 아니라 모든 자료형을 저장할 수 있다.
변수 선언 키워드는 크게 세 가지가 있다.
유형이 비슷한 var과 let 키워드, 둘 다 사용할 수 있다. 앞으로 게시물의 대부분은 let 키워드를 사용할 것이다.
const 키워드는 자바의 FINAL 변수와 비슷하게 값을 다시 할당할 수 없고, 선언 시 값을 할당해야 한다.
ex1) var 키워드
ex2) let 키워드
ex3) const 키워드
ex4)
연산자
말그대로 연산을 수행할 수 있는 연산자이다.
1. 산술연산자
| + | 덧셈 |
| - | 뺄셈 |
| * | 곱셈 |
| / | 나눗셈 |
| % (b % a) | b를 a로 나누고 나머지 |
| ** (b ** a) | b의 a승 |
2. 비교 연산자
| == | 같은 것이 true |
| != | 다른 것이 true |
| >, >= | |
| <, <= |
3. 논리 연산자
| && | 양변이 true일 때만 true, 나머지 false |
| || | 양변이 false일 때만 false, 나머지 true |
4. 삼항 연산자
v1 ? v2 : v3 - v1 이 true이면 연산 결과는 v2, false이면 연산결과 v3
ex1)
ex2)
a += 3; 은 a = a + 3; 과 같은 식이다.
ex3)
양 변의 데이터 타입 중 number가 있으면 자동으로 number로 변환해서 비교한다.
이 부분에서 자바와 달리 string이 자동으로 number로 변환되어 비교한다는 것을 알 수 있다.
같은 데이터 타입인지 확인할 때는 ===, !== 연산자를 사용해서 확인한다.
| === | 타입도 같고, 값도 같으면 true |
| !== | 타입이 다르거나, 값이 다르면 true |
ex4)
ex5)
형 변환
Number() - 문자열을 숫자형으로 바꿔준다.
parseInt() - 정수형으로 바꿔준다.
parseFloat() - 실수형으로 바꿔준다.
ex1)
감사합니다.
*m1 맥북을 사용 중입니다.*
'6개월 대장정 > JAVASCRIPT 개념' 카테고리의 다른 글
| 43일차 - [JS] 반복문(2), break, continue (0) | 2021.10.20 |
|---|---|
| 42일차 - [JS] 반복문(1), 배열(array) (0) | 2021.10.19 |
| 41일차 - [JS] 조건문 (0) | 2021.10.19 |
| 41일차 - [JS] dom (0) | 2021.10.19 |
| 40일차 - [JS] 함수(function) (0) | 2021.10.18 |
