javascript

모바일 접속시 특정 페이지로 이동

빽짱구 — Sun, 21 Oct 2018 12:15:05 +0900

모바일 접속시 특정페이지로 이동하는 방법입니다.

생활코딩이라는 사이트입니다.

빽짱구 — Wed, 14 May 2014 01:40:38 +0900

http://opentutorials.org/course/1

체계적으로 설명이 정말 잘되었습니다.

참고하시길...

클릭시 내용보여주고 숨기기

UI — Tue, 25 Jun 2013 16:44:29 +0900

1이란 버튼을 클릭하면 1버튼에 대한 내용이 보여주고, 2라는 메뉴 클릭시 1내용을 숨기고, 2에 대한 내용을 보여주는 형식입니다.

아래소스는 버튼이 3개일때 입니다.

버튼1

버튼1 클릭시 보여질 내용

버튼2

버튼2 클릭시 보여질 내용

버튼3

버튼3 클릭시 보여질 내용

모바일 페이지 코딩시 주소창 사라지는 방법

빽짱구 — Fri, 12 Oct 2012 11:10:58 +0900

모바일 접속시 주소입력후 이동을 하면 주소창이 자동으로 사라지게 하는 소스입니다.

단 스크롤이 없이 모바일 한페이지에 보여지는 경우는 주소창이 사라지지 않습니다.

이유는 스크롤 없이 한페이지에 모든내용이 보여지는데 구지 주소창이 없어질 필요는 없기때문입니다.

오늘날짜 스크립트

빽짱구 — Thu, 27 Oct 2011 16:19:11 +0900

오늘날짜 스크립트입니다.

2011년10월27일 요로코롬 보여집니다.

새로고침할때마다 바뀌는 랜덤배너 소스

빽짱구 — Thu, 21 Jul 2011 10:00:50 +0900

웹미니 메인 배너에 사용된 스크립트 입니다.

외부 js에 삽입을 하셔도 되고, 페이지내에 삽입 하셔도 됩니다.

// 랜덤 배너 출력
  var banner=new Array();
  banner[0]="";
  banner[1]="";
  banner[2]="";
  banner[3]="";
  banner[4]="";

var random_banner=Math.floor(Math.random()*(banner.length));

배너가 보여질 문서에 스크립트에서 등록한 함수를 호출합니다.

/* 배너가 노출될 곳에 삽입 */

모바일페이지에서 주소창 자동숨김

빽짱구 — Wed, 19 Jan 2011 09:05:45 +0900

모바일 페이지에서 주소창을 자동으로 숨겨주는 스크립트 입니다.

물론 터치하면 주소창이 나타나겠죠.

이미지에 마우스 올리면... 이미지가 상하로 살짝쌀짝

웹기프트 — Sat, 13 Nov 2010 10:27:42 +0900

롤링 자동 스크립트

웹기프트 — Sat, 13 Nov 2010 10:20:01 +0900

간단한 소스를 드리겠습니다.

바로 실행시켜 보세요

Auto/Stop

Free JavaScripts provided

by The JavaScript Source

아이폰으로 접속했을떄 특정 페이지로 이동시키는 자바스크립트

주영아빠 — Tue, 26 Oct 2010 18:19:49 +0900

var mobileKeyWords = new Array('iPhone', 'iPod', 'BlackBerry', 'Android', 'Windows CE', 'LG', 'MOT', 'SAMSUNG', 'SonyEricsson');

