ㅋㅋ: 2014

2014년 7월 10일 목요일

inline 형태의 프로퍼티는 unbind 할수 없습니다.

<textarea cols="117" rows="5" class="texa elastic_textarea" name="letter_content" id="letter_content" onkeyup="letter_content_lengthCheck(this, <%=max%>);"><%=letter_content%></textarea>

이러한 형태로 onkeyup 이벤트를 준 후
$("#letter_content").unbind("keyup")
을 하면 안먹음
removeAttr("onkeyup")
도 안먹음
removeProp("onkeyup")만 먹힘

이로써 알수 있는 사실 onkeyup이란 프로퍼티에 등록되있음
== 이벤트가 아니다 -> 이벤트가 트리거 형태로 들어가게됨

attribute와 .prop는 엄연히 다른것이니 알아서 알겟고 ..
여튼 이런 차이가 있음

2014년 4월 2일 수요일

한글이 아닌 영문 숫자만 가능하게  유효성 검사 함수

        var re = /[^a-zA-Z0-9\-_]+/g;
        var that = this;
        that.value.replace(re, function (curVal, curNum, totalVal) { //curval, p1,p2,p3.. totalVal
            that.focus(); 
            that.value = arguments[arguments.length - 1].replace(curVal, "");
        });

2014년 3월 29일 토요일

Element.insertAdjacentHTML 사용법

사용법

element.insertAdjacentHTML(position, text);

position의 위치

<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->





사용법 


html구성 
//<body>
// aaa


스크립트 실행
var eleBody = document.body;
eleBody.insertAdjacentHTML('beforeend','<div>b</div>');




결과 
//<body>
// aaa

//<div>b</div>

2014년 3월 6일 목요일

네이버 open api 맵 적용작업

