[코딩] Circle Square

 * Data객체
 - String
var s = new String("문자열");

s="문자열";

s.constructor
s.length                           : 문자열 길이 리턴
s.prototype 
s.charAt(0)                        : index번째 문자 리턴 (0,1,..)
s.indexOf('a')                     : 왼쪽부터 확인하여 문자와 일치하는 index 리턴, 없으면 -1
s.lastIndexOf('a')                : 오른쪽부터 확인하여 문자와 일치하는 index 리턴, 없으면 -1 
s.substring(start, end)          : start ~ end-1 index를 추출
s.substr(start, len)               : start에서 len개 만큼 추출
concat(s,s1,..)                     : 문자열 합치기 s+s1+..
s.toUpperCase()                 : 대문자 변환
s.toLowerCase()                  : 소문자 변환
s.split(구분자, 구분자의 개수) : 구분자로 s를 분리 
s.replace(a,b)                     : s에서 a를 b로 변경

 - Number
var n = new Number();

n.MIN_VALUE
n.MAX_VALUE
n.NaN : Not a number
n.toFixed(자리수)  : 지정된 소수점 자리수 만큼 문자열로 리턴
n.toString() : number -> string
n.valueOf() : 기본형으로 값을 리턴

 - Date
var d = new Date();

d.getFullYear()         : 연도 리턴
d.getMonth()+1       : 월 리턴. 0-1월
d.getDate()             : 일 리턴

d.getHours()            : 시간
d.getMinutes()          : 분
d.getSeconds()         : 초
d.getDay()               : 요일 리턴. 0-일요일
d.setMonth(7)
d.setDate(1)

 - Array
var arr = new Array();
arr = [1,2,3];

push(value)
pop()
reverse()
indexOf('a')
slice(start,end)
splice(index, delCount)
sort()
join()

 - Boolean
var b = new Boolean(1);

b.toString() => "true" or "false"
b.valueOf() => 기본값으로 리턴

 - Math

Math.abs(-21)                  : 절대값

Math.round(3.7)               : 올림
Math.ceil(3.7)                  : 버림
Math.floor(2.6)                 : 반올림
Math.floor(3.789*10)/10     : 원하는 소숫점 까지 표시
Math.max(10,20,30)           : max값
Math.min(10,20,30)           : min값
Math.random()                 : 0~1까지 랜덤값

 - Object
 var o = new Object();
 - RegExp

 * BOM(Browser Object Model)
 - window

window.document.name명.id
1) property
document
name
history
location
navigation
screen
opener
parent
self
top
moveTo()
print()
focus()
blur()                              : 포커스 제거


2) 대화상자
alert("a")                         : 알림창
prompt("값을 입력하세요")  : 사용자 입력창
confirm()                         : 확인창

3) popup
open("새로 open할 창의 path", "팝업창의 이름", "width=500, height=300,top=100, toolbar=yes,state=yes")
close()                                                                   : 닫기

opener                                                                  : 부모 객체
 
4) 데이터 처리
 parseInt("문자열")                  :  string -> number
 parseFloat("문자열");              : string -> number
 isNaN(값)                            : 입력한 문자열이 숫자인지 문자인지 판단.
 eval(값)                               : 매개변수로 전달된 데이터를 실제로 실행.(보안에 취약) 계산실행.
 data.trim()                           : 공백제거

5) 자동실행
setTimeout(함수, timeout ms시간)      : 한번 실행
setInterval(함수, timeout ms 시간)       : 반복 실행
clearTimeout(해체할 작업의 id)           :  매개변수로 전달된 작업id에서 참조하는 작업을 종료 

clearInterval(해체할 작업의 id)

 - Location
host
href
hostname
origin
port
protocol
assign(URL)
reload(bool) : F - 캐시(default), T - server
replace(URL)
 
 - form
text
password
checkbox
radio
selectedIndex
 
 - History : URL history
length
back()
forward()
go(number|URL)
 
 - Screen
availHeight : taskbar 제외
availWidth
height
width

 - Navigation : 브라우저 정보
appName
appVersion
cookieEnabled
language
onLine
product : engine
userAgent

* DOM(Document Object Model)

 - 구성요소

document   : dom 객체의 가장 상위객체
element     : html문서를 구성하는 컨텐츠
text           : 태그와 태그 사이에 입력한 문자열, 공백도 문자열 객체로 인식
attribute     : 태그내부에 정의되어 있는 속성

- 속성

firstChild             : 첫번째 자식 노드
lastChild             : 마지막 자식 노드
childNodes          : 특정노드의 모든 자식노드들을 반환. (배열)
nodeName          : 노드이 이름(엘리먼트명과 동일 - 텍스트노드인 경우 #text로 출력)
nodeType            : 1-요소, 2-속성, 3-내용
nodeValue
ownerDocument   : 최상위 요소
parentNode
previousSibling
nextSibling

- 메소드

getElementById("Id명")                               : id로 정의된 객체를 반환, 단일객체에 동적 작업을 수행
getElementsByClassName("class명")               : class명으로 정의된 객체를 반환(배열)
getElementsByTagName("태그명")                 : 태그명으로 정의된 객체를 반환(배열)
document.getElementById("result").innerHTML : HTML 속성 조회

document.getElementById("result").innerText   : Text 속성 조회
getAttribute("속성명")                                : 속성에 정의된 값이 리턴
setAttribute("속성명","값")                           : 선택한 객체에 속성과 속성값을 정의할 수 있다. 

- 노드 추가

1) 삽일될 노드를 생성(createElement or createTextNode)
createTextNode("텍스트") : 텍스트(문자열) 노드를 생성
createElement("엘리먼트명") : 엘리먼트(태그)를 생성

2) 삽입될 위치 구하기
어떤 노드의 하위노드로 추가될 지 알아야 하므로 삽입될 부모노드의 위치를 구하기

3) 노드를 추가
appendChild("노드명") : 매개변수로 정의된 노드를 삽입.(부모노드의 lastChild로 삽입)

insertBefore("추가될 노드명", "target노드명") : target 노드 뒤에 추가

부모노드.removeChild("노드명") : 노드를 삭제

부모노드.lastElementChild        : 공백무시 get
부모노드.hasChildNodes()        : child노드가 있으면 true, 없으면 false 리턴
cloneNode(option)                 : 노드 복사
hasAtrributes()
setAttributeNode()
querySelector()
querySelectorAll()
createAttribute()