● 흔들리는 웹브라우저
  - Window객체의 moveBy()메소드로 for(반복문)문을 이용하여 브라우저를 반복적으로 이동시킴


[소스보기]

<HTML>

<HEAD>

<TITLE>예제1</TITLE>

<SCRIPT LANGUAGE="Javascript">

<!--

   function wave_window(){

   if(self.moveBy){

         for(i=5;i>0;i--){

               for(j=10;j>0;j--){

top.moveBy(-i,0)

top.moveBy(i,0)

top.moveBy(0,-i)

top.moveBy(0,i)

                     }

               }

         }

   }

//-->

</SCRIPT>

</HEAD>

<BODY>

<h4>아래의 버튼을 클릭해보세요</h4>

<input type="button" value="click here!" onClick="wave_window()">

</BODY>

</HTML>

 

[소스설명]

  wave_window라는 함수를 정의하여 웹 브라우저를 이동시키는데. 바로 Window객체의

  moveBy()메소드로 for(반복문)문을 이용하여 브라우저를 반복적으로 이동시키는 것이다.
  for문의 내용을 보면 i로 5번, j로 10번을 반복하면서

  상, 하, 좌, 우로 50번 반복하여 웹 브라우저를 이동시키도록 하고 있음 
  [click here!]버튼을 클릭하면 wave_window()함수가 호출된다.

 

 

● 즐겨 찾기에 추가하기
  - 해당 페이지를 즐겨찾기에 추가하려면 다음과 같은 형식으로 입력해준다.


[소스 보기]

<HTML>

<HEAD>

<TITLE>예제3</TITLE>

</HEAD>

<BODY>

<h4>즐겨찾기에 추가하기</h4>

* 아래의 버튼을 클릭하면 즐겨찾기에 추가됩니다. <p>

<form>

<input type="button" name="btn" value="삼성에듀닷컴" onClick="javascript:window.external.AddFavorite('http://kiyoo1.tistory.com', '평범한블로그')">

</FORM>

</BODY>

</HTML>

 

[소스 설명]

 onClick이벤트 핸들러로 버튼을 클릭했을 때 "평범한블로그"사이트가 즐겨찾기에 추가되어 있는데. 여기서 window.external.AddFavorite('http://kiyoo1.tistory.com', '삼성에듀닷컴')은 즐겨찾기에 추가하기 위한 소스로, 기본 형식은 다음과 같다.


widow.external.AddFavorite('사이트 주소','제목')

 


● 점차 확대되는 이미지 만들기
  - 이미지의 사이즈가 원본 크기가 될 때까지 이미지의 크기를 조금씩 확대시키는 형식

  - 이미지의 width와 height값은 이미지의 크기의 비율에 맞게 비례하도록 설정하는 것이 중요

[소스 보기]

 <HTML>

<HEAD>

<TITLE>예제2</TITLE>

<SCRIPT LANGUAGE="Javascript">

<!--

function image_size(){

    if(miffy_img.style.pixelWidth < 344)

     {     

    miffy_img.style.pixelWidth += 8

    miffy_img.style.pixelHeight += 7

     window.setTimeout("image_size()", 5)

    }

}

//-->

</SCRIPT>

</HEAD>

<BODY onLoad="image_size()">

<br><br><br>

<center>

<h2>Welcome to My Homepage</h2>

<img src="img_05.jpg" id="miffy_img" style="width: 0px; height: 0px">

</center>

</BODY>

</HTML>

 

[소스 설명]

 image_size()라는 이름으로 함수를 만들고 해당 이미지의 id값을 이용하여 이미지의 width값이 344, 즉 그림의 원본 크기가 될 때까지 증가시키도록 한 것이다. 
이때, 이미지의 width값은 8씩 증가하고, height값은 7씩 증가하도록 되어있는데. 이는 이미지의 크기와 비율에 따라 값을 다르게 설정하는 것이다.

 <BODY>태그 내에서는 onLoad 이벤트 핸들러를 사용하여 이미지의 크기를 점차 확대시키는 image_size()함수를 호출하는 것이다.

 기본적으로 문서 내에 삽입되는 이미지의 크기를 스타일을 이용하여 가로와 세로 값을 0으로 지정해 줍니다. 또한 id값을 지정해서 자바스크립트에서 컨트롤할 수 있도록 합니다. 예제에서는 id값을 miffy_img라고 지정한 것이다. 

 

 
● 연도를 입력하면 해당 년도의 띠 표시하기
  - 기준이 되는 연도를 정하여 입력되는 연도를 뺀 후 12로 나누었을 때의 나머지 값으로 띠를

    출력해주는 것이므로 나머지 값을 구하는 % 연산자와 if~else문을 이용한다.

[소스보기]

<html>

    <head>

    <title>예제4</title>

        <script language="JavaScript">

        <!--

