반응형
window객체
- 브라우저 안의 모든 요소가 소속된 객체, 최상위이기 때문에 어디서든 접근 가능
- 브라우저 창을 제어하는 다양한 메서드 제공
open
HTML
HTML
<body>
<h1>팝업창 띄우기</h1>
<input type="text" name="val01"/>
<button id="btn">팝업창</button>
</body>JavaScript
<script type="text/javascript">
window.onload=()=>{
//태그에 바로 이벤트를 익명함수 기능 정의
document.getElementById("btn").onclick=(event)=>{
alert(event.target.nodeName);
event.target.style.backgroundColor="yellow";
event.target.previousElementSibling.style.backgroundColor="blue";
var url="js14_pop.html";
var title="팝업창연습페이지";
var prop="width=400px, height=400px,top=150px,left=200px"
window.open(url,title,prop);
}
}
</script>
pop ,close
부모창에 있는 것을 자식 창에서 가지고 오고 싶을 때
부모를 가리키는 속성 -> opener : open()를 이용해서 페이지를 열어준 부모페이지를 나타낸다
HTML
<body>
<h1>팝업창</h1>
<span id="val"></span>
<button>닫기</button>
</body>JavaScript
<script type="text/javascript">
window.onload=()=>{
var val=window.opener.document.getElementsByName("val01")[0].value;
document.getElementById("val").innerHTML="<b>"+val+"</b>";
document.querySelectorAll("button")[0].onclick=()=>{
//팝업창 닫기
window.self.close();
}
}
</script>
기타 참고
onload
페이지 로딩될 때 이벤트<script type="text/javascript"> window.onload=()=>{ }onChange
select태그와 같이 다른 것을 선택할 때 이벤트 처리를 할 수 있는 메서드
onclick과 같이 마우스 이벤트 처리onBlur
DOM탐색시 클릭했을 때 기능 정의
onclick (event)에서 만약 클래스이름으로 받았을 때 실제로 클릭 된 것만 이벤트를 실행하기 위해서는 event.target으로 설정
HTML
<button class="btn1">팝업창</button>
<button class="btn1">팝업창</button>
JavaScript
document.getElementsByClassName("btn1").onclick=(event)=>{
alert(evetn.target);
}이 때는 내가 누른 버튼에서만 alert창이 작동
nodeName
해당 태그의 이름을 구해주는 메서드previousElementSibling (DOM)
event.target 앞의 요소에 대한 속성을 적용해 줄때 사용하는 메서드페이지안의 팝업창 생성속성은 , 로 구별
onload나 다른 이벤트 처리시 기본 세팅
var url="js14_pop.html"; var title="팝업창연습페이지"; var prop="width=400px, height=400px,top=150px,left=200px"select 태그
- 속성 : 선택여부(true/false)
- selectedIndex : 선택된 option의 인덱스 반환
- options :option태그들을 배열로 변환
반응형
'Front-end > Javascript' 카테고리의 다른 글
| (JavaScript)DOM -appendChild,insertBefore (0) | 2023.03.03 |
|---|---|
| (JavaScript)DOM탐색 속성 (0) | 2023.03.02 |
| (JavaScript)날짜 객체 (0) | 2023.02.27 |
| (JavaScript)로또 (0) | 2023.02.27 |
| (JavaScript)함수 (0) | 2023.02.23 |