음 아마 비둘기보단 똑똑할꺼야
준돌 Jundol / 2015.10.28 23:31 / JavaScript/Core



http://kangax.github.io/compat-table/es6/#ie10


브라우저별로 현재 지원되고 있는 core function 을 확인할 수 있는 사이트입니다.

잘 정리가 되어 있고 가독성도 높습니다.

ECMASCRIPT6 는 엣지브라우저에서나 사용할 수 있을 것 같네요.

빌어먹을 IE


준돌 Jundol / 2015.10.28 23:26 / JavaScript/Core

본 포스팅은 MDN 에 있는 번역되지 않은 문서를 번역 봉사에 참여한 후 블로그에 옮겨놓는 포스팅 입니다.

추가적인 사담이 존재합니다.



TypedArray.prototype.fill()

fill 메소드는 배열의 모든 요소를 지정한 시작 인덱스부터 종료 인덱스까지 정적인 값으로 채우는 메소드입니다.
TypedArray.prototype.fill 메소드는 Array.prototype.fill 메소드와 동일한 알고리즘을 가지고 있습니다.
TypedArray 는 typed array types 이곳에 있는 것 중 하나 입니다.

사담 : 개인적으로 정말 마음에 안듭니다. fill 이라는 범용적으로 사용되는 단어를 코어함수의 이름으로 사용한건 정말 별로네요...


문법

typedarray.fill(value[, start = 0[, end = this.length]])

매개변수

value
배열에 채워넣을 값.
start
선택사항. 시작 위치. 기본값은 0.
end
선택사항. 종료 위치 (종료위치를 포함하지않습니다. 즉, end -1 까지만 해당됩니다.). 기본값 this.length(배열의 길이).

설명

start 와 end 사이에 요소들을 채웁니다.

fill 메소드는 value, start 그리고 and 3개의 매개변수를 요구합니다. start 와 end 매개변수는 선택사항이며 기본값은 0 과 지정한 배열객체의 길이값 입니다.

만약 start 매개변수가 음수이면, start 의 값은 배열의 길이값을 합한 결과가 시작지점이 되고, 만약 end 가 음수라면, end 매개변수와 배열의 길이값을 합한 결과가 종료지점이 됩니다.

예시

new Uint8Array([1, 2, 3]).fill(4);         // Uint8Array [4, 4, 4]
new Uint8Array([1, 2, 3]).fill(4, 1);      // Uint8Array [1, 4, 4]
new Uint8Array([1, 2, 3]).fill(4, 1, 2);   // Uint8Array [1, 4, 3]
new Uint8Array([1, 2, 3]).fill(4, 1, 1);   // Uint8Array [1, 2, 3]
new Uint8Array([1, 2, 3]).fill(4, -3, -2); // Uint8Array [4, 2, 3]

특징

SpecificationStatusComment
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'TypedArray.prototype.fill' in that specification.
StandardInitial definition.

브라우저 지원

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic supportNot supported37 (37)Not supportedNot supportedNot supported

See also

원본 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/fill

준돌 Jundol / 2015.10.05 16:21 / HTML5/SVG



document.createElementNS

네임스페이스를 사용하여 새 Element 노드를 생성한다. SVG는 XHTML 언어이므로 동적으로 생성할때는 createElement 를 사용하면 안되고 createElementNS 를 사용해야 한다.

createElement 를 사용해서 동적 삽입할 경우 개발자도구의 태그에는 추가된것으로 보이지만, 실제로 화면에 그려지진 않는다.


element = document.createElementNS(namespaceURI, qualifiedName);

parameter

namespaceURI : 새 element 에 대한 네임스페이스를 가리키는 유일한 식별자다. 네임스페이스가 없다면 null이 할당된다.

qualifiedName: 새 element에 대한 완결된 이름. 


return 값

element : 지정된 name 과 namespace를 갖는 새로 생성된 Element 노드.