function born_year () {

        var d_year = 1972

        var new_year = document.year_form.inyear.value

        i = (d_year -new_year) % 12

            if (i == 0) {birth_year="쥐띠"}

            else  {

            if ((i == 1) || (i == -11)){birth_year="돼지띠"}

            else  {

            if ((i == 2) || (i == -10)){birth_year="개띠"}

            else  {

            if ((i == 3) || (i == -9)){birth_year="닭띠"}

            else  {

            if ((i == 4) || (i == -8)){birth_year="원숭이띠"}

            else  {

            if ((i == 5) || (i == -7)){birth_year="양띠"}

            else  {

            if ((i == 6) || (i == -6)){birth_year="말띠"}

            else  {

            if ((i == 7) || (i == -5)){birth_year="뱀띠"}

            else  {

            if ((i == 8) || (i == -4)){birth_year="용띠"}

            else  {

            if ((i == 9) || (i == -3)){birth_year="토끼띠"}

            else  {

            if ((i == 10) || (i == -2)){birth_year="호랑이띠"}

            else  {

            if ((i == 11) || (i == -1)){birth_year="소띠"}  

            }}}}}}}}}}}

            document.year_form.birth.value = birth_year;

            }

            //-->

        </SCRIPT>

    </HEAD>

    <BODY>

        <center>

        <h3>◐ 띠 알아보기 ◑</h4>

        <form NAME="year_form">

        띠를 알고싶은 년도를 입력한 후 [띠보기]버튼을 클릭하세요<p>

        <input TYPE="text" SIZE="4" NAME="inyear" value="2003">

        <input TYPE="button" VALUE="띠보기" onClick="born_year()"><p>

        입력하신 해당 년도의 띠는 <input TYPE="text" SIZE="9" NAME="birth">입니다

        </form>

        </center>

    </BODY>

</HTML>

 

[소스설명]

 born_year()함수는 띠를 구하기 위한 함수로 1972년을 기준으로 되어 있는데요. 1972년은 쥐띠해로 사용자가 입력한 년도를 1972에서 뺀 후 12로 나누었을 때의 나머지 값으로 띠를 구하는 것이다.
따라서 나머지가 0이면 쥐띠, 1이면 소띠, 2이면 호랑띠....형식으로 if else문을 써주시면 되는 것이다. 
년도를 입력할 수 있는 폼이 구성되어 있으며, [띠보기]버튼을 클릭하면 born_year()함수가 호출되어 그 다음 폼에 해당 띠를 출력해 주게 된다.

 

 

● 웹 페이지를 로딩하는데 걸리는 시간 표시하기
  - Date객체와 getTime메소드를 사용하여 처음 페이지를 열었던 시간과 페이지가 다 로딩되었을

    때의 시간을 각각 구한 다음 그 시간의 차를 표시


[소스보기] 

<HTML>

    <HEAD>

        <TITLE>예제5</TITLE>

        <SCRIPT LANGUAGE="Javascript">

        <!--

        Start = new Date()

        function load_time() {

          Stop = new Date()

          i = Stop.getTime() - Start.getTime()

          result_time = i / 1000

          alert("이 페이지를 로딩하는데 걸린 시간은 \n\n" + result_time  + " 초 입니다.")

            }

        //-->

        </SCRIPT>

    </HEAD>

    <BODY onLoad="load_time()">

        <center>

        <h3>Welcome to Myhomepage</h3>

        <img src="miffy_05.gif" border="0">

        </center>

    </BODY>

</HTML>

 

[소스설명]

 Start변수는 페이지를 열었을 때의 시간을 의미하며 Stop은 페이지가 다 로드되었을 때의 시간을 의미한다. 따라서 두 변수의 값을 빼면 로딩하는데 걸리는 시간을 구할 수가 있는 것이며, 이렇게 구해진 시간은 메시지 대화상자를 통해 보여 준다. 
  onLoad이벤트 핸들러를 이용하여 <HAED>태그에 정의해 놓은 load_time()함수를 호출하는 것이다.

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

Ⅰ  Form객체

  - Document객체의 하위객체로 <form>태그의 전반적인 정보를 가지고 오는데 사용

 

  ◈ Form객체의 형식
    - document의 하위객체이기 때문에 document라는 객체명을 입력

    - 그 다음 입력되는 폼 이름은 <form>태그의 name속성에 설정한 이름을 입력하고,

    - 마지막으로는 폼의 속성을 입력해주면 됨

    - 단, Form객체의 자바스크립트 소스는 <form>태그 다음에 위치해야 제대로 실행됨


[형식]

 document.폼이름.속성


  ◈ Form객체의 속성

속성

설  명

action

<form>태그의 action 속성 정보를 가져온다.

elements

입력 양식을 배열로 정의한다.

encoding

<form>태그의 enctype속성 정보를 가져온다.

length

입력 양식의 개수를 알려 준다.  

name

<form>태그의 name 속성 정보를 가져온다.

method

<form>태그의 method 속성 정보를 가져온다.

target

<form>태그의 target 속성 정보를 가져온다.

 

  ◈ Form객체의 메소드

메소드

설  명

blur()

커서를 사라지게 한다.

reset()

입력 양식에 입력된 내용을 초기화 한다.

submit()

