'전체글'에 해당되는 글 452건

Array

배열 사용을 위한 객체

• concat() : 두 배열을 합쳐서 하나의 배열로 만드는 메서드
  var 배열명3 = 배열명1.concat(배열명2)
• join() : 배열 요소를 연결하여 문자열로 만든다.
  var 배열명2 = 배열명1.join(구분 기호)
• reverse() : 배열 요소의 배치 순서를 역순으로 바꾼다.
  var 배열명2 = 배열명1.reverse()
• slice() : 배열을 나눈다.
  var 배열명2 = 배열명1.slice(시작 위치, 끝 위치)
• sort() : 배열 요소를 특정 기준에 따라 정렬한다.
  
  

Date 

날짜와 시간을 다루는 객체

• getYear() : 1970년 이후의 연도를 알아내는 메서드
• getMonth : 월을 알아내는 메서드. 이 메서드의 반환값은 0부터 11까지이므로 정확한 현재 월을 알려면 getMonth()의 반환값에 1을 더해야 한다.
• getDate() : 날짜를 알아내는 메서드
• getDay : 요일을 알아내는 메서드. 이 메서드의 반환값은 0부터 6까지이며 0은 '일요일', 1은 '월요일' 순으로 해당된다.
• getHours() : 시간을 알아내는 메서드. 반환값은 24시간제로 표시된다.
• getMinutes() : 분을 알아내는 메서드
• getSeconds() : 초를 알아내는 메서드
• getTime() : 1970년 1월 1일 이후의 시간을 1/1000초로 표현한다.
• getMiliseconds() : 1970년 1월 1일 이후의 시간을 1/100초로 표현한다.
• setYear() : 연도를 설정하는 메서드
• setMonth() : 월을 설정하는 메서드. 설정하려고 하는 월의 값보다 1 작게 설정해야 한다.
• setDate() : 날짜를 설정하는 메서드
• setDay() : 요일을 설정하는 메서드
• setHour() : 시간을 설정하는 메서드
• setMinutes() : 분을 설정하는 메서드
• setSeconds() : 초를 설정하는 메서드
• setTime() : 1970년 1월 1일 이후의 시간을 1/1000초로 설정하는 메서드
• setMiliseconds() : 1970년 1월 1일 이후의 시간을 1/100초로 설정하는 메서드
• toGMTString() : 요일 일 월 연도 시간:분:초 UTC 형식으로 표시한다.
• toLocaleString() : 월/일/년도 시간:분:초 형식으로 표시한다.
• toString : 요일 월 날짜 시간:분:초 UTC+대한민국 표준시 형식으로 표시한다.
  
  

Function

함수를 객체처럼 사용할 수 있게 한다.
 객체명 = new Function(매개변수1, 매개변수2, ..., 계산식)

Math

수학적인 함수와 특수 함수를 제공하는 객체
 Math.프로퍼티
 Math.메서드()

• 프로퍼티
• E : 자연로그 밑의 오일러 상수
• PI : 원주율, 파이
• SQRT2 : 2의 제곱근, 루트2
• SQRT1_2 : 1/2의 제곱근
• LN2 : 2의 자연로그, 로그2
• LN10 : 10의 자연로그, 로그10
• LOG2E : 밑이 2인 e의 로그
• LOG10E : 밑이 10인 e의 로그
• 메서드
• abs() : 매개변수에 대한 절대값을 반환한다.
• acos() : 아크 코사인값을 반환한다.
• asin() : 아크 사인값을 반환한다.
• atan() : 아크 탄젠트값을 반환한다.
• atan2() : 아크 탄젠트값을 반환한다.
• ceil() : 매개변수의 소수점 이하 부분을 올린다.
• cos() : 코사인값을 반환한다.
• exp() : 지수 함수 형식으로 표시한다.
• floor() : 매개변수의 소수점 이하 부분을 버린다.
• log() : 매개변수에 대한 로그값을 반환한다.
• max() : 매개변수 중 최대값을 반환한다.
• min() : 매개변수 중 최소값을 반환한다.
• pow() : 매개변수의 지수값을 반환한다.
• random() : 0과 1사이의 무작위 수를 만든다.
• round() : 매개변수의 소수점 이하 부분을 반올림한다.
• sin() : 사인값을 반환한다.
• sqrt() : 매개변수에 대한 제곱근을 반환한다.
• tan() : 탄젠트값을 반환한다.

Number

문자를 숫자로 바꾸는 객체
 Number("숫자")

