-
[JS] 자바스크립트 6일차 요점정리Frontend 2019. 2. 17. 22:05-URL 제어하기-
- 브라우저의 현재 URL 조회
var now_url = location.href;- 브라우저의 현재 페이지를 지정된 URL로 이동한다.
window.location = 'URL'location.href = 'URL'- 현재 페이지를 새로고침한다.
location.reload();- 웹 브라우저 history의 이전 페이지로 이동한다.
history.back();- 웹 브라우저 history의 다음 페이지로 이동한다.
history.forward();-웹 브라우저의 정보 조회-: 웹 브라우저의 이름, 버전정보, 운영체제 정보 등이 포함된 문자열 값var agent = navigator.userAgent;이 값에 특정 단어가 포함되어 있는지 여부를 판단하여 브라우저나 운영체제 종류, 모바일/PC 여부 등을 확인할 수 있다.var agent = navigator.userAgent;if (agent.indexOf('검사할 단어') > -1) {...처리 내용...}-타이머 처리-지정된 시간(1/1000초 단위)마다 한 번씩 콜백 함수를 반복 호출setInterval(function() {...구현 내용...}, 시간);지정된 시간(1/1000초 단위)만큼 딜레이 후 콜백 함수를 1회 호출setTimeout(function() {...구현 내용...}, 시간);# 활용 예시아래의 구문들을 <body> 태그에 onload 이벤트 형태로 적용5초 후 페이지 자동 새로고침setTimeout(function() {location.reload();}, 5000);5분에 한 번씩 페이지 새로고침function set_refresh() {setInterval(function() {location.reload();}, 5*60*1000);}<body onload="set_refresh()">5초 후 다른 페이지로 이동setTimeout(function() {location.href = "URL";}, 5000);↓↓↓↓↓ JQuery로 대체 가능 ↓↓↓↓↓-HTML 제어-#HTML 요소를 객체로 생성하기var mytag = document.getElementById("id속성값");#획득한 객체의 내부에 대한 내용 접근//내용 적용하기mytag.innerHTML = "...적용할 내용...";//적용된 내용 조회하기var content = mytag.innerHTML;#획득한 객체 CSS 속성 접근//내용 적용하기mytag.style.css관련_프로퍼티 = "값"//적용된 내용 조회하기var css = mytag.style.css관련_프로퍼티css관련 프로퍼티의 이름 규칙은 css에서 '-'로 표시되는 부분이 없어지고 대문자가 사용됨ex) [CSS] background-color ---> [JS] backgroundColor#획득한 객체의 CSS 클래스 접근//내용 적용하기mytag.ClassName = "값";//적용된 내용 조회하기var cls = mytag.ClassName;반응형'Frontend' 카테고리의 다른 글
[jQuery] 제이쿼리 1일차 요점정리 (252) 2019.02.17 [JS] 자바스크립트 7일차 요점정리 (252) 2019.02.17 [JS/DOM] 바닐라 자바스크립트로 간단한 To Do List 만들어보기 - 피드백추가 (254) 2019.02.16 [CSS] text-decoration: underline 간격 조금 띄우기 (252) 2019.02.15 [jQuery] 키보드 이벤트 (동시에 2개 키 누를 때 이벤트) (251) 2019.02.15 COMMENT