연구_고민/웹2009.07.20 17:38

JQuery 사용해보기.

프로토타입, 도조 등 많은 비슷한 스크립트 라이브러리들이 있지만 요세 대세? 가벼우면서 막강한 JQuery를 사용해보자.

각 포털사이트에서 JQuery를 검색해보면 JQuery는 홈페이지에서 다운로드 할 수 있다.

 

해당 엘리먼트 접근하기

일반 : document.getElementById("id");

JQuery : $("#id");

   - 엘리먼트의 ID 접근시 #, class 접근시 .

 

해당 엘리먼트의 값 접근하기

일반 : document.getElementById("id").value;

JQuery : $("#id").val();

   - 엘리먼트의 값을 대입하고 싶다면 $("#id").val("값");

 

해당 엘리먼트의 개체를 비교하여 true/false를 알려주는 메소드

일반 : document.getElementById("id").checked;

JQuery : $("#id").is(':checked');

   - 체크박스 및 라디오버튼에 체크상태인지를 boolean 형으로 반환

   - $("#id").is(".orange, .blue, lightblue");  id의 class 속성중 orange, blue, lightblue 가 하나라도 있으면 true

 

해당 엘리먼트의 CSS 속성 부여하기

일반 : document.getElementById("id").style.border = "4px solid yellow");

JQuery : $("#id").css("border", "4px solid yellow");

    - 첫번째인자는 속성이름, 두번째인자는 속성값을 넣으면 된다.

 

해당 엘리먼트의 display 속성 부여하기

일반 : document.getElementById("id").style.display = "none";

JQuery : $("#id").hide(); , $("#id").show();

    - hide 숨김, show 보임, hide, show 안에 인자를 slow, normal, fast 중 하나로 보임숨김의 속도를 조절 할 수 있다.

    - 아니면 수치로 1000분의 1초로 할 수 있음. show(950)

 

체크박스의 전체선택 / 해제

일반

function selectAll() {
    var blnChecked = document.getElementById("allCheck").checked;      // 전체선택 체크박스의 상태
    checkBoxes = document.getElementsByName('delCheck');                // 태그이름중 delCheck인 엘리먼트를 배열로 얻음

 

    for(var i=0; i<checkBoxes.length; i++) {
     objCheck = checkBoxes[i];
        if (objCheck) {
            objCheck.checked = blnChecked;
  }
    }
}

 

JQuery

$(document).ready(function() {                    
  $('#allCheck').click(function() {                    // 전체선택 체크박스 선택 이벤트
    if($('#allCheck').is(':checked')){                // 전체선택 체크박스 체크상태
      $('.delCheck').each(function(){                // 여러개의 체크박스 의 class 속성의 값이 delCheck 인걸 가져옴
        $(this).attr('checked', 'checked');           // 가져온 체크박스를 checked
        });
     }else{                                                     // 전체선택 체크박스 미체크상태
       $('.delCheck').each(function(){
       $(this).attr('checked','');                         // 가져온 체크박스를 미체크상태로
       });
     }
   }); 
});

 

엘리먼트의 존재여부를 체크하기

JQuery : if($("#id").length > 0)     

    - 엘리먼트로 존재하지 않은 경우에도 빈 객체로 반환하기 때문에 JQuery는.. 객체의 길이를 체크해서 존재여부를 체크한다

신고
Posted by naearu
연구_고민/웹2008.06.24 14:41

HTTP 에러 코드

400 요청실패
문법상 오류가 있어, 서버가 요청사항을 이해하지 못함, 클라이언트는 수정없이 요청사항을 반복하지 않을 것이다.

401.1 권한 없음 (접속실패)
이 에러는 서버에 로그온 하려는 요청사항이 서버에 들어있는 권한과 비교했을 때 맞지 않을 경우 발생한다. 이 경우, 여러분이 요청한 자원에 접근할 수 있는 권한을 부여받기 위해 서버 운영자에게 요청해야 할 것이다.

401.2 권한 없음(서버설정으로 인한 접속 실패)
이 에러는 서버에 로그온 하려는 요청사항이 서버에 들어있는 권한과 비교했을 때 맞지않을 경우 발생한다. 이것은 일반적을 으로 적절한 www-authenticate head field를 전송하지 않아서 발생한다.

