728x90
반응형
선언
- <script> 태그를 사용
- <script> 태그는 HTML 파일 내부의 <head>나 <body> 안 어느 곳에서 선언 가능
- 하지만 <body> 안의 끝부분에 선언한 것을 권장함
- ‘src’와 ‘‘type’ 속성을 사용하여 JavaScript를 선언
- src 속성은 외부의 JavaScript 파일을 HTML 문서에 포함할 때 사용하며, 생략 가능
- type 속성은 미디어 타입을 지정할 때 사용. JavaScript 코드는 ‘text/javascript’로 지정
|
1
2
3
4
5
|
<head>
<meta charset="UTF-8">
<title>JavaScript 선언</title>
<script src="hello.js" type="text/javascript"></script>
</head>
|
cs |
주석(comment)
- 한 줄 주석(Line Comment)과 블록 주석(Block Comment)이 있다(가능하면 한 줄 주석으로 사용)
- 한 줄 주석은 //code로 표기하고, 블록 주석은 /* code */로 표기
변수(variable)
- 타입을 명시하지 않고 var keyword를 사용하여 선언(java와 다른 점)
- 변수의 타입 지정 없이 값이 할당되는 과정에서 자동으로 변 수의 타입이 결정 >> 같은 변수에 여러 타입의 값을 할당 가능(java와 다른 점)
자료형(data type)
- 원시 타입(primitive type)과 객체 타입(object type)으로 분류
- 원시 타입에는 숫자, 문자열, boolean, null, undefined와 같이 5가지 / 이를 제외한 모든 값은 객체 타입
| 자료형 | typeof | 설명 |
| 숫자형 | number | 정수 또는 실수형 |
| 문자열형 | string | 문자, single or double quotation으로 표기 |
| boolean형 | boolean | 참(true) or 거짓(false) |
| undefined | undefined | 변수가 선언 되었지만 초기화가 되지 않을 경우 |
| null | object | 값이 존재하지 않을 경우 |
숫자형
- 모든 숫자를 8byte의 실수 형태로 처리 >> 실수로 처리 (정수만을 표현하기 위한 데이터 타입은 없다)
- JavaScript는 언더플로우, 오버플로우, 0으로 나누는 연산에 대해 예외를 발생시키지 않는다
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
// 언더플로우
console.log(0 / 100); // 0
console.log(-0 / 100); // -0
// 오버플로우
console.log(100 / 0); // Infinity
console.log(-100 / 0); // -Infinity
console.log(Infinity / 0); // Infinity
console.log(-Infinity / 0); // -Infinity
console.log(0 / 0); // Nan
console.log(parseInt('3A')); // 1
console.log(parseInt('A')); // NaN
console.log(new Number('1')); // 1
console.log(new Number('1A')); // NaN
</script>
</head>
|
cs |
문자형
- 문자 하나를 표현하는 char와 같은 문자형은 제공하지 않는다. ‘a’와 같은 한 글자도 문자열로 표현
- 작은따옴표(‘, single quotes) 또는 큰 따옴표(“, double quotes) 둘 다 사용 가능(혼용 불가)
- 요즘엔 백 틱(`)을 이용하여 표현한다(HTML에서 속성 값과 헷갈림 방지)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
console.log("큰따옴표 문자열"); // 큰따옴표 문자열
console.log('작은따옴표 문자열'); // 작은따옴표 문자열
console.log("3.14"); // 3.14
console.log('문자열 안에 포함된 \'작은따옴표\' 표현'); // 문자열 안에 포함된 '작은따옴표' 표현
console.log("특수문자 사용\n줄바꿈 했다."); // 특수문자 사용
// 줄바꿈 했다.
</script>
</head>
|
cs |
boolean, null과 undefined
- 비어 있는 문자열, null, undefined, 숫자 0은 false로 간주된다
- null은 값이 없거나 비어 있음을 뜻하고, undefined는 값이 초기화되지 않았음(정의되지 않음)을 의미
- null과 undefined는 의미가 비슷하지만 값을 할당하지 않은 변수는 undefined가 할당되고(시스템 레벨), 코드에 서 명시적으로 값이 없음을 나타낼 때(프로그램 레벨)는 null을 사용
자동 형 변환
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var msg = 40;
console.log("message : " + msg); // message 40(문자열을 만나 40이 문자열이 됨)
msg = "hello javascript";
console.log(msg); // hello javascript
console.log("The message is " + 40); // The message is 40
console.log(40 + " is The message"); // 40 is The message
console.log("40" - 5); // 35(빼기는 앞뒤로 숫자만 가능해서 숫자로 인식됨)
console.log("40" + 5); // 405(+는 append의 의미도 갖고 있어서 자동형변환 안됨)
console.log(parseInt("123.45") + 1); // 124
console.log(parseFloat("123.45") + 1); // 124.45
console.log("1.1" + "1.1"); // 1.11.1
console.log((+"1.1") + (+"1.1")); // 2.2(숫자 앞에 오는 기호는 주로 부호라서 숫자로 인식)
</script>
</head>
|
cs |
변수 호이스팅(Variable Hoisting)
- 추가 작성할 것임
상수(constant)
- 상수의 표기법은 모든 문자를 대문자를 사용하고 단어 사이는 ‘_’로 표기
let과 const
| 키워드 | 구분 | 선언위치 | 재선언 |
| var | 변수 | 전역 | 가능 |
| let | 변수 | 해당범위 | 불가능 |
| const | 상수 | 해당범위 | 불가능 |
연산자 delete
- 프로퍼티 제거
- 자바에서는 클래스 안에 변수를 추가할 수 없는데, 자바스크립트에서는 실행 시에 변수 추가가 가능하다. 추가가 되면 삭제도 되는데 그게 delete
연산자 ==와 ===
- ==: 값의 일치 확인
- ===: 값과 타입까지 일치하는지 확인
|
1
2
3
4
5
|
var num = 10;
var str = "10";
console.log('num == str : ' + (num == str)); // true
console.log('num === str : ' + (num === str)); // false
|
cs |
객체
- 객체는 이름과 값으로 구성된 프로퍼티의 집합
- 문자열, 숫자, boolean, null, undefined를 제외한 모든 값은 객체
- 객체는 키(Key)와 값(Value)으로 구성
- 객체는 프로퍼티를 동적으로 추가하거나 삭제 가능
- JavaScript의 함수는 일급 객체이므로 값으로 사용할 수 있다. 따라서 프로퍼티의 값으로 함수를 사용 가능(자스에서 함수는 자바의 메서드라고 생각하면 되는데, 자바에서는 메서드를 객체라고 하지도 않지만 자스에서는 메서드를 객체라고 한다)
- 객체 생성(객체 리터럴/object생성자 함수/생성자 함수)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<head>
<meta charset="UTF-8" />
<title>Insert title here</title>
<script type="text/javascript">
var obj = {}; // empty obejct
console.log(typeof obj);
var student = { //객체리터럴
name: '김길동',
area: '서울',
classNum: 7,
info: function () {
console.log(this.name + '은 ' + this.area + this.classNum + '반');
},
};
console.log(typeof student); // object
console.log(student); // {name: "김길동", area: "서울", classNum: 7, info: f}
student.info(); // 김길동은 서울7반
</script>
</head>
|
cs |
- 객체는 dot(.)을 사용하거나 대괄호([])를 사용해서 속성 값에 접근(대괄호 내에 들어가는 변수 이름은 반드시 문자열이어야 한다)
- 속성 값 변경, 추가, 제거
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Insert title here</title>
<script type="text/javascript">
// 객체 리터럴
var empty_object = {};
var member = {
'user-name': '홍길동',
age: 20,
city: '서울',
};
// 속성의 값 변경
member.age = 30;
member['city'] = '경기도';
console.log(member['age']); // 30
console.log(member.city); // 경기도
// 속성 추가
member.tel = '010-1234-5678';
console.log(member.tel); //010-1234-5678
delete member.tel;
console.log(member.tel); //undefined
var x = member;
x.city = '제주도';
console.log(member.city); //제주도
</script>
</head>
<body></body>
</html>
|
cs |
여기서 member.tel을 삭제했는데도 undefined가 나오는 이유: console.log로 다시 member.tel을 호출하면서 호이스팅이 일어났기 때문 -> 변수가 선언되었지만 초기화가 되지 않았기에 undefined
함수(function)
- JavaScript에서 함수는 일급(first-class) 객체
- 함수를 변수, 객체, 배열 등에 저장할 수 있고 다른 함수에 전달하는 전달 인자(콜백 함수) 또는 리턴 값으로 사용 가능
- 함수 정의 방법은 함수 선언문, 함수 표현식, Function 생성자(constructor) 함수 세 가지 방식 제공
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
// 함수 선언문(함수이름 써야함)
function sum1(num) {
var sum = 0;
for (var i = 1; i <= num; i++) {
sum += i;
}
console.log(sum); // 55
}
sum1(10);
// 함수 표현식(함수 이름 생략)
var sum2 = function (num) {
var sum = 0;
for (var i = 1; i <= num; i++) {
sum += i;
}
console.log(sum); // 55
}
sum2(10);
|
cs |
함수 호이스팅
- 함수 선언문의 경우 함수 선언의 위치와 상관없이 코드 내 어느 곳에서든지 호출이 가능
|
1
2
3
4
5
|
var result = plus(5,7);
console.log(result); //12
function plus(num1,num2){
return num1+num2;
}
|
cs |
- 함수 표현식의 경우 함수 호이스팅이 아니라 변수 호이스팅이 발생(TypeError발생)
|
1
2
3
4
5
6
|
var result = plus(5,7);
console.log(result);
var plus = function(num1,num2){
return num1+num2;
};
|
cs |
매개변수
- JavaScript에서 함수 정의 시 매개변수에 대한 타입은 명시하지 않는다
- 함수를 호출할 때 정의된 매개변수와 전달 인자의 개수가 일치하지 않더라도 호출 가능
매개변수는 2개인데 실제 할당된 값이 1개라면? 첫 번째 매개변수에 일단 값이 들어가고 나머지 하나는 undefined(변수는 선언됐지만, 값이 할당되지 않아서 undefined)
콜백 함수
- 콜백 함수(Callback function)는 함수를 명시적으로 호출하는 방식이 아니라 특정 이벤트(시스템이 호출)가 발생했을 때 시스템에 의해 호출되는 함수를 말함
- 일반적으로 콜백 함수는 매개변수를 통해 전달되고 전달받은 함수의 내부에서 어느 특정 시점(이벤트 발생 시점)에 실행됨
- 콜백 함수는 주로 비동기식 처리 모델에서 사용됨. >> 처리가 종료되면 호출될 함수(콜백 함수)를 미리 매개변수에 전달하고 처리가 종료되면 콜백 함수를 호출
Window 객체 사용: alert, confirm, prompt
- Window 객체는 웹 브라우저에서 작동하는 JavaScript의 최상위 전역객체이다
- window 객체의 함수를 호출하면 브라우저에서 제공하는 창을 open
| alert() | 브라우저의 알림창 |
| confirm() | 브라우저의 확인/취소 선택창 |
| prompt() | 브라우저의 입력 창 |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function openAlert() {
alert("알림창입니다.");
}
function openConfirm() {
if (confirm("확인입니까?")) {
console.log("확인 눌렀네요.");
} else {
console.log("취소 눌렀네요.");
}
}
function openPrompt() {
var txt = prompt("문자열 입력", "사용자입력");
console.log(txt);
}
</script>
</head>
|
cs |
Window 객체 사용: location-href/reload, history
- location.href : 할당 된 URL로 페이지 이동, 히스토리가 남아서 뒤로 앞으로 가기 가능, 페이지를 이동하기 때문에 history에 이력이 추가되며 엄밀히 말하면 페이지 새로고침은 아니다. url주소의 메소드인 get은 되자만, post 데이터는 포함하지 않는다.
- location.reload() : 현재 페이지를 새로고침, Post 데이터를 포함해 페이지를 새로 고침 한다. reload() 함수는 옵션을 주어 실행할 수 있으며, 1개의 boolean 인자를 옵션 값으로 받습니다. 옵션 값이 설정되지 않은 경우에 기본값인 false로 실행되며, window.location.reload(true) 로 새로고침 시 서버로부터 캐시값이 아닌 다시 전부 새로 불러온다.
반면, window.location.reload(false) 로 새로고침시, 서버가 아닌 클라이언트PC 에서 캐시값으로 다시 불러온다.
- history.back() / history.forward() : 브라우저의 뒤로 가기/앞으로 가기 버튼과 같은 동작
새 창 열기: open()
- window.open(‘페이지 URL’, ‘창이름’, ‘특성’, 히스토리 대체여부);
- 창이름(string) : open 할 대상(_blank, _self등) 지정 혹은 창의 이름(창이름을 없앨 경우 클릭할때마다 창이 새로 뜬다)
- 특성(string) : 새로 열릴 창의 너비, 높이 등의 특성 지정.
- 히스토리 대체여부(Boolean) : 현재 페이지 히스토리에 덮어 쓸지 여부(true/false)
새 창 닫기: close()
- opener 속성
부모 창 컨트롤
- window 객체의 opener 속성
window 객체 프로퍼티
- window 객체는 웹 브라우저에서는 구동 되는 JavaScript의 전역 객체
-
self 현재 창 자신, window와 같음 statusbar 창의 상태 바 document document 객체 toolbar 창의 툴 바 history history 객체 personalbar 창의 퍼스널 바 location location 객체 scrollbars 창의 스크롤 바 opener open()으로 열린 창에서 볼 때 자기를 연 창 innerHeight 창 표시 영역의 높이(픽셀) (IE 지원 안함) parent 프레임에서 현재프레임의 상위프레임 innerWidth 창 표시 영역의 너비(픽셀) (IE 지원 안함) top 현재프레임의 최상위프레임 outerHeight 창 바깥쪽 둘레의 높이 (IE 지원 안함) frames 창안의 모든 프레임에 대한 배열 정보 outerWidth 창 바깥쪽 둘레의 너비 (IE 지원 안함) locationba location 바 pageXOffset 현재 나타나는 페이지의 X위치 (IE 지원 안함) menubar 창 메뉴바 pageYOffset t 현재 나타나는 페이지의 Y위치 (IE 지원 안함)
window 객체 함수
| alert() | 경고용 대화상자를 보여줌 |
| confirm() | 확인, 취소를 선택할 수 있는 대화상자를 보여줌 |
| prompt() | 입력창이 있는 대화 상자를 보여줌 |
| open() | 새로운 창을 오픈 |
| scroll() | 창을 스크롤 함 |
| find() | 창안에 지정된 문자열이 있는지 확인. 있으면 true, 없으면 false (IE지원 안함) |
| stop() | 불러오기를 중지 (IE지원 안함) |
| print() | 화면에 있는 내용을 프린터로 출력 |
| moveBy() | 창을 상대적 좌표로 이동. 수평방향과 수직방향의 이동량을 픽셀로 지정 |
| moveTo() | 창을 절대적 좌표로 이동. 창의 왼쪽 상단 모서리를 기준으로 픽셀을 지정 |
| resizeBy() | 창의 크기를 상대적인 좌표로 재설정 |
| resizeTo() | 창의 크기를 절대적인 좌표로 재설정. 창 크기를 픽셀로 지정 |
| scrollBy() | 창을 상대적인 좌표로 스크롤. 창의 표시영역의 수평방향과 수직방향에 대해 픽셀로 지정 |
| scrollTo() | 창을 절대적인 좌표를 스크롤 창의 왼쪽 상단 모서리를 기준으로 픽셀로 지정 |
| setTimeout() | 지정한 밀리초 시간이 흐른 후에 함수 호출(한 번만) |
| clearTimeout() | setTimeout 함수를 정지 |
| setInterval() | 지정한 밀리초 주기마다 함수를 반복적으로 호출 |
| clearInterval() | setInterval 함수를 정지 |
| eval() | 문자열을 JavaScript 코드로 변환하여 실행 |
DOM(Document Object Model)
- HTML 계층 구조의 제일 위에는 document 노드가 있다
- 그 아래로 HTML 태그나 요소(element)들을 표현하는 노드와 문자열을 표현하는 노드가 있다
- Document는 HTML 또는 XML 문서를 표현
문서 객체 만들기
| createElement(tagName) | element node를 생성 |
| createTextNode(text) | text node를 생성 |
| appendChild(node) | 객체에 node를 child로 추가 |
객체의 속성 설정
| setAttribute(name, value) | 객체의 속성을 지정 |
| getAttribute(name) | 객체의 속성값을 가져옴 |
innerHTML & innerText
| innerHTML | 문자열을 HTML태그로 삽입 |
| innerText | 문자열을 text node로 삽입. |
문서 객체 가져오기
| getElementById(id) | 태그의 id 속성이 id와 일치하는 element 객체 얻기 |
| getElementsByClassName(classname) | 태그의 class 속성이 classname과 일치하는 element 배열 얻기 |
| getElementsByTagName(tagname) | 태그이름이 tagname과 일치하는 element 배열 얻기 |
| getElementsByName(name) | 태그의 name 속성이 name과 일치하는 element 배열 얻기 |
| querySelector(selector) | selector에 일치하는 첫번째 element 객체 얻기 |
| querySelectorAll(selector) | selector에 일치하는 모든 element 배열 얻기 |
728x90
반응형