• 프로퍼티
• MAX_VALUE : 자바스크립트에서 표현할 수 있는 최대값
• MIN_VALUE : 자바스크립트에서 표현할 수 있는 최소값
• NaN : 수가 아니다.
• NEGATIVE_INFINITY : 음의 무한대
• POSITIVE_INFINITY : 양의 무한대

Screen

현재 사용하는 화면에 대한 정보를 다루는 객체

• 프로퍼티
• avaiHeight : 운영체제 인터페이스가 차지하는 영역을 제외하고 실제 내용이 나타나는 영역의 높이로, 픽셀 단위이다. 응용프로그램 윈도우 크기
• avaiWidth : 인터페이스 영역을 제외하고 실제 내용이 나타나는 영역의 너비로, 픽셀 단위이다.
• colorDepth : 색상 수
• height : 화면의 높이, 즉 모니터의 세로 해상도를 가리키며 픽셀 단위이다.
• width : 화면의 너비, 즉 모니터의 가로 해상도를 가리키며 픽셀 단위이다.

String

문자열을 처리하는 객체

 length : 문자열의 길이를 구한다.

• 글꼴 관련 메서드
• big() : 글자의 크기를 크게 한다. <big> 태그를 적용한 것과 같다.
• blink() : 글자를 깜빡거리게 한다. <blink> 태그를 적용한 것과 같다.
• bold() : 글자를 진하게 만든다. <b> 태그를 적용한 것과 같다.
• fixed() : 글자를 고정 너비 글꼴로 바꾼다.
• fontcolor() : 글자의 색상을 바꾼다.
• fontsize() : 글자의 크기를 바꾼다.
• italic() : 글자를 이탤릭체로 바꾼다. <i> 태그를 적용한 것과 같다.
• small() : 글자의 크기를 한 단계 작게 한다. <small> 태그를 적용한 것과 같다.
• strike() : 글자 위를 가로지르는 스트라이크 선을 넣는다. <strike> 태그를 적용한 것과 같다.
• sub() : 글자에 아래첨자를 표시한다. <sub> 태그를 적용한 것과 같다.
• sup() : 글자에 위첨자를 표시한다. <sup> 태그를 적용한 것과 같다.
• 링크 관련 메서드
• anchor() : 특정 문자열에 앵커(책갈피)를 지정한다. 앵커는 한 문서 안에서 특정 위치로 이동할 수 있게 해주는 책갈피이다.
  변수.anchor(앵커명)