401.3 권한 없음(자원에 대한 ACL에 기인한 권한 없음)
이 에러는 클라이언트가 특정 자원에 접근할 수 없을 때 발생한다. 이 자원은 페이지가 될 수도 있고 , 클라이언트의 주소 입력란에 명기된 파일일 수도 있다. 아니면 클라이언트가 행당 주소로 들어갈 때 이용되는 또 다른 파일일 수도 있다. 여러분이 접근할 전체 주소를 다시 확인해 보고 웹 서버 운영자에게 여러분이 자원에 접근할 권한이 있는지를 확인해 본다.

401.4 권한 없음(필터에 의한 권한 부여 실패)
이 에러는 웹 서버가 서버에 접속하는 사용자들을 확인하기 위해 설치한 필터 프로그램이 있음을 의미한다. 서버에 접속한는 데 이용되는 인증 과정이 이런 필터 프로그램에 의해 거부되었다.

401.5 권한 없음(ISA PI/CGI 애플리케이션에 의한 권한부여 실패)
이 에러는 여러분이 이용하려는 웹 서버의 어드레스에 ISA PI나 CGI프로그램이 설치되어 있어 사용자의 권한을 검증하고 있음을 의미한다. 서버에 접속하는 데 이용되는 인증 과정이 이 프로그램에 의해 거부되었다.

403.1 금지(수행접근 금지)
이 오류는 CGI나 ISAPI,혹은 수행시키지 못하도록 되어있는 디렉토리 내의 실행 파일을 수행시키려고 했을 때 발생한다.

403.2 금지(읽기 접근 금지)
이 에러는 브라우저가 접근한 디렉토리에 가용한 디폴트 페이지가 없을 경우에 발생한다. 아니면 Eecute나 Script로 분한이 부여된 디렉토리에 들어있는 HTML페이지를 보려했을 때 발생한다.

403.4 금지(SSL 필요함)
이 에러는 여러분이 접근하려는 페이지가 SSL로 보안유지 되고 있는 것일 때 발생한다. 이것을 보기 위해서 여러분은 주소를 입력하기 전에 먼저 SSL을 이용할 수 있어야 한다.


403.5 금지 (SSL 128필요함)
이 에러는 접근하려는 페이지가 SSL로 보안유지 되고 있는 것일 때 발생한다. 이 자원을 보기 위해서는 여러분의 브라우저가 SSL의 행당 레벌을 지원해야 한다. 여러분의 브라우저가 128비트의 SSL을 지원하는 지를 확인해 본다.

403.6 금지(IP 주소 거부됨)
이 에러는 서버가 사이트에 접근이 허용되지 않은 IP주소를 갖고 있는데, 사용자가 이 주소로 접근하려 했을 때 발생한다.

403.7 금지(클라이언트 확인 필요)
이 에러는 여러분이 접근하려는 자원이 서버가 인식하기 위해 여러분의 브라우저에게 클라이언트 SSL을 요청하는 경우 발생한다. 이것은 여러분이 자원을 이용할 수 있는 상용자임을 입증하는데 사용된다.

403.8 금지 (사이트 접근 거부됨)
이 에러는 웹 서버가 요청사항을 수행하고 있지 않거나, 해당 사이트에 접근하는 것이 허락되지 않았을 경우 발생한다.

403.9 접근 금지(연결된 사용자수 과다)
이 에러는 웹서버 BUSY 상태에 있어서 여러분의 요청을 수행할수 없을 경우에 발생한다. 잠시 후에 다시 접근해 보도록 한다.

403.10 접근금지(설정이 확실 하지 않음)
이 순간 웹 서버의 설정쪽에 문제가 있다.

403.11 접근금지(패스워드 변경됨)
이 에러는 사용자 확인단계에서 잘못된 패스워드를 입력했을 경우 발생한다. 페이지를 갱신한 후 다시 시도해 본다.

403.12 접근금지(Mapper 접근 금지됨)
여러분의 클이언트 인증용 맵이 해당 웹 사이트에 접근하는 것이 거부되었다. 사이트 운영자에게 클라이언트 인증 허가를 요청한다. 또한 여러분은 여러분의 클라이언트 인증을 바꿀 수도 있다.

404 발견안됨
웹 서버가 요청한 파일이나 스크립트를 찾지 못했다. URL을 다시 잘 보고 주소가 올바로 입력되었는지 확인해본다.

405 메쏘드 허용안됨
Request 라인에 명시된 메쏘드를 수행하기 위해 해당 자원의 이용이 허용되지 않았다. 여러분이 요청한 자원에 적절한 MIME 타입을 갖고 있는지 확인해 본다.