입력 양식에 입력한 내용을 지정된 서버로 제출한다.


  ◈ Form 정보를 알려주는 속성
    - form객체에서 제공하는 속성은 모두 <form>태그의 속성 값을 가져오기 위해 사용됨

    - 해당 속성을 '.'연산자를 사용해서 document객체와 form에 사용된 이름을 함께 입력

    - 여기서 form 이름이란 <form>태그의 name속성에 설정한 이름을 말함


[형식]

                                               document.폼이름.action
                                               document.폼이름.encoding
                                               document.폼이름.name
                                               document.폼이름.method
                                               document.폼이름.target


  ◈ elements 속성
    - <form>태그에 배열 번호를 사용하여 선택하게 해주는 속성


[형식] 

 document.폼이름.elements[배열번호]

  ※ 배열번호를 입력할 때는 다른 배열번호와 마찬가지로 0부터 입력

 

  ◈ reset과 submit메소드
    - reset()메소드는 입력 양식을 초기화해주고

    - submit()메소드는 사용자가 폼 형식에 입력한 내용을 전송함


[형식]

                                               document.폼이름.reset()
                                               document.폼이름.submit()


[예제소스]

<HTML>

<HEAD>

<TITLE>reset()과 submit()메소드</TITLE>

<SCRIPT LANGUAGE="Javascript">

<!--

function sub_btn()

{

     document.ex.submit()

     alert("전송했습니다.")

}

function res_btn()

{

     document.ex.reset()

     alert("초기화되었습니다.")

}

//-->

</SCRIPT>

</HEAD>

<BODY>

<h4>[로그인 화면]</h4>

회원ID : <input type=text><p>

비밀번호 : <input type=password>

<form name="ex">

<input type="button" value="제출하기" onclick="sub_btn()">

<input type="button" value="다시입력" onclick="res_btn()">

</form>

</BODY>

</HTML>


[설명] 

 sub_btn()함수는 사용자가 폼 형식에 입력한 내용을 전송하게 해주고,

 res_btn()함수는 입력 양식을 초기화로 만들어 줌


 

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

Ⅰ  History객체

  - 브라우저의 앞으로가기 버튼이나 뒤로 가기 버튼과 같이 웹 사이트 이동에 있어서 이전 혹은 방문한 적이 있는 주소 정보를 가지고 있는 객체로 웹페이지 주소인 url의 history list를 관리

 

  ◈ History객체의 속성

속성

설   명

Length

History에 저장되어 있는 주소의 개수를 나타낸다.

 

  ♣ Length의 형식

[형식] 

 history.length


  ♣ History객체의 메소드

메소드

설   명

Back()

저장된 목록 중 이전 목록으로 이동한다.  

Forword()

저장된 목록 중 다음 목록으로 이동한다.

Go()

저장된 값 만큼 이전 혹은 다음 목록으로 이동한다.

 

[예제소스]

 <HTML>

   <HEAD>

      <TITLE>History객체의 메소드</TITLE>

   </HEAD>

   <BODY>

      <center>

      <h4>[이전페이지로 이동]</h4>

      <input type="button" value="back" onclick="history.back()">

      </center>

   </BODY>

</HTML>


[설명]

 [back]버튼을 클릭하면 이전 페이지로 이동된다.

 


Ⅱ  Frame 객체

  - window객체의 하위객체로 2개 이상의 문서가 조합되어 만들어진 프레임을 제어하기 위한 객체

 

  ◈ Frame객체의 속성

속성

설명

self

자기 자신의 프레임을 의미한다.

parent

상위 계층의 프레임을 의미한다.

top

최상위 계층의 프레임을 의미한다.

frames[n]

배열 형식의 프레임에서 프레임의 번호를 설정한다.

 

  ◈ frames 속성
    - 프레임의 번호위에서 아래로, 왼쪽에서 오른쪽으로 번호가 매겨지게 된다.

 

 

  ※ frame 객체 사용의 예
 

window.parent.frames[2].document.bgcolor="yellow"

  윈도를 상위 프레임으로 이동한 후 그 위치에서 frame 중 3번째 프레임에 문서 배경 속성을

  파랑으로 지정하도록 설정

 

[예제소스]

프레임 문서

<HTML>

    <HEAD>

    <TITLE>Frame객체</TITLE>

    </HEAD>

        <frameset rows="70,*">

          <frame src="19ch_05.html">

          <frame src="19ch_04.html">

        </frameset>

</HTML>


[설명]

 문서를 위 아래 프레임으로 나눈다

 

[예제소스]

    위쪽 프레임 문서

<HTML>

   <HEAD>

   <TITLE>Frame객체</TITLE>

   </HEAD>

   <BODY>

      <center>

      <h4>위쪽에 보이는 색상 테이블 중 원하는 색 위로 마우스 포인터를 위치시켜보세요.</h4>

      </center>

   </BODY>

</HTML>

 

[설명]

 색상테이블을 만들어 각각의 색을 지정한 후 onmouseover핸들러를 사용하여

 색 위로 마우스 포인터를 위치시키면 아래쪽 프레임의 색이 바뀌도록

 window.parent.frames[1].document.bgColor=''와 같이 설정한 것

 

