반응형
브라우저에 미리 정의되어 내장된 객체들을 말한다.
  1. Navigator 객체

    브라우저에 대한 정보를 제공하는 객체로 계층구조에 포함되지 않고 따로 존재한다.

    • Navigator 객체의 특성

      특성 의미
      appVersion 브라우저의버전
      appName 애플리케이션 이름
      appCodeName 브라우저 코드 이름
      userAgent 브라우저의 user Agent
      mimeTypes 브라우저에서 지원하고 있는 MIME 타입들
      plugins 브라우저에 설치된 플러그인의 종류
      language 브라우저가 사용하는 언어
      platform 브라우저가 설치된 시스템 종류

    • Navigator 객체의 메소드

      메소드 의미
      javaEnabled() 현재 브라우저가 자바를 지원하고 있는지를 체크한다

      예제1 실행화면
      <script language="javascript">
      <!--
      function infor() {
      var mirage = "방문자 브라우저 정보" + "\n \n" mirage += "브라우저 버전 : " + navigator.appVersion + "\n"
      mirage += "애플리케이션 이름 : " + navigator.appName + "\n"
      mirage += "코드이름 : " + navigator.appCodeName + "\n"
      mirage += "User Agent : " + navigator.userAgent + "\n"
      alert(mirage)
      }
      //-->
      </script>
      <input type="button" value="브라우저정보" onclick="infor()">
      <INPUT onclick="infor()" type="button" value="브라우저정보">

    • mimeTypes

      현재 브라우저가 지원하는 mime 타입을 보여주는 배열변수로서 mime타입의 종류,설명,파일확장자,플러그인 객체 등의 정보를 포함하고 있다

      • mimeTypes 의 특성

        특성 의미
        type MIME 타입의 이름
        description MIME 타입에 대한설명
        enabledPlugin MIME 타입을 처리할 Plugin 객체
        suffixes MIME 타입에 해당하는 파일의 확장자 리스트

    • plugins

      현재 브라우저가 지원하는 플러그인 프로그램에 관한 정보를 보여주는 배열변수로서 플러그인의 이름,설명,지원하고 있는 MIME타입 등의 정보를 포함하고 있다.

      • plugins 의 특성

        특성 의미
        type 플러그인의 이름
        description 플러그인에 대한설명
        filename 디스크에있는 플러그인 파일이름
        [...] 플러그인이 처리할 수 있는 mimetype 객체의 배열
        length 배열의크기

    • javaEnabled()

      자바를 사용할수 있는지를 검사한다.
      자바를 사용할 수 있으면 true를 사용할 수 없으면 false를 리턴한다.

      예제2 실행화면
      <script>
      function javain() {
      if(navigator.javaEnabled()) {
      alert("방문하신 님의 PC는 자바를 사용할 수 있습니다.")
      }
      else {
      alert("방문하신 님의 PC는 자바를 사용할 수 없습니다.")
      }
      }
      </script>
      <input type="button" value="자바사용유무" onclick="javain()">
      <INPUT onclick="javain()" type="button" value="자바사용유무">

      [출처] [13]객체5|작성자 붉은매


반응형

브라우저에 미리 정의되어 내장된 객체들을 말한다.
  1. Link 객체

    HTML문서에 들어있는 모든 링크에 대한 정보를 제공하는 객체로 document 객체의 하위객체이다.

    • Link 객체의 특성

      특성 의미
      target 정보를 보여줄 윈도우나 프레임
      href 문서의 URL주소
      port 포트번호
      host URL주소의 호스트이름과 포트번호
      hostname URL주소의 호스트이름
      protocol 프로토콜 종류
      pathname 디렉토리 위치
      search 검색엔진을 호출할때 사용하는 형식
      hash 표식이름

    • Link 객체의 이벤트 핸들러

      이벤트 핸들러 의미
      onClick 마우스로 링크를 클릭 했을때 발생하는 이벤트 핸들러
      onMouseOver 마우스로 링크위를 지나갔을 때 발생하는 이벤트 핸들러
      onMouseOut 마우스가 링크 밖으로 나갔을때 발생하는 이벤트 핸들러
      onMouseDown 마우스 버튼을 눌렀을때 발생하는 이벤트 핸들러
      onMouseUp 마우스 버튼을 놓았을때 발생하는 이벤트 핸들러
      onDblClick 마우스로 링크를 더블클릭 했을때 발생하는 이벤트 핸들러
      onKeyDown 키보드에서 키를 눌렀을 때 발생하는 이벤트 핸들러
      onKeyUp 키보드에서 키를 놓았을 때 발생하는 이벤트 핸들러
      onKeyPress 키보드에서 키를 눌렀을 때 발생하는 이벤트 핸들러

  2. Anchor 객체

    HTML문서에 들어있는 모든 표식에 대한 정보를 제공하는 객체이다.
    document 객체의 하위객체로 문서에 들어있는 표식의 수를 구할때 사용한다.

    document.anchors.length

  3. Image 객체

    이미지에 대한 정보를 제공하는 객체이다.

    • Image 객체의 특성

      특성 의미
      name image객체의 이름
      src 이미지파일의 위치
      lowsrc 이미지파일의 위치
      height 이미지의 세로길이
      width 이미지의 가로길이
      border 이미지 테두리선 굵기
      hspace 이미지 가로여백
      vspace 이미지 세로여백
      complete 이미지 전송이 끝났는지의 여부
      prototype image 객체에 특성을 추가하기 위한 것

    • Image 객체의 이벤트 핸들러

      이벤트 핸들러 의미
      onLoad 이미지가 브라우저에 나타날때 실행되는 이벤트 핸들러
      onError 이미지 전송중 에러 발생시 실행되는 이벤트 핸들러
      onAbort 이미지 전송을 중단시켰을 때 실행되는 이벤트 핸들러
      onKeyDown 이미지상에서 키를 눌렀을때 실행되는 이벤트 핸들러
      onKeyPress 이미지상에서 키를 눌렀을때 실행되는 이벤트 핸들러
      onKeyUp 이미지상에서 키를 놓았을때 실행되는 이벤트 핸들러

      예제1 실행화면
      <script language="javascript">
      <!--
      function imageinfor() {
      var mirage = "이미지이름 : " + document.coffee.name + "\n"
      mirage += "위치 : " + document.coffee.src + "\n"
      mirage += "테두리 : " + document.coffee.border + "\n"
      mirage += "가로 : " + document.coffee.width + "\n"
      mirage += "세로 : " + document.coffee.height + "\n"
      mirage += "가로여백 : " + document.coffee.hspace + "\n"
      mirage += "세로여백 : " + document.coffee.vspace + "\n"
      mirage += "배치 : " + document.coffee.align + "\n"
      mirage += "전송완료여부 : " + document.coffee.complete + "\n"
      alert(mirage)
      }
      //-->
      </script>
      <img align=center name="coffee" src="img/f9.gif" border=0 hspace=2 vspace=3>
      <input type="button" value="이미지등록정보" onClick="imageinfor()">


       <INPUT onclick="imageinfor()" type="button" value="이미지등록정보">

[출처] [12]객체4|작성자 붉은매

