전진

JavaScript의 function에 ajax통신을 여러번 하거나 ajax통신 후 그 결과 값에 따라 다른 처리를 할 경우에 ajax통신은 비동기 방식이기 때문에 통신이 다 끝나기전 다른 처리가 먼저 싱행 되는 경우가 종종 있다.

이런 비동기 방식을 동기 방식으로 처리 하는게 async와 await다.

function에 async를 써주고 ajax통신 하려고 하는 곳에 await를 선언해서 실행 해주면 된다.

JavaScript에서 객체 타입을 알아야 하는 경우가 있다.

typeof를 사용하면 객체의 타입을 쉽게 알수 있지만 object인지 Array인지를 알아야 하는 경우가 생기는데 그럴땐 Array.isArray()를 사용하면 이 객체가 object인지 Array인지를 알수 있다.

Array.isArray(object);

이 객체가 Array면 true를 리턴하고 아니라면 false를 리턴한다.

typeof는 undefined를 가려 낼때 주로 사용한다.

undefined를 가려 낼때 흔히 object == undefined라든가 object == 'undefined'를 사용하는데 제대로 구분을 하지 못할때가 있다.

아예 구분하지 못하던가..

typeof object == 'undefined'를 사용하도록 하자.

전화번호 데이터를 "-"가 없는 11자리나 10자리 정도의 숫자로만 보내주는 경우가 생긴다.

고객의 요청은 "-"를 넣어주세요.

위의 정규식을 사용하면 된다.

자세한 설명은 아래 블로그에서..

출처 : http://fimtrus.tistory.com/entry/Javascript-%EC%A0%95%EA%B7%9C%EC%8B%9D-%EC%A0%84%ED%99%94%EB%B2%88%ED%98%B8-%ED%9C%B4%EB%8C%80%ED%8F%B0-%EB%B2%88%ED%98%B8-%EC%B6%94%EC%B6%9C

보안의 이유로 지밀번호 입력 창에서 복사 붙여넣기를 못하도록 막아야 하느 경우 아래의 스크립트를 사용 하면 된다.

input태그 onkeydown이벤트에 걸어 주기만 하면 끗..

추가로 우클릭도 막아야 할 경우 우클릭을 막아야 할 태그에 oncontextmenu="return false;" 를 넣어주면 된다.

게시물 작성시 금칙어가 포함 된 경우 이를 알려주는 것을 JavaScript로 구현..

금칙어는 배열로 가지고 있어야 하는 전재 조건이다.

문장에서 금칙어 리스트에 있는 단어가 포함 되어 있을 경우 그 단어를 배열에 담는 방식.

배열에 담은 금칙어가 없을 경우에만 배열에 담는 부분을 추가해서 금칙어의 중복을 막았다.

인터넷에 떠다니는 http://okky.kr/article/133978 소스코드를 참고해서 구현함.

http://codepen.io/justincavery/pen/saEyI/

HTML Mobile 페이지 에서 Swipe를 구현해서 어떤 이미지나 내용들은 보여줘야 한다면 위의  URL에 나오는 Swipe.js를 추천한다.

swipe.js를 검색해서 나오는 Git Hub에 가면 소스페이지가 압축된 파일을 다운로드 받을수 있는데..

거기에 포함된 swipe.js파일을 추가하고 swipe.css파일을 추가하면 준비 작업은 끝이 난다.

링크된 사이트에 나와있는 HTML소스를 Body태그안에 넣고 JavaScript에 제일 우측에 있는 JS소스를 긁어다 넣으면 모든 작업은 끝이난다.

돌리면 돌아갈까..?

압축해서 제공 되는 CSS에는 제일 중요한 내용이 빠져있어서 제대로 돌아가지 않는다.

.swipe {

  overflow: hidden;

  visibility: hidden;

  position: relative;

}

.swipe-wrap {

  overflow: hidden;

  position: relative;

}

.swipe-wrap > div {

  float:left;

  width:100%;

  position: relative;

}

위의 코드가 제일 중요한데 위의 내용만 빠진체 소스를 배포 하고 있는것 같다.

아니면 내가 잘못 받았던가.

이 소스는 링크에 있는 사이트 중앙에 위치한 CSS안에 있는 내용이며 저 코드가 없으면 화면이 제대로 나오지 않는다.