[예제소스]

    아래쪽 프레임 문서

<HTML>

   <HEAD>

   <TITLE>Frame객체</TITLE>

   </HEAD>

   <BODY>

      <center>

      <table width="180" height="30" border="0" cellspacing="0"

      cellpadding="0">

      <tr>

      <td bgcolor="#ffff99"

       onmouseover="window.parent.frames[1].document.bgColor='#ffff99'">

&nbsp<td>

      <td bgcolor="#ffc299"

       onmouseover="window.parent.frames[1].document.bgColor='#ffc299'">

&nbsp<td>

      <td bgcolor="#ffb3d1"

       onmouseover="window.parent.frames[1].document.bgColor='#ffb3d1'">

&nbsp<td>

      <td bgcolor="#ffb3ff"

       onmouseover="window.parent.frames[1].document.bgColor='#ffb3ff'">

&nbsp<td>

      <td bgcolor="#b3c2ff"

       onmouseover="window.parent.frames[1].document.bgColor='#b3c2ff'">

&nbsp<td>

      </tr>

      </center>

   </BODY>

</HTML> 

 

[설명]

 배경색이 바뀔 문서


 

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

Ⅰ  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 진짜깨비

Ⅰ  Document 객체란

  - window객체의 하위 객체로 문서의 내용에 대한 정보를 담고 있다.

  - <html>의 <body>에 관련된 내용을 document객체에서 사용할 수 있고

  - 문서의 색상, 글자 색상, 링크 등을 설정할 수 있다.

 

  ◈ Document객체의 속성

속성

설명

title

문서의 제목을 표시한다.

location

문서의 URL 주소를 표시한다.

lastModified

문서를 마지막으로 수정한 날짜와 시간을 표시한다.

referrer

링크한 원래 문서의 url 주소를 표시한다.

bgColor

문서의 배경색상을 지정한다.

fgColor

글자 색상을 지정한다.

linkColor

하이퍼 링크가 성정된 글자 색상을 지정한다.

alinkColor

하이퍼 링크 글자를 누르고 있는 상태의 색상을 지정한다.

vlinkColor

하이퍼 링크를 선택하고 난 후의 글자 생상을 지정한다.

 

[예제소스]

 <HTML>

      <HEAD>

      <TITLE>Document객체</TITLE>

            <SCRIPT LANGUAGE="Javascript">

            <!--

            document.write("배경색 : ",document.bgColor,"<p>")

            document.write("글자색 : ",document.fgColor,"<p>")

            document.write("링크색 : ",document.linkColor,"<p>")

            document.write("활성화된 링크색 : ",document.alinkColor,"<p>")

            document.write("방문한 링크색 : ",document.vlinkColor)

            //-->

            </SCRIPT>

      </HEAD>

      <BODY> </BODY>

</HTML>


[설명]

  웹 브라우저 창에서 배경색, 글자색, 링크색 등이 16진수로 표시된다.



Ⅱ  Document 객체의 메소드

메소드

설 명

open()

문서에 자료를 출력하기 위한 준비를 한다.

close()

문서에 자료 출력하는 것을 종료시킨다.

clear()

문서를 지운다.

write()

문서에 자료를 출력한다.

writeln()

문서에 자료를 출력하고 줄을 바꾼다.

 

  ◈ open()과 close()메소드

    - document.open이나 document.close메소드는 새로운 창에 내용을 나타내 주는 메소드

    - 별도의 파일 없이도 새 창을 만들어 줌

    - 새로운 문서를 굳이 만들 필요가 없는 간단한 내용을 보여 주고자 할 때 주로 사용

 

[예제소스] 

 <HTML>

   <HEAD>

  <TITLE>open()과 close()</TITLE>

      <SCRIPT LANGUAGE="Javascript">

      <!--

      function w_open(){

      a=window.open()

      a.document.open()

      a.document.write("어서오세요")

      a.document.close()}

      function w_close(){

      a.document.open()

      a.document.write("")

      a.document.close()}

      //-->

      </SCRIPT>

   </HEAD>

   <BODY>

      <form>

      <input type="button" value="메시지 창 띄우기" onclick="w_open()">

      <input type="button" value="내용 지우기" onclick="w_close()">

   </BODY>

</HTML>


[설명]

 [메시지 창 띄우기]버튼을 클릭하면 웹브라우저 창이 열리면서 "어서오세요"가 출력되고,

 [내용 지우기]버튼을 클릭하면 "어서오세요"라는 내용이 지워진다.



 

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

Ⅰ  window객체의 메소드

메소드

설명

open()

새로운 윈도를 연다.

close()

열린 윈도를 닫는다.

alert()

메시지 창을 통해 메시지를 보여 준다.

confirm()

확인 대화상자를 보여 준다.

prompt()

문자열을 입력 받을 수 있는 창을 보여 준다.

setTimeout()

지정된 시간이 지난 후에 명령을 수행한다.