for (var word in mobileKeyWords){

if (navigator.userAgent.match(mobileKeyWords[word]) != null){

location.href = "http://www.naver.com/";

break;

}

script>

pc버전과 아이폰 버전 홈페이지를 동시에 만들떄 이거 스크립트를 삽입하면..

스마트폰으로 접속했을때 특정페이지로 이동하게끔할수있습니다.

참고하세요

스위칭 하는 자바스크립트..

늘푸른 — Sat, 24 Jul 2010 16:31:26 +0900

1번 테이블


여기에는 내용.. 어쩌구.. 저쩌구..

2번 테이블


여기에는 내용.. 어쩌구.. 저쩌구..

3번 테이블


여기에는 내용.. 어쩌구.. 저쩌구..

이렇게 하고 하단에 자스를..넣습니다

이러면 스위칭시 레이어를 보여줬다가 안보여줬다 하죠.^^

이미지 클릭시 최적사이즈로 팝업 열리게 하는 스크립트

늘푸른 — Sat, 24 Jul 2010 10:30:01 +0900

골때리는 자바스크립트 번외편!!!

이병준 — Fri, 28 May 2010 09:16:21 +0900

자.. 5탄에 너무 어려워 골때리다는 분이 많아서 오늘은 그냥 번외를 준비했습니다.
오늘은 좀 재밌는 걸 준비했는데요.
자.. 먼저 이걸 보시죠.

mypage.html?page=write&where=isit

음.. 그냥 URL이죠. 그리고 ? 뒤에 질의문이 들어가있죠. 쿼리스트링이라 하지만 우리말로 하면 질의문이잖아요..ㅋㅋㅋㅋ
뭐.. 이걸 서버사이드에선 어떻게 처리할까요?
먼저 PHP요~
$_GET['page'];

ASP(.net)요~
VB:
Request.QueryString("page")
C#,JScript,J#...:
Request.QueryString["page"]

JSP요~
...안해봐서.. 댓글로 참조부탁요.

그외에도 CF,Mac,Perl,CGI등등등.. 다채롭죠.

그렇다고 질의문을 내맘대로 꾸미고 싶다. 질의문 전체를 참조하려면 어떻게 해야합니까?
PHP요~
$_SERVER['QUERY_STRING'];

ASP(.net)요~
VB:
Request.ServerVariables("QUERY_STRING")
C#,JScript,J#...:
Request.ServerVariables["QUERY_STRING"]

JSP요~
.....................몰라요.

이상 서버단이었습니다.
근데 자바스크립트 강좌인데 왜 난데없이 질의문 가지고 난리입니까?
오늘은 자바스크립트로 질의문 다루는 걸 하겠다는겁니다.
헐..자스도 질의문 다루는 기능이 있습니까?????????????????????????

아뇨. 없어요..자체적으론 없습니다..ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
하지만 URL을 가공해서 처리는 할 수 있습니다.
location 객체. 음.. URL을 얻어올때 주로 쓰는 객체이죠. 네..
이 location에 href 속성으로 전체 URL을 얻어올 수 있죠? 파일명부터 질의문까지.
근데.. 이걸 가공하기엔 좀 귀찮고.. 하지만 하늘은 우릴 버리지 않으셧습니다.
앵커를 참조하라고 location 객체에 search 속성을 내려주셨습니다.
이 속성에는 # 뒤에 들어간 앵커. 우리말로하면 책갈피를 보여주지만 ?을 붙인 그 뒤에 질의문도 보여주는 친절함을 선보이고 있죠.
결국 location.search는 server variables의 query_string인 셈이죠.
이제 이걸 다룰 줄 알면 오늘 골때리는 강좌는 여기서 끝입니다...

자.. 먼저, search 속성의 ?부터 제거해보기로 합시다.
var qs=location.search.replace('?','');
자스의 replace는 기본적으로 정규식의 global 속성을 주지 않는 이상 첫번째 단어만 검색하면 그걸 대체하고 끝내버리는 속성이 있습니다. 하지만 서버단의 replace는 그 반대죠.
어쨌든 substring을 쓰던 replace를 쓰던 ?을 제거하면 일단 질의문을 가공할 준비는 끝입니다. 어떻게 가공할건지는 여러분의 자유에 맡기겠지만, 저는 split을 통해 그냥 쉽게 처리할 생각입니다.
먼저 &가 들어간 단어를 기준점으로 문자를 나눕니다.
qs=qs.split('&');
이렇게 되면 질의문의 갯수만큼 나눠지겠죠. 단순히 &만 나누기때문에 &남용하면 물론 & 갯수만큼 나눠지겠지만 그건 큰 문제가 없습니다. 키=값 쌍만 있는넘만 등록하게 하면 되니까요. 그런다음에 = 기준으로 키=값을 분리해서 왼쪽은 키, 오른쪽은 값 이런식으로 하면 되죠. 그다지 어렵지는 않죠?
split 써도 되고. 정규식씨를 섭외해도 되고... 여러분이 원하는 방식으로 가공해서 처리하면 됩니다. 어때요. 쉽죠?

이렇게해서 querystring 값을 받아오는 함수는 다음과 같습니다.
function getQueryString(key){
var qs=location.search.replace('?','');
if(!key) return qs;
qs=qs.split('&');
var qsr='';
for(i=0;i if(!!qs[i]&&qs[i].indexOf('=')>-1){
var qv=qs[i].split('=');
if(qv[0]==key) qsr+=qv[1]+'|';
}
}
qsr=qsr.replace(/\|$/,'');
return qsr.indexOf('|')>-1?qsr.split('|'):qsr;
}
만약 하나만 나오면 하나나온 값 문자열을, 복수면 배열로 리턴하게 친절하게 꾸몄습니다.
저 잘했죠?

만약 location과 같이 기억해두고싶다면 Location.queryString을 만들고 내용을 저걸로 집어넣어도 무관합니다.

만약 RewriteMod와 같이 쓰고 싶다면 자스는 ReWrite와 무관하게 URL을 수집하기 때문에 그에 맞게 꾸미면 되겠습니다.

오늘은 그냥 골때리다기보기엔 그냥 그렇다 하겠지만 자스로도 질의문을 받아 처리할 수 있다는 사실에 오늘 재밌는 감동을 얻었군요.

번외편은 여기까지구요. 다음엔 약속대로 골때려서 돌아가시게 해드리겠습니다.
각오하고 그럼 즐코딩하셈.

아참, 덧붙여서 검색창에 js querystring 쳐보셈. 즐비하게 나오는 팁입니다..

골때리는 자바스크립트의 세계 9탄!

이병준 — Fri, 28 May 2010 09:14:24 +0900

오랜만이군요. 자. 다시 골때리는 자바스크립트의 세계가 돌아왔습니다.
오랜만에 돌아온 만큼 오늘은 조금 골이 살짝 때리는 팁을 드리도록 하겠습니다.

HTML5가 성행하기 시작하면서 새로운 태그와 새로운 속성이 우후죽순 나오고 있습니다. 그런 만큼 크로스 브라우저에 대한 노력은...
굳이 안해도 될것같긴 하겠지만ㅋ

배열에 push란 함수가 있는지 없는지 확인해보기 위해서는 몇가지 방법이 있겠죠.
!!['my','name','is','array'].push
!!Array.prototype.push
'push' in ['me','too']
'push' in Array.prototype

1번꺼는 만들어진 배열에 push란 메서드가 있나 확인해보는 거고
2번꺼는 배열 동적 메서드에 push가 있는지 확인해보는 거고,
3번꺼는 만들어진 배열에 push란 메서드가 있나 확인해보는 거고
4번꺼는 배열 동적 메서드에 push가 있는지 확인해보는 거죠.

어때요. 참 쉽죠?
다들 표정이 왜그래요? 자바스크립트로 배열만드는게 쉼표하나빠져서 배열 다뒤지는사람처럼?

'push' in ['me','too'] 이건 ㅤㅁㅝㅇ미?
in 연산자가 무엇일까요?
in 키워드는 해당 객체에 키 또는 하위 요소가 있는지 알아내주는 녀석입니다.
in 키워드는 주로 이럴때 쓰죠.

for(var x in object) ...

자바스크립트를 시작할때쯤 반복문 배울때 한번씩은 배워봤을겁니다.
여기서 주로 JSON 키를 얻거나 특정 객체의 속성을 검색하는데 주로 쓰였죠.
네 맞습니다. 반복문 외에도 쓸거리는 있죠.

근데 왜 쓰는 방법이 'string' in object 인데 속성이름을 문자열로 할까요?
반복문을 쓰다보면 받아오는 변수는 키를 문자열로 받죠? 그거와 똑같은 효과입니다.

그럼 어떨때 쓰는 게 좋을까요?

일단 !!['array'].push 보다는 'push' in ['array'] 이게 거 가독성이 있어보이죠.
거기다가 반환되는값은 bool값이라 true나 false기 때문에 속성 찾는데 있어서 안전하죠.
즉, 속성 검색하다 쓸데없는 현상으로 오류날걱정은 전혀 안해도 된다는 겁니다.

이상입니다. 오늘은 경험자들에게 골때려서 되새기고, 초보에게는 골때려서 또다른 기능을 얻어가는 골때리는 자바스립트의 세계.
다음에는 더욱더 골때려서 머리 깨지는데 더욱 더 도움이 될 수 있는 컨텐츠로 찾아뵙겠습니다.

골때리는 자바스크립트의 세계 8탄!

이병준 — Fri, 28 May 2010 09:10:56 +0900

뭐. 8탄이라. 점점 골때려져 가겠는데 이게 웬 8탄이냐..
이번엔 어려워서 골때릴 것 같다구요?
뭐.. 아무렴 어때요.ㅋㅋ

제가 6탄에서 스크립트 난독화에 대해 설명을 한 적이 있었습니다.
그기서 난독화 테크닉에 괄호한테 십쇼키라고 욕했죠.
ㅋㅋ 근데 가끔씩 유용합니다. 왜그럴까요?
그전에 있어서 괄호가 어디어디 쓰이는지부터 보도록 하죠.

var s=0;
for(i=1;i<=100;i++){
s+=i;
}
alert(s);

뭐. 일단 쉽게 1부터 100까지 더하는 반복문입니다.
그렇다면 이걸 일반적인 다른 방법이 있다면,

var s=0,i=1;
while(i<=100)
s+=i++;
alert(s);

그럼 함수는..

function(a,b){
return a+b;
}

그리고 또는 1탄에서 언급한 기술..

(function(a){alert(a);})('안녕');

아니면

alert(({a:'b',c:'d'}).a);

괄호는 우리 코딩이나 프로그래밍 생활에 정말 유용하게 쓰이는 녀석입니다.

자 그렇다면, 6탄에서 본적 있죠?

var a=(b='이런',b+'젠장');
alert(a);

이 스크립트를 실행하면 이런젠장이란 글씨가 뜹니다.
a는 함수인가요? 아닌뎁쇼.
그럼 뭡니까? 몰라요. 그렇다는데요?
저보다 자스천재님이 가르쳐주실지도...ㅋ

어쨌든, 난독화에 쓰이기도 하고, 일회성도 있기 때문에 잠시 써먹는 식으로도 그만이죠.
예를 들어,

while(Math.round(Math.random())){
a=1;
window.status+=a;
}

이 a는 어자피 while 문 안에서만 쓸 거 아닙니까? 그럼 그냥 이렇게 하세요.

while(a=1,Math.round(Math.random())){
window.status+=a;
}

어째보면 좀 의미가 있군요. 여기서 지역변수 a는 1로 정의했다고 보이기도 하고,
그리고 조건문은 뒤에 썼죠. 실제로 while 문이 인식할 건 마지막 인자니까요.

6탄에서도 말했지만 (1,2,...,n) 이런 괄호 연산자 실행시 결과는 무조건
마지막에 쓴 n이 나옵니다.

그래서 이걸 활용한 별 희한한 식이 나오기도 하죠.
v.push((c=arguments[i],l=c.length>4?2:1,parseInt((h=c.substr(1+j*l,l),h+(l>1?'':h)), 16)));

이걸 제가 직접 작성했다고 자랑하긴 좀 뭐하죠.
이걸 풀어보면 어떻게 될까요? 풀어봅시다.

c = arguments[i];
l = c.length > 4 ? 2 : 1;
h = c.substr(1 + j * l, l);
h = h + (l > 1 ? '' : h);
v.push(parseInt(h,16));

이렇게 나오는군요.

오늘 골때리는 자바스크립트는 여기까집니다.
괄호 연산자로 잠시동안 쓸 지역변수를 정의하거나, 아니면 잠시 해야 할 연산을 한 다음에, 마지막에 진짜 연산식을 넣는 가방 역할을 하는 이 괄호 연산자.

그다지 쓸데는 없습니다. 왜냐하면 이건 코드 축소하거나 난독화에 쓰이거든요.
거기다가 이건 고급 테크닉입니다. 이거 작성하는데 에러 잡기 정말 힘들겁니다.
먼저 코드를 어떻게 진행해 나갈지부터 확실히 잡힌 다음에 리팩토링하는 게 좋겠죠.