jQuery-mobile과 function Name이 중복되서 오류를 일으킨다는 썰도 있으니 jQuery-mobile를 사용하지 않고 단독으로 swipe,js만을 사용할때만을 권장한다. 모험정신이 있는 사람은 한번 중복으로 사용해봐도 무방하리라 본다.

암튼 CSS때문에 두시간 삽질함..

서버에서 HTML파일 안에 Encode된 데이터를 넣어서 HTML을 자성하는데..

Java서버에서 Encode를 하게 되면 공백에 "+"가 붙기 때문에 Decode를 할경우 공백이 제대로 표현 되지 않는다.

일단은 서버쪽에서 해결 하는 문제는 아직 서버를 다루지 않기때문에 찾아보지 않았고 JavaScript에서 해결 하는 방법을 찾아 보았다.

Encode된 데이터에 "+"를 모두 공백을 Encode한 문자인 %20으로 치환해주면 문제는 해결된다.

decodeURIComponent(str.replace(/\+/, "%20"));

"+"기호 앞에 \를 붙여준 이유는 특수 문자라서 특수문자를 문자로 인식하기 위함이다.

서버쪽에서 문제를 해결하는 방법도 "+"를 모두 %20으로 치환하는 방법외엔 없을거라고 보는데..아닌가?

아무튼 "+"문자에 대한 해결은 치환으로 해결..

게시물을 등록하면 그 게시물의 내용을 HTML로 만들어 주는 과정에서 문제가 생겼다.

내용을 바꿔줘야 하는 부분을 JavaScript의 Array로 만들어서 가지고 있엇는데.

내용안에 <script>와 같은 태그를 만나버리면 문자열로 인식 되는게 아니라 그순간부터 Script 로 인식을 해버리는 문제가 발생 되었다.

이 문제의 해결 방법은..HTML을 생성하는 순간에 Array에 들어갈 문자열의 특수문자를 Encoding해서 가지고 있다가..

그 문자열을 사용하는 시점에 Decoding해서 넣어주면 되는것..

encodeURIComponent()/decodeURIComponent()

앞은 Encoding, 뒤는 Decoding..

Json에 문자열로 특수문자니 뭐니 들어가도 알아서 잘 되는것 같은데..JavaScript Object는 그게 제대로 되지 않는것 같다.

일단은 서버에서 Encoding한 문자열을 HTML에 넣어 주면 Script로 처리를 해주면 될것 같긴한데..

해봐야 성공적인지 아닌지를 알것 같다. 제발 됐으면 좋겠다.

설날인데 집에가고 싶......

JavaScript내 String값으로 아래와 같이 선언이 되어 있다면..

var testString = "\1 \2 \3 \4 \5 \6 \7 \8 \9 \0";

이값중 8과 9만 역슬래쉬 없이 아래와 같이 출력 된다.

이상한문자..

이 작업을 왜 하게 된거냐 하면 윈도우는 경로를 표시할때 역슬래시로 표현을 해야 제대로 직어 들인다.

서버에서는 각 시스템에 맞춰 윈도우면 역실래시를 리눅스면 슬래시를 넣어주도록 설정 되어 있는상황.

역슬레시로 되어 있는 이부분을 HTML로 만들어서 뿌려줄 경우 제대로 동작을 하지만..

위의 데이터를 JavaScript의 객체로 생성해 이걸 태그안에 넣을 경우 문제가 생겨버린다.

JavaScript로 불러와지는 순간 역슬래시와 숫자가 조합이 되면서 이상한 문자나 공백으로 표현을 해버리면서 불러온 문자열이 제대로 표현되지 않는 상황..

그래서 역슬래시를 치환하려 해봤지만 이미 깨진 문자열에 치환을 해봐야 제대로 될리가..

그럼 서버에서 역슬래시를 슬래시로 넣던가 아니면 치환을 해서 보내줘야 하는데..

나는 클라이언트개발자고 서버 개발자 분은 지금 너무 바쁘고..ㅜㅜ

바꿔달라고 말을 해야하는데..하아..

var result = window.confirm('삭제하시겠습니까?');

if(result) {

block of code;

}

위와 같이 사용하면 confirm창이 나타나며 확인과 취소 누를시 true와 false를 반환한다.

그게 맞게 코드를 작성하면 된다.