clearTimeout()

setTimeout()을 해제한다.

setInterval()

주기적으로 명령을 수행한다.

moveBy()

윈도의 상대적인 이동을 설정한다.

moveTo()

윈도의 절대적인 이동을 설정한다.

resizeBy()

윈도의 상대적인 크기를 설정한다.

resizeTo()

윈도의 절대적인 크기를 설정한다.

scrollBy()  

화면을 지정한 크기만큼 스크롤한다.

ScrollTo()

화면을 지정한 위치로 스크롤한다.

print()

윈도에 포함된 내용을 출력한다.

stop()

문서의 전송을 중지시킨다.

back()

앞 페이지로 이동한다.

forward()

뒤 페이지로 이동한다.

home()

홈페이지로 이동한다.

find()

윈도 안에 있는 텍스트를 검색한다.

  ※ 회색은 넷스케이프에서만 지원되는 메소드이다.

 

 

Ⅱ  open과 close메소드

 

  ◈ open()메소드 : 홈페이지를 방문했을 때 공지사항이나 안내문 등의 새 창이 열리도록 할 때 사용

 
[형식]

window.open("url","창이름","창의 속성")

 

  ♣ 창의 속성을 설정하는 매개변수

속 성

설정값

설 명

toolbar

yes/no

툴바메뉴를 보이게 할지 설정한다.

location

yes/no

주소표시줄을 보이게 할지 설정한다.  

directories

yes/no

연결표시줄을 보이게 할지 설정한다.

status

yes/no

상태표시줄이 보이게 할지 설정한다.

menubar

yes/no

메뉴를 보이게 할지 설정한다.  

scrollbars

yes/no

스크롤바를 보이게 할지 설정한다.

resizable

yes/no

창 크기 조절을 허용할지를 설정한다.

copyhistory

yes/no

히스토리 정보를 저장할지 설정한다.

width

픽셀

창의 가로 길이를 설정한다.

height

픽셀

창의 세로 길이를 설정한다.

 

  ◈ close()메소드 :  열려 있는 창을 닫을 때 사용


[형식]

 window.close()  또는 self.close()

 

 

Ⅲ  setTimeout메소드

  - setTimeout을 입력한 후 괄호 안에 호출할 함수명을 입력하고 함수 호출할 시간을 입력 

  - 시간은 1/1000초 단위로 지정. 2초 단위로 지정하려면 시간을 '2000'이라고 입력[형식]

 setTimeout("호출함수",시간)

 

[예제소스]

 <HTML>

<HEAD>

<TITLE>setTimeout()메소드</TITLE>

<SCRIPT LANGUAGE="Javascript">

<!--

function time(){

a=new Date()

window.status=a.getHours()+"시"+a.getMinutes()+"분"+a.getSeconds()+"초"

   time_update=setTimeout("time()",1000)

}

//-->

</SCRIPT>

</HEAD>

<BODY onload="time()">

상태표시줄에서 시간을 확인해보세요.

</BODY>

</HTML>

 

[설명]

 상태표시줄에 시간을 표시하기 위해서는 먼저 Date객체가 필요합니다.

 따라서 현재 소스를  보면 Date()객체가 변수 a로 정의되어 있다.
 그 다음으로 [window.status=a.getHours()+"시"+a.getMinutes()+"분"+a.getSeconds()+"초"]

 구문은 시간을 표시하기 위해 Date객체의 메소드를 이용하여 "시/분/초" 형태로 나타낸 다음

 이를 상태표시줄에 나타내기 위한 구문이다.
 그 다음 마지막으로 제일 중요한 부분은 그 다음 줄인  time_update=setTimeout("time()",1000)

 이 구문은 1초 마다 계속 시간을 업데이틀 하기 위한 구문으로 만약 이 구문을 쓰지 않는다면

 시간은 움직이지 않고 멈춰 있게 되는 것이다.


 

Ⅳ  resizeBy, resizeTo메소드 : 윈도의 크기를 조절하는 메소드

  - resizeBy()는 상대적으로 크기를 조절, resizeTo()는 절대적으로 크기를 조절


[형식]

resizeBy(a,b)
resizeTo(a,b)

 

[예제소스]

 <HTML>

<HEAD>

<TITLE>resizeBy()와 resizeTo()</TITLE>

</HEAD>

<BODY>

    <form>

    <input type="button" value="버튼1" onclick="window.resizeBy(-30,-30)">

    <input type="button" value="버튼2" onclick="window.resizeTo(500,600)">

    </form>

</BODY>

</HTML>

 

[설명]

 버튼1을 누르면 창의 크기가 가로, 세로 모두 30픽셀씩 줄어들고, 버튼2를 클릭하면 창의 크기

 가 500*600크기로 설정됨

 


Ⅴ  print()메소드 : 현재 열려 있는 홈페이지 문서를 프린트하게 해주는 메소드


[형식] 

 print()

 

 

