Total: Today: Yesterday:
'자바스크립트'에 해당되는 글 4건
2016.04.12 [Java Script] 복사, 붙여넣기 (Ctrl+C, Ctrl+V)키 막기
2015.02.17 브라우저 모니터 해상도에 꽉 차게 최대화 하기
2015.02.06 [Java Script] if/switch 문을 map 으로 리팩토링(Refactoring)
2015.02.02 IE에서 textarea placeholder 가 정상동작하지 않는 이유? 2

[Java Script] 복사, 붙여넣기 (Ctrl+C, Ctrl+V)키 막기

개발/JavaScript | 2016. 4. 12. 16:13 | Posted by 짜장이누나



개발을 하다가 복사/붙여넣기를 막아야 하는 상황이 있습니다.

Keycode를 이용하여 아주 간단하게 막을 수 있습니다!!!

바로 아래 코드를 보시죵~!


### JS


//입력창에 Ctrl+V 막기
function preventKeyCtrlV(){
if(event.ctrlKey && event.keyCode == 86 ){ 
event.returnValue=false; 
}
}

//입력창에 Ctrl+C 막기
function preventKeyCtrlV(){
if(event.ctrlKey && event.keyCode == 67 ){ 
event.returnValue=false; 
}
}


+ Javascript 에서 Keycode 값을 쉽게 알수 있는 사이트를 알아냈습니다!

 아래 사이트에 접속하여 알고자하는 키를 입력하면 바로 Keycode를 알 수 있습니다.



http://keycode.info/







 이 글은 오니님의짱꺤뽀 블로그와 같은 글 입니당구리당당

오~~~랜만에 자바스크립트 포스팅 완료!!





'개발 > JavaScript' 카테고리의 다른 글

[javascript] 자주 사용하지 않았던 javascript 연산자들  (0) 2016.09.22
sql 쿼리문 String 연결하기  (0) 2016.09.08
[javascript] callBack 함수로 생각하기  (0) 2015.05.29
[javascript] 자바스크립트 개발자모드 디버그가 안걸려요 ㅠㅠ  (0) 2015.05.27
[Java Script] html 태그에 있는 정보들를 한번에 받아와 리스트(map) 만드는 방법  (0) 2015.02.27

,

브라우저 모니터 해상도에 꽉 차게 최대화 하기

노하우/Browser | 2015. 2. 17. 10:12 | Posted by 자수씨

jQuery 를 이용해서 브라우저를 최대 사이즈로 키우는 방법이 있나해서 찾아봤는데, 그냥 자바스크립트만 이용해도 된다.


### js

window.moveTo(0, 0);

window.resizeTo(screen.availWidth, screen.availHeight);



출처: http://stackoverflow.com/questions/8391255/maximize-window-on-document-ready-with-jquery

저작자표시

'노하우 > Browser' 카테고리의 다른 글

통화기호(원₩,엔¥, BACK SLASH) 사용시 주의점  (0) 2015.02.27
IE 에서 인쇄가 첫페이지만 될 때  (0) 2015.02.17

,

[Java Script] if/switch 문을 map 으로 리팩토링(Refactoring)

개발/JavaScript | 2015. 2. 6. 20:53 | Posted by 짜장이누나


저도 허접한거 하나 올려보겠습니다...

다들 충분히 하실거라 생각되지만!! 그래도 혜원님의 첫 포스팅 시작합니다.\

고고



if/swith 문을 map 으로 리팩토링 하는 방법


간단한 ~~한 처리를 위해서 if문이나 switch문은 쉽고 간편하기 떄문에 많이 사용한다.

하지만 처리해야할 ~~가 많아진다면 if-else가 많아지고, case문이 많아져 코드의 가독성이 떨어질 것이다.


먼저 switch문으로 작성한 코드를 보자.

### js

function getStringMemberStatus(eventList) {

for(var i=0; i<eventList.length; i++) {


var _eachEvent = eventList[i];


logger.log( "☆☆☆" + jsonUtils.toJSONString(_eachEvent));

var _memberCode = _eachEvent.member_status;


 

switch(_memberCode) {

  

case '500':

_eachEvent.xMember_status = '멤버';

break;

case '200':

_eachEvent.xMember_status = '초대';

break;

case '700':

_eachEvent.xMember_status = '운영자';

break;

default :

_eachEvent.xMember_status = '탈퇴';

break;

}



_eachEvent.xMember_status = memberCodeMap[_memberCode] || memberCodeDefaultValue;


var _memberName = _eachEvent.member_name;

   

logger.log( "***memberCode= " + _memberCode);

logger.log( "***memberName= " + _eachEvent.xMember_status);

   }

}

위 소스는 멤버 코드를 받아와 각 코드에 해당하는 String을 반환하는 함수이다.

여기서 멤버 코드가 추가 될 경우 case문을 계속해서 추가해야한다.

