css 속성

JAVA/CSS 2014. 9. 24. 15:31

글꼴 색과 배경관련속성

color : 글꼴색지정

background - color : 배경색 지정
background - image : 배경이미지 지정
background - repeat : 배경 이미지 반복
background - attachment : 배경 이미지 고정
background - position : 배경이미지 위치

background : 배경이미지 속성을 한번에 지정


글꼴 관련 속성

font - family : 글꼴의 종류를 지정

font - style : 글꼴의 스타일을 지정한다.

font - variant : 작은 대문자를 사용한다.

font - wright : 글꼴의 굵기를 지정한다.

font - size : 글꼴의 크기를 지정한다.

font : 글꼴 관련 속성을 한번에 지정


텍스트 관련 속성

text - indent : 들여쓰기를 지정
text - align : 텍스트 정렬 방식을 지정

text - decoration : 링크 등의 장식 효과를 지정
line - height : 줄의 간격을 지정한다.

letter - spacing : 문자 사이의 간격을 지정한다.

word - spacing : 단어 사이의 간격을 지정

text - transform : 영문 대소문자를 지정


목록 관련 속성

list - style - type : 목록 앞에 표시되는 순번이나 이미지 표식을 지정

list - style - image : 특정 이미지 파일로 목록을 이미지를 표시한다.

list - style - position : 목록과 이미지의 괴리를 표시한다.

list - style : 목록 관련 속성을 한번에 지정


바깥 여백과 관련된속성 (cm, %, auto)

margin - top : 바깥위쪽여백

margin - right : 바깥오른쪽여백

margin - bottom:바깥아래쪽여백

margin - left : 바깥왼쪽여백

margin : 바깥여백을 한번에 지정 4가지


안쪽 여백과 관련된 속성 (cm, %, auto)

padding - top : 내부위쪽여백

padding - right : 내부오른쪽여백

padding - bottom : 내부아래쪽여백

padding - left : 내부왼쪽여백

padding : 내부여백을 한번에 지정 4가지


테두리와 관련된 속성

width : 테두리의 굵기(thin, medium,thick, em)을 지정

color : 테두리의 색을 지정한다.

style : 테두리의 스타일을 지정한다.

전체지정 : 방향별 전체속성을 지정한다.

저작자표시 비영리 변경금지

'JAVA > CSS' 카테고리의 다른 글

CSS Div안에 Div 수평 수직 가운데정렬  (0) 2015.08.05
css 스타일 필터효과  (0) 2014.09.26
css 기타 스타일 (커서,스크롤바)  (0) 2014.09.26
css 정의하는방법(외부,내부,HTML태그내에 스타일지정)  (0) 2014.09.17
웹색상표  (0) 2014.09.04
블로그 이미지

왕왕왕왕

왕

,

자바 파일 입출력

JAVA/자바 2014. 9. 24. 01:13


파일 쓰기

#import java.io.*;

public class writer{

public static void main(String[] args) {


try{

BufferedWriter bw = new BufferedWriter(new FileWriter("text.txt"));

bw.write("hello");

bw.close();

}

catch(Exception e){

}

}

}


파일 읽기

#import java.io.*;

public class reader{

public static void main(String[] args) {


try{

File f = new File("test.txt");

FileReader fr = new FileReader(f);

BufferedReader br = new BufferedReader(fr);


String line = null;


while((line = br.readline()) != null) {

System.out.println(line);

}


br.close(); 

}

catch(Exception e){

}

}

}

저작자표시 비영리 변경금지

'JAVA > 자바' 카테고리의 다른 글

자바 클라이언트 기초소스  (0) 2015.03.19
자바 서버 기초소스  (0) 2015.03.19
콤보박스 항목리스트관련!!  (0) 2014.05.29
DefaultClose() 옵션  (0) 2014.05.26
JCombobox 항목추가  (0) 2014.05.21
블로그 이미지

왕왕왕왕

왕

,

css 정의하는방법(외부,내부,HTML태그내에 스타일지정)

JAVA/CSS 2014. 9. 17. 12:31

외부스타일시트

확장자 css를 가진 파일을 만들고 이파일을 HTML문서에 연결하여 사용하는 방법


<head>

<link rel = "stylesheet" type = "text/css" href="mystyle.css">

</head>


