개인이 끄적끄적 거리는 블로그

출처 : http://html5experts.kr/archives/1668 자바스크립트 this는 같은 소스코드로 호출하는 형태에 따라 의미가 달라서 이를 어렵게 생각하는 경우가 있어서 이를 정리해보았습니다. JavaScript의 this는 크게 4종류가 있다는 것부터 기억하고 시작해 봅시다.최상위 this전역 객체를 가리킵니다.12345678var abc = "Kim";window.def = " MJ"; console.log(this.abc + "+" + this.def); (function(){console.log(this.abc + "+" + this.def);})();생성자 this만들어진 인스턴스 자신을 가르킵니다.12345678910111213141516171819202122232425var ..

자바스크립트 이벤트 버블링 및 addEventListener addEventListener : 표준이벤트 할당 작업 IE제외 (on을 뺀다. load, click) attachEvent : 표준이벤트 할당 작업 IE (onload, onclick) OUTER INNER

자바스크립트 프로토타입 및 생성자(javascript prototype) 생성자는 선언형 함수로 선언하는게 좋다. (암묵형,묵시적은 되긴하나 별로..) (constructor 로 형을 체크하기가 용이함) 아래와같이 내가 만든 생성자에 프로퍼티를 설정할수 있다.(함수설정), 이미 생성되어있는거에 대해서도 추가가능. 1: 2: 3: 4: /* 생성자에서 프로퍼티는 무조건 this를 사용해주어야 한다. */ 5: 6: 7: 8: 9: 예제1) 내가만든 Custom 생성자에 프로토타입 추가. 10: 11: 12: 13: function Member() 14: 15: { 16: 17: this.firstName; 18: 19: this.lastName; 20: 21: // this.getName = functio..

this - 해당 메서드(함수)를 속성으로서 보유하는 객체를 가리킨다. var p1 = {name : "홍길동",tel : "010-222-3333",toString : function(){return this.name + "," + this.tel; // 여기서의 this는 p1을 가리킨다.}}; var p2 = {name : "김", tel : "010", age = 40};p2.test = p1.toString(); // p2 객체에 test 프로퍼티에 p1에서 만든 함수 p1.toString()을 할당한다. 여기서의 this는 p2가 된다.console.log(p2.test());

클로저 - 함수 내부의 중첩된 함수를 함수를 글로벌(전역)에서 접근가능하도록 함으로써 함수 내부의 지역변수에 접근가능해지는 상황 또는 함수의 지역변수를 포함하는 호출객체를 가리킴.- 클로저를 많이 사용할 경우는 IE상에서 메모리누수가 발생할 수 있다. (성능상에도 문제가 발생할 수 있음 글로벌에서 참조하 기때문에 메모리릭, 메모리누수 등등 많은 문제가 발생할 수 있다) function outer(){var msg = "hello";function inner(){return msg;}return inner;} var result = outer(); // result == innervar a = result(); // a

논리적 오류를 범하기 쉽다.전역변수, 지역변수의 유효범위에 대해서 중요하게 짚어볼 필요가 있다.

자바스크립트의 함수 선언방식. 1. 선언적 방식 - 가장 먼서 파싱된다. 선언 순서에 상관이 없다. - 재사용이 많이 발생할때 사용하는게 좋다.function test(name){return "hello" + name;}console.log(test("홍길동")); 2. 함수리터럴 방식(익명형식, 무명함수)- 선언적 방식과는 다르게 test2가 선언되고 난 후에 사용해야 한다.(실행시에 판단됨)- 권장선언방식 선언적보다는 리터럴 방식으로.//함수리터럴 방식 (익명형식, 무명형식)var test2 = function(name){return "welcome to " + name;}console.log(test2("홍길동")); 3. 이렇게도 가능하다.이렇게 하면 익명함수 선언과 함께 바로 실행한다.(func..

자바스크립트에서 각 객체들의 타입 및 인스턴스객체들의 형식을 확인한다. var obj = {name:"홍길동",getName:function(){return this.name;},toString : function(){return "당신의 이름" + this.name;}} constructor- 인스턴스의 객체형을 판단. 데이터형과, 타입을 확인한다.var d1 = new Date(); // d1은 object 형식의 Date의 인스턴스객체이다.if(typeof(d1) == "object" && d1.constructor == Date) { console.log("일치"); } hasOwnProperty() // obj 객체에 존재하는 프로토타입에서 속성의 존재여부를 확인 (자기자신이 가지고 있는 프로퍼..

Javascript Array (배열) 정렬 sort 및 splice 수정.자바스크립트 배열객체를 정렬 하는 함수 - sort() - 배열안에 아이템을 정렬자바스크립트 배열을 컨트롤 하는 함수 - splice() - 배열안에 아이템을 삭제,추가,치환자바스크립트 배열에 아이템을 추가 - push() - 배열의 마지막에 아이템 추가상세 내용은 아래 코드와 결과를 보면됨. 위 이미지처럼 배열에서 sort(), splice(), push()를 이용하면 자바스크립트의 배열의 내용을 추가, 수정, 삭제, 정렬이 가능하다. sort() 배열의 경우 익명함수를 이용해서 배열의 2개의 인자값을 이용하여 정렬기준을 정해주면 된다.위 코드는 주석처리해서 결과에는 적용안되어 있음.

출처 : http://deadfire.hihome.com/jscript/projscript003.html 2.1 console 객체 (자바스크립트 디버깅) 기존에 자바스크립트 코드를 디버깅하는 가장 단순한 방법은 바로 alert()을 사용하여 필요한 정보를 찍어보는 것이었다. alert()을 사용하는 방법은 훌륭하진 않지만, 간단히 사용할 수 있는 꽤 쓸만한 디버깅 방법이다. 다만, 일일이 확인 버튼을 클릭해 주는 일은 불편했던 것이 사실이다. 가끔 for루틴 안에 alert()을 넣고 돌리는 황당한 경험을 한두번씩 했을 것이다. 경험상, 디버깅시에 로그파일에 필요한 정보를 기록하게 되면 디버깅이 훨씬 쉬워진다. 여타 프로그래밍 언어들은 이러한 기능들을 지원하고 있다. 그 개념을 브라우저에서 실행되는 자..