본문 바로가기

자바스크립트49

JavaScript - 사파리에서 body, HTML에 클릭(click) 이벤트가 바인딩 되지 않는다. safari click 에 되지 않네요 안녕하세요. 고코더입니다. 브라우저는 제조사 마다 웹사이트를 분석하는 각자의 특징을 가지고 있습니다. 개발시에 크로스브라우징을 체크하지 않으면 클레임에 걸리게 됩니다. 최근에 모니터 불량화소 체크 사이트를 만들면서 (monitor.gocoder.net)특이한 케이스를 발견했습니다. 상식이었는데 제가 모르던 사실일 수도 있지만 ▼ 아래 소스를 우선 확인해보겠습니다. 1234567891011121314151617181920212223 $('html').on('click', function(){ alert('사파리에서 안됨'); }); $('body').on('click', function(){ alert('사파리에서 안됨'); }); $('body > div').on(.. 2019. 5. 22.
jQuery - 가볍고,간단한 깔끔한 화면 한쪽 팝업 / jGrowl 오른쪽 화면 위에 나타나는 javascript 네모난 팝업 레이어 박스 안녕하세요. 고코더 입니다. 예전에 팝업 하면 무조건 window.open 을 통한 브라우저 자체 내장객체를 사용했습니다. 그런데 요즘은 반응형 이슈와 스마트폰에서 팝업을 무조건 막는 정책때메 레이어 팝업을 많이 사용 합니다. 이 layer 팝업중 가장 깔끔한 플러그인을 소개 해드릴려고 합니다. ▼직영하면 j 으르렁 대다 인가 ㅎㅎ https://plugins.jquery.com/jgrowl/ ▼ 고코더 방문자와 구독자를 위해 직접 간단하게 코드를 작성했습니다. 그대로 HTML을 실행하면 화면이 실행 됩니다. 1234567891011121314151617181920212223242526272829303132333435363738394.. 2019. 5. 21.
JavaScript - 버튼 더블클릭 방지 유효성 처리하기 / onclick 안에 쉽게 프론트에서 더블클릭 되면 안되는 버튼이 있을 때 안녕하세요. 고코더 입니다. 프론트에서 가끔 두번 클릭되면 안되는 기능 버튼이 있습니다. 물런 이런 유효성 체크는 서버사이드 언어나 백엔드에서 처리해야 하는게 정석이지만 프론트 개발자라면 UI에서도 기본적인 실수 방지 정도는 해줘야겠지요. 사실 버튼을 두번 클릭하지 못하게 하는 방법은 많지만 오늘은 간단하게 onclick 에 넣어 처리할 수 있는 방법을 소개하려고 합니다. ▼ 우선 제가 작성한 예제 소스를 보겠습니다. 12345678 Colored by Color Scriptercs 개발자가 아니어도 원리는 금방 눈치 채셨을텐데요. input 타입이 button일 경우 disabled 를 만들고 이미지 버튼일 경우에는 visibility를 이용해 다시 클릭.. 2019. 4. 4.
JavaScript - 문자열 치환 replace, replaceAll 사용하기 자바스크립트 replace() 사용하기 안녕하세요 고코더 입니다. replace 는 서버언어에서 가장 유용한 함수 입니다. 특정문자를 치환해주는 가장 쉬운 방법이죠 자바스크립트도 당연히 replace.가 존재하는데 문제는 문자열을 하나만 바꿔 줍니다. replace() 사용법 ▼ replace() 기본 사용법12var str = "gocoder"str.replace("o","x");cs ▼ 사용법 "문자열".replace("대상문자","바뀌어 보여질 문자") ▼ 결과 값 이렇게 replace는 하나의 문자만 치환하고 종료 합니다. 그래서 서버사이드 언어에서 사용하던 그 replaceall이 아니죠. 그래서 방법이 필요 합니다. replaceAll() 함수로 사용하기 우리에겐 replaceall 이 필요합.. 2019. 3. 22.
JavaScript - 자바스크립트 파라미터 받아오기 / location.search Get 일때의 스크립트로 parameter 가져오기 안녕하세요. 고코더 입니다. 자바스크립트로 사이트 URL이 보이는 get 방식일 경우 자바스크립트의 내장 함수인 location.search 을 이용해서 URL의 파라미터를 가져 올 수 있습니다. ▼ 이렇게 location.search는 URI 정보를 모두 가져옵니다. ▼ 그래서 너무나도 많이 쓰고 있는 getParameterByName 함수는 이런 기초함수를 이용하여 파라미터의 이름을 입력하면 해당 값을 가져 오는 역할을 합니다. ▼ 파라미터를 가져오게 하는 함수 123456function getParameterByName(name) { name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); var r.. 2019. 3. 8.
JavaScript - .js 안에서 jquery 사용하는 방법 단독 .js 사용시 제이쿼리 사용법 안녕하세요. 고코더 입니다. .js는 자바스크립트 파일 확장자 입니다. 우리는 흔히 원하는 js안에 붙혀넣고 jquery를 사용하세요. 이런식으로 하시면 jquery 코드를 사용하여 js 코딩을 하실 수 있습니다. 마무리 js 개발이라면 표준 자바스크립트로 만드시는게 더 좋아 보입니다. 2019. 3. 8.
JavaScript - .js? 파라미터 값 사용 방법 script src .js에서 parameter 사용 방법 안녕하세요. 고코더 입니다. 자바스크립트를 개발하다보면 .js 에 파라미터를 넘겨서 해당 값을 이용해서 개발을 하는 경우가 있습니다. ▼ 이렇게 js를 참조하면서 필요한 파라미터를 넣는 경우가 있습니다. 그런데 자바스크립트에서 GET 형식의 파라미터를 받는 방법에서 getParameterByName 을 많이 사용하고 계십니다 -> 자바스크립트 파라미터 받아오기 / location.search 하지만 해당 함수는 Get 형태의 윈도우 로케이션 URL을 가져오는 방식으로ㅓ .js를 호출할때는 사용할 수 없습니다. 아래 함수를 사용하여 가져올 수 있습니다. 123456789101112131415 function scriptQuery() { var sc.. 2019. 3. 8.
웹툴 - 자바스크립트 안풀리는 압축,난독,암호화 / packer.gocoder.net 자바스크립트 보안 걸기 안녕하세요. 고코더 입니다. 자바스크립트는 프론트 언어로 공개된 소스 입니다. 서버사이드 언어와 달리 누구나 접근하고 볼 수 있습니다. 그래서 프론트엔드 개발시에 보안상 노출되기 쉽습니다. 그래서 인터넷에는 다양한 난독화 사이트가 있습니다. 그런데 이 난독화를 푸는 사이트도 많습니다. 그래서 제가 Packer 모듈을 가지고 난독화 하는 프로세스를 심층으로 만들어서 풀리기 어렵도록 만들어 보았습니다. ▼ URL은 다음과 같습니다. http://packer.gocoder.net ▼ 사용법은 아래와 같습니다. 위에 자바스크립르를 넣고 GO버튼을 눌러주세요 ▼ 그러면 난독화가 되었습니다. depth level 1이 보입니다. 여기서 계속해서 버튼을 누르면 심층 암호화가 됩니다. ▼ 10번.. 2019. 2. 12.
JavaScript - 자바 스크립트로 해당 날짜에만 실행 하기 하드코딩으로 자바스크립트로 특정 날짜에만 실행하기 안녕하세요. 고코더 입니다. 가끔 웹사이트를 운영하다보면 특정한 날짜에만 임시로 팝업을 실행한다거나 경고창을 띄우게 될일이 많습니다. 그럴 경우 하드코딩으로 잠시 개발하였다가 원복을 하는 경우가 많은데요 그저 간단한 코딩이고 현재 시간을 비교해서 if를 하면 끝인데 저는 날마다 헷갈리네요. 그래서 적어 놓습니다. 12345678910111213141516 if (new Date() >= new Date('12/01/2018 21:00:00') // 언제부터 && new Date() 2018. 12. 19.