Ⅵ  moveBy, moveTo메소드 : 브라우저의 위치를 이동시켜주는 메소드

  - MoveBy()메소드는 브라우저가 위치해 있는 위치부터 좌측 상단을 기준점으로 이동

  - MoveTo()메소드는 화면상의 좌측 상단을 기준으로 정해진 거리만큼 이동

  - 이 두 메소드는 이동할 가로거리와 세로거리를 픽셀 값으로 한 두 개의 매개 변수를 입력

 

[형식] 

moveBy(a,b)
moveTo(a,b)

 

[예제소스]

<HTML>

<HEAD>

<TITLE>MoveBy()와 MoveTo()</TITLE>

</HEAD>

<BODY>

    <form>

    <input type="button" value="오른쪽으로 이동하기"     onclick="window.moveBy(100,0)">

    <input type="button" value="왼쪽 상단에 정렬하기" onclick="window.moveTo(0,0)">

    </form>

</BODY>

</HTML>

 

[설명]

 [오른쪽으로 이동하기]버튼을 클릭하면 브라우저 창이 오른쪽으로 100픽셀씩 이동이 되며,

 [왼쪽 상단에 정렬하기]버튼을 클릭하면 브라우저 창의 위치가 무조건 왼쪽 상단으로 정렬


 

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

Ⅰ  브라우저 객체

  - 익스플로러나 넷스케이프와 같은 브라우저 창에 내장되어 있는 객체

  - 브라우저에 있는 문서, 상태 표시줄, 도구 모음과 같은 객체들의 정보를 가지고 다양한 효과를 냄

  - 최상위 객체는 window라는 객체

  - window 객체는 계층적인 구조로 되어 frames, document, history와 같은 하위 객체가 존재

  지금 까지 사용했던 document.write()는 window 객체가 생략되어 사용되었으며 정확한 입력

  방법은 window.document .write()이다. 하지만 매번 반복하여 사용할 경우 상위객체를 생략

  하여 주로 사용

 

 

◈ 브라우저 객체들의 명칭
 


  ◈ 브라우저 객체의 구조 : 다음과 같은 계층적인 구조

 

 

   ① window 객체 : 가장 상위 객체이며 윈도 창을 열거나 창을 제어할 때 사용된다.
   ② history 객체 : 브라우저의 히스토리 정보를 제공하는 객체로 다음 페이지, 이전 페이지로 이동하는 효과를 낼 수 있으며, window.history로 사용된다. 
   ③ location 객체 : window객체의 하위객체로 주소 표시줄의 url 주소에 관한 정보를 제공하는 객체이며, window.location으로 사용된다.
   ④ document 객체 : window객체의 하위객체로 문서의 내용에 관한 정보를 제공하는 객체이다. window.document로 사용한다.
   ⑤ frame 객체 : frame을 제어하는 객체로 window.frame로 사용한다.

 

Ⅱ  Window객체

  - window객체는 최상위 객체로 모든 내장 객체는 window에서 시작됨

  - 모든 하위객체를 표기할 때는 window객체 명을 입력해야 되지만 생략하여 사용되는 경우가 많음

 

  ◈ Window의 각각의 명칭 

 

  ◈ Window객체의 속성

속성

설명

status

상태 표시줄의 내용을 지정한다.

defaultStatus

status의 내용이 지정되지 않았을 때의 내용을 지정한다.

frames

윈도우 객체 안에 들어간 프레임의 정보를 제공한다.

opener

open() 메소드에 의해서 윈도우를 연 문서를 선택한다.

innerHeight

브라우저에서 내용을 볼 수 있는 창의 높이를 지정한다.

innerWidth

브라우저에서 내용을 볼 수 있는 창의 너비를 지정한다.

outerHeight

브라우저의 전체 창의 높이를 지정한다.

outerWidth

브라우저의 전체 창의 너비를 지정한다.

pageXOffset

윈도에 현재 나타나는 페이지의 X 위치를 지정한다.

pageYOffset

윈도에 현재 나타나는 페이지의 Y 위치를 지정한다.

locationbar

locationbar의 표시 여부를 지정한다.

menubar

menubar의 표시 여부를 지정한다.

scrollbars

scrollbar의 표시 여부를 지정한다.

statusbar

statusbar의 표시 여부를 지정한다.

   ※ 회색으로 되어 있는 속성은 넷스케이프에서만 지원되는 속성이다.

 

  ◈ 이벤트 핸들러

이벤트핸들러

설명

onLoad()

문서가 Load될 때 발생한다.

onUnLoad()

문서가 unLoad될 때 발생한다.

onError()

문서 Load 중 에러가 나타나면 발생한다.

onBlur()

문서가 focus를 잃었을 때 발생한다.

onFocus()

문서가 focus를 얻었을 때 발생한다.

onDragDrop()

객체를 DragDrop 시켰을 때 발생한다.

onMove()

윈도를 움직였을 때 발생한다.

onResize()

윈도의 크기를 바꾸었을 때 발생한다.

   ※ 회색으로 되어 있는 속성은 넷스케이프에서만 지원되는 속성이다.

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

