'자바스크립트'에 해당되는 글 9건

  1. 2015.10.20 자바스크립트와 스타일시트를 활용한 브라우저 확대 축소하기~ (1)
  2. 2015.09.30 자바스크립트로 카카오톡, 페이스북, 트위터 공유하기 만들기
  3. 2015.06.19 Sitemesh 활용시 하단의 자바스크립트 처리하기
  4. 2015.06.03 모바일 웹을 위한 브라우저 크기 및 기기 정보 체크하는 자바 스크립트
  5. 2011.10.13 숫자인지 체크하는 자바스크립트.. (이메일 체크하는 자바스크립트도 추가) (1)
  6. 2011.10.11 Javascript에서 사용하는 HTML Parser라고 합니다.
  7. 2011.10.11 자바 스크립트의 원격 서버 접근 및 onLoad 이벤트 처리
  8. 2011.10.10 자바스크립트에서 form의 데이터를 문자열로 가져오기 (2)
  9. 2008.01.08 Free Javascript Editor - EditArea

자바스크립트와 스타일시트를 활용한 브라우저 확대 축소하기~

|



자바스크립트를 통해서 브라우저를 확대 축소하는 방법을 정리해 보려고 한다. 

<body> 태그의 style  속성 중 하나인 zoom을 활용하면 쉽게 구현할 수 있다. 


브라우저 확대 축소 자바스크립트 구현

20%씩 확대하고 축소하는 자바스크립트 구문은 다음과 같다. 


scale 값을 기본값인 1로 설정하고, 확대의 경우 20%를 곱하고 축소는 20%로 나누어서 계산하도록 했다. 

그리고 document.body.style.zoom 값을 변경해서 확대 축소를 구현할 수 있다. 



다양한 브라우저 지원

그러나 위 예제는 인터넷 익스플로러, 구글 크롬, 사파리에서만 동작한다. 

파이어폭스나 오페라 등을 지원하기 위해서는 CSS3의 Transform을 활용해야 한다. 

이 부분까지 적용한 전체 소스는 다음과 같다. 


실제로 적용한 화면은 http://www.word.pe.kr/zoom/zoom.html 에서 확인할 수 있다. 







Trackback 0 And Comment 1

자바스크립트로 카카오톡, 페이스북, 트위터 공유하기 만들기

|



모바일 웹을 하다보면 SNS 공유 버튼 기능이 필요할 때가 있다. 

간단하게 카카오톡, 페이스북, 트위터 공유 기능을 자바스크립트로 구현하는 것을 정리해 보도록 한다. 


카카오톡 링크 공유하기 

카카오톡 공유하기를 위해서는 먼저 카카오톡에 개발자 계정 등록을 해야 하고, 

개발한 사이트의 URL도 앱 생성후 등록해야만 한다. 


http://developers.kakao.com 에서  기존  카카오톡 계정으로 설정하면 된다. 



내 어플리케이션으로 이동해서 신규 어플리케이션을 웹으로 만든 다음, 

"설정 > 일반"에서 Javascript 키 (빨간색으로 표시)를 사용해서 카카오톡 링크를 구현할 수 있다. 

그리고 카카오톡으로 공유하기를 보내기 위해서는 반드시 플랫폼이 등록되어야 한다. 

위와 같이 사이트 도메인을 추가하고 저장하면 된다. 

만약 플랫폼이 등록되어 있지 않으면 공유하기 시 에러가 나타난다. 


카카오톡 링크 공유하기는 공식 개발자 가이드에 잘 설명되어 있다.

간략히 옮겨보면 최종적으로 사용자에게 보여지는 카카오톡은 다음과 같다. 



여기에 보이는 라벨, 이미지, 버튼 아이콘 및 텍스트 등을 모두 수정할 수 있다. 

참고로 버튼 아이콘은 관리자 화면(맨 처음 그림에서 Mini 왼쪽의 아이콘 수정)에서 바꿀 수 있다. 