반응형
브라우저에 미리 정의되어 내장된 객체들을 말한다.
  1. History 객체

    브라우저 내장객체 계층구조상 윈도우객체 바로 아래에 있는 객체로 브라우저 히스토리 리스트 정보를 저장해 두는 곳이다.
    히스토리 정보는 브라우저가 최근 방문했던 url주소를 의미한다.

    • History 객체의 특성

      특성 의미
      length 히스토리 리스트에 포함되어 있는 URL 주소의 갯수

    • History 객체의 메소드

      메소드 의미
      back() 히스토리 리스트에서 한단계 뒤로 이동
      forward() 히스토리 리스트에서 한단계 앞으로 이동
      go() 히스토리 리스트에서 임의의 위치로 이동

      예제1 실행화면
      <script language="javascript">
      <!--
      function historygt() {
      alert("히스토리갯수 : " + history.length +"개")
      }
      //-->
      </script>
      <input type="button" value="히스토리 정보" onClick="historygt()">
      <INPUT onclick="historygt()" type="button" value="히스토리 정보">

      예제2 실행화면
      <input type="button" value = "뒤로" onclick="history.back()">
      <input type="button" value = "앞으로" onclick="history.forward()">
      <INPUT onclick="history.back()" type="button" value="뒤로"> <INPUT onclick="history.forward()" type="button" value="앞으로">

      예제3 실행화면
      <input type="button" value = "3단계 뒤로" onclick="history.go(-3)">
      <input type="button" value = "뒤로" onclick="history.back()">
      <input type="button" value = "앞으로" onclick="history.forward()">
      <input type="button" value = "3단계 앞으로" onclick="history.go(3)">
      <INPUT onclick="history.go(-3)" type="button" value="3단계 뒤로"> <INPUT onclick="history.back()" type="button" value="뒤로">

      <INPUT onclick="history.forward()" type="button" value="앞으로"> <INPUT onclick="history.go(3)" type="button" value="3단계 앞으로">

  2. Location 객체

    현재 열려진 윈도우의 URL 주소에 관한 정보를 제공하는 객체이다.
    frame으로 나누어져 있다면 최상위에 있는 문서의 URL주소를 갖게 된다.

    • Location 객체의 특성

      특성 의미
      href 문서의 URL주소
      port 포트번호
      host URL주소의 호스트이름과 포트번호
      hostname URL주소의 호스트이름
      protocol 프로토콜 종류
      pathname 디렉토리 위치
      search 검색엔진을 호출할때 사용하는 형식
      hash 표식이름

    • Location 객체의 메소드

      메소드 의미
      reload() 브라우저의 현재문서를 다시 읽도록 하는 메소드
      replace() 현재 브라우저의 특정 URL에 있는 문서로 바꾸어 주는 메소드

      예제4 실행화면
      <script language="javascript">
      <!--
      function cominfor() {
      var mirage5 = "문서주소 : " + top.frames[0].location.href + "\n"
      mirage5 += "프로토콜 종류 : " + top.frames[0].location.protocol + "\n"
      mirage5 += "호스트 : " + top.frames[0].location.host + "\n"
      mirage5 += "호스트이름 : " + top.frames[0].location.hostname + "\n"
      mirage5 += "포트번호 : " + top.frames[0].location.port + "\n"
      mirage5 += "표식이름 : " + top.frames[0].location.hash + "\n"
      mirage5 += "디렉토리위치 : " + top.frames[0].location.pathname + "\n"
      alert(mirage5)
      }
      //-->
      </script>
      <input type="button" value="문서정보" onclick="cominfor()">
      <INPUT onclick="cominfor()" type="button" value="문서정보">

[출처] [11]객체3|작성자 붉은매


반응형
브라우저에 미리 정의되어 내장된 객체들을 말한다.
  1. Frames 객체

    프레임객체는 배열로 되어있어서 length를 이용해서 모두 몇개의 프레임이 있는지 알아낼수 있고 인덱스를
    이용하여 각 프레임의 정보에도 접근할수 있다.
    frames[0],frames[1],.....
    프레임 객체는 윈도우 객체와 특성이나,메소드,이벤트 핸들러가 같기 때문에 윈도우 객체를 참고하면 된다.

  2. Document 객체

    브라우저 내장객체 중에 window객체 아래에 위치하며 html문서의 body택안에 있는 내용들과 연관이 있다.

    • document 객체의 특성

      특성 의미
      location 문서의 URL위치
      title 문서의제목
      layers 문서에 있는 레이어들의 배열
      embeds 문서에 있는 플러그인들의 배열
      applets 문서에 있는 자바 애플릿의 배열
      images 문서에 있는 이미지들의 배열
      cookie 클라이언트 pc에 저장한 정보
      links 문서에 있는 링크들의 배열
      forms 문서에 있는 입력양식의 배열.
      anchors 문서에 있는 표식들이 배열
      vlinkColor 이전에 방문했던 링크를 표시하는색
      alinkColor 링크를 클릭 했을때 나타나는 색
      linkColor 링크를 표시하는 색
      fgColor 문서의 전경색
      bgColor 문서의 배경색
      referer 링크로 현재문서에 왔을때 이전문서의 URL위치정보
      lastModified 문서를 마지막으로 수정한 날짜

    • Document 객체의 메소드

      메소드 의미
      open() 문서에 데이터를 출력 시키기 위한 준비
      close() 문서에 데이터를 출력 시키는 것을 마무리
      write() 문서에 데이터를 출력
      writeln() 문서에 데이터를 출력한후 줄을 바꾼다
      clear() 브라우저에서 문서지우기
      getSelection() 현재 선택된 문자열을 리턴

    • document 객체의 이벤트 핸들러

      이벤트핸들러 의미
      onFocus 문서가 포커스를 얻었을때
      onBlur 문서가 포커스를 잃었을때
      onClick 문서에서 마우스를 클릭했을때
      onDblClick 문서에서 마우스를 더블클릭 했을때
      onKeyPress 키보드에서 키를 눌렀을때
      onKeyUp 키보드에서 키를 눌렀다 놓았을때
      onKeyDown 문서에서 키를 입력했을 때
      onMouseDown 마우스 버튼을 눌렀을 때
      onMouseUp 마우스 버튼을 눌렀다 놓았을 때

    • cookie

      브라우저 사용중에 html 문서상에서 만들어낸 정보를 클라이언트쪽 컴퓨터에 저장해 놓는곳을 의미한다.
      서버로 정보를 보내는 cgi프로그램을 보조해 주는 기능으로 많이 쓰인다.
      서버로 부터 HTTP 헤더를 통해 전달받는 Set-Cookie와 클라이언트가 서버로보내는 Cookie 라는 구조로 나누어져 있다.

      Set-Cookie 설명
      name=value cookie 이름으로 반드시 지정 되어야 하고 이름에 세미콜론(;)쉼표(,)빈칸이 들어가면 안된다.
      expires=Date cookie가 종료되는 날짜를 지정한다.날짜 지정이 없으면 현재 브라우저 세션 동안에만 유효하게 된다.
      날짜형식:일-월-년 시-분-초
      path=PATH cookie가 사용될 URL주소의 디렉토리 부분의 경로를 설정한다.
      지정을 하지 않으면 cookie를 설정한 문서위치가 적용된다.
      domain = DOMAIN cookie가 사용될 URL주소의 도메인 부분의 경로를 지정한다.
      지정을 하지 않으면 cookie를 설정한 문서위치의 도메인이 적용된다.
      secure 데이터 전송에 보안이 요구되는지를 지정한다.
      필요하다면 secure라는 키워드를 사용하면 된다.
      Cookie 설명
      name=value1; name=value2 각 cookie 정보 사이에는 세미콜론(;) 기호를 사용하고 마지막 부분에는 기호를 붙이면 안된다.

      예제1 실행화면
      <a href="http://mirage728.com.ne.kr/index.html">홈</a>
      <a href="http://daum.net">다움</a>
      <script language="javascript">
      <!--
      document.write("링크수 : " + window.document.links.length + "<br>")
      for(i=0 ; i document.write(i + " : " + window.document.links[i] + "<br>")
      }
      //-->
      </script>

      다움

      링크수 : 2
      0 : http://mirage728.com.ne.kr/index.html
      1 : http://daum.net/

      예제2 실행화면
      <script>
      newday = new Date(document.lastModified)
      year=newday.getYear()
      month=newday.getMonth()+1
      day=newday.getDate()
      document.write("수정일 : " + year + "년" + month + "월" +day + "일")
      </script>
      수정일 : 2008년5월5일

    • open()

      window의 객체의 open() 메소드와는 다르며 지정된 윈도우에 데이터를 보낼 준비를 할때 사용한다.

      open("Mime형식")

      Mime(Multipurpose Internet Mail Extension)은 인터넷을 통해 다양한 형식의 문서나 이미지를 전송하기 위한 규약이다.
      생략하면 text/html이 기본값으로 사용된다.

    • close()

      open()메소드로 열려진 문서를 닫아주는 역활을 한다.

    • clear()

      브라우저에 나타난 문서를 지워주는 기능을 한다.

    • write()

      지정된 문서에 데이터를 출력하는 기능을 한다.

    • writeln()

      지정된 문서에 데이터를 출력하는 것은 write()메소드와 같지만 줄을 바꿔주는 기능도 함께있다.

      예제3 실행화면
      <script language="javascript">
      <!--
      var mirage1 = null
      function mir_open() {
      mirage1 = window.open("","","status=no,width=400,height=300")
      }
      function mir_close() {
      if(mirage1 != null)
      mirage1.close()
      }
      function mir_write() {
      if(mirage1 != null) {
      mirage1.document.open()
      mirage1.document.write("<title>안녕하세요</title>")
      mirage1.document.write("<center>")
      mirage1.document.writeln("<h3>방문을 환영 합니다</h3>")
      mirage1.document.writeln("즐거운 시간 보내세요")
      mirage1.document.write("</center>")
      mirage1.document.close()
      return mirage1.focus()
      }
      }
      function mir_clear() {
      if(mirage1 != null) {
      mirage1.document.open()
      mirage1.document.write("")
      mirage1.document.close()
      return mirage1.focus()
      }
      }
      //-->
      </script>
      <input type ="button" value="open" onclick="mir_open()">
      <input type ="button" value="close" onclick="mir_close()">
      <input type ="button" value="write" onclick="mir_write()">
      <input type ="button" value="clear" onclick="mir_clear()">
      <INPUT onclick="mir_open()" type="button" value="open">

      <INPUT onclick="mir_write()" type="button" value="write">

      <INPUT onclick="mir_clear()" type="button" value="clear">

      <INPUT onclick="mir_close()" type="button" value="close">

      [출처] [10]객체2|작성자 붉은매


