본문 바로가기

자바스크립트 강좌

[자바스크립트 완벽 가이드 정리] Window 객체 Window 객체 주 역할 : 클라이언트 측 자바 스크립트 프로그램의 전역 객체 1. 타이머 setTimeout(), setInterval() 사용하면 지정한 시간이 흐른 다음 한번 이상의 호출되는 함수를 등록할 수 있다 Window 객체의 메서드로 정의되어 있다 실제 브라우저 창과는 아무 관련이 없다 브라우저 내장객체 window 객체 프로퍼티 status 브라우저의 상태바에 문자열을 출력하는 경우에 사용 defaultStatus 브라우저의 상태바에 초기 문자열을 설정 length 창안의 프레임 수 name 창 이름 self 현재 창 자신, window와 같음 window 현재 창 자신, self와 같음 parent 프레임에서 현재프레임의 상위프레임 top 현재프레임의 최상위프레임 opener open.. 더보기
[자바스크립트 완벽 가이드 정리] 함수 함수 함수 : 한 번 정의하면 몇 번이든 실행할 수 있고 호출 할 수 있는 자바스크립트 코드블록 매개변수 : 함수 몸체 내에서 지역변수처럼 취급 메서드 : 어떤 객체의 속성으로 저장된 자바스크립트 함수 생성자 : 새로 생성된 객체를 초기화 하는데 쓰이는 함수 자바스크립트 함수는 다른 함수 내에 중첩되어 정의될 수 있고 , 함수는 해당 함수가 정의되어있는 유효범위에 속한 어떤 변수에도 접근 가능하다 (클로저) 1. 함수 정의하기 - function - 함수이름 식별자(함수이름) - 쉼표로 구분된 0개혹은 임의 개수의 식별자들과 이 식별자들을 둘러싼 한 쌍의 괄호 - 0개 혹은 임의 개수의 자바스크립트 구문을 포함하는 한쌍의 중괄호 function 함수이름(전달인자1, 전달인자2, … ,전달인자n) { 구문.. 더보기
[자바스크립트 완벽 가이드 정리] 배열 배열 배열 : 정렬된 값의 집합 원소 : 배열 안의 값 인덱스 : 배열의 위치번호 자바스크립트 배열 타입이 고정적이지 않음 (같은 배열에 있는 원소의 값이 서로 다를 수 있다) 32비트 인덱스를 사용한다 크기가 동적이다 배열을 생성하거나 크기가 변경되어 다시 할당을 하더라도 배열 크기를 다시 선언할 필요가 없다 모든 배열은 객체 (배열이 객체의 프로토타입으로부터 속성들을 상속 받은 객체이기 때문) 1. 배열 만들기 1.1 배열 리터럴 배열 리터럴 사용하기 - 대괄호 안에 쉼표로 구분해 나열 한 것 - 값으로는 상수 뿐 아니라 임의의 표현식도 사용할 수 있다 - 객체 리터럴 또는 다은 배열 리터럴을 포함할 수 있다 - 배열 리터럴에서 빠진 부분이 존재할 경우, 해당 부분의 원소 값은 undefined가 된.. 더보기
[자바스크립트 완벽 가이드 정리] 구문 구문 구문 : 어떤 일을 하기 위해 실행 1. 표현문 가장 간단한 형태 : 부수효과가 있는 표현식 할당문 , 함수호출 등이 있음 2. 복합문과 빈 구문 하나의 표현식 안에 여러 표현식을 합칠 때에는 쉼표(,)연산자를 사용 2.1 구문블록 구문블록은 여러 구분을 중괄호로 감싼 것 - 세미콜론으로 끝나지 않음 - 들여쓰기를 해주는 것이 좋다 (가독성, 이해도) - 안에서 선언된 변수는 지역변수가 아닌 전역변수이다 2.2 빈 구문 자바스크립트 인터프리터는 빈 구문을 만나면 아무것도 실행하지 않는다 - 종종 몸체가 비어있는 루프를 만들 때 유용 - 임의로 빈 구문 사용시 코드에 고의로 사용했다는 설명을 주석으로 표시 3. 선언문 식별자를 정의, 변수나 함수를 생성하는 중요한 역할을 담당 var, function.. 더보기
[자바스크립트] 클로저 클로저 클로저 : 함수 내에 선언된 로컬 변수를 외부에서도 참조할 수 있는 기능 보는 관점에 따라 모든 자바스크립트 함수가 클로저라고 볼 수 있음 사용처 this.XXXX를 넘기기 위해 사용한다 private변수(보호 해야 할 변수)에 사용한다 주의점 클로저는 변수만 기억할 뿐 값은 기억 하지 않는다 반복문(for문)에서는 클로저를 사용하지 않는다 클로저를 이해하기 위한 예문 function closureTest(a){ return function(b){ return a + b; } } var test = closureTest(1); alert(test(2)); 1. closureTest(1)을 호출한 순간 아래의 영역에 var a =1이 생성되고 function(b){ return a+b; }가 tes.. 더보기
[자바스크립트] 콜백 함수 콜백 함수 디자인 패턴 중 하나인 옵저버 패턴에서 나온 개념 이벤트가 발생시 함수를 통해 전달하는 것 시계의 알람 기능과 비슷하다 (정해진 이벤트 발생시 함수 동작) 특정기능을 수행하기 위한 로직과 기능 수행후 반환되는 결과 값을 가지고 표현하는 로직을 분리 가능 뷰의 분리라는 관점으로 MVC패턴과 유사 아래와 같은 예문을 보면 undefined 값이 출력된다. (결과값이 alert 함수보다 늦게 가져오기 때문) onload=function() { var name; $.getJSON("test.json", "", function(res) { name = res.name; }); alert(name); } 시간차를 두어 해결 할 수는 있다. setTimeout(function() { alert(name);.. 더보기
[자바스크립트 완벽 가이드 정리] 표현식과 연산 표현식과 연산자 표현식 : 인터프리터를 통해 값으로 평가되는 자바스크립트 구문 1. 원시표현식 다른 표현식을 포함하지 않은 그 자체 상수, 리터럴 값, 특정 언어키워드, 변수 참조 2. 객체와 배열의 초기화 표현식 새로운 객체나 배열을 값으로 하는 표현식 '객체리터럴', '배열리터럴'로 불림 특정 프로퍼티와 원소의 값을 지정하는 수많은 하위 표현식을 포함할 수 있음 (원시표현식이 아님) 배열 초기화 표현식 [] 빈 배열 [1+2, 2+3] 3,5 두개의 원소를 가진 배열 var matrix = [[1,2,3], [4,5,6], [7,8,9]]; 표현식 자체가 배열이 되어 중첩 배열을 만듬 var sparseArray = [1,,,,5]; 쉼표사의의 값을 생략할 수 있음 객체초기화 표현식은 사각괄호('['.. 더보기
[자바스크립트 완벽 가이드 정리] 타입, 값 , 변수 타입, 값, 변수 프로그래밍 언어의 가장 기본적인 특징은 그 언어가 지원하는 데이터 타입의 종류 프로그램은 값의 유지가 필요할 때 변수에 값을 할당 변수는 값에 대한 이름을 정의하고, 그 값을 이름으로 참조 이러한 작동방식은 일반적 프로그램 언어가 갖는 특징 중 하나 자바스크립트는 숫자, 문자열, 불리언, null, undefined, 객체라는 값을 가짐 객체 : 이름과 값을 갖는 프로퍼티의 집합 인터프리터 : 메모리관리를 위해 그 객체가 다시 사용되지 않을 거라 판단하고 자동으로 메모리에서 해제 자바스크립트의 타입은 원시타입과 객체 타입으로 나뉠 수 있음 메서드를 가진 타입과 그렇지 않은 타입으로 나뉠 수 있음 수정 가능한 타입과 수정 할 수 없는 타입으로 나뉠 수 있음 * [그림 추가 필요] 자바스크.. 더보기
[자바스크립트 완벽 가이드 정리] 어휘구조 어휘구조 1. 문자집합 유니코드사용 ECMAScript3 표준 Unicode2.1 이상 지원해야 함 ECMAScript5 표준 Unicode3 이상 지원해야 함 * unicode : 지구상 사용되는 대부분의 문자를 표현할 수 있음 1.1 대소문자 구분 자바 스크립트는 대소문자를 구분하는 언어이다 HTML은 대소문자 구별하지 않음 (단, XHTML은 구분) - 자바스크립트와 밀접한 연관이 있으므로 HTML 에서도 대소문자 구별하듯이 사용하자 1.2 공백, 개행 , 제어 문자 토큰들 사이의 공백들을 무시 (타 언어들과 같음, 가독성 증가) 1.3 유니코드 이스케이프 시퀀스 유니코드를 사용 할 수 있게 해 줌 \u 로 시작 16진수 4자리 사용 (ex \u00E9) 2. 주석 기본 자바 문법과 같음 (서로 중.. 더보기