카카오톡 개발자 가이드에 나와 있는 소스는 다음과 같으니 참고하기 바란다.  



페이스북 공유하기 

페이스북이나 트위터는 URL 패턴으로 되어 있어 상대적으로 간편하다. 

다만, 페이스북은 메타 태그를 통해서 더 많은 정보를 제공할 수 있어 해당 메타태그를 잘 작성하는 것이 필요하다. 


페이스북의 공유를 위한 메타 태그의 정보는 다음과 같다. 


그리고 다음 URL로 글을 보내면 된다. 

http://www.facebook.com/sharer/sharer.php?u=공유할 글의 URL


최종적으로 현재 글의 공유하기 버튼을 만든다면 다음과 같이 할 수 있다. 


참고로 페이스북의 경우에는 캐싱을 하기 때문에 내용이 바뀌었을 때 바로 적용되지 않는다. 

이럴 경우에는 다음 디버깅 URL로 이동해서 "Fetch new scrape information" 버튼을 클릭해 다시 불러오기를 한 후 실행하면 된다. 


트위터 공유하기

트위터 공유는 메타 태그 등이 필요없이 URL 패턴으로만 전송하면 되므로 간단하다. 

https://twitter.com/intent/tweet?text=글 제목&url=공유할 글의 URL


자바스크립트로 구현하면 다음과 같이 할 수 있다. 


실행하면 다음과 같이 트위터에 공유할 수 있는 화면이 나타난다. 





Trackback 0 And Comment 0

Sitemesh 활용시 하단의 자바스크립트 처리하기

|



웹 페이지 레이아웃 설정을 위해 Sitemesh를 많이 사용한다. 

하지만 최근 웹페이지 속도 향상을 위해 자바스크립트를 <head>가 아닌 <body> 하단에 포함하면서 조금 애매한 부분이 발생했다. 


Sitemesh 하단 자바스크립트 처리 이슈 

보통 Sitemesh의 decorator.jsp 파일을 살펴보면 다음과 같이 생성하게 된다. 

스타일시트는 <head> 태그에 배치했지만, JQuery와 부트스트랩을 위한 자바스크립트는 하단에 배치했다. 

Sitemesh의 decorator를 이렇게 만든 다음, 실제 웹페이지에서 하단에 JQuery 함수를 사용하면 

당연히 에러가 발생한다. 



Jquery.js 파일이 앞에서 로딩되어 있지 않기 때문이다. 


물론 자바스크립트를 <head> 태그 내로 옮기면 쉽게 해결할 수도 있다. 

하지만 부트스트랩 등의 최근 자바스크립트를 보면 속도 이슈 때문에 전체 페이지가 로딩된 다음 자바스크립트를 실행하라는 주석이 포함되어 있다. 

<!-- Placed at the end of the document so the pages load faster -->


Sitemesh  하단 자바스크립트 처리 방법

해결책은 decorator의 getProperty를 활용하면 된다. 

decorator.jsp 파일에 다음과 같이 작성한다. 

<decorator:getProperty property="page.local_script">


위 소스가 반영된 decorator.jsp 파일은 다음과 같다. 


23번째 줄에 page.local_script라는 프로퍼티를 선언했다. 

이제 다른 페이지들에서는 다음과 같이 사용하면 된다. 


혹시 Sitemesh를 사용하면서 어쩔 수 없이 <head> 영역에 자바스크립트를 넣었었다면, 이 해결책이 도움이 될 것이다. 

참고로 decorator에서 title을 페이지마다 바꾸는 것은 다음과 같이 사용하면 된다. 

<title><decorator:title default="미니의 프로그래밍 이야기" /></title>


Sitemesh 더 알아보기...

웹 페이지 레이아웃을 설정하는 SiteMesh 세팅 및 활용에 대하여~

Sitemesh 활용시 하단의 자바스크립트 처리하기

Sitemesh에서 메타 태그로 Decorator에 값 전달하기~





