Java Script
: 객체 (object)기반의 스크립트 언어
: 프로토 타입의 언어 = 동적타입 언어
: 유연한타입의 언어로 변수의 타입이 고정되지 않고 여러 타입의 값을 자유롭게 대입할 수 있음.
: HTML 로는 웹의 내용을 작성하고, CSS로는 디자인을하며, Java Script 로는 동작을 구현.
: 주로 웹브라우저에서 사용되지만 Node.js와 같은 프레임 워크를 사용하여 서버 프로그래밍도 가능.
: 현재 대부분의 웹 브라우저(휴대폰 포함)에는 자바스크립트 인터프리터(해석기)가 내장 되어있음.
1. 자바 스크립트 기능
- 웹 요소 제어
- 웹 어플리케이션 제작
- 다양한 라이브러리 사용
- 서버구성및 서버용 프로그램제작
2. 사용방법
-
웹문서 안에
<script>태그로 사용하기
: 웹 문서 안이면 어디든 작성 가능. 보통</body>태그 앞쪽에 작성
: 스크립트 소스가 위치한곳에서 실행됨. -
외부 스크립트 파일을 연결해서 사용하기
: 외부 (.js) 파일을 연결
:<script src='외부 스크립트 파일 경로'></script>
: 코드의 가독성이 좋고 유지 보수도 용이하며 로딩 속도도 빨라짐.
3. 기본 구성
- 세미콜론
;으로 문장을 구분 - 대소문자를 정확히 구분하여 사용.
1) 변수
: 데이터를 저장할수 있는 메모리 공간
: 변경될 수 있는값
: 선언 = var 변수 ;
2) 리터럴(Literal)
: 직접 표현되는 값 자체
3)식별자 (identifier)
: 변수나 함수이름 작성할때 사용하는 이름
: 영문자, 숫자, _, $만 사용 가능.
: 시맨틱태그와 같이 의미를 담아서사용하면 좋음
: 예약된 키워드는 사용 불가
4) 주석
: /** 설명 */, /* 설명 */ , //설명
4. 타입 (스펙)
: 데이터의 값에 따라 달라짐 Type inference =타입 추론
1) number
: +,- 기호를 가지는 값
ex) var point =123 ;
var point2 = -1.23 ;
: 정수와 실수를 따로 구분하지 않고 실수로만 표현.
: 값의 범위 = 2의 64 승 ~ -2 의 53제곱 +3
==> 3가지 특수값
→ infinity : 양수 무한대
→ -infinity : 음수 무한대
→ NaN: Not-a-Number 숫자가 아닌값 (정의되지 않은 값 또는 표현할 수 없는 값)
0을 0으로 나누거나 숫자로 변환 불가한 값으로 산술연산을 시도할 때 반환되는 읽기전용 값.
2) String
: " " 또는 ' '로 둘러싸인 문자
: 값의 범위 = 2의 53승 -1까지
: " '문자열' " 또는 ' "문자열" ' 도 가능
: 숫자와 문자열 연산도 가능 ==> 숫자를 문자열로 자동 변환 하여 문자열을 연결하는 연산수행.
3) boolean
: true 또는 false
4) null
:아직값이 정해지지 않은 것.
= object 타입의 null 이라는값
5) undefined
: 타입이 정해지지 않은 것.
: 변수의 default 값
: 변수 선언할때 값을 주지 않고 선언만 했을때 undefined로 정의.
6) object
: 객체 타입 = class
: 여러 property 나 method를 같은 이름으로 묶어놓은 집합체
7)Symbol
: 유일하고 변경할 수 없는 타입.
: 객체의 property를 위한 식별자로 사용.
: Symbol() 함수로 생성
< 타입 변환 >
: 자바 스크립트의 변수는 타입이 고정되지 않아 같은 변수에 다른타입의 값을 다시 대입할 수 있음.
: 개발자에 의해 의도적으로 변환 가능.
- 묵시적 변환
: 기대하는 타입의 값이 아닌 다른 타입의 값이 오면 자동으로 타입을 변환.
ex)
10+'문자열'; // 10이 문자열로 변환됨
'3' * '5'; // 연산을 위해 두 문자열이 모두 숫자로 변환됨.
1-'문자열' // NaN -
명시적 변환 = 타입 캐스팅
: 어떤 타입으로 변환 할 지 명시해서 의도적으로 변환 하는 방법
==>Number(),String (),Boolean(),Object(),paseInt(),parseFloat()소괄호 안에 값을 넣어서 어떤 타입인지 명시해줌. -
숫자 → 문자열 변환
:String()함수 또는toString()메소드 사용(nulll과 undefined를 제외한 모든타입이 가지고있음.)
: 숫자 Number 객체는 문자열 변화 메소드를 별도 제공함.
toExponential(): 정수 부분은 1 자리, 소수 부분은 e 표기법으로 변환
toFixed(): 소수부분을 입력받은 수만큼 사용하여 변환
toPecision(): 입력받은 수만큼 유효 자릿수를 사용하여 변환. -
불린 → 문자열
:String()함수 또는toString()메소드 사용
ex)
String(true); // 문자열 'true'
false.toString(); // 문자열 'false'- 불린 → 숫자
:Number()함수 사용.
ex)
Number(true); // 1
Number(false); // 0
!!!!!!! false로 처리되는 값
- false
- undefined
- null
- 0, -0
- NaN
- '' (빈 문자열)-
날짜 → 문자열 / 숫자
: Date 객체는 문자열과 숫자 둘다 변환 가능한 유일한 타입
: 문자열 변환은 String() 함수 또는 toString() 메소드 사용
==>String(Date());=Date().toString();
: 숫자 변환은 별도 제공
getDate(): 일자를 변환 (1~31)
getDay(): 요일을 변환 (일요일 = 0 ~ 토요일 = 6)
getFullYear(): 연도를 변환 YYYY
getMonth(): 월을 변환 (1월 = 0 ~ 12월 = 11)
getTime(): 1970년 1월 1일 부터 현재 까지의 시간을 millisecond 단위 숫자로 반환.
getHours(): 시를 변환 (0~23)
getMinutes(): 분을 변환 (0~59)
getSeconds(): 초를 변환 (0~59)
getMilliseconds(): 초를 밀리초 단위로 변환 (0~999) -
문자열 → 숫자
:Number()함수 사용.
: 변환 함수 별도 제공
parseInt(): 문자열을 분석하여 특정 진법의 정수로 변환
parseFloat(): 문자열만 가능. 부동 소수점 수로 변환
ex)
alert(parseInt('0')); //0
alert(parseInt('-10')); //-10
alert(parseInt('10.52')); //10.52
alert(parseFloat('10.52')); //10.525. 기본 입출력
-
window.alert(메세지)
: 가장 많이 사용하는 알림창 출력방법.
: 브라우저와는 별도의 대화상자를 띄워줌
: window는 생략가능.
: 사용자가 확인 버튼을 누를때까지 창을 띄우며 다른창은 비활성화 됨.(modal window) -
prompt(메세지, 기본값)
: 텍스트 필드가 있는 입력창.
: 간단한 메세지를 입력할수 있고 프로그램에서 그 내용을 사용할 수 있음.
: 기본값은 지정해도 되고 안해도됨.
ex)
var age= prompt('나이를 입력해주세요',32);
alert(`당신의 나이는 ${age}살입니다.`); = alert('당신의 나이는 '+ age +'살 입니다.');-
confirm(메세지)
: 사용자가 yes/no를 선택하여 클릭할 수 있는 확인창
: 선택 결과에 맞는 프로그램이 동작. -
HTML DOM을 이용한 innerHTML프로퍼티
:getElementByID()나getElementsByTagName()로 선택자를 지정한후 변경 및 출력. -
document.Write()
: 스크립트 내에서 html 코드를 작성할때 사용.
: 단순히 브라우저 화면에서 결과값을 확인하는 용도
: 웹 페이지가 로딩후 실행될때 가장먼저 데이터를 출력.
: 웹페이지의 모든 내용이 로딩된 후에 실행이 되면 먼저 로딩된 모든 데이터를 지우고 자신의데이터를 출력
==> 대부분 테스트나 디버깅에 사용됨. -
console.log()
: 웹브라우저의 콘솔을 통해 데이터 출력
==>crtl+ shift+i또는F12로 실행
: 자세한 사항까지 출력되어 디버깅할때 좋음.
: 간단하게 출력하고 확인할때 사용하기 좋은 inner printer
연산자
1. 산술 연산자
: + , - , * , / , % , **
: + 는 산술연산자 이면서 문자열에 사용되면 연결 연산자, 증감연사자로도 사용됨.
: + 를 제외한 다른 연산자는 문자열을 숫자로 변환하여 정상 연산작업을 함
ex)
var x= 1, y=3;
alert(y-x); // 2
var x='my'+' sister'; //문자열+문자열 또는 문자열 +숫자 형식일때는 연결 연산자의 역할
alert(x); //my sister
alert(1+'2'); //12 ==> '2'를 문자로 인식
alert(1+2+'5'); // 35 ==> 1과 2는 더하고 '5'는 연결
alert(8-'2'); //6
alert('8'/'2'); //4
alert('8'*2); //16- 숫자가 아닌 타입 앞에 +를 붙여주면 숫자로 변환하여 연산함.
ex)
var x= 1;
alert(+x);
var y =-2;
alert(+y); // 무동작
alert(+true); // true=1이므로 1로 변환
alert(+' '); // 0
var apples ='2'; // 문자열 타입
var oranges ='3';
alert(apples+oranges); //23 문자열 끼리 연결
alert(+apples + +oranges); // 5 문자열타입 앞에 +때문에 숫자로 인식
|| 단항연산을 먼저 한 후 이항 연산
alert(Number(apples)+Number(oranges));2. 대입 연산자
: = , += , -= , *= , /= , %=
ex)
var n = 2;
n+=5+3; // 산술연산자 연산 후 대입연산자 연산 ==>우선순위가 같으면 대부분 다른 연산자 작용후 대입 연산자 작용.
alert(n); // 10 5+3 을 2에 더해서 합침.
3. 증감 연산자
: ++ , --
: 단항 연산자
: 반드시 변수에 써줘야 함 ==> 값에 직접 대입 X
ex)
var counter= 3;
counter++;
alert(counter); //4
counter--;
alert(counter); //3
var counter= 1;
alert(2* ++counter); //4 2*2(전치 증감이라 먼저 증가한 후에 연산)
alert(2* counter++); //4 2*2(후치 증감이라 아직 2)
alert(counter); //3 연산 후 증가4. 비교 연산자
: == (값 비교) , === (타입비교) , !=, !== ,>, >= , < , <=
: 피연산자가 둘다 문자열이면 첫번째 문자부터 알파벳 순서대로 비교
: 두개의 피연산자의 타입이 다르면 비교가 불가 하므로 항상 false 반환.
: ==은 두개의 피연산자의 타입이달라도 강제 변환후 값이 같으면 true, ===은 타입까지 모두 같아야 true
: 동등비교 연산결과가 이상할땐 타입비교.
ex)
var x= 3, y= '3';
x==y //true
x===y //false5. 논리 연산자
: &&(and) , ||(or) , !(not)
: 참 또는 거짓으로만 반환
: &&와 || 는 이항연산자이고 결합방향은 왼→오, ! 는 단항 연산자이고 결합방향은 오→왼.
ex)
true && false; //false
true || false; //true
!0 // true
!1 //false
'Cat' && 'Dog' //'Dog'
'Cat' || 'Dog' //'Cat'==> true나 false로 정의 되지 않는 값들은 그 자체를 true 로 인식하고 평가함 .
&& 는 두개중 나중의 피 연산자값을 반환 하고, || 는 둘중 먼저 true인 값을 반환함(왼쪽이 true 면 오른쪽은 연산하지 않고 바로출력)
6. 비트 연산자
: &(and) , |(or) , ^(xor) , ~(not) , <<(left shift) , >>(right shift) ,>>>
: bit 단위로 논리 연산 수행.
: shift 연산자로도 이용 가능.
제어문
: 프로그램의 순차적인 흐름을 제에해야 할때 사용하는 실행문
: 반복문, 조건문, 함수 등이 있음.
1. 조건문
1) if (조건식){true일 때 수행문}
: 조건식의 결과가 true 면 실행문을 수행. 거짓이면 수행하지 않음.
2) if(조건식){ true일 때 수행문 } else{ false일 때 수행문}
: if의 조건식이 true면 실행문 수행 false이면 else 실행문 수행
3) if(조건식1){ 조건식1이 true일 때 수행문 } else if(조건식2){ 조건식2가 true일 때 수행문 } else{ 모두 false일 때 수행문}
: 조건이 여러개일때 조건식에 맞는 실행문 수행.
4) 삼항 연산자
: 조건식? true일때 반환 값 : false일 때 반환값 ;
ex)
var num = 2;
var kind;
- if
if (num > 0) {
kind = '양수';
alert(kind);
}- if/else
if (num > 0) {
kind = '양수';
} else {
kind = '음수';
}
alert(kind);- if/else if/else
if (num > 0)
kind = '양수';
else if (num < 0)
kind = '음수';
else kind = '0';
alert(kind);- 삼항 연산자
num>0? alert('양수') :(num<0? alert('음수'): 0);5)switch(조건식){
case 값1 : 값 1일때 실행문 ;
break;
case 값2 : 값 2일때 실행문 ;
break;
......
default : 어떠한 값도 해당되지 않을 때 기본 실행문 ;
break; }
: default 는 필수 조건은 아님.
: 각 case 절은 break를 반드시 포함해야함.
ex)
var month = 1;
var monthName;
switch(month){
case 1 : monthName = 'January';
break;
case 2 : monthName = 'Febuary';
break;
case 12 : monthName= 'December';
break;
default: alert('유효하지 않은 값입니다.')
}
alert(monthName);2. 반복문
1) while(조건식){ 조건식이 true 인동안 반복 실행 }
: 조건식의 결과를 변경하는 실행문이 존재하지 않으면 무한 루프.
: 조건식의 결과가 변할수 있도록 수행문에는 증감식을 반드시 포함 해야함.
2) do{ 수행문 } while( 조건식 );
: 먼저 수행문을 한번 실행 한 후에 조건식 검사.
: 조건식에 상관없이 한번은 무조건 수행.
3) for (초기식 ; 조건식; 증감식){ true일 때 수행문; }
: () 안의 식은 생략 가능
: 쉼표연산자 (,)를 이용해서 여러개의 초기식 또는 증감식을 동시에 사용가능.
4) for(변수 in 객체){ 객체의 프로퍼티 개수만큼 반복할 실행문}
: 객체의 열거 가능한 프로퍼티에 순차적으로 접근 할 수 있음.
-
label: 식별 영역
: 프로그램내의 특정 영역을 식별할수 있게 해주는 식별자.
: continue문이나 break 문으로 프로그램을 특정영역으로 옮길때 사용. -
countinue (label명);
: 루프 내에서 사용하며, 해당 루프의 나머지를 건너뛰고 다음 조건식으로 넘어가게 함.
: 보통 예외처리를 제외하고 싶을 때 사용. -
break (label명);
: 루프 내에 사용하며, 반복문을 완전히 종료 시키고 다음 실행문으로 흐름을 이동시킴.
: 조건식의 결과에 상관없이 반복문을 빠져나가고 싶을때 사용.
객체 (object)
: key 와 값으로 구성된 프로퍼티(property)의 정렬되지 않은 집합.
: 원시 타입을 제외한 모든 값들은 객체.
: 동적으로 변화가 가능해서 메모리공간을 확보할 때 예측이 어려움.
: 원시타입은 값을 직접 전달받는 pass-by -value 방식이지만 객체타입은 주소값으로 참조받는 pass(call)-by reference 방식.
==> immutable (변경 불가한값)
==> mutable(변경 가능한 값)
-
프로퍼티 (Property)
: key(식별자) 와 value(값)로 구성.
: 모든 자바 스크립트의 객체는 Object 객체와 Object.prototype 객체의 모든 프로퍼티를 상속받음. -
메소드
: 프로퍼티의 값이 함수 일때
: 객체에 제한이 되는 함수
:toString(),isPrototypeOf(),hasOwnProperty(),valueOf()등.
1. 생성
1) 리터럴 표기방법
var 객체이름= {
프로퍼티이름1 : 값1,
프로퍼티이름2 : 값2,....};
2) 생성자 함수 이용
var 객체이름 = new 프로퍼티이름 ();
2. 참조
: 객체이름.프로퍼티이름 == 객체이름 ['프로퍼티이름']
3. 삭제
: delete 객체이름.프로퍼티이름;
: 객체의 프로퍼티만을 삭제하기 때문에 함수나 변수에 사용하면 소용 없음.
4. 수정 및 갱신
: 객체이름[프로퍼티이름] = 바꿀 값;
5. 복사및 전달
: pass(call)-by reference방식으로 실제 값이아닌 주소를 참조하고 참조 받음.
6. 순회
1) for (var 변수 in 객체이름 ){ 열거 가능한 프로퍼티 개수만큼 반복할 실행문; }
: 모든객체에서 사용가능하며
: 객체의 key 값에는 접근이 가능하지만 value 값에는 직접 접근 불가
: 배열에 사용하면 key값인 index에만 접근이 가능하므로 객체[key]를 통해 간접적으로 접근해야함.
: 순서가 보장되지 않아서 속성간의 순서가 중요한 경우에는 비추천.
: length 연산자를 사용할 수없고, value값은 String 일 경우 연산이 불가함.
2) for (var 변수 of 객체이름){ 열거 가능한 프로퍼티 개수만큼 반복할 실행문; }
: 반복 가능한 객체에 사용.( array, map , set argument등)
: Iterator 속성을 가진 객체의 값을 반복할 수 있고, String 타입에도 적용가능.
: value 값에 직접 접근하여 순회가능.
ex)
var array= ['one', 'two'];
for(var index in array){
alert(index+':'+array[index]);
}
array.name='My array';
for (var index in array){
alert(array[index]); // index를 통해 value값에 접근
}
/* 배열에는 for-of 문이 더 적합 */
const arr = [1,2,3];
for (const value of arr){
alert(value); // value값에 직접접근 가능.
} 함수
: 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록({ })
: 이름과 배개변수를 가지며 필요할 때 마다 호출하여 사용.
: 하나의 타입으로 변수에 대입하거나 프로퍼티 지정도 가능.
: 다른 함수 내에 중첩하여 정의하는것도 가능.
: first-class object(일급객체) 생성, 대입, 연산, 인자, 반환값등 프로그래밍 언어의 기본적 조작을 제한없이 사용할 수 있음.
1. 기본 구조 및 문법
1) 정의
:function 함수 이름(매개변수1, 매개변수2,...){ 수행문 ;}
2) 반환문
: return 매개변수를 이용한 수행문 ;
: 함수의 실행을 중단하고 수행문의 값을 사용자에게 반환.
: 반환문은 배열이나 객체를 포함한 모든 타입가능.
3) 호출
: 함수이름 (매개변수1, 매개변수2,...);
: 함수를 실행하기 위한 명령
ex) 정사각형 넓이 구하기
function square (x,y) {
return x*y;
}
square(2,3); //넓이 64) 값으로 활용.
: 변수에 대입을 하거나 다른 함수의 인수로 사용
ex)
var a = function sum(a,b) { return a+b;};
alert(a(4,5)); //9 함수를 변수에 대입할 때는 함수의 주소를 a가 참조하므로 직접적으로 지정하며 호출이 불가하고 변수를 통해 간접적으로 호출 해야함.
alert( a(a(1,2),7)); //10 a(1,2)함수를 인수로 대입.2. 변수
1) 지역변수 (local variable)
: 함수 내에서만 사용하는 변수
: var를 사용하여 선언.
2) 전역변수 (global variable)
: 함수외부에서 선언되어 html 코드 전체에서사용가능
: var 없이 선언.
3) 호이스팅
: 웹브라우저 해석기가 코드에서 var 로 선언된 변수를 먼저 인식하는 것.
: 함수 안에서 선언된 모든 변수는 함수 전체에 걸쳐 유효하다는 뜻.
: 변수가 함수의 동작보다 늦게 선언되어도 변수가 있다는건 알고 있지만 값은 인식하지 못해서 타입이 정해지지 않은 변수상태 (undefined)
4) 재선언 및 재할당
: var 변수에 한해서 재선언및 재할당이 가능 .
: 재할당시에는 var 없이 값만 다시 대입
: 재선언시에는 var 변수 = 값; 형태로 다시 써줌.
5) let 변수
: 값을 재할당은 가능하지만 재선언은 불가.
: let 으로 선언한 변수는 호이스팅이 없음.
: 변수를 선언한 블록{ }에서만 유효함. 밖에서는 사용 불가
: 변수 사용 범위를 정확히 해서 재선언에 의한 오류나 복잡성을 줄임
6) const 변수
: 상수 변수로 프로그램 안에서 변하지 않는 상수값을 할당할 때 사용.
: 재할당 및 재선언이 불가.
: 변수를 선언한 블록{ }에서만 유효함. 밖에서는 사용 불가
!!!!!!! 변수 사용방법 Tip
- 전역변수의 사용은 최소화
- var 변수(지역변수)는 함수의 시작부분에 선언.
- for 문에서 카운팅하는 변수는 var를 쓰지 않음.
- var 보다는 재선언이 불가한 let을 쓰는게 중복에 의한 오류를 줄일 수 있음.
3. 함수의 프로퍼티
1) arguments
: 자바 스크립트 내장 객체
: 함수 호출시 전달하는 인수들이 암묵적으로 arguments객체에 담겨 함수내부로 전달됨.
: 인자 값을 배열 형태로 가짐.
2) caller
: 자신을 호출한 함수를 가르킴.
3) length
: 함수 정의시 작성된 매개 변수의 갯수.
4) name
: 함수의 이름
: 이름이 없는 함수는 빈 문자열을 값으로 가짐.
5) prototype
: 함수 객체에만 있는 프로퍼티로 생성자 함수로 함수를 생성할 때 사용함.
!!!!!! ES6 버전에서 추가된 화살표 함수
- 함수명 = (매개변수1, 매개변수2,..) => { 수행문 };
함수명 (); //호출
ex)
const hi = ()=>alert('안녕하세요.'); // 매개변수 없는 단항함수
hi();
const hi1 = () =>{ // 매개변수 없는 다항함수
alert('안녕하세요.');
alert('반갑습니다.')
}
hi1();
let sum= (a,b) =>a+b; // 매개변수를 받는 함수
document.write(sum(10,20));
sum();
hi2 = user => document.write(user + '님 안녕하세요');
hi2('sojin'); // 'sojin'을 user 에 대입 !!!!!! 선언 즉시 실행 함수
-
기명 즉시 실행함수
:( function 함수이름( 매개변수1, 매개변수2, .... ){ 실행문 반환문 }( 값1, 값2, .... ) ); -
익명 즉시 실행함수
:( function ( 매개변수1, 매개변수2, .... ){ 실행문 반환문 }( 값1, 값2, .... ) );
ex)
- 기명 즉시 실행 함수
(function sum (){
var a= 3;
var b= 5;
return a+b;
}()); // 8
- 익명 즉시 실행 함수
(function (){
var a= 3;
var b= 5;
return a+b;
}()); // 8
(function (x,y){
sum= x+y;
}(10,20));
document.write('실행결과 : '+sum); // 실행결과 : 30클로저 (Closure)
: 내부함수가 외부 함수의 맥락(context)에 접근할 수 있는 매커니즘.
: 외부함수의 실행이 끝나 소멸된 이후에도 내부함수가 외부함수의 변수에 접근이 가능.
==> 외부함수는 외부 함수의 지역변수를 사용하는 내부 함수가 소멸 될 때가지 소멸되지 않음.
실행 컨텍스트 ( Execution Context)
: scope, hoisting, thism function, closure등의 동작 원리를 담고 있는 원리
: 스크립트 코드가 실행되고 연산되는 범위를 나타내는 추상적인 개념 ==> 코드들이 실행되기 위한 환경
1. 코드실행에 필요한 정보
1) 변수 : 전역변수, 지역변수, 매개변수, 객체의 프로퍼티
2) 함수 선언 위치
3) 변수의 범위 (scope)
4) this
2. 실행 컨텍스트의 객체
1) VO(Variable Object)
: 코드 실행에 필요한 정보를 담을 객체를 생성함.
: var 변수, 파라미터, arguments, 함수 선언부 등을 저장함.
: 실행 컨텍스트의 프로퍼티이므로 값을가지는데 전역 컨텍스트와 함수컨텍스트의 경우는 값들이 가르키는 객체가 다름.
2) SC(Scope Chain)
: 실행 컨텍스트가 참조할 수 있는 변수 함수 선언등의 정보가 담긴 리스트.
: 스크립트 엔진이 스코프 체인을 통해 렉시컬 스코프를 파악.
: 하위 →상위 →전역 으로 타고 올라가면서 체인이 검색을 함.
3) this
: 자신의 값이 할당되는 객체
3. 종류
1) 전역 컨텍스트 (Global Context)
: 함수 내의 코드를 제외한 모든 스크립트
: 스택 구조로 전역컨텍스트에 포함되는 모든 실행 가능한 코드들은 순서대로 쌓임
: LIFO(Last In First Out) 순서로 실행.
2) 함수 컨텍스트 (Function Context)
: 선언된 함수가 호출이 될때 생성.
: 함수의 모든 동작이 종료되면 소멸됨.
: closure를 사용하면 스코프가 소멸되지 않아 계속 이용 가능.
: 함수마다 가지고 있지만 호출이 되어야만 사용 가능.
DOM(Document Objct Model)
: 문서 객체 모델
: XML 이나 HTML 문서에 접근하기 위한 일종의 인터페이스.
: 문서 내의 모든 요소를 정의 하고, 각각의 요소에 접근하는 방법을 제공.
: W3C의 표준 객체 모델이며, 계층 구조(Tree 구조)를 가짐 ( 문서 → 요소 →속성 →데이터)
Tree 구조
: 진입점 (Entry point)는 document 객체이며, 최종점은 텍스트를 나타내는 데이터객체
: 트리 구조에서 가지가 갈라져 나간 항목 = node
: 트리의 시작 부분인 HTML이 Root 노드.
1. DOM 요소에 접근하기
: DOM안의 HTML 요소에 접근 할때는 반드시 Document 객체부터 시작.
1) HTML 요소에 접근하기 위한 메소드
요소이름.getElementsByTagName(태그이름): 해당 태그 모두 선택 (하위요소 제외)노드.querySelector(CSS선택자): 해당 CSS 선택자 모두 선택. (하위요소 포함)요소이름.getElementById(아이디): 해당 아이디를 가진 요소 중 첫번째 요소 하나만 선택요소이름.getElementsByClassName(클래스 이름): 해당 클래스에 속한 모든 요소 선택요소이름.getElementsByName(name 속성값): 해당 name 속성(attribute)값을 가지는 모든 요소 선택
2) HTML 요소를 생성해주는 메소드
document.createElement(요소이름): 지정 요소 생성document.write(텍스트): 텍스트 출력.
3) HTML 요소의 내용변경
-
요소이름.innerHTML = 내용
: 태그까지 반영해서 수정해줌. -
요소이름.innerText = 내용
: 텍스트의 내용만 수정해줌.
ex)
<div id="content"></div>
<input type="button" value="innerText" onclick="setInnerText()">
<input type="button" value="innerHTML" onclick="setInnerHtml()">
function setInnerText() {
const element = document.getElementById('content');
element.innerText = "<div style='color:red'> A </div>";
}
function setInnerHtml() {
const element = document.getElementById('content');
element.innerHTML = "<div style='color:red'> A </div>";
}2. 속성 다루기
1) getAttribute('속성이름')
: 속성 노드의 값을 가져오는 역할
ex)
function displaySrc(){
var cup = document.querySelector('#cup');
alert('이미지소스 : '+ cup.getAttribute('src')); // cup이라는 아이디를 가진 요소의 src 속성을 가져옴
}2) setAttribute('속성이름', '값')
: 속성 노드의 값을 설정하거나 바꾸는 역할.
ex)
var cup = document.querySelector('#cup');
var smallpics = document.querySelectorAll('.small'); // small 클래스의 객체들을 가져와서 배열로 저장.
for (let i= 0; i < smallpics.length; i++){ // 배열 순회
smallpics[i].addEventListener('click',changePic);
}
function changePic(){
var newPic = this.src;
cup.setAttribute('src', newPic); // cup 객체의 src 속성에 newPic에 담긴 경로가 들어가게 설정
}4. event 객체
: 사용자의 동작의 정보만 저장.
: 동작이 발생한 대상에 접근하려면 this 를 사용해서 접근.
- 이벤트 처리 방법
1) 직접 함수를 연결
: 요소이름.이벤트 = function(){ 실행문 ;}
ex)
var cup = document.querySelector("#cup");
cup.onclick = function(){ // onclick이라는 이벤트를 오버라이딩해서 재정의.
alert("이미지를 클릭했습니다");
}2) 함수 이름사용
: 요소이름.이벤트 = 함수 이름 ;
ex)
cup.onclick = changePic; // cup을 클릭하면 changePic 함수 실행
function changePic() {
cup.src = "images/cup-2.png";
}3) addEventListener() 사용
: 요소이름.addEventListener(이벤트, 함수, 캡쳐여부);
: 이벤트를 처리하는 함수를 리스너로 등록하고 사용 ==> 이벤트 핸들러
: 하나의 객체에 이벤트에 따라 여러가지 리스너를 등록할 수 있음.
: 명령어 없이 HTML 태그 속성으로 리스너를 등록할 수도 있음.
ex)
var cover = document.getElementById("cover");
cover.addEventListener("mouseover",changePic, false); //cover 요소에 리스너 등록
cover.addEventListener("mouseout",originPic, false);
function changePic() { // 리스너 함수 기능설정.
cover.src = "images/easys-2.jpg";
}
function originPic() {
cover.src = "images/easys-1.jpg";
}4) CSS 속성 변화
: document.요소이름.style.속성이름
: 이벤트 발생시 css속성에 접근하여 스타일에 변화를 줄 수 있음.
5. 노드 추가/삭제
: 노드리스트 를 사용해야함
==>배열과 비슷해서 인덱스 번호로 특정 위치의 노드에 접근 가능.
ex)
document.querySelectorAll('li')[1];: 하나의 태그를 노드로 추가할때는 태그에 해당하는 속성과 텍스트도 함께 추가해야함.
- 요소 노드 추가 하는 방법
1) createElement()
: document.createElement(노드이름);
2) createTextNode()
: document.createTextNode(텍스트);
: 새로만든 노드에 넣을 내용을 담는 텍스트 노드 생성.
3) appendChild()
: 부모노드.appenChild(자식노드);
: 새로운 노드와 내용이 담긴 노드를 연결.
: 추가할때는 맨끝으로 추가됨.
- 노드 삭제
: 부모노드에서 자식노드를 선택해서 삭제
: 반드시 부모노드를 먼저 찾아야함.
1) 노드이름.parentNode
: 삭제할 노드의 부모노드를 찾는 프로퍼티
2) 부모노드.removeChild(자식노드)
: 부모노드에서 해당 자식노드를 삭제함.