Ⅰ  Math객체

  - 수학적인 계산을 하는데 사용되는 객체

  - 삼각함수, 지수함수, 로그 함수, 원주율, 제곱근 등의 속성들이 있음

 

  ◈ Math객체의 형식

[형식]

      math.속성
      math.메소드

 

  ◈ Math객체의 속성

속  성

설  명

E

자연로그 밑에 사용하는 오일러 상수

LN10

10의 자연 로그 값

LN2

2의 자연 로그 값

LOG10E

밑이 10인 E로그

LOG2E

밑이 2인 로그

PI

원주율

SQRT1_2

1/2의 제곱근

SQRT2

2의 제곱근

 

  ◈ Math객체의 메소드

메소드

설명

sin(x)

sine 함수를 계산한다.

cos(x)

cosine 함수를 계산한다.

tan(x)

tangent 함수를 계산한다.

asin(x)

arc sine 함수를 계산한다.

acos(x)

arc cosine 함수를 계산한다.

atan(x)

arc tangent 함수를 계산한다.

atan2(x,y)

제 2 arc tangent 함수를 계산한다.

abs(x)

절대 값을 계산한다.

exp(x)

지수 함수를 계산한다.

log(x)

로그 함수를 계산한다.

pow(x,y)

x의 y승을 계산한다.

sqrt(x)

제곱근을 계산한다.

random()

0에서 1사이의 난수를 발생한다.

round(x)

반올림한다.

floor(x)

x보다 같거나 작은 가장 큰 정수값을 계산한다.

ceil(x)

x보다 같거나 큰 가장 작은 정수값을 계산한다.

max(x,y)

x, y 중 큰 수를 계산한다.

min(x,y)

x, y 중 작은 수를 계산한다.

 

  ♣  Random메소드
  - 0에서 1까지의 난수를 발생시키는 메소드

 
[예제소스]

<HTML>

      <HEAD>

      <TITLE>Random메소드</TITLE>

     <SCRIPT LANGUAGE="Javascript">

     <!--

if(Math.random()<=0.5)

{

document.write("<img src=img_01.gif>")

}

else

{

document.write("<img src=img_02.gif>")

}

//-->

     </SCRIPT>

</HEAD>          

      <BODY> </BODY>

</HTML>

 

[설명]

 random메소드가 난수를 발생시켜 현재 문서를 열거나 새로 고침 할 때마다 배너 그림이 바뀜

 지금은 발생한 난수가 0.5 이하일 경우에는 img_01.gif 그림이, 0.5 초과시 img_02.gif 그림이

 나오도록 만든거라 같은 그림이 반복해서 나오는 경우도 생김


 

 

Ⅱ  Function객체

  - Function 객체란 함수를 사용하지 않고 객체로서 함수의 내용을 정의해주는 내부객체

 

  ◈ Function객체의 형식

[형식]

      a = new function(매개변수1, 매개변수2, 계산식)

 

[예제소스]

<HTML>

      <HEAD>

      <TITLE>Function객체</TITLE>

            <SCRIPT LANGUAGE="Javascript">

            <!--

i=new Function("a","b","return(a*b)")

document.write("a * b = "+i(6,3))

            //-->

            </SCRIPT>

      </HEAD>

      <BODY> </BODY>

</HTML>


[설명]

 Function객체에서 a와 b의 곱한 값을 변수 i에 할당하여 그 값을 출력하라는 것

 화면에는 "a * b = 18" 이라고 나온다.



 

저작자 표시
신고
크리에이티브 커먼즈 라이선스
Creative Commons License

'JavaScript 를 배웁시다.' 카테고리의 다른 글

[16단원] Window 객체의 메소드  (0) 2012.07.02
[15단원] 브라우저객체  (0) 2012.06.28
[14단원] Math객체와 Function객체  (0) 2012.06.27
[13단원] Array객체  (0) 2012.06.26
[12단원] Screen객체와 Event객체  (0) 2012.06.25
[11단원] String 객체  (0) 2012.06.22
Posted by 진짜깨비

Ⅰ  Array 객체

  - Array객체는 내용들을 배열로 만들어 주는 객체

  - 객체 내에 사용할 내용들에 번호를 매겨 체계적으로 정렬해서 사용할 수 있게 해줌

  - 적은 저장 공간에 많은 양의 데이터를 처리하기 위한 방법으로 사용

  ※ 배열 개념 : 아파트 1개 동에 입주하고 있는 여러개의 호 개념으로 이해

  ◈ Array 객체의 형식

     a=new array(n)

 

  먼저 new연산자로 객체를 만들어 준 다음 괄호 안에 매개 변수(배열 숫자)를 입력


[예제소스]

 <HTML>

      <HEAD>

      <TITLE>Array객체</TITLE>

            <SCRIPT LANGUAGE="Javascript">

            <!--

            a=new Array(5)

            a[0]=5

            a[1]=10

            a[2]=15

            a[3]=20

            a[4]=25

            document.write(a)

            //-->

            </SCRIPT>

      </HEAD>

      <BODY> </BODY>

</HTML>


