WebDevelop/JavaScript2009. 6. 15. 14:43

jquery 를 써보자

jquery
많이들 들어봤을 단어라고 생각한다.
jquery가 지원 하는 기능은 상당히 많다, 그렇다고 무겁다거나 하는것도 아니다.
dom 형태의 웹페이지를 jquery 통해서 손쉽게 제어 할수 있기도 하며,
Ajax, 각 dom 오브젝트들의 이벤트, jquery자체에서 지원하는 함수 등등
작지만 강력한 기능을 가진 라이브러리 이다.
 - 작은 고추가 맵다고 하던가?  :D

- 사용법
   아주 간단하다. 정말 간단하다.


<html>

  <head>

    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">

      // 이곳은 함수를 만들면 되겠군요.

    </script>

  </head>

  <body>

    <a href="http://canworld.tistory.com/">깨어있는세상</a>

  </body>

</html>



보았다시피 기존에 js 파일을 포함시키는것처럼 같은형태이다.

jquery 파일은 http://jquery.com/ 에 가면 최신버젼의 라이브러리를 받을수 있다.


저작자표시 비영리 변경금지
Posted by 햇 님
WebDevelop/JavaScript2009. 1. 15. 17:02

parent , opener 헷갈려..

parent[prnt,pr- / pr-]

  • 1. 어버이(아버지 또는 어머니); (~s) 양친.
  • 2. 조상, 선조.
  • ━ 근원[모체]의; 모(母)….
  • ━ …의 어버이 구실을 하다.

자바스크립에서 parent 라는 property가 있다.
흔히 알고 쓰는 단어로 위에서 쓰여진것처럼 아버지를 지칭하는 단어로 잘 알고있고..
자바스크립트에서 쓰일때 언뜻.. 모체의 라는 뜻 때문에..
나는 자주 혼동을 하곤 한다..
새창을 열게되었을때..   window.parent.name  을 alert 으로 보게 되면
내 예상으로는 모체/근원의 뜻으로 보자면 새창에서의 parent는 새창을 여는 링크를 제공하는 페이지가 아닐까?
하는 생각을 하고 죽어라고 찍어보았지만..
결국 나오는건 현재창의 이름만 계속 나왔다..  -_-;
물론 삽질이었다...

내가 원하는 결과를 얻기위해서... 즉 새창을 여는 링크를 제공한 페이지를 제어할 객체는
window.opener   를 사용해야 했다.;

opener[upn]

  • 1. 《복합어로》 여는 사람; 개시하는 사람; 여는 물건[도구], 병[깡통] 따개.
  • 2. (연극 따위의) 최초의 공연물; (스포츠의) 개막전.
뭐 의미로 따지자면.. opener 도 맞는거 같은데;;;

어찌되었든... 매번 헷갈린다..
이젠좀 삽질 안할때도 됐건만...  ㅎㅎ

삽질하기전에 잘 검색해보고 뒤져봐야겠다,,,   좀만 찾아보면 좋은글들이 많고도 많다!! ㅎ



Posted by 햇 님
WebDevelop/JavaScript2008. 9. 24. 17:29

JavaScript 에서 Event 처리


일단은 브라우저별로 이벤트의 처리가 달라진다.
간단하게 인터넷 익스플로러(IE) 와 파이어폭스(F) 에서 이벤트 처리가 틀려진다.

여기서 이벤트란것은..
마우스, 키보드 등과같은 사용자 입력장치를 통해서 브라우저가 인식하는 이벤트
즉, 사용자의 입력에 관한 이벤트가 되겠다.

일단 두 브라우저는 이벤트가 생기고,  생겨난 이벤트를 인식하는 부분에서 차이가있다.

IE 의 경우는 window.event 가
F 의 경우는 event 객체가 인식을 한다.

물론 두 이벤트가 똑같은 속성이나 매소드가 있는지는 잘 모르겟다.
다만 내가 주로 쓰는 keyCode 값에 대해서 생각해보자면..
window.event 와 event 객체값을 잘 설정하면.. IE 에서도 F 에서도 동작할수 있는것이다.

소스는 간단하다 .

<html>
    <head>
        <title>Test Page</title>
        <script type="text/javascript">
            function doCheckKeyCode(e) {
                var E =    e ? e : window.event;
                alert(E.keyCode);
            }
        </script>
    </head>
    <body>
        <input type="text" onkeydown="doCheckKeyCode(event)" />
    </body>
</html>
동작 자체는 F 에서 사용하는 것과 같이하여 event 객체를 인자로 넘긴다.
그리고서는 자바스크립트 함수로 넘어간 인자값이 존재하는지 파악하여서..
있으면 인자값을 그대로 변수 E 에 대입하고, 존재하지 않으면 window.event 를 대입한다.

그렇게 되면  IE 든 F 든 keyCode를 동일하게 얻을수 있다.
Posted by 햇 님
WebDevelop/JavaScript2008. 8. 5. 10:53

자바 스크립트의 getYear() 메소드


설명을 간단히 하자면 getYear() 메소드 보다는 getFullYear() 메소드를 쓰는것이 좋다는 이야기다.

getYear() 메소드로는 브라우저에 따라.. 그리고 1900~1999 , 1900년 이전, 1999년 이후 에 따라서

리턴값이 많이 틀려지기 때문에 프로그램 만들경우 많은 고려가 필요하다.

특히나 firefox에서 테스트 하기를 좋아하는 나로서는 getYear() 메소드로 인해서 날짜값을 항상 이상하게