406 받아들일 수 없음
요청 사항에 필요한 자원은 요청 사항으로 전달된 Acceptheader에 따라 "Not Acceptable"인 내용을 가진 Response 개체만을 만들 수 있다.

407 대리(Proxy) 인증이 필요함
해당 요청이 수행되도록 proxy 서버에게 인증을 받아야 한다. proxy서버로 로그온 한 후에 다기 시도해 본다.

412 선결조건 실패
Request-header field에 하나 이상에 선결조건에 대한 값이 서버에서 테스트 결과 FALSE로 나왔을 경우에 발생한다. 현재 자원의 메타-정보가 하나 이상의 자원에 적용되는 것을 막기 위한 클라이언트 선결조건이 의도되어졌다.

414 요청한 URI가 너무 길다
요청한 URI가 너무 길어서 서버가 요청 사항의 이행을 거부했다. 이렇게 희귀한 상황은 아래와 같은 경우에만 발생한다. 클라이언트가 긴 탐색용 정보를 가지고 POST 요청을 GET으로 부적절하게 전환했다. 클라이언트가 Redirection문제를 접하게 되었다. 서버가, 몇몇 서버가 사용하고 있는 요청한 URI 를 읽고 처리하는 고정된 길이의 메로리 버퍼를 이용해 보안체계에 들어가려는 , 클라이언트에 의한 공격을 받고 있다.

500 서버 내부 오류
웹 서버가 요청사항을 수행할 수 없다. 다시 한 번 요청해 본다.

501 적용안됨
웹 서버가 요청사항을 수행하는 데 필요한 기능을 지원하지 않는다. 에러가 발생한 URL을 확인한 후에, 문제가 지속될 경우에는 웹 서버 운영자에게 연락한다.

502 게이트웨이 상태 나쁨
Gateway나 proxy로 활동하고 있는 서버가 요구 사항을 접수한 upstream 서버로부터 불명확한 답변을 접수 했을 때 발생한다. 만약 문제가 지속된다면 웹 서버 운영자와 상의해 본다.

신고
Posted by naearu
연구_고민/웹2007.08.23 20:45
<!--StartFragment-->동적으로 셀렉트박스에 Option 항목을 추가할 일이 자주 발생한다.
그럴때에는 new Option();을 이용하면 되는데..
다음과 같이 사용한다.

function AddSelectBox(txt,vlu){
var Obj = document.forms['F'].selBox.options; //전통적인 형식
또는
var Obj = document.getElementsByName('selBox')[0].options; //DOM형식
Obj[Obj.length] = new Option(txt,vlu);
}

AddSelectBox('보여줄 글','값');

꼭 한가지 주의할 점은..
팝업창에서 부모창의 셀렉트박스를 컨트롤 하려고 하면 예외오류가 발생한다는 점이다.
그럴때에는 반드시 부모창에 함수를 만들어 놓고 팝업에서는 그 함수를 호출해야 한다.

//팝업창에서 컨트롤 할때의 예제.
<script>opener.AddSelectBox('보여줄 글','값');</script>
신고
Posted by naearu
연구_고민/웹2007.08.22 21:21
 function number_input()
 {
  if((event.keyCode<48)||(event.keyCode>57))
  {
   event.returnValue=false;
  }
 }



<input name="test" type="text" onkeydown="return number_input()" style="IME-MODE: disabled; ">
신고
Posted by naearu
연구_고민/웹2007.07.28 23:55

안녕하세요 "양지다컴" 입니다;;
강좌는 처음 올려보는 듯 하네요. 머 강좌라는 거창한 이름을 달 것까진 없는 내용이지만;;
각설하고 본론으로 들어가겠습니다.

대개 대형사이트라든가 쇼핑몰처럼 어떤 "이벤트" 를 실시 하는 곳이 있죠.
현재 제가 작업중인 쇼핑몰에서도 이벤트를 실시한다고 해서 팝업창을 만들어 띄우기로
했습니다. 팝업창 내용으로는 간략하게 이벤트를 소개하며 이벤트상품이 존재하는 페이
지로 링크를 걸어야 했습니다. 여기저기 찾아보니(Copy & Paste를 위해서;;) 자료가 있
는 곳은 대개 유료사이트더군요....;; 차라리 이런기능을 쓴 웹사이트를 찾고자 했으나 그
것마저 잘 안나타나더군요......-.- 그래서 머리굴릴것도 아니고 걍 어거지로 만들어 봤는
데 잘되더군요....워낙 자바스크립에 대한 지식이 짧다보니....그래도 자바스크립 조금 아
는건 웹프로그래밍이나 웹디자인에 있어서 중요한 요소이리라 생각됩니다. 온클릭 이벤
트를 이용해봤습니당.