계속 코드가 길어지고.... case문이 많아지니까 맘에 들지 않아!


그러면 map으로 바꿔보면 어떨까?

### js

function getStringMemberStatus(eventList) {


       for(var i=0; i<eventList.length; i++) {

            

             var _eachEvent = eventList[i];

      

            logger.log( "☆☆☆" + jsonUtils.toJSONString(_eachEvent));

             var _memberCode = _eachEvent.member_status;

            

             var memberCodeMap = {

                         '100': '가입' ,

                         '150': '가입' ,

                         '200': '초대' ,

                         '250': '초대' ,

                         '300': '탈퇴' ,

                         '350': '탈퇴' ,

                         '500': '멤버' ,

                         '700': '운영자'

            };

             var memberCodeDefaultValue = '되바라지다.' ;


            _eachEvent.xMember_status = memberCodeMap[_memberCode] || memberCodeDefaultValue;


             var _memberName = _eachEvent.member_name;

      

            logger.log( "***memberCode= " + _memberCode);

            logger.log( "***memberName= " + _eachEvent.xMember_status);

      }

}

코드가 훨신 더 간결해지고 읽기 편해짐이 느껴지는가??

여기서 멤버 코드가 추가되더라고 '키(key)-값(value)' 만 추가해주면 된다.

아주 간단하죠???????????





그럼 혜원님은 이만 뿅!

고고




'개발 > JavaScript' 카테고리의 다른 글

[Java Script] html 태그에 있는 정보들를 한번에 받아와 리스트(map) 만드는 방법  (0) 2015.02.27
자바 스크립트 escape(), encodeURI(), encodeURIComponent() 차이  (1) 2015.02.27
모르고 있었던 Array 함수들...  (0) 2015.02.02
in 의 2가지 활용법  (1) 2015.02.02
IE에서 textarea placeholder 가 정상동작하지 않는 이유?  (2) 2015.02.02

,

IE에서 textarea placeholder 가 정상동작하지 않는 이유?

개발/JavaScript | 2015. 2. 2. 12:02 | Posted by 자수씨

주로 개발을 크롬에서 하다보니 IE에서 발생하는 문제는 배포 후에 발견하는 경우가 많다.


이 경우도 크롬에서는 정상동작을 해서 몰랐던 부분인데, 다음 번에 동일한 문제가 발생하더라도 근본적인 원인을 모르면 또 헤맬 것 같아서 정리한다.


### php; html-script: true;

<ul id="sampleList">

<li class="template">

<textarea id="description" placeholder="설명을 입력하세요."></textarea>

<li>

</ul>


위와 같이 template 엘리먼트를 이용하여 <ul> 에 추가될 <li> 를 생성한다고 가정하면, 크롬에서는 위의 태그가 화면에 렌더링 되는 순간 위와 동일하게 엘리먼트가 구성되지만 IE에서는 아래와 같이 변환이 된다.

<ul id="sampleList">
	<li class="template">
		<textarea id="description" placeholder="설명을 입력하세요.">설명을 입력하세요.</textarea>
	<li>
</ul>

placeholder 에 있는 값이 textarea 의 값으로 설정되어 버린다.


### js

var $sampleList = $('#sampleList');

var $templateLi = $sampleList.find('li.template');

var _templateLiHtml = $templateLi.clone().removeClass('template')[0].outerHTML;

// _templateHtml 을 이용하여 추가할 html 태그를 생성

var _newHtml = _templateHtml;


$sampleList.append(_newHtml);


위와 같은 자바스크립트가 실행되면 크롬에서는 value 가 빈 textarea 가 복제가 되지만 IE에서는 value 값이 설정된 textarea 가 복제가 된다. 따라서 복제 후에 다음과 같은 작업을 추가적으로 해주어야 한다.


### js; highlight: [3];

var $sampleList = $('#sampleList');

var $templateLi = $sampleList.find('li.template');

$templateLi.find('textarea[placeholder]').val(''); // textarea 값을 초기화


var _templateLiHtml = $templateLi.clone().removeClass('template')[0].outerHTML;

// _templateHtml 을 이용하여 추가할 html 태그를 생성

var _newHtml = _templateHtml;


$sampleList.append(_newHtml);


아직까지 국내에서는 크롬보다는 IE의 사용률이 높기 때문에 귀찮더라도 IE에서 테스트하는 습관을 들여야한다.


저작자표시

'개발 > JavaScript' 카테고리의 다른 글

[Java Script] html 태그에 있는 정보들를 한번에 받아와 리스트(map) 만드는 방법  (0) 2015.02.27
자바 스크립트 escape(), encodeURI(), encodeURIComponent() 차이  (1) 2015.02.27
[Java Script] if/switch 문을 map 으로 리팩토링(Refactoring)  (0) 2015.02.06
모르고 있었던 Array 함수들...  (0) 2015.02.02
in 의 2가지 활용법  (1) 2015.02.02

,