반응형
브라우저에 미리 정의되어 내장된 객체들을 말한다.
  1. 계층구조

    계층구조 계층순위
    window ↑상위


    ↓하위

    frames document history locations classes tags
    layers title anchors links forms pathname protocol port hostname
    elements action method

    예외)navigator(브라우저 정보)

  2. Window 객체

    브라우저 내장객체 중에 최상위에 있는 객체로 window 하위에 있는 객체를 가리킬때 window객체를
    생략해도 된다.

    • window 객체의 특성

      특성 의미
      toolbar 윈도우의 툴바를 보여줄지의 여부
      status(bar) 윈도우의 상태선을 보여줄지의 여부 ()←생략
      scrollbars 윈도우의 스크롤바를 보여줄지의 여부
      menubar 윈도우의 메뉴를 보여줄지의 여부
      location(bar) 윈도우의 주소창을 보여줄지의 여부 ()←생략
      personalbar 윈도우의 Personalbar를 보여줄지의 여부
      status 상태선에 나타날 문자열
      defaultStatus 상태선에 지정된 문자열이 없을 때 나타날 문자열
      self 자기 자신 객체
      perent 윈도우 객체간에 게층구조가 생길때 상위객체
      top window 객체간에 계층구조가 생길때 최상위 객체
      frames 윈도우 객체안에 들어간 프레임들
      tags html문서에 사용된 모든 택들
      classes html문서에 사용된 모든 스타일시트 클래스들
      opener open() 메소드로 윈도우를 연 문서가 있는 윈도우
      innerWidth 윈도우에서 내용이 나타나는 영역의 너비
      innerHeight 윈도우에서 내용이 나타나는 영역의 높이
      outerWidth 윈도우 바깥테투리 너비
      outerHeight 윈도우 바깥테투리 높이
      pageXOffset 윈도우에서 현재 나타나는 페이지의 x 위치
      pageYOffset 윈도우에서 현재 나타나는 페이지의 Y 위치

    • window 객체의 메소드

      메소드 의미
      open() 윈도우 열기
      close() 윈도우 닫기
      confirm() 사용자로부터 확인을 받기위한 다이얼로그 박스
      prompt() 사용자로부터 문자열을 입력받기 위한 다이얼로그 박스
      alert() 메세지를 전달하기 위한 경고창
      back() 뒤페이지로 이동
      forward() 앞페이지로 이동
      home() 홈페이지로 이동
      find() 윈도우에 포함된 텍스트 검색
      setTimeout() 지정된 시간동안 기다린후 지정된 명령실행
      clearTimeout() setTimeout 해제
      setInterval() 주기적으로 명령실행
      stop() 문서전송 중지
      print() 윈도우에 포함된 내용출력
      moveBy() 윈도우 상대이동
      moveTo() 윈도우 절대이동
      resizeBy() 윈도우의 상대적 크기 바꾸기
      resizeTo() 윈도우의 절대적 크기 바꾸기
      scrollBy() 윈도우의 보여지는 부분을 상대적으로 스크롤
      scrollTo() 윈도우의 보여지는 부분을 절대적으로 스크롤

    • window 객체의 이벤트 핸들러

      이벤트핸들러 의미
      onFocus 브라우저가 포커스를 얻었을때
      onBlur 브라우저가 포커스를 잃었을때
      onError 브라우저가 문서를 읽다가 에러가 발생했을때
      onLoad 브라우저가 문서를 모두 읽은후에 실행할 명령지정
      onUnload 브라우저가 현재문서를 지운후에 실행할 명령지정
      onDragDrop 브라우저에서 객체를 드래그앤드롭 시켰을때
      onResize 윈도우 크기를 바꾸었을때
      onMove 윈도우를 움직였을때

      예제1 실행화면
      <a onclick="window.open('http://mirage728.com.ne.kr/index.html','_blank',
      'toolbar=no,location=yes,menubar=no,status=no,width=350,height=250')"
      onMouseOver="window.status='mirage728홈으로 이동합니다' ; return true" onMouseout="window.status=' ' ; return true">
      마우스 올린후 상태선을 보세요 </a>
      마우스 올린후 상태선을 보세요

    • open() 메소드

      open("문서이름","윈도우이름","윈도우특징")

      문서이름은 만들고자 하는 윈도우에 보여줄 html파일 이름을 지정하면 된다
      윈도우 이름은 만들고자 하는 윈도우의 이름으로 target 지정할때 쓰이게 된다.
      (_top,_self,_parent,_blank,프레임이름,윈도우이름,"")

      윈도우 특징의 종류

      윈도우특징 입력값 설명
      status boolean 상태선
      width 픽셀수 윈도우 바깥너비
      height 픽셀수 윈도우 바깥 높이
      toolbar Boolean 툴바메뉴
      location Boolean 문서위치 정보
      directories Boolean 디렉토리메뉴
      menubar Bollean 메뉴
      scrollbars Boolean 스크롤바
      resizable Boolean 윈도우 크기조절 가능
      copyhistory Boolean 히스토리 정보 복사

      예제2 실행화면
      <script>
      function win1() {
      window.open("","","")
      }
      </script>
      <a href="javascript:onclick=win1()">윈도우열기</a>
      윈도우열기

      예제3 실행화면
      <script>
      function win2() {
      window.open("","","status=no,width=200,height=100")
      }
      </script>
      <a href="javascript:onclick=win2()">윈도우열기</a>
      윈도우열기

      예제4 실행화면
      <script>
      function win3() {
      window.open("aaa.html","win3","status=no,width=200,height=100,directories=yes")
      }
      </script>
      <a href="javascript:onclick=win3()">윈도우열기</a>
      윈도우열기

      예제5 실행화면
      <script>
      function win4() {
      make1 = window.open("aaa.html","win3","status=no,width=200,height=100")
      make1.document.write("mirage728홈 입니다<p>")
      make1.document.write("<input type='button' value='닫기' ")
      make1.document.write("+ onclick='window.close()' >")
      }
      </script>
      <a href="javascript:onclick=win4()">윈도우열기</a>
      윈도우열기

      예제6 실행화면
      <script>
      var make1 = null // make1 변수에는 아직 값이 없다
      function win5() {
      make1 = window.open("aaa.html","win3","status=no,width=200,height=100")
      // 텅빈 make1 변수에 새로 만들어진 윈도우를 집어 넣는다
      // make1은 이제 새로 만들어진 윈도우 자체이다
      make1.document.write("mirage728홈 입니다<p>")
      // make1에 글을 출력한다
      }
      function close5() {
      if(make1 != null) // 윈도우가 만들어져 있다면 = make1에 값이 들어 있다면
      make1.close() // 윈도우(make1)를 닫아라
      }
      </script>
      <a href="javascript:onclick=win5()">윈도우 열기</a><p>
      <!-- 링크를 클릭하면 win5()함수를 호출(실행)하라 -->
      <a href="javascript:onclick=close5()">윈도우 닫기</a><p>
      <!-- 링크를 클릭하면 close5()함수를 호출(실행)하라 -->
      <a style="cursor:hand;" onmouseOver=win5() onmouseOut=close5() >마우스위로</a>

      윈도우 열기

      윈도우 닫기

      마우스위로


    • setTimeout() 메소드

      지정된 시간동안 기다린후 지정된 명령실행

      setTimeout(함수-명령,시간)

      함수-명령은 지정된 시간이 지난후 실행할 함수또는 명령어이다.
      시간은 기다리는 시간이다.단위:1/1000초

      예제7 실행화면
      <script>
      function wtime() {
      var today = new Date()
      var mirage = "현재시각 : " + today.getHours()
      mirage += "시 " + today.getMinutes() + "분 "
      mirage += today.getSeconds() + "초"
      window.status = mirage;
      timecall = setTimeout("wtime()",1000) }

      function stime() {
      clearTimeout(timecall)
      }
      </script>

      <input type=button value="시계실행" onclick="wtime()">
      <input type=button value="시계멈춤" onclick="stime()">
      상태선을 보세요<br>

      <INPUT onfocus="this.blur()" onclick="wtime()" type="button" value="시계실행"> <INPUT onfocus="this.blur()" onclick="stime()" type="button" value="시계멈춤">

      상태선을 보세요

    • clearTimeout() 메소드

      setTimeout() 메소드로 지정한 것을 해제하는 역활을 한다.

      clearTimeout(setTimeout-ID)

      setTimeout-ID는 setTimeout() 실행시 리턴된 값이다(식별자)
      위 예제에서 setTimeout() 메소드로 지정한 실행명령을 clearTimeout() 메소드로 해제시킨 경우이다.

      예제8 실행화면
      <script>
      function load1() {
      location = 'http://mirage728.com.ne.kr/index.html'
      }
      </script>
      <body onLoad="setTimeout('load1()',4000)">
      <center><b>잠시후에 이동합니다.</b></center>
      setTimeout 예제2

    • setInterval() 메소드

      일정한 간격을 두고 명령을 주기적으로 실행 시킬때 사용된다.
      setTimeout은 지정된 명령를 일정한 시간이 지난후에 한번만 실행 시키기 때문에
      시간을 계속 보여주는 경우에는 setInterval() 메소드를 사용하는 것이 효과적이다.

      예제9 실행화면
      <script>
      function rtime() {
      var today = new Date()
      var mirage = "현재시각 : " + today.getHours()
      mirage += "시 " + today.getMinutes() + "분 "
      mirage += today.getSeconds() + "초"
      window.status = mirage;
      }
      function r1time() {
      setInterval("rtime()",1000)
      }
      </script>
      <input type=button value="시계실행" onclick="r1time()">
      <INPUT onfocus="this.blur()" onclick="r1time()" type="button" value="시계실행">

    • find() 메소드

      윈도우에 포함되어 있는 텍스트 중에서 원하는 문자열을 찾고자 할때 사용한다.

      find("검색할문자열",대소문자구분(Boolean),뒤로-앞으로(Boolean))

      검색할 문자열을 지정하지 않으면 찾기 다이얼로그 박스가 나타난다.
      대소문자 : true=대소문자구분,false=구분하지않음(디폴트값)
      뒤로-앞으로: true=뒤로검색 ,false=앞으로검색(디폴트)
      리턴값: true:찾았을때,false:찾지못했을때

    • print() 메소드

      현재 보여지는 내용을 프린트로 출력하는 기능이다.

      예제10 실행화면
      <input type=button value='프린트하기' onClick="window.print()"> <INPUT onfocus="this.blur()" onclick="window.print()" type="button" value="프린트하기">

    • moveBy() 메소드

      윈도우를 상대적인 위치로 이동시킨다.

      moveBy(수평거리,수직거리)

    • moveTo() 메소드

      윈도우를 절대적인 위치로 이동시킨다.

      moveBy(x좌표,y좌표)

      예제11 실행화면
      <script>
      function move1() {
      mirage3 = window.open("","ret","width=300,height=200");
      mirage3.moveTo(50,20);
      return mirage3.focus();
      }
      function move2() {
      mirage3 = window.open("","ret","width=300,height=200");
      mirage3.moveBy(50,20);
      return mirage3.focus();
      }
      </script>
      <input type=button value="moveTo" onclick="move1()">
      <input type=button value="moveBy" onclick="move2()">
      <INPUT onclick="move1()" type="button" value="moveTo"> <INPUT onclick="move2()" type="button" value="moveBy">

      여러번 클릭 해보면 moveBy는
      상대적인 위치 이동을 한다

    • resizeBy() 메소드

      윈도우의 크기를 상대적인 길이만큼 바꾼다.

      resizeBy(가로길이,세로길이)

    • resizeTo() 메소드

      윈도우의 크기를 절대적인 길이만큼 바꾼다.

      resizeTo(가로길이,세로길이)

      예제12 실행화면
      <script>
      function inone() {
      window.resizeBy(10,10);
      }
      function outone() {
      window.resizeBy(-10,-10);
      }
      function inone1() {
      window.resizeBy(10,10);
      }
      function outone1() {
      window.resizeBy(-10,-10);
      }
      </script>
      <input type="button" value="윈도우확대(by)" onclick="inone()">
      <input type="button" value="윈도우축소(by)" onclick="outone()">
      <input type="button" value="윈도우확대(to)" onclick="inone1()">
      <input type="button" value="윈도우축소(to)" onclick="outone1()">
      <INPUT onclick="inone()" type="button" value="윈도우확대(by)"> <INPUT onclick="outone()" type="button" value="윈도우축소(by)">

      <INPUT onclick="inone1()" type="button" value="윈도우확대(to)"> <INPUT onclick="outone1()" type="button" value="윈도우축소(to)">

    • scrollBy() 메소드

      상대적인 크기만큼 윈도우를 스크롤시킨다.

      scrollBy(수평길이,수직길이)

    • scrollTo() 메소드

      절대적인 크기만큼 윈도우를 스크롤시킨다.

      scrollBy(x,y)

      x:가로 좌표값이 x가 되도록 스크롤
      y:세로 좌표값이 y가 되도록 스크롤

      예제13 실행화면
      <input type=button value="scrollBy" onclick='window.scrollBy(0,-400)'>
      <input type=button value="scrollTo" onclick='window.scrollTo(0,300)'>
      <INPUT onclick="window.scrollBy(0,-400)" type="button" value="scrollBy">
      <INPUT onclick="window.scrollTo(0,300)" type="button" value="scrollTo">