[설명]

  a에 5개의 배열이 설정되었기때문에 5,10,15,20,25 가 출력된다.


  ☞ 배열에서의 방 번호 : 0부터 순차적으로 번호가 붙고, 이를 인덱스번호라고 함

 

 

II Array 객체의 속성

 

  ◈ length속성 : 배열의 개수를 계산해주는 속성


[형식]

     a=new array(n)
     a.length

 

[예제소스]

<HTML>

      <HEAD>

      <TITLE>length속성</TITLE>

     <SCRIPT LANGUAGE="Javascript">

     <!--

a=new Array(3)

a[0]=10

a[1]=20

a[2]=30

document.write("배열의 길이는 : " + a.length)

//-->

     </SCRIPT>

</HEAD>          

      <BODY> </BODY>

</HTML>

 

[설명]

  length속성은 배열의 개수를 계산해주므로 변수 a에 할당된 Array객체의 개수가 3이 출력됨

 


III Array객체의 메소드

 

메소드

기능

concat()

기존 배열에 배열을 추가해줌

join()

배열 값을 하나의 문자열로 바꿔줌

reverse()

배열 값의 위치를 반대로 해줌

slice()

배열을 분리시켜 줌

sort()

배열을 정렬해 줌.

 

  ♣ concat()메소드 : 이미 정의되어 있는 배열에 추가적인 배열을 입력할 때 사용

[형식]

       a=new array(n)
       b=new array(m)
       c=a.concat(b)


[예제소스]

<HTML>

      <HEAD>

      <TITLE>concat()메소드</TITLE>

            <SCRIPT LANGUAGE="Javascript">

            <!--

a=new Array(2,4,6)

b=new Array(8,10,12)

c=a.concat(b)

document.write(c)

            //-->

            </SCRIPT>

      </HEAD>

      <BODY> </BODY>

</HTML>


[설명]

 변수 a의 배열 값인 2,4,6에 b의 배열 값인 8,10,12의 값이 추가되어 출력

 ※ Array 매개변수에는 지정할 변수의 숫자가 들어갈 수도 있고, 직접 변수를 입력할 수도 있다.

  ♣ join()메소드 : 저장된 값들을 특정 기호를 사용해서 문자열로 바꾸어 주는 메소드


[형식]

      a=new Array(n)
      b=a.join("특정기호")

 

[예제소스]

<HTML>

      <HEAD>

      <TITLE>join()메소드</TITLE>

     <SCRIPT LANGUAGE="Javascript">

     <!--

a=new Array(4)

a[0]="봄"

a[1]="여름"

a[2]="가을"

a[3]="겨울"

b=a.join("-")

document.write(b)

//-->

     </SCRIPT>

</HEAD>          

      <BODY> </BODY>

</HTML>


[설명]

 배열 a에 지정된 값들이 "-"기호로 나열되어(봄-여름-가을-겨울) 출력

 

  ♣ reverse()메소드 : 배열에 등록된 값들의 순서를 거꾸로 바꾸어 주는 메소드


[형식]

      a=new Array(n)
      b=a.reverse()

 

[예제소스]

<HTML>

      <HEAD>

      <TITLE>reverse()메소드</TITLE>

     <SCRIPT LANGUAGE="Javascript">

     <!--

a=new Array(5)

a[0]=2

a[1]=4

a[2]=6

a[3]=8

a[4]=10

b=a.reverse()

document.write(b)

//-->

     </SCRIPT>

</HEAD>          

      <BODY> </BODY>

</HTML>

 

[설명]

 배열 a에 지정된 값들이 순서가 반대가 되어(10,8,6,4,2) 출력

 

  ♣ sort()메소드 : 배열에 등록되어 있는 값들을 정렬해주는 메소드
 
[형식]

      b=a.sort()


[예제소스]

<HTML>

      <HEAD>

      <TITLE>sort()메소드</TITLE>

            <SCRIPT LANGUAGE="Javascript">

            <!--

a=new Array(5,"자바스크립트",3,9,"javascript")

b=a.sort()

document.write(b)

            //-->

            </SCRIPT>

      </HEAD>

      <BODY> </BODY>

</HTML>

 

[설명]

  변수 a의 배열 값들이 오름차순으로 정렬되어 다음과 같이 출력

  3,5,9,javascript,자바스크립트

저작자 표시
신고
크리에이티브 커먼즈 라이선스
Creative Commons License

'JavaScript 를 배웁시다.' 카테고리의 다른 글

[15단원] 브라우저객체  (0) 2012.06.28
[14단원] Math객체와 Function객체  (0) 2012.06.27
[13단원] Array객체  (0) 2012.06.26
[12단원] Screen객체와 Event객체  (0) 2012.06.25
[11단원] String 객체  (0) 2012.06.22
[10단원] 내장객체와 Data객체  (0) 2012.06.21
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 2 이전버튼

블로그 이미지
진짜깨비
Yesterday41
Today18
Total13,797

달력

 « |  » 2017.08
    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    

최근에 받은 트랙백

글 보관함


티스토리 툴바