루키의 보석함

자바스크립트를 통해서 브라우저를 확대 축소하는 방법을 정리해 보려고 한다. 태그의 style 속성 중 하나인 zoom을 활용하면 쉽게 구현할 수 있다. 브라우저 확대 축소 자바스크립트 구현 20%씩 확대하고 축소하는 자바스크립트 구문은 다음과 같다. scale 값을 기본값인 1로 설정하고, 확대의 경우 20%를 곱하고 축소는 20%로 나누어서 계산하도록 했다. 그리고 document.body.style.zoom 값을 변경해서 확대 축소를 구현할 수 있다. 다양한 브라우저 지원 그러나 위 예제는 인터넷 익스플로러, 구글 크롬, 사파리에서만 동작한다. 파이어폭스나 오페라 등을 지원하기 위해서는 CSS3의 Transform을 활용해야 한다. 이 부분까지 적용한 전체 소스는 다음과 같다. 미니의 확대/축소 테스..

모바일 웹을 하다보면 SNS 공유 버튼 기능이 필요할 때가 있다. 간단하게 카카오톡, 페이스북, 트위터 공유 기능을 자바스크립트로 구현하는 것을 정리해 보도록 한다. 카카오톡 링크 공유하기 카카오톡 공유하기를 위해서는 먼저 카카오톡에 개발자 계정 등록을 해야 하고, 개발한 사이트의 URL도 앱 생성후 등록해야만 한다. http://developers.kakao.com 에서 기존 카카오톡 계정으로 설정하면 된다. 내 어플리케이션으로 이동해서 신규 어플리케이션을 웹으로 만든 다음, "설정 > 일반"에서 Javascript 키 (빨간색으로 표시)를 사용해서 카카오톡 링크를 구현할 수 있다. 그리고 카카오톡으로 공유하기를 보내기 위해서는 반드시 플랫폼이 등록되어야 한다. 위와 같이 사이트 도메인을 추가하고 저장..

웹 페이지 레이아웃 설정을 위해 Sitemesh를 많이 사용한다. 하지만 최근 웹페이지 속도 향상을 위해 자바스크립트를 Top Contents Bottom Contents Sitemesh의 decorator를 이렇게 만든 다음, 실제 웹페이지에서 하단에 JQuery 함수를 사용하면 당연히 에러가 발생한다. Jquery.js 파일이 앞에서 로딩되어 있지 않기 때문이다. 물론 자바스크립트를 Top Contents Bottom Contents 23번째 줄에 page.local_script라는 프로퍼티를 선언했다. 이제 다른 페이지들에서는 다음과 같이 사용하면 된다. ... 다른 body 콘텐츠 영역... 혹시 Sitemesh를 사용하면서 어쩔 수 없이 영역에 자바스크립트를 넣었었다면, 이 해결책이 도움이 될 ..

최근 모바일 웹을 지원하는 반응형 웹을 만드는 경우가 많다. 미디어쿼리나 부트스트랩(Bootstrap)을 활용해서 쉽게 반응형 웹을 만들기도 하지만 경우에 따라서 직접 모바일 기기인지 체크해야 하는 때도 많다. 그렇다면 모바일 브라우저를 어떻게 구분해 낼까? 자바스크립트로 브라우저 크기 구분 먼저 브라우저의 크기로 구분해 내는 방법이 있다. 자바 스크립트의 document.body.clientWidth 값을 가져와서 사용하면 된다. 소스를 살펴보자 if (document.body.clientWidth < 800) { // 모바일 기기 관련 작업 } 실제 몇몇 기기의 document.body.clientWidth의 값을 체크해 보면 다음과 같다. 디바이스 인치 세로모드 가로모드 아이폰 6 4.7인치 375..

숫자 체크하는 자바스크립트 전화번호를 입력할 때.. 000-0000-0000 (000)000-0000 이런형태로 입력하자나요.. 요런걸.. 00000000000 형태로 받고 싶어서 만든 간단한 자바 스크립트입니다. 필요한 분들은 참고하세요~~ 예제를 웹브라우저에서 열어보면 00000000000 11111111111 요렇게 나올 겁니다. 이메일 체크하는 자바스크립트회원 가입 같은 것을 할 때 이메일을 체크하는 경우가 종종 있습니다. 이때 사용할 수 있는 예제입니다. http://wizard.ncafe.net/wt/25 를 참고했구요. 이외에도 쓸만한 내용이 있네요. function checkEmail(email) { /** 체크사항 - @가 2개이상일 경우 - .이 붙어서 나오는 경우 - @.나 .@이 존..

Javascript에서 HTML을 파싱할 때 사용할 수 있는 라이브러리라고 합니다. http://ejohn.org/blog/pure-javascript-html-parser/ 에 방문해 보면 Pure JavaScript Html Parser라고 나와있네요.. 간단한 소스 설명도 되어 있습니다. http://ejohn.org/apps/htmlparser/ 에서 테스트를 할 수 있는데요.. 대략 테스트해보니.. XML형태로 제대로 만들어주네요~ 나중에 유용하게 사용할 수 있을 것 같습니다. htmlparser.js 파일은 http://ejohn.org/files/htmlparser.js 에서 다운로드 하세요.. js 소스도 한번 보세요.. 300줄 밖에 안되는데요.. 정규식이랑 아주 지대로 쓴것 같네요~ 혹..

제레미 키스가 쓴 방탄 Ajax라는 책에서 관련 자료를 가져왔습니다. 원격 서버 접근 보안상의 문제로 자바스크립트에서 다른 도메인의 자바스크립트를 접근하는 것은 기본적으로 안됩니다. 특히 Ajax와 같은 XMLHttpRequest를 통해서 접근하는 것은 불가능하죠.. 즉, 다음과 같이 접근할 수는 없다는 겁니다. request.open("GET", "http://api.search.yahoo.com/", true); XMLHttpRequest를 사용하는 방법으로는 기본적인 웹 API를 이용할 수 없다고 합니다. 그런데 script를 이용하면 이런 보안상의 제약을 없앨 수 있다고 합니다. 다음과 같이 다른 도메인에 있는 자바스크립트 파일을 읽어올 수 있기 때문이죠. 이런 형태로 요청할 수 있다면, JSON..

자바스크립트에서 form의 데이터를 문자열로 가져오기 간단한 자바스크립트 팁에 대해서 설명하려고 합니다. Ajax를 활용하다 보면, Form안에 있는 데이터를 문자열로 모아서 처리해야 하는 종종 경우가 있습니다. 즉, 폼 필드 내를 반복하면서 이름과 값을 추출해서 다음과 같은 형태로 리턴하는 거죠.. name=mini&title=xml&date=20080613 이런 문자열을 만들기 위한 함수를 먼저 하나 만들어 보겠습니다. function getRequestBody(oForm) { var data = ""; for (var i=0; i

EditArea라는 자바스크립트 에디터가 있습니다. 무료로 사용할 수 있구요.. 소스포지에서 받을 수 있습니다. http://www.cdolivet.net/editarea/ 에서 보면 내용을 볼 수 있구요.. http://www.cdolivet.net/editarea/editarea/exemples/exemple_full.html 에서 예제를 볼 수 있습니다. http://sourceforge.net/project/showfiles.php?group_id=164008 에서 소스를 받을 수 있다고 하네요.. 간단하게 예제 화면 하나 올려봅니다.