Trackback 0 And Comment 0

모바일 웹을 위한 브라우저 크기 및 기기 정보 체크하는 자바 스크립트

|



최근 모바일 웹을 지원하는 반응형 웹을 만드는 경우가 많다. 

미디어쿼리나 부트스트랩(Bootstrap)을 활용해서 쉽게 반응형 웹을 만들기도 하지만 

경우에 따라서 직접 모바일 기기인지 체크해야 하는 때도 많다. 


그렇다면 모바일 브라우저를 어떻게 구분해 낼까? 


자바스크립트로 브라우저 크기 구분

먼저 브라우저의 크기로 구분해 내는 방법이 있다. 

자바 스크립트의 document.body.clientWidth 값을 가져와서 사용하면 된다. 

소스를 살펴보자


실제 몇몇 기기의 document.body.clientWidth의 값을 체크해 보면 다음과 같다. 

 디바이스

인치

세로모드 

 가로모드

 아이폰 6

 4.7인치 

375 

641 

 넥서스 5

 4.95인치 

346

574 

 넥서스 7

 7인치 

577

924

 맥북에어

 13인치

 1080


위 값을 참조해서 800이란 숫자를 변경해서 사용하면 된다.

본인이 사용하는 기기의 viewport 크기, device 크기, document 크기 값을 알고 싶다면 다음 사이틀 한번 방문해 보기 바란다. 

http://ryanve.com/lab/dimensions/


자바스크립트로 기기 구분 

자바스크립트로 기기를 구분하기 위해서는 navigator.userAgent 값을 활용한다. 

navigator 객체는 브라우저의 버전과 종류 등 웹브라우저의 정보를 제공하는 객체이다. 

이 중 userAgent는 브라우저가 User-Agent HTTP 헤더에 넣어 전송하는 문자열로 appName과 appVersion을 비롯한 다양한 정보가 포함되어 있다. 


원래 userAgent는 웹에서 넷스케이프 네비게이터와 인터넷 익스플로러의 크로스 브라우징을 위해 주로 사용되었다. 

예전에 넷스케이프와 익스플로러가 상호호환이 안되어서 userAgent로 구분해서 코딩했던 기억이 난다. 


모바일 환경이 되면서 각 모바일 기기에서는 userAgent에 단말기 정보를 포함해서 보내므로 이를 통해 구분하면 된다. 

간단하게 아이폰과 안드로이드를 구분하는 소스는 다음과 같다. 


실제 브라우저별 사용하는 userAgent의 값은 다음과 같다. 

 구분

userAgent 값

iPhone

Mozilla/5.0 (iPhone; CPU iPhone OS 6_1_3 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10B329 Safari/8536.25 

 iPhone 크롬 

Mozilla/5.0 (iPhone; CPU iPhone OS 6_1_3 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) CriOS/28.0.1500.16 Mobile/10B329 Safari/8536.25 (00236FCC-CE47-4774-9A79-DBBEEC199F9A) 

 iPad

Mozilla/5.0 (iPad; CPU OS 6_1_3 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10B329 Safari/8536.25 

 Android(갤럭시 S4)

Mozilla/5.0 (Linux; Android 4.2.2; ko-kr; SAMSUNG SHV-E300K/KKUAME7 Build/JDQ39) AppleWebKit/535.19 (KHTML, like Gecko) Version/1.0 Chrome/18.0.1025.308 Mobile Safari/535.19 

 MacOS 사파리

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_4) AppleWebKit/536.30.1 (KHTML, like Gecko) Version/6.0.5 Safari/536.30.1 

 MacOS 크롬

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.36

 MacOS 파이어폭스

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.8; rv:22.0) Gecko/20100101 Firefox/22.0 

 Windows IE

Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0; .NET4.0E; .NET4.0C) 

 Windows 크롬