팝업창의 소스
<html>
<script>
function Go(){
opener.parent.location='http://daum.net';
window.close();
}
</script>
<a href="#" onClick='Go();'>바로가기</a>
</html>

요러케 코딩을 하고 링크를 누르면 부모창이 다음넷으로 연결되면서 팝업창은 닫힙니다.
만약 부모창이 프레임으로 나뉘어 있다면....

opener.parent.detail.location='http://daum.net';

요러케 바꾸면 됩니다. detail 은 프레임이름입니다.
예제로 보여드리고싶지만....강좌게시판에 링크거는게 여의치 않네요. 자바스크립강좌용
"파일박스" 기능이 추가되었음 좋겠네요;;

이상 팝업창에서 부모창 링크제어하기 팁이었습니다. 컬러가 좀 허졉하네요;;;;

 

 

//어미창 새로 고침.
<script>
function Go(){
opener.parent.location.reload();
//opener.parent.location=reload();
window.close();
}
</script>

 

<a href="#" onClick='Go();'>바로가기</a>

이 글은 스프링노트에서 작성되었습니다.

신고
Posted by naearu
연구_고민/웹2007.07.28 23:55

http://www.oneway.pe.kr/gobyBoard/view.asp?forum_id=tipB&no=9034

 

♬아이프레임
아이프레임은 한 문서 안에 다른 문서를 호출해 삽입하는 역할을 합니다.


① <body>와 </body>사이의 아이프레임을 삽입하고 싶은 위치에 아래 소스를 넣습니다
<iframe src="아이프레임 안에 들어갈 문서의 주소" frameborder="0" width="360" height="250" marginwidth="0" marginheight="0" scrolling="auto" style="border:1 solid navy"></iframe>

frameborder="0" 은 창의 테두리 두께를 0으로,
width="360" height="250" 에서는 iframe 창의 크기를 조절.
marginwidth="0" marginheight="0" 은 창 내부의 여백(여기서는 모두 0으로 했음)
scrolling="auto" 는 스크롤바 자동생성..auto 대신 no로 하면 없음, yes로 하면 항상 있음.
style="border:1 solid navy" 는 아이프레임에 테두리를 넣기 위한 부분입니다.

테두리가 필요없는 분은 빼도 됩니다. (1 solid navy는 각각 테두리의 두께, 속성, 색상)



② 투명한 아이프레임



배경그림이 들어간 문서 안에 아이프레임을 넣는다면, 배경그림이 아이프레임에 의해 가려질 때가 있습니다. 이런 경우, 아이프레임이 들어간 영역을 투명으로 처리하게 되면 가려졌던 배경그림이 나타납니다.
아이프레임을 넣은 본문서 안의 아이프레임 태그에 allowTransparency="true" 를 추가하고, 아이프레임 안에 들어가는 문서를 투명으로 만들어주면 됩니다.
*투명한 아이프레임 (Opacity=35)
아이프레임에 의해 가려져 있던 본문서의 배경그림이 보입니다.
Opacity 값은 0에서 100까지 지정해줄 수 있습니다. 0은 완전투명, 100은 완전불투명

아이프레임으로 들어가는 문서의 <head>와 </head> 사이에 아래 소스를 넣습니다.

<style type="text/css">
<!--
body {background-color:transparent; filter: Alpha(Opacity=35)}
-->
</style>



기본문서의 아이프레임 태그 안에 아래처럼 allowTransparency="true" 를 추가합니다.

<iframe src="기본이 되는 문서의 주소" allowTransparency="true"></iframe>

이 글은 스프링노트에서 작성되었습니다.

신고
Posted by naearu
연구_고민/웹2007.07.28 23:55

<html>
<head>
<script language = "javascript">
//상위 셀렉트로 하위 셀렉트 제어하기
function showSub(obj) {

    f = document.forms.select_machine;

    if(obj == 1) {
    
        f.SUB1.style.display = "";
        f.SUB2.style.display = "";
        f.SUB3.style.display = "";
        f.SUB4.style.display = "none";
        f.SUB5.style.display = "none";
        f.SUB6.style.display = "none";

    } else {

        f.SUB1.style.display = "none";
        f.SUB2.style.display = "none";
        f.SUB3.style.display = "none";
        f.SUB4.style.display = "";
        f.SUB5.style.display = "";
        f.SUB6.style.display = "";

     }
}
</script>
</head>