사용 예

 - 동적생성으로 SVG 를 삽입하고싶을때 사용할 수 있는 함수를 만들어보자

 - 동적으로 SVG 태그를 만들고 rect 를 svg에 붙이는 소스코드.

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
(function(){
	NS = {
		HTML: 'http://www.w3.org/1999/xhtml',
        MATH: 'http://www.w3.org/1998/Math/MathML',
        SE: 'http://svg-edit.googlecode.com',
        SVG: 'http://www.w3.org/2000/svg',
        XLINK: 'http://www.w3.org/1999/xlink',
        XML: 'http://www.w3.org/XML/1998/namespace',
        XMLNS: 'http://www.w3.org/2000/xmlns/' // see http://www.w3.org/TR/REC-xml-names/#xmlReserved
	};

	SVG = document.createElementNS(NS.SVG, "svg");

	browser = {
		isOpera : function(){
			return !!window.opera;
		},
		supportsSelectors: function(){
			return !!SVG.querySelector;
		},
		supportsXpath: function(){
			return !!document.evaluate;
		}
	};

	if(browser.supportsSelectors()){
		getElem = function(id){
			return SVG.querySelector("#" + id);
		};
	} else if (browser.supportsXpath()){
		getElem = function (id) {
            // xpath lookup
            return domdoc_.evaluate(
                'svg:svg[@id="svgroot"]//svg:*[@id="' + id + '"]',
                domcontainer_,
                function () { return WPod.svgedit.NS.SVG; },
                9,
                null).singleNodeValue;
        };
	} else {
		getElem = function(id){
			return $(SVG).find('[id=' + id + ']')[0];
		};
	};

	assignAttributes = function(node, attrs, suspendLength){
		if(!suspendLength){
			suspendLength = 0;
		}

		var handle = null;

		if(!browser.isOpera()){
			SVG.suspendRedraw(suspendLength);
		}

		var i;
		for(i in attrs){
			var ns = (i.substr(0,4) === 'xml:' ? NS.XML :
				i.substr(0,6) === 'xlink:' ? NS.XLINK : null);

			if(ns){
				node.setAttributeNS(ns, i, attrs[i]);
			} else {
				node.setAttribute(i, attrs[i]);
			}
		}

		if(browser.isOpera()) {
			SVG.unsuspendRedraw(handle);
		}
	}

	addSvgElementFromJson = function(data){
		var shape = getElem(data.attr.id);

		if(shape && data.element != shape.tagName){
			shape = null;
		}

		if(!shape){
			shape = document.createElementNS(NS.SVG, data.element);
		}
		assignAttributes(shape, data.attr, 100);
		return shape;
	}

	var svg = addSvgElementFromJson({
		"element":"svg",
		"attr":{
			"width": 500,
			"height": 500,
			"border": "solid 1px #000000"
		}
	});

	document.body.appendChild(svg);

	// 사용법
	var rect = addSvgElementFromJson({
		"element": "rect",
		"attr": {
			"id": "svg_rect",
			"x": 10,
			"y": 10,
			"width": 100,
			"height": 100,
			"fill": "red",
			"stroke": "solid"
		}
	});

	svg.appendChild(rect);
})();




'HTML5 > SVG' 카테고리의 다른 글

[SVG] SVG matrix interface  (0) 2015.11.23
[SVG] preserveAspectRatio 고정종횡비  (0) 2015.10.19
[SVG] document.createElementNS  (0) 2015.10.05
SVG Editor 분석-3 Path 포인트 정의하기  (0) 2015.06.15
SVG pathsegType  (0) 2015.06.15
SVG Editor 분석-2 객체 추가  (0) 2015.06.12
준돌 Jundol / 2015.10.02 00:23 / JavaScript/Core





IE9 과 window.console 객체


오늘은 ie9 와 window.console 객체에 대하여 포스팅 해 보도록한다.

근무중인 회사에 OO 편집기에서 3개월만에 신규 배포한 버전이 IE9 에서 실행되지 않는다는 버그 리포트를 갑작스레 받게되었다.

처음엔 굉장히 당혹스러웠다. 내부 QA에서 잘 동작하는걸 확인하고 배포하였으나 클라이언트에서 초기화가 되지않는다니!!!

클라이언트 환경 문제라 생각하였지만 이슈화되고 디버깅을 시작하니 vmware native ie9 에서 편집기가 구동조차 되지 않는 심각한 문제인 것을 확인하였다.

