FU11M00N

- 자바스크립트 런타임 환경 아래의 사진은 자바스크립트 런타임 환경 사진입니다. - Call Stack 기본적으로 Anonymous는 가상의 전역 콘텍스트로 항상 존재한다고 생각하면 됩니다. 함수의 호출 순서대로 쌓이고 역순으로 실행됩니다. 함수 실행이 완료되면 스택에서 빠져나갑니다. 스택의 LIFO구조입니다. Call stack은 함수의 호출을 저장하는 자료구조입니다. 함수를 호출하면 스택에 쌓이고 또 다른 함수를 호출하면 다음 스택에 쌓으면서 가장 위에 쌓인 함수가 가장 먼저 처리됩니다. 가장먼저 first()을 호출하므로 call stack에 first() 이 쌓입니다. 그 후 first()에서 second()를 호출하므로 call stack에는 second()가 쌓이고, second()에서는 th..

- Hosting 변수나 함수의 선언문을 유혀범위의 최상단으로 올려 변수나 함수를 선언하기 이전에도 사용할 수 있도록 해주는것입니다. - 변수 Hosting console.log(test); // 결괏값: undefined var test = "FU11_M00N"; console.log(test); // 결괏값: FU11_M00N name이라는 변수가 선언되기 전에 호출하면 에러가 아닌 undefined를 출력합니다. var test; console.log(test); // 결괏값: undefined test = "FU11_M00N"; console.log(test); // 결괏값: FU11_M00N 자바스크립트의 Hoisting 특성은 유효범위의 최상단으로 올리기때문에 위의 예제와 동일한 효과가 발생합..

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다. - jQuery Ajax jQuery이용해서 Ajax를 사용하게 되면 많은 이점이 있습니다. 그 중의 하나가 크로스브라우징의 문제를 jQuery가 알아서 해결해준다는 것입니다. 뿐만 아니라 여러가지 편리한 기능들을 제공합니다. - $.ajax jQuery는 Ajax와 관련해서 많은 API를 제공합니다. http://api.jquery.com/category/ajax/ Ajax | jQuery API Documentation Register a handler to be called when Ajax requests complete. This is an AjaxEvent. Register a handler to be called w..

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다. - JSON JSON은 JavaScript Object Notation의 약자로, JavaScript에서 객체를 만들 때 사용하는 표현식을 의미합니다. 이 표현식은 사람도 이해하기 쉽고 기계도 이해하기 쉬우면서 데이터의 용량이 작습니다. 이런 이유로 최근에는 JSON이 XML을 대체해서 설정의 저장이나 데이터를 전송등에 많이 사용됩니다. JSON에 대한 자세한 내용은 아래 JSON의 공식홈페이지를 참조하면 됩니다. www.json.org/json-ko.html JSON JSON (JavaScript Object Notation)은 경량의 DATA-교환 형식이다. 이 형식은 사람이 읽고 쓰기에 용이하며, 기계가 분석하고 생성함에도..

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다. - Ajax 웹브라우저 초기에는 정적인 시스템이었습니다. 내용이 바뀌면 페이지 새로고침을 해서 내용을 새롭게 변경해야 하는 필요가 느껴졌습니다. 웹이 전자 문서를 염두에 두고 고안된 시스템이기 때문에 당연하게 생각 되었습니다. 그때 Ajax 개념이 도입이 되었습니다. Ajax는 Asynchronous JavaScript and XML의 약자입니다. 한국어로는 비동기적 자바스크립트와 XML 정도로 직역할 수 있습니다. 자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 주고 받는 방식을 의미합니다. Ajax는 웹브라우저와 웹서버가 내부적으로 데이터 통신을 할 수 있게 해줍니다. 그리고 변경된 결과를 웹페이지에 반영함으로..

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다. - jQuery 이벤트 jQuery는 이벤트와 관련해서 편리한 기능을 제공합니다. 순수하게 구현했을 때와 jQuery를 사용했을때의 코드 분량에서 큰 차이가 있습니다. jQuery는 크로스 브라우징을 알아서 처리해줍니다. 즉 이벤트를 보다 적은 코드로 구현할 수 있습니다. 이런 이유 때문에 jQuery와 같은 라이브러리를 사용합니다. - onAPI 사용법 on 은 jQuery에서 가장 중요한 이벤트 API 라고 할 수 있습니다. on API 를 통해서 jQuery 에서 이벤트를 다루는 방법을 알아보도록 합시다. on 의 기본 형태는 아래와 같습니다. .on( events [, selector ] [, data ], handler..

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다. - 마우스 이벤트 웹브라우저는 마우스와 관련해서 다양한 이벤트 타입을 지원합니다. click 클릭했을 때 발생하는 이벤트. dblclick 더블클릭을 했을 때 발생하는 이벤트 mousedown 마우스를 누를 때 발생 mouseup 마우스버튼을 땔 때 발생 mousemove 마우스를 움직일 때 mouseover 마우스가 엘리먼트에 진입할 때 발생 mouseout 마우스가 엘리먼트에서 빠져나갈 때 발생 contextmenu 컨텍스트 메뉴가 실행될 때 발생 - 키보드 조합 마우스 이벤트 마우스 이벤트가 호출될 때 특수키(alt, ctrl, shift)가 눌려진 상태를 감지해야 한다면 이벤트 객체의 프로퍼티를 사용하면 됩니다. 이 때 ..

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다. - 문서 로딩 웹페이지를 프로그래밍적으로 제어하기 위해서는 웹페이지의 모든 요소에 대한 처리가 끝나야 합니다. 이것을 알려주는 이벤트가 load 와 DOMContentLoaded 입니다. Hello Hello가 로딩되기 전에 자바스크립트가 실행되었기 때문에 null이 출력됩니다. 해결하기 위한 방법 중 하나는 아래 코드와 같이 스크립트를 문서가 로드 된 후에 위치시키면 됩니다. Hello 결과가 제대로 출력되는 것을 확인할 수 있습니다. - load 다른 방법으로 load 이벤트를 사용하면됩니다. Hello window 전역객체에 load 되었을 때 이벤트를 추가합니다. load 이벤트는 문서내의 모든 리소스(이미지, 스크립트)..