JavaScript (20) 썸네일형 리스트형 var, let, const 차이 let Block 스코프 안에서만 유효 // 괄호안에서만 유효 글로벌 객체에 입력되지 않는다. 호이스팅된다. //엑세스는 불가능 const let과 동일하나 재할당 불가 -------스코프 var => function scoped 함수 레벨 스코프 함수의 코드 블록만을 스코프로 인정 // 코드 블록 내의 변수는 전역변수 ex) { var nathan = 123; } console.log(nathan); // 123 함수 내 선언된 변수 => 함수 내에서만 유효 함수 외부에선 참조 불가 => 지역변수 전역함수 외부에서 생성한 변수 => 전역변수 //전역 변수를 남발할 가능성 높다 //주의해서 사용 let, const => block scoped 블록 레벨 스코프 값이 스코프 안에 있을때만 유효하다 // 코.. event delegation, 버블링, 캡쳐링 이벤트 위임 이벤트 흐름을 관리 해준다 버블링 아래 => 위 클릭시 하위요소 => 상위 요소 차례대로 발생 캡쳐링 위 => 아래 클릭시 상위요소 => 하위 요소 차례대로 발생 // 대부분 버블링 사용 이벤트 전파 중지 event.stopPropagation(); 현재껀 실행되고 다음껄 막음 이벤트 리스너 옵션 기본 => 버블링 true => 캡처링 참고자료 https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/ HTTP, JSON ,AJAX - HTTP HyperText Transfer Protocol 텍스트 기반의 통신 규약 클라이언트와 서버간의 통신에서 많이 사용되는규약 //세계적으로 웹 상에서 가장 흔하게 쓰이는 규약 서버: 자료에 대한 접근을 관리하는 네트워크 상의 시스템 클라이언트 : 그 자료에 접근할 수 있는 프로그램 //웹 , 핸드폰 어플 ex) 클라이언트 (회원가입정보 전송) => 서버 (회원 정보 저장) 클라이언트 , 서버간의 교류 => HTTP 규약 이용하여 발생 Request : 요청 클라이언트가 서버에게 값을 달라고 요청 Response : 응답 서버의 요청에 대한 응답을 클라이언트에게 보냄 - JSON Javascript Object Notation 데이터 저장, 전송시 많이 사용되는 데이터 형식 서버와 클라이언트간의.. Prototype, instance , __proto__, Prototype Chain - Prototype 기초 / 표준 프로토타입이란 ? 함수가 생성될 시 동시에 프로토타입이라는 객체가 생성된다. 프로토타입엔 그 함수의 기능과 , 속성들이 들어있다 객체(object)는 함수(function)로부터 시작된다 //자바스크립트가 실제 실행하는건, 함수를 실행 배열, 객체, 함수 => 함수로 만들어짐 // ex) new Array(), new Object() 객체 => 함수를 실행한것 // new Object 생성자 함수를 실행한것 ex) var a = ["거북"]; var a = new Array("거북"); ex) function foo() {} => var foo = new Function() foo라는 함수를 선언한것은, new Function 생성자 함수를 사용한것과 같음 모든 객체는.. this - this 대부분 객체로 사용됨 //몇가지 예외 존재 문장의 주체에 따라서 나(this) 변경됨 ex) 아버지 : 나는 허리가 아프다 (나 === 아버지) 누구의 것인지 주체 파악하기 주체 , 문장 따로 생각 4가지 사용 방법이있음. //this 사용함수 어떤 방식으로 실행 하느냐 에 따라서 값이 바뀜 1. 일반함수 실행방식 - Regular function call 1 - 1 (in non-strict mode) 일반모드 this === 글로벌 객체 1 - 2 (in strict mode) 엄격한 모드 구체적으로 코드 작성 해야함 this === undefined // strict mode일때 this값 확실히 적용 해줘야 함 strict mode 적용방법 함수 본문 처음에 "use strict"; .. 문자열,숫자열 변환하기 숫자 => 문자 String(변수); 문자 => 숫자 Numner(변수); 이벤트핸들러 1회 적용 후 제거 function aaa(){ alert('사용자함수 실행'); } element.addEventListener("click", aaa); element.removeEventListener("click", aaa); - 사용자 함수를 제거 익명함수를 사용했다면 ? element.addEventListener("click, function(){ alert('익명함수 실행'); this.removeEventListener("click",arguments.callee); }); 참고 블로그 http://bamtol.net/v5/bbs/board.php?bo_table=pp_js&wr_id=45 Closure ,Recursion ,Call Stack , Closer -함수가 본인이 생성된 곳의 주변 환경을 기억한다. //부모 함수에 자식함수 생성됨 //부모 함수의 실행내용 { } 중괄호 안의 변수,인자 등 주변 환경을 함께 기억한다 //함수가 실행되는 위치는 어디든 상관 없음 - 내부 함수에서 외부 함수 변수에 접근하는것 //함수 실행식 안의 변수, 함수 - 함수가 실행되면 스코프 정보가 생긴다 - 부모함수에 선언된 자식함수에서 부모함수에서 선언된 변수에 접근할 수 있다. - 스코프는 함수단위로 저장됨 변수를 찾을때 들여다보는 표가 스코프 스코프체인 : 스코프끼리 연결되어있다 - Recursion (재귀함수) 자기 자신을 호출 하는 함수 ex ) factorial - Call Stack 함수 실행 => 아래 칸이 쌓임 함수 종료 => 칸 제거 참고 블로.. 이전 1 2 3 다음