on
JavaScript
JavaScript
1. JavaScript 소개
[ JavaScript 개요 ]
∘ 프로토타입 기반 스크립트 프로그래밍 언어
* 프로토타입 기반 프로그래밍
- 객체지향 프로그래밍의 한 형태
- 클래스 기반 언어의 상속과 다르게 객체를 원형(프로토타입)으로 하여 복제를 통해 재사용
- class-less, 프로토타입 지향, 인스턴스 기반 프로그래밍
∘ 객체지향 개념을 지원
∘ 웹 브라우저가 JavaScript를 HTML과 함께 다운로드하여 실행
∘ 대부분 JavaScirpt Engine : ECMAScript
∘ 각 브라우저에서는 ECMAScript 스펙을 준수하는 방식으로 JS 지원한다.
[ JavaScript 특징 ]
∘ HTML, CSS와 함께 웹을 구성하는 요소
∘ 웹 브라우저에서 동작하는 유일한 PL
∘ 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어
∘ 인터프리터&컴파일러의 장점을 결합한 JS 엔진은 처리속도가 느린 인터프린터의 단점을 해결
* JavaScript 엔진 ex) Chrome의 V8엔진
∘ 명령형, 함수형, 프로토타입 기반 OOP를 지원하는 멀티 패러다임 PL
2. JavaScript 시작
[ JavaScript 선언 ]
∘ HTML에서
∘ 태그
- src’, ‘type’ 속성을 사용하여 JS 선언 (HTML5부터 type 속성 생략가능)
- HTML 파일 내부의 어느곳에서나 선언 가능 ( body의 끝 권장 )
- 의 JS : 브라우저의 입/출력 발생 이전에 초기화되어 브라우저가 먼저 점검 (느리다)
- 의 JS : 브라우저가 HTML부터 해석하여 화면에 그리기 때문에 사용자 입자에서 빠르다고 느낌
∘ 속성 ‘src’: 외부의 JS 파일을 HTML문서에 포함할 때 사용 (생략 가능)
∘ 속성 ‘type’ : 미디어 타입을 지정할 때 사용 (JS 코드는 ‘text/javascript’)
ex)
[ JavaScript 예시 ]
∘ 반복문 : for(var i=1; i<10 ; i++) { }
∘ 변수 선언 : var num = 1;
∘ 콘솔창에 출력 : console.log(“num = ”+ num);
3. JavaScript 기본 문법
[ 주석 (Comment) ]
∘ // code : 한줄 주석
∘ /* code */ : 블록 주석
[ 변수 (Variable) ]
∘ 타입을 명시하지 않고 var를 사용하여 선언
∘ JS는 동적타입 언어이므로 값이 할당되는 과정에서 자동으로 변수 타입이 결정된다.
∘ Java와 변수/함수명 표기법 동일 (Camel Case)
[ 자료형 (data type) ]
∘ 원시타입과 객체타입으로 분류
∘ 원시 타입 : number, string, boolean, null, undefined
∘ 객체 타입 : 그외 나머지
1. 숫자 (number)
∘ JavaScript는 숫자의 정수/실수를 구분하지 않는다.
∘ 모든 숫자를 8byte 실수로 처리 ( 정수만을 표현하기 위한 자료형이 없다. )
∘ 숫자 연산시 실수 형태로 하기에 특정 소수점을 정확하게 표현 불가능
var x = 0.3 – 0.2; var y = 0.2 – 0.1; console.log(x == y); // false
∘ overflow, underflow, divided by zero 예외를 발생시키지 않는다.
∘ 숫자와 관려되 특별한 상수가 존재
- Infinity : 무한대를 나타내는 상수
- NaN(Not a Number) : 숫자가 아님을 나타내는 상수
ex) console.log(0/0); // Nan
2. 문자열 (string)
∘ 16bit Unicode 문자 사용
∘ 문자 하나를 표현하는 char과 같은 문자형을 제공하지 않는다. ‘a’도 문자열임
∘ ‘’, “” 둘다 사용 가능
∘ \ 도 사용 가능
∘ 문자열 안에 ‘’, “” 사용 : \‘ , \“
3. boolean, null, undefined
∘ 빈 문자열, null, undefined, 0 : false
∘ null : 값이 없거나 비어있음 [ 프로그램 레벨 ]
∘ undefined : 값이 초기화되지 않았음(정의되지 않았음)을 의미 [ 시스템 레벨 ]
4. 자동 형변환
∘ JavaScript는 매우 느슨한 형변환 규칙 적용
∘ 어떤 자료형이든 전달 가능, 그 값을 필요에 따라 변환 가능
∘ 서로 다른 자료형의 연산 가능
∘ 느슨한 규칙이 혼란을 야기하는 경우가 있다.
* 변수 호이스팅 (Variable Hoisting)
∘ var 키워드를 사요한 변수는 중복 선언 가능
∘ Hoisting
- var, function 등 모든 선언문이 해당 Scope의 처음으로 옮겨진것처럼 동작하는 특성
- Javascript는 모든 선언문이 선언되기 이전에 참조가 가능하다.
∘ 변수의 생성
- 선언 단계 : 변수 객체에 변수 등록
- 초기화 단계 : 변수 객체에 등록된 변수를 메모리에 할당 (undefined)
- 할당 단계 : undefined로 초기화된 변수에 실제 값 할당
* 선언단계와 초기화단계가 한번에 이루어진다.
console.log(num); // undefined var num = 123; console.log(num); // 123 { var num = 456; } console.log(num); // 456
∘ num이 선언되지 않았지만 모든 선언문은 Hoisting되므로 undefined로 초기화
var num=123;이 Hoisting되어 console.log(num); 앞에 var num;이 옮겨진것처럼 동작
∘ JavaScript는 블록레벨 스코프를 가지지 않는다.
num은 전역변수이므로 두번째 num에서 재할당된다.
[ 상수 ]
∘ ECMAScript6 이후 상수 표현 지원
∘ 상수 표기법 : 모든 문자를 대문자, 단어 사이는 ‘_’ 표기
∘ const LIST_COUNT = 10;
키워드 구분 선언위치 재선언 var 변수 전역 스코프 가능 let 변수 해당 스코프 불가능 const 상수 해당 스코프 불가능
[ 연산자 ]
∘ 산술연산자, 비교연산자, 논리연산자, 기타연산자 제공
∘ === 타입 + 값이 같은지 확인
[ 반복문 ]
∘ for (초기화 ; 조건식 ; 증감표현식) {}
∘ for (var 변수 in 배열 or 객체) {}
4. JavaScript 객체 (Object)
[ 개요 ]
∘ 객체 : 이름과 값으로 구성된 프로퍼티의 집합
∘ 문자열, 숫자, boolean, null, undefined 를 제외한 모든 값
∘ 전역객체를 제외한 JS객체는 프로퍼티를 동적으로 추가/삭제 가능
∘ JavaScript의 함수는 일급객체, 값으로 사용 가능
[ 객체의 생성 ]
1. 객체 리터럴
∘ 가장 일반적인 방법
∘ { } 로 객체 생성
var student { name = ‘형준혁’, area = ‘서울’, info : function () { } }
2. Object 생성자 함수
∘ new 연산자와 Object 생성자 함수를 호출하여 빈 객체 생성
∘ 빈 객체 생성 후 프로퍼티 or 메소드를 추가하여 객체 완성
var student = new Object(); student.name = ‘형준혁’; student.area = ‘서울’; studentc.info = function () { }
3. 생성자 함수
∘ 생성자 함수를 이용하면 클래스처럼 사용하여 프로퍼티가 동일한 객체 여러개를 간단히 생성할 수 있다.
function Student(name, area) { this.name = name; this.area = area; this.info = funtion () {} } var student1 = new Student(‘형준혁’, ‘서울’); var student2 = new Student(‘동생준혁’, ‘대구’);
[ 객체의 속성값 조회 ]
∘ dot(.), []를 통해 속성값 접근
∘ [ ] 에 들어가는 프로퍼티 이름은 문자열이어야 한다.
∘ 객체에 없는 속성에 접근하면 undefined
∘ 객체 속성 조회시 || 연산자 사용 간ㅇ
var middle = employee[‘middle_name’] || ‘none’;
[ 객체의 속성 값 변경/추가/제거 ]
∘ 값 변경시 dot(.), [] 사용
member[‘age’] = 25; member.age = 25;
∘ 할당시 속성이 없으면 객체에 속성 추가
member.hobby = ‘코딩’; // member에 hobby 속성 추가
∘ delete 연산자로 속성 제거
delete member.city;
[ 객체의 참조 ]
∘ 객체는 복사되지 않고 참조된다.
∘ 참조타입 : Object, Array, Date, Error 등
∘ 타입확인 방법 : typeof( )
5. JavaScript 함수
[ 선언/호출 ]
∘ JavaScript의 함수는 일급 객체이다.
∘ 함수를 변수, 객체, 배열등에 저장할 수 있고, 다른 함수의 매개변수/리턴값으로 사용 가능
∘ 함수는 프로그램 실행 중 동적 생성
∘ 함수 정의 방법 : 1.함수선언문 2.함수표현식 3.Function생성자함수
[ 함수 호이스팅 ]
1. 함수 선언문
∘ 선언 위치와 상관없이 어디서든 호출 가능
∘ JavaScript는 모든 선언(var, function)을 호이스팅하기 때문
∘ 함수 선언문으로 정의된 함수는 JS엔진이 script가 로딩되는 시점에 이 함수를 변수객체 저장한다.
∘ 함수 선언, 초기화, 할당이 한번에 이루어짐
2. 함수표현식
∘ 함수 호이스팅 X, 변수 호이스팅이 발생
[ 매개변수 ]
∘ 함수 정의시 매개변수의 타입 명시 X
∘ 정의된 매개변수와 전달인자 개수가 달라도 호출 가능
[ 콜백함수 ]
∘ 특정 이벤트가 발생했을때 시스템에 의해 호출되는 함수
∘ 매개변수를 통해 전달되고, 전달받은 함수의 내부의 특정시점에 실행
∘ 주로 비동기식 처리 모델에서 사용
∘ 처리가 종료되면 호출될 콜백함수를 미리 매개변수에 전달하고 처리가 종료되면 콜백함수 호출
setTimeout( function() { console.log(‘3초 후 실행’); } ,3000 );
6. Web Browser 와 Window 객체
[ Window 객체 ]
∘ 웹 브라우저에서 작동하는 JavaScript의 최상위 전역객체
∘ 브라우저와 관련된 여러 객체와 속성/함수 존재
∘ JS에서 기본으로 제공하는 프로퍼티, 함수 포함 ex) Number 객체, setInterval() 함수
∘ BOM (Browser Object Model) 으로 불리기도 함
[ Window 객체 사용 ]
∘ window 객체 함수를 호출하면 브라우저에서 제공하는 창을 open
∘ alert( ) : 브라우저의 알림 창
∘ confirm( ) : 브라우저의 확인/취소 선택 창
∘ prompt( ) : 브라우저의 입력창
∘ navigator 객체
- 브라우저의 정보가 내장된 객체
- navigator 정보로 서로 다른 브라우저를 구분할 수 있으며, 브라우저 별 다르게 처리 가능
- HTML5에서 위치정보를 알려주는 역할
∘ location 객체
- 현재 페이지의 주소(URL)와 관련된 정보를 알 수 있다.
- location.href : 값 미할당시 현재 url 조회 / 값 할당 시 할당된 url로 이동
- location.reload() : 현재 페이지 새로고침
∘ history 객체
- history.back() / history.forward() : 브라우저의 뒤로가기/앞으로가기
[ 새 창 열기 ]
∘ window 객체의 open() 함수로 새 창을 열 수 있다.
∘ window.open(‘페이지 url’, ‘창이름’, ‘특성’, 히스토리 대체 여부);
- 창 이름(string) : open할 대상(_blank, _self ...) 지정 혹은 창의 이름
- 특성(string) : 새로 열릴 창의 너비, 높이 등
- 히스토리 대체여부(boolean) : 현재 페이지 히스토리에 덮어 쓸지 여부
∘ 창 여닫기
- 이벤트를 이용하여 특정 시점에 창을 열 수 있다.
- window.close(); 함수로 현재 창을 닫을 수 있다.
∘ 부모 창 컨트롤
- window 객체의 opener 속성을 이용하여 부모창 컨트롤 가능
- opener 객체는 부모 창의 window 객체
[ window 객체 프로퍼티 ]
∘ document 객체는 HTML 문서와 관련된 객체로 가장 많이 사용하는 객체
∘ self, document, history, location, opener, parent , top, frames, locationbar, menubar, statusbar etc.
[ window 객체 함수 ]
alert() 경고용 대화상자를 보여줌 confirm() 확인 / 취소 대화상자를 보여줌 prompt() 입력창 대화상자를 보여줌 open() 새로운 창 오픈 scroll() 창을 스크롤 find() 창안에 지정된 문자열이 있는가 (T/F) stop() 불러오기 중지 print() 화면의 내용 프린터로 출력 moveBy() 창을 상대적 좌표로 이동 , 수평 / 수직방향의 이동량 픽셀 지정 moveTo() 창을 절대적 좌표로 이동 , 왼쪽 상단 모서리 기준 픽셀 지정 setTimeout() 지정한 밀리초 시간이 흐른 후 함수 호출 clearTimeout() setTimeout 함수 정지 setInterval() 지정한 밀리초 주기마다 함수 반복 호출 clearInterval() setInterval 함수 정지 eval() 문자열을 JavaScript 코드로 변환하여 실행
7. HTML & DOM
[ DOM(Document Object Model) 개요 ]
∘ HTML과 XML문서의 구조를 정의하는 API 제공
∘ 문서 요소 집합을 트리 형태의 계층 구조로 HTML 표현
∘ HTML 계층 구조 최상위에 document 노드가 존재
∘ 그 아래로 HTML 태그나 요소들을 표현하는 노드 & 문자열을 표현하는 노드 존재
∘ Document 계층 구조
- Document는 HTML & XML 문서 표현
- HTMLDocument는 HTML 문서와 요소만을 표현
- HTMLElement의 하위 타입은 HTML 단일 요소나 요소집합의 속성에 해당하는 JS 프로퍼티 정의
- Comment 노드는 HTML이나 XML의 주석 표현
[ Document 객체 만들기 ]
1. 객체 생성
∘ createElement(tagName) : element node 생성
∘ cretaeTextNode(text) : text node 생성
∘ appendChild(node) : 객체에 node를 자식으로 추가
window.onload = function() { var title = document.createElement(‘h2’); var msg = document.createTextNode(‘hello’); title.appendChild(msg); // <-- ‘hello’ document.body.appendChild(title); // body <-- }
2. 객체의 속성 설정
∘ setAttribute(name, value) : 객체의 속성 지정
∘ getAttribute(name) : 객체의 속석ㅇ값을 가져옴
3. inner
∘ innerHTML : 문자열을 HTML 태그로 삽입
∘ innerText : 문자열을 text node로 삽입
[ Document 객체 가져오기 ]
∘ document.function( )
∘ getElementById(id) : id로 element 객체 얻기
∘ getElementsByClassName(classname) : class로 element 배열 얻기
∘ getElementsByTagName(tagname) : tagname으로 element 배열 얻기
∘ getElementsByName(name) : 태그의 name으로 element 배열 얻기
∘ querySelector(selector) : selector에 일치하는 첫번째 element 객체 얻기
ex) var t = document.querySelector(‘#header’);
∘ querySelectorAll(selector) : selector에 일치하는 모든 element 배열 얻기
ex) var s = document.querySelectorAll(‘#abc’);
[ Document 객체 제거 ]
∘ removeChild(chilenode) : 객체의 자식 노드를 제거
공유하기 글 요소 저작자표시
from http://gudwnsgur.tistory.com/17 by ccl(A) rewrite - 2021-12-29 01:00:41