'LINK'에 해당되는 글 2건

  1. 2012.07.02 [18단원] Document객체의 하위객체와 Location객체
  2. 2012.06.22 [11단원] String 객체

Ⅰ  Document 객체의 하위객체

 

  ◈ link객체

   - html문서에 삽입되어 있는 <a href="'>나 <area href="">태그 정보를 제공하는 내장객체

    - 문서에 몇 개의 링크가 설정되어 있으며 어떠한 정보를 가지고 있는지 알고자 할 때 사용

 

  ♣ 문서내의 총 링크되어 있는 수를 알고자 할 경우

[형식]

document.links.length

 

  ♣ 링크된 문서의 정보를 알고자 할 경우

[형식]

 document.links[해당링크의 배열번호]

 

  ※ 배열의 번호라는 것은 문서내의 하이퍼링크되어 있는 순서로, 만약 문서에서 가장 먼저

      나타나는 하이퍼링크를 나타내고자 할 경우에는 document.links[0]과 같은 형식으로 입력

 

  ♣ link객체의 속성

속성

설명

hash

표식 이름을 알려 준다.

host

링크에 설정되어 있는 URL 정보, 호스트 이름, 포트번호를 알려준다

hostname

링크에 설정되어 있는 URL과 호스트 이름을 알려 준다.

href

링크에 설정되어 있는 URL 정보를 알려 준다.

pathname

링크에 설정되어 있는 경로를 알려 준다.

port

포트 번호를 알려 준다.

protocol

프로토콜 종류를 알려 준다.

search

검색 엔진을 불러낼 때 사용한다.

target

링크가 실행할 문서를 보여 줄 방식을 설정한다.  

 

[예제소스] 

 <HTML>

      <HEAD>

      <TITLE>links객체</TITLE>

      </HEAD>

      <BODY>

      <b> 추천사이트</b><p>   

      삼성에듀 : <a href="http://www.samsungedu.com">http://www.samsungedu.com</a><p>

      삼성전자 : <a href="http://www.sec.co.kr">http://www.sec.co.kr</a><p>

      MSN : <a href=http://www.msn.co.kr>http://www.msn.co.kr</a><p>

      naver : <a href=http://www.naver.com.kr>http://www.naver.co.kr</a><p>    

      <SCRIPT LANGUAGE="Javascript">

      <!--

       document.write("* 링크수는 ",document.links.length,"개 입니다","<br>")

document.write("* 삼성에듀의 링크정보는 ", document.links[0],"입니다.")

      //-->

      </SCRIPT>

      </BODY>

</HTML>

 

[설명]

 document.links.length는 현재 문서부분에 링크되어 있는 개수를 알려 준다. .
 또한 document.links[0]는 배열번호가 0이므로 하이퍼링크가 설정되어있는 것 중 첫 번째인

 삼성에듀의 링크정보를 알려 준다.

 
  ◈ image객체
    - 문서에 삽입되어 있는 이미지에 관한 정보를 제공하는 객체

 

  ♣ 문서내의 삽입된 이미지의 총 수를 알고자 할 경우

[형식] 

 document.images.length

 

  ♣ 이미지를 선택할 경우
[형식]

document.images[해당이미지의 배열번호]

 

  ♣ image객체의 속성

속성

설명

name

그림 객체의 이름을 알려 준다.

src

그림의 경로를 알려 준다.

lowsrc

저해상도 그림의 경로를 알려 준다.

border

그림의 테두리 두께를 알려 준다.

height

그림의 높이를 알려 준다.

width

그림의 너비를 알려 준다.

hspace

그림의 가로 여백을 알려 준다.

vspace

그림의 세로 여백을 알려 준다.

complete

그림의 전송 완료 상태를 true와 false 값으로 알려 준다.


[예제소스]

<HTML>

      <HEAD>

      <TITLE>image객체</TITLE>

      </HEAD>

      <BODY>

      <img src="miffy_01.gif" name=miffy><p>

      <h4><그림 정보></h4>

      <SCRIPT LANGUAGE="Javascript">

      <!--

            document.write("* 이름 : "+document.images[0].name+"<p>")

            document.write("* 경로 : "+document.images[0].src+"<p>")

            document.write("* 높이 : "+document.images[0].height+"<p>")

            document.write("* 너비 : "+document.images[0].width+"<p>")

            document.write("* 가로여백 : "+document.images[0].hspace+"<p>")

            document.write("* 세로여백 : "+document.images[0].vspace)

      //-->

      </SCRIPT>

      </BODY>

</HTML>

 

[설명]

 image객체의 속성들을 이용해서 그림의 정보들을 알아낼 수 있다.

 

  ♣ 이미지 롤오브(마우스를 올리면 그림이 바뀌는거)

[예제소스] 

<HTML>
    <HEAD>
    <TITLE> 제목 입력 </TITLE>
        <SCRIPT LANGUAGE="Javascript">
          <!--
        function img_change(a)
            {
            document.images[0].src=a
            }

          //-->
    </SCRIPT>
    </HEAD>

    <BODY>
        <img src="img3.jpg" onMouseover="img_change('img4.jpg')" onMouseout="img src="img_change('img3.jpg')">
    </BODY>
</HTML>

 

[설명]

 img_change() 함수를 설정하고 body에 원래의 그림과 마우스를 올렸을 때 바뀌는 그림을

 설정하여, 마우스가 그림에 올라가면 img3.jpg를 그리고 마우스가 그림을 벗어나면 img4.jpg

 그림이 나오게 된다.

 

 