받아와 애를 먹은 경우가 있었다.

Posted by 햇 님
WebDevelop/JavaScript2008. 6. 4. 15:45

체크박스 전체선택, 해제 하기

가끔씩보다 보면은 게시판이라던가 주문내역이라던가 하는부분에
전체선택 이라는 기능이 있는것을 본적이 있을것이다.

꽤나 쓸만한 이 기능.. 지금 만들어봅시다~


<HTML>
 <HEAD>
  <TITLE> checkbox 전체선택 </TITLE>
 </HEAD>
<script type="text/javascript">
function doCheckAll(all) {
    var obj = document.getElementsByName("chkTest");
    var val = true;
    if( all.checked == false ) {        // 값이 체크가 안되어져있으면
        val = false;                            // 전체선택을 해제 하게..
    }
    for (var i =0 ; i < obj.length ; i++ ) {
        obj[i].checked = val;
    }
}
</script>
 <BODY>
    <input type="checkbox" name="chkAll" onclick="doCheckAll(this);"> 전체선택 <br />
    <input type="checkbox" name="chkTest" value="1"> 1번 <br />
    <input type="checkbox" name="chkTest" value="2"> 2번 <br />
    <input type="checkbox" name="chkTest" value="3"> 3번 <br />
    <input type="checkbox" name="chkTest" value="4"> 4번 <br />
    <input type="checkbox" name="chkTest" value="5"> 5번 <br />
    <input type="checkbox" name="chkTest" value="6"> 6번 <br />
    <input type="checkbox" name="chkTest" value="7"> 7번 <br />
    <input type="checkbox" name="chkTest" value="8"> 8번 <br />
    <input type="checkbox" name="chkTest" value="9"> 9번 <br />
    <input type="checkbox" name="chkTest" value="10"> 10번 <br />
 </BODY>
</HTML>



이렇게 테스트 코드를 만들어 보았습니다.
음 이건 약간 응용이라고 할 수 있는거죠. 체크박스 하나만 선택되는 것을 배우면서
getElementsByName() 을 써보았으니까요 ^^

실제 응용하게된다면.. 체크된값들만 사용해서 해당되는 value 값의 내용을
DB에 update, delete 할 수도 있겠죠? ^^

Posted by 햇 님
WebDevelop/JavaScript2008. 6. 3. 11:18

Checkbox 하나만 선택되게 하기.

오늘 업무요청을 받으며 라디오버튼을 체크박스로
변경해달라는 요청을 받았다.
라디오버튼은 이름이 같으면 그중에 하나만 선택되는데..
체크박스는 그렇지 않고 다중 선택이 되는 까닭에..
그냥 바꾸어주면 프로그램상 상당한문제이기도 하고..
업무 요청한곳에서도 다중선택의 문제라기보다는

라디오버튼은 한번 선택하면 그 중에 한가지를 택해야하니..
체크박스로 아무것도 선택 안하는 경우를 염두한거 같다..

서문이 길었는데.. 간단하게 자바스크립트 이벤트를 걸어주었다.

function doOpenCheck(chk){
    var obj = document.getElementsByName("aaa");
    for(var i=0; i<obj.length; i++){
        if(obj[i] != chk){
            obj[i].checked = false;
        }
    }
}

그리고 체크박스에는 onclick 이벤트를 걸어주면 되겠다.

<input name="aaa" type="checkbox" value="1" onclick="doOpenCheck(this);">aaa <br />
<input name="aaa" type="checkbox" value="2" onclick="doOpenCheck(this);">bbb <br />
<input name="aaa" type="checkbox" value="3" onclick="doOpenCheck(this);">ccc <br />


'this' 를 넘겨주어서 클릭되어진 객체의 값을 넘겨주고 'aaa' 로 값을 가져온것과 비교 하면서
클릭된 객체와 일치 하지 않는것들은 체크를 해제해주면 되겠다.


Posted by 햇 님
WebDevelop/JavaScript2008. 5. 14. 20:33

select 태그에서 선택된 option 값 알아보기

코드는 아래와 같습니다.

<html>
<head>
<script type="text/javascript">
function getIndex()
  {
  var x=document.getElementById("mySelect");
  alert(x.options[x.selectedIndex].value);
  }
</script>
</head>
<body>
Select your favorite fruit:
<select id="mySelect">
  <option value="apple">Apple</option>
  <option value="orange">Orange</option>
  <option value="pineapple">Pineapple</option>
  <option value="banana">Banana</option>
</select>
<br /><br />
<input type="button" onclick="getIndex()"
value="Alert index of selected option">
</body>
</html>

이 소스는 인터넷에 있는 소스를 약간 수정하여서 써보았다.
원본소스는 아래의 링크로 가보면 있다.
http://www.w3schools.com/htmldom/prop_select_selectedindex.asp

EditPlus 혹은 기타 편집기 (Notepad도 좋다.) 에 소스를 복사하여 넣은뒤에
적당한 이름을 붙이고 html 파일로 저장해보자.

그리고 html 파일을 실행하여보면

사용자 삽입 이미지


위의 그림과 같이 셀렉트박스의 내용을  선택하고 버튼을 누르면
선택된 값의 value 값이 출력되는것을 볼 수 있다.

이런저런 응용은 사람마다 틀릴것이지만 기본은 이렇다는것이다. ^^

Posted by 햇 님

티스토리툴바