4_javascript_(정리)
@script 태그의 내용이 function으로 감싸져 있지않으면
html 페이지로딩 과정에서 실행됨
@innerHTML : 자바스크립트에서 태그 요소의 값을
읽거나 변경할때 사용하는 속성
@window.alert() : 경고창
@window.console.log() : 콘솔
@window.confirm() : 질문에 대한 true/false 결과얻을때사용
@window.prompt() : 텍스트입력상자 text를 반환
@배열로 요소에 접근가능
@전역변수 호출시 this. 또는 window. 으로 호출가능
@내장객체 String의 메소드(문자)
-toUpperCase(), toLowerCase(), length
-indexOf(""), lastIndexOf(""), charAt("")
-substring(시작인덱스, 끝인덱스)
-split("")
@내장객체 Math의 메소드(숫자)
-abs(), random(), round(), floor, ceil(), infinity, NaN
@문자열 ==> 숫자 형변환
-parseInt(), praseFloat(), Number();
@배열 메소드(함수)
-indexOf(), 배열명.concat(배열명...)
-toString(), join("")
-sort(), reverse() //원본까지 변경
-push() / pop() //원본까지 변경
-shift() / unshift() //제거/추가
-slice(시작인덱스, 종료인덱스); //시작인덱스 이상,종료미만
// 원본에 영향없음
-splice(시작인덱스, 제거할요소수, 대체값)
// 원본에 영향을 미침
@함수에서 매개변수값을 여러개 넣을수 있지만
하나만 받고 있다면 나머지 매개변수는 무시됨
@모든 함수 내부에는 arguments라는 객체가 자동생성됨
arguments는 전달된 매개변수를 배열형태로 저장함
★ this
변수를 가르키는 this : 전역변수 this
생성자 함수 this : 자신의 객체
이벤트핸들러안에서 this : 이벤트가발생한요소
@ 클로저 : 특정 함수안에 지역변수가 선언되어 있고
특정함수안에 내부함수에서 지역변수를 사용하고
내부함수를 리턴하면 지역변수의 scope가 사라지지않고
남아있음 리턴하는 내부함수를 클로저라하고
이때 살아있는 변수를 자유변수라고 함
@ 자바스크립트 객체는 key:value(속성) 형태
@ 접근방법1 : 객채명.key
@ 접근방법2 : 객채명['key'] // 객체명['key']['index']
@ 객체의 속성에 순차적접근 (for in 문) 에서
객체명.key값으로 접근하게되면 객체명.'key'로 되기때문에
접근이 안됨 객체명[key]로 접근해야됨
@ 객체키워드
(속성 in 객체): 객체내부속성존재확인
with(객체) {} : 객체호출시 객체명생략
@ 객체관련키워드
(객체명 instanceof 생성자명) true/false
@object 객체의 기본 메소드
hasOwnProperty() : 속성을 가지고 있냐?
propertyIsEnumerable() : 반복문가능하냐?
@constructor : 두대상을같은자료형으로취급하고싶을때
@toFixed() : 숫자를 고정 소수점자리로 나타낸 문자만듬
@시간 //요일//달/일//년//시간// GNT
@window 객체의 timer 관련메소드
@setTimeout(함수,ms) : 일정시간후 한번만 실행
★setInterval(함수,ms) : 특정내용을 주기적으로 반복
★clearInterval() : setInterval()을 중지하는 함수
@location : 브라우저의 주소창과 관련된 객체
location.href='' :이동
location.reload() : 새로고침
location.replace() : href와 같지만 뒤로이동이안됨
@eval() : 문자열을 자바스크립트 코드로 변환하는 함수
★DOM
@텍스트가 있는 노드
document.createElement(""); 요소생성
document.createTextNode(""); 텍스트 노드생성
변수.appendChild(텍스트노드변수); 요소에 텍스트노드연결
document.getElementById("").appendChild(변수); 출력
#innerHTML은 되지않음
@없는 노드
document.createElement(""); 요소생성
변수명.속성 = ""; (src, heightm width etc....)
document.getElementById("").appendChild(변수); 출력
@노드 삭제
document.getElementById("").lastChild.remove();
@고전 이벤트 모델
요소를 변수에 담아 변수.이벤트 = 이벤트핸들러 ;
@고전 이벤트 제거방법 이벤트핸들러에 : null값을 넣으면됨
@인라인 이벤트 모델 : 요소내부에 이벤트 작성
@기본이벤트제거 : 이벤트핸들러 수행결과 return false
이벤트에서도 return false 하게되면됨
@표준이벤트모델 : 하나의요소에 여러개 이벤트 설정가능
변수명.addEventListener("이벤트명","이벤트핸들러);
★정규식(new RegExp , /정규식/)
1) RegExp 메소드
- test() : 일치하는 값이 있으면 true/ 없으면 false;
- exec() : 일치하는 값이 있으면 제일 처음매칭된문자열반환
2) String 메소드
- match() : 일치하는 모든값을 반환
- replacce(regExp, "대체문자") : 일치하는 부분을 대체문자로
- search() : 일치하는 부분의 시작인덱스반환
- split() : 객체의 값을 구분자로하여 배열생성
@메타문자
[] : []안에 속한문자중 하나
^ : 시작
$ : 끝
+ : 한번 이상 반복
. : 개행문자를 제외한 모든 단일문자매칭->글자수제한
/^[ㄱ-ㅎㅏ-ㅣ가-힣] : 한글만
\d : 숫자
\w : 아무단어(숫자포함)
\s : 공백문자(띄어쓰기,줄바꿈,탭)
\D : 숫자아님
\W : 아무단어아님
\S : 공백문자아님
a+ : a가 적어도1개이상
a* : a가 0개 또는 여러개
a? : a가 0개 또는 1개
a{5} : a가 5개
a{2,} : a가 2개이상
a{,5} : a가 5개이하
@날짜관련기능은 Date() 내장객체에 들어있음