반응형
자바스크립트에 미리 정의되어 내장된 객체들을 말한다.
  1. 이벤트와 이벤트 핸들러

    이벤트란 특정한 동작이 발생했다는 신호를 가리키고 이벤트 핸들러란 이벤트가 발생할 때마다 처리하는 함수 혹은 메소드이다

    • 이벤트 종류

      이벤트 의미
      focus 입력양식 필드로 포커스가 들어왔을때
      blur 입력양식 필드에서 포커스가 다른 곳으로 이동했을때
      change 입력양식 필드에 있는 값을 바꾸었을때
      click 입력양식이나 링크를 마우스로 클릭했을때
      dblclick 마우스를 더블클릭 했을때
      mousedown 마우스버튼을 눌렀을때
      mouseup 마우스버튼을 눌렀다 놓았을 때
      mousemove 마우스를 움직였을 때
      mouseout 마우스가 링크나 특정 영역 안에 있다가 나갔을때
      mouseover 링크 위로 마우스가 지나갔을때
      dragdrop 마우스를 클릭한 상태에서 움직였을때
      keydown 키를 입력했을때
      keypress 키를 눌렀을 때
      keyup 키를 눌렀다 놓았을 때
      load 문서가 읽혀졌을 때
      unload 문서가 없어질 때
      abort 이미지를 읽다가 중단시켰을 때
      error 문서나 이미지를 읽다가 에러가 발생했을 때
      select 입력양식의 한필드를 선택했을 때
      submit 입력양식을 서버로 보낼 때
      reset 입력 양식에서 리셋 시켰을 때
      resize 윈도우나 프레임의 크기를 바꾸었을때
      move 윈도우나 프레임을 움직였을 때

    • 이벤트 핸들러 지정

      이벤트핸들러는 html속성으로 지정할수 있다.
      사용하는 방법은 각 이벤트 앞에 on을 붙여 주기만 하면 된다.
      예)onclick,onload,onmousedown...등

      예제1 실행화면
      <script language="javascript">
      <!--
      function mouse1() {
      alert("마우스가 링크로 올라왔습니다")
      }
      //-->
      </script>
      <a onmouseover=mouse1() >마우스를 올려보세요</a>
      마우스를 올려보세요

  2. Event 객체

    • Event 객체의 특성

      특성 의미
      type 이벤트종류
      which 마우스버튼의 종류,입력키의 아스키값
      modifiers 마우스와 키 이벤트 발생시 함께눌러진 Modifier키 (alt,shift,ctrl,*,?..)
      data dragdrop 이벤트로 선택된 객체의 URL주소
      target 이벤트가 전달될 객체
      layerX 이벤트가 발생한 위치의 X 좌표(레이어기준)
      layerY 이벤트가 발생한 위치의 Y 좌표(레이어기준)
      pageX 이벤트가 발생한 위치의 X 좌표(페이지 기준)
      pageY 이벤트가 발생한 위치의 Y 좌표(페이지 기준)
      screenX 이벤트가 발생한 위치의 X 좌표(화면 기준)
      screenY 이벤트가 발생한 위치의 Y 좌표(화면 기준)

  3. 이벤트 잡아내기

    이벤트가 대상 객체에 전달 되기전에 먼저 이벤트를 잡아내어 처리할수가 있다.

    • Event를 잡아내기 위한 메소드

      메소드 의미
      captureEvents 웹 페이지에서 잡아낼 이벤트 지정
      releaseEvents captureEvents로 지정된 이벤트를 해제
      routeEvent 잡아낸 이벤트를 처리할 이벤트 핸들러가 있는 경우 전달한다
      handleEvent 이벤트를 특정 객체의 이벤트 핸들러로 전달