Mozilla/5.0 (Windows NT 6.2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.72 Safari/537.36

 Windows 파이어폭스

Mozilla/5.0 (Windows NT 6.2; rv:22.0) Gecko/20100101 Firefox/22.0 





Trackback 0 And Comment 0

숫자인지 체크하는 자바스크립트.. (이메일 체크하는 자바스크립트도 추가)

|




숫자 체크하는 자바스크립트


전화번호를 입력할 때..

000-0000-0000
(000)000-0000

이런형태로 입력하자나요..
요런걸.. 00000000000 형태로 받고 싶어서 만든 간단한 자바 스크립트입니다.

필요한 분들은 참고하세요~~




예제를 웹브라우저에서 열어보면

00000000000
11111111111

요렇게 나올 겁니다.


이메일 체크하는 자바스크립트

회원 가입 같은 것을 할 때 이메일을 체크하는 경우가 종종 있습니다. 이때 사용할 수 있는 예제입니다. 

http://wizard.ncafe.net/wt/25 를 참고했구요. 이외에도 쓸만한 내용이 있네요. 






Trackback 0 And Comment 1

Javascript에서 사용하는 HTML Parser라고 합니다.

|




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줄 밖에 안되는데요.. 정규식이랑 아주 지대로 쓴것 같네요~

혹시 몰라서 파일로도 올려놓을게요.. ^^
htmlparser.js



Trackback 0 And Comment 0

자바 스크립트의 원격 서버 접근 및 onLoad 이벤트 처리

|



제레미 키스가 쓴 방탄 Ajax라는 책에서 관련 자료를 가져왔습니다.

원격 서버 접근

보안상의 문제로 자바스크립트에서 다른 도메인의 자바스크립트를 접근하는 것은 기본적으로 안됩니다.
특히 Ajax와 같은 XMLHttpRequest를 통해서 접근하는 것은 불가능하죠..
즉, 다음과 같이 접근할 수는 없다는 겁니다.


XMLHttpRequest를 사용하는 방법으로는 기본적인 웹 API를 이용할 수 없다고 합니다. 
그런데 script를 이용하면 이런 보안상의 제약을 없앨 수 있다고 합니다. 
다음과 같이 다른 도메인에 있는 자바스크립트 파일을 읽어올 수 있기 때문이죠.


이런 형태로 요청할 수 있다면, JSON 파일도 요청할 수 있다고 합니다.
Ajax에서 XML, Text와 함께 리턴 타입으로 많이 사용하는 JSON은 기본적으로 javascript 구문이기 때문에 가능하다고 합니다.
그러나 원격 서버에서 JSON으로 결과를 리턴해 주지 않는다면 소용은 없겠죠.. 

어쨌든 이렇게 자바스크립트로 가져오려면 경우에 따라서 동적으로 새로운 script를 생성해야 할 필요도 있을 겁니다.
다음과 같이 처리하면 가능하다고 하네요


위 소스는 url을 자바스크립트로 head에 추가하는 함수입니다. 
그리 복잡하지는 않죠.. script라는 요소를 만들고, type이나 src와 같은 속성을 넣고, head 하위에 추가하는 겁니다.

하지만, 일반적인 웹서비스는 이런 형태로 구성되어 있지는 않죠... ^^ 
대부분은 자체의 서버에 요청을 하고, 해당 서버에서 원격 서버로 연결하는 프록시 방식을 많이 이용하고 있는 듯 합니다.
어쨌든 위와 같은 방식도 있구나 하고 보시면 될 것 같습니다.

onload 이벤트 처리

웹 프로그래밍을 하면서 이런 경험은 한번 쯤 있을 겁니다.
특정 함수를 head에 있는 자바스크립트에서 실행을 해야 하는데, 
그 함수내에 document.getElementsByTagName("a")과 같은 소스가 들어가 있는 경우, 
아직 페이지가 로드 되지 않아서 제대로 처리가 안되는 때가 있습니다.

로직 상에는 아무 문제가 없는데, 답답해지죠.. -.-
이런 경우, 보통 body 태그에 onload="함수"와 같이 사용하거나, 
html 소스의 맨 하단에 그와 같은 함수를 두어서 해결하기도 합니다. 

그런데 방탄 Ajax란 책에서 보면 body 태그에 넣는 것과 같이 스크립트 코드와 html 코드가 함께 있는 것은 바람직 하지 않다고 합니다.
prepareLinks라는 함수를 호출할 때 다음과 같은 형식으로 사용할 수 있다고 합니다. 


window.onload에 대해서는 이미 아시는 분들도 많겠지만, body 태그에 onload=""와 같은 것이죠
위 소스는 html 내의 앵커(a) 태그를 찾아서 설정된 href로 이동하지 않고, doSomething 함수를 수행하도록 바꾸는 겁니다.

그런데 이와 같이 사용할 경우, 단 하나의 함수만 지정할 수 있다고 합니다.
여러 개의 함수를 순차적으로 실행할 경우에는 다음과 같이 addLoadEvent 함수를 사용할 수 있다고 하네요..


음.. 꽤나 복잡해 보입니다. 익명함수를 많이 사용하는 듯 해요
테스트는 안해 봤지만, 잘 되겠죠..

오랜만에 책 좀 보다가 생각나서 정리해 봤습니다.



Trackback 0 And Comment 0

자바스크립트에서 form의 데이터를 문자열로 가져오기

|



자바스크립트에서 form의 데이터를 문자열로 가져오기

간단한 자바스크립트 팁에 대해서 설명하려고 합니다. 
Ajax를 활용하다 보면, Form안에 있는 데이터를 문자열로 모아서 처리해야 하는 종종 경우가 있습니다. 

즉, 폼 필드 내를 반복하면서 이름과 값을 추출해서 다음과 같은 형태로 리턴하는 거죠..

name=mini&title=xml&date=20080613

이런 문자열을 만들기 위한 함수를 먼저 하나 만들어 보겠습니다. 


간단한 형태죠.. 먼저 encodeURIComponent는 폼의 값을 정상적으로 서버에 전송하기 위해서 자바스크립트에서 제공하는 인코딩을 수행합니다. 
전송 중에 발생할 수 있는 데이터 손실을 피하기 위해 사용하는 거라고 생각하면 됩니다. 

그리고 나머지는 큰 무리 없이 이해가 될 겁니다. 
위의 문자열을 만들기 위해 =와 &로 연결해 주는 거니까요.. 

그런데 위 소스는 문제점이 두가지가 있습니다. 
첫번째는 문자열이 다음과 같이 마지막에 &로 끝나게 됩니다.

name=mini&title=xml&date=20080613&

서버에서 처리하는데 큰 문제는 없겠지만 아무래도 좀 꺼림직 하죠.. ^^
하지만 그것보다 더 큰 문제가 하나 더 있습니다.
자바스크립트는 클라이언트 환경에서 실행되는 프로그램입니다. 
즉, 클라이언트의 PC 상황에 따라 처리 속도가 결정되는 것이죠..
그런데 위처럼 문자열을 계속적으로 연결하게 되면 코드 실행 속도를 저하시키는 문제가 발생합니다. 

이런 문제를 해결하기 위해서 자바스크립트의 배열을 활용하면 됩니다.
그럼 최적화된 소스를 한번 살펴보시죠..


이렇게 함으로써 앞에서 이야기 한 두가지 문제를 모두 해결하게 됩니다. 
간단한 자바스크립트 팁이었습니다. 

아.. 위 소스를 테스트 해보시려면 다음 소스가지고 하시면 됩니다. 







Trackback 0 And Comment 2

Free Javascript Editor - EditArea

|



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 에서 소스를 받을 수 있다고 하네요..

간단하게 예제 화면 하나 올려봅니다.

사용자 삽입 이미지






Trackback 0 And Comment 0
prev | 1 | next