Frontend/Javascript (26) 썸네일형 리스트형 브라우저 객체 모델 (Browser Object Model) 브라우저 객체 모델 (Browser Object Model) 자바스크립트에서는 웹 페이지를 구성하는 HTML 태그의 모든 요소와 웹 브라우저를 구성하는 요소들을 객체로 정의하여 제공 객체들을 계층 구조로 분류 브라우저 객체 웹 브라우저를 대상으로 이루어지 객체 window 객체 : 창 document 객체 : 문서 history 객체 : 웹 브라우저 기록 정보 location 객체 : 주소 정보 navigator 객체 : 웹 브라우저 정보 (종류 판별 등) 브라우저 객체의 계층 구조 window 객체 창에 대한 전반적인 상황을 제어하는 최상위 객체 자바스크립트에서 사용되는 모든 객체는 window 객체의 하위에 존재 navigator 객체를 제외한 모든 객체는 window 객체를 통해 접근하여 사용 wi.. 자바스크립트 객체 (Object) - 내장 객체 자바스크립트 객체 (Object) 종류 내장 객체 브라우저 객체 문서 객체 (DOM) 사용자 정의 객체 내장 객체 (Built in Object) 미리 정의되어 있는 객체 선언 과정을 통해 객체 변수를 정의해서 사용 특별한 경우에만 사용자 정의 객체를 정의하여 사용 대부분의 경우에는 내장 객체 많이 사용 대표적인 내장 객체 Date : 날짜와 시간을 처리하기 위한 객체 Array : 배열을 만들기 위한 객체 String : 문자열을 다루기 위한 객체 Math : 수학 계산을 위한 객체 Event : 발생하는 이벤트에 관한 정보를 제공하는 객체 Screen : 화면의 해상도, 색상, 크기에 관한 정보를 제공하는 객체 객체 생성 및 사용 var today = new Date(); // Date 객체 생성 v.. 디폴트 매개변수 디폴트 매개변수 함수의 매개변수에 기본값을 설정하는 것 전달되는 값이 없을 때 매개변수의 값 사용 전달 되는 값 순서대로 매개변수가 받음 일반 매개변수와 같이 사용할 경우 디폴트 매개변수는 맨 뒤에 위치 예제 화살표함수 화살표 함수 자바의 람다식과 동일 function 키워드 대신 화살표(=>)를 사용하여 더 간략한 방법으로 함수를 선언하는 방식 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법 이벤트 리스너 처리에 사용 this 가지지 않음 메서드 작성 시 this를 사용해야 한다면 화살표함수는 이용하지 않는 것이 좋음 화살표 함수 내부에서 this 사용하면 그 this는 외부에서 값을 가져옴 (윈도우 전역 객체를 가리킴) 매개변수 => { 실행 부분 } // function 키워드 지우고 인수 뒤에 => 붙이기 ( ) => { return name; } // 매개변수가 없는 경우. 괄호 생략 불가 x => { … } // 매개변수 1개인 경우. 괄호 생략 가능 (x, y) => { …. } // 매.. 콜백 함수 (Callback Function) 콜백 함수 (Callback Function) 매개변수로 함수를 전달 받아서, 함수의 내부에서 실행하는 함수 인자로 전달되는 함수를 콜백 함수라고 부름 콜백 함수로는 주로 익명 함수 사용 자바스크립트의 비동기 처리 방식의 문제점을 해결하기 위해 사용하는 함수 비동기 처리 방식 : 특정 코드(작업)가 끝나기 전에 다음 코드(작업)를 처리하는 방식 자바스크립트는 싱글 스레드로 한 번에 하나의 작업만 처리 가능 특정 코드(작업)가 끝나기 전에 다음 코드(작업)를 처리 할수가 없음 콜백 함수를 사용해서 특정 시점에 호출하여 비동기 처리 작업을 수행 콜백 함수 패턴을 사용하면 작업1을 진행 시키고 작업이 완료되었을 때 알림을 받을 콜백 함수를 설정해서 작업1이 완료되면 콜백 함수가 호출되고, 해당 콜백 함수 안에.. 익명 함수 (Anonymous Function) 익명 함수 (Anonymous Function) 함수 이름이 없는 함수 함수명 대신 변수명에 함수 코드를 저장해서 구현 변수명에 값을 대입하는 형식으로 맨 끝에 세미콜론 사용 함수 호출 시 변수명을 함수명처럼 사용 변수명 다르게 함수 코드 저장 가능 (여러 변수에 같은 코드 적용하여 사용 가능) 호이스팅 불가 콜백 함수로 주로 사용 (콜백함수 : 매개변수로 사용되는 함수. 함수 내부에서 실행되는 함수. 코드 간결화 위해 사용) var 변수명 = function() { } var start = function() { 함수 수행 문장; }; 예제 조건문 문자 비교 함수의 개념 / 함수 선언문과 함수 표현식 자바스크립트 함수 종류 자동 호출되는 함수 선언적 함수 (일반 함수 : function) 익명 함수 콜백 함수 화살표 함수 디폴트 매개변수 함수 독립적인 모듈 { } 특정 기능을 수행하고 결과를 돌려주는 독립적인 코드 집합 메소드, 모듈, 기능, 프로시저 등으로 불림 함수를 사용하기 위해서는 반드시 호출해야 함 함수 선언 형식 function 함수명() { // 함수가 수행하는 문장; } 자동 호출되는 함수 : 호출하지 않아도 스스로 동작하는 함수 (function() { // 함수가 수행하는 문장; })(); 다양한 함수 호출 방법 // 함수 호출 : 함수 사용 show(); // 방법1 : 필요한 곳에서 함수 이름 불러서 호출 // 함수 호출 방법2 : HTML 이벤트 속성에서 호출 show // 함.. 배열 배열 동일한 이름을 갖는 원소들의 연속적 저장 영역 배열의 원소는 메모리 내에서 순서대로 저장 배열의 각 원소는 인덱스([0]부터 시작)로 구별 다양한 자료형의 데이터 저장 가능 연산 : push pop shift unshift 배열의 전체 원소에 값을 저장하거나 출력하기 위해서는 반복문 사용 배열 선언 및 출력 예제 ... ... 예제 - 1 ... ... 예제 - 2 ... ... 이전 1 2 3 다음