[출처] [8]객체4|작성자 붉은매


반응형
자바스크립트에 미리 정의되어 내장된 객체들을 말한다.
  1. Arguments 객체

    함수가 호출될때 함수내에서 매개변수에 대한 정보를 알아 내는데 사용한다.

    • Arguments 객체의특성

      특성 의미
      caller 이 함수를 호출하는 함수의 매개변수 정보
      callee 이 함수가 호출하는 함수의 매개변수 정보.

  2. Screen 객체

    컴퓨터의 화면 해상도나 색상에 관한 정보를 알아 내는데 사용한다.

    • Screen 객체의특성

      특성 의미
      availWidth 윈도우 인터페이스를 제외한 화면의 너비
      availHeight 윈도우 인터페이스를 제외한 화면의 높이
      width 화면의 너비(픽셀)
      height 화면의 높이(픽셀)
      colorDepth 사용 가능한 색상수
      pixelDepth 한 픽셀당 비트수

      예제1 실행화면
      <script language="javascript">
      <!--
      document.write("방문자 해상도 정보<p>");
      document.write("화면너비 : " + screen.width + "<br>");
      document.write("화면높이 : " + screen.height + "<br>");
      document.write("인터페이스 제외 화면너비 : " + screen.availWidth + "<br>");
      document.write("인터페이스 제외 화면높이 : " + screen.availHeight + "<br>");
      document.write("화면 색상수 : " + screen.colorDepth + "비트<br>");
      //-->
      </script>
      방문자 해상도 정보

      화면너비 : 1280
      화면높이 : 800
      인터페이스 제외 화면너비 : 1280
      인터페이스 제외 화면높이 : 766
      화면 색상수 : 32비트

  3. Number 객체

    문자로된 숫자단어를 실제숫자로 바꾸어주는 객체이다.

    예제2 실행화면
    <script language="javascript">
    <!--
    document.write("일 : " + Number("1") + "<br>");
    document.write("이 : " + Number("2") + "<br>");
    document.write("삼 : " + Number("3") + "<br>");
    document.write("사 : " + Number("사") + "<br>");
    //-->
    </script>
    일 : 1
    이 : 2
    삼 : 3
    사 : NaN

    [출처] [7]객체3|작성자 붉은매


반응형
자바스크립트에 미리 정의되어 내장된 객체들을 말한다.
  1. Math 객체

    자바스크립트에서 삼각함수,지수함수,로그함수와 같은 특수함수들과 파이,오일러상수와 같은 특수값을
    사용하기 위해 제공되는 객체이다.
    Math는 정적객체이기 때문에 new를 통해 객체를 만드는게 아니라 그자체를 직접 객체로 사용을 한다.

    • Math 객체의특성

      특성 의미
      E 오일러 상수,자연로그의 밑으로 사용
      PI 원주율,파이(π)
      LN10 10의 자연로그
      LN2 2의 자연로그
      SQRT1_2 1/2의 제곱근
      SQRT2 2의 제곱근

    • Math 객체의 메소드

      메소드 의미
      sin(x) sine 함수, f(x) = sin(x)
      cos(x) cosin 함수, f(x) = cos(x)
      tan(x) tangent 함수,f(x) = tan(x)
      asin(x) arc sine 함수(sine의 역함수)
      acos(x) arc cosine 함수(cosine의 역함수)
      atan(x) arc tangent 함수(tangent의 역함수)
      atan2(x,y) arc tangent 함수(tangent의 역함수)
      abs(x) 절대값 함수,f(x) =|x|
      exp(x) 지수함수, f(x) = ex
      pow(x,y) 지수함수, f(x,y) = xy
      log(x) 로그함수, f(x) = logex
      sqrt(x) 제곱근 함수, f(x) = √x
      random() 난수함수
      round(x) 반올림 함수
      floor(x) x보다 같거나 작은 가장 큰 정수
      ceil(x) x보다 같거나 큰 가장 작은 정수
      max(x,y) x와 y중 큰 수 리턴
      min(x,y) x와 y 중 작은 수 리턴

      예제1 실행화면
      <script language="javascript">
      <!--
      document.write("asin(0) : " + Math.asin(0) + "<br>")
      document.write("acos(0) : " + Math.acos(0) + "<br>")
      document.write("atan(0) : " + Math.atan(0) + "<br>")
      document.write("8의9승 : " + Math.pow(8,9) + "<br>")
      document.write("7의 로그 : " + Math.log(7) + "<br>")
      document.write("2의 제곱근 : " + Math.sqrt(2) + "<br>")
      document.write("floor(3.6) : " + Math.floor(3.6) + "<br>")
      document.write("ceil(3.6) : " + Math.ceil(3.6) + "<br>")
      document.write("random() : " + Math.random() + "<br>")
      document.write("round() : " + Math.round(6.6) + "<br>")
      document.write("Math.E : " + Math.E + "<br>")
      document.write("Math.LN2 : " + Math.LN2 + "<br>")
      //끝 -->
      </script>
      asin(0) : 0
      acos(0) : 1.5707963267948965
      atan(0) : 0
      8의9승 : 134217728
      7의 로그 : 1.9459101490553132
      2의 제곱근 : 1.4142135623730951
      floor(3.6) : 3
      ceil(3.6) : 4
      random() : 0.7079159365374614
      round() : 7
      Math.E : 2.718281828459045
      Math.LN2 : 0.6931471805599453

  2. Array 객체

    배열을 만드는데 사용하는 객체이다.
    5장에서 요일 구하는 것을 Array 객체로 만들어 본다.

    예제2 실행화면
    <script language="javascript">
    <!--
    objects = ["일","월","화","수","목","금","토"]
    mirage = new Date()
    a=mirage.getDay()
    b=objects[a]
    document.write("날짜 : ",b,"요일","<br>")
    //끝 -->
    </script>
    날짜 : 월요일

    아주 간결해진 것을 볼 수 있다.

    Array객체를 만드는 방법은 4가지를 들수 있다
    ① mirage = new Array(5) (크기를 지정한 경우)
    ② mirage = new Array() (크기를 지정안한 경우)
    ③ mirage = new Array("값1","값2",...,"값n") (배열선언과 동시에 값을 할당한경우)
    ④ mirage = ["값1","값2",...,"값n"] (바로 배열을 정의한 경우)

    • Array 객체의특성

      특성 의미
      length 배열의크기
      prototype Array 객체로 할당된 변수들이 공유 할 수 있는 특성을 만드는데 사용한다.

      prototype은 객체에 새로운 특성을 만들고 싶을때 사용한다.

      예제3 실행화면
      <script language="javascript">
      <!--
      mirage = new Array(3)
      mirage[0] = "welcome"
      mirage[1] = "to"
      mirage[2] = "homepage"
      Array.prototype.ment = null
      mirage.ment = "인사말"
      document.write(mirage.ment + "<br>")
      for(i=0; i < mirage.length ; i++)
      document.write("mirage[" + i + "] = " + mirage[i] + "<br>")
      //끝 -->
      </script>
      인사말
      mirage[0] = welcome
      mirage[1] = to
      mirage[2] = homepage

    • Array 객체의 메소드

      메소드 의미
      join(분리문자) 배열을 하나의 문자열로 만든다.
      sort(function) 배열의 값들을 정렬시킨다.
      reverse() 배열에 있는 값들의 순서를 정반대로 바꾼다.
      concat(array) 두개의 배열을 하나로 만든다.
      slice(시작,끝)) 배열의 일부를 추출

      • join
        매개변수가 없을때는 분리문자로 , 가 들어간다.
        mirage = new Array(3)
        mirage[0] = "welcome"
        mirage[1] = "to"
        mirage[2] = "homepage"

        mirage.join() ==>welcome,to,homepage
        mirage.join("/")==>welcome/to/homepage
        mirage.join(":")==>welcome:to:homepage

      • sort
        매개변수로 값을 비교하는데 사용되는 함수가 들어간다.
        매개변수 지정이 없으면 사전에 배열된 순서에 따라 배열이 이루어진다.

      • concat
        두개의 배열을 합하여 하나로 만들어준다.

        mirage1 = new Array ("a1","a2")
        mirage2 = new Array ("a3","a4")
        mirage3 = mirage1.concat(mirage2)

  3. Function객체
    함수를 정의하기 위한 기능이다.

    • Function객체의 특성

      특성 의미
      arguments 함수의 매개변수 정보를 배열로 나타낸다.
      prototype function 객체로 할당된 변수들이 공유 할 수 있는 특성을 만드는데 사용한다.
      arity 매개변수의 개수를 알아내는데 사용한다.(함수 외부에서 사용)
      (함수내부에서는 argument.length로 사용) 

