목차
1. JavaScript의 객체
-
- Location(로케이션)객체
- protocol : 프로토콜(http, https, ftp)
- hostname : IP,도메인 과 포트번호
- pathname : 경로
- href : 페이지 정보 또는 페이지이동
- reload(): 페이지를 새로고침하는 기능
- history(히스토리) 객체
- history메소드
- back() : 뒤로
- forward(): 앞으로
- go(0) :새로고침
- history메소드
- navigator(네비게이터) 객체
- geolocation: GPS정보
- 문서 객체 모델(Document Object Model)
- document 객체
- getElementById(): 해당 아이디의 요소를 선택할때
- getElementsByTagName(): 해당 태그 이름의 요소를 모두 선택해준다.
- getElementsByClassName(): 해당 클래스에 속한 요소를 모두 선택해준다.
- getElementsByName(): 해당 name 속성값을 가지는 요소를 모두 선택
- querySelectorAll(): 선택자로 선택되는 요소를 모두 선택
- querySelector(): 선택자로 선택되는 요소를 선택
- document 객체
- Location(로케이션)객체
1. JavaScript의 객체
1-1.로케이션(Location) 객체
- 현재 브라우저에 표시된 HTML 문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용
protocol: 클론 포함하는 http, https, ftp 등 프로토콜 정보를 반환
hostname: 호스트 이름(도메인,IP)과 포트번호를 반환
pathname: URL 경로부분의 정보를 반환
href: 페이지 URL 전체 정보를 반환 또는 URL을 지정하여 페이지를 이동
reload(): 페이지를 새로고침하는 기능
<body>
<h2>로케이션 객체</h2>
<script>
console.log(`현재 문서의 URL 주소 : ${location.href}`);
console.log(`현재 문서의 protocol : ${location.protocol}`);
console.log(`현재 문서의 hostname : ${location.hostname}`);
console.log(`현재 문서의 pathname : ${location.pathname}`);
// href를 이용하여 해당 페이지로 이동 시키는 함수
function sendit(){
location.href = 'http://python.org'
}
</script>
<p><button onclick="sendit()">이동</button></p>
</body>
1-2 history 객체
- 브라우저의 히스토리 정보를 문서와 문서 상태 목록으로 저장하는 객체
- 사용자의 개인 정보를 보호하기 위해 이 객체의 대부분의 기능을 접근 제한했다.
🔹history메소드
back(): 페이지 뒤로 이동
forward(): 페이지 앞으로 이동
go(0): 새로고침(Location.reload와 같은기능 )
<body>
<h2>History</h2>
<button onclick="history.back()">뒤로</button>
<button onclick="history.forward()">앞으로</button>
<button onclick="history.go(0)">새로고침</button>
</body>
1-3 navigator 객체
- 브라우저 공급자 및 버전 정보 등을 포함한 브라우저에 대한 정보를 저장하는 객체
geolocation: GPS정보를 수신하는 프러퍼티
<body>
<h2>Navigator 객체</h2>
<script>
// getCurrentPosition에 집어 넣은 변수 이름으로 함수 생성하기!!
const success = function(loc){
console.log(loc.coords.latitude); // latitude위도
console.log(loc.coords.longitude);// longitude경도
}
const fail = function(msg){
console.log(msg.code); // 실패했을때 메세지 출력
}
// ( , ) 안에는 변수 이름을 내가 정할 수 있다 !
navigator.geolocation.getCurrentPosition(success, fail);
</script>
</body>위도 37.510... 경도 127.029....
1-4. 문서 객체 모델(Document Object Model)
- DOM 이라고 많이 부른다.
- HTML문서 또는 XML문서 등을 접근하기 위한 일종의 인터페이스 역할을 한다.
- 문서내의 모든 요소를 정의하고 각각의 요소에 접근하는 방법을 제공한다.
✔ document 객체
- 웹 페이지 자체(body)를 의미하는 객체
- 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때 반드시 document객체로부터 시작한다.
getElementById(): 해당 아이디의 요소를 선택할때
getElementsByTagName(): 해당 태그 이름의 요소를 모두 선택해준다.
getElementsByClassName(): 해당 클래스에 속한 요소를 모두 선택해준다.
getElementsByName(): 해당 name 속성값을 가지는 요소를 모두 선택
querySelectorAll(): 선택자로 선택되는 요소를 모두 선택
querySelector(): 선택자로 선택되는 요소를 선택
<body>
<h2>문서객체모델1</h2>
<ul>
<li name="makup">HTML</li>
<li>CSS</li>
<li id="javascript" class="js">JavaScript</li>
<li class="js">jQuery</li>
<li class="backend">Apache</li>
<li class="backend">Nginex</li>
<li id="nodejs" class="js"> Node.js</li>
<li id="react" class="js">React</li>
</ul>
<script>
// TagName이 'li' 애들을 찾아서 글자색 gold으로 변경 하기
const tagName = document.getElementsByTagName('li');
console.log(tagName);
for(let i=0; i<tagName.length; i++){
console.log(tagName[i]);
tagName[i].style.color = 'gold';
}
console.log('---------------');
// 에러코드
// for(let i in tagName){
// console.log(tagName[i]);
// tagName[i].style.color = 'gold';
// }
// console.log('---------------');
// classname이 'js'인 애들을 찾아서 글자색 deeppink로 변경하기
const className = document.getElementsByClassName('js');
for(let i=0; i<className.length; i++){
console.log(className[i]);
className[i].style.color = 'deeppink';
}
console.log('---------------');
// id가 'javascript' 애들을 찾아서 글자색 greenyellow로 변경하기.
const id = document.getElementById('javascript');
console.log(id);
id.style.color = 'greenyellow';
console.log('---------------');
// name이 'makup'로 접근하여 deepskyblue로 변경하기.
const name = document.getElementsByName('makup');
for(let i = 0; i<name.length; i++){
console.log(name[i]);
name[i].style.color = 'deepskyblue';
}
console.log('---------------');
// querySelector : li.backend(li태그의 class가 backend) 찾기
// 찾아 qs에 저장을 하고 qs안에 있는 애들을 for문으로 돌려
// 글자색 navy색상으로 변경하기
const qs = document.querySelectorAll('li.backend');
for(let i=0; i<qs.length; i++){
console.log(qs[i]);
qs[i].style.color = 'navy';
}
</script>
'개발 > JavaScript' 카테고리의 다른 글
| 2023.04.10 JavaScript의 함수작성법,객체활용 (0) | 2023.04.10 |
|---|---|
| 2023.04.07 JavaScript의 노드, 정규표현식 (0) | 2023.04.07 |
| 2023.04.06 JavaScript의 객체들(Math,String,date,Web API,Form) (0) | 2023.04.06 |
| 2023.04.06 사용자 정의 함수,객체,상속 (0) | 2023.04.06 |
| 2023.04.05 JavaScript의 배열 (0) | 2023.04.05 |
댓글