홈페이지 전체스타일 변경/유지가 일괄적으로 적용한다.


내부스타일시트

<head></head> 사이에 정의하는 방법


<head>

<style type="text/css">

<!--

body {font-size:9pt}

//-->

</style>

</head>


HTML태그내에 스타일 지정

스타일을 적용하고 싶은 태그안에 정의하는 방법


<p style="color:gray;"> 이문단의 색상을회색으로</p>



저작자표시 비영리 변경금지

'JAVA > CSS' 카테고리의 다른 글

CSS Div안에 Div 수평 수직 가운데정렬  (0) 2015.08.05
css 스타일 필터효과  (0) 2014.09.26
css 기타 스타일 (커서,스크롤바)  (0) 2014.09.26
css 속성  (0) 2014.09.24
웹색상표  (0) 2014.09.04
블로그 이미지

왕왕왕왕

왕

,

HTML Div 태그 및 속성

JAVA/HTML 2014. 9. 15. 22:12

Div 태그 속성


id : 객체를 구별하기 위해서 사용하며, 자바스크립트로 객체에 접근할 때 사용된다.


class : 설정된 같은 태그들 중에서 같은 모양의 style속성을 적용할 때 사용한다.


style : 레이아웃의 모양등에 관한 실제적인 설정을한다. 

    속성과 속성에 대한 값은 콜론(:)으로 구분하고, 각 속성의 구분은 세미콜론(:)으로 한다.


position : 위치를 정할 때 어떤 방식으로 선택할지 지정

  • absolute : 브라우저의 위치로 부터 위치가 시작이된다.
  • relative : 특정 엘리먼트로 부터 위치가 시작된다.

left, top : 문서내에서 레이어의 위치를 지정해준다. 레이어의 위치를 이동하거나 수정 할 수 있다.

left : y좌표(좌측기준)

top : x좌표(상단기준)


width : 레이어 너비

height : 레이어높이


overflow : 레이어속의 내용이 레이어보다 클경우 스크롤바생성

  • auto : 내용이 클 경우에만 스크롤이 생성된다.
  • hidden  : 지정된 크기에서 벗어나는 부분은 보이지 않는다.
  • scroll : 내용의 크기와 상관없이 스크롤바가 생성된다.
  • visible : 정해진 크기와 상관없이 내용을 모두 보여준다.


visibility ; 레이어를 보여줄지 말지를 결정하는 속성(visible,hidden,inherit)


z-index : 레이어의 겹치는 순서를 설정한다. 수치가 클수록 상위에 위치


background-color : 레이어의 배경색


background-repeat : 배경 이미지의 반복여부

  • repeat : xy방향모두
  • repeat-x : x방향만
  • repeat-y : y방향만
  • no-repeat : 반복하지않는다.

backgournd-attachment : 문서가 스크롤 될때 배경 이미지의 스크롤 여부 지정

  • fixed : 대상이 스크롤이 되더라도 배경 이미지는 고정
  • scroll : 대상이 스크롤이 되면 배경 이미지도 스크롤이 된다.

font-size : 레이어 안쪽에서 작성될 글자 크기를 설정한다.


color : 레이어 안쪽에서 사용되는 글자의 색상을 설정한다.


padding : 여백에 관한 속성

  • padding-top : 상 
  • padding-right : 우
  • padding-bottom : 하
  • padding-left : 좌

filter : 레이어에 적용되는 필터 속성을 지정한다.

  • alpha : 투명도 설정 style = "filter:alpha(opacity = 50)"
  • blur : 빠르게 움직이는 물체를 촬영한효과 style = "filter:blur(direction = 135, strength = 30"
  • chroma : 특정 색상을 투명하게 style = "filter:chroma(color=yellow)"
  • dropshadow : 그림자 효과 style = "filter:dropshadow(color = gray, offx = 3, offy=3, positive = 0"
  • flipH : 수평방향으로 반사되어 비치는 효과 style = "filter:flipH()"
  • flipV : 수직방향으로 반사되어 비치는 효과 style = "filter:flipV()"
  • glow : 경계선 바깥쪽에 색번짐 효과 style = "filter:glow(color = cornflowerblue, strength = 8)"
  • gray : 대상을 흑백으로 표현 style = "filter:gray()"
