퍼플피플퍼블

event.stopPropagation() 또는 e.stopPropagation() 을 이해하기 위해서는html 상에서 사용자 이벤트가 어떻게 전달되는지를 이해해야합니다. 웹에서의 이벤트 전파(Event Bubbling) 만약 사용자가 웹페이지 내의 버튼을 클릭했을때 대부분의 사용자들은 버튼만 반응했다고 생각하게 됩니다.하지만, 웹페이지 내부에서는 버튼을 감싸고 있는 부모 태그들 또한 클릭 이벤트에 반응하게 됩니다. 예를 들자면 div 태그 하나만 클릭했을 뿐인데 3개의 이벤트가 발생하게 됩니다. 그 이유는 브라우저가 이벤르를 감지하는 방식 때문입니다. 브라우저는 특정 화면요소에 이벤트가 발생했을 때그 이벤트를 최상위에 있는 화면요소까지 이벤트를 전파시킵니다. 따라서 위에 콘솔창 이미지로 보이듯이 chi..

함수선언식(Function Declarations) 이란? 일반적인 프로그래밍 언어에서의 함수 선언과 비슷한 형식입니다. function 함수명() { // 내용 }; //예시 function abc() { return 'abcdefghijklmnopqrstuvwxyz' } abc(); // 'abcdefghijklmnopqrstuvwxyz' 함수표현식(Function Expressions)이란 ? 유연한 자바스크립트 언어의 특징을 활용한 선언 방식 var 함수명 = function () { // 내용 } //예시 var abc = function () { return 'abcdefghijklmnopqrstuvwxyz' } abc(); // 'abcdefghijklmnopqrstuvwxyz' 함수 선언식..

여러개의 요소를 셀렉트하는 방법은 $('AAA BBB CCC').on('XXX', function () { // (X) 요소사이에 ',' 를 넣어주어야됩니다. }); $('AAA, BBB, CCC').on('XXX', function () { // (O) aaa,bbb,ccc 의 요소를 한번에 잡을 수 있습니다. }); 이벤트를 바인딩하는 방법을 보여드리면 $('AAA').click(function () { //하나의 이벤트 밖에 바인딩할 수 없습니다. }); 하지만 Jquery 1.7 부터는 .bind() 나 .click() 메소드를 사용해도, 내부적으로 .on() 메소드를 이용하여 이벤트 핸들러와 바인딩합니다. .on() 메소드는 다음과 같은 특징을 가지게 됩니다. 1. 선택한 요소에 어떤 타입의 이..

인수란(Argument) ? 값, 변수, 참조 등 전달되는 값 을 의미합니다. 매개변수란(Parameter) ? 함수 등에서 사용되는 전달된 값 을 받는 변수를 의미합니다. function abc(a,b) { // a, b는 매개변수(Parameter)를 의미합니다. return a + b }; abc(1,2); // 1,2는 인수(Argument)를 의미합니다.

프로토타입을 사용하는데에 장점은 ? 객체지향적이고 상속을 사용한다라는 점과 프로토타입 객체를 사용하면 객체가 프로토타입의 프로퍼티를 상속할 수 있어서 각 객체에 필요한 리소스의 양을 대폭 줄일 수 있다는 장점이 있습니다. 프로토타입의 방식은 2가지로 나뉘게 되는데, Classical 방식과 Prototypal 방식이 있습니다. 두가지의 결과는 같지만 차이를 알아봅시다. 먼저 Classical 방식을 보면 function Point(x,y){ this.x = x; this.y = y; } // 객체 생성 number = new Point(5,5); number2 = new Point(3,3); // 프로토타입에 메서드를 추가 Point.prototype.add = function(){ return this..

$(document).ready vs $(window).load() & $(window).on('load') vs body.onload $(document).ready() 는 외부 리소스, 이미지와는 상관없이 브라우저가 DOM(document Object Model) 을 생성한 직후에 실행 $(window).load() 보다 더 빠르게 실행되고 중복 사용하여 실행해도 선언한 순서대로 실행됩니다. $(window).load() 또는 $(window).on('load') DOM(Document Object Model) 의 Standard 이벤트 입니다.HTML의 로딩이 끝난 후 실행 되고, 화면에 필요한 모든 요소 (image, css, javascript 등)들이 웹 브라우저 메모리에 모두 올려진 다음에 ..

본 글은 Javascript Scope and Closure by Zell Liew 의 번역 글입니다. 스코프(Scope) 란 ? Javascript에서 스코프(Scope) 란 어떤 변수들에 접근할 수 있는지를 정의합니다.스코프엔 두가지 종류가 있는데요, 이는 전역 스코프(global scope) 와 지역 스코프(local scope) 로 나뉩니다. 전역 스코프(Global Scope) 란? 변수가 함수 바깥이나 중괄호 ( { } ) 바깥 에 선언되었다면, 전역 스코프 에 정의된다고 합니다. const globalVariable = 'some value' 전역 변수를 선언하면 코드 모든 곳(함수 포함)에서 해당 변수를 사용할 수 있습니다. const hello = 'Hello World!'; functi..

var 는 function-scoped 이고, let , const 는 block-scoped 입니다. 여기서 function-scoped 과 block-scoped 가 무엇인가는 스코프 관련글에서 설명 드리겠습니다. var (function-scoped) // var는 function-scope이기 때문에 for문이 끝난다음에 a를 호출하면 값이 출력이 됩니다. // 이건 var가 호스팅 되었기 때문입니다. for(var a=0; a