이전 버전과의 code diff 를 통해 알아보니 튜닝작업을 진행하면서 편집기 시작시간을 체크했던  console.log 가 말썽을 부리고있었다.

개발도중에는 항상 개발자모드를 켜놓고 개발을 진행하니 당연히 window.console. 객체가 생성되어있는 상태였고 클라이언트가 개발자모드를 켜놓고 편집기를 실행하진 않으니 말이다...


IE9(and ie8) 에서 console 객체는 개발자도구를 따로 열었을 경우에만 노출된다.

개발자도구를 켰다가 껏더라도 console 객체는 노출된채로 남아있게 된다.

만약 ie9 혹은 ie8을 가지고 있다면 아래 링크를 한번 실행해 보면 알 수 있다.

http://jsfiddle.net/Hmmim/6ouacgoy/

소스코드

1
2
3
console.log("first console.log");

alert("hi?????");

예제 코드는 굉장히 간단하다.

ie9 혹은 ie8 로 개발자도구를 실행한적 없이 위 코드를 실행하면 "hi?????" 라는 alert 창은 띄워지지 않는다.

console 객체가 생성되지 않아 오류가 발생한다고 ie9 에서는 따로 알려주지 않는다.

그래서 더욱 헛짓거리 삽질 하기 쉬워진다.


해결책은 전역 컨텍스트 위치에 wiondow.console 객체를 찾는 if 문을 두고 없다면 만들어주거나 다른 함수로 window.console 을 만들면 된다.


참고링크

http://stackoverflow.com/questions/5472938/does-ie9-support-console-log-and-is-it-a-real-function

http://stackoverflow.com/questions/10183440/console-is-undefined-error-in-ie9

준돌 Jundol / 2015.06.11 15:28 / JavaScript/Core



!! [double exclamation mark]

주로 타입을 boolean 으로 변경할 때 사용한다.


느낌표가 한 개 일때는 not 이라는 표현이다.

두개일 때는 not not


자 이제 프로그래밍 언어에서 0은 false란 뜻이고 0이외의 숫자는 true 라는 의미이다.

또한 객체는 true 다.

하지만 이걸 true 혹은 false 로 boolean 형태로 나타내고 싶다면

! [exclamation mark] 를 사용하면 된다.

별로 좋은 방법은 아니라고 생각한다. 가독성 면에서 떨어진다랄까?


! 은 Not , !true 는 false , !false 는 true , !0 은 true , !1 은 false

어떠한 타입이건 boolean 타입으로 변경이 가능하다.

준돌 Jundol / 2015.05.14 12:42 / jQuery[제이쿼리]

jQuery.fn & jQuery.fn.extend()



가끔 라이브러리 혹은 타 개발자가 작성한 소스코드를 보다보면 jQuery.fn 이 간혹 보이는데

기초가 부족한 필자는 jQuery.fn 이 뭔지 몰랐다.

찾아보니...


In jQuery, the fn property is just an alias to the prototype property.

그냥 가명이란다... 프로토타입의 가명으로 fn 을 사용한다고 한다.


jQuery.fn = jQuery.prototype = {

       //...

}

그렇다하면~ jQuery.fn.extend() 는 jQuery 를 확장 즉 커스터마이징 한다는 뜻이다.

jQuery 의 기본 함수에 추가하는 내가 쓰고자 하는 함수를 넣어서 확장시킬 수 있다.


<script>
jQuery.fn.extend({
check: function() {
return this.each(function() {
this.checked = true;
});
},
uncheck: function() {
return this.each(function() {
this.checked = false;
});
}
});
// Use the newly created .check() method
$( "input[type='checkbox']" ).check();
</script>


요로케~ 확장이 가능하다.


출처

1. stackoverflow
http://stackoverflow.com/questions/4083351/what-does-jquery-fn-mean

2. jQuery
http://api.jquery.com/jquery.fn.extend/

'jQuery[제이쿼리]' 카테고리의 다른 글

jquery.toggle()  (0) 2015.06.12
jQuery.fn.extend()  (0) 2015.05.14
© 2015 Jundol in 음 아마 비둘기보단 똑똑할꺼야
Designed by DH / Powered by Tistory
151 / 69 / 106,498