Ⅱ  Location객체

  - 현재 문서의 주소와 이와 관련된 정보를 제공해 주는 객체

  - 브라우저의 주소표시줄에 입력되어 있는 내용을 제어하는 역할을 담당

 

  ◈ 홈페이지 주소형식
 


  ◈ Location객체의 속성

속성

설명

href

문서의 url 주소 전체를 알려 준다.

host

문서의 url 주소 중 host 이름과 포트 번호를 알려 준다.

hostname

문서의 url 주소 중 host 이름을 알려 준다.

protocol

프로토콜의 종류를 알려 준다.

pathname

호스트에서 문서가 있는 경로를 알려 준다.

port

문서의 포트 번호를 알려 준다.

hash

문서의 표식 이름을 알려 준다.

 

[예제소스]

<HTML>

  <HEAD>

      <TITLE>Location객체</TITLE>

  </HEAD>

  <BODY>

      <SCRIPT LANGUAGE="Javascript">

      <!--

document.write("URL: ",location.href,"<p>")

document.write("호스트: ",location.host,"<p>")

document.write("호스트이름: ",location.hostname,"<p>")

document.write("포트: ",location.port,"<p>")

document.write("프로토콜:",location.protocol)

      //-->

      </SCRIPT>

  </BODY>

</HTML>

 

[설명]

 Location객체의 속성들을 이용하여 홈페이지 문서의 주소 정보들을 이와 같이 알아낼 수 있다.

 

 

  ◈ href속성

    - location.href는 현 주소 값을 표시하는 것 이외에 지정된 주소로 이동할 수 있도록 해준다.

[형식] 

location.href("이동할 주소")

 

[예제소스]

<HTML>

      <HEAD>

      <TITLE>Location의href속성</TITLE>

      </HEAD>

      <BODY>

      <Form>

         <input type="bottun" value="네이버" OnClock="location.href('http://www.naver.com')>

      </Form>

      </BODY>

</HTML>

 

[설명]

 네이버라는 버튼을 보여주고 버튼을 클릭하면 네이버로 이동한다.

 

 

  ◈ Location객체의 메소드

  ♣ replace()메소드

    - History목록에 등록되어 있는 홈페이지 주소를 새로운 주소로 갱신해주는 역할을 한다.

[형식]

location.replace("홈페이지 주소")

 

♣ reload()메소드
  - reload()메소드는 웹 브라우저의 [새로고침]단추와 같은 역할을 하는 기능으로서 현재 열려 있는

    홈페이지 문서를 다시 불러 오게 해준다.

[형식]

location.reload()

 

 

저작자 표시
신고
크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 진짜깨비

Ⅰ  String 객체 : 자바 스크립트에서 사용하는 문자열

 

[형식]

                                         변수명="문자열"
                                         변수명.속성
                                         변수명.메소드

  ◈ length 속성

[형식]

                                         변수명="문자열"
                                         변수명.length

[예제소스]

 <HTML>
     <HEAD>
         <TITLE>String객체</TITLE>
          <SCRIPT LANGUAGE="Javascript">
          <!--
             a="자바스크립트"
             document.write("입력한 글자 : ",a+"<p>") 
             document.write("입력한 글자수 : ",a.length)
          //-->
          </SCRIPT>
     </HEAD>
     <BODY> </BODY>
 </HTML>


[설명]

 변수 a에 입력된 "자바스크립트"의 글자수를 출력한다.


  ◈ 하이퍼링크 관련 메소드 : string객체에 하이퍼링크를 설정해주는 link()메소드를 사용
    - link()메소드의 값으로는 링크시킬 홈페이지 주소나 파일 이름을 입력

 

[형식]

                                        변수="문자열"
                                        변수.link("하이퍼링크 주소")

 

[예제소스]

 <HTML>
     <HEAD>
         <TITLE>link메소드</TITLE>  
     </HEAD>
     <BODY>
        <SCRIPT LANGUAGE="Javascript">
          <!--
           a="평범한 블로그"
           document.write(a.link("http://kiyoo1.tistory.com"))
          -->
          </SCRIPT>
     </BODY>
 </HTML>


[설명]

 평범한 블로그 글자를 클릭하면 여기 티스토리 사이트로 이동하게 됩니다.

 


  ◈ String객체의 메소드

메소드

기능

CharAt()

인덱스 위치의 문자를 알아내는 메소드

CharCodeAt()

인덱스 위치의 문자를 ISO-Latin-1 코드로 변환하는 메소드

fromcharCode()

ISO-Latin-1 코드를 문자로 변환해 주는 메소드

concat()

문자열에 내용을 추가할 때 사용되는 메소드

indexOf()

찾는 문자열의 첫 인덱스 위치를 알아내는 메소드

lastIndexOf()

찾는 문자열의 마지막 인덱스위치를 알아내는 메소드

slice()

문자열의 순서에 따라 분리해주는 메소드

split()

매개변수의 입력기분에 따라 문자열을 분리해 주는 메소드

Substring()

매개변수의 입력기분에 따라 문자열을 나타내 주는 메소드

substr()

매개변수의 입력기분에 따라 문자열을 나타내주는 메소드

toLowerCase()

문자열을 소문자로 바꾸어 주는 메소드

toUpperCase()

문자열을 대문자로 바꾸어 주는 메소드

저작자 표시
신고
크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 진짜깨비
이전버튼 1 이전버튼

블로그 이미지
진짜깨비
Yesterday11
Today1
Total12,954

달력

 « |  » 2017.05
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      

최근에 받은 트랙백

글 보관함


티스토리 툴바