• link() : 문자열에 직접 하이퍼링크를 만든다.
  변수.link(링크 주소), 변수.link(#앵커명)
• 문자열 위치 관련 메서드
• charAt() : 지정한 위치의 문자가 무엇인지 알아낸다.
  문자열.charAt(인덱스)
  var string1 = "사랑이 그대를 부르거든 그를 따르라."
  document.write(string1.charAt(4))
• charCodeAt() : 지정한 위치의 문자를 유니코드로 변환한다.
  문자열.charCodeAt(인덱스)
• fromcharCode() : 유니코드를 문자로 변환한다.
  String.formCharCode(유니코드)
• indexOf() : 지정한 문자열의 첫 번째 인덱스 위치를 알아낸다.
  문자열.indexOf(찾을 문자열, [시작 인덱스])
• lastIndexOf() : 지정한 문자열의 마지막 인덱스 위치를 알아낸다.
  문자열.lastIndexOf(찾을 문자열)
• 문자열 추출 관련 메서드
• slice() : 매개변수에 맞게 문자열을 추출한다.
  문자열.slice(시작 인덱스, 끝 인덱스)
• substring() : 매개변수에 맞게 문자열을 추출한다.
  문자열.substring(시작 인덱스, 끝 인덱스)
• substr() : 지정한 길이만큼 문자열을 추출한다.
  문자열.substr(시작 인덱스, 길이)

radio

폼의 라디오 버튼에 대한 정보를 가지고 있으며 <input type="radio"> 태그를 만날 때마다 만들어진다.

• HTML 구문

  <input
          type="radio"
          name="라디오 버튼 그룹 이름"
          value="값"
          checked
          onClick="처리할 명령이나 함수"
  >

• 기본 형식

  (window.)document.폼 이름.그룹 이름[인덱스3]
  (window.)document.폼 이름.elements[인덱스2][인덱스3]
  (window.)document.forms[인덱스1].그룹 이름[인덱스3]
  (window.)document.forms[인덱스].elements[인덱스2][인덱스3]

• 프로퍼티

• checked
  체크박스의 체크 상태를 지정한다.
• defaultChecked
  초기의 체크 상태를 지정한다.
• name
  체크 박스의 이름으로, <input> 태그의 name 속성과 같다.
• value
  체크 박스에 할당된 값으로, <input> 태그의 value 속성과 같다.

• 메서드

  라디오 버튼을 선택하거나 선택을 해제할 때 버튼을 클릭하는 동작뿐이므로 radio 객체에서 사용할 수 있는 메서드는 click()뿐이다.

• 이벤트 핸들러

  checkbox 객체와 마찬가지로 radio 객체의 이벤트 핸들러 역시 onClick()뿐이다. 사용자가 라디오 버튼을 체크하면 click 이벤트가 발생하고 지정한 함수나 명령이 실행된다.

fileUpload

fileUpload 객체의 파일 요소를 사용하면 사용자가 시스템에 있는 파일을 서버로 올릴 수 있다. 여기에서 파일 업로드명은 파일의 이름이 아니라 사용자가 파일을 업로드할 수 있게 하는 파일 업로드 요소 자체의 이름이다.
폼의 <찾아보기> 버튼에 대한 정보를 가지고 있으며 <input type="file"> 태그를 만날 때마다 만들어진다.

• HTML 구문

  <input
          type="file"
          name="파일 업로드이름"
  >

• 기본 형식

  (window.)document.폼 이름.fileUploadName
  (window.)document.폼 이름.elements[인덱스]
  (window.)document.forms[인덱스].파일 업로드 이름
  (window.)document.forms[인덱스].elements[인덱스]

• 프로퍼티

• name
  HTML 구문에서의 name 속성을 반영하는데 언제든지 그 값을 새로 고쳐서 사용할 수 있다.
• value
  읽기 전용 프로퍼티로 파일 업로드 요소의 현재값을 반영한다.
• 메서드
  이 객체는 메서드를 지원하지 않는다.
• 이벤트 핸들러
  다른 폼 요소와 마찬가지로 onBlur와 onChange, onFocus 이벤트 핸들러를 제공한다.

select

submit 버튼에 대한 정보를 가지고 있으며 <input type="submit"> 태그를 만날 때 만들어진다.

• HTML 구문

  <select
          name="셀렉트명"
          size="화면에 표시할 메뉴 개수"
          multiple
          onBlur="처리할 명령이나 함수"
          onChange="처리할 명령이나 함수"
          onFocus="처리할 명령이나 함수">
          <option value="옵션값" selected>표시할 텍스트</option>
                  ...
          <option value="옵션값">표시할 텍스트</option>
  </select>

• 기본 형식

  options 프로퍼티를 추가하면 select 객체에 있는 특정 옵션에 접근할 수 있다. 이 프로퍼티는 실제로는 option으로 된 배열이고 그 인덱스는 0부터 시작한다. 따라서 select 객체의 첫 번째 옵션에 접근하려면 기본 형식의 마지막 줄같이 사용하면 된다. 
  (window.)document.폼 이름.셀렉트 이름
  (window.)document.폼 이름.elements[인덱스]
  (window.)document.forms[인덱스1].셀렉트 이름
  (window.)document.forms[인덱스].elements[인덱스]
  (window.)document.폼 이름.셀렉트 이름.options[0]

• 프로퍼티

• length
  length 프로퍼티를 사용하면 select 객체의 option 개수를 알 수 있다. 이 값은 options 객체의 length 프로퍼티를 통해서도 알 수 있다.
• name
  select 영역의 이름을 지정한다. <select> 태그의 name 속성을 반영한다.
• option
  보통 options 배열에는 select 객체(<select>)의 각 옵션(<option>) 항목들이 저장된다. 예를 들어, 문서에서 첫 번째 폼의 첫 번째 요소가 select 객체이고 이 객체에 3개의 옵션이 있다고 가정한다면 옵션 항목에 접근할 때 다음과 같이 사용한다.
      document.forms[0].elements[0].options[0]
      document.forms[0].elements[0].options[1]
      document.forms[0].elements[0].options[2]
• selectedIndex
  selectedIndex 프로퍼티는 select 객체에서 selected 속성이 있는 옵션의 인덱스를 가지고 있다. 즉 selectedIndex 프로퍼티를 사용하면 선택한 옵션이 몇 번째인지 알 수 있다. select 객체의 옵션은 정의한 순서대로 인덱스가 정해지고 그 순서에 따라 options 배열에 저장된다. 또한 자바스크립트에서 selectedIndex 값을 조절해서 select 객체의 상태를 수정할 수 있다.

• 메서드

  select 객체가 할 수 있는 동작, 즉 메서드는 blur()와 focus()뿐이다. blur()는 콤보 메뉴에서 포커스를 해제하는 것이고, focus()는 콤보 메뉴에서 포커스를 지정하는 것이다.

• 이벤트 핸들러

• onBlur
  객체에서 포커스를 제거했을 때 실행할 함수를 연결한다.
• onFocus
  콤보 메뉴로 포커스를 지정했을 때 실행할 함수를 연결한다.
• onChange
  사용자가 옵션을 선택하면 실행할 함수를 연결한다.

• options 배열 프로퍼티

• defaultSelected
  defaultSelected 프로퍼티는 논리값을 가지는데 특정 항목이 처음부터 선택되어 있었다면, 즉 그 항목의 <option> 태그에 selected 속성이 있었다면 defaultSelected가 true가 되고 그렇지 않을 경우에는 false가 된다.
  defaultSelected의 값은 처음에는 <option> 태그 안에 selected 속성이 있는지에 따라 결정되지만 자바스크립트를 사용해서 그 값을 수정할 수도 있다.
• index
  select 객체에서 한 옵션의 index 프로퍼티는 선택 목록 중에서 객체의 위치를 알려주는 숫자이며, 이 숫자는 0부터 시작한다.
  다음 첫 문장처럼 '인덱스'값을 보고 이미 몇 번째 옵션 항목인지를 알게 되기 때문에 굳이 두 번째 문장처럼 index를 붙여 옵션의 인덱스값을 따로 알아낼 필요가 없다. 따라서 보통 index 프로퍼티는 사용하지 않는다.
      document.셀렉트 이름.options[인덱스]
      document.셀렉트 이름.options[인덱스].index
• length
  select 객체의 length 프로퍼티와 같다.
• selected
  selected 프로퍼티는 select 객체에 있는 옵션의 현재 상태를 나타내는 논리값을 가진다. select 객체에 있는 옵션(셀렉트 이름.options[인덱스])이 선택되면 selected 프로퍼티가 true가 되고 그렇지 않을 경우에는 false가 된다. 그리고 이 값은 언제든지 수정할 수 있다.
• text
  <option> 태그의 메뉴명을 표시한다.
• value
  value 프로퍼티는 <option> 정의에 있는 value 속성을 반영한다. 이 프로퍼티에 다른 값을 지정하면 초기 value 값 대신 새로 지정한 값을 사용할 수 있다.

• 생성자를 이용해 Option 객체 만들기

  <select> 태그와 <option> 태그를 사용해서 콤보 메뉴의 초기 모습을 만들 수 있지만 여기에 option 생성자(constructor)를 이용하면 새로운 옵션 항목을 추가할 수 있다.
  
  var 옵션이름 = new Option(optionText, optionValue, defaultSelected, selected)
  
  
• optionText
  콤보 메뉴에 표시할 메뉴 이름이다.
• optionValue
  옵션의 value 프로퍼티이다.
• defaultSelected
  옵션의 defaultSelected 프로퍼티이다.
• selected
  옵션의 selected 프로퍼티이다.

option

submit 버튼에 대한 정보를 가지고 있으며 <input type="submit"> 태그를 만날 때 만들어진다.

hidden

폼의 히든 필드에 대한 정보를 가지고 있으며 <input type="hidden"...>을 만날 때마다 객체가 만들어진다.
hidden 객체는 웹 페이지 상에서는 보이지 않지만 <submit> 버튼을 클릭해서 폼을 서버로 넘길 때 히든 필드에서 지정한 값을 함께 넘겨주는 기능을 한다.

• HTML 구문

  <input
      type="hidden"
      name="히든 필드 이름"
      value="기본값"
  >

• 기본 형식

  (window.)document.폼명.히든 필드 이름
  (window.)document.폼 이름.elements[인덱스]
  (window.)document.forms[인덱스].히든 필드 이름
  (window.)document.forms[인덱스].elements[인덱스]

• 프로퍼티

• defaultValue
  히든 필드의 기본값을 지정한다.
• name
  히든 필드의 이름을 지정한다.
• value
  히든 필드의 값을 지정한다.

textarea

폼의 텍스트 영역에 대한 정보를 가지고 있으며 <textarea> 태그를 만날 때마다 객체가 하나씩 만들어진다.
text 객체가 텍스트 한 줄만 입력할 수 있는 반면, textarea 객체는 텍스트를 여러 줄 입력할 수 있다. 이 점만 제외하면 textarea 객체와text 객체는 모든 면에서 비슷하다.

button

폼의 버튼에 대한 정보를 가지고 있으며 <input type="button"...> 태그를 만날 때마다 하나씩 만들어진다.

• HTML 구문

  <input
          type="button" | "submit" | "reset"
          name="버튼 이름"
          value="버튼에 표시할 내용"
          onClick="처리 명령이나 함수"
  >

• 기본 형식

  (window.)document.폼 이름.버튼 이름
  (window.)document.폼 이름.elements[인덱스]
  (window.)document.forms[인덱스].버튼 이름
  (window.)document.forms[인덱스].elements[인덱스]

• 프로퍼티

• name
  버튼 요소의 이름을 지정한다. 웹 문서에 삽입된 버튼이 많을 경우 name 프로퍼티값을 이용해 버튼을 구분한다.
• value
  버튼에 표시할 내용을 지정한다.

• 메서드

• blur()
  버튼에서 포커스를 제거한다.
• click()
  버튼을 클릭한다.
• focus()
  버튼에 포커스를 지정한다.

• 이벤트 핸들러

• onBlur
  객체에서 포커스를 제거했을 때 실행할 함수를 연결한다.
• onClick
  객체를 클릭했을 때 실행할 함수를 연결한다.
• onFocus
  객체에 포커스를 지정했을 때 실행할 함수를 연결한다.

submit

폼의 submit 버튼에 대한 정보를 가지고 있으며 <input type="submit"> 태그를 만날 때마다 만들어진다.
button과 사용법이 같다.

reset

폼의 reset 버튼에 대한 정보를 가지고 있으며 <input type="reset"> 태그를 만날 때마다 만들어진다.
button과 사용법이 같다.

checkbox

폼의 체크박스에 대한 정보를 가지고 있으며 <input type="checkbox"> 태그를 만날 때마다 만들어진다.

• HTML 구문

  <input
          type="checkbox"
          name="체크박스 이름"
          value="값"
          checked
          onClick="처리 명령이나 함수"
  >

• 기본 형식

  (window.)document.폼 이름.체크박스 이름
  (window.)document.폼 이름.elements[인덱스]
  (window.)document.forms[인덱스].체크박스 이름
  (window.)document.forms[인덱스].elements[인덱스]

• 프로퍼티

• checked
  체크박스의 체크 상태를 지정한다.
• defaultChecked
  초기의 체크 상태를 지정한다.
• name
  체크 박스의 이름으로, <input> 태그의 name 속성과 같다.
• value
  체크 박스에 할당된 값으로, <input> 태그의 value 속성과 같다.

• 메서드

• click()
  버튼을 클릭한다.

• 이벤트 핸들러

• onClick
  객체를 클릭했을 때 실행할 함수를 연결한다.

area

웹 문서에 이미지맵에 있는 영역 정보를 가지고 있는 객체로, <area> 태그를 만날 때마다 만들어진다.

form

웹 문서에 폼이 사용되었을 때 폼 전체에 대한 정보를 저장한다. <form> 태그를 만날 때마다 만들어진다.

• 기본 형식

  document.폼 이름.프로퍼티 이름

• <form> 태그와 관련된 프로퍼티

  • action : submit 버튼을 클릭했을 때 실행할 프로그램을 지정한다.
  • name : 폼의 이름을 지정한다.
  • method : 폼에 입력된 정보를 전송하는 방식을 지정한다.
  • target : action에서 지정한 프로그램의 실행 결과를 표시할 대상을 지정한다.

• <form> 태그와 관련 없는 프로퍼티 - elements / length 프로퍼티

  • elements : <form> 태그 안에 삽입된 폼 요소들을 배열 형태로 저장한다.
    • 기본 형식
      document.폼 이름.elements[인덱스]
    • 프로퍼티
      <input type="text" name="mytext" size="10 maxlengh="20">
      <input type="button" name="mybutton" value="버튼">
      
      document.test.elements[0].type -> 값 : text
      document.test.elements[0].name -> 값 : mytext
      document.test.elements[0].size -> 값 : 10
      document.test.elements[0].maxlength -> 값 : 20
      document.test.elements[1].type -> 값 : button
      document.test.elements[1].name -> 값 : mybutton
      document.test.elements[1].value -> 값 : 버튼
  • length
    <form> 태그 안에 삽입된 폼 요소의 개수를 지정한다.
    • 기본형식
      document.폼 이름.length

• form 객체 메서드

• submit : 사용자가 폼 요소에 입력한 내용들을 action에서 지정한 프로그램으로 넘겨준다.
• reset : 사용자가 폼 요소에 입력한 내용들을 모두 지운다.

applet

애플릿에 대한 정보를 가지고 있으면 <applet> 태그를 만날 때마다 만들어진다.

layer

익스플로러 DHTML에서 사용하는 레이어 정보를 가지고 있다.

anchor

웹 문서 안의 앵커 정보를 가지고 있으며 <a name="..."> 태그마다 anchor 객체가 하나씩 만들어진다.

문서 안의 앵커 개수 확인하기 

• length 프로퍼티 
  anchors 객체에는 length라는 프로퍼티가 있는데 이 프로퍼티에는 문서 안의 앵커 개수 정보가 들어 있다.
  
  <a name="music"></a>    <!-- 앵커 삽입 -->
  <h3>비오는 압구정></h3>
  
  document.anchors(0)        <!-- 0번째 앵커 music -->

text

폼의 텍스트 필드에 대한 정보를 가지고 있는 객체로 <input type="text"...> 태그를 만날 때마다 객체가 하나씩 만들어진다.

HTML 구문

• <input type="text" name="텍스트 필드 이름" value="초기값" size="정수값" maxlength="정수값" onBlur="처리 명령 또는 함수" onChange="처리 명령 또는 함수" onFocus="처리 명령 또는 함수" onSelect="처리 명령 또는 함수">

기본 형식

• (window.)document.폼 이름.텍스트필드 이름
  (window.)document.폼 이름.elements[인덱스]
  (window.)document.forms[인덱스].텍스트필드 이름
  (window.)document.forms[인덱스].elements[인덱스]

프로퍼티

• <input> 태그로 텍스트 필드를 삽입할 때 사용하는 속성들이 그대로 text 객체의 프로퍼티가 된다. 

defaultValue

• HTML 태그에서 따로 값을 지정하지 않을 경우 텍스트 필드 안에 표시할 기본값을 지정한다.
• name
  텍스트 필드의 이름을 지정한다.
• value
  사용자가 텍스트 필드에 입력하는 내용을 저장한다.

메서드

• focus()
  텍스트 필드에 포커스를 지정한다. 포커스가 지정되면 텍스트 필드 안에 커서가 깜빡거리면서 텍스트를 입력할 수 있는 상태가 된다.
• blur()
  텍스트 필드에서 포커스를 제거한다.
• select()
  텍스트 필드 안의 텍스트를 선택한다.

이벤트 핸들러

• onBlur
  텍스트 필드에서 포커스가 제거되었을 때 실행할 명령이나 함수를 연결한다.
• onChange
  텍스트 필드에서 텍스트가 변경되었을 때 실행할 명령이나 함수를 연결한다.
• onFocus
  텍스트 필드에 포커스가 지정되었을 때 실행할 명령이나 함수를 연결한다.
• onSelect
  텍스트 필드의 텍스트가 선택되었을 때 실행할 명령이나 함수를 연결한다.

password

폼의 패스워드 필드에 대한 정보를 가지고 있으며 <input type="password"...> 태그를 만날 때마다 객체가 만들어진다.
password 필드가 입력 내용을 '*' 로 바꿔서 보여준다는 점만 빼면 text 객체의 프로퍼티, 메서드, 이벤트 핸들러와 같다.

plugin

브라우저에 설치된 플러그인 정보를 저장하고 있는 객체. 플러그인 하나마다 객체가 만들어진다.

mimetype

브라우저의 마임(MIME) 지원 정보를 가지고 있는 객체.

image

웹 문서에 삽입된 이미지 정보를 가지고 있는 객체로, <img> 태그를 만날 때마다 만들어진다.

• 기본형식

  • document.images(인덱스)
  • document.이미지명
    image 객체는 웹 문서에 삽입된 모든 이미지를 탐색하여 이미지의 src와 크기 및 다른 정보들을 넘겨받고 저장한다. 문서 안에 여러 이미지가 있을 수 있으므로 이미지 정보들은 배열 형태로 저장하는데 이때 images라는 배열을 사용하게 된다.

• 프로퍼티

  • align : 이미지의 정렬 방법을 지정한다.
  • border : 이미지의 테두리 선을 표시한다. border 값이 0이면 테두리 선을 표시하지 않는다.
  • complete : 이미지 전송 완료 여부(true값과 false값만 사용할 수 있음)를 지정한다.
  • height : 이미지의 세로 길이를 지정한다.
  • hspace : 이미지의 좌우 여백을 지정한다.
  • lowsrc : 저해상도 이미지를 사용할 경우 저해상도 이미지의 위치를 지정한다.
  • name : 이미지에 대한 이름을 지정한다.
  • src : 이미지의 소스 파일을 지정한다.
  • vspace : 이미지의 상하 여백을 지정한다.
  • width : 이미지의 가로 길이를 지정한다.

link

웹 문서의 하이퍼링크 정보를 가지고 있는 객체로, <a href="..."> 태그를 만날 때마다 만들어진다.

하나의 웹 문서에 링크가 여러 개 있기 때문에 링크 정보는 links라는 배열 형태로 저장된다.

• 기본 형식 : document.links(인덱스)

  이렇게 저장된 링크의 개수는 document.links.length 프로퍼티를 사용해 알 수 있다.

• 프로퍼티

  • hash : 표식 이름을 지정한다.
  • host : 링크에 연결된 URL과 호스트 이름, 포트 번호를 지정한다.
  • hostname : 링크에 연결된 URL과 호스트 이름을 지정한다.
  • href : 링크에 연결된 URL을 지정한다.
  • pathname : 폴더 경로를 지정한다.
  • port : 포트 번호를 지정한다.
  • protocol : 프로토콜 종류를 지정한다.
  • search : 검색 엔진을 불러온다.
  • target : 지정된 URL 문서를 어디에 보여줄 것인지 표시한다.

location

현재 문서에 대한 URL 정보를 가지고 있는 객체

• 프로퍼티

  • hash : 책갈피 이름을 지정한다.
  • host : URL과 호스트 이름, 포트 번호를 지정한다.
  • hostname : URL과 호스트 이름을 지정한다.
  • href : URL을 지정한다.
  • pathname : 링크의 경로를 지정한다.
  • port : 포트 번호를 지정한다.
  • protocol : 프로토콜 종류를 지정한다.
  • search : 검색 엔진을 호출한다.

• 메서드

  • reload()
    문서를 다시 읽어온다.
  • replace()
    현재 문서를 다른 URL의 문서로 바꾼다.

document

웹 문서마다 하나씩 만들어지는 객체로 <body> 태그에 의해 만들어진다. HTML 문서에 대한 정보를 가지고 있다.

• 프로퍼티

  • anchors : 책갈피를 지정한다.
  • applets : 웹 문서 안의 자바 애플릿을 참조한다.
  • bgColor : 웹 문서의 배경색을 지정한다.
  • cookies : 쿠키값을 저장한다.
  • domain : 현재 서버의 도메인을 지정한다.
  • embeds : 플러그인을 설정한다.
  • fgColor : 글자색을 지정한다.
  • forms : 폼을 지정한다.
  • images : 이미지를 지정한다.
  • layers : 레이어를 지정한다.
  • lastModified : 웹 문서의 최종 수정일을 지정한다.
  • links : 링크를 지정한다.
  • location : 현재 문서의 주소를 지정한다.
  • referrer : 현재 문서를 호출한 페이지의 주소를 지정한다.
  • title : 현재 문서의 제목을 지정한다.
  • URL : 현재 문서의 주소를 저장한다.

• 메서드

  • clear()
    문서 안의 내용을 깨끗이 지운다.
  • close()
    open() 메서드를 통해 기록하기 시작한 문서의 기록을 종료한다.
  • open()
    문서에 무엇인가를 기록하기 시작한다.
  • write()
    문서에 내용을 표시한다.
  • writeln()
    문서에 내용을 표시하되 메서드를 적용할 때마다 새로운 줄에 표시한다.

history

현재 창에서 사용자의 방문 기록을 저장하고 있는 객체

• 프로퍼티

  history 객체에는 방문했던 URL 주소의 개수를 저장하는 length 프로퍼티가 있다. 그런데 이 프로퍼티값은 익스플로러에서는 0부터 시작하고 넷스케이프나 파이어폭스에서는 1부터 시작하기 때문에 익스플로러에서는 history.length 값에 1을 더해야 URL주소의 개수가 된다.

• 메서드 

  history 객체가 방문했던 URL 정보를 저장하기 때문에 이 객체에서는 사용할 수 있는 메서드는 방문했던 URL을 앞뒤로 이동하는 것이다. 
  • back()
    브라우저 창의 <뒤로> 버튼을 누른 것처럼 히스토리에서 한 단계 뒤로 이동한다.
  • forward()
    브라우저 창의 <앞으로> 버튼을 누른 것처럼 히스토리에서 한 단계 앞으로 이동한다.
  • go()
    한 단계씩만 앞으로 오갈 수 있는 back() 메서드나 forward() 메서드와 달리 괄호 안에 지정한 숫자만큼 앞뒤로 옮길 수 있다.

window

브라우저 창이 열릴 때 마다 하나씩 만들어지는 객체, 브라우저 창 안에 존재하는 모든 요소의 최상위 객체.

• classes : 문서 안에 삽입된 class들의 정보를 저장한다.
  
• closed : 브라우저 창이 닫혔는지 나타낸다.
• defaultStatus : 상태 표시줄의 기본값을 지정한다.
• document : 현재 윈도우의 document 객체를 반환한다.
• frames : 윈도우에 있는 history 객체를 반환한다.
• length : 부모 창의 프레임 개수를 지정한다.
• location : 현재 창의 location 객체를 반환한다.
• name : 창의 이름을 지정한다.
• opener : 새 창에 열어준 부모 창을 선택한다.
• parent : 부모 창을 선택한다.
• self : 현재 창을 선택한다.
• status : 브라우저 창의 상태 표시줄을 선택한다.
• top : 최상위 창을 선택한다.
  

• 메서드

• open() 메서드 : 새 브라우저 창 열기
  window.open("팝업 창에 표시할 파일명", "창이름", "창의 스타일")
  window.open("popup1.htm", "pop", "scrollbars=no, location=yes, status")
  
  세 번째 매게변수에서 사용할 수 있는 옵션
• directories : 연결 표시줄의 표시 여부를 지정한다. (yes/no, 또는 1/0)
• width : 팝업 창의 너비(가로길이)를 지정한다. (픽셀값)
• left : 팝업 창의 왼쪽 좌표를 지정한다. (픽셀값)
• location : 주소 표시줄의 줄 표시 여부를 지정한다. (yes/no, 또는 1/0)
• menubar : 메뉴바의 표시 여부를 지정한다. (yes/no, 또는 1/0)
• resizable : 화면 크기 조절 가능 여부를 지정한다. (yes/no, 또는 1/0)
• scrollbars : 스크롤의 표시 여부를 지정한다. (yes/no, 또는 1/0)
• status : 상태 표시줄의 표시 여부를 지정한다. (yes/no, 또는 1/0)
• toolbar : 도구모음의 표시 여부를 지정한다. (yes/no, 또는 1/0)
• top : 팝업 창의 상단 좌표를 지정한다. (픽셀값)
• height : 팝업창의 높이(세로 길이)를 지정한다. (픽셀값)
• close() 메서드 : 브라우저 창 닫기
  window.close()
  <a href="#" onClick="javascript:window.close()">창 닫기</a>
  <a href="javascript:window.close()">창 닫기</a>
• moveBy() / moveTo() 메서드 : 창 위치 조절하기
  window.moveBy(가로 이동 거리, 세로 이동 거리)
  window.movtTo(가로 이동 거리, 세로 이동거리)
• resizeBy() / resizeTo() 메서드 : 창 크기 조절하기
  window.resizeBy(창 너비, 창 높이)
  window.resizeTo(창 너비, 창 높이)
• setTimeout() / clearTimeout() 메서드 : 시간과 관련된 동작 지정하기
  timerID = setTimeout(함수나 명령, 시간)
  clearTimeout(timerID)

navigator

현재 사용하는 브라우저에 대한 정보를 가지고 있는 객체.

• 프로퍼티

  navigator 객체의 프로퍼티는 몇 가지를 제외하면 익스플로러와 넷스케이프 양쪽 모두에서 사용할 수 있다. 다음은 navigator 객체의 프로퍼티이다.
  • appCodeName : 브라우저의 코드명을 표시한다.
  • appName : 브라우저의 종류를 표시한다.
  • appVersion : 브라우저의 버전을 표시한다.
  • platform : 사용하고 있는 운영체제의 시스템 환경을 표시한다.
  • userAgent : 브라우저의 정보를 표시한다.

• 메서드

• javaEnabled() : 자바를 지원하는지 확인하는 메서드로, 반환값은 true(자바 지원)과 false(자바 지원 안 함)이다.
• taintEnabled() : 브라우저가 손상되었는지 확인하는 메서드로, 반환값은 true(브라우저 고장)과 false(브라우저 정상)이다.

frame

프레임마다 하나씩 만들어지는 객체로 <frame> 태그마다 하나씩 만들어진다.

변수선언

동일한 var 키워드를 이용해 여러 개의 변수를 선언 할 수 있으며, 변수를 선언함과 동시에 초기화할 수도 있다.

var 변수이름 = 초깃값;

변수이름 = 초깃값;

var x;

var y = 10;

var a, b, c;

var i = 10, j = 10, k = 10;

초기값이 지정하지않으면 초기값은 undefined가 된다.

자바스크립트 변수는 어떤 자료형의 값도 담을 수 있으며 한 변수를 다른 타입의 값으로 할당 할 수 있다.

var id = 10;

id = "ten";

출력결과 ten

var 키워드 없이 변수를 선언하면 자동으로 전역 변수가 된다