JavaScript 기초 문답 4

2.네 비게 이 션 기능 강화
 
1.드 롭 다운 메뉴 의 링크(Links in Select Menu)
Q:드 롭 다운 메뉴 에서 다른 페이지 로 연결 하 는 것 을 어떻게 실현 합 니까?
A:드 롭 다운 메뉴 를 만 들 려 면 다음 페이지 를 선택 하 십시오.JavaScript FAQ Numbers StringsNavigation Colors JavaScripter.net
아래 코드 를 사용 할 수 있 습 니 다:

  • onChange="if(this.selectedIndex!=0)
  • self.location=this.options[this.selectedIndex].value">
  • Select a page
  • JavaScript FAQ
  • Numbers
  • Strings
  • Navigation
  • Colors
  • JavaScripter.net

  •  
  • 메뉴 항목 과 그 에 상응하는 URL 을 당신 이 필요 로 하 는 것 으로 바 꾸 면 됩 니 다.절대 주소(http://www.javascripter.net)를 사용 할 수도 있 고 상대 주소(my page.htm)를 사용 할 수도 있 습 니 다.
     
    2.  단추 링크(Button Links)
    Q:나 는 어떻게 해야만 하나의 단 추 를 다른 페이지 를 가리 키 는 하이퍼링크 로 바 꿀 수 있 습 니까?
    A:단 추 를 만 들 려 면 다음 과 같 습 니 다.
    이 코드 를 사용 할 수 있 습 니 다:
  •  
  • value="insert button text here"
  • onClick="self.location='Your_URL_here.htm'">
  •  
  • 필요 한 단추 텍스트 와 대상 주소 로 바 꾸 기만 하면 됩 니 다.이것 괜찮아요?
    절대 주소(http://www.javascripter.net)를 사용 할 수도 있 고 상대 주소(my page.htm)를 사용 할 수도 있 습 니 다.
     
    3.  후퇴 버튼(Back Button)
    Q:브 라 우 저의'후퇴'버튼 처럼 버튼 을 눌 러 도 될까요?
    A:후퇴 단 추 를 만 들 려 면 이 코드 를 사용 하 십시오.

  • onCLick="history.back()">
  • 지금 시도 해 보 세 요.
     
    4.전진 버튼(Forward Button)
    Q:브 라 우 저의'전진'버튼 처럼 버튼 을 눌 러 도 될까요?
    A:자신의"전진"단 추 를 만 들 려 면 이 코드 를 사용 하 십시오.

  • onCLick="history.forward()">
  • 브 라 우 저의 전진 단 추 를 현재 사용 할 수 없다 면,이 전진 단 추 는 마찬가지 로 작 동 할 수 없습니다.이런 상황 은 바로 현재 페이지 가 네가 역사의 마지막 페이지 를 훑 어 보 는 것 이다.브 라 우 저의'후퇴'단 추 를 사용 하여 이 페이지(또는 스 크 립 트 작성 후퇴 단추)에 도착 했다 면 이 전진 단 추 는 작 동 할 수 있 습 니 다.지금 해 보 세 요!
     
    5.검색 문자열(Query Stirngs)
    Q:현재 URL 의 검색 문자열 에 접근 할 수 있 습 니까?
    A:검색 문자열(또는 검색 문자열)은 URL 의 선택 가능 한 부분 입 니 다.파일 이름 뒤 를 따라 물음표 로 안내 합 니 다(?).예 를 들 어 아래 URL 은 HTML 파일 이름 뒤에 검색 문자열 을 포함 합 니까?myquery:
    http://www.myfirm.com/file.html?myquery
    스 크 립 트 는 자바 스 크 립 트 의 location.search 속성 을 사용 하여 현재 URL 의 검색 문 자 를 누 를 수 있 습 니 다.아래 버튼 을 눌 러 보 세 요!(주소 의 URL 을 보기 위해 서 최상 위 브 라 우 저 창 에 이 페이지 를 표시 하려 고 할 수도 있 습 니 다.)
    이 단 추 를 만 드 는 코드 는:

  • onClick="selfself.location=
  • self.location.protocol+'//'
  • +self.location.host
  • +self.location.pathname+'?test'">

  • onClick="alert('Query string: '+self.location.search)">
  • onClick="selfself.location=
  • self.location.protocol+'//'
  • +self.location.host
  • +self.location.pathname">
  • 메모:검색 문자열 이 예상 한 대로 작 동 하지 않 을 수도 있 습 니 다.예 를 들 어 이 페이지 를 로 컬 디스크 에 저장 하면 위 에 Internet Explorer 4.x 가 작 동 하지 않 습 니 다(그러나 Netscape Navigator 에 서 는 여전히 유효 합 니 다).
     
    6.페이지 에 인자 전달(Passing parameters to a page)
    Q:나 도 페이지 에서 다른 페이지 로 인 자 를 전달 할 수 있 습 니까?
    A:네.몇 가지 다른 방식 으로 실현 할 수 있다.

    function SetCookie(cookieName,cookieValue,nDays) {
    var today = new Date();
    var expire = new Date();
    if (nDays==null || nDays==0) nDays=1;
    expire.setTime(today.getTime() + 3600000*24*nDays);
    document.cookie = cookieName+"="+escape(cookieValue)
    + ";expires="+expire.toGMTString();
    }
  • 매개 변 수 를 cookie 에 저장 합 니 다.
  • 매개 변 수 를 다른 창 이나 프레임 의 변수 에 저장 합 니 다.
  • 매개 변 수 를 수정 할 수 있 는 속성 top.name(브 라 우 저 창 이름)에 존재 합 니 다.
  • 매개 변 수 를 검색 문자열 으로 목표 페이지 에 연 결 된 URL 뒤에
  • 이 매개 변 수 를 전달 하 는 모든 방법 을 보 여 주 는 간단 한 예 입 니 다.전달 하 는 값 은 문자 교환"Itworked”。아래 단 추 를 누 르 면 단추 의 이벤트 스 크 립 트 에 이 값 이 존재 합 니 다.(1)parmvalue 의 쿠키 중(2)최상 위 변수 top.parmvalue 저장 및(3)top.name 속성 에 있 습 니 다.그리고 스 크 립 트 는 브 라 우 저 를 parm 로 유도 합 니 다.get.htm,URL 에는 URL 인 코딩 의 검색 문자열 이 포함 되 어 있 습 니 다.
     
    7.텍스트 찾기(Searching for text)
    Q:페이지 에서 특정한 텍스트 문자열 을 어떻게 조회 합 니까?
    A:Netscape Navigator 4.x 에서 window.find(string)방법 으로 찾 을 수 있 습 니 다.찾기 대화 상 자 를 참조 하 십시오.Internet Explorer 4.x 또는 업데이트 버 전에 서 텍스트 범위 대상(아래 예 는 TRang)을 만 든 다음 TRang.findText(string)를 사용 합 니 다.
    예제:아래 스 크 립 트 는 사용자 가 입력 한 텍스트 에 따라 찾 아 페이지 에 강조 합 니 다.

    <!--
    var TRange=null

    function findString (str) {
    if (parseInt(navigator.appVersion)<4) return;
    var strFound;
    if (navigator.appName=="Netscape") {

    // NAVIGATOR-SPECIFIC CODE

    strFound=self.find(str);
    if (!strFound) {
    strFound=self.find(str,0,1)
    while (self.find(str,0,1)) continue
    }
    }
    if (navigator.appName.indexOf("Microsoft")!=-1) {

    // EXPLORER-SPECIFIC CODE

    if (TRange!=null) {
    TRange.collapse(false)
    strFound=TRange.findText(str)
    if (strFound) TRange.select()
    }
    if (TRange==null || strFound==0) {
    TRange=self.document.body.createTextRange()
    strFound=TRange.findText(str)
    if (strFound) TRange.select()
    }
    }
    if (!strFound) alert ("String '"+str+"' not found!")
    }
    //-->
    이 예제 의 코드 는:
  • onSubmit="if(this.t1.value!=null && this.t1.value!='')
  • findString(this.t1.value);return false"
  • >






  • 좋은 웹페이지 즐겨찾기