<body>


<form name="select_machine">

//상위 셀렉트박스
<select name=" " onChange="showSub(this.options[this.selectedIndex].value);">
<option value="1">자동차</option>
<option value="2">오토바이</option>
</select>

<br><br>

//여기부턴 하위셀렉트박스
<select name="SUB1" style="display: ;">
<option value=" ">기아자동차</option>
<option value=" ">스포티지</option>
<option value=" ">오피러스</option>
<option value=" ">소렌토</option>
<option value=" ">카니발</option>
</select>


<select name="SUB2" style="display: ;">
<option value=" ">현대자동차</option>
<option value=" ">소나타</option>
<option value=" ">산타페</option>
<option value=" ">투산</option>
</select>


<select name="SUB3" style="display: ;">
<option value=" ">대우자동차</option>
<option value=" ">매그너스</option>
<option value=" ">마티즈</option>
</select>


<select name="SUB4" style="display: none;">
<option value=" ">대림오토바이</option>
<option value=" ">시티100</option>
<option value=" ">엑시브</option>
</select>


<select name="SUB5" style="display: none;">
<option value=" ">가와사키오토바이</option>
<option value=" ">ZXR400</option>
<option value=" ">ZX6R</option>
<option value=" ">ZX10R</option>
<option value=" ">ZX12R</option>
</select>


<select name="SUB6" style="display: none;">
<option value=" ">비엠베오토바이</option>
<option value=" ">R1150GS</option>
<option value=" ">R1100RT</option>
<option value=" ">K1200LT</option>
</select>

</form>
</body>
</html>

이 글은 스프링노트에서 작성되었습니다.

신고
Posted by naearu
연구_고민/웹2007.07.28 23:54

 


★마우스를 대면 색상이 바뀌는 효과

그럼 이번에는 메뉴에 마우스를 올리면 색상이 바뀌는 효과를 배워볼까요?

자 ~ 아래의 표를 보세요. 마우스를 대니깐 색상이 바뀌죠?

 테이블 1

 테이블 2

 테이블 3

 테이블 4

 
이건 무척 간단한 소스인데요

onmouseover="this.style.backgroundColor='#F8ABAA'"
 onmouseout="this.style.backgroundColor=''"


이것만 기억하세요.
앞에 있는 색상은 마우스를 올렸을 때 나오는 색상이구요.
뒤에있는 backgroundColor='' 는 다시 원래의 색으로 돌아간다는 뜻입니다.
만약에 마우스를 떼었을 때 또 다른 색상을 만들고 싶다면 ' ' 안에 색상을 명시해주면
되겠죠? 이 소스를 메뉴표가 위치한 곳의 html문서를 열어서
샘플홈에서는 메뉴가 왼쪽 프레임에 있죠? 그럼 왼쪽 프레임의 메뉴가 위치한곳을
마우스로 한번 클릭한 담에 HTML문서를 여세요.
그럼 HTML문서안에 커서의 위치가 까만모양으로 그 위치 그대로  있게되죠.
그럼 그 부분이 메뉴가 존재하는 곳의 소스이므로 그 부분에서 위의 소스를
삽입해주면 된답니다.

대신 셀속성을 생각하고 넣어야되요.
즉 전체 표부분이 아니라 <td ~~~~> 로 시작되는 부분안에 각각 넣어야된다는 뜻이죠.
그 부분마다 찾아서 같은 위치에 위의 소스를 다 넣어주세요.
그리고 메뉴마다 색상을 다르게 하고 싶다면 소스를 삽입할 때마다

backgroundColor='#F8ABAA'라고 되어있는 부분에서 색상만 다른 것으로 바꿔주면
됩니다.

자 그럼 색상표를 한번 구경해볼까요?^^

         색상표 보기


이 글은 스프링노트에서 작성되었습니다.

신고
Posted by naearu
연구_고민/웹2000.08.03 15:16
<table width="200" cellpadding="5" cellspacing="2" border="1" align="center" style="table-layout:fixed; word-break:break-all;">
<tr>
    <td>http://www.homejjang.com/09/border_collapse.php</td>
</tr>
</table>
신고
Posted by naearu