console.log 커스터마이징 하기 JavaScript+WebService


Javascript 에서 제공하는 console.log 는 디버깅시 편리하기도 하지만 끄고 싶을때 마음대로 끄지 못한다는 단점이 있다

필자의 경우 이런 불편함을 해소하기 위하여 아래 코드와 같이 커스터마이징하여 사용하고 있다 

(function() {
var IsDebug = true;

function wrap(func, wrapper) { // 2.
return function () {
var args = [func].concat(Array.prototype.slice.call(arguments));
return wrapper.apply(this, args);
};
}

window.ConsoleLog = wrap( console.log, function (func_with_args) { // 1.
if (IsDebug == true) {
// return func_with_args.apply(this, Array.prototype.slice.call(arguments, 1));
console.log( Array.prototype.slice.call(arguments, 1));
}
});

window.setDebug = function (setVal) {
IsDebug = setVal;
};
}());

이 코드를 사용할때는 console.log와 동일하게 아래와 같이 사용하면 된다

ConsoleLog( "It's degug code >>> " );

단 그전에 아래 코드를 통하여 콘솔창에 출력여부를 설정하면 된다. 

setDebug( true );   or  setDebug( false );  

그리고 위 코드상에서 아래와 같이 주석으로 처리한 부분이 있는데 이 코드는 원래 동작하는게 맞으나 

IE에서 문제가 발생한다   크롬에서는 잘동작하는 코드가 왜 IE에서 문제가 되는지는 잘 모르겠다 

문법적 오류가 있는 것도 아닌데.....  
 

// return func_with_args.apply(this, Array.prototype.slice.call(arguments, 1));
그래서 대체 코드로 아래와 같이 작성한 것이다

console.log( Array.prototype.slice.call(arguments, 1));

결과적으로 같은 Javascript 코드이지만 웹브라우저에 따라 오동작하는 경우가 발생함에 따라 멀티 브라우저 지원을 원한다면 귀찮지만 여러 웹 브라우저상에서의 테스트를 진행 해야한다

이에 대한 자료는 아래 웹사이트 참조


https://www.slideshare.net/genycho/ss-64147229





HTML 엘리먼트(element) 정리 JavaScript+WebService


a 하이퍼링크 생성

body HTML 문서 컨텐트 부분

button form 제출 버튼

DOCTYPE   HTML 문서 시작

head 헤더 부분

hr 주제의 전환 단락

html html 문서 부분 표시

input 사용자의 입력 인터페이스

label 라벨 생성

textarea 입력 인터페이스를 위한 텍스트 박스 

p 단락 표시

style CSS style 정의

table 테이블 형식 
td 테이블의 셀

th 테이블 헤더

title HTML 문서 타이틀 표시

tr 테이블 Row(열) 표시 

------------------------------------------------------

 예제 

<style>
#linkAttr {
boundary : black;
color : blue;
border : solid grey;
}
</style>

<a id="linkAttr" href="http://codecrue.egloos.com">ICT 전문 사이트</a> 


 결과 


OpenLayer v4.1.1 WKT Layer 생성 및 map에 추가 GIS & BIM 프로그래밍


OpenLayer v4.1.1 에서의 WKT 객체를 map에 추가하기 

var wkt = 'POLYGON(( 1189894.0370893013 -2887048.988883849,' +
'3851097.783993299 -2293180.6723071276,' +
'4320754.715650121 -4251061.349890904,' +
'1503035.76469078 -4743898.374517946,' +
'1189894.0370893013 -2887048.988883849 ))';

var format = new ol.format.WKT();

var feature = format.readFeature( wkt );

var features = [];
features.push( feature );

var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
// features: [feature] // 배열 형태로 feature를 넣어줘도 되고
features: features // features를 배열로 만들어서 넣어줘도 된다.
})
});

좌표계를 바꾸고 싶다면 위의 feature 생성 관련 소스를 아래와 같이 바꿀것 

var feature = format.readFeature(wkt, {
dataProjection: 'EPSG:4326', // WGS84 좌표계에서
featureProjection: 'EPSG:3857' // Mercator 좌표계로 변환
});

var map = new ol.Map({
layers: [ wmsLayer ],
target: 'map',
          :
          :     (생략 )

map.addLayer( vectorLayer );



1 2 3 4 5 6 7 8 9 10 다음