clip : 레이어의 실제 크기에서 일부부만 보여주고자 할때 사용한다.
style = "clip:rect(0,282,100,0)"   - 상 , 우 , 하, 좌 순서이다.

border :  레이어의 테두리를 설정한다. (테두리크기,테두리형태,테두리색상) 순서다.

display : 레이어가 화면에 보이게 할지 숨길지 설정한다.  (none 또는 block)









저작자표시 비영리 변경금지

'JAVA > HTML' 카테고리의 다른 글

HTML 폼을 구성하는 태그들(form,input,option,textarea,select)  (0) 2014.08.04
HTML기본태그 Frameset ,Frame, Iframe  (0) 2014.06.23
HTML기본태그 테이블태그(Table,Tr(Th,Td))  (0) 2014.06.23
HTML기본태그 이미지,사운드(img,embed,a)  (0) 2014.06.22
HTML기본태그 목록태그(ol,ul,dl,blockquote,)  (0) 2014.06.22
블로그 이미지

왕왕왕왕

왕

,

자바스크립트 내장객체 array,date,function,math,number,screen,string

JAVA/자바스크립트 2014. 9. 4. 17:34

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(시작 인덱스, 길이)


저작자표시 비영리 변경금지

'JAVA > 자바스크립트' 카테고리의 다른 글

자바스크립트 내장함수,재귀함수  (0) 2014.09.26
자바스크립트 조건 연산자  (0) 2014.09.26
자바스크립트 내장객체 radio,fileUpload,select,option  (0) 2014.09.04
자바스크립트 내장객체 hidden,textarea,button,submit,reset,checkbox  (0) 2014.09.04
자바스크립트 내장객체 plugin,mimetype,image,link  (0) 2014.09.04
블로그 이미지

왕왕왕왕

왕

,

자바스크립트 내장객체 radio,fileUpload,select,option

JAVA/자바스크립트 2014. 9. 4. 17:33

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"> 태그를 만날 때 만들어진다.



저작자표시 비영리 변경금지

'JAVA > 자바스크립트' 카테고리의 다른 글

자바스크립트 조건 연산자  (0) 2014.09.26
자바스크립트 내장객체 array,date,function,math,number,screen,string  (0) 2014.09.04
자바스크립트 내장객체 hidden,textarea,button,submit,reset,checkbox  (0) 2014.09.04
자바스크립트 내장객체 plugin,mimetype,image,link  (0) 2014.09.04
자바스크립트 내장객체 location,document,history  (0) 2014.09.04
블로그 이미지

왕왕왕왕

왕

,

자바스크립트 내장객체 hidden,textarea,button,submit,reset,checkbox

JAVA/자바스크립트 2014. 9. 4. 17:32

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
      객체를 클릭했을 때 실행할 함수를 연결한다.



저작자표시 비영리 변경금지

'JAVA > 자바스크립트' 카테고리의 다른 글

자바스크립트 내장객체 array,date,function,math,number,screen,string  (0) 2014.09.04
자바스크립트 내장객체 radio,fileUpload,select,option  (0) 2014.09.04
자바스크립트 내장객체 plugin,mimetype,image,link  (0) 2014.09.04
자바스크립트 내장객체 location,document,history  (0) 2014.09.04
자바스크립트 내장객체 window,navigator,frame  (0) 2014.09.04
블로그 이미지

왕왕왕왕

왕

,

자바스크립트 내장객체 plugin,mimetype,image,link

JAVA/자바스크립트 2014. 9. 4. 17:30

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 문서를 어디에 보여줄 것인지 표시한다.



저작자표시 비영리 변경금지

'JAVA > 자바스크립트' 카테고리의 다른 글

자바스크립트 내장객체 radio,fileUpload,select,option  (0) 2014.09.04
자바스크립트 내장객체 hidden,textarea,button,submit,reset,checkbox  (0) 2014.09.04
자바스크립트 내장객체 location,document,history  (0) 2014.09.04
자바스크립트 내장객체 window,navigator,frame  (0) 2014.09.04
자바스크립트 변수와 연산자  (0) 2014.09.04
블로그 이미지

왕왕왕왕

왕

,

공지사항

태그목록

글 보관함

달력

«   2024/07   »
일 월 화 수 목 금 토
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

티스토리툴바