반응형
자바스크립트에 미리 정의되어 내장된 객체들을 말한다.
  1. Date 객체

    자바스크립트에서 날짜와 시간을 나타 내는데 사용되는 객체이다.

    mirage = new date()

    이로써 새로운 mirage 객체가 만들어 졌다.
    mirage객체는 date객체의 사본이라 생각하면 이해하기 빠를 것이다.

    • Date객체 메소드1

      메소드 설명
      getYear() 1970년 이후의 연도
      getMonth() 을 나타낸다(0=1월,1=2월...11=12월)
      getDate()
      getDay() 요일(0=일요일,...,6=토요일)
      getHours()
      getMinutes()
      getSeconds()
      getTime() 1970년 1월 1일 이후 시간을 1000분의 1초로 나타낸값

    • Date객체 메소드2

      메소드 설명
      setYear() 1970년 이후의 연도
      setMonth() 을 나타낸다(0=1월,1=2월...11=12월)
      setDate()
      setDay() 요일(0=일요일,...,6=토요일)
      setHours()
      setMinutes()
      setSeconds()
      setTime() 1970년 1월 1일 이후 시간을 1000분의 1초로 나타낸값

    • Date객체 메소드3

      메소드 설명
      parse(날짜문자열) 날짜 문자열을 분석하여 1970년 1월1일 00:00:00 이후에 경과한 시간을 1000분의 1초로 단위로 리턴
      UTC(년,월,일[,시][,분][,초]) GTM을 기준으로 1970년 1월1일 00:00:00 이후에 경과한 시간을 1000분의 1초로 단위로 리턴
      toGTMString() GTM(Greenwich Mean Time) 날짜를 리턴
      toLocaleSting() 날짜를 문자열로 변환한다.mm/dd/yy(월/일/년) hh:mm:ss(시/분/초)

      get 은 날짜시간을 구하는 메소드이고 set은 날짜시간을 세팅(설정)하는 메소드이다.

      예제1 실행화면
      <script language="javascript">
      <!--
      mirage = new Date()
      document.write("날짜 : ",mirage.getYear(),"년")
      document.write(mirage.getMonth()+1,"월")
      document.write(mirage.getDate(), "일","<br>")
      document.write("시간 : ",mirage.getHours(),"시")
      document.write(mirage.getMinutes(),"분")
      document.write(mirage.getSeconds(), "초","<br>")
      //끝 -->
      </script>
      날짜 : 2008년5월5일
      날짜 : 1요일
      시간 : 13시9분27초

      날짜시간을 나타내는 첫글자는 모두 대문자로 표기해야 한다.
      getMonth()+1은 값이 0부터 11까지 나오므로 +1을 해서 1부터 12까지의 월표기로 나타낸것이다.
      ,는 스트링문자와 메소드간의 연결 역활을 한다.(+도 연결 역할을 하는 점은 같다)

      getDay()는 숫자로만 나타난다. 이것은 원하는 결과 값이 아닐 것이다.
      그래서 지금까지 언급됐던 제어문을 총동원해서 바꿔보자.

      예제2 실행화면
      <script language="javascript">
      <!--
      mirage = new Date()
      a=mirage.getDay()
      if(a == 0){
      a="일"}
      else if(a == 1){
      a="월"}
      else if(a == 2){
      a="화"}
      else if(a == 3){
      a="수"}
      else if(a == 4){
      a="목"}
      else if(a == 5){
      a="금"}
      else if(a == 6){
      a="토"}
      document.write("날짜 : ",a,"요일","<br>")
      //끝 -->
      </script>
      날짜 : 월요일

      switch문 으로도 가능 할 것 같은데...?
      예제3 실행화면
      <script language="javascript">
      <!--
      mirage = new Date()
      a=mirage.getDay()
      switch(a) {
      case 0 :
      a="일"
      break;
      case 1 :
      a="월"
      break;
      case 2 :
      a="화"
      break;
      case 3 :
      a="수"
      break;
      case 4 :
      a="목"
      break;
      case 5 :
      a="금"
      break;
      case 6 :
      a="토"
      break;
      }
      document.write("날짜 : ",a,"요일","<br>")
      //끝 -->
      </script>
      날짜 : 월요일

      배열로도 가능할까?
      예제4 실행화면
      <script language="javascript">
      <!--
      function makeArray(n) {
      this.length = n;
      for(var i=1; i<=n;i++)
      this[i] =0 ;
      return this;
      }
      array = new makeArray(7);
      array[0] ="일"; array[1] ="월";
      array[2] ="화"; array[3] ="수";
      array[4] ="목"; array[5] ="금";
      array[6] ="토"
      mirage = new Date()
      a=mirage.getDay()
      b=array[a]
      document.write("날짜 : ",b,"요일","<br>")
      //끝 -->
      </script>
      날짜 : 월요일

      달리 표현이 가능 하지만 Array 객체에서 예를 들어 보겠다.

  2. String 객체
    문자열들을 말한다.
    String객체를 만드는 방법은 " " 기호로 문자열을 만들기만 하면 된다.
    String객체도 특성과 메소드를 가지고 있는데 String객체 뒤에 . 연산자와 함께 붙이면 된다.

    예) num = mirage.length (문자열 갯수)

    • String객체 특성

      length : String객체의 유일한 특성으로 문자의 갯수를 저장하고 있다.

      예제5 실행화면
      <script language="javascript">
      <!--
      mirage = "홈방문을 환영합니다"
      mirage2 = "Wellcome to home"
      document.write("홈방문을 환영합니다<br>")
      document.write("문자열갯수 : "+ mirage.length + "<p>")
      document.write("Wellcome to home<br>")
      document.write("문자열갯수 : "+ mirage2.length + "<br>")
      //끝 -->
      </script>
      홈방문을 환영합니다
      문자열갯수 : 10

      Wellcome to home
      문자열갯수 : 16


      참고로 공백문자도 갯수에 포함된다.
      한글(2바이트)을 하나의 문자로 인식해서 표기 한것이 특징이다.

    • String객체 메소드1 (문자열속성)

      메소드 기능 보기
      big() 글자를 크게함 테스트
      small() 글자를 작게함 테스트
      bold() 글자를 진하게 테스트
      fontsize(크기) 글자의 크기 테스트(4로지정)
      fontcolor("색") 글자색 테스트
      sup() 위첨자 테스트테스트
      sub() 아래첨자 테스트테스트
      blink() 깜박임 테스트(익스지원안됨)
      fixed() 타자기체 테스트
      italics() 이탤릭체 테스트
      strike() 글자가운데 줄긋기 테스트

      중첩해서 사용 가능하다
      예) "테스트".bold().fontcolor("red")

    • String객체 메소드2 (하이퍼텍스트)

      메소드 기능 보기
      link("위치") 하이퍼텍스트 연결 <script>
      document.write("테스트".link("http://mirage728.com.ne.kr/index.html"))
      </script>

      테스트

      anchor("표식") 표식지정 <script>
      document.write("테스트".anchor("테스트로"))
      </script>

    • String객체 메소드3 (문자열처리)

      메소드 기능
      split(분리자,개수) 문자열 분리
      concat(문자열) 두 문자열을 하나로 붙이기
      subString(숫자1,숫자2) 지정된 위치에 있는 문자열추출
      slice(처음위치,마지막위치) 문자열 일부 추출하기
      substr(처음위치,길이) 문자열 일부 추출하기
      charAt(위치) 지정된 위치에서 문자찾기
      indexOf(문자열) 지정된 문자의 위치찾기(왼쪽 부터 검색)
      lastIndexOf(문자열) 지정된 문자의 위치찾기(오른쪽 부터 검색)
      charCodeAt(문자위치) 문자열의 ISO Latin-1 값 알아내기
      fromcharCode(숫자1,숫자2,...숫자n) ISO Latin-1 값에 해당하는 문자 알아내기
      toUpperCase() 대문자로 만들기
      toLowerCase() 소문자로 만들기

      • split(분리자,갯수)
        분리자를 기준으로 개수로 지정된 숫자만큼 분리하게 된다.
        예제6 실행화면
        <script language="javascript">
        <!--
        mirage1 = "mirage728 홈에 방문해 주셔서 진심으로 감사합니다."
        mirage2 = mirage1.split(' ',4)
        document.write(mirage2)
        // 끝 -->
        </script>
        mirage728,홈에,방문해,주셔서

        공백을 기준으로 해서 4개의 문자열을 분리한 것이다.

      • concat(문자열)
        두개의 문자열을 합해서 하나의 새로운 문자열을 만든다.
        메소드를 호출하는 문자열과 매개변수로 들어가는 문자열을 합쳐준다.

        예제7 실행화면
        <script language="javascript">
        <!--
        mirage1 = "mirage728 홈".concat(" 방문을 환영합니다.")
        document.write(mirage1)
        // 끝 -->
        </script>
        mirage728 홈 방문을 환영합니다.

      • substring(숫자1,숫자2)
        지정된 위치에 있는 문자열을 추출하는 것으로 매개변수로 두개의 숫자가 들어가는데 숫자
        사이의 문자열을 추출하게 된다.
        예제8 실행화면
        <script language="javascript">
        <!--
        mirage1 = "mirage728 홈 방문을 환영합니다 "
        document.write(mirage1.substring(0,11)+"<br>")
        document.write(mirage1.substring(11,0)+"<br>")
        document.write(mirage1.substring(11)+"<br>")
        document.write(mirage1.substring()+"<br>")
        // 끝 -->
        </script>
        mirage728 홈
        mirage728 홈
        방문을 환영합니다
        mirage728 홈 방문을 환영합니다

        두개의 매개변수의 위치가 바뀌어도 상관없고 매개변수가 하나라면 매개변수 이후의 값부터
        끝까지 출력된다.

      • slice(처음위치,마지막위치)
        substring 과 같이 지정된 위치에 있는 문자열을 추출하는 것으로 매개변수로 두개의
        숫자가 들어가는데 숫자 사이의 문자열을 추출하게 된다.
        매개변수의 값이 음수일 경우에는 뒤에서 부터 위치를 가리키게 된다.

        예제9 실행화면
        <script language="javascript">
        <!--
        mirage3 = "mirage728 홈 방문을 환영합니다"
        document.write(mirage3+"<p>")
        document.write(mirage3.slice(6,11)+"<br>")
        document.write(mirage3.slice(6,-3)+"<br>")
        document.write(mirage3.slice(-3)+"<br>")
        document.write(mirage3.slice(6)+"<br>")
        // 끝 -->
        </script>
        mirage728 홈 방문을 환영합니다

        728 홈
        728 홈 방문을 환영
        합니다
        728 홈 방문을 환영합니다

      • substr(처음위치,길이)
        지정된 위치에 있는 문자열을 추출하는 것으로 첫번째 매개변수는 시작위치 이고
        두번째 매개변수 추출할 문자열의 길이를 나타낸다.

        예제10 실행화면
        <script language="javascript">
        <!--
        mirage4 = "mirage728 홈 방문을 환영합니다"
        document.write(mirage4+"<p>")
        document.write(mirage4.substr(6,11)+"<br>")
        document.write(mirage4.substr(6,3)+"<br>")
        document.write(mirage4.substr(-1)+"<br>")
        document.write(mirage4.substr(6)+"<br>")
        // 끝 -->
        </script>
        mirage728 홈 방문을 환영합니다

        728 홈 방문을 환
        728
        mirage728 홈 방문을 환영합니다
        728 홈 방문을 환영합니다

        length(길이)가 음수가 될 수 없는 관계로 모든 문자가 출력됐다.
        매개변수 지정을 안해도 모든 문자가 출력된다.

      • charAt(위치)
        매개변수로 입력된 숫자가 가리키는 문자를 리턴하게 된다
        예제11 실행화면
        <script language="javascript">
        <!--
        mirage5 = "mirage728 홈"
        document.write(mirage5+"<p>")
        document.write(mirage5.charAt(4)+"<br>")
        document.write(mirage5.charAt(0)+"<br>")
        // 끝 -->
        </script>
        mirage728 홈

        g
        m

      • indexOf(문자열)
        검색 하고자 하는 문자가 처음 나오는 곳의 위치를 알려준다.
        문자열의 왼쪽부터 검색을 시작한다

        예제12 실행화면
        <script language="javascript">
        <!--
        mirage6 = "홈 방문을 진심으로 환영합니다,자주 mirage홈을 방문해 주세요"
        document.write(mirage6+"<p>")
        document.write(mirage6.indexOf("방문")+"<br>")
        document.write(mirage6.indexOf("홈")+"<br>")
        // 끝 -->
        </script>
        홈 방문을 진심으로 환영합니다,자주 mirage홈을 방문해 주세요

        2
        0

      • lastIndexOf(문자열)
        검색 하고자 하는 문자가 처음 나오는 곳의 위치를 알려준다.
        문자열의 오른쪽부터 검색을 시작한다

        예제13 실행화면
        <script language="javascript">
        <!--
        mirage7 = "홈 방문을 진심으로 환영합니다,자주 mirage홈을 방문해 주세요"
        document.write(mirage7+"<p>")
        document.write(mirage7.lastIndexOf("방문")+"<br>")
        document.write(mirage7.lastIndexOf("홈")+"<br>")
        // 끝 -->
        </script>
        홈 방문을 진심으로 환영합니다,자주 mirage홈을 방문해 주세요

        29
        26

      • charCodeAt(문자위치)
        문자열의 특정 위치에 있는 문자의 ISO-Latin-1 값을 알아내는데 사용되는 메소드이다.
        문자위치는 알고자 하는 문자의 위치를 나타내고 생략하면 0으로 첫번째 문자의
        위치를 나타낸다.

        예제14 실행화면
        <script language="javascript">
        <!--
        document.write("M의 Iso-Latin-1 값 : "+"M".charCodeAt(0)+"<br>")
        // 끝 -->
        </script>
        M의 Iso-Latin-1 값 : 77

      • fromcharCode(숫자1,숫자2,...숫자n)
        ISO-Latin-1 값을 통해 문자열을 알아내는 메소드이다.

        예제15 실행화면
        <script language="javascript">
        <!--
        document.write(String.fromCharCode(77,105,114,97,103,101,55,50,56))
        // 끝 -->
        </script>
        Mirage728


