2019. 5. 27. 14:23ㆍJava script
-----------------------------자바스크립트 문자(String)-------------------------
String 속성의 옵션
length : 문자열의 길이를 반환한다.
substr(시작위치, 길이) : 시작위치부터 길이만큼 부분문자열을 반환한다.
substring(시작위치, 끝위치) : 시작위치부터 끝위치까지의 부분문자열을 반환한다.
toLowerCase(), toUpperCase() : 소문자/대문자로 변환된 문자열을 반환한다.
startsWith(키워드), endsWith(키워드) : 문자열이 해당 키워드로 시작하거나
해당 키워드로 끝나는지 여부를 반환
split(), split(구분문자) : 문자열을 공백이나 구분문자로 잘라서 배열에 담아 반환한다.
trim() : 불필요한 좌우 공백이 제거된 문자열을 반환한다.
indexOf(키워드), lastIndexOf(키워드)
문자열에서 지정된 키워드가 처음, 혹은 마지막으로 등장하는 위치를 반환한다.
replace(키워드, 교체할문자) : 문자열에서 키워드에 해당하는 문자를 찾아서 새문자로
바꾼 새로운 문자열 반환한다. (첫번째 문자열만 바뀐다.)
옵션
g : global 모두 찾는다.
i : case-insensitive 대소문자 안가린다.
모든 스트링 옵션
reverse() : 문자열을 뒤집는다.
예시) length 사용하기
예시) substr과 substring 사용하기
예시) toLowerCase(), toUpperCase() 사용하기
예시) startsWith(키워드), endsWith(키워드)
예시) split() 사용하기
예시) indexOf 사용하기
예시) replace 사용하기
---------------------------------------------브라우저 내장객체 , DOM----------------------------------
브라우저 내장객체
객체명 저장 저장위치
Windows 객체 ----> windows
--> HTML문서가 표시되는 브라우저 창과 관련된 속성과 기능 제공
창의 폭/높이/스크롤/이벤트 등을 다룰 때 사용
alert(), parseInt(), parseDouble() 등의 메소드를 제공한다.
Window객체를 제외한 나머지 브라우저 내장객체를 제공한다.
Document 객체 ----> document
--> 화면에 표시된 HTML문서와 관련된 속성과 기능 제공
HTML문서를 조작/검색할 때 사용
History 객체 ----> history
--> 웹페이지 방문 기록과 관련된 속성과 기능 제공
뒤로가기/앞으로가기 등을 수행할 때 사용
history.back(), history.forward()
Location 객체 ----> location
--> 주소표시줄과 관련된 속성과 기능 제공
자바스크립트를 사용해 특정 페이지로 이동해야 할 때 사용
location.href="이동할 주소"
Screen 객체 ----> screen
--> 모니터의 정보와 관련된 속성과 기능 제공
screen.width, screen.height 스크린의 크기를 조회할 때 사용
Navigater 객체 ----> navigator
--> 브라우저의 정보와 관련된 속성과 기능 제공
navigator.appName, navigator.appCodeName, navidator.platform
으로 브라우저 이름, 코드명, 운영체제 정보등을 조회할 때 사용
문서객체모델 (DOM)
xml 이나 html의 문서와 같이 태그로 이루어진 문서 속성과 기능에 대한 표준을 정의해 놓은것
웹서버에서 HTML 문서를 받아올 때 브라우저 실행 순서
//////////////////////////////////////////////Document 객체
Document 객체
- HTML 문서를 표현하는 객체
- 주요 속성과 메소드
- getElementById("아이디") --- 중요
지정된 아이디에 해당하는 엘리먼트객체를 반환한다.
- getElementsByTagName("태그이름")
지정된 태그이름에 해당하는 모든 엘리먼트를 반환한다.
- getElementsByName("이름")
폼요소의 name="이름" 속성이 지정된 이름에 해당하는 모든 엘리먼트를 반환한다.
- querySelector("CSS선택자") --- 중요
지정된 선택자에 해당하는 첫번때 엘리먼트를 반환한다.
- querySelectorAll("CSS선택자") --- 중요
지정된 선택자에 해당하는 모든 엘리먼트를 반환한다.
Element객체
- HTML 태그를 표현하는 객체
- 주요 속성
- textContent
태그내의 텍스트 컨텐츠를 반환한다.
- innerHTML
태그내의 HTML 컨텐츠를 반환한다.
- value
input, textarea, select, checkbox, radio인 경우 폼 요소의 값을 반환한다.
- checked
checkbox, radio인 경우 체크여부를 반환한다.
- parentElement
부모 엘리먼트를 반환한다.
- firstChildElement
첫번째 자식 엘리먼트를 반환한다.
- lastChildElement
마지막 자식 엘리먼트를 반환한다.
- previousElementSibling
형제 엘리먼트(이전)를 반환한다.
- nextElementSibling
형제 엘리먼트(다음)를 반환한다.
- style
스타일 객체를 반환한다.
- 주요 메소드
- getElementsByTagName("태그명")
- 현재 엘리먼트내에서 태그명에 해당하는 모든 엘리먼트를 반환한다.
- querySelector("CSS선택자")
- 현재 엘리먼트내에서 선택자에 해당하는 첫번째 엘리먼트를 반환한다.
- querySelectorAll("CSS선택자")
- 현재 엘리먼트내에서 선택자에 해당하는 모든 엘리먼트를 반환한다.
- getAttribute("속성명")
- 현재 엘리먼트에서 속성명에 해당하는 속성값을 반환한다.
- setAttribute("속성명", "속성값")
- 현재 엘리먼트에 속성/속성값을 추가한다.
- removeAttribute("속성명")
- 현재 엘리먼트에서 속성명에 해당하는 속성값을 삭제한다.
- addEventListener('이벤트', 콜백함수)
- 현재 엘리먼트에서 지정된 이벤트발생시 실행될 콜백함수를 등록한다.
예시1) 속성 찾기
예시1-2) 엘리먼트 조작하기
예시 2) input name을 찾기
