JavaScript
- ECMAScript(ES)가 원래 명칭이다.
<script>태그 내부에 작성한다.<script>태그의 위치는 정해져 있지 않다.(<head>,<body>모두 가능)- HTML 구성 요소의 생성/삭제/수정 작업을 할 수 있다.
변수(Variable)
- 기본 자료형
1) number : 정수/실수 구분이 없다. NaN(Not a Number), Infinity/-Infinity(+0/-0으로 나눌 때 발생)
2) string : 문자/문자열 구분이 없다. 작은 따옴표('')와 큰 따옴표("")를 모두 사용할 수 있다.
3) boolean : true/false
4) null : 변수에 null을 저장한 경우(없는 값을 저장한 경우, 초기화를 위해 저장한 경우)
5) undefined : 변수에 어떤 값도 저장된 적이 없는 경우
- 특징
1) Dynamic type(동적 타입)이다.
2) 변수를 선언할 때 자료형이 결정되지 않는다.
3) 변수에 값을 저장할 때 자료형이 결정된다.
4) 변수에 저장된 값을 바꾸면 자료형도 함께 바뀐다.
- 변수 선언 키워드
JavaScript의 출력 방식
- 경고창
alert(출력메시지) - 브라우저 화면 출력
document.write(출력메시지) - 콘솔 출력 (F12 - Console 탭)
console.log(출력메시지)
자료형 변환하기
- number -> string
1) String(number) 함수
2) number + '' - string -> number
1) Number(string) 함수
2) parseInt(string) 함수
3) parseFloat(string) 함수
var a = 100;
var str = String(a);
var str = a + '';
var str = '200';
var a = Number(str);
var a = parseInt(str);호이스팅(Hoisting)
- JavaScript 인터프리터가 함수나 변수의 선언 이전에 미리 메모리 공간을 할당하는 것을 의미한다.
- var 키워드로 선언한 변수는 호이스팅 시 undefined 값을 가진다.
- let 키워드로 선언한 변수는 호이스팅 시 초기화되지 않는다.
- 함수의 정의보다 함수의 호출을 먼저 할 수 있다.
- 변수의 선언보다 변수의 사용을 먼저 할 수 있다.
- 변수의 선언과 초기화가 함께 진행되는 경우 선언부와 초기화를 분리하여 처리한다.
// var 키워드 호이스팅 - 1
x = 10;
console.log(x);
var x; // 변수 선언은 다른 코드보다 항상 먼저 처리된다. 이걸 호이스팅이라고 한다.
// var 키워드 호이스팅 - 2
console.log(y); // undefined
var y = 20; // var y; y = 20; 으로 분리해서 호이스팅된다.
console.log(y); // 20
// var 키워드 호이스팅 - 2(아래 순서로 실행되는 것으로 이해하기)
// var y; → var 키워드로 호이스팅 된 변수는 undefined로 초기화된다.
// console.log(y); → undefiend
// y = 20; → 20을 저장
// console.log(y); → 20
// let 키워드 호이스팅
console.log(z); // Reference Error 발생
let z = 30; // let z; z = 30; 으로 분리해서 호이스팅된다.
console.log(z);
// let 키워드 호이스팅(아래 순서로 실행되는 것으로 이해하기)
// let z; → let 키워드로 호이스팅 된 변수는 초기화되지 않는다.
// console.log(z); → Reference Error 발생
// z = 30; → 30을 저장
// console.log(z); → 30연산자
1. 산술 연산자
1) 더하기 : +
2) 빼기 : -
3) 곱하기 : (2 3 == 6)
4) 제곱 : (2 3 == 8, 2의 3제곱)
5) 나누기 : / (5 / 2 == 2.5)
6) 나머지 : % (5 % 2 == 1)
7) 몫 : 함수 필요함 (예 : parseInt(5 / 2))
8) 증감 : ++, --
2. 대입/복합 대입 연산자
1) 대입 : =
2) 복합대입 : +=, -=, *=, **=, /=, %=
3. 비교 연산자
1) 크다 : >
2) 작다 : <
3) 크거나같다 : >=
4) 작거나같다 : <=
5) 같다 (모든 타입에서 사용 가능함)
(1) 값이 같다 : == (1 == '1' 결과는 true)
(2) 값과 타입이 같다 : === (1 === '1' 결과는 false)
6) 같지않다 (모든 타입에서 사용 가능함)
(1) 값이 다르다 : !=
(2) 값과 타입이 다르다 : !==
4. 논리 연산자
1) 논리 AND : &&
2) 논리 OR : ||
3) 논리 NOT : !
5. 조건 연산자
(조건식) ? true일 때 : false일 때
6. 문자열 연산자
1) + : 문자열 연결
2) + 이외 산술 연산자 : 산술 연산으로 처리
DOM
- Document Object Model(문서 객체 모델)
- HTML 구성 요소(HTMLCollection/HTMLElement, NodeList/Node)를 객체(Object)로 저장하고 처리할 수 있는 방식이다.
- HTML 구성 요소(HTMLCollection/HTMLElement, NodeList/Node) 알아내기
1) id 속성으로 알아내기
var 변수 =document.getElementById('아이디')
2) class 속성으로 알아내기
var 배열 =document.getElementsByClassName('클래스')
3) tag 이름으로 알아내기
var 배열 =document.getElementsByTagName('태그')
4) 선택자로 알아내기
var 변수 =document.querySelector('선택자')
5) 선택자로 알아내기
var 배열 =document.querySelectorAll('선택자') - 반드시 HTML 구성 요소(HTMLCollection/HTMLElement, NodeList/Node)를 먼저 만들어야 한다.
<script>태그는 나중에 만든다.
태그 내부 텍스트와 태그 내부 요소
태그 내부 텍스트: .textContent
태그 내부 요소: .innerHTML
<!-- 태그 내부 텍스트 -->
<p id="p1">Hello World</p>
<script>
var p1 = document.getElementById('p1');
console.log(p1.textContent);
p1.textContent = '안녕하세요';
p1.textContent += ' 반갑습니다';
</script>
<!-- 태그 내부 요소 -->
<p id="p2"><strong>Hello World</strong></p>
<script>
var p2 = document.getElementById('p2');
console.log(p2.innerHTML);
p2.innerHTML = '<em>안녕하세요</em>';
p2.innerHTML += '<mark>반갑습니다</mark>';
</script>태그 속성과 객체 속성
태그속성: 태그에 명시된 속성(왼쪽) attribute
객체속성: JS로 불러들여서 저장했을 때 (문서 객체로 가지고 왔을 때) 속성 (오른쪽) property
둘 다 한글로는 '속성'인데 property가 훨씬 복잡한 것
태그 속성
- attribute
- 태그에 명시된 속성을 말한다.
- 태그 속성 메소드
1) 속성값 알아내기 : getAttribute('속성')
2) 속성값 변경하기 : setAttribute('속성', '값')
3) 속성값 삭제하기 : removeAttribute('속성')
객체 속성
- property
- JavaScript로 저장한 문서 객체가 가지는 속성이다.
- 태그에 명시된 attribute와 비슷하지만 다르다.
- 객체 속성 사용
1) 객체.속성
2) 객체['속성'] - F12 -
[Elements]탭 -[Properties]탭에서 property를 확인할 수 있다.
CSS 처리하기
- 문서 객체의 style 속성을 이용한다.
- style 속성으로 지정한 CSS 속성은 inline 방식으로 적용된다.
(JavaScript로 지정한 CSS는 항상 적용된다.) - style 속성 뒤에 CSS 속성을 작성한다.
1) 하이픈(-)을 제거한 뒤 camel case 방식으로 CSS 속성을 바꾼다.
예시) 객체.style.fontSize = '32px'
2) CSS 속성을 문자열(string) 형식으로 그대로 사용한다.
예시) 객체.style['font-size'] = '32px'
<p id="p5">Hello World</p>
<script>
var p5 = document.getElementById('p5');
p5.style.fontSize = '32px';
p5.style.color = 'red';
p5.style['text-align'] = 'center';
</script>