반응형

객체란?

객체란 실생활에서 흔히 볼수 있는 개,고양이,자동차,자전거..등등이 모두 객체라 할수 있는데
프로그래밍 세계에선 문법에 의해 형식이 짜여진 컴퓨터에 사용되는 요소들이 객체가 될수가 있다.
객체는 특성(Property)와 메소드(Method)로 나누어진다.

  • 객체정의하기
    자바스크립트에서 객체는 생성자 함수를 이용해서 만들수가 있다.
    생성자 함수는 객체의 특성과 메소드를 정의하기 위해 사용되는 함수이다
    생성자 함수 역시 일반함수나 변수 만드는 방법과 동일하다.

    컴퓨터라는 객체를 만들어보자
    컴퓨터의 특성중에는 CPU(중앙처리장치) ,RAM(메모리) , HDD(하드디스크) 등을 들수가 있는데
    보기를 이용해 생성자 함수를 만들어보면

    function computer(cpu,ram,hdd) {
    this.cpu=cpu;
    this.ram=ram;
    this.hdd=hdd;
    }

    this는 객체자신을 가리킨다.

  • 객체만들기
    생성자 함수를 이용해서 객체를 만드는 방법은 new 라는 연산자를 통해 가능하다.

    mycom = new computer("pentium4",256,20000)

    mycom에는 cpu(pentium4),ram(256),hdd(20000)이라는 특성을 갖게 된다.
    다르게 표현할수도 있다

    mycom.cpu = "pentium4"
    mycom.ram = 256
    mycom.hdd = 20000

    "." 연산자는 객체에 속한 특성이나 메소드를 구분해 주는 것으로
    왼쪽에는 객체가 오고 오른쪽에는 특성이나 메소드가 온다

    예제1 실행화면
    <script language="javascript">
    <!--
    function computer(cpu,ram,hdd) {
    this.cpu=cpu;
    this.ram=ram;
    this.hdd=hdd;
    }
    //끝 -->
    </script>

    <script language="javascript">
    <!--
    mycom = new computer("pentium4",256,20000);
    document.write("CPU : " + mycom.cpu + "<br>");
    document.write("RAM : " + mycom.ram + "<br>");
    document.write("HDD : " + mycom.hdd + "<br>");
    //끝 -->
    </script>

    CPU : pentium4
    RAM : 256
    HDD : 20000

  • 객체 메소드 정의
    메소드는 객체의 동작을 지정하는 함수이다
    출력하는 함수를 메소드로 지정해 보면

    function mirage10() {
    document.write("CPU : " + this.cpu + "<br>");
    document.write("RAM : " + this.ram + "<br>");
    document.write("HDD : " + this.hdd + "<br>");
    }

    this는 특정 객체를 출력 시키는게 아닌 mirage10 함수를 사용하는 객체의 특성을
    출력 하겠다는 의미이다.
    그렇기 때문에 mirage10 함수를 메소드로 등록해서 사용하려면 생성자 함수에
    mirage10을 넣어주어야 한다.

    function computer(cpu,ram,hdd) {
    this.cpu=cpu;
    this.ram=ram;
    this.hdd=hdd;
    this.mirage10=print;
    }

    새로운 생성자 함수로 예를 들어보자

    예제2 실행화면
    <script language="javascript">
    <!--
    function mirage10() {
    document.write("CPU : " + this.cpu + "<br>");
    document.write("RAM : " + this.ram + "<br>");
    document.write("HDD : " + this.hdd + "<br>");
    }
    //끝 -->
    </script>

    <script language="javascript">
    <!--
    function computer(cpu,ram,hdd) {
    this.cpu=cpu;
    this.ram=ram;
    this.hdd=hdd;
    this.mirage10=mirage10;
    }
    //끝 -->
    </script>

    <script language="javascript">
    <!--
    mycom = new computer("pentium4",256,20000);
    mycom.mirage10();
    //끝 -->
    </script>

    CPU : pentium4
    RAM : 256
    HDD : 20000

    더 복잡한것 같지만 여러개를 출력 한다면 효과가 아주크다

  • 객체 특성 정의
    객체가 다른 객체의 특성으로 사용 될 수가 있다
    사람이라는 객체의 특성으로 컴퓨터 객체를 사용해 보겠다
    사람이라는 객체를 사용하기 위해 생성자함수를 만든다

    function person(name , age , computer)
    this.name=name;
    this.age=age;
    this.computer=computer;
    }

    이제는 person이란 객체를 만들다

    Mr=new person("남자" , 21, mycom);
    Miss=new person("여자" , 20 , mycom);

    보기를 이용해서 에를 들어본다

    예제3 실행화면
    <script language="javascript">
    <!--
    function mirage10() {
    document.write("성별: " + this.name + "<br>");
    document.write("나이: " + this.age + "<br>");
    document.write("CPU : " + this.computer.cpu + "<br>");
    document.write("RAM : " + this.computer.ram + "<br>");
    document.write("HDD : " + this.computer.hdd + "<br>");
    }
    //끝 -->
    </script>

    <script language="javascript">
    <!--
    function computer(cpu,ram,hdd) {
    this.cpu=cpu;
    this.ram=ram;
    this.hdd=hdd;
    }
    //-->
    </script>

    <script language="javascript">
    <!--
    function person(name , age , computer) {
    this.name=name;
    this.age=age;
    this.computer=computer;
    this.mirage10=mirage10;
    }
    //-->
    </script>

    <script language="javascript">
    <!--
    mycom = new computer("pentium4",256,20000);
    Mr=new person("남자" , 21, mycom);
    Miss=new person("여자" , 20 , mycom);
    document.write("<b>철수</b><br>")
    Mr.mirage10();
    document.write("<p><b>영희</b><br>")
    Miss.mirage10();
    //-->
    </script>

    철수
    성별: 남자
    나이: 21
    CPU : pentium4
    RAM : 256
    HDD : 20000

    영희
    성별: 여자
    나이: 20
    CPU : pentium4
    RAM : 256
    HDD : 20000

  • 참조배열 사용
    배열과 유사하지만 다른점은 []안에 숫자대신 문자를 사용한다.
    mycom의 특성값을 참조배열을 통해 접근하는 방법이다.

    mycom.cpu = mycom[0] = mycom["cpu"] = "pentium4"
    mycom.ram = mycom[1] = mycom["ram"] = 256
    mycom.hdd = mycom[2] = mycom["hdd"] = 20000

  • for ~ in 제어문
    for ~ in 제어문은 객체에 들어있는 모든 특성들을 반복해서 보여주는 기능이 있다.
    for다음에는 각각의 특성을 가리키는 변수가 오고 in 다음에는 특성을 알고자 하는 객체가 오게 된다.
    위에 있는 mycom으로 예를 들어보자

    for(var pro_ty in mycom) {
    document.write(mycom[pro_ty]);
    }

    모든특성을 한번씩 보여주는 반복 제어문으로 pro_ty에는 첫번째값인 cpu가 들어가게 된다.
    그리고 스크립트 문장을 실행한후 다시 for ~ in 제어문 처음으로 돌아가고 pro_ty는 두번째값인
    ram이 들어간다.
    for ~ in 제어문은 객체 의 특성을 모두 읽을때 까지 반복 실행이 된다.

    예제4 실행화면
    <script language="javascript">
    <!--
    function mirage10(object) {
    for(var pro_ty in object) {
    document.write(pro_ty + "=" + object[pro_ty] + "<br>");
    }
    }

    function computer(cpu,ram,hdd) {
    this.cpu=cpu;
    this.ram=ram;
    this.hdd=hdd;
    }
    //-->
    </script>

    <script language="javascript">
    <!--
    mycom = new computer("pentium4",256,20000);
    document.write("computer<p>")
    mirage10(mycom);
    //-->
    </script>

    computer

    cpu=pentium4
    ram=256
    hdd=20000

  • 배열
    makeArray라는 생성자 함수로 배열을 만들수가 있다.

    function makeArray(n) {
    this.length = n;
    for(var i=1; i<=n;i++)
    this[i] =0 (null값이 안나오게 초기화 해준다)
    return this;
    }

    n에는 배열의 갯수를 지정해 준다.
    생성자 함수로 배열을 선언한다

    array = new makeArray(4);
    4개의 변수 array[1],array[2],array[3],array[4] 을 사용 할 수 있게 된다.

    예제5 실행화면
    <script language="javascript">
    <!--
    function makeArray(n) {
    this.length = n;
    for(var i=1; i<=n;i++)
    this[i] =0 ;
    return this;
    }
    //-->
    </script>

    <script language="javascript">
    <!--
    array = new makeArray(4);
    array[1] ="사과"
    array[2] ="배"
    array[3] ="수박"
    array[4] ="참외"
    document.write("배열테스트<p>");
    for(var i=1;i<=4; i++){
    document.write(i+"번" + " : " + array[i] + "<br>")
    }
    //-->
    </script>

    배열테스트

    1번 : 사과
    2번 : 배
    3번 : 수박
    4번 : 참외

+ Recent posts