1. 자바스크립트 기본 용어
표현식 expression
: 값을 만드는 코드
문장 statement
: 실행할 수 있는 코드
키워드 Keyword
Tip) 객체내의 메소드에서 객체가 가진 속성을 사용하고 싶을때에는 반드시 this키워드를 사용하여야 한다.
식별자
: 변수, 함수에 이름을 붙일 때 사용하는 단어
- 생성자 함수 이름은 항상 대문자로 시작
- 변수, 인스턴스, 함수, 메서드의 이름은 항상 소문자로 시작
- 여러 단어로 된 식별자는 단어의 첫 글자를 대문자로
Tip) 자바스크립트는 $와 _를 사용할 수 있습니다
Tip) 문자열 안에 따옴표를 넣고 싶으면 서로 다른 따옴표로 감싼다 (ex) ' "문자열" 입니다'
2. 함수
| 함수 생성 방법 | 표현 |
| 익명 함수 | function() { } |
| 선언적 함수 | function 함수() { } |
Tip) 선언 함수는 익명 함수보다 먼저 생성(선언)됩니다
매개변수
: 함수의 괄호에 집어 넣어 함수에 전달하는 것
ex) alert(' 매개변수 ');
//익명 함수는 표현식으로 변수에 대입하거나 다른 함수의 매개변수로 사용할 수 있다
var sum = function(a, b){
return a + b;
}
console.log(sum(10, 5));
반환 값 (리턴 값)
: 함수를 실행한 결과
ex) var minutes = date.getMinutes();
콜백 함수
: 매개변수로 전달되는 함수
Tip) 자바스크립트는 0으로 나누었을 때 오류 발생
3. 객체
Tip) 배열은 [ ] 대괄호를 사용해서 생성, 객체는 { } 중괄호를 사용해서 생성한다
객체
: 자료형 여러 개를 한 번에 저장, 배열은 요소에 접근할 때 인덱스를 사용하지만, 객체는 키를 사용
객체 속성에도 배열 요소처럼 다양한 자료형을 입력할 수 있다. 배열에 있는 값을 요소, 객체에 있는 값을 속성이라고 한다
var object = {
number: 273,
string: 'rintiantta',
boolean: true,
array: [52, 273, 103, 32],
method: function(param) {
alert(param+가 필요합니다.');
}
};
object.method('파라미터');
4. 문서 객체 모델
웹 브라우저가 HTML 파일을 분석하고 출력하는 방식
웹 브라우저는 위에서 아래로 HTML 코드를 읽으면서 태그의 포함 관계에 따라 문서 객체를 Tree 형태로 만든다.
| element node | 요소를 생성하는 node |
| text node | 화면에 출력되는 문자열 |
4-1. 문서 객체 선택
| 개수 | 문서 객체를 선택하는 메서드 | 선택자 |
| 1개 | document.getElementById() | 아이디 |
| document.querySelector() | 선택자 | |
| 1개 이상 | document.getElementsByName() | name 속성 |
| document.getElementsByClassName() | class 속성 | |
| document.querySelectorAll() | 모든 선택자 |
Tip) id 속성이 중복될 때 자바스크립트에서 문제가 될 수 있다
select_id.html
<script>
//이벤트 연결
window.onload = function() {
//문서 객체 선택
var header = document.getElementById('header');
//문서 객체 조작
header.style.color = 'orange';
header.style.background = 'red';
header.innerHTML = 'From JavaScript';
};
</script>
4-2. 문서 객체 조작
SPA Single Page Application
: 웹 페이지를 한 번만 읽어 들이고, 사용자가 조작할 때 웹 페이지 내용을 자바스크립트를 사용해 바꾸는 형태 (ex) youtube
| 글자 속성 | 설명 |
| textContent | 문서 객체의 텍스트를 가져옴 |
| innerHTML | 문서 객체의 HTML 태그를 가져옴 |
//자바스크립트는 특수 문자 '-'를 식별자에 사용할 수 없으므로
//연결된 단어의 첫 글자를 대문자로 변경
var header = document.getElementById('header');
header.style.backgroundColor = 'red';
| CSS의 스타일 속성 | JS의 스타일 식별자 |
| background-image | backgroundImage |
| background-color | backgroundColor |
| box-sizing | boxSizing |
| list-style | listStyle |
| 메서드 | 설명 |
| setAttribute(속성명, 속성 값) | 속성 지정 |
| getAttribute(속성명) | 속성 추출 |
5. 이벤트
이벤트 리스너, 이벤트 핸들러
: event listener == event handler, 이벤트 속성에 넣는 함수
window.onload = function() { };
//onload == 이벤트 속성event property, on을 제외한 load를 event name 또는 event type
//이벤트 속성에 넣는 함수 == event listener, event handler
5-1. 이벤트 모델
| 구분 | 이벤트 모델 종류 | 장단점 |
| DOM* 레벨 0 | 인라인 이벤트 모델 고전 이벤트 모델 |
쉽다 이벤트를 중복해서 연결할 수 없다 |
| DOM 레벨 2 | 마이크로소프트 인터넷 익스플로러 이벤트 모델 표준 이벤트 모델 |
이벤트를 중복해서 연결할 수 있다 웹 브라우저 종류에 따라 연결하는 방식이 다르다 → jQuery 라이브러리를 사용해 극복! |
* : Document Object Model
인라인 이벤트 모델
: HTML 태그 내부에 자바스크립트 코드를 넣어 이벤트를 연결하는 방식
<button onclick="alert('click')">버튼</button>
고전 이벤트 모델
: 과거에 많이 사용한
<body>
<button id="button">버튼 - </button>
<script>
document.getElementById('button').onclick = function() {
this.textContent = this.textContent + '*';
};
</script>
<body>
5-2. 이벤트 사용
기본 이벤트 default event
: 특정 태그가 가진 기본적인 이벤트 (ex) a 태그의 href 속성, form 태그의 제출 버튼을 누르면 자동으로 양식 제출 등
기본 이벤트 제거
(ex) 회원가입 페이지에서 제출 버튼을 누르면 사용자가 정확하게 정보를 입력했는지 확인 후 이동
<script>
//이벤트 리스너: 이벤트 속성에 넣는 함수
window.onload = function() {
var button = document.getElementById('button');
//이벤트 리스너의 반환 값 false로 하여 기본 이벤트 제거
button.onclick = function() {
return false;
}
}
</script>
<body>
<a id="button" href="http://www.naver.com">버튼</a>
</body>