'Web/JavaScript'에 해당되는 글 14건

  1. 2008.01.06 자바스크립트 트리만들기
  2. 2008.01.06 자바스크립트 기초 페이지 전환하기
  3. 2007.10.26 JavaScript Lint
  4. 2007.10.07 YUI 라이브러리

삽질 끝에 트리를 만들었다.

낯설은 자바스크립트를 다루다 보니 삽질이 끝이 없다.

꽤 기분이 좋다.

스윙 프레임을 처음 띄어본 기분이랄까...ㅋ

input 태그 엘리먼트들을 가져온 뒤 checkbox 인지 검사하고, 체크되었는지 검사하였다.

체크되어있다면 display : none 을 해제하고,

체크되어있지 않다면 display 를 none 으로 하여서 트리메뉴를 완성했다.

별거 아닌거 같지만 완전 뿌듯.ㅋㅋ

- index.js -

function collapse()
{
    var input = document.getElementsByTagName("input");
    for(var i = 0 ; i < input.length ; i++)
    {
      if(input[i].type == "checkbox" && input[i].checked)
      {
        if(document.getElementById(input[i].value).style.display == "none")
        {
          document.getElementById(input[i].value).style.display = "";
        }
      }
      else if(input[i].type == "checkbox" && !input[i].checked)
      {
        if(document.getElementById(input[i].value).style.display == "")
        {
          document.getElementById(input[i].value).style.display = "none";
        }
      }
    }
 }

- treemenu.php -

<script type="text/javascript" src="../scripts/step4/index.js"></script>
<?
 // DB 연결
 include "../include/dbcon.php";
 // 사업번호 불러오기
 $pidx = $_SESSION["pidx"];
 
 $sql = "select [층번호] from arch_floor where 사업번호=6 order by [층번호] desc;";
 
 $rs = $db_conn->query( $sql );

  while($rs->moveNext())
  { 
?>
      <div style="font-size : 12px; border : solid 1px; padding-left : 10px;">
        <input type="checkbox" value="floor<? echo $rs->get(0); ?>" id="check<? echo $rs->get(0)?>" onclick="javascript:collapse()" />
        <? if($rs->get(0) > 0) echo "지상 ".$rs->get(0); else echo "지하 ".(-1) * $rs->get(0)?> 층
         <div id="floor<? echo $rs->get(0);?>" style="padding-left : 20px; display : none;">
        <? $sql = "select r.[사업번호], f.[층번호], [실이름] from arch_rooms as r , arch_floor as f where r.사업번호=6 and r.사업번호=f.사업번호 and r.층ID=f.층ID and f.층번호=".$rs->get(0)." order by f.[층번호] desc;";
           $roomrs = $db_conn->query( $sql );
           while($roomrs->moveNext())
           {
             ?>
            
          <table width="100%">
             <tr><input type="radio" name="room" value=<? echo $roomrs->get(2); ?> /><? echo $roomrs->get(2); ?></tr>
          </table>
          <?
          }
          ?>
         
        </div>    
      </div>
<?
  }
?>

라디오버튼을 이용한 것.

function collapse()
{

    var input = document.getElementsByTagName("input");
    for(var i = 0 ; i < input.length ; i++)
    {
      if(input[i].type == "radio" && input[i].checked && input[i].name == "floornum")
      {
        if(document.getElementById("floor" + input[i].value).style.display == "none")
        {
          document.getElementById("floor" + input[i].value).style.display = "";
        }

      parent.form1.curfloor.value = input[i].value;
      parent.buildtable.location.href = 'object_iframe.htm?floor=' + input[i].value;

      }
     
      else if(input[i].type == "radio" && !input[i].checked && input[i].name == "floornum")
      {
        if(document.getElementById("floor" + input[i].value).style.display == "")
        {
          document.getElementById("floor" + input[i].value).style.display = "none";
        }
      }
     
    }
}

 

Posted by 행복한 프로그래머 궁금쟁이박

댓글을 달아 주세요

<script>
  function moveNext()
  {
    location.href = "../step4/object.htm";
  }
</script>


<input type="button" onClick="javascript:moveNext()" id="nextBtn" value="NEXT">

자바스크립트 왕초보인 나...

공부하자..ㅋㅋ
Posted by 행복한 프로그래머 궁금쟁이박

댓글을 달아 주세요

JavaScript Lint

Web/JavaScript 2007.10.26 10:47
What It is!

JavaScript 문법 검사기 입니다.
틀린 문법과 위치(줄수)를 찾아 줍니다. IE6엔진을 그대로 사용하는 거 같아 FireFox 에서 나지 않는 오류들을 잘 잡아 줍니다. 정말 디버깅 하기 힘든 JavaScript 에서 이 녀석 희망입니다.
간단히 밑에 설치법을 정리 하였습니다. 다른 많은 분들의 삽질을 덜 하길 바랍니다.

사용자 삽입 이미지

http://www.javascriptlint.com/
위의 사이트에서 최신 버전을 구할 수 있다.

다운을 받으면 편한 곳에 압축을 푼다.
나는 C:\Program Files\JSL 이 곳에 압축을 풀었다.


AcroEdit 설정방법

사용자 삽입 이미지
아크로 에디트를 실행을 시킵니다.
사용자 도구를 선택하면 사용자 도구 설정이란 메뉴가 있습니다.
그것을 클릭하면 아래와 같은 화면이 나옵니다.
사용자 삽입 이미지
여기서 추가 버튼을 누르고 아래와 같이 채웁니다.
사용자 삽입 이미지
빨간색 칠한 부분은 꼭 채우셔야 합니다.
밑에 옵션은 사용자가 편한데로 설정 하시면 됩니다.

그럼 한번 실행 시켜 보겠습니다. 단축키를 지정하시면 단축키를 눌러서 바로 실행 시키고 아니면 도구 버튼을 활용 하겠습니다.
사용자 삽입 이미지
결과 화면이 나옵니다. warning들과 error들 중 error는 꼭 고쳐야 IE에서 스크립트 오류가 나지 않습니다.


Eclipse

Eclipse를 실행 시킵니다. 그리고 나서 Run 메뉴를 선택합니다.
Submenu로 External Tools 를 선택합니다. 그 서브메뉴로 Open External Tools Dialog 를 선택합니다.
사용자 삽입 이미지

사용자 삽입 이미지

빨간 테두리는 무조건 꼭 적으셔야 합니다. 다 기입 되면 Apply를 선택하고 다이알 로그를 닫습니다.

사용자 삽입 이미지

도구 버튼을 이용하여 실행 해 보았습니다.

그럼 다들 자바스크립트를 좀더 수월하게 사용하길 바랍니다^^
Posted by 행복한 프로그래머 궁금쟁이박

댓글을 달아 주세요

http://developer.yahoo.com/yui/

YUI 라이브러리

Posted by 행복한 프로그래머 궁금쟁이박

댓글을 달아 주세요