1. 네이버에서 키 발급(https://developer.naver.com/openapi/register.nhn)

2. 해당소스에 <script type="text/javascript" src="https://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=키"></script> 임포트 시키고

function mapParse(areaid,Xlocation,Ylocation){
var oPoint = new nhn.api.map.LatLng(Xlocation, Ylocation);
var oPoint2 = new nhn.api.map.LatLng(Xlocation, Ylocation);
nhn.api.map.setDefaultPoint('LatLng');
oMap = new nhn.api.map.Map(areaid, {
center : oPoint,
level : 11, // - 초기 줌 레벨은 10이다.
enableWheelZoom : true,
enableDragPan : true,
enableDblClickZoom : false,
mapMode : 0,
activateTrafficMap : false,
activateBicycleMap : false,
activateRealtyMap : true,
minMaxLevel : [ 1, 14 ],
size : new nhn.api.map.Size(700, 350)
});

var mapZoom = new nhn.api.map.ZoomControl(); // - 줌 컨트롤 선언
mapZoom.setPosition({left:10, bottom:40}); // - 줌 컨트롤 위치 지정.
oMap.addControl(mapZoom); // - 줌 컨트롤 추가.

var oSize = new nhn.api.map.Size(60, 60);
var oOffset = new nhn.api.map.Size(60, 60);
var oIcon = new nhn.api.map.Icon('', oSize, oOffset);

// - Draggable Marker 의 경우 Icon 인자는 Sprite Icon이 된다.
// - 따라서 Sprite Icon 을 사용하기 위해 기본적으로 사용되는 값을 지정한다.
// - Sprite Icon 을 사용하기 위해서 상세한 내용은 레퍼런스 페이지의 nhn.api.map.SpriteIcon 객체를 참조하면 된다.
var testdefaultSpriteIcon = {
url:"",
size:{width:60, height:60},
spriteSize:{width:60, height:60},
imgOrder:0,
offset : {width: 60, height: 60}
};
// - 위에서 지정한 기본값을 이용해 실제로 SpriteIcon 을 생성한다.
var testDupSpriteIcon_first = new nhn.api.map.SpriteIcon(testdefaultSpriteIcon.url, testdefaultSpriteIcon.size, testdefaultSpriteIcon.spriteSize, 0, testdefaultSpriteIcon.offset);

var DraggableMarker = new nhn.api.map.DraggableMarker(testDupSpriteIcon_first , {
title : '',
point : oPoint,
zIndex : 1,
smallSrc : testDupSpriteIcon_first});
oMap.addOverlay(DraggableMarker);

var mapInfoTestWindow = new nhn.api.map.InfoWindow(); // - info window 생성.
mapInfoTestWindow.setVisible(false); // - infowindow 표시 여부 지정.
oMap.addOverlay(mapInfoTestWindow); // - 지도에 info window를 추가한다.

oMap.attach('click', function(oCustomEvent) {
var oPoint = oCustomEvent.point;
var oTarget = oCustomEvent.target;
mapInfoTestWindow.setVisible(false);
// 마커를 클릭했을 때.
if (oTarget instanceof nhn.api.map.DraggableMarker) {
// 겹침 마커를 클릭했을 때.
if (oCustomEvent.clickCoveredMarker) {
return;
}

mapInfoTestWindow.setPoint(oTarget.getPoint());
mapInfoTestWindow.setVisible(true);
mapInfoTestWindow.autoPosition();
return;
}
});

var oLabel = new nhn.api.map.MarkerLabel(); // - 마커 라벨 선언
oMap.addOverlay(oLabel); // - 마커 라벨을 지도에 추가한다. 기본은 라벨이 보이지 않는 상태로 추가됨.

oMap.attach("mouseenter", function(oEvent){
var oTarget = oEvent.target;
if(oTarget instanceof nhn.api.map.DraggableMarker){
//oLabel.setVisible(true, oTarget); // - 특정 마커를 지정하여 해당 마커의 title을 보여준다.
}
});

oMap.attach("mouseleave", function(oEvent) {
var oTarget = oEvent.target;
if(oTarget instanceof nhn.api.map.DraggableMarker){
oLabel.setVisible(false);
}
});
/*
* draggable marker 의 자체 이벤트로 changePosition 이 있다.
* 이 이벤트는, 사용자가 drag 를 이용해 마커의 위치를 옮길 때 발생한다.
* oEvent 의 파라미터는 두 개로, oldPoint 와 newPoint 이다.
* oldPoint 는 drag 하기 전의 마커 위치이며, newPoint 는 drag 한 이후의 마커 위치가 된다..
*/
DraggableMarker.attach("changePosition" , function (oEvent) {
if(mapInfoTestWindow.getVisible() != false){
mapInfoTestWindow.setVisible(false); // - infowindow 의 표시 여부 지정.
// - infoWindow 의 내용은 사용자가 임의로 지정할 수 있습니다. 단 HTML 로 지정을 하셔야 합니다.

mapInfoTestWindow.setPoint(oEvent.newPoint);
mapInfoTestWindow.setVisible(true);
mapInfoTestWindow.autoPosition();
}
});
}

자바스크립트 함수 추가

mapParse("open","37.571027811", "127.0224897"); 로 실행

3. 주소로 위도 경도 값 가져오기(classic asp)

Session.CodePage = 65001

Response.CharSet = "utf-8"

' addressStr = "건국대학교"

' Set xmlHttp = Server.CreateObject("Microsoft.XMLHTTP")

' request_url = "http://openapi.map.naver.com/api/geocode.php?key=키값&encoding=utf-8&coord=latlng&query=" & Replace(addressStr," ","")

' xmlHttp.open "GET", request_url, false

' xmlHttp.send(null)

' str_xml = xmlHttp.ResponseText

' If str_xml <> "" Then

' Set xmldoc = Server.CreateObject("Microsoft.XMLDOM")

' xmldoc.async = false

' xmldoc.validateOnParse = false

' xmldoc.loadXML(str_xml)

' If xmldoc.selectNodes("//total")(0).text > 0 Then

' latStr = xmldoc.selectNodes("//y")(0).text '위도

' lngStr = xmldoc.selectNodes("//x")(0).text '경도

' address = xmldoc.selectNodes("//address")(0).text '주소

' Else

' latStr = "0"

' lngStr = "0"

' End If

' Set xmldoc = Nothing

' Else

' latStr = "0"

' lngStr = "0"

' End If

' Response.Write("addressStr 의 좌표는") & "<br />"

' Response.Write("위도 : " & latStr) & "<br />"

' Response.Write("경도 : " & lngStr)

' Set xmlHttp = Nothing

2014년 2월 18일 화요일

asp에서 엑셀 데이터 뽑을때 한글이 짤릴경우

현상 : mysql에서 데이터를 불러와 엑셀로 뽑아오는데 한글이 2자에서 짤림

해결책 :

SELECT CAST(my_table.DataColumn AS CHAR(10)) as TextColumn FROM my_table

이런식으로 char의 크기를 늘려주면 제대로 나옴

2014년 2월 13일 목요일

javascript type체크 함수

자바스크립트에서 toString을 사용하면 객체타입까지 자세히 나옴

null 의 경우 typeof null 이면 object

function typeChk(v){
return (function(v){
return Object.prototype.toString.call(v);
}(v)).replace(/\[|\]/g,"").split(" ")[1].toLowerCase();
}

alert(typeChk('1'));

2014년 2월 10일 월요일

mysql table int pk값 0들어가는 현상

mysql db 에서 int 형 primary key 가 0이 들어갈경우
일단
1.null 값이 허용되면 null일경우 0으로 갱신

mysql sql_mode 설정 값 변경

>> select @@global.sql_mode;
>> select @@session.sql_mode;

현재 sql_mode 값 확인

>> set sql_mode = 'NO_AUTO_VALUE_ON_ZERO';

으로 설정해줄수 잇음

오늘 현상은 그것은 아니었고

insert into table(intpk, val1) values('0','t');

auto increment 가 intpk에 걸려있으면 당연히 0을 넣어도 1 그리고 그 이후값이 들어가짐

그런데 유니크인덱스 또는 프라이머리키 intpk, email 두개 걸려잇음

insert into table(intpk, val1, email) values('0','t','ss@ss.s.s') duplicate key update

intpk = '0',

email = 'ss@ss.s.s';

이러면 intpk가 0으로 업데이트가됨

=================================================================

unique 키가 두개 물려 잇음(a,b)가 물렷다 가정하자
insert into table(a,b,c) values('1',2,3);

duplicate key update c = 1

이것은 곧

insert into table(a,b,c) values('1',2,3);

update table set c= 1 where a= 1 or b= 2 limit 1

이거랑 같은말임

duplicate key update c = 1, a=LAST_INSERT_ID(a) 이런것도 한 방법이 될수 있음

http://dev.mysql.com/doc/refman/5.6/en/insert-on-duplicate.html

2014년 1월 21일 화요일

자바스크립트 인자값 전달

2014년 1월 20일 월요일

국민, 롯데, 농협카드 개인정보 유출

국민, 롯데, 농협카드 개인정보 유출

이미 이전부터 유출 사실확인하고 수사 착수 후 검거까지 완료
2013년 6월 경에 카드부정사용방지시스템 고도화 과정에서 코리아크레딧뷰 개발담당자가 유출함.

원본파일 압수조치
비밀번호, CVC는 노출되지 않음

보이스피싱이나 스미싱, 불법문자에 활용될 소지가 높음

금번의 문제는 인적보안의 문제가 큼

2014년 1월 19일 일요일

parseInt와 Number의 차이

parseInt 는 기본적으로 ECMA 3에서 8진수로 표현 꼭 parseInt("09",10)으로 십진수 표현을 해야됨
ex> parseInt("09") //값없음
ex> parseInt("09",10) //9

Number은 그냥 해도 됨
ex> Number("09") // 9

Number이 더 빠름, parseInt는 말 그대로 파싱을 함 더 느릴수 밖에 없음.
하지만 parseInt는
parseInt("09 hi",10) //9
이렇게 문자열이 있어도 숫자를 얻을수 있다.
** 이 함수가 그리 뛰어난건 아니다. hi 09하면 NaN이 된다.

배열, for , while

//    유사배열
    var a = {
        "0" : "00",
        "1" : "11",
        "length" : 2
    };

alert(b = Array.prototype.join.call(a));

// 정순 루프가 아니면 --를 해서 0으로 끝내는게 비교해서 값을 빠져나가는것보다 성능상 이득이 있음
var arr = [1,2,3,4], b =0 ,a = arr.length;

    for(a; a--;){
        b += arr[a];
    }

    alert(b);

    a = arr.length;

    while(a--){
        b += arr[a];
    }
alert(b);

closure 정리

    //자바스크립트의 함수의 가비지컬랙터는 우선순위가 낮음
        function plus(a,b){
            var hap = a+b;
            return function(c){
                return hap += c||0;
            };
        }        //참조된 hap은 가비지컬렉팅 되지 않고 계속 살아있음

        var r = plus(3,4);
        alert(r());        //7
        alert(r(3));    //10

//클로저 활용1
//1.setTimeout 함수 인자 제공
//본래 setTimeout은 function(){} 이런식으로 나와서 인자를 전달 할수 없음 하지만 이런식으로 클로저 활용하면 인자를 전달할수 있음.
//밖에서 참조를 해서 인자를 줄수 있긴 하다. 하지만 실제 함수가 호출 될 당시에는 줄 수 없다.
function callLater(a,b,c){
    return (function(){
        a[b] = c;
    });
}

window.onload = function(){
    var funcRef = callLater(document.body.style,"background","yellow");
    setTimeout(funcRef,500);
};

//2. 외부에 노출되지 않음

var div = (function(){
    var buffar = ["<div>","","</div>"];
    return (function(contents){
        buffar[1] = contents;
        return buffar.join("");
    });
})();

alert(div("a"));

//클로저는 메모리 누수 문제가 생길수 있음. 내가 모르는 사이에무언가에서 계속 메모리가 생성되어 가비지 컬렉팅되지 않는 현상이 발생 할 수 있음.
//특히 일반적인 것은 생관이 없는데 host객체들 (window, document, activeX 객체 같은 경우 특히 심함) 객체의 원형을 참조 하면, 브라우저가 종료 될때까지 해지가 되지 않는다. 일반적인 객체들은 1->2->3->1이 참조 되면 가비지 컬렉션 대상이 되지만 dom노드 등 호스트 객체들은 원형을 참조 하면 해지를 하지 못한다.

스큐어모피즘, 플랫, 미니멀리즘

* 알아두자
# 타이포(typo) : 서체
    - 타이포디자인 -> 서체디자인
# 픽토그램(pictogram) : 그림문자
# 메타포(metaphor) : 은유, 어떤 것이 떠오름
# 리얼메타포(real-life metaphor) : 실세계 모습과 현상, 사물의 형태 재현

스큐어모피즘(skeuomorphism), 스큐어모프(skeuomorph)
- 도구 본래의 모양 형태를 그대로 따라가는 방식
    -> 원래 그렇게 생기거나 그렇게 작동해야 할 이유가 있지만, 실질적으로 그럴 필요까진 없다. 닮았다고 스큐어모피즘이 성립되는건 아니다. 지나치게 범위가 넓게 쓰임.
    -> 근래들어 ios나 ms metro 디자인이스큐어모피즘 논란이 있음
    -> 스큐어모피즘은 사용자에게 아날로그적 환경을 제공 함으로써 높은 사용성, 학습성에 좀더 많은 이득을 줌
    -> 지나치게 현실과 같아 질 경우 창의적인 결과물을 낳긴 힘듬

플랫(flat)
-> 2D로 디자인, 효과를 많이 주지 않음. 군더더기 없는 디자인.
-> 타이포그라피와 픽토그램에 집중, 오직 색감에 집중 할 수 있게 하는 접근법
-> 이미지 개성에 한계 존재

미니멀리즘(Minimalism)
-> 플랫의 상위개념
-> 쓸데없는 요소 제거, 다채로운 색감이나 타이포 제외
-> 절대 직관적이지 않음
-> 효율성 중시

맥도날드 이론

우리가 일을 하다가 점심시간이 되면 백지상태가 된다

모먹으러 갈지 정하자 하면 한명이 맥도날드 먹으러 가자 하면 모두 반발하며 다른거 먹으러 가자 하며 의견을 내놓는다

이것이 맥도날드 이론

어떠한 회의를 할때 최악의 해결책을 제시하면 사람들은 더 나은 해결책을 제시함

참고

http://mimul.com/pebble/default/2013/12/29/1388286471448.html

2014년 1월 17일 금요일

immediately invoked function expression

script 로드 순서 ready, load, settimeout, $fn

함수 프로토 타입 또 정리

javascript scope

<title> [[scope]] </title>
    <script>
var e;
        function aa(a,b,c){
            var d = "1";
        }

        aa(1);

script는 싱글쓰레드임, 전통적인 스크립트 언어들은 정적메모리(const 등 ), 스텍 영역을 잡고 나머지를힙을 잡아서 프로그램을 실행한다
하지만 자바스크립트는 이런것들은 모두 브라우저에서 처리해줌(iexplore.exe, chrome.exe 등),대신 가상메모리(객체들의 집합)를 잡아서 실행함

함수란 부모 함수를 생성해야 생성됨, 기본적으로
(function(window){ }((window||global);
이런식으로 window가 전역에 바인드 되있음, 기본적으로 global이 적용됨

그 안에서 함수가 실행되면 execution context(실행영역)가 생성됨, ecmascript 3.1까진 ec라 하고 5부터는 lexical environment(어휘공간) 이라 함
실행영역이 생성되기 전에 함수가 실행될때 변수의 인자값들을 [a,b,c] 이렇게 배열식으로 넘김
그래서 ec1 = [a,b,c] 이런식으로 들어가 잇으면 함수에서 호출하는 a 인자값이 1이면 a는 1을 대입하고 나머진 undefined를 넣는다
ec자체도 해쉬맵이니까 그리고 arguments 객체에도 똑같이 넣는다 arguments객체 자체는 자신 함수를 호출하는 키 값을 잡고 잇음. callee
그리고 scope객체에 지금 현재 영역에 d가 잇으므로 d를 넣고 parent에 이 함수를 호출한 global를 넣는다. 만약
fn ee(){
    aa(){

    }
}
이랫엇으면 scope:ee.parent에 이런식으로 찾아갈꺼임
그래서 parent chain을 해서 상위 변수 값들을 찾는것임
ec가 사라질때는 함수 사용이 완료가 되면 그 함수 ec가 사라지는데 저렇게 변수 자체가 참조를 함

var f = function(){
    var a = 1;
    return function(){
        return ++a;
    };
};

var g = f();

g();
g();
alert(g());        //4

scope : parent가 참조함. 유일하게 외부 함수와 연결하는 연결고리가 살아있는데 이것을 사용하고 있으면 가비지컬렉터는 일어나지 않음
close와 비슷하게 closure 는 폐쇄란 뜻인데 공간이 폐쇄된 상태가 되어버림
이것을 자바스크립트에서 클로저라 부름

그리고 if(d = arr.length){
}
이런식으로 함 식을 평가하고 d의 값이 0이면 else로 탈것임

    </script>

javascript prototype

ㅋㅋ